chore: 优化演示代码

package.json

@@ -83,7 +83,7 @@
     "responsive-storage": "^2.2.0",
     "sortablejs": "^1.15.1",
     "swiper": "^11.0.5",
-    "typeit": "^8.8.0",
+    "typeit": "8.7.1",
     "v-contextmenu": "3.0.0",
     "v3-infinite-loading": "^1.3.1",
     "version-rocket": "^1.7.1",

pnpm-lock.yaml

@@ -111,8 +111,8 @@ dependencies:
     specifier: ^11.0.5
     version: 11.0.5
   typeit:
-    specifier: ^8.8.0
+    specifier: 8.7.1
-    version: 8.8.0
+    version: 8.7.1
   v-contextmenu:
     specifier: 3.0.0
     version: 3.0.0(vue@3.4.7)
@@ -2067,10 +2067,6 @@ packages:
     resolution: {integrity: sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==}
     dev: false
 
-  /@types/web-animations-js@2.2.16:
-    resolution: {integrity: sha512-ATELeWMFwj8eQiH0KmvsCl1V2lu/qx/CjOBmv4ADSZS5u8r4reMyjCXtxG7khqyiwH3IOMNdrON/Ugn94OUcRA==}
-    dev: false
-
   /@types/web-bluetooth@0.0.14:
     resolution: {integrity: sha512-5d2RhCard1nQUC3aHcq/gHzWYO6K0WJmAbjO7mQJgCQKtZpgXxv1rOM6O/dBDhDYYVutk1sciOgNSe+5YyfM8A==}
     dev: false
@@ -8469,11 +8465,9 @@ packages:
       is-typedarray: 1.0.0
     dev: false
 
-  /typeit@8.8.0:
+  /typeit@8.7.1:
-    resolution: {integrity: sha512-GQp6OW7vxro1HN3F7UPL0C2KzkGs8bFtUgmJSeK+xNhdofI40mkWxrBT2AXQwtS5Txkg7ttwplxvWCQxnUXyrw==}
+    resolution: {integrity: sha512-Bx/O4NMz10NWh9FWYtVwV4XwGHF9UDJfpCZPJRtw2/oUcahFAStU8J0t19aroPfTV6s1UlS5ICoqilOqmEnh2Q==}
     requiresBuild: true
-    dependencies:
-      '@types/web-animations-js': 2.2.16
     dev: false
 
   /typescript@5.3.3:

src/components/ReAnimateSelector/src/index.vue

@@ -72,6 +72,7 @@ function onMouseleave() {
 
 <template>
   <el-select
+    class="!w-[200px]"
     :model-value="inputValue"
     placeholder="请选择动画"
     clearable

src/components/ReIcon/src/Select.vue

@@ -121,7 +121,7 @@ watch(
 </script>
 
 <template>
-  <div class="selector w-[350px]">
+  <div class="selector w-[220px]">
     <el-input v-model="inputValue" disabled>
       <template #append>
         <el-popover

src/views/able/print/index.vue

@@ -81,10 +81,10 @@ const tableData: User[] = [
     <template #header>
       <div class="card-header">
         <span class="font-medium">打印功能（报表、图表、图片）</span>
-        <div>
+        <div class="flex">
           <el-select
             v-model="value"
-            class="m-2"
+            class="!w-[100px] mr-2"
             placeholder="Select"
             size="small"
           >
@@ -121,7 +121,7 @@ const tableData: User[] = [
           }
         }"
       >
-        <p class="font-medium pt-1">Table</p>
+        <p class="font-medium text-lg text-center">Table</p>
         <el-table
           border
           :data="tableData"
@@ -135,8 +135,6 @@ const tableData: User[] = [
         </el-table>
       </el-col>
 
-      <el-divider />
-
       <el-col
         v-motion
         :xs="11"
@@ -156,7 +154,7 @@ const tableData: User[] = [
           }
         }"
       >
-        <p class="font-medium pt-1">Echart</p>
+        <p class="font-medium text-lg text-center">Echart</p>
         <pieChart class="echart mt-[10px]" />
       </el-col>
 
@@ -179,11 +177,11 @@ const tableData: User[] = [
           }
         }"
       >
-        <p class="font-medium pt-1">Image</p>
+        <p class="font-medium text-lg text-center">Image</p>
         <img
-          src="https://avatars.githubusercontent.com/u/44761321?v=4"
+          src="https://pure-admin-utils.netlify.app/logo.png"
           alt="avatars"
-          class="img mt-[10px] w-[250px] h-[250px] m-auto"
+          class="img mt-[10px] m-auto"
         />
       </el-col>
     </el-row>

src/views/error/403.vue

@@ -24,7 +24,7 @@ const router = useRouter();
           opacity: 1,
           y: 0,
           transition: {
-            delay: 100
+            delay: 80
           }
         }"
       >
@@ -41,7 +41,7 @@ const router = useRouter();
           opacity: 1,
           y: 0,
           transition: {
-            delay: 300
+            delay: 120
           }
         }"
       >
@@ -58,7 +58,7 @@ const router = useRouter();
           opacity: 1,
           y: 0,
           transition: {
-            delay: 500
+            delay: 160
           }
         }"
         @click="router.push('/')"

src/views/error/404.vue

@@ -24,7 +24,7 @@ const router = useRouter();
           opacity: 1,
           y: 0,
           transition: {
-            delay: 100
+            delay: 80
           }
         }"
       >
@@ -41,7 +41,7 @@ const router = useRouter();
           opacity: 1,
           y: 0,
           transition: {
-            delay: 300
+            delay: 120
           }
         }"
       >
@@ -58,7 +58,7 @@ const router = useRouter();
           opacity: 1,
           y: 0,
           transition: {
-            delay: 500
+            delay: 160
           }
         }"
         @click="router.push('/')"

src/views/error/500.vue

@@ -24,7 +24,7 @@ const router = useRouter();
           opacity: 1,
           y: 0,
           transition: {
-            delay: 100
+            delay: 80
           }
         }"
       >
@@ -41,7 +41,7 @@ const router = useRouter();
           opacity: 1,
           y: 0,
           transition: {
-            delay: 300
+            delay: 120
           }
         }"
       >
@@ -58,7 +58,7 @@ const router = useRouter();
           opacity: 1,
           y: 0,
           transition: {
-            delay: 500
+            delay: 160
           }
         }"
         @click="router.push('/')"

src/views/permission/page/index.vue

@@ -53,7 +53,7 @@ function onChange() {
           <span>当前角色：{{ username }}</span>
         </div>
       </template>
-      <el-select v-model="username" @change="onChange">
+      <el-select v-model="username" class="!w-[160px]" @change="onChange">
         <el-option
           v-for="item in options"
           :key="item.value"

src/views/pure-table/high.vue

@@ -33,7 +33,7 @@ function tabClick({ index }) {
 
     <el-alert
       title="高级用法中所有表格都设置了 row-key ，后端需返回唯一值的字段，比如id 作用：1. 用来优化 Table
-      的渲染，尤其当字段在深层结构中；2. 防止拖拽后表格组件内部混乱（拖拽必须设置哦，坑都帮您们踩过啦 ❤️）"
+      的渲染，尤其当字段在深层结构中；2. 防止拖拽后表格组件内部混乱（拖拽必须设置）"
       type="info"
       :closable="false"
     />

src/views/pure-table/high/list.tsx

@@ -71,7 +71,7 @@ export const list = [
   {
     key: "watermark",
     content: rendContent("watermark"),
-    title: "水印（无法删除的水印哦🤓️）",
+    title: "水印",
     component: Watermark
   },
   {

src/views/pure-table/high/table-select/multiple/index.vue

@@ -20,7 +20,7 @@ const {
   <el-select
     ref="selectRef"
     v-model="selectValue"
-    class="w-[160px]"
+    class="!w-[200px]"
     placeholder="请选择"
     clearable
     multiple

src/views/pure-table/high/table-select/radio/index.vue

@@ -17,6 +17,7 @@ const {
   <el-select
     ref="selectRef"
     v-model="selectValue"
+    class="!w-[200px]"
     placeholder="请选择"
     clearable
   >

src/views/pure-table/high/watermark/columns.tsx

@@ -34,8 +34,8 @@ export function useColumns(waterRef: Ref) {
         font: "16px Microsoft YaHei",
         globalAlpha: 0.8,
         forever: true,
-        width: 252,
+        width: 240,
-        height: 80
+        height: 90
       });
     });
   });

src/views/pure-table/index.vue

@@ -20,13 +20,13 @@ function tabClick({ index }) {
         <span class="font-medium">
           平台二次封装 element-plus 的 Table ，完全兼容 Api
           并提供灵活的配置项以及完善的类型提醒，再也不用将代码都写在 template
-          里了，欢迎 Star
+          里了
           <el-link
             href="https://github.com/pure-admin/pure-admin-table"
             target="_blank"
             style="margin: 0 4px 5px; font-size: 16px"
           >
-            @pureadmin/table
+            @pureadmin/table 源码
           </el-link>
         </span>
       </div>

src/views/result/columns.tsx

@@ -6,56 +6,51 @@ export function useColumns() {
     {
       cellRenderer: () => {
         return (
-          <span class="flex items-center -mt-6">
+          <div class="w-full">
-            <iconify-icon-offline
+            <div class="flex items-center">
-              icon={CloseCircleLine}
-              color="#F56C6C"
-              width="18px"
-              height="18px"
-            />
-            <span class="ml-1 mr-4">您的账户已被冻结</span>
-            <a
-              href="javascript:void(0);"
-              class="flex items-center"
-              style="color: var(--el-color-primary)"
-            >
-              立即解冻
               <iconify-icon-offline
-                icon={ArrowRightSLine}
+                icon={CloseCircleLine}
-                color="var(--el-color-primary)"
                 width="18px"
                 height="18px"
               />
-            </a>
+              <span class="ml-1 mr-4">您的账户已被冻结</span>
-          </span>
+              <a
-        );
+                href="javascript:void(0);"
-      }
+                class="flex items-center"
-    },
+                style="color: var(--el-color-primary)"
-    {
+              >
-      cellRenderer: () => {
+                立即解冻
-        return (
+                <iconify-icon-offline
-          <span class="flex items-center -mt-8">
+                  icon={ArrowRightSLine}
-            <iconify-icon-offline
+                  color="var(--el-color-primary)"
-              icon={CloseCircleLine}
+                  width="18px"
-              color="#F56C6C"
+                  height="18px"
-              width="18px"
+                />
-              height="18px"
+              </a>
-            />
+            </div>
-            <span class="ml-1 mr-4">您的账户还不具备申请资格</span>
+            <br />
-            <a
+            <div class="flex items-center">
-              href="javascript:void(0);"
-              class="flex items-center"
-              style="color: var(--el-color-primary)"
-            >
-              立即升级
               <iconify-icon-offline
-                icon={ArrowRightSLine}
+                icon={CloseCircleLine}
-                color="var(--el-color-primary)"
                 width="18px"
                 height="18px"
               />
-            </a>
+              <span class="ml-1 mr-4">您的账户还不具备申请资格</span>
-          </span>
+              <a
+                href="javascript:void(0);"
+                class="flex items-center"
+                style="color: var(--el-color-primary)"
+              >
+                立即升级
+                <iconify-icon-offline
+                  icon={ArrowRightSLine}
+                  color="var(--el-color-primary)"
+                  width="18px"
+                  height="18px"
+                />
+              </a>
+            </div>
+          </div>
         );
       }
     }

src/views/result/fail.vue

@@ -26,7 +26,7 @@ const { columns } = useColumns();
     <PureDescriptions
       :columns="columns"
       title="您提交的内容有如下错误："
-      class="p-6 ml-10 mr-10 bg-[#fafafa] dark:bg-[#1d1d1d]"
+      class="p-6 w-[90%] m-auto bg-[#fafafa] dark:bg-[#1d1d1d]"
     />
   </el-card>
 </template>

src/views/result/success.vue

@@ -41,7 +41,7 @@ const columns = [
         </div>
       </template>
     </el-result>
-    <div class="p-6 ml-10 mr-10 bg-[#fafafa] dark:bg-[#1d1d1d]">
+    <div class="p-6 w-[90%] m-auto bg-[#fafafa] dark:bg-[#1d1d1d]">
       <PureDescriptions title="项目名称" :columns="columns" class="mb-5" />
       <el-steps :active="2">
         <el-step title="创建项目">

src/views/system/dept/index.vue

@@ -41,7 +41,7 @@ const {
           v-model="form.name"
           placeholder="请输入部门名称"
           clearable
-          class="!w-[200px]"
+          class="!w-[180px]"
         />
       </el-form-item>
       <el-form-item label="状态：" prop="status">

src/views/system/role/index.vue

@@ -49,7 +49,7 @@ const {
           v-model="form.name"
           placeholder="请输入角色名称"
           clearable
-          class="!w-[200px]"
+          class="!w-[180px]"
         />
       </el-form-item>
       <el-form-item label="角色标识：" prop="code">

src/views/system/user/index.vue

@@ -70,7 +70,7 @@ const {
             v-model="form.username"
             placeholder="请输入用户名称"
             clearable
-            class="!w-[160px]"
+            class="!w-[180px]"
           />
         </el-form-item>
         <el-form-item label="手机号码：" prop="phone">
@@ -78,7 +78,7 @@ const {
             v-model="form.phone"
             placeholder="请输入手机号码"
             clearable
-            class="!w-[160px]"
+            class="!w-[180px]"
           />
         </el-form-item>
         <el-form-item label="状态：" prop="status">
@@ -86,7 +86,7 @@ const {
             v-model="form.status"
             placeholder="请选择"
             clearable
-            class="!w-[160px]"
+            class="!w-[180px]"
           >
             <el-option label="已开启" value="1" />
             <el-option label="已关闭" value="0" />

src/views/tabs/index.vue

@@ -86,7 +86,7 @@ function onCloseTags() {
     <el-divider />
     <el-tree-select
       v-model="currentValues"
-      class="w-[300px]"
+      class="!w-[300px]"
       node-key="uniqueId"
       placeholder="请选择要关闭的标签"
       clearable