!246 解决keep alive不生效问题，改为vue3.3 defineOptions

Merge pull request !246 from clockdotnet/master-vxe

src/App.vue

@@ -1,10 +1,12 @@
-<script lang="ts" name="APP" setup>
+<script lang="ts" setup>
 import { isDark } from '@/utils/is'
 import { useAppStore } from '@/store/modules/app'
 import { useDesign } from '@/hooks/web/useDesign'
 import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
 import routerSearch from '@/components/RouterSearch/index.vue'
 
+defineOptions({ name: 'APP' })
+
 const { getPrefixCls } = useDesign()
 const prefixCls = getPrefixCls('app')
 const appStore = useAppStore()

src/components/Backtop/src/Backtop.vue

@@ -1,7 +1,9 @@
-<script lang="ts" name="BackTop" setup>
+<script lang="ts" setup>
 import { ElBacktop } from 'element-plus'
 import { useDesign } from '@/hooks/web/useDesign'
 
+defineOptions({ name: 'BackTop' })
+
 const { getPrefixCls, variables } = useDesign()
 
 const prefixCls = getPrefixCls('backtop')

src/components/ConfigGlobal/src/ConfigGlobal.vue

@@ -1,4 +1,4 @@
-<script lang="ts" name="ConfigGlobal" setup>
+<script lang="ts" setup>
 import { propTypes } from '@/utils/propTypes'
 import { useLocaleStore } from '@/store/modules/locale'
 import { useAppStore } from '@/store/modules/app'
@@ -7,6 +7,8 @@ import { useDesign } from '@/hooks/web/useDesign'
 import { ElementPlusSize } from '@/types/elementPlus'
 import { useWindowSize } from '@vueuse/core'
 
+defineOptions({ name: 'ConfigGlobal' })
+
 const { variables } = useDesign()
 
 const appStore = useAppStore()

src/components/ContentDetailWrap/src/ContentDetailWrap.vue

@@ -1,7 +1,9 @@
-<script lang="ts" name="ContentDetailWrap" setup>
+<script lang="ts" setup>
 import { propTypes } from '@/utils/propTypes'
 import { useDesign } from '@/hooks/web/useDesign'
 
+defineOptions({ name: 'ContentDetailWrap' })
+
 const { t } = useI18n()
 
 const { getPrefixCls } = useDesign()

src/components/ContentWrap/src/ContentWrap.vue

@@ -1,7 +1,9 @@
-<script lang="ts" name="ContentWrap" setup>
+<script lang="ts" setup>
 import { propTypes } from '@/utils/propTypes'
 import { useDesign } from '@/hooks/web/useDesign'
 
+defineOptions({ name: 'ContentWrap' })
+
 const { getPrefixCls } = useDesign()
 
 const prefixCls = getPrefixCls('content-wrap')

src/components/CountTo/src/CountTo.vue

@@ -1,9 +1,11 @@
-<script lang="ts" name="CountTo" setup>
+<script lang="ts" setup>
 import { PropType } from 'vue'
 import { isNumber } from '@/utils/is'
 import { propTypes } from '@/utils/propTypes'
 import { useDesign } from '@/hooks/web/useDesign'
 
+defineOptions({ name: 'CountTo' })
+
 const { getPrefixCls } = useDesign()
 
 const prefixCls = getPrefixCls('count-to')

src/components/Crontab/src/Crontab.vue

@@ -1,7 +1,9 @@
-<script lang="ts" name="Crontab" setup>
+<script lang="ts" setup>
 import { ElMessage } from 'element-plus'
 import { PropType } from 'vue'
 
+defineOptions({ name: 'Crontab' })
+
 interface shortcutsType {
   text: string
   value: string
@@ -966,37 +968,37 @@ const submit = () => {
 <style scoped>
 .sc-cron:deep(.el-tabs__item) {
   height: auto;
-  line-height: 1;
   padding: 0 7px;
+  line-height: 1;
   vertical-align: bottom;
 }
 
 .sc-cron-num {
-  text-align: center;
-  margin-bottom: 15px;
   width: 100%;
+  margin-bottom: 15px;
+  text-align: center;
 }
 
 .sc-cron-num h2 {
-  font-size: 12px;
   margin-bottom: 15px;
+  font-size: 12px;
   font-weight: normal;
 }
 
 .sc-cron-num h4 {
   display: block;
-  height: 32px;
-  line-height: 30px;
   width: 100%;
-  font-size: 12px;
+  height: 32px;
   padding: 0 15px;
+  font-size: 12px;
+  line-height: 30px;
   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;
+  background: var(--el-color-primary);
 }
 
 [data-theme='dark'] .sc-cron-num h4 {

src/components/Cropper/src/CopperModal.vue

@@ -113,7 +113,7 @@
     </Dialog>
   </div>
 </template>
-<script lang="ts" name="CopperModal" setup>
+<script lang="ts" setup>
 import { useDesign } from '@/hooks/web/useDesign'
 import { dataURLtoBlob } from '@/utils/filt'
 import { useI18n } from 'vue-i18n'
@@ -121,6 +121,8 @@ import type { CropendResult, Cropper } from './types'
 import { propTypes } from '@/utils/propTypes'
 import { CropperImage } from '@/components/Cropper'
 
+defineOptions({ name: 'CopperModal' })
+
 const props = defineProps({
   srcValue: propTypes.string.def(''),
   circled: propTypes.bool.def(true)

src/components/Cropper/src/Cropper.vue

@@ -10,7 +10,7 @@
     />
   </div>
 </template>
-<script lang="ts" name="Cropper" setup>
+<script lang="ts" setup>
 import { CSSProperties, PropType } from 'vue'
 import Cropper from 'cropperjs'
 import 'cropperjs/dist/cropper.css'
@@ -18,6 +18,8 @@ import { useDesign } from '@/hooks/web/useDesign'
 import { propTypes } from '@/utils/propTypes'
 import { useDebounceFn } from '@vueuse/core'
 
+defineOptions({ name: 'Cropper' })
+
 type Options = Cropper.Options
 
 const defaultOptions: Options = {

src/components/Cropper/src/CropperAvatar.vue

@@ -12,7 +12,7 @@
     />
   </div>
 </template>
-<script lang="ts" name="CropperAvatar" setup>
+<script lang="ts" setup>
 import { useDesign } from '@/hooks/web/useDesign'
 
 import { propTypes } from '@/utils/propTypes'
@@ -20,6 +20,8 @@ import { useI18n } from 'vue-i18n'
 import CopperModal from './CopperModal.vue'
 import avatar from '@/assets/imgs/avatar.jpg'
 
+defineOptions({ name: 'CropperAvatar' })
+
 const props = defineProps({
   width: propTypes.string.def('200px'),
   value: propTypes.string.def(''),

src/components/Descriptions/src/Descriptions.vue

@@ -1,4 +1,4 @@
-<script lang="ts" name="Descriptions" setup>
+<script lang="ts" setup>
 import { PropType } from 'vue'
 import dayjs from 'dayjs'
 import { useDesign } from '@/hooks/web/useDesign'
@@ -6,6 +6,8 @@ import { propTypes } from '@/utils/propTypes'
 import { useAppStore } from '@/store/modules/app'
 import { DescriptionsSchema } from '@/types/descriptions'
 
+defineOptions({ name: 'Descriptions' })
+
 const appStore = useAppStore()
 
 const mobile = computed(() => appStore.getMobile)

src/components/Descriptions/src/DescriptionsItemLabel.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 const { label } = defineProps({
   label: {
     type: String,

src/components/Dialog/src/Dialog.vue

@@ -1,7 +1,10 @@
-<script lang="ts" name="Dialog" setup>
+<script lang="ts" setup>
 import { propTypes } from '@/utils/propTypes'
 import { isNumber } from '@/utils/is'
 
+// eslint-disable-next-line vue/no-reserved-component-names
+defineOptions({ name: 'Dialog' })
+
 const slots = useSlots()
 
 const props = defineProps({

src/components/DocAlert/index.vue

@@ -5,9 +5,11 @@
     </template>
   </el-alert>
 </template>
-<script setup lang="tsx" name="DocAlert">
+<script lang="tsx" setup>
 import { propTypes } from '@/utils/propTypes'
 
+defineOptions({ name: 'DocAlert' })
+
 const props = defineProps({
   title: propTypes.string,
   url: propTypes.string
@@ -25,8 +27,8 @@ const getEnable = () => {
 </script>
 <style scoped>
 .el-alert--success.is-light {
-  border: 1px solid green;
   margin-bottom: 10px;
   cursor: pointer;
+  border: 1px solid green;
 }
 </style>

src/components/Echart/src/Echart.vue

@@ -1,4 +1,4 @@
-<script lang="ts" name="EChart" setup>
+<script lang="ts" setup>
 import type { EChartsOption } from 'echarts'
 import echarts from '@/plugins/echarts'
 import { debounce } from 'lodash-es'
@@ -9,6 +9,8 @@ import { useAppStore } from '@/store/modules/app'
 import { isString } from '@/utils/is'
 import { useDesign } from '@/hooks/web/useDesign'
 
+defineOptions({ name: 'EChart' })
+
 const { getPrefixCls, variables } = useDesign()
 
 const prefixCls = getPrefixCls('echart')

src/components/Editor/src/Editor.vue

@@ -1,4 +1,4 @@
-<script lang="ts" name="Editor" setup>
+<script lang="ts" setup>
 import { PropType } from 'vue'
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
 import { i18nChangeLanguage, IDomEditor, IEditorConfig } from '@wangeditor/editor'
@@ -8,6 +8,8 @@ import { ElMessage } from 'element-plus'
 import { useLocaleStore } from '@/store/modules/locale'
 import { getAccessToken, getTenantId } from '@/utils/auth'
 
+defineOptions({ name: 'Editor' })
+
 type InsertFnType = (url: string, alt: string, href: string) => void
 
 const localeStore = useLocaleStore()

src/components/Error/src/Error.vue

@@ -1,9 +1,11 @@
-<script lang="ts" name="Error" setup>
+<script lang="ts" setup>
 import pageError from '@/assets/svgs/404.svg'
 import networkError from '@/assets/svgs/500.svg'
 import noPermission from '@/assets/svgs/403.svg'
 import { propTypes } from '@/utils/propTypes'
 
+defineOptions({ name: 'Error' })
+
 interface ErrorMap {
   url: string
   message: string

src/components/IFrame/src/IFrame.vue

@@ -1,6 +1,8 @@
-<script lang="ts" name="IFrame" setup>
+<script lang="ts" setup>
 import { propTypes } from '@/utils/propTypes'
 
+defineOptions({ name: 'IFrame' })
+
 const props = defineProps({
   src: propTypes.string.def('')
 })

src/components/Icon/src/Icon.vue

@@ -1,8 +1,10 @@
-<script lang="ts" name="Icon" setup>
+<script lang="ts" setup>
 import { propTypes } from '@/utils/propTypes'
 import Iconify from '@purge-icons/generated'
 import { useDesign } from '@/hooks/web/useDesign'
 
+defineOptions({ name: 'Icon' })
+
 const { getPrefixCls } = useDesign()
 
 const prefixCls = getPrefixCls('icon')

src/components/Icon/src/IconSelect.vue

@@ -1,8 +1,10 @@
-<script lang="ts" name="IconSelect" setup>
+<script lang="ts" setup>
 import { CSSProperties } from 'vue'
 import { cloneDeep } from 'lodash-es'
 import { IconJson } from '@/components/Icon/src/data'
 
+defineOptions({ name: 'IconSelect' })
+
 type ParameterCSSProperties = (item?: string) => CSSProperties | undefined
 
 const props = defineProps({
@@ -189,10 +191,10 @@ watch(
 
 .icon-item {
   &:hover {
-    border-color: var(--el-color-primary);
     color: var(--el-color-primary);
-    transition: all 0.4s;
+    border-color: var(--el-color-primary);
     transform: scaleX(1.05);
+    transition: all 0.4s;
   }
 }
 
@@ -213,15 +215,15 @@ watch(
 }
 
 :deep(.el-tabs__item) {
+  height: 30px;
   font-size: 12px;
   font-weight: normal;
-  height: 30px;
   line-height: 30px;
 }
 
 :deep(.el-tabs__header),
 :deep(.el-tabs__nav-wrap) {
-  margin: 0;
   position: static;
+  margin: 0;
 }
 </style>

src/components/ImageViewer/src/ImageViewer.vue

@@ -1,7 +1,9 @@
-<script lang="ts" name="ImageViewer" setup>
+<script lang="ts" setup>
 import { PropType } from 'vue'
 import { propTypes } from '@/utils/propTypes'
 
+defineOptions({ name: 'ImageViewer' })
+
 const props = defineProps({
   urlList: {
     type: Array as PropType<string[]>,

src/components/Infotip/src/Infotip.vue

@@ -1,9 +1,11 @@
-<script lang="ts" name="InfoTip" setup>
+<script lang="ts" setup>
 import { PropType } from 'vue'
 import { useDesign } from '@/hooks/web/useDesign'
 import { propTypes } from '@/utils/propTypes'
 import { TipSchema } from '@/types/infoTip'
 
+defineOptions({ name: 'InfoTip' })
+
 const { getPrefixCls } = useDesign()
 
 const prefixCls = getPrefixCls('infotip')

src/components/InputPassword/src/InputPassword.vue

@@ -1,10 +1,12 @@
-<script lang="ts" name="InputPassword" setup>
+<script lang="ts" setup>
 import { propTypes } from '@/utils/propTypes'
 import { useConfigGlobal } from '@/hooks/web/useConfigGlobal'
 import type { ZxcvbnResult } from '@zxcvbn-ts/core'
 import { zxcvbn } from '@zxcvbn-ts/core'
 import { useDesign } from '@/hooks/web/useDesign'
 
+defineOptions({ name: 'InputPassword' })
+
 const { getPrefixCls } = useDesign()
 
 const prefixCls = getPrefixCls('input-password')
@@ -94,7 +96,7 @@ $prefix-cls: #{$namespace}-input-password;
       background-color: transparent;
       border-color: var(--el-color-white);
       border-style: solid;
-      border-width: 0 5px 0 5px;
+      border-width: 0 5px;
       content: '';
     }
 

src/components/Qrcode/src/Qrcode.vue

@@ -1,4 +1,4 @@
-<script lang="ts" name="Qrcode" setup>
+<script lang="ts" setup>
 import { computed, nextTick, PropType, ref, unref, watch } from 'vue'
 import QRCode, { QRCodeRenderersOptions } from 'qrcode'
 import { cloneDeep } from 'lodash-es'
@@ -7,6 +7,8 @@ import { useDesign } from '@/hooks/web/useDesign'
 import { isString } from '@/utils/is'
 import { QrcodeLogo } from '@/types/qrcode'
 
+defineOptions({ name: 'Qrcode' })
+
 const props = defineProps({
   // img 或者 canvas,img不支持logo嵌套
   tag: propTypes.string.validate((v: string) => ['canvas', 'img'].includes(v)).def('canvas'),
@@ -241,7 +243,7 @@ $prefix-cls: #{$namespace}-qrcode;
 
 .#{$prefix-cls} {
   &--disabled {
-    background: rgba(255, 255, 255, 0.95);
+    background: rgb(255 255 255 / 95%);
 
     & > div {
       transform: translate(-50%, -50%);

src/components/RouterSearch/index.vue

@@ -19,7 +19,7 @@
   </ElDialog>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 const router = useRouter() // 路由对象
 const showSearch = ref(false) // 是否显示弹框
 const value: Ref = ref('') // 用户输入的值

src/components/Search/src/Search.vue

@@ -1,4 +1,4 @@
-<script lang="ts" name="Search" setup>
+<script lang="ts" setup>
 import { PropType } from 'vue'
 import { propTypes } from '@/utils/propTypes'
 
@@ -7,6 +7,8 @@ import { findIndex } from '@/utils'
 import { cloneDeep } from 'lodash-es'
 import { FormSchema } from '@/types/form'
 
+defineOptions({ name: 'Search' })
+
 const { t } = useI18n()
 
 const props = defineProps({

src/components/Sticky/src/Sticky.vue

@@ -1,8 +1,10 @@
-<script lang="ts" name="Sticky" setup>
+<script lang="ts" setup>
 import { propTypes } from '@/utils/propTypes'
 import { isClient, useEventListener, useWindowSize } from '@vueuse/core'
 import type { CSSProperties } from 'vue'
 
+defineOptions({ name: 'Sticky' })
+
 const props = defineProps({
   // 距离顶部或者底部的距离(单位px)
   offset: propTypes.number.def(0),

src/components/Table/src/Table.vue

@@ -300,12 +300,12 @@ export default defineComponent({
 </script>
 <style lang="scss" scoped>
 :deep(.el-button.is-text) {
-  margin-left: 0;
   padding: 8px 4px;
+  margin-left: 0;
 }
 
 :deep(.el-button.is-link) {
-  margin-left: 0;
   padding: 8px 4px;
+  margin-left: 0;
 }
 </style>

src/components/Tooltip/src/Tooltip.vue

@@ -1,6 +1,8 @@
-<script lang="ts" name="Tooltip" setup>
+<script lang="ts" setup>
 import { propTypes } from '@/utils/propTypes'
 
+defineOptions({ name: 'Tooltip' })
+
 defineProps({
   titel: propTypes.string.def(''),
   message: propTypes.string.def(''),

src/components/UploadFile/src/UploadFile.vue

@@ -32,13 +32,15 @@
     </el-upload>
   </div>
 </template>
-<script setup lang="ts" name="UploadFile">
+<script lang="ts" setup>
 import { PropType } from 'vue'
 
 import { propTypes } from '@/utils/propTypes'
 import { getAccessToken, getTenantId } from '@/utils/auth'
 import type { UploadInstance, UploadUserFile, UploadProps, UploadRawFile } from 'element-plus'
 
+defineOptions({ name: 'UploadFile' })
+
 const message = useMessage() // 消息弹窗
 const emit = defineEmits(['update:modelValue'])
 
@@ -143,21 +145,25 @@ const listToString = (list: UploadUserFile[], separator?: string) => {
 .upload-file-uploader {
   margin-bottom: 5px;
 }
+
 :deep(.upload-file-list .el-upload-list__item) {
-  border: 1px solid #e4e7ed;
-  line-height: 2;
-  margin-bottom: 10px;
   position: relative;
+  margin-bottom: 10px;
+  line-height: 2;
+  border: 1px solid #e4e7ed;
 }
+
 :deep(.el-upload-list__item-file-name) {
   max-width: 250px;
 }
+
 :deep(.upload-file-list .ele-upload-list__item-content) {
   display: flex;
   justify-content: space-between;
   align-items: center;
   color: inherit;
 }
+
 :deep(.ele-upload-list__item-content-action .el-link) {
   margin-right: 10px;
 }

src/components/UploadFile/src/UploadImg.vue

@@ -50,13 +50,15 @@
   </div>
 </template>
 
-<script setup lang="ts" name="UploadImg">
+<script lang="ts" setup>
 import type { UploadProps } from 'element-plus'
 
 import { generateUUID } from '@/utils'
 import { propTypes } from '@/utils/propTypes'
 import { getAccessToken, getTenantId } from '@/utils/auth'
 
+defineOptions({ name: 'UploadImg' })
+
 type FileTypes =
   | 'image/apng'
   | 'image/bmp'
@@ -79,7 +81,7 @@ const props = defineProps({
   fileType: propTypes.array.def(['image/jpeg', 'image/png', 'image/gif']), // 图片类型限制 ==> 非必传（默认为 ["image/jpeg", "image/png", "image/gif"]）
   height: propTypes.string.def('150px'), // 组件高度 ==> 非必传（默认为 150px）
   width: propTypes.string.def('150px'), // 组件宽度 ==> 非必传（默认为 150px）
-  borderRadius: propTypes.string.def('8px') // 组件边框圆角 ==> 非必传（默认为 8px）
+  borderradius: propTypes.string.def('8px') // 组件边框圆角 ==> 非必传（默认为 8px）
 })
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
@@ -130,29 +132,34 @@ const uploadError = () => {
     :deep(.el-upload),
     :deep(.el-upload-dragger) {
       border: 1px dashed var(--el-color-danger) !important;
+
       &:hover {
         border-color: var(--el-color-primary) !important;
       }
     }
   }
 }
+
 :deep(.disabled) {
   .el-upload,
   .el-upload-dragger {
     cursor: not-allowed !important;
     background: var(--el-disabled-bg-color);
     border: 1px dashed var(--el-border-color-darker) !important;
+
     &:hover {
       border: 1px dashed var(--el-border-color-darker) !important;
     }
   }
 }
+
 .upload-box {
   .no-border {
     :deep(.el-upload) {
       border: none !important;
     }
   }
+
   :deep(.upload) {
     .el-upload {
       position: relative;
@@ -163,14 +170,17 @@ const uploadError = () => {
       height: v-bind(height);
       overflow: hidden;
       border: 1px dashed var(--el-border-color-darker);
-      border-radius: v-bind(borderRadius);
+      border-radius: v-bind(borderradius);
       transition: var(--el-transition-duration-fast);
+
       &:hover {
         border-color: var(--el-color-primary);
+
         .upload-handle {
           opacity: 1;
         }
       }
+
       .el-upload-dragger {
         display: flex;
         align-items: center;
@@ -181,20 +191,24 @@ const uploadError = () => {
         overflow: hidden;
         background-color: transparent;
         border: 1px dashed var(--el-border-color-darker);
-        border-radius: v-bind(borderRadius);
+        border-radius: v-bind(borderradius);
+
         &:hover {
           border: 1px dashed var(--el-color-primary);
         }
       }
+
       .el-upload-dragger.is-dragover {
         background-color: var(--el-color-primary-light-9);
         border: 2px dashed var(--el-color-primary) !important;
       }
+
       .upload-image {
         width: 100%;
         height: 100%;
         object-fit: contain;
       }
+
       .upload-empty {
         position: relative;
         display: flex;
@@ -204,25 +218,28 @@ const uploadError = () => {
         font-size: 12px;
         line-height: 30px;
         color: var(--el-color-info);
+
         .el-icon {
           font-size: 28px;
           color: var(--el-text-color-secondary);
         }
       }
+
       .upload-handle {
         position: absolute;
         top: 0;
         right: 0;
-        box-sizing: border-box;
         display: flex;
-        align-items: center;
-        justify-content: center;
         width: 100%;
         height: 100%;
         cursor: pointer;
         background: rgb(0 0 0 / 60%);
         opacity: 0;
+        box-sizing: border-box;
         transition: var(--el-transition-duration-fast);
+        align-items: center;
+        justify-content: center;
+
         .handle-icon {
           display: flex;
           flex-direction: column;
@@ -230,11 +247,13 @@ const uploadError = () => {
           justify-content: center;
           padding: 0 6%;
           color: aliceblue;
+
           .el-icon {
             margin-bottom: 40%;
             font-size: 130%;
             line-height: 130%;
           }
+
           span {
             font-size: 85%;
             line-height: 85%;
@@ -243,6 +262,7 @@ const uploadError = () => {
       }
     }
   }
+
   .el-upload__tip {
     line-height: 18px;
     text-align: center;

src/components/UploadFile/src/UploadImgs.vue

@@ -45,7 +45,7 @@
     />
   </div>
 </template>
-<script lang="ts" name="UploadImgs" setup>
+<script lang="ts" setup>
 import { PropType } from 'vue'
 import type { UploadFile, UploadProps, UploadUserFile } from 'element-plus'
 import { ElNotification } from 'element-plus'
@@ -53,6 +53,8 @@ import { ElNotification } from 'element-plus'
 import { propTypes } from '@/utils/propTypes'
 import { getAccessToken, getTenantId } from '@/utils/auth'
 
+defineOptions({ name: 'UploadImgs' })
+
 const message = useMessage() // 消息弹窗
 
 type FileTypes =
@@ -80,7 +82,7 @@ const props = defineProps({
   fileType: propTypes.array.def(['image/jpeg', 'image/png', 'image/gif']), // 图片类型限制 ==> 非必传（默认为 ["image/jpeg", "image/png", "image/gif"]）
   height: propTypes.string.def('150px'), // 组件高度 ==> 非必传（默认为 150px）
   width: propTypes.string.def('150px'), // 组件宽度 ==> 非必传（默认为 150px）
-  borderRadius: propTypes.string.def('8px') // 组件边框圆角 ==> 非必传（默认为 8px）
+  borderradius: propTypes.string.def('8px') // 组件边框圆角 ==> 非必传（默认为 8px）
 })
 
 const uploadHeaders = ref({
@@ -88,7 +90,7 @@ const uploadHeaders = ref({
   'tenant-id': getTenantId()
 })
 
-const fileList = ref<UploadUserFile[]>()
+const fileList = ref<UploadUserFile[]>([])
 // fix: 改为动态监听赋值解决图片回显问题
 watch(
   () => props.modelValue,
@@ -216,7 +218,7 @@ const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
       padding: 0;
       overflow: hidden;
       border: 1px dashed var(--el-border-color-darker);
-      border-radius: v-bind(borderRadius);
+      border-radius: v-bind(borderradius);
 
       &:hover {
         border: 1px dashed var(--el-color-primary);
@@ -233,7 +235,7 @@ const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
       width: v-bind(width);
       height: v-bind(height);
       background-color: transparent;
-      border-radius: v-bind(borderRadius);
+      border-radius: v-bind(borderradius);
     }
 
     .upload-image {
@@ -246,16 +248,16 @@ const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
       position: absolute;
       top: 0;
       right: 0;
-      box-sizing: border-box;
       display: flex;
-      align-items: center;
-      justify-content: center;
       width: 100%;
       height: 100%;
       cursor: pointer;
       background: rgb(0 0 0 / 60%);
       opacity: 0;
+      box-sizing: border-box;
       transition: var(--el-transition-duration-fast);
+      align-items: center;
+      justify-content: center;
 
       .handle-icon {
         display: flex;

src/components/Verifition/src/Verify/VerifyPoints.vue

@@ -17,7 +17,7 @@
           ref="canvas"
           :src="'data:image/png;base64,' + pointBackImgBase"
           alt=""
-          style="width: 100%; height: 100%; display: block"
+          style="display: block; width: 100%; height: 100%"
           @click="bindingClick ? canvasClick($event) : undefined"
         />
 
@@ -57,7 +57,7 @@
     </div>
   </div>
 </template>
-<script name="VerifyPoints" setup type="text/babel">
+<script type="text/babel" setup>
 /**
  * VerifyPoints
  * @description 点选
@@ -67,6 +67,8 @@ import { aesEncrypt } from './../utils/ase'
 import { getCodeApi, reqCheckApi } from '@/api/login'
 import { getCurrentInstance, nextTick, onMounted, reactive, ref, toRefs } from 'vue'
 
+defineOptions({ name: 'VerifyPoints' })
+
 const props = defineProps({
   //弹出式pop，固定fixed
   mode: {

src/components/Verifition/src/Verify/VerifySlide.vue

@@ -9,7 +9,7 @@
         <img
           :src="'data:image/png;base64,' + backImgBase"
           alt=""
-          style="width: 100%; height: 100%; display: block"
+          style="display: block; width: 100%; height: 100%"
         />
         <div v-show="showRefresh" class="verify-refresh" @click="refresh">
           <i class="iconfont icon-refresh"></i>
@@ -63,7 +63,7 @@
             <img
               :src="'data:image/png;base64,' + blockBackImgBase"
               alt=""
-              style="width: 100%; height: 100%; display: block; -webkit-user-drag: none"
+              style="display: block; width: 100%; height: 100%; -webkit-user-drag: none"
             />
           </div>
         </div>
@@ -71,7 +71,7 @@
     </div>
   </div>
 </template>
-<script name="VerifySlide" setup type="text/babel">
+<script type="text/babel" setup>
 /**
  * VerifySlide
  * @description 滑块
@@ -80,6 +80,8 @@ import { aesEncrypt } from './../utils/ase'
 import { resetSize } from './../utils/util'
 import { getCodeApi, reqCheckApi } from '@/api/login'
 
+defineOptions({ name: 'VerifySlide' })
+
 const props = defineProps({
   captchaType: {
     type: String

src/components/XButton/src/XButton.vue

@@ -1,7 +1,9 @@
-<script lang="ts" name="XButton" setup>
+<script lang="ts" setup>
 import { PropType } from 'vue'
 import { propTypes } from '@/utils/propTypes'
 
+defineOptions({ name: 'XButton' })
+
 const props = defineProps({
   modelValue: propTypes.bool.def(false),
   loading: propTypes.bool.def(false),
@@ -37,12 +39,12 @@ const getBindValue = computed(() => {
 </template>
 <style lang="scss" scoped>
 :deep(.el-button.is-text) {
-  margin-left: 0;
   padding: 8px 4px;
+  margin-left: 0;
 }
 
 :deep(.el-button.is-link) {
-  margin-left: 0;
   padding: 8px 4px;
+  margin-left: 0;
 }
 </style>

src/components/XButton/src/XTextButton.vue

@@ -1,7 +1,9 @@
-<script lang="ts" name="XTextButton" setup>
+<script lang="ts" setup>
 import { propTypes } from '@/utils/propTypes'
 import { PropType } from 'vue'
 
+defineOptions({ name: 'XTextButton' })
+
 const props = defineProps({
   modelValue: propTypes.bool.def(false),
   loading: propTypes.bool.def(false),
@@ -36,12 +38,12 @@ const getBindValue = computed(() => {
 </template>
 <style lang="scss" scoped>
 :deep(.el-button.is-text) {
-  margin-left: 0;
   padding: 8px 4px;
+  margin-left: 0;
 }
 
 :deep(.el-button.is-link) {
-  margin-left: 0;
   padding: 8px 4px;
+  margin-left: 0;
 }
 </style>

src/components/XModal/src/XModal.vue

@@ -1,5 +1,8 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import { propTypes } from '@/utils/propTypes'
+
+defineOptions({ name: 'XModal' })
+
 const slots = useSlots()
 
 const props = defineProps({

src/components/XTable/src/XTable.vue

@@ -5,7 +5,7 @@
     </template>
   </VxeGrid>
 </template>
-<script setup lang="ts" name="XTable">
+<script lang="ts" setup>
 import { PropType } from 'vue'
 import { SizeType, VxeGridInstance } from 'vxe-table'
 import { useAppStore } from '@/store/modules/app'
@@ -15,6 +15,8 @@ import { isBoolean, isFunction } from '@/utils/is'
 import styleCss from './style/dark.scss?inline'
 import download from '@/utils/download'
 
+defineOptions({ name: 'XTable' })
+
 const { t } = useI18n()
 const message = useMessage() // 消息弹窗
 

src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="my-process-designer">
-    <div class="my-process-designer__header" style="display: table-row-group; z-index: 999">
+    <div class="my-process-designer__header" style="z-index: 999; display: table-row-group">
       <slot name="control-header"></slot>
       <template v-if="!$slots['control-header']">
         <ElButtonGroup key="file-control">
@@ -203,7 +203,7 @@
   </div>
 </template>
 
-<script setup lang="ts" name="MyProcessDesigner">
+<script lang="ts" setup>
 // import 'bpmn-js/dist/assets/diagram-js.css' // 左边工具栏以及编辑节点的样式
 // import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
 // import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
@@ -233,6 +233,9 @@ import flowableModdleExtension from './plugins/extension-moddle/flowable'
 // import xml2js from 'xml-js'
 // import xml2js from 'fast-xml-parser'
 import { XmlNode, XmlNodeType, parseXmlString } from 'steady-xml'
+
+defineOptions({ name: 'MyProcessDesigner' })
+
 const bpmnCanvas = ref()
 const refFile = ref()
 const emit = defineEmits([

src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue

@@ -6,11 +6,14 @@
   </div>
 </template>
 
-<script setup lang="ts" name="MyProcessViewer">
+<script lang="ts" setup>
 import BpmnViewer from 'bpmn-js/lib/Viewer'
 import DefaultEmptyXML from './plugins/defaultEmpty'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { formatDate } from '@/utils/formatTime'
+
+defineOptions({ name: 'MyProcessViewer' })
+
 const props = defineProps({
   value: {
     // BPMN XML 字符串
@@ -562,11 +565,11 @@ watch(
 }
 
 .element-overlays {
-  box-sizing: border-box;
+  width: 200px;
   padding: 8px;
+  color: #fafafa;
   background: rgb(0 0 0 / 60%);
   border-radius: 4px;
-  color: #fafafa;
+  box-sizing: border-box;
-  width: 200px;
 }
 </style>

src/components/bpmnProcessDesigner/package/palette/ProcessPalette.vue

@@ -5,9 +5,11 @@
   </div>
 </template>
 
-<script setup lang="ts" name="MyProcessPalette">
+<script lang="ts" setup>
 import { assign } from 'min-dash'
 
+defineOptions({ name: 'MyProcessPalette' })
+
 const bpmnInstances = () => (window as any).bpmnInstances
 const addTask = (event, options: any = {}) => {
   const ElementFactory = bpmnInstances().elementFactory
@@ -29,15 +31,15 @@ const addTask = (event, options: any = {}) => {
 
 <style scoped lang="scss">
 .my-process-palette {
-  box-sizing: border-box;
   padding: 80px 20px 20px;
+  box-sizing: border-box;
 
   .test-button {
-    box-sizing: border-box;
     padding: 8px 16px;
-    border-radius: 4px;
-    border: 1px solid rgb(24 144 255 / 80%);
     cursor: pointer;
+    border: 1px solid rgb(24 144 255 / 80%);
+    border-radius: 4px;
+    box-sizing: border-box;
   }
 }
 </style>

src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue

@@ -62,7 +62,7 @@
     </el-collapse>
   </div>
 </template>
-<script setup lang="ts" name="MyPropertiesPanel">
+<script lang="ts" setup>
 import ElementBaseInfo from './base/ElementBaseInfo.vue'
 import ElementOtherConfig from './other/ElementOtherConfig.vue'
 import ElementTask from './task/ElementTask.vue'
@@ -73,6 +73,9 @@ import ElementListeners from './listeners/ElementListeners.vue'
 import ElementProperties from './properties/ElementProperties.vue'
 // import ElementForm from './form/ElementForm.vue'
 import UserTaskListeners from './listeners/UserTaskListeners.vue'
+
+defineOptions({ name: 'MyPropertiesPanel' })
+
 /**
  * 侧边栏
  * @Author MiyueFE

src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue

@@ -7,8 +7,9 @@
           href="https://doc.iocoder.cn/bpm/#_3-%E6%B5%81%E7%A8%8B%E5%9B%BE%E7%A4%BA%E4%BE%8B"
           type="danger"
           target="_blank"
-          >如何实现实现会签、或签？</el-link
         >
+          如何实现实现会签、或签？
+        </el-link>
         <el-form-item label="流程标识" prop="id">
           <el-input
             v-model="needProps.id"
@@ -37,7 +38,9 @@
     </el-form>
   </div>
 </template>
-<script setup lang="ts" name="ElementBaseInfo">
+<script lang="ts" setup>
+defineOptions({ name: 'ElementBaseInfo' })
+
 const props = defineProps({
   businessObject: {
     type: Object,

src/components/bpmnProcessDesigner/package/penal/flow-condition/FlowCondition.vue

@@ -62,7 +62,9 @@
   </div>
 </template>
 
-<script setup lang="ts" name="FlowCondition">
+<script lang="ts" setup>
+defineOptions({ name: 'FlowCondition' })
+
 const props = defineProps({
   businessObject: Object,
   type: String

src/components/bpmnProcessDesigner/package/penal/form/ElementForm.vue

@@ -222,7 +222,9 @@
   </div>
 </template>
 
-<script setup lang="ts" name="ElementForm">
+<script lang="ts" setup>
+defineOptions({ name: 'ElementForm' })
+
 const props = defineProps({
   id: String,
   type: String

src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue

@@ -241,10 +241,13 @@
     </el-dialog>
   </div>
 </template>
-<script setup lang="ts" name="ElementListeners">
+<script lang="ts" setup>
 import { ElMessageBox } from 'element-plus'
 import { createListenerObject, updateElementExtensions } from '../../utils'
 import { initListenerType, initListenerForm, listenerType, fieldType } from './utilSelf'
+
+defineOptions({ name: 'ElementListeners' })
+
 const props = defineProps({
   id: String,
   type: String

src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue

@@ -287,10 +287,13 @@
     </el-dialog>
   </div>
 </template>
-<script setup lang="ts" name="UserTaskListeners">
+<script lang="ts" setup>
 import { ElMessageBox } from 'element-plus'
 import { createListenerObject, updateElementExtensions } from '../../utils'
 import { initListenerForm, initListenerType, eventType, listenerType, fieldType } from './utilSelf'
+
+defineOptions({ name: 'UserTaskListeners' })
+
 const props = defineProps({
   id: String,
   type: String

src/components/bpmnProcessDesigner/package/penal/multi-instance/ElementMultiInstance.vue

@@ -66,7 +66,9 @@
   </div>
 </template>
 
-<script setup lang="ts" name="ElementMultiInstance">
+<script lang="ts" setup>
+defineOptions({ name: 'ElementMultiInstance' })
+
 const props = defineProps({
   businessObject: Object,
   type: String

src/components/bpmnProcessDesigner/package/penal/other/ElementOtherConfig.vue

@@ -16,7 +16,9 @@
   </div>
 </template>
 
-<script setup lang="ts" name="ElementOtherConfig">
+<script lang="ts" setup>
+defineOptions({ name: 'ElementOtherConfig' })
+
 const props = defineProps({
   id: String
 })

src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue

@@ -6,17 +6,18 @@
       <el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />
       <el-table-column label="操作" width="110px">
         <template #default="scope">
-          <el-button link @click="openAttributesForm(scope.row, scope.$index)" size="small"
+          <el-button link @click="openAttributesForm(scope.row, scope.$index)" size="small">
-            >编辑</el-button
+            编辑
-          >
+          </el-button>
           <el-divider direction="vertical" />
           <el-button
             link
             size="small"
             style="color: #ff4d4f"
             @click="removeAttributes(scope.row, scope.$index)"
-            >移除</el-button
           >
+            移除
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -52,8 +53,11 @@
   </div>
 </template>
 
-<script setup lang="ts" name="ElementProperties">
+<script lang="ts" setup>
 import { ElMessageBox } from 'element-plus'
+
+defineOptions({ name: 'ElementProperties' })
+
 const props = defineProps({
   id: String,
   type: String

src/components/bpmnProcessDesigner/package/penal/signal-message/SignalAndMessage.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="panel-tab__content">
     <div class="panel-tab__content--title">
-      <span><Icon icon="ep:menu" style="margin-right: 8px; color: #555555" />消息列表</span>
+      <span><Icon icon="ep:menu" style="margin-right: 8px; color: #555" />消息列表</span>
       <XButton type="primary" title="创建新消息" preIcon="ep:plus" @click="openModel('message')" />
     </div>
     <el-table :data="messageList" border>
@@ -11,9 +11,9 @@
     </el-table>
     <div
       class="panel-tab__content--title"
-      style="padding-top: 8px; margin-top: 8px; border-top: 1px solid #eeeeee"
+      style="padding-top: 8px; margin-top: 8px; border-top: 1px solid #eee"
     >
-      <span><Icon icon="ep:menu" style="margin-right: 8px; color: #555555" />信号列表</span>
+      <span><Icon icon="ep:menu" style="margin-right: 8px; color: #555" />信号列表</span>
       <XButton type="primary" title="创建新信号" preIcon="ep:plus" @click="openModel('signal')" />
     </div>
     <el-table :data="signalList" border>
@@ -45,7 +45,9 @@
     </el-dialog>
   </div>
 </template>
-<script setup lang="ts" name="SignalAndMassage">
+<script lang="ts" setup>
+defineOptions({ name: 'SignalAndMassage' })
+
 const message = useMessage()
 const signalList = ref<any[]>([])
 const messageList = ref<any[]>([])

src/components/bpmnProcessDesigner/package/penal/task/ElementTask.vue

@@ -20,11 +20,13 @@
   </div>
 </template>
 
-<script setup lang="ts" name="ElementTaskConfig">
+<script lang="ts" setup>
 import UserTask from './task-components/UserTask.vue'
 import ScriptTask from './task-components/ScriptTask.vue'
 import ReceiveTask from './task-components/ReceiveTask.vue'
 
+defineOptions({ name: 'ElementTaskConfig' })
+
 const props = defineProps({
   id: String,
   type: String

src/components/bpmnProcessDesigner/package/penal/task/task-components/ReceiveTask.vue

@@ -48,7 +48,9 @@
   </div>
 </template>
 
-<script setup lang="ts" name="ReceiveTask">
+<script lang="ts" setup>
+defineOptions({ name: 'ReceiveTask' })
+
 const props = defineProps({
   id: String,
   type: String

src/components/bpmnProcessDesigner/package/penal/task/task-components/ScriptTask.vue

@@ -44,7 +44,9 @@
   </div>
 </template>
 
-<script setup lang="ts" name="ScriptTask">
+<script lang="ts" setup>
+defineOptions({ name: 'ScriptTask' })
+
 const props = defineProps({
   id: String,
   type: String

src/components/bpmnProcessDesigner/package/penal/task/task-components/UserTask.vue

@@ -37,7 +37,9 @@
   </div>
 </template>
 
-<script setup lang="ts" name="UserTask">
+<script lang="ts" setup>
+defineOptions({ name: 'UserTask' })
+
 const props = defineProps({
   id: String,
   type: String

src/layout/components/AppView.vue

@@ -1,8 +1,10 @@
-<script lang="ts" name="AppView" setup>
+<script lang="ts" setup>
 import { useTagsViewStore } from '@/store/modules/tagsView'
 import { useAppStore } from '@/store/modules/app'
 import { Footer } from '@/layout/components/Footer'
 
+defineOptions({ name: 'AppView' })
+
 const appStore = useAppStore()
 
 const layout = computed(() => appStore.getLayout)

src/layout/components/Collapse/src/Collapse.vue

@@ -1,8 +1,10 @@
-<script lang="ts" name="Collapse" setup>
+<script lang="ts" setup>
 import { useAppStore } from '@/store/modules/app'
 import { propTypes } from '@/utils/propTypes'
 import { useDesign } from '@/hooks/web/useDesign'
 
+defineOptions({ name: 'Collapse' })
+
 const { getPrefixCls } = useDesign()
 
 const prefixCls = getPrefixCls('collapse')

src/layout/components/ContextMenu/src/ContextMenu.vue

@@ -1,4 +1,4 @@
-<script lang="ts" name="ContextMenu" setup>
+<script lang="ts" setup>
 import { PropType } from 'vue'
 
 import { useDesign } from '@/hooks/web/useDesign'
@@ -6,6 +6,8 @@ import type { RouteLocationNormalizedLoaded } from 'vue-router'
 import { contextMenuSchema } from '@/types/contextMenu'
 import type { ElDropdown } from 'element-plus'
 
+defineOptions({ name: 'ContextMenu' })
+
 const { getPrefixCls } = useDesign()
 
 const prefixCls = getPrefixCls('context-menu')

src/layout/components/LocaleDropdown/src/LocaleDropdown.vue

@@ -1,9 +1,11 @@
-<script lang="ts" name="LocaleDropdown" setup>
+<script lang="ts" setup>
 import { useLocaleStore } from '@/store/modules/locale'
 import { useLocale } from '@/hooks/web/useLocale'
 import { propTypes } from '@/utils/propTypes'
 import { useDesign } from '@/hooks/web/useDesign'
 
+defineOptions({ name: 'LocaleDropdown' })
+
 const { getPrefixCls } = useDesign()
 
 const prefixCls = getPrefixCls('locale-dropdown')

src/layout/components/Logo/src/Logo.vue

@@ -1,8 +1,10 @@
-<script lang="ts" name="Logo" setup>
+<script lang="ts" setup>
 import { computed, onMounted, ref, unref, watch } from 'vue'
 import { useAppStore } from '@/store/modules/app'
 import { useDesign } from '@/hooks/web/useDesign'
 
+defineOptions({ name: 'Logo' })
+
 const { getPrefixCls } = useDesign()
 
 const prefixCls = getPrefixCls('logo')

src/layout/components/Message/src/Message.vue

@@ -1,7 +1,9 @@
-<script lang="ts" name="Message" setup>
+<script lang="ts" setup>
 import { formatDate } from '@/utils/formatTime'
 import * as NotifyMessageApi from '@/api/system/notify/message'
 
+defineOptions({ name: 'Message' })
+
 const { push } = useRouter()
 const activeName = ref('notice')
 const unreadCount = ref(0) // 未读消息数量
@@ -72,7 +74,7 @@ onUnmounted(() => {
         </ElTabPane>
       </ElTabs>
       <!-- 更多 -->
-      <div style="text-align: right; margin-top: 10px">
+      <div style="margin-top: 10px; text-align: right">
         <XButton preIcon="ep:view" title="查看全部" type="primary" @click="goMyList" />
       </div>
     </ElPopover>

src/layout/components/Screenfull/src/Screenfull.vue

@@ -1,9 +1,11 @@
-<script lang="ts" name="ScreenFull" setup>
+<script lang="ts" setup>
 import { Icon } from '@/components/Icon'
 import { useFullscreen } from '@vueuse/core'
 import { propTypes } from '@/utils/propTypes'
 import { useDesign } from '@/hooks/web/useDesign'
 
+defineOptions({ name: 'ScreenFull' })
+
 const { getPrefixCls } = useDesign()
 
 const prefixCls = getPrefixCls('screenfull')

src/layout/components/Setting/src/Setting.vue

@@ -1,4 +1,4 @@
-<script lang="ts" name="Setting" setup>
+<script lang="ts" setup>
 import { ElMessage } from 'element-plus'
 import { useClipboard, useCssVar } from '@vueuse/core'
 
@@ -13,6 +13,8 @@ import ColorRadioPicker from './components/ColorRadioPicker.vue'
 import InterfaceDisplay from './components/InterfaceDisplay.vue'
 import LayoutRadioPicker from './components/LayoutRadioPicker.vue'
 
+defineOptions({ name: 'Setting' })
+
 const { t } = useI18n()
 const appStore = useAppStore()
 

src/layout/components/Setting/src/components/ColorRadioPicker.vue

@@ -1,8 +1,10 @@
-<script lang="ts" name="ColorRadioPicker" setup>
+<script lang="ts" setup>
 import { PropType } from 'vue'
 import { propTypes } from '@/utils/propTypes'
 import { useDesign } from '@/hooks/web/useDesign'
 
+defineOptions({ name: 'ColorRadioPicker' })
+
 const { getPrefixCls } = useDesign()
 
 const prefixCls = getPrefixCls('color-radio-picker')

src/layout/components/Setting/src/components/InterfaceDisplay.vue

@@ -1,10 +1,12 @@
-<script lang="ts" name="InterfaceDisplay" setup>
+<script lang="ts" setup>
 import { setCssVar } from '@/utils'
 
 import { useDesign } from '@/hooks/web/useDesign'
 import { useWatermark } from '@/hooks/web/useWatermark'
 import { useAppStore } from '@/store/modules/app'
 
+defineOptions({ name: 'InterfaceDisplay' })
+
 const { t } = useI18n()
 const { getPrefixCls } = useDesign()
 const { setWatermark } = useWatermark()

src/layout/components/Setting/src/components/LayoutRadioPicker.vue

@@ -1,7 +1,9 @@
-<script lang="ts" name="LayoutRadioPicker" setup>
+<script lang="ts" setup>
 import { useAppStore } from '@/store/modules/app'
 import { useDesign } from '@/hooks/web/useDesign'
 
+defineOptions({ name: 'LayoutRadioPicker' })
+
 const { getPrefixCls } = useDesign()
 
 const prefixCls = getPrefixCls('layout-radio-picker')
@@ -66,7 +68,7 @@ $prefix-cls: #{$namespace}-layout-radio-picker;
     border: 2px solid #e5e7eb;
     border-radius: 4px;
 
-    &:before {
+    &::before {
       position: absolute;
       top: 0;
       left: 0;
@@ -78,14 +80,14 @@ $prefix-cls: #{$namespace}-layout-radio-picker;
       content: '';
     }
 
-    &:after {
+    &::after {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 25%;
       background-color: #fff;
-      border-radius: 4px 4px 0 4px;
+      border-radius: 4px 4px 0;
       content: '';
     }
   }
@@ -94,7 +96,7 @@ $prefix-cls: #{$namespace}-layout-radio-picker;
     border: 2px solid #e5e7eb;
     border-radius: 4px;
 
-    &:before {
+    &::before {
       position: absolute;
       top: 0;
       left: 0;
@@ -106,7 +108,7 @@ $prefix-cls: #{$namespace}-layout-radio-picker;
       content: '';
     }
 
-    &:after {
+    &::after {
       position: absolute;
       top: 0;
       left: 0;
@@ -122,7 +124,7 @@ $prefix-cls: #{$namespace}-layout-radio-picker;
     border: 2px solid #e5e7eb;
     border-radius: 4px;
 
-    &:before {
+    &::before {
       position: absolute;
       top: 0;
       left: 0;
@@ -139,7 +141,7 @@ $prefix-cls: #{$namespace}-layout-radio-picker;
     border: 2px solid #e5e7eb;
     border-radius: 4px;
 
-    &:before {
+    &::before {
       position: absolute;
       top: 0;
       left: 0;
@@ -151,7 +153,7 @@ $prefix-cls: #{$namespace}-layout-radio-picker;
       content: '';
     }
 
-    &:after {
+    &::after {
       position: absolute;
       top: 0;
       left: 0;

src/layout/components/SizeDropdown/src/SizeDropdown.vue

@@ -1,10 +1,12 @@
-<script lang="ts" name="SizeDropdown" setup>
+<script lang="ts" setup>
 import { useAppStore } from '@/store/modules/app'
 
 import { propTypes } from '@/utils/propTypes'
 import { useDesign } from '@/hooks/web/useDesign'
 import { ElementPlusSize } from '@/types/elementPlus'
 
+defineOptions({ name: 'SizeDropdown' })
+
 const { getPrefixCls } = useDesign()
 
 const prefixCls = getPrefixCls('size-dropdown')

src/layout/components/TagsView/src/TagsView.vue

@@ -1,4 +1,4 @@
-<script lang="ts" name="TagsView" setup>
+<script lang="ts" setup>
 import type { RouteLocationNormalizedLoaded, RouterLinkProps } from 'vue-router'
 import { usePermissionStore } from '@/store/modules/permission'
 import { useTagsViewStore } from '@/store/modules/tagsView'
@@ -11,6 +11,8 @@ import { useTemplateRefsList } from '@vueuse/core'
 import { ElScrollbar } from 'element-plus'
 import { useScrollTo } from '@/hooks/event/useScrollTo'
 
+defineOptions({ name: 'TagsView' })
+
 const { getPrefixCls } = useDesign()
 
 const prefixCls = getPrefixCls('tags-view')

src/layout/components/ThemeSwitch/src/ThemeSwitch.vue

@@ -1,8 +1,10 @@
-<script lang="ts" name="ThemeSwitch" setup>
+<script lang="ts" setup>
 import { useAppStore } from '@/store/modules/app'
 import { useIcon } from '@/hooks/web/useIcon'
 import { useDesign } from '@/hooks/web/useDesign'
 
+defineOptions({ name: 'ThemeSwitch' })
+
 const { getPrefixCls } = useDesign()
 
 const prefixCls = getPrefixCls('theme-switch')

src/layout/components/UserInfo/src/UserInfo.vue

@@ -1,4 +1,4 @@
-<script lang="ts" name="UserInfo" setup>
+<script lang="ts" setup>
 import { ElMessageBox } from 'element-plus'
 
 import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
@@ -7,6 +7,8 @@ import avatarImg from '@/assets/imgs/avatar.gif'
 import { useUserStore } from '@/store/modules/user'
 import { useTagsViewStore } from '@/store/modules/tagsView'
 
+defineOptions({ name: 'UserInfo' })
+
 const { t } = useI18n()
 
 const { wsCache } = useCache()

src/views/Error/403.vue

@@ -1,6 +1,8 @@
 <template>
   <Error type="403" @error-click="push('/')" />
 </template>
-<script lang="ts" name="Error403" setup>
+<script lang="ts" setup>
+defineOptions({ name: 'Error403' })
+
 const { push } = useRouter()
 </script>

src/views/Error/404.vue

@@ -1,6 +1,8 @@
 <template>
   <Error @error-click="push('/')" />
 </template>
-<script lang="ts" name="Error404" setup>
+<script lang="ts" setup>
+defineOptions({ name: 'Error404' })
+
 const { push } = useRouter()
 </script>

src/views/Error/500.vue

@@ -1,6 +1,8 @@
 <template>
   <Error type="500" @error-click="push('/')" />
 </template>
-<script lang="ts" name="Error500" setup>
+<script lang="ts" setup>
+defineOptions({ name: 'Error500' })
+
 const { push } = useRouter()
 </script>

src/views/Home/Index.vue

@@ -160,7 +160,7 @@
     </el-col>
   </el-row>
 </template>
-<script setup lang="ts" name="Home">
+<script lang="ts" setup>
 import { set } from 'lodash-es'
 import { EChartsOption } from 'echarts'
 import { formatTime } from '@/utils'
@@ -171,6 +171,8 @@ import avatarImg from '@/assets/imgs/avatar.gif'
 import type { WorkplaceTotal, Project, Notice, Shortcut } from './types'
 import { pieOptions, barOptions } from './echarts-data'
 
+defineOptions({ name: 'Home' })
+
 const { t } = useI18n()
 const userStore = useUserStore()
 const { setWatermark } = useWatermark()

src/views/Home/Index2.vue

@@ -140,7 +140,7 @@
     </el-col>
   </el-row>
 </template>
-<script lang="ts" name="Home2" setup>
+<script lang="ts" setup>
 import { set } from 'lodash-es'
 import { EChartsOption } from 'echarts'
 
@@ -148,6 +148,8 @@ import { useDesign } from '@/hooks/web/useDesign'
 import type { AnalysisTotalTypes } from './types'
 import { barOptions, lineOptions, pieOptions } from './echarts-data'
 
+defineOptions({ name: 'Home2' })
+
 const { t } = useI18n()
 const loading = ref(true)
 const { getPrefixCls } = useDesign()

src/views/Login/Login.vue

@@ -62,7 +62,7 @@
     </div>
   </div>
 </template>
-<script lang="ts" name="Login" setup>
+<script lang="ts" setup>
 import { underlineToHump } from '@/utils'
 
 import { useDesign } from '@/hooks/web/useDesign'
@@ -72,6 +72,8 @@ import { LocaleDropdown } from '@/layout/components/LocaleDropdown'
 
 import { LoginForm, MobileForm, QrCodeForm, RegisterForm, SSOLoginVue } from './components'
 
+defineOptions({ name: 'Login' })
+
 const { t } = useI18n()
 const appStore = useAppStore()
 const { getPrefixCls } = useDesign()

src/views/Login/components/LoginForm.vue

@@ -9,13 +9,13 @@
     label-width="120px"
     size="large"
   >
-    <el-row style="margin-left: -10px; margin-right: -10px">
+    <el-row style="margin-right: -10px; margin-left: -10px">
-      <el-col :span="24" style="padding-left: 10px; padding-right: 10px">
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item>
           <LoginFormTitle style="width: 100%" />
         </el-form-item>
       </el-col>
-      <el-col :span="24" style="padding-left: 10px; padding-right: 10px">
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item v-if="loginData.tenantEnable === 'true'" prop="tenantName">
           <el-input
             type="primary"
@@ -26,7 +26,7 @@
           />
         </el-form-item>
       </el-col>
-      <el-col :span="24" style="padding-left: 10px; padding-right: 10px">
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item prop="username">
           <el-input
             v-model="loginData.loginForm.username"
@@ -35,7 +35,7 @@
           />
         </el-form-item>
       </el-col>
-      <el-col :span="24" style="padding-left: 10px; padding-right: 10px">
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item prop="password">
           <el-input
             v-model="loginData.loginForm.password"
@@ -49,7 +49,7 @@
       </el-col>
       <el-col
         :span="24"
-        style="padding-left: 10px; padding-right: 10px; margin-top: -20px; margin-bottom: -20px"
+        style="padding-right: 10px; padding-left: 10px; margin-top: -20px; margin-bottom: -20px"
       >
         <el-form-item>
           <el-row justify="space-between" style="width: 100%">
@@ -64,7 +64,7 @@
           </el-row>
         </el-form-item>
       </el-col>
-      <el-col :span="24" style="padding-left: 10px; padding-right: 10px">
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item>
           <XButton
             :loading="loginLoading"
@@ -82,7 +82,7 @@
         mode="pop"
         @success="handleLogin"
       />
-      <el-col :span="24" style="padding-left: 10px; padding-right: 10px">
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item>
           <el-row :gutter="5" justify="space-between" style="width: 100%">
             <el-col :span="8">
@@ -110,7 +110,7 @@
         </el-form-item>
       </el-col>
       <el-divider content-position="center">{{ t('login.otherLogin') }}</el-divider>
-      <el-col :span="24" style="padding-left: 10px; padding-right: 10px">
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item>
           <div class="flex justify-between w-[100%]">
             <Icon
@@ -126,7 +126,7 @@
         </el-form-item>
       </el-col>
       <el-divider content-position="center">萌新必读</el-divider>
-      <el-col :span="24" style="padding-left: 10px; padding-right: 10px">
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item>
           <div class="flex justify-between w-[100%]">
             <el-link href="https://doc.iocoder.cn/" target="_blank">📚开发指南</el-link>
@@ -143,7 +143,7 @@
     </el-row>
   </el-form>
 </template>
-<script lang="ts" name="LoginForm" setup>
+<script lang="ts" setup>
 import { ElLoading } from 'element-plus'
 import LoginFormTitle from './LoginFormTitle.vue'
 import type { RouteLocationNormalizedLoaded } from 'vue-router'
@@ -155,6 +155,8 @@ import { usePermissionStore } from '@/store/modules/permission'
 import * as LoginApi from '@/api/login'
 import { LoginStateEnum, useFormValid, useLoginState } from './useLogin'
 
+defineOptions({ name: 'LoginForm' })
+
 const { t } = useI18n()
 const message = useMessage()
 const iconHouse = useIcon({ icon: 'ep:house' })
@@ -315,16 +317,16 @@ onMounted(() => {
 }
 
 .login-code {
+  float: right;
   width: 100%;
   height: 38px;
-  float: right;
 
   img {
-    cursor: pointer;
     width: 100%;
-    max-width: 100px;
     height: auto;
+    max-width: 100px;
     vertical-align: middle;
+    cursor: pointer;
   }
 }
 </style>

src/views/Login/components/LoginFormTitle.vue

@@ -3,9 +3,11 @@
     {{ getFormTitle }}
   </h2>
 </template>
-<script lang="ts" name="LoginFormTitle" setup>
+<script lang="ts" setup>
 import { LoginStateEnum, useLoginState } from './useLogin'
 
+defineOptions({ name: 'LoginFormTitle' })
+
 const { t } = useI18n()
 
 const { getLoginState } = useLoginState()

src/views/Login/components/MobileForm.vue

@@ -9,14 +9,14 @@
     label-width="120px"
     size="large"
   >
-    <el-row style="margin-left: -10px; margin-right: -10px">
+    <el-row style="margin-right: -10px; margin-left: -10px">
       <!-- 租户名 -->
-      <el-col :span="24" style="padding-left: 10px; padding-right: 10px">
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item>
           <LoginFormTitle style="width: 100%" />
         </el-form-item>
       </el-col>
-      <el-col :span="24" style="padding-left: 10px; padding-right: 10px">
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item v-if="loginData.tenantEnable === 'true'" prop="tenantName">
           <el-input
             type="primary"
@@ -28,7 +28,7 @@
         </el-form-item>
       </el-col>
       <!-- 手机号 -->
-      <el-col :span="24" style="padding-left: 10px; padding-right: 10px">
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item prop="mobileNumber">
           <el-input
             v-model="loginData.loginForm.mobileNumber"
@@ -38,7 +38,7 @@
         </el-form-item>
       </el-col>
       <!-- 验证码 -->
-      <el-col :span="24" style="padding-left: 10px; padding-right: 10px">
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item prop="code">
           <el-row :gutter="5" justify="space-between" style="width: 100%">
             <el-col :span="24">
@@ -68,7 +68,7 @@
         </el-form-item>
       </el-col>
       <!-- 登录按钮 / 返回按钮 -->
-      <el-col :span="24" style="padding-left: 10px; padding-right: 10px">
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item>
           <XButton
             :loading="loginLoading"
@@ -79,7 +79,7 @@
           />
         </el-form-item>
       </el-col>
-      <el-col :span="24" style="padding-left: 10px; padding-right: 10px">
+      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
         <el-form-item>
           <XButton
             :loading="loginLoading"
@@ -92,7 +92,7 @@
     </el-row>
   </el-form>
 </template>
-<script lang="ts" name="MobileForm" setup>
+<script lang="ts" setup>
 import type { RouteLocationNormalizedLoaded } from 'vue-router'
 
 import { useIcon } from '@/hooks/web/useIcon'
@@ -103,6 +103,8 @@ import { getTenantIdByNameApi, sendSmsCodeApi, smsLoginApi } from '@/api/login'
 import LoginFormTitle from './LoginFormTitle.vue'
 import { LoginStateEnum, useFormValid, useLoginState } from './useLogin'
 
+defineOptions({ name: 'MobileForm' })
+
 const { t } = useI18n()
 const message = useMessage()
 const permissionStore = usePermissionStore()

src/views/Login/components/QrCodeForm.vue

@@ -1,27 +1,29 @@
 <template>
-  <el-row v-show="getShow" style="margin-left: -10px; margin-right: -10px">
+  <el-row v-show="getShow" style="margin-right: -10px; margin-left: -10px">
-    <el-col :span="24" style="padding-left: 10px; padding-right: 10px">
+    <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
       <LoginFormTitle style="width: 100%" />
     </el-col>
-    <el-col :span="24" style="padding-left: 10px; padding-right: 10px">
+    <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
       <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">
+    <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
       <div class="w-[100%] mt-15px">
         <XButton :title="t('login.backLogin')" class="w-[100%]" @click="handleBackLogin()" />
       </div>
     </el-col>
   </el-row>
 </template>
-<script lang="ts" name="QrCodeForm" setup>
+<script lang="ts" setup>
 import logoImg from '@/assets/imgs/logo.png'
 
 import LoginFormTitle from './LoginFormTitle.vue'
 import { LoginStateEnum, useLoginState } from './useLogin'
 
+defineOptions({ name: 'QrCodeForm' })
+
 const { t } = useI18n()
 const { handleBackLogin, getLoginState } = useLoginState()
 const getShow = computed(() => unref(getLoginState) === LoginStateEnum.QR_CODE)

src/views/Login/components/RegisterForm.vue

@@ -35,7 +35,7 @@
     </template>
   </Form>
 </template>
-<script lang="ts" name="RegisterForm" setup>
+<script lang="ts" setup>
 import type { FormRules } from 'element-plus'
 
 import { useForm } from '@/hooks/web/useForm'
@@ -44,6 +44,8 @@ import LoginFormTitle from './LoginFormTitle.vue'
 import { LoginStateEnum, useLoginState } from './useLogin'
 import { FormSchema } from '@/types/form'
 
+defineOptions({ name: 'RegisterForm' })
+
 const { t } = useI18n()
 const { required } = useValidator()
 const { register, elFormRef } = useForm()

src/views/Login/components/SSOLogin.vue

@@ -38,11 +38,14 @@
     </div>
   </div>
 </template>
-<script lang="ts" name="SSOLogin" setup>
+<script lang="ts" setup>
 import LoginFormTitle from './LoginFormTitle.vue'
 import * as OAuth2Api from '@/api/login/oauth2'
 import { LoginStateEnum, useLoginState } from './useLogin'
 import type { RouteLocationNormalizedLoaded } from 'vue-router'
+
+defineOptions({ name: 'SSOLogin' })
+
 const route = useRoute() // 路由
 const { currentRoute } = useRouter() // 路由
 const { getLoginState, setLoginState } = useLoginState()

src/views/Profile/Index.vue

@@ -30,8 +30,11 @@
     </el-card>
   </div>
 </template>
-<script setup lang="ts" name="Profile">
+<script lang="ts" setup>
 import { BasicInfo, ProfileUser, ResetPwd, UserSocial } from './components/'
+
+defineOptions({ name: 'Profile' })
+
 const { t } = useI18n()
 
 const activeName = ref('basicInfo')
@@ -54,8 +57,8 @@ const activeName = ref('basicInfo')
 
 .profile-tabs > .el-tabs__content {
   padding: 32px;
-  color: #6b778c;
   font-weight: 600;
+  color: #6b778c;
 }
 
 .el-tabs--left .el-tabs__content {

src/views/Profile/components/BasicInfo.vue

@@ -12,10 +12,8 @@
     <XButton :title="t('common.reset')" type="danger" @click="init()" />
   </div>
 </template>
-<script lang="ts" name="BasicInfo" setup>
+<script lang="ts" setup>
 import type { FormRules } from 'element-plus'
-import { ElMessage } from 'element-plus'
-
 import { FormSchema } from '@/types/form'
 import type { FormExpose } from '@/components/Form'
 import {
@@ -24,7 +22,10 @@ import {
   UserProfileUpdateReqVO
 } from '@/api/system/user/profile'
 
+defineOptions({ name: 'BasicInfo' })
+
 const { t } = useI18n()
+const message = useMessage() // 消息弹窗
 // 表单校验
 const rules = reactive<FormRules>({
   nickname: [{ required: true, message: t('profile.rules.nickname'), trigger: 'blur' }],
@@ -76,7 +77,7 @@ const submit = () => {
     if (valid) {
       const data = unref(formRef)?.formModel as UserProfileUpdateReqVO
       await updateUserProfileApi(data)
-      ElMessage.success(t('common.updateSuccess'))
+      message.success(t('common.updateSuccess'))
       await init()
     }
   })

src/views/Profile/components/ProfileUser.vue

@@ -46,12 +46,14 @@
     </ul>
   </div>
 </template>
-<script lang="ts" name="ProfileUser" setup>
+<script lang="ts" setup>
 import { formatDate } from '@/utils/formatTime'
 import UserAvatar from './UserAvatar.vue'
 
 import { getUserProfileApi, ProfileVO } from '@/api/system/user/profile'
 
+defineOptions({ name: 'ProfileUser' })
+
 const { t } = useI18n()
 const userInfo = ref<ProfileVO>()
 const getUserInfo = async () => {
@@ -65,30 +67,30 @@ onMounted(async () => {
 
 <style scoped>
 .text-center {
-  text-align: center;
   position: relative;
   height: 120px;
+  text-align: center;
 }
 
 .list-group-striped > .list-group-item {
-  border-left: 0;
-  border-right: 0;
-  border-radius: 0;
-  padding-left: 0;
   padding-right: 0;
+  padding-left: 0;
+  border-right: 0;
+  border-left: 0;
+  border-radius: 0;
 }
 
 .list-group {
-  padding-left: 0px;
+  padding-left: 0;
   list-style: none;
 }
 
 .list-group-item {
-  border-bottom: 1px solid #e7eaec;
+  padding: 11px 0;
-  border-top: 1px solid #e7eaec;
   margin-bottom: -1px;
-  padding: 11px 0px;
   font-size: 13px;
+  border-top: 1px solid #e7eaec;
+  border-bottom: 1px solid #e7eaec;
 }
 
 .pull-right {

src/views/Profile/components/ResetPwd.vue

@@ -15,12 +15,14 @@
     </el-form-item>
   </el-form>
 </template>
-<script lang="ts" name="ResetPwd" setup>
+<script lang="ts" setup>
 import type { FormInstance, FormRules } from 'element-plus'
 
 import { InputPassword } from '@/components/InputPassword'
 import { updateUserPwdApi } from '@/api/system/user/profile'
 
+defineOptions({ name: 'ResetPwd' })
+
 const { t } = useI18n()
 const message = useMessage()
 const formRef = ref<FormInstance>()

src/views/Profile/components/UserAvatar.vue

@@ -10,10 +10,12 @@
     />
   </div>
 </template>
-<script lang="ts" name="UserAvatar" setup>
+<script lang="ts" setup>
 import { propTypes } from '@/utils/propTypes'
 import { uploadAvatarApi } from '@/api/system/user/profile'
 
+defineOptions({ name: 'UserAvatar' })
+
 defineProps({
   img: propTypes.string.def('')
 })

src/views/Profile/components/UserSocial.vue

@@ -21,11 +21,13 @@
     </el-table-column>
   </el-table>
 </template>
-<script lang="ts" name="UserSocial" setup>
+<script lang="ts" setup>
 import { SystemUserSocialTypeEnum } from '@/utils/constants'
 import { getUserProfileApi, ProfileVO } from '@/api/system/user/profile'
 import { socialAuthRedirect, socialUnbind } from '@/api/system/user/socialUser'
 
+defineOptions({ name: 'UserSocial' })
+
 const message = useMessage()
 const socialUsers = ref<any[]>([])
 const userInfo = ref<ProfileVO>()

src/views/Redirect/Redirect.vue

@@ -1,7 +1,9 @@
 <template>
   <div></div>
 </template>
-<script setup lang="ts" name="Redirect">
+<script lang="ts" setup>
+defineOptions({ name: 'Redirect' })
+
 const { currentRoute, replace } = useRouter()
 const { params, query } = unref(currentRoute)
 const { path, _redirect_type = 'path' } = params

src/views/bpm/definition/index.vue

@@ -59,7 +59,7 @@
     </XModal>
   </ContentWrap>
 </template>
-<script setup lang="ts" name="BpmProcessDefinition">
+<script lang="ts" setup>
 // 业务相关的 import
 import * as DefinitionApi from '@/api/bpm/definition'
 // import * as ModelApi from '@/api/bpm/model'
@@ -68,6 +68,8 @@ import { setConfAndFields2 } from '@/utils/formCreate'
 import { DICT_TYPE } from '@/utils/dict'
 import { MyProcessViewer } from '@/components/bpmnProcessDesigner/package'
 
+defineOptions({ name: 'BpmProcessDefinition' })
+
 const bpmnXML = ref(null)
 const showBpmnOpen = ref(false)
 const bpmnControlForm = ref({

src/views/bpm/form/formEditor.vue

@@ -52,7 +52,7 @@
     </XModal>
   </ContentWrap>
 </template>
-<script setup lang="ts" name="BpmFormEditor">
+<script lang="ts" setup>
 import { FormInstance } from 'element-plus'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { CommonStatusEnum } from '@/utils/constants'
@@ -61,6 +61,8 @@ import FcDesigner from '@form-create/designer'
 import { encodeConf, encodeFields, setConfAndFields } from '@/utils/formCreate'
 // import { useClipboard } from '@vueuse/core'
 
+defineOptions({ name: 'BpmFormEditor' })
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息
 const { query } = useRoute() // 路由

src/views/bpm/form/index.vue

@@ -43,13 +43,15 @@
   </ContentWrap>
 </template>
 
-<script setup lang="ts" name="BpmForm">
+<script lang="ts" setup>
 // 业务相关的 import
 import * as FormApi from '@/api/bpm/form'
 import { allSchemas } from './form.data'
 // 表单详情相关的变量和 import
 import { setConfAndFields2 } from '@/utils/formCreate'
 
+defineOptions({ name: 'BpmForm' })
+
 const { t } = useI18n() // 国际化
 const { push } = useRouter() // 路由
 

src/views/bpm/group/UserGroupForm.vue

@@ -41,12 +41,14 @@
     </template>
   </Dialog>
 </template>
-<script lang="ts" name="BpmUserGroupForm" setup>
+<script lang="ts" setup>
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { CommonStatusEnum } from '@/utils/constants'
 import * as UserGroupApi from '@/api/bpm/userGroup'
 import * as UserApi from '@/api/system/user'
 
+defineOptions({ name: 'BpmUserGroupForm' })
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 

src/views/bpm/group/index.vue

@@ -85,13 +85,15 @@
   </XModal>
 </template>
 
-<script setup lang="ts" name="BpmUserGroup">
+<script lang="ts" setup>
 // 业务相关的 import
 import * as UserGroupApi from '@/api/bpm/userGroup'
 import { getListSimpleUsersApi, UserVO } from '@/api/system/user'
 import { allSchemas, rules } from './group.data'
 import { FormExpose } from '@/components/Form'
 
+defineOptions({ name: 'BpmUserGroup' })
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 // 列表相关的变量

src/views/bpm/model/index.vue

@@ -316,7 +316,7 @@
   </ContentWrap>
 </template>
 
-<script setup lang="ts" name="BpmModel">
+<script lang="ts" setup>
 // 全局相关的 import
 import { DICT_TYPE, getDictOptions } from '@/utils/dict'
 import { MyProcessViewer } from '@/components/bpmnProcessDesigner/package'
@@ -329,6 +329,8 @@ import * as ModelApi from '@/api/bpm/model'
 import { allSchemas, rules } from './model.data'
 import { setConfAndFields2 } from '@/utils/formCreate'
 
+defineOptions({ name: 'BpmModel' })
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 const router = useRouter() // 路由

src/views/bpm/model/modelEditor.vue

@@ -26,7 +26,7 @@
   </div>
 </template>
 
-<script setup lang="ts" name="BpmModelEditor">
+<script lang="ts" setup>
 import { MyProcessDesigner, MyProcessPenal } from '@/components/bpmnProcessDesigner/package'
 // import { translations } from '@/components/bpmnProcessDesigner/src/translations'
 // 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务）
@@ -38,6 +38,8 @@ import CustomPaletteProvider from '@/components/bpmnProcessDesigner/package/desi
 // import MyProcessPalette from '@/components/bpmnProcessDesigner/package/palette/ProcessPalette.vue'
 import { createModelApi, getModelApi, updateModelApi, ModelVO } from '@/api/bpm/model'
 
+defineOptions({ name: 'BpmModelEditor' })
+
 const router = useRouter()
 const message = useMessage()
 
@@ -198,8 +200,8 @@ const close = () => {
 }
 .process-panel__container {
   position: absolute;
-  right: 0;
   top: 55px;
+  right: 0;
   height: calc(100vh - 84px);
 }
 </style>

src/views/bpm/oa/leave/create.vue

@@ -11,7 +11,7 @@
     />
   </ContentWrap>
 </template>
-<script setup lang="ts" name="BpmOALeaveCreate">
+<script lang="ts" setup>
 import { FormExpose } from '@/components/Form'
 // import XEUtils from 'xe-utils'
 
@@ -19,6 +19,8 @@ import { FormExpose } from '@/components/Form'
 import * as LeaveApi from '@/api/bpm/leave'
 import { rules, allSchemas } from './leave.data'
 
+defineOptions({ name: 'BpmOALeaveCreate' })
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 const { push } = useRouter() // 路由

src/views/bpm/oa/leave/detail.vue

@@ -6,11 +6,14 @@
   </ContentWrap>
 </template>
 
-<script setup lang="ts" name="BpmOALeaveDetail">
+<script lang="ts" setup>
 // 业务相关的 import
 import * as LeaveApi from '@/api/bpm/leave'
 import { allSchemas } from '@/views/bpm/oa/leave/leave.data'
 import { useRouter } from 'vue-router'
+
+defineOptions({ name: 'BpmOALeaveDetail' })
+
 const router = useRouter()
 const { query } = useRoute() // 查询参数
 const message = useMessage() // 消息弹窗

src/views/bpm/oa/leave/index.vue

@@ -23,7 +23,7 @@
   </ContentWrap>
 </template>
 
-<script setup lang="ts" name="BpmOALeave">
+<script lang="ts" setup>
 // 全局相关的 import
 import { ElMessageBox } from 'element-plus'
 // 业务相关的 import
@@ -31,6 +31,8 @@ import { allSchemas } from './leave.data'
 import * as LeaveApi from '@/api/bpm/leave'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 
+defineOptions({ name: 'BpmOALeave' })
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 const { push } = useRouter() // 路由