chore: release v2.3.0

从原有 /dashboard 路由调整为 / 根路由

.github/workflows/release.yml

@@ -42,7 +42,7 @@ jobs:
         with:
           type: 'zip'
           filename: fantastic-admin.${{ steps.last_release.outputs.tag_name }}.zip
-          exclusions: '*.git*'
+          exclusions: '/.git/* /.github/*'
 
       - name: Upload Archive To Release
         uses: xresloader/upload-to-github-release@v1
@@ -75,7 +75,7 @@ jobs:
         with:
           type: 'zip'
           filename: fantastic-admin.example.${{ steps.last_release.outputs.tag_name }}.zip
-          exclusions: '*.git*'
+          exclusions: '/.git/* /.github/*'
 
       - name: Upload Archive To Release
         uses: xresloader/upload-to-github-release@v1

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.1.1",
+  "version": "2.3.0",
   "scripts": {
     "dev": "vite",
     "build:test": "vue-tsc --noEmit && vite build --mode test",
@@ -19,26 +19,26 @@
   },
   "dependencies": {
     "@tinymce/tinymce-vue": "^5.0.0",
-    "@vueuse/core": "^9.5.0",
-    "@vueuse/integrations": "^9.5.0",
-    "axios": "^1.1.3",
+    "@vueuse/core": "^9.6.0",
+    "@vueuse/integrations": "^9.6.0",
+    "axios": "^1.2.0",
     "dayjs": "^1.11.6",
-    "element-plus": "^2.2.20",
-    "hotkeys-js": "^3.10.0",
+    "element-plus": "^2.2.25",
+    "hotkeys-js": "^3.10.1",
     "lodash-es": "^4.17.21",
     "mitt": "^3.0.0",
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
     "path-browserify": "^1.0.1",
     "path-to-regexp": "^6.2.1",
-    "pinia": "^2.0.23",
+    "pinia": "^2.0.26",
     "qs": "^6.11.0",
-    "tinymce": "^6.2.0",
-    "vue": "^3.2.44",
+    "tinymce": "^6.3.0",
+    "vue": "^3.2.45",
     "vue-router": "^4.1.6"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.29.4",
+    "@antfu/eslint-config": "^0.31.0",
     "@iconify-json/ep": "^1.1.8",
     "@iconify/vue": "^4.0.0",
     "@types/nprogress": "^0.2.0",
@@ -49,26 +49,26 @@
     "autoprefixer": "^10.4.13",
     "bumpp": "^8.2.1",
     "cz-git": "^1.3.12",
-    "eslint": "^8.27.0",
+    "eslint": "^8.28.0",
     "esno": "^0.16.3",
     "fs-extra": "^10.1.0",
     "http-server": "^14.1.1",
-    "lint-staged": "^13.0.3",
+    "lint-staged": "^13.0.4",
     "npm-run-all": "^4.1.5",
     "plop": "^3.1.1",
     "postcss-html": "^1.5.0",
     "sass": "^1.56.1",
     "simple-git-hooks": "^2.8.1",
-    "stylelint": "^14.14.1",
+    "stylelint": "^14.15.0",
     "stylelint-config-standard": "^29.0.0",
     "stylelint-config-standard-scss": "^6.1.0",
     "stylelint-config-standard-vue": "^1.0.0",
     "stylelint-scss": "^4.3.0",
-    "svgo": "^3.0.0",
-    "typescript": "^4.8.4",
-    "unplugin-auto-import": "^0.11.4",
-    "unplugin-vue-components": "^0.22.9",
-    "vite": "^3.2.3",
+    "svgo": "^3.0.2",
+    "typescript": "^4.9.3",
+    "unplugin-auto-import": "^0.12.0",
+    "unplugin-vue-components": "^0.22.11",
+    "vite": "^3.2.4",
     "vite-plugin-banner": "^0.6.1",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-html": "^3.2.0",

src/App.vue

@@ -67,14 +67,12 @@ watch([
   () => settingsStore.title,
 ], () => {
   if (settingsStore.app.enableDynamicTitle && settingsStore.title) {
-    const title = settingsStore.title
+    const title = typeof settingsStore.title === 'function' ? settingsStore.title() : settingsStore.title
     document.title = `${title} - ${import.meta.env.VITE_APP_TITLE}`
   }
   else {
     document.title = import.meta.env.VITE_APP_TITLE
   }
-}, {
-  immediate: true,
 })
 
 onMounted(() => {

src/components/PageHeader/index.vue

@@ -9,6 +9,8 @@ defineProps({
     default: '',
   },
 })
+
+const slots = useSlots()
 </script>
 
 <template>
@@ -23,7 +25,7 @@ defineProps({
         </slot>
       </div>
     </div>
-    <div class="sub">
+    <div v-if="slots.default" class="sub">
       <slot />
     </div>
   </div>
@@ -65,4 +67,15 @@ defineProps({
     flex: none;
   }
 }
+
+[data-mode="mobile"] {
+  .header {
+    flex-direction: column;
+
+    .main {
+      margin-right: auto;
+      margin-bottom: 20px;
+    }
+  }
+}
 </style>

src/global.d.ts

@@ -52,15 +52,15 @@ declare namespace Settings {
      */
     routeBaseOn?: 'frontend' | 'backend' | 'filesystem'
   }
-  interface dashboard {
+  interface home {
     /**
-     * 是否开启控制台页面
+     * 是否开启主页页面
      * @默认值 `true`
      */
     enable?: boolean
     /**
-     * 控制台名称
-     * @默认值 `'控制台'`
+     * 主页名称
+     * @默认值 `'主页'`
      */
     title?: string
   }
@@ -189,8 +189,8 @@ declare namespace Settings {
   interface all {
     /** 应用设置 */
     app?: app
-    /** 控制台设置 */
-    dashboard?: dashboard
+    /** 主页设置 */
+    home?: home
     /** 布局设置 */
     layout?: layout
     /** 导航栏设置 */
@@ -210,7 +210,7 @@ declare namespace Settings {
 
 declare module 'vue-router' {
   interface RouteMeta {
-    title: string | Function
+    title?: string | Function
     i18n?: string
     icon?: string
     activeIcon?: string
@@ -225,12 +225,8 @@ declare module 'vue-router' {
 }
 
 declare namespace Route {
-  interface recordRaw extends Omit<RouteRecordRaw, 'meta' | 'children'> {
-    meta: RouteMeta
-    children?: recordRaw[]
-  }
   interface recordMainRaw {
-    meta: {
+    meta?: {
       title?: string | Function
       icon?: string
       auth?: string | string[]
@@ -239,7 +235,7 @@ declare namespace Route {
   }
   interface breadcrumb {
     path: string
-    title: string | Function
+    title?: string | Function
     hide: boolean
   }
 }
@@ -248,8 +244,8 @@ declare namespace Menu {
   /** 原始 */
   interface recordRaw {
     path?: string
-    meta: {
-      title: string
+    meta?: {
+      title?: string
       icon?: string
       defaultOpened?: boolean
       auth?: string | string[]
@@ -259,7 +255,7 @@ declare namespace Menu {
   }
   /** 主导航 */
   interface recordMainRaw {
-    meta: {
+    meta?: {
       title?: string
       icon?: string
       auth?: string | string[]

src/layouts/components/AppSetting/index.vue

@@ -226,23 +226,23 @@ function handleCopy() {
         </div>
         <el-input v-model="settingsStore.copyright.beian" size="small" :disabled="!settingsStore.copyright.enable" />
       </div>
-      <el-divider>控制台</el-divider>
+      <el-divider>主页</el-divider>
       <div class="setting-item">
         <div class="label">
           是否开启
-          <el-tooltip content="该功能开启时，登录成功默认进入控制台页面，反之则默认进入导航栏里第一个导航页面" placement="top">
+          <el-tooltip content="该功能开启时，登录成功默认进入主页，反之则默认进入导航栏里第一个导航页面" placement="top">
             <el-icon>
               <svg-icon name="ep:question-filled" />
             </el-icon>
           </el-tooltip>
         </div>
-        <el-switch v-model="settingsStore.dashboard.enable" />
+        <el-switch v-model="settingsStore.home.enable" />
       </div>
       <div class="setting-item">
         <div class="label">
-          控制台名称
+          主页名称
         </div>
-        <el-input v-model="settingsStore.dashboard.title" size="small" />
+        <el-input v-model="settingsStore.home.title" size="small" />
       </div>
       <el-divider>其它</el-divider>
       <div class="setting-item">

src/layouts/components/Header/index.vue

@@ -30,10 +30,10 @@ function handlerMouserScroll(event: WheelEvent) {
             <template v-for="(item, index) in menuStore.allMenus" :key="index">
               <div v-if="item.children && item.children.length !== 0" class="item-container" :class="{ active: index === menuStore.actived }">
                 <div class="item" @click="switchTo(index)">
-                  <el-icon>
-                    <svg-icon v-if="item.meta.icon" :name="item.meta.icon" />
+                  <el-icon v-if="item.meta?.icon">
+                    <svg-icon :name="item.meta.icon" />
                   </el-icon>
-                  <span v-if="item.meta.title">{{ item.meta.title }}</span>
+                  <span v-if="item.meta?.title">{{ item.meta.title }}</span>
                 </div>
               </div>
             </template>

src/layouts/components/Logo/index.vue

@@ -22,15 +22,15 @@ const to = computed(() => {
   const rtn: {
     name?: string
   } = {}
-  if (settingsStore.dashboard.enable) {
-    rtn.name = 'dashboard'
+  if (settingsStore.home.enable) {
+    rtn.name = 'home'
   }
   return rtn
 })
 </script>
 
 <template>
-  <router-link :to="to" class="title" :class="{ 'is-link': settingsStore.dashboard.enable }" :title="title">
+  <router-link :to="to" class="title" :class="{ 'is-link': settingsStore.home.enable }" :title="title">
     <img v-if="showLogo" :src="logo" class="logo">
     <span v-if="showTitle">{{ title }}</span>
   </router-link>

src/layouts/components/MainSidebar/index.vue

@@ -19,12 +19,12 @@ const { switchTo } = useMenu()
           <div
             v-if="item.children && item.children.length !== 0" :key="index" class="item" :class="{
               active: index === menuStore.actived,
-            }" :title="item.meta.title" @click="switchTo(index)"
+            }" :title="item.meta?.title ?? '[ 无标题 ]'" @click="switchTo(index)"
           >
-            <el-icon>
-              <svg-icon v-if="item.meta.icon" :name="item.meta.icon" />
+            <el-icon v-if="item.meta?.icon">
+              <svg-icon :name="item.meta.icon" />
             </el-icon>
-            <span>{{ item.meta.title }}</span>
+            <span>{{ item.meta?.title ?? '[ 无标题 ]' }}</span>
           </div>
         </template>
       </div>

src/layouts/components/Search/index.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup name="Search">
 import { cloneDeep } from 'lodash-es'
 import hotkeys from 'hotkeys-js'
+import type { RouteRecordRaw } from 'vue-router'
 import { isExternalLink } from '@/utils'
 import eventBus from '@/utils/eventBus'
 import useSettingsStore from '@/store/modules/settings'
@@ -16,8 +17,8 @@ const menuStore = useMenuStore()
 
 interface listTypes {
   icon?: string
-  title: string
-  breadcrumb: string[]
+  title?: string | Function
+  breadcrumb: (string | Function | undefined)[]
   path: string
 }
 
@@ -38,13 +39,37 @@ const resultList = computed(() => {
   let result = []
   result = sourceList.value.filter((item) => {
     let flag = false
-    if (item.title.includes(searchInput.value)) {
-      flag = true
+    if (item.title) {
+      if (typeof item.title === 'function') {
+        if (item.title().includes(searchInput.value)) {
+          flag = true
+        }
+      }
+      else {
+        if (item.title.includes(searchInput.value)) {
+          flag = true
+        }
+      }
     }
     if (item.path.includes(searchInput.value)) {
       flag = true
     }
-    if (item.breadcrumb.some(b => b.includes(searchInput.value))) {
+    if (item.breadcrumb.some((b) => {
+      let flag = false
+      if (b) {
+        if (typeof b === 'function') {
+          if (b().includes(searchInput.value)) {
+            flag = true
+          }
+        }
+        else {
+          if (b.includes(searchInput.value)) {
+            flag = true
+          }
+        }
+      }
+      return flag
+    })) {
       flag = true
     }
     return flag
@@ -109,23 +134,23 @@ onMounted(() => {
   }
 })
 
-function hasChildren(item: Route.recordRaw) {
+function hasChildren(item: RouteRecordRaw) {
   let flag = true
-  if (item.children && item.children.every(i => i.meta.sidebar === false)) {
+  if (item.children?.every(i => i.meta?.sidebar === false)) {
     flag = false
   }
   return flag
 }
-function getSourceList(arr: Route.recordRaw[], basePath?: string, icon?: string, breadcrumb?: string[]) {
+function getSourceList(arr: RouteRecordRaw[], basePath?: string, icon?: string, breadcrumb?: (string | Function | undefined)[]) {
   arr.forEach((item) => {
-    if (item.meta.sidebar !== false) {
+    if (item.meta?.sidebar !== false) {
       const breadcrumbTemp = cloneDeep(breadcrumb) || []
       if (item.children && hasChildren(item)) {
-        breadcrumbTemp.push(typeof item.meta.title === 'function' ? item.meta.title() : item.meta.title)
-        getSourceList(item.children, basePath ? [basePath, item.path].join('/') : item.path, item.meta.icon || icon, breadcrumbTemp)
+        breadcrumbTemp.push(item.meta?.title)
+        getSourceList(item.children, basePath ? [basePath, item.path].join('/') : item.path, item.meta?.icon ?? icon, breadcrumbTemp)
       }
       else {
-        breadcrumbTemp.push(typeof item.meta.title === 'function' ? item.meta.title() : item.meta.title)
+        breadcrumbTemp.push(item.meta?.title)
         let path = ''
         if (isExternalLink(item.path)) {
           path = item.path
@@ -134,8 +159,8 @@ function getSourceList(arr: Route.recordRaw[], basePath?: string, icon?: string,
           path = basePath ? [basePath, item.path].join('/') : item.path
         }
         sourceList.value.push({
-          icon: item.meta.icon || icon,
-          title: typeof item.meta.title === 'function' ? item.meta.title() : item.meta.title,
+          icon: item.meta?.icon ?? icon,
+          title: item.meta?.title,
           breadcrumb: breadcrumbTemp,
           path,
         })
@@ -143,18 +168,18 @@ function getSourceList(arr: Route.recordRaw[], basePath?: string, icon?: string,
     }
   })
 }
-function getSourceListByMenus(arr: Menu.recordRaw[], icon?: string, breadcrumb?: string[]) {
+function getSourceListByMenus(arr: Menu.recordRaw[], icon?: string, breadcrumb?: (string | Function | undefined)[]) {
   arr.forEach((item) => {
     const breadcrumbTemp = cloneDeep(breadcrumb) || []
     if (item.children && item.children.length > 0) {
-      breadcrumbTemp.push(item.meta.title)
-      getSourceListByMenus(item.children, item.meta.icon, breadcrumbTemp)
+      breadcrumbTemp.push(item.meta?.title)
+      getSourceListByMenus(item.children, item.meta?.icon ?? icon, breadcrumbTemp)
     }
     else {
-      breadcrumbTemp.push(item.meta.title)
+      breadcrumbTemp.push(item.meta?.title)
       sourceList.value.push({
-        icon: item.meta.icon || icon,
-        title: item.meta.title,
+        icon: item.meta?.icon ?? icon,
+        title: item.meta?.title,
         path: item.path as string,
         breadcrumb: breadcrumbTemp,
       })
@@ -265,11 +290,11 @@ function pageJump(url: string) {
           </el-icon>
           <div class="info">
             <div class="title">
-              {{ item.title }}
+              {{ item.title ?? '[ 无标题 ]' }}
             </div>
             <div class="breadcrumb">
               <span v-for="(bc, bcIndex) in item.breadcrumb" :key="bcIndex">
-                {{ bc }}
+                {{ bc ?? '[ 无标题 ]' }}
                 <el-icon>
                   <svg-icon name="ep:arrow-right" />
                 </el-icon>

src/layouts/components/SidebarItem/index.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup name="SidebarItem">
 // import SidebarItem from './index.vue'
 import { isExternalLink, resolveRoutePath } from '@/utils'
+import useSettingsStore from '@/store/modules/settings'
 import type { Menu } from '@/global'
 
 const props = defineProps({
@@ -14,10 +15,12 @@ const props = defineProps({
   },
 })
 
+const settingsStore = useSettingsStore()
+
 const hasChildren = computed(() => {
   let flag = true
   if (props.item.children) {
-    if (props.item.children.every(item => item.meta.sidebar === false)) {
+    if (props.item.children.every(item => item.meta?.sidebar === false)) {
       flag = false
     }
   }
@@ -32,23 +35,23 @@ const hasChildren = computed(() => {
   <div class="sidebar-item">
     <router-link v-if="!hasChildren" v-slot="{ href, navigate, isActive, isExactActive }" custom :to="resolveRoutePath(basePath, item.path || '')">
       <a :href="isExternalLink(resolveRoutePath(basePath, item.path || '')) ? resolveRoutePath(basePath, item.path || '') : href" :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']" :target="isExternalLink(resolveRoutePath(basePath, item.path || '')) ? '_blank' : '_self'" @click="navigate">
-        <el-menu-item :title="item.meta.title" :index="resolveRoutePath(basePath, item.path || '')">
-          <el-icon v-if="item.meta.icon" class="title-icon">
+        <el-menu-item :title="item.meta?.title ?? '[ 无标题 ]'" :index="resolveRoutePath(basePath, item.path || '')">
+          <el-icon v-if="item.meta?.icon" class="title-icon">
             <svg-icon :name="item.meta.icon" />
           </el-icon>
-          <span class="title">{{ item.meta.title }}</span>
+          <span class="title">{{ item.meta?.title ?? '[ 无标题 ]' }}</span>
         </el-menu-item>
       </a>
     </router-link>
-    <el-sub-menu v-else :title="item.meta.title" :index="resolveRoutePath(basePath, item.path || '')">
+    <el-sub-menu v-else :title="item.meta?.title ?? '[ 无标题 ]'" :index="settingsStore.app.routeBaseOn !== 'filesystem' ? resolveRoutePath(basePath, item.path || '') : JSON.stringify(item)">
       <template #title>
-        <el-icon v-if="item.meta.icon" class="title-icon">
+        <el-icon v-if="item.meta?.icon" class="title-icon">
           <svg-icon :name="item.meta.icon" />
         </el-icon>
-        <span class="title">{{ item.meta.title }}</span>
+        <span class="title">{{ item.meta?.title ?? '[ 无标题 ]' }}</span>
       </template>
       <template v-for="route in item.children">
-        <SidebarItem v-if="route.meta.sidebar !== false" :key="route.path" :item="route" :base-path="resolveRoutePath(basePath, item.path || '')" />
+        <SidebarItem v-if="route.meta?.sidebar !== false" :key="route.path" :item="route" :base-path="resolveRoutePath(basePath, item.path || '')" />
       </template>
     </el-sub-menu>
   </div>

src/layouts/components/SubSidebar/index.vue

@@ -30,7 +30,7 @@ function onSidebarScroll(e: Event) {
     >
       <transition-group name="sub-sidebar">
         <template v-for="(route, index) in menuStore.sidebarMenus">
-          <SidebarItem v-if="route.meta.sidebar !== false" :key="route.path || index" :item="route" :base-path="route.path" />
+          <SidebarItem v-if="route.meta?.sidebar !== false" :key="route.path || index" :item="route" :base-path="route.path" />
         </template>
       </transition-group>
     </el-menu>

src/layouts/components/Tools/index.vue

@@ -12,11 +12,11 @@ const userStore = useUserStore()
 const mainPage = useMainPage()
 const { isFullscreen, toggle } = useFullscreen()
 
-function userCommand(command: 'dashboard' | 'setting' | 'hotkeys' | 'logout') {
+function userCommand(command: 'home' | 'setting' | 'hotkeys' | 'logout') {
   switch (command) {
-    case 'dashboard':
+    case 'home':
       router.push({
-        name: 'dashboard',
+        name: 'home',
       })
       break
     case 'setting':
@@ -85,8 +85,8 @@ function pro() {
       </div>
       <template #dropdown>
         <el-dropdown-menu class="user-dropdown">
-          <el-dropdown-item v-if="settingsStore.dashboard.enable" command="dashboard">
-            控制台
+          <el-dropdown-item v-if="settingsStore.home.enable" command="home">
+            {{ settingsStore.home.title }}
           </el-dropdown-item>
           <el-dropdown-item command="setting">
             个人设置

src/layouts/components/Topbar/index.vue

@@ -16,10 +16,10 @@ const enableSubMenuCollapseButton = computed(() => {
 
 const breadcrumbList = computed(() => {
   const breadcrumbList = []
-  if (settingsStore.dashboard.enable) {
+  if (settingsStore.home.enable) {
     breadcrumbList.push({
-      path: '/dashboard',
-      title: settingsStore.dashboard.title,
+      path: '/',
+      title: settingsStore.home.title,
     })
   }
   if (route.meta.breadcrumbNeste) {
@@ -61,7 +61,7 @@ function pathCompile(path: string) {
       <el-breadcrumb v-if="settingsStore.breadcrumb.enable && settingsStore.mode === 'pc' && settingsStore.app.routeBaseOn !== 'filesystem'">
         <transition-group name="breadcrumb">
           <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="item.path" :to="index < breadcrumbList.length - 1 ? pathCompile(item.path) : ''">
-            {{ item.title }}
+            {{ item.title ?? '[ 无标题 ]' }}
           </el-breadcrumb-item>
         </transition-group>
       </el-breadcrumb>

src/menu/modules/multilevel.menu.example.ts

@@ -3,7 +3,7 @@ import type { Menu } from '@/global'
 const menus: Menu.recordRaw = {
   meta: {
     title: '多级导航',
-    icon: 'heroicons-solid:menu-alt-3',
+    icon: 'sidebar-menu',
   },
   children: [
     {

src/router/index.ts

@@ -30,22 +30,22 @@ router.beforeEach(async (to, from, next) => {
     if (routeStore.isGenerate) {
       // 导航栏如果不是 single 模式，则需要根据 path 定位主导航的选中状态
       settingsStore.menu.menuMode !== 'single' && menuStore.setActived(to.path)
-      // 如果已登录状态下，进入登录页会强制跳转到控制台页面
+      // 如果已登录状态下，进入登录页会强制跳转到主页
       if (to.name === 'login') {
         next({
-          name: 'dashboard',
+          name: 'home',
           replace: true,
         })
       }
-      // 如果未开启控制台，但进入的是控制台页面，则会进入侧边栏导航第一个模块
-      else if (!settingsStore.dashboard.enable && to.name === 'dashboard') {
+      // 如果未开启主页，但进入的是主页，则会进入侧边栏导航第一个模块
+      else if (!settingsStore.home.enable && to.name === 'home') {
         if (menuStore.sidebarMenus.length > 0) {
           next({
             path: menuStore.sidebarMenusFirstDeepestPath,
             replace: true,
           })
         }
-        // 如果侧边栏导航第一个模块无法命中，则还是进入控制台页面
+        // 如果侧边栏导航第一个模块无法命中，则还是进入主页
         else {
           next()
         }
@@ -104,7 +104,7 @@ router.beforeEach(async (to, from, next) => {
       next({
         name: 'login',
         query: {
-          redirect: to.fullPath,
+          redirect: to.fullPath !== '/' ? to.fullPath : undefined,
         },
       })
     }
@@ -119,7 +119,12 @@ router.afterEach((to, from) => {
   const keepAliveStore = useKeepAliveStore()
   settingsStore.app.enableProgress && (isLoading.value = false)
   // 设置页面 title
-  to.meta.title && settingsStore.setTitle(typeof to.meta.title === 'function' ? to.meta.title() : to.meta.title)
+  if (settingsStore.app.routeBaseOn !== 'filesystem') {
+    settingsStore.setTitle(to.meta.breadcrumbNeste?.at(-1)?.title)
+  }
+  else {
+    settingsStore.setTitle(to.meta.title)
+  }
   // 判断当前页面是否开启缓存，如果开启，则将当前页面的 name 信息存入 keep-alive 全局状态
   if (to.meta.cache) {
     const componentName = to.matched.at(-1)?.components?.default.name

src/router/modules/breadcrumb.example.ts

@@ -1,8 +1,8 @@
-import type { Route } from '@/global'
+import type { RouteRecordRaw } from 'vue-router'
 
 const Layout = () => import('@/layouts/index.vue')
 
-const routes: Route.recordRaw = {
+const routes: RouteRecordRaw = {
   path: '/breadcrumb_example',
   component: Layout,
   redirect: '/breadcrumb_example/list1',

src/router/modules/multilevel.menu.example.ts

@@ -1,8 +1,8 @@
-import type { Route } from '@/global'
+import type { RouteRecordRaw } from 'vue-router'
 
 const Layout = () => import('@/layouts/index.vue')
 
-const routes: Route.recordRaw = {
+const routes: RouteRecordRaw = {
   path: '/multilevel_menu_example',
   component: Layout,
   redirect: '/multilevel_menu_example/page',

src/router/routes.ts

@@ -1,19 +1,13 @@
 import { setupLayouts } from 'virtual:generated-layouts'
 import generatedRoutes from 'virtual:generated-pages'
+import type { RouteRecordRaw } from 'vue-router'
 import MultilevelMenuExample from './modules/multilevel.menu.example'
 import BreadcrumbExample from './modules/breadcrumb.example'
 import type { Route } from '@/global'
 import useSettingsStore from '@/store/modules/settings'
 
 // 固定路由（默认路由）
-const constantRoutes: Route.recordRaw[] = [
-  {
-    path: '/',
-    redirect: '/dashboard',
-    meta: {
-      title: '',
-    },
-  },
+const constantRoutes: RouteRecordRaw[] = [
   {
     path: '/login',
     name: 'login',
@@ -33,35 +27,33 @@ const constantRoutes: Route.recordRaw[] = [
 ]
 
 // 系统路由
-const systemRoutes: Route.recordRaw[] = [
+const systemRoutes: RouteRecordRaw[] = [
   {
-    path: '/dashboard',
+    path: '/',
     component: () => import('@/layouts/index.vue'),
     meta: {
-      title: () => useSettingsStore().dashboard.title,
+      title: () => useSettingsStore().home.title,
       breadcrumb: false,
     },
     children: [
       {
         path: '',
-        name: 'dashboard',
+        name: 'home',
         component: () => import('@/views/index.vue'),
         meta: {
-          title: () => useSettingsStore().dashboard.title,
+          title: () => useSettingsStore().home.title,
+          breadcrumb: false,
+        },
+      },
+      {
+        path: 'reload',
+        name: 'reload',
+        component: () => import('@/views/reload.vue'),
+        meta: {
+          title: '重新加载',
           breadcrumb: false,
         },
       },
-    ],
-  },
-  {
-    path: '/personal',
-    component: () => import('@/layouts/index.vue'),
-    redirect: '/personal/setting',
-    meta: {
-      title: '个人中心',
-      breadcrumb: false,
-    },
-    children: [
       {
         path: 'setting',
         name: 'personalSetting',
@@ -81,25 +73,6 @@ const systemRoutes: Route.recordRaw[] = [
       },
     ],
   },
-  {
-    path: '/reload',
-    component: () => import('@/layouts/index.vue'),
-    meta: {
-      title: '重新加载',
-      breadcrumb: false,
-    },
-    children: [
-      {
-        path: '',
-        name: 'reload',
-        component: () => import('@/views/reload.vue'),
-        meta: {
-          title: '重新加载',
-          breadcrumb: false,
-        },
-      },
-    ],
-  },
 ]
 
 // 动态路由（异步路由、导航栏路由）
@@ -122,7 +95,7 @@ const constantRoutesByFilesystem = generatedRoutes.filter((item) => {
 
 const asyncRoutesByFilesystem = setupLayouts(generatedRoutes.filter((item) => {
   return item.meta?.enabled !== false && item.meta?.constant !== true && item.meta?.layout !== false
-})) as Route.recordRaw[]
+}))
 
 export {
   constantRoutes,

src/settings.default.ts

@@ -12,9 +12,9 @@ const globalSettingsDefault: RecursiveRequired<Settings.all> = {
     enableDynamicTitle: false,
     routeBaseOn: 'frontend',
   },
-  dashboard: {
+  home: {
     enable: true,
-    title: '控制台',
+    title: '主页',
   },
   layout: {
     enableMobileAdaptation: false,

src/store/modules/menu.ts

@@ -12,13 +12,9 @@ function getDeepestPath(menu: Menu.recordRaw, rootPath = '') {
   let retnPath = ''
   if (menu.path !== undefined) {
     if (menu.children) {
-      if (
-        menu.children.some((item) => {
-          return item.meta.sidebar !== false
-        })
-      ) {
+      if (menu.children.some(item => item.meta?.sidebar !== false)) {
         for (let i = 0; i < menu.children.length; i++) {
-          if (menu.children[i].meta.sidebar !== false) {
+          if (menu.children[i].meta?.sidebar !== false) {
             retnPath = getDeepestPath(menu.children[i], resolveRoutePath(rootPath, menu.path))
             break
           }
@@ -39,9 +35,9 @@ function hasPermission(permissions: string[], menu: Menu.recordMainRaw | Menu.re
   let isAuth = false
   if (menu.meta && menu.meta.auth) {
     isAuth = permissions.some((auth) => {
-      return typeof menu.meta.auth === 'string'
+      return typeof menu.meta?.auth === 'string'
         ? menu.meta.auth === auth
-        : typeof menu.meta.auth === 'object'
+        : typeof menu.meta?.auth === 'object'
           ? menu.meta.auth.includes(auth)
           : false
     })
@@ -72,7 +68,7 @@ function filterAsyncMenus<T extends Menu.recordMainRaw[] | Menu.recordRaw[]>(men
 function getDefaultOpenedPaths(menus: Menu.recordRaw[], rootPath = '') {
   const defaultOpenedPaths: string[] = []
   menus.forEach((item) => {
-    if (item.path && item.meta.defaultOpened && item.children) {
+    if (item.path && item.meta?.defaultOpened && item.children) {
       defaultOpenedPaths.push(resolveRoutePath(rootPath, item.path))
       const childrenDefaultOpenedPaths = getDefaultOpenedPaths(item.children, resolveRoutePath(rootPath, item.path))
       if (childrenDefaultOpenedPaths.length > 0) {

src/store/modules/route.ts

@@ -1,4 +1,5 @@
 import { cloneDeep } from 'lodash-es'
+import type { RouteRecordRaw } from 'vue-router'
 import useSettingsStore from './settings'
 import useUserStore from './user'
 import api from '@/api'
@@ -6,13 +7,13 @@ import { resolveRoutePath } from '@/utils'
 import { systemRoutes } from '@/router/routes'
 import type { Route } from '@/global'
 
-function hasPermission(permissions: string[], route: Route.recordMainRaw | Route.recordRaw) {
+function hasPermission(permissions: string[], route: Route.recordMainRaw | RouteRecordRaw) {
   let isAuth = false
   if (route.meta?.auth) {
     isAuth = permissions.some((auth) => {
-      return typeof route.meta.auth === 'string'
+      return typeof route.meta?.auth === 'string'
         ? route.meta.auth === auth
-        : typeof route.meta.auth === 'object'
+        : typeof route.meta?.auth === 'object'
           ? route.meta.auth.includes(auth)
           : false
     })
@@ -23,7 +24,7 @@ function hasPermission(permissions: string[], route: Route.recordMainRaw | Route
   return isAuth
 }
 
-function filterAsyncRoutes<T extends Route.recordMainRaw[] | Route.recordRaw[]>(routes: T, permissions: string[]): T {
+function filterAsyncRoutes<T extends Route.recordMainRaw[] | RouteRecordRaw[]>(routes: T, permissions: string[]): T {
   const res: any = []
   routes.forEach((route) => {
     if (hasPermission(permissions, route)) {
@@ -59,31 +60,34 @@ function formatBackRoutes(routes: any, views = import.meta.glob('../../views/**/
 }
 
 // 将多层嵌套路由处理成两层，保留顶层和最子层路由，中间层级将被拍平
-function flatAsyncRoutes<T extends Route.recordRaw>(routes: T): T {
+function flatAsyncRoutes<T extends RouteRecordRaw>(routes: T): T {
   if (routes.children) {
     routes.children = flatAsyncRoutesRecursive(routes.children, [{
       path: routes.path,
-      title: routes.meta.title,
-      hide: !routes.meta.breadcrumb && routes.meta.breadcrumb === false,
+      title: routes.meta?.title,
+      hide: !routes.meta?.breadcrumb && routes.meta?.breadcrumb === false,
     }], routes.path)
   }
   return routes
 }
-function flatAsyncRoutesRecursive(routes: Route.recordRaw[], breadcrumb: Route.breadcrumb[] = [], baseUrl = ''): Route.recordRaw[] {
-  const res: Route.recordRaw[] = []
+function flatAsyncRoutesRecursive(routes: RouteRecordRaw[], breadcrumb: Route.breadcrumb[] = [], baseUrl = ''): RouteRecordRaw[] {
+  const res: RouteRecordRaw[] = []
   routes.forEach((route) => {
     if (route.children) {
       const childrenBaseUrl = resolveRoutePath(baseUrl, route.path)
       const tmpBreadcrumb = cloneDeep(breadcrumb)
-      if (route.meta.breadcrumb !== false) {
+      if (route.meta?.breadcrumb !== false) {
         tmpBreadcrumb.push({
           path: childrenBaseUrl,
-          title: route.meta.title,
-          hide: !route.meta.breadcrumb && route.meta.breadcrumb === false,
+          title: route.meta?.title,
+          hide: !route.meta?.breadcrumb,
         })
       }
       const tmpRoute = cloneDeep(route)
       tmpRoute.path = childrenBaseUrl
+      if (!tmpRoute.meta) {
+        tmpRoute.meta = {}
+      }
       tmpRoute.meta.breadcrumbNeste = tmpBreadcrumb
       delete tmpRoute.children
       res.push(tmpRoute)
@@ -109,9 +113,12 @@ function flatAsyncRoutesRecursive(routes: Route.recordRaw[], breadcrumb: Route.b
       const tmpBreadcrumb = cloneDeep(breadcrumb)
       tmpBreadcrumb.push({
         path: tmpRoute.path,
-        title: tmpRoute.meta.title,
-        hide: !tmpRoute.meta.breadcrumb && tmpRoute.meta.breadcrumb === false,
+        title: tmpRoute.meta?.title,
+        hide: !tmpRoute.meta?.breadcrumb && tmpRoute.meta?.breadcrumb === false,
       })
+      if (!tmpRoute.meta) {
+        tmpRoute.meta = {}
+      }
       tmpRoute.meta.breadcrumbNeste = tmpBreadcrumb
       res.push(tmpRoute)
     }
@@ -126,14 +133,14 @@ const useRouteStore = defineStore(
     state: () => ({
       isGenerate: false,
       routes: [] as Route.recordMainRaw[],
-      fileSystemRoutes: [] as Route.recordRaw[],
+      fileSystemRoutes: [] as RouteRecordRaw[],
       currentRemoveRoutes: [] as Function[],
     }),
     getters: {
       // 扁平化路由（将三级及以上路由数据拍平成二级）
       flatRoutes: (state) => {
         const settingsStore = useSettingsStore()
-        const routes: Route.recordRaw[] = []
+        const routes: RouteRecordRaw[] = []
         if (state.routes) {
           if (settingsStore.app.routeBaseOn !== 'filesystem') {
             state.routes.forEach((item) => {
@@ -171,7 +178,7 @@ const useRouteStore = defineStore(
           }
           // 设置 routes 数据
           this.isGenerate = true
-          this.routes = accessedRoutes.filter(item => item.children?.length !== 0)
+          this.routes = accessedRoutes.filter(item => item.children?.length !== 0) as any
           resolve()
         })
       },
@@ -195,13 +202,13 @@ const useRouteStore = defineStore(
             }
             // 设置 routes 数据
             this.isGenerate = true
-            this.routes = accessedRoutes.filter(item => item.children.length !== 0)
+            this.routes = accessedRoutes.filter(item => item.children.length !== 0) as any
             resolve()
           })
         })
       },
       // 根据权限动态生成路由（文件系统生成）
-      generateRoutesAtFilesystem(asyncRoutes: Route.recordRaw[]) {
+      generateRoutesAtFilesystem(asyncRoutes: RouteRecordRaw[]) {
         // eslint-disable-next-line no-async-promise-executor
         return new Promise<void>(async (resolve) => {
           const settingsStore = useSettingsStore()
@@ -217,7 +224,7 @@ const useRouteStore = defineStore(
           }
           // 设置 routes 数据
           this.isGenerate = true
-          this.fileSystemRoutes = accessedRoutes.filter(item => item.children?.length !== 0)
+          this.fileSystemRoutes = accessedRoutes.filter(item => item.children?.length !== 0) as any
           resolve()
         })
       },

src/store/modules/settings.ts

@@ -1,4 +1,5 @@
 import { defaultsDeep } from 'lodash-es'
+import type { RouteMeta } from 'vue-router'
 import type { RecursiveRequired, Settings } from '@/global'
 import settings from '@/settings'
 import settingsDefault from '@/settings.default'
@@ -6,7 +7,7 @@ import settingsDefault from '@/settings.default'
 interface SettingsStore extends RecursiveRequired<Settings.all> {
   subMenuCollapseLastStatus: boolean
   mode: 'pc' | 'mobile'
-  title: string
+  title?: RouteMeta['title']
 }
 
 const useSettingsStore = defineStore(
@@ -25,7 +26,7 @@ const useSettingsStore = defineStore(
     }),
     actions: {
       // 设置网页标题
-      setTitle(title: string) {
+      setTitle(title: SettingsStore['title']) {
         this.title = title
       },
       // 设置访问模式

src/views/index.vue

@@ -1,7 +1,7 @@
 <route lang="yaml">
-name: dashboard
+name: home
 meta:
-  title: 控制台
+  title: 主页
 </route>
 
 <script lang="ts" setup>
@@ -60,7 +60,7 @@ const oneStepAdminInfo = ref({
           <div>注：在作者就职的公司，本框架已在电商、直播、OA、ERP等多个不同领域的中后台系统中应用并稳定运行</div>
         </div>
       </template>
-      <el-button-group style="margin-right: 10px;">
+      <el-button-group>
         <el-button type="success" size="large" plain @click="open('https://hooray.gitee.io/fantastic-admin/')">
           开发文档
         </el-button>