chore: release v2.10.0

重构了路由注册的逻辑,无权限的路由也会被注册,在访问页面时候进行权限控制

.env.production

@@ -1,5 +1,3 @@
-NODE_ENV = production
-
 # 页面标题
 VITE_APP_TITLE = 页面标题
 # 接口请求地址，会设置到 axios 的 baseURL 参数上

.env.test

@@ -1,5 +1,3 @@
-NODE_ENV = production
-
 # 页面标题
 VITE_APP_TITLE = 页面标题(test)
 # 接口请求地址，会设置到 axios 的 baseURL 参数上

.eslintignore

@@ -0,0 +1,2 @@
+dist
+node_modules

.eslintrc

@@ -1,6 +1,10 @@
 {
   "extends": "@antfu",
   "rules": {
-    "curly": ["error", "all"]
+    "eslint-comments/no-unlimited-disable": "off",
+    "curly": ["error", "all"],
+    "vue/component-tags-order": ["error", {
+      "order": ["route", "script", "template", "style"]
+    }]
   }
 }

.github/workflows/release.yml

@@ -19,4 +19,69 @@ jobs:
 
       - run: npx changelogithub # or changelogithub@0.12 if ensure the stable result
         env:
-          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+
+  upload-archive:
+    needs: release
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Get Release
+        id: last_release
+        uses: joutvhu/get-release@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          latest: true
+
+      - name: Create Archive
+        uses: thedoctor0/zip-release@main
+        with:
+          type: 'zip'
+          filename: fantastic-admin.${{ steps.last_release.outputs.tag_name }}.zip
+          exclusions: '/.git/* /.github/*'
+
+      - name: Upload Archive To Release
+        uses: xresloader/upload-to-github-release@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          release_id: ${{ steps.last_release.outputs.id }}
+          draft: false
+          file: fantastic-admin.${{ steps.last_release.outputs.tag_name }}.zip
+
+  upload-archive-example:
+    needs: release
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+          ref: example
+
+      - name: Get Release
+        id: last_release
+        uses: joutvhu/get-release@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          latest: true
+
+      - name: Create Archive
+        uses: thedoctor0/zip-release@main
+        with:
+          type: 'zip'
+          filename: fantastic-admin.example.${{ steps.last_release.outputs.tag_name }}.zip
+          exclusions: '/.git/* /.github/*'
+
+      - name: Upload Archive To Release
+        uses: xresloader/upload-to-github-release@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          release_id: ${{ steps.last_release.outputs.id }}
+          draft: false
+          file: fantastic-admin.example.${{ steps.last_release.outputs.tag_name }}.zip

.husky/pre-commit

@@ -1,4 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-pnpm lint-staged

.lintstagedrc

@@ -1,5 +1,4 @@
 {
-  "src/**/*.{js,jsx,ts,tsx}": "eslint --cache --fix",
-  "src/**/*.{css,scss}": "stylelint --cache --fix --allow-empty-input",
-  "src/**/*.vue": ["eslint --cache --fix", "stylelint --cache --fix --allow-empty-input"]
+  "src/**/*.{ts,tsx,vue}": "eslint --cache --fix --no-ignore --no-error-on-unmatched-pattern",
+  "src/**/*.{css,scss,vue}": "stylelint --cache --fix --allow-empty-input"
 }

.stylelintignore

@@ -1,3 +1,3 @@
-dist/
-node_modules/
-src/assets/sprites/
+dist
+node_modules
+src/assets/sprites

.stylelintrc

@@ -13,7 +13,6 @@
     "property-no-unknown": null,
     "font-family-no-missing-generic-family-keyword": null,
     "selector-class-pattern": null,
-    "max-line-length": null,
     "scss/double-slash-comment-empty-line-before": null,
     "scss/no-global-function-names": null
   }

README.md

@@ -1,5 +1,5 @@
 <p align="center">
-    <img src="https://hooray.gitee.io/fantastic-admin/logo.png" width="200" height="200" />
+  <img src="https://hooray.gitee.io/fantastic-admin/logo.png" width="200" height="200" />
 </p>
 
 <h1 align="center">Fantastic-admin</h1>
@@ -7,18 +7,23 @@
 <p align="center">一款<b>开箱即用</b>的 Vue 中后台管理系统框架</p>
 
 <p align="center">
-    <a href="https://hooray.gitee.io/fantastic-admin/" target="_blank">官网</a>
-    ( <a href="https://hooray.github.io/fantastic-admin" target="_blank">备用</a> )
-    <span>&nbsp;|&nbsp;</span>
-    演示
-    ( <a href="https://hooray.gitee.io/fantastic-admin-example" target="_blank">基础版</a>
-    <a href="https://hooray.gitee.io/fantastic-admin-pro-example" target="_blank">专业版</a> )
-    <span>&nbsp;|&nbsp;</span>
-    <a href="https://hooray.gitee.io/fantastic-admin/support.html" target="_blank">技术支持</a>
-    <span>&nbsp;|&nbsp;</span>
-    <a href="https://hooray.gitee.io/fantastic-admin/buy.html" target="_blank">购买</a>
+  <a href="https://hooray.gitee.io/fantastic-admin" target="_blank">官网</a>
+  ( <a href="https://hooray.github.io/fantastic-admin" target="_blank">备用</a> )
+  <span>&nbsp;|&nbsp;</span>
+  演示
+  ( <a href="https://hooray.gitee.io/fantastic-admin-example" target="_blank">基础版</a>
+  <a href="https://hooray.gitee.io/fantastic-admin-pro-example" target="_blank">专业版</a> )
+  <span>&nbsp;|&nbsp;</span>
+  <a href="https://hooray.gitee.io/fantastic-admin/support.html" target="_blank">技术支持</a>
+  <span>&nbsp;|&nbsp;</span>
+  <a href="https://hooray.gitee.io/fantastic-admin/buy.html" target="_blank">购买</a>
 <p>
 
+<p align="center">
+  <a href="###"><img src="https://img.shields.io/github/license/hooray/fantastic-admin?label=%E5%BC%80%E6%BA%90%E5%8D%8F%E8%AE%AE&style=flat-square" /></a>
+  <a href="https://github.com/hooray/fantastic-admin/releases" target="_blank"><img src="https://img.shields.io/github/v/release/hooray/fantastic-admin?label=%E5%BD%93%E5%89%8D%E7%89%88%E6%9C%AC&style=flat-square" /></a>
+</p>
+
 ## 特点
 
 - 丰富的布局与主题，覆盖市面上各种中后台应用场景，兼容PC、平板和移动端
@@ -38,21 +43,23 @@
 - `vue2` Vue2 版本框架源码分支，不含示例代码，可直接用于实际开发（停止维护）
 - `vue2-example` Vue2 版本演示源码分支，包含大量示例，可用于参考学习（停止维护）
 
+如果你更注重使用时的稳定性，推荐去 [Github Releases](https://github.com/hooray/fantastic-admin/releases) 页面下载最新稳定版本的压缩包。
+
 ## 预览
 
 > 预览截图为 Vue3 专业版
 
 <table>
-    <tr>
-        <td><img src="https://hooray.gitee.io/fantastic-admin/preview1.png" /></td>
-        <td><img src="https://hooray.gitee.io/fantastic-admin/preview2.png" /></td>
-        <td><img src="https://hooray.gitee.io/fantastic-admin/preview3.png" /></td>
-    </tr>
-    <tr>
-        <td><img src="https://hooray.gitee.io/fantastic-admin/preview4.png" /></td>
-        <td><img src="https://hooray.gitee.io/fantastic-admin/preview5.png" /></td>
-        <td><img src="https://hooray.gitee.io/fantastic-admin/preview6.png" /></td>
-    </tr>
+  <tr>
+    <td><img src="https://hooray.gitee.io/fantastic-admin/preview1.png" /></td>
+    <td><img src="https://hooray.gitee.io/fantastic-admin/preview2.png" /></td>
+    <td><img src="https://hooray.gitee.io/fantastic-admin/preview3.png" /></td>
+  </tr>
+  <tr>
+    <td><img src="https://hooray.gitee.io/fantastic-admin/preview4.png" /></td>
+    <td><img src="https://hooray.gitee.io/fantastic-admin/preview5.png" /></td>
+    <td><img src="https://hooray.gitee.io/fantastic-admin/preview6.png" /></td>
+  </tr>
 </table>
 
 ## 支持
@@ -66,37 +73,37 @@
 ## 生态
 
 <table>
-    <tr>
-        <th colspan="3" align="center">
-            <a href="https://hooray.gitee.io/fantastic-startkit/" target="_blank">Fantastic-startkit</a>
-        </th>
-    </tr>
-    <tr>
-        <th colspan="3" align="center">
-            一款开箱即用的 Vue 项目启动套件
-        </th>
-    </tr>
+  <tr>
+    <th colspan="3" align="center">
+      <a href="https://hooray.gitee.io/fantastic-startkit/" target="_blank">Fantastic-startkit</a>
+    </th>
+  </tr>
+  <tr>
+    <th colspan="3" align="center">
+      一款开箱即用的 Vue 项目启动套件
+    </th>
+  </tr>
 </table>
 
 <table>
-    <tr>
-        <th colspan="3" align="center">
-            <a href="https://hooray.gitee.io/one-step-admin/" target="_blank">One-step-admin</a>
-        </th>
-    </tr>
-    <tr>
-        <th colspan="3" align="center">
-            一款干啥都快人一步的 Vue 中后台管理系统框架
-        </th>
-    </tr>
-    <tr>
-        <td><img src="https://hooray.gitee.io/one-step-admin/preview1.png" /></td>
-        <td><img src="https://hooray.gitee.io/one-step-admin/preview2.png" /></td>
-        <td><img src="https://hooray.gitee.io/one-step-admin/preview3.png" /></td>
-    </tr>
-    <tr>
-        <td><img src="https://hooray.gitee.io/one-step-admin/preview4.png" /></td>
-        <td><img src="https://hooray.gitee.io/one-step-admin/preview5.png" /></td>
-        <td><img src="https://hooray.gitee.io/one-step-admin/preview6.png" /></td>
-    </tr>
+  <tr>
+    <th colspan="3" align="center">
+      <a href="https://hooray.gitee.io/one-step-admin/" target="_blank">One-step-admin</a>
+    </th>
+  </tr>
+  <tr>
+    <th colspan="3" align="center">
+      一款干啥都快人一步的 Vue 中后台管理系统框架
+    </th>
+  </tr>
+  <tr>
+    <td><img src="https://hooray.gitee.io/one-step-admin/preview1.png" /></td>
+    <td><img src="https://hooray.gitee.io/one-step-admin/preview2.png" /></td>
+    <td><img src="https://hooray.gitee.io/one-step-admin/preview3.png" /></td>
+  </tr>
+  <tr>
+    <td><img src="https://hooray.gitee.io/one-step-admin/preview4.png" /></td>
+    <td><img src="https://hooray.gitee.io/one-step-admin/preview5.png" /></td>
+    <td><img src="https://hooray.gitee.io/one-step-admin/preview6.png" /></td>
+  </tr>
 </table>

index.html

@@ -3,10 +3,10 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
+    <link rel="stylesheet" href="/loading.css" />
     <link rel="stylesheet" href="/browser_upgrade/index.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title><%= title %></title>
-    <%- copyrightScript %>
+    <title>%VITE_APP_TITLE%</title>
   </head>
   <body>
     <div id="app">
@@ -17,7 +17,7 @@
           <div class="square"></div>
           <div class="square"></div>
         </div>
-        <div class="text"><%= title %>载入中…</div>
+        <div class="text">载入中</div>
       </div>
       <div id="browser-upgrade">
         <div class="title">为了您的体验，推荐使用以下浏览器</div>
@@ -33,8 +33,11 @@
         </div>
       </div>
     </div>
-    <%- loadingScript %>
+    <script>
+      if (!!window.ActiveXObject || 'ActiveXObject' in window) {
+        document.getElementById('browser-upgrade').style.display = 'block'
+      }
+    </script>
     <script type="module" src="/src/main.ts"></script>
-    <%- devtoolScript %>
   </body>
 </html>

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.1.0",
+  "version": "2.10.0",
   "scripts": {
     "dev": "vite",
     "build:test": "vue-tsc --noEmit && vite build --mode test",
@@ -10,76 +10,82 @@
     "new": "plop",
     "lint": "npm-run-all -s lint:tsc lint:eslint lint:stylelint",
     "lint:tsc": "vue-tsc --noEmit",
-    "lint:eslint": "eslint src/**/*.{ts,tsx,vue} --cache --fix",
-    "lint:stylelint": "stylelint src/**/*.{css,scss,vue} --cache --fix",
-    "prepare": "husky install",
-    "postinstall": "esno scripts/prepare.js",
+    "lint:eslint": "eslint src/**/*.{ts,tsx,vue} --cache --fix --no-ignore --no-error-on-unmatched-pattern",
+    "lint:stylelint": "stylelint src/**/*.{css,scss,vue} --cache --fix --allow-empty-input",
+    "postinstall": "simple-git-hooks && esno scripts/prepare.js",
     "preinstall": "npx only-allow pnpm",
     "commit": "git cz",
     "release": "bumpp"
   },
   "dependencies": {
-    "@tinymce/tinymce-vue": "^5.0.0",
-    "@vueuse/core": "^9.4.0",
-    "@vueuse/integrations": "^9.4.0",
-    "axios": "^1.1.3",
-    "dayjs": "^1.11.6",
-    "element-plus": "^2.2.19",
-    "hotkeys-js": "^3.10.0",
+    "@tinymce/tinymce-vue": "^5.0.1",
+    "@vueuse/core": "^9.13.0",
+    "@vueuse/integrations": "^9.13.0",
+    "axios": "^1.3.4",
+    "dayjs": "^1.11.7",
+    "element-plus": "^2.3.1",
+    "eruda": "^2.11.3",
+    "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",
-    "qs": "^6.11.0",
-    "tinymce": "^6.2.0",
-    "vue": "^3.2.41",
+    "pinia": "^2.0.33",
+    "qs": "^6.11.1",
+    "tinymce": "^6.4.0",
+    "vconsole": "^3.15.0",
+    "vue": "^3.2.47",
     "vue-router": "^4.1.6"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.27.0",
-    "@iconify-json/ep": "^1.1.8",
-    "@iconify/vue": "^4.0.0",
+    "@antfu/eslint-config": "^0.37.0",
+    "@iconify-json/ep": "^1.1.10",
+    "@iconify/vue": "^4.1.0",
     "@types/nprogress": "^0.2.0",
     "@types/path-browserify": "^1.0.0",
     "@types/qs": "^6.9.7",
-    "@vitejs/plugin-vue": "^3.2.0",
-    "@vitejs/plugin-vue-jsx": "^2.1.0",
-    "autoprefixer": "^10.4.13",
-    "bumpp": "^8.2.1",
-    "cz-git": "^1.3.12",
-    "eslint": "^8.26.0",
+    "@vitejs/plugin-vue": "^4.1.0",
+    "@vitejs/plugin-vue-jsx": "^3.0.1",
+    "autoprefixer": "^10.4.14",
+    "bumpp": "^9.0.0",
+    "cz-git": "^1.6.1",
+    "eslint": "^8.36.0",
     "esno": "^0.16.3",
-    "fs-extra": "^10.1.0",
+    "fs-extra": "^11.1.1",
     "http-server": "^14.1.1",
-    "husky": "^8.0.1",
-    "lint-staged": "^13.0.3",
+    "lint-staged": "^13.2.0",
     "npm-run-all": "^4.1.5",
-    "plop": "^3.1.1",
+    "plop": "^3.1.2",
     "postcss-html": "^1.5.0",
-    "sass": "^1.55.0",
-    "stylelint": "^14.14.0",
-    "stylelint-config-standard": "^29.0.0",
-    "stylelint-config-standard-scss": "^6.0.0",
+    "sass": "^1.60.0",
+    "simple-git-hooks": "^2.8.1",
+    "stylelint": "^15.3.0",
+    "stylelint-config-standard": "^31.0.0",
+    "stylelint-config-standard-scss": "^7.0.1",
     "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.1",
-    "vite-plugin-banner": "^0.5.0",
+    "stylelint-scss": "^4.6.0",
+    "svgo": "^3.0.2",
+    "terser": "^5.16.8",
+    "typescript": "^5.0.2",
+    "unplugin-auto-import": "^0.15.2",
+    "unplugin-vue-components": "^0.24.1",
+    "vite": "^4.2.1",
+    "vite-plugin-banner": "^0.7.0",
     "vite-plugin-compression": "^0.5.1",
-    "vite-plugin-html": "^3.2.0",
     "vite-plugin-mock": "^2.9.6",
-    "vite-plugin-pages": "^0.27.1",
+    "vite-plugin-pages": "^0.29.0",
     "vite-plugin-spritesmith": "^0.1.1",
     "vite-plugin-svg-icons": "^2.0.1",
-    "vite-plugin-vue-layouts": "^0.6.0",
+    "vite-plugin-vue-inspector": "^3.4.0",
+    "vite-plugin-vue-layouts": "^0.8.0",
     "vite-plugin-vue-setup-extend": "^0.4.0",
-    "vue-tsc": "^1.0.9"
+    "vue-tsc": "^1.2.0"
+  },
+  "simple-git-hooks": {
+    "pre-commit": "pnpm lint-staged",
+    "preserveUnused": true
   },
   "config": {
     "commitizen": {

plop-templates/page/index.hbs

@@ -1,3 +1,10 @@
+{{#if isFilesystem}}
+<route lang="yaml">
+meta:
+  title: 页面标题
+</route>
+{{/if}}
+
 <script lang="ts" setup name="{{ properCase componentName }}">
 // 逻辑代码
 </script>

plop-templates/page/prompt.js

@@ -36,6 +36,12 @@ module.exports = {
         }
       },
     },
+    {
+      type: 'confirm',
+      name: 'isFilesystem',
+      message: '是否为基于文件系统的路由页面',
+      default: false,
+    },
   ],
   actions: (data) => {
     const relativePath = path.relative('src/views', data.path)

public/browser_upgrade/index.css

@@ -1,119 +1,49 @@
-#app {
-    height: 100%;
-}
-.fantastic-admin-home {
-    position: absolute;
-    z-index: 10000;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    user-select: none;
-    color: #736477;
-    background-color: snow;
-}
-.fantastic-admin-home .loading {
-    height: 40px;
-    width: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-wrap: wrap;
-}
-.fantastic-admin-home .square {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 20px;
-    width: 20px;
-}
-.fantastic-admin-home .square::before {
-    content: "";
-    width: 10px;
-    height: 10px;
-    border-radius: 15%;
-    border: 3px solid #8c858f;
-}
-.fantastic-admin-home .loading.animate .square::before {
-    animation: square-to-dot-animation 1.2s linear;
-}
-.fantastic-admin-home .loading.animate .square:nth-child(1)::before {
-    animation-delay: calc(100ms * 1);
-}
-.fantastic-admin-home .loading.animate .square:nth-child(2)::before {
-    animation-delay: calc(100ms * 2);
-}
-.fantastic-admin-home .loading.animate .square:nth-child(3)::before {
-    animation-delay: calc(100ms * 3);
-}
-.fantastic-admin-home .loading.animate .square:nth-child(4)::before {
-    animation-delay: calc(100ms * 4);
-}
-@keyframes square-to-dot-animation {
-    15%,
-    55% {
-        border-radius: 100%;
-        width: 0;
-        height: 0;
-        margin: 5px;
-        border-width: 5px;
-    }
-    70% {
-        border-radius: 15%;
-        width: 10px;
-        height: 10px;
-        margin: initial;
-        border-width: 3px;
-    }
-}
-.fantastic-admin-home .text {
-    font-size: 24px;
-    margin-top: 20px;
-}
 #browser-upgrade {
-    position: absolute;
-    z-index: 10001;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-    display: none;
-    user-select: none;
-    color: #736477;
-    background-color: snow;
+  position: absolute;
+  z-index: 10001;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  display: none;
+  user-select: none;
+  color: #736477;
+  background-color: snow;
 }
+
 #browser-upgrade .title {
-    margin: 40px 0;
-    text-align: center;
-    font-size: 24px;
+  margin: 40px 0;
+  text-align: center;
+  font-size: 24px;
 }
+
 #browser-upgrade .browsers {
-    text-align: center;
+  text-align: center;
 }
+
 #browser-upgrade .browsers .browser {
-    display: inline-block;
-    margin: 0 20px;
-    cursor: pointer;
-    text-decoration: none;
+  display: inline-block;
+  margin: 0 20px;
+  cursor: pointer;
+  text-decoration: none;
 }
+
 #browser-upgrade .browsers .browser .browser-icon {
-    display: block;
-    width: 50px;
-    height: 50px;
-    margin: 0 auto;
-    border: none;
+  display: block;
+  width: 50px;
+  height: 50px;
+  margin: 0 auto;
+  border: none;
 }
+
 #browser-upgrade .browsers .browser .browser-name {
-    text-align: center;
-    margin-top: 10px;
-    padding-bottom: 2px;
-    color: #736477;
-    border-bottom: 1px solid transparent;
+  text-align: center;
+  margin-top: 10px;
+  padding-bottom: 2px;
+  color: #736477;
+  border-bottom: 1px solid transparent;
 }
+
 #browser-upgrade .browsers .browser:hover .browser-name {
-    border-bottom: 1px solid #736477;
+  border-bottom: 1px solid #736477;
 }

public/loading.css

@@ -0,0 +1,92 @@
+#app {
+  height: 100%;
+}
+
+.fantastic-admin-home {
+  position: absolute;
+  z-index: 10000;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  user-select: none;
+  color: #736477;
+  background-color: snow;
+}
+
+.fantastic-admin-home .loading {
+  height: 40px;
+  width: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.fantastic-admin-home .loading .square {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 20px;
+  width: 20px;
+}
+
+.fantastic-admin-home .loading .square::before {
+  content: "";
+  width: 10px;
+  height: 10px;
+  border-radius: 15%;
+  border: 3px solid #8c858f;
+  animation: square-to-dot-animation 2s linear infinite;
+}
+
+.fantastic-admin-home .loading .square:nth-child(1)::before {
+  animation-delay: calc(150ms * 1);
+}
+
+.fantastic-admin-home .loading .square:nth-child(2)::before {
+  animation-delay: calc(150ms * 2);
+}
+
+.fantastic-admin-home .loading .square:nth-child(3)::before {
+  animation-delay: calc(150ms * 3);
+}
+
+.fantastic-admin-home .loading .square:nth-child(4)::before {
+  animation-delay: calc(150ms * 4);
+}
+
+@keyframes square-to-dot-animation {
+  15%,
+  25% {
+    border-radius: 100%;
+    width: 0;
+    height: 0;
+    margin: 5px;
+    border-width: 5px;
+  }
+
+  40% {
+    border-radius: 15%;
+    width: 10px;
+    height: 10px;
+    margin: initial;
+    border-width: 3px;
+  }
+}
+
+.fantastic-admin-home .text {
+  position: relative;
+  font-size: 24px;
+  margin-top: 20px;
+}
+
+.fantastic-admin-home .text::after {
+  content: '…';
+  position: absolute;
+  padding-left: 5px;
+}

src/App.vue

@@ -1,11 +1,13 @@
 <script lang="ts" setup>
+import eruda from 'eruda'
+import VConsole from 'vconsole'
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
 import hotkeys from 'hotkeys-js'
 import eventBus from './utils/eventBus'
 import useSettingsStore from '@/store/modules/settings'
-import useMenuStore from '@/store/modules/menu'
 
 const settingsStore = useSettingsStore()
+const { auth } = useAuth()
 
 const buttonConfig = ref({
   autoInsertSpace: true,
@@ -14,7 +16,7 @@ const buttonConfig = ref({
 // 侧边栏主导航当前实际宽度
 const mainSidebarActualWidth = computed(() => {
   let actualWidth = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--g-main-sidebar-width'))
-  if (['head', 'single'].includes(settingsStore.menu.menuMode)) {
+  if (['head', 'single'].includes(settingsStore.settings.menu.menuMode)) {
     actualWidth = 0
   }
   return `${actualWidth}px`
@@ -23,51 +25,18 @@ const mainSidebarActualWidth = computed(() => {
 // 侧边栏次导航当前实际宽度
 const subSidebarActualWidth = computed(() => {
   let actualWidth = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--g-sub-sidebar-width'))
-  if (settingsStore.menu.subMenuCollapse) {
+  if (settingsStore.settings.menu.subMenuCollapse) {
     actualWidth = 64
   }
   return `${actualWidth}px`
 })
 
-watch(() => settingsStore.app.colorScheme, () => {
-  if (settingsStore.app.colorScheme === 'dark') {
-    document.documentElement.classList.add('dark')
-  }
-  else {
-    document.documentElement.classList.remove('dark')
-  }
-}, {
-  immediate: true,
-})
-
-watch(() => settingsStore.mode, () => {
-  if (settingsStore.mode === 'pc') {
-    settingsStore.$patch((state) => {
-      state.menu.subMenuCollapse = settingsStore.subMenuCollapseLastStatus
-    })
-  }
-  else if (settingsStore.mode === 'mobile') {
-    settingsStore.$patch((state) => {
-      state.menu.subMenuCollapse = true
-    })
-  }
-  document.body.setAttribute('data-mode', settingsStore.mode)
-}, {
-  immediate: true,
-})
-
-watch(() => settingsStore.menu.menuMode, () => {
-  document.body.setAttribute('data-menu-mode', settingsStore.menu.menuMode)
-}, {
-  immediate: true,
-})
-
 watch([
-  () => settingsStore.app.enableDynamicTitle,
+  () => settingsStore.settings.app.enableDynamicTitle,
   () => settingsStore.title,
 ], () => {
-  if (settingsStore.app.enableDynamicTitle && settingsStore.title) {
-    const title = settingsStore.title
+  if (settingsStore.settings.app.enableDynamicTitle && settingsStore.title) {
+    const title = typeof settingsStore.title === 'function' ? settingsStore.title() : settingsStore.title
     document.title = `${title} - ${import.meta.env.VITE_APP_TITLE}`
   }
   else {
@@ -86,16 +55,23 @@ onMounted(() => {
     eventBus.emit('global-system-info-toggle')
   })
 })
+
+import.meta.env.VITE_APP_DEBUG_TOOL === 'eruda' && eruda.init()
+import.meta.env.VITE_APP_DEBUG_TOOL === 'vconsole' && new VConsole()
 </script>
 
 <template>
-  <el-config-provider :locale="zhCn" :size="settingsStore.app.elementSize" :button="buttonConfig">
+  <el-config-provider :locale="zhCn" :size="settingsStore.settings.app.elementSize" :button="buttonConfig">
     <RouterView
+      v-slot="{ Component, route }"
       :style="{
         '--g-main-sidebar-actual-width': mainSidebarActualWidth,
         '--g-sub-sidebar-actual-width': subSidebarActualWidth,
       }"
-    />
+    >
+      <component :is="Component" v-if="auth(route.meta.auth ?? '')" />
+      <not-allowed v-else />
+    </RouterView>
     <system-info />
   </el-config-provider>
 </template>

src/api/index.ts

@@ -5,17 +5,18 @@ import router from '@/router/index'
 import useUserStore from '@/store/modules/user'
 
 const toLogin = () => {
-  useUserStore().logout()
-  router.push({
-    path: '/login',
-    query: {
-      redirect: router.currentRoute.value.path !== '/login' ? router.currentRoute.value.fullPath : undefined,
-    },
+  useUserStore().logout().then(() => {
+    router.push({
+      path: '/login',
+      query: {
+        redirect: router.currentRoute.value.path !== '/login' ? router.currentRoute.value.fullPath : undefined,
+      },
+    })
   })
 }
 
 const api = axios.create({
-  baseURL: import.meta.env.DEV && import.meta.env.VITE_OPEN_PROXY === 'true' ? '/proxy/' : import.meta.env.VITE_APP_API_BASEURL,
+  baseURL: (import.meta.env.DEV && import.meta.env.VITE_OPEN_PROXY === 'true') ? '/proxy/' : import.meta.env.VITE_APP_API_BASEURL,
   timeout: 1000 * 60,
   responseType: 'json',
 })

src/assets/icons/fullscreen-exit.svg

@@ -1 +1 @@
-<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M768 298.667h170.667V384h-256V128H768v170.667zM341.333 384h-256v-85.333H256V128h85.333v256zM768 725.333V896h-85.333V640h256v85.333H768zM341.333 640v256H256V725.333H85.333V640h256z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" class="icon" viewBox="0 0 1024 1024"><path d="M768 298.667h170.667V384h-256V128H768v170.667zM341.333 384h-256v-85.333H256V128h85.333v256zM768 725.333V896h-85.333V640h256v85.333H768zM341.333 640v256H256V725.333H85.333V640h256z"/></svg>

src/assets/icons/fullscreen.svg

@@ -1 +1 @@
-<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M682.667 128h256v256h-85.334V213.333H682.667V128zm-597.334 0h256v85.333H170.667V384H85.333V128zm768 682.667V640h85.334v256h-256v-85.333h170.666zm-682.666 0h170.666V896h-256V640h85.334v170.667z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" class="icon" viewBox="0 0 1024 1024"><path d="M682.667 128h256v256h-85.334V213.333H682.667V128zm-597.334 0h256v85.333H170.667V384H85.333V128zm768 682.667V640h85.334v256h-256v-85.333h170.666zm-682.666 0h170.666V896h-256V640h85.334v170.667z"/></svg>

src/assets/icons/image-load-fail.svg

@@ -1 +1 @@
-<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M704 328a72 72 0 1 0 144 0 72 72 0 1 0-144 0z"/><path d="M999.904 116.608a32 32 0 0 0-21.952-10.912L521.76 73.792a31.552 31.552 0 0 0-27.2 11.904l-92.192 114.848a32 32 0 0 0 .672 40.896l146.144 169.952-147.456 194.656 36.48-173.376a32 32 0 0 0-11.136-31.424L235.616 245.504l79.616-125.696a32 32 0 0 0-29.28-49.024L45.76 87.552a32 32 0 0 0-29.696 34.176l55.808 798.016a32.064 32.064 0 0 0 34.304 29.696l176.512-13.184c17.632-1.312 30.848-16.672 29.504-34.272s-16.576-31.04-34.304-29.536L133.44 883.232l-6.432-92.512 125.312-12.576a32 32 0 0 0 28.672-35.04 32.16 32.16 0 0 0-35.04-28.672L122.56 726.848 82.144 149.184l145.152-10.144-60.96 96.224a32 32 0 0 0 6.848 41.952l198.4 161.344-58.752 279.296a30.912 30.912 0 0 0 .736 14.752 31.68 31.68 0 0 0 1.408 11.04l51.52 154.56a31.968 31.968 0 0 0 27.456 21.76l523.104 47.552a32.064 32.064 0 0 0 34.848-29.632l55.776-798.048a32.064 32.064 0 0 0-7.776-23.232zm-98.912 630.848-412.576-39.648a31.52 31.52 0 0 0-34.912 28.768 32 32 0 0 0 28.8 34.912l414.24 39.808-6.272 89.536-469.728-42.72-39.584-118.72 234.816-310.016a31.936 31.936 0 0 0-1.248-40.192L468.896 219.84l65.088-81.056 407.584 28.48-40.576 580.192z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" class="icon" viewBox="0 0 1024 1024"><path d="M704 328a72 72 0 1 0 144 0 72 72 0 1 0-144 0z"/><path d="M999.904 116.608a32 32 0 0 0-21.952-10.912L521.76 73.792a31.552 31.552 0 0 0-27.2 11.904l-92.192 114.848a32 32 0 0 0 .672 40.896l146.144 169.952-147.456 194.656 36.48-173.376a32 32 0 0 0-11.136-31.424L235.616 245.504l79.616-125.696a32 32 0 0 0-29.28-49.024L45.76 87.552a32 32 0 0 0-29.696 34.176l55.808 798.016a32.064 32.064 0 0 0 34.304 29.696l176.512-13.184c17.632-1.312 30.848-16.672 29.504-34.272s-16.576-31.04-34.304-29.536L133.44 883.232l-6.432-92.512 125.312-12.576a32 32 0 0 0 28.672-35.04 32.16 32.16 0 0 0-35.04-28.672L122.56 726.848 82.144 149.184l145.152-10.144-60.96 96.224a32 32 0 0 0 6.848 41.952l198.4 161.344-58.752 279.296a30.912 30.912 0 0 0 .736 14.752 31.68 31.68 0 0 0 1.408 11.04l51.52 154.56a31.968 31.968 0 0 0 27.456 21.76l523.104 47.552a32.064 32.064 0 0 0 34.848-29.632l55.776-798.048a32.064 32.064 0 0 0-7.776-23.232zm-98.912 630.848-412.576-39.648a31.52 31.52 0 0 0-34.912 28.768 32 32 0 0 0 28.8 34.912l414.24 39.808-6.272 89.536-469.728-42.72-39.584-118.72 234.816-310.016a31.936 31.936 0 0 0-1.248-40.192L468.896 219.84l65.088-81.056 407.584 28.48-40.576 580.192z"/></svg>

src/assets/icons/search-down.svg

@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1629577492940" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7817" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M512.213359 958.989357 63.594899 510.930645l84.024695-84.023672L448.20351 729.129202 448.20351 63.546292l127.940904 0L576.144414 729.129202l299.651684-302.222229 84.009346 84.023672L512.213359 958.989357z" p-id="7818"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path d="M512.213 958.99 63.595 510.93l84.025-84.023 300.584 302.222V63.546h127.94V729.13l299.652-302.222 84.01 84.024-447.593 448.058z"/></svg>

src/assets/icons/search-enter.svg

@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1629616013600" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3179" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M916.210526 242.526316v215.578947H204.8l194.021053-194.021052-75.452632-75.452632-323.368421 323.368421 323.368421 323.368421 75.452632-75.452632-194.021053-194.021052h819.2v-323.368421z" p-id="3180"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path d="M916.21 242.526v215.58H204.8l194.021-194.022-75.453-75.452L0 512l323.368 323.368 75.453-75.452L204.8 565.895H1024V242.526z"/></svg>

src/assets/icons/search-up.svg

@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1629577505039" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8607" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M959.804421 511.603981l-84.009346 84.023672L576.143391 293.406446l0 665.582911L448.20351 958.989357 448.20351 293.406446 147.619594 595.628676l-84.024695-84.023672L512.213359 63.546292 959.804421 511.603981z" p-id="8608"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path d="m959.804 511.604-84.009 84.024-299.652-302.222V958.99h-127.94V293.406L147.62 595.63l-84.025-84.024L512.213 63.546l447.591 448.058z"/></svg>

src/assets/icons/sidebar-breadcrumb.svg

@@ -1 +1 @@
-<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M165.415 827.077c-11.815 0-19.692-7.877-19.692-19.692V214.646c0-11.815 7.877-19.692 19.692-19.692h159.508c7.877 0 17.723 3.938 23.63 9.846l228.432 287.508c7.877 9.846 7.877 25.6 0 37.415l-230.4 287.508c-5.908 7.877-15.754 11.815-25.6 11.815l-155.57-1.97zm706.954-334.77L641.97 206.77c-9.846-11.815-27.569-15.754-41.354-3.938l-45.292 37.415c-13.785 9.846-15.754 29.539-3.938 41.354L738.462 512 551.385 744.37c-9.847 11.815-7.877 31.507 3.938 41.353l45.292 37.415c13.785 9.847 29.539 7.877 41.354-3.938l230.4-287.508c7.877-15.754 7.877-29.538 0-39.384z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" class="icon" viewBox="0 0 1024 1024"><path d="M165.415 827.077c-11.815 0-19.692-7.877-19.692-19.692V214.646c0-11.815 7.877-19.692 19.692-19.692h159.508c7.877 0 17.723 3.938 23.63 9.846l228.432 287.508c7.877 9.846 7.877 25.6 0 37.415l-230.4 287.508c-5.908 7.877-15.754 11.815-25.6 11.815l-155.57-1.97zm706.954-334.77L641.97 206.77c-9.846-11.815-27.569-15.754-41.354-3.938l-45.292 37.415c-13.785 9.846-15.754 29.539-3.938 41.354L738.462 512 551.385 744.37c-9.847 11.815-7.877 31.507 3.938 41.353l45.292 37.415c13.785 9.847 29.539 7.877 41.354-3.938l230.4-287.508c7.877-15.754 7.877-29.538 0-39.384z"/></svg>

src/assets/icons/sidebar-default.svg

@@ -1 +1 @@
-<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M487 71.425a75 75 0 0 1 72.575 0l335.7 185.5a75 75 0 0 1 38.75 65.65V690.85a75 75 0 0 1-38.75 65.625l-335.7 185.55a75 75 0 0 1-72.55 0l-335.7-185.5a75 75 0 0 1-38.75-65.675V322.6a75 75 0 0 1 38.75-65.6L487 71.4v.025zM859 322.6 523.275 137.1l-335.7 185.5v368.25l335.7 185.5 335.75-185.5V322.6zm-601.75 37.1A37.5 37.5 0 0 1 308.2 345l215.1 118.875L738.45 345a37.5 37.5 0 0 1 36.25 65.625l-213.9 118.25V764.55a37.5 37.5 0 0 1-75 0v-235.7l-213.9-118.2a37.5 37.5 0 0 1-14.65-51v.05z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" class="icon" viewBox="0 0 1024 1024"><path d="M487 71.425a75 75 0 0 1 72.575 0l335.7 185.5a75 75 0 0 1 38.75 65.65V690.85a75 75 0 0 1-38.75 65.625l-335.7 185.55a75 75 0 0 1-72.55 0l-335.7-185.5a75 75 0 0 1-38.75-65.675V322.6a75 75 0 0 1 38.75-65.6L487 71.4v.025zM859 322.6 523.275 137.1l-335.7 185.5v368.25l335.7 185.5 335.75-185.5V322.6zm-601.75 37.1A37.5 37.5 0 0 1 308.2 345l215.1 118.875L738.45 345a37.5 37.5 0 0 1 36.25 65.625l-213.9 118.25V764.55a37.5 37.5 0 0 1-75 0v-235.7l-213.9-118.2a37.5 37.5 0 0 1-14.65-51v.05z"/></svg>

src/assets/icons/sidebar-menu.svg

@@ -1 +1 @@
-<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M913.6 135.2H380.2c-26.7 0-44.4 17.8-44.4 44.4V224c0 26.7 17.8 44.4 44.4 44.4h533.3c26.7 0 44.4-17.8 44.4-44.4v-44.4c.1-26.6-17.7-44.4-44.3-44.4zm-755.6 0h-44.4c-22.2 0-44.4 22.2-44.4 44.4V224c0 22.2 22.2 44.4 44.4 44.4H158c22.2 0 44.4-22.2 44.4-44.4v-44.4c.1-22.2-22.1-44.4-44.4-44.4zm0 311.1h-44.4c-22.2 0-44.4 22.2-44.4 44.4v44.4c0 22.2 22.2 44.4 44.4 44.4H158c22.2 0 44.4-22.2 44.4-44.4v-44.4c.1-22.2-22.1-44.4-44.4-44.4zm755.6 0H380.2c-26.7 0-44.4 17.8-44.4 44.4v44.4c0 26.7 17.8 44.4 44.4 44.4h533.3c26.7 0 44.4-17.8 44.4-44.4v-44.4c.1-26.6-17.7-44.4-44.3-44.4zM158 757.4h-44.4c-22.2 0-44.4 22.2-44.4 44.4v44.4c0 22.2 22.2 44.4 44.4 44.4H158c22.2 0 44.4-22.2 44.4-44.4v-44.4c.1-22.2-22.1-44.4-44.4-44.4zm755.6 0H380.2c-26.7 0-44.4 17.8-44.4 44.4v44.4c0 26.7 17.8 44.4 44.4 44.4h533.3c26.7 0 44.4-17.8 44.4-44.4v-44.4c.1-26.6-17.7-44.4-44.3-44.4z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" class="icon" viewBox="0 0 1024 1024"><path d="M913.6 135.2H380.2c-26.7 0-44.4 17.8-44.4 44.4V224c0 26.7 17.8 44.4 44.4 44.4h533.3c26.7 0 44.4-17.8 44.4-44.4v-44.4c.1-26.6-17.7-44.4-44.3-44.4zm-755.6 0h-44.4c-22.2 0-44.4 22.2-44.4 44.4V224c0 22.2 22.2 44.4 44.4 44.4H158c22.2 0 44.4-22.2 44.4-44.4v-44.4c.1-22.2-22.1-44.4-44.4-44.4zm0 311.1h-44.4c-22.2 0-44.4 22.2-44.4 44.4v44.4c0 22.2 22.2 44.4 44.4 44.4H158c22.2 0 44.4-22.2 44.4-44.4v-44.4c.1-22.2-22.1-44.4-44.4-44.4zm755.6 0H380.2c-26.7 0-44.4 17.8-44.4 44.4v44.4c0 26.7 17.8 44.4 44.4 44.4h533.3c26.7 0 44.4-17.8 44.4-44.4v-44.4c.1-26.6-17.7-44.4-44.3-44.4zM158 757.4h-44.4c-22.2 0-44.4 22.2-44.4 44.4v44.4c0 22.2 22.2 44.4 44.4 44.4H158c22.2 0 44.4-22.2 44.4-44.4v-44.4c.1-22.2-22.1-44.4-44.4-44.4zm755.6 0H380.2c-26.7 0-44.4 17.8-44.4 44.4v44.4c0 26.7 17.8 44.4 44.4 44.4h533.3c26.7 0 44.4-17.8 44.4-44.4v-44.4c.1-26.6-17.7-44.4-44.3-44.4z"/></svg>

src/assets/icons/toolbar-collapse.svg

@@ -1 +1 @@
-<svg class="icon" viewBox="0 0 1028 1024" xmlns="http://www.w3.org/2000/svg" width="200.781" height="200"><path d="M989.867 234.667H499.2c-17.067 0-34.133-21.334-34.133-42.667 0-25.6 12.8-42.667 34.133-42.667h490.667c17.066 0 34.133 17.067 34.133 42.667 0 21.333-12.8 42.667-34.133 42.667zm-473.6 128h465.066c25.6 0 46.934 21.333 46.934 42.666 0 25.6-21.334 42.667-46.934 42.667H516.267c-25.6 0-46.934-17.067-46.934-42.667s21.334-42.666 46.934-42.666zm0 298.666c-25.6 0-46.934-21.333-46.934-42.666 0-25.6 21.334-42.667 46.934-42.667h465.066c25.6 0 46.934 17.067 46.934 42.667s-21.334 42.666-46.934 42.666H516.267zm4.266 128H972.8c29.867 0 51.2 17.067 51.2 42.667s-21.333 42.667-51.2 42.667H520.533c-29.866 0-51.2-17.067-51.2-42.667s21.334-42.667 51.2-42.667zm-192 25.6c-17.066 17.067-46.933 17.067-64 0L12.8 541.867c-17.067-17.067-17.067-51.2 0-68.267l251.733-273.067c17.067-17.066 46.934-17.066 64 0s17.067 51.2 0 68.267L106.667 507.733l221.866 238.934c17.067 21.333 17.067 51.2 0 68.266z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="200.781" height="200" class="icon" viewBox="0 0 1028 1024"><path d="M989.867 234.667H499.2c-17.067 0-34.133-21.334-34.133-42.667 0-25.6 12.8-42.667 34.133-42.667h490.667c17.066 0 34.133 17.067 34.133 42.667 0 21.333-12.8 42.667-34.133 42.667zm-473.6 128h465.066c25.6 0 46.934 21.333 46.934 42.666 0 25.6-21.334 42.667-46.934 42.667H516.267c-25.6 0-46.934-17.067-46.934-42.667s21.334-42.666 46.934-42.666zm0 298.666c-25.6 0-46.934-21.333-46.934-42.666 0-25.6 21.334-42.667 46.934-42.667h465.066c25.6 0 46.934 17.067 46.934 42.667s-21.334 42.666-46.934 42.666H516.267zm4.266 128H972.8c29.867 0 51.2 17.067 51.2 42.667s-21.333 42.667-51.2 42.667H520.533c-29.866 0-51.2-17.067-51.2-42.667s21.334-42.667 51.2-42.667zm-192 25.6c-17.066 17.067-46.933 17.067-64 0L12.8 541.867c-17.067-17.067-17.067-51.2 0-68.267l251.733-273.067c17.067-17.066 46.934-17.066 64 0s17.067 51.2 0 68.267L106.667 507.733l221.866 238.934c17.067 21.333 17.067 51.2 0 68.266z"/></svg>

src/assets/styles/globals.scss

@@ -47,7 +47,7 @@ body {
   font-family: Lato, "PingFang SC", "Microsoft YaHei", sans-serif;
   -webkit-tap-highlight-color: transparent;
 
-  &.hidden {
+  &.overflow-hidden {
     overflow: hidden;
   }
 }

src/components.d.ts

@@ -1,30 +0,0 @@
-// generated by unplugin-vue-components
-// We suggest you to commit this file into source control
-// Read more: https://github.com/vuejs/core/pull/3399
-import '@vue/runtime-core'
-
-export {}
-
-declare module '@vue/runtime-core' {
-  export interface GlobalComponents {
-    Auth: typeof import('./components/Auth/index.vue')['default']
-    AuthAll: typeof import('./components/AuthAll/index.vue')['default']
-    BatchActionBar: typeof import('./components/BatchActionBar/index.vue')['default']
-    Copyright: typeof import('./components/Copyright/index.vue')['default']
-    Editor: typeof import('./components/Editor/index.vue')['default']
-    FileUpload: typeof import('./components/FileUpload/index.vue')['default']
-    FixedActionBar: typeof import('./components/FixedActionBar/index.vue')['default']
-    ImagePreview: typeof import('./components/ImagePreview/index.vue')['default']
-    ImagesUpload: typeof import('./components/ImagesUpload/index.vue')['default']
-    ImageUpload: typeof import('./components/ImageUpload/index.vue')['default']
-    PageHeader: typeof import('./components/PageHeader/index.vue')['default']
-    PageMain: typeof import('./components/PageMain/index.vue')['default']
-    PcasCascader: typeof import('./components/PcasCascader/index.vue')['default']
-    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: typeof import('vue-router')['RouterView']
-    SearchBar: typeof import('./components/SearchBar/index.vue')['default']
-    SvgIcon: typeof import('./components/SvgIcon/index.vue')['default']
-    SystemInfo: typeof import('./components/SystemInfo/index.vue')['default']
-    Trend: typeof import('./components/Trend/index.vue')['default']
-  }
-}

src/components/Copyright/index.vue

@@ -6,15 +6,15 @@ const settingsStore = useSettingsStore()
 </script>
 
 <template>
-  <footer v-if="route.meta.copyright ?? settingsStore.copyright.enable" class="copyright">
+  <footer v-if="route.meta.copyright ?? settingsStore.settings.copyright.enable" class="copyright">
     <span>Copyright</span>
     <span class="icon">©</span>
-    <span v-if="settingsStore.copyright.dates">{{ settingsStore.copyright.dates }}</span>
-    <template v-if="settingsStore.copyright.company">
-      <a v-if="settingsStore.copyright.website" :href="settingsStore.copyright.website" target="_blank" rel="noopener">{{ settingsStore.copyright.company }}</a>
-      <span v-else>{{ settingsStore.copyright.company }}</span>
+    <span v-if="settingsStore.settings.copyright.dates">{{ settingsStore.settings.copyright.dates }}</span>
+    <template v-if="settingsStore.settings.copyright.company">
+      <a v-if="settingsStore.settings.copyright.website" :href="settingsStore.settings.copyright.website" target="_blank" rel="noopener">{{ settingsStore.settings.copyright.company }}</a>
+      <span v-else>{{ settingsStore.settings.copyright.company }}</span>
     </template>
-    <a v-if="settingsStore.copyright.beian" href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">{{ settingsStore.copyright.beian }}</a>
+    <a v-if="settingsStore.settings.copyright.beian" href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">{{ settingsStore.settings.copyright.beian }}</a>
   </footer>
 </template>
 

src/components/Editor/index.vue

@@ -42,8 +42,8 @@ const settingsStore = useSettingsStore()
 const defaultSetting = ref({
   language_url: 'tinymce/langs/zh-Hans.js',
   language: 'zh-Hans',
-  skin_url: settingsStore.app.colorScheme === 'light' ? 'tinymce/skins/ui/oxide' : 'tinymce/skins/ui/oxide-dark',
-  content_css: settingsStore.app.colorScheme === 'light' ? 'tinymce/skins/content/default/content.min.css' : 'tinymce/skins/content/dark/content.min.css',
+  skin_url: settingsStore.settings.app.colorScheme === 'light' ? 'tinymce/skins/ui/oxide' : 'tinymce/skins/ui/oxide-dark',
+  content_css: settingsStore.settings.app.colorScheme === 'light' ? 'tinymce/skins/content/default/content.min.css' : 'tinymce/skins/content/dark/content.min.css',
   min_height: 250,
   max_height: 600,
   selector: 'textarea',
@@ -59,7 +59,7 @@ const defaultSetting = ref({
     '%H:%M:%S',
   ],
   // https://www.tiny.cloud/docs/tinymce/6/file-image-upload/#images_upload_handler
-  images_upload_handler: (blobInfo: any, progress: any) => new Promise((resolve, reject) => {
+  images_upload_handler: (blobInfo: any) => new Promise((resolve) => {
     const img = `data:image/jpeg;base64,${blobInfo.base64()}`
     resolve(img)
   }),

src/components/ImagePreview/index.vue

@@ -24,7 +24,7 @@ const realHeight = computed(() => {
 </script>
 
 <template>
-  <el-image :src="src" fit="cover" :style="`width:${realWidth};height:${realHeight};`" :preview-src-list="[src]">
+  <el-image :src="src" fit="cover" :style="`width:${realWidth};height:${realHeight};`" :preview-src-list="[src]" preview-teleported>
     <template #error>
       <div class="image-slot">
         <el-icon>

src/components/ImageUpload/index.vue

@@ -147,7 +147,7 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
         <el-alert :title="`上传图片支持 ${ext.join(' / ')} 格式，且图片大小不超过 ${size}MB，建议图片尺寸为 ${width}*${height}`" type="info" show-icon :closable="false" />
       </div>
     </div>
-    <el-image-viewer v-if="uploadData.imageViewerVisible" :url-list="[url]" @close="previewClose" />
+    <el-image-viewer v-if="uploadData.imageViewerVisible" :url-list="[url]" teleported @close="previewClose" />
   </div>
 </template>
 

src/components/ImagesUpload/index.vue

@@ -174,7 +174,7 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
         <el-alert :title="`上传图片支持 ${ext.join(' / ')} 格式，单张图片大小不超过 ${size}MB，建议图片尺寸为 ${width}*${height}，且图片数量不超过 ${max} 张`" type="info" show-icon :closable="false" />
       </div>
     </div>
-    <el-image-viewer v-if="uploadData.imageViewerVisible" :url-list="url as string[]" :initial-index="uploadData.dialogImageIndex" @close="previewClose" />
+    <el-image-viewer v-if="uploadData.imageViewerVisible" :url-list="url as string[]" :initial-index="uploadData.dialogImageIndex" teleported @close="previewClose" />
   </div>
 </template>
 

src/components/NotAllowed/index.vue

@@ -0,0 +1,71 @@
+<script lang="ts" setup>
+const router = useRouter()
+
+const data = ref({
+  inter: NaN,
+  countdown: 5,
+})
+
+onUnmounted(() => {
+  data.value.inter && window.clearInterval(data.value.inter)
+})
+
+onMounted(() => {
+  data.value.inter = window.setInterval(() => {
+    data.value.countdown--
+    if (data.value.countdown === 0) {
+      data.value.inter && window.clearInterval(data.value.inter)
+      goBack()
+    }
+  }, 1000)
+})
+
+function goBack() {
+  router.push('/')
+}
+</script>
+
+<template>
+  <div class="notallowed">
+    <svg-icon name="403" class="icon" />
+    <div class="content">
+      <h1>403</h1>
+      <div class="desc">
+        抱歉，你无权访问该页面
+      </div>
+      <el-button type="primary" @click="goBack">
+        {{ data.countdown }} 秒后，返回首页
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.notallowed {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 700px;
+
+  @include position-center(xy);
+
+  .icon {
+    width: 400px;
+    height: 400px;
+  }
+
+  .content {
+    h1 {
+      margin: 0;
+      font-size: 72px;
+      color: var(--el-text-color-primary);
+    }
+
+    .desc {
+      margin: 20px 0 30px;
+      font-size: 20px;
+      color: var(--el-text-color-secondary);
+    }
+  }
+}
+</style>

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/layouts/components/AppSetting/index.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup name="AppSetting">
 import { useClipboard } from '@vueuse/core'
 import { ElMessage } from 'element-plus'
-import { cloneDeep } from 'lodash-es'
 import eventBus from '@/utils/eventBus'
 import useSettingsStore from '@/store/modules/settings'
 import useMenuStore from '@/store/modules/menu'
@@ -13,7 +12,7 @@ const menuStore = useMenuStore()
 
 const isShow = ref(false)
 
-watch(() => settingsStore.menu.menuMode, (value) => {
+watch(() => settingsStore.settings.menu.menuMode, (value) => {
   if (value === 'single') {
     menuStore.setActived(0)
   }
@@ -37,11 +36,7 @@ watch(copied, (val) => {
 })
 
 function handleCopy() {
-  const settings: any = cloneDeep(settingsStore.$state)
-  delete settings.subMenuCollapseLastStatus
-  delete settings.mode
-  delete settings.title
-  copy(JSON.stringify(settings, null, 2))
+  copy(JSON.stringify(settingsStore.settings, null, 2))
 }
 </script>
 
@@ -51,9 +46,9 @@ function handleCopy() {
       <el-alert title="应用配置可实时预览效果，但只是临时生效，要想真正作用于项目，可以点击下方的“复制配置”按钮，并将配置粘贴到 src/settings.ts 文件中。同时建议在生产环境隐藏应用配置功能。" type="error" :closable="false" />
       <el-divider>颜色主题</el-divider>
       <div class="color-scheme">
-        <div class="switch" :class="settingsStore.app.colorScheme" @click="settingsStore.app.colorScheme = settingsStore.app.colorScheme === 'dark' ? 'light' : 'dark'">
+        <div class="switch" :class="settingsStore.settings.app.colorScheme" @click="settingsStore.settings.app.colorScheme = settingsStore.settings.app.colorScheme === 'dark' ? 'light' : 'dark'">
           <el-icon class="icon">
-            <svg-icon :name="settingsStore.app.colorScheme === 'light' ? 'ep:sunny' : 'ep:moon'" />
+            <svg-icon :name="settingsStore.settings.app.colorScheme === 'light' ? 'ep:sunny' : 'ep:moon'" />
           </el-icon>
         </div>
       </div>
@@ -62,7 +57,7 @@ function handleCopy() {
       </el-divider>
       <div v-if="settingsStore.mode === 'pc'" class="menu-mode">
         <el-tooltip content="侧边栏模式（含主导航）" placement="top" :show-after="500">
-          <div class="mode mode-side" :class="{ active: settingsStore.menu.menuMode === 'side' }" @click="settingsStore.menu.menuMode = 'side'">
+          <div class="mode mode-side" :class="{ active: settingsStore.settings.menu.menuMode === 'side' }" @click="settingsStore.settings.menu.menuMode = 'side'">
             <div class="mode-container" />
             <el-icon>
               <svg-icon name="ep:check" />
@@ -70,7 +65,7 @@ function handleCopy() {
           </div>
         </el-tooltip>
         <el-tooltip content="顶部模式" placement="top" :show-after="500">
-          <div class="mode mode-head" :class="{ active: settingsStore.menu.menuMode === 'head' }" @click="settingsStore.menu.menuMode = 'head'">
+          <div class="mode mode-head" :class="{ active: settingsStore.settings.menu.menuMode === 'head' }" @click="settingsStore.settings.menu.menuMode = 'head'">
             <div class="mode-container" />
             <el-icon>
               <svg-icon name="ep:check" />
@@ -78,7 +73,7 @@ function handleCopy() {
           </div>
         </el-tooltip>
         <el-tooltip content="侧边栏模式（不含主导航）" placement="top" :show-after="500">
-          <div class="mode mode-single" :class="{ active: settingsStore.menu.menuMode === 'single' }" @click="settingsStore.menu.menuMode = 'single'">
+          <div class="mode mode-single" :class="{ active: settingsStore.settings.menu.menuMode === 'single' }" @click="settingsStore.settings.menu.menuMode = 'single'">
             <div class="mode-container" />
             <el-icon>
               <svg-icon name="ep:check" />
@@ -96,7 +91,7 @@ function handleCopy() {
             </el-icon>
           </el-tooltip>
         </div>
-        <el-switch v-model="settingsStore.menu.switchMainMenuAndPageJump" :disabled="['single'].includes(settingsStore.menu.menuMode)" />
+        <el-switch v-model="settingsStore.settings.menu.switchMainMenuAndPageJump" :disabled="['single'].includes(settingsStore.settings.menu.menuMode)" />
       </div>
       <div class="setting-item">
         <div class="label">
@@ -107,32 +102,42 @@ function handleCopy() {
             </el-icon>
           </el-tooltip>
         </div>
-        <el-switch v-model="settingsStore.menu.subMenuUniqueOpened" />
+        <el-switch v-model="settingsStore.settings.menu.subMenuUniqueOpened" />
       </div>
       <div class="setting-item">
         <div class="label">
           次导航是否折叠
         </div>
-        <el-switch v-model="settingsStore.menu.subMenuCollapse" />
+        <el-switch v-model="settingsStore.settings.menu.subMenuCollapse" />
       </div>
       <div v-if="settingsStore.mode === 'pc'" class="setting-item">
         <div class="label">
           显示次导航折叠按钮
         </div>
-        <el-switch v-model="settingsStore.menu.enableSubMenuCollapseButton" />
+        <el-switch v-model="settingsStore.settings.menu.enableSubMenuCollapseButton" />
       </div>
       <div class="setting-item">
         <div class="label">
           是否启用快捷键
         </div>
-        <el-switch v-model="settingsStore.menu.enableHotkeys" :disabled="['single'].includes(settingsStore.menu.menuMode)" />
+        <el-switch v-model="settingsStore.settings.menu.enableHotkeys" :disabled="['single'].includes(settingsStore.settings.menu.menuMode)" />
       </div>
       <el-divider>顶栏</el-divider>
       <div class="setting-item">
         <div class="label">
-          是否固定
+          模式
         </div>
-        <el-switch v-model="settingsStore.topbar.fixed" />
+        <el-radio-group v-model="settingsStore.settings.topbar.mode" size="small">
+          <el-radio-button label="static">
+            静止
+          </el-radio-button>
+          <el-radio-button label="fixed">
+            固定
+          </el-radio-button>
+          <el-radio-button label="sticky">
+            粘性
+          </el-radio-button>
+        </el-radio-group>
       </div>
       <el-divider>工具栏</el-divider>
       <div v-if="settingsStore.mode === 'pc'" class="setting-item">
@@ -144,7 +149,7 @@ function handleCopy() {
             </el-icon>
           </el-tooltip>
         </div>
-        <el-switch v-model="settingsStore.toolbar.enableFullscreen" />
+        <el-switch v-model="settingsStore.settings.toolbar.enableFullscreen" />
       </div>
       <div class="setting-item">
         <div class="label">
@@ -155,7 +160,7 @@ function handleCopy() {
             </el-icon>
           </el-tooltip>
         </div>
-        <el-switch v-model="settingsStore.toolbar.enablePageReload" />
+        <el-switch v-model="settingsStore.settings.toolbar.enablePageReload" />
       </div>
       <div class="setting-item">
         <div class="label">
@@ -166,7 +171,7 @@ function handleCopy() {
             </el-icon>
           </el-tooltip>
         </div>
-        <el-switch v-model="settingsStore.toolbar.enableColorScheme" />
+        <el-switch v-model="settingsStore.settings.toolbar.enableColorScheme" />
       </div>
       <el-divider v-if="settingsStore.mode === 'pc'">
         面包屑导航
@@ -175,7 +180,7 @@ function handleCopy() {
         <div class="label">
           是否启用
         </div>
-        <el-switch v-model="settingsStore.breadcrumb.enable" />
+        <el-switch v-model="settingsStore.settings.breadcrumb.enable" />
       </div>
       <el-divider>导航搜索</el-divider>
       <div class="setting-item">
@@ -187,62 +192,62 @@ function handleCopy() {
             </el-icon>
           </el-tooltip>
         </div>
-        <el-switch v-model="settingsStore.navSearch.enable" />
+        <el-switch v-model="settingsStore.settings.navSearch.enable" />
       </div>
       <div class="setting-item">
         <div class="label">
           是否启用快捷键
         </div>
-        <el-switch v-model="settingsStore.navSearch.enableHotkeys" :disabled="!settingsStore.navSearch.enable" />
+        <el-switch v-model="settingsStore.settings.navSearch.enableHotkeys" :disabled="!settingsStore.settings.navSearch.enable" />
       </div>
       <el-divider>底部版权</el-divider>
       <div class="setting-item">
         <div class="label">
           是否启用
         </div>
-        <el-switch v-model="settingsStore.copyright.enable" />
+        <el-switch v-model="settingsStore.settings.copyright.enable" />
       </div>
       <div class="setting-item">
         <div class="label">
           日期
         </div>
-        <el-input v-model="settingsStore.copyright.dates" size="small" :disabled="!settingsStore.copyright.enable" />
+        <el-input v-model="settingsStore.settings.copyright.dates" size="small" :disabled="!settingsStore.settings.copyright.enable" />
       </div>
       <div class="setting-item">
         <div class="label">
           公司
         </div>
-        <el-input v-model="settingsStore.copyright.company" size="small" :disabled="!settingsStore.copyright.enable" />
+        <el-input v-model="settingsStore.settings.copyright.company" size="small" :disabled="!settingsStore.settings.copyright.enable" />
       </div>
       <div class="setting-item">
         <div class="label">
           网址
         </div>
-        <el-input v-model="settingsStore.copyright.website" size="small" :disabled="!settingsStore.copyright.enable" />
+        <el-input v-model="settingsStore.settings.copyright.website" size="small" :disabled="!settingsStore.settings.copyright.enable" />
       </div>
       <div class="setting-item">
         <div class="label">
           备案
         </div>
-        <el-input v-model="settingsStore.copyright.beian" size="small" :disabled="!settingsStore.copyright.enable" />
+        <el-input v-model="settingsStore.settings.copyright.beian" size="small" :disabled="!settingsStore.settings.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.settings.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.settings.home.title" size="small" />
       </div>
       <el-divider>其它</el-divider>
       <div class="setting-item">
@@ -254,7 +259,7 @@ function handleCopy() {
             </el-icon>
           </el-tooltip>
         </div>
-        <el-radio-group v-model="settingsStore.app.elementSize" size="small">
+        <el-radio-group v-model="settingsStore.settings.app.elementSize" size="small">
           <el-radio-button label="large">
             较大
           </el-radio-button>
@@ -270,7 +275,7 @@ function handleCopy() {
         <div class="label">
           是否启用权限
         </div>
-        <el-switch v-model="settingsStore.app.enablePermission" />
+        <el-switch v-model="settingsStore.settings.app.enablePermission" />
       </div>
       <div class="setting-item">
         <div class="label">
@@ -281,7 +286,7 @@ function handleCopy() {
             </el-icon>
           </el-tooltip>
         </div>
-        <el-switch v-model="settingsStore.app.enableProgress" />
+        <el-switch v-model="settingsStore.settings.app.enableProgress" />
       </div>
       <div class="setting-item">
         <div class="label">
@@ -292,7 +297,7 @@ function handleCopy() {
             </el-icon>
           </el-tooltip>
         </div>
-        <el-switch v-model="settingsStore.app.enableDynamicTitle" />
+        <el-switch v-model="settingsStore.settings.app.enableDynamicTitle" />
       </div>
       <template v-if="isSupported" #footer>
         <el-button type="primary" @click="handleCopy">

src/layouts/components/Header/index.vue

@@ -21,7 +21,7 @@ function handlerMouserScroll(event: WheelEvent) {
 
 <template>
   <transition name="header">
-    <header v-if="settingsStore.mode === 'pc' && settingsStore.menu.menuMode === 'head'">
+    <header v-if="settingsStore.mode === 'pc' && settingsStore.settings.menu.menuMode === 'head'">
       <div class="header-container">
         <div class="main">
           <Logo />
@@ -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/HotkeysIntro/index.vue

@@ -18,15 +18,15 @@ onMounted(() => {
     <el-drawer v-model="isShow" title="快捷键介绍" direction="rtl" :size="360">
       <el-descriptions title="全局" :column="1" border>
         <el-descriptions-item label="查看系统信息">
-          Alt + I
+          {{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }} + I
         </el-descriptions-item>
-        <el-descriptions-item v-if="settingsStore.navSearch.enable && settingsStore.navSearch.enableHotkeys" label="唤起导航搜索">
-          Alt + S
+        <el-descriptions-item v-if="settingsStore.settings.navSearch.enable && settingsStore.settings.navSearch.enableHotkeys" label="唤起导航搜索">
+          {{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }} + S
         </el-descriptions-item>
       </el-descriptions>
-      <el-descriptions v-if="settingsStore.menu.enableHotkeys && ['side', 'head'].includes(settingsStore.menu.menuMode)" title="主导航" :column="1" border>
+      <el-descriptions v-if="settingsStore.settings.menu.enableHotkeys && ['side', 'head'].includes(settingsStore.settings.menu.menuMode)" title="主导航" :column="1" border>
         <el-descriptions-item label="激活下一个主导航">
-          Alt + `
+          {{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }} + `
         </el-descriptions-item>
       </el-descriptions>
     </el-drawer>

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.settings.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.settings.home.enable }" :title="title">
     <img v-if="showLogo" :src="logo" class="logo">
     <span v-if="showTitle">{{ title }}</span>
   </router-link>
@@ -58,6 +58,7 @@ const to = computed(() => {
   .logo {
     width: 30px;
     height: 30px;
+    object-fit: contain;
 
     & + span {
       margin-left: 10px;

src/layouts/components/MainSidebar/index.vue

@@ -11,7 +11,7 @@ const { switchTo } = useMenu()
 
 <template>
   <transition name="main-sidebar">
-    <div v-if="settingsStore.menu.menuMode === 'side' || (settingsStore.mode === 'mobile' && settingsStore.menu.menuMode !== 'single')" class="main-sidebar-container">
+    <div v-if="settingsStore.settings.menu.menuMode === 'side' || (settingsStore.mode === 'mobile' && settingsStore.settings.menu.menuMode !== 'single')" class="main-sidebar-container">
       <Logo :show-title="false" class="sidebar-logo" />
       <!-- 侧边栏模式（含主导航） -->
       <div class="nav">
@@ -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,12 +1,12 @@
 <script lang="ts" setup name="Search">
 import { cloneDeep } from 'lodash-es'
 import hotkeys from 'hotkeys-js'
-import { isExternalLink } from '@/utils'
+import type { RouteRecordRaw } from 'vue-router'
 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, Route } from '@/global'
+import type { Menu } from '#/global'
 
 const router = useRouter()
 
@@ -15,10 +15,11 @@ const routeStore = useRouteStore()
 const menuStore = useMenuStore()
 
 interface listTypes {
-  icon?: string
-  title: string
-  breadcrumb: string[]
   path: string
+  icon?: string
+  title?: string | Function
+  link?: string
+  breadcrumb: (string | Function | undefined)[]
 }
 
 const isShow = ref(false)
@@ -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
@@ -86,18 +111,18 @@ onMounted(() => {
     isShow.value = !isShow.value
   })
   hotkeys('alt+s', (e) => {
-    if (settingsStore.navSearch.enable && settingsStore.navSearch.enableHotkeys) {
+    if (settingsStore.settings.navSearch.enable && settingsStore.settings.navSearch.enableHotkeys) {
       e.preventDefault()
       isShow.value = true
     }
   })
   hotkeys('esc', (e) => {
-    if (settingsStore.navSearch.enable && settingsStore.navSearch.enableHotkeys) {
+    if (settingsStore.settings.navSearch.enable && settingsStore.settings.navSearch.enableHotkeys) {
       e.preventDefault()
       isShow.value = false
     }
   })
-  if (settingsStore.app.routeBaseOn !== 'filesystem') {
+  if (settingsStore.settings.app.routeBaseOn !== 'filesystem') {
     routeStore.routes.forEach((item) => {
       item.children && getSourceList(item.children)
     })
@@ -109,52 +134,46 @@ 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)
-        let path = ''
-        if (isExternalLink(item.path)) {
-          path = item.path
-        }
-        else {
-          path = basePath ? [basePath, item.path].join('/') : item.path
-        }
+        breadcrumbTemp.push(item.meta?.title)
         sourceList.value.push({
-          icon: item.meta.icon || icon,
-          title: typeof item.meta.title === 'function' ? item.meta.title() : item.meta.title,
+          path: basePath ? [basePath, item.path].join('/') : item.path,
+          icon: item.meta?.icon ?? icon,
+          title: item.meta?.title,
+          link: item.meta?.link,
           breadcrumb: breadcrumbTemp,
-          path,
         })
       }
     }
   })
 }
-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,
       })
@@ -205,12 +224,12 @@ function handleScroll() {
   })
 }
 
-function pageJump(url: string) {
-  if (isExternalLink(url)) {
-    window.open(url, 'top')
+function pageJump(path: listTypes['path'], link: listTypes['link']) {
+  if (link) {
+    window.open(link, '_blank')
   }
   else {
-    router.push(url)
+    router.push(path)
   }
 }
 </script>
@@ -228,48 +247,60 @@ function pageJump(url: string) {
         </el-input>
         <div v-if="settingsStore.mode === 'pc'" class="tips">
           <div class="tip">
-            <span>Alt</span>+<span>S</span>
-            唤醒搜索面板
+            <el-tag type="info" size="large">
+              {{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }} + S
+            </el-tag>
+            <el-tag type="info" size="large">
+              唤醒搜索面板
+            </el-tag>
           </div>
           <div class="tip">
-            <span>
+            <el-tag type="info" size="large">
               <el-icon>
                 <svg-icon name="search-up" />
               </el-icon>
-            </span>
-            <span>
+            </el-tag>
+            <el-tag type="info" size="large">
               <el-icon>
                 <svg-icon name="search-down" />
               </el-icon>
-            </span>
-            切换搜索结果
+            </el-tag>
+            <el-tag type="info" size="large">
+              切换搜索结果
+            </el-tag>
           </div>
           <div class="tip">
-            <span>
+            <el-tag type="info" size="large">
               <el-icon>
                 <svg-icon name="search-enter" />
               </el-icon>
-            </span>
-            访问页面
+            </el-tag>
+            <el-tag type="info" size="large">
+              访问页面
+            </el-tag>
           </div>
           <div class="tip">
-            <span>ESC</span>
-            退出
+            <el-tag type="info" size="large">
+              ESC
+            </el-tag>
+            <el-tag type="info" size="large">
+              退出
+            </el-tag>
           </div>
         </div>
       </div>
-      <div ref="searchResultRef" class="result" :class="{ mobile: settingsStore.mode === 'mobile' }">
-        <a v-for="(item, index) in resultList" :key="item.path" :ref="setSearchResultItemRef" class="item" :class="{ actived: index === actived }" @click="pageJump(item.path)" @mouseover="actived = index">
+      <div ref="searchResultRef" class="result">
+        <a v-for="(item, index) in resultList" :key="item.path" :ref="setSearchResultItemRef" class="item" :class="{ actived: index === actived }" @click="pageJump(item.path, item.link)" @mouseover="actived = index">
           <el-icon class="icon">
             <svg-icon v-if="item.icon" :name="item.icon" />
           </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>
@@ -291,10 +322,10 @@ function pageJump(url: string) {
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--el-overlay-color-lighter);
-  backdrop-filter: blur(10px);
+  background-image: radial-gradient(transparent 1px, rgb(0 0 0 / 30%) 1px);
+  background-size: 4px 4px;
+  backdrop-filter: saturate(50%) blur(4px);
   transition: all 0.2s;
-  transform: translateZ(0);
   opacity: 0;
   visibility: hidden;
 
@@ -319,7 +350,7 @@ function pageJump(url: string) {
     filter: blur(10px);
 
     .search-box {
-      margin: 50px 20px 40px;
+      margin: 50px 20px 20px;
 
       :deep(.el-input__inner) {
         height: 52px;
@@ -335,39 +366,39 @@ function pageJump(url: string) {
 
       .tips {
         display: flex;
-        align-items: center;
-        justify-content: space-evenly;
-        margin-top: 20px;
-        line-height: 24px;
-        font-size: 14px;
-        color: #fff;
+        justify-content: center;
+        padding-top: 20px;
+        font-weight: bold;
 
-        span {
-          margin: 0 5px;
-          padding: 3px 8px 5px;
-          border-radius: 5px;
-          font-size: 12px;
-          font-weight: bold;
-          color: var(--el-text-color-primary);
-          background-color: var(--el-fill-color);
-          box-shadow: inset 0 -2px var(--el-fill-color-lighter), inset 0 0 1px 1px var(--el-fill-color-darker);
+        .tip {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin: 0 20px;
+
+          .el-tag {
+            margin: 0 5px;
+
+            &:first-child {
+              margin-left: 0;
+            }
+
+            &:last-child {
+              margin-right: 0;
+            }
+          }
         }
       }
     }
 
     .result {
       position: relative;
-      margin: 0 20px;
-      max-height: calc(100% - 250px);
+      margin: 0 20px 50px;
       border-radius: 5px;
       overflow: auto;
       background-color: var(--el-bg-color);
       box-shadow: 0 0 0 1px var(--el-border-color-darker);
 
-      &.mobile {
-        max-height: calc(100% - 200px);
-      }
-
       .item {
         display: flex;
         align-items: center;

src/layouts/components/SidebarItem/index.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup name="SidebarItem">
 // import SidebarItem from './index.vue'
-import { isExternalLink, resolveRoutePath } from '@/utils'
-import type { Menu } from '@/global'
+import { resolveRoutePath } from '@/utils'
+import useSettingsStore from '@/store/modules/settings'
+import type { Menu } from '#/global'
 
 const props = defineProps({
   item: {
@@ -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
     }
   }
@@ -30,25 +33,25 @@ const hasChildren = computed(() => {
 
 <template>
   <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">
+    <router-link v-if="!hasChildren" v-slot="{ href, navigate, isActive, isExactActive }" custom :to="resolveRoutePath(basePath, item.path)">
+      <a :href="item.meta?.link ? item.meta.link : href" :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']" :target="item.meta?.link ? '_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">
             <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.settings.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>
@@ -65,8 +68,7 @@ const hasChildren = computed(() => {
   @include text-overflow;
 }
 
-:deep(.el-menu-item),
-:deep(.el-sub-menu__title) {
+:deep(.el-menu-item) {
   display: flex;
   align-items: center;
   justify-content: center;

src/layouts/components/SubSidebar/index.vue

@@ -15,22 +15,22 @@ function onSidebarScroll(e: Event) {
 </script>
 
 <template>
-  <div v-if="['side', 'head', 'single'].includes(settingsStore.menu.menuMode) || settingsStore.mode === 'mobile'" class="sub-sidebar-container" :class="{ 'is-collapse': settingsStore.mode === 'pc' && settingsStore.menu.subMenuCollapse }" @scroll="onSidebarScroll">
+  <div v-if="['side', 'head', 'single'].includes(settingsStore.settings.menu.menuMode) || settingsStore.mode === 'mobile'" class="sub-sidebar-container" :class="{ 'is-collapse': settingsStore.mode === 'pc' && settingsStore.settings.menu.subMenuCollapse }" @scroll="onSidebarScroll">
     <Logo
-      :show-logo="settingsStore.menu.menuMode === 'single'" class="sidebar-logo" :class="{
-        'sidebar-logo-bg': settingsStore.menu.menuMode === 'single',
+      :show-logo="settingsStore.settings.menu.menuMode === 'single'" class="sidebar-logo" :class="{
+        'sidebar-logo-bg': settingsStore.settings.menu.menuMode === 'single',
         'shadow': sidebarScrollTop,
       }"
     />
     <!-- 侧边栏模式（无主导航） -->
     <el-menu
-      :unique-opened="settingsStore.menu.subMenuUniqueOpened" :default-openeds="menuStore.defaultOpenedPaths" :default-active="$route.meta.activeMenu || $route.path" :collapse="settingsStore.mode === 'pc' && settingsStore.menu.subMenuCollapse" :collapse-transition="false" :class="{
-        'is-collapse-without-logo': settingsStore.menu.menuMode !== 'single' && settingsStore.menu.subMenuCollapse,
+      :unique-opened="settingsStore.settings.menu.subMenuUniqueOpened" :default-openeds="menuStore.defaultOpenedPaths" :default-active="$route.meta.activeMenu || $route.path" :collapse="settingsStore.mode === 'pc' && settingsStore.settings.menu.subMenuCollapse" :collapse-transition="false" :class="{
+        'is-collapse-without-logo': settingsStore.settings.menu.menuMode !== 'single' && settingsStore.settings.menu.subMenuCollapse,
       }"
     >
       <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':
@@ -36,36 +36,33 @@ function userCommand(command: 'dashboard' | 'setting' | 'hotkeys' | 'logout') {
       break
   }
 }
-function pro() {
-  window.open('https://hooray.gitee.io/fantastic-admin-pro-example/', 'top')
-}
 </script>
 
 <template>
   <div class="tools">
     <div class="buttons">
-      <span v-if="settingsStore.navSearch.enable" class="item" @click="eventBus.emit('global-search-toggle')">
+      <span v-if="settingsStore.settings.navSearch.enable" class="item" @click="eventBus.emit('global-search-toggle')">
         <el-icon>
           <svg-icon name="ep:search" />
         </el-icon>
       </span>
-      <span v-if="settingsStore.mode === 'pc' && settingsStore.toolbar.enableFullscreen" class="item" @click="toggle">
+      <span v-if="settingsStore.mode === 'pc' && settingsStore.settings.toolbar.enableFullscreen" class="item" @click="toggle">
         <el-icon>
           <svg-icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" />
         </el-icon>
       </span>
-      <span v-if="settingsStore.toolbar.enablePageReload" class="item" @click="mainPage.reload()">
+      <span v-if="settingsStore.settings.toolbar.enablePageReload" class="item" @click="mainPage.reload()">
         <el-icon>
           <svg-icon name="ep:refresh-right" />
         </el-icon>
       </span>
-      <span v-if="settingsStore.toolbar.enableColorScheme" class="item" @click="settingsStore.setColorScheme(settingsStore.app.colorScheme === 'dark' ? 'light' : 'dark')">
+      <span v-if="settingsStore.settings.toolbar.enableColorScheme" class="item" @click="settingsStore.setColorScheme(settingsStore.settings.app.colorScheme === 'dark' ? 'light' : 'dark')">
         <el-icon>
-          <svg-icon v-show="settingsStore.app.colorScheme === 'light'" name="ep:sunny" />
-          <svg-icon v-show="settingsStore.app.colorScheme === 'dark'" name="ep:moon" />
+          <svg-icon v-show="settingsStore.settings.app.colorScheme === 'light'" name="ep:sunny" />
+          <svg-icon v-show="settingsStore.settings.app.colorScheme === 'dark'" name="ep:moon" />
         </el-icon>
       </span>
-      <span v-if="settingsStore.toolbar.enableAppSetting" class="item" @click="eventBus.emit('global-theme-toggle')">
+      <span v-if="settingsStore.settings.toolbar.enableAppSetting" class="item" @click="eventBus.emit('global-theme-toggle')">
         <el-icon>
           <svg-icon name="ep:setting" />
         </el-icon>
@@ -85,8 +82,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.settings.home.enable" command="home">
+            {{ settingsStore.settings.home.title }}
           </el-dropdown-item>
           <el-dropdown-item command="setting">
             个人设置

src/layouts/components/Topbar/index.vue

@@ -9,17 +9,17 @@ const settingsStore = useSettingsStore()
 
 const enableSubMenuCollapseButton = computed(() => {
   return settingsStore.mode === 'mobile' || (
-    ['side', 'head', 'single'].includes(settingsStore.menu.menuMode)
-      && settingsStore.menu.enableSubMenuCollapseButton
+    ['side', 'head', 'single'].includes(settingsStore.settings.menu.menuMode)
+      && settingsStore.settings.menu.enableSubMenuCollapseButton
   )
 })
 
 const breadcrumbList = computed(() => {
   const breadcrumbList = []
-  if (settingsStore.dashboard.enable) {
+  if (settingsStore.settings.home.enable) {
     breadcrumbList.push({
-      path: '/dashboard',
-      title: settingsStore.dashboard.title,
+      path: '/',
+      title: settingsStore.settings.home.title,
     })
   }
   if (route.meta.breadcrumbNeste) {
@@ -29,6 +29,7 @@ const breadcrumbList = computed(() => {
 })
 
 const scrollTop = ref(0)
+const scrollOnHide = ref(false)
 onMounted(() => {
   window.addEventListener('scroll', onScroll)
 })
@@ -36,8 +37,12 @@ onUnmounted(() => {
   window.removeEventListener('scroll', onScroll)
 })
 function onScroll() {
-  scrollTop.value = document.documentElement.scrollTop || document.body.scrollTop
+  scrollTop.value = (document.documentElement || document.body).scrollTop
 }
+watch(scrollTop, (val, oldVal) => {
+  const topbarHeight = parseInt(getComputedStyle(document.documentElement || document.body).getPropertyValue('--g-topbar-height'))
+  scrollOnHide.value = settingsStore.settings.topbar.mode === 'sticky' && val > oldVal && val > topbarHeight
+})
 
 function pathCompile(path: string) {
   const toPath = compile(path)
@@ -48,20 +53,21 @@ function pathCompile(path: string) {
 <template>
   <div
     class="topbar-container" :class="{
-      fixed: settingsStore.topbar.fixed,
+      [`topbar-${settingsStore.settings.topbar.mode}`]: true,
       shadow: scrollTop,
+      hide: scrollOnHide,
     }" data-fixed-calc-width
   >
     <div class="left-box">
-      <div v-if="enableSubMenuCollapseButton" class="sidebar-collapse" :class="{ 'is-collapse': settingsStore.menu.subMenuCollapse }" @click="settingsStore.toggleSidebarCollapse()">
+      <div v-if="enableSubMenuCollapseButton" class="sidebar-collapse" :class="{ 'is-collapse': settingsStore.settings.menu.subMenuCollapse }" @click="settingsStore.toggleSidebarCollapse()">
         <el-icon>
           <svg-icon name="toolbar-collapse" />
         </el-icon>
       </div>
-      <el-breadcrumb v-if="settingsStore.breadcrumb.enable && settingsStore.mode === 'pc' && settingsStore.app.routeBaseOn !== 'filesystem'">
+      <el-breadcrumb v-if="settingsStore.settings.breadcrumb.enable && settingsStore.mode === 'pc' && settingsStore.settings.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>
@@ -82,7 +88,8 @@ function pathCompile(path: string) {
   background-color: var(--g-toolbar-bg);
   transition: width 0.3s, top 0.3s, transform 0.3s, background-color 0.3s, var(--el-transition-box-shadow);
 
-  &.fixed {
+  &.topbar-fixed,
+  &.topbar-sticky {
     position: fixed;
 
     &.shadow {
@@ -90,6 +97,10 @@ function pathCompile(path: string) {
     }
   }
 
+  &.topbar-sticky.hide {
+    top: calc(var(--g-topbar-height) * -1) !important;
+  }
+
   .left-box {
     display: flex;
     align-items: center;

src/layouts/components/views/link.vue

@@ -0,0 +1,97 @@
+<script lang="ts" setup name="LinkView">
+const route = useRoute()
+
+function open() {
+  window.open(route.meta.link, '_blank')
+}
+</script>
+
+<template>
+  <div class="link-view">
+    <transition name="link" mode="out-in" appear>
+      <page-main :key="route.meta.link" title="⚠️访问提醒">
+        <div class="container">
+          <div class="title">
+            是否访问此链接
+          </div>
+          <div class="link">
+            {{ route.meta.link }}
+          </div>
+          <el-button type="primary" plain round @click="open">
+            <template #icon>
+              <el-icon>
+                <svg-icon name="ep:link" />
+              </el-icon>
+            </template>
+            立即访问
+          </el-button>
+        </div>
+      </page-main>
+    </transition>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.link-view {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  .page-main {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    flex: 1;
+
+    .container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      margin: 0 50px;
+
+      .title {
+        margin: 10px 0;
+        font-size: 22px;
+        color: var(--el-text-color-primary);
+      }
+
+      .link {
+        margin: 10px 0;
+        max-width: 300px;
+        font-size: 14px;
+        color: var(--el-text-color-disabled);
+
+        @include text-overflow(3);
+      }
+
+      .el-button {
+        margin: 20px 0;
+      }
+    }
+  }
+}
+// link 区动画
+.link-enter-active {
+  transition: 0.2s;
+}
+
+.link-leave-active {
+  transition: 0.15s;
+}
+
+.link-enter-from {
+  opacity: 0;
+  transform: translateX(-20px);
+}
+
+.link-leave-to {
+  opacity: 0;
+  transform: translateX(20px);
+}
+</style>

src/layouts/index.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup name="Layout">
 import hotkeys from 'hotkeys-js'
+import LinkView from './components/views/link.vue'
 import Header from './components/Header/index.vue'
 import MainSidebar from './components/MainSidebar/index.vue'
 import SubSidebar from './components/SubSidebar/index.vue'
@@ -17,13 +18,15 @@ const settingsStore = useSettingsStore()
 const keepAliveStore = useKeepAliveStore()
 const menuStore = useMenuStore()
 
-watch(() => settingsStore.menu.subMenuCollapse, (val) => {
+const isLink = computed(() => !!routeInfo.meta.link)
+
+watch(() => settingsStore.settings.menu.subMenuCollapse, (val) => {
   if (settingsStore.mode === 'mobile') {
     if (!val) {
-      document.body.classList.add('hidden')
+      document.body.classList.add('overflow-hidden')
     }
     else {
-      document.body.classList.remove('hidden')
+      document.body.classList.remove('overflow-hidden')
     }
   }
 })
@@ -31,20 +34,20 @@ watch(() => settingsStore.menu.subMenuCollapse, (val) => {
 watch(() => routeInfo.path, () => {
   if (settingsStore.mode === 'mobile') {
     settingsStore.$patch((state) => {
-      state.menu.subMenuCollapse = true
+      state.settings.menu.subMenuCollapse = true
     })
   }
 })
 
 onMounted(() => {
   hotkeys('f5', (e) => {
-    if (settingsStore.toolbar.enablePageReload) {
+    if (settingsStore.settings.toolbar.enablePageReload) {
       e.preventDefault()
       useMainPage().reload()
     }
   })
   hotkeys('alt+`', (e) => {
-    if (settingsStore.menu.enableHotkeys) {
+    if (settingsStore.settings.menu.enableHotkeys) {
       e.preventDefault()
       useMenu().switchTo(menuStore.actived + 1 < menuStore.allMenus.length ? menuStore.actived + 1 : 0)
     }
@@ -61,21 +64,22 @@ onUnmounted(() => {
     <div id="app-main">
       <Header />
       <div class="wrapper">
-        <div class="sidebar-container" :class="{ show: settingsStore.mode === 'mobile' && !settingsStore.menu.subMenuCollapse }">
+        <div class="sidebar-container" :class="{ show: settingsStore.mode === 'mobile' && !settingsStore.settings.menu.subMenuCollapse }">
           <MainSidebar />
           <SubSidebar />
         </div>
-        <div class="sidebar-mask" :class="{ show: settingsStore.mode === 'mobile' && !settingsStore.menu.subMenuCollapse }" @click="settingsStore.toggleSidebarCollapse()" />
+        <div class="sidebar-mask" :class="{ show: settingsStore.mode === 'mobile' && !settingsStore.settings.menu.subMenuCollapse }" @click="settingsStore.toggleSidebarCollapse()" />
         <div class="main-container" :style="{ 'padding-bottom': $route.meta.paddingBottom } as any">
-          <Topbar v-if="!(settingsStore.menu.menuMode === 'head' && !settingsStore.menu.enableSubMenuCollapseButton && !settingsStore.breadcrumb.enable)" />
+          <Topbar v-if="!(settingsStore.settings.menu.menuMode === 'head' && !settingsStore.settings.menu.enableSubMenuCollapseButton && !settingsStore.settings.breadcrumb.enable)" />
           <div class="main">
             <router-view v-slot="{ Component, route }">
               <transition name="main" mode="out-in" appear>
                 <keep-alive :include="keepAliveStore.list">
-                  <component :is="Component" :key="route.fullPath" />
+                  <component :is="Component" v-show="!isLink" :key="route.fullPath" />
                 </keep-alive>
               </transition>
             </router-view>
+            <LinkView v-if="isLink" />
           </div>
           <Copyright />
         </div>
@@ -148,10 +152,10 @@ onUnmounted(() => {
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: rgb(0 0 0 / 50%);
-    backdrop-filter: blur(2px);
+    background-image: radial-gradient(transparent 1px, rgb(0 0 0 / 30%) 1px);
+    background-size: 4px 4px;
+    backdrop-filter: saturate(50%) blur(4px);
     transition: all 0.2s;
-    transform: translateZ(0);
     opacity: 0;
     visibility: hidden;
 

src/main.ts

@@ -1,4 +1,4 @@
-import { createApp } from 'vue'
+import './utils/system.copyright'
 import ElementPlus from 'element-plus'
 import App from './App.vue'
 import pinia from './store'
@@ -13,14 +13,14 @@ import 'virtual:svg-icons-register'
 import '@/assets/styles/globals.scss'
 // 加载 iconify 图标（element plus）
 import { downloadAndInstall } from '@/iconify-ep'
-if (useSettingsStore().app.iconifyOfflineUse) {
-  downloadAndInstall()
-}
 
 const app = createApp(App)
 app.use(ElementPlus)
 app.use(pinia)
 app.use(router)
 directive(app)
+if (useSettingsStore().settings.app.iconifyOfflineUse) {
+  downloadAndInstall()
+}
 
 app.mount('#app')

src/menu/index.ts

@@ -1,6 +1,6 @@
 import MultilevelMenuExample from './modules/multilevel.menu.example'
 
-import type { Menu } from '@/global'
+import type { Menu } from '#/global'
 
 const menu: Menu.recordMainRaw[] = [
   {

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

@@ -1,9 +1,9 @@
-import type { Menu } from '@/global'
+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

@@ -15,7 +15,7 @@ const { isLoading } = useNProgress()
 
 const router = createRouter({
   history: createWebHashHistory(),
-  routes: useSettingsStore(pinia).app.routeBaseOn === 'filesystem' ? constantRoutesByFilesystem : constantRoutes as RouteRecordRaw[],
+  routes: useSettingsStore(pinia).settings.app.routeBaseOn === 'filesystem' ? constantRoutesByFilesystem : constantRoutes as RouteRecordRaw[],
 })
 
 router.beforeEach(async (to, from, next) => {
@@ -23,29 +23,29 @@ router.beforeEach(async (to, from, next) => {
   const userStore = useUserStore()
   const menuStore = useMenuStore()
   const routeStore = useRouteStore()
-  settingsStore.app.enableProgress && (isLoading.value = true)
+  settingsStore.settings.app.enableProgress && (isLoading.value = true)
   // 是否已登录
   if (userStore.isLogin) {
     // 是否已根据权限动态生成并注册路由
     if (routeStore.isGenerate) {
       // 导航栏如果不是 single 模式，则需要根据 path 定位主导航的选中状态
-      settingsStore.menu.menuMode !== 'single' && menuStore.setActived(to.path)
-      // 如果已登录状态下，进入登录页会强制跳转到控制台页面
+      settingsStore.settings.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.settings.home.enable && to.name === 'home') {
         if (menuStore.sidebarMenus.length > 0) {
           next({
             path: menuStore.sidebarMenusFirstDeepestPath,
             replace: true,
           })
         }
-        // 如果侧边栏导航第一个模块无法命中，则还是进入控制台页面
+        // 如果侧边栏导航第一个模块无法命中，则还是进入主页
         else {
           next()
         }
@@ -57,7 +57,7 @@ router.beforeEach(async (to, from, next) => {
     }
     else {
       // 生成动态路由
-      switch (settingsStore.app.routeBaseOn) {
+      switch (settingsStore.settings.app.routeBaseOn) {
         case 'frontend':
           await routeStore.generateRoutesAtFront(asyncRoutes)
           break
@@ -67,7 +67,7 @@ router.beforeEach(async (to, from, next) => {
         case 'filesystem':
           await routeStore.generateRoutesAtFilesystem(asyncRoutesByFilesystem)
           // 文件系统生成的路由，需要手动生成导航数据
-          switch (settingsStore.menu.baseOn) {
+          switch (settingsStore.settings.menu.baseOn) {
             case 'frontend':
               await menuStore.generateMenusAtFront()
               break
@@ -85,7 +85,7 @@ router.beforeEach(async (to, from, next) => {
           removeRoutes.push(router.addRoute(route as RouteRecordRaw))
         }
       })
-      if (settingsStore.app.routeBaseOn !== 'filesystem') {
+      if (settingsStore.settings.app.routeBaseOn !== 'filesystem') {
         routeStore.flatSystemRoutes.forEach((route) => {
           removeRoutes.push(router.addRoute(route as RouteRecordRaw))
         })
@@ -104,7 +104,7 @@ router.beforeEach(async (to, from, next) => {
       next({
         name: 'login',
         query: {
-          redirect: to.fullPath,
+          redirect: to.fullPath !== '/' ? to.fullPath : undefined,
         },
       })
     }
@@ -117,9 +117,14 @@ router.beforeEach(async (to, from, next) => {
 router.afterEach((to, from) => {
   const settingsStore = useSettingsStore()
   const keepAliveStore = useKeepAliveStore()
-  settingsStore.app.enableProgress && (isLoading.value = false)
+  settingsStore.settings.app.enableProgress && (isLoading.value = false)
   // 设置页面 title
-  to.meta.title && settingsStore.setTitle(typeof to.meta.title === 'function' ? to.meta.title() : to.meta.title)
+  if (settingsStore.settings.app.routeBaseOn !== 'filesystem') {
+    settingsStore.setTitle(to.meta.breadcrumbNeste?.at(-1)?.title ?? to.meta.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 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().settings.home.title,
       breadcrumb: false,
     },
     children: [
       {
         path: '',
-        name: 'dashboard',
+        name: 'home',
         component: () => import('@/views/index.vue'),
         meta: {
-          title: () => useSettingsStore().dashboard.title,
+          title: () => useSettingsStore().settings.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

@@ -1,6 +1,6 @@
 // 该文件为系统默认配置，请勿修改！！！
 
-import type { RecursiveRequired, Settings } from './global'
+import type { RecursiveRequired, Settings } from '#/global'
 
 const globalSettingsDefault: RecursiveRequired<Settings.all> = {
   app: {
@@ -12,9 +12,9 @@ const globalSettingsDefault: RecursiveRequired<Settings.all> = {
     enableDynamicTitle: false,
     routeBaseOn: 'frontend',
   },
-  dashboard: {
+  home: {
     enable: true,
-    title: '控制台',
+    title: '主页',
   },
   layout: {
     enableMobileAdaptation: false,
@@ -29,7 +29,7 @@ const globalSettingsDefault: RecursiveRequired<Settings.all> = {
     enableHotkeys: false,
   },
   topbar: {
-    fixed: true,
+    mode: 'static',
   },
   toolbar: {
     enableFullscreen: false,
@@ -46,7 +46,7 @@ const globalSettingsDefault: RecursiveRequired<Settings.all> = {
   },
   copyright: {
     enable: true,
-    dates: '2020-2022',
+    dates: '2020-2023',
     company: 'Fantastic-admin',
     website: 'https://hooray.gitee.io/fantastic-admin/',
     beian: '',

src/settings.ts

@@ -1,4 +1,4 @@
-import type { Settings } from './global'
+import type { Settings } from '#/global'
 
 const globalSettings: Settings.all = {}
 

src/store/modules/keepAlive.ts

@@ -1,37 +1,41 @@
 const useKeepAliveStore = defineStore(
   // 唯一ID
   'keepAlive',
-  {
-    state: () => ({
-      list: [] as string[],
-    }),
-    actions: {
-      add(name: string | string[]) {
-        if (typeof name === 'string') {
-          !this.list.includes(name) && this.list.push(name)
-        }
-        else {
-          name.forEach((v) => {
-            v && !this.list.includes(v) && this.list.push(v)
-          })
-        }
-      },
-      remove(name: string | string[]) {
-        if (typeof name === 'string') {
-          this.list = this.list.filter((v) => {
-            return v !== name
-          })
-        }
-        else {
-          this.list = this.list.filter((v) => {
-            return !name.includes(v)
-          })
-        }
-      },
-      clean() {
-        this.list = []
-      },
-    },
+  () => {
+    const list = ref<string[]>([])
+
+    function add(name: string | string[]) {
+      if (typeof name === 'string') {
+        !list.value.includes(name) && list.value.push(name)
+      }
+      else {
+        name.forEach((v) => {
+          v && !list.value.includes(v) && list.value.push(v)
+        })
+      }
+    }
+    function remove(name: string | string[]) {
+      if (typeof name === 'string') {
+        list.value = list.value.filter((v) => {
+          return v !== name
+        })
+      }
+      else {
+        list.value = list.value.filter((v) => {
+          return !name.includes(v)
+        })
+      }
+    }
+    function clean() {
+      list.value = []
+    }
+
+    return {
+      list,
+      add,
+      remove,
+      clean,
+    }
   },
 )
 

src/store/modules/menu.ts

@@ -2,201 +2,192 @@ import { cloneDeep } from 'lodash-es'
 import useSettingsStore from './settings'
 import useUserStore from './user'
 import useRouteStore from './route'
-import type { Menu } from '@/global'
+import type { Menu } from '#/global'
 
 import { resolveRoutePath } from '@/utils'
 import api from '@/api'
 import menu from '@/menu'
 
-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
-        })
-      ) {
-        for (let i = 0; i < menu.children.length; i++) {
-          if (menu.children[i].meta.sidebar !== false) {
-            retnPath = getDeepestPath(menu.children[i], resolveRoutePath(rootPath, menu.path))
-            break
-          }
-        }
-      }
-      else {
-        retnPath = getDeepestPath(menu.children[0], resolveRoutePath(rootPath, menu.path))
-      }
-    }
-    else {
-      retnPath = resolveRoutePath(rootPath, menu.path)
-    }
-  }
-  return retnPath
-}
-
-function hasPermission(permissions: string[], menu: Menu.recordMainRaw | Menu.recordRaw) {
-  let isAuth = false
-  if (menu.meta && menu.meta.auth) {
-    isAuth = permissions.some((auth) => {
-      return typeof menu.meta.auth === 'string'
-        ? menu.meta.auth === auth
-        : typeof menu.meta.auth === 'object'
-          ? menu.meta.auth.includes(auth)
-          : false
-    })
-  }
-  else {
-    isAuth = true
-  }
-  return isAuth
-}
-
-function filterAsyncMenus<T extends Menu.recordMainRaw[] | Menu.recordRaw[]>(menus: T, permissions: string[]): T {
-  const res: any = []
-  menus.forEach((menu) => {
-    const tmpMenu = cloneDeep(menu)
-    if (hasPermission(permissions, tmpMenu)) {
-      if (tmpMenu.children) {
-        tmpMenu.children = filterAsyncMenus(tmpMenu.children, permissions) as Menu.recordRaw[]
-        tmpMenu.children.length && res.push(tmpMenu)
-      }
-      else {
-        res.push(tmpMenu)
-      }
-    }
-  })
-  return res
-}
-
-function getDefaultOpenedPaths(menus: Menu.recordRaw[], rootPath = '') {
-  const defaultOpenedPaths: string[] = []
-  menus.forEach((item) => {
-    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) {
-        defaultOpenedPaths.push(...childrenDefaultOpenedPaths)
-      }
-    }
-  })
-  return defaultOpenedPaths
-}
-
 const useMenuStore = defineStore(
   // 唯一ID
   'menu',
-  {
-    state: () => ({
-      menus: [{
+  () => {
+    const settingsStore = useSettingsStore()
+    const userStore = useUserStore()
+    const routeStore = useRouteStore()
+
+    const menus = ref<Menu.recordMainRaw[]>([{
+      meta: {},
+      children: [],
+    }])
+    const actived = ref(0)
+
+    // 完整导航数据
+    const allMenus = computed(() => {
+      let returnMenus: Menu.recordMainRaw[] = [{
         meta: {},
         children: [],
-      }] as Menu.recordMainRaw[],
-      actived: 0,
-    }),
-    getters: {
-      // 完整导航数据
-      allMenus() {
-        const settingsStore = useSettingsStore()
-        let menus: Menu.recordMainRaw[] = [{
-          meta: {},
-          children: [],
-        }]
-        if (settingsStore.app.routeBaseOn !== 'filesystem') {
-          const routeStore = useRouteStore()
-          if (settingsStore.menu.menuMode === 'single') {
-            menus[0].children = []
-            routeStore.routes.forEach((item) => {
-              menus[0].children?.push(...item.children as Menu.recordRaw[])
-            })
-          }
-          else {
-            menus = routeStore.routes as Menu.recordMainRaw[]
-          }
-        }
-        else {
-          menus = this.menus
-        }
-        return menus
-      },
-      // 次导航数据
-      sidebarMenus(): Menu.recordMainRaw['children'] {
-        return this.allMenus.length > 0
-          ? this.allMenus[this.actived].children
-          : []
-      },
-      // 次导航里第一个导航的路径
-      sidebarMenusFirstDeepestPath(): string {
-        return this.allMenus.length > 0
-          ? getDeepestPath(this.sidebarMenus[0])
-          : '/'
-      },
-      defaultOpenedPaths() {
-        const settingsStore = useSettingsStore()
-        let defaultOpenedPaths: string[] = []
-        if (settingsStore.app.routeBaseOn !== 'filesystem') {
-          defaultOpenedPaths = getDefaultOpenedPaths(this.sidebarMenus)
-        }
-        return defaultOpenedPaths
-      },
-    },
-    actions: {
-      // 生成导航（前端生成）
-      generateMenusAtFront() {
-        // eslint-disable-next-line no-async-promise-executor
-        return new Promise<void>(async (resolve) => {
-          const settingsStore = useSettingsStore()
-          const userStore = useUserStore()
-          let accessedMenus
-          // 如果权限功能开启，则需要对导航数据进行筛选过滤
-          if (settingsStore.app.enablePermission) {
-            const permissions = await userStore.getPermissions()
-            accessedMenus = filterAsyncMenus(menu, permissions)
-          }
-          else {
-            accessedMenus = cloneDeep(menu)
-          }
-          this.menus = accessedMenus.filter(item => item.children.length !== 0)
-          resolve()
-        })
-      },
-      // 生成导航（后端生成）
-      generateMenusAtBack() {
-        return new Promise<void>((resolve) => {
-          api.get('menu/list', {
-            baseURL: '/mock/',
-          }).then(async (res) => {
-            const settingsStore = useSettingsStore()
-            const userStore = useUserStore()
-            let accessedMenus: Menu.recordMainRaw[]
-            // 如果权限功能开启，则需要对导航数据进行筛选过滤
-            if (settingsStore.app.enablePermission) {
-              const permissions = await userStore.getPermissions()
-              accessedMenus = filterAsyncMenus(res.data, permissions)
-            }
-            else {
-              accessedMenus = cloneDeep(res.data)
-            }
-            this.menus = accessedMenus.filter(item => item.children.length !== 0)
-            resolve()
+      }]
+      if (settingsStore.settings.app.routeBaseOn !== 'filesystem') {
+        if (settingsStore.settings.menu.menuMode === 'single') {
+          returnMenus[0].children = []
+          routeStore.routes.forEach((item) => {
+            returnMenus[0].children?.push(...item.children as Menu.recordRaw[])
           })
-        })
-      },
-      // 切换主导航
-      setActived(data: number | string) {
-        if (typeof data === 'number') {
-          // 如果是 number 类型，则认为是主导航的索引
-          this.actived = data
         }
         else {
-          // 如果是 string 类型，则认为是路由，需要查找对应的主导航索引
-          const findIndex = this.allMenus.findIndex(item => item.children.some(r => data.indexOf(`${r.path}/`) === 0 || data === r.path))
-          if (findIndex >= 0) {
-            this.actived = findIndex
+          returnMenus = routeStore.routes as Menu.recordMainRaw[]
+        }
+      }
+      else {
+        returnMenus = menus.value
+      }
+      return returnMenus
+    })
+    // 次导航数据
+    const sidebarMenus = computed<Menu.recordMainRaw['children']>(() => {
+      return allMenus.value.length > 0
+        ? allMenus.value[actived.value].children
+        : []
+    })
+    // 次导航第一层最深路径
+    const sidebarMenusFirstDeepestPath = computed(() => {
+      return allMenus.value.length > 0
+        ? getDeepestPath(sidebarMenus.value[0])
+        : '/'
+    })
+    function getDeepestPath(menu: Menu.recordRaw, rootPath = '') {
+      let retnPath = ''
+      if (menu.children) {
+        const item = menu.children.find(item => item.meta?.sidebar !== false)
+        if (item) {
+          retnPath = getDeepestPath(item, resolveRoutePath(rootPath, menu.path))
+        }
+        else {
+          retnPath = getDeepestPath(menu.children[0], resolveRoutePath(rootPath, menu.path))
+        }
+      }
+      else {
+        retnPath = resolveRoutePath(rootPath, menu.path)
+      }
+      return retnPath
+    }
+    // 默认展开的导航路径
+    const defaultOpenedPaths = computed(() => {
+      let defaultOpenedPaths: string[] = []
+      if (settingsStore.settings.app.routeBaseOn !== 'filesystem') {
+        defaultOpenedPaths = getDefaultOpenedPaths(sidebarMenus.value)
+      }
+      return defaultOpenedPaths
+    })
+    function getDefaultOpenedPaths(menus: Menu.recordRaw[], rootPath = '') {
+      const defaultOpenedPaths: string[] = []
+      menus.forEach((item) => {
+        if (item.meta?.defaultOpened && item.children) {
+          defaultOpenedPaths.push(resolveRoutePath(rootPath, item.path))
+          const childrenDefaultOpenedPaths = getDefaultOpenedPaths(item.children, resolveRoutePath(rootPath, item.path))
+          if (childrenDefaultOpenedPaths.length > 0) {
+            defaultOpenedPaths.push(...childrenDefaultOpenedPaths)
           }
         }
-      },
-    },
+      })
+      return defaultOpenedPaths
+    }
+
+    // 判断是否有权限
+    function hasPermission(permissions: string[], menu: Menu.recordMainRaw | Menu.recordRaw) {
+      let isAuth = false
+      if (menu.meta && menu.meta.auth) {
+        isAuth = permissions.some((auth) => {
+          if (typeof menu.meta?.auth === 'string') {
+            return menu.meta.auth !== '' ? menu.meta.auth === auth : true
+          }
+          else if (typeof menu.meta?.auth === 'object') {
+            return menu.meta.auth.length > 0 ? menu.meta.auth.includes(auth) : true
+          }
+          else {
+            return false
+          }
+        })
+      }
+      else {
+        isAuth = true
+      }
+      return isAuth
+    }
+    // 根据权限过滤导航
+    function filterAsyncMenus<T extends Menu.recordMainRaw[] | Menu.recordRaw[]>(menus: T, permissions: string[]): T {
+      const res: any = []
+      menus.forEach((menu) => {
+        const tmpMenu = cloneDeep(menu)
+        if (hasPermission(permissions, tmpMenu)) {
+          if (tmpMenu.children) {
+            tmpMenu.children = filterAsyncMenus(tmpMenu.children, permissions) as Menu.recordRaw[]
+            tmpMenu.children.length && res.push(tmpMenu)
+          }
+          else {
+            res.push(tmpMenu)
+          }
+        }
+      })
+      return res
+    }
+    // 生成导航（前端生成）
+    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)
+    }
+    // 生成导航（后端生成）
+    async function generateMenusAtBack() {
+      await api.get('menu/list', {
+        baseURL: '/mock/',
+      }).then(async (res) => {
+        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)
+      }).catch(() => {})
+    }
+    // 切换主导航
+    function setActived(data: number | string) {
+      if (typeof data === 'number') {
+        // 如果是 number 类型，则认为是主导航的索引
+        actived.value = data
+      }
+      else {
+        // 如果是 string 类型，则认为是路由，需要查找对应的主导航索引
+        const findIndex = allMenus.value.findIndex(item => item.children.some(r => data.indexOf(`${r.path}/`) === 0 || data === r.path))
+        if (findIndex >= 0) {
+          actived.value = findIndex
+        }
+      }
+    }
+
+    return {
+      menus,
+      actived,
+      allMenus,
+      sidebarMenus,
+      sidebarMenusFirstDeepestPath,
+      defaultOpenedPaths,
+      generateMenusAtFront,
+      generateMenusAtBack,
+      setActived,
+    }
   },
 )
 

src/store/modules/route.ts

@@ -1,240 +1,249 @@
 import { cloneDeep } from 'lodash-es'
+import type { RouteMeta, RouteRecordRaw } from 'vue-router'
 import useSettingsStore from './settings'
 import useUserStore from './user'
 import api from '@/api'
 import { resolveRoutePath } from '@/utils'
 import { systemRoutes } from '@/router/routes'
-import type { Route } from '@/global'
-
-function hasPermission(permissions: string[], route: Route.recordMainRaw | Route.recordRaw) {
-  let isAuth = false
-  if (route.meta?.auth) {
-    isAuth = permissions.some((auth) => {
-      return typeof route.meta.auth === 'string'
-        ? route.meta.auth === auth
-        : typeof route.meta.auth === 'object'
-          ? route.meta.auth.includes(auth)
-          : false
-    })
-  }
-  else {
-    isAuth = true
-  }
-  return isAuth
-}
-
-function filterAsyncRoutes<T extends Route.recordMainRaw[] | Route.recordRaw[]>(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
-}
-
-function formatBackRoutes(routes: any, views = import.meta.glob('../../views/**/*.vue')): Route.recordMainRaw[] {
-  return routes.map((route: any) => {
-    switch (route.component) {
-      case 'Layout':
-        route.component = () => import('@/layouts/index.vue')
-        break
-      default:
-        if (route.component) {
-          route.component = views[`../../views/${route.component}`]
-        }
-    }
-    if (route.children) {
-      route.children = formatBackRoutes(route.children, views)
-    }
-    return route
-  })
-}
-
-// 将多层嵌套路由处理成两层，保留顶层和最子层路由，中间层级将被拍平
-function flatAsyncRoutes<T extends Route.recordRaw>(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,
-    }], routes.path)
-  }
-  return routes
-}
-function flatAsyncRoutesRecursive(routes: Route.recordRaw[], breadcrumb: Route.breadcrumb[] = [], baseUrl = ''): Route.recordRaw[] {
-  const res: Route.recordRaw[] = []
-  routes.forEach((route) => {
-    if (route.children) {
-      const childrenBaseUrl = resolveRoutePath(baseUrl, route.path)
-      const tmpBreadcrumb = cloneDeep(breadcrumb)
-      if (route.meta.breadcrumb !== false) {
-        tmpBreadcrumb.push({
-          path: childrenBaseUrl,
-          title: route.meta.title,
-          hide: !route.meta.breadcrumb && route.meta.breadcrumb === false,
-        })
-      }
-      const tmpRoute = cloneDeep(route)
-      tmpRoute.path = childrenBaseUrl
-      tmpRoute.meta.breadcrumbNeste = tmpBreadcrumb
-      delete tmpRoute.children
-      res.push(tmpRoute)
-      const childrenRoutes = flatAsyncRoutesRecursive(route.children, tmpBreadcrumb, childrenBaseUrl)
-      childrenRoutes.forEach((item) => {
-        // 如果 path 一样则覆盖，因为子路由的 path 可能设置为空，导致和父路由一样，直接注册会提示路由重复
-        if (res.some(v => v.path === item.path)) {
-          res.forEach((v, i) => {
-            if (v.path === item.path) {
-              res[i] = item
-            }
-          })
-        }
-        else {
-          res.push(item)
-        }
-      })
-    }
-    else {
-      const tmpRoute = cloneDeep(route)
-      tmpRoute.path = resolveRoutePath(baseUrl, tmpRoute.path)
-      // 处理面包屑导航
-      const tmpBreadcrumb = cloneDeep(breadcrumb)
-      tmpBreadcrumb.push({
-        path: tmpRoute.path,
-        title: tmpRoute.meta.title,
-        hide: !tmpRoute.meta.breadcrumb && tmpRoute.meta.breadcrumb === false,
-      })
-      tmpRoute.meta.breadcrumbNeste = tmpBreadcrumb
-      res.push(tmpRoute)
-    }
-  })
-  return res
-}
+import type { Route } from '#/global'
 
 const useRouteStore = defineStore(
   // 唯一ID
   'route',
-  {
-    state: () => ({
-      isGenerate: false,
-      routes: [] as Route.recordMainRaw[],
-      fileSystemRoutes: [] as Route.recordRaw[],
-      currentRemoveRoutes: [] as Function[],
-    }),
-    getters: {
-      // 扁平化路由（将三级及以上路由数据拍平成二级）
-      flatRoutes: (state) => {
-        const settingsStore = useSettingsStore()
-        const routes: Route.recordRaw[] = []
-        if (state.routes) {
-          if (settingsStore.app.routeBaseOn !== 'filesystem') {
-            state.routes.forEach((item) => {
-              routes.push(...cloneDeep(item.children))
-            })
-            routes.forEach(item => flatAsyncRoutes(item))
+  () => {
+    const settingsStore = useSettingsStore()
+    const userStore = useUserStore()
+
+    const isGenerate = ref(false)
+    const routesRaw = ref<Route.recordMainRaw[]>([])
+    const filesystemRoutesRaw = ref<RouteRecordRaw[]>([])
+    const currentRemoveRoutes = ref<Function[]>([])
+
+    // 将多层嵌套路由处理成两层，保留顶层和最子层路由，中间层级将被拍平
+    function flatAsyncRoutes<T extends RouteRecordRaw>(route: T): T {
+      if (route.children) {
+        route.children = flatAsyncRoutesRecursive(route.children, [{
+          path: route.path,
+          title: route.meta?.title,
+          hide: !route.meta?.breadcrumb && route.meta?.breadcrumb === false,
+        }], route.path, route.meta?.auth)
+      }
+      return route
+    }
+    function flatAsyncRoutesRecursive(routes: RouteRecordRaw[], breadcrumb: Route.breadcrumb[] = [], baseUrl = '', baseAuth: RouteMeta['auth']): 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,
+            title: route.meta?.title,
+            hide: !route.meta?.breadcrumb && route.meta?.breadcrumb === false,
+          })
+          const tmpRoute = cloneDeep(route)
+          tmpRoute.path = childrenBaseUrl
+          if (!tmpRoute.meta) {
+            tmpRoute.meta = {}
           }
-          else {
-            routes.push(...cloneDeep(state.fileSystemRoutes))
-          }
-        }
-        return routes
-      },
-      flatSystemRoutes: () => {
-        const routes = [...systemRoutes]
-        routes.forEach(item => flatAsyncRoutes(item))
-        return routes
-      },
-    },
-    actions: {
-      // 根据权限动态生成路由（前端生成）
-      generateRoutesAtFront(asyncRoutes: Route.recordMainRaw[]) {
-        // eslint-disable-next-line no-async-promise-executor
-        return new Promise<void>(async (resolve) => {
-          const settingsStore = useSettingsStore()
-          const userStore = useUserStore()
-          let accessedRoutes
-          // 如果权限功能开启，则需要对路由数据进行筛选过滤
-          if (settingsStore.app.enablePermission) {
-            const permissions = await userStore.getPermissions()
-            accessedRoutes = filterAsyncRoutes(asyncRoutes, permissions)
-          }
-          else {
-            accessedRoutes = cloneDeep(asyncRoutes)
-          }
-          // 设置 routes 数据
-          this.isGenerate = true
-          this.routes = accessedRoutes.filter(item => item.children?.length !== 0)
-          resolve()
-        })
-      },
-      // 根据权限动态生成路由（后端获取）
-      generateRoutesAtBack() {
-        return new Promise<void>((resolve) => {
-          api.get('route/list', {
-            baseURL: '/mock/',
-          }).then(async (res) => {
-            const settingsStore = useSettingsStore()
-            const userStore = useUserStore()
-            const asyncRoutes = formatBackRoutes(res.data)
-            let accessedRoutes
-            // 如果权限功能开启，则需要对路由数据进行筛选过滤
-            if (settingsStore.app.enablePermission) {
-              const permissions = await userStore.getPermissions()
-              accessedRoutes = filterAsyncRoutes(asyncRoutes, permissions)
+          tmpRoute.meta.auth = childrenBaseAuth
+          tmpRoute.meta.breadcrumbNeste = tmpBreadcrumb
+          delete tmpRoute.children
+          res.push(tmpRoute)
+          const childrenRoutes = flatAsyncRoutesRecursive(route.children, tmpBreadcrumb, childrenBaseUrl, childrenBaseAuth)
+          childrenRoutes.forEach((item) => {
+            // 如果 path 一样则覆盖，因为子路由的 path 可能设置为空，导致和父路由一样，直接注册会提示路由重复
+            if (res.some(v => v.path === item.path)) {
+              res.forEach((v, i) => {
+                if (v.path === item.path) {
+                  res[i] = item
+                }
+              })
             }
             else {
-              accessedRoutes = cloneDeep(asyncRoutes)
+              res.push(item)
             }
-            // 设置 routes 数据
-            this.isGenerate = true
-            this.routes = accessedRoutes.filter(item => item.children.length !== 0)
-            resolve()
           })
-        })
-      },
-      // 根据权限动态生成路由（文件系统生成）
-      generateRoutesAtFilesystem(asyncRoutes: Route.recordRaw[]) {
-        // eslint-disable-next-line no-async-promise-executor
-        return new Promise<void>(async (resolve) => {
-          const settingsStore = useSettingsStore()
-          const userStore = useUserStore()
-          let accessedRoutes
-          // 如果权限功能开启，则需要对路由数据进行筛选过滤
-          if (settingsStore.app.enablePermission) {
-            const permissions = await userStore.getPermissions()
-            accessedRoutes = filterAsyncRoutes(asyncRoutes, permissions)
+        }
+        else {
+          const tmpRoute = cloneDeep(route)
+          tmpRoute.path = resolveRoutePath(baseUrl, tmpRoute.path)
+          // 处理面包屑导航
+          const tmpBreadcrumb = cloneDeep(breadcrumb)
+          tmpBreadcrumb.push({
+            path: tmpRoute.path,
+            title: tmpRoute.meta?.title,
+            hide: !tmpRoute.meta?.breadcrumb && tmpRoute.meta?.breadcrumb === false,
+          })
+          if (!tmpRoute.meta) {
+            tmpRoute.meta = {}
+          }
+          tmpRoute.meta.auth = baseAuth ?? tmpRoute.meta?.auth
+          tmpRoute.meta.breadcrumbNeste = tmpBreadcrumb
+          res.push(tmpRoute)
+        }
+      })
+      return res
+    }
+    // 扁平化路由（将三级及以上路由数据拍平成二级）
+    const flatRoutes = computed(() => {
+      const settingsStore = useSettingsStore()
+      const returnRoutes: RouteRecordRaw[] = []
+      if (routesRaw.value) {
+        if (settingsStore.settings.app.routeBaseOn !== 'filesystem') {
+          routesRaw.value.forEach((item) => {
+            const tmpRoutes = cloneDeep(item.children) as RouteRecordRaw[]
+            tmpRoutes.map((v) => {
+              if (!v.meta) {
+                v.meta = {}
+              }
+              v.meta.auth = item.meta?.auth ?? v.meta?.auth
+              return v
+            })
+            returnRoutes.push(...tmpRoutes)
+          })
+          returnRoutes.forEach(item => flatAsyncRoutes(item))
+        }
+        else {
+          returnRoutes.push(...cloneDeep(filesystemRoutesRaw.value))
+        }
+      }
+      return returnRoutes
+    })
+    const flatSystemRoutes = computed(() => {
+      const routes = [...systemRoutes]
+      routes.forEach(item => flatAsyncRoutes(item))
+      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
+          }
+          else if (typeof route.meta?.auth === 'object') {
+            return route.meta.auth.length > 0 ? route.meta.auth.includes(auth) : true
           }
           else {
-            accessedRoutes = cloneDeep(asyncRoutes)
+            return false
           }
-          // 设置 routes 数据
-          this.isGenerate = true
-          this.fileSystemRoutes = accessedRoutes.filter(item => item.children?.length !== 0)
-          resolve()
         })
-      },
-      // 记录 accessRoutes 路由，用于登出时删除路由
-      setCurrentRemoveRoutes(routes: Function[]) {
-        this.currentRemoveRoutes = routes
-      },
-      // 清空动态路由
-      removeRoutes() {
-        this.isGenerate = false
-        this.routes = []
-        this.currentRemoveRoutes.forEach((removeRoute) => {
-          removeRoute()
-        })
-        this.currentRemoveRoutes = []
-      },
-    },
+      }
+      else {
+        isAuth = true
+      }
+      return isAuth
+    }
+    // 根据权限过滤路由
+    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[]) {
+      // 设置 routes 数据
+      routesRaw.value = cloneDeep(asyncRoutes) as any
+      if (settingsStore.settings.app.enablePermission) {
+        await userStore.getPermissions()
+      }
+      isGenerate.value = true
+    }
+    // 格式化后端路由数据
+    function formatBackRoutes(routes: any, views = import.meta.glob('../../views/**/*.vue')): Route.recordMainRaw[] {
+      return routes.map((route: any) => {
+        switch (route.component) {
+          case 'Layout':
+            route.component = () => import('@/layouts/index.vue')
+            break
+          default:
+            if (route.component) {
+              route.component = views[`../../views/${route.component}`]
+            }
+        }
+        if (route.children) {
+          route.children = formatBackRoutes(route.children, views)
+        }
+        return route
+      })
+    }
+    // 根据权限动态生成路由（后端获取）
+    async function generateRoutesAtBack() {
+      await api.get('route/list', {
+        baseURL: '/mock/',
+      }).then(async (res) => {
+        // 设置 routes 数据
+        routesRaw.value = formatBackRoutes(res.data)
+        if (settingsStore.settings.app.enablePermission) {
+          userStore.getPermissions()
+        }
+        isGenerate.value = true
+      }).catch(() => {})
+    }
+    // 根据权限动态生成路由（文件系统生成）
+    async function generateRoutesAtFilesystem(asyncRoutes: RouteRecordRaw[]) {
+      // 设置 routes 数据
+      filesystemRoutesRaw.value = cloneDeep(asyncRoutes) as any
+      // 如果权限功能开启，则需要对路由数据进行筛选过滤
+      if (settingsStore.settings.app.enablePermission) {
+        await userStore.getPermissions()
+      }
+      isGenerate.value = true
+    }
+    // 记录 accessRoutes 路由，用于登出时删除路由
+    function setCurrentRemoveRoutes(routes: Function[]) {
+      currentRemoveRoutes.value = routes
+    }
+    // 清空动态路由
+    function removeRoutes() {
+      isGenerate.value = false
+      routesRaw.value = []
+      filesystemRoutesRaw.value = []
+      currentRemoveRoutes.value.forEach((removeRoute) => {
+        removeRoute()
+      })
+      currentRemoveRoutes.value = []
+    }
+
+    return {
+      isGenerate,
+      routes,
+      currentRemoveRoutes,
+      flatRoutes,
+      flatSystemRoutes,
+      generateRoutesAtFront,
+      generateRoutesAtBack,
+      generateRoutesAtFilesystem,
+      setCurrentRemoveRoutes,
+      removeRoutes,
+    }
   },
 )
 

src/store/modules/settings.ts

@@ -1,67 +1,122 @@
 import { defaultsDeep } from 'lodash-es'
-import type { RecursiveRequired, Settings } from '@/global'
-import settings from '@/settings'
+import type { RouteMeta } from 'vue-router'
+import type { RecursiveRequired, Settings } from '#/global'
+import settingsCustom from '@/settings'
 import settingsDefault from '@/settings.default'
 
-interface SettingsStore extends RecursiveRequired<Settings.all> {
-  subMenuCollapseLastStatus: boolean
-  mode: 'pc' | 'mobile'
-  title: string
-}
-
 const useSettingsStore = defineStore(
   // 唯一ID
   'settings',
-  {
-    state: (): SettingsStore => ({
-      // 合并配置
-      ...defaultsDeep(settings, settingsDefault),
-      // 侧边栏是否收起（用于记录 pc 模式下最后的状态）
-      subMenuCollapseLastStatus: settingsDefault.menu.subMenuCollapse,
-      // 显示模式，支持：mobile、pc
-      mode: 'pc',
-      // 页面标题
-      title: '',
-    }),
-    actions: {
-      // 设置网页标题
-      setTitle(title: string) {
-        this.title = title
-      },
-      // 设置访问模式
-      setMode(width: number) {
-        if (this.layout.enableMobileAdaptation) {
-          // 先判断 UA 是否为移动端设备（手机&平板）
-          if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
-            this.mode = 'mobile'
-          }
-          else {
-            // 如果为桌面设备，再根据页面宽度判断是否需要切换为移动端展示
-            this.mode = width < 992 ? 'mobile' : 'pc'
-          }
+  () => {
+    const mergeSettings: RecursiveRequired<Settings.all> = defaultsDeep(settingsCustom, settingsDefault)
+    const settings = ref(mergeSettings)
+    watch(() => settings.value.app.colorScheme, (val) => {
+      if (val === '') {
+        val = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+      }
+      switch (val) {
+        case 'dark':
+          document.documentElement.classList.add('dark')
+          break
+        case 'light':
+          document.documentElement.classList.remove('dark')
+          break
+      }
+    }, {
+      immediate: true,
+    })
+    watch(() => settings.value.menu.menuMode, (val) => {
+      document.body.setAttribute('data-menu-mode', val)
+    }, {
+      immediate: true,
+    })
+
+    // 操作系统
+    const os = ref<'mac' | 'windows' | 'linux' | 'other'>('other')
+    const agent = navigator.userAgent.toLowerCase()
+    switch (true) {
+      case agent.includes('mac os'):
+        os.value = 'mac'
+        break
+      case agent.includes('windows'):
+        os.value = 'windows'
+        break
+      case agent.includes('linux'):
+        os.value = 'linux'
+        break
+    }
+
+    // 页面标题
+    const title = ref<RouteMeta['title']>()
+    // 设置网页标题
+    function setTitle(_title: RouteMeta['title']) {
+      title.value = _title
+    }
+
+    // 显示模式
+    const mode = ref<'pc' | 'mobile'>('pc')
+    // 设置访问模式
+    function setMode(width: number) {
+      if (settings.value.layout.enableMobileAdaptation) {
+        // 先判断 UA 是否为移动端设备（手机&平板）
+        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
+          mode.value = 'mobile'
         }
         else {
-          this.mode = 'pc'
+          // 如果为桌面设备，再根据页面宽度判断是否需要切换为移动端展示
+          mode.value = width < 992 ? 'mobile' : 'pc'
         }
-      },
-      // 切换侧边栏导航展开/收起
-      toggleSidebarCollapse() {
-        this.menu.subMenuCollapse = !this.menu.subMenuCollapse
-        if (this.mode === 'pc') {
-          this.subMenuCollapseLastStatus = !this.subMenuCollapseLastStatus
-        }
-      },
-      // 设置主题颜色模式
-      setColorScheme(color: Required<Settings.app>['colorScheme']) {
-        this.app.colorScheme = color
-      },
-      // 更新应用配置
-      updateSettings(data: Settings.all) {
-        Object.keys(data).forEach((key) => {
-          this[key as keyof Settings.all] = defaultsDeep(data[key as keyof Settings.all], this[key as keyof Settings.all])
-        })
-      },
-    },
+      }
+      else {
+        mode.value = 'pc'
+      }
+    }
+
+    // 侧边栏是否收起（用于记录 pc 模式下最后的状态）
+    const subMenuCollapseLastStatus = ref(mergeSettings.menu.subMenuCollapse)
+    // 切换侧边栏导航展开/收起
+    function toggleSidebarCollapse() {
+      settings.value.menu.subMenuCollapse = !settings.value.menu.subMenuCollapse
+      if (mode.value === 'pc') {
+        subMenuCollapseLastStatus.value = !subMenuCollapseLastStatus.value
+      }
+    }
+
+    watch(mode, (val) => {
+      switch (val) {
+        case 'pc':
+          settings.value.menu.subMenuCollapse = subMenuCollapseLastStatus.value
+          break
+        case 'mobile':
+          settings.value.menu.subMenuCollapse = true
+          break
+      }
+      document.body.setAttribute('data-mode', val)
+    }, {
+      immediate: true,
+    })
+
+    // 设置主题颜色模式
+    function setColorScheme(color: Required<Settings.app>['colorScheme']) {
+      settings.value.app.colorScheme = color
+    }
+    // 更新应用配置
+    function updateSettings(data: Settings.all) {
+      settings.value = defaultsDeep(data, settings.value)
+    }
+
+    return {
+      settings,
+      os,
+      title,
+      setTitle,
+      mode,
+      setMode,
+      subMenuCollapseLastStatus,
+      toggleSidebarCollapse,
+      setColorScheme,
+      updateSettings,
+    }
   },
 )
 

src/store/modules/user.ts

@@ -5,93 +5,87 @@ import api from '@/api'
 const useUserStore = defineStore(
   // 唯一ID
   'user',
-  {
-    state: () => ({
-      account: localStorage.account || '',
-      token: localStorage.token || '',
-      failure_time: localStorage.failure_time || '',
-      permissions: [] as string[],
-    }),
-    getters: {
-      isLogin: (state) => {
-        let retn = false
-        if (state.token) {
-          if (new Date().getTime() < parseInt(state.failure_time) * 1000) {
-            retn = true
-          }
+  () => {
+    const routeStore = useRouteStore()
+    const menuStore = useMenuStore()
+
+    const account = ref(localStorage.account ?? '')
+    const token = ref(localStorage.token ?? '')
+    const failure_time = ref(localStorage.failure_time ?? '')
+    const permissions = ref<string[]>([])
+    const isLogin = computed(() => {
+      let retn = false
+      if (token.value) {
+        if (new Date().getTime() < parseInt(failure_time.value) * 1000) {
+          retn = true
         }
-        return retn
-      },
-    },
-    actions: {
-      login(data: {
-        account: string
-        password: string
-      }) {
-        return new Promise<void>((resolve, reject) => {
-          // 通过 mock 进行登录
-          api.post('member/login', data, {
-            baseURL: '/mock/',
-          }).then((res) => {
-            localStorage.setItem('account', res.data.account)
-            localStorage.setItem('token', res.data.token)
-            localStorage.setItem('failure_time', res.data.failure_time)
-            this.account = res.data.account
-            this.token = res.data.token
-            this.failure_time = res.data.failure_time
-            resolve()
-          }).catch((error) => {
-            reject(error)
-          })
-        })
-      },
-      logout() {
-        return new Promise<void>((resolve) => {
-          const routeStore = useRouteStore()
-          const menuStore = useMenuStore()
-          localStorage.removeItem('account')
-          localStorage.removeItem('token')
-          localStorage.removeItem('failure_time')
-          this.account = ''
-          this.token = ''
-          this.failure_time = ''
-          routeStore.removeRoutes()
-          menuStore.setActived(0)
-          resolve()
-        })
-      },
-      // 获取我的权限
-      getPermissions() {
-        return new Promise<string[]>((resolve) => {
-          // 通过 mock 获取权限
-          api.get('member/permission', {
-            baseURL: '/mock/',
-            params: {
-              account: this.account,
-            },
-          }).then((res) => {
-            this.permissions = res.data.permissions
-            resolve(res.data.permissions)
-          })
-        })
-      },
-      editPassword(data: {
-        password: string
-        newpassword: string
-      }) {
-        return new Promise<void>((resolve) => {
-          api.post('member/edit/password', {
-            account: this.account,
-            password: data.password,
-            newpassword: data.newpassword,
-          }, {
-            baseURL: '/mock/',
-          }).then(() => {
-            resolve()
-          })
-        })
-      },
-    },
+      }
+      return retn
+    })
+
+    // 登录
+    async function login(data: {
+      account: string
+      password: string
+    }) {
+      // 通过 mock 进行登录
+      const res = await api.post('member/login', data, {
+        baseURL: '/mock/',
+      })
+      localStorage.setItem('account', res.data.account)
+      localStorage.setItem('token', res.data.token)
+      localStorage.setItem('failure_time', res.data.failure_time)
+      account.value = res.data.account
+      token.value = res.data.token
+      failure_time.value = res.data.failure_time
+    }
+    // 登出
+    async function logout() {
+      localStorage.removeItem('account')
+      localStorage.removeItem('token')
+      localStorage.removeItem('failure_time')
+      account.value = ''
+      token.value = ''
+      failure_time.value = ''
+      routeStore.removeRoutes()
+      menuStore.setActived(0)
+    }
+    // 获取我的权限
+    async function getPermissions() {
+      // 通过 mock 获取权限
+      const res = await api.get('member/permission', {
+        baseURL: '/mock/',
+        params: {
+          account: account.value,
+        },
+      })
+      permissions.value = res.data.permissions
+      return permissions.value
+    }
+    // 修改密码
+    async function editPassword(data: {
+      password: string
+      newpassword: string
+    }) {
+      await api.post('member/edit/password', {
+        account: account.value,
+        password: data.password,
+        newpassword: data.newpassword,
+      }, {
+        baseURL: '/mock/',
+      })
+    }
+
+    return {
+      account,
+      token,
+      permissions,
+      isLogin,
+      login,
+      logout,
+      getPermissions,
+      editPassword,
+    }
   },
 )
 

src/types/auto-imports.d.ts

@@ -1,4 +1,7 @@
-// Generated by 'unplugin-auto-import'
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-auto-import
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
@@ -47,7 +50,6 @@ declare global {
   const readonly: typeof import('vue')['readonly']
   const ref: typeof import('vue')['ref']
   const resolveComponent: typeof import('vue')['resolveComponent']
-  const resolveDirective: typeof import('vue')['resolveDirective']
   const setActivePinia: typeof import('pinia')['setActivePinia']
   const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
   const shallowReactive: typeof import('vue')['shallowReactive']
@@ -60,13 +62,13 @@ declare global {
   const triggerRef: typeof import('vue')['triggerRef']
   const unref: typeof import('vue')['unref']
   const useAttrs: typeof import('vue')['useAttrs']
-  const useAuth: typeof import('./utils/composables/useAuth')['default']
+  const useAuth: typeof import('../utils/composables/useAuth')['default']
   const useCssModule: typeof import('vue')['useCssModule']
   const useCssVars: typeof import('vue')['useCssVars']
-  const useGlobalProperties: typeof import('./utils/composables/useGlobalProperties')['default']
+  const useGlobalProperties: typeof import('../utils/composables/useGlobalProperties')['default']
   const useLink: typeof import('vue-router')['useLink']
-  const useMainPage: typeof import('./utils/composables/useMainPage')['default']
-  const useMenu: typeof import('./utils/composables/useMenu')['default']
+  const useMainPage: typeof import('../utils/composables/useMainPage')['default']
+  const useMenu: typeof import('../utils/composables/useMenu')['default']
   const useRoute: typeof import('vue-router')['useRoute']
   const useRouter: typeof import('vue-router')['useRouter']
   const useSlots: typeof import('vue')['useSlots']
@@ -75,3 +77,8 @@ declare global {
   const watchPostEffect: typeof import('vue')['watchPostEffect']
   const watchSyncEffect: typeof import('vue')['watchSyncEffect']
 }
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
+}

src/types/components.d.ts

@@ -0,0 +1,33 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+import '@vue/runtime-core'
+
+export {}
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    Auth: typeof import('./../components/Auth/index.vue')['default']
+    AuthAll: typeof import('./../components/AuthAll/index.vue')['default']
+    BatchActionBar: typeof import('./../components/BatchActionBar/index.vue')['default']
+    Copyright: typeof import('./../components/Copyright/index.vue')['default']
+    Editor: typeof import('./../components/Editor/index.vue')['default']
+    FileUpload: typeof import('./../components/FileUpload/index.vue')['default']
+    FixedActionBar: typeof import('./../components/FixedActionBar/index.vue')['default']
+    ImagePreview: typeof import('./../components/ImagePreview/index.vue')['default']
+    ImagesUpload: typeof import('./../components/ImagesUpload/index.vue')['default']
+    ImageUpload: typeof import('./../components/ImageUpload/index.vue')['default']
+    NotAllowed: typeof import('./../components/NotAllowed/index.vue')['default']
+    PageHeader: typeof import('./../components/PageHeader/index.vue')['default']
+    PageMain: typeof import('./../components/PageMain/index.vue')['default']
+    PcasCascader: typeof import('./../components/PcasCascader/index.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    SearchBar: typeof import('./../components/SearchBar/index.vue')['default']
+    SvgIcon: typeof import('./../components/SvgIcon/index.vue')['default']
+    SystemInfo: typeof import('./../components/SystemInfo/index.vue')['default']
+    Trend: typeof import('./../components/Trend/index.vue')['default']
+  }
+}

src/types/global.d.ts

@@ -1,5 +1,4 @@
-import type { StyleValue } from "vue"
-import type { RouteRecordRaw, RouteMeta, NavigationGuard } from 'vue-router'
+import type { RouteRecordRaw } from 'vue-router'
 
 type RecursiveRequired<T> = {
   [P in keyof T]-?: RecursiveRequired<T[P]>
@@ -52,15 +51,15 @@ declare namespace Settings {
      */
     routeBaseOn?: 'frontend' | 'backend' | 'filesystem'
   }
-  interface dashboard {
+  interface home {
     /**
-     * 是否开启控制台页面
+     * 是否开启主页页面
      * @默认值 `true`
      */
     enable?: boolean
     /**
-     * 控制台名称
-     * @默认值 `'控制台'`
+     * 主页名称
+     * @默认值 `'主页'`
      */
     title?: string
   }
@@ -113,10 +112,12 @@ declare namespace Settings {
   }
   interface topbar {
     /**
-     * 是否固定顶栏
-     * @默认值 `true`
+     * 模式
+     * @默认值 `'static'` 静止，跟随页面滚动
+     * @可选值 `'fixed'` 固定，不跟随页面滚动，始终固定在顶部
+     * @可选值 `'sticky'` 粘性，页面往下滚动时隐藏，往上滚动时显示
      */
-    fixed?: boolean
+    mode?: 'static' | 'fixed' | 'sticky'
   }
   interface toolbar {
     /**
@@ -189,8 +190,8 @@ declare namespace Settings {
   interface all {
     /** 应用设置 */
     app?: app
-    /** 控制台设置 */
-    dashboard?: dashboard
+    /** 主页设置 */
+    home?: home
     /** 布局设置 */
     layout?: layout
     /** 导航栏设置 */
@@ -210,7 +211,7 @@ declare namespace Settings {
 
 declare module 'vue-router' {
   interface RouteMeta {
-    title: string | Function
+    title?: string | Function
     i18n?: string
     icon?: string
     activeIcon?: string
@@ -220,26 +221,23 @@ declare module 'vue-router' {
     breadcrumb?: boolean
     activeMenu?: string
     cache?: boolean | string | string[]
+    link?: string
     breadcrumbNeste?: Route.breadcrumb[]
   }
 }
 
 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[]
     }
-    children: recordRaw[]
+    children: RouteRecordRaw[]
   }
   interface breadcrumb {
     path: string
-    title: string | Function
+    title?: string | Function
     hide: boolean
   }
 }
@@ -248,18 +246,19 @@ declare namespace Menu {
   /** 原始 */
   interface recordRaw {
     path?: string
-    meta: {
-      title: string
+    meta?: {
+      title?: string
       icon?: string
       defaultOpened?: boolean
       auth?: string | string[]
       sidebar?: boolean
+      link?: string
     }
     children?: recordRaw[]
   }
   /** 主导航 */
   interface recordMainRaw {
-    meta: {
+    meta?: {
       title?: string
       icon?: string
       auth?: string | string[]

src/types/shims.d.ts

@@ -1,19 +1,19 @@
-declare interface Window {
-  webkitDevicePixelRatio: any
-  mozDevicePixelRatio: any
-}
-
-declare module '*.vue' {
-  import { type DefineComponent } from 'vue'
-  const component: DefineComponent<{}, {}, any>
-  export default component
-}
-
-declare const __SYSTEM_INFO__: {
-  pkg: {
-    version: string
-    dependencies: Recordable<string>
-    devDependencies: Recordable<string>
-  }
-  lastBuildTime: string
-}
+declare interface Window {
+  webkitDevicePixelRatio: any
+  mozDevicePixelRatio: any
+}
+
+declare module '*.vue' {
+  import { type DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
+
+declare const __SYSTEM_INFO__: {
+  pkg: {
+    version: string
+    dependencies: Recordable<string>
+    devDependencies: Recordable<string>
+  }
+  lastBuildTime: string
+}

src/utils/composables/useAuth.ts

@@ -5,7 +5,7 @@ export default function useAuth() {
   function hasPermission(permission: string) {
     const settingsStore = useSettingsStore()
     const userStore = useUserStore()
-    if (settingsStore.app.enablePermission) {
+    if (settingsStore.settings.app.enablePermission) {
       return userStore.permissions.includes(permission)
     }
     else {
@@ -16,21 +16,16 @@ export default function useAuth() {
   function auth(value: string | string[]) {
     let auth
     if (typeof value === 'string') {
-      auth = hasPermission(value)
+      auth = value !== '' ? hasPermission(value) : true
     }
     else {
-      auth = value.some((item) => {
-        return hasPermission(item)
-      })
+      auth = value.length > 0 ? value.some(item => hasPermission(item)) : true
     }
     return auth
   }
 
   function authAll(value: string[]) {
-    const auth = value.every((item) => {
-      return hasPermission(item)
-    })
-    return auth
+    return value.length > 0 ? value.every(item => hasPermission(item)) : true
   }
 
   return {

src/utils/composables/useMenu.ts

@@ -1,7 +1,6 @@
 import router from '@/router'
 import useSettingsStore from '@/store/modules/settings'
 import useMenuStore from '@/store/modules/menu'
-import { isExternalLink } from '@/utils'
 
 export default function useMenu() {
   const settingsStore = useSettingsStore()
@@ -9,13 +8,8 @@ export default function useMenu() {
 
   function switchTo(index: number | string) {
     menuStore.setActived(index)
-    if (settingsStore.menu.switchMainMenuAndPageJump) {
-      if (isExternalLink(menuStore.sidebarMenusFirstDeepestPath)) {
-        window.open(menuStore.sidebarMenusFirstDeepestPath, '_blank')
-      }
-      else {
-        router.push(menuStore.sidebarMenusFirstDeepestPath)
-      }
+    if (settingsStore.settings.menu.switchMainMenuAndPageJump) {
+      router.push(menuStore.sidebarMenusFirstDeepestPath)
     }
   }
 

src/utils/index.ts

@@ -1,15 +1,5 @@
 import path from 'path-browserify'
 
-export function isExternalLink(path: string) {
-  return /^(https?:|mailto:|tel:)/.test(path)
-}
-
-export function resolveRoutePath(basePath: string, routePath: string) {
-  if (isExternalLink(routePath)) {
-    return routePath
-  }
-  if (isExternalLink(basePath)) {
-    return basePath
-  }
-  return basePath ? path.resolve(basePath, routePath) : routePath
+export function resolveRoutePath(basePath: string, routePath?: string) {
+  return basePath ? path.resolve(basePath, routePath ?? '') : routePath ?? ''
 }

src/utils/system.copyright.ts

@@ -0,0 +1,15 @@
+/* eslint-disable no-console */
+// 请勿删除
+if (import.meta.env.PROD) {
+  const copyright_common_style = 'font-size: 14px; margin-bottom: 2px; padding: 6px 8px; color: #fff;'
+  const copyright_main_style = `${copyright_common_style} background: #e24329;`
+  const copyright_sub_style = `${copyright_common_style} background: #707070;`
+  if ((navigator.language).toLowerCase() === 'zh-cn') {
+    console.info('%c由%cFantastic-admin%c驱动', copyright_sub_style, copyright_main_style, copyright_sub_style, '\nhttps://gitee.com/hooray/fantastic-admin')
+  }
+  else {
+    console.info('%cPowered by%cFantastic-admin', copyright_sub_style, copyright_main_style, '\nhttps://github.com/hooray/fantastic-admin')
+  }
+}
+
+export {}

src/views/index.vue

@@ -1,12 +1,12 @@
 <route lang="yaml">
-name: dashboard
+name: home
 meta:
-  title: 控制台
+  title: 主页
 </route>
 
 <script lang="ts" setup>
 function open(url: string) {
-  window.open(url, 'top')
+  window.open(url, '_blank')
 }
 
 const fantasticStartkitInfo = ref({
@@ -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>

src/views/login.vue

@@ -21,12 +21,10 @@ const title = import.meta.env.VITE_APP_TITLE
 // 表单类型，login 登录，reset 重置密码
 const formType = ref('login')
 const loading = ref(false)
-const passwordType = ref('password')
 const redirect = ref(route.query.redirect?.toString() ?? '/')
 
 // 登录
 const loginFormRef = ref<FormInstance>()
-const loginPasswordRef = ref<HTMLElement>()
 const loginForm = ref({
   account: localStorage.login_account || '',
   password: '',
@@ -63,8 +61,6 @@ function handleLogin() {
 
 // 注册
 const registerFormRef = ref<FormInstance>()
-const registerPasswordRef = ref<HTMLElement>()
-const registerCheckPasswordRef = ref<HTMLElement>()
 const registerForm = ref({
   account: '',
   captcha: '',
@@ -110,7 +106,6 @@ function handleRegister() {
 
 // 重置密码
 const resetFormRef = ref<FormInstance>()
-const resetNewPasswordRef = ref<HTMLElement>()
 const resetForm = ref({
   account: localStorage.login_account || '',
   captcha: '',
@@ -140,13 +135,6 @@ function handleReset() {
   })
 }
 
-function showPassword(passwordEl: HTMLElement | undefined) {
-  passwordType.value = passwordType.value === 'password' ? '' : 'password'
-  nextTick(() => {
-    passwordEl?.focus()
-  })
-}
-
 function testAccount(account: string) {
   loginForm.value.account = account
   loginForm.value.password = '123456'
@@ -170,7 +158,7 @@ function testAccount(account: string) {
         </div>
         <div>
           <el-form-item prop="account">
-            <el-input ref="name" v-model="loginForm.account" placeholder="用户名" text tabindex="1" autocomplete="on">
+            <el-input v-model="loginForm.account" placeholder="用户名" text tabindex="1" autocomplete="on">
               <template #prefix>
                 <el-icon>
                   <svg-icon name="ep:user" />
@@ -179,17 +167,12 @@ function testAccount(account: string) {
             </el-input>
           </el-form-item>
           <el-form-item prop="password">
-            <el-input ref="loginPasswordRef" v-model="loginForm.password" :type="passwordType" placeholder="密码" tabindex="2" autocomplete="on" @keyup.enter="handleLogin">
+            <el-input v-model="loginForm.password" type="password" placeholder="密码" tabindex="2" autocomplete="on" show-password @keyup.enter="handleLogin">
               <template #prefix>
                 <el-icon>
                   <svg-icon name="ep:lock" />
                 </el-icon>
               </template>
-              <template #suffix>
-                <el-icon>
-                  <svg-icon :name="passwordType === 'password' ? 'eye' : 'eye-open'" @click="showPassword(loginPasswordRef)" />
-                </el-icon>
-              </template>
             </el-input>
           </el-form-item>
         </div>
@@ -228,7 +211,7 @@ function testAccount(account: string) {
         </div>
         <div>
           <el-form-item prop="account">
-            <el-input ref="name" v-model="registerForm.account" placeholder="用户名" tabindex="1" autocomplete="on">
+            <el-input v-model="registerForm.account" placeholder="用户名" tabindex="1" autocomplete="on">
               <template #prefix>
                 <el-icon>
                   <svg-icon name="ep:user" />
@@ -237,7 +220,7 @@ function testAccount(account: string) {
             </el-input>
           </el-form-item>
           <el-form-item prop="captcha">
-            <el-input ref="captcha" v-model="registerForm.captcha" placeholder="验证码" tabindex="2" autocomplete="on">
+            <el-input v-model="registerForm.captcha" placeholder="验证码" tabindex="2" autocomplete="on">
               <template #prefix>
                 <el-icon>
                   <svg-icon name="ep:key" />
@@ -249,31 +232,21 @@ function testAccount(account: string) {
             </el-input>
           </el-form-item>
           <el-form-item prop="password">
-            <el-input ref="registerPasswordRef" v-model="registerForm.password" :type="passwordType" placeholder="密码" tabindex="3" autocomplete="on">
+            <el-input v-model="registerForm.password" type="password" placeholder="密码" tabindex="3" autocomplete="on" show-password>
               <template #prefix>
                 <el-icon>
                   <svg-icon name="ep:lock" />
                 </el-icon>
               </template>
-              <template #suffix>
-                <el-icon>
-                  <svg-icon :name="passwordType === 'password' ? 'ep:hide' : 'ep:view'" @click="showPassword(registerPasswordRef)" />
-                </el-icon>
-              </template>
             </el-input>
           </el-form-item>
           <el-form-item prop="checkPassword">
-            <el-input ref="registerCheckPasswordRef" v-model="registerForm.checkPassword" :type="passwordType" placeholder="确认密码" tabindex="4" autocomplete="on">
+            <el-input v-model="registerForm.checkPassword" type="password" placeholder="确认密码" tabindex="4" autocomplete="on" show-password>
               <template #prefix>
                 <el-icon>
                   <svg-icon name="ep:lock" />
                 </el-icon>
               </template>
-              <template #suffix>
-                <el-icon>
-                  <svg-icon :name="passwordType === 'password' ? 'ep:hide' : 'ep:view'" @click="showPassword(registerCheckPasswordRef)" />
-                </el-icon>
-              </template>
             </el-input>
           </el-form-item>
         </div>
@@ -295,7 +268,7 @@ function testAccount(account: string) {
         </div>
         <div>
           <el-form-item prop="account">
-            <el-input ref="name" v-model="resetForm.account" placeholder="用户名" tabindex="1" autocomplete="on">
+            <el-input v-model="resetForm.account" placeholder="用户名" tabindex="1" autocomplete="on">
               <template #prefix>
                 <el-icon>
                   <svg-icon name="ep:user" />
@@ -304,7 +277,7 @@ function testAccount(account: string) {
             </el-input>
           </el-form-item>
           <el-form-item prop="captcha">
-            <el-input ref="captcha" v-model="resetForm.captcha" placeholder="验证码" tabindex="2" autocomplete="on">
+            <el-input v-model="resetForm.captcha" placeholder="验证码" tabindex="2" autocomplete="on">
               <template #prefix>
                 <el-icon>
                   <svg-icon name="ep:key" />
@@ -316,17 +289,12 @@ function testAccount(account: string) {
             </el-input>
           </el-form-item>
           <el-form-item prop="newPassword">
-            <el-input ref="resetNewPasswordRef" v-model="resetForm.newPassword" :type="passwordType" placeholder="新密码" tabindex="3" autocomplete="on">
+            <el-input v-model="resetForm.newPassword" type="password" placeholder="新密码" tabindex="3" autocomplete="on" show-password>
               <template #prefix>
                 <el-icon>
                   <svg-icon name="ep:lock" />
                 </el-icon>
               </template>
-              <template #suffix>
-                <el-icon>
-                  <svg-icon :name="passwordType === 'password' ? 'ep:hide' : 'ep:view'" @click="showPassword(resetNewPasswordRef)" />
-                </el-icon>
-              </template>
             </el-input>
           </el-form-item>
         </div>

src/views/personal/edit.password.vue

@@ -74,13 +74,13 @@ function onSubmit() {
         <el-col :md="24" :lg="12">
           <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
             <el-form-item label="原密码" prop="password">
-              <el-input v-model="form.password" type="password" placeholder="请输入原密码" />
+              <el-input v-model="form.password" type="password" placeholder="请输入原密码" show-password />
             </el-form-item>
             <el-form-item label="新密码" prop="newpassword">
-              <el-input v-model="form.newpassword" type="password" placeholder="请输入原密码" />
+              <el-input v-model="form.newpassword" type="password" placeholder="请输入原密码" show-password />
             </el-form-item>
             <el-form-item label="确认新密码" prop="checkpassword">
-              <el-input v-model="form.checkpassword" type="password" placeholder="请输入原密码" />
+              <el-input v-model="form.checkpassword" type="password" placeholder="请输入原密码" show-password />
             </el-form-item>
           </el-form>
         </el-col>

tsconfig.json

@@ -19,6 +19,9 @@
     "paths": {
       "@/*": [
         "src/*"
+      ],
+      "#/*": [
+        "src/types/*"
       ]
     },
     "types": [

vite.config.ts

@@ -53,6 +53,7 @@ export default ({ mode, command }) => {
     resolve: {
       alias: {
         '@': path.resolve(__dirname, 'src'),
+        '#': path.resolve(__dirname, 'src/types'),
       },
     },
     css: {

vite/plugins/auto-import.ts

@@ -7,7 +7,7 @@ export default function createAutoImport() {
       'vue-router',
       'pinia',
     ],
-    dts: 'src/auto-imports.d.ts',
+    dts: './src/types/auto-imports.d.ts',
     dirs: [
       './src/utils/composables/**',
     ],

vite/plugins/components.ts

@@ -4,6 +4,6 @@ export default function createComponents() {
   return components({
     dirs: ['src/components'],
     include: [/\.vue$/, /\.vue\?vue/, /\.tsx$/],
-    dts: 'src/components.d.ts',
+    dts: './src/types/components.d.ts',
   })
 }

vite/plugins/html.ts

@@ -1,70 +0,0 @@
-import { createHtmlPlugin } from 'vite-plugin-html'
-
-export default function createHtml(env, isBuild) {
-  const { VITE_APP_TITLE, VITE_APP_DEBUG_TOOL } = env
-  let copyrightScript = ''
-  if (isBuild) {
-    const copyright_common_style = 'font-size: 14px; margin-bottom: 2px; padding: 6px 8px; color: #fff;'
-    const copyright_main_style = `${copyright_common_style} background: #e24329;`
-    const copyright_sub_style = `${copyright_common_style} background: #707070;`
-    copyrightScript += `
-<script>
-if ((navigator.language || navigator.browserLanguage).toLowerCase() === 'zh-cn') {
-  console.info('%c由%cFantastic-admin%c驱动', '${copyright_sub_style}', '${copyright_main_style}', '${copyright_sub_style}', '\\nhttps://gitee.com/hooray/fantastic-admin');
-} else {
-  console.info('%cPowered by%cFantastic-admin', '${copyright_sub_style}', '${copyright_main_style}', '\\nhttps://github.com/hooray/fantastic-admin');
-}
-</script>
-    `
-  }
-  let devtoolScript = ''
-  switch (VITE_APP_DEBUG_TOOL) {
-    case 'eruda':
-      devtoolScript = `
-<script src="//unpkg.com/eruda/eruda.js"></script>
-<script>
-  eruda.init()
-</script>
-      `
-      break
-    case 'vconsole':
-      devtoolScript = `
-<script src="//unpkg.com/vconsole/dist/vconsole.min.js"></script>
-<script>
-  new VConsole()
-</script>
-      `
-      break
-  }
-  const loadingScript = `
-<script>
-(function(){
-  if(!!window.ActiveXObject || "ActiveXObject" in window) {
-    document.getElementById('browser-upgrade').style.display = 'block'
-  } else {
-    var Loading = document.querySelector('.loading')
-    Loading.classList.add('animate')
-    Loading.addEventListener('animationend', function() {
-      setTimeout(function() {
-        Loading.classList.remove('animate')
-      }, 600)
-      setTimeout(function() {
-        Loading.classList.add('animate')
-      }, 1000)
-    })
-  }
-})()
-</script>
-  `
-  return createHtmlPlugin({
-    inject: {
-      data: {
-        title: VITE_APP_TITLE,
-        copyrightScript,
-        loadingScript,
-        devtoolScript,
-      },
-    },
-    minify: isBuild,
-  })
-}

vite/plugins/index.ts

@@ -2,7 +2,7 @@ import type { PluginOption } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 
-import createHtml from './html'
+import createInspector from './inspector'
 import createAutoImport from './auto-import'
 import createComponents from './components'
 import createSetupExtend from './setup-extend'
@@ -16,12 +16,10 @@ import createBanner from './banner'
 
 export default function createVitePlugins(viteEnv, isBuild = false) {
   const vitePlugins: (PluginOption | PluginOption[])[] = [
-    vue({
-      reactivityTransform: true,
-    }),
+    vue(),
     vueJsx(),
   ]
-  vitePlugins.push(createHtml(viteEnv, isBuild))
+  vitePlugins.push(createInspector())
   vitePlugins.push(createAutoImport())
   vitePlugins.push(createComponents())
   vitePlugins.push(createSetupExtend())

vite/plugins/inspector.ts

@@ -0,0 +1,5 @@
+import Inspector from 'vite-plugin-vue-inspector'
+
+export default function createInspector() {
+  return Inspector()
+}