diff --git a/src/App.vue b/src/App.vue
index fa0bee7a3..f75478cd6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" name="APP" setup>
 import { isDark } from '@/utils/is'
 import { useAppStore } from '@/store/modules/app'
 import { useDesign } from '@/hooks/web/useDesign'
@@ -35,6 +35,7 @@ $prefix-cls: #{$namespace}-app;
   width: 100%;
   height: 100%;
 }
+
 html,
 body {
   padding: 0 !important;
@@ -46,6 +47,7 @@ body {
     @extend .size;
   }
 }
+
 .#{$prefix-cls}-grey-mode {
   filter: grayscale(100%);
 }
diff --git a/src/components/Backtop/src/Backtop.vue b/src/components/Backtop/src/Backtop.vue
index f5c2fc444..70cf78cd2 100644
--- a/src/components/Backtop/src/Backtop.vue
+++ b/src/components/Backtop/src/Backtop.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" name="BackTop" setup>
 import { ElBacktop } from 'element-plus'
 import { useDesign } from '@/hooks/web/useDesign'
 
diff --git a/src/components/ConfigGlobal/src/ConfigGlobal.vue b/src/components/ConfigGlobal/src/ConfigGlobal.vue
index 10a0a9f2f..20ff03574 100644
--- a/src/components/ConfigGlobal/src/ConfigGlobal.vue
+++ b/src/components/ConfigGlobal/src/ConfigGlobal.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" name="ConfigGlobal" setup>
 import { propTypes } from '@/utils/propTypes'
 import { useLocaleStore } from '@/store/modules/locale'
 import { useAppStore } from '@/store/modules/app'
@@ -51,9 +51,9 @@ const currentLocale = computed(() => localeStore.currentLocale)
 
 <template>
   <ElConfigProvider
-    :namespace="variables.elNamespace"
     :locale="currentLocale.elLocale"
     :message="{ max: 1 }"
+    :namespace="variables.elNamespace"
     :size="size"
   >
     <slot></slot>
diff --git a/src/components/ContentDetailWrap/src/ContentDetailWrap.vue b/src/components/ContentDetailWrap/src/ContentDetailWrap.vue
index 697ea18a7..9469a5522 100644
--- a/src/components/ContentDetailWrap/src/ContentDetailWrap.vue
+++ b/src/components/ContentDetailWrap/src/ContentDetailWrap.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" name="ContentDetailWrap" setup>
 import { propTypes } from '@/utils/propTypes'
 import { useDesign } from '@/hooks/web/useDesign'
 
@@ -21,7 +21,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div :class="[`${prefixCls}-container`]" ref="contentDetailWrap">
+  <div ref="contentDetailWrap" :class="[`${prefixCls}-container`]">
     <Sticky :offset="offset">
       <div
         :class="[
@@ -31,7 +31,7 @@ onMounted(() => {
       >
         <div :class="[`${prefixCls}-header__back`, 'flex pl-10px pr-10px ']">
           <ElButton @click="emit('back')">
-            <Icon icon="ep:arrow-left" class="mr-5px" />
+            <Icon class="mr-5px" icon="ep:arrow-left" />
             {{ t('common.back') }}
           </ElButton>
         </div>
@@ -47,7 +47,9 @@ onMounted(() => {
     </Sticky>
     <div style="padding: var(--app-content-padding)">
       <ElCard :class="[`${prefixCls}-body`, 'mb-20px']" shadow="never">
-        <div> <slot></slot> </div>
+        <div>
+          <slot></slot>
+        </div>
       </ElCard>
     </div>
   </div>
diff --git a/src/components/ContentWrap/src/ContentWrap.vue b/src/components/ContentWrap/src/ContentWrap.vue
index 6890e2148..0fcfb16f3 100644
--- a/src/components/ContentWrap/src/ContentWrap.vue
+++ b/src/components/ContentWrap/src/ContentWrap.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" name="ContentWrap" setup>
 import { propTypes } from '@/utils/propTypes'
 import { useDesign } from '@/hooks/web/useDesign'
 
@@ -21,7 +21,7 @@ defineProps({
           <template #content>
             <div class="max-w-200px">{{ message }}</div>
           </template>
-          <Icon class="ml-5px" icon="ep:question-filled" :size="14" />
+          <Icon :size="14" class="ml-5px" icon="ep:question-filled" />
         </ElTooltip>
       </div>
     </template>
diff --git a/src/components/CountTo/src/CountTo.vue b/src/components/CountTo/src/CountTo.vue
index 8d2f1ade0..c4fa7b56c 100644
--- a/src/components/CountTo/src/CountTo.vue
+++ b/src/components/CountTo/src/CountTo.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" name="CountTo" setup>
 import { PropType } from 'vue'
 import { isNumber } from '@/utils/is'
 import { propTypes } from '@/utils/propTypes'
diff --git a/src/components/Crontab/src/Crontab.vue b/src/components/Crontab/src/Crontab.vue
index 0e474fb2a..13096f75d 100644
--- a/src/components/Crontab/src/Crontab.vue
+++ b/src/components/Crontab/src/Crontab.vue
@@ -1,10 +1,12 @@
-<script setup lang="ts">
+<script lang="ts" name="Crontab" setup>
 import { ElMessage } from 'element-plus'
 import { PropType } from 'vue'
+
 interface shortcutsType {
   text: string
   value: string
 }
+
 const props = defineProps({
   modelValue: {
     type: String,
@@ -501,7 +503,7 @@ const submit = () => {
 }
 </script>
 <template>
-  <el-input v-model="defaultValue" v-bind="$attrs" class="input-with-select">
+  <el-input v-model="defaultValue" class="input-with-select" v-bind="$attrs">
     <template #append>
       <el-select v-model="select" placeholder="生成器" style="width: 115px">
         <el-option label="每分钟" value="0 * * * * ?" />
@@ -522,11 +524,11 @@ const submit = () => {
   </el-input>
 
   <el-dialog
-    title="cron规则生成器"
     v-model="dialogVisible"
     :width="580"
-    destroy-on-close
     append-to-body
+    destroy-on-close
+    title="cron规则生成器"
   >
     <div class="sc-cron">
       <el-tabs>
@@ -546,38 +548,38 @@ const submit = () => {
                 <el-radio-button label="3">指定</el-radio-button>
               </el-radio-group>
             </el-form-item>
-            <el-form-item label="范围" v-if="cronValue.second.type == '1'">
+            <el-form-item v-if="cronValue.second.type == '1'" label="范围">
               <el-input-number
                 v-model="cronValue.second.range.start"
-                :min="0"
                 :max="59"
+                :min="0"
                 controls-position="right"
               />
               <span style="padding: 0 15px">-</span>
               <el-input-number
                 v-model="cronValue.second.range.end"
-                :min="0"
                 :max="59"
+                :min="0"
                 controls-position="right"
               />
             </el-form-item>
-            <el-form-item label="间隔" v-if="cronValue.second.type == '2'">
+            <el-form-item v-if="cronValue.second.type == '2'" label="间隔">
               <el-input-number
                 v-model="cronValue.second.loop.start"
-                :min="0"
                 :max="59"
+                :min="0"
                 controls-position="right"
               />
               秒开始，每
               <el-input-number
                 v-model="cronValue.second.loop.end"
-                :min="0"
                 :max="59"
+                :min="0"
                 controls-position="right"
               />
               秒执行一次
             </el-form-item>
-            <el-form-item label="指定" v-if="cronValue.second.type == '3'">
+            <el-form-item v-if="cronValue.second.type == '3'" label="指定">
               <el-select v-model="cronValue.second.appoint" multiple style="width: 100%">
                 <el-option
                   v-for="(item, index) in data.second"
@@ -605,38 +607,38 @@ const submit = () => {
                 <el-radio-button label="3">指定</el-radio-button>
               </el-radio-group>
             </el-form-item>
-            <el-form-item label="范围" v-if="cronValue.minute.type == '1'">
+            <el-form-item v-if="cronValue.minute.type == '1'" label="范围">
               <el-input-number
                 v-model="cronValue.minute.range.start"
-                :min="0"
                 :max="59"
+                :min="0"
                 controls-position="right"
               />
               <span style="padding: 0 15px">-</span>
               <el-input-number
                 v-model="cronValue.minute.range.end"
-                :min="0"
                 :max="59"
+                :min="0"
                 controls-position="right"
               />
             </el-form-item>
-            <el-form-item label="间隔" v-if="cronValue.minute.type == '2'">
+            <el-form-item v-if="cronValue.minute.type == '2'" label="间隔">
               <el-input-number
                 v-model="cronValue.minute.loop.start"
-                :min="0"
                 :max="59"
+                :min="0"
                 controls-position="right"
               />
               分钟开始，每
               <el-input-number
                 v-model="cronValue.minute.loop.end"
-                :min="0"
                 :max="59"
+                :min="0"
                 controls-position="right"
               />
               分钟执行一次
             </el-form-item>
-            <el-form-item label="指定" v-if="cronValue.minute.type == '3'">
+            <el-form-item v-if="cronValue.minute.type == '3'" label="指定">
               <el-select v-model="cronValue.minute.appoint" multiple style="width: 100%">
                 <el-option
                   v-for="(item, index) in data.minute"
@@ -664,38 +666,38 @@ const submit = () => {
                 <el-radio-button label="3">指定</el-radio-button>
               </el-radio-group>
             </el-form-item>
-            <el-form-item label="范围" v-if="cronValue.hour.type == '1'">
+            <el-form-item v-if="cronValue.hour.type == '1'" label="范围">
               <el-input-number
                 v-model="cronValue.hour.range.start"
-                :min="0"
                 :max="23"
+                :min="0"
                 controls-position="right"
               />
               <span style="padding: 0 15px">-</span>
               <el-input-number
                 v-model="cronValue.hour.range.end"
-                :min="0"
                 :max="23"
+                :min="0"
                 controls-position="right"
               />
             </el-form-item>
-            <el-form-item label="间隔" v-if="cronValue.hour.type == '2'">
+            <el-form-item v-if="cronValue.hour.type == '2'" label="间隔">
               <el-input-number
                 v-model="cronValue.hour.loop.start"
-                :min="0"
                 :max="23"
+                :min="0"
                 controls-position="right"
               />
               小时开始，每
               <el-input-number
                 v-model="cronValue.hour.loop.end"
-                :min="0"
                 :max="23"
+                :min="0"
                 controls-position="right"
               />
               小时执行一次
             </el-form-item>
-            <el-form-item label="指定" v-if="cronValue.hour.type == '3'">
+            <el-form-item v-if="cronValue.hour.type == '3'" label="指定">
               <el-select v-model="cronValue.hour.appoint" multiple style="width: 100%">
                 <el-option
                   v-for="(item, index) in data.hour"
@@ -725,38 +727,38 @@ const submit = () => {
                 <el-radio-button label="5">不指定</el-radio-button>
               </el-radio-group>
             </el-form-item>
-            <el-form-item label="范围" v-if="cronValue.day.type == '1'">
+            <el-form-item v-if="cronValue.day.type == '1'" label="范围">
               <el-input-number
                 v-model="cronValue.day.range.start"
-                :min="1"
                 :max="31"
+                :min="1"
                 controls-position="right"
               />
               <span style="padding: 0 15px">-</span>
               <el-input-number
                 v-model="cronValue.day.range.end"
-                :min="1"
                 :max="31"
+                :min="1"
                 controls-position="right"
               />
             </el-form-item>
-            <el-form-item label="间隔" v-if="cronValue.day.type == '2'">
+            <el-form-item v-if="cronValue.day.type == '2'" label="间隔">
               <el-input-number
                 v-model="cronValue.day.loop.start"
-                :min="1"
                 :max="31"
+                :min="1"
                 controls-position="right"
               />
               号开始，每
               <el-input-number
                 v-model="cronValue.day.loop.end"
-                :min="1"
                 :max="31"
+                :min="1"
                 controls-position="right"
               />
               天执行一次
             </el-form-item>
-            <el-form-item label="指定" v-if="cronValue.day.type == '3'">
+            <el-form-item v-if="cronValue.day.type == '3'" label="指定">
               <el-select v-model="cronValue.day.appoint" multiple style="width: 100%">
                 <el-option
                   v-for="(item, index) in data.day"
@@ -784,38 +786,38 @@ const submit = () => {
                 <el-radio-button label="3">指定</el-radio-button>
               </el-radio-group>
             </el-form-item>
-            <el-form-item label="范围" v-if="cronValue.month.type == '1'">
+            <el-form-item v-if="cronValue.month.type == '1'" label="范围">
               <el-input-number
                 v-model="cronValue.month.range.start"
-                :min="1"
                 :max="12"
+                :min="1"
                 controls-position="right"
               />
               <span style="padding: 0 15px">-</span>
               <el-input-number
                 v-model="cronValue.month.range.end"
-                :min="1"
                 :max="12"
+                :min="1"
                 controls-position="right"
               />
             </el-form-item>
-            <el-form-item label="间隔" v-if="cronValue.month.type == '2'">
+            <el-form-item v-if="cronValue.month.type == '2'" label="间隔">
               <el-input-number
                 v-model="cronValue.month.loop.start"
-                :min="1"
                 :max="12"
+                :min="1"
                 controls-position="right"
               />
               月开始，每
               <el-input-number
                 v-model="cronValue.month.loop.end"
-                :min="1"
                 :max="12"
+                :min="1"
                 controls-position="right"
               />
               月执行一次
             </el-form-item>
-            <el-form-item label="指定" v-if="cronValue.month.type == '3'">
+            <el-form-item v-if="cronValue.month.type == '3'" label="指定">
               <el-select v-model="cronValue.month.appoint" multiple style="width: 100%">
                 <el-option
                   v-for="(item, index) in data.month"
@@ -846,7 +848,7 @@ const submit = () => {
                   <el-radio-button label="5">不指定</el-radio-button>
                 </el-radio-group>
               </el-form-item>
-              <el-form-item label="范围" v-if="cronValue.week.type == '1'">
+              <el-form-item v-if="cronValue.week.type == '1'" label="范围">
                 <el-select v-model="cronValue.week.range.start">
                   <el-option
                     v-for="(item, index) in data.week"
@@ -865,12 +867,12 @@ const submit = () => {
                   />
                 </el-select>
               </el-form-item>
-              <el-form-item label="间隔" v-if="cronValue.week.type == '2'">
+              <el-form-item v-if="cronValue.week.type == '2'" label="间隔">
                 第
                 <el-input-number
                   v-model="cronValue.week.loop.start"
-                  :min="1"
                   :max="4"
+                  :min="1"
                   controls-position="right"
                 />
                 周的星期
@@ -884,7 +886,7 @@ const submit = () => {
                 </el-select>
                 执行一次
               </el-form-item>
-              <el-form-item label="指定" v-if="cronValue.week.type == '3'">
+              <el-form-item v-if="cronValue.week.type == '3'" label="指定">
                 <el-select v-model="cronValue.week.appoint" multiple style="width: 100%">
                   <el-option
                     v-for="(item, index) in data.week"
@@ -894,7 +896,7 @@ const submit = () => {
                   />
                 </el-select>
               </el-form-item>
-              <el-form-item label="最后一周" v-if="cronValue.week.type == '4'">
+              <el-form-item v-if="cronValue.week.type == '4'" label="最后一周">
                 <el-select v-model="cronValue.week.last">
                   <el-option
                     v-for="(item, index) in data.week"
@@ -924,12 +926,12 @@ const submit = () => {
                 <el-radio-button label="3">指定</el-radio-button>
               </el-radio-group>
             </el-form-item>
-            <el-form-item label="范围" v-if="cronValue.year.type == '1'">
+            <el-form-item v-if="cronValue.year.type == '1'" label="范围">
               <el-input-number v-model="cronValue.year.range.start" controls-position="right" />
               <span style="padding: 0 15px">-</span>
               <el-input-number v-model="cronValue.year.range.end" controls-position="right" />
             </el-form-item>
-            <el-form-item label="间隔" v-if="cronValue.year.type == '2'">
+            <el-form-item v-if="cronValue.year.type == '2'" label="间隔">
               <el-input-number v-model="cronValue.year.loop.start" controls-position="right" />
               年开始，每
               <el-input-number
@@ -939,7 +941,7 @@ const submit = () => {
               />
               年执行一次
             </el-form-item>
-            <el-form-item label="指定" v-if="cronValue.year.type == '3'">
+            <el-form-item v-if="cronValue.year.type == '3'" label="指定">
               <el-select v-model="cronValue.year.appoint" multiple style="width: 100%">
                 <el-option
                   v-for="(item, index) in data.year"
@@ -968,16 +970,19 @@ const submit = () => {
   padding: 0 7px;
   vertical-align: bottom;
 }
+
 .sc-cron-num {
   text-align: center;
   margin-bottom: 15px;
   width: 100%;
 }
+
 .sc-cron-num h2 {
   font-size: 12px;
   margin-bottom: 15px;
   font-weight: normal;
 }
+
 .sc-cron-num h4 {
   display: block;
   height: 32px;
@@ -988,13 +993,16 @@ const submit = () => {
   background: var(--el-color-primary-light-9);
   border-radius: 4px;
 }
+
 .sc-cron:deep(.el-tabs__item.is-active) .sc-cron-num h4 {
   background: var(--el-color-primary);
   color: #fff;
 }
+
 [data-theme='dark'] .sc-cron-num h4 {
   background: var(--el-color-white);
 }
+
 .input-with-select .el-input-group__prepend {
   background-color: var(--el-fill-color-blank);
 }
diff --git a/src/components/Cropper/src/CopperModal.vue b/src/components/Cropper/src/CopperModal.vue
index 2365e5ec5..c303b58c1 100644
--- a/src/components/Cropper/src/CopperModal.vue
+++ b/src/components/Cropper/src/CopperModal.vue
@@ -2,26 +2,26 @@
   <div>
     <Dialog
       v-model="dialogVisible"
-      :title="t('cropper.modalTitle')"
-      width="800px"
-      maxHeight="380px"
       :canFullscreen="false"
+      :title="t('cropper.modalTitle')"
+      maxHeight="380px"
+      width="800px"
     >
       <div :class="prefixCls">
         <div :class="`${prefixCls}-left`">
           <div :class="`${prefixCls}-cropper`">
             <CropperImage
               v-if="src"
+              :circled="circled"
               :src="src"
               height="300px"
-              :circled="circled"
               @cropend="handleCropend"
               @ready="handleReady"
             />
           </div>
 
           <div :class="`${prefixCls}-toolbar`">
-            <el-upload :fileList="[]" accept="image/*" :beforeUpload="handleBeforeUpload">
+            <el-upload :beforeUpload="handleBeforeUpload" :fileList="[]" accept="image/*">
               <el-tooltip :content="t('cropper.selectImage')" placement="bottom">
                 <XButton preIcon="ant-design:upload-outlined" type="primary" />
               </el-tooltip>
@@ -29,64 +29,64 @@
             <el-space>
               <el-tooltip :content="t('cropper.btn_reset')" placement="bottom">
                 <XButton
-                  type="primary"
+                  :disabled="!src"
                   preIcon="ant-design:reload-outlined"
                   size="small"
-                  :disabled="!src"
+                  type="primary"
                   @click="handlerToolbar('reset')"
                 />
               </el-tooltip>
               <el-tooltip :content="t('cropper.btn_rotate_left')" placement="bottom">
                 <XButton
-                  type="primary"
+                  :disabled="!src"
                   preIcon="ant-design:rotate-left-outlined"
                   size="small"
-                  :disabled="!src"
+                  type="primary"
                   @click="handlerToolbar('rotate', -45)"
                 />
               </el-tooltip>
               <el-tooltip :content="t('cropper.btn_rotate_right')" placement="bottom">
                 <XButton
-                  type="primary"
+                  :disabled="!src"
                   preIcon="ant-design:rotate-right-outlined"
                   size="small"
-                  :disabled="!src"
+                  type="primary"
                   @click="handlerToolbar('rotate', 45)"
                 />
               </el-tooltip>
               <el-tooltip :content="t('cropper.btn_scale_x')" placement="bottom">
                 <XButton
-                  type="primary"
+                  :disabled="!src"
                   preIcon="vaadin:arrows-long-h"
                   size="small"
-                  :disabled="!src"
+                  type="primary"
                   @click="handlerToolbar('scaleX')"
                 />
               </el-tooltip>
               <el-tooltip :content="t('cropper.btn_scale_y')" placement="bottom">
                 <XButton
-                  type="primary"
+                  :disabled="!src"
                   preIcon="vaadin:arrows-long-v"
                   size="small"
-                  :disabled="!src"
+                  type="primary"
                   @click="handlerToolbar('scaleY')"
                 />
               </el-tooltip>
               <el-tooltip :content="t('cropper.btn_zoom_in')" placement="bottom">
                 <XButton
-                  type="primary"
+                  :disabled="!src"
                   preIcon="ant-design:zoom-in-outlined"
                   size="small"
-                  :disabled="!src"
+                  type="primary"
                   @click="handlerToolbar('zoom', 0.1)"
                 />
               </el-tooltip>
               <el-tooltip :content="t('cropper.btn_zoom_out')" placement="bottom">
                 <XButton
-                  type="primary"
+                  :disabled="!src"
                   preIcon="ant-design:zoom-out-outlined"
                   size="small"
-                  :disabled="!src"
+                  type="primary"
                   @click="handlerToolbar('zoom', -0.1)"
                 />
               </el-tooltip>
@@ -95,14 +95,14 @@
         </div>
         <div :class="`${prefixCls}-right`">
           <div :class="`${prefixCls}-preview`">
-            <img :src="previewSource" v-if="previewSource" :alt="t('cropper.preview')" />
+            <img v-if="previewSource" :alt="t('cropper.preview')" :src="previewSource" />
           </div>
           <template v-if="previewSource">
             <div :class="`${prefixCls}-group`">
               <el-avatar :src="previewSource" size="large" />
-              <el-avatar :src="previewSource" :size="48" />
-              <el-avatar :src="previewSource" :size="64" />
-              <el-avatar :src="previewSource" :size="80" />
+              <el-avatar :size="48" :src="previewSource" />
+              <el-avatar :size="64" :src="previewSource" />
+              <el-avatar :size="80" :src="previewSource" />
             </div>
           </template>
         </div>
@@ -113,7 +113,7 @@
     </Dialog>
   </div>
 </template>
-<script setup lang="ts">
+<script lang="ts" name="CopperModal" setup>
 import { useDesign } from '@/hooks/web/useDesign'
 import { dataURLtoBlob } from '@/utils/filt'
 import { useI18n } from 'vue-i18n'
@@ -173,12 +173,15 @@ async function handleOk() {
   const blob = dataURLtoBlob(previewSource.value)
   emit('uploadSuccess', { source: previewSource.value, data: blob, filename: filename })
 }
+
 function openModal() {
   dialogVisible.value = true
 }
+
 function closeModal() {
   dialogVisible.value = false
 }
+
 defineExpose({ openModal, closeModal })
 </script>
 <style lang="scss">
diff --git a/src/components/Cropper/src/Cropper.vue b/src/components/Cropper/src/Cropper.vue
index 459c97fac..ced43f968 100644
--- a/src/components/Cropper/src/Cropper.vue
+++ b/src/components/Cropper/src/Cropper.vue
@@ -3,14 +3,14 @@
     <img
       v-show="isReady"
       ref="imgElRef"
-      :src="src"
       :alt="alt"
       :crossorigin="crossorigin"
+      :src="src"
       :style="getImageStyle"
     />
   </div>
 </template>
-<script setup lang="ts">
+<script lang="ts" name="Cropper" setup>
 import { CSSProperties, PropType } from 'vue'
 import Cropper from 'cropperjs'
 import 'cropperjs/dist/cropper.css'
diff --git a/src/components/Cropper/src/CropperAvatar.vue b/src/components/Cropper/src/CropperAvatar.vue
index dc4c7475e..179e0ec92 100644
--- a/src/components/Cropper/src/CropperAvatar.vue
+++ b/src/components/Cropper/src/CropperAvatar.vue
@@ -1,17 +1,17 @@
 <template>
   <div class="user-info-head" @click="open()">
-    <img :src="sourceValue" v-if="sourceValue" class="img-circle img-lg" alt="avatar" />
-    <el-button :class="`${prefixCls}-upload-btn`" @click="open()" v-if="showBtn">
+    <img v-if="sourceValue" :src="sourceValue" 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>
     <CopperModal
       ref="cropperModelRef"
-      @upload-success="handleUploadSuccess"
       :srcValue="sourceValue"
+      @upload-success="handleUploadSuccess"
     />
   </div>
 </template>
-<script setup lang="ts">
+<script lang="ts" name="CropperAvatar" setup>
 import { useDesign } from '@/hooks/web/useDesign'
 
 import { propTypes } from '@/utils/propTypes'
@@ -54,9 +54,11 @@ function handleUploadSuccess({ source, data, filename }) {
 function open() {
   cropperModelRef.value.openModal()
 }
+
 function close() {
   cropperModelRef.value.closeModal()
 }
+
 defineExpose({
   open,
   close
@@ -104,17 +106,21 @@ $prefix-cls: #{$namespace}--cropper-avatar;
     margin: 10px auto;
   }
 }
+
 .user-info-head {
   position: relative;
   display: inline-block;
 }
+
 .img-circle {
   border-radius: 50%;
 }
+
 .img-lg {
   width: 120px;
   height: 120px;
 }
+
 .user-info-head:hover:after {
   content: '+';
   position: absolute;
diff --git a/src/components/Descriptions/src/Descriptions.vue b/src/components/Descriptions/src/Descriptions.vue
index fe4a17001..6b1ffbd1b 100644
--- a/src/components/Descriptions/src/Descriptions.vue
+++ b/src/components/Descriptions/src/Descriptions.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" name="Descriptions" setup>
 import { PropType } from 'vue'
 import dayjs from 'dayjs'
 import { useDesign } from '@/hooks/web/useDesign'
@@ -84,7 +84,7 @@ const toggleClick = () => {
         <div class="flex items-center">
           {{ title }}
           <ElTooltip v-if="message" :content="message" placement="right">
-            <Icon icon="ep:warning" class="ml-5px" />
+            <Icon class="ml-5px" icon="ep:warning" />
           </ElTooltip>
         </div>
       </div>
@@ -95,8 +95,8 @@ const toggleClick = () => {
       <div v-show="show" :class="[`${prefixCls}-content`, 'p-10px']">
         <ElDescriptions
           :column="props.columns"
-          border
           :direction="mobile ? 'vertical' : 'horizontal'"
+          border
           v-bind="getBindValue"
         >
           <template v-if="slots['extra']" #extra>
@@ -114,8 +114,8 @@ const toggleClick = () => {
                 :row="{
                   label: item.label
                 }"
-                >{{ item.label }}</slot
-              >
+                >{{ item.label }}
+              </slot>
             </template>
 
             <template #default>
diff --git a/src/components/Dialog/src/Dialog.vue b/src/components/Dialog/src/Dialog.vue
index 48d5f1c36..449174d95 100644
--- a/src/components/Dialog/src/Dialog.vue
+++ b/src/components/Dialog/src/Dialog.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" name="Dialog" setup>
 import { propTypes } from '@/utils/propTypes'
 import { isNumber } from '@/utils/is'
 
@@ -59,13 +59,13 @@ const dialogStyle = computed(() => {
 
 <template>
   <ElDialog
-    v-bind="getBindValue"
-    :fullscreen="isFullscreen"
-    destroy-on-close
-    lock-scroll
-    draggable
-    :width="width"
     :close-on-click-modal="true"
+    :fullscreen="isFullscreen"
+    :width="width"
+    destroy-on-close
+    draggable
+    lock-scroll
+    v-bind="getBindValue"
   >
     <template #header>
       <div class="flex justify-between">
@@ -74,8 +74,8 @@ const dialogStyle = computed(() => {
         </slot>
         <Icon
           v-if="fullscreen"
-          class="mr-22px cursor-pointer is-hover mt-2px z-10"
           :icon="isFullscreen ? 'zmdi:fullscreen-exit' : 'zmdi:fullscreen'"
+          class="mr-22px cursor-pointer is-hover mt-2px z-10"
           color="var(--el-color-info)"
           @click="toggleFull"
         />
@@ -83,7 +83,7 @@ const dialogStyle = computed(() => {
     </template>
 
     <!-- 情况一：如果 scroll 为 true，说明开启滚动条 -->
-    <ElScrollbar :style="dialogStyle" v-if="scroll">
+    <ElScrollbar v-if="scroll" :style="dialogStyle">
       <slot></slot>
     </ElScrollbar>
     <!-- 情况二：如果 scroll 为 false，说明关闭滚动条滚动条 -->
diff --git a/src/components/Echart/src/Echart.vue b/src/components/Echart/src/Echart.vue
index 41fde039d..31f2eea00 100644
--- a/src/components/Echart/src/Echart.vue
+++ b/src/components/Echart/src/Echart.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" name="EChart" setup>
 import type { EChartsOption } from 'echarts'
 import echarts from '@/plugins/echarts'
 import { debounce } from 'lodash-es'
diff --git a/src/components/Editor/src/Editor.vue b/src/components/Editor/src/Editor.vue
index 2d7239224..73925f868 100644
--- a/src/components/Editor/src/Editor.vue
+++ b/src/components/Editor/src/Editor.vue
@@ -1,7 +1,7 @@
-<script setup lang="ts">
+<script lang="ts" name="Editor" setup>
 import { PropType } from 'vue'
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
-import { IDomEditor, IEditorConfig, i18nChangeLanguage } from '@wangeditor/editor'
+import { i18nChangeLanguage, IDomEditor, IEditorConfig } from '@wangeditor/editor'
 import { propTypes } from '@/utils/propTypes'
 import { isNumber } from '@/utils/is'
 import { ElMessage } from 'element-plus'
@@ -189,8 +189,8 @@ defineExpose({
     <!-- 编辑器 -->
     <Editor
       v-model="valueHtml"
-      :editorId="editorId"
       :defaultConfig="editorConfig"
+      :editorId="editorId"
       :style="editorStyle"
       @on-change="handleChange"
       @on-created="handleCreated"
diff --git a/src/components/Error/src/Error.vue b/src/components/Error/src/Error.vue
index a979bc018..f8652a13d 100644
--- a/src/components/Error/src/Error.vue
+++ b/src/components/Error/src/Error.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" name="Error" setup>
 import pageError from '@/assets/svgs/404.svg'
 import networkError from '@/assets/svgs/500.svg'
 import noPermission from '@/assets/svgs/403.svg'
@@ -46,7 +46,7 @@ const btnClick = () => {
 <template>
   <div class="flex justify-center">
     <div class="text-center">
-      <img width="350" :src="errorMap[type].url" alt="" />
+      <img :src="errorMap[type].url" alt="" width="350" />
       <div class="text-14px text-[var(--el-color-info)]">{{ errorMap[type].message }}</div>
       <div class="mt-20px">
         <ElButton type="primary" @click="btnClick">{{ errorMap[type].buttonText }}</ElButton>
diff --git a/src/components/IFrame/src/IFrame.vue b/src/components/IFrame/src/IFrame.vue
index 522da3cc4..a8864a728 100644
--- a/src/components/IFrame/src/IFrame.vue
+++ b/src/components/IFrame/src/IFrame.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" name="IFrame" setup>
 import { propTypes } from '@/utils/propTypes'
 
 const props = defineProps({
@@ -20,11 +20,11 @@ onMounted(() => {
 <template>
   <div v-loading="loading" :style="'height:' + height">
     <iframe
+      ref="frameRef"
       :src="props.src"
-      style="width: 100%; height: 100%"
       frameborder="no"
       scrolling="auto"
-      ref="frameRef"
+      style="width: 100%; height: 100%"
     ></iframe>
   </div>
 </template>
diff --git a/src/components/Icon/src/Icon.vue b/src/components/Icon/src/Icon.vue
index bd94fcd4c..92d791c24 100644
--- a/src/components/Icon/src/Icon.vue
+++ b/src/components/Icon/src/Icon.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" name="Icon" setup>
 import { propTypes } from '@/utils/propTypes'
 import Iconify from '@purge-icons/generated'
 import { useDesign } from '@/hooks/web/useDesign'
@@ -72,7 +72,7 @@ watch(
 
 <template>
   <ElIcon :class="prefixCls" :color="color" :size="size">
-    <svg v-if="isLocal" aria-hidden="true" :class="getSvgClass">
+    <svg v-if="isLocal" :class="getSvgClass" aria-hidden="true">
       <use :xlink:href="symbolId" />
     </svg>
 
diff --git a/src/components/Icon/src/IconSelect.vue b/src/components/Icon/src/IconSelect.vue
index 9b77fb2b1..04f4a56a1 100644
--- a/src/components/Icon/src/IconSelect.vue
+++ b/src/components/Icon/src/IconSelect.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" name="IconSelect" setup>
 import { CSSProperties } from 'vue'
 import { cloneDeep } from 'lodash-es'
 import { IconJson } from '@/components/Icon/src/data'
@@ -116,13 +116,13 @@ watch(
     <ElInput v-model="inputValue" @click="visible = !visible">
       <template #append>
         <ElPopover
-          :width="350"
-          trigger="click"
-          popper-class="pure-popper"
           :popper-options="{
             placement: 'auto'
           }"
           :visible="visible"
+          :width="350"
+          popper-class="pure-popper"
+          trigger="click"
         >
           <template #reference>
             <div
@@ -133,7 +133,7 @@ watch(
             </div>
           </template>
 
-          <ElInput class="p-2" v-model="filterValue" placeholder="搜索图标" clearable />
+          <ElInput v-model="filterValue" class="p-2" clearable placeholder="搜索图标" />
           <ElDivider border-style="dashed" />
 
           <ElTabs v-model="currentActiveType" @tab-click="handleClick">
@@ -143,15 +143,15 @@ watch(
               :label="pane.label"
               :name="pane.name"
             >
-              <ElDivider class="tab-divider" border-style="dashed" />
+              <ElDivider border-style="dashed" class="tab-divider" />
               <ElScrollbar height="220px">
                 <ul class="flex flex-wrap px-2 ml-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"
-                    :style="iconItemStyle(item)"
                     @click="onChangeIcon(item)"
                   >
                     <Icon :icon="currentActiveType + item" />
@@ -163,13 +163,13 @@ watch(
           <ElDivider border-style="dashed" />
 
           <ElPagination
-            small
-            :total="iconCount"
-            :page-size="pageSize"
             :current-page="currentPage"
+            :page-size="pageSize"
+            :total="iconCount"
             background
-            layout="prev, pager, next"
             class="flex items-center justify-center h-10"
+            layout="prev, pager, next"
+            small
             @current-change="onCurrentChange"
           />
         </ElPopover>
diff --git a/src/components/ImageViewer/src/ImageViewer.vue b/src/components/ImageViewer/src/ImageViewer.vue
index a2ddc072c..c416f566e 100644
--- a/src/components/ImageViewer/src/ImageViewer.vue
+++ b/src/components/ImageViewer/src/ImageViewer.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" name="ImageViewer" setup>
 import { PropType } from 'vue'
 import { propTypes } from '@/utils/propTypes'
 
diff --git a/src/components/Infotip/src/Infotip.vue b/src/components/Infotip/src/Infotip.vue
index a03f34e28..dde5f4bc5 100644
--- a/src/components/Infotip/src/Infotip.vue
+++ b/src/components/Infotip/src/Infotip.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" name="InfoTip" setup>
 import { PropType } from 'vue'
 import { useDesign } from '@/hooks/web/useDesign'
 import { propTypes } from '@/utils/propTypes'
@@ -34,14 +34,14 @@ const keyClick = (key: string) => {
     ]"
   >
     <div v-if="title" :class="[`${prefixCls}__header`, 'flex items-center']">
-      <Icon icon="ep:warning-filled" :size="22" color="var(--el-color-primary)" />
+      <Icon :size="22" color="var(--el-color-primary)" icon="ep:warning-filled" />
       <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">
         <Highlight
-          :keys="typeof item === 'string' ? [] : item.keys"
           :color="highlightColor"
+          :keys="typeof item === 'string' ? [] : item.keys"
           @click="keyClick"
         >
           {{ showIndex ? `${$index + 1}、` : '' }}{{ typeof item === 'string' ? item : item.label }}
diff --git a/src/components/InputPassword/src/InputPassword.vue b/src/components/InputPassword/src/InputPassword.vue
index 9e82cd41a..19ce032c1 100644
--- a/src/components/InputPassword/src/InputPassword.vue
+++ b/src/components/InputPassword/src/InputPassword.vue
@@ -1,8 +1,8 @@
-<script setup lang="ts">
+<script lang="ts" name="InputPassword" setup>
 import { propTypes } from '@/utils/propTypes'
 import { useConfigGlobal } from '@/hooks/web/useConfigGlobal'
-import { zxcvbn } from '@zxcvbn-ts/core'
 import type { ZxcvbnResult } from '@zxcvbn-ts/core'
+import { zxcvbn } from '@zxcvbn-ts/core'
 import { useDesign } from '@/hooks/web/useDesign'
 
 const { getPrefixCls } = useDesign()
@@ -57,9 +57,9 @@ const getIconName = computed(() => (unref(textType) === 'password' ? 'ep:hide' :
 
 <template>
   <div :class="[prefixCls, `${prefixCls}--${configGlobal?.size}`]">
-    <ElInput v-bind="$attrs" v-model="valueRef" :type="textType">
+    <ElInput v-model="valueRef" :type="textType" v-bind="$attrs">
       <template #suffix>
-        <Icon class="el-input__icon cursor-pointer" :icon="getIconName" @click="changeTextType" />
+        <Icon :icon="getIconName" class="el-input__icon cursor-pointer" @click="changeTextType" />
       </template>
     </ElInput>
     <div
diff --git a/src/components/Pagination/index.vue b/src/components/Pagination/index.vue
index 788809a5b..43112c558 100644
--- a/src/components/Pagination/index.vue
+++ b/src/components/Pagination/index.vue
@@ -2,19 +2,19 @@
 <template>
   <el-pagination
     v-show="total > 0"
-    class="float-right mt-15px mb-15px"
-    :background="true"
-    layout="total, sizes, prev, pager, next, jumper"
-    :page-sizes="[10, 20, 30, 50, 100]"
     v-model:current-page="currentPage"
     v-model:page-size="pageSize"
+    :background="true"
+    :page-sizes="[10, 20, 30, 50, 100]"
     :pager-count="pagerCount"
     :total="total"
+    class="float-right mt-15px mb-15px"
+    layout="total, sizes, prev, pager, next, jumper"
     @size-change="handleSizeChange"
     @current-change="handleCurrentChange"
   />
 </template>
-<script setup>
+<script name="Pagination" setup>
 import { computed } from 'vue'
 
 const props = defineProps({
diff --git a/src/components/Qrcode/src/Qrcode.vue b/src/components/Qrcode/src/Qrcode.vue
index 0ef59ba73..2b72ef8b4 100644
--- a/src/components/Qrcode/src/Qrcode.vue
+++ b/src/components/Qrcode/src/Qrcode.vue
@@ -1,7 +1,6 @@
-<script setup lang="ts">
-import { PropType, nextTick, ref, watch, computed, unref } from 'vue'
-import QRCode from 'qrcode'
-import { QRCodeRenderersOptions } from 'qrcode'
+<script lang="ts" name="Qrcode" setup>
+import { computed, nextTick, PropType, ref, unref, watch } from 'vue'
+import QRCode, { QRCodeRenderersOptions } from 'qrcode'
 import { cloneDeep } from 'lodash-es'
 import { propTypes } from '@/utils/propTypes'
 import { useDesign } from '@/hooks/web/useDesign'
@@ -230,7 +229,7 @@ const disabledClick = () => {
       @click="disabledClick"
     >
       <div class="absolute top-[50%] left-[50%] font-bold">
-        <Icon icon="ep:refresh-right" :size="30" color="var(--el-color-primary)" />
+        <Icon :size="30" color="var(--el-color-primary)" icon="ep:refresh-right" />
         <div>{{ disabledText }}</div>
       </div>
     </div>
diff --git a/src/components/Search/src/Search.vue b/src/components/Search/src/Search.vue
index cb3d5dea1..8309c43fd 100644
--- a/src/components/Search/src/Search.vue
+++ b/src/components/Search/src/Search.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" name="Search" setup>
 import { PropType } from 'vue'
 import { propTypes } from '@/utils/propTypes'
 
@@ -100,25 +100,25 @@ const setVisible = () => {
 <template>
   <!-- update by 芋艿：class="-mb-15px" 用于降低和 ContentWrap 组件的底部距离，避免空隙过大 -->
   <Form
-    :is-custom="false"
-    :label-width="labelWidth"
-    hide-required-asterisk
     :inline="inline"
     :is-col="isCol"
+    :is-custom="false"
+    :label-width="labelWidth"
     :schema="newSchema"
-    @register="register"
     class="-mb-15px"
+    hide-required-asterisk
+    @register="register"
   >
     <template #action>
       <div v-if="layout === 'inline'">
         <!-- update by 芋艿：去除搜索的 type="primary"，颜色变淡一点 -->
         <ElButton v-if="showSearch" @click="search">
-          <Icon icon="ep:search" class="mr-5px" />
+          <Icon class="mr-5px" icon="ep:search" />
           {{ t('common.query') }}
         </ElButton>
         <!-- update by 芋艿：将 icon="ep:refresh-right" 修改成 icon="ep:refresh"，和 ruoyi-vue 搜索保持一致  -->
         <ElButton v-if="showReset" @click="reset">
-          <Icon icon="ep:refresh" class="mr-5px" />
+          <Icon class="mr-5px" icon="ep:refresh" />
           {{ t('common.reset') }}
         </ElButton>
         <ElButton v-if="expand" text @click="setVisible">
@@ -129,19 +129,19 @@ const setVisible = () => {
         <slot name="actionMore"></slot>
       </div>
     </template>
-    <template #[name] v-for="name in Object.keys($slots)" :key="name"
-      ><slot :name="name"></slot
-    ></template>
+    <template v-for="name in Object.keys($slots)" :key="name" #[name]>
+      <slot :name="name"></slot>
+    </template>
   </Form>
 
   <template v-if="layout === 'bottom'">
     <div :style="bottonButtonStyle">
       <ElButton v-if="showSearch" type="primary" @click="search">
-        <Icon icon="ep:search" class="mr-5px" />
+        <Icon class="mr-5px" icon="ep:search" />
         {{ t('common.query') }}
       </ElButton>
       <ElButton v-if="showReset" @click="reset">
-        <Icon icon="ep:refresh-right" class="mr-5px" />
+        <Icon class="mr-5px" icon="ep:refresh-right" />
         {{ t('common.reset') }}
       </ElButton>
       <ElButton v-if="expand" text @click="setVisible">
diff --git a/src/components/Sticky/src/Sticky.vue b/src/components/Sticky/src/Sticky.vue
index 5d6680592..bf9fc56b4 100644
--- a/src/components/Sticky/src/Sticky.vue
+++ b/src/components/Sticky/src/Sticky.vue
@@ -1,7 +1,8 @@
-<script setup lang="ts">
+<script lang="ts" name="Sticky" setup>
 import { propTypes } from '@/utils/propTypes'
 import { isClient, useEventListener, useWindowSize } from '@vueuse/core'
 import type { CSSProperties } from 'vue'
+
 const props = defineProps({
   // 距离顶部或者底部的距离(单位px)
   offset: propTypes.number.def(0),
@@ -120,7 +121,7 @@ const reset = () => {
 }
 </script>
 <template>
-  <div :style="{ height: height, zIndex: zIndex }" ref="refSticky">
+  <div ref="refSticky" :style="{ height: height, zIndex: zIndex }">
     <div
       :class="className"
       :style="{
diff --git a/src/components/Tooltip/src/Tooltip.vue b/src/components/Tooltip/src/Tooltip.vue
index cad1cd29a..eac37adbc 100644
--- a/src/components/Tooltip/src/Tooltip.vue
+++ b/src/components/Tooltip/src/Tooltip.vue
@@ -1,5 +1,6 @@
-<script setup lang="ts">
+<script lang="ts" name="Tooltip" setup>
 import { propTypes } from '@/utils/propTypes'
+
 defineProps({
   titel: propTypes.string.def(''),
   message: propTypes.string.def(''),
diff --git a/src/components/Verifition/src/Verify.vue b/src/components/Verifition/src/Verify.vue
index 6bfc353ee..861ed1637 100644
--- a/src/components/Verifition/src/Verify.vue
+++ b/src/components/Verifition/src/Verify.vue
@@ -1,42 +1,42 @@
 <template>
-  <div :class="mode == 'pop' ? 'mask' : ''" v-show="showBox">
+  <div v-show="showBox" :class="mode == 'pop' ? 'mask' : ''">
     <div
       :class="mode == 'pop' ? 'verifybox' : ''"
       :style="{ 'max-width': parseInt(imgSize.width) + 20 + 'px' }"
     >
-      <div class="verifybox-top" v-if="mode == 'pop'">
+      <div v-if="mode == 'pop'" class="verifybox-top">
         {{ t('captcha.verification') }}
         <span class="verifybox-close" @click="closeBox">
           <i class="iconfont icon-close"></i>
         </span>
       </div>
-      <div class="verifybox-bottom" :style="{ padding: mode == 'pop' ? '10px' : '0' }">
+      <div :style="{ padding: mode == 'pop' ? '10px' : '0' }" class="verifybox-bottom">
         <!-- 验证码容器 -->
         <component
-          v-if="componentType"
           :is="componentType"
-          :captchaType="captchaType"
-          :type="verifyType"
-          :figure="figure"
-          :arith="arith"
-          :mode="mode"
-          :vSpace="vSpace"
-          :explain="explain"
-          :imgSize="imgSize"
-          :blockSize="blockSize"
-          :barSize="barSize"
+          v-if="componentType"
           ref="instance"
+          :arith="arith"
+          :barSize="barSize"
+          :blockSize="blockSize"
+          :captchaType="captchaType"
+          :explain="explain"
+          :figure="figure"
+          :imgSize="imgSize"
+          :mode="mode"
+          :type="verifyType"
+          :vSpace="vSpace"
         />
       </div>
     </div>
   </div>
 </template>
-<script type="text/babel">
+<script name="Verify" type="text/babel">
 /**
  * Verify 验证码组件
  * @description 分发验证码使用
  * */
-import { VerifySlide, VerifyPoints } from './Verify'
+import { VerifyPoints, VerifySlide } from './Verify'
 import { computed, ref, toRefs, watchEffect } from 'vue'
 
 export default {
@@ -155,6 +155,7 @@ export default {
   border-radius: 5px;
   transform: translate(-50%, -50%);
 }
+
 .verifybox-top {
   padding: 0 15px;
   height: 40px;
@@ -165,10 +166,12 @@ export default {
   border-bottom: 1px solid #e4e7eb;
   box-sizing: border-box;
 }
+
 .verifybox-bottom {
   padding: 10px;
   box-sizing: border-box;
 }
+
 .verifybox-close {
   position: absolute;
   top: 13px;
@@ -178,6 +181,7 @@ export default {
   text-align: center;
   cursor: pointer;
 }
+
 .mask {
   position: fixed;
   top: 0;
@@ -189,6 +193,7 @@ export default {
   /* display: none; */
   transition: all 0.5s;
 }
+
 .verify-tips {
   text-indent: 10px;
   position: absolute;
@@ -199,22 +204,27 @@ export default {
   line-height: 30px;
   color: #fff;
 }
+
 .suc-bg {
   background-color: rgba(92, 184, 92, 0.5);
   filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7f5CB85C, endcolorstr=#7f5CB85C);
 }
+
 .err-bg {
   background-color: rgba(217, 83, 79, 0.5);
   filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7fD9534F, endcolorstr=#7fD9534F);
 }
+
 .tips-enter,
 .tips-leave-to {
   bottom: -30px;
 }
+
 .tips-enter-active,
 .tips-leave-active {
   transition: bottom 0.5s;
 }
+
 /* ---------------------------- */
 /*常规验证码*/
 .verify-code {
diff --git a/src/components/Verifition/src/Verify/VerifyPoints.vue b/src/components/Verifition/src/Verify/VerifyPoints.vue
index 8eeb83f60..13f989a41 100644
--- a/src/components/Verifition/src/Verify/VerifyPoints.vue
+++ b/src/components/Verifition/src/Verify/VerifyPoints.vue
@@ -2,20 +2,20 @@
   <div style="position: relative">
     <div class="verify-img-out">
       <div
-        class="verify-img-panel"
         :style="{
           width: setSize.imgWidth,
           height: setSize.imgHeight,
           'background-size': setSize.imgWidth + ' ' + setSize.imgHeight,
           'margin-bottom': vSpace + 'px'
         }"
+        class="verify-img-panel"
       >
-        <div class="verify-refresh" style="z-index: 3" @click="refresh" v-show="showRefresh">
+        <div v-show="showRefresh" class="verify-refresh" style="z-index: 3" @click="refresh">
           <i class="iconfont icon-refresh"></i>
         </div>
         <img
-          :src="'data:image/png;base64,' + pointBackImgBase"
           ref="canvas"
+          :src="'data:image/png;base64,' + pointBackImgBase"
           alt=""
           style="width: 100%; height: 100%; display: block"
           @click="bindingClick ? canvasClick($event) : undefined"
@@ -24,7 +24,6 @@
         <div
           v-for="(tempPoint, index) in tempPoints"
           :key="index"
-          class="point-area"
           :style="{
             'background-color': '#1abd6c',
             color: '#fff',
@@ -38,6 +37,7 @@
             top: parseInt(tempPoint.y - 10) + 'px',
             left: parseInt(tempPoint.x - 10) + 'px'
           }"
+          class="point-area"
         >
           {{ index + 1 }}
         </div>
@@ -45,19 +45,19 @@
     </div>
     <!-- 'height': this.barSize.height, -->
     <div
-      class="verify-bar-area"
       :style="{
         width: setSize.imgWidth,
         color: barAreaColor,
         'border-color': barAreaBorderColor,
         'line-height': barSize.height
       }"
+      class="verify-bar-area"
     >
       <span class="verify-msg">{{ text }}</span>
     </div>
   </div>
 </template>
-<script type="text/babel" setup>
+<script name="VerifyPoints" setup type="text/babel">
 /**
  * VerifyPoints
  * @description 点选
@@ -65,7 +65,7 @@
 import { resetSize } from './../utils/util'
 import { aesEncrypt } from './../utils/ase'
 import { getCodeApi, reqCheckApi } from '@/api/login'
-import { onMounted, reactive, ref, nextTick, toRefs, getCurrentInstance } from 'vue'
+import { getCurrentInstance, nextTick, onMounted, reactive, ref, toRefs } from 'vue'
 
 const props = defineProps({
   //弹出式pop，固定fixed
diff --git a/src/components/Verifition/src/Verify/VerifySlide.vue b/src/components/Verifition/src/Verify/VerifySlide.vue
index 6b6108df7..450bb1840 100644
--- a/src/components/Verifition/src/Verify/VerifySlide.vue
+++ b/src/components/Verifition/src/Verify/VerifySlide.vue
@@ -2,20 +2,20 @@
   <div style="position: relative">
     <div
       v-if="type === '2'"
-      class="verify-img-out"
       :style="{ height: parseInt(setSize.imgHeight) + vSpace + 'px' }"
+      class="verify-img-out"
     >
-      <div class="verify-img-panel" :style="{ width: setSize.imgWidth, height: setSize.imgHeight }">
+      <div :style="{ width: setSize.imgWidth, height: setSize.imgHeight }" class="verify-img-panel">
         <img
           :src="'data:image/png;base64,' + backImgBase"
           alt=""
           style="width: 100%; height: 100%; display: block"
         />
-        <div class="verify-refresh" @click="refresh" v-show="showRefresh">
+        <div v-show="showRefresh" class="verify-refresh" @click="refresh">
           <i class="iconfont icon-refresh"></i>
         </div>
         <transition name="tips">
-          <span class="verify-tips" v-if="tipWords" :class="passFlag ? 'suc-bg' : 'err-bg'">
+          <span v-if="tipWords" :class="passFlag ? 'suc-bg' : 'err-bg'" class="verify-tips">
             {{ tipWords }}
           </span>
         </transition>
@@ -23,24 +23,21 @@
     </div>
     <!-- 公共部分 -->
     <div
-      class="verify-bar-area"
       :style="{ width: setSize.imgWidth, height: barSize.height, 'line-height': barSize.height }"
+      class="verify-bar-area"
     >
       <span class="verify-msg" v-text="text"></span>
       <div
-        class="verify-left-bar"
         :style="{
           width: leftBarWidth !== undefined ? leftBarWidth : barSize.height,
           height: barSize.height,
           'border-color': leftBarBorderColor,
           transaction: transitionWidth
         }"
+        class="verify-left-bar"
       >
         <span class="verify-msg" v-text="finishText"></span>
         <div
-          class="verify-move-block"
-          @touchstart="start"
-          @mousedown="start"
           :style="{
             width: barSize.height,
             height: barSize.height,
@@ -48,17 +45,20 @@
             left: moveBlockLeft,
             transition: transitionLeft
           }"
+          class="verify-move-block"
+          @mousedown="start"
+          @touchstart="start"
         >
           <i :class="['verify-icon iconfont', iconClass]" :style="{ color: iconColor }"></i>
           <div
             v-if="type === '2'"
-            class="verify-sub-block"
             :style="{
               width: Math.floor((parseInt(setSize.imgWidth) * 47) / 310) + 'px',
               height: setSize.imgHeight,
               top: '-' + (parseInt(setSize.imgHeight) + vSpace) + 'px',
               'background-size': setSize.imgWidth + ' ' + setSize.imgHeight
             }"
+            class="verify-sub-block"
           >
             <img
               :src="'data:image/png;base64,' + blockBackImgBase"
@@ -71,7 +71,7 @@
     </div>
   </div>
 </template>
-<script type="text/babel" setup>
+<script name="VerifySlide" setup type="text/babel">
 /**
  * VerifySlide
  * @description 滑块
diff --git a/src/components/XButton/src/XButton.vue b/src/components/XButton/src/XButton.vue
index 3ef712302..e68dff249 100644
--- a/src/components/XButton/src/XButton.vue
+++ b/src/components/XButton/src/XButton.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" name="XButton" setup>
 import { PropType } from 'vue'
 import { propTypes } from '@/utils/propTypes'
 
@@ -30,9 +30,9 @@ const getBindValue = computed(() => {
 
 <template>
   <el-button v-bind="getBindValue" @click="onClick">
-    <Icon :icon="preIcon" v-if="preIcon" class="mr-1px" />
+    <Icon v-if="preIcon" :icon="preIcon" class="mr-1px" />
     {{ title ? title : '' }}
-    <Icon :icon="postIcon" v-if="postIcon" class="mr-1px" />
+    <Icon v-if="postIcon" :icon="postIcon" class="mr-1px" />
   </el-button>
 </template>
 <style lang="scss" scoped>
@@ -40,6 +40,7 @@ const getBindValue = computed(() => {
   margin-left: 0;
   padding: 8px 4px;
 }
+
 :deep(.el-button.is-link) {
   margin-left: 0;
   padding: 8px 4px;
diff --git a/src/components/XButton/src/XTextButton.vue b/src/components/XButton/src/XTextButton.vue
index a256a9851..c2ff97966 100644
--- a/src/components/XButton/src/XTextButton.vue
+++ b/src/components/XButton/src/XTextButton.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" name="XTextButton" setup>
 import { propTypes } from '@/utils/propTypes'
 import { PropType } from 'vue'
 
@@ -29,9 +29,9 @@ const getBindValue = computed(() => {
 
 <template>
   <el-button link v-bind="getBindValue" @click="onClick">
-    <Icon :icon="preIcon" v-if="preIcon" class="mr-1px" />
+    <Icon v-if="preIcon" :icon="preIcon" class="mr-1px" />
     {{ title ? title : '' }}
-    <Icon :icon="postIcon" v-if="postIcon" class="mr-1px" />
+    <Icon v-if="postIcon" :icon="postIcon" class="mr-1px" />
   </el-button>
 </template>
 <style lang="scss" scoped>
@@ -39,6 +39,7 @@ const getBindValue = computed(() => {
   margin-left: 0;
   padding: 8px 4px;
 }
+
 :deep(.el-button.is-link) {
   margin-left: 0;
   padding: 8px 4px;
diff --git a/src/layout/components/AppView.vue b/src/layout/components/AppView.vue
index 2429a9d5f..24d263552 100644
--- a/src/layout/components/AppView.vue
+++ b/src/layout/components/AppView.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" name="AppView" setup>
 import { useTagsViewStore } from '@/store/modules/tagsView'
 import { useAppStore } from '@/store/modules/app'
 import { Footer } from '@/layout/components/Footer'
diff --git a/src/layout/components/Collapse/src/Collapse.vue b/src/layout/components/Collapse/src/Collapse.vue
index a8f47dc67..523c34d40 100644
--- a/src/layout/components/Collapse/src/Collapse.vue
+++ b/src/layout/components/Collapse/src/Collapse.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" name="Collapse" setup>
 import { useAppStore } from '@/store/modules/app'
 import { propTypes } from '@/utils/propTypes'
 import { useDesign } from '@/hooks/web/useDesign'
@@ -24,9 +24,9 @@ const toggleCollapse = () => {
 <template>
   <div :class="prefixCls">
     <Icon
-      :size="18"
-      :icon="collapse ? 'ep:expand' : 'ep:fold'"
       :color="color"
+      :icon="collapse ? 'ep:expand' : 'ep:fold'"
+      :size="18"
       class="cursor-pointer"
       @click="toggleCollapse"
     />
diff --git a/src/layout/components/ContextMenu/src/ContextMenu.vue b/src/layout/components/ContextMenu/src/ContextMenu.vue
index 8c18f2a18..de8196923 100644
--- a/src/layout/components/ContextMenu/src/ContextMenu.vue
+++ b/src/layout/components/ContextMenu/src/ContextMenu.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" name="ContextMenu" setup>
 import { PropType } from 'vue'
 
 import { useDesign } from '@/hooks/web/useDesign'
@@ -51,9 +51,9 @@ defineExpose({
     :class="prefixCls"
     :trigger="trigger"
     placement="bottom-start"
+    popper-class="v-context-menu-popper"
     @command="command"
     @visible-change="visibleChange"
-    popper-class="v-context-menu-popper"
   >
     <slot></slot>
     <template #dropdown>
@@ -61,11 +61,12 @@ defineExpose({
         <ElDropdownItem
           v-for="(item, index) in schema"
           :key="`dropdown${index}`"
-          :divided="item.divided"
-          :disabled="item.disabled"
           :command="item"
+          :disabled="item.disabled"
+          :divided="item.divided"
         >
-          <Icon :icon="item.icon" /> {{ t(item.label) }}
+          <Icon :icon="item.icon" />
+          {{ t(item.label) }}
         </ElDropdownItem>
       </ElDropdownMenu>
     </template>
diff --git a/src/layout/components/Footer/src/Footer.vue b/src/layout/components/Footer/src/Footer.vue
index 239812c68..c9fcd8962 100644
--- a/src/layout/components/Footer/src/Footer.vue
+++ b/src/layout/components/Footer/src/Footer.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" name="Footer" setup>
 import { useAppStore } from '@/store/modules/app'
 import { useDesign } from '@/hooks/web/useDesign'
 
diff --git a/src/layout/components/LocaleDropdown/src/LocaleDropdown.vue b/src/layout/components/LocaleDropdown/src/LocaleDropdown.vue
index 0e56724ba..d16fbb2a4 100644
--- a/src/layout/components/LocaleDropdown/src/LocaleDropdown.vue
+++ b/src/layout/components/LocaleDropdown/src/LocaleDropdown.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" name="LocaleDropdown" setup>
 import { useLocaleStore } from '@/store/modules/locale'
 import { useLocale } from '@/hooks/web/useLocale'
 import { propTypes } from '@/utils/propTypes'
@@ -33,11 +33,11 @@ const setLang = (lang: LocaleType) => {
 <template>
   <ElDropdown :class="prefixCls" trigger="click" @command="setLang">
     <Icon
-      :size="18"
-      icon="ion:language-sharp"
-      class="cursor-pointer"
       :class="$attrs.class"
       :color="color"
+      :size="18"
+      class="cursor-pointer"
+      icon="ion:language-sharp"
     />
     <template #dropdown>
       <ElDropdownMenu>
diff --git a/src/layout/components/Logo/src/Logo.vue b/src/layout/components/Logo/src/Logo.vue
index 9b70a0dcc..17bdf1af0 100644
--- a/src/layout/components/Logo/src/Logo.vue
+++ b/src/layout/components/Logo/src/Logo.vue
@@ -1,5 +1,5 @@
-<script setup lang="ts">
-import { ref, watch, computed, onMounted, unref } from 'vue'
+<script lang="ts" name="Logo" setup>
+import { computed, onMounted, ref, unref, watch } from 'vue'
 import { useAppStore } from '@/store/modules/app'
 import { useDesign } from '@/hooks/web/useDesign'
 
@@ -66,8 +66,8 @@ watch(
       to="/"
     >
       <img
-        src="@/assets/imgs/logo.png"
         class="w-[calc(var(--logo-height)-10px)] h-[calc(var(--logo-height)-10px)]"
+        src="@/assets/imgs/logo.png"
       />
       <div
         v-if="show"
diff --git a/src/layout/components/Message/src/Message.vue b/src/layout/components/Message/src/Message.vue
index cba22e753..ddbbc4268 100644
--- a/src/layout/components/Message/src/Message.vue
+++ b/src/layout/components/Message/src/Message.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" name="Message" setup>
 import { formatDate } from '@/utils/formatTime'
 import * as NotifyMessageApi from '@/api/system/notify/message'
 
@@ -43,10 +43,10 @@ onUnmounted(() => {
 </script>
 <template>
   <div class="message">
-    <ElPopover placement="bottom" :width="400" trigger="click">
+    <ElPopover :width="400" placement="bottom" trigger="click">
       <template #reference>
         <ElBadge :is-dot="unreadCount > 0" class="item">
-          <Icon icon="ep:bell" :size="18" class="cursor-pointer" @click="getList" />
+          <Icon :size="18" class="cursor-pointer" icon="ep:bell" @click="getList" />
         </ElBadge>
       </template>
       <ElTabs v-model="activeName">
@@ -54,7 +54,7 @@ onUnmounted(() => {
           <div class="message-list">
             <template v-for="item in list" :key="item.id">
               <div class="message-item">
-                <img src="@/assets/imgs/avatar.gif" alt="" class="message-icon" />
+                <img alt="" class="message-icon" src="@/assets/imgs/avatar.gif" />
                 <div class="message-content">
                   <span class="message-title">
                     {{ item.templateNickname }}：{{ item.templateContent }}
@@ -70,12 +70,12 @@ onUnmounted(() => {
       </ElTabs>
       <!-- 更多 -->
       <div style="text-align: right; margin-top: 10px">
-        <XButton type="primary" preIcon="ep:view" title="查看全部" @click="goMyList" />
+        <XButton preIcon="ep:view" title="查看全部" type="primary" @click="goMyList" />
       </div>
     </ElPopover>
   </div>
 </template>
-<style scoped lang="scss">
+<style lang="scss" scoped>
 .message-empty {
   display: flex;
   flex-direction: column;
@@ -84,28 +84,35 @@ onUnmounted(() => {
   height: 260px;
   line-height: 45px;
 }
+
 .message-list {
   display: flex;
   flex-direction: column;
+
   .message-item {
     display: flex;
     align-items: center;
     padding: 20px 0;
     border-bottom: 1px solid var(--el-border-color-light);
+
     &:last-child {
       border: none;
     }
+
     .message-icon {
       width: 40px;
       height: 40px;
       margin: 0 20px 0 5px;
     }
+
     .message-content {
       display: flex;
       flex-direction: column;
+
       .message-title {
         margin-bottom: 5px;
       }
+
       .message-date {
         font-size: 12px;
         color: var(--el-text-color-secondary);
diff --git a/src/layout/components/Screenfull/src/Screenfull.vue b/src/layout/components/Screenfull/src/Screenfull.vue
index 32a12e733..d0c4c44c4 100644
--- a/src/layout/components/Screenfull/src/Screenfull.vue
+++ b/src/layout/components/Screenfull/src/Screenfull.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" name="ScreenFull" setup>
 import { Icon } from '@/components/Icon'
 import { useFullscreen } from '@vueuse/core'
 import { propTypes } from '@/utils/propTypes'
@@ -22,9 +22,9 @@ const toggleFullscreen = () => {
 <template>
   <div :class="prefixCls" @click="toggleFullscreen">
     <Icon
-      :size="18"
-      :icon="isFullscreen ? 'zmdi:fullscreen-exit' : 'zmdi:fullscreen'"
       :color="color"
+      :icon="isFullscreen ? 'zmdi:fullscreen-exit' : 'zmdi:fullscreen'"
+      :size="18"
     />
   </div>
 </template>
diff --git a/src/layout/components/Setting/src/Setting.vue b/src/layout/components/Setting/src/Setting.vue
index de0532fdc..8a395a819 100644
--- a/src/layout/components/Setting/src/Setting.vue
+++ b/src/layout/components/Setting/src/Setting.vue
@@ -1,12 +1,12 @@
-<script setup lang="ts">
+<script lang="ts" name="Setting" setup>
 import { ElMessage } from 'element-plus'
-import { useCssVar, useClipboard } from '@vueuse/core'
+import { useClipboard, useCssVar } from '@vueuse/core'
 
 import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
 import { useDesign } from '@/hooks/web/useDesign'
 
-import { trim, setCssVar } from '@/utils'
-import { colorIsDark, lighten, hexToRGB } from '@/utils/color'
+import { setCssVar, trim } from '@/utils'
+import { colorIsDark, hexToRGB, lighten } from '@/utils/color'
 import { useAppStore } from '@/store/modules/app'
 import { ThemeSwitch } from '@/layout/components/ThemeSwitch'
 import ColorRadioPicker from './components/ColorRadioPicker.vue'
@@ -202,10 +202,10 @@ const clear = () => {
     class="fixed top-[45%] right-0 w-40px h-40px text-center leading-40px bg-[var(--el-color-primary)] cursor-pointer"
     @click="drawer = true"
   >
-    <Icon icon="ep:setting" color="#fff" />
+    <Icon color="#fff" icon="ep:setting" />
   </div>
 
-  <ElDrawer v-model="drawer" direction="rtl" size="350px" :z-index="4000">
+  <ElDrawer v-model="drawer" :z-index="4000" direction="rtl" size="350px">
     <template #header>
       <span class="text-16px font-700">{{ t('setting.projectSetting') }}</span>
     </template>
@@ -279,10 +279,10 @@ const clear = () => {
 
     <ElDivider />
     <div>
-      <ElButton type="primary" class="w-full" @click="copyConfig">{{ t('setting.copy') }}</ElButton>
+      <ElButton class="w-full" type="primary" @click="copyConfig">{{ t('setting.copy') }}</ElButton>
     </div>
     <div class="mt-5px">
-      <ElButton type="danger" class="w-full" @click="clear">
+      <ElButton class="w-full" type="danger" @click="clear">
         {{ t('setting.clearAndReset') }}
       </ElButton>
     </div>
diff --git a/src/layout/components/Setting/src/components/ColorRadioPicker.vue b/src/layout/components/Setting/src/components/ColorRadioPicker.vue
index 7c5e24048..8ef0f8c02 100644
--- a/src/layout/components/Setting/src/components/ColorRadioPicker.vue
+++ b/src/layout/components/Setting/src/components/ColorRadioPicker.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" name="ColorRadioPicker" setup>
 import { PropType } from 'vue'
 import { propTypes } from '@/utils/propTypes'
 import { useDesign } from '@/hooks/web/useDesign'
@@ -42,14 +42,14 @@ watch(
     <span
       v-for="(item, i) in schema"
       :key="`radio-${i}`"
-      class="w-20px h-20px cursor-pointer rounded-2px border-solid border-gray-300 border-2px text-center leading-20px mb-5px"
       :class="{ 'is-active': colorVal === item }"
       :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"
       @click="colorVal = item"
     >
-      <Icon v-if="colorVal === item" color="#fff" icon="ep:check" :size="16" />
+      <Icon v-if="colorVal === item" :size="16" color="#fff" icon="ep:check" />
     </span>
   </div>
 </template>
diff --git a/src/layout/components/Setting/src/components/InterfaceDisplay.vue b/src/layout/components/Setting/src/components/InterfaceDisplay.vue
index e0dc0885e..12f6fbc07 100644
--- a/src/layout/components/Setting/src/components/InterfaceDisplay.vue
+++ b/src/layout/components/Setting/src/components/InterfaceDisplay.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" name="InterfaceDisplay" setup>
 import { setCssVar } from '@/utils'
 
 import { useDesign } from '@/hooks/web/useDesign'
diff --git a/src/layout/components/Setting/src/components/LayoutRadioPicker.vue b/src/layout/components/Setting/src/components/LayoutRadioPicker.vue
index 07dbab95d..b500683a5 100644
--- a/src/layout/components/Setting/src/components/LayoutRadioPicker.vue
+++ b/src/layout/components/Setting/src/components/LayoutRadioPicker.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" name="LayoutRadioPicker" setup>
 import { useAppStore } from '@/store/modules/app'
 import { useDesign } from '@/hooks/web/useDesign'
 
diff --git a/src/layout/components/SizeDropdown/src/SizeDropdown.vue b/src/layout/components/SizeDropdown/src/SizeDropdown.vue
index 0dc698c07..d191dbe28 100644
--- a/src/layout/components/SizeDropdown/src/SizeDropdown.vue
+++ b/src/layout/components/SizeDropdown/src/SizeDropdown.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" name="SizeDropdown" setup>
 import { useAppStore } from '@/store/modules/app'
 
 import { propTypes } from '@/utils/propTypes'
@@ -26,7 +26,7 @@ const setCurrentSize = (size: ElementPlusSize) => {
 
 <template>
   <ElDropdown :class="prefixCls" trigger="click" @command="setCurrentSize">
-    <Icon :size="18" icon="mdi:format-size" :color="color" class="cursor-pointer" />
+    <Icon :color="color" :size="18" class="cursor-pointer" icon="mdi:format-size" />
     <template #dropdown>
       <ElDropdownMenu>
         <ElDropdownItem v-for="item in sizeMap" :key="item" :command="item">
diff --git a/src/layout/components/TagsView/src/TagsView.vue b/src/layout/components/TagsView/src/TagsView.vue
index d6e9768d6..6b4f7be71 100644
--- a/src/layout/components/TagsView/src/TagsView.vue
+++ b/src/layout/components/TagsView/src/TagsView.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" name="TagsView" setup>
 import type { RouteLocationNormalizedLoaded, RouterLinkProps } from 'vue-router'
 import { usePermissionStore } from '@/store/modules/permission'
 import { useTagsViewStore } from '@/store/modules/tagsView'
@@ -266,15 +266,24 @@ watch(
       @click="move(-200)"
     >
       <Icon
-        icon="ep:d-arrow-left"
         :color="appStore.getIsDark ? 'var(--el-text-color-regular)' : '#333'"
+        icon="ep:d-arrow-left"
       />
     </span>
     <div class="overflow-hidden flex-1">
       <ElScrollbar ref="scrollbarRef" class="h-full" @scroll="scroll">
         <div class="flex h-full">
           <ContextMenu
+            v-for="item in visitedViews"
+            :key="item.fullPath"
             :ref="itemRefs.set"
+            :class="[
+              `${prefixCls}__item`,
+              item?.meta?.affix ? `${prefixCls}__item--affix` : '',
+              {
+                'is-active': isActive(item)
+              }
+            ]"
             :schema="[
               {
                 icon: 'ep:refresh',
@@ -332,23 +341,14 @@ watch(
                 }
               }
             ]"
-            v-for="item in visitedViews"
-            :key="item.fullPath"
             :tag-item="item"
-            :class="[
-              `${prefixCls}__item`,
-              item?.meta?.affix ? `${prefixCls}__item--affix` : '',
-              {
-                'is-active': isActive(item)
-              }
-            ]"
             @visible-change="visibleChange"
           >
             <div>
-              <router-link :ref="tagLinksRefs.set" :to="{ ...item }" custom v-slot="{ navigate }">
+              <router-link :ref="tagLinksRefs.set" v-slot="{ navigate }" :to="{ ...item }" custom>
                 <div
-                  @click="navigate"
                   class="h-full flex justify-center items-center whitespace-nowrap pl-15px"
+                  @click="navigate"
                 >
                   <Icon
                     v-if="
@@ -364,9 +364,9 @@ watch(
                   {{ t(item?.meta?.title as string) }}
                   <Icon
                     :class="`${prefixCls}__item--close`"
+                    :size="12"
                     color="#333"
                     icon="ep:close"
-                    :size="12"
                     @click.prevent.stop="closeSelectedTag(item)"
                   />
                 </div>
@@ -382,8 +382,8 @@ watch(
       @click="move(200)"
     >
       <Icon
-        icon="ep:d-arrow-right"
         :color="appStore.getIsDark ? 'var(--el-text-color-regular)' : '#333'"
+        icon="ep:d-arrow-right"
       />
     </span>
     <span
@@ -392,12 +392,11 @@ watch(
       @click="refreshSelectedTag(selectedTag)"
     >
       <Icon
-        icon="ep:refresh-right"
         :color="appStore.getIsDark ? 'var(--el-text-color-regular)' : '#333'"
+        icon="ep:refresh-right"
       />
     </span>
     <ContextMenu
-      trigger="click"
       :schema="[
         {
           icon: 'ep:refresh',
@@ -449,14 +448,15 @@ watch(
           }
         }
       ]"
+      trigger="click"
     >
       <span
         :class="`${prefixCls}__tool`"
         class="w-[var(--tags-view-height)] h-[var(--tags-view-height)] text-center leading-[var(--tags-view-height)] cursor-pointer block"
       >
         <Icon
-          icon="ep:menu"
           :color="appStore.getIsDark ? 'var(--el-text-color-regular)' : '#333'"
+          icon="ep:menu"
         />
       </span>
     </ContextMenu>
@@ -513,6 +513,7 @@ $prefix-cls: #{$namespace}-tags-view;
       display: none;
       transform: translate(0, -50%);
     }
+
     &:not(.#{$prefix-cls}__item--affix):hover {
       .#{$prefix-cls}__item--close {
         display: block;
@@ -530,6 +531,7 @@ $prefix-cls: #{$namespace}-tags-view;
     color: var(--el-color-white);
     background-color: var(--el-color-primary);
     border: 1px solid var(--el-color-primary);
+
     .#{$prefix-cls}__item--close {
       :deep(span) {
         color: var(--el-color-white) !important;
@@ -573,6 +575,7 @@ $prefix-cls: #{$namespace}-tags-view;
     &__item.is-active {
       color: var(--el-color-white);
       background-color: var(--el-color-primary);
+
       .#{$prefix-cls}__item--close {
         :deep(span) {
           color: var(--el-color-white) !important;
diff --git a/src/layout/components/ThemeSwitch/src/ThemeSwitch.vue b/src/layout/components/ThemeSwitch/src/ThemeSwitch.vue
index 452430114..5a926508d 100644
--- a/src/layout/components/ThemeSwitch/src/ThemeSwitch.vue
+++ b/src/layout/components/ThemeSwitch/src/ThemeSwitch.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" name="ThemeSwitch" setup>
 import { useAppStore } from '@/store/modules/app'
 import { useIcon } from '@/hooks/web/useIcon'
 import { useDesign } from '@/hooks/web/useDesign'
@@ -26,14 +26,14 @@ const themeChange = (val: boolean) => {
 
 <template>
   <ElSwitch
-    :class="prefixCls"
     v-model="isDark"
-    inline-prompt
-    :border-color="blackColor"
-    :inactive-color="blackColor"
     :active-color="blackColor"
     :active-icon="Sun"
+    :border-color="blackColor"
+    :class="prefixCls"
+    :inactive-color="blackColor"
     :inactive-icon="CrescentMoon"
+    inline-prompt
     @change="themeChange"
   />
 </template>
diff --git a/src/layout/components/UserInfo/src/UserInfo.vue b/src/layout/components/UserInfo/src/UserInfo.vue
index 7ccadb577..208375404 100644
--- a/src/layout/components/UserInfo/src/UserInfo.vue
+++ b/src/layout/components/UserInfo/src/UserInfo.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" name="UserInfo" setup>
 import { ElMessageBox } from 'element-plus'
 
 import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
diff --git a/src/views/Error/403.vue b/src/views/Error/403.vue
index d477304b9..cb106465e 100644
--- a/src/views/Error/403.vue
+++ b/src/views/Error/403.vue
@@ -1,6 +1,6 @@
 <template>
   <Error type="403" @error-click="push('/')" />
 </template>
-<script setup lang="ts">
+<script lang="ts" name="Error403" setup>
 const { push } = useRouter()
 </script>
diff --git a/src/views/Error/404.vue b/src/views/Error/404.vue
index d1ccb62ec..c55d33251 100644
--- a/src/views/Error/404.vue
+++ b/src/views/Error/404.vue
@@ -1,6 +1,6 @@
 <template>
   <Error @error-click="push('/')" />
 </template>
-<script setup lang="ts">
+<script lang="ts" name="Error404" setup>
 const { push } = useRouter()
 </script>
diff --git a/src/views/Error/500.vue b/src/views/Error/500.vue
index 9f784fd2d..6cfe47b7b 100644
--- a/src/views/Error/500.vue
+++ b/src/views/Error/500.vue
@@ -1,6 +1,6 @@
 <template>
   <Error type="500" @error-click="push('/')" />
 </template>
-<script setup lang="ts">
+<script lang="ts" name="Error500" setup>
 const { push } = useRouter()
 </script>
diff --git a/src/views/Home/Index2.vue b/src/views/Home/Index2.vue
index 0f588510a..457aced31 100644
--- a/src/views/Home/Index2.vue
+++ b/src/views/Home/Index2.vue
@@ -1,26 +1,26 @@
 <template>
-  <el-row :gutter="20" justify="space-between" :class="prefixCls">
-    <el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24">
-      <el-card shadow="hover" class="mb-20px">
-        <el-skeleton :loading="loading" animated :rows="2">
+  <el-row :class="prefixCls" :gutter="20" justify="space-between">
+    <el-col :lg="6" :md="12" :sm="12" :xl="6" :xs="24">
+      <el-card class="mb-20px" shadow="hover">
+        <el-skeleton :loading="loading" :rows="2" animated>
           <template #default>
             <div :class="`${prefixCls}__item flex justify-between`">
               <div>
                 <div
                   :class="`${prefixCls}__item--icon ${prefixCls}__item--peoples p-16px inline-block rounded-6px`"
                 >
-                  <Icon icon="svg-icon:peoples" :size="40" />
+                  <Icon :size="40" icon="svg-icon:peoples" />
                 </div>
               </div>
               <div class="flex flex-col justify-between">
-                <div :class="`${prefixCls}__item--text text-16px text-gray-500 text-right`">{{
-                  t('analysis.newUser')
-                }}</div>
+                <div :class="`${prefixCls}__item--text text-16px text-gray-500 text-right`"
+                  >{{ t('analysis.newUser') }}
+                </div>
                 <CountTo
-                  class="text-20px font-700 text-right"
-                  :start-val="0"
-                  :end-val="102400"
                   :duration="2600"
+                  :end-val="102400"
+                  :start-val="0"
+                  class="text-20px font-700 text-right"
                 />
               </div>
             </div>
@@ -29,27 +29,27 @@
       </el-card>
     </el-col>
 
-    <el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24">
-      <el-card shadow="hover" class="mb-20px">
-        <el-skeleton :loading="loading" animated :rows="2">
+    <el-col :lg="6" :md="12" :sm="12" :xl="6" :xs="24">
+      <el-card class="mb-20px" shadow="hover">
+        <el-skeleton :loading="loading" :rows="2" animated>
           <template #default>
             <div :class="`${prefixCls}__item flex justify-between`">
               <div>
                 <div
                   :class="`${prefixCls}__item--icon ${prefixCls}__item--message p-16px inline-block rounded-6px`"
                 >
-                  <Icon icon="svg-icon:message" :size="40" />
+                  <Icon :size="40" icon="svg-icon:message" />
                 </div>
               </div>
               <div class="flex flex-col justify-between">
-                <div :class="`${prefixCls}__item--text text-16px text-gray-500 text-right`">{{
-                  t('analysis.unreadInformation')
-                }}</div>
+                <div :class="`${prefixCls}__item--text text-16px text-gray-500 text-right`"
+                  >{{ t('analysis.unreadInformation') }}
+                </div>
                 <CountTo
-                  class="text-20px font-700 text-right"
-                  :start-val="0"
-                  :end-val="81212"
                   :duration="2600"
+                  :end-val="81212"
+                  :start-val="0"
+                  class="text-20px font-700 text-right"
                 />
               </div>
             </div>
@@ -58,27 +58,27 @@
       </el-card>
     </el-col>
 
-    <el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24">
-      <el-card shadow="hover" class="mb-20px">
-        <el-skeleton :loading="loading" animated :rows="2">
+    <el-col :lg="6" :md="12" :sm="12" :xl="6" :xs="24">
+      <el-card class="mb-20px" shadow="hover">
+        <el-skeleton :loading="loading" :rows="2" animated>
           <template #default>
             <div :class="`${prefixCls}__item flex justify-between`">
               <div>
                 <div
                   :class="`${prefixCls}__item--icon ${prefixCls}__item--money p-16px inline-block rounded-6px`"
                 >
-                  <Icon icon="svg-icon:money" :size="40" />
+                  <Icon :size="40" icon="svg-icon:money" />
                 </div>
               </div>
               <div class="flex flex-col justify-between">
-                <div :class="`${prefixCls}__item--text text-16px text-gray-500 text-right`">{{
-                  t('analysis.transactionAmount')
-                }}</div>
+                <div :class="`${prefixCls}__item--text text-16px text-gray-500 text-right`"
+                  >{{ t('analysis.transactionAmount') }}
+                </div>
                 <CountTo
-                  class="text-20px font-700 text-right"
-                  :start-val="0"
-                  :end-val="9280"
                   :duration="2600"
+                  :end-val="9280"
+                  :start-val="0"
+                  class="text-20px font-700 text-right"
                 />
               </div>
             </div>
@@ -87,27 +87,27 @@
       </el-card>
     </el-col>
 
-    <el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24">
-      <el-card shadow="hover" class="mb-20px">
-        <el-skeleton :loading="loading" animated :rows="2">
+    <el-col :lg="6" :md="12" :sm="12" :xl="6" :xs="24">
+      <el-card class="mb-20px" shadow="hover">
+        <el-skeleton :loading="loading" :rows="2" animated>
           <template #default>
             <div :class="`${prefixCls}__item flex justify-between`">
               <div>
                 <div
                   :class="`${prefixCls}__item--icon ${prefixCls}__item--shopping p-16px inline-block rounded-6px`"
                 >
-                  <Icon icon="svg-icon:shopping" :size="40" />
+                  <Icon :size="40" icon="svg-icon:shopping" />
                 </div>
               </div>
               <div class="flex flex-col justify-between">
-                <div :class="`${prefixCls}__item--text text-16px text-gray-500 text-right`">{{
-                  t('analysis.totalShopping')
-                }}</div>
+                <div :class="`${prefixCls}__item--text text-16px text-gray-500 text-right`"
+                  >{{ t('analysis.totalShopping') }}
+                </div>
                 <CountTo
-                  class="text-20px font-700 text-right"
-                  :start-val="0"
-                  :end-val="13600"
                   :duration="2600"
+                  :end-val="13600"
+                  :start-val="0"
+                  class="text-20px font-700 text-right"
                 />
               </div>
             </div>
@@ -117,36 +117,36 @@
     </el-col>
   </el-row>
   <el-row :gutter="20" justify="space-between">
-    <el-col :xl="10" :lg="10" :md="24" :sm="24" :xs="24">
-      <el-card shadow="hover" class="mb-20px">
+    <el-col :lg="10" :md="24" :sm="24" :xl="10" :xs="24">
+      <el-card class="mb-20px" shadow="hover">
         <el-skeleton :loading="loading" animated>
-          <Echart :options="pieOptionsData" :height="300" />
+          <Echart :height="300" :options="pieOptionsData" />
         </el-skeleton>
       </el-card>
     </el-col>
-    <el-col :xl="14" :lg="14" :md="24" :sm="24" :xs="24">
-      <el-card shadow="hover" class="mb-20px">
+    <el-col :lg="14" :md="24" :sm="24" :xl="14" :xs="24">
+      <el-card class="mb-20px" shadow="hover">
         <el-skeleton :loading="loading" animated>
-          <Echart :options="barOptionsData" :height="300" />
+          <Echart :height="300" :options="barOptionsData" />
         </el-skeleton>
       </el-card>
     </el-col>
     <el-col :span="24">
-      <el-card shadow="hover" class="mb-20px">
-        <el-skeleton :loading="loading" animated :rows="4">
-          <Echart :options="lineOptionsData" :height="350" />
+      <el-card class="mb-20px" shadow="hover">
+        <el-skeleton :loading="loading" :rows="4" animated>
+          <Echart :height="350" :options="lineOptionsData" />
         </el-skeleton>
       </el-card>
     </el-col>
   </el-row>
 </template>
-<script setup lang="ts">
+<script lang="ts" name="Home2" setup>
 import { set } from 'lodash-es'
 import { EChartsOption } from 'echarts'
 
 import { useDesign } from '@/hooks/web/useDesign'
 import type { AnalysisTotalTypes } from './types'
-import { pieOptions, barOptions, lineOptions } from './echarts-data'
+import { barOptions, lineOptions, pieOptions } from './echarts-data'
 
 const { t } = useI18n()
 const loading = ref(true)
@@ -291,18 +291,23 @@ $prefix-cls: #{$namespace}-panel;
       :deep(.#{$namespace}-icon) {
         color: #fff !important;
       }
+
       .#{$prefix-cls}__item--icon {
         transition: all 0.38s ease-out;
       }
+
       .#{$prefix-cls}__item--peoples {
         background: #40c9c6;
       }
+
       .#{$prefix-cls}__item--message {
         background: #36a3f7;
       }
+
       .#{$prefix-cls}__item--money {
         background: #f4516c;
       }
+
       .#{$prefix-cls}__item--shopping {
         background: #34bfa3;
       }
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index a0186ab7e..eb323d86a 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -60,7 +60,7 @@
     </div>
   </div>
 </template>
-<script lang="ts" setup>
+<script lang="ts" name="Login" setup>
 import { underlineToHump } from '@/utils'
 
 import { useDesign } from '@/hooks/web/useDesign'
diff --git a/src/views/Login/components/LoginForm.vue b/src/views/Login/components/LoginForm.vue
index 2d8c62f9f..77e0d817d 100644
--- a/src/views/Login/components/LoginForm.vue
+++ b/src/views/Login/components/LoginForm.vue
@@ -1,13 +1,13 @@
 <template>
   <el-form
-    :model="loginData.loginForm"
-    :rules="LoginRules"
-    label-position="top"
-    class="login-form"
-    label-width="120px"
-    size="large"
     v-show="getShow"
     ref="formLogin"
+    :model="loginData.loginForm"
+    :rules="LoginRules"
+    class="login-form"
+    label-position="top"
+    label-width="120px"
+    size="large"
   >
     <el-row style="maring-left: -10px; maring-right: -10px">
       <el-col :span="24" style="padding-left: 10px; padding-right: 10px">
@@ -16,7 +16,7 @@
         </el-form-item>
       </el-col>
       <el-col :span="24" style="padding-left: 10px; padding-right: 10px">
-        <el-form-item prop="tenantName" v-if="loginData.tenantEnable === 'true'">
+        <el-form-item v-if="loginData.tenantEnable === 'true'" prop="tenantName">
           <el-input
             type="primary"
             link
@@ -39,11 +39,11 @@
         <el-form-item prop="password">
           <el-input
             v-model="loginData.loginForm.password"
-            type="password"
             :placeholder="t('login.passwordPlaceholder')"
-            show-password
-            @keyup.enter="getCode()"
             :prefix-icon="iconLock"
+            show-password
+            type="password"
+            @keyup.enter="getCode()"
           />
         </el-form-item>
       </el-col>
@@ -58,8 +58,8 @@
                 {{ t('login.remember') }}
               </el-checkbox>
             </el-col>
-            <el-col :span="12" :offset="6">
-              <el-link type="primary" style="float: right">{{ t('login.forgetPassword') }}</el-link>
+            <el-col :offset="6" :span="12">
+              <el-link style="float: right" type="primary">{{ t('login.forgetPassword') }}</el-link>
             </el-col>
           </el-row>
         </el-form-item>
@@ -68,41 +68,41 @@
         <el-form-item>
           <XButton
             :loading="loginLoading"
-            type="primary"
-            class="w-[100%]"
             :title="t('login.login')"
+            class="w-[100%]"
+            type="primary"
             @click="getCode()"
           />
         </el-form-item>
       </el-col>
       <Verify
         ref="verify"
-        mode="pop"
         :captchaType="captchaType"
         :imgSize="{ width: '400px', height: '200px' }"
+        mode="pop"
         @success="handleLogin"
       />
       <el-col :span="24" style="padding-left: 10px; padding-right: 10px">
         <el-form-item>
-          <el-row justify="space-between" style="width: 100%" :gutter="5">
+          <el-row :gutter="5" justify="space-between" style="width: 100%">
             <el-col :span="8">
               <XButton
-                class="w-[100%]"
                 :title="t('login.btnMobile')"
+                class="w-[100%]"
                 @click="setLoginState(LoginStateEnum.MOBILE)"
               />
             </el-col>
             <el-col :span="8">
               <XButton
-                class="w-[100%]"
                 :title="t('login.btnQRCode')"
+                class="w-[100%]"
                 @click="setLoginState(LoginStateEnum.QR_CODE)"
               />
             </el-col>
             <el-col :span="8">
               <XButton
-                class="w-[100%]"
                 :title="t('login.btnRegister')"
+                class="w-[100%]"
                 @click="setLoginState(LoginStateEnum.REGISTER)"
               />
             </el-col>
@@ -143,7 +143,7 @@
     </el-row>
   </el-form>
 </template>
-<script setup lang="ts">
+<script lang="ts" name="LoginForm" setup>
 import { ElLoading } from 'element-plus'
 import LoginFormTitle from './LoginFormTitle.vue'
 import type { RouteLocationNormalizedLoaded } from 'vue-router'
diff --git a/src/views/Login/components/LoginFormTitle.vue b/src/views/Login/components/LoginFormTitle.vue
index ea55be935..b192a5fa3 100644
--- a/src/views/Login/components/LoginFormTitle.vue
+++ b/src/views/Login/components/LoginFormTitle.vue
@@ -3,7 +3,7 @@
     {{ getFormTitle }}
   </h2>
 </template>
-<script setup lang="ts">
+<script lang="ts" name="LoginFormTitle" setup>
 import { LoginStateEnum, useLoginState } from './useLogin'
 
 const { t } = useI18n()
diff --git a/src/views/Login/components/MobileForm.vue b/src/views/Login/components/MobileForm.vue
index cf0a42be0..fb88cc29a 100644
--- a/src/views/Login/components/MobileForm.vue
+++ b/src/views/Login/components/MobileForm.vue
@@ -1,13 +1,13 @@
 <template>
   <el-form
-    :model="loginData.loginForm"
-    :rules="rules"
-    label-position="top"
-    class="login-form"
-    label-width="120px"
-    size="large"
     v-show="getShow"
     ref="formSmsLogin"
+    :model="loginData.loginForm"
+    :rules="rules"
+    class="login-form"
+    label-position="top"
+    label-width="120px"
+    size="large"
   >
     <el-row style="margin-left: -10px; margin-right: -10px">
       <!-- 租户名 -->
@@ -17,7 +17,7 @@
         </el-form-item>
       </el-col>
       <el-col :span="24" style="padding-left: 10px; padding-right: 10px">
-        <el-form-item prop="tenantName" v-if="loginData.tenantEnable === 'true'">
+        <el-form-item v-if="loginData.tenantEnable === 'true'" prop="tenantName">
           <el-input
             type="primary"
             link
@@ -40,7 +40,7 @@
       <!-- 验证码 -->
       <el-col :span="24" style="padding-left: 10px; padding-right: 10px">
         <el-form-item prop="code">
-          <el-row justify="space-between" style="width: 100%" :gutter="5">
+          <el-row :gutter="5" justify="space-between" style="width: 100%">
             <el-col :span="24">
               <el-input
                 v-model="loginData.loginForm.code"
@@ -51,9 +51,9 @@
                 <template #append>
                   <span
                     v-if="mobileCodeTimer <= 0"
-                    @click="getSmsCode"
                     class="getMobileCode"
                     style="cursor: pointer"
+                    @click="getSmsCode"
                   >
                     {{ t('login.getSmsCode') }}
                   </span>
@@ -72,9 +72,9 @@
         <el-form-item>
           <XButton
             :loading="loginLoading"
-            type="primary"
-            class="w-[100%]"
             :title="t('login.login')"
+            class="w-[100%]"
+            type="primary"
             @click="signIn()"
           />
         </el-form-item>
@@ -83,8 +83,8 @@
         <el-form-item>
           <XButton
             :loading="loginLoading"
-            class="w-[100%]"
             :title="t('login.backLogin')"
+            class="w-[100%]"
             @click="handleBackLogin()"
           />
         </el-form-item>
@@ -92,7 +92,7 @@
     </el-row>
   </el-form>
 </template>
-<script setup lang="ts">
+<script lang="ts" name="MobileForm" setup>
 import type { RouteLocationNormalizedLoaded } from 'vue-router'
 
 import { useIcon } from '@/hooks/web/useIcon'
@@ -101,7 +101,7 @@ import { setTenantId, setToken } from '@/utils/auth'
 import { usePermissionStore } from '@/store/modules/permission'
 import { getTenantIdByNameApi, sendSmsCodeApi, smsLoginApi } from '@/api/login'
 import LoginFormTitle from './LoginFormTitle.vue'
-import { useLoginState, LoginStateEnum, useFormValid } from './useLogin'
+import { LoginStateEnum, useFormValid, useLoginState } from './useLogin'
 
 const { t } = useI18n()
 const message = useMessage()
diff --git a/src/views/Login/components/QrCodeForm.vue b/src/views/Login/components/QrCodeForm.vue
index bdf7e2a51..c485d2876 100644
--- a/src/views/Login/components/QrCodeForm.vue
+++ b/src/views/Login/components/QrCodeForm.vue
@@ -4,23 +4,23 @@
       <LoginFormTitle style="width: 100%" />
     </el-col>
     <el-col :span="24" style="padding-left: 10px; padding-right: 10px">
-      <el-card shadow="hover" class="mb-10px text-center">
+      <el-card class="mb-10px text-center" shadow="hover">
         <Qrcode :logo="logoImg" />
       </el-card>
     </el-col>
     <el-divider class="enter-x">{{ t('login.qrcode') }}</el-divider>
     <el-col :span="24" style="padding-left: 10px; padding-right: 10px">
       <div class="w-[100%] mt-15px">
-        <XButton class="w-[100%]" :title="t('login.backLogin')" @click="handleBackLogin()" />
+        <XButton :title="t('login.backLogin')" class="w-[100%]" @click="handleBackLogin()" />
       </div>
     </el-col>
   </el-row>
 </template>
-<script setup lang="ts">
+<script lang="ts" name="QrCodeForm" setup>
 import logoImg from '@/assets/imgs/logo.png'
 
 import LoginFormTitle from './LoginFormTitle.vue'
-import { useLoginState, LoginStateEnum } from './useLogin'
+import { LoginStateEnum, useLoginState } from './useLogin'
 
 const { t } = useI18n()
 const { handleBackLogin, getLoginState } = useLoginState()
diff --git a/src/views/Login/components/RegisterForm.vue b/src/views/Login/components/RegisterForm.vue
index 7d048506c..de6b59678 100644
--- a/src/views/Login/components/RegisterForm.vue
+++ b/src/views/Login/components/RegisterForm.vue
@@ -1,12 +1,12 @@
 <template>
   <Form
-    :schema="schema"
-    :rules="rules"
-    label-position="top"
-    hide-required-asterisk
-    size="large"
     v-show="getShow"
+    :rules="rules"
+    :schema="schema"
     class="dark:(border-1 border-[var(--el-border-color)] border-solid)"
+    hide-required-asterisk
+    label-position="top"
+    size="large"
     @register="register"
   >
     <template #title>
@@ -23,25 +23,25 @@
       <div class="w-[100%]">
         <XButton
           :loading="loading"
-          type="primary"
-          class="w-[100%]"
           :title="t('login.register')"
+          class="w-[100%]"
+          type="primary"
           @click="loginRegister()"
         />
       </div>
       <div class="w-[100%] mt-15px">
-        <XButton class="w-[100%]" :title="t('login.hasUser')" @click="handleBackLogin()" />
+        <XButton :title="t('login.hasUser')" class="w-[100%]" @click="handleBackLogin()" />
       </div>
     </template>
   </Form>
 </template>
-<script setup lang="ts">
+<script lang="ts" name="RegisterForm" setup>
 import type { FormRules } from 'element-plus'
 
 import { useForm } from '@/hooks/web/useForm'
 import { useValidator } from '@/hooks/web/useValidator'
 import LoginFormTitle from './LoginFormTitle.vue'
-import { useLoginState, LoginStateEnum } from './useLogin'
+import { LoginStateEnum, useLoginState } from './useLogin'
 import { FormSchema } from '@/types/form'
 
 const { t } = useI18n()
diff --git a/src/views/Profile/components/BasicInfo.vue b/src/views/Profile/components/BasicInfo.vue
index ccb7d6f3c..33e9bd1e0 100644
--- a/src/views/Profile/components/BasicInfo.vue
+++ b/src/views/Profile/components/BasicInfo.vue
@@ -1,5 +1,5 @@
 <template>
-  <Form ref="formRef" :rules="rules" :schema="schema" :labelWidth="80">
+  <Form ref="formRef" :labelWidth="80" :rules="rules" :schema="schema">
     <template #sex="form">
       <el-radio-group v-model="form['sex']">
         <el-radio :label="1">{{ t('profile.user.man') }}</el-radio>
@@ -8,9 +8,9 @@
     </template>
   </Form>
   <XButton :title="t('common.save')" @click="submit()" />
-  <XButton type="danger" :title="t('common.reset')" @click="init()" />
+  <XButton :title="t('common.reset')" type="danger" @click="init()" />
 </template>
-<script setup lang="ts">
+<script lang="ts" name="BasicInfo" setup>
 import type { FormRules } from 'element-plus'
 import { ElMessage } from 'element-plus'
 
diff --git a/src/views/Profile/components/ProfileUser.vue b/src/views/Profile/components/ProfileUser.vue
index 4e4de722d..99c7dc109 100644
--- a/src/views/Profile/components/ProfileUser.vue
+++ b/src/views/Profile/components/ProfileUser.vue
@@ -5,41 +5,48 @@
     </div>
     <ul class="list-group list-group-striped">
       <li class="list-group-item">
-        <Icon icon="ep:user" class="mr-5px" />{{ t('profile.user.username') }}
+        <Icon class="mr-5px" icon="ep:user" />
+        {{ t('profile.user.username') }}
         <div class="pull-right">{{ userInfo?.username }}</div>
       </li>
       <li class="list-group-item">
-        <Icon icon="ep:phone" class="mr-5px" />{{ t('profile.user.mobile') }}
+        <Icon class="mr-5px" icon="ep:phone" />
+        {{ t('profile.user.mobile') }}
         <div class="pull-right">{{ userInfo?.mobile }}</div>
       </li>
       <li class="list-group-item">
-        <Icon icon="fontisto:email" class="mr-5px" />{{ t('profile.user.email') }}
+        <Icon class="mr-5px" icon="fontisto:email" />
+        {{ t('profile.user.email') }}
         <div class="pull-right">{{ userInfo?.email }}</div>
       </li>
       <li class="list-group-item">
-        <Icon icon="carbon:tree-view-alt" class="mr-5px" />{{ t('profile.user.dept') }}
-        <div class="pull-right" v-if="userInfo?.dept">{{ userInfo?.dept.name }}</div>
+        <Icon class="mr-5px" icon="carbon:tree-view-alt" />
+        {{ t('profile.user.dept') }}
+        <div v-if="userInfo?.dept" class="pull-right">{{ userInfo?.dept.name }}</div>
       </li>
       <li class="list-group-item">
-        <Icon icon="ep:suitcase" class="mr-5px" />{{ t('profile.user.posts') }}
-        <div class="pull-right" v-if="userInfo?.posts">
+        <Icon class="mr-5px" icon="ep:suitcase" />
+        {{ t('profile.user.posts') }}
+        <div v-if="userInfo?.posts" class="pull-right">
           {{ userInfo?.posts.map((post) => post.name).join(',') }}
         </div>
       </li>
       <li class="list-group-item">
-        <Icon icon="icon-park-outline:peoples" class="mr-5px" />{{ t('profile.user.roles') }}
-        <div class="pull-right" v-if="userInfo?.roles">
+        <Icon class="mr-5px" icon="icon-park-outline:peoples" />
+        {{ t('profile.user.roles') }}
+        <div v-if="userInfo?.roles" class="pull-right">
           {{ userInfo?.roles.map((role) => role.name).join(',') }}
         </div>
       </li>
       <li class="list-group-item">
-        <Icon icon="ep:calendar" class="mr-5px" />{{ t('profile.user.createTime') }}
+        <Icon class="mr-5px" icon="ep:calendar" />
+        {{ t('profile.user.createTime') }}
         <div class="pull-right">{{ formatDate(userInfo?.createTime) }}</div>
       </li>
     </ul>
   </div>
 </template>
-<script setup lang="ts">
+<script lang="ts" name="ProfileUser" setup>
 import { formatDate } from '@/utils/formatTime'
 import UserAvatar from './UserAvatar.vue'
 
@@ -62,6 +69,7 @@ onMounted(async () => {
   position: relative;
   height: 120px;
 }
+
 .list-group-striped > .list-group-item {
   border-left: 0;
   border-right: 0;
@@ -82,6 +90,7 @@ onMounted(async () => {
   padding: 11px 0px;
   font-size: 13px;
 }
+
 .pull-right {
   float: right !important;
 }
diff --git a/src/views/Profile/components/ResetPwd.vue b/src/views/Profile/components/ResetPwd.vue
index 0b37807fb..d36e22d6f 100644
--- a/src/views/Profile/components/ResetPwd.vue
+++ b/src/views/Profile/components/ResetPwd.vue
@@ -10,13 +10,13 @@
       <InputPassword v-model="password.confirmPassword" strength />
     </el-form-item>
     <el-form-item>
-      <XButton type="primary" @click="submit(formRef)" :title="t('common.save')" />
-      <XButton type="danger" :title="t('common.reset')" @click="reset(formRef)" />
+      <XButton :title="t('common.save')" type="primary" @click="submit(formRef)" />
+      <XButton :title="t('common.reset')" type="danger" @click="reset(formRef)" />
     </el-form-item>
   </el-form>
 </template>
-<script setup lang="ts">
-import type { FormRules, FormInstance } from 'element-plus'
+<script lang="ts" name="ResetPwd" setup>
+import type { FormInstance, FormRules } from 'element-plus'
 
 import { InputPassword } from '@/components/InputPassword'
 import { updateUserPwdApi } from '@/api/system/user/profile'
diff --git a/src/views/Profile/components/UserAvatar.vue b/src/views/Profile/components/UserAvatar.vue
index 81259410b..46e8cc4db 100644
--- a/src/views/Profile/components/UserAvatar.vue
+++ b/src/views/Profile/components/UserAvatar.vue
@@ -2,17 +2,18 @@
   <div class="change-avatar">
     <CropperAvatar
       ref="cropperRef"
-      :value="avatar"
-      :showBtn="false"
-      @change="handelUpload"
       :btnProps="{ preIcon: 'ant-design:cloud-upload-outlined' }"
+      :showBtn="false"
+      :value="avatar"
       width="120px"
+      @change="handelUpload"
     />
   </div>
 </template>
-<script setup lang="ts">
+<script lang="ts" name="UserAvatar" setup>
 import { propTypes } from '@/utils/propTypes'
 import { uploadAvatarApi } from '@/api/system/user/profile'
+
 const props = defineProps({
   img: propTypes.string.def('')
 })
@@ -27,7 +28,7 @@ const handelUpload = async ({ data }) => {
 }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 .change-avatar {
   img {
     display: block;
diff --git a/src/views/bpm/model/ModelForm.vue b/src/views/bpm/model/ModelForm.vue
deleted file mode 100644
index 865b864c2..000000000
--- a/src/views/bpm/model/ModelForm.vue
+++ /dev/null
@@ -1,227 +0,0 @@
-<template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible" width="600">
-    <el-form
-      ref="formRef"
-      :model="formData"
-      :rules="formRules"
-      label-width="110px"
-      v-loading="formLoading"
-    >
-      <el-form-item label="流程标识" prop="key">
-        <el-input
-          v-model="formData.key"
-          placeholder="请输入流标标识"
-          style="width: 330px"
-          :disabled="!!formData.id"
-        />
-        <el-tooltip
-          v-if="!formData.id"
-          class="item"
-          effect="light"
-          content="新建后，流程标识不可修改！"
-          placement="top"
-        >
-          <i style="padding-left: 5px" class="el-icon-question"></i>
-        </el-tooltip>
-        <el-tooltip v-else class="item" effect="light" content="流程标识不可修改！" placement="top">
-          <i style="padding-left: 5px" class="el-icon-question"></i>
-        </el-tooltip>
-      </el-form-item>
-      <el-form-item label="流程名称" prop="name">
-        <el-input
-          v-model="formData.name"
-          placeholder="请输入流程名称"
-          :disabled="!!formData.id"
-          clearable
-        />
-      </el-form-item>
-      <el-form-item v-if="formData.id" label="流程分类" prop="category">
-        <el-select
-          v-model="formData.category"
-          placeholder="请选择流程分类"
-          clearable
-          style="width: 100%"
-        >
-          <el-option
-            v-for="dict in getIntDictOptions(DICT_TYPE.BPM_MODEL_CATEGORY)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="流程描述" prop="description">
-        <el-input type="textarea" v-model="formData.description" clearable />
-      </el-form-item>
-      <div v-if="formData.id">
-        <el-form-item label="表单类型" prop="formType">
-          <el-radio-group v-model="formData.formType">
-            <el-radio
-              v-for="dict in getIntDictOptions(DICT_TYPE.BPM_MODEL_FORM_TYPE)"
-              :key="dict.value"
-              :label="dict.value"
-            >
-              {{ dict.label }}
-            </el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item v-if="formData.formType === 10" label="流程表单" prop="formId">
-          <el-select v-model="formData.formId" clearable style="width: 100%">
-            <el-option
-              v-for="form in formList"
-              :key="form.id"
-              :label="form.name"
-              :value="form.id"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item
-          v-if="formData.formType === 20"
-          label="表单提交路由"
-          prop="formCustomCreatePath"
-        >
-          <el-input
-            v-model="formData.formCustomCreatePath"
-            placeholder="请输入表单提交路由"
-            style="width: 330px"
-          />
-          <el-tooltip
-            class="item"
-            effect="light"
-            content="自定义表单的提交路径，使用 Vue 的路由地址，例如说：bpm/oa/leave/create"
-            placement="top"
-          >
-            <i style="padding-left: 5px" class="el-icon-question"></i>
-          </el-tooltip>
-        </el-form-item>
-        <el-form-item
-          v-if="formData.formType === 20"
-          label="表单查看路由"
-          prop="formCustomViewPath"
-        >
-          <el-input
-            v-model="formData.formCustomViewPath"
-            placeholder="请输入表单查看路由"
-            style="width: 330px"
-          />
-          <el-tooltip
-            class="item"
-            effect="light"
-            content="自定义表单的查看路径，使用 Vue 的路由地址，例如说：bpm/oa/leave/view"
-            placement="top"
-          >
-            <i style="padding-left: 5px" class="el-icon-question"></i>
-          </el-tooltip>
-        </el-form-item>
-      </div>
-    </el-form>
-    <template #footer>
-      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
-      <el-button @click="dialogVisible = false">取 消</el-button>
-    </template>
-  </Dialog>
-</template>
-<script setup lang="ts">
-import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
-import { ElMessageBox } from 'element-plus'
-import * as ModelApi from '@/api/bpm/model'
-import * as FormApi from '@/api/bpm/form'
-const { t } = useI18n() // 国际化
-const message = useMessage() // 消息弹窗
-
-const dialogVisible = ref(false) // 弹窗的是否展示
-const dialogTitle = ref('') // 弹窗的标题
-const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const formType = ref('') // 表单的类型：create - 新增；update - 修改
-const formData = ref({
-  formType: 10,
-  name: '',
-  category: undefined,
-  description: '',
-  formId: '',
-  formCustomCreatePath: '',
-  formCustomViewPath: ''
-})
-const formRules = reactive({
-  category: [{ required: true, message: '参数分类不能为空', trigger: 'blur' }],
-  name: [{ required: true, message: '参数名称不能为空', trigger: 'blur' }],
-  key: [{ required: true, message: '参数键名不能为空', trigger: 'blur' }],
-  value: [{ required: true, message: '参数键值不能为空', trigger: 'blur' }],
-  visible: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }]
-})
-const formRef = ref() // 表单 Ref
-const formList = ref([]) // 流程表单的下拉框的数据
-
-/** 打开弹窗 */
-const open = async (type: string, id?: number) => {
-  dialogVisible.value = true
-  dialogTitle.value = t('action.' + type)
-  formType.value = type
-  resetForm()
-  // 修改时，设置数据
-  if (id) {
-    formLoading.value = true
-    try {
-      formData.value = await ModelApi.getModelApi(id)
-    } finally {
-      formLoading.value = false
-    }
-  }
-  // 获得流程表单的下拉框的数据
-  formList.value = await FormApi.getSimpleFormsApi()
-}
-defineExpose({ open }) // 提供 open 方法，用于打开弹窗
-
-/** 提交表单 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-const submitForm = async () => {
-  // 校验表单
-  if (!formRef) return
-  const valid = await formRef.value.validate()
-  if (!valid) return
-  // 提交请求
-  formLoading.value = true
-  try {
-    const data = formData.value as unknown as ModelApi.ModelVO
-    if (formType.value === 'create') {
-      await ModelApi.createModelApi(data)
-      // 提示，引导用户做后续的操作
-      await ElMessageBox.alert(
-        '<strong>新建模型成功！</strong>后续需要执行如下 4 个步骤：' +
-          '<div>1. 点击【修改流程】按钮，配置流程的分类、表单信息</div>' +
-          '<div>2. 点击【设计流程】按钮，绘制流程图</div>' +
-          '<div>3. 点击【分配规则】按钮，设置每个用户任务的审批人</div>' +
-          '<div>4. 点击【发布流程】按钮，完成流程的最终发布</div>' +
-          '另外，每次流程修改后，都需要点击【发布流程】按钮，才能正式生效！！！',
-        '重要提示',
-        {
-          dangerouslyUseHTMLString: true,
-          type: 'success'
-        }
-      )
-    } else {
-      await ModelApi.updateModelApi(data)
-      message.success(t('common.updateSuccess'))
-    }
-    dialogVisible.value = false
-    // 发送操作成功的事件
-    emit('success')
-  } finally {
-    formLoading.value = false
-  }
-}
-
-/** 重置表单 */
-const resetForm = () => {
-  formData.value = {
-    formType: 10,
-    name: '',
-    category: undefined,
-    description: '',
-    formId: '',
-    formCustomCreatePath: '',
-    formCustomViewPath: ''
-  }
-  formRef.value?.resetFields()
-}
-</script>
diff --git a/src/views/bpm/model/ModelImportForm.vue b/src/views/bpm/model/ModelImportForm.vue
deleted file mode 100644
index 76493c956..000000000
--- a/src/views/bpm/model/ModelImportForm.vue
+++ /dev/null
@@ -1,137 +0,0 @@
-<template>
-  <Dialog title="导入流程" v-model="dialogVisible" width="400">
-    <div>
-      <el-upload
-        ref="uploadRef"
-        :action="importUrl"
-        :headers="uploadHeaders"
-        :data="formData"
-        name="bpmnFile"
-        v-model:file-list="fileList"
-        drag
-        :auto-upload="false"
-        accept=".bpmn, .xml"
-        :limit="1"
-        :on-exceed="handleExceed"
-        :on-success="submitFormSuccess"
-        :on-error="submitFormError"
-        :disabled="formLoading"
-      >
-        <Icon class="el-icon--upload" icon="ep:upload-filled" />
-        <div class="el-upload__text"> 将文件拖到此处，或 <em>点击上传</em> </div>
-        <template #tip>
-          <div class="el-upload__tip" style="color: red">
-            提示：仅允许导入“bpm”或“xml”格式文件！
-          </div>
-          <div>
-            <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px">
-              <el-form-item label="流程标识" prop="key">
-                <el-input
-                  v-model="formData.key"
-                  placeholder="请输入流标标识"
-                  style="width: 250px"
-                />
-              </el-form-item>
-              <el-form-item label="流程名称" prop="name">
-                <el-input v-model="formData.name" placeholder="请输入流程名称" clearable />
-              </el-form-item>
-              <el-form-item label="流程描述" prop="description">
-                <el-input type="textarea" v-model="formData.description" clearable />
-              </el-form-item>
-            </el-form>
-          </div>
-        </template>
-      </el-upload>
-    </div>
-    <template #footer>
-      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
-      <el-button @click="dialogVisible = false">取 消</el-button>
-    </template>
-  </Dialog>
-</template>
-<script setup lang="ts">
-import { getAccessToken, getTenantId } from '@/utils/auth'
-const message = useMessage() // 消息弹窗
-
-const dialogVisible = ref(false) // 弹窗的是否展示
-const formLoading = ref(false) // 表单的加载中
-const formData = ref({
-  key: '',
-  name: '',
-  description: ''
-})
-const formRules = reactive({
-  key: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
-  name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }]
-})
-const formRef = ref() // 表单 Ref
-const uploadRef = ref() // 上传 Ref
-const importUrl = import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/bpm/model/import'
-const uploadHeaders = ref() // 上传 Header 头
-const fileList = ref([]) // 文件列表
-
-/** 打开弹窗 */
-const open = async () => {
-  dialogVisible.value = true
-  resetForm()
-}
-defineExpose({ open }) // 提供 open 方法，用于打开弹窗
-
-/** 提交表单 */
-const submitForm = async () => {
-  // 校验表单
-  if (!formRef) return
-  const valid = await formRef.value.validate()
-  if (!valid) return
-  if (fileList.value.length == 0) {
-    message.error('请上传文件')
-    return
-  }
-  // 提交请求
-  uploadHeaders.value = {
-    Authorization: 'Bearer ' + getAccessToken(),
-    'tenant-id': getTenantId()
-  }
-  formLoading.value = true
-  uploadRef.value!.submit()
-}
-
-/** 文件上传成功 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-const submitFormSuccess = async (response: any) => {
-  if (response.code !== 0) {
-    message.error(response.msg)
-    formLoading.value = false
-    return
-  }
-  // 提示成功
-  message.success('导入流程成功！请点击【设计流程】按钮，进行编辑保存后，才可以进行【发布流程】')
-  // 发送操作成功的事件
-  emit('success')
-}
-
-/** 上传错误提示 */
-const submitFormError = (): void => {
-  message.error('导入流程失败，请您重新上传！')
-  formLoading.value = false
-}
-
-/** 重置表单 */
-const resetForm = () => {
-  // 重置上传状态和文件
-  formLoading.value = false
-  uploadRef.value?.clearFiles()
-  // 重置表单
-  formData.value = {
-    key: '',
-    name: '',
-    description: ''
-  }
-  formRef.value?.resetFields()
-}
-
-/** 文件数超出提示 */
-const handleExceed = (): void => {
-  message.error('最多只能上传一个文件！')
-}
-</script>
diff --git a/src/views/bpm/model/modelEditor.vue b/src/views/bpm/model/modelEditor.vue
index 5cfbd2640..32f94e053 100644
--- a/src/views/bpm/model/modelEditor.vue
+++ b/src/views/bpm/model/modelEditor.vue
@@ -28,7 +28,7 @@
 
 <script setup lang="ts">
 import { MyProcessDesigner, MyProcessPenal } from '@/components/bpmnProcessDesigner/package'
-  // import { translations } from '@/components/bpmnProcessDesigner/src/translations'
+// import { translations } from '@/components/bpmnProcessDesigner/src/translations'
 // 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务）
 import CustomContentPadProvider from '@/components/bpmnProcessDesigner/package/designer/plugins/content-pad'
 // 自定义左侧菜单（修改 默认任务 为 用户任务）
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue b/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue
index d72ae29ff..88a82a05b 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue
@@ -1,20 +1,20 @@
 <template>
-  <el-card class="box-card" v-loading="loading">
+  <el-card v-loading="loading" class="box-card">
     <template #header>
       <span class="el-icon-picture-outline">流程图</span>
     </template>
     <MyProcessViewer
       key="designer"
-      :value="bpmnXml"
-      v-bind="bpmnControlForm"
-      :prefix="bpmnControlForm.prefix"
       :activityData="activityList"
+      :prefix="bpmnControlForm.prefix"
       :processInstanceData="processInstance"
       :taskData="tasks"
+      :value="bpmnXml"
+      v-bind="bpmnControlForm"
     />
   </el-card>
 </template>
-<script setup lang="ts">
+<script lang="ts" name="BpmProcessInstanceBpmnViewer" setup>
 import { propTypes } from '@/utils/propTypes'
 import * as ActivityApi from '@/api/bpm/activity'
 import { MyProcessViewer } from '@/components/bpmnProcessDesigner/package'
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceTaskList.vue b/src/views/bpm/processInstance/detail/ProcessInstanceTaskList.vue
deleted file mode 100644
index a8aa01206..000000000
--- a/src/views/bpm/processInstance/detail/ProcessInstanceTaskList.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-  <el-card class="box-card" v-loading="loading">
-    <template #header>
-      <span class="el-icon-picture-outline">审批记录</span>
-    </template>
-    <el-col :span="16" :offset="4">
-      <div class="block">
-        <el-timeline>
-          <el-timeline-item
-            v-for="(item, index) in tasks"
-            :key="index"
-            :icon="getTimelineItemIcon(item)"
-            :type="getTimelineItemType(item)"
-          >
-            <p style="font-weight: 700">任务：{{ item.name }}</p>
-            <el-card :body-style="{ padding: '10px' }">
-              <label v-if="item.assigneeUser" style="font-weight: normal; margin-right: 30px">
-                审批人：{{ item.assigneeUser.nickname }}
-                <el-tag type="info" size="small">{{ item.assigneeUser.deptName }}</el-tag>
-              </label>
-              <label style="font-weight: normal" v-if="item.createTime">创建时间：</label>
-              <label style="color: #8a909c; font-weight: normal">
-                {{ formatDate(item?.createTime) }}
-              </label>
-              <label v-if="item.endTime" style="margin-left: 30px; font-weight: normal">
-                审批时间：
-              </label>
-              <label v-if="item.endTime" style="color: #8a909c; font-weight: normal">
-                {{ formatDate(item?.endTime) }}
-              </label>
-              <label v-if="item.durationInMillis" style="margin-left: 30px; font-weight: normal">
-                耗时：
-              </label>
-              <label v-if="item.durationInMillis" style="color: #8a909c; font-weight: normal">
-                {{ formatPast2(item?.durationInMillis) }}
-              </label>
-              <p v-if="item.reason">
-                <el-tag :type="getTimelineItemType(item)">{{ item.reason }}</el-tag>
-              </p>
-            </el-card>
-          </el-timeline-item>
-        </el-timeline>
-      </div>
-    </el-col>
-  </el-card>
-</template>
-<script setup lang="ts">
-import { formatDate, formatPast2 } from '@/utils/formatTime'
-import { propTypes } from '@/utils/propTypes'
-
-defineProps({
-  loading: propTypes.bool, // 是否加载中
-  tasks: propTypes.array // 流程任务的数组
-})
-
-/** 获得任务对应的 icon */
-const getTimelineItemIcon = (item) => {
-  if (item.result === 1) {
-    return 'el-icon-time'
-  }
-  if (item.result === 2) {
-    return 'el-icon-check'
-  }
-  if (item.result === 3) {
-    return 'el-icon-close'
-  }
-  if (item.result === 4) {
-    return 'el-icon-remove-outline'
-  }
-  return ''
-}
-
-/** 获得任务对应的颜色 */
-const getTimelineItemType = (item) => {
-  if (item.result === 1) {
-    return 'primary'
-  }
-  if (item.result === 2) {
-    return 'success'
-  }
-  if (item.result === 3) {
-    return 'danger'
-  }
-  if (item.result === 4) {
-    return 'info'
-  }
-  return ''
-}
-</script>
diff --git a/src/views/bpm/processInstance/detail/TaskUpdateAssigneeForm.vue b/src/views/bpm/processInstance/detail/TaskUpdateAssigneeForm.vue
deleted file mode 100644
index 0f16deeb3..000000000
--- a/src/views/bpm/processInstance/detail/TaskUpdateAssigneeForm.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<template>
-  <Dialog title="转派审批人" v-model="dialogVisible" width="500">
-    <el-form
-      ref="formRef"
-      :model="formData"
-      :rules="formRules"
-      label-width="110px"
-      v-loading="formLoading"
-    >
-      <el-form-item label="新审批人" prop="assigneeUserId">
-        <el-select v-model="formData.assigneeUserId" clearable style="width: 100%">
-          <el-option
-            v-for="item in userList"
-            :key="item.id"
-            :label="item.nickname"
-            :value="item.id"
-          />
-        </el-select>
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
-      <el-button @click="dialogVisible = false">取 消</el-button>
-    </template>
-  </Dialog>
-</template>
-<script setup lang="ts">
-import * as TaskApi from '@/api/bpm/task'
-import * as UserApi from '@/api/system/user'
-
-const dialogVisible = ref(false) // 弹窗的是否展示
-const formLoading = ref(false) // 表单的加载中
-const formData = ref({
-  id: '',
-  assigneeUserId: undefined
-})
-const formRules = ref({
-  assigneeUserId: [{ required: true, message: '新审批人不能为空', trigger: 'change' }]
-})
-
-const formRef = ref() // 表单 Ref
-const userList = ref<any[]>([]) // 用户列表
-
-/** 打开弹窗 */
-const open = async (id: string) => {
-  dialogVisible.value = true
-  resetForm()
-  formData.value.id = id
-  // 获得用户列表
-  userList.value = await UserApi.getSimpleUserList()
-}
-defineExpose({ open }) // 提供 openModal 方法，用于打开弹窗
-
-/** 提交表单 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-const submitForm = async () => {
-  // 校验表单
-  if (!formRef) return
-  const valid = await formRef.value.validate()
-  if (!valid) return
-  // 提交请求
-  formLoading.value = true
-  try {
-    await TaskApi.updateTaskAssignee(formData.value)
-    dialogVisible.value = false
-    // 发送操作成功的事件
-    emit('success')
-  } finally {
-    formLoading.value = false
-  }
-}
-
-/** 重置表单 */
-const resetForm = () => {
-  formData.value = {
-    id: '',
-    assigneeUserId: undefined
-  }
-  formRef.value?.resetFields()
-}
-</script>
diff --git a/src/views/bpm/taskAssignRule/TaskAssignRuleForm.vue b/src/views/bpm/taskAssignRule/TaskAssignRuleForm.vue
deleted file mode 100644
index 2ddebab1b..000000000
--- a/src/views/bpm/taskAssignRule/TaskAssignRuleForm.vue
+++ /dev/null
@@ -1,247 +0,0 @@
-<template>
-  <Dialog title="修改任务规则" v-model="dialogVisible" width="600">
-    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
-      <el-form-item label="任务名称" prop="taskDefinitionName">
-        <el-input v-model="formData.taskDefinitionName" placeholder="请输入流标标识" disabled />
-      </el-form-item>
-      <el-form-item label="任务标识" prop="taskDefinitionKey">
-        <el-input v-model="formData.taskDefinitionKey" placeholder="请输入任务标识" disabled />
-      </el-form-item>
-      <el-form-item label="规则类型" prop="type">
-        <el-select v-model="formData.type" clearable style="width: 100%">
-          <el-option
-            v-for="dict in getIntDictOptions(DICT_TYPE.BPM_TASK_ASSIGN_RULE_TYPE)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item v-if="formData.type === 10" label="指定角色" prop="roleIds">
-        <el-select v-model="formData.roleIds" multiple clearable style="width: 100%">
-          <el-option
-            v-for="item in roleOptions"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item
-        label="指定部门"
-        prop="deptIds"
-        span="24"
-        v-if="formData.type === 20 || formData.type === 21"
-      >
-        <el-tree-select
-          ref="treeRef"
-          v-model="formData.deptIds"
-          node-key="id"
-          show-checkbox
-          :props="defaultProps"
-          :data="deptTreeOptions"
-          empty-text="加载中，请稍后"
-          multiple
-        />
-      </el-form-item>
-      <el-form-item label="指定岗位" prop="postIds" span="24" v-if="formData.type === 22">
-        <el-select v-model="formData.postIds" multiple clearable style="width: 100%">
-          <el-option
-            v-for="item in postOptions"
-            :key="parseInt(item.id)"
-            :label="item.name"
-            :value="parseInt(item.id)"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item
-        label="指定用户"
-        prop="userIds"
-        span="24"
-        v-if="formData.type === 30 || formData.type === 31 || formData.type === 32"
-      >
-        <el-select v-model="formData.userIds" multiple clearable style="width: 100%">
-          <el-option
-            v-for="item in userOptions"
-            :key="parseInt(item.id)"
-            :label="item.nickname"
-            :value="parseInt(item.id)"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="指定用户组" prop="userGroupIds" v-if="formData.type === 40">
-        <el-select v-model="formData.userGroupIds" multiple clearable style="width: 100%">
-          <el-option
-            v-for="item in userGroupOptions"
-            :key="parseInt(item.id)"
-            :label="item.name"
-            :value="parseInt(item.id)"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="指定脚本" prop="scripts" v-if="formData.type === 50">
-        <el-select v-model="formData.scripts" multiple clearable style="width: 100%">
-          <el-option
-            v-for="dict in taskAssignScriptDictDatas"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-    </el-form>
-    <!-- 操作按钮 -->
-    <template #footer>
-      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
-      <el-button @click="dialogVisible = false">取 消</el-button>
-    </template>
-  </Dialog>
-</template>
-<script setup lang="ts">
-import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
-import { handleTree, defaultProps } from '@/utils/tree'
-import * as TaskAssignRuleApi from '@/api/bpm/taskAssignRule'
-import * as RoleApi from '@/api/system/role'
-import * as DeptApi from '@/api/system/dept'
-import * as PostApi from '@/api/system/post'
-import * as UserApi from '@/api/system/user'
-import * as UserGroupApi from '@/api/bpm/userGroup'
-const { t } = useI18n() // 国际化
-const message = useMessage() // 消息弹窗
-
-const dialogVisible = ref(false) // 弹窗的是否展示
-const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const formData = ref({
-  type: Number(undefined),
-  modelId: '',
-  options: [],
-  roleIds: [],
-  deptIds: [],
-  postIds: [],
-  userIds: [],
-  userGroupIds: [],
-  scripts: []
-})
-const formRules = reactive({
-  type: [{ required: true, message: '规则类型不能为空', trigger: 'change' }],
-  roleIds: [{ required: true, message: '指定角色不能为空', trigger: 'change' }],
-  deptIds: [{ required: true, message: '指定部门不能为空', trigger: 'change' }],
-  postIds: [{ required: true, message: '指定岗位不能为空', trigger: 'change' }],
-  userIds: [{ required: true, message: '指定用户不能为空', trigger: 'change' }],
-  userGroupIds: [{ required: true, message: '指定用户组不能为空', trigger: 'change' }],
-  scripts: [{ required: true, message: '指定脚本不能为空', trigger: 'change' }]
-})
-const formRef = ref() // 表单 Ref
-const roleOptions = ref<RoleApi.RoleVO[]>([]) // 角色列表
-const deptOptions = ref<DeptApi.DeptVO[]>([]) // 部门列表
-const deptTreeOptions = ref() // 部门树
-const postOptions = ref<PostApi.PostVO[]>([]) // 岗位列表
-const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
-const userGroupOptions = ref<UserGroupApi.UserGroupVO[]>([]) // 用户组列表
-const taskAssignScriptDictDatas = getIntDictOptions(DICT_TYPE.BPM_TASK_ASSIGN_SCRIPT)
-
-/** 打开弹窗 */
-const open = async (modelId: string, row: TaskAssignRuleApi.TaskAssignVO) => {
-  // 1. 先重置表单
-  resetForm()
-  // 2. 再设置表单
-  formData.value = {
-    ...row,
-    modelId: modelId,
-    options: [],
-    roleIds: [],
-    deptIds: [],
-    postIds: [],
-    userIds: [],
-    userGroupIds: [],
-    scripts: []
-  }
-  // 将 options 赋值到对应的 roleIds 等选项
-  if (row.type === 10) {
-    formData.value.roleIds.push(...row.options)
-  } else if (row.type === 20 || row.type === 21) {
-    formData.value.deptIds.push(...row.options)
-  } else if (row.type === 22) {
-    formData.value.postIds.push(...row.options)
-  } else if (row.type === 30 || row.type === 31 || row.type === 32) {
-    formData.value.userIds.push(...row.options)
-  } else if (row.type === 40) {
-    formData.value.userGroupIds.push(...row.options)
-  } else if (row.type === 50) {
-    formData.value.scripts.push(...row.options)
-  }
-  // 打开弹窗
-  dialogVisible.value = true
-
-  // 获得角色列表
-  roleOptions.value = await RoleApi.getSimpleRoleList()
-  // 获得部门列表
-  deptOptions.value = await DeptApi.getSimpleDeptList()
-  deptTreeOptions.value = handleTree(deptOptions.value, 'id')
-  // 获得岗位列表
-  postOptions.value = await PostApi.getSimplePostList()
-  // 获得用户列表
-  userOptions.value = await UserApi.getSimpleUserList()
-  // 获得用户组列表
-  userGroupOptions.value = await UserGroupApi.getSimpleUserGroupList()
-}
-defineExpose({ open }) // 提供 open 方法，用于打开弹窗
-
-/** 提交表单 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-const submitForm = async () => {
-  // 校验表单
-  if (!formRef) return
-  const valid = await formRef.value.validate()
-  if (!valid) return
-
-  // 构建表单
-  const form = {
-    ...formData.value,
-    taskDefinitionName: undefined
-  }
-  // 将 roleIds 等选项赋值到 options 中
-  if (form.type === 10) {
-    form.options = form.roleIds
-  } else if (form.type === 20 || form.type === 21) {
-    form.options = form.deptIds
-  } else if (form.type === 22) {
-    form.options = form.postIds
-  } else if (form.type === 30 || form.type === 31 || form.type === 32) {
-    form.options = form.userIds
-  } else if (form.type === 40) {
-    form.options = form.userGroupIds
-  } else if (form.type === 50) {
-    form.options = form.scripts
-  }
-  form.roleIds = undefined
-  form.deptIds = undefined
-  form.postIds = undefined
-  form.userIds = undefined
-  form.userGroupIds = undefined
-  form.scripts = undefined
-
-  // 提交请求
-  formLoading.value = true
-  try {
-    const data = form as unknown as TaskAssignRuleApi.TaskAssignVO
-    if (!data.id) {
-      await TaskAssignRuleApi.createTaskAssignRule(data)
-      message.success(t('common.createSuccess'))
-    } else {
-      await TaskAssignRuleApi.updateTaskAssignRule(data)
-      message.success(t('common.updateSuccess'))
-    }
-    dialogVisible.value = false
-    // 发送操作成功的事件
-    emit('success')
-  } finally {
-    formLoading.value = false
-  }
-}
-
-/** 重置表单 */
-const resetForm = () => {
-  formRef.value?.resetFields()
-}
-</script>
diff --git a/src/views/infra/apiAccessLog/ApiAccessLogDetail.vue b/src/views/infra/apiAccessLog/ApiAccessLogDetail.vue
index 4746b0c79..fac82aa3a 100644
--- a/src/views/infra/apiAccessLog/ApiAccessLogDetail.vue
+++ b/src/views/infra/apiAccessLog/ApiAccessLogDetail.vue
@@ -1,6 +1,6 @@
 <template>
-  <Dialog title="详情" v-model="dialogVisible" :scroll="true" :max-height="500" width="800">
-    <el-descriptions border :column="1">
+  <Dialog v-model="dialogVisible" :max-height="500" :scroll="true" title="详情" width="800">
+    <el-descriptions :column="1" border>
       <el-descriptions-item label="日志主键" min-width="120">
         {{ detailData.id }}
       </el-descriptions-item>
@@ -33,14 +33,14 @@
       <el-descriptions-item label="操作结果">
         <div v-if="detailData.resultCode === 0">正常</div>
         <div v-else-if="detailData.resultCode > 0"
-          >失败 | {{ detailData.resultCode }} | {{ detailData.resultMsg }}</div
-        >
+          >失败 | {{ detailData.resultCode }} | {{ detailData.resultMsg }}
+        </div>
       </el-descriptions-item>
     </el-descriptions>
   </Dialog>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" name="ApiAccessLogDetail" setup>
 import { DICT_TYPE } from '@/utils/dict'
 import { formatDate } from '@/utils/formatTime'
 import * as ApiAccessLog from '@/api/infra/apiAccessLog'
diff --git a/src/views/infra/apiErrorLog/ApiErrorLogDetail.vue b/src/views/infra/apiErrorLog/ApiErrorLogDetail.vue
index 4b2799247..7fe175707 100644
--- a/src/views/infra/apiErrorLog/ApiErrorLogDetail.vue
+++ b/src/views/infra/apiErrorLog/ApiErrorLogDetail.vue
@@ -1,6 +1,6 @@
 <template>
-  <Dialog title="详情" v-model="dialogVisible" :scroll="true" :max-height="500" width="800">
-    <el-descriptions border :column="1">
+  <Dialog v-model="dialogVisible" :max-height="500" :scroll="true" title="详情" width="800">
+    <el-descriptions :column="1" border>
       <el-descriptions-item label="日志主键" min-width="120">
         {{ detailData.id }}
       </el-descriptions-item>
@@ -32,12 +32,12 @@
       <el-descriptions-item label="异常名">
         {{ detailData.exceptionName }}
       </el-descriptions-item>
-      <el-descriptions-item label="异常堆栈" v-if="detailData.exceptionStackTrace">
+      <el-descriptions-item v-if="detailData.exceptionStackTrace" label="异常堆栈">
         <el-input
-          type="textarea"
-          :readonly="true"
-          :autosize="{ maxRows: 20 }"
           v-model="detailData.exceptionStackTrace"
+          :autosize="{ maxRows: 20 }"
+          :readonly="true"
+          type="textarea"
         />
       </el-descriptions-item>
       <el-descriptions-item label="处理状态">
@@ -46,16 +46,16 @@
           :value="detailData.processStatus"
         />
       </el-descriptions-item>
-      <el-descriptions-item label="处理人" v-if="detailData.processUserId">
+      <el-descriptions-item v-if="detailData.processUserId" label="处理人">
         {{ detailData.processUserId }}
       </el-descriptions-item>
-      <el-descriptions-item label="处理时间" v-if="detailData.processTime">
+      <el-descriptions-item v-if="detailData.processTime" label="处理时间">
         {{ formatDate(detailData.processTime) }}
       </el-descriptions-item>
     </el-descriptions>
   </Dialog>
 </template>
-<script setup lang="ts">
+<script lang="ts" name="ApiErrorLogDetail" setup>
 import { DICT_TYPE } from '@/utils/dict'
 import { formatDate } from '@/utils/formatTime'
 import * as ApiErrorLog from '@/api/infra/apiErrorLog'
diff --git a/src/views/infra/codegen/ImportTable.vue b/src/views/infra/codegen/ImportTable.vue
index 0146b6c31..fb37aa261 100644
--- a/src/views/infra/codegen/ImportTable.vue
+++ b/src/views/infra/codegen/ImportTable.vue
@@ -1,12 +1,12 @@
 <template>
-  <Dialog title="导入表" v-model="dialogVisible" width="800px">
+  <Dialog v-model="dialogVisible" title="导入表" width="800px">
     <!-- 搜索栏 -->
-    <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
+    <el-form ref="queryFormRef" :inline="true" :model="queryParams" label-width="68px">
       <el-form-item label="数据源" prop="dataSourceConfigId">
         <el-select
           v-model="queryParams.dataSourceConfigId"
-          placeholder="请选择数据源"
           class="!w-240px"
+          placeholder="请选择数据源"
         >
           <el-option
             v-for="config in dataSourceConfigList"
@@ -19,54 +19,61 @@
       <el-form-item label="表名称" prop="name">
         <el-input
           v-model="queryParams.name"
-          placeholder="请输入表名称"
-          clearable
-          @keyup.enter="getList"
           class="!w-240px"
+          clearable
+          placeholder="请输入表名称"
+          @keyup.enter="getList"
         />
       </el-form-item>
       <el-form-item label="表描述" prop="comment">
         <el-input
           v-model="queryParams.comment"
-          placeholder="请输入表描述"
-          clearable
-          @keyup.enter="getList"
           class="!w-240px"
+          clearable
+          placeholder="请输入表描述"
+          @keyup.enter="getList"
         />
       </el-form-item>
       <el-form-item>
-        <el-button @click="getList"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button @click="getList">
+          <Icon class="mr-5px" icon="ep:search" />
+          搜索
+        </el-button>
+        <el-button @click="resetQuery">
+          <Icon class="mr-5px" icon="ep:refresh" />
+          重置
+        </el-button>
       </el-form-item>
     </el-form>
     <!-- 列表 -->
     <el-row>
       <el-table
-        v-loading="dbTableLoading"
-        @row-click="handleRowClick"
         ref="tableRef"
+        v-loading="dbTableLoading"
         :data="dbTableList"
-        @selection-change="handleSelectionChange"
         height="260px"
+        @row-click="handleRowClick"
+        @selection-change="handleSelectionChange"
       >
         <el-table-column type="selection" width="55" />
-        <el-table-column prop="name" label="表名称" :show-overflow-tooltip="true" />
-        <el-table-column prop="comment" label="表描述" :show-overflow-tooltip="true" />
+        <el-table-column :show-overflow-tooltip="true" label="表名称" prop="name" />
+        <el-table-column :show-overflow-tooltip="true" label="表描述" prop="comment" />
       </el-table>
     </el-row>
     <!-- 操作 -->
     <template #footer>
-      <el-button @click="handleImportTable" type="primary" :disabled="tableList.length === 0">
+      <el-button :disabled="tableList.length === 0" type="primary" @click="handleImportTable">
         导入
       </el-button>
       <el-button @click="close">关闭</el-button>
     </template>
   </Dialog>
 </template>
-<script setup lang="ts">
+<script lang="ts" name="InfraCodegenImportTable" setup>
 import * as CodegenApi from '@/api/infra/codegen'
 import * as DataSourceConfigApi from '@/api/infra/dataSourceConfig'
 import { ElTable } from 'element-plus'
+
 const message = useMessage() // 消息弹窗
 
 const dialogVisible = ref(false) // 弹窗的是否展示
diff --git a/src/views/infra/codegen/PreviewCode.vue b/src/views/infra/codegen/PreviewCode.vue
index 3ed32ce6d..12327b995 100644
--- a/src/views/infra/codegen/PreviewCode.vue
+++ b/src/views/infra/codegen/PreviewCode.vue
@@ -1,48 +1,48 @@
 <template>
   <Dialog
-    title="代码预览"
     v-model="dialogVisible"
     align-center
-    width="80%"
     class="app-infra-codegen-preview-container"
+    title="代码预览"
+    width="80%"
   >
     <div class="flex">
       <!-- 代码目录树 -->
       <el-card
-        class="w-1/3"
-        :gutter="12"
-        shadow="hover"
         v-loading="loading"
+        :gutter="12"
+        class="w-1/3"
         element-loading-text="生成文件目录中..."
+        shadow="hover"
       >
         <el-scrollbar height="calc(100vh - 88px - 40px)">
           <el-tree
             ref="treeRef"
-            node-key="id"
             :data="preview.fileTree"
             :expand-on-click-node="false"
-            highlight-current
-            @node-click="handleNodeClick"
             default-expand-all
+            highlight-current
+            node-key="id"
+            @node-click="handleNodeClick"
           />
         </el-scrollbar>
       </el-card>
       <!-- 代码 -->
       <el-card
-        class="w-2/3 ml-3"
-        :gutter="12"
-        shadow="hover"
         v-loading="loading"
+        :gutter="12"
+        class="w-2/3 ml-3"
         element-loading-text="加载代码中..."
+        shadow="hover"
       >
         <el-tabs v-model="preview.activeName">
           <el-tab-pane
             v-for="item in previewCodegen"
+            :key="item.filePath"
             :label="item.filePath.substring(item.filePath.lastIndexOf('/') + 1)"
             :name="item.filePath"
-            :key="item.filePath"
           >
-            <el-button text type="primary" class="float-right" @click="copy(item.code)">
+            <el-button class="float-right" text type="primary" @click="copy(item.code)">
               {{ t('common.copy') }}
             </el-button>
             <div>
@@ -54,10 +54,11 @@
     </div>
   </Dialog>
 </template>
-<script setup lang="ts">
+<script lang="ts" name="InfraCodegenPreviewCode" setup>
 import { useClipboard } from '@vueuse/core'
 import { handleTree2 } from '@/utils/tree'
 import * as CodegenApi from '@/api/infra/codegen'
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
diff --git a/src/views/infra/codegen/components/ColumInfoForm.vue b/src/views/infra/codegen/components/ColumInfoForm.vue
deleted file mode 100644
index 5d2a036d0..000000000
--- a/src/views/infra/codegen/components/ColumInfoForm.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<template>
-  <el-table ref="dragTable" :data="formData" row-key="columnId" :max-height="tableHeight">
-    <el-table-column
-      label="字段列名"
-      prop="columnName"
-      min-width="10%"
-      :show-overflow-tooltip="true"
-    />
-    <el-table-column label="字段描述" min-width="10%">
-      <template #default="scope">
-        <el-input v-model="scope.row.columnComment" />
-      </template>
-    </el-table-column>
-    <el-table-column
-      label="物理类型"
-      prop="dataType"
-      min-width="10%"
-      :show-overflow-tooltip="true"
-    />
-    <el-table-column label="Java类型" min-width="11%">
-      <template #default="scope">
-        <el-select v-model="scope.row.javaType">
-          <el-option label="Long" value="Long" />
-          <el-option label="String" value="String" />
-          <el-option label="Integer" value="Integer" />
-          <el-option label="Double" value="Double" />
-          <el-option label="BigDecimal" value="BigDecimal" />
-          <el-option label="LocalDateTime" value="LocalDateTime" />
-          <el-option label="Boolean" value="Boolean" />
-        </el-select>
-      </template>
-    </el-table-column>
-    <el-table-column label="java属性" min-width="10%">
-      <template #default="scope">
-        <el-input v-model="scope.row.javaField" />
-      </template>
-    </el-table-column>
-    <el-table-column label="插入" min-width="4%">
-      <template #default="scope">
-        <el-checkbox true-label="true" false-label="false" v-model="scope.row.createOperation" />
-      </template>
-    </el-table-column>
-    <el-table-column label="编辑" min-width="4%">
-      <template #default="scope">
-        <el-checkbox true-label="true" false-label="false" v-model="scope.row.updateOperation" />
-      </template>
-    </el-table-column>
-    <el-table-column label="列表" min-width="4%">
-      <template #default="scope">
-        <el-checkbox
-          true-label="true"
-          false-label="false"
-          v-model="scope.row.listOperationResult"
-        />
-      </template>
-    </el-table-column>
-    <el-table-column label="查询" min-width="4%">
-      <template #default="scope">
-        <el-checkbox true-label="true" false-label="false" v-model="scope.row.listOperation" />
-      </template>
-    </el-table-column>
-    <el-table-column label="查询方式" min-width="10%">
-      <template #default="scope">
-        <el-select v-model="scope.row.listOperationCondition">
-          <el-option label="=" value="=" />
-          <el-option label="!=" value="!=" />
-          <el-option label=">" value=">" />
-          <el-option label=">=" value=">=" />
-          <el-option label="<" value="<>" />
-          <el-option label="<=" value="<=" />
-          <el-option label="LIKE" value="LIKE" />
-          <el-option label="BETWEEN" value="BETWEEN" />
-        </el-select>
-      </template>
-    </el-table-column>
-    <el-table-column label="允许空" min-width="5%">
-      <template #default="scope">
-        <el-checkbox true-label="true" false-label="false" v-model="scope.row.nullable" />
-      </template>
-    </el-table-column>
-    <el-table-column label="显示类型" min-width="12%">
-      <template #default="scope">
-        <el-select v-model="scope.row.htmlType">
-          <el-option label="文本框" value="input" />
-          <el-option label="文本域" value="textarea" />
-          <el-option label="下拉框" value="select" />
-          <el-option label="单选框" value="radio" />
-          <el-option label="复选框" value="checkbox" />
-          <el-option label="日期控件" value="datetime" />
-          <el-option label="图片上传" value="imageUpload" />
-          <el-option label="文件上传" value="fileUpload" />
-          <el-option label="富文本控件" value="editor" />
-        </el-select>
-      </template>
-    </el-table-column>
-    <el-table-column label="字典类型" min-width="12%">
-      <template #default="scope">
-        <el-select v-model="scope.row.dictType" clearable filterable placeholder="请选择">
-          <el-option
-            v-for="dict in dictOptions"
-            :key="dict.id"
-            :label="dict.name"
-            :value="dict.type"
-          />
-        </el-select>
-      </template>
-    </el-table-column>
-    <el-table-column label="示例" min-width="10%">
-      <template #default="scope">
-        <el-input v-model="scope.row.example" />
-      </template>
-    </el-table-column>
-  </el-table>
-</template>
-<script setup lang="ts">
-import { PropType } from 'vue'
-import * as CodegenApi from '@/api/infra/codegen'
-import * as DictDataApi from '@/api/system/dict/dict.type'
-
-const props = defineProps({
-  columns: {
-    type: Array as unknown as PropType<CodegenApi.CodegenColumnVO[]>,
-    default: () => null
-  }
-})
-
-const formData = ref<CodegenApi.CodegenColumnVO[]>([])
-const tableHeight = document.documentElement.scrollHeight - 350 + 'px'
-
-/** 查询字典下拉列表 */
-const dictOptions = ref<DictDataApi.DictTypeVO[]>()
-const getDictOptions = async () => {
-  dictOptions.value = await DictDataApi.getSimpleDictTypeList()
-}
-
-watch(
-  () => props.columns,
-  (columns) => {
-    if (!columns) return
-    formData.value = columns
-  },
-  {
-    deep: true,
-    immediate: true
-  }
-)
-
-onMounted(async () => {
-  await getDictOptions()
-})
-</script>
diff --git a/src/views/infra/codegen/components/GenerateInfoForm.vue b/src/views/infra/codegen/components/GenerateInfoForm.vue
deleted file mode 100644
index b9898c099..000000000
--- a/src/views/infra/codegen/components/GenerateInfoForm.vue
+++ /dev/null
@@ -1,389 +0,0 @@
-<template>
-  <el-form ref="formRef" :model="formData" :rules="rules" label-width="150px">
-    <el-row>
-      <el-col :span="12">
-        <el-form-item prop="templateType" label="生成模板">
-          <el-select v-model="formData.templateType" @change="tplSelectChange">
-            <el-option
-              v-for="dict in getIntDictOptions(DICT_TYPE.INFRA_CODEGEN_TEMPLATE_TYPE)"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-            />
-          </el-select>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item prop="frontType" label="前端类型">
-          <el-select v-model="formData.frontType">
-            <el-option
-              v-for="dict in getIntDictOptions(DICT_TYPE.INFRA_CODEGEN_FRONT_TYPE)"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-            />
-          </el-select>
-        </el-form-item>
-      </el-col>
-
-      <el-col :span="12">
-        <el-form-item prop="scene" label="生成场景">
-          <el-select v-model="formData.scene">
-            <el-option
-              v-for="dict in getIntDictOptions(DICT_TYPE.INFRA_CODEGEN_SCENE)"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-            />
-          </el-select>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item>
-          <template #label>
-            <span>
-              上级菜单
-              <el-tooltip content="分配到指定菜单下，例如 系统管理" placement="top">
-                <Icon icon="ep:question-filled" />
-              </el-tooltip>
-            </span>
-          </template>
-          <el-tree-select
-            v-model="formData.parentMenuId"
-            placeholder="请选择系统菜单"
-            node-key="id"
-            check-strictly
-            :data="menus"
-            :props="menuTreeProps"
-          />
-        </el-form-item>
-      </el-col>
-
-      <!--      <el-col :span="12">-->
-      <!--        <el-form-item prop="packageName">-->
-      <!--          <span slot="label">-->
-      <!--            生成包路径-->
-      <!--            <el-tooltip content="生成在哪个java包下，例如 com.ruoyi.system" placement="top">-->
-      <!--              <i class="el-icon-question"></i>-->
-      <!--            </el-tooltip>-->
-      <!--          </span>-->
-      <!--          <el-input v-model="formData.packageName" />-->
-      <!--        </el-form-item>-->
-      <!--      </el-col>-->
-
-      <el-col :span="12">
-        <el-form-item prop="moduleName">
-          <template #label>
-            <span>
-              模块名
-              <el-tooltip
-                content="模块名，即一级目录，例如 system、infra、tool 等等"
-                placement="top"
-              >
-                <Icon icon="ep:question-filled" />
-              </el-tooltip>
-            </span>
-          </template>
-          <el-input v-model="formData.moduleName" />
-        </el-form-item>
-      </el-col>
-
-      <el-col :span="12">
-        <el-form-item prop="businessName">
-          <template #label>
-            <span>
-              业务名
-              <el-tooltip
-                content="业务名，即二级目录，例如 user、permission、dict 等等"
-                placement="top"
-              >
-                <Icon icon="ep:question-filled" />
-              </el-tooltip>
-            </span>
-          </template>
-          <el-input v-model="formData.businessName" />
-        </el-form-item>
-      </el-col>
-
-      <!--      <el-col :span="12">-->
-      <!--        <el-form-item prop="businessPackage">-->
-      <!--          <span slot="label">-->
-      <!--            业务包-->
-      <!--            <el-tooltip content="业务包，自定义二级目录。例如说，我们希望将 dictType 和 dictData 归类成 dict 业务" placement="top">-->
-      <!--              <i class="el-icon-question"></i>-->
-      <!--            </el-tooltip>-->
-      <!--          </span>-->
-      <!--          <el-input v-model="formData.businessPackage" />-->
-      <!--        </el-form-item>-->
-      <!--      </el-col>-->
-
-      <el-col :span="12">
-        <el-form-item prop="className">
-          <template #label>
-            <span>
-              类名称
-              <el-tooltip
-                content="类名称（首字母大写），例如SysUser、SysMenu、SysDictData 等等"
-                placement="top"
-              >
-                <Icon icon="ep:question-filled" />
-              </el-tooltip>
-            </span>
-          </template>
-          <el-input v-model="formData.className" />
-        </el-form-item>
-      </el-col>
-
-      <el-col :span="12">
-        <el-form-item prop="classComment">
-          <template #label>
-            <span>
-              类描述
-              <el-tooltip content="用作类描述，例如 用户" placement="top">
-                <Icon icon="ep:question-filled" />
-              </el-tooltip>
-            </span>
-          </template>
-          <el-input v-model="formData.classComment" />
-        </el-form-item>
-      </el-col>
-
-      <el-col :span="24" v-if="formData.genType === '1'">
-        <el-form-item prop="genPath">
-          <template #label>
-            <span>
-              自定义路径
-              <el-tooltip
-                content="填写磁盘绝对路径，若不填写，则生成到当前Web项目下"
-                placement="top"
-              >
-                <Icon icon="ep:question-filled" />
-              </el-tooltip>
-            </span>
-          </template>
-          <el-input v-model="formData.genPath">
-            <template #append>
-              <el-dropdown>
-                <el-button type="primary">
-                  最近路径快速选择
-                  <i class="el-icon-arrow-down el-icon--right"></i>
-                </el-button>
-                <template #dropdown>
-                  <el-dropdown-menu>
-                    <el-dropdown-item @click="formData.genPath = '/'">
-                      恢复默认的生成基础路径
-                    </el-dropdown-item>
-                  </el-dropdown-menu>
-                </template>
-              </el-dropdown>
-            </template>
-          </el-input>
-        </el-form-item>
-      </el-col>
-    </el-row>
-
-    <el-row v-show="formData.tplCategory === 'tree'">
-      <h4 class="form-header">其他信息</h4>
-      <el-col :span="12">
-        <el-form-item>
-          <template #label>
-            <span>
-              树编码字段
-              <el-tooltip content="树显示的编码字段名， 如：dept_id" placement="top">
-                <Icon icon="ep:question-filled" />
-              </el-tooltip>
-            </span>
-          </template>
-          <el-select v-model="formData.treeCode" placeholder="请选择">
-            <el-option
-              v-for="(column, index) in formData.columns"
-              :key="index"
-              :label="column.columnName + '：' + column.columnComment"
-              :value="column.columnName"
-            />
-          </el-select>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item>
-          <template #label>
-            <span>
-              树父编码字段
-              <el-tooltip content="树显示的父编码字段名， 如：parent_Id" placement="top">
-                <Icon icon="ep:question-filled" />
-              </el-tooltip>
-            </span>
-          </template>
-          <el-select v-model="formData.treeParentCode" placeholder="请选择">
-            <el-option
-              v-for="(column, index) in formData.columns"
-              :key="index"
-              :label="column.columnName + '：' + column.columnComment"
-              :value="column.columnName"
-            />
-          </el-select>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item>
-          <template #label>
-            <span>
-              树名称字段
-              <el-tooltip content="树节点的显示名称字段名， 如：dept_name" placement="top">
-                <Icon icon="ep:question-filled" />
-              </el-tooltip>
-            </span>
-          </template>
-
-          <el-select v-model="formData.treeName" placeholder="请选择">
-            <el-option
-              v-for="(column, index) in formData.columns"
-              :key="index"
-              :label="column.columnName + '：' + column.columnComment"
-              :value="column.columnName"
-            />
-          </el-select>
-        </el-form-item>
-      </el-col>
-    </el-row>
-    <el-row v-show="formData.tplCategory === 'sub'">
-      <h4 class="form-header">关联信息</h4>
-      <el-col :span="12">
-        <el-form-item>
-          <template #label>
-            <span>
-              关联子表的表名
-              <el-tooltip content="关联子表的表名， 如：sys_user" placement="top">
-                <Icon icon="ep:question-filled" />
-              </el-tooltip>
-            </span>
-          </template>
-          <el-select v-model="formData.subTableName" placeholder="请选择" @change="subSelectChange">
-            <el-option
-              v-for="(table0, index) in tables"
-              :key="index"
-              :label="table0.tableName + '：' + table0.tableComment"
-              :value="table0.tableName"
-            />
-          </el-select>
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item>
-          <template #label>
-            <span>
-              子表关联的外键名
-              <el-tooltip content="子表关联的外键名， 如：user_id" placement="top">
-                <Icon icon="ep:question-filled" />
-              </el-tooltip>
-            </span>
-          </template>
-          <el-select v-model="formData.subTableFkName" placeholder="请选择">
-            <el-option
-              v-for="(column, index) in subColumns"
-              :key="index"
-              :label="column.columnName + '：' + column.columnComment"
-              :value="column.columnName"
-            />
-          </el-select>
-        </el-form-item>
-      </el-col>
-    </el-row>
-  </el-form>
-</template>
-<script setup lang="ts">
-import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
-import { handleTree } from '@/utils/tree'
-import * as CodegenApi from '@/api/infra/codegen'
-import * as MenuApi from '@/api/system/menu'
-import { PropType } from 'vue'
-
-const message = useMessage() // 消息弹窗
-const props = defineProps({
-  table: {
-    type: Object as PropType<Nullable<CodegenApi.CodegenTableVO>>,
-    default: () => null
-  }
-})
-
-const formRef = ref()
-const formData = ref({
-  templateType: null,
-  frontType: null,
-  scene: null,
-  moduleName: '',
-  businessName: '',
-  className: '',
-  classComment: '',
-  parentMenuId: null,
-  genPath: '',
-  treeCode: '',
-  treeParentCode: '',
-  treeName: '',
-  tplCategory: '',
-  subTableName: '',
-  subTableFkName: '',
-  genType: ''
-})
-
-const rules = reactive({
-  templateType: [required],
-  frontType: [required],
-  scene: [required],
-  moduleName: [required],
-  businessName: [required],
-  businessPackage: [required],
-  className: [required],
-  classComment: [required]
-})
-
-const tables = ref([])
-const subColumns = ref([])
-const menus = ref<any[]>([])
-const menuTreeProps = {
-  label: 'name'
-}
-
-/** 选择子表名触发 */
-const subSelectChange = () => {
-  formData.value.subTableFkName = ''
-}
-
-/** 选择生成模板触发 */
-const tplSelectChange = (value) => {
-  if (value !== 1) {
-    // TODO 芋艿：暂时不考虑支持树形结构
-    message.error(
-      '暂时不考虑支持【树形】和【主子表】的代码生成。原因是：导致 vm 模板过于复杂，不利于胖友二次开发'
-    )
-    return false
-  }
-  if (value !== 'sub') {
-    formData.value.subTableName = ''
-    formData.value.subTableFkName = ''
-  }
-}
-
-watch(
-  () => props.table,
-  (table) => {
-    if (!table) return
-    formData.value = table as any
-  },
-  {
-    deep: true,
-    immediate: true
-  }
-)
-
-onMounted(async () => {
-  try {
-    const resp = await MenuApi.getSimpleMenusList()
-    menus.value = handleTree(resp)
-  } catch {}
-})
-
-defineExpose({
-  validate: async () => unref(formRef)?.validate()
-})
-</script>
diff --git a/src/views/infra/job/JobDetail.vue b/src/views/infra/job/JobDetail.vue
index 18e4235bd..45bc4a5db 100644
--- a/src/views/infra/job/JobDetail.vue
+++ b/src/views/infra/job/JobDetail.vue
@@ -1,6 +1,6 @@
 <template>
-  <Dialog title="任务详细" v-model="dialogVisible" width="700px">
-    <el-descriptions border :column="1">
+  <Dialog v-model="dialogVisible" title="任务详细" width="700px">
+    <el-descriptions :column="1" border>
       <el-descriptions-item label="任务编号" min-width="60">
         {{ detailData.id }}
       </el-descriptions-item>
@@ -42,7 +42,7 @@
     </el-descriptions>
   </Dialog>
 </template>
-<script setup lang="ts">
+<script lang="ts" name="InfraJobDetail" setup>
 import { DICT_TYPE } from '@/utils/dict'
 import { formatDate } from '@/utils/formatTime'
 import * as JobApi from '@/api/infra/job'
diff --git a/src/views/infra/job/logger/JobLogDetail.vue b/src/views/infra/job/logger/JobLogDetail.vue
index 3b8795d96..a8ef8d4fe 100644
--- a/src/views/infra/job/logger/JobLogDetail.vue
+++ b/src/views/infra/job/logger/JobLogDetail.vue
@@ -1,6 +1,6 @@
 <template>
-  <Dialog title="任务详细" v-model="dialogVisible" width="700px">
-    <el-descriptions border :column="1">
+  <Dialog v-model="dialogVisible" title="任务详细" width="700px">
+    <el-descriptions :column="1" border>
       <el-descriptions-item label="日志编号" min-width="60">
         {{ detailData.id }}
       </el-descriptions-item>
@@ -31,7 +31,7 @@
     </el-descriptions>
   </Dialog>
 </template>
-<script setup lang="ts">
+<script lang="ts" name="JobLogDetail" setup>
 import { DICT_TYPE } from '@/utils/dict'
 import { formatDate } from '@/utils/formatTime'
 import * as JobLogApi from '@/api/infra/jobLog'
diff --git a/src/views/infra/webSocket/index.vue b/src/views/infra/webSocket/index.vue
index b4e0acc06..c1690db27 100644
--- a/src/views/infra/webSocket/index.vue
+++ b/src/views/infra/webSocket/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex">
-    <el-card class="w-1/2" :gutter="12" shadow="always">
+    <el-card :gutter="12" class="w-1/2" shadow="always">
       <template #header>
         <div class="card-header">
           <span>连接</span>
@@ -14,7 +14,7 @@
 
       <div class="flex">
         <el-input v-model="server" disabled>
-          <template #prepend> 服务地址 </template>
+          <template #prepend> 服务地址</template>
         </el-input>
         <el-button :type="getIsOpen ? 'danger' : 'primary'" @click="toggle">
           {{ getIsOpen ? '关闭连接' : '开启连接' }}
@@ -25,15 +25,15 @@
       <el-input
         v-model="sendValue"
         :autosize="{ minRows: 2, maxRows: 4 }"
-        type="textarea"
         :disabled="!getIsOpen"
         clearable
+        type="textarea"
       />
-      <el-button type="primary" block class="mt-4" :disabled="!getIsOpen" @click="handlerSend">
+      <el-button :disabled="!getIsOpen" block class="mt-4" type="primary" @click="handlerSend">
         发送
       </el-button>
     </el-card>
-    <el-card class="w-1/2" :gutter="12" shadow="always">
+    <el-card :gutter="12" class="w-1/2" shadow="always">
       <template #header>
         <div class="card-header">
           <span>消息记录</span>
@@ -41,7 +41,7 @@
       </template>
       <div class="max-h-80 overflow-auto">
         <ul>
-          <li v-for="item in getList" class="mt-2" :key="item.time">
+          <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>{{ formatDate(item.time) }}</span>
@@ -55,7 +55,7 @@
     </el-card>
   </div>
 </template>
-<script setup lang="ts">
+<script lang="ts" name="InfraWebSocket" setup>
 import { formatDate } from '@/utils/formatTime'
 import { useUserStore } from '@/store/modules/user'
 import { useWebSocket } from '@vueuse/core'
diff --git a/src/views/mall/product/property/PropertyForm.vue b/src/views/mall/product/property/PropertyForm.vue
index c9a21d649..3e13a0f27 100644
--- a/src/views/mall/product/property/PropertyForm.vue
+++ b/src/views/mall/product/property/PropertyForm.vue
@@ -1,29 +1,30 @@
 <template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible">
+  <Dialog v-model="dialogVisible" :title="dialogTitle">
     <el-form
       ref="formRef"
+      v-loading="formLoading"
       :model="formData"
       :rules="formRules"
       label-width="80px"
-      v-loading="formLoading"
     >
       <el-form-item label="名称" prop="name">
         <el-input v-model="formData.name" placeholder="请输入名称" />
       </el-form-item>
       <el-form-item label="备注" prop="remark">
-        <el-input v-model="formData.remark" type="textarea" placeholder="请输入内容" />
+        <el-input v-model="formData.remark" placeholder="请输入内容" type="textarea" />
       </el-form-item>
     </el-form>
     <template #footer>
       <div class="dialog-footer">
-        <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+        <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
         <el-button @click="dialogVisible = false">取 消</el-button>
       </div>
     </template>
   </Dialog>
 </template>
-<script setup lang="ts">
+<script lang="ts" name="ProductPropertyForm" setup>
 import * as PropertyApi from '@/api/mall/product/property'
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
diff --git a/src/views/mall/product/property/value/ValueForm.vue b/src/views/mall/product/property/value/ValueForm.vue
index 3f6a5225d..3257cbc64 100644
--- a/src/views/mall/product/property/value/ValueForm.vue
+++ b/src/views/mall/product/property/value/ValueForm.vue
@@ -1,11 +1,11 @@
 <template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible">
+  <Dialog v-model="dialogVisible" :title="dialogTitle">
     <el-form
       ref="formRef"
+      v-loading="formLoading"
       :model="formData"
       :rules="formRules"
       label-width="80px"
-      v-loading="formLoading"
     >
       <el-form-item label="属性编号" prop="category">
         <el-input v-model="formData.propertyId" disabled="" />
@@ -14,17 +14,18 @@
         <el-input v-model="formData.name" placeholder="请输入名称" />
       </el-form-item>
       <el-form-item label="备注" prop="remark">
-        <el-input v-model="formData.remark" type="textarea" placeholder="请输入内容" />
+        <el-input v-model="formData.remark" placeholder="请输入内容" type="textarea" />
       </el-form-item>
     </el-form>
     <template #footer>
-      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
       <el-button @click="dialogVisible = false">取 消</el-button>
     </template>
   </Dialog>
 </template>
-<script setup lang="ts">
+<script lang="ts" name="ProductPropertyValueForm" setup>
 import * as PropertyApi from '@/api/mall/product/property'
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
diff --git a/src/views/mp/account/AccountForm.vue b/src/views/mp/account/AccountForm.vue
index a80bb48f7..f9c651ca1 100644
--- a/src/views/mp/account/AccountForm.vue
+++ b/src/views/mp/account/AccountForm.vue
@@ -1,11 +1,11 @@
 <template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible">
+  <Dialog v-model="dialogVisible" :title="dialogTitle">
     <el-form
       ref="formRef"
+      v-loading="formLoading"
       :model="formData"
       :rules="rules"
       label-width="120px"
-      v-loading="formLoading"
     >
       <el-form-item label="名称" prop="name">
         <el-input v-model="formData.name" placeholder="请输入名称" />
@@ -59,17 +59,18 @@
         <el-input v-model="formData.aesKey" placeholder="请输入消息加解密密钥" />
       </el-form-item>
       <el-form-item label="备注" prop="remark">
-        <el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" />
+        <el-input v-model="formData.remark" placeholder="请输入备注" type="textarea" />
       </el-form-item>
     </el-form>
     <template #footer>
-      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
       <el-button @click="dialogVisible = false">取 消</el-button>
     </template>
   </Dialog>
 </template>
-<script setup lang="ts">
+<script lang="ts" name="MpAccountForm" setup>
 import * as AccountApi from '@/api/mp/account'
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
diff --git a/src/views/mp/tag/TagForm.vue b/src/views/mp/tag/TagForm.vue
index 73b29baa6..b1f96eb46 100644
--- a/src/views/mp/tag/TagForm.vue
+++ b/src/views/mp/tag/TagForm.vue
@@ -1,23 +1,23 @@
 <template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible">
+  <Dialog v-model="dialogVisible" :title="dialogTitle">
     <el-form
       ref="formRef"
+      v-loading="formLoading"
       :model="formData"
       :rules="formRules"
       label-width="80px"
-      v-loading="formLoading"
     >
       <el-form-item label="标签名称" prop="name">
         <el-input v-model="formData.name" placeholder="请输入标签名称" />
       </el-form-item>
     </el-form>
     <template #footer>
-      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
       <el-button @click="dialogVisible = false">取 消</el-button>
     </template>
   </Dialog>
 </template>
-<script setup lang="ts">
+<script lang="ts" name="MpTagForm" setup>
 import * as MpTagApi from '@/api/mp/tag'
 import type { FormInstance, FormRules } from 'element-plus'
 
diff --git a/src/views/mp/user/UserForm.vue b/src/views/mp/user/UserForm.vue
index a23d271f3..612e49640 100644
--- a/src/views/mp/user/UserForm.vue
+++ b/src/views/mp/user/UserForm.vue
@@ -1,11 +1,11 @@
 <template>
-  <Dialog title="修改" v-model="dialogVisible">
+  <Dialog v-model="dialogVisible" title="修改">
     <el-form
       ref="formRef"
+      v-loading="formLoading"
       :model="formData"
       :rules="formRules"
       label-width="80px"
-      v-loading="formLoading"
     >
       <el-form-item label="昵称" prop="nickname">
         <el-input v-model="formData.nickname" placeholder="请输入昵称" />
@@ -14,7 +14,7 @@
         <el-input v-model="formData.remark" placeholder="请输入备注" />
       </el-form-item>
       <el-form-item label="标签" prop="tagIds">
-        <el-select v-model="formData.tagIds" multiple clearable placeholder="请选择标签">
+        <el-select v-model="formData.tagIds" clearable multiple placeholder="请选择标签">
           <el-option
             v-for="item in tagList"
             :key="item.tagId"
@@ -25,14 +25,15 @@
       </el-form-item>
     </el-form>
     <template #footer>
-      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
       <el-button @click="dialogVisible = false">取 消</el-button>
     </template>
   </Dialog>
 </template>
-<script setup lang="ts">
+<script lang="ts" name="MpUserForm" setup>
 import * as MpTagApi from '@/api/mp/tag'
 import * as MpUserApi from '@/api/mp/user'
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗