refactor!: 使用 defineOptions 设置组件 name

BREAKING CHANGE: 移除 `unplugin-vue-setup-extend-plus` 依赖

src/components/Auth/index.vue

@@ -1,8 +1,12 @@
-<script lang="ts" setup name="Auth">
+<script lang="ts" setup>
 const props = defineProps<{
   value: string | string[]
 }>()
 
+defineOptions({
+  name: 'Auth',
+})
+
 function check() {
   return useAuth().auth(props.value)
 }

src/components/AuthAll/index.vue

@@ -1,8 +1,12 @@
-<script lang="ts" setup name="AuthAll">
+<script lang="ts" setup>
 const props = defineProps<{
   value: string[]
 }>()
 
+defineOptions({
+  name: 'AuthAll',
+})
+
 function check() {
   return useAuth().authAll(props.value)
 }

src/components/Copyright/index.vue

@@ -1,6 +1,10 @@
-<script lang="ts" setup name="Copyright">
+<script lang="ts" setup>
 import useSettingsStore from '@/store/modules/settings'
 
+defineOptions({
+  name: 'Copyright',
+})
+
 const route = useRoute()
 const settingsStore = useSettingsStore()
 </script>

src/components/FileUpload/index.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup name="FileUpload">
+<script lang="ts" setup>
 import { ElMessage } from 'element-plus'
 import type { UploadProps, UploadUserFile } from 'element-plus'
 
@@ -43,6 +43,10 @@ const props = defineProps({
 
 const emit = defineEmits(['onSuccess'])
 
+defineOptions({
+  name: 'FileUpload',
+})
+
 const beforeUpload: UploadProps['beforeUpload'] = (file) => {
   const fileName = file.name.split('.')
   const fileExt = fileName.at(-1)

src/components/FixedActionBar/index.vue

@@ -1,6 +1,10 @@
-<script lang="ts" setup name="FixedActionBar">
+<script lang="ts" setup>
 const isBottom = ref(false)
 
+defineOptions({
+  name: 'FixedActionBar',
+})
+
 onMounted(() => {
   onScroll()
   window.addEventListener('scroll', onScroll)

src/components/ImagePreview/index.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup name="ImagePreview">
+<script lang="ts" setup>
 const props = defineProps({
   src: {
     type: String,
@@ -14,6 +14,10 @@ const props = defineProps({
   },
 })
 
+defineOptions({
+  name: 'ImagePreview',
+})
+
 const realWidth = computed(() => {
   return typeof props.width === 'string' ? props.width : `${props.width}px`
 })

src/components/ImageUpload/index.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup name="ImageUpload">
+<script lang="ts" setup>
 import type { UploadProps } from 'element-plus'
 import { ElMessage } from 'element-plus'
 
@@ -51,6 +51,10 @@ const props = defineProps({
 
 const emit = defineEmits(['update:url', 'onSuccess'])
 
+defineOptions({
+  name: 'ImageUpload',
+})
+
 const uploadData = ref({
   imageViewerVisible: false,
   progress: {

src/components/ImagesUpload/index.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup name="ImagesUpload">
+<script lang="ts" setup>
 import type { UploadProps } from 'element-plus'
 import { ElMessage } from 'element-plus'
 
@@ -55,6 +55,10 @@ const props = defineProps({
 
 const emit = defineEmits(['update:url', 'onSuccess'])
 
+defineOptions({
+  name: 'ImagesUpload',
+})
+
 const uploadData = ref({
   dialogImageIndex: 0,
   imageViewerVisible: false,

src/components/NotAllowed/index.vue

@@ -1,4 +1,8 @@
 <script lang="ts" setup>
+defineOptions({
+  name: 'NotAllowed',
+})
+
 const router = useRouter()
 
 const data = ref({

src/components/PageHeader/index.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup name="PageHeader">
+<script lang="ts" setup>
 defineProps({
   title: {
     type: String,
@@ -10,6 +10,10 @@ defineProps({
   },
 })
 
+defineOptions({
+  name: 'PageHeader',
+})
+
 const slots = useSlots()
 </script>
 

src/components/PageMain/index.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup name="PageMain">
+<script lang="ts" setup>
 const props = defineProps({
   title: {
     type: String,
@@ -14,6 +14,10 @@ const props = defineProps({
   },
 })
 
+defineOptions({
+  name: 'PageMain',
+})
+
 const titleSlot = !!useSlots().title
 
 const collaspeData = ref(props.collaspe)

src/components/PcasCascader/index.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup name="PcasCascader">
+<script lang="ts" setup>
 // 行政区划数据来源于 https://github.com/modood/Administrative-divisions-of-China
 import pcasRaw from './pcas-code.json'
 
@@ -23,6 +23,10 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue'])
 
+defineOptions({
+  name: 'PcasCascader',
+})
+
 interface pcasItem {
   code: string
   name: string

src/components/SearchBar/index.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup name="SearchBar">
+<script lang="ts" setup>
 const props = defineProps({
   fold: {
     type: Boolean,
@@ -19,6 +19,10 @@ const emit = defineEmits<{
   (event: 'toggle', value: boolean): void
 }>()
 
+defineOptions({
+  name: 'SearchBar',
+})
+
 const isFold = ref(props.fold)
 
 watch(() => props.fold, (value) => {

src/components/SvgIcon/index.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup name="SvgIcon">
+<script lang="ts" setup>
 import { Icon } from '@iconify/vue'
 
 const props = defineProps({
@@ -16,6 +16,10 @@ const props = defineProps({
   },
 })
 
+defineOptions({
+  name: 'SvgIcon',
+})
+
 const transformStyle = computed(() => {
   const style = []
   if (props.flip !== '') {

src/components/SystemInfo/index.vue

@@ -16,9 +16,6 @@ onMounted(() => {
   <div>
     <el-drawer v-model="isShow" title="系统信息" direction="rtl" :size="360">
       <el-descriptions direction="vertical" :column="1" border>
-        <el-descriptions-item label="版本号" align="center">
-          {{ pkg.version }}
-        </el-descriptions-item>
         <el-descriptions-item label="最后编译时间" align="center">
           {{ lastBuildTime }}
         </el-descriptions-item>

src/components/Trend/index.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup name="Trend">
+<script lang="ts" setup>
 const props = defineProps({
   value: {
     type: String,
@@ -22,6 +22,10 @@ const props = defineProps({
   },
 })
 
+defineOptions({
+  name: 'Trend',
+})
+
 const isUp = computed(() => {
   let isUp = props.type === 'up'
   if (props.reverse) {

src/layouts/components/AppSetting/index.vue

@@ -1,10 +1,14 @@
-<script lang="ts" setup name="AppSetting">
+<script lang="ts" setup>
 import { useClipboard } from '@vueuse/core'
 import { ElMessage } from 'element-plus'
 import eventBus from '@/utils/eventBus'
 import useSettingsStore from '@/store/modules/settings'
 import useMenuStore from '@/store/modules/menu'
 
+defineOptions({
+  name: 'AppSetting',
+})
+
 const route = useRoute()
 
 const settingsStore = useSettingsStore()

src/layouts/components/Header/index.vue

@@ -1,9 +1,13 @@
-<script lang="ts" setup name="Header">
+<script lang="ts" setup>
 import Logo from '../Logo/index.vue'
 import Tools from '../Tools/index.vue'
 import useSettingsStore from '@/store/modules/settings'
 import useMenuStore from '@/store/modules/menu'
 
+defineOptions({
+  name: 'Header',
+})
+
 const settingsStore = useSettingsStore()
 const menuStore = useMenuStore()
 

src/layouts/components/Logo/index.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup name="Logo">
+<script lang="ts" setup>
 import imgLogo from '@/assets/images/logo.png'
 import useSettingsStore from '@/store/modules/settings'
 
@@ -13,6 +13,10 @@ defineProps({
   },
 })
 
+defineOptions({
+  name: 'Logo',
+})
+
 const settingsStore = useSettingsStore()
 
 const title = ref(import.meta.env.VITE_APP_TITLE)

src/layouts/components/MainSidebar/index.vue

@@ -1,8 +1,12 @@
-<script lang="ts" setup name="MainSidebar">
+<script lang="ts" setup>
 import Logo from '../Logo/index.vue'
 import useSettingsStore from '@/store/modules/settings'
 import useMenuStore from '@/store/modules/menu'
 
+defineOptions({
+  name: 'MainSidebar',
+})
+
 const settingsStore = useSettingsStore()
 const menuStore = useMenuStore()
 

src/layouts/components/Search/index.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup name="Search">
+<script lang="ts" setup>
 import { cloneDeep } from 'lodash-es'
 import hotkeys from 'hotkeys-js'
 import type { RouteRecordRaw } from 'vue-router'
@@ -8,6 +8,10 @@ import useRouteStore from '@/store/modules/route'
 import useMenuStore from '@/store/modules/menu'
 import type { Menu } from '#/global'
 
+defineOptions({
+  name: 'Search',
+})
+
 const router = useRouter()
 
 const settingsStore = useSettingsStore()

src/layouts/components/SidebarItem/index.vue

@@ -1,5 +1,4 @@
-<script lang="ts" setup name="SidebarItem">
-// import SidebarItem from './index.vue'
+<script lang="ts" setup>
 import { resolveRoutePath } from '@/utils'
 import useSettingsStore from '@/store/modules/settings'
 import type { Menu } from '#/global'
@@ -15,6 +14,10 @@ const props = defineProps({
   },
 })
 
+defineOptions({
+  name: 'SidebarItem',
+})
+
 const settingsStore = useSettingsStore()
 
 const hasChildren = computed(() => {

src/layouts/components/SubSidebar/index.vue

@@ -1,9 +1,13 @@
-<script lang="ts" setup name="SubSidebar">
+<script lang="ts" setup>
 import Logo from '../Logo/index.vue'
 import SidebarItem from '../SidebarItem/index.vue'
 import useSettingsStore from '@/store/modules/settings'
 import useMenuStore from '@/store/modules/menu'
 
+defineOptions({
+  name: 'SubSidebar',
+})
+
 const settingsStore = useSettingsStore()
 const menuStore = useMenuStore()
 

src/layouts/components/Tools/index.vue

@@ -1,9 +1,13 @@
-<script lang="ts" setup name="Tools">
+<script lang="ts" setup>
 import { useFullscreen } from '@vueuse/core'
 import eventBus from '@/utils/eventBus'
 import useSettingsStore from '@/store/modules/settings'
 import useUserStore from '@/store/modules/user'
 
+defineOptions({
+  name: 'Tools',
+})
+
 const router = useRouter()
 
 const settingsStore = useSettingsStore()

src/layouts/components/Topbar/index.vue

@@ -1,8 +1,12 @@
-<script lang="ts" setup name="Topbar">
+<script lang="ts" setup>
 import { compile } from 'path-to-regexp'
 import Tools from '../Tools/index.vue'
 import useSettingsStore from '@/store/modules/settings'
 
+defineOptions({
+  name: 'Topbar',
+})
+
 const route = useRoute()
 
 const settingsStore = useSettingsStore()

src/layouts/components/views/link.vue

@@ -1,4 +1,8 @@
-<script lang="ts" setup name="LinkView">
+<script lang="ts" setup>
+defineOptions({
+  name: 'LinkView',
+})
+
 const route = useRoute()
 
 function open() {

src/layouts/index.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup name="Layout">
+<script lang="ts" setup>
 import hotkeys from 'hotkeys-js'
 import LinkView from './components/views/link.vue'
 import Header from './components/Header/index.vue'
@@ -13,6 +13,10 @@ import useKeepAliveStore from '@/store/modules/keepAlive'
 import useMenuStore from '@/store/modules/menu'
 import eventBus from '@/utils/eventBus'
 
+defineOptions({
+  name: 'Layout',
+})
+
 const routeInfo = useRoute()
 
 const settingsStore = useSettingsStore()

src/views/index.vue

@@ -86,110 +86,89 @@ const oneStepAdminInfo = ref({
     </page-header>
     <el-row :gutter="20" style="margin: 0 10px;">
       <el-col :lg="8">
-        <page-main style="margin: 0;">
-          <div class="ecology vue">
-            <div class="main">
-              <img src="https://cn.vuejs.org/logo.svg" style="width: 30%;">
-              <h1>Fantastic-startkit</h1>
-              <h2>一款开箱即用的 Vue 项目启动套件</h2>
+        <page-main class="ecology vue">
+          <template #title>
+            <div class="title-info">
+              <img src="https://cn.vuejs.org/logo.svg">
               <div>
-                <el-button type="primary" plain @click="open('https://hooray.gitee.io/fantastic-startkit/')">
-                  <template #icon>
-                    <el-icon>
-                      <svg-icon name="ep:link" />
-                    </el-icon>
-                  </template>
-                  访问官网
-                </el-button>
-                <el-button plain @click="open('https://hooray.github.io/fantastic-startkit/')">
-                  <template #icon>
-                    <el-icon>
-                      <svg-icon name="ep:link" />
-                    </el-icon>
-                  </template>
-                  备用地址
-                </el-button>
+                <h1>Fantastic-startkit</h1>
+                <h2>一款开箱即用的 Vue 项目启动套件</h2>
               </div>
             </div>
-            <el-divider border-style="dashed" />
-            <ul>
-              <li v-for="item in fantasticStartkitInfo.feature" :key="item">
-                {{ item }}
-              </li>
-            </ul>
-          </div>
+            <el-dropdown split-button type="primary" @click="open('https://hooray.gitee.io/fantastic-startkit/')">
+              访问官网
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item @click="open('https://hooray.github.io/fantastic-startkit/')">
+                    备用地址
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </template>
+          <ul>
+            <li v-for="item in fantasticStartkitInfo.feature" :key="item">
+              {{ item }}
+            </li>
+          </ul>
         </page-main>
       </el-col>
       <el-col :lg="8">
-        <page-main style="margin: 0;">
-          <div class="ecology fa">
-            <div class="main">
-              <img src="https://hooray.gitee.io/fantastic-admin/logo.png" style="width: 30%;">
-              <h1>Fantastic-admin</h1>
-              <h2>一款开箱即用的 Vue 中后台管理系统框架</h2>
+        <page-main class="ecology fa">
+          <template #title>
+            <div class="title-info">
+              <img src="https://hooray.gitee.io/fantastic-admin/logo.png">
               <div>
-                <el-button type="primary" plain @click="open('https://hooray.gitee.io/fantastic-admin/')">
-                  <template #icon>
-                    <el-icon>
-                      <svg-icon name="ep:link" />
-                    </el-icon>
-                  </template>
-                  访问官网
-                </el-button>
-                <el-button plain @click="open('https://hooray.github.io/fantastic-admin/')">
-                  <template #icon>
-                    <el-icon>
-                      <svg-icon name="ep:link" />
-                    </el-icon>
-                  </template>
-                  备用地址
-                </el-button>
+                <h1>Fantastic-admin</h1>
+                <h2>一款开箱即用的 Vue 中后台管理系统框架</h2>
               </div>
             </div>
-            <el-divider border-style="dashed" />
-            <el-carousel trigger="click" indicator-position="none" :interval="5000" height="250px">
-              <el-carousel-item v-for="(item, index) in fantasticAdminInfo.data" :key="item">
-                <el-image :src="item" fit="cover" style="cursor: pointer; width: 100%; height: 250px; margin: auto;" @click="fantasticAdminInfo.imageVisible = true; fantasticAdminInfo.index = index" />
-              </el-carousel-item>
-            </el-carousel>
-            <el-image-viewer v-if="fantasticAdminInfo.imageVisible" :url-list="fantasticAdminInfo.data" :initial-index="fantasticAdminInfo.index" @close="fantasticAdminInfo.imageVisible = false" />
-          </div>
+            <el-dropdown split-button type="primary" @click="open('https://hooray.gitee.io/fantastic-admin/')">
+              访问官网
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item @click="open('https://hooray.github.io/fantastic-admin/')">
+                    备用地址
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </template>
+          <el-carousel trigger="click" indicator-position="none" :interval="5000" height="250px">
+            <el-carousel-item v-for="(item, index) in fantasticAdminInfo.data" :key="item">
+              <el-image :src="item" fit="cover" style="cursor: pointer; width: 100%; height: 250px; margin: auto;" @click="fantasticAdminInfo.imageVisible = true; fantasticAdminInfo.index = index" />
+            </el-carousel-item>
+          </el-carousel>
+          <el-image-viewer v-if="fantasticAdminInfo.imageVisible" :url-list="fantasticAdminInfo.data" :initial-index="fantasticAdminInfo.index" @close="fantasticAdminInfo.imageVisible = false" />
         </page-main>
       </el-col>
       <el-col :lg="8">
-        <page-main style="margin: 0;">
-          <div class="ecology osa">
-            <div class="main">
-              <img src="https://hooray.gitee.io/one-step-admin/logo.png" style="width: 30%;">
-              <h1>One-step-admin</h1>
-              <h2>一款干啥都快人一步的 Vue 中后台系统框架</h2>
+        <page-main class="ecology osa">
+          <template #title>
+            <div class="title-info">
+              <img src="https://hooray.gitee.io/one-step-admin/logo.png">
               <div>
-                <el-button type="primary" plain @click="open('https://hooray.gitee.io/one-step-admin/')">
-                  <template #icon>
-                    <el-icon>
-                      <svg-icon name="ep:link" />
-                    </el-icon>
-                  </template>
-                  访问官网
-                </el-button>
-                <el-button plain @click="open('https://hooray.github.io/one-step-admin/')">
-                  <template #icon>
-                    <el-icon>
-                      <svg-icon name="ep:link" />
-                    </el-icon>
-                  </template>
-                  备用地址
-                </el-button>
+                <h1>One-step-admin</h1>
+                <h2>一款干啥都快人一步的 Vue 中后台系统框架</h2>
               </div>
             </div>
-            <el-divider border-style="dashed" />
-            <el-carousel trigger="click" indicator-position="none" :interval="5000" height="250px">
-              <el-carousel-item v-for="(item, index) in oneStepAdminInfo.data" :key="item">
-                <el-image :src="item" fit="cover" style="cursor: pointer; width: 100%; height: 250px; margin: auto;" @click="oneStepAdminInfo.imageVisible = true; oneStepAdminInfo.index = index" />
-              </el-carousel-item>
-            </el-carousel>
-            <el-image-viewer v-if="oneStepAdminInfo.imageVisible" :url-list="oneStepAdminInfo.data" :initial-index="oneStepAdminInfo.index" @close="oneStepAdminInfo.imageVisible = false" />
-          </div>
+            <el-dropdown split-button type="primary" @click="open('https://hooray.gitee.io/one-step-admin/')">
+              访问官网
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item @click="open('https://hooray.github.io/one-step-admin/')">
+                    备用地址
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </template>
+          <el-carousel trigger="click" indicator-position="none" :interval="5000" height="250px">
+            <el-carousel-item v-for="(item, index) in oneStepAdminInfo.data" :key="item">
+              <el-image :src="item" fit="cover" style="cursor: pointer; width: 100%; height: 250px; margin: auto;" @click="oneStepAdminInfo.imageVisible = true; oneStepAdminInfo.index = index" />
+            </el-carousel-item>
+          </el-carousel>
+          <el-image-viewer v-if="oneStepAdminInfo.imageVisible" :url-list="oneStepAdminInfo.data" :initial-index="oneStepAdminInfo.index" @close="oneStepAdminInfo.imageVisible = false" />
         </page-main>
       </el-col>
     </el-row>
@@ -224,7 +203,44 @@ const oneStepAdminInfo = ref({
 }
 
 .ecology {
-  padding: 10px 0 0;
+  margin: 0;
+  height: 100%;
+
+  :deep(.title-container) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 20px;
+
+    .title-info {
+      flex: 1 1 400px;
+      display: flex;
+      align-items: center;
+      gap: 20px;
+
+      img {
+        width: 50px;
+        display: block;
+      }
+
+      h1 {
+        margin: 0;
+        font-size: 24px;
+      }
+
+      h2 {
+        margin: 0;
+        font-size: 16px;
+        font-weight: normal;
+        color: var(--el-text-color-secondary);
+      }
+    }
+
+    .el-dropdown {
+      margin-left: auto;
+    }
+  }
 
   &.vue {
     h1 {
@@ -244,27 +260,6 @@ const oneStepAdminInfo = ref({
     }
   }
 
-  .main {
-    text-align: center;
-
-    img {
-      display: block;
-      margin: 0 auto;
-    }
-
-    h1 {
-      margin: 10px auto 0;
-      text-align: center;
-    }
-
-    h2 {
-      font-size: 16px;
-      font-weight: normal;
-      color: var(--el-text-color-secondary);
-      text-align: center;
-    }
-  }
-
   .el-carousel {
     box-shadow: var(--el-box-shadow-light);
     transition: var(--el-transition-box-shadow);

src/views/login.vue

@@ -5,11 +5,15 @@ meta:
   layout: false
 </route>
 
-<script lang="ts" setup name="Login">
+<script lang="ts" setup>
 import type { FormInstance, FormRules } from 'element-plus'
 import { ElMessage } from 'element-plus'
 import useUserStore from '@/store/modules/user'
 
+defineOptions({
+  name: 'Login',
+})
+
 const route = useRoute()
 const router = useRouter()
 

src/views/personal/edit.password.vue

@@ -4,11 +4,15 @@ meta:
   title: 修改密码
 </route>
 
-<script lang="ts" setup name="PersonalEditPassword">
+<script lang="ts" setup>
 import type { FormInstance, FormRules } from 'element-plus'
 import { ElMessage } from 'element-plus'
 import useUserStore from '@/store/modules/user'
 
+defineOptions({
+  name: 'PersonalEditPassword',
+})
+
 const userStore = useUserStore()
 
 const formRef = ref<FormInstance>()

src/views/personal/setting.vue

@@ -5,10 +5,14 @@ meta:
   cache: personal-edit.password
 </route>
 
-<script lang="ts" setup name="PersonalSetting">
+<script lang="ts" setup>
 import type { UploadProps } from 'element-plus'
 import { ElMessage } from 'element-plus'
 
+defineOptions({
+  name: 'PersonalSetting',
+})
+
 const router = useRouter()
 
 const form = ref({