chore: release v4.8.0

.github/workflows/release.yml

@@ -9,13 +9,13 @@ jobs:
   release:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: 16.x
+          node-version: 20
 
       - run: npx changelogithub # or changelogithub@0.12 if ensure the stable result
         env:
@@ -25,7 +25,7 @@ jobs:
     needs: release
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
@@ -57,7 +57,7 @@ jobs:
     needs: release
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
           ref: example

.github/workflows/repo-sync.yml

@@ -1,9 +1,9 @@
 name: repo-sync
 
 on:
-  # 每天自动同步
+  # 每天 00:05 自动同步
   schedule:
-    - cron: '0 0 * * *'
+    - cron: '5 0 * * *'
   # 手动触发部署
   workflow_dispatch:
 

.npmrc

@@ -1,2 +1,3 @@
 shamefully-hoist=true
 strict-peer-dependencies=false
+engine-strict=true

.vscode/extensions.json

@@ -5,7 +5,6 @@
     "dbaeumer.vscode-eslint",
     "stylelint.vscode-stylelint",
     "Vue.volar",
-    "Vue.vscode-typescript-vue-plugin",
     "antfu.unocss"
   ]
 }

package.json

@@ -1,6 +1,9 @@
 {
   "type": "module",
-  "version": "4.6.0",
+  "version": "4.8.0",
+  "engines": {
+    "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+  },
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc && vite build",
@@ -20,14 +23,14 @@
     "release": "bumpp"
   },
   "dependencies": {
-    "@headlessui/vue": "^1.7.19",
-    "@imengyu/vue3-context-menu": "^1.3.8",
-    "@vueuse/core": "^10.8.0",
-    "@vueuse/integrations": "^10.8.0",
-    "axios": "^1.6.7",
-    "dayjs": "^1.11.10",
+    "@headlessui/vue": "^1.7.21",
+    "@imengyu/vue3-context-menu": "^1.4.1",
+    "@vueuse/core": "^10.9.0",
+    "@vueuse/integrations": "^10.9.0",
+    "axios": "^1.6.8",
+    "dayjs": "^1.11.11",
     "defu": "^6.1.4",
-    "element-plus": "^2.5.6",
+    "element-plus": "^2.7.1",
     "eruda": "^3.0.1",
     "floating-vue": "5.2.2",
     "hotkeys-js": "^3.13.7",
@@ -35,69 +38,69 @@
     "mitt": "^3.0.1",
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
-    "overlayscrollbars": "^2.5.0",
-    "overlayscrollbars-vue": "^0.5.7",
+    "overlayscrollbars": "^2.7.3",
+    "overlayscrollbars-vue": "^0.5.9",
     "path-browserify": "^1.0.1",
-    "path-to-regexp": "^6.2.1",
+    "path-to-regexp": "^6.2.2",
     "pinia": "^2.1.7",
-    "qs": "^6.11.2",
+    "qs": "^6.12.1",
     "scule": "^1.3.0",
     "vconsole": "^3.15.1",
-    "vue": "^3.4.19",
+    "vue": "^3.4.26",
     "vue-m-message": "^4.0.2",
-    "vue-router": "^4.3.0"
+    "vue-router": "^4.3.2"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "2.6.4",
-    "@iconify/json": "^2.2.186",
-    "@iconify/vue": "^4.1.1",
+    "@antfu/eslint-config": "2.16.1",
+    "@iconify/json": "^2.2.205",
+    "@iconify/vue": "^4.1.2",
     "@stylistic/stylelint-config": "^1.0.1",
     "@types/lodash-es": "^4.17.12",
     "@types/mockjs": "^1.0.10",
     "@types/nprogress": "^0.2.3",
     "@types/path-browserify": "^1.0.2",
-    "@types/qs": "^6.9.11",
-    "@unocss/eslint-plugin": "^0.58.5",
-    "@vitejs/plugin-legacy": "^5.3.1",
+    "@types/qs": "^6.9.15",
+    "@unocss/eslint-plugin": "^0.59.4",
+    "@vitejs/plugin-legacy": "^5.3.2",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
-    "archiver": "^6.0.1",
-    "autoprefixer": "^10.4.17",
+    "archiver": "^7.0.1",
+    "autoprefixer": "^10.4.19",
     "boxen": "^7.1.1",
-    "bumpp": "^9.3.0",
-    "cz-git": "^1.8.0",
-    "eslint": "^8.57.0",
-    "esno": "^4.0.0",
+    "bumpp": "^9.4.1",
+    "cz-git": "^1.9.1",
+    "eslint": "^9.1.1",
+    "esno": "^4.7.0",
     "fs-extra": "^11.2.0",
     "http-server": "^14.1.1",
-    "inquirer": "^9.2.15",
+    "inquirer": "^9.2.20",
     "lint-staged": "^15.2.2",
-    "npm-run-all": "^4.1.5",
+    "npm-run-all2": "^6.1.2",
     "picocolors": "^1.0.0",
     "plop": "^4.0.1",
-    "sass": "^1.71.1",
-    "simple-git-hooks": "^2.9.0",
-    "stylelint": "^16.2.1",
-    "stylelint-config-recess-order": "^4.6.0",
-    "stylelint-config-standard-scss": "^13.0.0",
+    "postcss": "^8.4.38",
+    "sass": "^1.76.0",
+    "simple-git-hooks": "^2.11.1",
+    "stylelint": "^16.4.0",
+    "stylelint-config-recess-order": "^5.0.1",
+    "stylelint-config-standard-scss": "^13.1.0",
     "stylelint-config-standard-vue": "^1.0.0",
-    "stylelint-scss": "^6.1.0",
+    "stylelint-scss": "^6.2.1",
     "svgo": "^3.2.0",
-    "terser": "^5.28.1",
-    "typescript": "^5.3.3",
-    "unocss": "^0.58.5",
+    "typescript": "^5.4.5",
+    "unocss": "^0.59.4",
     "unplugin-auto-import": "^0.17.5",
-    "unplugin-turbo-console": "^1.4.0",
+    "unplugin-turbo-console": "^1.8.6",
     "unplugin-vue-components": "^0.26.0",
-    "vite": "^5.1.4",
+    "vite": "^5.2.10",
     "vite-plugin-banner": "^0.7.1",
-    "vite-plugin-compression2": "^0.12.0",
+    "vite-plugin-compression2": "^1.1.0",
     "vite-plugin-fake-server": "^2.1.1",
-    "vite-plugin-pages": "^0.32.0",
+    "vite-plugin-pages": "^0.32.1",
     "vite-plugin-svg-icons": "^2.0.1",
-    "vite-plugin-vue-devtools": "^7.0.15",
-    "vite-plugin-vue-meta-layouts": "^0.4.1",
-    "vue-tsc": "^1.8.27"
+    "vite-plugin-vue-devtools": "^7.1.3",
+    "vite-plugin-vue-meta-layouts": "^0.4.3",
+    "vue-tsc": "^2.0.16"
   },
   "simple-git-hooks": {
     "pre-commit": "pnpm lint-staged",

plop-templates/mock/mock.hbs

@@ -45,34 +45,40 @@ export default [
   {
     url: '/mock/{{#if relativePath}}{{ relativePath }}/{{/if}}{{ moduleName }}/create',
     method: 'post',
-    response: {
-      error: '',
-      status: 1,
-      data: {
-        isSuccess: true,
-      },
+    response: () => {
+      return {
+        error: '',
+        status: 1,
+        data: {
+          isSuccess: true,
+        },
+      }
     },
   },
   {
     url: '/mock/{{#if relativePath}}{{ relativePath }}/{{/if}}{{ moduleName }}/edit',
     method: 'post',
-    response: {
-      error: '',
-      status: 1,
-      data: {
-        isSuccess: true,
-      },
+    response: () => {
+      return {
+        error: '',
+        status: 1,
+        data: {
+          isSuccess: true,
+        },
+      }
     },
   },
   {
     url: '/mock/{{#if relativePath}}{{ relativePath }}/{{/if}}{{ moduleName }}/delete',
     method: 'post',
-    response: {
-      error: '',
-      status: 1,
-      data: {
-        isSuccess: true,
-      },
+    response: () => {
+      return {
+        error: '',
+        status: 1,
+        data: {
+          isSuccess: true,
+        },
+      }
     },
   },
 ]

src/App.vue

@@ -6,9 +6,17 @@ import eventBus from './utils/eventBus'
 import Provider from './ui-provider/index.vue'
 import useSettingsStore from '@/store/modules/settings'
 
+const route = useRoute()
+
 const settingsStore = useSettingsStore()
 const { auth } = useAuth()
 
+const isAuth = computed(() => {
+  return route.matched.every((item) => {
+    return auth(item.meta.auth ?? '')
+  })
+})
+
 // 侧边栏主导航当前实际宽度
 const mainSidebarActualWidth = computed(() => {
   let actualWidth = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--g-main-sidebar-width'))
@@ -46,9 +54,9 @@ watch([
 
 onMounted(() => {
   settingsStore.setMode(document.documentElement.clientWidth)
-  window.onresize = () => {
+  window.addEventListener('resize', () => {
     settingsStore.setMode(document.documentElement.clientWidth)
-  }
+  })
   hotkeys('alt+i', () => {
     eventBus.emit('global-system-info-toggle')
   })
@@ -61,13 +69,13 @@ import.meta.env.VITE_APP_DEBUG_TOOL === 'vconsole' && new VConsole()
 <template>
   <Provider>
     <RouterView
-      v-slot="{ Component, route }"
+      v-slot="{ Component }"
       :style="{
         '--g-main-sidebar-actual-width': mainSidebarActualWidth,
         '--g-sub-sidebar-actual-width': subSidebarActualWidth,
       }"
     >
-      <component :is="Component" v-if="auth(route.meta.auth ?? '')" />
+      <component :is="Component" v-if="isAuth" />
       <NotAllowed v-else />
     </RouterView>
     <SystemInfo />

src/components/FileUpload/index.vue

@@ -29,7 +29,7 @@ const props = withDefaults(
 )
 
 const emits = defineEmits<{
-  'onSuccess': [
+  onSuccess: [
     res: any,
     file: UploadUserFile,
     fileList: UploadUserFile[],

src/components/ImageUpload/index.vue

@@ -31,7 +31,7 @@ const props = withDefaults(
 )
 
 const emits = defineEmits<{
-  'onSuccess': [
+  onSuccess: [
     res: any,
   ]
 }>()

src/components/ImagesUpload/index.vue

@@ -33,7 +33,7 @@ const props = withDefaults(
 )
 
 const emits = defineEmits<{
-  'onSuccess': [
+  onSuccess: [
     res: any,
   ]
 }>()

src/components/SearchBar/index.vue

@@ -15,7 +15,7 @@ withDefaults(
 )
 
 const emits = defineEmits<{
-  'toggle': [
+  toggle: [
     value: boolean,
   ]
 }>()

src/layouts/components/AppSetting/index.vue

@@ -93,7 +93,7 @@ function handleCopy() {
         :options="[
           { icon: 'i-ri:sun-line', label: '明亮', value: 'light' },
           { icon: 'i-ri:moon-line', label: '暗黑', value: 'dark' },
-          { icon: 'i-ri:computer-line', label: '系统', value: '' },
+          { icon: 'i-codicon:color-mode', label: '系统', value: '' },
         ]"
         class="w-60"
       />

src/layouts/components/BackTop/index.vue

@@ -5,11 +5,11 @@ defineOptions({
 
 const transitionClass = {
   enterActiveClass: 'ease-out duration-300',
-  enterFromClass: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95',
-  enterToClass: 'opacity-100 translate-y-0 sm:scale-100',
+  enterFromClass: 'opacity-0 translate-y-4 lg:translate-y-0 lg:scale-95',
+  enterToClass: 'opacity-100 translate-y-0 lg:scale-100',
   leaveActiveClass: 'ease-in duration-200',
-  leaveFromClass: 'opacity-100 translate-y-0 sm:scale-100',
-  leaveToClass: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95',
+  leaveFromClass: 'opacity-100 translate-y-0 lg:scale-100',
+  leaveToClass: 'opacity-0 translate-y-4 lg:translate-y-0 lg:scale-95',
 }
 
 onMounted(() => {

src/layouts/components/Header/index.vue

@@ -17,9 +17,11 @@ const menuRef = ref()
 
 // 顶部模式鼠标滚动
 function handlerMouserScroll(event: WheelEvent) {
-  menuRef.value.scrollBy({
-    left: (event.deltaY || event.detail) > 0 ? 50 : -50,
-  })
+  if (event.deltaY || event.detail !== 0) {
+    menuRef.value.scrollBy({
+      left: (event.deltaY || event.detail) > 0 ? 50 : -50,
+    })
+  }
 }
 </script>
 
@@ -27,32 +29,30 @@ function handlerMouserScroll(event: WheelEvent) {
   <Transition name="header">
     <header v-if="settingsStore.mode === 'pc' && settingsStore.settings.menu.menuMode === 'head'">
       <div class="header-container">
-        <div class="main">
-          <Logo class="title" />
-          <div ref="menuRef" class="menu-container" @wheel.prevent="handlerMouserScroll">
-            <!-- 顶部模式 -->
-            <div class="menu flex of-hidden transition-all">
-              <template v-for="(item, index) in menuStore.allMenus" :key="index">
+        <Logo class="title" />
+        <div ref="menuRef" class="menu-container" @wheel.prevent="handlerMouserScroll">
+          <!-- 顶部模式 -->
+          <div class="menu flex of-hidden transition-all">
+            <template v-for="(item, index) in menuStore.allMenus" :key="index">
+              <div
+                class="menu-item relative transition-all" :class="{
+                  active: index === menuStore.actived,
+                }"
+              >
                 <div
-                  class="menu-item relative transition-all" :class="{
-                    active: index === menuStore.actived,
-                  }"
+                  v-if="item.children && item.children.length !== 0" class="group menu-item-container h-full w-full flex cursor-pointer items-center justify-between gap-1 px-3 text-[var(--g-header-menu-color)] transition-all hover:(bg-[var(--g-header-menu-hover-bg)] text-[var(--g-header-menu-hover-color)])" :class="{
+                    'text-[var(--g-header-menu-active-color)]! bg-[var(--g-header-menu-active-bg)]!': index === menuStore.actived,
+                  }" :title="typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title" @click="switchTo(index)"
                 >
-                  <div
-                    v-if="item.children && item.children.length !== 0" class="group menu-item-container h-full w-full flex cursor-pointer items-center justify-between gap-1 px-3 text-[var(--g-header-menu-color)] transition-all hover:(bg-[var(--g-header-menu-hover-bg)] text-[var(--g-header-menu-hover-color)])" :class="{
-                      'text-[var(--g-header-menu-active-color)]! bg-[var(--g-header-menu-active-bg)]!': index === menuStore.actived,
-                    }" :title="typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title" @click="switchTo(index)"
-                  >
-                    <div class="inline-flex flex-1 items-center justify-center gap-1">
-                      <SvgIcon v-if="item.meta?.icon" :name="item.meta?.icon" :size="20" class="menu-item-container-icon transition-transform group-hover:scale-120" async />
-                      <span class="w-full flex-1 truncate text-sm transition-height transition-opacity transition-width">
-                        {{ typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title }}
-                      </span>
-                    </div>
+                  <div class="inline-flex flex-1 items-center justify-center gap-1">
+                    <SvgIcon v-if="item.meta?.icon" :name="item.meta?.icon" :size="20" class="menu-item-container-icon transition-transform group-hover:scale-120" async />
+                    <span class="w-full flex-1 truncate text-sm transition-height transition-opacity transition-width">
+                      {{ typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title }}
+                    </span>
                   </div>
                 </div>
-              </template>
-            </div>
+              </div>
+            </template>
           </div>
         </div>
         <ToolbarRightSide />
@@ -81,74 +81,67 @@ header {
 
   .header-container {
     display: flex;
+    gap: 30px;
     align-items: center;
     justify-content: space-between;
     width: 100%;
     height: 100%;
     margin: 0 auto;
 
-    .main {
-      display: flex;
-      flex: 1;
-      flex-wrap: wrap;
-      align-items: center;
-      height: 100%;
-    }
-  }
+    :deep(a.title) {
+      position: relative;
+      flex: 0;
+      width: inherit;
+      height: inherit;
+      padding: inherit;
+      background-color: inherit;
 
-  :deep(a.title) {
-    position: relative;
-    width: inherit;
-    height: inherit;
-    padding: inherit;
-    background-color: inherit;
-
-    .logo {
-      width: initial;
-      height: 40px;
-    }
-
-    span {
-      font-size: 20px;
-      color: var(--g-header-color);
-      letter-spacing: 1px;
-    }
-  }
-
-  .menu-container {
-    flex: 1;
-    height: 100%;
-    padding: 0 20px;
-    margin: 0 30px;
-    overflow-x: auto;
-    mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
-
-    // firefox隐藏滚动条
-    scrollbar-width: none;
-
-    // chrome隐藏滚动条
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
-
-  .menu {
-    display: inline-flex;
-    height: 100%;
-
-    :deep(.menu-item) {
-      .menu-item-container {
-        color: var(--g-header-menu-color);
-
-        &:hover {
-          color: var(--g-header-menu-hover-color);
-          background-color: var(--g-header-menu-hover-bg);
-        }
+      .logo {
+        width: initial;
+        height: 40px;
       }
 
-      &.active .menu-item-container {
-        color: var(--g-header-menu-active-color);
-        background-color: var(--g-header-menu-active-bg);
+      span {
+        font-size: 20px;
+        color: var(--g-header-color);
+        letter-spacing: 1px;
+      }
+    }
+
+    .menu-container {
+      flex: 1;
+      height: 100%;
+      padding: 0 20px;
+      overflow-x: auto;
+      mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
+
+      // firefox隐藏滚动条
+      scrollbar-width: none;
+
+      // chrome隐藏滚动条
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      .menu {
+        display: inline-flex;
+        height: 100%;
+
+        :deep(.menu-item) {
+          .menu-item-container {
+            color: var(--g-header-menu-color);
+
+            &:hover {
+              color: var(--g-header-menu-hover-color);
+              background-color: var(--g-header-menu-hover-bg);
+            }
+          }
+
+          &.active .menu-item-container {
+            color: var(--g-header-menu-active-color);
+            background-color: var(--g-header-menu-active-bg);
+          }
+        }
       }
     }
   }

src/layouts/components/HotkeysIntro/index.vue

@@ -20,7 +20,7 @@ onMounted(() => {
 <template>
   <HDialog v-model="isShow" title="快捷键介绍">
     <div class="px-4">
-      <div class="grid gap-2 md:grid-cols-2">
+      <div class="grid gap-2 sm:grid-cols-2">
         <div>
           <h2 class="m-0 text-lg font-bold">
             全局

src/layouts/components/Menu/index.vue

@@ -169,9 +169,11 @@ provide(rootMenuInjectionKey, reactive({
       'flex-row! w-auto': isMenuPopup && props.mode === 'horizontal',
     }"
   >
-    <template v-for="(item, index) in menu" :key="index">
-      <SubMenu v-if="item.children?.length" :menu="item" :unique-key="[item.path ?? JSON.stringify(item)]" />
-      <Item v-else :item="item" :unique-key="[item.path ?? JSON.stringify(item)]" @click="handleMenuItemClick(item.path ?? JSON.stringify(item))" />
+    <template v-for="item in menu" :key="item.path ?? JSON.stringify(item)">
+      <template v-if="item.meta?.menu !== false">
+        <SubMenu v-if="item.children?.length" :menu="item" :unique-key="[item.path ?? JSON.stringify(item)]" />
+        <Item v-else :item="item" :unique-key="[item.path ?? JSON.stringify(item)]" @click="handleMenuItemClick(item.path ?? JSON.stringify(item))" />
+      </template>
     </template>
   </div>
 </template>

src/layouts/components/Menu/sub.vue

@@ -96,7 +96,7 @@ const transitionClass = computed(() => {
 const hasChildren = computed(() => {
   let flag = true
   if (props.menu.children) {
-    if (props.menu.children.every((item: any) => item.meta?.sidebar === false)) {
+    if (props.menu.children.every((item: any) => item.meta?.menu === false)) {
       flag = false
     }
   }
@@ -189,7 +189,7 @@ function handleMouseleave() {
         }"
       >
         <template v-for="item in menu.children" :key="item.path ?? JSON.stringify(item)">
-          <SubMenu v-if="item.meta?.sidebar !== false" :unique-key="[...uniqueKey, item.path ?? JSON.stringify(item)]" :menu="item" :level="level + 1" />
+          <SubMenu v-if="item.meta?.menu !== false" :unique-key="[...uniqueKey, item.path ?? JSON.stringify(item)]" :menu="item" :level="level + 1" />
         </template>
       </OverlayScrollbarsComponent>
     </Transition>

src/layouts/components/Search/index.vue

@@ -4,13 +4,11 @@ import type { OverlayScrollbarsComponentRef } from 'overlayscrollbars-vue'
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue'
 import { cloneDeep } from 'lodash-es'
 import hotkeys from 'hotkeys-js'
-import type { RouteRecordRaw } from 'vue-router'
 import Breadcrumb from '../Breadcrumb/index.vue'
 import BreadcrumbItem from '../Breadcrumb/item.vue'
 import { resolveRoutePath } from '@/utils'
 import eventBus from '@/utils/eventBus'
 import useSettingsStore from '@/store/modules/settings'
-import useRouteStore from '@/store/modules/route'
 import useMenuStore from '@/store/modules/menu'
 import type { Menu } from '@/types/global'
 
@@ -30,17 +28,16 @@ const overlayTransitionClass = ref({
 const transitionClass = computed(() => {
   return {
     enter: 'ease-out duration-300',
-    enterFrom: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95',
-    enterTo: 'opacity-100 translate-y-0 sm:scale-100',
+    enterFrom: 'opacity-0 translate-y-4 lg:translate-y-0 lg:scale-95',
+    enterTo: 'opacity-100 translate-y-0 lg:scale-100',
     leave: 'ease-in duration-200',
-    leaveFrom: 'opacity-100 translate-y-0 sm:scale-100',
-    leaveTo: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95',
+    leaveFrom: 'opacity-100 translate-y-0 lg:scale-100',
+    leaveTo: 'opacity-0 translate-y-4 lg:translate-y-0 lg:scale-95',
   }
 })
 
 const router = useRouter()
 const settingsStore = useSettingsStore()
-const routeStore = useRouteStore()
 const menuStore = useMenuStore()
 
 interface listTypes {
@@ -149,34 +146,27 @@ onMounted(() => {
 
 function initSourceList() {
   sourceList.value = []
-  if (settingsStore.settings.app.routeBaseOn !== 'filesystem') {
-    routeStore.routes.forEach((item) => {
-      item.children && getSourceList(item.children as RouteRecordRaw[])
-    })
-  }
-  else {
-    menuStore.menus.forEach((item) => {
-      getSourceListByMenus(item.children)
-    })
-  }
+  menuStore.allMenus.forEach((item) => {
+    getSourceListByMenus(item.children)
+  })
 }
 
-function hasChildren(item: RouteRecordRaw) {
+function hasChildren(item: Menu.recordRaw) {
   let flag = true
-  if (item.children?.every(i => i.meta?.sidebar === false)) {
+  if (item.children?.every(i => i.meta?.menu === false)) {
     flag = false
   }
   return flag
 }
-function getSourceList(arr: RouteRecordRaw[], basePath?: string, icon?: string, breadcrumb?: { title?: string | (() => string) }[]) {
+function getSourceListByMenus(arr: Menu.recordRaw[], basePath?: string, icon?: string, breadcrumb?: { title?: string | (() => string) }[]) {
   arr.forEach((item) => {
-    if (item.meta?.sidebar !== false) {
+    if (item.meta?.menu !== false) {
       const breadcrumbTemp = cloneDeep(breadcrumb) || []
       if (item.children && hasChildren(item)) {
         breadcrumbTemp.push({
           title: item.meta?.title,
         })
-        getSourceList(item.children, resolveRoutePath(basePath, item.path), item.meta?.icon ?? icon, breadcrumbTemp)
+        getSourceListByMenus(item.children, resolveRoutePath(basePath, item.path), item.meta?.icon ?? icon, breadcrumbTemp)
       }
       else {
         breadcrumbTemp.push({
@@ -193,28 +183,6 @@ function getSourceList(arr: RouteRecordRaw[], basePath?: string, icon?: string,
     }
   })
 }
-function getSourceListByMenus(arr: Menu.recordRaw[], icon?: string, breadcrumb?: { title?: string | (() => string) }[]) {
-  arr.forEach((item) => {
-    const breadcrumbTemp = cloneDeep(breadcrumb) || []
-    if (item.children && item.children.length > 0) {
-      breadcrumbTemp.push({
-        title: item.meta?.title,
-      })
-      getSourceListByMenus(item.children, item.meta?.icon ?? icon, breadcrumbTemp)
-    }
-    else {
-      breadcrumbTemp.push({
-        title: item.meta?.title,
-      })
-      sourceList.value.push({
-        icon: item.meta?.icon ?? icon,
-        title: item.meta?.title,
-        path: item.path as string,
-        breadcrumb: breadcrumbTemp,
-      })
-    }
-  })
-}
 
 function keyUp() {
   if (resultList.value.length) {
@@ -280,9 +248,9 @@ function pageJump(path: listTypes['path'], link: listTypes['link']) {
         <div class="fixed inset-0 bg-stone-200/75 backdrop-blur-sm transition-opacity dark:bg-stone-8/75" />
       </TransitionChild>
       <div class="fixed inset-0">
-        <div class="h-full flex items-end justify-center p-4 text-center sm:items-center sm:p-0">
+        <div class="h-full flex items-end justify-center p-4 text-center lg:items-center">
           <TransitionChild as="template" v-bind="transitionClass">
-            <DialogPanel class="relative h-full max-h-4/5 w-full flex flex-col text-left sm:max-w-2xl">
+            <DialogPanel class="relative h-full max-h-4/5 w-full flex flex-col text-left lg:max-w-2xl">
               <div class="flex flex-col overflow-y-auto rounded-xl bg-white shadow-xl dark:bg-stone-8">
                 <div class="flex items-center px-4 py-3" border-b="~ solid stone-2 dark:stone-7">
                   <SvgIcon name="i-ep:search" :size="18" class="text-stone-5" />

src/layouts/components/Topbar/Tabbar/index.vue

@@ -75,9 +75,9 @@ function onTabbarContextmenu(event: MouseEvent, routeItem: Tabbar.recordRaw) {
   ContextMenu.showContextMenu({
     x: event.x,
     y: event.y,
-    zIndex: 1000,
+    zIndex: 1050,
     iconFontClass: '',
-    customClass: 'contextmenu-custom',
+    customClass: 'tabbar-contextmenu',
     items: [
       {
         label: '重新加载',
@@ -166,7 +166,7 @@ onMounted(() => {
   })
 })
 onUnmounted(() => {
-  hotkeys.unbind('alt+q,alt+e,alt+w,alt+1,alt+2,alt+3,alt+4,alt+5,alt+6,alt+7,alt+8,alt+9,alt+0')
+  hotkeys.unbind('alt+left,alt+right,alt+w,alt+1,alt+2,alt+3,alt+4,alt+5,alt+6,alt+7,alt+8,alt+9,alt+0')
 })
 </script>
 
@@ -187,8 +187,8 @@ onUnmounted(() => {
               <SvgIcon v-if="settingsStore.settings.tabbar.enableIcon && element.icon" :name="element.icon" class="icon" />
               {{ typeof element?.title === 'function' ? element.title() : element.title }}
             </div>
-            <div v-if="tabbarStore.list.length > 1" class="action-icon">
-              <SvgIcon name="i-ri:close-fill" @click.stop="tabbar.closeById(element.tabId)" />
+            <div v-if="tabbarStore.list.length > 1" class="action-icon" @click.stop="tabbar.closeById(element.tabId)">
+              <SvgIcon name="i-ri:close-fill" />
             </div>
             <div v-show="keys.alt && index < 9" class="hotkey-number">
               {{ index + 1 }}
@@ -201,7 +201,7 @@ onUnmounted(() => {
 </template>
 
 <style lang="scss">
-.mx-menu-ghost-host {
+.tabbar-contextmenu {
   z-index: 1000;
 
   .mx-context-menu {
@@ -221,8 +221,6 @@ onUnmounted(() => {
       }
 
       .icon {
-        width: 1em;
-        margin-right: 10px;
         color: initial;
       }
 

src/layouts/components/Topbar/Toolbar/ColorScheme/index.vue

@@ -40,7 +40,7 @@ function toggleColorScheme(event: MouseEvent) {
   <HDropdown class="flex-center cursor-pointer px-2 py-1">
     <SvgIcon
       :name="{
-        '': 'i-ri:computer-line',
+        '': 'i-codicon:color-mode',
         'light': 'i-ri:sun-line',
         'dark': 'i-ri:moon-line',
       }[settingsStore.settings.app.colorScheme]" @click="toggleColorScheme"
@@ -51,7 +51,7 @@ function toggleColorScheme(event: MouseEvent) {
         :options="[
           { icon: 'i-ri:sun-line', label: '', value: 'light' },
           { icon: 'i-ri:moon-line', label: '', value: 'dark' },
-          { icon: 'i-ri:computer-line', label: '', value: '' },
+          { icon: 'i-codicon:color-mode', label: '', value: '' },
         ]"
         class="m-3"
       />

src/layouts/ui-kit/HCheckList.vue

@@ -15,7 +15,7 @@ withDefaults(
 )
 
 const emits = defineEmits<{
-  'change': [string | number | undefined]
+  change: [string | number | undefined]
 }>()
 
 const value = defineModel<string | number>()

src/layouts/ui-kit/HDialog.vue

@@ -16,7 +16,7 @@ withDefaults(
 )
 
 const emits = defineEmits<{
-  'close': []
+  close: []
 }>()
 
 const isOpen = defineModel<boolean>({
@@ -37,11 +37,11 @@ const overlayTransitionClass = ref({
 const transitionClass = computed(() => {
   return {
     enter: 'ease-out duration-300',
-    enterFrom: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95',
-    enterTo: 'opacity-100 translate-y-0 sm:scale-100',
+    enterFrom: 'opacity-0 translate-y-4 lg:translate-y-0 lg:scale-95',
+    enterTo: 'opacity-100 translate-y-0 lg:scale-100',
     leave: 'ease-in duration-200',
-    leaveFrom: 'opacity-100 translate-y-0 sm:scale-100',
-    leaveTo: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95',
+    leaveFrom: 'opacity-100 translate-y-0 lg:scale-100',
+    leaveTo: 'opacity-0 translate-y-4 lg:translate-y-0 lg:scale-95',
   }
 })
 
@@ -58,9 +58,9 @@ function close() {
         <div class="fixed inset-0 bg-stone-2/75 transition-opacity dark:bg-stone-8/75" :class="{ 'backdrop-blur-sm': overlay }" />
       </TransitionChild>
       <div class="fixed inset-0 overflow-y-auto">
-        <div class="min-h-full flex items-end justify-center p-4 text-center sm:items-center sm:p-0">
+        <div class="min-h-full flex items-end justify-center p-4 text-center lg:items-center">
           <TransitionChild as="template" :appear="appear" v-bind="transitionClass">
-            <DialogPanel class="relative w-full flex flex-col overflow-hidden rounded-xl bg-white text-left shadow-xl sm:my-8 sm:max-w-lg dark:bg-stone-8">
+            <DialogPanel class="relative w-full flex flex-col overflow-hidden rounded-xl bg-white text-left shadow-xl lg:my-8 lg:max-w-lg dark:bg-stone-8">
               <div flex="~ items-center justify-between" px-4 py-3 border-b="~ solid stone/15" text-6>
                 <DialogTitle m-0 text-lg text-dark dark:text-white>
                   {{ title }}

src/layouts/ui-kit/HSlideover.vue

@@ -19,7 +19,7 @@ const props = withDefaults(
 )
 
 const emits = defineEmits<{
-  'close': []
+  close: []
 }>()
 
 const isOpen = defineModel<boolean>({

src/layouts/ui-kit/HTabList.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
 }>()
 
 const emits = defineEmits<{
-  'change': [T]
+  change: [T]
 }>()
 
 const value = defineModel<T>()

src/router/index.ts

@@ -57,20 +57,22 @@ router.beforeEach(async (to, from, next) => {
       }
     }
     else {
+      // 获取用户权限
+      settingsStore.settings.app.enablePermission && await userStore.getPermissions()
       // 生成动态路由
       switch (settingsStore.settings.app.routeBaseOn) {
         case 'frontend':
-          await routeStore.generateRoutesAtFront(asyncRoutes)
+          routeStore.generateRoutesAtFront(asyncRoutes)
           break
         case 'backend':
           await routeStore.generateRoutesAtBack()
           break
         case 'filesystem':
-          await routeStore.generateRoutesAtFilesystem(asyncRoutesByFilesystem)
+          routeStore.generateRoutesAtFilesystem(asyncRoutesByFilesystem)
           // 文件系统生成的路由，需要手动生成导航数据
           switch (settingsStore.settings.menu.baseOn) {
             case 'frontend':
-              await menuStore.generateMenusAtFront()
+              menuStore.generateMenusAtFront()
               break
             case 'backend':
               await menuStore.generateMenusAtBack()
@@ -136,7 +138,8 @@ router.afterEach((to, from) => {
       keepAliveStore.add(componentName)
     }
     else {
-      console.warn('该页面组件未设置组件名，会导致缓存失效，请检查')
+      // turbo-console-disable-next-line
+      console.warn('[Fantastic-admin] 该页面组件未设置组件名，会导致缓存失效，请检查')
     }
   }
   // 判断离开页面是否开启缓存，如果开启，则根据缓存规则判断是否需要清空 keep-alive 全局状态里离开页面的 name 信息

src/store/modules/menu.ts

@@ -1,11 +1,12 @@
 import { cloneDeep } from 'lodash-es'
+import type { RouteRecordRaw } from 'vue-router'
 import useSettingsStore from './settings'
 import useUserStore from './user'
 import useRouteStore from './route'
 import { resolveRoutePath } from '@/utils'
 import apiApp from '@/api/modules/app'
 import menu from '@/menu'
-import type { Menu } from '#/global'
+import type { Menu, Route } from '#/global'
 
 const useMenuStore = defineStore(
   // 唯一ID
@@ -15,42 +16,69 @@ const useMenuStore = defineStore(
     const userStore = useUserStore()
     const routeStore = useRouteStore()
 
-    const menus = ref<Menu.recordMainRaw[]>([{
-      meta: {},
-      children: [],
-    }])
+    const filesystemMenusRaw = ref<Menu.recordMainRaw[]>([])
     const actived = ref(0)
 
-    // 将多级导航的每一级 path 都转换为完整路径
-    function convertToFullPath(menu: any[], path: string = '') {
-      return menu.map((item) => {
-        item.path = resolveRoutePath(path, item.path)
-        if (item.children) {
-          item.children = convertToFullPath(item.children, item.path)
-        }
-        return item
-      })
-    }
-    // 完整导航数据
-    const allMenus = computed(() => {
-      let returnMenus: Menu.recordMainRaw[] = [{
-        meta: {},
-        children: [],
-      }]
-      if (settingsStore.settings.app.routeBaseOn !== 'filesystem') {
+    // 将原始路由转换成导航菜单
+    function convertRouteToMenu(routes: Route.recordMainRaw[]): Menu.recordMainRaw[] {
+      const returnMenus: Menu.recordMainRaw[] = []
+      routes.forEach((item) => {
         if (settingsStore.settings.menu.menuMode === 'single') {
-          returnMenus[0].children = []
-          routeStore.routes.forEach((item) => {
-            returnMenus[0].children?.push(...item.children as Menu.recordRaw[])
+          returnMenus.length === 0 && returnMenus.push({
+            meta: {},
+            children: [],
           })
+          returnMenus[0].children.push(...convertRouteToMenuRecursive(item.children))
         }
         else {
-          returnMenus = routeStore.routes as Menu.recordMainRaw[]
+          const menuItem: Menu.recordMainRaw = {
+            meta: {
+              title: item?.meta?.title,
+              icon: item?.meta?.icon,
+              auth: item?.meta?.auth,
+            },
+            children: [],
+          }
+          menuItem.children = convertRouteToMenuRecursive(item.children)
+          returnMenus.push(menuItem)
         }
-        returnMenus.map(item => convertToFullPath(item.children))
+      })
+      return returnMenus
+    }
+    function convertRouteToMenuRecursive(routes: RouteRecordRaw[], basePath = ''): Menu.recordRaw[] {
+      const returnMenus: Menu.recordRaw[] = []
+      routes.forEach((item) => {
+        const menuItem: Menu.recordRaw = {
+          path: resolveRoutePath(basePath, item.path),
+          meta: {
+            title: item?.meta?.title,
+            icon: item?.meta?.icon,
+            defaultOpened: item?.meta?.defaultOpened,
+            auth: item?.meta?.auth,
+            menu: item?.meta?.menu,
+            link: item?.meta?.link,
+          },
+        }
+        if (item.children) {
+          menuItem.children = convertRouteToMenuRecursive(item.children, menuItem.path)
+        }
+        returnMenus.push(menuItem)
+      })
+      return returnMenus
+    }
+
+    // 完整导航数据
+    const allMenus = computed(() => {
+      let returnMenus: Menu.recordMainRaw[] = []
+      if (settingsStore.settings.app.routeBaseOn !== 'filesystem') {
+        returnMenus = convertRouteToMenu(routeStore.routesRaw)
       }
       else {
-        returnMenus = menus.value
+        returnMenus = filesystemMenusRaw.value
+      }
+      // 如果权限功能开启，则需要对导航数据进行筛选过滤
+      if (settingsStore.settings.app.enablePermission) {
+        returnMenus = filterAsyncMenus(returnMenus, userStore.permissions)
       }
       return returnMenus
     })
@@ -71,7 +99,7 @@ const useMenuStore = defineStore(
     function getDeepestPath(menu: Menu.recordRaw, rootPath = '') {
       let retnPath = ''
       if (menu.children) {
-        const item = menu.children.find(item => item.meta?.sidebar !== false)
+        const item = menu.children.find(item => item.meta?.menu !== false)
         if (item) {
           retnPath = getDeepestPath(item, resolveRoutePath(rootPath, menu.path))
         }
@@ -148,32 +176,12 @@ const useMenuStore = defineStore(
     }
     // 生成导航（前端生成）
     async function generateMenusAtFront() {
-      let accessedMenus
-      // 如果权限功能开启，则需要对导航数据进行筛选过滤
-      if (settingsStore.settings.app.enablePermission) {
-        const permissions = await userStore.getPermissions()
-        accessedMenus = filterAsyncMenus(menu, permissions)
-      }
-      else {
-        accessedMenus = cloneDeep(menu)
-      }
-      menus.value = accessedMenus.filter(item => item.children.length !== 0)
+      filesystemMenusRaw.value = menu.filter(item => item.children.length !== 0)
     }
     // 生成导航（后端生成）
     async function generateMenusAtBack() {
       await apiApp.menuList().then(async (res) => {
-        const settingsStore = useSettingsStore()
-        const userStore = useUserStore()
-        let accessedMenus: Menu.recordMainRaw[]
-        // 如果权限功能开启，则需要对导航数据进行筛选过滤
-        if (settingsStore.settings.app.enablePermission) {
-          const permissions = await userStore.getPermissions()
-          accessedMenus = filterAsyncMenus(res.data, permissions)
-        }
-        else {
-          accessedMenus = cloneDeep(res.data)
-        }
-        menus.value = accessedMenus.filter(item => item.children.length !== 0)
+        filesystemMenusRaw.value = (res.data as Menu.recordMainRaw[]).filter(item => item.children.length !== 0)
       }).catch(() => {})
     }
     // 设置主导航
@@ -192,7 +200,6 @@ const useMenuStore = defineStore(
     }
 
     return {
-      menus,
       actived,
       allMenus,
       sidebarMenus,

src/store/modules/route.ts

@@ -1,7 +1,6 @@
 import { cloneDeep } from 'lodash-es'
-import type { RouteMeta, RouteRecordRaw } from 'vue-router'
+import type { RouteRecordRaw } from 'vue-router'
 import useSettingsStore from './settings'
-import useUserStore from './user'
 import { resolveRoutePath } from '@/utils'
 import { systemRoutes } from '@/router/routes'
 import apiApp from '@/api/modules/app'
@@ -12,7 +11,6 @@ const useRouteStore = defineStore(
   'route',
   () => {
     const settingsStore = useSettingsStore()
-    const userStore = useUserStore()
 
     const isGenerate = ref(false)
     const routesRaw = ref<Route.recordMainRaw[]>([])
@@ -27,16 +25,15 @@ const useRouteStore = defineStore(
           title: route.meta?.title,
           icon: route.meta?.icon,
           hide: !route.meta?.breadcrumb && route.meta?.breadcrumb === false,
-        }], route.path, route.meta?.auth)
+        }], route.path)
       }
       return route
     }
-    function flatAsyncRoutesRecursive(routes: RouteRecordRaw[], breadcrumb: Route.breadcrumb[] = [], baseUrl = '', baseAuth: RouteMeta['auth']): RouteRecordRaw[] {
+    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 childrenBaseAuth = baseAuth ?? route.meta?.auth
           const tmpBreadcrumb = cloneDeep(breadcrumb)
           tmpBreadcrumb.push({
             path: childrenBaseUrl,
@@ -49,11 +46,10 @@ const useRouteStore = defineStore(
           if (!tmpRoute.meta) {
             tmpRoute.meta = {}
           }
-          tmpRoute.meta.auth = childrenBaseAuth
           tmpRoute.meta.breadcrumbNeste = tmpBreadcrumb
           delete tmpRoute.children
           res.push(tmpRoute)
-          const childrenRoutes = flatAsyncRoutesRecursive(route.children, tmpBreadcrumb, childrenBaseUrl, childrenBaseAuth)
+          const childrenRoutes = flatAsyncRoutesRecursive(route.children, tmpBreadcrumb, childrenBaseUrl)
           childrenRoutes.forEach((item) => {
             // 如果 path 一样则覆盖，因为子路由的 path 可能设置为空，导致和父路由一样，直接注册会提示路由重复
             if (res.some(v => v.path === item.path)) {
@@ -82,7 +78,6 @@ const useRouteStore = defineStore(
           if (!tmpRoute.meta) {
             tmpRoute.meta = {}
           }
-          tmpRoute.meta.auth = baseAuth ?? tmpRoute.meta?.auth
           tmpRoute.meta.breadcrumbNeste = tmpBreadcrumb
           res.push(tmpRoute)
         }
@@ -119,63 +114,38 @@ const useRouteStore = defineStore(
       return routes
     })
 
-    // 判断是否有权限
-    function hasPermission(permissions: string[], route: Route.recordMainRaw | RouteRecordRaw) {
-      let isAuth = false
-      if (route.meta?.auth) {
-        isAuth = permissions.some((auth) => {
-          if (typeof route.meta?.auth === 'string') {
-            return route.meta.auth !== '' ? route.meta.auth === auth : true
+    // TODO 将设置 meta.sidebar 的属性转换成 meta.menu ，过渡处理，未来将被弃用
+    let isUsedDeprecatedAttribute = false
+    function converDeprecatedAttribute<T extends Route.recordMainRaw[]>(routes: T): T {
+      routes.forEach((route) => {
+        route.children = converDeprecatedAttributeRecursive(route.children)
+      })
+      if (isUsedDeprecatedAttribute) {
+        // turbo-console-disable-next-line
+        console.warn('[Fantastic-admin] 路由配置中的 "sidebar" 属性即将被弃用, 请尽快替换为 "menu" 属性')
+      }
+      return routes
+    }
+    function converDeprecatedAttributeRecursive(routes: RouteRecordRaw[]) {
+      if (routes) {
+        routes.forEach((route) => {
+          if (typeof route.meta?.sidebar === 'boolean') {
+            isUsedDeprecatedAttribute = true
+            route.meta.menu = route.meta.sidebar
+            delete route.meta.sidebar
           }
-          else if (typeof route.meta?.auth === 'object') {
-            return route.meta.auth.length > 0 ? route.meta.auth.includes(auth) : true
-          }
-          else {
-            return false
+          if (route.children) {
+            converDeprecatedAttributeRecursive(route.children)
           }
         })
       }
-      else {
-        isAuth = true
-      }
-      return isAuth
+      return routes
     }
-    // 根据权限过滤路由
-    function filterAsyncRoutes<T extends Route.recordMainRaw[] | RouteRecordRaw[]>(routes: T, permissions: string[]): T {
-      const res: any = []
-      routes.forEach((route) => {
-        if (hasPermission(permissions, route)) {
-          const tmpRoute = cloneDeep(route)
-          if (tmpRoute.children) {
-            tmpRoute.children = filterAsyncRoutes(tmpRoute.children, permissions)
-            tmpRoute.children.length && res.push(tmpRoute)
-          }
-          else {
-            res.push(tmpRoute)
-          }
-        }
-      })
-      return res
-    }
-    const routes = computed(() => {
-      let returnRoutes: Route.recordMainRaw[]
-      // 如果权限功能开启，则需要对路由数据进行筛选过滤
-      if (settingsStore.settings.app.enablePermission) {
-        returnRoutes = filterAsyncRoutes(routesRaw.value as any, userStore.permissions)
-      }
-      else {
-        returnRoutes = cloneDeep(routesRaw.value) as any
-      }
-      return returnRoutes
-    })
 
-    // 根据权限动态生成路由（前端生成）
-    async function generateRoutesAtFront(asyncRoutes: Route.recordMainRaw[]) {
+    // 生成路由（前端生成）
+    function generateRoutesAtFront(asyncRoutes: Route.recordMainRaw[]) {
       // 设置 routes 数据
-      routesRaw.value = cloneDeep(asyncRoutes) as any
-      if (settingsStore.settings.app.enablePermission) {
-        await userStore.getPermissions()
-      }
+      routesRaw.value = converDeprecatedAttribute(cloneDeep(asyncRoutes) as any)
       isGenerate.value = true
     }
     // 格式化后端路由数据
@@ -199,24 +169,18 @@ const useRouteStore = defineStore(
         return route
       })
     }
-    // 根据权限动态生成路由（后端获取）
+    // 生成路由（后端获取）
     async function generateRoutesAtBack() {
-      await apiApp.routeList().then(async (res) => {
+      await apiApp.routeList().then((res) => {
         // 设置 routes 数据
-        routesRaw.value = formatBackRoutes(res.data) as any
-        if (settingsStore.settings.app.enablePermission) {
-          await userStore.getPermissions()
-        }
+        routesRaw.value = converDeprecatedAttribute(formatBackRoutes(res.data) as any)
         isGenerate.value = true
       }).catch(() => {})
     }
-    // 根据权限动态生成路由（文件系统生成）
-    async function generateRoutesAtFilesystem(asyncRoutes: RouteRecordRaw[]) {
+    // 生成路由（文件系统生成）
+    function generateRoutesAtFilesystem(asyncRoutes: RouteRecordRaw[]) {
       // 设置 routes 数据
       filesystemRoutesRaw.value = cloneDeep(asyncRoutes) as any
-      if (settingsStore.settings.app.enablePermission) {
-        await userStore.getPermissions()
-      }
       isGenerate.value = true
     }
     // 记录 accessRoutes 路由，用于登出时删除路由
@@ -236,7 +200,7 @@ const useRouteStore = defineStore(
 
     return {
       isGenerate,
-      routes,
+      routesRaw,
       currentRemoveRoutes,
       flatRoutes,
       flatSystemRoutes,

src/store/modules/settings.ts

@@ -79,7 +79,7 @@ const useSettingsStore = defineStore(
         }
         else {
           // 如果是桌面设备，则根据页面宽度判断是否需要切换为移动端展示
-          mode.value = width < 992 ? 'mobile' : 'pc'
+          mode.value = width < 1024 ? 'mobile' : 'pc'
         }
       }
       else {

src/store/modules/user.ts

@@ -12,9 +12,9 @@ const useUserStore = defineStore(
     const routeStore = useRouteStore()
     const menuStore = useMenuStore()
 
-    const account = ref(sessionStorage.account ?? '')
-    const token = ref(sessionStorage.token ?? '')
-    const avatar = ref(sessionStorage.avatar ?? '')
+    const account = ref(localStorage.account ?? '')
+    const token = ref(localStorage.token ?? '')
+    const avatar = ref(localStorage.avatar ?? '')
     const permissions = ref<string[]>([])
     const isLogin = computed(() => {
       if (token.value) {
@@ -29,18 +29,18 @@ const useUserStore = defineStore(
       password: string
     }) {
       const res = await apiUser.login(data)
-      sessionStorage.setItem('account', res.data.account)
-      sessionStorage.setItem('token', res.data.token)
-      sessionStorage.setItem('avatar', res.data.avatar)
+      localStorage.setItem('account', res.data.account)
+      localStorage.setItem('token', res.data.token)
+      localStorage.setItem('avatar', res.data.avatar)
       account.value = res.data.account
       token.value = res.data.token
       avatar.value = res.data.avatar
     }
     // 登出
     async function logout(redirect = router.currentRoute.value.fullPath) {
-      sessionStorage.removeItem('account')
-      sessionStorage.removeItem('token')
-      sessionStorage.removeItem('avatar')
+      localStorage.removeItem('account')
+      localStorage.removeItem('token')
+      localStorage.removeItem('avatar')
       account.value = ''
       token.value = ''
       avatar.value = ''
@@ -58,7 +58,6 @@ const useUserStore = defineStore(
     async function getPermissions() {
       const res = await apiUser.permission()
       permissions.value = res.data.permissions
-      return permissions.value
     }
     // 修改密码
     async function editPassword(data: {

src/types/global.d.ts

@@ -1,4 +1,4 @@
-import type { RouteRecordRaw } from 'vue-router'
+import type { RouteRecordName, RouteRecordRaw } from 'vue-router'
 
 type RecursiveRequired<T> = {
   [P in keyof T]-?: RecursiveRequired<T[P]>
@@ -228,6 +228,7 @@ declare module 'vue-router' {
     defaultOpened?: boolean
     auth?: string | string[]
     sidebar?: boolean
+    menu?: boolean
     breadcrumb?: boolean
     activeMenu?: string
     cache?: boolean | string | string[]
@@ -263,7 +264,7 @@ declare namespace Menu {
       icon?: string
       defaultOpened?: boolean
       auth?: string | string[]
-      sidebar?: boolean
+      menu?: boolean
       link?: string
     }
     children?: recordRaw[]
@@ -283,7 +284,7 @@ declare namespace Tabbar {
   interface recordRaw {
     tabId: string
     fullPath: string
-    routeName?: RouteRecordRaw.name
+    routeName?: RouteRecordName | null
     title?: string | (() => string)
     icon?: string
     name: string[]

src/views/[...all].vue

@@ -44,7 +44,7 @@ function goBack() {
       <h1 class="m-0 text-6xl font-sans">
         404
       </h1>
-      <div class="desc mx-0 text-xl text-stone-5">
+      <div class="mx-0 text-xl text-stone-5">
         抱歉，你访问的页面不存在
       </div>
       <div>

src/views/index.vue

@@ -89,9 +89,6 @@ function open(url: string) {
         </HButton>
       </HDropdownMenu>
     </PageHeader>
-    <PageMain class="rounded-lg text-white" style="background: linear-gradient(50deg, rgb(14 76 253), rgb(106 142 255));">
-      全新版本 V4.0 正式发布，支持替换 UI 组件库，点击查看<span class="cursor-pointer px-1 text-yellow font-bold hover:op-70" @click="open('https://fantastic-admin.gitee.io/guide/v4.html')">V4.0 更新介绍</span>。
-    </PageMain>
     <div class="w-full flex flex-col gap-4 px-4 xl:flex-row">
       <PageMain class="ecology">
         <template #title>

src/views/login.vue

@@ -26,6 +26,9 @@ const banner = new URL('../assets/images/login-banner.png', import.meta.url).hre
 const logo = new URL('../assets/images/logo.png', import.meta.url).href
 const title = import.meta.env.VITE_APP_TITLE
 
+// 登录方式，default 账号密码登录，qrcode 扫码登录
+const loginType = ref('default')
+
 // 表单类型，login 登录，register 注册，reset 重置密码
 const formType = ref('login')
 const loading = ref(false)
@@ -159,44 +162,62 @@ function testAccount(account: string) {
         <img :src="banner" class="banner">
       </div>
       <ElForm v-show="formType === 'login'" ref="loginFormRef" :model="loginForm" :rules="loginRules" class="login-form">
-        <div class="title-container">
-          <h3 class="title">
-            欢迎来到 {{ title }} ! 👋🏻
-          </h3>
-        </div>
-        <div>
-          <ElFormItem prop="account">
-            <ElInput v-model="loginForm.account" placeholder="用户名" type="text" tabindex="1">
-              <template #prefix>
-                <SvgIcon name="i-ri:user-3-fill" />
-              </template>
-            </ElInput>
-          </ElFormItem>
-          <ElFormItem prop="password">
-            <ElInput v-model="loginForm.password" type="password" placeholder="密码" tabindex="2" autocomplete="new-password" show-password @keyup.enter="handleLogin">
-              <template #prefix>
-                <SvgIcon name="i-ri:lock-2-fill" />
-              </template>
-            </ElInput>
-          </ElFormItem>
-        </div>
-        <div class="flex-bar">
-          <ElCheckbox v-model="loginForm.remember">
-            记住我
-          </ElCheckbox>
-          <ElLink type="primary" :underline="false" @click="formType = 'reset'">
-            忘记密码了?
-          </ElLink>
-        </div>
-        <ElButton :loading="loading" type="primary" size="large" style="width: 100%;" @click.prevent="handleLogin">
-          登录
-        </ElButton>
-        <div class="sub-link">
-          <span class="text">还没有帐号?</span>
-          <ElLink type="primary" :underline="false" @click="formType = 'register'">
-            创建新帐号
-          </ElLink>
+        <div class="mb-6">
+          <HTabList
+            v-model="loginType" :options="[
+              { label: '账号密码登录', value: 'default' },
+              { label: '扫码登录', value: 'qrcode' },
+            ]"
+          />
         </div>
+        <template v-if="loginType === 'default'">
+          <div class="title-container">
+            <h3 class="title">
+              欢迎来到 {{ title }} ! 👋🏻
+            </h3>
+          </div>
+          <div>
+            <ElFormItem prop="account">
+              <ElInput v-model="loginForm.account" placeholder="用户名" type="text" tabindex="1">
+                <template #prefix>
+                  <SvgIcon name="i-ri:user-3-fill" />
+                </template>
+              </ElInput>
+            </ElFormItem>
+            <ElFormItem prop="password">
+              <ElInput v-model="loginForm.password" type="password" placeholder="密码" tabindex="2" autocomplete="new-password" show-password @keyup.enter="handleLogin">
+                <template #prefix>
+                  <SvgIcon name="i-ri:lock-2-fill" />
+                </template>
+              </ElInput>
+            </ElFormItem>
+          </div>
+          <div class="flex-bar">
+            <ElCheckbox v-model="loginForm.remember">
+              记住我
+            </ElCheckbox>
+            <ElLink type="primary" :underline="false" @click="formType = 'reset'">
+              忘记密码了?
+            </ElLink>
+          </div>
+          <ElButton :loading="loading" type="primary" size="large" style="width: 100%;" @click.prevent="handleLogin">
+            登录
+          </ElButton>
+          <div class="sub-link">
+            <span class="text">还没有帐号?</span>
+            <ElLink type="primary" :underline="false" @click="formType = 'register'">
+              创建新帐号
+            </ElLink>
+          </div>
+        </template>
+        <template v-else-if="loginType === 'qrcode'">
+          <div class="flex flex-col items-center">
+            <el-image src="https://s2.loli.net/2024/04/26/GsahtuIZ9XOg5jr.png" class="h-[250px] w-[250px]" />
+            <div class="mt-2 op-50">
+              请使用微信扫码登录
+            </div>
+          </div>
+        </template>
         <div style="margin-top: 20px; margin-bottom: -20px; text-align: center;">
           <ElDivider>演示账号一键登录</ElDivider>
           <ElButton type="primary" size="small" plain @click="testAccount('admin')">