refactor: vue3.3 defineOptions

src/layout/components/AppView.vue

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

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

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

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

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

src/layout/components/Footer/src/Footer.vue

@@ -1,7 +1,9 @@
-<script lang="ts" name="Footer" setup>
+<script lang="ts" setup>
 import { useAppStore } from '@/store/modules/app'
 import { useDesign } from '@/hooks/web/useDesign'
 
+defineOptions({ name: 'Footer' })
+
 const { getPrefixCls } = useDesign()
 
 const prefixCls = getPrefixCls('footer')

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

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

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

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

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

@@ -1,7 +1,9 @@
-<script lang="ts" name="Message" setup>
+<script lang="ts" setup>
 import { formatDate } from '@/utils/formatTime'
 import * as NotifyMessageApi from '@/api/system/notify/message'
 
+defineOptions({ name: 'Message' })
+
 const { push } = useRouter()
 const activeName = ref('notice')
 const unreadCount = ref(0) // 未读消息数量

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-<script lang="ts" name="TagsView" setup>
+<script lang="ts" setup>
 import type { RouteLocationNormalizedLoaded, RouterLinkProps } from 'vue-router'
 import { usePermissionStore } from '@/store/modules/permission'
 import { useTagsViewStore } from '@/store/modules/tagsView'
@@ -11,6 +11,8 @@ import { ElScrollbar } from 'element-plus'
 import { useScrollTo } from '@/hooks/event/useScrollTo'
 import { useTemplateRefsList } from '@vueuse/core'
 
+defineOptions({ name: 'TagsView' })
+
 const { getPrefixCls } = useDesign()
 
 const prefixCls = getPrefixCls('tags-view')
@@ -483,7 +485,7 @@ $prefix-cls: #{$namespace}-tags-view;
       }
     }
 
-    &:after {
+    &::after {
       position: absolute;
       top: 1px;
       left: 0;
@@ -502,7 +504,7 @@ $prefix-cls: #{$namespace}-tags-view;
     padding-right: 16px;
     margin-left: 4px;
     font-size: 12px;
-    border-radius: 3px 3px 3px 3px;
+    border-radius: 3px;
     cursor: pointer;
     border: 1px solid #d9d9d9;
 
@@ -549,7 +551,7 @@ $prefix-cls: #{$namespace}-tags-view;
         }
       }
 
-      &:after {
+      &::after {
         border-right: 1px solid var(--el-border-color);
         border-left: 1px solid var(--el-border-color);
       }
@@ -561,7 +563,7 @@ $prefix-cls: #{$namespace}-tags-view;
       height: calc(100% - 4px);
       padding-right: 16px;
       font-size: 12px;
-      border-radius: 3px 3px 3px 3px;
+      border-radius: 3px;
       cursor: pointer;
       border: 1px solid var(--el-border-color);
     }

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

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

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

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