Merge branch 'master' of https://gitee.com/yudaocode/yudao-ui-admin-vue3 into dev

 Conflicts:

	src/views/infra/build/index.vue

	src/views/mall/product/spu/components/DescriptionForm.vue

	src/views/mall/product/spu/components/OtherSettingsForm.vue

	src/views/mall/product/spu/components/ProductPropertyAddForm.vue

	src/views/mall/product/spu/components/SkuList.vue

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

@@ -11,13 +11,15 @@
     />
   </div>
 </template>
-<script lang="ts" name="CropperAvatar" setup>
+<script lang="ts" setup>
 import { useDesign } from '@/hooks/web/useDesign'
 
 import { propTypes } from '@/utils/propTypes'
 import { useI18n } from 'vue-i18n'
 import CopperModal from './CopperModal.vue'
 
+defineOptions({ name: 'CropperAvatar' })
+
 const props = defineProps({
   width: propTypes.string.def('200px'),
   value: propTypes.string.def(''),
@@ -83,14 +85,14 @@ $prefix-cls: #{$namespace}--cropper-avatar;
   }
 
   &-image-mask {
-    opacity: 0%;
     position: absolute;
     width: inherit;
     height: inherit;
-    border-radius: inherit;
-    border: inherit;
-    background: rgb(0 0 0 / 40%);
     cursor: pointer;
+    background: rgb(0 0 0 / 40%);
+    border: inherit;
+    border-radius: inherit;
+    opacity: 0;
     transition: opacity 0.4s;
 
     ::v-deep(svg) {
@@ -99,7 +101,7 @@ $prefix-cls: #{$namespace}--cropper-avatar;
   }
 
   &-image-mask:hover {
-    opacity: 4000%;
+    opacity: 40;
   }
 
   &-upload-btn {
@@ -121,21 +123,18 @@ $prefix-cls: #{$namespace}--cropper-avatar;
   height: 120px;
 }
 
-.user-info-head:hover:after {
-  content: '+';
+.user-info-head:hover::after {
   position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  color: #eee;
-  background: rgba(0, 0, 0, 0.5);
+  inset: 0;
   font-size: 24px;
-  font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  cursor: pointer;
+  font-style: normal;
   line-height: 110px;
+  color: #eee;
+  cursor: pointer;
+  background: rgb(0 0 0 / 50%);
   border-radius: 50%;
+  content: '+';
 }
 </style>

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/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 setup lang="tsx">
 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/Form/src/Form.vue

@@ -27,6 +27,7 @@ const { getPrefixCls } = useDesign()
 const prefixCls = getPrefixCls('form')
 
 export default defineComponent({
+  // eslint-disable-next-line vue/no-reserved-component-names
   name: 'Form',
   props: {
     // 生成Form的布局结构数组

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/Pagination/index.vue

@@ -14,9 +14,11 @@
     @current-change="handleCurrentChange"
   />
 </template>
-<script name="Pagination" setup>
+<script lang="ts" setup>
 import { computed } from 'vue'
 
+defineOptions({ name: 'Pagination' })
+
 const props = defineProps({
   // 总条目数
   total: {

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

@@ -9,6 +9,7 @@ import { set } from 'lodash-es'
 import { Pagination, TableColumn, TableSetPropsType, TableSlotDefault } from '@/types/table'
 
 export default defineComponent({
+  // eslint-disable-next-line vue/no-reserved-component-names
   name: 'Table',
   props: {
     pageSize: propTypes.number.def(10),
@@ -302,6 +303,7 @@ export default defineComponent({
   margin-left: 0;
   padding: 8px 4px;
 }
+
 :deep(.el-button.is-link) {
   margin-left: 0;
   padding: 8px 4px;

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;
 }
+
 :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,11 +218,13 @@ 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;
@@ -223,6 +239,7 @@ const uploadError = () => {
         background: rgb(0 0 0 / 60%);
         opacity: 0;
         transition: var(--el-transition-duration-fast);
+
         .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 {

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

@@ -57,7 +57,7 @@
     </div>
   </div>
 </template>
-<script name="VerifyPoints" setup type="text/babel">
+<script setup type="text/babel">
 /**
  * VerifyPoints
  * @description 点选

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

@@ -71,7 +71,7 @@
     </div>
   </div>
 </template>
-<script name="VerifySlide" setup type="text/babel">
+<script setup type="text/babel">
 /**
  * VerifySlide
  * @description 滑块

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),

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),

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

@@ -206,7 +206,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'
@@ -244,6 +244,9 @@ import { XmlNode, XmlNodeType, parseXmlString } from 'steady-xml'
 // const eventName = reactive({
 //   name: ''
 // })
+
+defineOptions({ name: 'MyProcessDesigner' })
+
 const bpmnCanvas = ref()
 const refFile = ref()
 const emit = defineEmits([

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

@@ -6,10 +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 字符串
@@ -403,6 +407,7 @@ watch(
   stroke-dasharray: 4px !important;
   fill-opacity: 0.2 !important;
 }
+
 .highlight-todo.djs-shape .djs-visual > :nth-child(1) {
   fill: #1890ff !important;
   stroke: #1890ff !important;
@@ -414,8 +419,9 @@ watch(
   stroke: #1890ff !important;
   stroke-dasharray: 4px !important;
   fill-opacity: 0.2 !important;
-  marker-end: url(#sequenceflow-end-_E7DFDF-_E7DFDF-803g1kf6zwzmcig1y2ulm5egr);
+  marker-end: url('#sequenceflow-end-_E7DFDF-_E7DFDF-803g1kf6zwzmcig1y2ulm5egr');
 }
+
 :deep(.highlight-todo.djs-shape .djs-visual > :nth-child(1)) {
   fill: #1890ff !important;
   stroke: #1890ff !important;
@@ -429,14 +435,17 @@ watch(
   stroke: green !important;
   fill-opacity: 0.2 !important;
 }
+
 .highlight.djs-shape .djs-visual > :nth-child(2) {
   fill: green !important;
 }
+
 .highlight.djs-shape .djs-visual > path {
   fill: green !important;
   fill-opacity: 0.2 !important;
   stroke: green !important;
 }
+
 .highlight.djs-connection > .djs-visual > path {
   stroke: green !important;
 }
@@ -450,14 +459,17 @@ watch(
   stroke: green !important;
   fill-opacity: 0.2 !important;
 }
+
 :deep(.highlight.djs-shape .djs-visual > :nth-child(2)) {
   fill: green !important;
 }
+
 :deep(.highlight.djs-shape .djs-visual > path) {
   fill: green !important;
   fill-opacity: 0.2 !important;
   stroke: green !important;
 }
+
 :deep(.highlight.djs-connection > .djs-visual > path) {
   stroke: green !important;
 }
@@ -468,14 +480,17 @@ watch(
   stroke: red !important;
   fill-opacity: 0.2 !important;
 }
+
 .highlight-reject.djs-shape .djs-visual > :nth-child(2) {
   fill: red !important;
 }
+
 .highlight-reject.djs-shape .djs-visual > path {
   fill: red !important;
   fill-opacity: 0.2 !important;
   stroke: red !important;
 }
+
 .highlight-reject.djs-connection > .djs-visual > path {
   stroke: red !important;
 }
@@ -489,14 +504,17 @@ watch(
   stroke: red !important;
   fill-opacity: 0.2 !important;
 }
+
 :deep(.highlight-reject.djs-shape .djs-visual > :nth-child(2)) {
   fill: red !important;
 }
+
 :deep(.highlight-reject.djs-shape .djs-visual > path) {
   fill: red !important;
   fill-opacity: 0.2 !important;
   stroke: red !important;
 }
+
 :deep(.highlight-reject.djs-connection > .djs-visual > path) {
   stroke: red !important;
 }
@@ -507,14 +525,17 @@ watch(
   stroke: grey !important;
   fill-opacity: 0.2 !important;
 }
+
 .highlight-cancel.djs-shape .djs-visual > :nth-child(2) {
   fill: grey !important;
 }
+
 .highlight-cancel.djs-shape .djs-visual > path {
   fill: grey !important;
   fill-opacity: 0.2 !important;
   stroke: grey !important;
 }
+
 .highlight-cancel.djs-connection > .djs-visual > path {
   stroke: grey !important;
 }
@@ -528,14 +549,17 @@ watch(
   stroke: grey !important;
   fill-opacity: 0.2 !important;
 }
+
 :deep(.highlight-cancel.djs-shape .djs-visual > :nth-child(2)) {
   fill: grey !important;
 }
+
 :deep(.highlight-cancel.djs-shape .djs-visual > path) {
   fill: grey !important;
   fill-opacity: 0.2 !important;
   stroke: grey !important;
 }
+
 :deep(.highlight-cancel.djs-connection > .djs-visual > path) {
   stroke: grey !important;
 }
@@ -543,7 +567,7 @@ watch(
 .element-overlays {
   box-sizing: border-box;
   padding: 8px;
-  background: rgba(0, 0, 0, 0.6);
+  background: rgb(0 0 0 / 60%);
   border-radius: 4px;
   color: #fafafa;
   width: 200px;

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
@@ -30,12 +32,13 @@ const addTask = (event, options: any = {}) => {
 <style scoped lang="scss">
 .my-process-palette {
   box-sizing: border-box;
-  padding: 80px 20px 20px 20px;
+  padding: 80px 20px 20px;
+
   .test-button {
     box-sizing: border-box;
     padding: 8px 16px;
     border-radius: 4px;
-    border: 1px solid rgba(24, 144, 255, 0.8);
+    border: 1px solid rgb(24 144 255 / 80%);
     cursor: pointer;
   }
 }

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,8 @@
   </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
-          >
+          <el-button link @click="openAttributesForm(scope.row, scope.$index)" size="small">
+            编辑
+          </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,9 @@
   </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,8 @@
   </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,8 @@
   </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,8 @@
   </div>
 </template>
 
-<script setup lang="ts" name="UserTask">
+<script lang="ts" setup>
+defineOptions({ name: 'UserTask' })
 const props = defineProps({
   id: String,
   type: String