chore: release v4.12.1

chore: 更新依赖
fix: 修复退出登录后Tab页不清除的问题 (#46 )
2026-10-07 01:03:40 +08:00 · 2024-12-05 10:54:29 +08:00 · 2024-12-05 10:53:11 +08:00 · 2024-11-25 18:23:30 +08:00 · 2024-11-07 23:37:53 +08:00 · 2024-10-18 16:45:04 +08:00
108 changed files with 6530 additions and 6492 deletions
@@ -6,6 +6,8 @@ VITE_APP_TITLE = Fantastic-admin 基础版
 VITE_APP_API_BASEURL = /
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
+# 是否禁用开发者工具，可防止被调试
+VITE_APP_DISABLE_DEVTOOL = false

 # 是否开启代理
 VITE_OPEN_PROXY = false
@@ -6,6 +6,8 @@ VITE_APP_TITLE = 页面标题
 VITE_APP_API_BASEURL = /
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
+# 是否禁用开发者工具，可防止被调试
+VITE_APP_DISABLE_DEVTOOL = false

 # 是否在打包时启用 Mock
 VITE_BUILD_MOCK = false
@@ -6,6 +6,8 @@ VITE_APP_TITLE = 页面标题(test)
 VITE_APP_API_BASEURL = /
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
+# 是否禁用开发者工具，可防止被调试
+VITE_APP_DISABLE_DEVTOOL = false

 # 是否在打包时启用 Mock
 VITE_BUILD_MOCK = true
@@ -15,7 +15,7 @@ jobs:

      - uses: actions/setup-node@v4
        with:
-          node-version: 20
+          node-version: 22

      - run: npx changelogithub # or changelogithub@0.12 if ensure the stable result
        env:
@@ -3,5 +3,6 @@ node_modules
 dist*
 dist-ssr
 *.local
+*.tsbuildinfo
 .eslintcache
 .stylelintcache
@@ -1 +1 @@
-20
+22
@@ -1,5 +1,5 @@
 {
-  "eslint.experimental.useFlatConfig": true,
+  "eslint.useFlatConfig": true,
  "prettier.enable": false,
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
@@ -9,6 +9,7 @@
  },
  "stylelint.validate": [
    "css",
+    "postcss",
    "scss",
    "vue"
  ],
@@ -1,5 +1,5 @@
 <p align="center">
-  <img src="https://fantastic-admin.github.io/logo.png" width="200" height="200" />
+  <img src="https://fantastic-admin.hurui.me/logo.png" width="200" height="200" />
 </p>

 <h1 align="center">Fantastic-admin</h1>
@@ -7,9 +7,9 @@
 <p align="center">一款<b>开箱即用</b>的 Vue3 中后台管理系统框架</p>

 <p align="center">
-  <a href="https://fantastic-admin.github.io" target="_blank">官网(Github)</a>
+  <a href="https://fantastic-admin.hurui.me" target="_blank">官网</a>
  <span>&nbsp;|&nbsp;</span>
-  <a href="https://fantastic-admin.pages.dev" target="_blank">官网(Cloudflare)</a>
+  <a href="https://fantastic-admin.pages.dev" target="_blank">备用地址</a>
 <p>

 <p align="center">
@@ -46,14 +46,14 @@

 <table>
  <tr>
-    <td><img src="https://fantastic-admin.github.io/preview1.png" /></td>
-    <td><img src="https://fantastic-admin.github.io/preview2.png" /></td>
-    <td><img src="https://fantastic-admin.github.io/preview3.png" /></td>
+    <td><img src="https://fantastic-admin.hurui.me/preview1.png" /></td>
+    <td><img src="https://fantastic-admin.hurui.me/preview2.png" /></td>
+    <td><img src="https://fantastic-admin.hurui.me/preview3.png" /></td>
  </tr>
  <tr>
-    <td><img src="https://fantastic-admin.github.io/preview4.png" /></td>
-    <td><img src="https://fantastic-admin.github.io/preview5.png" /></td>
-    <td><img src="https://fantastic-admin.github.io/preview6.png" /></td>
+    <td><img src="https://fantastic-admin.hurui.me/preview4.png" /></td>
+    <td><img src="https://fantastic-admin.hurui.me/preview5.png" /></td>
+    <td><img src="https://fantastic-admin.hurui.me/preview6.png" /></td>
  </tr>
 </table>

@@ -89,7 +89,7 @@
 <table>
  <tr>
    <th colspan="3" align="center">
-      <a href="https://one-step-admin.github.io" target="_blank">One-step-admin</a>
+      <a href="https://one-step-admin.hurui.me" target="_blank">One-step-admin</a>
    </th>
  </tr>
  <tr>
@@ -98,13 +98,32 @@
    </th>
  </tr>
  <tr>
-    <td><img src="https://one-step-admin.github.io/preview1.png" /></td>
-    <td><img src="https://one-step-admin.github.io/preview2.png" /></td>
-    <td><img src="https://one-step-admin.github.io/preview3.png" /></td>
+    <td><img src="https://one-step-admin.hurui.me/preview1.png" /></td>
+    <td><img src="https://one-step-admin.hurui.me/preview2.png" /></td>
+    <td><img src="https://one-step-admin.hurui.me/preview3.png" /></td>
  </tr>
  <tr>
-    <td><img src="https://one-step-admin.github.io/preview4.png" /></td>
-    <td><img src="https://one-step-admin.github.io/preview5.png" /></td>
-    <td><img src="https://one-step-admin.github.io/preview6.png" /></td>
+    <td><img src="https://one-step-admin.hurui.me/preview4.png" /></td>
+    <td><img src="https://one-step-admin.hurui.me/preview5.png" /></td>
+    <td><img src="https://one-step-admin.hurui.me/preview6.png" /></td>
+  </tr>
+</table>
+
+<table>
+  <tr>
+    <th colspan="4" align="center">
+      <a href="https://fantastic-mobile.hurui.me" target="_blank">Fantastic-mobile</a>
+    </th>
+  </tr>
+  <tr>
+    <th colspan="4" align="center">
+      一款自成一派的移动端 H5 框架
+    </th>
+  </tr>
+  <tr>
+    <td><img src="https://fantastic-mobile.hurui.me/preview1.png" /></td>
+    <td><img src="https://fantastic-mobile.hurui.me/preview2.png" /></td>
+    <td><img src="https://fantastic-mobile.hurui.me/preview3.png" /></td>
+    <td><img src="https://fantastic-mobile.hurui.me/preview4.png" /></td>
  </tr>
 </table>
@@ -12,7 +12,10 @@ export default antfu(
    rules: {
      'eslint-comments/no-unlimited-disable': 'off',
      'curly': ['error', 'all'],
-      'antfu/consistent-list-newline': 'off',
+      'ts/no-unused-expressions': ['error', {
+        allowShortCircuit: true,
+        allowTernary: true,
+      }],
    },
  },
  {
@@ -3,7 +3,6 @@
  <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" />
    <meta http-equiv="Expires" content="0">
@@ -14,21 +13,12 @@
  </head>
  <body>
    <div id="app">
-      <div class="fantastic-admin-home">
-        <div class="loading">
-          <div class="square"></div>
-          <div class="square"></div>
-          <div class="square"></div>
-          <div class="square"></div>
-        </div>
-        <div class="text">载入中</div>
-      </div>
      <div id="browser-upgrade">
        <div class="title">为了您的体验，推荐使用以下浏览器</div>
        <div class="browsers">
          <a href="https://www.microsoft.com/edge" target="_blank" class="browser">
            <img class="browser-icon" src="/browser_upgrade/edge.png" />
-            <div class="browser-name">Mircosoft Edge</div>
+            <div class="browser-name">Microsoft Edge</div>
          </a>
          <a href="https://www.google.cn/chrome/" target="_blank" class="browser">
            <img class="browser-icon" src="/browser_upgrade/chrome.png" />
@@ -0,0 +1,197 @@
+<style>
+@keyframes rainbow {
+  0% { --rainbow-color: #00a98e; }
+  1.25% { --rainbow-color: #00a996; }
+  2.5% { --rainbow-color: #00a99f; }
+  3.75% { --rainbow-color: #00a9a7; }
+  5% { --rainbow-color: #00a9b0; }
+  6.25% { --rainbow-color: #00a9b8; }
+  7.5% { --rainbow-color: #00a9c0; }
+  8.75% { --rainbow-color: #00a8c7; }
+  10% { --rainbow-color: #00a8cf; }
+  11.25% { --rainbow-color: #00a7d5; }
+  12.5% { --rainbow-color: #00a6dc; }
+  13.75% { --rainbow-color: #00a6e2; }
+  15% { --rainbow-color: #00a4e7; }
+  16.25% { --rainbow-color: #00a3ec; }
+  17.5% { --rainbow-color: #00a2f1; }
+  18.75% { --rainbow-color: #00a0f4; }
+  20% { --rainbow-color: #009ff7; }
+  21.25% { --rainbow-color: #009dfa; }
+  22.5% { --rainbow-color: #009bfc; }
+  23.75% { --rainbow-color: #0098fd; }
+  25% { --rainbow-color: #0096fd; }
+  26.25% { --rainbow-color: #0093fd; }
+  27.5% { --rainbow-color: #2e90fc; }
+  28.75% { --rainbow-color: #4d8dfa; }
+  30% { --rainbow-color: #638af8; }
+  31.25% { --rainbow-color: #7587f5; }
+  32.5% { --rainbow-color: #8583f1; }
+  33.75% { --rainbow-color: #9280ed; }
+  35% { --rainbow-color: #9f7ce9; }
+  36.25% { --rainbow-color: #aa78e3; }
+  37.5% { --rainbow-color: #b574dd; }
+  38.75% { --rainbow-color: #be71d7; }
+  40% { --rainbow-color: #c76dd1; }
+  41.25% { --rainbow-color: #cf69c9; }
+  42.5% { --rainbow-color: #d566c2; }
+  43.75% { --rainbow-color: #dc63ba; }
+  45% { --rainbow-color: #e160b3; }
+  46.25% { --rainbow-color: #e65eab; }
+  47.5% { --rainbow-color: #e95ca2; }
+  48.75% { --rainbow-color: #ed5a9a; }
+  50% { --rainbow-color: #ef5992; }
+  51.25% { --rainbow-color: #f15989; }
+  52.5% { --rainbow-color: #f25981; }
+  53.75% { --rainbow-color: #f25a79; }
+  55% { --rainbow-color: #f25c71; }
+  56.25% { --rainbow-color: #f15e69; }
+  57.5% { --rainbow-color: #ef6061; }
+  58.75% { --rainbow-color: #ed635a; }
+  60% { --rainbow-color: #eb6552; }
+  61.25% { --rainbow-color: #e8694b; }
+  62.5% { --rainbow-color: #e46c44; }
+  63.75% { --rainbow-color: #e06f3d; }
+  65% { --rainbow-color: #db7336; }
+  66.25% { --rainbow-color: #d77630; }
+  67.5% { --rainbow-color: #d17a2a; }
+  68.75% { --rainbow-color: #cc7d24; }
+  70% { --rainbow-color: #c6811e; }
+  71.25% { --rainbow-color: #bf8418; }
+  72.5% { --rainbow-color: #b98713; }
+  73.75% { --rainbow-color: #b28a0f; }
+  75% { --rainbow-color: #ab8d0c; }
+  76.25% { --rainbow-color: #a3900b; }
+  77.5% { --rainbow-color: #9c920d; }
+  78.75% { --rainbow-color: #949510; }
+  80% { --rainbow-color: #8b9715; }
+  81.25% { --rainbow-color: #83991b; }
+  82.5% { --rainbow-color: #7a9b21; }
+  83.75% { --rainbow-color: #719d27; }
+  85% { --rainbow-color: #679e2e; }
+  86.25% { --rainbow-color: #5da035; }
+  87.5% { --rainbow-color: #51a13c; }
+  88.75% { --rainbow-color: #44a244; }
+  90% { --rainbow-color: #34a44b; }
+  91.25% { --rainbow-color: #1ba553; }
+  92.5% { --rainbow-color: #00a65b; }
+  93.75% { --rainbow-color: #00a663; }
+  95% { --rainbow-color: #00a76c; }
+  96.25% { --rainbow-color: #00a874; }
+  97.5% { --rainbow-color: #00a87d; }
+  98.75% { --rainbow-color: #00a985; }
+  100% { --rainbow-color: #00a98e; }
+}
+
+:root {
+  --rainbow-color: #00a98e;
+  animation: rainbow 20s linear infinite;
+}
+
+.loading-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 10000;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: var(--rainbow-color);
+  user-select: none;
+  background-color: snow;
+}
+
+.loading-container .loading {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+}
+
+.loading-container .loading .square {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+}
+
+.loading-container .loading .square::before {
+  width: 10px;
+  height: 10px;
+  content: "";
+  border: 3px solid var(--rainbow-color);
+  border-radius: 15%;
+  animation: square-to-dot-animation 2s linear infinite;
+}
+
+.loading-container .loading .square:nth-child(1)::before {
+  animation-delay: calc(150ms * 1);
+}
+
+.loading-container .loading .square:nth-child(2)::before {
+  animation-delay: calc(150ms * 2);
+}
+
+.loading-container .loading .square:nth-child(3)::before {
+  animation-delay: calc(150ms * 3);
+}
+
+.loading-container .loading .square:nth-child(4)::before {
+  animation-delay: calc(150ms * 4);
+}
+
+@keyframes square-to-dot-animation {
+  15%,
+  25% {
+    width: 0;
+    height: 0;
+    margin: 5px;
+    border-width: 5px;
+    border-radius: 100%;
+  }
+
+  40% {
+    width: 10px;
+    height: 10px;
+    margin: initial;
+    border-width: 3px;
+    border-radius: 15%;
+  }
+}
+
+.loading-container .name {
+  position: relative;
+  margin-top: 20px;
+  font-size: 24px;
+}
+
+.loading-container .tips {
+  position: relative;
+  margin-top: 10px;
+  font-size: 16px;
+  opacity: 0.5;
+}
+
+.loading-container .tips::after {
+  position: absolute;
+  padding-left: 5px;
+  content: "…";
+}
+</style>
+
+<div class="loading-container">
+  <div class="loading">
+    <div class="square"></div>
+    <div class="square"></div>
+    <div class="square"></div>
+    <div class="square"></div>
+  </div>
+  <div class="name">%VITE_APP_TITLE%</div>
+  <div class="tips">载入中</div>
+</div>
@@ -1,20 +1,20 @@
 {
  "type": "module",
-  "version": "4.8.2",
+  "version": "4.12.1",
  "engines": {
    "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
  },
  "scripts": {
    "dev": "vite",
-    "build": "vue-tsc && vite build",
-    "build:test": "vue-tsc && vite build --mode test",
+    "build": "vue-tsc -b && vite build",
+    "build:test": "vue-tsc -b && vite build --mode test",
    "serve": "http-server ./dist -o",
    "serve:test": "http-server ./dist-test -o",
    "svgo": "svgo -f src/assets/icons",
    "new": "plop",
    "generate:icons": "esno ./scripts/generate.icons.ts",
    "lint": "npm-run-all -s lint:tsc lint:eslint lint:stylelint",
-    "lint:tsc": "vue-tsc",
+    "lint:tsc": "vue-tsc -b",
    "lint:eslint": "eslint . --cache --fix",
    "lint:stylelint": "stylelint \"src/**/*.{css,scss,vue}\" --cache --fix",
    "postinstall": "simple-git-hooks",
@@ -23,84 +23,89 @@
    "release": "bumpp"
  },
  "dependencies": {
-    "@headlessui/vue": "^1.7.22",
-    "@imengyu/vue3-context-menu": "^1.4.1",
-    "@vueuse/core": "^10.10.0",
-    "@vueuse/integrations": "^10.10.0",
-    "axios": "^1.7.2",
-    "dayjs": "^1.11.11",
+    "@headlessui/vue": "^1.7.23",
+    "@imengyu/vue3-context-menu": "^1.4.3",
+    "@vueuse/components": "^12.0.0",
+    "@vueuse/core": "^12.0.0",
+    "@vueuse/integrations": "^12.0.0",
+    "axios": "^1.7.9",
+    "dayjs": "^1.11.13",
    "defu": "^6.1.4",
-    "element-plus": "^2.7.4",
-    "eruda": "^3.0.1",
+    "disable-devtool": "^0.3.8",
+    "element-plus": "^2.9.0",
+    "eruda": "^3.4.1",
    "floating-vue": "5.2.2",
    "hotkeys-js": "^3.13.7",
    "lodash-es": "^4.17.21",
    "mitt": "^3.0.1",
    "mockjs": "^1.1.0",
    "nprogress": "^0.2.0",
-    "overlayscrollbars": "^2.8.3",
+    "overlayscrollbars": "^2.10.1",
    "overlayscrollbars-vue": "^0.5.9",
    "path-browserify": "^1.0.1",
-    "path-to-regexp": "^6.2.2",
-    "pinia": "^2.1.7",
-    "qs": "^6.12.1",
+    "path-to-regexp": "^8.2.0",
+    "pinia": "^2.3.0",
+    "qs": "^6.13.1",
    "scule": "^1.3.0",
    "vconsole": "^3.15.1",
-    "vue": "^3.4.27",
+    "vue": "^3.5.13",
    "vue-m-message": "^4.0.2",
-    "vue-router": "^4.3.2"
+    "vue-router": "^4.5.0"
  },
  "devDependencies": {
-    "@antfu/eslint-config": "2.20.0",
-    "@iconify/json": "^2.2.217",
+    "@antfu/eslint-config": "3.11.2",
+    "@iconify/json": "^2.2.279",
    "@iconify/vue": "^4.1.2",
-    "@stylistic/stylelint-config": "^1.0.1",
+    "@stylistic/stylelint-config": "^2.0.0",
    "@types/lodash-es": "^4.17.12",
    "@types/mockjs": "^1.0.10",
    "@types/nprogress": "^0.2.3",
-    "@types/path-browserify": "^1.0.2",
-    "@types/qs": "^6.9.15",
-    "@unocss/eslint-plugin": "^0.60.4",
-    "@vitejs/plugin-legacy": "^5.4.1",
-    "@vitejs/plugin-vue": "^5.0.5",
-    "@vitejs/plugin-vue-jsx": "^4.0.0",
-    "archiver": "^7.0.1",
-    "autoprefixer": "^10.4.19",
-    "boxen": "^7.1.1",
-    "bumpp": "^9.4.1",
-    "cz-git": "^1.9.2",
-    "eslint": "^9.4.0",
-    "esno": "^4.7.0",
+    "@types/path-browserify": "^1.0.3",
+    "@types/qs": "^6.9.17",
+    "@unocss/eslint-plugin": "^0.65.1",
+    "@vitejs/plugin-legacy": "^6.0.0",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitejs/plugin-vue-jsx": "^4.1.1",
+    "autoprefixer": "^10.4.20",
+    "boxen": "^8.0.1",
+    "bumpp": "^9.8.1",
+    "cz-git": "^1.11.0",
+    "eslint": "^9.16.0",
+    "esno": "^4.8.0",
    "fs-extra": "^11.2.0",
    "http-server": "^14.1.1",
-    "inquirer": "^9.2.23",
-    "lint-staged": "^15.2.5",
-    "npm-run-all2": "^6.2.0",
-    "picocolors": "^1.0.1",
+    "inquirer": "^12.1.0",
+    "lint-staged": "^15.2.10",
+    "npm-run-all2": "^7.0.1",
+    "picocolors": "^1.1.1",
    "plop": "^4.0.1",
-    "postcss": "^8.4.38",
-    "sass": "^1.77.4",
+    "postcss": "^8.4.49",
+    "postcss-nested": "^7.0.2",
+    "sass-embedded": "^1.82.0",
    "simple-git-hooks": "^2.11.1",
-    "stylelint": "^16.6.1",
-    "stylelint-config-recess-order": "^5.0.1",
-    "stylelint-config-standard-scss": "^13.1.0",
+    "stylelint": "^16.11.0",
+    "stylelint-config-recess-order": "^5.1.1",
+    "stylelint-config-standard-scss": "^14.0.0",
    "stylelint-config-standard-vue": "^1.0.0",
-    "stylelint-scss": "^6.3.1",
+    "stylelint-scss": "^6.10.0",
    "svgo": "^3.3.2",
-    "typescript": "^5.4.5",
-    "unocss": "^0.60.4",
-    "unplugin-auto-import": "^0.17.6",
-    "unplugin-turbo-console": "^1.8.6",
-    "unplugin-vue-components": "^0.27.0",
-    "vite": "^5.2.12",
-    "vite-plugin-banner": "^0.7.1",
-    "vite-plugin-compression2": "^1.1.1",
-    "vite-plugin-fake-server": "^2.1.1",
-    "vite-plugin-pages": "^0.32.2",
+    "typescript": "^5.6.3",
+    "unocss": "^0.65.1",
+    "unocss-preset-scrollbar": "^0.3.1",
+    "unplugin-auto-import": "^0.18.6",
+    "unplugin-turbo-console": "^1.10.6",
+    "unplugin-vue-components": "^0.27.5",
+    "vite": "^6.0.2",
+    "vite-plugin-app-loading": "^0.3.0",
+    "vite-plugin-archiver": "^0.1.1",
+    "vite-plugin-banner": "^0.8.0",
+    "vite-plugin-compression2": "^1.3.3",
+    "vite-plugin-fake-server": "^2.1.3",
+    "vite-plugin-pages": "^0.32.4",
    "vite-plugin-svg-icons": "^2.0.1",
-    "vite-plugin-vue-devtools": "^7.2.1",
-    "vite-plugin-vue-meta-layouts": "^0.4.3",
-    "vue-tsc": "^2.0.19"
+    "vite-plugin-vue-devtools": "^7.6.7",
+    "vite-plugin-vue-meta-layouts": "^0.5.1",
+    "vue-tsc": "^2.1.10"
  },
  "simple-git-hooks": {
    "pre-commit": "pnpm lint-staged",
@@ -12,6 +12,6 @@ defineOptions({
  </div>
 </template>

-<style lang="scss" scoped>
-// 样式
+<style scoped>
+/* 样式 */
 </style>
@@ -1,5 +1,5 @@
-import path from 'node:path'
 import fs from 'node:fs'
+import path from 'node:path'

 function getFolder(path) {
  const components = []
@@ -17,6 +17,6 @@ defineOptions({
  </div>
 </template>

-<style lang="scss" scoped>
-// 样式
+<style scoped>
+/* 样式 */
 </style>
@@ -1,5 +1,5 @@
-import path from 'node:path'
 import fs from 'node:fs'
+import path from 'node:path'

 function getFolder(path) {
  const components = []
@@ -1,5 +1,6 @@
 export default {
  plugins: {
-    autoprefixer: {},
+    'autoprefixer': {},
+    'postcss-nested': {},
  },
 }
@@ -1,92 +0,0 @@
-#app {
-  height: 100%;
-}
-
-.fantastic-admin-home {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 10000;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  color: #736477;
-  user-select: none;
-  background-color: snow;
-}
-
-.fantastic-admin-home .loading {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-}
-
-.fantastic-admin-home .loading .square {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-}
-
-.fantastic-admin-home .loading .square::before {
-  width: 10px;
-  height: 10px;
-  content: "";
-  border: 3px solid #8c858f;
-  border-radius: 15%;
-  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% {
-    width: 0;
-    height: 0;
-    margin: 5px;
-    border-width: 5px;
-    border-radius: 100%;
-  }
-
-  40% {
-    width: 10px;
-    height: 10px;
-    margin: initial;
-    border-width: 3px;
-    border-radius: 15%;
-  }
-}
-
-.fantastic-admin-home .text {
-  position: relative;
-  margin-top: 20px;
-  font-size: 24px;
-}
-
-.fantastic-admin-home .text::after {
-  position: absolute;
-  padding-left: 5px;
-  content: "…";
-}
@@ -1,9 +1,9 @@
+import { exec } from 'node:child_process'
 import path from 'node:path'
 import process from 'node:process'
-import { exec } from 'node:child_process'
+import { lookupCollection, lookupCollections } from '@iconify/json'
 import fs from 'fs-extra'
 import inquirer from 'inquirer'
-import { lookupCollection, lookupCollections } from '@iconify/json'

 async function generateIcons() {
  // 拿到全部图标集的原始数据
@@ -1,10 +1,8 @@
 <script setup lang="ts">
-import eruda from 'eruda'
-import VConsole from 'vconsole'
-import hotkeys from 'hotkeys-js'
-import eventBus from './utils/eventBus'
-import Provider from './ui-provider/index.vue'
 import useSettingsStore from '@/store/modules/settings'
+import hotkeys from 'hotkeys-js'
+import Provider from './ui-provider/index.vue'
+import eventBus from './utils/eventBus'

 const route = useRoute()

@@ -17,24 +15,6 @@ const isAuth = computed(() => {
  })
 })

-// 侧边栏主导航当前实际宽度
-const mainSidebarActualWidth = computed(() => {
-  let actualWidth = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--g-main-sidebar-width'))
-  if (settingsStore.settings.menu.menuMode === 'single' || (settingsStore.settings.menu.menuMode === 'head' && settingsStore.mode !== 'mobile')) {
-    actualWidth = 0
-  }
-  return `${actualWidth}px`
-})
-
-// 侧边栏次导航当前实际宽度
-const subSidebarActualWidth = computed(() => {
-  let actualWidth = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--g-sub-sidebar-width'))
-  if (settingsStore.settings.menu.subMenuCollapse && settingsStore.mode !== 'mobile') {
-    actualWidth = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--g-sub-sidebar-collapse-width'))
-  }
-  return `${actualWidth}px`
-})
-
 // 设置网页 title
 watch([
  () => settingsStore.settings.app.enableDynamicTitle,
@@ -61,20 +41,11 @@ 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>
  <Provider>
-    <RouterView
-      v-slot="{ Component }"
-      :style="{
-        '--g-main-sidebar-actual-width': mainSidebarActualWidth,
-        '--g-sub-sidebar-actual-width': subSidebarActualWidth,
-      }"
-    >
+    <RouterView v-slot="{ Component }">
      <component :is="Component" v-if="isAuth" />
      <NotAllowed v-else />
    </RouterView>
@@ -1,8 +1,8 @@
-import axios from 'axios'
+import useUserStore from '@/store/modules/user'

+import axios from 'axios'
 // import qs from 'qs'
 import Message from 'vue-m-message'
-import useUserStore from '@/store/modules/user'

 const api = axios.create({
  baseURL: (import.meta.env.DEV && import.meta.env.VITE_OPEN_PROXY === 'true') ? '/proxy/' : import.meta.env.VITE_APP_API_BASEURL,
@@ -1,22 +1,28 @@
-// 页面布局 CSS 变量
+/* 页面布局 CSS 变量 */
 :root {
-  // 头部高度
+  /* 头部高度 */
  --g-header-height: 60px;
-  // 侧边栏宽度
+
+  /* 侧边栏宽度 */
  --g-main-sidebar-width: 80px;
  --g-sub-sidebar-width: 220px;
  --g-sub-sidebar-collapse-width: 64px;
-  // 侧边栏 Logo 区域高度
+
+  /* 侧边栏 Logo 区域高度 */
  --g-sidebar-logo-height: 50px;
-  // 标签栏高度
+
+  /* 标签栏高度 */
  --g-tabbar-height: 50px;
-  // 工具栏高度
+
+  /* 工具栏高度 */
  --g-toolbar-height: 50px;
 }

-// 明暗模式 CSS 变量
+/* 明暗模式 CSS 变量 */
 /* stylelint-disable-next-line no-duplicate-selectors */
 :root {
+  --g-box-shadow-color: rgb(0 0 0 / 12%);
+
  &::view-transition-old(root),
  &::view-transition-new(root) {
    mix-blend-mode: normal;
@@ -31,9 +37,9 @@
    z-index: 9999;
  }

-  --g-box-shadow-color: rgb(0 0 0 / 12%);
-
  &.dark {
+    --g-box-shadow-color: rgb(0 0 0 / 72%);
+
    &::view-transition-old(root) {
      z-index: 9999;
    }
@@ -41,8 +47,6 @@
    &::view-transition-new(root) {
      z-index: 1;
    }
-
-    --g-box-shadow-color: rgb(0 0 0 / 72%);
  }
 }

@@ -87,22 +91,25 @@ body {
  box-sizing: inherit;
 }

-// 右侧内容区针对fixed元素，有横向铺满的需求，可在fixed元素上设置 [data-fixed-calc-width]
+#app {
+  height: 100%;
+}
+
+/* 右侧内容区针对fixed元素，有横向铺满的需求，可在fixed元素上设置 [data-fixed-calc-width] */
 [data-fixed-calc-width] {
  position: fixed;
  right: 0;
  left: 50%;
  width: calc(100% - var(--g-main-sidebar-actual-width) - var(--g-sub-sidebar-actual-width));
  transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
-}

-[data-mode="mobile"] {
-  [data-fixed-calc-width] {
+  [data-mode="mobile"] & {
    width: 100% !important;
    transform: translateX(-50%) !important;
  }
 }
-// textarea 字体跟随系统
+
+/* textarea 字体跟随系统 */
 textarea {
  font-family: inherit;
 }
@@ -110,12 +117,12 @@ textarea {
 /* Overrides Floating Vue */
 .v-popper--theme-dropdown,
 .v-popper--theme-tooltip {
-  --at-apply: inline-flex;
+  --uno: inline-flex;
 }

 .v-popper--theme-dropdown .v-popper__inner,
 .v-popper--theme-tooltip .v-popper__inner {
-  --at-apply: bg-white dark-bg-stone-8 text-dark dark-text-white rounded shadow ring-1 ring-gray-200 dark-ring-gray-800 border border-solid border-stone/20 text-xs font-normal;
+  --uno: bg-white dark-bg-stone-8 text-dark dark-text-white rounded shadow ring-1 ring-gray-200 dark-ring-gray-800 border border-solid border-stone/20 text-xs font-normal;

  box-shadow: 0 6px 30px rgb(0 0 0 / 10%);
 }
@@ -124,12 +131,12 @@ textarea {
 .v-popper--theme-dropdown .v-popper__arrow-inner {
  visibility: visible;

-  --at-apply: border-white dark-border-stone-8;
+  --uno: border-white dark-border-stone-8;
 }

 .v-popper--theme-tooltip .v-popper__arrow-outer,
 .v-popper--theme-dropdown .v-popper__arrow-outer {
-  --at-apply: border-stone/20;
+  --uno: border-stone/20;
 }

 .v-popper--theme-tooltip.v-popper--shown,
@@ -7,9 +7,9 @@
  } @else {
    /* stylelint-disable-next-line value-no-vendor-prefix */
    display: -webkit-box;
+    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $line;
-    overflow: hidden;
  }
 }

@@ -5,16 +5,19 @@ defineOptions({

 const props = defineProps<{
  value: string | string[]
+  all?: boolean
 }>()

+const auth = useAuth()
+
 function check() {
-  return useAuth().auth(props.value)
+  return props.all
+    ? auth.authAll(typeof props.value === 'string' ? [props.value] : props.value)
+    : auth.auth(props.value)
 }
 </script>

 <template>
-  <div>
-    <slot v-if="check()" />
-    <slot v-else name="no-auth" />
-  </div>
+  <slot v-if="check()" />
+  <slot v-else name="no-auth" />
 </template>
@@ -1,20 +0,0 @@
-<script setup lang="ts">
-defineOptions({
-  name: 'AuthAll',
-})
-
-const props = defineProps<{
-  value: string[]
-}>()
-
-function check() {
-  return useAuth().authAll(props.value)
-}
-</script>
-
-<template>
-  <div>
-    <slot v-if="check()" />
-    <slot v-else name="no-auth" />
-  </div>
-</template>
@@ -17,6 +17,7 @@ const props = withDefaults(
    files?: UploadUserFile[]
    notip?: boolean
    ext?: string[]
+    httpRequest?: UploadProps['httpRequest']
  }>(),
  {
    name: 'file',
@@ -57,6 +58,29 @@ const onExceed: UploadProps['onExceed'] = () => {
 const onSuccess: UploadProps['onSuccess'] = (res, file, fileList) => {
  emits('onSuccess', res, file, fileList)
 }
+
+const onPreview: UploadProps['onPreview'] = (e) => {
+  const getBlob = (url: string) => new Promise((resolve) => {
+    const xhr = new XMLHttpRequest()
+    xhr.open('GET', url, true)
+    xhr.responseType = 'blob'
+    xhr.onload = () => {
+      if (xhr.status === 200) {
+        resolve(xhr.response)
+      }
+    }
+    xhr.send()
+  })
+  getBlob(e.url!).then((blob: any) => {
+    const a = document.createElement('a')
+    const url = window.URL.createObjectURL(blob)
+    const event = new MouseEvent('click')
+    a.target = '_blank'
+    a.download = e.name
+    a.href = url
+    a.dispatchEvent(event)
+  })
+}
 </script>

 <template>
@@ -68,6 +92,8 @@ const onSuccess: UploadProps['onSuccess'] = (res, file, fileList) => {
    :before-upload="beforeUpload"
    :on-exceed="onExceed"
    :on-success="onSuccess"
+    :on-preview="onPreview"
+    :http-request="httpRequest"
    :file-list="files"
    :limit="max"
    drag
@@ -88,7 +114,7 @@ const onSuccess: UploadProps['onSuccess'] = (res, file, fileList) => {
  </ElUpload>
 </template>

-<style lang="scss" scoped>
+<style scoped>
 :deep(.el-upload.is-drag) {
  display: inline-block;

@@ -34,7 +34,7 @@ function onScroll() {
  </div>
 </template>

-<style lang="scss" scoped>
+<style scoped>
 .fixed-action-bar {
  box-shadow: 0 0 1px 0 var(--g-box-shadow-color);

@@ -34,7 +34,7 @@ const realHeight = computed(() => {
  </ElImage>
 </template>

-<style lang="scss" scoped>
+<style scoped>
 .el-image {
  background-color: var(--el-fill-color);
  border-radius: 5px;
@@ -18,6 +18,7 @@ const props = withDefaults(
    placeholder?: string
    notip?: boolean
    ext?: string[]
+    httpRequest?: UploadProps['httpRequest']
  }>(),
  {
    name: 'file',
@@ -97,6 +98,7 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
      :before-upload="beforeUpload"
      :on-progress="onProgress"
      :on-success="onSuccess"
+      :http-request="httpRequest"
      drag
      class="image-upload"
    >
@@ -134,7 +136,7 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
  </div>
 </template>

-<style lang="scss" scoped>
+<style scoped>
 .upload-container {
  line-height: initial;
 }
@@ -158,14 +160,16 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
    transition: opacity 0.3s;

    .actions {
+      position: absolute;
+      top: 50%;
+      left: 50%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      width: 100px;
      height: 100px;
-
-      @include position-center(xy);
+      transform: translateX(-50%) translateY(-50%);

      span {
        width: 50%;
@@ -233,9 +237,11 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
      }

      .el-progress {
+        position: absolute;
+        top: 50%;
+        left: 50%;
        z-index: 1;
-
-        @include position-center(xy);
+        transform: translateX(-50%) translateY(-50%);

        .el-progress__text {
          color: var(--el-text-color-placeholder);
@@ -19,6 +19,7 @@ const props = withDefaults(
    placeholder?: string
    notip?: boolean
    ext?: string[]
+    httpRequest?: UploadProps['httpRequest']
  }>(),
  {
    name: 'file',
@@ -131,6 +132,7 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
      :before-upload="beforeUpload"
      :on-progress="onProgress"
      :on-success="onSuccess"
+      :http-request="httpRequest"
      drag
      class="images-upload"
    >
@@ -151,7 +153,7 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
  </div>
 </template>

-<style lang="scss" scoped>
+<style scoped>
 .upload-container {
  line-height: initial;
 }
@@ -178,14 +180,16 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
    transition: opacity 0.3s;

    .actions {
+      position: absolute;
+      top: 50%;
+      left: 50%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      width: 100px;
      height: 100px;
-
-      @include position-center(xy);
+      transform: translateX(-50%) translateY(-50%);

      span {
        width: 50%;
@@ -258,9 +262,11 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
      }

      .el-progress {
+        position: absolute;
+        top: 50%;
+        left: 50%;
        z-index: 1;
-
-        @include position-center(xy);
+        transform: translateX(-50%) translateY(-50%);

        .el-progress__text {
          color: var(--el-text-color-placeholder);
@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import type { FormInstance, FormRules } from 'element-plus'
+import useUserStore from '@/store/modules/user'
+
+defineOptions({
+  name: 'LoginForm',
+})
+
+const props = defineProps<{
+  account?: string
+}>()
+
+const emits = defineEmits<{
+  onLogin: [account: string]
+  onRegister: [account: string]
+  onResetPassword: [account: string]
+}>()
+
+const userStore = useUserStore()
+
+const title = import.meta.env.VITE_APP_TITLE
+const loading = ref(false)
+
+// 登录方式，default 账号密码登录，qrcode 扫码登录
+const type = ref('default')
+const formRef = useTemplateRef<FormInstance>('formRef')
+const form = ref({
+  account: props.account ?? localStorage.login_account ?? '',
+  password: '',
+  remember: !!localStorage.login_account,
+})
+const rules = ref<FormRules>({
+  account: [
+    { required: true, trigger: 'blur', message: '请输入用户名' },
+  ],
+  password: [
+    { required: true, trigger: 'blur', message: '请输入密码' },
+    { min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' },
+  ],
+})
+function handleLogin() {
+  formRef.value?.validate((valid) => {
+    if (valid) {
+      loading.value = true
+      userStore.login(form.value).then(() => {
+        if (form.value.remember) {
+          localStorage.setItem('login_account', form.value.account)
+        }
+        else {
+          localStorage.removeItem('login_account')
+        }
+        emits('onLogin', form.value.account)
+      }).finally(() => {
+        loading.value = false
+      })
+    }
+  })
+}
+
+function testAccount(account: string) {
+  form.value.account = account
+  form.value.password = '123456'
+  handleLogin()
+}
+</script>
+
+<template>
+  <ElForm ref="formRef" :model="form" :rules="rules" class="min-h-500px w-full flex-col-stretch-center p-12">
+    <div class="mb-6">
+      <HTabList
+        v-model="type" :options="[
+          { label: '账号密码登录', value: 'default' },
+          { label: '扫码登录', value: 'qrcode' },
+        ]"
+      />
+    </div>
+    <template v-if="type === 'default'">
+      <h3 class="mb-8 text-xl color-[var(--el-text-color-primary)] font-bold">
+        欢迎使用 {{ title }} ! 👋🏻
+      </h3>
+      <div>
+        <ElFormItem prop="account">
+          <ElInput v-model="form.account" size="large" placeholder="用户名" type="text" tabindex="1">
+            <template #prefix>
+              <SvgIcon name="i-ri:user-3-fill" />
+            </template>
+          </ElInput>
+        </ElFormItem>
+        <ElFormItem prop="password">
+          <ElInput v-model="form.password" type="password" size="large" placeholder="密码" tabindex="2" show-password @keyup.enter="handleLogin">
+            <template #prefix>
+              <SvgIcon name="i-ri:lock-2-fill" />
+            </template>
+          </ElInput>
+        </ElFormItem>
+      </div>
+      <div class="mb-4 flex-center-between">
+        <ElCheckbox v-model="form.remember">
+          记住我
+        </ElCheckbox>
+        <ElLink type="primary" :underline="false" @click="emits('onResetPassword', form.account)">
+          忘记密码了?
+        </ElLink>
+      </div>
+      <ElButton :loading="loading" type="primary" size="large" style="width: 100%;" @click.prevent="handleLogin">
+        登录
+      </ElButton>
+      <div class="mt-4 flex-center gap-2 text-sm color-[var(--el-text-color-secondary)]">
+        还没有帐号?
+        <ElLink type="primary" :underline="false" @click="emits('onRegister', form.account)">
+          创建新帐号
+        </ElLink>
+      </div>
+    </template>
+    <template v-else-if="type === 'qrcode'">
+      <div class="flex-col-center">
+        <el-image src="https://s2.loli.net/2024/04/26/GsahtuIZ9XOg5jr.png" class="h-[250px] w-[250px]" />
+        <div class="mt-2 op-50">
+          请使用微信扫码登录
+        </div>
+      </div>
+    </template>
+    <div class="mt-4 text-center -mb-4">
+      <ElDivider>演示账号一键登录</ElDivider>
+      <ElButton type="primary" size="small" plain @click="testAccount('admin')">
+        admin
+      </ElButton>
+      <ElButton size="small" plain @click="testAccount('test')">
+        test
+      </ElButton>
+    </div>
+  </ElForm>
+</template>
@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import type { FormInstance, FormRules } from 'element-plus'
+import { ElMessage } from 'element-plus'
+
+defineOptions({
+  name: 'RegisterForm',
+})
+
+const props = defineProps<{
+  account?: string
+}>()
+
+const emits = defineEmits<{
+  onLogin: [account: string]
+  onRegister: [account: string]
+}>()
+
+const loading = ref(false)
+
+const formRef = useTemplateRef<FormInstance>('formRef')
+const form = ref({
+  account: props.account ?? '',
+  captcha: '',
+  password: '',
+  checkPassword: '',
+})
+const rules = ref<FormRules>({
+  account: [
+    { required: true, trigger: 'blur', message: '请输入用户名' },
+  ],
+  captcha: [
+    { required: true, trigger: 'blur', message: () => '请输入验证码' },
+  ],
+  password: [
+    { required: true, trigger: 'blur', message: '请输入密码' },
+    { min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' },
+  ],
+  checkPassword: [
+    { required: true, trigger: 'blur', message: '请再次输入密码' },
+    {
+      validator: (_rule, value, callback) => {
+        if (value !== form.value.password) {
+          callback(new Error('两次输入的密码不一致'))
+        }
+        else {
+          callback()
+        }
+      },
+    },
+  ],
+})
+function handleRegister() {
+  ElMessage({
+    message: '注册模块仅提供界面演示，无实际功能，需开发者自行扩展',
+    type: 'warning',
+  })
+  formRef.value?.validate((valid) => {
+    if (valid) {
+      // 这里编写业务代码
+      emits('onRegister', form.value.account)
+    }
+  })
+}
+</script>
+
+<template>
+  <ElForm ref="formRef" :model="form" :rules="rules" class="min-h-500px w-full flex-col-stretch-center p-12">
+    <h3 class="mb-8 text-xl color-[var(--el-text-color-primary)] font-bold">
+      探索从这里开始! 🚀
+    </h3>
+    <div>
+      <ElFormItem prop="account">
+        <ElInput v-model="form.account" size="large" placeholder="用户名" tabindex="1">
+          <template #prefix>
+            <SvgIcon name="i-ri:user-3-fill" />
+          </template>
+        </ElInput>
+      </ElFormItem>
+      <ElFormItem prop="captcha">
+        <ElInput v-model="form.captcha" size="large" placeholder="验证码" tabindex="2">
+          <template #prefix>
+            <SvgIcon name="i-ic:baseline-verified-user" />
+          </template>
+          <template #append>
+            <ElButton>发送验证码</ElButton>
+          </template>
+        </ElInput>
+      </ElFormItem>
+      <ElFormItem prop="password">
+        <ElInput v-model="form.password" type="password" size="large" placeholder="密码" tabindex="3" show-password>
+          <template #prefix>
+            <SvgIcon name="i-ri:lock-2-fill" />
+          </template>
+        </ElInput>
+      </ElFormItem>
+      <ElFormItem prop="checkPassword">
+        <ElInput v-model="form.checkPassword" type="password" size="large" placeholder="确认密码" tabindex="4" show-password>
+          <template #prefix>
+            <SvgIcon name="i-ri:lock-2-fill" />
+          </template>
+        </ElInput>
+      </ElFormItem>
+    </div>
+    <ElButton :loading="loading" type="primary" size="large" style="width: 100%; margin-top: 20px;" @click.prevent="handleRegister">
+      注册
+    </ElButton>
+    <div class="mt-4 flex-center gap-2 text-sm color-[var(--el-text-color-secondary)]">
+      已经有帐号?
+      <ElLink type="primary" :underline="false" @click="emits('onLogin', form.account)">
+        去登录
+      </ElLink>
+    </div>
+  </ElForm>
+</template>
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import type { FormInstance, FormRules } from 'element-plus'
+import { ElMessage } from 'element-plus'
+
+defineOptions({
+  name: 'ResetPasswordForm',
+})
+
+const props = defineProps<{
+  account?: string
+}>()
+
+const emits = defineEmits<{
+  onLogin: [account: string]
+  onResetPassword: [account: string]
+}>()
+
+const loading = ref(false)
+
+const formRef = useTemplateRef<FormInstance>('formRef')
+const form = ref({
+  account: props.account ?? localStorage.login_account ?? '',
+  captcha: '',
+  newPassword: '',
+})
+const rules = ref<FormRules>({
+  account: [
+    { required: true, trigger: 'blur', message: '请输入用户名' },
+  ],
+  captcha: [
+    { required: true, trigger: 'blur', message: '请输入验证码' },
+  ],
+  newPassword: [
+    { required: true, trigger: 'blur', message: '请输入新密码' },
+    { min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' },
+  ],
+})
+function handleReset() {
+  ElMessage({
+    message: '重置密码仅提供界面演示，无实际功能，需开发者自行扩展',
+    type: 'info',
+  })
+  formRef.value?.validate((valid) => {
+    if (valid) {
+      // 这里编写业务代码
+      emits('onResetPassword', form.value.account)
+    }
+  })
+}
+</script>
+
+<template>
+  <ElForm ref="formRef" :model="form" :rules="rules" class="min-h-500px w-full flex-col-stretch-center p-12">
+    <h3 class="mb-8 text-xl color-[var(--el-text-color-primary)] font-bold">
+      忘记密码了? 🔒
+    </h3>
+    <div>
+      <ElFormItem prop="account">
+        <ElInput v-model="form.account" size="large" placeholder="用户名" type="text" tabindex="1">
+          <template #prefix>
+            <SvgIcon name="i-ri:user-3-fill" />
+          </template>
+        </ElInput>
+      </ElFormItem>
+      <ElFormItem prop="captcha">
+        <ElInput v-model="form.captcha" size="large" placeholder="验证码" type="text" tabindex="2">
+          <template #prefix>
+            <SvgIcon name="i-ic:baseline-verified-user" />
+          </template>
+          <template #append>
+            <ElButton>发送验证码</ElButton>
+          </template>
+        </ElInput>
+      </ElFormItem>
+      <ElFormItem prop="newPassword">
+        <ElInput v-model="form.newPassword" type="password" size="large" placeholder="新密码" tabindex="3" show-password>
+          <template #prefix>
+            <SvgIcon name="i-ri:lock-2-fill" />
+          </template>
+        </ElInput>
+      </ElFormItem>
+    </div>
+    <ElButton :loading="loading" type="primary" size="large" style="width: 100%; margin-top: 20px;" @click.prevent="handleReset">
+      确认
+    </ElButton>
+    <div class="mt-4 flex-center gap-2 text-sm color-[var(--el-text-color-secondary)]">
+      <ElLink type="primary" :underline="false" @click="emits('onLogin', form.account)">
+        去登录
+      </ElLink>
+    </div>
+  </ElForm>
+</template>
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
+import { UseImage } from '@vueuse/components'

 defineOptions({
  name: 'SvgIcon',
@@ -14,7 +15,10 @@ const props = defineProps<{
 }>()

 const outputType = computed(() => {
-  if (/^https?:\/\//.test(props.name)) {
+  const hasPathFeatures = (str: string) => {
+    return /^\.{1,2}\//.test(str) || str.startsWith('/') || str.includes('/')
+  }
+  if (/^https?:\/\//.test(props.name) || hasPathFeatures(props.name) || !props.name) {
    return 'img'
  }
  else if (/i-[^:]+:[^:]+/.test(props.name)) {
@@ -56,11 +60,19 @@ const style = computed(() => {
 </script>

 <template>
-  <i class="relative h-[1em] w-[1em] flex-inline items-center justify-center fill-current leading-[1em]" :class="{ [name]: outputType === 'unocss' }" :style="style">
-    <Icon v-if="outputType === 'iconify'" :icon="name" />
+  <i class="relative h-[1em] w-[1em] flex-inline items-center justify-center fill-current leading-[1em]" :style="style">
+    <i v-if="outputType === 'unocss'" class="h-[1em] w-[1em]" :class="name" />
+    <Icon v-else-if="outputType === 'iconify'" :icon="name" />
    <svg v-else-if="outputType === 'svg'" class="h-[1em] w-[1em]" aria-hidden="true">
      <use :xlink:href="`#icon-${name}`" />
    </svg>
-    <img v-else-if="outputType === 'img'" :src="name" class="h-[1em] w-[1em]">
+    <UseImage v-else-if="outputType === 'img'" :src="name" class="h-[1em] w-[1em]">
+      <template #loading>
+        <i class="i-line-md:loading-loop h-[1em] w-[1em]" />
+      </template>
+      <template #error>
+        <i class="i-tdesign:image-error h-[1em] w-[1em]" />
+      </template>
+    </UseImage>
  </i>
 </template>
@@ -14,6 +14,14 @@ onMounted(() => {

 <template>
  <HSlideover v-model="isShow" title="系统信息">
+    <div v-if="pkg.version" class="px-4">
+      <h2 class="m-0 text-lg font-bold">
+        版本号
+      </h2>
+      <div class="my-4 text-center text-lg font-sans">
+        {{ pkg.version }}
+      </div>
+    </div>
    <div class="px-4">
      <h2 class="m-0 text-lg font-bold">
        最后编译时间
@@ -1,10 +1,10 @@
 <script setup lang="ts">
+import settingsDefault from '@/settings.default'
+import useMenuStore from '@/store/modules/menu'
+import useSettingsStore from '@/store/modules/settings'
+import eventBus from '@/utils/eventBus'
 import { useClipboard } from '@vueuse/core'
 import Message from 'vue-m-message'
-import settingsDefault from '@/settings.default'
-import eventBus from '@/utils/eventBus'
-import useSettingsStore from '@/store/modules/settings'
-import useMenuStore from '@/store/modules/menu'

 defineOptions({
  name: 'AppSetting',
@@ -17,7 +17,7 @@ const menuStore = useMenuStore()

 const isShow = ref(false)

-watch(() => settingsStore.settings.menu.menuMode, (value) => {
+watch(() => settingsStore.settings.menu.mode, (value) => {
  if (value === 'single') {
    menuStore.setActived(0)
  }
@@ -103,17 +103,17 @@ function handleCopy() {
    </div>
    <div v-if="settingsStore.mode === 'pc'" class="menu-mode">
      <HTooltip text="侧边栏模式 (含主导航)" placement="bottom" :delay="500">
-        <div class="mode mode-side" :class="{ active: settingsStore.settings.menu.menuMode === 'side' }" @click="settingsStore.settings.menu.menuMode = 'side'">
+        <div class="mode mode-side" :class="{ active: settingsStore.settings.menu.mode === 'side' }" @click="settingsStore.settings.menu.mode = 'side'">
          <div class="mode-container" />
        </div>
      </HTooltip>
      <HTooltip text="顶部模式" placement="bottom" :delay="500">
-        <div class="mode mode-head" :class="{ active: settingsStore.settings.menu.menuMode === 'head' }" @click="settingsStore.settings.menu.menuMode = 'head'">
+        <div class="mode mode-head" :class="{ active: settingsStore.settings.menu.mode === 'head' }" @click="settingsStore.settings.menu.mode = 'head'">
          <div class="mode-container" />
        </div>
      </HTooltip>
      <HTooltip text="侧边栏模式 (不含主导航)" placement="bottom" :delay="500">
-        <div class="mode mode-single" :class="{ active: settingsStore.settings.menu.menuMode === 'single' }" @click="settingsStore.settings.menu.menuMode = 'single'">
+        <div class="mode mode-single" :class="{ active: settingsStore.settings.menu.mode === 'single' }" @click="settingsStore.settings.menu.mode = 'single'">
          <div class="mode-container" />
        </div>
      </HTooltip>
@@ -128,7 +128,7 @@ function handleCopy() {
          <SvgIcon name="i-ri:question-line" />
        </HTooltip>
      </div>
-      <HToggle v-model="settingsStore.settings.menu.switchMainMenuAndPageJump" :disabled="['single'].includes(settingsStore.settings.menu.menuMode)" />
+      <HToggle v-model="settingsStore.settings.menu.switchMainMenuAndPageJump" :disabled="['single'].includes(settingsStore.settings.menu.mode)" />
    </div>
    <div class="setting-item">
      <div class="label">
@@ -155,7 +155,7 @@ function handleCopy() {
      <div class="label">
        是否启用快捷键
      </div>
-      <HToggle v-model="settingsStore.settings.menu.enableHotkeys" :disabled="['single'].includes(settingsStore.settings.menu.menuMode)" />
+      <HToggle v-model="settingsStore.settings.menu.enableHotkeys" :disabled="['single'].includes(settingsStore.settings.menu.mode)" />
    </div>
    <div class="divider">
      顶栏
@@ -327,6 +327,21 @@ function handleCopy() {
      </div>
      <HToggle v-model="settingsStore.settings.app.enableProgress" />
    </div>
+    <div class="setting-item">
+      <div class="label">
+        哀悼模式
+        <HTooltip text="该功能开启时，整站会变为灰色">
+          <SvgIcon name="i-ri:question-line" />
+        </HTooltip>
+      </div>
+      <HToggle v-model="settingsStore.settings.app.enableMournMode" />
+    </div>
+    <div class="setting-item">
+      <div class="label">
+        色弱模式
+      </div>
+      <HToggle v-model="settingsStore.settings.app.enableColorAmblyopiaMode" />
+    </div>
    <div class="setting-item">
      <div class="label">
        动态标题
@@ -345,96 +360,96 @@ function handleCopy() {
  </HSlideover>
 </template>

-<style lang="scss" scoped>
+<style scoped>
 .divider {
-  --at-apply: flex items-center justify-between gap-4 my-4 whitespace-nowrap text-sm font-500;
+  --uno: flex items-center justify-between gap-4 my-4 whitespace-nowrap text-sm font-500;

  &::before,
  &::after {
-    --at-apply: content-empty w-full h-1px bg-stone-2 dark-bg-stone-6;
+    --uno: content-empty w-full h-1px bg-stone-2 dark-bg-stone-6;
  }
 }

 .menu-mode {
-  --at-apply: flex items-center justify-center gap-4 pb-4;
+  --uno: flex items-center justify-center gap-4 pb-4;

  .mode {
-    --at-apply: relative w-16 h-12 rounded-2 ring-1 ring-stone-2 dark-ring-stone-7 cursor-pointer transition;
+    --uno: relative w-16 h-12 rounded-2 ring-1 ring-stone-2 dark-ring-stone-7 cursor-pointer transition;

    &.active {
-      --at-apply: ring-ui-primary ring-2;
+      --uno: ring-ui-primary ring-2;
    }

    &::before,
    &::after,
    .mode-container {
-      --at-apply: absolute pointer-events-none;
+      --uno: absolute pointer-events-none;
    }

    &::before {
-      --at-apply: content-empty bg-ui-primary;
+      --uno: content-empty bg-ui-primary;
    }

    &::after {
-      --at-apply: content-empty bg-ui-primary/60;
+      --uno: content-empty bg-ui-primary/60;
    }

    .mode-container {
-      --at-apply: bg-ui-primary/20 border-dashed border-ui-primary;
+      --uno: bg-ui-primary/20 border-width-1.5 border-dashed border-ui-primary;

      &::before {
-        --at-apply: content-empty absolute w-full h-full;
+        --uno: content-empty absolute w-full h-full;
      }
    }

    &-side {
      &::before {
-        --at-apply: top-2 bottom-2 left-2 w-2 rounded-tl-1 rounded-bl-1;
+        --uno: top-2 bottom-2 left-2 w-2 rounded-tl-1 rounded-bl-1;
      }

      &::after {
-        --at-apply: top-2 bottom-2 left-4.5 w-3;
+        --uno: top-2 bottom-2 left-4.5 w-3;
      }

      .mode-container {
-        --at-apply: inset-t-2 inset-r-2 inset-b-2 inset-l-8 rounded-tr-1 rounded-br-1;
+        --uno: inset-t-2 inset-r-2 inset-b-2 inset-l-8 rounded-tr-1 rounded-br-1;
      }
    }

    &-head {
      &::before {
-        --at-apply: top-2 left-2 right-2 h-2 rounded-tl-1 rounded-tr-1;
+        --uno: top-2 left-2 right-2 h-2 rounded-tl-1 rounded-tr-1;
      }

      &::after {
-        --at-apply: top-4.5 left-2 bottom-2 w-3 rounded-bl-1;
+        --uno: top-4.5 left-2 bottom-2 w-3 rounded-bl-1;
      }

      .mode-container {
-        --at-apply: inset-t-4.5 inset-r-2 inset-b-2 inset-l-5.5 rounded-br-1;
+        --uno: inset-t-4.5 inset-r-2 inset-b-2 inset-l-5.5 rounded-br-1;
      }
    }

    &-single {
      &::after {
-        --at-apply: top-2 left-2 bottom-2 w-3 rounded-tl-1 rounded-bl-1;
+        --uno: top-2 left-2 bottom-2 w-3 rounded-tl-1 rounded-bl-1;
      }

      .mode-container {
-        --at-apply: inset-t-2 inset-r-2 inset-b-2 inset-l-5.5 rounded-tr-1 rounded-br-1;
+        --uno: inset-t-2 inset-r-2 inset-b-2 inset-l-5.5 rounded-tr-1 rounded-br-1;
      }
    }
  }
 }

 .setting-item {
-  --at-apply: flex items-center justify-between gap-4 px-4 py-2 rounded-2 transition hover-bg-stone-1 dark-hover-bg-stone-9;
+  --uno: flex items-center justify-between gap-4 px-4 py-2 rounded-2 transition hover-bg-stone-1 dark-hover-bg-stone-9;

  .label {
-    --at-apply: flex items-center flex-shrink-0 gap-2 text-sm;
+    --uno: flex items-center flex-shrink-0 gap-2 text-sm;

    i {
-      --at-apply: text-xl text-orange cursor-help;
+      --uno: text-xl text-orange cursor-help;
    }
  }
 }
@@ -4,7 +4,7 @@
  </div>
 </template>

-<style lang="scss" scoped>
+<style scoped>
 :deep(.breadcrumb-item) {
  &:first-child {
    .separator {
@@ -21,17 +21,17 @@ const settingsStore = useSettingsStore()
  </footer>
 </template>

-<style lang="scss" scoped>
+<style scoped>
 .copyright {
-  --at-apply: flex items-center justify-center flex-wrap my-4 px-4 text-sm text-stone-5;
+  --uno: flex items-center justify-center flex-wrap my-4 px-4 text-sm text-stone-5;

  span,
  a {
-    --at-apply: px-1;
+    --uno: px-1;
  }

  a {
-    --at-apply: text-center no-underline text-stone-5 hover-text-dark dark-hover-text-light transition;
+    --uno: text-center no-underline text-stone-5 hover-text-dark dark-hover-text-light transition;
  }
 }
 </style>
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import Logo from '../Logo/index.vue'
-import ToolbarRightSide from '../Topbar/Toolbar/rightSide.vue'
 import useMenuStore from '@/store/modules/menu'
 import useSettingsStore from '@/store/modules/settings'
+import Logo from '../Logo/index.vue'
+import ToolbarRightSide from '../Topbar/Toolbar/rightSide.vue'

 defineOptions({
  name: 'LayoutHeader',
@@ -13,12 +13,12 @@ const menuStore = useMenuStore()

 const { switchTo } = useMenu()

-const menuRef = ref()
+const menuRef = useTemplateRef('menuRef')

 // 顶部模式鼠标滚动
 function handlerMouserScroll(event: WheelEvent) {
  if (event.deltaY || event.detail !== 0) {
-    menuRef.value.scrollBy({
+    menuRef.value?.scrollBy({
      left: (event.deltaY || event.detail) > 0 ? 50 : -50,
    })
  }
@@ -27,15 +27,15 @@ function handlerMouserScroll(event: WheelEvent) {

 <template>
  <Transition name="header">
-    <header v-if="settingsStore.mode === 'pc' && settingsStore.settings.menu.menuMode === 'head'">
+    <header v-if="settingsStore.mode === 'pc' && settingsStore.settings.menu.mode === 'head'">
      <div class="header-container">
        <Logo class="title" />
-        <div ref="menuRef" class="menu-container" @wheel.prevent="handlerMouserScroll">
+        <div ref="menuRef" class="menu-container scrollbar-none" @wheel.prevent="handlerMouserScroll">
          <!-- 顶部模式 -->
-          <div class="menu flex of-hidden transition-all">
+          <div class="menu h-full flex of-hidden transition-all">
            <template v-for="(item, index) in menuStore.allMenus" :key="index">
              <div
-                class="menu-item relative transition-all" :class="{
+                class="menu-item relative mx-1 py-2 transition-all" :class="{
                  active: index === menuStore.actived,
                }"
              >
@@ -45,7 +45,7 @@ function handlerMouserScroll(event: WheelEvent) {
                  }" :title="typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title" @click="switchTo(index)"
                >
                  <div class="inline-flex flex-1 items-center justify-center gap-1">
-                    <SvgIcon v-if="item.meta?.icon" :name="item.meta?.icon" :size="20" class="menu-item-container-icon transition-transform group-hover-scale-120" async />
+                    <SvgIcon v-if="item.meta?.icon" :name="item.meta?.icon" class="menu-item-container-icon transition-transform group-hover-scale-120" />
                    <span class="w-full flex-1 truncate text-sm transition-height transition-opacity transition-width">
                      {{ typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title }}
                    </span>
@@ -61,7 +61,7 @@ function handlerMouserScroll(event: WheelEvent) {
  </Transition>
 </template>

-<style lang="scss" scoped>
+<style scoped>
 header {
  position: fixed;
  top: 0;
@@ -115,14 +115,6 @@ header {
      overflow-x: auto;
      mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);

-      // firefox隐藏滚动条
-      scrollbar-width: none;
-
-      // chrome隐藏滚动条
-      &::-webkit-scrollbar {
-        display: none;
-      }
-
      .menu {
        display: inline-flex;
        height: 100%;
@@ -135,6 +127,10 @@ header {
              color: var(--g-header-menu-hover-color);
              background-color: var(--g-header-menu-hover-bg);
            }
+
+            .menu-item-container-icon {
+              font-size: 20px !important;
+            }
          }

          &.active .menu-item-container {
@@ -147,7 +143,7 @@ header {
  }
 }

-// 头部动画
+/* 头部动画 */
 .header-enter-active,
 .header-leave-active {
  transition: transform 0.3s;
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import eventBus from '@/utils/eventBus'
 import useSettingsStore from '@/store/modules/settings'
+import eventBus from '@/utils/eventBus'

 defineOptions({
  name: 'HotkeysIntro',
@@ -38,7 +38,7 @@ onMounted(() => {
            </li>
          </ul>
        </div>
-        <div v-if="settingsStore.settings.menu.enableHotkeys && ['side', 'head'].includes(settingsStore.settings.menu.menuMode)">
+        <div v-if="settingsStore.settings.menu.enableHotkeys && ['side', 'head'].includes(settingsStore.settings.menu.mode)">
          <h2 class="m-0 text-lg font-bold">
            主导航
          </h2>
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import useSettingsStore from '@/store/modules/settings'
 import imgLogo from '@/assets/images/logo.png'
+import useSettingsStore from '@/store/modules/settings'

 defineOptions({
  name: 'Logo',
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import Logo from '../Logo/index.vue'
-import useSettingsStore from '@/store/modules/settings'
 import useMenuStore from '@/store/modules/menu'
+import useSettingsStore from '@/store/modules/settings'
+import Logo from '../Logo/index.vue'

 defineOptions({
  name: 'MainSidebar',
@@ -15,36 +15,38 @@ const { switchTo } = useMenu()

 <template>
  <Transition name="main-sidebar">
-    <div v-if="settingsStore.settings.menu.menuMode === 'side' || (settingsStore.mode === 'mobile' && settingsStore.settings.menu.menuMode !== 'single')" class="main-sidebar-container">
+    <div v-if="settingsStore.settings.menu.mode === 'side' || (settingsStore.mode === 'mobile' && settingsStore.settings.menu.mode !== 'single')" class="main-sidebar-container">
      <Logo :show-title="false" class="sidebar-logo" />
-      <!-- 侧边栏模式（含主导航） -->
-      <div class="menu flex flex-col of-hidden transition-all">
-        <template v-for="(item, index) in menuStore.allMenus" :key="index">
-          <div
-            class="menu-item relative transition-all" :class="{
-              active: index === menuStore.actived,
-            }"
-          >
+      <div class="menu scrollbar-none">
+        <!-- 侧边栏模式（含主导航） -->
+        <div class="w-full flex flex-col of-hidden py-1 transition-all -mt-2">
+          <template v-for="(item, index) in menuStore.allMenus" :key="index">
            <div
-              v-if="item.children && item.children.length !== 0" class="group menu-item-container h-full w-full flex cursor-pointer items-center justify-between gap-1 py-4 text-[var(--g-main-sidebar-menu-color)] transition-all hover-(bg-[var(--g-main-sidebar-menu-hover-bg)] text-[var(--g-main-sidebar-menu-hover-color)]) px-2!" :class="{
-                'text-[var(--g-main-sidebar-menu-active-color)]! bg-[var(--g-main-sidebar-menu-active-bg)]!': index === menuStore.actived,
-              }" :title="typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title" @click="switchTo(index)"
+              class="menu-item relative px-2 py-1 transition-all" :class="{
+                active: index === menuStore.actived,
+              }"
            >
-              <div class="w-full inline-flex flex-1 flex-col items-center justify-center gap-[2px]">
-                <SvgIcon v-if="item.meta?.icon" :name="item.meta?.icon" :size="20" class="menu-item-container-icon transition-transform group-hover-scale-120" async />
-                <span class="w-full flex-1 truncate text-center text-sm transition-height transition-opacity transition-width">
-                  {{ typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title }}
-                </span>
+              <div
+                v-if="item.children && item.children.length !== 0" class="group menu-item-container h-full w-full flex cursor-pointer items-center justify-between gap-1 py-4 text-[var(--g-main-sidebar-menu-color)] transition-all hover-(bg-[var(--g-main-sidebar-menu-hover-bg)] text-[var(--g-main-sidebar-menu-hover-color)]) px-2!" :class="{
+                  'text-[var(--g-main-sidebar-menu-active-color)]! bg-[var(--g-main-sidebar-menu-active-bg)]!': index === menuStore.actived,
+                }" :title="typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title" @click="switchTo(index)"
+              >
+                <div class="w-full inline-flex flex-1 flex-col items-center justify-center gap-[2px]">
+                  <SvgIcon v-if="item.meta?.icon" :name="item.meta?.icon" class="menu-item-container-icon transition-transform group-hover-scale-120" />
+                  <span class="w-full flex-1 truncate text-center text-sm transition-height transition-opacity transition-width">
+                    {{ typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title }}
+                  </span>
+                </div>
              </div>
            </div>
-          </div>
-        </template>
+          </template>
+        </div>
      </div>
    </div>
  </Transition>
 </template>

-<style lang="scss" scoped>
+<style scoped>
 .main-sidebar-container {
  position: relative;
  z-index: 1;
@@ -67,14 +69,6 @@ const { switchTo } = useMenu()
    overflow: hidden auto;
    overscroll-behavior: contain;

-    // firefox隐藏滚动条
-    scrollbar-width: none;
-
-    // chrome隐藏滚动条
-    &::-webkit-scrollbar {
-      display: none;
-    }
-
    :deep(.menu-item) {
      .menu-item-container {
        padding-block: 8px;
@@ -86,7 +80,7 @@ const { switchTo } = useMenu()
        }

        .menu-item-container-icon {
-          font-size: 24px !important;
+          font-size: 20px !important;
        }
      }

@@ -98,7 +92,7 @@ const { switchTo } = useMenu()
  }
 }

-// 主侧边栏动画
+/* 主侧边栏动画 */
 .main-sidebar-enter-active,
 .main-sidebar-leave-active {
  transition: 0.3s;
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import SubMenu from './sub.vue'
-import Item from './item.vue'
 import type { MenuInjection, MenuProps } from './types'
+import Item from './item.vue'
+import SubMenu from './sub.vue'
 import { rootMenuInjectionKey } from './types'

 defineOptions({
@@ -106,7 +106,7 @@ const handleSubMenuClick: MenuInjection['handleSubMenuClick'] = (index, indexPat
 function initMenu() {
  const activeItem = activeIndex.value && items.value[activeIndex.value]
  setSubMenusActive(activeIndex.value)
-  if (!activeItem || props.collapse) {
+  if (!activeItem || isMenuPopup.value || props.collapse) {
    return
  }
  // 展开该菜单项的路径上所有子菜单
@@ -162,11 +162,9 @@ provide(rootMenuInjectionKey, reactive({

 <template>
  <div
-    class="flex flex-col of-hidden transition-all" :class="{
-      'w-[200px]': !isMenuPopup && props.mode === 'vertical',
-      'w-[64px]': isMenuPopup && props.mode === 'vertical',
-      'h-[80px]': props.mode === 'horizontal',
-      'flex-row! w-auto': isMenuPopup && props.mode === 'horizontal',
+    class="h-full w-full flex flex-col of-hidden transition-all" :class="{
+      'flex-row! w-auto!': isMenuPopup && props.mode === 'horizontal',
+      'py-1': props.mode === 'vertical',
    }"
  >
    <template v-for="item in menu" :key="item.path ?? JSON.stringify(item)">
@@ -2,6 +2,10 @@
 import type { SubMenuItemProps } from './types'
 import { rootMenuInjectionKey } from './types'

+defineOptions({
+  name: 'SubMenuItem',
+})
+
 const props = withDefaults(
  defineProps<SubMenuItemProps>(),
  {
@@ -40,7 +44,9 @@ defineExpose({
 <template>
  <div
    ref="itemRef" class="menu-item relative transition-all" :class="{
-      active: isItemActive,
+      'active': isItemActive,
+      'py-1 px-2': (rootMenu.isMenuPopup && rootMenu.props.mode === 'vertical') || (rootMenu.isMenuPopup && level !== 0 && rootMenu.props.mode === 'horizontal') || !rootMenu.isMenuPopup,
+      'px-1 py-2': rootMenu.isMenuPopup && level === 0 && rootMenu.props.mode === 'horizontal',
    }"
  >
    <router-link v-slot="{ href, navigate }" custom :to="uniqueKey.at(-1) ?? ''">
@@ -52,7 +58,7 @@ defineExpose({
              target: item.meta?.link ? '_blank' : '_self',
              class: 'no-underline',
            }),
-          }" class="group menu-item-container h-full w-full flex cursor-pointer items-center justify-between gap-1 px-5 py-4 text-[var(--g-sub-sidebar-menu-color)] transition-all hover-(bg-[var(--g-sub-sidebar-menu-hover-bg)] text-[var(--g-sub-sidebar-menu-hover-color)])" :class="{
+          }" class="group menu-item-container h-full w-full flex cursor-pointer items-center justify-between gap-1 px-4 py-3 text-[var(--g-sub-sidebar-menu-color)] transition-all hover-(bg-[var(--g-sub-sidebar-menu-hover-bg)] text-[var(--g-sub-sidebar-menu-hover-color)])" :class="{
            'text-[var(--g-sub-sidebar-menu-active-color)]! bg-[var(--g-sub-sidebar-menu-active-bg)]!': isItemActive,
            'px-3!': rootMenu.isMenuPopup && level === 0,
          }" :title="typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title" v-on="{
@@ -68,7 +74,7 @@ defineExpose({
              'w-full': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName && rootMenu.props.mode === 'vertical',
            }" :style="indentStyle"
          >
-            <SvgIcon v-if="props.item.meta?.icon" :name="props.item.meta.icon" :size="20" class="menu-item-container-icon transition-transform group-hover-scale-120" async />
+            <SvgIcon v-if="props.item.meta?.icon" :name="props.item.meta.icon" :size="18" class="menu-item-container-icon transition-transform group-hover-scale-120" />
            <span
              v-if="!(rootMenu.isMenuPopup && level === 0 && !rootMenu.props.showCollapseName)" class="w-0 flex-1 truncate text-sm transition-height transition-opacity transition-width"
              :class="{
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { useTimeoutFn } from '@vueuse/core'
 import type { OverlayScrollbarsComponentRef } from 'overlayscrollbars-vue'
+import type { SubMenuProps } from './types'
+import { useTimeoutFn } from '@vueuse/core'
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue'
 import Item from './item.vue'
-import type { SubMenuProps } from './types'
 import { rootMenuInjectionKey } from './types'

 defineOptions({
@@ -18,8 +18,8 @@ const props = withDefaults(
 )

 const index = props.menu.path ?? JSON.stringify(props.menu)
-const itemRef = shallowRef()
-const subMenuRef = shallowRef<OverlayScrollbarsComponentRef>()
+const itemRef = useTemplateRef('itemRef')
+const subMenuRef = useTemplateRef<OverlayScrollbarsComponentRef>('subMenuRef')
 const rootMenu = inject(rootMenuInjectionKey)!

 const opened = computed(() => {
@@ -85,11 +85,11 @@ const transitionClass = computed(() => {
      }
    : {
        enterActiveClass: 'ease-in-out duration-300',
-        enterFromClass: 'opacity-0',
-        enterToClass: 'opacity-100',
+        enterFromClass: 'opacity-0 translate-y-4 scale-95 blur-4',
+        enterToClass: 'opacity-100 translate-y-0 scale-100 blur-0',
        leaveActiveClass: 'ease-in-out duration-300',
-        leaveFromClass: 'opacity-100',
-        leaveToClass: 'opacity-0',
+        leaveFromClass: 'opacity-100 translate-y-0 scale-100 blur-0',
+        leaveToClass: 'opacity-0 translate-y-4 scale-95 blur-4',
      }
 })

@@ -130,7 +130,10 @@ function handleMouseenter() {
    if (hasChildren.value) {
      rootMenu.openMenu(index, props.uniqueKey)
      nextTick(() => {
-        const el = itemRef.value.ref
+        const el = itemRef.value?.ref
+        if (!el) {
+          return
+        }
        let top = 0
        let left = 0
        if (rootMenu.props.mode === 'vertical' || props.level !== 0) {
@@ -147,6 +150,9 @@ function handleMouseenter() {
            subMenuRef.value!.getElement()!.style.height = `${window.innerHeight - top}px`
          }
        }
+        if (left + subMenuRef.value!.getElement()!.offsetWidth > document.documentElement.clientWidth) {
+          left = el.getBoundingClientRect().left - el.getBoundingClientRect().width
+        }
        subMenuRef.value!.getElement()!.style.top = `${top}px`
        subMenuRef.value!.getElement()!.style.left = `${left}px`
      })
@@ -182,10 +188,11 @@ function handleMouseleave() {
  <Teleport v-if="hasChildren" to="body" :disabled="!rootMenu.isMenuPopup">
    <Transition v-bind="transitionClass" v-on="transitionEvent">
      <OverlayScrollbarsComponent
-        v-if="opened" ref="subMenuRef" :options="{ scrollbars: { visibility: 'hidden' } }" defer class="sub-menu" :class="{
+        v-show="opened" ref="subMenuRef" :options="{ scrollbars: { visibility: 'hidden' } }" defer class="sub-menu static" :class="{
          'bg-[var(--g-sub-sidebar-bg)]': rootMenu.isMenuPopup,
-          'ring-1 ring-stone-2 dark-ring-stone-8 shadow-xl fixed z-3000 w-[200px]': rootMenu.isMenuPopup,
-          'mx-2': rootMenu.isMenuPopup && (rootMenu.props.mode === 'vertical' || level !== 0),
+          'ring-1 ring-stone-2 dark-ring-stone-8 shadow-xl fixed! z-3000 w-[200px]': rootMenu.isMenuPopup,
+          'mx-1': rootMenu.isMenuPopup && (rootMenu.props.mode === 'vertical' || level !== 0),
+          'py-1': rootMenu.isMenuPopup,
        }"
      >
        <template v-for="item in menu.children" :key="item.path ?? JSON.stringify(item)">
@@ -1,4 +1,3 @@
-import { createInjectionKey } from '@/utils/injectionKeys'
 import type { Menu } from '#/global'

 export interface MenuItem {
@@ -31,7 +30,7 @@ export interface MenuInjection {
  handleSubMenuClick: (index: string, indexPath: string[]) => void
 }

-export const rootMenuInjectionKey = createInjectionKey<MenuInjection>('rootMenu')
+export const rootMenuInjectionKey = Symbol('rootMenu') as InjectionKey<MenuInjection>

 export interface SubMenuProps {
  uniqueKey: string[]
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { Dialog, DialogDescription, DialogPanel, TransitionChild, TransitionRoot } from '@headlessui/vue'
+import type { Menu } from '@/types/global'
 import type { OverlayScrollbarsComponentRef } from 'overlayscrollbars-vue'
-import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue'
-import { cloneDeep } from 'lodash-es'
-import hotkeys from 'hotkeys-js'
-import Breadcrumb from '../Breadcrumb/index.vue'
-import BreadcrumbItem from '../Breadcrumb/item.vue'
+import useMenuStore from '@/store/modules/menu'
+import useSettingsStore from '@/store/modules/settings'
 import { resolveRoutePath } from '@/utils'
 import eventBus from '@/utils/eventBus'
-import useSettingsStore from '@/store/modules/settings'
-import useMenuStore from '@/store/modules/menu'
-import type { Menu } from '@/types/global'
+import { Dialog, DialogDescription, DialogPanel, TransitionChild, TransitionRoot } from '@headlessui/vue'
+import hotkeys from 'hotkeys-js'
+import { cloneDeep } from 'lodash-es'
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue'
+import Breadcrumb from '../Breadcrumb/index.vue'
+import BreadcrumbItem from '../Breadcrumb/item.vue'

 defineOptions({
  name: 'Search',
@@ -55,12 +55,9 @@ const searchInput = ref('')
 const sourceList = ref<listTypes[]>([])
 const actived = ref(-1)

-const searchInputRef = ref()
-const searchResultRef = ref<OverlayScrollbarsComponentRef>()
-const searchResultItemRef = ref<HTMLElement[]>([])
-onBeforeUpdate(() => {
-  searchResultItemRef.value = []
-})
+const searchInputRef = useTemplateRef('searchInputRef')
+const searchResultRef = useTemplateRef<OverlayScrollbarsComponentRef>('searchResultRef')
+const searchResultItemRef = useTemplateRef<HTMLElement[]>('searchResultItemRef')

 const resultList = computed(() => {
  let result = []
@@ -204,7 +201,7 @@ function keyDown() {
 }
 function keyEnter() {
  if (actived.value !== -1) {
-    searchResultItemRef.value.find(item => Number.parseInt(item.dataset.index!) === actived.value)?.click()
+    searchResultItemRef.value?.find(item => Number.parseInt(item.dataset.index!) === actived.value)?.click()
  }
 }
 function handleScroll() {
@@ -213,8 +210,8 @@ function handleScroll() {
    let scrollTo = 0
    if (actived.value !== -1) {
      scrollTo = contentDom.scrollTop
-      const activedOffsetTop = searchResultItemRef.value.find(item => Number.parseInt(item.dataset.index!) === actived.value)?.offsetTop ?? 0
-      const activedClientHeight = searchResultItemRef.value.find(item => Number.parseInt(item.dataset.index!) === actived.value)?.clientHeight ?? 0
+      const activedOffsetTop = searchResultItemRef.value?.find(item => Number.parseInt(item.dataset.index!) === actived.value)?.offsetTop ?? 0
+      const activedClientHeight = searchResultItemRef.value?.find(item => Number.parseInt(item.dataset.index!) === actived.value)?.clientHeight ?? 0
      const searchScrollTop = contentDom.scrollTop
      const searchClientHeight = contentDom.clientHeight
      if (activedOffsetTop + activedClientHeight > searchScrollTop + searchClientHeight) {
@@ -1,9 +1,9 @@
 <script setup lang="ts">
+import useMenuStore from '@/store/modules/menu'
+import useSettingsStore from '@/store/modules/settings'
 import { useElementSize } from '@vueuse/core'
 import Logo from '../Logo/index.vue'
 import Menu from '../Menu/index.vue'
-import useSettingsStore from '@/store/modules/settings'
-import useMenuStore from '@/store/modules/menu'

 defineOptions({
  name: 'SubSidebar',
@@ -14,45 +14,63 @@ const route = useRoute()
 const settingsStore = useSettingsStore()
 const menuStore = useMenuStore()

-const subSidebarRef = ref()
+const subSidebarRef = useTemplateRef('subSidebarRef')
 const showShadowTop = ref(false)
 const showShadowBottom = ref(false)
 function onSidebarScroll() {
-  const scrollTop = subSidebarRef.value.scrollTop
+  const scrollTop = subSidebarRef.value?.scrollTop ?? 0
  showShadowTop.value = scrollTop > 0
-  const clientHeight = subSidebarRef.value.clientHeight
-  const scrollHeight = subSidebarRef.value.scrollHeight
+  const clientHeight = subSidebarRef.value?.clientHeight ?? 0
+  const scrollHeight = subSidebarRef.value?.scrollHeight ?? 0
  showShadowBottom.value = Math.ceil(scrollTop + clientHeight) < scrollHeight
 }

-const menuRef = ref()
+const enableSidebar = computed(() => {
+  return settingsStore.mode === 'mobile' || (
+    menuStore.sidebarMenus.length !== 0
+    && !menuStore.sidebarMenus.every(item => item.meta?.menu === false)
+  )
+})
+
+watch(enableSidebar, (val) => {
+  if (val) {
+    nextTick(() => {
+      onSidebarScroll()
+    })
+  }
+}, {
+  immediate: true,
+})
+
+const menuRef = useTemplateRef('menuRef')

 onMounted(() => {
-  onSidebarScroll()
-  const { height } = useElementSize(menuRef)
-  watch(() => height.value, () => {
-    if (height.value > 0) {
-      onSidebarScroll()
-    }
-  }, {
-    immediate: true,
-  })
+  if (enableSidebar.value) {
+    const { height } = useElementSize(menuRef)
+    watch(() => height.value, () => {
+      if (height.value > 0) {
+        onSidebarScroll()
+      }
+    }, {
+      immediate: true,
+    })
+  }
 })
 </script>

 <template>
  <div
-    class="sub-sidebar-container" :class="{
+    v-if="enableSidebar" class="sub-sidebar-container" :class="{
      'is-collapse': settingsStore.mode === 'pc' && settingsStore.settings.menu.subMenuCollapse,
    }"
  >
    <Logo
-      :show-logo="settingsStore.settings.menu.menuMode === 'single'" class="sidebar-logo" :class="{
-        'sidebar-logo-bg': settingsStore.settings.menu.menuMode === 'single',
+      :show-logo="settingsStore.settings.menu.mode === 'single'" class="sidebar-logo" :class="{
+        'sidebar-logo-bg': settingsStore.settings.menu.mode === 'single',
      }"
    />
    <div
-      ref="subSidebarRef" class="sub-sidebar flex-1 transition-shadow-300" :class="{
+      ref="subSidebarRef" class="sub-sidebar flex-1 transition-shadow-300 scrollbar-none" :class="{
        'shadow-top': showShadowTop,
        'shadow-bottom': showShadowBottom,
      }" @scroll="onSidebarScroll"
@@ -61,7 +79,11 @@ onMounted(() => {
        <TransitionGroup name="sub-sidebar">
          <template v-for="(mainItem, mainIndex) in menuStore.allMenus" :key="mainIndex">
            <div v-show="mainIndex === menuStore.actived">
-              <Menu :menu="mainItem.children" :value="route.meta.activeMenu || route.path" :default-openeds="menuStore.defaultOpenedPaths" :accordion="settingsStore.settings.menu.subMenuUniqueOpened" :collapse="settingsStore.mode === 'pc' && settingsStore.settings.menu.subMenuCollapse" class="menu" />
+              <Menu
+                :menu="mainItem.children" :value="route.meta.activeMenu || route.path" :default-openeds="menuStore.defaultOpenedPaths" :accordion="settingsStore.settings.menu.subMenuUniqueOpened" :collapse="settingsStore.mode === 'pc' && settingsStore.settings.menu.subMenuCollapse" class="menu" :class="{
+                  '-mt-2': !['head', 'single'].includes(settingsStore.settings.menu.mode),
+                }"
+              />
            </div>
          </template>
        </TransitionGroup>
@@ -75,7 +97,7 @@ onMounted(() => {
  </div>
 </template>

-<style lang="scss" scoped>
+<style scoped>
 .sub-sidebar-container {
  position: absolute;
  top: 0;
@@ -118,14 +140,6 @@ onMounted(() => {
    overflow: hidden auto;
    overscroll-behavior: contain;

-    // firefox隐藏滚动条
-    scrollbar-width: none;
-
-    // chrome隐藏滚动条
-    &::-webkit-scrollbar {
-      display: none;
-    }
-
    &.shadow-top {
      box-shadow: inset 0 10px 10px -10px var(--g-box-shadow-color), inset 0 0 0 transparent;
    }
@@ -144,7 +158,7 @@ onMounted(() => {
  }
 }

-// 次侧边栏动画
+/* 次侧边栏动画 */
 .sub-sidebar-enter-active {
  transition: 0.2s;
 }
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import ContextMenu from '@imengyu/vue3-context-menu'
-import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css'
-import hotkeys from 'hotkeys-js'
-import Message from 'vue-m-message'
-import { useMagicKeys } from '@vueuse/core'
+import type { Tabbar } from '#/global'
 import useSettingsStore from '@/store/modules/settings'
 import useTabbarStore from '@/store/modules/tabbar'
-import type { Tabbar } from '#/global'
+import ContextMenu from '@imengyu/vue3-context-menu'
+import { useMagicKeys } from '@vueuse/core'
+import hotkeys from 'hotkeys-js'
+import Message from 'vue-m-message'
+import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css'

 defineOptions({
  name: 'Tabbar',
@@ -25,19 +25,16 @@ const keys = useMagicKeys({ reactive: true })

 const activedTabId = computed(() => tabbar.getId())

-const tabsRef = ref()
-const tabContainerRef = ref()
-const tabRef = shallowRef<HTMLElement[]>([])
-onBeforeUpdate(() => {
-  tabRef.value = []
-})
+const tabsRef = useTemplateRef('tabsRef')
+const tabContainerRef = useTemplateRef('tabContainerRef')
+const tabRef = useTemplateRef<HTMLElement[]>('tabRef')

 watch(() => route, (val) => {
  if (settingsStore.settings.tabbar.enable) {
    tabbarStore.add(val).then(() => {
      const index = tabbarStore.list.findIndex(item => item.tabId === activedTabId.value)
      if (index !== -1) {
-        scrollTo(tabRef.value[index].offsetLeft)
+        tabRef.value && scrollTo(tabRef.value[index].offsetLeft)
        tabbarScrollTip()
      }
    })
@@ -47,7 +44,7 @@ watch(() => route, (val) => {
  deep: true,
 })
 function tabbarScrollTip() {
-  if (tabContainerRef.value.$el.clientWidth > tabsRef.value.clientWidth && localStorage.getItem('tabbarScrollTip') === undefined) {
+  if (tabContainerRef.value?.$el.clientWidth > (tabsRef.value?.clientWidth ?? 0) && localStorage.getItem('tabbarScrollTip') === undefined) {
    localStorage.setItem('tabbarScrollTip', '')
    Message.info('标签栏数量超过展示区域范围，可以将鼠标移到标签栏上，通过鼠标滚轮滑动浏览', {
      title: '温馨提示',
@@ -58,12 +55,12 @@ function tabbarScrollTip() {
  }
 }
 function handlerMouserScroll(event: WheelEvent) {
-  tabsRef.value.scrollBy({
+  tabsRef.value?.scrollBy({
    left: event.deltaY || event.detail,
  })
 }
 function scrollTo(offsetLeft: number) {
-  tabsRef.value.scrollTo({
+  tabsRef.value?.scrollTo({
    left: offsetLeft - 50,
    behavior: 'smooth',
  })
@@ -170,7 +167,7 @@ onUnmounted(() => {

 <template>
  <div class="tabbar-container">
-    <div ref="tabsRef" class="tabs" @wheel.prevent="handlerMouserScroll">
+    <div ref="tabsRef" class="tabs scrollbar-none" @wheel.prevent="handlerMouserScroll">
      <TransitionGroup ref="tabContainerRef" name="tabbar" tag="div" class="tab-container">
        <div
          v-for="(element, index) in tabbarStore.list" :key="element.tabId"
@@ -198,48 +195,44 @@ onUnmounted(() => {
  </div>
 </template>

-<style lang="scss">
+<style>
 .tabbar-contextmenu {
-  z-index: 1000;
+  --uno: fixed ring-1 ring-stone-2 dark-ring-stone-7 shadow-2xl;

-  .mx-context-menu {
-    --at-apply: fixed ring-1 ring-stone-2 dark-ring-stone-7 shadow-2xl;
+  background-color: var(--g-container-bg);

-    background-color: var(--g-container-bg);
+  .mx-context-menu-items .mx-context-menu-item {
+    --uno: transition-background-color;

-    .mx-context-menu-items .mx-context-menu-item {
-      --at-apply: transition-background-color;
-
-      &:not(.disabled):hover {
-        --at-apply: cursor-pointer bg-stone-1 dark-bg-stone-9;
-      }
-
-      span {
-        color: initial;
-      }
-
-      .icon {
-        color: initial;
-      }
-
-      &.disabled span,
-      &.disabled .icon {
-        opacity: 0.25;
-      }
+    &:not(.disabled):hover {
+      --uno: cursor-pointer bg-stone-1 dark-bg-stone-9;
    }

-    .mx-context-menu-item-sperator {
-      background-color: var(--g-container-bg);
+    span {
+      color: initial;
+    }

-      &::after {
-        --at-apply: bg-stone-2 dark-bg-stone-7;
-      }
+    .icon {
+      color: initial;
+    }
+
+    &.disabled span,
+    &.disabled .icon {
+      opacity: 0.25;
+    }
+  }
+
+  .mx-context-menu-item-sperator {
+    background-color: var(--g-container-bg);
+
+    &::after {
+      --uno: bg-stone-2 dark-bg-stone-7;
    }
  }
 }
 </style>

-<style lang="scss" scoped>
+<style scoped>
 .tabbar-container {
  position: relative;
  height: var(--g-tabbar-height);
@@ -253,14 +246,6 @@ onUnmounted(() => {
    overflow-y: hidden;
    white-space: nowrap;

-    // firefox隐藏滚动条
-    scrollbar-width: none;
-
-    // chrome隐藏滚动条
-    &::-webkit-scrollbar {
-      display: none;
-    }
-
    .tab-container {
      display: inline-block;

@@ -410,14 +395,14 @@ onUnmounted(() => {
            transform: translateY(-50%);

            &:hover {
-              --at-apply: ring-1 ring-stone-3 dark-ring-stone-7;
+              --uno: ring-1 ring-stone-3 dark-ring-stone-7;

              background-color: var(--g-bg);
            }
          }

          .hotkey-number {
-            --at-apply: ring-1 ring-stone-3 dark-ring-stone-7;
+            --uno: ring-1 ring-stone-3 dark-ring-stone-7;

            position: absolute;
            top: 50%;
@@ -440,7 +425,7 @@ onUnmounted(() => {
  }
 }

-// 标签栏动画
+/* 标签栏动画 */
 .tabs {
  .tabbar-move,
  .tabbar-enter-active,
@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import useSettingsStore from '@/store/modules/settings'
 import { compile } from 'path-to-regexp'
 import Breadcrumb from '../../../Breadcrumb/index.vue'
 import BreadcrumbItem from '../../../Breadcrumb/item.vue'
-import useSettingsStore from '@/store/modules/settings'

 const route = useRoute()

@@ -45,8 +45,8 @@ function pathCompile(path: string) {
  </Breadcrumb>
 </template>

-<style lang="scss" scoped>
-// 面包屑动画
+<style scoped>
+/* 面包屑动画 */
 .breadcrumb-enter-active {
  transition: transform 0.3s, opacity 0.3s;
 }
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useFullscreen } from '@vueuse/core'
 import useSettingsStore from '@/store/modules/settings'
+import { useFullscreen } from '@vueuse/core'

 defineOptions({
  name: 'Fullscreen',
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import eventBus from '@/utils/eventBus'
 import useSettingsStore from '@/store/modules/settings'
+import eventBus from '@/utils/eventBus'

 defineOptions({
  name: 'ToolbarRightSide',
@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import useSettingsStore from '@/store/modules/settings'
 import LeftSide from './leftSide.vue'
 import RightSide from './rightSide.vue'
-import useSettingsStore from '@/store/modules/settings'

 defineOptions({
  name: 'Toolbar',
@@ -15,13 +15,13 @@ const settingsStore = useSettingsStore()
    <div class="h-full flex items-center of-hidden pl-2 pr-16" style="mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 50px), transparent);">
      <LeftSide />
    </div>
-    <div v-show="['side', 'single'].includes(settingsStore.settings.menu.menuMode)" class="h-full flex items-center px-2">
+    <div v-if="['side', 'single'].includes(settingsStore.settings.menu.mode) || settingsStore.mode === 'mobile'" class="h-full flex items-center px-2">
      <RightSide />
    </div>
  </div>
 </template>

-<style lang="scss" scoped>
+<style scoped>
 .toolbar-container {
  height: var(--g-toolbar-height);
  background-color: var(--g-container-bg);
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import Breadcrumb from './Breadcrumb/index.vue'
 import useSettingsStore from '@/store/modules/settings'
+import Breadcrumb from './Breadcrumb/index.vue'

 defineOptions({
  name: 'ToolbarLeftSide',
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import NavSearch from './NavSearch/index.vue'
-import Fullscreen from './Fullscreen/index.vue'
-import PageReload from './PageReload/index.vue'
-import ColorScheme from './ColorScheme/index.vue'
-import eventBus from '@/utils/eventBus'
 import useSettingsStore from '@/store/modules/settings'
 import useUserStore from '@/store/modules/user'
+import eventBus from '@/utils/eventBus'
+import ColorScheme from './ColorScheme/index.vue'
+import Fullscreen from './Fullscreen/index.vue'
+import NavSearch from './NavSearch/index.vue'
+import PageReload from './PageReload/index.vue'

 defineOptions({
  name: 'Tools',
@@ -34,13 +34,12 @@ watch(() => userStore.avatar, () => {
      :items="[
        [
          { label: settingsStore.settings.home.title, handle: () => router.push({ path: settingsStore.settings.home.fullPath }), hide: !settingsStore.settings.home.enable },
-          { label: '个人设置', handle: () => router.push({ name: 'personalSetting' }) },
        ],
        [
          { label: '快捷键介绍', handle: () => eventBus.emit('global-hotkeys-intro-toggle'), hide: settingsStore.mode !== 'pc' },
        ],
        [
-          { label: '退出登录', handle: () => userStore.logout() },
+          { label: '退出登录', handle: () => userStore.logout(settingsStore.settings.home.fullPath) },
        ],
      ]" class="flex-center cursor-pointer px-2"
    >
@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import useSettingsStore from '@/store/modules/settings'
 import Tabbar from './Tabbar/index.vue'
 import Toolbar from './Toolbar/index.vue'
-import useSettingsStore from '@/store/modules/settings'

 defineOptions({
  name: 'Topbar',
@@ -11,7 +11,7 @@ const settingsStore = useSettingsStore()

 const enableToolbar = computed(() => {
  return !(
-    settingsStore.settings.menu.menuMode === 'head' && (
+    settingsStore.settings.menu.mode === 'head' && (
      !settingsStore.settings.toolbar.breadcrumb || settingsStore.settings.app.routeBaseOn === 'filesystem'
    )
  )
@@ -53,7 +53,7 @@ watch(scrollTop, (val, oldVal) => {
  </div>
 </template>

-<style lang="scss" scoped>
+<style scoped>
 .topbar-container {
  position: absolute;
  top: 0;
@@ -46,7 +46,7 @@ function open() {
  </div>
 </template>

-<style lang="scss" scoped>
+<style scoped>
 .slide-right-enter-active {
  transition: 0.2s;
 }
@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import hotkeys from 'hotkeys-js'
-import Header from './components/Header/index.vue'
-import MainSidebar from './components/MainSidebar/index.vue'
-import SubSidebar from './components/SubSidebar/index.vue'
-import Topbar from './components/Topbar/index.vue'
-import Search from './components/Search/index.vue'
-import HotkeysIntro from './components/HotkeysIntro/index.vue'
-import AppSetting from './components/AppSetting/index.vue'
-import LinkView from './components/views/link.vue'
-import Copyright from './components/Copyright/index.vue'
-import BackTop from './components/BackTop/index.vue'
-import useSettingsStore from '@/store/modules/settings'
 import useKeepAliveStore from '@/store/modules/keepAlive'
 import useMenuStore from '@/store/modules/menu'
+import useSettingsStore from '@/store/modules/settings'
 import eventBus from '@/utils/eventBus'
+import hotkeys from 'hotkeys-js'
+import AppSetting from './components/AppSetting/index.vue'
+import BackTop from './components/BackTop/index.vue'
+import Copyright from './components/Copyright/index.vue'
+import Header from './components/Header/index.vue'
+import HotkeysIntro from './components/HotkeysIntro/index.vue'
+import MainSidebar from './components/MainSidebar/index.vue'
+import Search from './components/Search/index.vue'
+import SubSidebar from './components/SubSidebar/index.vue'
+import Topbar from './components/Topbar/index.vue'
+import LinkView from './components/views/link.vue'

 defineOptions({
  name: 'Layout',
@@ -28,6 +28,27 @@ const menuStore = useMenuStore()
 const mainPage = useMainPage()
 const menu = useMenu()

+// 侧边栏主导航当前实际宽度
+const mainSidebarActualWidth = computed(() => {
+  let actualWidth = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--g-main-sidebar-width'))
+  if (settingsStore.settings.menu.mode === 'single' || (settingsStore.settings.menu.mode === 'head' && settingsStore.mode !== 'mobile')) {
+    actualWidth = 0
+  }
+  return `${actualWidth}px`
+})
+
+// 侧边栏次导航当前实际宽度
+const subSidebarActualWidth = computed(() => {
+  let actualWidth = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--g-sub-sidebar-width'))
+  if (settingsStore.settings.menu.subMenuCollapse && settingsStore.mode !== 'mobile') {
+    actualWidth = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--g-sub-sidebar-collapse-width'))
+  }
+  if (menuStore.sidebarMenus.every(item => item.meta?.menu === false)) {
+    actualWidth = 0
+  }
+  return `${actualWidth}px`
+})
+
 const isLink = computed(() => !!routeInfo.meta.link)

 watch(() => settingsStore.settings.menu.subMenuCollapse, (val) => {
@@ -72,7 +93,12 @@ const enableAppSetting = import.meta.env.VITE_APP_SETTING === 'true'
 </script>

 <template>
-  <div class="layout">
+  <div
+    class="layout" :style="{
+      '--g-main-sidebar-actual-width': mainSidebarActualWidth,
+      '--g-sub-sidebar-actual-width': subSidebarActualWidth,
+    }"
+  >
    <div id="app-main">
      <Header />
      <div class="wrapper">
@@ -85,7 +111,7 @@ const enableAppSetting = import.meta.env.VITE_APP_SETTING === 'true'
          <Topbar />
          <div class="main">
            <RouterView v-slot="{ Component, route }">
-              <Transition name="slide-right" mode="out-in" appear>
+              <Transition name="slide-right" mode="out-in">
                <KeepAlive :include="keepAliveStore.list">
                  <component :is="Component" v-show="!isLink" :key="route.fullPath" />
                </KeepAlive>
@@ -109,7 +135,7 @@ const enableAppSetting = import.meta.env.VITE_APP_SETTING === 'true'
  </div>
 </template>

-<style lang="scss" scoped>
+<style scoped>
 [data-mode="mobile"] {
  .sidebar-container {
    transform: translateX(calc((var(--g-main-sidebar-width) + var(--g-sub-sidebar-width)) * -1));
@@ -240,7 +266,7 @@ header:not(.header-leave-active) + .wrapper {
 }

 .app-setting {
-  --at-apply: text-white dark-text-dark bg-ui-primary;
+  --uno: text-white dark-text-dark bg-ui-primary;

  position: fixed;
  top: calc(50% + 250px);
@@ -271,7 +297,7 @@ header:not(.header-leave-active) + .wrapper {
  }
 }

-// 主内容区动画
+/* 主内容区动画 */
 .slide-right-enter-active {
  transition: 0.2s;
 }
@@ -19,7 +19,7 @@ const myItems = computed(() => {
  <VMenu :show-triggers="['hover']" :auto-hide="false" :popper-triggers="['hover', 'click']" :delay="200" v-bind="$attrs">
    <slot />
    <template #popper>
-      <div v-for="(item, index) in myItems" :key="index" class="b-b-(stone-2 solid) p-1 last-b-b-size-0 dark-b-b-(stone-7)">
+      <div v-for="(item, index) in myItems" :key="index" class="b-b-(1 stone-2 solid) p-1 dark-b-b-(1 stone-7) last-b-b-size-0">
        <button v-for="(v, i) in item" :key="i" :disabled="v.disabled" class="w-full flex cursor-pointer items-center gap-2 border-size-0 rounded-md bg-inherit px-2 py-1.5 text-sm text-dark disabled-cursor-not-allowed dark-text-white disabled-opacity-50 hover-not-disabled-bg-stone-1 dark-hover-not-disabled-bg-stone-9" @click="v.handle">
          {{ v.label }}
        </button>
@@ -11,7 +11,7 @@ withDefaults(

 const value = defineModel<T>()

-const inputRef = ref()
+const inputRef = useTemplateRef('inputRef')

 defineExpose({
  ref: inputRef,
@@ -20,6 +20,6 @@ defineExpose({

 <template>
  <div class="relative w-full lg-w-48">
-    <input v-model="value" type="text" :placeholder="placeholder" :disabled="disabled" class="relative block w-full border-0 rounded-md bg-white px-2.5 py-1.5 text-sm shadow-sm ring-1 ring-stone-2 ring-inset disabled-cursor-not-allowed dark-bg-dark disabled-opacity-50 focus-outline-none focus-ring-2 dark-ring-stone-8 focus-ring-ui-primary placeholder-stone-4 dark-placeholder-stone-5">
+    <input ref="inputRef" v-model="value" type="text" :placeholder="placeholder" :disabled="disabled" class="relative block w-full border-0 rounded-md bg-white px-2.5 py-1.5 text-sm shadow-sm ring-1 ring-stone-2 ring-inset disabled-cursor-not-allowed dark-bg-dark disabled-opacity-50 focus-outline-none focus-ring-2 dark-ring-stone-8 focus-ring-ui-primary placeholder-stone-4 dark-placeholder-stone-5">
  </div>
 </template>
@@ -38,7 +38,7 @@ function handleChange(index: number) {
    <TabList class="inline-flex select-none items-center justify-center rounded-md bg-stone-1 p-1 ring-1 ring-stone-2 dark-bg-stone-9 dark-ring-stone-8">
      <Tab v-for="(option, index) in options" :key="index" v-slot="{ selected }" as="template">
        <button
-          class="w-full inline-flex items-center justify-center gap-1 break-keep border-size-0 rounded-md bg-inherit px-2 py-1.5 text-sm text-dark ring-stone-2 ring-inset dark-text-white focus-outline-none focus-ring-2 dark-ring-stone-8" :class="{
+          class="w-full inline-flex items-center justify-center gap-1 whitespace-nowrap border-size-0 rounded-md bg-inherit px-2 py-1.5 text-sm text-dark ring-stone-2 ring-inset dark-text-white focus-outline-none focus-ring-2 dark-ring-stone-8" :class="{
            'cursor-default bg-white dark-bg-dark-9': selected,
            'cursor-pointer opacity-50 hover-(opacity-100)': !selected,
          }"
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 withDefaults(
  defineProps<{
-    text: string
+    text?: string
    enable?: boolean
  }>(),
  {
@@ -1,18 +1,18 @@
-import '@/utils/system.copyright'
-
 import FloatingVue from 'floating-vue'
-import 'floating-vue/dist/style.css'

 import Message from 'vue-m-message'
-import 'vue-m-message/dist/style.css'
-
-import 'overlayscrollbars/overlayscrollbars.css'
-
 import App from './App.vue'
-import pinia from './store'
+
 import router from './router'
+import pinia from './store'
+
 import ui from './ui-provider'

+import '@/utils/system.copyright'
+import 'floating-vue/dist/style.css'
+import 'vue-m-message/dist/style.css'
+import 'overlayscrollbars/overlayscrollbars.css'
+
 // 自定义指令
 import directive from '@/utils/directive'

@@ -26,7 +26,7 @@ import icons from '@/iconify/index.json'
 import 'virtual:uno.css'

 // 全局样式
-import '@/assets/styles/globals.scss'
+import '@/assets/styles/globals.css'

 const app = createApp(App)
 app.use(FloatingVue, {
@@ -1,7 +1,7 @@
-import MultilevelMenuExample from './modules/multilevel.menu.example'
-
 import type { Menu } from '#/global'

+import MultilevelMenuExample from './modules/multilevel.menu.example'
+
 const menu: Menu.recordMainRaw[] = [
  {
    meta: {
@@ -1,5 +1,5 @@
-import { defineFakeRoute } from 'vite-plugin-fake-server/client'
 import Mock from 'mockjs'
+import { defineFakeRoute } from 'vite-plugin-fake-server/client'

 export default defineFakeRoute([
  {
@@ -12,7 +12,7 @@ export default defineFakeRoute([
        data: Mock.mock({
          account: body.account,
          token: `${body.account}_@string`,
-          avatar: 'https://fantastic-admin.github.io/logo.png',
+          avatar: 'https://fantastic-admin.hurui.me/logo.png',
        }),
      }
    },
@@ -0,0 +1,210 @@
+import type { Router, RouteRecordRaw } from 'vue-router'
+import useKeepAliveStore from '@/store/modules/keepAlive'
+import useMenuStore from '@/store/modules/menu'
+import useRouteStore from '@/store/modules/route'
+import useSettingsStore from '@/store/modules/settings'
+import useUserStore from '@/store/modules/user'
+import { useNProgress } from '@vueuse/integrations/useNProgress'
+import { asyncRoutes, asyncRoutesByFilesystem } from './routes'
+import '@/assets/styles/nprogress.css'
+
+function setupRoutes(router: Router) {
+  router.beforeEach(async (to, _from, next) => {
+    const settingsStore = useSettingsStore()
+    const userStore = useUserStore()
+    const routeStore = useRouteStore()
+    const menuStore = useMenuStore()
+    // 是否已登录
+    if (userStore.isLogin) {
+      // 是否已根据权限动态生成并注册路由
+      if (routeStore.isGenerate) {
+        // 导航栏如果不是 single 模式，则需要根据 path 定位主导航的选中状态
+        settingsStore.settings.menu.mode !== 'single' && menuStore.setActived(to.path)
+        // 如果已登录状态下，进入登录页会强制跳转到主页
+        if (to.name === 'login') {
+          next({
+            path: settingsStore.settings.home.fullPath,
+            replace: true,
+          })
+        }
+        // 如果未开启主页，但进入的是主页，则会进入侧边栏导航第一个模块
+        else if (!settingsStore.settings.home.enable && to.fullPath === settingsStore.settings.home.fullPath) {
+          if (menuStore.sidebarMenus.length > 0) {
+            next({
+              path: menuStore.sidebarMenusFirstDeepestPath,
+              replace: true,
+            })
+          }
+          // 如果侧边栏导航第一个模块均无法命中，则还是进入主页
+          else {
+            next()
+          }
+        }
+        // 正常访问页面
+        else {
+          next()
+        }
+      }
+      else {
+        // 获取用户权限
+        settingsStore.settings.app.enablePermission && await userStore.getPermissions()
+        // 生成动态路由
+        switch (settingsStore.settings.app.routeBaseOn) {
+          case 'frontend':
+            routeStore.generateRoutesAtFront(asyncRoutes)
+            break
+          case 'backend':
+            await routeStore.generateRoutesAtBack()
+            break
+          case 'filesystem':
+            routeStore.generateRoutesAtFilesystem(asyncRoutesByFilesystem)
+            // 文件系统生成的路由，需要手动生成导航数据
+            switch (settingsStore.settings.menu.baseOn) {
+              case 'frontend':
+                menuStore.generateMenusAtFront()
+                break
+              case 'backend':
+                await menuStore.generateMenusAtBack()
+                break
+            }
+            break
+        }
+        // 注册并记录路由数据
+        // 记录的数据会在登出时会使用到，不使用 router.removeRoute 是考虑配置的路由可能不一定有设置 name ，则通过调用 router.addRoute() 返回的回调进行删除
+        const removeRoutes: (() => void)[] = []
+        routeStore.flatRoutes.forEach((route) => {
+          if (!/^(?:https?:|mailto:|tel:)/.test(route.path)) {
+            removeRoutes.push(router.addRoute(route as RouteRecordRaw))
+          }
+        })
+        if (settingsStore.settings.app.routeBaseOn !== 'filesystem') {
+          routeStore.flatSystemRoutes.forEach((route) => {
+            removeRoutes.push(router.addRoute(route as RouteRecordRaw))
+          })
+        }
+        routeStore.setCurrentRemoveRoutes(removeRoutes)
+        // 动态路由生成并注册后，重新进入当前路由
+        next({
+          path: to.path,
+          query: to.query,
+          replace: true,
+        })
+      }
+    }
+    else {
+      if (to.name !== 'login') {
+        next({
+          name: 'login',
+          query: {
+            redirect: to.fullPath !== settingsStore.settings.home.fullPath ? to.fullPath : undefined,
+          },
+        })
+      }
+      else {
+        next()
+      }
+    }
+  })
+}
+
+// 进度条
+function setupProgress(router: Router) {
+  const { isLoading } = useNProgress()
+  router.beforeEach((_to, _from, next) => {
+    const settingsStore = useSettingsStore()
+    if (settingsStore.settings.app.enableProgress) {
+      isLoading.value = true
+    }
+    next()
+  })
+  router.afterEach(() => {
+    const settingsStore = useSettingsStore()
+    if (settingsStore.settings.app.enableProgress) {
+      isLoading.value = false
+    }
+  })
+}
+
+// 标题
+function setupTitle(router: Router) {
+  router.afterEach((to) => {
+    const settingsStore = useSettingsStore()
+    if (settingsStore.settings.app.routeBaseOn !== 'filesystem') {
+      settingsStore.setTitle(to.meta.breadcrumbNeste?.at(-1)?.title ?? to.meta.title)
+    }
+    else {
+      settingsStore.setTitle(to.meta.title)
+    }
+  })
+}
+
+// 页面缓存
+function setupKeepAlive(router: Router) {
+  router.afterEach((to, from) => {
+    const keepAliveStore = useKeepAliveStore()
+    // 判断当前页面是否开启缓存，如果开启，则将当前页面的 name 信息存入 keep-alive 全局状态
+    if (to.meta.cache) {
+      const componentName = to.matched.at(-1)?.components?.default.name
+      if (componentName) {
+        keepAliveStore.add(componentName)
+      }
+      else {
+        // turbo-console-disable-next-line
+        console.warn('[Fantastic-admin] 该页面组件未设置组件名，会导致缓存失效，请检查')
+      }
+    }
+    // 判断离开页面是否开启缓存，如果开启，则根据缓存规则判断是否需要清空 keep-alive 全局状态里离开页面的 name 信息
+    if (from.meta.cache) {
+      const componentName = from.matched.at(-1)?.components?.default.name
+      if (componentName) {
+        // 通过 meta.cache 判断针对哪些页面进行缓存
+        switch (typeof from.meta.cache) {
+          case 'string':
+            if (from.meta.cache !== to.name) {
+              keepAliveStore.remove(componentName)
+            }
+            break
+          case 'object':
+            if (!from.meta.cache.includes(to.name as string)) {
+              keepAliveStore.remove(componentName)
+            }
+            break
+        }
+        // 通过 meta.noCache 判断针对哪些页面不需要进行缓存
+        if (from.meta.noCache) {
+          switch (typeof from.meta.noCache) {
+            case 'string':
+              if (from.meta.noCache === to.name) {
+                keepAliveStore.remove(componentName)
+              }
+              break
+            case 'object':
+              if (from.meta.noCache.includes(to.name as string)) {
+                keepAliveStore.remove(componentName)
+              }
+              break
+          }
+        }
+        // 如果进入的是 reload 页面，则也将离开页面的缓存清空
+        if (to.name === 'reload') {
+          keepAliveStore.remove(componentName)
+        }
+      }
+    }
+  })
+}
+
+// 其他
+function setupOther(router: Router) {
+  router.afterEach(() => {
+    document.documentElement.scrollTop = 0
+  })
+}
+
+export default function setupGuards(router: Router) {
+  setupRoutes(router)
+  setupProgress(router)
+  setupTitle(router)
+  setupKeepAlive(router)
+  setupOther(router)
+}
@@ -1,186 +1,21 @@
-import { createRouter, createWebHashHistory } from 'vue-router'
-import type { RouteRecordRaw } from 'vue-router'
-import { useNProgress } from '@vueuse/integrations/useNProgress'
-import '@/assets/styles/nprogress.scss'
-
-// 路由相关数据
-import { asyncRoutes, asyncRoutesByFilesystem, constantRoutes, constantRoutesByFilesystem } from './routes'
 import pinia from '@/store'
 import useSettingsStore from '@/store/modules/settings'
-import useKeepAliveStore from '@/store/modules/keepAlive'
-import useUserStore from '@/store/modules/user'
-import useRouteStore from '@/store/modules/route'
-import useMenuStore from '@/store/modules/menu'
+import { loadingFadeOut } from 'virtual:app-loading'

-const { isLoading } = useNProgress()
+import { createRouter, createWebHashHistory } from 'vue-router'
+import setupGuards from './guards'
+// 路由相关数据
+import { constantRoutes, constantRoutesByFilesystem } from './routes'

 const router = createRouter({
  history: createWebHashHistory(),
-  routes: useSettingsStore(pinia).settings.app.routeBaseOn === 'filesystem' ? constantRoutesByFilesystem : constantRoutes as RouteRecordRaw[],
+  routes: useSettingsStore(pinia).settings.app.routeBaseOn === 'filesystem' ? constantRoutesByFilesystem : constantRoutes,
 })

-router.beforeEach(async (to, from, next) => {
-  const settingsStore = useSettingsStore()
-  const userStore = useUserStore()
-  const routeStore = useRouteStore()
-  const menuStore = useMenuStore()
-  settingsStore.settings.app.enableProgress && (isLoading.value = true)
-  // 是否已登录
-  if (userStore.isLogin) {
-    // 是否已根据权限动态生成并注册路由
-    if (routeStore.isGenerate) {
-      // 导航栏如果不是 single 模式，则需要根据 path 定位主导航的选中状态
-      settingsStore.settings.menu.menuMode !== 'single' && menuStore.setActived(to.path)
-      // 如果已登录状态下，进入登录页会强制跳转到主页
-      if (to.name === 'login') {
-        next({
-          path: settingsStore.settings.home.fullPath,
-          replace: true,
-        })
-      }
-      // 如果未开启主页，但进入的是主页，则会进入侧边栏导航第一个模块
-      else if (!settingsStore.settings.home.enable && to.fullPath === settingsStore.settings.home.fullPath) {
-        if (menuStore.sidebarMenus.length > 0) {
-          next({
-            path: menuStore.sidebarMenusFirstDeepestPath,
-            replace: true,
-          })
-        }
-        // 如果侧边栏导航第一个模块均无法命中，则还是进入主页
-        else {
-          next()
-        }
-      }
-      // 正常访问页面
-      else {
-        next()
-      }
-    }
-    else {
-      // 获取用户权限
-      settingsStore.settings.app.enablePermission && await userStore.getPermissions()
-      // 生成动态路由
-      switch (settingsStore.settings.app.routeBaseOn) {
-        case 'frontend':
-          routeStore.generateRoutesAtFront(asyncRoutes)
-          break
-        case 'backend':
-          await routeStore.generateRoutesAtBack()
-          break
-        case 'filesystem':
-          routeStore.generateRoutesAtFilesystem(asyncRoutesByFilesystem)
-          // 文件系统生成的路由，需要手动生成导航数据
-          switch (settingsStore.settings.menu.baseOn) {
-            case 'frontend':
-              menuStore.generateMenusAtFront()
-              break
-            case 'backend':
-              await menuStore.generateMenusAtBack()
-              break
-          }
-          break
-      }
-      // 注册并记录路由数据
-      // 记录的数据会在登出时会使用到，不使用 router.removeRoute 是考虑配置的路由可能不一定有设置 name ，则通过调用 router.addRoute() 返回的回调进行删除
-      const removeRoutes: (() => void)[] = []
-      routeStore.flatRoutes.forEach((route) => {
-        if (!/^(?:https?:|mailto:|tel:)/.test(route.path)) {
-          removeRoutes.push(router.addRoute(route as RouteRecordRaw))
-        }
-      })
-      if (settingsStore.settings.app.routeBaseOn !== 'filesystem') {
-        routeStore.flatSystemRoutes.forEach((route) => {
-          removeRoutes.push(router.addRoute(route as RouteRecordRaw))
-        })
-      }
-      routeStore.setCurrentRemoveRoutes(removeRoutes)
-      // 动态路由生成并注册后，重新进入当前路由
-      next({
-        path: to.path,
-        query: to.query,
-        replace: true,
-      })
-    }
-  }
-  else {
-    if (to.name !== 'login') {
-      next({
-        name: 'login',
-        query: {
-          redirect: to.fullPath !== settingsStore.settings.home.fullPath ? to.fullPath : undefined,
-        },
-      })
-    }
-    else {
-      next()
-    }
-  }
-})
+setupGuards(router)

-router.afterEach((to, from) => {
-  const settingsStore = useSettingsStore()
-  const keepAliveStore = useKeepAliveStore()
-  settingsStore.settings.app.enableProgress && (isLoading.value = false)
-  // 设置页面 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
-    if (componentName) {
-      keepAliveStore.add(componentName)
-    }
-    else {
-      // turbo-console-disable-next-line
-      console.warn('[Fantastic-admin] 该页面组件未设置组件名，会导致缓存失效，请检查')
-    }
-  }
-  // 判断离开页面是否开启缓存，如果开启，则根据缓存规则判断是否需要清空 keep-alive 全局状态里离开页面的 name 信息
-  if (from.meta.cache) {
-    const componentName = from.matched.at(-1)?.components?.default.name
-    if (componentName) {
-      // 通过 meta.cache 判断针对哪些页面进行缓存
-      switch (typeof from.meta.cache) {
-        case 'string':
-          if (from.meta.cache !== to.name) {
-            keepAliveStore.remove(componentName)
-          }
-          break
-        case 'object':
-          if (!from.meta.cache.includes(to.name as string)) {
-            keepAliveStore.remove(componentName)
-          }
-          break
-      }
-      // 通过 meta.noCache 判断针对哪些页面不需要进行缓存
-      if (from.meta.noCache) {
-        switch (typeof from.meta.noCache) {
-          case 'string':
-            if (from.meta.noCache === to.name) {
-              keepAliveStore.remove(componentName)
-            }
-            break
-          case 'object':
-            if (from.meta.noCache.includes(to.name as string)) {
-              keepAliveStore.remove(componentName)
-            }
-            break
-        }
-      }
-      // 如果进入的是 reload 页面，则也将离开页面的缓存清空
-      if (to.name === 'reload') {
-        keepAliveStore.remove(componentName)
-      }
-    }
-  }
-  document.documentElement.scrollTop = 0
+router.isReady().then(() => {
+  loadingFadeOut()
 })

 export default router
@@ -1,9 +1,9 @@
-import { setupLayouts } from 'virtual:meta-layouts'
-import generatedRoutes from 'virtual:generated-pages'
-import type { RouteRecordRaw } from 'vue-router'
-import MultilevelMenuExample from './modules/multilevel.menu.example'
 import type { Route } from '#/global'
+import type { RouteRecordRaw } from 'vue-router'
 import useSettingsStore from '@/store/modules/settings'
+import generatedRoutes from 'virtual:generated-pages'
+import { setupLayouts } from 'virtual:meta-layouts'
+import MultilevelMenuExample from './modules/multilevel.menu.example'

 // 固定路由（默认路由）
 const constantRoutes: RouteRecordRaw[] = [
@@ -79,9 +79,9 @@ const asyncRoutesByFilesystem = setupLayouts(generatedRoutes.filter((item) => {
 }))

 export {
-  constantRoutes,
-  systemRoutes,
  asyncRoutes,
-  constantRoutesByFilesystem,
  asyncRoutesByFilesystem,
+  constantRoutes,
+  constantRoutesByFilesystem,
+  systemRoutes,
 }
@@ -5,6 +5,8 @@ import type { RecursiveRequired, Settings } from '#/global'
 const globalSettingsDefault: RecursiveRequired<Settings.all> = {
  app: {
    colorScheme: 'light',
+    enableMournMode: false,
+    enableColorAmblyopiaMode: false,
    enablePermission: false,
    enableProgress: true,
    enableDynamicTitle: false,
@@ -20,7 +22,7 @@ const globalSettingsDefault: RecursiveRequired<Settings.all> = {
  },
  menu: {
    baseOn: 'frontend',
-    menuMode: 'side',
+    mode: 'side',
    switchMainMenuAndPageJump: false,
    subMenuUniqueOpened: true,
    subMenuCollapse: false,
@@ -1,6 +1,6 @@
-import { defaultsDeep } from 'lodash-es'
 import type { RecursiveRequired, Settings } from '#/global'
 import settingsDefault from '@/settings.default'
+import { defaultsDeep } from 'lodash-es'

 const globalSettings: Settings.all = {
  // 请在此处编写或粘贴配置代码
@@ -1,12 +1,12 @@
-import { cloneDeep } from 'lodash-es'
+import type { Menu, Route } from '#/global'
 import type { RouteRecordRaw } from 'vue-router'
-import useSettingsStore from './settings'
-import useUserStore from './user'
-import useRouteStore from './route'
-import { resolveRoutePath } from '@/utils'
 import apiApp from '@/api/modules/app'
 import menu from '@/menu'
-import type { Menu, Route } from '#/global'
+import { resolveRoutePath } from '@/utils'
+import { cloneDeep } from 'lodash-es'
+import useRouteStore from './route'
+import useSettingsStore from './settings'
+import useUserStore from './user'

 const useMenuStore = defineStore(
  // 唯一ID
@@ -23,24 +23,26 @@ const useMenuStore = defineStore(
    function convertRouteToMenu(routes: Route.recordMainRaw[]): Menu.recordMainRaw[] {
      const returnMenus: Menu.recordMainRaw[] = []
      routes.forEach((item) => {
-        if (settingsStore.settings.menu.menuMode === 'single') {
-          returnMenus.length === 0 && returnMenus.push({
-            meta: {},
-            children: [],
-          })
-          returnMenus[0].children.push(...convertRouteToMenuRecursive(item.children))
-        }
-        else {
-          const menuItem: Menu.recordMainRaw = {
-            meta: {
-              title: item?.meta?.title,
-              icon: item?.meta?.icon,
-              auth: item?.meta?.auth,
-            },
-            children: [],
+        if (item.children.length > 0) {
+          if (settingsStore.settings.menu.mode === 'single') {
+            returnMenus.length === 0 && returnMenus.push({
+              meta: {},
+              children: [],
+            })
+            returnMenus[0].children.push(...convertRouteToMenuRecursive(item.children))
+          }
+          else {
+            const menuItem: Menu.recordMainRaw = {
+              meta: {
+                title: item?.meta?.title,
+                icon: item?.meta?.icon,
+                auth: item?.meta?.auth,
+              },
+              children: [],
+            }
+            menuItem.children = convertRouteToMenuRecursive(item.children)
+            returnMenus.push(menuItem)
          }
-          menuItem.children = convertRouteToMenuRecursive(item.children)
-          returnMenus.push(menuItem)
        }
      })
      return returnMenus
@@ -186,6 +188,16 @@ const useMenuStore = defineStore(
      }).catch(() => {})
    }
    // 设置主导航
+    function isPathInMenus(menus: Menu.recordRaw[], path: string) {
+      let flag = false
+      flag = menus.some((item) => {
+        if (item.children) {
+          return isPathInMenus(item.children, path)
+        }
+        return path.indexOf(`${item.path}/`) === 0 || path === item.path
+      })
+      return flag
+    }
    function setActived(data: number | string) {
      if (typeof data === 'number') {
        // 如果是 number 类型，则认为是主导航的索引
@@ -193,7 +205,7 @@ const useMenuStore = defineStore(
      }
      else {
        // 如果是 string 类型，则认为是路由，需要查找对应的主导航索引
-        const findIndex = allMenus.value.findIndex(item => item.children.some(r => data.indexOf(`${r.path}/`) === 0 || data === r.path))
+        const findIndex = allMenus.value.findIndex(item => isPathInMenus(item.children, data))
        if (findIndex >= 0) {
          actived.value = findIndex
        }
@@ -1,10 +1,10 @@
-import { cloneDeep } from 'lodash-es'
-import type { RouteRecordRaw } from 'vue-router'
-import useSettingsStore from './settings'
-import { resolveRoutePath } from '@/utils'
-import { systemRoutes } from '@/router/routes'
-import apiApp from '@/api/modules/app'
 import type { Route } from '#/global'
+import type { RouteRecordRaw } from 'vue-router'
+import apiApp from '@/api/modules/app'
+import { systemRoutes } from '@/router/routes'
+import { resolveRoutePath } from '@/utils'
+import { cloneDeep } from 'lodash-es'
+import useSettingsStore from './settings'

 const useRouteStore = defineStore(
  // 唯一ID
@@ -1,7 +1,7 @@
-import { defaultsDeep } from 'lodash-es'
-import type { RouteMeta } from 'vue-router'
 import type { Settings } from '#/global'
+import type { RouteMeta } from 'vue-router'
 import settingsDefault from '@/settings'
+import { defaultsDeep } from 'lodash-es'

 const useSettingsStore = defineStore(
  // 唯一ID
@@ -39,8 +39,25 @@ const useSettingsStore = defineStore(
          break
      }
    }
+    watch([
+      () => settings.value.app.enableMournMode,
+      () => settings.value.app.enableColorAmblyopiaMode,
+    ], (val) => {
+      document.documentElement.style.removeProperty('filter')
+      if (val[0] && val[1]) {
+        document.documentElement.style.setProperty('filter', 'grayscale(100%) invert(80%)')
+      }
+      else if (val[0]) {
+        document.documentElement.style.setProperty('filter', 'grayscale(100%)')
+      }
+      else if (val[1]) {
+        document.documentElement.style.setProperty('filter', 'invert(80%)')
+      }
+    }, {
+      immediate: true,
+    })

-    watch(() => settings.value.menu.menuMode, (val) => {
+    watch(() => settings.value.menu.mode, (val) => {
      document.body.setAttribute('data-menu-mode', val)
    }, {
      immediate: true,
@@ -1,6 +1,6 @@
+import type { Tabbar } from '#/global'
 import type { RouteLocationNormalized } from 'vue-router'
 import useKeepAliveStore from './keepAlive'
-import type { Tabbar } from '#/global'

 const useTabbarStore = defineStore(
  // 唯一ID
@@ -24,19 +24,13 @@ const useTabbarStore = defineStore(
      if (route.name !== 'reload') {
        // 记录查找到的标签页
        const findTab = list.value.find((item) => {
-          if (item.routeName) {
-            return item.routeName === route.name
-          }
-          else {
-            return item.tabId === tabId
-          }
+          return item.tabId === tabId
        })
        // 新增标签页
        if (!findTab) {
          const listItem = {
            tabId,
            fullPath: route.fullPath,
-            routeName: route.name,
            title: typeof meta?.title === 'function' ? meta.title() : meta?.title,
            icon: meta?.icon ?? meta?.breadcrumbNeste?.findLast(item => item.icon)?.icon,
            name: names,
@@ -119,7 +113,7 @@ const useTabbarStore = defineStore(
        }
      })
      keepAliveStore.remove(name)
-      list.value = list.value.filter((item, i) => {
+      list.value = list.value.filter((_item, i) => {
        return i >= index
      })
    }
@@ -144,7 +138,7 @@ const useTabbarStore = defineStore(
        }
      })
      keepAliveStore.remove(name)
-      list.value = list.value.filter((item, i) => {
+      list.value = list.value.filter((_item, i) => {
        return i <= index
      })
    }
@@ -1,8 +1,9 @@
-import useSettingsStore from './settings'
-import useRouteStore from './route'
-import useMenuStore from './menu'
-import router from '@/router'
 import apiUser from '@/api/modules/user'
+import router from '@/router'
+import useMenuStore from './menu'
+import useRouteStore from './route'
+import useSettingsStore from './settings'
+import useTabbarStore from './tabbar'

 const useUserStore = defineStore(
  // 唯一ID
@@ -11,6 +12,7 @@ const useUserStore = defineStore(
    const settingsStore = useSettingsStore()
    const routeStore = useRouteStore()
    const menuStore = useMenuStore()
+    const tabbarStore = useTabbarStore()

    const account = ref(localStorage.account ?? '')
    const token = ref(localStorage.token ?? '')
@@ -47,10 +49,11 @@ const useUserStore = defineStore(
      permissions.value = []
      routeStore.removeRoutes()
      menuStore.setActived(0)
+      settingsStore.settings.tabbar.enable && tabbarStore.clean()
      router.push({
        name: 'login',
        query: {
-          ...(router.currentRoute.value.path !== settingsStore.settings.home.fullPath && router.currentRoute.value.name !== 'login' && { redirect }),
+          ...(redirect !== settingsStore.settings.home.fullPath && router.currentRoute.value.name !== 'login' && { redirect }),
        },
      })
    }
@@ -3,6 +3,7 @@
 // @ts-nocheck
 // noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
+// biome-ignore lint: disable
 export {}
 declare global {
  const EffectScope: typeof import('vue')['EffectScope']
@@ -46,6 +47,7 @@ declare global {
  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
  const onUnmounted: typeof import('vue')['onUnmounted']
  const onUpdated: typeof import('vue')['onUpdated']
+  const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
  const provide: typeof import('vue')['provide']
  const reactive: typeof import('vue')['reactive']
  const readonly: typeof import('vue')['readonly']
@@ -68,13 +70,16 @@ declare global {
  const useCssModule: typeof import('vue')['useCssModule']
  const useCssVars: typeof import('vue')['useCssVars']
  const useGlobalProperties: typeof import('../utils/composables/useGlobalProperties')['default']
+  const useId: typeof import('vue')['useId']
  const useLink: typeof import('vue-router')['useLink']
  const useMainPage: typeof import('../utils/composables/useMainPage')['default']
  const useMenu: typeof import('../utils/composables/useMenu')['default']
+  const useModel: typeof import('vue')['useModel']
  const useRoute: typeof import('vue-router')['useRoute']
  const useRouter: typeof import('vue-router')['useRouter']
  const useSlots: typeof import('vue')['useSlots']
  const useTabbar: typeof import('../utils/composables/useTabbar')['default']
+  const useTemplateRef: typeof import('vue')['useTemplateRef']
  const useViewTransition: typeof import('../utils/composables/useViewTransition')['default']
  const watch: typeof import('vue')['watch']
  const watchEffect: typeof import('vue')['watchEffect']
@@ -84,6 +89,6 @@ declare global {
 // for type re-export
 declare global {
  // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
  import('vue')
 }
@@ -8,7 +8,6 @@ export {}
 declare module 'vue' {
  export interface GlobalComponents {
    Auth: typeof import('./../components/Auth/index.vue')['default']
-    AuthAll: typeof import('./../components/AuthAll/index.vue')['default']
    FileUpload: typeof import('./../components/FileUpload/index.vue')['default']
    FixedActionBar: typeof import('./../components/FixedActionBar/index.vue')['default']
    HButton: typeof import('./../layouts/ui-kit/HButton.vue')['default']
@@ -26,10 +25,13 @@ declare module 'vue' {
    ImagePreview: typeof import('./../components/ImagePreview/index.vue')['default']
    ImagesUpload: typeof import('./../components/ImagesUpload/index.vue')['default']
    ImageUpload: typeof import('./../components/ImageUpload/index.vue')['default']
+    LoginForm: typeof import('./../components/LoginForm/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']
+    RegisterForm: typeof import('./../components/RegisterForm/index.vue')['default']
+    ResetPasswordForm: typeof import('./../components/ResetPasswordForm/index.vue')['default']
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
    SearchBar: typeof import('./../components/SearchBar/index.vue')['default']
@@ -1,4 +1,4 @@
-import type { RouteRecordName, RouteRecordRaw } from 'vue-router'
+import type { RouteRecordRaw } from 'vue-router'

 type RecursiveRequired<T> = {
  [P in keyof T]-?: RecursiveRequired<T[P]>
@@ -16,6 +16,16 @@ declare namespace Settings {
     * @可选值 `'dark'` 暗黑模式
     */
    colorScheme?: '' | 'light' | 'dark'
+    /**
+     * 是否开启哀悼模式
+     * @默认值 `false`
+     */
+    enableMournMode?: boolean
+    /**
+     * 是否开启色弱模式
+     * @默认值 `false`
+     */
+    enableColorAmblyopiaMode?: boolean
    /**
     * 是否开启权限功能
     * @默认值 `false`
@@ -76,7 +86,7 @@ declare namespace Settings {
     * @可选值 `'head'` 顶部模式
     * @可选值 `'single'` 侧边栏模式（无主导航）
     */
-    menuMode?: 'side' | 'head' | 'single'
+    mode?: 'side' | 'head' | 'single'
    /**
     * 切换主导航是否跳转页面
     * @默认值 `false`
@@ -284,7 +294,6 @@ declare namespace Tabbar {
  interface recordRaw {
    tabId: string
    fullPath: string
-    routeName?: RouteRecordName | null
    title?: string | (() => string)
    icon?: string
    name: string[]
@@ -1,5 +1,5 @@
-import useSettingsStore from '@/store/modules/settings'
 import useMenuStore from '@/store/modules/menu'
+import useSettingsStore from '@/store/modules/settings'

 export default function useMenu() {
  const router = useRouter()
@@ -1,6 +1,6 @@
 import type { RouteLocationRaw } from 'vue-router'
-import Message from 'vue-m-message'
 import useTabbarStore from '@/store/modules/tabbar'
+import Message from 'vue-m-message'

 export default function useTabbar() {
  const route = useRoute()
@@ -1,11 +1,9 @@
 export default function useViewTransition(callback: () => void) {
  function startViewTransition() {
-    // @ts-expect-error: View Transition API
    if (!document.startViewTransition || window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
      callback()
      return
    }
-    // @ts-expect-error: View Transition API
    return document.startViewTransition(async () => {
      await Promise.resolve(callback())
    })
@@ -1,19 +1,12 @@
-import type { App } from 'vue'
+import type { App, DirectiveBinding } from 'vue'

 export default function directive(app: App) {
-  // 注册 v-auth 和 v-auth-all 指令
-  app.directive('auth', {
-    mounted: (el, binding) => {
-      if (!useAuth().auth(binding.value)) {
-        el.remove()
-      }
-    },
-  })
-  app.directive('auth-all', {
-    mounted: (el, binding) => {
-      if (!useAuth().authAll(binding.value)) {
-        el.remove()
-      }
-    },
+  app.directive('auth', (el: HTMLElement, binding: DirectiveBinding) => {
+    if (binding.modifiers.all ? useAuth().authAll(binding.value) : useAuth().auth(binding.value)) {
+      el.style.display = ''
+    }
+    else {
+      el.style.display = 'none'
+    }
  })
 }
@@ -1,7 +0,0 @@
-import type { InjectionKey } from 'vue'
-
-export function createInjectionKey<T>(key: string): InjectionKey<T> {
-  return key as any
-}
-
-export const rootMenuInjectionKey = createInjectionKey<any>('rootMenu')
@@ -5,10 +5,10 @@ if (import.meta.env.PROD) {
  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://fantastic-admin.github.io')
+    console.info('%c由%cFantastic-admin%c驱动', copyright_sub_style, copyright_main_style, copyright_sub_style, '\nhttps://fantastic-admin.hurui.me')
  }
  else {
-    console.info('%cPowered by%cFantastic-admin', copyright_sub_style, copyright_main_style, '\nhttps://fantastic-admin.github.io')
+    console.info('%cPowered by%cFantastic-admin', copyright_sub_style, copyright_main_style, '\nhttps://fantastic-admin.hurui.me')
  }
 }

@@ -25,12 +25,12 @@ const fantasticAdminInfo = ref({
  imageVisible: false,
  index: 0,
  data: [
-    'https://fantastic-admin.github.io/preview1.png',
-    'https://fantastic-admin.github.io/preview2.png',
-    'https://fantastic-admin.github.io/preview3.png',
-    'https://fantastic-admin.github.io/preview4.png',
-    'https://fantastic-admin.github.io/preview5.png',
-    'https://fantastic-admin.github.io/preview6.png',
+    'https://fantastic-admin.hurui.me/preview1.png',
+    'https://fantastic-admin.hurui.me/preview2.png',
+    'https://fantastic-admin.hurui.me/preview3.png',
+    'https://fantastic-admin.hurui.me/preview4.png',
+    'https://fantastic-admin.hurui.me/preview5.png',
+    'https://fantastic-admin.hurui.me/preview6.png',
  ],
 })

@@ -38,12 +38,12 @@ const oneStepAdminInfo = ref({
  imageVisible: false,
  index: 0,
  data: [
-    'https://one-step-admin.github.io/preview1.png',
-    'https://one-step-admin.github.io/preview2.png',
-    'https://one-step-admin.github.io/preview3.png',
-    'https://one-step-admin.github.io/preview4.png',
-    'https://one-step-admin.github.io/preview5.png',
-    'https://one-step-admin.github.io/preview6.png',
+    'https://one-step-admin.hurui.me/preview1.png',
+    'https://one-step-admin.hurui.me/preview2.png',
+    'https://one-step-admin.hurui.me/preview3.png',
+    'https://one-step-admin.hurui.me/preview4.png',
+    'https://one-step-admin.hurui.me/preview5.png',
+    'https://one-step-admin.hurui.me/preview6.png',
  ],
 })

@@ -70,7 +70,7 @@ function open(url: string) {
          </div>
        </div>
      </template>
-      <HButton outline @click="open('https://fantastic-admin.github.io')">
+      <HButton outline @click="open('https://fantastic-admin.hurui.me')">
        <SvgIcon name="i-ri:file-text-line" />
        开发文档
      </HButton>
@@ -116,7 +116,7 @@ function open(url: string) {
      <PageMain class="ecology">
        <template #title>
          <div class="title-info">
-            <img src="https://fantastic-admin.github.io/logo.png">
+            <img src="https://fantastic-admin.hurui.me/logo.png">
            <div>
              <h1 class="c-[#e60000]">
                Fantastic-admin
@@ -125,7 +125,7 @@ function open(url: string) {
            </div>
          </div>
          <div class="ml-auto">
-            <HButton @click="open('https://fantastic-admin.github.io')">
+            <HButton @click="open('https://fantastic-admin.hurui.me')">
              访问官网
            </HButton>
          </div>
@@ -140,7 +140,7 @@ function open(url: string) {
      <PageMain class="ecology">
        <template #title>
          <div class="title-info">
-            <img src="https://one-step-admin.github.io/logo.png">
+            <img src="https://one-step-admin.hurui.me/logo.png">
            <div>
              <h1 class="c-[#67c23a]">
                One-step-admin
@@ -149,7 +149,7 @@ function open(url: string) {
            </div>
          </div>
          <div class="ml-auto">
-            <HButton @click="open('https://one-step-admin.github.io')">
+            <HButton @click="open('https://one-step-admin.hurui.me')">
              访问官网
            </HButton>
          </div>
@@ -165,30 +165,30 @@ function open(url: string) {
  </div>
 </template>

-<style lang="scss" scoped>
+<style scoped>
 .text-emphasis {
  text-emphasis-style: "❤";
 }

 .ecology {
-  --at-apply: flex-1 m-0;
+  --uno: flex-1 m-0;

  :deep(.title-container) {
-    --at-apply: flex items-center justify-between flex-wrap gap-4;
+    --uno: flex items-center justify-between flex-wrap gap-4;

    .title-info {
-      --at-apply: flex items-center gap-4;
+      --uno: flex items-center gap-4;

      img {
-        --at-apply: block w-12 h-12;
+        --uno: block w-12 h-12;
      }

      h1 {
-        --at-apply: m-0 text-2xl;
+        --uno: m-0 text-2xl;
      }

      h2 {
-        --at-apply: m-0 text-base text-stone-5 font-normal;
+        --uno: m-0 text-base text-stone-5 font-normal;
      }
    }
  }
@@ -6,11 +6,8 @@ meta:
 </route>

 <script setup lang="ts">
-import type { FormInstance, FormRules } from 'element-plus'
-import { ElMessage } from 'element-plus'
 import Copyright from '@/layouts/components/Copyright/index.vue'
 import useSettingsStore from '@/store/modules/settings'
-import useUserStore from '@/store/modules/user'

 defineOptions({
  name: 'Login',
@@ -18,324 +15,63 @@ defineOptions({

 const route = useRoute()
 const router = useRouter()
-
 const settingsStore = useSettingsStore()
-const userStore = useUserStore()

-const banner = new URL('../assets/images/login-banner.png', import.meta.url).href
-const logo = new URL('../assets/images/logo.png', import.meta.url).href
-const title = import.meta.env.VITE_APP_TITLE
-
-// 登录方式，default 账号密码登录，qrcode 扫码登录
-const loginType = ref('default')
-
-// 表单类型，login 登录，register 注册，reset 重置密码
-const formType = ref('login')
-const loading = ref(false)
 const redirect = ref(route.query.redirect?.toString() ?? settingsStore.settings.home.fullPath)
-
-// 登录
-const loginFormRef = ref<FormInstance>()
-const loginForm = ref({
-  account: localStorage.login_account || '',
-  password: '',
-  remember: !!localStorage.login_account,
-})
-const loginRules = ref<FormRules>({
-  account: [
-    { required: true, trigger: 'blur', message: '请输入用户名' },
-  ],
-  password: [
-    { required: true, trigger: 'blur', message: '请输入密码' },
-    { min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' },
-  ],
-})
-function handleLogin() {
-  loginFormRef.value && loginFormRef.value.validate((valid) => {
-    if (valid) {
-      loading.value = true
-      userStore.login(loginForm.value).then(() => {
-        loading.value = false
-        if (loginForm.value.remember) {
-          localStorage.setItem('login_account', loginForm.value.account)
-        }
-        else {
-          localStorage.removeItem('login_account')
-        }
-        router.push(redirect.value)
-      }).catch(() => {
-        loading.value = false
-      })
-    }
-  })
-}
-
-// 注册
-const registerFormRef = ref<FormInstance>()
-const registerForm = ref({
-  account: '',
-  captcha: '',
-  password: '',
-  checkPassword: '',
-})
-const registerRules = ref<FormRules>({
-  account: [
-    { required: true, trigger: 'blur', message: '请输入用户名' },
-  ],
-  captcha: [
-    { required: true, trigger: 'blur', message: '请输入验证码' },
-  ],
-  password: [
-    { required: true, trigger: 'blur', message: '请输入密码' },
-    { min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' },
-  ],
-  checkPassword: [
-    { required: true, trigger: 'blur', message: '请再次输入密码' },
-    {
-      validator: (rule, value, callback) => {
-        if (value !== registerForm.value.password) {
-          callback(new Error('两次输入的密码不一致'))
-        }
-        else {
-          callback()
-        }
-      },
-    },
-  ],
-})
-function handleRegister() {
-  ElMessage({
-    message: '注册模块仅提供界面演示，无实际功能，需开发者自行扩展',
-    type: 'warning',
-  })
-  registerFormRef.value && registerFormRef.value.validate((valid) => {
-    if (valid) {
-      // 这里编写业务代码
-    }
-  })
-}
-
-// 重置密码
-const resetFormRef = ref<FormInstance>()
-const resetForm = ref({
-  account: localStorage.login_account,
-  captcha: '',
-  newPassword: '',
-})
-const resetRules = ref<FormRules>({
-  account: [
-    { required: true, trigger: 'blur', message: '请输入用户名' },
-  ],
-  captcha: [
-    { required: true, trigger: 'blur', message: '请输入验证码' },
-  ],
-  newPassword: [
-    { required: true, trigger: 'blur', message: '请输入新密码' },
-    { min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' },
-  ],
-})
-function handleReset() {
-  ElMessage({
-    message: '重置密码仅提供界面演示，无实际功能，需开发者自行扩展',
-    type: 'info',
-  })
-  resetFormRef.value && resetFormRef.value.validate((valid) => {
-    if (valid) {
-      // 这里编写业务代码
-    }
-  })
-}
-
-function testAccount(account: string) {
-  loginForm.value.account = account
-  loginForm.value.password = '123456'
-  handleLogin()
-}
+const account = ref<string>()
+// 表单类型
+const formType = ref<'login' | 'register' | 'resetPassword'>('login')
 </script>

 <template>
-  <div>
-    <div class="bg-banner" />
-    <div id="login-box">
-      <div class="login-banner">
-        <img :src="logo" class="logo">
-        <img :src="banner" class="banner">
-      </div>
-      <ElForm v-show="formType === 'login'" ref="loginFormRef" :model="loginForm" :rules="loginRules" class="login-form">
-        <div class="mb-6">
-          <HTabList
-            v-model="loginType" :options="[
-              { label: '账号密码登录', value: 'default' },
-              { label: '扫码登录', value: 'qrcode' },
-            ]"
-          />
-        </div>
-        <template v-if="loginType === 'default'">
-          <div class="title-container">
-            <h3 class="title">
-              欢迎来到 {{ title }} ! 👋🏻
-            </h3>
-          </div>
-          <div>
-            <ElFormItem prop="account">
-              <ElInput v-model="loginForm.account" placeholder="用户名" type="text" tabindex="1">
-                <template #prefix>
-                  <SvgIcon name="i-ri:user-3-fill" />
-                </template>
-              </ElInput>
-            </ElFormItem>
-            <ElFormItem prop="password">
-              <ElInput v-model="loginForm.password" type="password" placeholder="密码" tabindex="2" autocomplete="new-password" show-password @keyup.enter="handleLogin">
-                <template #prefix>
-                  <SvgIcon name="i-ri:lock-2-fill" />
-                </template>
-              </ElInput>
-            </ElFormItem>
-          </div>
-          <div class="flex-bar">
-            <ElCheckbox v-model="loginForm.remember">
-              记住我
-            </ElCheckbox>
-            <ElLink type="primary" :underline="false" @click="formType = 'reset'">
-              忘记密码了?
-            </ElLink>
-          </div>
-          <ElButton :loading="loading" type="primary" size="large" style="width: 100%;" @click.prevent="handleLogin">
-            登录
-          </ElButton>
-          <div class="sub-link">
-            <span class="text">还没有帐号?</span>
-            <ElLink type="primary" :underline="false" @click="formType = 'register'">
-              创建新帐号
-            </ElLink>
-          </div>
-        </template>
-        <template v-else-if="loginType === 'qrcode'">
-          <div class="flex flex-col items-center">
-            <el-image src="https://s2.loli.net/2024/04/26/GsahtuIZ9XOg5jr.png" class="h-[250px] w-[250px]" />
-            <div class="mt-2 op-50">
-              请使用微信扫码登录
-            </div>
-          </div>
-        </template>
-        <div style="margin-top: 20px; margin-bottom: -20px; text-align: center;">
-          <ElDivider>演示账号一键登录</ElDivider>
-          <ElButton type="primary" size="small" plain @click="testAccount('admin')">
-            admin
-          </ElButton>
-          <ElButton size="small" plain @click="testAccount('test')">
-            test
-          </ElButton>
-        </div>
-      </ElForm>
-      <ElForm v-show="formType === 'register'" ref="registerFormRef" :model="registerForm" :rules="registerRules" class="login-form" auto-complete="on">
-        <div class="title-container">
-          <h3 class="title">
-            探索从这里开始! 🚀
-          </h3>
-        </div>
-        <div>
-          <ElFormItem prop="account">
-            <ElInput v-model="registerForm.account" placeholder="用户名" tabindex="1">
-              <template #prefix>
-                <SvgIcon name="i-ri:user-3-fill" />
-              </template>
-            </ElInput>
-          </ElFormItem>
-          <ElFormItem prop="captcha">
-            <ElInput v-model="registerForm.captcha" placeholder="验证码" tabindex="2">
-              <template #prefix>
-                <SvgIcon name="i-ic:baseline-verified-user" />
-              </template>
-              <template #append>
-                <ElButton>发送验证码</ElButton>
-              </template>
-            </ElInput>
-          </ElFormItem>
-          <ElFormItem prop="password">
-            <ElInput v-model="registerForm.password" type="password" placeholder="密码" tabindex="3" show-password>
-              <template #prefix>
-                <SvgIcon name="i-ri:lock-2-fill" />
-              </template>
-            </ElInput>
-          </ElFormItem>
-          <ElFormItem prop="checkPassword">
-            <ElInput v-model="registerForm.checkPassword" type="password" placeholder="确认密码" tabindex="4" show-password>
-              <template #prefix>
-                <SvgIcon name="i-ri:lock-2-fill" />
-              </template>
-            </ElInput>
-          </ElFormItem>
-        </div>
-        <ElButton :loading="loading" type="primary" size="large" style="width: 100%; margin-top: 20px;" @click.prevent="handleRegister">
-          注册
-        </ElButton>
-        <div class="sub-link">
-          <span class="text">已经有帐号?</span>
-          <ElLink type="primary" :underline="false" @click="formType = 'login'">
-            去登录
-          </ElLink>
-        </div>
-      </ElForm>
-      <ElForm v-show="formType === 'reset'" ref="resetFormRef" :model="resetForm" :rules="resetRules" class="login-form">
-        <div class="title-container">
-          <h3 class="title">
-            忘记密码了? 🔒
-          </h3>
-        </div>
-        <div>
-          <ElFormItem prop="account">
-            <ElInput v-model="resetForm.account" placeholder="用户名" type="text" tabindex="1">
-              <template #prefix>
-                <SvgIcon name="i-ri:user-3-fill" />
-              </template>
-            </ElInput>
-          </ElFormItem>
-          <ElFormItem prop="captcha">
-            <ElInput v-model="resetForm.captcha" placeholder="验证码" type="text" tabindex="2">
-              <template #prefix>
-                <SvgIcon name="i-ic:baseline-verified-user" />
-              </template>
-              <template #append>
-                <ElButton>发送验证码</ElButton>
-              </template>
-            </ElInput>
-          </ElFormItem>
-          <ElFormItem prop="newPassword">
-            <ElInput v-model="resetForm.newPassword" type="password" placeholder="新密码" tabindex="3" show-password>
-              <template #prefix>
-                <SvgIcon name="i-ri:lock-2-fill" />
-              </template>
-            </ElInput>
-          </ElFormItem>
-        </div>
-        <ElButton :loading="loading" type="primary" size="large" style="width: 100%; margin-top: 20px;" @click.prevent="handleReset">
-          确认
-        </ElButton>
-        <div class="sub-link">
-          <ElLink type="primary" :underline="false" @click="formType = 'login'">
-            去登录
-          </ElLink>
-        </div>
-      </ElForm>
+  <div class="bg-banner" />
+  <div class="login-box">
+    <div class="login-banner">
+      <img src="@/assets/images/logo.png" class="absolute left-4 top-4 h-30px rounded ring ring-stone-2 dark-ring-stone-8">
+      <img src="@/assets/images/login-banner.png" class="banner">
+    </div>
+    <div class="login-form flex-col-center">
+      <Transition name="fade" mode="out-in">
+        <LoginForm
+          v-if="formType === 'login'"
+          :account
+          @on-login="router.push(redirect)"
+          @on-register="(account) => { formType = 'register'; account = account }"
+          @on-reset-password="(account) => { formType = 'resetPassword'; account = account }"
+        />
+        <RegisterForm
+          v-else-if="formType === 'register'"
+          :account
+          @on-register="(account) => { formType = 'login'; account = account }"
+          @on-login="formType = 'login'"
+        />
+        <ResetPasswordForm
+          v-else-if="formType === 'resetPassword'"
+          :account
+          @on-reset-password="(account) => { formType = 'login'; account = account }"
+          @on-login="formType = 'login'"
+        />
+      </Transition>
    </div>
-    <Copyright />
  </div>
+  <Copyright />
 </template>

-<style lang="scss" scoped>
+<style scoped>
+.bg-banner {
+  position: fixed;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(circle at center, var(--g-container-bg), var(--g-bg));
+}
+
 [data-mode="mobile"] {
-  #login-box {
+  .login-box {
    position: relative;
-    top: inherit;
-    left: inherit;
    flex-direction: column;
    justify-content: start;
    width: 100%;
-    height: 100%;
-    border-radius: 0;
-    box-shadow: none;
-    transform: translateX(0) translateY(0);

    .login-banner {
      width: 100%;
@@ -355,8 +91,6 @@ function testAccount(account: string) {

    .login-form {
      width: 100%;
-      min-height: auto;
-      padding: 30px;
    }
  }

@@ -365,29 +99,19 @@ function testAccount(account: string) {
  }
 }

-:deep(input[type="password"]::-ms-reveal) {
-  display: none;
-}
-
-.bg-banner {
-  position: fixed;
-  z-index: 0;
-  width: 100%;
-  height: 100%;
-  background: radial-gradient(circle at center, var(--g-container-bg), var(--g-bg));
-}
-
-#login-box {
+.login-box {
  position: absolute;
-  top: 50%;
-  left: 50%;
  display: flex;
-  justify-content: space-between;
  overflow: hidden;
  background-color: var(--g-container-bg);
-  border-radius: 10px;
-  box-shadow: var(--el-box-shadow);
-  transform: translateX(-50%) translateY(-50%);
+
+  [data-mode="pc"] & {
+    top: 50%;
+    left: 50%;
+    border-radius: 10px;
+    box-shadow: var(--el-box-shadow);
+    transform: translateX(-50%) translateY(-50%);
+  }

  .login-banner {
    position: relative;
@@ -396,92 +120,16 @@ function testAccount(account: string) {
    background-color: var(--g-bg);

    .banner {
-      width: 100%;
-
-      @include position-center(y);
-    }
-
-    .logo {
      position: absolute;
-      top: 20px;
-      left: 20px;
-      height: 30px;
-      border-radius: 4px;
-      box-shadow: var(--el-box-shadow-light);
+      top: 50%;
+      width: 100%;
+      transform: translateY(-50%);
    }
  }

  .login-form {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
    width: 500px;
-    min-height: 500px;
-    padding: 50px;
-    overflow: hidden;
-
-    .title-container {
-      position: relative;
-
-      .title {
-        margin: 0 auto 30px;
-        font-size: 1.3em;
-        font-weight: bold;
-        color: var(--el-text-color-primary);
-      }
-    }
-  }
-
-  .el-form-item {
-    margin-bottom: 24px;
-
-    :deep(.el-input) {
-      width: 100%;
-      height: 48px;
-      line-height: inherit;
-
-      input {
-        height: 48px;
-      }
-
-      .el-input__prefix,
-      .el-input__suffix {
-        display: flex;
-        align-items: center;
-      }
-
-      .el-input__prefix {
-        left: 10px;
-      }
-
-      .el-input__suffix {
-        right: 10px;
-      }
-    }
-  }
-
-  :deep(.el-divider__text) {
-    background-color: var(--g-container-bg);
-  }
-
-  .flex-bar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 20px;
-  }
-
-  .sub-link {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-top: 20px;
-    font-size: 14px;
-    color: var(--el-text-color-secondary);
-
-    .text {
-      margin-right: 10px;
-    }
+    transition: height 0.15s ease;
  }
 }

@@ -492,4 +140,14 @@ function testAccount(account: string) {
  padding: 20px;
  margin: 0;
 }
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.15s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
 </style>
@@ -0,0 +1,49 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "jsx": "preserve",
+    "lib": [
+      "ESNext",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "moduleDetection": "force",
+    "useDefineForClassFields": true,
+    "baseUrl": "./",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ],
+      "#/*": [
+        "src/types/*"
+      ]
+    },
+    "resolveJsonModule": true,
+    "types": [
+      "vite/client",
+      "vite-plugin-pages/client",
+      "vite-plugin-vue-meta-layouts/client",
+      "vite-plugin-app-loading/client",
+      "element-plus/global"
+    ],
+    "allowImportingTsExtensions": true,
+    "allowJs": false,
+    "strict": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noEmit": true,
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "skipLibCheck": true
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue"
+  ]
+}
@@ -1,49 +1,7 @@
 {
-  "compilerOptions": {
-    "target": "ESNext",
-    "jsx": "preserve",
-    "lib": [
-      "ESNext",
-      "DOM",
-      "DOM.Iterable"
-    ],
-    "useDefineForClassFields": true,
-    "baseUrl": "./",
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
-    "paths": {
-      "@/*": [
-        "src/*"
-      ],
-      "#/*": [
-        "src/types/*"
-      ]
-    },
-    "resolveJsonModule": true,
-    "types": [
-      "vite/client",
-      "vite-plugin-pages/client",
-      "vite-plugin-vue-meta-layouts/client",
-      "element-plus/global"
-    ],
-    "allowImportingTsExtensions": true,
-    "allowJs": false,
-    "strict": true,
-    "noEmit": true,
-    "sourceMap": true,
-    "esModuleInterop": true,
-    "isolatedModules": true,
-    "skipLibCheck": true
-  },
  "references": [
-    {
-      "path": "./tsconfig.node.json"
-    }
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
  ],
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.d.ts",
-    "src/**/*.tsx",
-    "src/**/*.vue"
-  ]
+  "files": []
 }
@@ -1,9 +1,17 @@
 {
  "compilerOptions": {
-    "composite": true,
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "moduleDetection": "force",
    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "strict": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noEmit": true,
+    "isolatedModules": true,
    "skipLibCheck": true
  },
  "include": [
@@ -1,4 +1,5 @@
 import type { Theme } from 'unocss/preset-uno'
+import { entriesToCss, toArray } from '@unocss/core'
 import {
  defineConfig,
  presetAttributify,
@@ -9,7 +10,7 @@ import {
  transformerDirectives,
  transformerVariantGroup,
 } from 'unocss'
-import { entriesToCss, toArray } from '@unocss/core'
+import { presetScrollbar } from 'unocss-preset-scrollbar'
 import { darkTheme, lightTheme } from './themes'

 export default defineConfig<Theme>({
@@ -22,10 +23,23 @@ export default defineConfig<Theme>({
    },
  },
  shortcuts: [
-    {
-      'flex-center': 'flex justify-center items-center',
-      'flex-col-center': 'flex flex-col justify-center items-center',
-    },
+    [/^flex-?(col)?-(start|end|center|baseline|stretch)-?(start|end|center|between|around|evenly|left|right)?$/, ([, col, items, justify]) => {
+      const cls = ['flex']
+      if (col === 'col') {
+        cls.push('flex-col')
+      }
+      if (items === 'center' && !justify) {
+        cls.push('items-center')
+        cls.push('justify-center')
+      }
+      else {
+        cls.push(`items-${items}`)
+        if (justify) {
+          cls.push(`justify-${justify}`)
+        }
+      }
+      return cls.join(' ')
+    }],
  ],
  preflights: [
    {
@@ -60,6 +74,7 @@ export default defineConfig<Theme>({
      },
    }),
    presetTypography(),
+    presetScrollbar(),
  ],
  transformers: [
    transformerDirectives(),
@@ -1,23 +1,23 @@
 import fs from 'node:fs'
 import path from 'node:path'
 import process from 'node:process'
-import { defineConfig, loadEnv } from 'vite'
 import dayjs from 'dayjs'
+import { defineConfig, loadEnv } from 'vite'
 import pkg from './package.json'
 import createVitePlugins from './vite/plugins'

 // https://vitejs.dev/config/
-export default async ({ mode, command }) => {
+export default defineConfig(({ mode, command }) => {
  const env = loadEnv(mode, process.cwd())
  // 全局 scss 资源
-  const scssResources = []
+  const scssResources: string[] = []
  fs.readdirSync('src/assets/styles/resources').forEach((dirname) => {
    if (fs.statSync(`src/assets/styles/resources/${dirname}`).isFile()) {
-      scssResources.push(`@use "src/assets/styles/resources/${dirname}" as *;`)
+      scssResources.push(`@use "/src/assets/styles/resources/${dirname}" as *;`)
    }
  })
-  return defineConfig({
-    // 开发服务器选项 https://cn.vitejs.dev/config/#server-options
+  return {
+    // 开发服务器选项 https://cn.vitejs.dev/config/server-options
    server: {
      open: true,
      port: 9000,
@@ -29,7 +29,7 @@ export default async ({ mode, command }) => {
        },
      },
    },
-    // 构建选项 https://cn.vitejs.dev/config/#server-fsserve-root
+    // 构建选项 https://cn.vitejs.dev/config/build-options
    build: {
      outDir: mode === 'production' ? 'dist' : `dist-${mode}`,
      sourcemap: env.VITE_BUILD_SOURCEMAP === 'true',
@@ -44,7 +44,7 @@ export default async ({ mode, command }) => {
        lastBuildTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
      }),
    },
-    plugins: createVitePlugins(env, command === 'build'),
+    plugins: createVitePlugins(mode, command === 'build'),
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),
@@ -54,9 +54,10 @@ export default async ({ mode, command }) => {
    css: {
      preprocessorOptions: {
        scss: {
+          api: 'modern-compiler',
          additionalData: scssResources.join(''),
        },
      },
    },
-  })
-}
+  }
+})
@@ -0,0 +1,182 @@
+import path from 'node:path'
+import process from 'node:process'
+import vueLegacy from '@vitejs/plugin-legacy'
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+import boxen from 'boxen'
+import picocolors from 'picocolors'
+import Unocss from 'unocss/vite'
+import autoImport from 'unplugin-auto-import/vite'
+import TurboConsole from 'unplugin-turbo-console/vite'
+import components from 'unplugin-vue-components/vite'
+import { loadEnv, type PluginOption } from 'vite'
+import AppLoading from 'vite-plugin-app-loading'
+import Archiver from 'vite-plugin-archiver'
+import banner from 'vite-plugin-banner'
+import { compression } from 'vite-plugin-compression2'
+import { vitePluginFakeServer } from 'vite-plugin-fake-server'
+import Pages from 'vite-plugin-pages'
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
+import VueDevTools from 'vite-plugin-vue-devtools'
+import Layouts from 'vite-plugin-vue-meta-layouts'
+
+export default function createVitePlugins(mode: string, isBuild = false) {
+  const viteEnv = loadEnv(mode, process.cwd())
+  const vitePlugins: (PluginOption | PluginOption[])[] = [
+    vue(),
+    vueJsx(),
+    vueLegacy({
+      renderLegacyChunks: false,
+      modernPolyfills: [
+        'es.array.at',
+        'es.array.find-last',
+      ],
+    }),
+
+    // https://github.com/vuejs/devtools-next
+    viteEnv.VITE_OPEN_DEVTOOLS === 'true' && VueDevTools(),
+
+    // https://github.com/unplugin/unplugin-auto-import
+    autoImport({
+      imports: [
+        'vue',
+        'vue-router',
+        'pinia',
+      ],
+      dts: './src/types/auto-imports.d.ts',
+      dirs: [
+        './src/utils/composables/**',
+      ],
+    }),
+
+    // https://github.com/unplugin/unplugin-vue-components
+    components({
+      dirs: [
+        'src/components',
+        'src/layouts/ui-kit',
+      ],
+      include: [/\.vue$/, /\.vue\?vue/, /\.tsx$/],
+      dts: './src/types/components.d.ts',
+    }),
+
+    Unocss(),
+
+    // https://github.com/vbenjs/vite-plugin-svg-icons
+    createSvgIconsPlugin({
+      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons/')],
+      symbolId: 'icon-[dir]-[name]',
+      svgoOptions: isBuild,
+    }),
+
+    // https://github.com/condorheroblog/vite-plugin-fake-server
+    vitePluginFakeServer({
+      logger: !isBuild,
+      include: 'src/mock',
+      infixName: false,
+      enableProd: isBuild && viteEnv.VITE_BUILD_MOCK === 'true',
+    }),
+
+    // https://github.com/dishait/vite-plugin-vue-meta-layouts
+    Layouts({
+      defaultLayout: 'index',
+    }),
+
+    // https://github.com/hannoeru/vite-plugin-pages
+    Pages({
+      dirs: 'src/views',
+      exclude: [
+        '**/components/**/*.vue',
+      ],
+    }),
+
+    // https://github.com/nonzzz/vite-plugin-compression
+    viteEnv.VITE_BUILD_COMPRESS?.split(',').includes('gzip') && compression(),
+    viteEnv.VITE_BUILD_COMPRESS?.split(',').includes('brotli') && compression({
+      exclude: [/\.(br)$/, /\.(gz)$/],
+      algorithm: 'brotliCompress',
+    }),
+
+    viteEnv.VITE_BUILD_ARCHIVE && Archiver({
+      archiveType: viteEnv.VITE_BUILD_ARCHIVE,
+    }),
+
+    AppLoading('loading.html'),
+
+    // https://github.com/unplugin/unplugin-turbo-console
+    TurboConsole(),
+
+    // https://github.com/chengpeiquan/vite-plugin-banner
+    banner(`
+/**
+ * 由 Fantastic-admin 提供技术支持
+ * Powered by Fantastic-admin
+ * https://fantastic-admin.hurui.me
+ */
+    `),
+
+    {
+      name: 'vite-plugin-debug-plugin',
+      enforce: 'pre',
+      transform: (code, id) => {
+        if (/src\/main.ts$/.test(id)) {
+          if (viteEnv.VITE_APP_DEBUG_TOOL === 'eruda') {
+            code = code.concat(`
+              import eruda from 'eruda'
+              eruda.init()
+            `)
+          }
+          else if (viteEnv.VITE_APP_DEBUG_TOOL === 'vconsole') {
+            code = code.concat(`
+              import VConsole from 'vconsole'
+              new VConsole()
+            `)
+          }
+          return {
+            code,
+            map: null,
+          }
+        }
+      },
+    },
+
+    {
+      name: 'vite-plugin-disable-devtool',
+      enforce: 'pre',
+      transform: (code, id) => {
+        if (/src\/main.ts$/.test(id)) {
+          if (viteEnv.VITE_APP_DISABLE_DEVTOOL === 'true') {
+            code = code.concat(`
+              import DisableDevtool from 'disable-devtool'
+              DisableDevtool()
+            `)
+          }
+          return {
+            code,
+            map: null,
+          }
+        }
+      },
+    },
+
+    {
+      name: 'vite-plugin-terminal-info',
+      apply: 'serve',
+      async buildStart() {
+        const { bold, green, cyan, bgGreen, underline } = picocolors
+        // eslint-disable-next-line no-console
+        console.log(
+          boxen(
+            `${bold(green(`由 ${bgGreen('Fantastic-admin')} 驱动`))}\n\n${underline('https://fantastic-admin.hurui.me')}\n\n当前使用：${cyan('基础版')}`,
+            {
+              padding: 1,
+              margin: 1,
+              borderStyle: 'double',
+              textAlignment: 'center',
+            },
+          ),
+        )
+      },
+    },
+  ]
+  return vitePlugins
+}
@@ -1,25 +0,0 @@
-import boxen from 'boxen'
-import picocolors from 'picocolors'
-import type { Plugin } from 'vite'
-
-export default function appInfo(): Plugin {
-  return {
-    name: 'appInfo',
-    apply: 'serve',
-    async buildStart() {
-      const { bold, green, cyan, bgGreen, underline } = picocolors
-      // eslint-disable-next-line no-console
-      console.log(
-        boxen(
-          `${bold(green(`由 ${bgGreen('Fantastic-admin')} 驱动`))}\n\n${underline('https://fantastic-admin.github.io')}\n\n当前使用：${cyan('基础版')}`,
-          {
-            padding: 1,
-            margin: 1,
-            borderStyle: 'double',
-            textAlignment: 'center',
-          },
-        ),
-      )
-    },
-  }
-}
@@ -1,33 +0,0 @@
-import fs from 'node:fs'
-import dayjs from 'dayjs'
-import archiver from 'archiver'
-import type { Plugin } from 'vite'
-
-function sleep(ms) {
-  return new Promise(resolve => setTimeout(resolve, ms))
-}
-
-export default function createArchiver(env): Plugin {
-  const { VITE_BUILD_ARCHIVE } = env
-  let outDir: string
-  return {
-    name: 'vite-plugin-archiver',
-    apply: 'build',
-    configResolved(resolvedConfig) {
-      outDir = resolvedConfig.build.outDir
-    },
-    async closeBundle() {
-      if (['zip', 'tar'].includes(VITE_BUILD_ARCHIVE)) {
-        await sleep(1000)
-        const archive = archiver(VITE_BUILD_ARCHIVE, {
-          ...(VITE_BUILD_ARCHIVE === 'zip' && { zlib: { level: 9 } }),
-          ...(VITE_BUILD_ARCHIVE === 'tar' && { gzip: true, gzipOptions: { level: 9 } }),
-        })
-        const output = fs.createWriteStream(`${outDir}.${dayjs().format('YYYY-MM-DD-HH-mm-ss')}.${VITE_BUILD_ARCHIVE === 'zip' ? 'zip' : 'tar.gz'}`)
-        archive.pipe(output)
-        archive.directory(outDir, false)
-        archive.finalize()
-      }
-    },
-  }
-}
@@ -1,15 +0,0 @@
-import autoImport from 'unplugin-auto-import/vite'
-
-export default function createAutoImport() {
-  return autoImport({
-    imports: [
-      'vue',
-      'vue-router',
-      'pinia',
-    ],
-    dts: './src/types/auto-imports.d.ts',
-    dirs: [
-      './src/utils/composables/**',
-    ],
-  })
-}
@@ -1,11 +0,0 @@
-import banner from 'vite-plugin-banner'
-
-export default function createBanner() {
-  return banner(`
-/**
- * 由 Fantastic-admin 提供技术支持
- * Powered by Fantastic-admin
- * https://fantastic-admin.github.io
- */
-`)
-}
@@ -1,12 +0,0 @@
-import components from 'unplugin-vue-components/vite'
-
-export default function createComponents() {
-  return components({
-    dirs: [
-      'src/components',
-      'src/layouts/ui-kit',
-    ],
-    include: [/\.vue$/, /\.vue\?vue/, /\.tsx$/],
-    dts: './src/types/components.d.ts',
-  })
-}
@@ -1,24 +0,0 @@
-import { compression } from 'vite-plugin-compression2'
-import type { PluginOption } from 'vite'
-
-export default function createCompression(env, isBuild) {
-  const plugin: (PluginOption | PluginOption[])[] = []
-  if (isBuild) {
-    const { VITE_BUILD_COMPRESS } = env
-    const compressList = VITE_BUILD_COMPRESS.split(',')
-    if (compressList.includes('gzip')) {
-      plugin.push(
-        compression(),
-      )
-    }
-    if (compressList.includes('brotli')) {
-      plugin.push(
-        compression({
-          exclude: [/\.(br)$/, /\.(gz)$/],
-          algorithm: 'brotliCompress',
-        }),
-      )
-    }
-  }
-  return plugin
-}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Hooray	3bd695627d	chore: release v4.12.1	2024-12-05 10:54:29 +08:00
Hooray	ceb6a1f5ba	chore: 更新依赖	2024-12-05 10:53:11 +08:00
ResJIandHooray	88900d6ed3	fix: 修复退出登录后Tab页不清除的问题 (#46 ) Co-authored-by: Hooray <304327508@qq.com>	2024-11-25 18:23:30 +08:00
Hooray	d40c42a810	fix: 修复文件系统路由模式下主导航高亮效果不更新	2024-11-07 23:37:53 +08:00
Hooray	91c7350c34	chore: release v4.12.0	2024-10-18 16:45:04 +08:00
Hooray	924a42e270	chore: 更新依赖	2024-10-18 15:19:53 +08:00
Hooray	5fcfcb7770	fix: 修复vscode无法校验css文件	2024-10-16 10:29:50 +08:00
Hooray	65b2b0fcda	chore: 移除演示代码	2024-10-08 15:19:48 +08:00
Hooray	c34c2d1052	refactor!: 重构鉴权指令、鉴权组件	2024-10-08 15:19:48 +08:00
Hooray	159832443a	perf: 优化导航菜单折叠	2024-10-08 15:19:48 +08:00
Hooray	0ae0f6f352	style: 导航菜单动画优化	2024-10-02 00:12:55 +08:00
Hooray	0f19e26650	refactor: 将 sass 替换为 sass-embedded	2024-09-25 17:02:15 +08:00
Hooray	efd8536469	fix: 修复顶部相关布局时，移动端下工具栏不显示	2024-09-23 13:47:13 +08:00
Hooray	3ed947c8da	chore: 更新 tsconfig 配置	2024-09-21 14:14:26 +08:00
Hooray	ffd040a0ef	chore: 更新依赖	2024-09-21 03:55:45 +08:00
Hooray	026dfdbaef	fix: 修复顶部相关布局时，工具栏重复渲染	2024-09-20 23:22:05 +08:00
Hooray Hu	4c22d91170	refactor: 使用 vite-plugin-archiver 插件代替框架存档功能	2024-09-19 09:17:28 +08:00
Hooray Hu	6327abb078	chore: 更新依赖	2024-09-15 11:49:39 +08:00
Hooray Hu	484f35d27a	refactor: 使用 vite-plugin-vue-app-loading 插件代替框架首屏loading	2024-09-13 02:08:51 +08:00
Hooray Hu	a5b3c5660d	refactor: 修改全局loading消失时机	2024-09-09 10:19:38 +08:00
Hooray Hu	76c66f9bc9	style: 优化登录相关组件	2024-09-06 01:45:11 +08:00
Hooray Hu	b3cfb95f59	refactor: 优化全局loading	2024-09-03 10:25:22 +08:00
Hooray Hu	dac7f4b0c1	chore: release v4.11.0	2024-09-01 20:42:20 +08:00
Hooray Hu	d83b21715b	chore: 更新依赖	2024-09-01 19:11:02 +08:00
Hooray Hu	a57c62765b	revert: 移除 unocss 自定义 shortcuts	2024-08-28 14:01:47 +08:00
Hooray Hu	2b38152485	refactor: 路由导航守卫移入到单独文件维护	2024-08-27 10:56:00 +08:00
Hooray Hu	57e982ed61	refactor: 布局相关css变量移入到布局组件中维护	2024-08-27 10:35:09 +08:00
Hooray Hu	2fe0fc95ee	feat: 引入 postcss-nested	2024-08-26 23:16:32 +08:00
Hooray Hu	fab5d0539b	chore: 更换域名	2024-08-19 16:02:09 +08:00
Hooray Hu	e79bd1dc50	feat: SvgIcon 组件支持传入本地图片，网络图片增加载入和失败状态	2024-08-14 17:49:03 +08:00
Hooray Hu	1e155369b2	fix: 修复带参路由无法记录到标签栏中	2024-08-08 16:15:49 +08:00
Hooray Hu	cb230f77bd	refactor!: 重构登录页面	2024-08-06 02:18:25 +08:00
Hooray Hu	6f59ddf6b8	feat: 扩充 unocss 自定义 shortcuts	2024-08-05 14:43:03 +08:00
Hooray Hu	7668bd5063	chore: release v4.10.0	2024-08-03 22:16:45 +08:00
Hooray Hu	5e3fa9a567	chore: 更新依赖	2024-08-03 22:01:11 +08:00
Hooray Hu	571190cd78	refactor: 手动登出时不带上重定向地址	2024-07-31 15:39:18 +08:00
Hooray Hu	bd5c921bca	feat: FileUpload 组件文件列表增加下载功能	2024-07-31 13:53:01 +08:00
Max Sky	b236df4e30	微软 Microsoft 拼写错误 (#41 )	2024-07-30 17:39:06 +08:00
Hooray Hu	657bec97f6	refactor: 导航菜单尺寸调整	2024-07-21 18:19:46 +08:00
Hooray Hu	5d0141011b	chore: 更新依赖	2024-07-18 11:28:31 +08:00
Hooray Hu	b8e53fb259	chore: eslint 规则调整	2024-07-11 19:56:58 +08:00
Hooray Hu	66c0e4f8c7	feat: 上传组件增加自定义上传	2024-07-09 18:02:02 +08:00
Hooray Hu	7457fcc23e	refactor: vite插件合并到单个文件中维护	2024-07-08 16:40:54 +08:00
Hooray Hu	9a7331f32f	refactor!: 移除`createInjectionKey`函数	2024-07-05 17:42:40 +08:00
Hooray Hu	87819b4b5d	chore: 移除无用代码	2024-07-05 15:14:39 +08:00
Hooray Hu	d00fc26616	refactor: 环境变量 `VITE_APP_DISABLE_DEVTOOL` 改成用 vite 插件的方式注入代码中	2024-07-03 23:25:36 +08:00
Hooray Hu	647edd7207	refactor: 环境变量 `VITE_APP_DEBUG_TOOL` 改成用 vite 插件的方式注入代码中	2024-07-03 23:01:46 +08:00
Hooray Hu	23d36432da	feat: 次导航支持隐藏	2024-07-02 00:34:36 +08:00
Hooray Hu	2fdc4f18ca	chore: release v4.9.0	2024-06-29 12:51:03 +08:00
Hooray Hu	961df08e2b	chore: 更新依赖	2024-06-29 12:50:50 +08:00
Hooray Hu	1d62ac7558	style: HDropdownMenu 组件样式调整	2024-06-28 14:21:26 +08:00
Hooray Hu	456ef83081	feat: 新增哀悼模式和色弱模式	2024-06-28 10:06:56 +08:00
Hooray Hu	90b588028a	feat: 增加禁用开发者工具环境变量	2024-06-26 10:45:45 +08:00
Hooray Hu	9e444c83f8	fix: 修复主导航 children 为空时报错	2024-06-25 00:44:07 +08:00
Hooray Hu	57fcd2785c	refactor!: 配置项 `menu.menuMode` 变更为 `menu.mode`	2024-06-24 17:16:27 +08:00
Hooray Hu	3c8b4881b4	fix: 修复vscode失效配置	2024-06-24 15:55:31 +08:00
Hooray Hu	e32d0561c7	chore: 更新readme	2024-06-21 09:58:18 +08:00
Hooray Hu	d303776825	chore: 更新依赖	2024-06-15 22:53:45 +08:00
Hooray Hu	3ef0f69bcc	chore: 样式微调	2024-06-12 14:10:48 +08:00