diff --git a/.eslintrc.js b/.eslintrc.js
index 31c239b6..72d4664b 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -22,7 +22,8 @@ module.exports = defineConfig({
     'plugin:vue/vue3-recommended',
     'plugin:@typescript-eslint/recommended',
     'prettier',
-    'plugin:prettier/recommended'
+    'plugin:prettier/recommended', 
+    '@unocss'
   ],
   rules: {
     'vue/script-setup-uses-vars': 'error',
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 3a9abed7..45156944 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,7 +1,5 @@
 {
   "typescript.tsdk": "./node_modules/typescript/lib",
-  "volar.tsPlugin": true,
-  "volar.tsPluginStatus": false,
   "npm.packageManager": "pnpm",
   "editor.tabSize": 2,
   "prettier.printWidth": 100, // 超过最大值换行
@@ -102,57 +100,35 @@
   "i18n-ally.displayLanguage": "zh-CN",
   "i18n-ally.enabledFrameworks": ["vue", "react"],
   "cSpell.words": [
-    "xingyu",
-    "yudao",
-    "unocss",
+    "brotli",
     "browserslist",
+    "codemirror",
+    "commitlint",
+    "cropperjs",
+    "echarts",
     "esnext",
-    "unplugin",
+    "esno",
+    "iconify",
+    "INTLIFY",
+    "lintstagedrc",
+    "logicflow",
+    "nprogress",
+    "pinia",
+    "pnpm",
     "qrcode",
     "sider",
-    "pinia",
-    "sider",
-    "nprogress",
-    "INTLIFY",
-    "stylelint",
-    "esno",
-    "vitejs",
     "sortablejs",
-    "codemirror",
-    "iconify",
-    "commitlint",
+    "stylelint",
+    "unocss",
+    "unplugin",
+    "unref",
     "videojs",
-    "echarts",
-    "wangeditor",
-    "cropperjs",
-    "logicflow",
+    "vitejs",
     "vueuse",
-    "zxcvbn",
-    "lintstagedrc",
-    "brotli",
-    "sider",
-    "pnpm"
-  ],
-  "vetur.format.scriptInitialIndent": true,
-  "vetur.format.styleInitialIndent": true,
-  "vetur.validation.script": false,
-  "MicroPython.executeButton": [
-    {
-      "text": "▶",
-      "tooltip": "运行",
-      "alignment": "left",
-      "command": "extension.executeFile",
-      "priority": 3.5
-    }
-  ],
-  "MicroPython.syncButton": [
-    {
-      "text": "$(sync)",
-      "tooltip": "同步",
-      "alignment": "left",
-      "command": "extension.execute",
-      "priority": 4
-    }
+    "wangeditor",
+    "xingyu",
+    "yudao",
+    "zxcvbn"
   ],
   // 控制相关文件嵌套展示
   "explorer.fileNesting.enabled": true,
@@ -161,7 +137,8 @@
     "*.ts": "$(capture).test.ts, $(capture).test.tsx",
     "*.tsx": "$(capture).test.ts, $(capture).test.tsx",
     "*.env": "$(capture).env.*",
-    "package.json": "pnpm-lock.yaml,yarn.lock,LICENSE,README*,CHANGELOG*,CNAME,.gitattributes,.gitignore,prettier.config.js,stylelint.config.js,commitlint.config.js,.stylelintignore,.prettierignore,.gitpod.yml,.eslintrc.js,.eslintignore"
+    "package.json": "pnpm-lock.yaml,yarn.lock,LICENSE,README*,CHANGELOG*,CNAME,.gitattributes,.eslintrc-auto-import.json,.gitignore,prettier.config.js,stylelint.config.js,commitlint.config.js,.stylelintignore,.prettierignore,.gitpod.yml,.eslintrc.js,.eslintignore"
   },
-  "terminal.integrated.scrollback": 10000
+  "terminal.integrated.scrollback": 10000,
+  "nuxt.isNuxtApp": false
 }
diff --git a/README.md b/README.md
index 5e6a43e0..8466bbc3 100644
--- a/README.md
+++ b/README.md
@@ -9,7 +9,7 @@
 
 ## 🐶 新手必读
 
-* nodejs > 16.0.0 && pnpm > 8.6.0 (强制使用pnpm)
+* nodejs > 16.18.0 && pnpm > 8.6.0 (强制使用pnpm)
 * 演示地址【Vue3 + element-plus】:<http://dashboard-vue3.yudao.iocoder.cn>
 * 演示地址【Vue3 + vben(ant-design-vue)】:<http://dashboard-vben.yudao.iocoder.cn>
 * 演示地址【Vue2 + element-ui】:<http://dashboard.yudao.iocoder.cn>
@@ -40,13 +40,13 @@
 |----------------------------------------------------------------------|------------------|--------|
 | [Vue](https://staging-cn.vuejs.org/)                                 | Vue 框架           | 3.3.4 |
 | [Vite](https://cn.vitejs.dev//)                                      | 开发与构建工具          | 4.4.9  |
-| [Element Plus](https://element-plus.org/zh-CN/)                      | Element Plus     | 2.3.12 |
-| [TypeScript](https://www.typescriptlang.org/docs/)                   | JavaScript 的超集   | 5.1.6  |
+| [Element Plus](https://element-plus.org/zh-CN/)                      | Element Plus     | 2.3.14 |
+| [TypeScript](https://www.typescriptlang.org/docs/)                   | JavaScript 的超集   | 5.2.2  |
 | [pinia](https://pinia.vuejs.org/)                                    | Vue 存储库 替代 vuex5 | 2.1.6 |
 | [vueuse](https://vueuse.org/)                                        | 常用工具集            | 10.4.1 |
-| [vue-i18n](https://kazupon.github.io/vue-i18n/zh/introduction.html/) | 国际化              | 9.2.2  |
-| [vue-router](https://router.vuejs.org/)                              | Vue 路由           | 4.2.4  |
-| [unocss](https://uno.antfu.me/)                                      | 原子 css          | 0.55.3  |
+| [vue-i18n](https://kazupon.github.io/vue-i18n/zh/introduction.html/) | 国际化              | 9.4.1  |
+| [vue-router](https://router.vuejs.org/)                              | Vue 路由           | 4.2.5  |
+| [unocss](https://uno.antfu.me/)                                      | 原子 css          | 0.56.1  |
 | [iconify](https://icon-sets.iconify.design/)                         | 在线图标库            | 3.1.1  |
 | [wangeditor](https://www.wangeditor.com/)                            | 富文本编辑器           | 5.1.23 |
 
diff --git a/package.json b/package.json
index 798aa6d1..eb34ec17 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "yudao-ui-admin-vue3",
-  "version": "1.8.0-snapshot",
+  "version": "1.8.1-snapshot",
   "description": "基于vue3、vite4、element-plus、typesScript",
   "author": "xingyu",
   "private": false,
@@ -22,32 +22,32 @@
     "clean:cache": "npx rimraf node_modules/.cache",
     "lint:eslint": "eslint --fix --ext .js,.ts,.vue ./src",
     "lint:format": "prettier --write --loglevel warn \"src/**/*.{js,ts,json,tsx,css,less,scss,vue,html,md}\"",
-    "lint:style": "stylelint --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
+    "lint:style": "stylelint --fix \"./src/**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
     "lint:lint-staged": "lint-staged -c "
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.1.0",
-    "@form-create/designer": "^3.1.0",
-    "@form-create/element-ui": "^3.1.17",
+    "@form-create/designer": "^3.1.3",
+    "@form-create/element-ui": "^3.1.24",
     "@iconify/iconify": "^3.1.1",
     "@videojs-player/vue": "^1.0.0",
     "@vueuse/core": "^10.4.1",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.10",
-    "@zxcvbn-ts/core": "^3.0.3",
+    "@zxcvbn-ts/core": "^3.0.4",
     "animate.css": "^4.1.1",
     "axios": "^1.5.0",
     "benz-amr-recorder": "^1.1.5",
     "bpmn-js-token-simulation": "^0.10.0",
     "camunda-bpmn-moddle": "^7.0.1",
-    "cropperjs": "^1.6.0",
+    "cropperjs": "^1.6.1",
     "crypto-js": "^4.1.1",
-    "dayjs": "^1.11.9",
+    "dayjs": "^1.11.10",
     "diagram-js": "^12.3.0",
     "echarts": "^5.4.3",
     "echarts-wordcloud": "^2.1.0",
-    "element-plus": "2.3.12",
-    "fast-xml-parser": "^4.2.7",
+    "element-plus": "2.3.14",
+    "fast-xml-parser": "^4.3.0",
     "highlight.js": "^11.8.0",
     "intro.js": "^7.2.0",
     "jsencrypt": "^3.3.2",
@@ -59,12 +59,12 @@
     "qrcode": "^1.5.3",
     "qs": "^6.11.2",
     "steady-xml": "^0.1.0",
-    "url": "^0.11.1",
+    "url": "^0.11.3",
     "video.js": "^7.21.5",
-    "vue": "3.3.4",
+    "vue": "^3.3.4",
     "vue-dompurify-html": "^4.1.4",
-    "vue-i18n": "9.2.2",
-    "vue-router": "^4.2.4",
+    "vue-i18n": "^9.4.1",
+    "vue-router": "^4.2.5",
     "vue-types": "^5.1.1",
     "vuedraggable": "^4.1.0",
     "web-storage-cache": "^1.1.1",
@@ -73,50 +73,51 @@
   "devDependencies": {
     "@commitlint/cli": "^17.7.1",
     "@commitlint/config-conventional": "^17.7.0",
-    "@iconify/json": "^2.2.107",
-    "@intlify/unplugin-vue-i18n": "^0.12.3",
+    "@iconify/json": "^2.2.119",
+    "@intlify/unplugin-vue-i18n": "^1.2.0",
     "@purge-icons/generated": "^0.9.0",
     "@types/intro.js": "^5.1.1",
-    "@types/lodash-es": "^4.17.8",
-    "@types/node": "^20.5.0",
+    "@types/lodash-es": "^4.17.9",
+    "@types/node": "^20.6.0",
     "@types/nprogress": "^0.2.0",
-    "@types/qrcode": "^1.5.1",
-    "@types/qs": "^6.9.7",
-    "@typescript-eslint/eslint-plugin": "^6.4.1",
-    "@typescript-eslint/parser": "^6.4.1",
-    "@unocss/transformer-variant-group": "^0.55.3",
+    "@types/qrcode": "^1.5.2",
+    "@types/qs": "^6.9.8",
+    "@typescript-eslint/eslint-plugin": "^6.7.2",
+    "@typescript-eslint/parser": "^6.7.2",
+    "@unocss/transformer-variant-group": "^0.56.1",
+    "@unocss/eslint-config": "^0.56.1",
     "@vitejs/plugin-legacy": "^4.1.1",
-    "@vitejs/plugin-vue": "^4.3.3",
+    "@vitejs/plugin-vue": "^4.3.4",
     "@vitejs/plugin-vue-jsx": "^3.0.2",
-    "@vue-macros/volar": "^0.14.2",
-    "autoprefixer": "^10.4.15",
-    "bpmn-js": "^8.9.0",
-    "bpmn-js-properties-panel": "^0.46.0",
+    "@vue-macros/volar": "^0.14.3",
+    "autoprefixer": "^10.4.16",
+    "bpmn-js": "8.9.0",
+    "bpmn-js-properties-panel": "0.46.0",
     "consola": "^3.2.3",
-    "eslint": "^8.48.0",
+    "eslint": "^8.49.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-define-config": "^1.23.0",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-vue": "^9.17.0",
     "lint-staged": "^14.0.1",
-    "postcss": "^8.4.28",
+    "postcss": "^8.4.30",
     "postcss-html": "^1.5.0",
-    "postcss-scss": "^4.0.7",
-    "prettier": "^3.0.2",
+    "postcss-scss": "^4.0.8",
+    "prettier": "^3.0.3",
     "rimraf": "^5.0.1",
-    "rollup": "^3.28.1",
-    "sass": "^1.66.1",
+    "rollup": "^3.29.2",
+    "sass": "^1.68.0",
     "stylelint": "^15.10.3",
     "stylelint-config-html": "^1.1.0",
     "stylelint-config-recommended": "^13.0.0",
     "stylelint-config-standard": "^34.0.0",
     "stylelint-order": "^6.0.3",
-    "terser": "^5.19.2",
-    "typescript": "5.1.6",
-    "unocss": "^0.55.3",
+    "terser": "^5.20.0",
+    "typescript": "5.2.2",
+    "unocss": "^0.56.1",
     "unplugin-auto-import": "^0.16.6",
     "unplugin-element-plus": "^0.8.0",
-    "unplugin-vue-components": "^0.25.1",
+    "unplugin-vue-components": "^0.25.2",
     "vite": "4.4.9",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-ejs": "^1.6.4",
@@ -126,7 +127,7 @@
     "vite-plugin-svg-icons": "^2.0.1",
     "vite-plugin-top-level-await": "^1.3.1",
     "vue-eslint-parser": "^9.3.1",
-    "vue-tsc": "^1.8.8"
+    "vue-tsc": "^1.8.13"
   },
   "license": "MIT",
   "repository": {
diff --git a/src/components/Card/src/CardTitle.vue b/src/components/Card/src/CardTitle.vue
index 041c116a..5b122f49 100644
--- a/src/components/Card/src/CardTitle.vue
+++ b/src/components/Card/src/CardTitle.vue
@@ -19,17 +19,18 @@ const { title } = defineProps({
 .card-title {
   font-size: 14px;
   font-weight: 600;
+
   &::before {
-    content: '';
+    position: relative;
+    top: 8px;
+    left: -5px;
     display: inline-block;
     width: 3px;
     height: 14px;
     //background-color: #105cfb;
     background: var(--el-color-primary);
-    position: relative;
-    left: -5px;
-    top: 8px;
     border-radius: 5px;
+    content: '';
     transform: translateY(-50%);
   }
 }
diff --git a/src/components/Cropper/src/CropperAvatar.vue b/src/components/Cropper/src/CropperAvatar.vue
index 414ba144..55a7d34b 100644
--- a/src/components/Cropper/src/CropperAvatar.vue
+++ b/src/components/Cropper/src/CropperAvatar.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="user-info-head" @click="open()">
-    <img v-if="sourceValue" :src="sourceValue" alt="avatar" class="img-circle img-lg" />
-    <img v-if="!sourceValue" :src="avatar" alt="avatar" class="img-circle img-lg" />
+    <el-avatar v-if="sourceValue" :src="sourceValue" alt="avatar" class="img-circle img-lg" />
+    <el-avatar v-if="!sourceValue" :src="avatar" alt="avatar" class="img-circle img-lg" />
     <el-button v-if="showBtn" :class="`${prefixCls}-upload-btn`" @click="open()">
       {{ btnText ? btnText : t('cropper.selectImage') }}
     </el-button>
diff --git a/src/components/Descriptions/src/DescriptionsItemLabel.vue b/src/components/Descriptions/src/DescriptionsItemLabel.vue
index 1e1b9b03..4efb2fb7 100644
--- a/src/components/Descriptions/src/DescriptionsItemLabel.vue
+++ b/src/components/Descriptions/src/DescriptionsItemLabel.vue
@@ -22,6 +22,7 @@ const { label } = defineProps({
 .cell-item {
   display: inline;
 }
+
 .cell-item::after {
   content: ':';
 }
diff --git a/src/components/Dialog/src/Dialog.vue b/src/components/Dialog/src/Dialog.vue
index 302168ca..a1eb550c 100644
--- a/src/components/Dialog/src/Dialog.vue
+++ b/src/components/Dialog/src/Dialog.vue
@@ -66,28 +66,27 @@ const dialogStyle = computed(() => {
     destroy-on-close
     lock-scroll
     draggable
-    top="0"
     class="com-dialog"
     :show-close="false"
   >
     <template #header="{ close }">
-      <div class="flex justify-between items-center h-54px pl-15px pr-15px relative">
+      <div class="relative h-54px flex items-center justify-between pl-15px pr-15px">
         <slot name="title">
           {{ title }}
         </slot>
         <div
-          class="h-54px flex justify-between items-center absolute top-[50%] right-15px translate-y-[-50%]"
+          class="absolute right-15px top-[50%] h-54px flex translate-y-[-50%] items-center justify-between"
         >
           <Icon
             v-if="fullscreen"
-            class="cursor-pointer is-hover mr-10px"
+            class="is-hover mr-10px cursor-pointer"
             :icon="isFullscreen ? 'radix-icons:exit-full-screen' : 'radix-icons:enter-full-screen'"
             color="var(--el-color-info)"
             hover-color="var(--el-color-primary)"
             @click="toggleFull"
           />
           <Icon
-            class="cursor-pointer is-hover"
+            class="is-hover cursor-pointer"
             icon="ep:close"
             hover-color="var(--el-color-primary)"
             color="var(--el-color-info)"
diff --git a/src/components/Editor/src/Editor.vue b/src/components/Editor/src/Editor.vue
index d972552d..ec40bca2 100644
--- a/src/components/Editor/src/Editor.vue
+++ b/src/components/Editor/src/Editor.vue
@@ -180,12 +180,12 @@ defineExpose({
 </script>
 
 <template>
-  <div class="border-1 border-solid border-[var(--el-border-color)] z-99">
+  <div class="z-99 border-1 border-[var(--el-border-color)] border-solid">
     <!-- 工具栏 -->
     <Toolbar
       :editor="editorRef"
       :editorId="editorId"
-      class="border-0 b-b-1 border-solid border-[var(--el-border-color)]"
+      class="border-0 b-b-1 border-[var(--el-border-color)] border-solid"
     />
     <!-- 编辑器 -->
     <Editor
diff --git a/src/components/Form/src/Form.vue b/src/components/Form/src/Form.vue
index 9742babe..3acc10ab 100644
--- a/src/components/Form/src/Form.vue
+++ b/src/components/Form/src/Form.vue
@@ -203,7 +203,7 @@ export default defineComponent({
                       icon="ep:warning"
                       size={16}
                       color="var(--el-color-primary)"
-                      class="ml-2px relative top-1px"
+                      class="relative top-1px ml-2px"
                     ></Icon>
                   )
                 }}
diff --git a/src/components/Icon/src/IconSelect.vue b/src/components/Icon/src/IconSelect.vue
index d6ae6e65..d4a5b074 100644
--- a/src/components/Icon/src/IconSelect.vue
+++ b/src/components/Icon/src/IconSelect.vue
@@ -128,7 +128,7 @@ watch(
         >
           <template #reference>
             <div
-              class="w-40px h-32px cursor-pointer flex justify-center items-center"
+              class="h-32px w-40px flex cursor-pointer items-center justify-center"
               @click="visible = !visible"
             >
               <Icon :icon="currentActiveType + icon" />
@@ -147,13 +147,13 @@ watch(
             >
               <ElDivider border-style="dashed" class="tab-divider" />
               <ElScrollbar height="220px">
-                <ul class="flex flex-wrap px-2 ml-2">
+                <ul class="ml-2 flex flex-wrap px-2">
                   <li
                     v-for="(item, key) in pageList"
                     :key="key"
                     :style="iconItemStyle(item)"
                     :title="item"
-                    class="icon-item p-2 w-1/10 cursor-pointer mr-2 mt-1 flex justify-center items-center border border-solid"
+                    class="icon-item mr-2 mt-1 w-1/10 flex cursor-pointer items-center justify-center border border-solid p-2"
                     @click="onChangeIcon(item)"
                   >
                     <Icon :icon="currentActiveType + item" />
@@ -169,7 +169,7 @@ watch(
             :page-size="pageSize"
             :total="iconCount"
             background
-            class="flex items-center justify-center h-10"
+            class="h-10 flex items-center justify-center"
             layout="prev, pager, next"
             small
             @current-change="onCurrentChange"
diff --git a/src/components/Infotip/src/Infotip.vue b/src/components/Infotip/src/Infotip.vue
index 60887d33..0afd6928 100644
--- a/src/components/Infotip/src/Infotip.vue
+++ b/src/components/Infotip/src/Infotip.vue
@@ -40,7 +40,7 @@ const keyClick = (key: string) => {
       <span :class="[`${prefixCls}__title`, 'pl-5px text-16px font-bold']">{{ title }}</span>
     </div>
     <div :class="`${prefixCls}__content`">
-      <p v-for="(item, $index) in schema" :key="$index" class="text-14px mt-15px">
+      <p v-for="(item, $index) in schema" :key="$index" class="mt-15px text-14px">
         <Highlight
           :color="highlightColor"
           :keys="typeof item === 'string' ? [] : item.keys"
diff --git a/src/components/InputPassword/src/InputPassword.vue b/src/components/InputPassword/src/InputPassword.vue
index f9703694..b8c93e7d 100644
--- a/src/components/InputPassword/src/InputPassword.vue
+++ b/src/components/InputPassword/src/InputPassword.vue
@@ -67,7 +67,7 @@ const getIconName = computed(() => (unref(textType) === 'password' ? 'ep:hide' :
     <div
       v-if="strength"
       :class="`${prefixCls}__bar`"
-      class="relative h-6px mt-10px mb-6px mr-auto ml-auto"
+      class="relative mb-6px ml-auto mr-auto mt-10px h-6px"
     >
       <div :class="`${prefixCls}__bar--fill`" :data-score="getPasswordStrength"></div>
     </div>
diff --git a/src/components/Pagination/index.vue b/src/components/Pagination/index.vue
index b441981f..b88997b1 100644
--- a/src/components/Pagination/index.vue
+++ b/src/components/Pagination/index.vue
@@ -9,7 +9,7 @@
     :pager-count="pagerCount"
     :total="total"
     :small="isSmall"
-    class="float-right mt-15px mb-15px"
+    class="float-right mb-15px mt-15px"
     layout="total, sizes, prev, pager, next, jumper"
     @size-change="handleSizeChange"
     @current-change="handleCurrentChange"
diff --git a/src/components/Qrcode/src/Qrcode.vue b/src/components/Qrcode/src/Qrcode.vue
index 337bc786..f0ce7b79 100644
--- a/src/components/Qrcode/src/Qrcode.vue
+++ b/src/components/Qrcode/src/Qrcode.vue
@@ -227,10 +227,10 @@ const disabledClick = () => {
     <div
       v-if="disabled"
       :class="`${prefixCls}--disabled`"
-      class="absolute top-0 left-0 flex w-full h-full items-center justify-center"
+      class="absolute left-0 top-0 h-full w-full flex items-center justify-center"
       @click="disabledClick"
     >
-      <div class="absolute top-[50%] left-[50%] font-bold">
+      <div class="absolute left-[50%] top-[50%] font-bold">
         <Icon :size="30" color="var(--el-color-primary)" icon="ep:refresh-right" />
         <div>{{ disabledText }}</div>
       </div>
diff --git a/src/components/Table/src/Table.vue b/src/components/Table/src/Table.vue
index a13e2b9f..279a9fac 100644
--- a/src/components/Table/src/Table.vue
+++ b/src/components/Table/src/Table.vue
@@ -289,7 +289,7 @@ export default defineComponent({
           <ElPagination
             v-model:pageSize={pageSizeRef.value}
             v-model:currentPage={currentPageRef.value}
-            class="float-right mt-15px mb-15px"
+            class="float-right mb-15px mt-15px"
             {...unref(pagination)}
           ></ElPagination>
         ) : undefined}
diff --git a/src/components/Tooltip/src/Tooltip.vue b/src/components/Tooltip/src/Tooltip.vue
index b8d252bd..7490bd70 100644
--- a/src/components/Tooltip/src/Tooltip.vue
+++ b/src/components/Tooltip/src/Tooltip.vue
@@ -12,6 +12,6 @@ defineProps({
 <template>
   <span>{{ titel }}</span>
   <ElTooltip :content="message" placement="top">
-    <Icon :icon="icon" class="ml-1px relative top-1px" />
+    <Icon :icon="icon" class="relative top-1px ml-1px" />
   </ElTooltip>
 </template>
diff --git a/src/components/bpmnProcessDesigner/package/penal/form/ElementForm.vue b/src/components/bpmnProcessDesigner/package/penal/form/ElementForm.vue
index f929d3c2..da1d1ae9 100644
--- a/src/components/bpmnProcessDesigner/package/penal/form/ElementForm.vue
+++ b/src/components/bpmnProcessDesigner/package/penal/form/ElementForm.vue
@@ -15,7 +15,7 @@
     <!--字段列表-->
     <div class="element-property list-property">
       <el-divider><Icon icon="ep:coin" /> 表单字段</el-divider>
-      <el-table :data="fieldList" max-height="240" border fit>
+      <el-table :data="fieldList" max-height="240" fit border>
         <el-table-column label="序号" type="index" width="50px" />
         <el-table-column label="字段名称" prop="label" min-width="80px" show-overflow-tooltip />
         <el-table-column
@@ -97,7 +97,7 @@
             >添加枚举值</el-button
           >
         </p>
-        <el-table :data="fieldEnumList" key="enum-table" max-height="240" border fit>
+        <el-table :data="fieldEnumList" key="enum-table" max-height="240" fit border>
           <el-table-column label="序号" width="50px" type="index" />
           <el-table-column label="枚举值编号" prop="id" min-width="100px" show-overflow-tooltip />
           <el-table-column label="枚举值名称" prop="name" min-width="100px" show-overflow-tooltip />
@@ -130,7 +130,7 @@
           >添加约束</el-button
         >
       </p>
-      <el-table :data="fieldConstraintsList" key="validation-table" max-height="240" border fit>
+      <el-table :data="fieldConstraintsList" key="validation-table" max-height="240" fit border>
         <el-table-column label="序号" width="50px" type="index" />
         <el-table-column label="约束名称" prop="name" min-width="100px" show-overflow-tooltip />
         <el-table-column label="约束配置" prop="config" min-width="100px" show-overflow-tooltip />
@@ -162,7 +162,7 @@
           >添加属性</el-button
         >
       </p>
-      <el-table :data="fieldPropertiesList" key="property-table" max-height="240" border fit>
+      <el-table :data="fieldPropertiesList" key="property-table" max-height="240" fit border>
         <el-table-column label="序号" width="50px" type="index" />
         <el-table-column label="属性编号" prop="id" min-width="100px" show-overflow-tooltip />
         <el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />
diff --git a/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue b/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue
index 534ee90a..45ee8f93 100644
--- a/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue
+++ b/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue
@@ -139,8 +139,8 @@
         :data="fieldsListOfListener"
         size="small"
         max-height="240"
-        border
         fit
+        border
         style="flex: none"
       >
         <el-table-column label="序号" width="50px" type="index" />
diff --git a/src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue b/src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue
index 39188414..9464883c 100644
--- a/src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue
+++ b/src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue
@@ -184,8 +184,8 @@
         :data="fieldsListOfListener"
         size="small"
         max-height="240"
-        border
         fit
+        border
         style="flex: none"
       >
         <el-table-column label="序号" width="50px" type="index" />
diff --git a/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue b/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue
index 7e9e858f..494b3d97 100644
--- a/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue
+++ b/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="panel-tab__content">
-    <el-table :data="elementPropertyList" max-height="240" border fit>
+    <el-table :data="elementPropertyList" max-height="240" fit border>
       <el-table-column label="序号" width="50px" type="index" />
       <el-table-column label="属性名" prop="name" min-width="100px" show-overflow-tooltip />
       <el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />
diff --git a/src/hooks/web/useCrudSchemas.ts b/src/hooks/web/useCrudSchemas.ts
index 4cfe1eaf..458b57ec 100644
--- a/src/hooks/web/useCrudSchemas.ts
+++ b/src/hooks/web/useCrudSchemas.ts
@@ -9,7 +9,7 @@ import { TableColumn } from '@/types/table'
 import { DescriptionsSchema } from '@/types/descriptions'
 import { ComponentOptions, ComponentProps } from '@/types/components'
 import { DictTag } from '@/components/DictTag'
-import { cloneDeep } from 'lodash-es'
+import { cloneDeep, merge } from 'lodash-es'
 
 export type CrudSchema = Omit<TableColumn, 'children'> & {
   isSearch?: boolean // 是否在查询显示
@@ -117,14 +117,18 @@ const filterSearchSchema = (crudSchema: CrudSchema[], allSchemas: AllSchemas): F
         }
         if (!schemaItem.search?.component) component = 'Select'
       }
-      const searchSchemaItem = {
-        // 默认为 input
-        component: component,
-        componentProps: comonentProps,
-        ...schemaItem.search,
-        field: schemaItem.field,
-        label: schemaItem.search?.label || schemaItem.label
-      }
+
+      // updated by AKing: 解决了当使用默认的dict选项时,form中事件不能触发的问题
+      const searchSchemaItem = merge(
+        {
+          // 默认为 input
+          component,
+          ...schemaItem.search,
+          field: schemaItem.field,
+          label: schemaItem.search?.label || schemaItem.label
+        },
+        { componentProps: comonentProps }
+      )
       if (searchSchemaItem.api) {
         searchRequestTask.push(async () => {
           const res = await (searchSchemaItem.api as () => AxiosPromise)()
@@ -224,15 +228,19 @@ const filterFormSchema = (crudSchema: CrudSchema[], allSchemas: AllSchemas): For
         }
         if (!(schemaItem.form && schemaItem.form.component)) component = 'Select'
       }
-      const formSchemaItem = {
-        // 默认为 input
-        component: component,
-        componentProps: comonentProps,
-        value: defaultValue,
-        ...schemaItem.form,
-        field: schemaItem.field,
-        label: schemaItem.form?.label || schemaItem.label
-      }
+
+      // updated by AKing: 解决了当使用默认的dict选项时,form中事件不能触发的问题
+      const formSchemaItem = merge(
+        {
+          // 默认为 input
+          component,
+          value: defaultValue,
+          ...schemaItem.form,
+          field: schemaItem.field,
+          label: schemaItem.form?.label || schemaItem.label
+        },
+        { componentProps: comonentProps }
+      )
 
       if (formSchemaItem.api) {
         formRequestTask.push(async () => {
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
index 5c43e52d..43f9b69d 100644
--- a/src/layout/Layout.vue
+++ b/src/layout/Layout.vue
@@ -50,7 +50,7 @@ export default defineComponent({
       <section class={[prefixCls, `${prefixCls}__${layout.value}`, 'w-[100%] h-[100%] relative']}>
         {mobile.value && !collapse.value ? (
           <div
-            class="absolute top-0 left-0 w-full h-full opacity-30 z-99 bg-[var(--el-color-black)]"
+            class="absolute left-0 top-0 z-99 h-full w-full bg-[var(--el-color-black)] opacity-30"
             onClick={handleClickOutside}
           ></div>
         ) : undefined}
diff --git a/src/layout/components/Footer/src/Footer.vue b/src/layout/components/Footer/src/Footer.vue
index ebe7e2b4..c350e38a 100644
--- a/src/layout/components/Footer/src/Footer.vue
+++ b/src/layout/components/Footer/src/Footer.vue
@@ -17,7 +17,7 @@ const title = computed(() => appStore.getTitle)
 <template>
   <div
     :class="prefixCls"
-    class="text-center text-[var(--el-text-color-placeholder)] bg-[var(--app-contnet-bg-color)] h-[var(--app-footer-height)] leading-[var(--app-footer-height)] dark:bg-[var(--el-bg-color)]"
+    class="h-[var(--app-footer-height)] bg-[var(--app-content-bg-color)] text-center leading-[var(--app-footer-height)] text-[var(--el-text-color-placeholder)] dark:bg-[var(--el-bg-color)]"
   >
     <p style="font-size: 14px">Copyright ©2022-{{ title }}</p>
   </div>
diff --git a/src/layout/components/Logo/src/Logo.vue b/src/layout/components/Logo/src/Logo.vue
index 71856fff..d241130d 100644
--- a/src/layout/components/Logo/src/Logo.vue
+++ b/src/layout/components/Logo/src/Logo.vue
@@ -67,7 +67,7 @@ watch(
       to="/"
     >
       <img
-        class="w-[calc(var(--logo-height)-10px)] h-[calc(var(--logo-height)-10px)]"
+        class="h-[calc(var(--logo-height)-10px)] w-[calc(var(--logo-height)-10px)]"
         src="@/assets/imgs/logo.png"
       />
       <div
diff --git a/src/layout/components/Menu/src/Menu.vue b/src/layout/components/Menu/src/Menu.vue
index 51d0c61b..9033616f 100644
--- a/src/layout/components/Menu/src/Menu.vue
+++ b/src/layout/components/Menu/src/Menu.vue
@@ -172,7 +172,7 @@ $prefix-cls: #{$namespace}-menu;
     .#{$elNamespace}-menu-item.is-active {
       position: relative;
 
-      &:after {
+      &::after {
         @extend .is-active--after;
       }
     }
@@ -195,7 +195,7 @@ $prefix-cls: #{$namespace}-menu;
       position: relative;
       background-color: var(--left-menu-collapse-bg-active-color) !important;
 
-      &:after {
+      &::after {
         @extend .is-active--after;
       }
     }
@@ -226,7 +226,7 @@ $prefix-cls: #{$namespace}-menu;
       .#{$elNamespace}-menu-item.is-active {
         position: relative;
 
-        &:after {
+        &::after {
           display: none !important;
         }
       }
@@ -282,7 +282,7 @@ $prefix-cls: #{$namespace}-menu-popper;
       background-color: var(--left-menu-bg-active-color) !important;
     }
 
-    &:after {
+    &::after {
       @extend .is-active--after;
     }
   }
diff --git a/src/layout/components/Setting/src/Setting.vue b/src/layout/components/Setting/src/Setting.vue
index 00d0a8fe..e1908b63 100644
--- a/src/layout/components/Setting/src/Setting.vue
+++ b/src/layout/components/Setting/src/Setting.vue
@@ -200,7 +200,7 @@ const clear = () => {
 <template>
   <div
     :class="prefixCls"
-    class="fixed top-[45%] right-0 w-40px h-40px text-center leading-40px bg-[var(--el-color-primary)] cursor-pointer"
+    class="fixed right-0 top-[45%] h-40px w-40px cursor-pointer bg-[var(--el-color-primary)] text-center leading-40px"
     @click="drawer = true"
   >
     <Icon color="#fff" icon="ep:setting" />
diff --git a/src/layout/components/Setting/src/components/ColorRadioPicker.vue b/src/layout/components/Setting/src/components/ColorRadioPicker.vue
index 662ac2e5..fcc5e758 100644
--- a/src/layout/components/Setting/src/components/ColorRadioPicker.vue
+++ b/src/layout/components/Setting/src/components/ColorRadioPicker.vue
@@ -48,7 +48,7 @@ watch(
       :style="{
         background: item
       }"
-      class="w-20px h-20px cursor-pointer rounded-2px border-solid border-gray-300 border-2px text-center leading-20px mb-5px"
+      class="mb-5px h-20px w-20px cursor-pointer border-2px border-gray-300 rounded-2px border-solid text-center leading-20px"
       @click="colorVal = item"
     >
       <Icon v-if="colorVal === item" :size="16" color="#fff" icon="ep:check" />
diff --git a/src/layout/components/Setting/src/components/InterfaceDisplay.vue b/src/layout/components/Setting/src/components/InterfaceDisplay.vue
index edfd661d..ebbbf4bc 100644
--- a/src/layout/components/Setting/src/components/InterfaceDisplay.vue
+++ b/src/layout/components/Setting/src/components/InterfaceDisplay.vue
@@ -141,84 +141,84 @@ watch(
 
 <template>
   <div :class="prefixCls">
-    <div class="flex justify-between items-center">
+    <div class="flex items-center justify-between">
       <span class="text-14px">{{ t('setting.breadcrumb') }}</span>
       <ElSwitch v-model="breadcrumb" @change="breadcrumbChange" />
     </div>
 
-    <div class="flex justify-between items-center">
+    <div class="flex items-center justify-between">
       <span class="text-14px">{{ t('setting.breadcrumbIcon') }}</span>
       <ElSwitch v-model="breadcrumbIcon" @change="breadcrumbIconChange" />
     </div>
 
-    <div class="flex justify-between items-center">
+    <div class="flex items-center justify-between">
       <span class="text-14px">{{ t('setting.hamburgerIcon') }}</span>
       <ElSwitch v-model="hamburger" @change="hamburgerChange" />
     </div>
 
-    <div class="flex justify-between items-center">
+    <div class="flex items-center justify-between">
       <span class="text-14px">{{ t('setting.screenfullIcon') }}</span>
       <ElSwitch v-model="screenfull" @change="screenfullChange" />
     </div>
 
-    <div class="flex justify-between items-center">
+    <div class="flex items-center justify-between">
       <span class="text-14px">{{ t('setting.sizeIcon') }}</span>
       <ElSwitch v-model="size" @change="sizeChange" />
     </div>
 
-    <div class="flex justify-between items-center">
+    <div class="flex items-center justify-between">
       <span class="text-14px">{{ t('setting.localeIcon') }}</span>
       <ElSwitch v-model="locale" @change="localeChange" />
     </div>
 
-    <div class="flex justify-between items-center">
+    <div class="flex items-center justify-between">
       <span class="text-14px">{{ t('setting.messageIcon') }}</span>
       <ElSwitch v-model="message" @change="messageChange" />
     </div>
 
-    <div class="flex justify-between items-center">
+    <div class="flex items-center justify-between">
       <span class="text-14px">{{ t('setting.tagsView') }}</span>
       <ElSwitch v-model="tagsView" @change="tagsViewChange" />
     </div>
 
-    <div class="flex justify-between items-center">
+    <div class="flex items-center justify-between">
       <span class="text-14px">{{ t('setting.tagsViewIcon') }}</span>
       <ElSwitch v-model="tagsViewIcon" @change="tagsViewIconChange" />
     </div>
 
-    <div class="flex justify-between items-center">
+    <div class="flex items-center justify-between">
       <span class="text-14px">{{ t('setting.logo') }}</span>
       <ElSwitch v-model="logo" @change="logoChange" />
     </div>
 
-    <div class="flex justify-between items-center">
+    <div class="flex items-center justify-between">
       <span class="text-14px">{{ t('setting.uniqueOpened') }}</span>
       <ElSwitch v-model="uniqueOpened" @change="uniqueOpenedChange" />
     </div>
 
-    <div class="flex justify-between items-center">
+    <div class="flex items-center justify-between">
       <span class="text-14px">{{ t('setting.fixedHeader') }}</span>
       <ElSwitch v-model="fixedHeader" @change="fixedHeaderChange" />
     </div>
 
-    <div class="flex justify-between items-center">
+    <div class="flex items-center justify-between">
       <span class="text-14px">{{ t('setting.footer') }}</span>
       <ElSwitch v-model="footer" @change="footerChange" />
     </div>
 
-    <div class="flex justify-between items-center">
+    <div class="flex items-center justify-between">
       <span class="text-14px">{{ t('setting.greyMode') }}</span>
       <ElSwitch v-model="greyMode" @change="greyModeChange" />
     </div>
 
-    <div class="flex justify-between items-center">
+    <div class="flex items-center justify-between">
       <span class="text-14px">{{ t('setting.fixedMenu') }}</span>
       <ElSwitch v-model="fixedMenu" @change="fixedMenuChange" />
     </div>
 
-    <div class="flex justify-between items-center">
+    <div class="flex items-center justify-between">
       <span class="text-14px">{{ t('watermark.watermark') }}</span>
-      <ElInput v-model="water" class="w-20 right-1" @change="setWater()" />
+      <ElInput v-model="water" class="right-1 w-20" @change="setWater()" />
     </div>
   </div>
 </template>
diff --git a/src/layout/components/Setting/src/components/LayoutRadioPicker.vue b/src/layout/components/Setting/src/components/LayoutRadioPicker.vue
index fed4cedb..801686c2 100644
--- a/src/layout/components/Setting/src/components/LayoutRadioPicker.vue
+++ b/src/layout/components/Setting/src/components/LayoutRadioPicker.vue
@@ -55,7 +55,7 @@ const layout = computed(() => appStore.getLayout)
       ]"
       @click="appStore.setLayout('cutMenu')"
     >
-      <div class="absolute h-full w-[33%] top-0 left-[10%] bg-gray-200"></div>
+      <div class="absolute left-[10%] top-0 h-full w-[33%] bg-gray-200"></div>
     </div>
   </div>
 </template>
diff --git a/src/layout/components/TabMenu/src/TabMenu.vue b/src/layout/components/TabMenu/src/TabMenu.vue
index 061c5a39..c4f63a3f 100644
--- a/src/layout/components/TabMenu/src/TabMenu.vue
+++ b/src/layout/components/TabMenu/src/TabMenu.vue
@@ -176,7 +176,7 @@ export default defineComponent({
                       <Icon icon={item?.meta?.icon}></Icon>
                     </div>
                     {!unref(showTitle) ? undefined : (
-                      <p class="break-words mt-5px px-2px">{t(item.meta?.title)}</p>
+                      <p class="mt-5px break-words px-2px">{t(item.meta?.title)}</p>
                     )}
                   </div>
                 )
diff --git a/src/layout/components/TagsView/src/TagsView.vue b/src/layout/components/TagsView/src/TagsView.vue
index 4770989f..7db0cf6f 100644
--- a/src/layout/components/TagsView/src/TagsView.vue
+++ b/src/layout/components/TagsView/src/TagsView.vue
@@ -263,11 +263,11 @@ watch(
   <div
     :id="prefixCls"
     :class="prefixCls"
-    class="flex w-full relative bg-[#fff] dark:bg-[var(--el-bg-color)]"
+    class="relative w-full flex bg-[#fff] dark:bg-[var(--el-bg-color)]"
   >
     <span
       :class="`${prefixCls}__tool ${prefixCls}__tool--first`"
-      class="w-[var(--tags-view-height)] h-[var(--tags-view-height)] flex items-center justify-center cursor-pointer"
+      class="h-[var(--tags-view-height)] w-[var(--tags-view-height)] flex cursor-pointer items-center justify-center"
       @click="move(-200)"
     >
       <Icon
@@ -276,9 +276,9 @@ watch(
         :hover-color="isDark ? '#fff' : 'var(--el-color-black)'"
       />
     </span>
-    <div class="overflow-hidden flex-1">
+    <div class="flex-1 overflow-hidden">
       <ElScrollbar ref="scrollbarRef" class="h-full" @scroll="scroll">
-        <div class="flex h-full">
+        <div class="h-full flex">
           <ContextMenu
             :ref="itemRefs.set"
             :schema="[
@@ -354,7 +354,7 @@ watch(
               <router-link :ref="tagLinksRefs.set" :to="{ ...item }" custom v-slot="{ navigate }">
                 <div
                   @click="navigate"
-                  class="h-full flex justify-center items-center whitespace-nowrap pl-15px"
+                  class="h-full flex items-center justify-center whitespace-nowrap pl-15px"
                 >
                   <Icon
                     v-if="
@@ -384,7 +384,7 @@ watch(
     </div>
     <span
       :class="`${prefixCls}__tool`"
-      class="w-[var(--tags-view-height)] h-[var(--tags-view-height)] flex items-center justify-center cursor-pointer"
+      class="h-[var(--tags-view-height)] w-[var(--tags-view-height)] flex cursor-pointer items-center justify-center"
       @click="move(200)"
     >
       <Icon
@@ -395,7 +395,7 @@ watch(
     </span>
     <span
       :class="`${prefixCls}__tool`"
-      class="w-[var(--tags-view-height)] h-[var(--tags-view-height)] flex items-center justify-center cursor-pointer"
+      class="h-[var(--tags-view-height)] w-[var(--tags-view-height)] flex cursor-pointer items-center justify-center"
       @click="refreshSelectedTag(selectedTag)"
     >
       <Icon
@@ -460,7 +460,7 @@ watch(
     >
       <span
         :class="`${prefixCls}__tool`"
-        class="w-[var(--tags-view-height)] h-[var(--tags-view-height)] flex items-center justify-center cursor-pointer block"
+        class="block h-[var(--tags-view-height)] w-[var(--tags-view-height)] flex cursor-pointer items-center justify-center"
       >
         <Icon
           icon="ep:menu"
diff --git a/src/layout/components/UserInfo/src/UserInfo.vue b/src/layout/components/UserInfo/src/UserInfo.vue
index c5fc9a4d..a5a92da3 100644
--- a/src/layout/components/UserInfo/src/UserInfo.vue
+++ b/src/layout/components/UserInfo/src/UserInfo.vue
@@ -53,8 +53,8 @@ const toDocument = () => {
 <template>
   <ElDropdown class="custom-hover" :class="prefixCls" trigger="click">
     <div class="flex items-center">
-      <img :src="avatar" alt="" class="w-[calc(var(--logo-height)-25px)] rounded-[50%]" />
-      <span class="<lg:hidden text-14px pl-[5px] text-[var(--top-header-text-color)]">
+      <ElAvatar :src="avatar" alt="" class="w-[calc(var(--logo-height)-25px)] rounded-[50%]" />
+      <span class="pl-[5px] text-14px text-[var(--top-header-text-color)] <lg:hidden">
         {{ userName }}
       </span>
     </div>
diff --git a/src/styles/var.css b/src/styles/var.css
index a44f804f..63459ba6 100644
--- a/src/styles/var.css
+++ b/src/styles/var.css
@@ -48,7 +48,7 @@
 
   --app-content-padding: 20px;
 
-  --app-contnet-bg-color: #f5f7f9;
+  --app-content-bg-color: #f5f7f9;
 
   --app-footer-height: 50px;
 
diff --git a/src/views/Home/Index.vue b/src/views/Home/Index.vue
index 6a369263..121ec6a8 100644
--- a/src/views/Home/Index.vue
+++ b/src/views/Home/Index.vue
@@ -5,7 +5,7 @@
         <el-row :gutter="20" justify="space-between">
           <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
             <div class="flex items-center">
-              <img :src="avatar" alt="" class="w-70px h-70px rounded-[50%] mr-20px" />
+              <img :src="avatar" alt="" class="mr-20px h-70px w-70px rounded-[50%]" />
               <div>
                 <div class="text-20px">
                   {{ t('workplace.welcome') }} {{ username }} {{ t('workplace.happyDay') }}
@@ -17,9 +17,9 @@
             </div>
           </el-col>
           <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
-            <div class="flex h-70px items-center justify-end lt-sm:mt-10px">
+            <div class="h-70px flex items-center justify-end lt-sm:mt-10px">
               <div class="px-8px text-right">
-                <div class="text-14px text-gray-400 mb-20px">{{ t('workplace.project') }}</div>
+                <div class="mb-20px text-14px text-gray-400">{{ t('workplace.project') }}</div>
                 <CountTo
                   class="text-20px"
                   :start-val="0"
@@ -29,7 +29,7 @@
               </div>
               <el-divider direction="vertical" />
               <div class="px-8px text-right">
-                <div class="text-14px text-gray-400 mb-20px">{{ t('workplace.toDo') }}</div>
+                <div class="mb-20px text-14px text-gray-400">{{ t('workplace.toDo') }}</div>
                 <CountTo
                   class="text-20px"
                   :start-val="0"
@@ -39,7 +39,7 @@
               </div>
               <el-divider direction="vertical" border-style="dashed" />
               <div class="px-8px text-right">
-                <div class="text-14px text-gray-400 mb-20px">{{ t('workplace.access') }}</div>
+                <div class="mb-20px text-14px text-gray-400">{{ t('workplace.access') }}</div>
                 <CountTo
                   class="text-20px"
                   :start-val="0"
@@ -58,7 +58,7 @@
     <el-col :xl="16" :lg="16" :md="24" :sm="24" :xs="24" class="mb-10px">
       <el-card shadow="never">
         <template #header>
-          <div class="flex justify-between h-3">
+          <div class="h-3 flex justify-between">
             <span>{{ t('workplace.project') }}</span>
             <el-link type="primary" :underline="false">{{ t('action.more') }}</el-link>
           </div>
@@ -80,7 +80,7 @@
                   <span class="text-16px">{{ item.name }}</span>
                 </div>
                 <div class="mt-15px text-14px text-gray-400">{{ t(item.message) }}</div>
-                <div class="mt-20px text-12px text-gray-400 flex justify-between">
+                <div class="mt-20px flex justify-between text-12px text-gray-400">
                   <span>{{ item.personal }}</span>
                   <span>{{ formatTime(item.time, 'yyyy-MM-dd') }}</span>
                 </div>
@@ -114,7 +114,7 @@
     <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" class="mb-10px">
       <el-card shadow="never">
         <template #header>
-          <div class="flex justify-between h-3">
+          <div class="h-3 flex justify-between">
             <span>{{ t('workplace.shortcutOperation') }}</span>
           </div>
         </template>
@@ -133,7 +133,7 @@
       </el-card>
       <el-card shadow="never" class="mt-10px">
         <template #header>
-          <div class="flex justify-between h-3">
+          <div class="h-3 flex justify-between">
             <span>{{ t('workplace.notice') }}</span>
             <el-link type="primary" :underline="false">{{ t('action.more') }}</el-link>
           </div>
@@ -141,7 +141,7 @@
         <el-skeleton :loading="loading" animated>
           <div v-for="(item, index) in notice" :key="`dynamics-${index}`">
             <div class="flex items-center">
-              <img :src="avatar" alt="" class="w-35px h-35px rounded-[50%] mr-20px" />
+              <img :src="avatar" alt="" class="mr-20px h-35px w-35px rounded-[50%]" />
               <div>
                 <div class="text-14px">
                   <Highlight :keys="item.keys.map((v) => t(v))">
diff --git a/src/views/Home/Index2.vue b/src/views/Home/Index2.vue
index 67c5ff2c..c9429ab1 100644
--- a/src/views/Home/Index2.vue
+++ b/src/views/Home/Index2.vue
@@ -20,7 +20,7 @@
                   :duration="2600"
                   :end-val="102400"
                   :start-val="0"
-                  class="text-20px font-700 text-right"
+                  class="text-right text-20px font-700"
                 />
               </div>
             </div>
@@ -49,7 +49,7 @@
                   :duration="2600"
                   :end-val="81212"
                   :start-val="0"
-                  class="text-20px font-700 text-right"
+                  class="text-right text-20px font-700"
                 />
               </div>
             </div>
@@ -78,7 +78,7 @@
                   :duration="2600"
                   :end-val="9280"
                   :start-val="0"
-                  class="text-20px font-700 text-right"
+                  class="text-right text-20px font-700"
                 />
               </div>
             </div>
@@ -107,7 +107,7 @@
                   :duration="2600"
                   :end-val="13600"
                   :start-val="0"
-                  class="text-20px font-700 text-right"
+                  class="text-right text-20px font-700"
                 />
               </div>
             </div>
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index 9d5ea20e..19ffe2d7 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -1,19 +1,19 @@
 <template>
   <div
     :class="prefixCls"
-    class="h-[100%] relative lt-xl:bg-[var(--login-bg-color)] lt-sm:px-10px lt-xl:px-10px lt-md:px-10px"
+    class="relative h-[100%] lt-xl:bg-[var(--login-bg-color)] lt-md:px-10px lt-sm:px-10px lt-xl:px-10px"
   >
-    <div class="relative h-full flex mx-auto">
+    <div class="relative mx-auto h-full flex">
       <div
         :class="`${prefixCls}__left flex-1 bg-gray-500 bg-opacity-20 relative p-30px lt-xl:hidden`"
       >
         <!-- 左上角的 logo + 系统标题 -->
-        <div class="flex items-center relative text-white">
-          <img alt="" class="w-48px h-48px mr-10px" src="@/assets/imgs/logo.png" />
+        <div class="relative flex items-center text-white">
+          <img alt="" class="mr-10px h-48px w-48px" src="@/assets/imgs/logo.png" />
           <span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>
         </div>
         <!-- 左边的背景图 + 欢迎语 -->
-        <div class="flex justify-center items-center h-[calc(100%-60px)]">
+        <div class="h-[calc(100%-60px)] flex items-center justify-center">
           <TransitionGroup
             appear
             enter-active-class="animate__animated animate__bounceInLeft"
@@ -21,41 +21,41 @@
           >
             <img key="1" alt="" class="w-350px" src="@/assets/svgs/login-box-bg.svg" />
             <div key="2" class="text-3xl text-white">{{ t('login.welcome') }}</div>
-            <div key="3" class="mt-5 font-normal text-white text-14px">
+            <div key="3" class="mt-5 text-14px font-normal text-white">
               {{ t('login.message') }}
             </div>
           </TransitionGroup>
         </div>
       </div>
-      <div class="flex-1 p-30px lt-sm:p-10px dark:bg-[var(--login-bg-color)] relative">
+      <div class="relative flex-1 p-30px dark:bg-[var(--login-bg-color)] lt-sm:p-10px">
         <!-- 右上角的主题、语言选择 -->
         <div
-          class="flex justify-between items-center text-white at-2xl:justify-end at-xl:justify-end"
+          class="flex items-center justify-between text-white at-2xl:justify-end at-xl:justify-end"
         >
           <div class="flex items-center at-2xl:hidden at-xl:hidden">
-            <img alt="" class="w-48px h-48px mr-10px" src="@/assets/imgs/logo.png" />
+            <img alt="" class="mr-10px h-48px w-48px" src="@/assets/imgs/logo.png" />
             <span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>
           </div>
-          <div class="flex justify-end items-center space-x-10px">
+          <div class="flex items-center justify-end space-x-10px">
             <ThemeSwitch />
-            <LocaleDropdown class="lt-xl:text-white dark:text-white" />
+            <LocaleDropdown class="dark:text-white lt-xl:text-white" />
           </div>
         </div>
         <!-- 右边的登录界面 -->
         <Transition appear enter-active-class="animate__animated animate__bounceInRight">
           <div
-            class="h-full flex items-center m-auto w-[100%] at-2xl:max-w-500px at-xl:max-w-500px at-md:max-w-500px at-lg:max-w-500px"
+            class="m-auto h-full w-[100%] flex items-center at-2xl:max-w-500px at-lg:max-w-500px at-md:max-w-500px at-xl:max-w-500px"
           >
             <!-- 账号登录 -->
-            <LoginForm class="p-20px h-auto m-auto lt-xl:(rounded-3xl light:bg-white)" />
+            <LoginForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
             <!-- 手机登录 -->
-            <MobileForm class="p-20px h-auto m-auto lt-xl:(rounded-3xl light:bg-white)" />
+            <MobileForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
             <!-- 二维码登录 -->
-            <QrCodeForm class="p-20px h-auto m-auto lt-xl:(rounded-3xl light:bg-white)" />
+            <QrCodeForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
             <!-- 注册 -->
-            <RegisterForm class="p-20px h-auto m-auto lt-xl:(rounded-3xl light:bg-white)" />
+            <RegisterForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
             <!-- 三方登录 -->
-            <SSOLoginVue class="p-20px h-auto m-auto lt-xl:(rounded-3xl light:bg-white)" />
+            <SSOLoginVue class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
           </div>
         </Transition>
       </div>
diff --git a/src/views/Login/components/LoginForm.vue b/src/views/Login/components/LoginForm.vue
index e8d01721..a4eb0b92 100644
--- a/src/views/Login/components/LoginForm.vue
+++ b/src/views/Login/components/LoginForm.vue
@@ -112,13 +112,13 @@
       <el-divider content-position="center">{{ t('login.otherLogin') }}</el-divider>
       <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item>
-          <div class="flex justify-between w-[100%]">
+          <div class="w-[100%] flex justify-between">
             <Icon
               v-for="(item, key) in socialList"
               :key="key"
               :icon="item.icon"
               :size="30"
-              class="cursor-pointer anticon"
+              class="anticon cursor-pointer"
               color="#999"
               @click="doSocialLogin(item.type)"
             />
@@ -128,7 +128,7 @@
       <el-divider content-position="center">萌新必读</el-divider>
       <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item>
-          <div class="flex justify-between w-[100%]">
+          <div class="w-[100%] flex justify-between">
             <el-link href="https://doc.iocoder.cn/" target="_blank">📚开发指南</el-link>
             <el-link href="https://doc.iocoder.cn/video/" target="_blank">🔥视频教程</el-link>
             <el-link href="https://www.iocoder.cn/Interview/good-collection/" target="_blank">
diff --git a/src/views/Login/components/LoginFormTitle.vue b/src/views/Login/components/LoginFormTitle.vue
index 9cbf93ce..cdf4facc 100644
--- a/src/views/Login/components/LoginFormTitle.vue
+++ b/src/views/Login/components/LoginFormTitle.vue
@@ -1,5 +1,5 @@
 <template>
-  <h2 class="mb-3 text-2xl font-bold text-center xl:text-3xl enter-x xl:text-center">
+  <h2 class="enter-x mb-3 text-center text-2xl font-bold xl:text-center xl:text-3xl">
     {{ getFormTitle }}
   </h2>
 </template>
diff --git a/src/views/Login/components/QrCodeForm.vue b/src/views/Login/components/QrCodeForm.vue
index 7cf33aea..31d28453 100644
--- a/src/views/Login/components/QrCodeForm.vue
+++ b/src/views/Login/components/QrCodeForm.vue
@@ -10,7 +10,7 @@
     </el-col>
     <el-divider class="enter-x">{{ t('login.qrcode') }}</el-divider>
     <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
-      <div class="w-[100%] mt-15px">
+      <div class="mt-15px w-[100%]">
         <XButton :title="t('login.backLogin')" class="w-[100%]" @click="handleBackLogin()" />
       </div>
     </el-col>
diff --git a/src/views/Login/components/RegisterForm.vue b/src/views/Login/components/RegisterForm.vue
index 509bd8c8..23b3bd42 100644
--- a/src/views/Login/components/RegisterForm.vue
+++ b/src/views/Login/components/RegisterForm.vue
@@ -29,7 +29,7 @@
           @click="loginRegister()"
         />
       </div>
-      <div class="w-[100%] mt-15px">
+      <div class="mt-15px w-[100%]">
         <XButton :title="t('login.hasUser')" class="w-[100%]" @click="handleBackLogin()" />
       </div>
     </template>
diff --git a/src/views/Profile/Index.vue b/src/views/Profile/Index.vue
index dbd61d5d..b05f93cc 100644
--- a/src/views/Profile/Index.vue
+++ b/src/views/Profile/Index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex">
-    <el-card class="w-1/3 user" shadow="hover">
+    <el-card class="user w-1/3" shadow="hover">
       <template #header>
         <div class="card-header">
           <span>{{ t('profile.user.title') }}</span>
@@ -8,7 +8,7 @@
       </template>
       <ProfileUser />
     </el-card>
-    <el-card class="w-2/3 user ml-3" shadow="hover">
+    <el-card class="user ml-3 w-2/3" shadow="hover">
       <template #header>
         <div class="card-header">
           <span>{{ t('profile.info.title') }}</span>
diff --git a/src/views/infra/build/index.vue b/src/views/infra/build/index.vue
index 22f6afa2..11bfc999 100644
--- a/src/views/infra/build/index.vue
+++ b/src/views/infra/build/index.vue
@@ -2,7 +2,7 @@
   <ContentWrap>
     <el-row>
       <el-col>
-        <div class="mb-2 float-right">
+        <div class="float-right mb-2">
           <el-button size="small" type="primary" @click="showJson">生成 JSON</el-button>
           <el-button size="small" type="success" @click="showOption">生成 Options</el-button>
           <el-button size="small" type="danger" @click="showTemplate">生成组件</el-button>
diff --git a/src/views/infra/codegen/PreviewCode.vue b/src/views/infra/codegen/PreviewCode.vue
index f95febaf..b04775ec 100644
--- a/src/views/infra/codegen/PreviewCode.vue
+++ b/src/views/infra/codegen/PreviewCode.vue
@@ -20,8 +20,8 @@
             ref="treeRef"
             :data="preview.fileTree"
             :expand-on-click-node="false"
-            default-expand-all
             highlight-current
+            default-expand-all
             node-key="id"
             @node-click="handleNodeClick"
           />
@@ -31,7 +31,7 @@
       <el-card
         v-loading="loading"
         :gutter="12"
-        class="w-2/3 ml-3"
+        class="ml-3 w-2/3"
         element-loading-text="加载代码中..."
         shadow="hover"
       >
diff --git a/src/views/infra/webSocket/index.vue b/src/views/infra/webSocket/index.vue
index 1c7f2f00..ce6db798 100644
--- a/src/views/infra/webSocket/index.vue
+++ b/src/views/infra/webSocket/index.vue
@@ -7,7 +7,7 @@
         </div>
       </template>
       <div class="flex items-center">
-        <span class="text-lg font-medium mr-4"> 连接状态: </span>
+        <span class="mr-4 text-lg font-medium"> 连接状态: </span>
         <el-tag :color="getTagColor">{{ status }}</el-tag>
       </div>
       <hr class="my-4" />
@@ -20,7 +20,7 @@
           {{ getIsOpen ? '关闭连接' : '开启连接' }}
         </el-button>
       </div>
-      <p class="text-lg font-medium mt-4">设置</p>
+      <p class="mt-4 text-lg font-medium">设置</p>
       <hr class="my-4" />
       <el-input
         v-model="sendValue"
@@ -43,7 +43,7 @@
         <ul>
           <li v-for="item in getList" :key="item.time" class="mt-2">
             <div class="flex items-center">
-              <span class="mr-2 text-primary font-medium">收到消息:</span>
+              <span class="text-primary mr-2 font-medium">收到消息:</span>
               <span>{{ formatDate(item.time) }}</span>
             </div>
             <div>
diff --git a/src/views/mall/product/comment/CommentForm.vue b/src/views/mall/product/comment/CommentForm.vue
index 77557437..284e9a61 100644
--- a/src/views/mall/product/comment/CommentForm.vue
+++ b/src/views/mall/product/comment/CommentForm.vue
@@ -8,7 +8,7 @@
       v-loading="formLoading"
     >
       <el-form-item label="商品" prop="spuId">
-        <div @click="handleSelectSpu" class="w-60px h-60px">
+        <div @click="handleSelectSpu" class="h-60px w-60px">
           <div v-if="spuData && spuData.picUrl">
             <el-image :src="spuData.picUrl" />
           </div>
@@ -18,7 +18,7 @@
         </div>
       </el-form-item>
       <el-form-item label="商品规格" prop="skuId" v-if="formData.spuId">
-        <div @click="handleSelectSku" class="w-60px h-60px">
+        <div @click="handleSelectSku" class="h-60px w-60px">
           <div v-if="skuData && skuData.picUrl">
             <el-image :src="skuData.picUrl" />
           </div>
@@ -150,6 +150,7 @@ const resetForm = () => {
     userNickname: undefined,
     userAvatar: undefined,
     spuId: undefined,
+    spuName: undefined,
     skuId: undefined,
     descriptionScores: 5,
     benefitScores: 5,
@@ -182,11 +183,11 @@ const handleSkuChange = (sku: ProductSpuApi.Sku) => {
 <style>
 .select-box {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px dashed var(--el-border-color-darker);
-  border-radius: 8px;
   width: 100%;
   height: 100%;
+  border: 1px dashed var(--el-border-color-darker);
+  border-radius: 8px;
+  align-items: center;
+  justify-content: center;
 }
 </style>
diff --git a/src/views/mall/product/comment/index.vue b/src/views/mall/product/comment/index.vue
index 7c0737f5..3c946e99 100644
--- a/src/views/mall/product/comment/index.vue
+++ b/src/views/mall/product/comment/index.vue
@@ -63,12 +63,12 @@
       <el-table-column label="用户名称" align="center" prop="userNickname" width="80" />
       <el-table-column label="商品信息" align="center" min-width="300">
         <template #default="scope">
-          <div class="flex row items-center gap-x-4px">
+          <div class="row flex items-center gap-x-4px">
             <el-image
               v-if="scope.row.skuPicUrl"
               :src="scope.row.skuPicUrl"
               :preview-src-list="[scope.row.skuPicUrl]"
-              class="w-40px h-40px shrink-0"
+              class="h-40px w-40px shrink-0"
               preview-teleported
             />
             <div>{{ scope.row.spuName }}</div>
@@ -95,7 +95,7 @@
               :src="picUrl"
               :preview-src-list="scope.row.picUrls"
               :initial-index="index"
-              class="w-40px h-40px"
+              class="h-40px w-40px"
               preview-teleported
             />
           </div>
diff --git a/src/views/mall/product/spu/components/SkuList.vue b/src/views/mall/product/spu/components/SkuList.vue
index fbbb96c8..7a4605c6 100644
--- a/src/views/mall/product/spu/components/SkuList.vue
+++ b/src/views/mall/product/spu/components/SkuList.vue
@@ -124,7 +124,7 @@
     <el-table-column v-if="isComponent" type="selection" width="45" />
     <el-table-column align="center" label="图片" min-width="80">
       <template #default="{ row }">
-        <el-image :src="row.picUrl" class="w-60px h-60px" @click="imagePreview(row.picUrl)" />
+        <el-image :src="row.picUrl" class="h-60px w-60px" @click="imagePreview(row.picUrl)" />
       </template>
     </el-table-column>
     <template v-if="formData!.specType && !isBatch">
@@ -204,7 +204,7 @@
     <el-table-column v-if="isComponent" type="selection" width="45" />
     <el-table-column align="center" label="图片" min-width="80">
       <template #default="{ row }">
-        <el-image :src="row.picUrl" class="w-60px h-60px" @click="imagePreview(row.picUrl)" />
+        <el-image :src="row.picUrl" class="h-60px w-60px" @click="imagePreview(row.picUrl)" />
       </template>
     </el-table-column>
     <template v-if="formData!.specType">
diff --git a/src/views/mall/product/spu/components/SkuTableSelect.vue b/src/views/mall/product/spu/components/SkuTableSelect.vue
index 8bbc50cf..7bff882d 100644
--- a/src/views/mall/product/spu/components/SkuTableSelect.vue
+++ b/src/views/mall/product/spu/components/SkuTableSelect.vue
@@ -12,7 +12,7 @@
         <template #default="{ row }">
           <el-image
             :src="row.picUrl"
-            class="w-30px h-30px"
+            class="h-30px w-30px"
             :preview-src-list="[row.picUrl]"
             preview-teleported
           />
diff --git a/src/views/mall/product/spu/components/SpuTableSelect.vue b/src/views/mall/product/spu/components/SpuTableSelect.vue
index 9e193257..e748b76d 100644
--- a/src/views/mall/product/spu/components/SpuTableSelect.vue
+++ b/src/views/mall/product/spu/components/SpuTableSelect.vue
@@ -73,7 +73,7 @@
           <template #default="{ row }">
             <el-image
               :src="row.picUrl"
-              class="w-30px h-30px"
+              class="h-30px w-30px"
               :preview-src-list="[row.picUrl]"
               preview-teleported
             />
diff --git a/src/views/mall/product/spu/form/BasicInfoForm.vue b/src/views/mall/product/spu/form/BasicInfoForm.vue
index c12c76e9..66523432 100644
--- a/src/views/mall/product/spu/form/BasicInfoForm.vue
+++ b/src/views/mall/product/spu/form/BasicInfoForm.vue
@@ -117,7 +117,7 @@
           />
         </el-form-item>
         <el-form-item v-if="formData.specType" label="商品属性">
-          <el-button class="mr-15px mb-10px" @click="attributesAddFormRef.open">添加规格</el-button>
+          <el-button class="mb-10px mr-15px" @click="attributesAddFormRef.open">添加规格</el-button>
           <ProductAttributes :propertyList="propertyList" @success="generateSkus" />
         </el-form-item>
         <template v-if="formData.specType && propertyList.length > 0">
@@ -153,14 +153,14 @@
       {{ row.subCommissionType ? '自行设置' : '默认设置' }}
     </template>
     <template #picUrl="{ row }">
-      <el-image :src="row.picUrl" class="w-60px h-60px" @click="imagePreview(row.picUrl)" />
+      <el-image :src="row.picUrl" class="h-60px w-60px" @click="imagePreview(row.picUrl)" />
     </template>
     <template #sliderPicUrls="{ row }">
       <el-image
         v-for="(item, index) in row.sliderPicUrls"
         :key="index"
         :src="item.url"
-        class="w-60px h-60px mr-10px"
+        class="mr-10px h-60px w-60px"
         @click="imagePreview(row.sliderPicUrls)"
       />
     </template>
diff --git a/src/views/mall/product/spu/index.vue b/src/views/mall/product/spu/index.vue
index 2ed6d3ad..1596df3f 100644
--- a/src/views/mall/product/spu/index.vue
+++ b/src/views/mall/product/spu/index.vue
@@ -125,7 +125,7 @@
       <el-table-column key="id" align="center" label="商品编号" prop="id" />
       <el-table-column label="商品图" min-width="80">
         <template #default="{ row }">
-          <el-image :src="row.picUrl" class="w-30px h-30px" @click="imagePreview(row.picUrl)" />
+          <el-image :src="row.picUrl" class="h-30px w-30px" @click="imagePreview(row.picUrl)" />
         </template>
       </el-table-column>
       <el-table-column :show-overflow-tooltip="true" label="商品名称" min-width="300" prop="name" />
diff --git a/src/views/mall/promotion/bargain/activity/index.vue b/src/views/mall/promotion/bargain/activity/index.vue
index abcbcc6b..5422632f 100644
--- a/src/views/mall/promotion/bargain/activity/index.vue
+++ b/src/views/mall/promotion/bargain/activity/index.vue
@@ -32,7 +32,7 @@
       <template #spuId="{ row }">
         <el-image
           :src="row.picUrl"
-          class="w-30px h-30px align-middle mr-5px"
+          class="mr-5px h-30px w-30px align-middle"
           @click="imagePreview(row.picUrl)"
         />
         <span class="align-middle">{{ row.spuName }}</span>
diff --git a/src/views/mall/promotion/combination/activity/index.vue b/src/views/mall/promotion/combination/activity/index.vue
index 3a859dd4..2080d287 100644
--- a/src/views/mall/promotion/combination/activity/index.vue
+++ b/src/views/mall/promotion/combination/activity/index.vue
@@ -33,7 +33,7 @@
       <template #spuId="{ row }">
         <el-image
           :src="row.picUrl"
-          class="w-30px h-30px align-middle mr-5px"
+          class="mr-5px h-30px w-30px align-middle"
           @click="imagePreview(row.picUrl)"
         />
         <span class="align-middle">{{ row.spuName }}</span>
diff --git a/src/views/mall/promotion/components/SpuAndSkuList.vue b/src/views/mall/promotion/components/SpuAndSkuList.vue
index 1f8041bb..facc6cf3 100644
--- a/src/views/mall/promotion/components/SpuAndSkuList.vue
+++ b/src/views/mall/promotion/components/SpuAndSkuList.vue
@@ -18,7 +18,7 @@
     <el-table-column key="id" align="center" label="商品编号" prop="id" />
     <el-table-column label="商品图" min-width="80">
       <template #default="{ row }">
-        <el-image :src="row.picUrl" class="w-30px h-30px" @click="imagePreview(row.picUrl)" />
+        <el-image :src="row.picUrl" class="h-30px w-30px" @click="imagePreview(row.picUrl)" />
       </template>
     </el-table-column>
     <el-table-column :show-overflow-tooltip="true" label="商品名称" min-width="300" prop="name" />
diff --git a/src/views/mall/promotion/components/SpuSelect.vue b/src/views/mall/promotion/components/SpuSelect.vue
index 166cf5ff..fd7dffe0 100644
--- a/src/views/mall/promotion/components/SpuSelect.vue
+++ b/src/views/mall/promotion/components/SpuSelect.vue
@@ -70,7 +70,7 @@
         <el-table-column key="id" align="center" label="商品编号" prop="id" />
         <el-table-column label="商品图" min-width="80">
           <template #default="{ row }">
-            <el-image :src="row.picUrl" class="w-30px h-30px" @click="imagePreview(row.picUrl)" />
+            <el-image :src="row.picUrl" class="h-30px w-30px" @click="imagePreview(row.picUrl)" />
           </template>
         </el-table-column>
         <el-table-column
diff --git a/src/views/mall/promotion/coupon/template/CouponTemplateForm.vue b/src/views/mall/promotion/coupon/template/CouponTemplateForm.vue
index 0c4238ac..ad335fb5 100644
--- a/src/views/mall/promotion/coupon/template/CouponTemplateForm.vue
+++ b/src/views/mall/promotion/coupon/template/CouponTemplateForm.vue
@@ -26,7 +26,7 @@
         v-if="formData.productScope === PromotionProductScopeEnum.SPU.scope"
         prop="productSpuIds"
       >
-        <div class="flex items-center gap-1 flex-wrap">
+        <div class="flex flex-wrap items-center gap-1">
           <div class="select-box spu-pic" v-for="(spu, index) in productSpus" :key="spu.id">
             <el-image :src="spu.picUrl" />
             <Icon icon="ep:circle-close-filled" class="del-icon" @click="handleRemoveSpu(index)" />
@@ -62,7 +62,7 @@
         <el-input-number
           v-model="formData.discountPrice"
           placeholder="请输入优惠金额,单位:元"
-          class="!w-400px mr-2"
+          class="mr-2 !w-400px"
           :precision="2"
           :min="0"
         />
@@ -76,7 +76,7 @@
         <el-input-number
           v-model="formData.discountPercent"
           placeholder="优惠券折扣不能小于 1 折,且不可大于 9.9 折"
-          class="!w-400px mr-2"
+          class="mr-2 !w-400px"
           :precision="1"
           :min="1"
           :max="9.9"
@@ -91,7 +91,7 @@
         <el-input-number
           v-model="formData.discountLimitPrice"
           placeholder="请输入最多优惠"
-          class="!w-400px mr-2"
+          class="mr-2 !w-400px"
           :precision="2"
           :min="0"
         />
@@ -101,7 +101,7 @@
         <el-input-number
           v-model="formData.usePrice"
           placeholder="无门槛请设为 0"
-          class="!w-400px mr-2"
+          class="mr-2 !w-400px"
           :precision="2"
           :min="0"
         />
@@ -117,7 +117,7 @@
         <el-input-number
           v-model="formData.totalCount"
           placeholder="发放数量,没有之后不能领取或发放,-1 为不限制"
-          class="!w-400px mr-2"
+          class="mr-2 !w-400px"
           :precision="0"
           :min="-1"
         />
@@ -127,7 +127,7 @@
         <el-input-number
           v-model="formData.takeLimitCount"
           placeholder="设置为 -1 时,可无限领取"
-          class="!w-400px mr-2"
+          class="mr-2 !w-400px"
           :precision="0"
           :min="-1"
         />
@@ -423,22 +423,24 @@ const handleRemoveSpu = (index: number) => {
 <style scoped lang="scss">
 .select-box {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px dashed var(--el-border-color-darker);
-  border-radius: 8px;
   width: 60px;
   height: 60px;
+  border: 1px dashed var(--el-border-color-darker);
+  border-radius: 8px;
+  align-items: center;
+  justify-content: center;
 }
+
 .spu-pic {
   position: relative;
 }
+
 .del-icon {
   position: absolute;
+  top: -10px;
+  right: -10px;
   z-index: 1;
   width: 20px !important;
   height: 20px !important;
-  right: -10px;
-  top: -10px;
 }
 </style>
diff --git a/src/views/mall/promotion/seckill/activity/index.vue b/src/views/mall/promotion/seckill/activity/index.vue
index ca114528..2ecdd506 100644
--- a/src/views/mall/promotion/seckill/activity/index.vue
+++ b/src/views/mall/promotion/seckill/activity/index.vue
@@ -36,7 +36,7 @@
       <template #spuId="{ row }">
         <el-image
           :src="row.picUrl"
-          class="w-30px h-30px align-middle mr-5px"
+          class="mr-5px h-30px w-30px align-middle"
           @click="imagePreview(row.picUrl)"
         />
         <span class="align-middle">{{ row.spuName }}</span>
diff --git a/src/views/mall/promotion/seckill/config/index.vue b/src/views/mall/promotion/seckill/config/index.vue
index 5d245ecd..6036cb3b 100644
--- a/src/views/mall/promotion/seckill/config/index.vue
+++ b/src/views/mall/promotion/seckill/config/index.vue
@@ -36,7 +36,7 @@
           v-for="(item, index) in row.sliderPicUrls"
           :key="index"
           :src="item"
-          class="w-60px h-60px mr-10px"
+          class="mr-10px h-60px w-60px"
           @click="imagePreview(row.sliderPicUrls)"
         />
       </template>
diff --git a/src/views/mall/trade/afterSale/detail/index.vue b/src/views/mall/trade/afterSale/detail/index.vue
index a7bdf5ec..557e6b6e 100644
--- a/src/views/mall/trade/afterSale/detail/index.vue
+++ b/src/views/mall/trade/afterSale/detail/index.vue
@@ -57,7 +57,7 @@
           v-for="(item, index) in formData.applyPicUrls"
           :key="index"
           :src="item.url"
-          class="w-60px h-60px mr-10px"
+          class="mr-10px h-60px w-60px"
           @click="imagePreview(formData.applyPicUrls)"
         />
       </el-descriptions-item>
diff --git a/src/views/mall/trade/afterSale/index.vue b/src/views/mall/trade/afterSale/index.vue
index d22e5295..689f751a 100644
--- a/src/views/mall/trade/afterSale/index.vue
+++ b/src/views/mall/trade/afterSale/index.vue
@@ -123,7 +123,7 @@
           <div class="flex items-center">
             <el-image
               :src="row.picUrl"
-              class="w-30px h-30px mr-10px"
+              class="mr-10px h-30px w-30px"
               @click="imagePreview(row.picUrl)"
             />
             <span class="mr-10px">{{ row.spuName }}</span>
diff --git a/src/views/mall/trade/delivery/expressTemplate/ExpressTemplateForm.vue b/src/views/mall/trade/delivery/expressTemplate/ExpressTemplateForm.vue
index 7a2233a7..d05f9ca7 100644
--- a/src/views/mall/trade/delivery/expressTemplate/ExpressTemplateForm.vue
+++ b/src/views/mall/trade/delivery/expressTemplate/ExpressTemplateForm.vue
@@ -28,13 +28,13 @@
               <!--   区域数据太多,用赖加载方式,要不然性能有问题 -->
               <el-tree-select
                 v-model="row.areaIds"
-                lazy
                 :load="loadChargeArea"
                 :props="defaultProps"
-                multiple
                 node-key="id"
+                multiple
                 check-strictly
                 show-checkbox
+                lazy
                 check-on-click-node
                 :render-after-expand="false"
                 :cache-data="areaCache"
diff --git a/src/views/mall/trade/order/index.vue b/src/views/mall/trade/order/index.vue
index dca2fe85..0970f6bc 100644
--- a/src/views/mall/trade/order/index.vue
+++ b/src/views/mall/trade/order/index.vue
@@ -199,7 +199,7 @@
                 <div class="flex items-center">
                   <el-image
                     :src="row.picUrl"
-                    class="w-30px h-30px mr-10px"
+                    class="mr-10px h-30px w-30px"
                     @click="imagePreview(row.picUrl)"
                   />
                   <span class="mr-10px">{{ row.spuName }}</span>
diff --git a/src/views/member/level/index.vue b/src/views/member/level/index.vue
index 58fbcddb..1347b7ef 100644
--- a/src/views/member/level/index.vue
+++ b/src/views/member/level/index.vue
@@ -45,7 +45,7 @@
         <template #default="scope">
           <el-image
             :src="scope.row.icon"
-            class="w-30px h-30px"
+            class="h-30px w-30px"
             :preview-src-list="[scope.row.icon]"
           />
         </template>
@@ -54,7 +54,7 @@
         <template #default="scope">
           <el-image
             :src="scope.row.backgroundUrl"
-            class="w-30px h-30px"
+            class="h-30px w-30px"
             :preview-src-list="[scope.row.backgroundUrl]"
           />
         </template>
diff --git a/src/views/member/user/detail/UserAccountInfo.vue b/src/views/member/user/detail/UserAccountInfo.vue
index 6e847d06..fff4b6b0 100644
--- a/src/views/member/user/detail/UserAccountInfo.vue
+++ b/src/views/member/user/detail/UserAccountInfo.vue
@@ -54,6 +54,7 @@ const { user } = defineProps<{ user: UserApi.UserVO }>()
 .cell-item {
   display: inline;
 }
+
 .cell-item::after {
   content: ':';
 }
diff --git a/src/views/member/user/detail/index.vue b/src/views/member/user/detail/index.vue
index 6e4eb13f..763b4103 100644
--- a/src/views/member/user/detail/index.vue
+++ b/src/views/member/user/detail/index.vue
@@ -69,12 +69,13 @@ import UserSignList from './UserSignList.vue'
 import UserExperienceRecordList from './UserExperienceRecordList.vue'
 import { CardTitle } from '@/components/Card/index'
 import UserOrderList from '@/views/member/user/detail/UserOrderList.vue'
+import { ElMessage } from 'element-plus'
 
 defineOptions({ name: 'MemberDetail' })
 
 const activeName = ref('point') // 账户明细 选中的 tabs
 const loading = ref(true) // 加载中
-let user = ref<UserApi.UserVO>({})
+const user = ref<UserApi.UserVO>()
 
 /** 添加/修改操作 */
 const formRef = ref()
@@ -110,10 +111,12 @@ onMounted(() => {
 .detail-info-item:first-child {
   padding-left: 0 !important;
 }
+
 /* first-child 不生效有没有大佬给看下q.q */
 .detail-info-item:nth-child(2) {
   padding-right: 0 !important;
 }
+
 .card-header {
   display: flex;
   justify-content: space-between;
diff --git a/src/views/mp/components/wx-video-play/main.vue b/src/views/mp/components/wx-video-play/main.vue
index 092b0e85..d544bbea 100644
--- a/src/views/mp/components/wx-video-play/main.vue
+++ b/src/views/mp/components/wx-video-play/main.vue
@@ -26,8 +26,8 @@
         :src="props.url"
         poster=""
         crossorigin="anonymous"
-        playsinline
         controls
+        playsinline
         :volume="0.6"
         :width="800"
         :playback-rates="[0.7, 1.0, 1.5, 2.0]"
diff --git a/src/views/mp/menu/components/MenuPreviewer.vue b/src/views/mp/menu/components/MenuPreviewer.vue
index a0c851e2..93a19800 100644
--- a/src/views/mp/menu/components/MenuPreviewer.vue
+++ b/src/views/mp/menu/components/MenuPreviewer.vue
@@ -26,7 +26,7 @@
             @end="onChildDragEnd"
           >
             <template #item="{ element: child, index: y }">
-              <div class="subtitle menu_bottom">
+              <div class="menu_bottom subtitle">
                 <div
                   class="menu_subItem"
                   v-if="parent.children"
diff --git a/src/views/mp/menu/index.vue b/src/views/mp/menu/index.vue
index 03be6b97..8cc8f586 100644
--- a/src/views/mp/menu/index.vue
+++ b/src/views/mp/menu/index.vue
@@ -10,13 +10,13 @@
   </ContentWrap>
 
   <ContentWrap>
-    <div class="public-account-management clearfix" v-loading="loading">
+    <div class="clearfix public-account-management" v-loading="loading">
       <!--左边配置菜单-->
       <div class="left">
         <div class="weixin-hd">
           <div class="weixin-title">{{ accountName }}</div>
         </div>
-        <div class="weixin-menu clearfix">
+        <div class="clearfix weixin-menu">
           <MenuPreviewer
             v-model="menuList"
             :account-id="accountId"
diff --git a/src/views/pay/order/index.vue b/src/views/pay/order/index.vue
index 9f537e50..16026599 100644
--- a/src/views/pay/order/index.vue
+++ b/src/views/pay/order/index.vue
@@ -267,7 +267,7 @@ onMounted(async () => {
 </script>
 <style>
 .order-font {
-  font-size: 12px;
   padding: 2px 0;
+  font-size: 12px;
 }
 </style>
diff --git a/src/views/system/oauth2/client/ClientForm.vue b/src/views/system/oauth2/client/ClientForm.vue
index f7c021d9..5d13f71b 100644
--- a/src/views/system/oauth2/client/ClientForm.vue
+++ b/src/views/system/oauth2/client/ClientForm.vue
@@ -58,9 +58,9 @@
       <el-form-item label="授权范围" prop="scopes">
         <el-select
           v-model="formData.scopes"
-          allow-create
           filterable
           multiple
+          allow-create
           placeholder="请输入授权范围"
           style="width: 500px"
         >
diff --git a/src/views/system/user/DeptTree.vue b/src/views/system/user/DeptTree.vue
index bd8cc575..ab8ba06f 100644
--- a/src/views/system/user/DeptTree.vue
+++ b/src/views/system/user/DeptTree.vue
@@ -51,6 +51,11 @@ const handleNodeClick = async (row: { [key: string]: any }) => {
 }
 const emits = defineEmits(['node-click'])
 
+/** 监听deptName */
+watch(deptName, (val) => {
+  treeRef.value!.filter(val)
+})
+
 /** 初始化 */
 onMounted(async () => {
   await getTree()
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 30bc2c81..b5fcb422 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -136,7 +136,7 @@
           />
           <el-table-column label="操作" align="center" width="160">
             <template #default="scope">
-              <div class="flex justify-center items-center">
+              <div class="flex items-center justify-center">
                 <el-button
                   type="primary"
                   link
diff --git a/tsconfig.json b/tsconfig.json
index d2909a8a..1ee23774 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -29,8 +29,7 @@
       "element-plus/global",
       "@types/intro.js",
       "@types/qrcode",
-      "vite-plugin-svg-icons/client",
-      "@form-create/element-ui/types"
+      "vite-plugin-svg-icons/client"
     ],
     "outDir": "target", // 请保留这个属性,防止tsconfig.json文件报错
     "typeRoots": ["./node_modules/@types/", "./types"]