feat: 适配 vue 3.3 defineOptions

build/vite/plugin/index.ts

@@ -5,7 +5,6 @@ import windiCSS from 'vite-plugin-windicss'
 import progress from 'vite-plugin-progress'
 import purgeIcons from 'vite-plugin-purge-icons'
 import VitePluginCertificate from 'vite-plugin-mkcert'
-import vueSetupExtend from 'unplugin-vue-setup-extend-plus/vite'
 import { configPwaConfig } from './pwa'
 import { configHtmlPlugin } from './html'
 import { configCompressPlugin } from './compress'
@@ -24,8 +23,6 @@ export async function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
     vueJsx(),
     // 打包进度条
     progress(),
-    // support name
-    vueSetupExtend({}),
     VitePluginCertificate({
       source: 'coding'
     })

src/components/Button/src/BasicButton.vue

@@ -7,13 +7,15 @@
     </template>
   </Button>
 </template>
-<script lang="ts" setup name="AButton" extends="Button" indeterminate="false">
+<script lang="ts" setup extends="Button">
 import { Button } from 'ant-design-vue'
 import { computed, unref } from 'vue'
 import { Icon } from '@/components/Icon'
 import { buttonProps } from './props'
 import { useAttrs } from '@/hooks/core/useAttrs'
 
+defineOptions({ name: 'AButton', indeterminate: false })
+
 const props = defineProps(buttonProps)
 // get component class
 const attrs = useAttrs({ excludeDefaultKeys: false })

src/components/Container/src/LazyContainer.vue

@@ -9,12 +9,14 @@
     </div>
   </transition-group>
 </template>
-<script lang="ts" setup name="LazyContainer" inheritAttrs="false">
+<script lang="ts" setup>
 import { reactive, onMounted, ref, toRef } from 'vue'
 import { Skeleton } from 'ant-design-vue'
 import { useTimeoutFn } from '@vueuse/core'
 import { useIntersectionObserver } from '@/hooks/event/useIntersectionObserver'
 
+defineOptions({ name: 'LazyContainer', inheritAttrs: false })
+
 interface State {
   isInit: boolean
   loading: boolean

src/components/Container/src/ScrollContainer.vue

@@ -4,11 +4,13 @@
   </Scrollbar>
 </template>
 
-<script lang="ts" setup name="ScrollContainer">
+<script lang="ts" setup>
 import { ref, unref, nextTick } from 'vue'
 import { Scrollbar, ScrollbarType } from '@/components/Scrollbar'
 import { useScrollTo } from '@/hooks/event/useScrollTo'
 
+defineOptions({ name: 'ScrollContainer' })
+
 const scrollbarRef = ref<Nullable<ScrollbarType>>(null)
 
 /**

src/components/CountDown/src/CountButton.vue

@@ -3,13 +3,15 @@
     {{ getButtonText }}
   </Button>
 </template>
-<script lang="ts" setup name="CountButton">
+<script lang="ts" setup>
 import { ref, watchEffect, computed, unref } from 'vue'
 import { Button } from 'ant-design-vue'
 import { useCountdown } from './useCountdown'
 import { isFunction } from '@/utils/is'
 import { useI18n } from '@/hooks/web/useI18n'
 
+defineOptions({ name: 'CountButton' })
+
 const props = defineProps({
   value: { type: [Object, Number, String, Array] },
   count: { type: Number, default: 60 },

src/components/CountDown/src/CountdownInput.vue

@@ -8,10 +8,13 @@
     </template>
   </a-input>
 </template>
-<script lang="ts" setup name="CountDownInput" inheritAttrs="false">
+<script lang="ts" setup>
 import CountButton from './CountButton.vue'
 import { useDesign } from '@/hooks/web/useDesign'
 import { useRuleFormItem } from '@/hooks/component/useFormItem'
+
+defineOptions({ name: 'CountDownInput', inheritAttrs: false })
+
 const props = defineProps({
   value: { type: String },
   size: { type: String, validator: (v: string) => ['default', 'large', 'small'].includes(v) },
@@ -21,6 +24,7 @@ const props = defineProps({
     default: null
   }
 })
+
 const { prefixCls } = useDesign('countdown-input')
 const [state] = useRuleFormItem(props)
 </script>

src/components/CountTo/src/CountTo.vue

@@ -3,11 +3,13 @@
     {{ value }}
   </span>
 </template>
-<script lang="ts" setup name="CountTo">
+<script lang="ts" setup>
 import { ref, computed, watchEffect, unref, onMounted, watch } from 'vue'
 import { useTransition, TransitionPresets } from '@vueuse/core'
 import { isNumber } from '@/utils/is'
 
+defineOptions({ name: 'CountTo' })
+
 const emit = defineEmits(['onStarted', 'onFinished'])
 
 const props = defineProps({

src/components/Cropper/src/CopperModal.vue

@@ -91,7 +91,7 @@
     </div>
   </BasicModal>
 </template>
-<script lang="ts" setup name="CropperModal">
+<script lang="ts" setup>
 import type { CropendResult, Cropper } from './typing'
 import { ref } from 'vue'
 import CropperImage from './Cropper.vue'
@@ -102,6 +102,8 @@ import { dataURLtoBlob } from '@/utils/file/base64Conver'
 import { isFunction } from '@/utils/is'
 import { useI18n } from '@/hooks/web/useI18n'
 
+defineOptions({ name: 'CropperModal' })
+
 type apiFunParams = { file: Blob; name: string; filename: string }
 
 const emit = defineEmits(['uploadSuccess', 'register'])

src/components/Cropper/src/Cropper.vue

@@ -3,7 +3,7 @@
     <img v-show="isReady" ref="imgElRef" :src="src" :alt="alt" :crossorigin="crossorigin" :style="getImageStyle" />
   </div>
 </template>
-<script lang="ts" setup name="CropperImage">
+<script lang="ts" setup>
 import { CSSProperties, useAttrs } from 'vue'
 import { onMounted, ref, unref, computed, onUnmounted } from 'vue'
 import Cropper from 'cropperjs'
@@ -11,6 +11,8 @@ import 'cropperjs/dist/cropper.css'
 import { useDesign } from '@/hooks/web/useDesign'
 import { useDebounceFn } from '@vueuse/core'
 
+defineOptions({ name: 'CropperImage' })
+
 const emit = defineEmits(['cropend', 'ready', 'cropendError'])
 const attrs = useAttrs()
 

src/components/Cropper/src/CropperAvatar.vue

@@ -13,7 +13,7 @@
     <CopperModal @register="register" @upload-success="handleUploadSuccess" :uploadApi="uploadApi" :src="sourceValue" />
   </div>
 </template>
-<script lang="ts" setup name="CropperAvatar">
+<script lang="ts" setup>
 import { computed, CSSProperties, unref, ref, watchEffect, watch } from 'vue'
 import CopperModal from './CopperModal.vue'
 import { useDesign } from '@/hooks/web/useDesign'
@@ -23,6 +23,8 @@ import { useI18n } from '@/hooks/web/useI18n'
 import type { ButtonProps } from '@/components/Button'
 import { Icon } from '@/components/Icon'
 
+defineOptions({ name: 'CropperAvatar' })
+
 const emit = defineEmits(['update:value', 'change'])
 
 const props = defineProps({

src/components/Drawer/src/components/DrawerFooter.vue

@@ -17,12 +17,14 @@
     </template>
   </div>
 </template>
-<script lang="ts" setup name="BasicDrawerFooter">
+<script lang="ts" setup>
 import type { CSSProperties } from 'vue'
 import { computed } from 'vue'
 import { useDesign } from '@/hooks/web/useDesign'
 import { footerProps } from '../props'
 
+defineOptions({ name: 'BasicDrawerFooter' })
+
 const props = defineProps({
   ...footerProps,
   height: {

src/components/Drawer/src/components/DrawerHeader.vue

@@ -17,12 +17,14 @@
     </span>
   </div>
 </template>
-<script lang="ts" setup name="BasicDrawerHeader">
+<script lang="ts" setup>
 import { BasicTitle } from '@/components/Basic'
 import { ArrowLeftOutlined } from '@ant-design/icons-vue'
 import { useDesign } from '@/hooks/web/useDesign'
 import { propTypes } from '@/utils/propTypes'
 
+defineOptions({ name: 'BasicDrawerHeader' })
+
 defineProps({
   isDetail: propTypes.bool,
   showDetailBack: propTypes.bool,

src/components/Excel/src/ImportExcel.vue

@@ -6,12 +6,14 @@
     </div>
   </div>
 </template>
-<script lang="ts" setup name="ImportExcel">
+<script lang="ts" setup>
 import { ref, unref } from 'vue'
 import * as XLSX from 'xlsx'
 import { dateUtil } from '@/utils/dateUtil'
 import type { ExcelData } from './typing'
 
+defineOptions({ name: 'ImportExcel' })
+
 const props = defineProps({
   // 日期时间格式。如果不提供或者提供空值，将返回原始Date对象
   dateFormat: {

src/components/Form/src/BasicForm.vue

@@ -28,7 +28,7 @@
     </Row>
   </Form>
 </template>
-<script lang="ts" setup name="BasicForm">
+<script lang="ts" setup>
 import type { FormActionType, FormProps, FormSchema } from './types/form'
 import type { AdvanceState } from './types/hooks'
 import { Ref, useAttrs } from 'vue'
@@ -56,6 +56,8 @@ import { basicProps } from './props'
 import { useDesign } from '@/hooks/web/useDesign'
 import { cloneDeep } from 'lodash-es'
 
+defineOptions({ name: 'BasicForm' })
+
 const props = defineProps(basicProps)
 const emit = defineEmits(['advanced-change', 'reset', 'submit', 'register', 'field-value-change'])
 const attrs = useAttrs()

src/components/Form/src/components/ApiCascader.vue

@@ -18,7 +18,7 @@
     </template>
   </Cascader>
 </template>
-<script lang="ts" setup name="ApiCascader">
+<script lang="ts" setup>
 import { ref, unref, watch, watchEffect } from 'vue'
 import { Cascader } from 'ant-design-vue'
 import { propTypes } from '@/utils/propTypes'
@@ -28,6 +28,8 @@ import { useRuleFormItem } from '@/hooks/component/useFormItem'
 import { LoadingOutlined } from '@ant-design/icons-vue'
 import { useI18n } from '@/hooks/web/useI18n'
 
+defineOptions({ name: 'ApiCascader' })
+
 interface Option {
   value: string
   label: string

src/components/Form/src/components/ApiRadioGroup.vue

@@ -13,7 +13,7 @@
     </template>
   </RadioGroup>
 </template>
-<script lang="ts" setup name="ApiRadioGroup">
+<script lang="ts" setup>
 import { ref, watchEffect, computed, unref, watch } from 'vue'
 import { Radio } from 'ant-design-vue'
 import { isFunction } from '@/utils/is'
@@ -24,6 +24,8 @@ import { get, omit } from 'lodash-es'
 const RadioButton = Radio.Button
 const RadioGroup = Radio.Group
 
+defineOptions({ name: 'ApiRadioGroup' })
+
 type OptionsItem = { label: string; value: string | number | boolean; disabled?: boolean }
 
 const props = defineProps({

src/components/Form/src/components/ApiSelect.vue

@@ -21,7 +21,7 @@
     </template>
   </Select>
 </template>
-<script lang="ts" setup name="ApiSelect" inheritAttrs="false">
+<script lang="ts" setup>
 import { ref, watchEffect, computed, unref, watch } from 'vue'
 import { Select } from 'ant-design-vue'
 import { isFunction } from '@/utils/is'
@@ -33,6 +33,8 @@ import { useI18n } from '@/hooks/web/useI18n'
 import { propTypes } from '@/utils/propTypes'
 import { SelectValue } from 'ant-design-vue/lib/select'
 
+defineOptions({ name: 'ApiSelect', inheritAttrs: false })
+
 type OptionsItem = { label: string; value: string; disabled?: boolean }
 
 const props = defineProps({

src/components/Form/src/components/ApiTransfer.vue

@@ -11,7 +11,7 @@
     @change="handleChange"
   />
 </template>
-<script lang="ts" setup name="ApiTransfer">
+<script lang="ts" setup>
 import { computed, watch, ref, unref, useAttrs, watchEffect } from 'vue'
 import { Transfer } from 'ant-design-vue'
 import { isFunction } from '@/utils/is'
@@ -19,6 +19,8 @@ import { get, omit } from 'lodash-es'
 import { propTypes } from '@/utils/propTypes'
 import { TransferDirection, TransferItem } from 'ant-design-vue/lib/transfer'
 
+defineOptions({ name: 'ApiTransfer' })
+
 const props = defineProps({
   value: { type: Array as PropType<Array<any>> },
   api: {

src/components/Form/src/components/ApiTree.vue

@@ -8,7 +8,7 @@
     </template>
   </Tree>
 </template>
-<script lang="ts" setup name="ApiTree">
+<script lang="ts" setup>
 import { computed, watch, ref, onMounted, unref, useSlots, useAttrs } from 'vue'
 import { Tree } from 'ant-design-vue'
 import { isArray, isFunction } from '@/utils/is'
@@ -17,6 +17,8 @@ import { propTypes } from '@/utils/propTypes'
 import { LoadingOutlined } from '@ant-design/icons-vue'
 import { handleTree } from '@/utils/tree'
 
+defineOptions({ name: 'ApiTree' })
+
 const props = defineProps({
   api: { type: Function as PropType<(arg?: Recordable) => Promise<Recordable>> },
   params: { type: Object },

src/components/Form/src/components/ApiTreeSelect.vue

@@ -8,7 +8,7 @@
     </template>
   </TreeSelect>
 </template>
-<script lang="ts" setup name="ApiTreeSelect">
+<script lang="ts" setup>
 import { computed, watch, ref, onMounted, unref, useAttrs } from 'vue'
 import { TreeSelect } from 'ant-design-vue'
 import { isArray, isFunction } from '@/utils/is'
@@ -17,6 +17,8 @@ import { propTypes } from '@/utils/propTypes'
 import { LoadingOutlined } from '@ant-design/icons-vue'
 import { handleTree } from '@/utils/tree'
 
+defineOptions({ name: 'ApiTreeSelect' })
+
 const props = defineProps({
   api: { type: Function as PropType<(arg?: Recordable) => Promise<Recordable>> },
   params: { type: Object },

src/components/Form/src/components/FileUpload.vue

@@ -7,7 +7,7 @@
       :fileList="fileList"
       :disabled="disabled"
       v-bind="bindProps"
-      @remove="onRemove"
+      @remove="onRemove as any"
       @change="onFileChange"
       @preview="onFilePreview"
     >
@@ -25,7 +25,7 @@
   </div>
 </template>
 
-<script lang="ts" setup name="FileUpload">
+<script lang="ts" setup>
 import { Upload } from 'ant-design-vue'
 import { ref, reactive, computed, watch, unref } from 'vue'
 import { Icon } from '@/components/Icon'
@@ -37,6 +37,8 @@ import { useAttrs } from '@/hooks/core/useAttrs'
 import { useDesign } from '@/hooks/web/useDesign'
 import { useGlobSetting } from '@/hooks/setting'
 
+defineOptions({ name: 'FileUpload' })
+
 const { createMessage, createConfirm } = useMessage()
 const { prefixCls } = useDesign('upload')
 const attrs = useAttrs()

src/components/Form/src/components/FormAction.vue

@@ -22,7 +22,7 @@
     </div>
   </Col>
 </template>
-<script lang="ts" setup name="BasicFormAction">
+<script lang="ts" setup>
 import type { ColEx } from '../types'
 //import type { ButtonProps } from 'ant-design-vue/es/button/buttonTypes';
 import { computed } from 'vue'
@@ -33,10 +33,12 @@ import { useFormContext } from '../hooks/useFormContext'
 import { useI18n } from '@/hooks/web/useI18n'
 import { propTypes } from '@/utils/propTypes'
 
-type ButtonOptions = Partial<ButtonProps> & { text: string }
-
 const FormItem = Form.Item
 
+defineOptions({ name: 'BasicFormAction' })
+
+type ButtonOptions = Partial<ButtonProps> & { text: string }
+
 const props = defineProps({
   showActionButtonGroup: propTypes.bool.def(true),
   showResetButton: propTypes.bool.def(true),

src/components/Form/src/components/RadioButtonGroup.vue

@@ -10,7 +10,7 @@
     </template>
   </RadioGroup>
 </template>
-<script lang="ts" setup name="RadioButtonGroup">
+<script lang="ts" setup>
 import { computed, ref } from 'vue'
 import { Radio } from 'ant-design-vue'
 import { isString } from '@/utils/is'
@@ -23,6 +23,8 @@ const RadioGroup = Radio.Group
 type OptionsItem = { label: string; value: string | number | boolean; disabled?: boolean }
 type RadioItem = string | OptionsItem
 
+defineOptions({ name: 'RadioButtonGroup' })
+
 const emits = defineEmits(['change'])
 
 const props = defineProps({

src/components/FormDesign/src/components/VFormDesign/components/RuleProps.vue

@@ -20,7 +20,7 @@
     </a>
   </div>
 </template>
-<script lang="ts" setup name="RuleProps">
+<script lang="ts" setup>
 import { ref } from 'vue'
 import { remove } from '../../../utils'
 import { useFormDesignState } from '../../../hooks/useFormDesignState'
@@ -28,6 +28,8 @@ import { isArray } from 'lodash-es'
 import { Form, FormItem, AutoComplete, Input } from 'ant-design-vue'
 import { Icon } from '@/components/Icon'
 
+defineOptions({ name: 'RuleProps' })
+
 // 获取祖先组件的状态
 const { formConfig } = useFormDesignState()
 // 抽离 currentItem

src/components/Icon/src/Icon.vue

@@ -2,13 +2,15 @@
   <SvgIcon :size="size" :name="getSvgIcon" v-if="isSvgIcon" :class="[$attrs.class, 'anticon']" :spin="spin" />
   <span v-else ref="elRef" :class="[$attrs.class, 'app-iconify anticon', spin && 'app-iconify-spin']" :style="getWrapStyle"></span>
 </template>
-<script lang="ts" setup name="Icon">
+<script lang="ts" setup>
 import { ref, watch, onMounted, nextTick, unref, computed, CSSProperties } from 'vue'
 import SvgIcon from './SvgIcon.vue'
 import Iconify from '@purge-icons/generated'
 import { isString } from '@/utils/is'
 import { propTypes } from '@/utils/propTypes'
 
+defineOptions({ name: 'Icon' })
+
 const SVG_END_WITH_FLAG = '|svg'
 
 const props = defineProps({

src/components/Icon/src/SvgIcon.vue

@@ -3,11 +3,13 @@
     <use :xlink:href="symbolId" />
   </svg>
 </template>
-<script lang="ts" setup name="SvgIcon">
+<script lang="ts" setup>
 import type { CSSProperties } from 'vue'
 import { computed } from 'vue'
 import { useDesign } from '@/hooks/web/useDesign'
 
+defineOptions({ name: 'SvgIcon' })
+
 const props = defineProps({
   prefix: {
     type: String,

src/components/Loading/src/Loading.vue

@@ -8,11 +8,13 @@
     <Spin v-bind="$attrs" :tip="tip" :size="size" :spinning="loading" />
   </section>
 </template>
-<script lang="ts" setup name="Loading">
+<script lang="ts" setup>
 import { Spin } from 'ant-design-vue'
 import { SizeEnum } from '@/enums/sizeEnum'
 import { propTypes } from '@/utils/propTypes'
 
+defineOptions({ name: 'Loading' })
+
 defineProps({
   tip: propTypes.string.def(''),
   size: {

src/components/Menu/src/BasicMenu.vue

@@ -17,7 +17,7 @@
     </template>
   </Menu>
 </template>
-<script lang="ts" setup name="BasicMenu">
+<script lang="ts" setup>
 import type { MenuState } from './types'
 import { computed, unref, reactive, watch, toRefs, ref } from 'vue'
 import { Menu } from 'ant-design-vue'
@@ -34,6 +34,8 @@ import { getCurrentParentPath } from '@/router/menus'
 import { listenerRouteChange } from '@/logics/mitt/routeChange'
 import { getAllParentPath } from '@/router/helper/menuHelper'
 
+defineOptions({ name: 'BasicMenu' })
+
 const props = defineProps(basicProps)
 const emit = defineEmits(['menuClick'])
 

src/components/Menu/src/components/BasicMenuItem.vue

@@ -3,10 +3,12 @@
     <MenuItemContent v-bind="$props" :item="item" />
   </MenuItem>
 </template>
-<script lang="ts" setup name="BasicMenuItem">
+<script lang="ts" setup>
 import { MenuItem } from 'ant-design-vue'
 import { itemProps } from '../props'
 import MenuItemContent from './MenuItemContent.vue'
 
+defineOptions({ name: 'BasicMenuItem' })
+
 defineProps(itemProps)
 </script>

src/components/Menu/src/components/BasicSubMenuItem.vue

@@ -10,7 +10,7 @@
     </template>
   </SubMenu>
 </template>
-<script lang="ts" setup name="BasicSubMenuItem">
+<script lang="ts" setup>
 import type { Menu as MenuType } from '@/router/types'
 import { computed } from 'vue'
 import { Menu } from 'ant-design-vue'
@@ -20,6 +20,9 @@ import BasicMenuItem from './BasicMenuItem.vue'
 import MenuItemContent from './MenuItemContent.vue'
 
 const SubMenu = Menu.SubMenu
+
+defineOptions({ name: 'BasicSubMenuItem' })
+
 const props = defineProps(itemProps)
 
 const { prefixCls } = useDesign('basic-menu-item')

src/components/Menu/src/components/MenuItemContent.vue

@@ -4,13 +4,16 @@
     {{ getI18nName }}
   </span>
 </template>
-<script lang="ts" setup name="MenuItemContent">
+<script lang="ts" setup>
 import { computed } from 'vue'
 import { Icon } from '@/components/Icon'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useDesign } from '@/hooks/web/useDesign'
 import { contentProps } from '../props'
+
 const { t } = useI18n()
+
+defineOptions({ name: 'MenuItemContent' })
 const props = defineProps(contentProps)
 
 const { prefixCls } = useDesign('basic-menu-item-content')

src/components/Modal/src/BasicModal.vue

@@ -44,7 +44,7 @@
     </template>
   </Modal>
 </template>
-<script lang="ts" setup name="BasicModal" inheritAttrs="false">
+<script lang="ts" setup>
 import type { ModalProps, ModalMethods } from './typing'
 
 import { computed, ref, watch, unref, watchEffect, toRef, getCurrentInstance, nextTick, useAttrs } from 'vue'
@@ -60,6 +60,8 @@ import { useFullScreen } from './hooks/useModalFullScreen'
 import { omit } from 'lodash-es'
 import { useDesign } from '@/hooks/web/useDesign'
 
+defineOptions({ name: 'BasicModal', inheritAttrs: false })
+
 const props = defineProps(basicProps)
 const attrs = useAttrs()
 const emit = defineEmits(['visible-change', 'height-change', 'cancel', 'ok', 'register', 'update:visible'])

src/components/Modal/src/components/ModalClose.vue

@@ -13,7 +13,7 @@
     </Tooltip>
   </div>
 </template>
-<script lang="ts" setup name="ModalClose">
+<script lang="ts" setup>
 import { computed } from 'vue'
 import { FullscreenExitOutlined, FullscreenOutlined, CloseOutlined } from '@ant-design/icons-vue'
 import { useDesign } from '@/hooks/web/useDesign'
@@ -22,6 +22,8 @@ import { useI18n } from '@/hooks/web/useI18n'
 
 const { t } = useI18n()
 
+defineOptions({ name: 'ModalClose' })
+
 const props = defineProps({
   canFullscreen: { type: Boolean, default: true },
   fullScreen: { type: Boolean }

src/components/Modal/src/components/ModalFooter.vue

@@ -11,9 +11,11 @@
     <slot name="appendFooter"></slot>
   </div>
 </template>
-<script lang="ts" setup name="BasicModalFooter">
+<script lang="ts" setup>
 import { basicProps } from '../props'
 
+defineOptions({ name: 'BasicModalFooter' })
+
 defineProps(basicProps)
 
 const emit = defineEmits(['ok', 'cancel'])

src/components/Modal/src/components/ModalHeader.vue

@@ -3,9 +3,11 @@
     {{ title }}
   </BasicTitle>
 </template>
-<script lang="ts" setup name="BasicModalHeader">
+<script lang="ts" setup>
 import { BasicTitle } from '@/components/Basic'
 
+defineOptions({ name: 'BasicModalHeader' })
+
 defineProps({
   helpMessage: {
     type: [String, Array] as PropType<string | string[]>

src/components/Modal/src/components/ModalWrapper.vue

@@ -5,7 +5,7 @@
     </div>
   </ScrollContainer>
 </template>
-<script lang="ts" setup name="ModalWrapper" inheritAttrs="false">
+<script lang="ts" setup>
 import type { CSSProperties } from 'vue'
 import { computed, ref, watchEffect, unref, watch, onMounted, nextTick, onUnmounted } from 'vue'
 import { useWindowSizeFn } from '@/hooks/event/useWindowSizeFn'
@@ -13,6 +13,8 @@ import { ScrollContainer } from '@/components/Container'
 import { createModalContext } from '../hooks/useModalContext'
 import { useMutationObserver } from '@vueuse/core'
 
+defineOptions({ name: 'ModalWrapper', inheritAttrs: false })
+
 const emit = defineEmits(['height-change', 'ext-height'])
 const props = defineProps({
   loading: { type: Boolean },

src/components/Page/src/PageFooter.vue

@@ -10,10 +10,12 @@
   </div>
 </template>
 
-<script lang="ts" setup name="PageFooter" inheritAttrs="false">
+<script lang="ts" setup>
 import { useMenuSetting } from '@/hooks/setting/useMenuSetting'
 import { useDesign } from '@/hooks/web/useDesign'
 
+defineOptions({ name: 'PageFooter', inheritAttrs: false })
+
 const { prefixCls } = useDesign('page-footer')
 const { getCalcContentWidth } = useMenuSetting()
 </script>

src/components/Page/src/PageWrapper.vue

@@ -26,7 +26,7 @@
     </PageFooter>
   </div>
 </template>
-<script lang="ts" setup name="PageWrapper" inheritAttrs="false">
+<script lang="ts" setup>
 import { CSSProperties, provide } from 'vue'
 import { computed, watch, ref, unref, useAttrs, useSlots } from 'vue'
 import PageFooter from './PageFooter.vue'
@@ -37,6 +37,8 @@ import { PageHeader } from 'ant-design-vue'
 import { useContentHeight } from '@/hooks/web/useContentHeight'
 import { PageWrapperFixedHeightKey } from '..'
 
+defineOptions({ name: 'PageWrapper', inheritAttrs: false })
+
 const props = defineProps({
   title: propTypes.string,
   dense: propTypes.bool,

src/components/Preview/src/Preview.vue

@@ -14,7 +14,7 @@
     </ImagePreviewGroup>
   </div>
 </template>
-<script lang="ts" setup name="ImagePreview">
+<script lang="ts" setup>
 import { computed } from 'vue'
 import { Image, ImagePreviewGroup } from 'ant-design-vue'
 import { useDesign } from '@/hooks/web/useDesign'
@@ -39,6 +39,8 @@ interface ImageProps {
 
 type ImageItem = string | ImageProps
 
+defineOptions({ name: 'ImagePreview' })
+
 const props = defineProps({
   functional: propTypes.bool,
   imageList: {

src/components/Qrcode/src/Qrcode.vue

@@ -3,13 +3,15 @@
     <component :is="tag" ref="wrapRef" />
   </div>
 </template>
-<script lang="ts" setup name="QrCode">
+<script lang="ts" setup>
 import { watch, ref, unref, onMounted } from 'vue'
 import { toCanvas, QRCodeRenderersOptions, LogoType } from './qrcodePlus'
 import { toDataURL } from 'qrcode'
 import { downloadByUrl } from '@/utils/file/download'
 import { QrcodeDoneEventParams } from './typing'
 
+defineOptions({ name: 'QrCode' })
+
 const props = defineProps({
   value: {
     type: [String, Array] as PropType<string | any[]>,

src/components/Scrollbar/src/Scrollbar.vue

@@ -16,13 +16,15 @@
     </template>
   </div>
 </template>
-<script lang="ts" setup name="Scrollbar">
+<script lang="ts" setup>
 import { addResizeListener, removeResizeListener } from '@/utils/event'
 import componentSetting from '@/settings/componentSetting'
 import { toObject } from './util'
 import { ref, onMounted, onBeforeUnmount, nextTick, provide, computed, unref } from 'vue'
 import Bar from './bar'
 
+defineOptions({ name: 'Scrollbar' })
+
 const props = defineProps({
   native: {
     type: Boolean,

src/components/SimpleMenu/src/SimpleMenu.vue

@@ -12,7 +12,7 @@
     </template>
   </Menu>
 </template>
-<script lang="ts" setup name="SimpleMenu" inheritAttrs="false">
+<script lang="ts" setup>
 import type { MenuState } from './types'
 import type { Menu as MenuType } from '@/router/types'
 import type { RouteLocationNormalizedLoaded } from 'vue-router'
@@ -28,6 +28,8 @@ import { isFunction, isUrl } from '@/utils/is'
 import { openWindow } from '@/utils'
 import { useOpenKeys } from './useOpenKeys'
 
+defineOptions({ name: 'SimpleMenu', inheritAttrs: false })
+
 const props = defineProps({
   items: {
     type: Array as PropType<MenuType[]>,

src/components/SimpleMenu/src/SimpleMenuTag.vue

@@ -1,12 +1,14 @@
 <template>
   <span :class="getTagClass" v-if="getShowTag">{{ getContent }}</span>
 </template>
-<script lang="ts" setup name="SimpleMenuTag">
+<script lang="ts" setup>
 import type { Menu } from '@/router/types'
 import { computed } from 'vue'
 import { useDesign } from '@/hooks/web/useDesign'
 import { propTypes } from '@/utils/propTypes'
 
+defineOptions({ name: 'SimpleMenuTag' })
+
 const props = defineProps({
   item: {
     type: Object as PropType<Menu>,

src/components/SimpleMenu/src/SimpleSubMenu.vue

@@ -34,7 +34,7 @@
     </template>
   </SubMenu>
 </template>
-<script lang="ts" setup name="SimpleSubMenu">
+<script lang="ts" setup>
 import type { Menu } from '@/router/types'
 import { computed } from 'vue'
 import { useDesign } from '@/hooks/web/useDesign'
@@ -48,6 +48,8 @@ import { createAsyncComponent } from '@/utils/factory/createAsyncComponent'
 
 const SimpleMenuTag = createAsyncComponent(() => import('./SimpleMenuTag.vue'))
 
+defineOptions({ name: 'SimpleSubMenu' })
+
 const props = defineProps({
   item: {
     type: Object as PropType<Menu>,

src/components/SimpleMenu/src/components/Menu.vue

@@ -4,7 +4,7 @@
   </ul>
 </template>
 
-<script lang="ts" setup name="Menu">
+<script lang="ts" setup>
 import type { SubMenuProvider } from './types'
 import { ref, computed, onMounted, watchEffect, watch, nextTick, getCurrentInstance, provide } from 'vue'
 import { useDesign } from '@/hooks/web/useDesign'
@@ -12,6 +12,8 @@ import { propTypes } from '@/utils/propTypes'
 import { createSimpleRootMenuContext } from './useSimpleMenuContext'
 import mitt from '@/utils/mitt'
 
+defineOptions({ name: 'Menu' })
+
 const props = defineProps({
   theme: propTypes.oneOf(['light', 'dark']).def('light'),
   activeName: propTypes.oneOfType([propTypes.string, propTypes.number]),

src/components/SimpleMenu/src/components/MenuCollapseTransition.vue

@@ -3,8 +3,11 @@
     <slot></slot>
   </transition>
 </template>
-<script lang="ts" setup name="MenuCollapseTransition">
+<script lang="ts" setup>
 import { addClass, removeClass } from '@/utils/domUtils'
+
+defineOptions({ name: 'MenuCollapseTransition' })
+
 const on = {
   beforeEnter(el) {
     addClass(el, 'collapse-transition')

src/components/SimpleMenu/src/components/MenuItem.vue

@@ -16,7 +16,7 @@
   </li>
 </template>
 
-<script lang="ts" setup name="MenuItem">
+<script lang="ts" setup>
 import { ref, useSlots, computed, unref, getCurrentInstance, watch } from 'vue'
 import { useDesign } from '@/hooks/web/useDesign'
 import { propTypes } from '@/utils/propTypes'
@@ -24,6 +24,8 @@ import { useMenuItem } from './useMenu'
 import { Tooltip } from 'ant-design-vue'
 import { useSimpleRootMenuContext } from './useSimpleMenuContext'
 
+defineOptions({ name: 'MenuItem' })
+
 const props = defineProps({
   name: {
     type: [String, Number] as PropType<string | number>,

src/components/SimpleMenu/src/components/SubMenuItem.vue

@@ -45,7 +45,7 @@
     </Popover>
   </li>
 </template>
-<script lang="ts" setup name="SubMenu">
+<script lang="ts" setup>
 import type { CSSProperties } from 'vue'
 import type { SubMenuProvider } from './types'
 import { computed, unref, getCurrentInstance, reactive, provide, onBeforeMount, inject } from 'vue'
@@ -58,6 +58,9 @@ import { Icon } from '@/components/Icon'
 import { Popover } from 'ant-design-vue'
 import { isBoolean, isObject } from '@/utils/is'
 import mitt from '@/utils/mitt'
+
+defineOptions({ name: 'SubMenu' })
+
 const DELAY = 200
 const props = defineProps({
   name: {

src/components/StrengthMeter/src/StrengthMeter.vue

@@ -10,13 +10,15 @@
     </div>
   </div>
 </template>
-<script lang="ts" setup name="StrengthMeter">
+<script lang="ts" setup>
 import { computed, ref, watch, unref, watchEffect } from 'vue'
 import { InputPassword } from 'ant-design-vue'
 import { zxcvbn } from '@zxcvbn-ts/core'
 import { useDesign } from '@/hooks/web/useDesign'
 import { propTypes } from '@/utils/propTypes'
 
+defineOptions({ name: 'StrengthMeter' })
+
 const props = defineProps({
   value: propTypes.string,
   showInput: propTypes.bool.def(true),

src/components/Table/src/BasicTable.vue

@@ -39,7 +39,7 @@
     </Table>
   </div>
 </template>
-<script lang="ts" setup name="BasicTable">
+<script lang="ts" setup>
 import type { BasicTableProps, TableActionType, SizeType, ColumnChangeParam } from './types/table'
 import { ref, computed, unref, toRaw, inject, watchEffect, useAttrs, useSlots } from 'vue'
 import { Table } from 'ant-design-vue'
@@ -67,6 +67,8 @@ import { basicProps } from './props'
 import { isFunction } from '@/utils/is'
 import { warn } from '@/utils/log'
 
+defineOptions({ name: 'BasicTable' })
+
 const props = defineProps(basicProps)
 const emit = defineEmits([
   'fetch-success',

src/components/Table/src/components/EditTableHeaderIcon.vue

@@ -5,8 +5,10 @@
     <FormOutlined />
   </span>
 </template>
-<script lang="ts" setup name="EditTableHeaderIcon">
+<script lang="ts" setup>
 import { FormOutlined } from '@ant-design/icons-vue'
 
+defineOptions({ name: 'EditTableHeaderIcon' })
+
 defineProps({ title: { type: String, default: '' } })
 </script>

src/components/Table/src/components/HeaderCell.vue

@@ -5,13 +5,15 @@
   <span v-else>{{ getTitle }}</span>
   <BasicHelp v-if="getHelpMessage" :text="getHelpMessage" :class="`${prefixCls}__help`" />
 </template>
-<script lang="ts" setup name="TableHeaderCell">
+<script lang="ts" setup>
 import { computed } from 'vue'
 import type { BasicColumn } from '../types/table'
 import BasicHelp from '@/components/Basic/src/BasicHelp.vue'
 import EditTableHeaderCell from './EditTableHeaderIcon.vue'
 import { useDesign } from '@/hooks/web/useDesign'
 
+defineOptions({ name: 'TableHeaderCell' })
+
 const props = defineProps({
   column: {
     type: Object as PropType<BasicColumn>,

src/components/Table/src/components/TableAction.vue

@@ -19,7 +19,7 @@
     </Dropdown>
   </div>
 </template>
-<script lang="ts" setup name="TableAction">
+<script lang="ts" setup>
 import { useI18n } from '@/hooks/web/useI18n'
 import { computed, toRaw, unref } from 'vue'
 import { MoreOutlined } from '@ant-design/icons-vue'
@@ -35,6 +35,8 @@ import { isBoolean, isFunction, isString } from '@/utils/is'
 import { propTypes } from '@/utils/propTypes'
 import { ACTION_COLUMN_FLAG } from '../const'
 
+defineOptions({ name: 'TableAction' })
+
 const props = defineProps({
   actions: {
     type: Array as PropType<ActionItem[]>,

src/components/Table/src/components/TableFooter.vue

@@ -11,7 +11,7 @@
     :scroll="scroll"
   />
 </template>
-<script lang="ts" setup name="BasicTableFooter">
+<script lang="ts" setup>
 import { unref, computed, toRaw } from 'vue'
 import { Table } from 'ant-design-vue'
 import { cloneDeep } from 'lodash-es'
@@ -24,6 +24,8 @@ import { useTableContext } from '../hooks/useTableContext'
 const SUMMARY_ROW_KEY = '_row'
 const SUMMARY_INDEX_KEY = '_index'
 
+defineOptions({ name: 'BasicTableFooter' })
+
 const props = defineProps({
   summaryFunc: {
     type: Function as PropType<Fn>

src/components/Table/src/components/TableHeader.vue

@@ -14,13 +14,15 @@
     </div>
   </div>
 </template>
-<script lang="ts" setup name="BasicTableHeader">
+<script lang="ts" setup>
 import type { TableSetting, ColumnChangeParam } from '../types/table'
 import { Divider } from 'ant-design-vue'
 import TableSettingComponent from './settings/index.vue'
 import TableTitle from './TableTitle.vue'
 import { useDesign } from '@/hooks/web/useDesign'
 
+defineOptions({ name: 'BasicTableHeader' })
+
 defineProps({
   title: {
     type: [Function, String] as PropType<string | ((data: Recordable) => string)>

src/components/Table/src/components/TableImg.vue

@@ -23,13 +23,15 @@
     </ImagePreviewGroup>
   </div>
 </template>
-<script lang="ts" setup name="TableImage">
+<script lang="ts" setup>
 import type { CSSProperties } from 'vue'
 import { computed } from 'vue'
 import { useDesign } from '@/hooks/web/useDesign'
 import { Image, Badge, ImagePreviewGroup } from 'ant-design-vue'
 import { propTypes } from '@/utils/propTypes'
 
+defineOptions({ name: 'TableImage' })
+
 const props = defineProps({
   imgList: propTypes.arrayOf(propTypes.string),
   size: propTypes.number.def(40),

src/components/Table/src/components/TableTitle.vue

@@ -3,12 +3,14 @@
     {{ getTitle }}
   </BasicTitle>
 </template>
-<script lang="ts" setup name="BasicTableTitle">
+<script lang="ts" setup>
 import { computed } from 'vue'
 import { BasicTitle } from '@/components/Basic'
 import { useDesign } from '@/hooks/web/useDesign'
 import { isFunction } from '@/utils/is'
 
+defineOptions({ name: 'BasicTableTitle' })
+
 const props = defineProps({
   title: {
     type: [Function, String] as PropType<string | ((data: Recordable) => string)>

src/components/Table/src/components/settings/ColumnSetting.vue

@@ -82,7 +82,7 @@
     </Popover>
   </Tooltip>
 </template>
-<script lang="ts" setup name="ColumnSetting">
+<script lang="ts" setup>
 import type { BasicColumn, BasicTableProps, ColumnChangeParam } from '../../types/table'
 import { ref, reactive, useAttrs, watchEffect, nextTick, unref, computed } from 'vue'
 import { Tooltip, Popover, Checkbox, Divider } from 'ant-design-vue'
@@ -100,6 +100,8 @@ import { cloneDeep, omit } from 'lodash-es'
 import Sortablejs from 'sortablejs'
 import type Sortable from 'sortablejs'
 
+defineOptions({ name: 'ColumnSetting' })
+
 interface State {
   checkAll: boolean
   isInit?: boolean

src/components/Table/src/components/settings/RedoSetting.vue

@@ -6,12 +6,14 @@
     <RedoOutlined @click="redo" />
   </Tooltip>
 </template>
-<script lang="ts" setup name="RedoSetting">
+<script lang="ts" setup>
 import { Tooltip } from 'ant-design-vue'
 import { RedoOutlined } from '@ant-design/icons-vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useTableContext } from '../../hooks/useTableContext'
 
+defineOptions({ name: 'RedoSetting' })
+
 const table = useTableContext()
 const { t } = useI18n()
 

src/components/Table/src/components/settings/SizeSetting.vue

@@ -22,7 +22,7 @@
     </Dropdown>
   </Tooltip>
 </template>
-<script lang="ts" setup name="SizeSetting">
+<script lang="ts" setup>
 import type { SizeType } from '../../types/table'
 import { ref } from 'vue'
 import { Tooltip, Dropdown, Menu } from 'ant-design-vue'
@@ -32,6 +32,9 @@ import { useTableContext } from '../../hooks/useTableContext'
 import { getPopupContainer } from '@/utils'
 
 const MenuItem = Menu.Item
+
+defineOptions({ name: 'SizeSetting' })
+
 const table = useTableContext()
 const { t } = useI18n()
 

src/components/Table/src/components/settings/index.vue

@@ -6,7 +6,7 @@
     <FullScreenSetting v-if="getSetting.fullScreen" :getPopupContainer="getTableContainer" />
   </div>
 </template>
-<script lang="ts" setup name="TableSetting">
+<script lang="ts" setup>
 import type { TableSetting, ColumnChangeParam } from '../../types/table'
 import { computed, unref } from 'vue'
 import ColumnSetting from './ColumnSetting.vue'
@@ -15,6 +15,8 @@ import RedoSetting from './RedoSetting.vue'
 import FullScreenSetting from './FullScreenSetting.vue'
 import { useTableContext } from '../../hooks/useTableContext'
 
+defineOptions({ name: 'TableSetting' })
+
 const props = defineProps({
   setting: {
     type: Object as PropType<TableSetting>,

src/components/Tinymce/src/Editor.vue

@@ -13,7 +13,7 @@
   </div>
 </template>
 
-<script lang="ts" setup name="Tinymce" inheritAttrs="false">
+<script lang="ts" setup>
 import type { Editor, RawEditorSettings } from 'tinymce'
 import tinymce from 'tinymce/tinymce'
 import 'tinymce/themes/silver'
@@ -59,6 +59,8 @@ import { isNumber } from '@/utils/is'
 import { useLocale } from '@/locales/useLocale'
 import { useAppStore } from '@/store/modules/app'
 
+defineOptions({ name: 'Tinymce', inheritAttrs: false })
+
 const props = defineProps({
   options: {
     type: Object as PropType<Partial<RawEditorSettings>>,

src/components/Tinymce/src/ImgUpload.vue

@@ -7,14 +7,15 @@
     </Upload>
   </div>
 </template>
-<script lang="ts" setup name="TinymceImageUpload">
+<script lang="ts" setup>
 import { computed } from 'vue'
-
 import { Upload } from 'ant-design-vue'
 import { useDesign } from '@/hooks/web/useDesign'
 import { useGlobSetting } from '@/hooks/setting'
 import { useI18n } from '@/hooks/web/useI18n'
 
+defineOptions({ name: 'TinymceImageUpload' })
+
 const props = defineProps({
   fullscreen: {
     type: Boolean

src/components/Transition/src/CollapseTransition.vue

@@ -3,8 +3,11 @@
     <slot></slot>
   </transition>
 </template>
-<script lang="ts" setup name="CollapseTransition">
+<script lang="ts" setup>
 import { addClass, removeClass } from '@/utils/domUtils'
+
+defineOptions({ name: 'CollapseTransition' })
+
 const on = {
   beforeEnter(el) {
     addClass(el, 'collapse-transition')

src/components/Upload/src/BasicUpload.vue

@@ -35,7 +35,7 @@
     />
   </div>
 </template>
-<script lang="ts" setup name="BasicUpload">
+<script lang="ts" setup>
 import { ref, watch, unref, useAttrs, computed } from 'vue'
 import { Icon } from '@/components/Icon'
 import { Tooltip, Space } from 'ant-design-vue'
@@ -47,6 +47,8 @@ import { isArray } from '@/utils/is'
 import UploadModal from './UploadModal.vue'
 import UploadPreviewModal from './UploadPreviewModal.vue'
 
+defineOptions({ name: 'BasicUpload' })
+
 const props = defineProps(uploadContainerProps)
 const emit = defineEmits(['change', 'delete', 'preview-delete', 'update:value'])
 const attrs = useAttrs()

src/layouts/default/content/index.vue

@@ -3,13 +3,15 @@
     <PageLayout />
   </div>
 </template>
-<script lang="ts" setup name="LayoutContent">
+<script lang="ts" setup>
 import PageLayout from '@/layouts/page/index.vue'
 import { useDesign } from '@/hooks/web/useDesign'
 import { useRootSetting } from '@/hooks/setting/useRootSetting'
 import { useTransitionSetting } from '@/hooks/setting/useTransitionSetting'
 import { useContentViewHeight } from './useContentViewHeight'
 
+defineOptions({ name: 'LayoutContent' })
+
 const { prefixCls } = useDesign('layout-content')
 const { getOpenPageLoading } = useTransitionSetting()
 const { getLayoutContentMode, getPageLoading } = useRootSetting()

src/layouts/default/feature/index.vue

@@ -4,7 +4,7 @@
   <SettingDrawer v-if="getIsFixedSettingDrawer" :class="prefixCls" />
   <SessionTimeoutLogin v-if="getIsSessionTimeout" />
 </template>
-<script lang="ts" setup name="LayoutFeatures">
+<script lang="ts" setup>
 import { computed, unref } from 'vue'
 import { BackTop } from 'ant-design-vue'
 
@@ -22,6 +22,8 @@ const LayoutLockPage = createAsyncComponent(() => import('@/views/base/lock/inde
 
 const SettingDrawer = createAsyncComponent(() => import('@/layouts/default/setting/index.vue'))
 
+defineOptions({ name: 'LayoutFeatures' })
+
 const { getUseOpenBackTop, getShowSettingButton, getSettingButtonPosition, getFullContent } = useRootSetting()
 const userStore = useUserStoreWithOut()
 const { prefixCls } = useDesign('setting-drawer-feature')

src/layouts/default/footer/index.vue

@@ -11,7 +11,7 @@
   </Footer>
 </template>
 
-<script lang="ts" setup name="LayoutFooter">
+<script lang="ts" setup>
 import { computed, unref, ref } from 'vue'
 import { Layout } from 'ant-design-vue'
 
@@ -30,6 +30,8 @@ const SITE_TITLE = ref(import.meta.env.VITE_GLOB_APP_TITLE)
 
 const Footer = Layout.Footer
 
+defineOptions({ name: 'LayoutFooter' })
+
 const { t } = useI18n()
 const { getShowFooter } = useRootSetting()
 const { currentRoute } = useRouter()

src/layouts/default/header/MultipleHeader.vue

@@ -5,7 +5,7 @@
     <MultipleTabs v-if="getShowTabs" />
   </div>
 </template>
-<script lang="ts" setup name="LayoutMultipleHeader">
+<script lang="ts" setup>
 import { unref, computed, CSSProperties } from 'vue'
 
 import LayoutHeader from './index.vue'
@@ -19,9 +19,12 @@ import { useAppInject } from '@/hooks/web/useAppInject'
 import { useDesign } from '@/hooks/web/useDesign'
 import { useLayoutHeight } from '../content/useContentViewHeight'
 
+defineOptions({ name: 'LayoutMultipleHeader' })
+
 const HEADER_HEIGHT = 48
 
 const TABS_HEIGHT = 32
+
 const { setHeaderHeight } = useLayoutHeight()
 const { prefixCls } = useDesign('layout-multiple-header')
 

src/layouts/default/header/components/Breadcrumb.vue

@@ -13,7 +13,7 @@
     </Breadcrumb>
   </div>
 </template>
-<script lang="ts" setup name="LayoutBreadcrumb">
+<script lang="ts" setup>
 import type { RouteLocationMatched } from 'vue-router'
 import { useRouter } from 'vue-router'
 import type { Menu } from '@/router/types'
@@ -31,6 +31,8 @@ import { REDIRECT_NAME } from '@/router/constant'
 import { getAllParentPath } from '@/router/helper/menuHelper'
 import { Icon } from '@/components/Icon'
 
+defineOptions({ name: 'LayoutBreadcrumb' })
+
 defineProps({
   theme: propTypes.oneOf(['dark', 'light'])
 })

src/layouts/default/header/components/ErrorAction.vue

@@ -5,7 +5,7 @@
     </Badge>
   </Tooltip>
 </template>
-<script lang="ts" setup name="ErrorAction">
+<script lang="ts" setup>
 import { computed } from 'vue'
 import { Tooltip, Badge } from 'ant-design-vue'
 import { Icon } from '@/components/Icon'
@@ -16,6 +16,8 @@ import { PageEnum } from '@/enums/pageEnum'
 
 import { useRouter } from 'vue-router'
 
+defineOptions({ name: 'ErrorAction' })
+
 const { t } = useI18n()
 const { push } = useRouter()
 const errorLogStore = useErrorLogStore()

src/layouts/default/header/components/FullScreen.vue

@@ -6,13 +6,14 @@
     </span>
   </Tooltip>
 </template>
-<script lang="ts" setup name="FullScreen">
+<script lang="ts" setup>
 import { computed, unref } from 'vue'
 import { Tooltip } from 'ant-design-vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useFullscreen } from '@vueuse/core'
-
 import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons-vue'
+
+defineOptions({ name: 'FullScreen' })
 const { t } = useI18n()
 const { toggle, isFullscreen } = useFullscreen()
 // 重新检查全屏状态

src/layouts/default/header/components/lock/LockModal.vue

@@ -18,7 +18,7 @@
     </div>
   </BasicModal>
 </template>
-<script lang="ts" setup name="LockModal">
+<script lang="ts" setup>
 import { computed } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useDesign } from '@/hooks/web/useDesign'
@@ -28,6 +28,8 @@ import { useUserStore } from '@/store/modules/user'
 import { useLockStore } from '@/store/modules/lock'
 import headerImg from '@/assets/images/header.jpg'
 
+defineOptions({ name: 'LockModal' })
+
 const { t } = useI18n()
 const { prefixCls } = useDesign('header-lock-modal')
 const userStore = useUserStore()

src/layouts/default/header/components/user-dropdown/DropMenuItem.vue

@@ -6,13 +6,15 @@
     </span>
   </MenuItem>
 </template>
-<script lang="ts" setup name="DropdownMenuItem">
+<script lang="ts" setup>
 import { MenuItem } from 'ant-design-vue'
 import { computed, getCurrentInstance } from 'vue'
 
 import { Icon } from '@/components/Icon'
 import { propTypes } from '@/utils/propTypes'
 
+defineOptions({ name: 'DropdownMenuItem' })
+
 const props = defineProps({
   // eslint-disable-next-line
   key: propTypes.string,

src/layouts/default/header/index.vue

@@ -39,7 +39,7 @@
     </div>
   </Header>
 </template>
-<script lang="ts" setup name="LayoutHeader">
+<script lang="ts" setup>
 import { unref, computed } from 'vue'
 
 import { propTypes } from '@/utils/propTypes'
@@ -70,6 +70,7 @@ const Header = Layout.Header
 const SettingDrawer = createAsyncComponent(() => import('@/layouts/default/setting/index.vue'), {
   loading: true
 })
+defineOptions({ name: 'LayoutHeader' })
 const props = defineProps({
   fixed: propTypes.bool
 })

src/layouts/default/index.vue

@@ -13,7 +13,7 @@
   </Layout>
 </template>
 
-<script lang="ts" setup name="DefaultLayout">
+<script lang="ts" setup>
 import { computed, unref } from 'vue'
 import { Layout } from 'ant-design-vue'
 import { createAsyncComponent } from '@/utils/factory/createAsyncComponent'
@@ -33,6 +33,8 @@ import { useAppInject } from '@/hooks/web/useAppInject'
 const LayoutFeatures = createAsyncComponent(() => import('@/layouts/default/feature/index.vue'))
 const LayoutFooter = createAsyncComponent(() => import('@/layouts/default/footer/index.vue'))
 
+defineOptions({ name: 'DefaultLayout' })
+
 const { prefixCls } = useDesign('default-layout')
 const { getIsMobile } = useAppInject()
 const { getShowFullHeaderRef } = useHeaderSetting()

src/layouts/default/setting/components/InputNumberItem.vue

@@ -4,12 +4,14 @@
     <InputNumber v-bind="$attrs" :class="`${prefixCls}-input-number`" @change="handleChange" />
   </div>
 </template>
-<script lang="ts" setup name="InputNumberItem">
+<script lang="ts" setup>
 import { InputNumber } from 'ant-design-vue'
 import { useDesign } from '@/hooks/web/useDesign'
 import { baseHandler } from '../handler'
 import { HandlerEnum } from '../enum'
 
+defineOptions({ name: 'InputNumberItem' })
+
 const props = defineProps({
   event: {
     type: Number as PropType<HandlerEnum>

src/layouts/default/setting/components/SelectItem.vue

@@ -4,7 +4,7 @@
     <Select v-bind="getBindValue" :class="`${prefixCls}-select`" @change="handleChange as any" :disabled="disabled" :options="options" />
   </div>
 </template>
-<script lang="ts" setup name="SelectItem">
+<script lang="ts" setup>
 import { computed } from 'vue'
 
 import { Select } from 'ant-design-vue'
@@ -12,6 +12,8 @@ import { useDesign } from '@/hooks/web/useDesign'
 import { baseHandler } from '../handler'
 import { HandlerEnum } from '../enum'
 
+defineOptions({ name: 'SelectItem' })
+
 const props = defineProps({
   event: {
     type: Number as PropType<HandlerEnum>

src/layouts/default/setting/components/SettingFooter.vue

@@ -16,7 +16,7 @@
     </a-button>
   </div>
 </template>
-<script lang="ts" setup name="SettingFooter">
+<script lang="ts" setup>
 import { unref } from 'vue'
 
 import { CopyOutlined, RedoOutlined } from '@ant-design/icons-vue'
@@ -37,6 +37,8 @@ import defaultSetting from '@/settings/projectSetting'
 import { changeTheme } from '@/logics/theme'
 import { updateSidebarBgColor } from '@/logics/theme/updateBackground'
 
+defineOptions({ name: 'SettingFooter' })
+
 const permissionStore = usePermissionStore()
 const { prefixCls } = useDesign('setting-footer')
 const { t } = useI18n()

src/layouts/default/setting/components/SwitchItem.vue

@@ -10,7 +10,7 @@
     />
   </div>
 </template>
-<script lang="ts" setup name="SwitchItem">
+<script lang="ts" setup>
 import { computed } from 'vue'
 
 import { Switch } from 'ant-design-vue'
@@ -19,6 +19,8 @@ import { useI18n } from '@/hooks/web/useI18n'
 import { baseHandler } from '../handler'
 import { HandlerEnum } from '../enum'
 
+defineOptions({ name: 'SwitchItem' })
+
 const props = defineProps({
   event: {
     type: Number as PropType<HandlerEnum>

src/layouts/default/setting/components/ThemeColorPicker.vue

@@ -16,7 +16,7 @@
     </template>
   </div>
 </template>
-<script lang="ts" setup name="ThemeColorPicker">
+<script lang="ts" setup>
 import { CheckOutlined } from '@ant-design/icons-vue'
 
 import { useDesign } from '@/hooks/web/useDesign'
@@ -24,6 +24,8 @@ import { useDesign } from '@/hooks/web/useDesign'
 import { baseHandler } from '../handler'
 import { HandlerEnum } from '../enum'
 
+defineOptions({ name: 'ThemeColorPicker' })
+
 const props = defineProps({
   colorList: {
     type: Array as PropType<string[]>,

src/layouts/default/setting/components/TypePicker.vue

@@ -18,11 +18,13 @@
     </template>
   </div>
 </template>
-<script lang="ts" setup name="MenuTypePicker">
+<script lang="ts" setup>
 import { Tooltip } from 'ant-design-vue'
 import { useDesign } from '@/hooks/web/useDesign'
 import { menuTypeList } from '../enum'
 
+defineOptions({ name: 'MenuTypePicker' })
+
 defineProps({
   menuTypeList: {
     type: Array as PropType<typeof menuTypeList>,

src/layouts/default/setting/index.vue

@@ -4,11 +4,13 @@
     <SettingDrawer @register="register" />
   </div>
 </template>
-<script lang="ts" setup name="SettingButton">
+<script lang="ts" setup>
 import SettingDrawer from './SettingDrawer'
 import { Icon } from '@/components/Icon'
 
 import { useDrawer } from '@/components/Drawer'
 
+defineOptions({ name: 'SettingButton' })
+
 const [register, { openDrawer }] = useDrawer()
 </script>

src/layouts/default/sider/DragBar.vue

@@ -1,15 +1,17 @@
 <template>
   <div :class="getClass" :style="getDragBarStyle"></div>
 </template>
-<script lang="ts" setup name="DargBar">
+<script lang="ts" setup>
 import { computed, unref } from 'vue'
 
 import { useDesign } from '@/hooks/web/useDesign'
 import { useMenuSetting } from '@/hooks/setting/useMenuSetting'
 
-const props = {
+defineOptions({ name: 'DargBar' })
+
+const props = defineProps({
   mobile: Boolean
-}
+})
 const { getMiniWidthNumber, getCollapsed, getCanDrag } = useMenuSetting()
 
 const { prefixCls } = useDesign('darg-bar')

src/layouts/default/sider/LayoutSider.vue

@@ -21,7 +21,7 @@
     <DragBar ref="dragBarRef" />
   </Sider>
 </template>
-<script lang="ts" setup name="LayoutSideBar">
+<script lang="ts" setup>
 import { computed, ref, unref, CSSProperties, h } from 'vue'
 
 import { Layout } from 'ant-design-vue'
@@ -37,6 +37,9 @@ import { useDesign } from '@/hooks/web/useDesign'
 
 import DragBar from './DragBar.vue'
 const Sider = Layout.Sider
+
+defineOptions({ name: 'LayoutSideBar' })
+
 const dragBarRef = ref<ElRef>(null)
 const sideRef = ref<ElRef>(null)
 

src/layouts/default/sider/index.vue

@@ -13,7 +13,7 @@
   <MixSider v-else-if="getIsMixSidebar" />
   <Sider v-else />
 </template>
-<script lang="ts" setup name="SiderWrapper">
+<script lang="ts" setup>
 import Sider from './LayoutSider.vue'
 import MixSider from './MixSider.vue'
 import { Drawer } from 'ant-design-vue'
@@ -22,6 +22,8 @@ import { useAppInject } from '@/hooks/web/useAppInject'
 import { useMenuSetting } from '@/hooks/setting/useMenuSetting'
 import { useDesign } from '@/hooks/web/useDesign'
 
+defineOptions({ name: 'SiderWrapper' })
+
 const { prefixCls } = useDesign('layout-sider-wrapper')
 const { getIsMobile } = useAppInject()
 const { setMenuSetting, getCollapsed, getMenuWidth, getIsMixSidebar } = useMenuSetting()

src/layouts/default/tabs/components/FoldButton.vue

@@ -3,7 +3,7 @@
     <Icon :icon="getIcon" />
   </span>
 </template>
-<script lang="ts" setup name="FoldButton">
+<script lang="ts" setup>
 import { unref, computed } from 'vue'
 import { Icon } from '@/components/Icon'
 
@@ -12,6 +12,8 @@ import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting'
 import { useMenuSetting } from '@/hooks/setting/useMenuSetting'
 import { triggerWindowResize } from '@/utils/event'
 
+defineOptions({ name: 'FoldButton' })
+
 const { prefixCls } = useDesign('multiple-tabs-content')
 const { getShowMenu, setMenuSetting } = useMenuSetting()
 const { getShowHeader, setHeaderSetting } = useHeaderSetting()

src/layouts/default/tabs/components/TabContent.vue

@@ -14,7 +14,7 @@
     </span>
   </Dropdown>
 </template>
-<script lang="ts" setup name="TabContent">
+<script lang="ts" setup>
 import type { RouteLocationNormalized } from 'vue-router'
 
 import { computed, unref } from 'vue'
@@ -27,6 +27,8 @@ import { useDesign } from '@/hooks/web/useDesign'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useTabDropdown } from '../useTabDropdown'
 
+defineOptions({ name: 'TabContent' })
+
 const props = defineProps({
   tabItem: {
     type: Object as PropType<RouteLocationNormalized>,

src/layouts/default/tabs/components/TabRedo.vue

@@ -3,12 +3,14 @@
     <RedoOutlined :spin="loading" />
   </span>
 </template>
-<script lang="ts" setup name="TabRedo">
+<script lang="ts" setup>
 import { ref } from 'vue'
 import { RedoOutlined } from '@ant-design/icons-vue'
 import { useDesign } from '@/hooks/web/useDesign'
 import { useTabs } from '@/hooks/web/useTabs'
 
+defineOptions({ name: 'TabRedo' })
+
 const loading = ref(false)
 
 const { prefixCls } = useDesign('multiple-tabs-content')

src/layouts/default/tabs/index.vue

@@ -25,7 +25,7 @@
     </Tabs>
   </div>
 </template>
-<script lang="ts" setup name="MultipleTabs">
+<script lang="ts" setup>
 import type { RouteLocationNormalized, RouteMeta } from 'vue-router'
 
 import { computed, unref, ref } from 'vue'
@@ -49,6 +49,9 @@ import { listenerRouteChange } from '@/logics/mitt/routeChange'
 
 import { useRouter } from 'vue-router'
 const TabPane = Tabs.TabPane
+
+defineOptions({ name: 'MultipleTabs' })
+
 const affixTextList = initAffixTabs()
 const activeKeyRef = ref('')
 

src/layouts/default/trigger/HeaderTrigger.vue

@@ -1,12 +1,14 @@
 <template>
   <span :class="[prefixCls, theme]" @click="toggleCollapsed"> <MenuUnfoldOutlined v-if="getCollapsed" /> <MenuFoldOutlined v-else /> </span>
 </template>
-<script lang="ts" setup name="HeaderTrigger">
+<script lang="ts" setup>
 import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue'
 import { useMenuSetting } from '@/hooks/setting/useMenuSetting'
 import { useDesign } from '@/hooks/web/useDesign'
 import { propTypes } from '@/utils/propTypes'
 
+defineOptions({ name: 'HeaderTrigger' })
+
 defineProps({
   theme: propTypes.oneOf(['light', 'dark'])
 })

src/layouts/default/trigger/SiderTrigger.vue

@@ -4,9 +4,11 @@
     <DoubleLeftOutlined v-else />
   </div>
 </template>
-<script lang="ts" setup name="SiderTrigger">
+<script lang="ts" setup>
 import { DoubleRightOutlined, DoubleLeftOutlined } from '@ant-design/icons-vue'
 import { useMenuSetting } from '@/hooks/setting/useMenuSetting'
 
+defineOptions({ name: 'SiderTrigger' })
+
 const { getCollapsed, toggleCollapsed } = useMenuSetting()
 </script>

src/layouts/default/trigger/index.vue

@@ -2,12 +2,15 @@
   <SiderTrigger v-if="sider" />
   <HeaderTrigger v-else :theme="theme" />
 </template>
-<script lang="ts" setup name="LayoutTrigger">
+<script lang="ts" setup>
 import { createAsyncComponent } from '@/utils/factory/createAsyncComponent'
 import { propTypes } from '@/utils/propTypes'
 import HeaderTrigger from './HeaderTrigger.vue'
 
 const SiderTrigger = createAsyncComponent(() => import('./SiderTrigger.vue'))
+
+defineOptions({ name: 'LayoutTrigger' })
+
 defineProps({
   sider: propTypes.bool.def(true),
   theme: propTypes.oneOf(['light', 'dark'])

src/layouts/iframe/index.vue

@@ -5,12 +5,14 @@
     </template>
   </div>
 </template>
-<script lang="ts" setup name="FrameLayout">
+<script lang="ts" setup>
 import { unref, computed } from 'vue'
 import FramePage from '@/views/base/iframe/index.vue'
 
 import { useFrameKeepAlive } from './useFrameKeepAlive'
 
+defineOptions({ name: 'FrameLayout' })
+
 const { getFramePages, hasRenderFrame, showIframe } = useFrameKeepAlive()
 
 const showFrame = computed(() => unref(getFramePages).length > 0)

src/layouts/page/index.vue

@@ -24,7 +24,7 @@
   <FrameLayout v-if="getCanEmbedIFramePage" />
 </template>
 
-<script lang="ts" setup name="PageLayout">
+<script lang="ts" setup>
 import { computed, unref } from 'vue'
 
 import FrameLayout from '@/layouts/iframe/index.vue'
@@ -37,6 +37,8 @@ import { getTransitionName } from './transition'
 
 import { useMultipleTabStore } from '@/store/modules/multipleTab'
 
+defineOptions({ name: 'PageLayout' })
+
 const { getShowMultipleTab } = useMultipleTabSetting()
 const tabStore = useMultipleTabStore()
 

src/views/base/iframe/FrameBlank.vue

@@ -1,6 +1,6 @@
 <template>
   <div></div>
 </template>
-<script lang="ts" setup name="FrameBlank">
+<script lang="ts" setup>
-// freame
+defineOptions({ name: 'FrameBlank' })
 </script>

src/views/base/profile/PasswordModal.vue

@@ -3,7 +3,7 @@
     <BasicForm @register="registerForm" />
   </BasicModal>
 </template>
-<script lang="ts" setup name="PasswordModal">
+<script lang="ts" setup>
 import { ref } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useMessage } from '@/hooks/web/useMessage'
@@ -12,6 +12,8 @@ import { BasicModal, useModalInner } from '@/components/Modal'
 import { passwordSchema } from './data'
 import { updateUserPwdApi } from '@/api/base/profile'
 
+defineOptions({ name: 'PasswordModal' })
+
 const { t } = useI18n()
 const { createMessage } = useMessage()
 const emit = defineEmits(['success', 'register'])

src/views/bpm/form/index.vue

@@ -29,7 +29,7 @@
     </BasicTable>
   </div>
 </template>
-<script lang="ts" setup name="BpmForm">
+<script lang="ts" setup>
 import { useI18n } from '@/hooks/web/useI18n'
 import { useMessage } from '@/hooks/web/useMessage'
 import { IconEnum } from '@/enums/appEnum'
@@ -37,6 +37,8 @@ import { BasicTable, useTable, TableAction } from '@/components/Table'
 import { deleteForm, getFormPage } from '@/api/bpm/form'
 import { columns, searchFormSchema } from './form.data'
 
+defineOptions({ name: 'BpmForm' })
+
 const { t } = useI18n()
 const { createMessage } = useMessage()
 

src/views/bpm/group/GroupModal.vue

@@ -3,7 +3,7 @@
     <BasicForm @register="registerForm" />
   </BasicModal>
 </template>
-<script lang="ts" setup name="BpmGroupModal">
+<script lang="ts" setup>
 import { ref, unref } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useMessage } from '@/hooks/web/useMessage'
@@ -12,6 +12,8 @@ import { BasicModal, useModalInner } from '@/components/Modal'
 import { formSchema } from './group.data'
 import { createUserGroup, getUserGroup, updateUserGroup } from '@/api/bpm/userGroup'
 
+defineOptions({ name: 'BpmGroupModal' })
+
 const { t } = useI18n()
 const { createMessage } = useMessage()
 const emit = defineEmits(['success', 'register'])

src/views/bpm/group/index.vue

@@ -30,7 +30,7 @@
     <GroupModal @register="registerModal" @success="reload()" />
   </div>
 </template>
-<script lang="ts" setup name="BpmGroup">
+<script lang="ts" setup>
 import { useI18n } from '@/hooks/web/useI18n'
 import { useMessage } from '@/hooks/web/useMessage'
 import { useModal } from '@/components/Modal'
@@ -40,6 +40,8 @@ import { BasicTable, useTable, TableAction } from '@/components/Table'
 import { deleteUserGroup, getUserGroupPage } from '@/api/bpm/userGroup'
 import { columns, searchFormSchema } from './group.data'
 
+defineOptions({ name: 'BpmGroup' })
+
 const { t } = useI18n()
 const { createMessage } = useMessage()
 const [registerModal, { openModal }] = useModal()