chore: release v5.2.0

chore: 更新依赖
revert: 回滚移除 <Suspense>
2026-10-07 04:53:40 +08:00 · 2025-04-04 18:53:05 +08:00 · 2025-04-04 18:52:49 +08:00 · 2025-04-03 17:52:13 +08:00 · 2025-04-03 14:47:31 +08:00 · 2025-03-30 20:34:53 +08:00
325 changed files with 19585 additions and 13267 deletions
@@ -0,0 +1,10 @@
+{
+  "recommendations": [
+    "EditorConfig.EditorConfig",
+    "mikestead.dotenv",
+    "dbaeumer.vscode-eslint",
+    "stylelint.vscode-stylelint",
+    "Vue.volar",
+    "antfu.unocss"
+  ]
+}
@@ -0,0 +1,29 @@
+{
+  "eslint.useFlatConfig": true,
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll.stylelint": "explicit",
+    "source.organizeImports": "never"
+  },
+  "stylelint.validate": [
+    "css",
+    "postcss",
+    "scss",
+    "vue"
+  ],
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml"
+  ],
+  "typescript.tsdk": "node_modules/typescript/lib"
+}
@@ -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
@@ -1,11 +1,13 @@
 # 应用配置面板
 VITE_APP_SETTING = false
 # 页面标题
-VITE_APP_TITLE = 页面标题
+VITE_APP_TITLE = Fantastic-admin 基础版
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
 VITE_APP_API_BASEURL = /
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
+# 是否禁用开发者工具，可防止被调试
+VITE_APP_DISABLE_DEVTOOL = false

 # 是否在打包时启用 Mock
 VITE_BUILD_MOCK = false
@@ -1,11 +1,13 @@
 # 应用配置面板
 VITE_APP_SETTING = false
 # 页面标题
-VITE_APP_TITLE = 页面标题(test)
+VITE_APP_TITLE = Fantastic-admin 基础版
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
 VITE_APP_API_BASEURL = /
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
+# 是否禁用开发者工具，可防止被调试
+VITE_APP_DISABLE_DEVTOOL = false

 # 是否在打包时启用 Mock
 VITE_BUILD_MOCK = true
@@ -9,13 +9,13 @@ jobs:
  release:
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
        with:
          fetch-depth: 0

-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
        with:
-          node-version: 16.x
+          node-version: 22

      - run: npx changelogithub # or changelogithub@0.12 if ensure the stable result
        env:
@@ -25,7 +25,7 @@ jobs:
    needs: release
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
        with:
          fetch-depth: 0

@@ -57,7 +57,7 @@ jobs:
    needs: release
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
          ref: example
@@ -1,9 +1,9 @@
 name: repo-sync

 on:
-  # 每天自动同步
+  # 每天 00:05 自动同步
  schedule:
-    - cron: '0 0 * * *'
+    - cron: '5 0 * * *'
  # 手动触发部署
  workflow_dispatch:

@@ -0,0 +1 @@
+22
@@ -1,2 +1,4 @@
 shamefully-hoist=true
 strict-peer-dependencies=false
+engine-strict=true
+verify-deps-before-run=prompt
@@ -5,7 +5,6 @@
    "dbaeumer.vscode-eslint",
    "stylelint.vscode-stylelint",
    "Vue.volar",
-    "Vue.vscode-typescript-vue-plugin",
    "antfu.unocss"
  ]
 }
@@ -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"
  ],
@@ -23,5 +24,6 @@
    "json",
    "jsonc",
    "yaml"
-  ]
+  ],
+  "typescript.tsdk": "node_modules/typescript/lib"
 }
@@ -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.svg" width="200" height="200" />
 </p>

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

 <p align="center">
-  <a href="https://fantastic-admin.github.io" target="_blank">官网</a>
-  <sup><a href="https://fantastic-admin.gitee.io" target="_blank">备用地址</a></sup>
+  <a href="https://fantastic-admin.hurui.me" target="_blank">官网</a>
  <span>&nbsp;|&nbsp;</span>
-  <a href="https://fantastic-admin.github.io/support.html" target="_blank">技术支持</a>
-  <span>&nbsp;|&nbsp;</span>
-  演示
-  <sup><a href="https://fantastic-admin.github.io/basic-example" target="_blank">基础版</a> <a href="https://fantastic-admin.github.io/pro-example" target="_blank">专业版</a></sup>
-  <span>&nbsp;|&nbsp;</span>
-  购买
-  <sup><a href="https://fantastic-admin.github.io/buy.html" target="_blank">专业版</a></sup>
+  <a href="https://fantastic-admin.pages.dev" target="_blank">备用地址</a>
 <p>

 <p align="center">
@@ -53,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>

@@ -96,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>
@@ -105,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>
@@ -0,0 +1,16 @@
+{
+  "$schema": "https://shadcn-vue.com/schema.json",
+  "style": "default",
+  "typescript": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/assets/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/ui/shadcn",
+    "utils": "@/utils",
+    "lib": "@/utils"
+  }
+}
@@ -6,13 +6,17 @@ export default antfu(
    ignores: [
      'public',
      'dist*',
+      'src/ui/shadcn/ui',
    ],
  },
  {
    rules: {
      'eslint-comments/no-unlimited-disable': 'off',
      'curly': ['error', 'all'],
-      'antfu/consistent-list-newline': 'off',
+      'ts/no-unused-expressions': ['error', {
+        allowShortCircuit: true,
+        allowTernary: true,
+      }],
    },
  },
  {
@@ -2,8 +2,7 @@
 <html>
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
-    <link rel="stylesheet" href="/loading.css" />
+    <link rel="icon" href="/favicon.svg" />
    <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,204 @@
+<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 *::before,
+.loading-container *::after {
+  box-sizing: content-box;
+}
+
+.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;
+  line-height: 1.5;
+}
+
+.loading-container .tips {
+  position: relative;
+  margin-top: 10px;
+  font-size: 16px;
+  opacity: 0.5;
+  line-height: 1.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,103 +1,118 @@
 {
  "type": "module",
-  "version": "4.6.0",
+  "version": "5.2.0",
+  "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",
    "preinstall": "npx only-allow pnpm",
+    "postinstall": "simple-git-hooks",
+    "taze": "taze minor -wIr",
    "commit": "git cz",
    "release": "bumpp"
  },
  "dependencies": {
-    "@headlessui/vue": "^1.7.19",
-    "@imengyu/vue3-context-menu": "^1.3.8",
-    "@vueuse/core": "^10.8.0",
-    "@vueuse/integrations": "^10.8.0",
-    "axios": "^1.6.7",
-    "dayjs": "^1.11.10",
+    "@vee-validate/zod": "^4.15.0",
+    "@vueuse/components": "^13.0.0",
+    "@vueuse/core": "^13.0.0",
+    "@vueuse/integrations": "^13.0.0",
+    "axios": "^1.8.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "dayjs": "^1.11.13",
    "defu": "^6.1.4",
-    "element-plus": "^2.5.6",
-    "eruda": "^3.0.1",
-    "floating-vue": "5.2.2",
-    "hotkeys-js": "^3.13.7",
-    "lodash-es": "^4.17.21",
+    "disable-devtool": "^0.3.8",
+    "element-plus": "^2.9.7",
+    "eruda": "^3.4.1",
+    "es-toolkit": "^1.34.1",
+    "hotkeys-js": "^3.13.9",
+    "lucide-vue-next": "^0.487.0",
    "mitt": "^3.0.1",
-    "mockjs": "^1.1.0",
    "nprogress": "^0.2.0",
-    "overlayscrollbars": "^2.5.0",
-    "overlayscrollbars-vue": "^0.5.7",
    "path-browserify": "^1.0.1",
-    "path-to-regexp": "^6.2.1",
-    "pinia": "^2.1.7",
-    "qs": "^6.11.2",
+    "path-to-regexp": "^8.2.0",
+    "pinia": "^3.0.1",
+    "qs": "^6.14.0",
+    "reka-ui": "^2.2.0",
    "scule": "^1.3.0",
+    "tailwind-merge": "^3.1.0",
+    "ua-parser-js": "^2.0.3",
    "vconsole": "^3.15.1",
-    "vue": "^3.4.19",
-    "vue-m-message": "^4.0.2",
-    "vue-router": "^4.3.0"
+    "vee-validate": "^4.15.0",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0",
+    "vue-sonner": "^1.3.0",
+    "zod": "^3.24.2"
  },
  "devDependencies": {
-    "@antfu/eslint-config": "2.6.4",
-    "@iconify/json": "^2.2.186",
-    "@iconify/vue": "^4.1.1",
-    "@stylistic/stylelint-config": "^1.0.1",
-    "@types/lodash-es": "^4.17.12",
-    "@types/mockjs": "^1.0.10",
+    "@antfu/eslint-config": "4.3.0",
+    "@faker-js/faker": "^9.6.0",
+    "@iconify/json": "^2.2.323",
+    "@iconify/vue": "^4.3.0",
+    "@stylistic/stylelint-config": "^2.0.0",
    "@types/nprogress": "^0.2.3",
-    "@types/path-browserify": "^1.0.2",
-    "@types/qs": "^6.9.11",
-    "@unocss/eslint-plugin": "^0.58.5",
-    "@vitejs/plugin-legacy": "^5.3.1",
-    "@vitejs/plugin-vue": "^5.0.4",
-    "@vitejs/plugin-vue-jsx": "^3.1.0",
-    "archiver": "^6.0.1",
-    "autoprefixer": "^10.4.17",
-    "boxen": "^7.1.1",
-    "bumpp": "^9.3.0",
-    "cz-git": "^1.8.0",
-    "eslint": "^8.57.0",
-    "esno": "^4.0.0",
-    "fs-extra": "^11.2.0",
+    "@types/path-browserify": "^1.0.3",
+    "@types/qs": "^6.9.18",
+    "@unocss/eslint-plugin": "^66.0.0",
+    "@unocss/preset-legacy-compat": "^66.0.0",
+    "@vitejs/plugin-legacy": "^6.0.2",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "@vitejs/plugin-vue-jsx": "^4.1.2",
+    "@vue/tsconfig": "^0.7.0",
+    "autoprefixer": "^10.4.21",
+    "boxen": "^8.0.1",
+    "bumpp": "^10.1.0",
+    "cz-git": "^1.11.1",
+    "eslint": "^9.23.0",
+    "esno": "^4.8.0",
+    "fs-extra": "^11.3.0",
    "http-server": "^14.1.1",
-    "inquirer": "^9.2.15",
-    "lint-staged": "^15.2.2",
-    "npm-run-all": "^4.1.5",
-    "picocolors": "^1.0.0",
+    "inquirer": "^12.5.2",
+    "lint-staged": "^15.5.0",
+    "npm-run-all2": "^7.0.2",
+    "picocolors": "^1.1.1",
    "plop": "^4.0.1",
-    "sass": "^1.71.1",
-    "simple-git-hooks": "^2.9.0",
-    "stylelint": "^16.2.1",
-    "stylelint-config-recess-order": "^4.6.0",
-    "stylelint-config-standard-scss": "^13.0.0",
+    "postcss": "^8.5.3",
+    "postcss-nested": "^7.0.2",
+    "sass-embedded": "^1.86.3",
+    "simple-git-hooks": "^2.12.1",
+    "stylelint": "^16.17.0",
+    "stylelint-config-recess-order": "^6.0.0",
+    "stylelint-config-standard-scss": "^14.0.0",
    "stylelint-config-standard-vue": "^1.0.0",
-    "stylelint-scss": "^6.1.0",
-    "svgo": "^3.2.0",
-    "terser": "^5.28.1",
-    "typescript": "^5.3.3",
-    "unocss": "^0.58.5",
-    "unplugin-auto-import": "^0.17.5",
-    "unplugin-turbo-console": "^1.4.0",
-    "unplugin-vue-components": "^0.26.0",
-    "vite": "^5.1.4",
-    "vite-plugin-banner": "^0.7.1",
-    "vite-plugin-compression2": "^0.12.0",
-    "vite-plugin-fake-server": "^2.1.1",
-    "vite-plugin-pages": "^0.32.0",
+    "stylelint-scss": "^6.11.1",
+    "svgo": "^3.3.2",
+    "taze": "^19.0.4",
+    "typescript": "^5.8.2",
+    "unocss": "^66.0.0",
+    "unocss-preset-animations": "^1.1.1",
+    "unplugin-auto-import": "^19.1.2",
+    "unplugin-turbo-console": "^1.11.3",
+    "unplugin-vue-components": "^28.4.1",
+    "vite": "^6.2.5",
+    "vite-plugin-app-loading": "^0.3.1",
+    "vite-plugin-archiver": "^0.1.2",
+    "vite-plugin-banner": "^0.8.0",
+    "vite-plugin-compression2": "^1.3.3",
+    "vite-plugin-env-parse": "^1.0.15",
+    "vite-plugin-fake-server": "^2.2.0",
+    "vite-plugin-pages": "^0.33.0",
    "vite-plugin-svg-icons": "^2.0.1",
-    "vite-plugin-vue-devtools": "^7.0.15",
-    "vite-plugin-vue-meta-layouts": "^0.4.1",
-    "vue-tsc": "^1.8.27"
+    "vite-plugin-vue-devtools": "^7.7.2",
+    "vite-plugin-vue-meta-layouts": "^0.5.1",
+    "vue-tsc": "^2.2.8"
  },
  "simple-git-hooks": {
    "pre-commit": "pnpm lint-staged",
@@ -12,6 +12,6 @@ defineOptions({
  </div>
 </template>

-<style lang="scss" scoped>
-// 样式
+<style scoped>
+/* 样式 */
 </style>
@@ -1,19 +1,20 @@
-import Mock from 'mockjs'
+import { faker } from '@faker-js/faker'
+import { defineFakeRoute } from 'vite-plugin-fake-server/client'

 const AllList: any[] = []
 for (let i = 0; i < 50; i++) {
-  AllList.push(Mock.mock({
-    id: '@id',
-    title: '@ctitle(10, 20)',
-  }))
+  AllList.push({
+    id: i + 1,
+    title: faker.color.human(),
+  })
 }

-export default [
+export default defineFakeRoute([
  {
    url: '/mock/{{#if relativePath}}{{ relativePath }}/{{/if}}{{ moduleName }}/list',
    method: 'get',
-    response: (option: any) => {
-      const { title, from, limit } = option.query
+    response: ({ query }) => {
+      const { title, from, limit } = query
      const list = AllList.filter((item) => {
        return title ? item.title.includes(title) : true
      })
@@ -33,8 +34,8 @@ export default [
  {
    url: '/mock/{{#if relativePath}}{{ relativePath }}/{{/if}}{{ moduleName }}/detail',
    method: 'get',
-    response: (option: any) => {
-      const info = AllList.filter(item => item.id === option.query.id)
+    response: ({ query }) => {
+      const info = AllList.filter(item => item.id === query.id)
      return {
        error: '',
        status: 1,
@@ -45,34 +46,40 @@ export default [
  {
    url: '/mock/{{#if relativePath}}{{ relativePath }}/{{/if}}{{ moduleName }}/create',
    method: 'post',
-    response: {
-      error: '',
-      status: 1,
-      data: {
-        isSuccess: true,
-      },
+    response: () => {
+      return {
+        error: '',
+        status: 1,
+        data: {
+          isSuccess: true,
+        },
+      }
    },
  },
  {
    url: '/mock/{{#if relativePath}}{{ relativePath }}/{{/if}}{{ moduleName }}/edit',
    method: 'post',
-    response: {
-      error: '',
-      status: 1,
-      data: {
-        isSuccess: true,
-      },
+    response: () => {
+      return {
+        error: '',
+        status: 1,
+        data: {
+          isSuccess: true,
+        },
+      }
    },
  },
  {
    url: '/mock/{{#if relativePath}}{{ relativePath }}/{{/if}}{{ moduleName }}/delete',
    method: 'post',
-    response: {
-      error: '',
-      status: 1,
-      data: {
-        isSuccess: true,
-      },
+    response: () => {
+      return {
+        error: '',
+        status: 1,
+        data: {
+          isSuccess: true,
+        },
+      }
    },
  },
-]
+])
@@ -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': {},
  },
 }
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -21 206 206" xml:space="preserve">
+  <path d="M0,82.57C0,58.4,0,34.23,0,10.06C0,1.35,1.35,0,10.03,0C45.36,0,80.7-0.01,116.03,0.03c1.77,0,3.59,0.26,5.29,0.74
+	c3.07,0.87,3.57,3.21,2.45,5.8c-4.37,10.1-8.83,20.15-13.31,30.2c-1.44,3.23-4.06,4.26-7.54,4.25c-18.5-0.09-37,0.1-55.5-0.14
+	c-4.95-0.06-6.49,2.12-6.46,6.47c0.02,3,0.11,6.01-0.02,9c-0.3,6.8,0.34,9.29,9.51,9.62c5.36,0.19,10.73,0.04,16.09,0.04
+	c7.57,0,15.15-0.04,22.72,0.01c5.13,0.03,6.6,2.12,4.59,6.89C90.43,81.09,86.27,89,83.4,97.35c-2.59,7.55-8.57,7.27-14.28,7.56
+	c-7.48,0.38-15,0.17-22.5,0.06c-3.69-0.05-4.96,1.04-4.86,5.18c0.36,15.83,0.26,31.67,0.12,47.5c-0.04,4.2-2.26,6.53-6.94,6.42
+	c-9-0.21-18-0.06-27-0.06c-6.05,0-7.91-1.8-7.92-7.94C-0.02,131.57,0,107.07,0,82.57z" fill="#42b883" />
+  <path d="M132.98,94.13c-8.21,18.88-16.33,37.1-24.06,55.48c-6.02,14.31-5.81,14.4-21.31,14.4c-6.67,0-13.33,0.05-20-0.01
+	c-5.91-0.05-7.71-2.44-5.46-7.61c6.86-15.8,13.86-31.55,20.82-47.31c9.41-21.32,18.81-42.63,28.24-63.94
+	c5.59-12.62,11.14-25.25,16.94-37.77c0.82-1.78,2.95-4.09,4.47-4.09c1.63,0,4,2.11,4.78,3.86c13.4,29.78,26.56,59.66,39.87,89.49
+	c6.48,14.53,13.16,28.97,19.72,43.46c2.57,5.68,5.11,11.38,7.61,17.1c1.61,3.68-0.13,6.75-4.12,6.77
+	c-23.83,0.08-47.66,0.09-71.49-0.01c-4.03-0.02-5.46-2.47-3.98-6.17c2.26-5.63,4.77-11.16,6.95-16.82c1.74-4.54,4.92-6.06,9.6-5.98
+	c9.65,0.16,9.89-0.55,5.89-9.13c-4.57-9.81-8.76-19.8-13.14-29.7C134.08,95.62,133.68,95.17,132.98,94.13z" fill="#42b883" />
+</svg>
@@ -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,83 +1,75 @@
+import { exec } from 'node:child_process'
 import path from 'node:path'
 import process from 'node:process'
-import { exec } from 'node:child_process'
-import fs from 'fs-extra'
-import inquirer from 'inquirer'
 import { lookupCollection, lookupCollections } from '@iconify/json'
+import { checkbox, confirm } from '@inquirer/prompts'
+import fs from 'fs-extra'

-async function generateIcons() {
-  // 拿到全部图标集的原始数据
-  const raw = await lookupCollections()
+// 拿到全部图标集的原始数据
+const raw = await lookupCollections()

-  let lastChoose = fs.readFileSync(path.resolve(process.cwd(), 'src/iconify/index.json'), 'utf-8')
-  lastChoose = JSON.parse(lastChoose)
+let lastChoose = fs.readFileSync(path.resolve(process.cwd(), 'src/iconify/index.json'), 'utf-8')
+lastChoose = JSON.parse(lastChoose)

-  // 取出可使用的图标集数据用于 inquirer 选择，并按名称排序
-  const collections = Object.entries(raw).map(([id, item]) => ({
-    ...item,
-    id,
-  })).sort((a, b) => a.name.localeCompare(b.name))
+// 取出可使用的图标集数据用于 inquirer 选择，并按名称排序
+const collections = Object.entries(raw).map(([id, item]) => ({
+  ...item,
+  id,
+})).sort((a, b) => a.name.localeCompare(b.name))

-  /**
-   * 分别会在对应目录下生成以下文件，其中(1)(3)用于离线下载并安装图标，(2)用于图标选择器使用
-   * (1) src/iconify/index.json    记录用户 inquirer 的交互信息
-   * (2) src/iconify/data.json     包含多个图标集数据，仅记录图标名
-   * (3) public/icons/*-raw.json   多个图标集的原始数据，独立存放，用于离线使用
-   */
-  inquirer.prompt([
-    {
-      type: 'checkbox',
-      message: '请选择需要生成的图标集',
-      name: 'collections',
-      choices: collections.map(item => ({
-        name: `${item.name} (${item.total} icons)`,
-        value: item.id,
-      })),
-      default: lastChoose.collections,
-    },
-    {
-      type: 'confirm',
-      name: 'isOfflineUse',
-      message: '是否需要离线使用',
-      default: false,
-    },
-  ]).then(async (answers) => {
-    await fs.writeJSON(
-      path.resolve(process.cwd(), 'src/iconify/index.json'),
-      {
-        collections: answers.collections,
-        isOfflineUse: answers.isOfflineUse,
-      },
-    )
-
-    const outputDir = path.resolve(process.cwd(), 'public/icons')
-    await fs.ensureDir(outputDir)
-    await fs.emptyDir(outputDir)
-
-    const collectionsMeta: object[] = []
-    for (const info of answers.collections) {
-      const setData = await lookupCollection(info)
-
-      collectionsMeta.push({
-        prefix: setData.prefix,
-        info: setData.info,
-        icons: Object.keys(setData.icons),
-      })
-
-      const offlineFilePath = path.join(outputDir, `${info}-raw.json`)
-
-      if (answers.isOfflineUse) {
-        await fs.writeJSON(offlineFilePath, setData)
-      }
-    }
-
-    await fs.writeJSON(
-      path.resolve(process.cwd(), 'src/iconify/data.json'),
-      collectionsMeta,
-    )
-
-    exec('eslint src/iconify/data.json src/iconify/index.json --cache --fix')
-  })
+/**
+ * 分别会在对应目录下生成以下文件，其中(1)(3)用于离线下载并安装图标，(2)用于图标选择器使用
+ * (1) src/iconify/index.json    记录用户 inquirer 的交互信息
+ * (2) src/iconify/data.json     包含多个图标集数据，仅记录图标名
+ * (3) public/icons/*-raw.json   多个图标集的原始数据，独立存放，用于离线使用
+ */
+const answers = {
+  collections: await checkbox({
+    message: '请选择需要生成的图标集',
+    choices: collections.map(item => ({
+      name: `${item.name} (${item.total} icons)`,
+      value: item.id,
+      checked: lastChoose.collections.includes(item.id),
+    })),
+  }),
+  isOfflineUse: await confirm({
+    message: '是否需要离线使用',
+    default: false,
+  }),
 }

-generateIcons()
+await fs.writeJSON(
+  path.resolve(process.cwd(), 'src/iconify/index.json'),
+  {
+    collections: answers.collections,
+    isOfflineUse: answers.isOfflineUse,
+  },
+)
+
+const outputDir = path.resolve(process.cwd(), 'public/icons')
+await fs.ensureDir(outputDir)
+await fs.emptyDir(outputDir)
+
+const collectionsMeta: object[] = []
+for (const info of answers.collections) {
+  const setData = await lookupCollection(info)
+
+  collectionsMeta.push({
+    prefix: setData.prefix,
+    info: setData.info,
+    icons: Object.keys(setData.icons),
+  })
+
+  const offlineFilePath = path.join(outputDir, `${info}-raw.json`)
+
+  if (answers.isOfflineUse) {
+    await fs.writeJSON(offlineFilePath, setData)
+  }
+}
+
+await fs.writeJSON(
+  path.resolve(process.cwd(), 'src/iconify/data.json'),
+  collectionsMeta,
+)
+
+exec('eslint src/iconify/data.json src/iconify/index.json --cache --fix')
@@ -1,30 +1,19 @@
 <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 { ua } from '@/utils/ua'
+import Provider from './ui/provider/index.vue'
+
+const route = useRoute()

 const settingsStore = useSettingsStore()
 const { auth } = useAuth()

-// 侧边栏主导航当前实际宽度
-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`
-})
+document.body.setAttribute('data-os', ua.getOS().name || '')

-// 侧边栏次导航当前实际宽度
-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`
+const isAuth = computed(() => {
+  return route.matched.every((item) => {
+    return auth(item.meta.auth ?? '')
+  })
 })

 // 设置网页 title
@@ -46,30 +35,21 @@ watch([

 onMounted(() => {
  settingsStore.setMode(document.documentElement.clientWidth)
-  window.onresize = () => {
+  window.addEventListener('resize', () => {
    settingsStore.setMode(document.documentElement.clientWidth)
-  }
-  hotkeys('alt+i', () => {
-    eventBus.emit('global-system-info-toggle')
  })
 })
-
-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, route }"
-      :style="{
-        '--g-main-sidebar-actual-width': mainSidebarActualWidth,
-        '--g-sub-sidebar-actual-width': subSidebarActualWidth,
-      }"
-    >
-      <component :is="Component" v-if="auth(route.meta.auth ?? '')" />
-      <NotAllowed v-else />
+    <RouterView v-slot="{ Component }">
+      <component :is="Component" v-if="isAuth" />
+      <FaNotAllowed v-else />
    </RouterView>
-    <SystemInfo />
+    <FaBackToTop />
+    <FaToast />
+    <FaNotification />
+    <FaSystemInfo />
  </Provider>
 </template>
@@ -1,11 +1,10 @@
-import axios from 'axios'
-
-// import qs from 'qs'
-import Message from 'vue-m-message'
 import useUserStore from '@/store/modules/user'
+import axios from 'axios'
+// import qs from 'qs'
+import { toast } from 'vue-sonner'

 const api = axios.create({
-  baseURL: (import.meta.env.DEV && import.meta.env.VITE_OPEN_PROXY === 'true') ? '/proxy/' : import.meta.env.VITE_APP_API_BASEURL,
+  baseURL: (import.meta.env.DEV && import.meta.env.VITE_OPEN_PROXY) ? '/proxy/' : import.meta.env.VITE_APP_API_BASEURL,
  timeout: 1000 * 60,
  responseType: 'json',
 })
@@ -34,25 +33,28 @@ api.interceptors.response.use(
  (response) => {
    /**
     * 全局拦截请求发送后返回的数据，如果数据有报错则在这做全局的错误提示
-     * 假设返回数据格式为：{ status: 1, error: '', data: '' }
+     * 假设返回数据格式为：{ status: 1, error: '', data: {} }
     * 规则是当 status 为 1 时表示请求成功，为 0 时表示接口需要登录或者登录状态失效，需要重新登录
     * 请求出错时 error 会返回错误信息
     */
    if (response.data.status === 1) {
      if (response.data.error !== '') {
-        // 错误提示
-        Message.error(response.data.error, {
-          zIndex: 2000,
+        toast.warning('Warning', {
+          description: response.data.error,
        })
        return Promise.reject(response.data)
      }
    }
    else {
-      useUserStore().logout()
+      useUserStore().requestLogout()
    }
    return Promise.resolve(response.data)
  },
  (error) => {
+    if (error.status === 401) {
+      useUserStore().requestLogout()
+      throw error
+    }
    let message = error.message
    if (message === 'Network Error') {
      message = '后端网络故障'
@@ -63,8 +65,8 @@ api.interceptors.response.use(
    else if (message.includes('Request failed with status code')) {
      message = `接口${message.substr(message.length - 3)}异常`
    }
-    Message.error(message, {
-      zIndex: 2000,
+    toast.error('Error', {
+      description: message,
    })
    return Promise.reject(error)
  },
@@ -17,7 +17,7 @@ export default {
  // 修改密码
  passwordEdit: (data: {
    password: string
-    newpassword: string
+    newPassword: string
  }) => api.post('user/password/edit', data, {
    baseURL: '/mock/',
  }),
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" class="icon" viewBox="0 0 1024 1024"><path d="M704 328a72 72 0 1 0 144 0 72 72 0 1 0-144 0z"/><path d="M999.904 116.608a32 32 0 0 0-21.952-10.912L521.76 73.792a31.552 31.552 0 0 0-27.2 11.904l-92.192 114.848a32 32 0 0 0 .672 40.896l146.144 169.952-147.456 194.656 36.48-173.376a32 32 0 0 0-11.136-31.424L235.616 245.504l79.616-125.696a32 32 0 0 0-29.28-49.024L45.76 87.552a32 32 0 0 0-29.696 34.176l55.808 798.016a32.064 32.064 0 0 0 34.304 29.696l176.512-13.184c17.632-1.312 30.848-16.672 29.504-34.272s-16.576-31.04-34.304-29.536L133.44 883.232l-6.432-92.512 125.312-12.576a32 32 0 0 0 28.672-35.04 32.16 32.16 0 0 0-35.04-28.672L122.56 726.848 82.144 149.184l145.152-10.144-60.96 96.224a32 32 0 0 0 6.848 41.952l198.4 161.344-58.752 279.296a30.912 30.912 0 0 0 .736 14.752 31.68 31.68 0 0 0 1.408 11.04l51.52 154.56a31.968 31.968 0 0 0 27.456 21.76l523.104 47.552a32.064 32.064 0 0 0 34.848-29.632l55.776-798.048a32.064 32.064 0 0 0-7.776-23.232zm-98.912 630.848-412.576-39.648a31.52 31.52 0 0 0-34.912 28.768 32 32 0 0 0 28.8 34.912l414.24 39.808-6.272 89.536-469.728-42.72-39.584-118.72 234.816-310.016a31.936 31.936 0 0 0-1.248-40.192L468.896 219.84l65.088-81.056 407.584 28.48-40.576 580.192z"/></svg>
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-25 -46 256 256" xml:space="preserve">
+  <path d="M0,82.57C0,58.4,0,34.23,0,10.06C0,1.35,1.35,0,10.03,0C45.36,0,80.7-0.01,116.03,0.03c1.77,0,3.59,0.26,5.29,0.74
+	c3.07,0.87,3.57,3.21,2.45,5.8c-4.37,10.1-8.83,20.15-13.31,30.2c-1.44,3.23-4.06,4.26-7.54,4.25c-18.5-0.09-37,0.1-55.5-0.14
+	c-4.95-0.06-6.49,2.12-6.46,6.47c0.02,3,0.11,6.01-0.02,9c-0.3,6.8,0.34,9.29,9.51,9.62c5.36,0.19,10.73,0.04,16.09,0.04
+	c7.57,0,15.15-0.04,22.72,0.01c5.13,0.03,6.6,2.12,4.59,6.89C90.43,81.09,86.27,89,83.4,97.35c-2.59,7.55-8.57,7.27-14.28,7.56
+	c-7.48,0.38-15,0.17-22.5,0.06c-3.69-0.05-4.96,1.04-4.86,5.18c0.36,15.83,0.26,31.67,0.12,47.5c-0.04,4.2-2.26,6.53-6.94,6.42
+	c-9-0.21-18-0.06-27-0.06c-6.05,0-7.91-1.8-7.92-7.94C-0.02,131.57,0,107.07,0,82.57z" fill="#35495e" />
+  <path d="M132.98,94.13c-8.21,18.88-16.33,37.1-24.06,55.48c-6.02,14.31-5.81,14.4-21.31,14.4c-6.67,0-13.33,0.05-20-0.01
+	c-5.91-0.05-7.71-2.44-5.46-7.61c6.86-15.8,13.86-31.55,20.82-47.31c9.41-21.32,18.81-42.63,28.24-63.94
+	c5.59-12.62,11.14-25.25,16.94-37.77c0.82-1.78,2.95-4.09,4.47-4.09c1.63,0,4,2.11,4.78,3.86c13.4,29.78,26.56,59.66,39.87,89.49
+	c6.48,14.53,13.16,28.97,19.72,43.46c2.57,5.68,5.11,11.38,7.61,17.1c1.61,3.68-0.13,6.75-4.12,6.77
+	c-23.83,0.08-47.66,0.09-71.49-0.01c-4.03-0.02-5.46-2.47-3.98-6.17c2.26-5.63,4.77-11.16,6.95-16.82c1.74-4.54,4.92-6.06,9.6-5.98
+	c9.65,0.16,9.89-0.55,5.89-9.13c-4.57-9.81-8.76-19.8-13.14-29.7C134.08,95.62,133.68,95.17,132.98,94.13z" fill="#42b883" />
+</svg>
@@ -0,0 +1,80 @@
+/* 页面布局 CSS 变量 */
+:root {
+  /* 头部高度 */
+  --g-header-height: 60px;
+
+  /* 侧边栏宽度 */
+  --g-main-sidebar-width: 80px;
+  --g-sub-sidebar-width: 220px;
+  --g-sub-sidebar-collapse-width: 64px;
+
+  /* 侧边栏 Logo 区域高度 */
+  --g-sidebar-logo-height: 50px;
+
+  /* 标签栏高度 */
+  --g-tabbar-height: 50px;
+
+  /* 工具栏高度 */
+  --g-toolbar-height: 50px;
+}
+
+/* 明暗模式 CSS 变量 */
+/* stylelint-disable-next-line no-duplicate-selectors */
+:root {
+  color-scheme: light;
+
+  &::view-transition-old(root),
+  &::view-transition-new(root) {
+    mix-blend-mode: normal;
+    animation: none;
+  }
+
+  &::view-transition-old(root) {
+    z-index: 1;
+  }
+
+  &::view-transition-new(root) {
+    z-index: 9999;
+  }
+
+  &.dark {
+    color-scheme: dark;
+
+    &::view-transition-old(root) {
+      z-index: 9999;
+    }
+
+    &::view-transition-new(root) {
+      z-index: 1;
+    }
+  }
+}
+
+* {
+  scrollbar-color: hsl(var(--border)) transparent;
+  scrollbar-width: thin;
+  border-color: hsl(var(--border));
+}
+
+html,
+body {
+  height: 100%;
+}
+
+body {
+  box-sizing: border-box;
+  margin: 0;
+  font-family: var(--font-family);
+  color: hsl(var(--foreground));
+  background: hsl(var(--background));
+  -webkit-tap-highlight-color: transparent;
+}
+
+#app {
+  height: 100%;
+}
+
+/* textarea 字体跟随系统 */
+textarea {
+  font-family: inherit;
+}
@@ -1,142 +0,0 @@
-// 页面布局 CSS 变量
-:root {
-  // 头部高度
-  --g-header-height: 60px;
-  // 侧边栏宽度
-  --g-main-sidebar-width: 80px;
-  --g-sub-sidebar-width: 220px;
-  --g-sub-sidebar-collapse-width: 64px;
-  // 侧边栏 Logo 区域高度
-  --g-sidebar-logo-height: 50px;
-  // 标签栏高度
-  --g-tabbar-height: 50px;
-  // 工具栏高度
-  --g-toolbar-height: 50px;
-}
-
-// 明暗模式 CSS 变量
-/* stylelint-disable-next-line no-duplicate-selectors */
-:root {
-  &::view-transition-old(root),
-  &::view-transition-new(root) {
-    mix-blend-mode: normal;
-    animation: none;
-  }
-
-  &::view-transition-old(root) {
-    z-index: 1;
-  }
-
-  &::view-transition-new(root) {
-    z-index: 9999;
-  }
-
-  --g-box-shadow-color: rgb(0 0 0 / 12%);
-
-  &.dark {
-    &::view-transition-old(root) {
-      z-index: 9999;
-    }
-
-    &::view-transition-new(root) {
-      z-index: 1;
-    }
-
-    --g-box-shadow-color: rgb(0 0 0 / 72%);
-  }
-}
-
-::-webkit-scrollbar {
-  width: 12px;
-  height: 12px;
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: rgb(0 0 0 / 40%);
-  background-clip: padding-box;
-  border: 3px solid transparent;
-  border-radius: 6px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background-color: rgb(0 0 0 / 50%);
-}
-
-::-webkit-scrollbar-track {
-  background-color: transparent;
-}
-
-html,
-body {
-  height: 100%;
-}
-
-body {
-  box-sizing: border-box;
-  margin: 0;
-  font-family: Lato, "PingFang SC", "Microsoft YaHei", sans-serif;
-  background-color: var(--g-container-bg);
-  -webkit-tap-highlight-color: transparent;
-
-  &.overflow-hidden {
-    overflow: hidden;
-  }
-}
-
-* {
-  box-sizing: inherit;
-}
-
-// 右侧内容区针对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] {
-    width: 100% !important;
-    transform: translateX(-50%) !important;
-  }
-}
-// textarea 字体跟随系统
-textarea {
-  font-family: inherit;
-}
-
-/* Overrides Floating Vue */
-.v-popper--theme-dropdown,
-.v-popper--theme-tooltip {
-  --at-apply: 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;
-
-  box-shadow: 0 6px 30px rgb(0 0 0 / 10%);
-}
-
-.v-popper--theme-tooltip .v-popper__arrow-inner,
-.v-popper--theme-dropdown .v-popper__arrow-inner {
-  visibility: visible;
-
-  --at-apply: 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;
-}
-
-.v-popper--theme-tooltip.v-popper--shown,
-.v-popper--theme-tooltip.v-popper--shown * {
-  transition: none !important;
-}
-
-[data-overlayscrollbars-contents] {
-  overscroll-behavior: contain;
-}
@@ -5,10 +5,10 @@
    position: fixed;
    top: 0;
    left: 0;
-    z-index: 2000;
+    z-index: 3000;
    width: 100%;
    height: 2px;
-    background: rgb(var(--ui-primary));
+    background: hsl(var(--primary));
  }

  .peg {
@@ -17,7 +17,7 @@
    display: block;
    width: 100px;
    height: 100%;
-    box-shadow: 0 0 10px rgb(var(--ui-primary)), 0 0 5px rgb(var(--ui-primary));
+    box-shadow: 0 0 10px hsl(var(--primary)), 0 0 5px hsl(var(--primary));
    opacity: 1;
    transform: rotate(3deg) translate(0, -4px);
  }
@@ -34,8 +34,8 @@
      width: 18px;
      height: 18px;
      border: solid 2px transparent;
-      border-top-color: rgb(var(--ui-primary));
-      border-left-color: rgb(var(--ui-primary));
+      border-top-color: hsl(var(--primary));
+      border-left-color: hsl(var(--primary));
      border-radius: 50%;
      animation: nprogress-spinner 400ms linear infinite;
    }
@@ -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;
  }
 }

@@ -46,8 +46,8 @@

  &::before,
  &::after {
-    display: block;
    clear: both;
+    display: block;
    content: "";
  }
 }
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import useUserStore from '@/store/modules/user'
+import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { toast } from 'vue-sonner'
+import * as z from 'zod'
+
+defineOptions({
+  name: 'EditPasswordForm',
+})
+
+const userStore = useUserStore()
+
+const loading = ref(false)
+
+const form = useForm({
+  validationSchema: toTypedSchema(
+    z.object({
+      password: z.string().min(1, '请输入原密码'),
+      newPassword: z.string().min(1, '请输入新密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
+      checkPassword: z.string().min(1, '请确认新密码'),
+    }).refine(data => data.newPassword === data.checkPassword, {
+      message: '两次输入的密码不一致',
+      path: ['checkPassword'],
+    }),
+  ),
+  initialValues: {
+    password: '',
+    newPassword: '',
+    checkPassword: '',
+  },
+})
+const onSubmit = form.handleSubmit((values) => {
+  loading.value = true
+  userStore.editPassword(values).then(async () => {
+    toast.success('模拟修改成功，请重新登录')
+    userStore.logout()
+  }).finally(() => {
+    loading.value = false
+  })
+})
+</script>
+
+<template>
+  <div class="w-full flex-col-stretch-center">
+    <div class="mb-6 space-y-2">
+      <h3 class="text-4xl color-[var(--el-text-color-primary)] font-bold">
+        修改密码
+      </h3>
+      <p class="text-sm text-muted-foreground lg:text-base">
+        请输入原密码、新密码和确认密码
+      </p>
+    </div>
+    <form @submit="onSubmit">
+      <FormField v-slot="{ componentField, errors }" name="password">
+        <FormItem class="relative pb-6 space-y-0">
+          <FormControl>
+            <FaInput type="password" placeholder="请输入原密码" class="w-full" :class="errors.length && 'border-destructive'" v-bind="componentField" />
+          </FormControl>
+          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
+            <FormMessage class="absolute bottom-1 text-xs" />
+          </Transition>
+        </FormItem>
+      </FormField>
+      <FormField v-slot="{ componentField, errors }" name="newPassword">
+        <FormItem class="relative pb-6 space-y-0">
+          <FormControl>
+            <FaInput type="password" placeholder="请输入新密码" class="w-full" :class="errors.length && 'border-destructive'" v-bind="componentField" />
+          </FormControl>
+          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
+            <FormMessage class="absolute bottom-1 text-xs" />
+          </Transition>
+        </FormItem>
+      </FormField>
+      <FormField v-slot="{ componentField, errors }" name="checkPassword">
+        <FormItem class="relative pb-6 space-y-0">
+          <FormControl>
+            <FaInput type="password" placeholder="请确认新密码" class="w-full" :class="errors.length && 'border-destructive'" v-bind="componentField" />
+          </FormControl>
+          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
+            <FormMessage class="absolute bottom-1 text-xs" />
+          </Transition>
+        </FormItem>
+      </FormField>
+      <FaButton :loading="loading" size="lg" class="mt-8 w-full" type="submit">
+        保存
+      </FaButton>
+    </form>
+  </div>
+</template>
@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import useUserStore from '@/store/modules/user'
+import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import * as z from 'zod'
+
+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' | 'qrcode'>('default')
+
+const form = useForm({
+  validationSchema: toTypedSchema(z.object({
+    account: z.string().min(1, '请输入用户名'),
+    password: z.string().min(1, '请输入密码'),
+    remember: z.boolean(),
+  })),
+  initialValues: {
+    account: props.account ?? localStorage.getItem('login_account') ?? '',
+    password: '',
+    remember: !!localStorage.getItem('login_account'),
+  },
+})
+const onSubmit = form.handleSubmit((values) => {
+  loading.value = true
+  userStore.login(values).then(() => {
+    if (values.remember) {
+      localStorage.setItem('login_account', values.account)
+    }
+    else {
+      localStorage.removeItem('login_account')
+    }
+    emits('onLogin', values.account)
+  }).finally(() => {
+    loading.value = false
+  })
+})
+
+function testAccount(account: string) {
+  form.setFieldValue('account', account)
+  form.setFieldValue('password', '123456')
+  onSubmit()
+}
+</script>
+
+<template>
+  <div class="min-h-500px w-full flex-col-stretch-center p-12">
+    <div class="mb-6 space-y-2">
+      <h3 class="text-4xl color-[var(--el-text-color-primary)] font-bold">
+        欢迎使用 👋🏻
+      </h3>
+      <p class="text-sm text-muted-foreground lg:text-base">
+        {{ title }}
+      </p>
+    </div>
+    <div class="mb-4">
+      <FaTabs
+        v-model="type" :list="[
+          { label: '账号密码登录', value: 'default' },
+          { label: '扫码登录', value: 'qrcode' },
+        ]" class="inline-flex"
+      />
+    </div>
+    <div v-show="type === 'default'">
+      <form @submit="onSubmit">
+        <FormField v-slot="{ componentField, errors }" name="account">
+          <FormItem class="relative pb-6 space-y-0">
+            <FormControl>
+              <FaInput type="text" placeholder="请输入用户名" class="w-full" :class="errors.length && 'border-destructive'" v-bind="componentField" />
+            </FormControl>
+            <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
+              <FormMessage class="absolute bottom-1 text-xs" />
+            </Transition>
+          </FormItem>
+        </FormField>
+        <FormField v-slot="{ componentField, errors }" name="password">
+          <FormItem class="relative pb-6 space-y-0">
+            <FormControl>
+              <FaInput type="password" placeholder="请输入密码" class="w-full" :class="errors.length && 'border-destructive'" v-bind="componentField" />
+            </FormControl>
+            <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
+              <FormMessage class="absolute bottom-1 text-xs" />
+            </Transition>
+          </FormItem>
+        </FormField>
+        <div class="mb-4 flex-center-between">
+          <div class="flex-center-start">
+            <FormField v-slot="{ componentField }" type="checkbox" name="remember">
+              <FormItem>
+                <FormControl>
+                  <FaCheckbox v-bind="componentField">
+                    记住我
+                  </FaCheckbox>
+                </FormControl>
+              </FormItem>
+            </FormField>
+          </div>
+          <FaButton variant="link" class="h-auto p-0" type="button" @click="emits('onResetPassword', form.values.account)">
+            忘记密码了?
+          </FaButton>
+        </div>
+        <FaButton :loading="loading" size="lg" class="w-full" type="submit">
+          登录
+        </FaButton>
+        <div class="mt-4 flex-center gap-2 text-sm">
+          <span class="text-secondary-foreground op-50">还没有帐号?</span>
+          <FaButton variant="link" class="h-auto p-0" type="button" @click="emits('onRegister', form.values.account)">
+            注册新帐号
+          </FaButton>
+        </div>
+      </form>
+      <div class="mt-4 text-center -mb-4">
+        <FaDivider>演示账号一键登录</FaDivider>
+        <div class="space-x-2">
+          <FaButton variant="default" size="sm" plain @click="testAccount('admin')">
+            admin
+          </FaButton>
+          <FaButton variant="outline" size="sm" plain @click="testAccount('test')">
+            test
+          </FaButton>
+        </div>
+      </div>
+    </div>
+    <div v-show="type === 'qrcode'">
+      <div class="flex-col-center">
+        <img src="https://s2.loli.net/2024/04/26/GsahtuIZ9XOg5jr.png" class="h-[250px] w-[250px]">
+        <div class="mt-2 text-sm text-secondary-foreground op-50">
+          请使用微信扫码登录
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import * as z from 'zod'
+
+defineOptions({
+  name: 'RegisterForm',
+})
+
+const props = defineProps<{
+  account?: string
+}>()
+
+const emits = defineEmits<{
+  onLogin: [account?: string]
+  onRegister: [account?: string]
+}>()
+
+const loading = ref(false)
+
+const form = useForm({
+  validationSchema: toTypedSchema(
+    z.object({
+      account: z.string().min(1, '请输入用户名'),
+      captcha: z.string().min(6, '请输入验证码'),
+      password: z.string().min(1, '请输入密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
+      checkPassword: z.string().min(1, '请再次输入密码'),
+    }).refine(data => data.password === data.checkPassword, {
+      message: '两次输入的密码不一致',
+      path: ['checkPassword'],
+    }),
+  ),
+  initialValues: {
+    account: props.account ?? '',
+    captcha: '',
+    password: '',
+    checkPassword: '',
+  },
+})
+const onSubmit = form.handleSubmit((values) => {
+  loading.value = true
+  emits('onRegister', values.account)
+})
+</script>
+
+<template>
+  <div class="min-h-500px w-full flex-col-stretch-center p-12">
+    <form @submit="onSubmit">
+      <div class="mb-8 space-y-2">
+        <h3 class="text-4xl color-[var(--el-text-color-primary)] font-bold">
+          探索从这里开始 🚀
+        </h3>
+        <p class="text-sm text-muted-foreground lg:text-base">
+          演示系统未提供该功能
+        </p>
+      </div>
+      <FormField v-slot="{ componentField, errors }" name="account">
+        <FormItem class="relative pb-6 space-y-0">
+          <FormControl>
+            <FaInput type="text" placeholder="请输入用户名" class="w-full" :class="errors.length && 'border-destructive'" v-bind="componentField" />
+          </FormControl>
+          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
+            <FormMessage class="absolute bottom-1 text-xs" />
+          </Transition>
+        </FormItem>
+      </FormField>
+      <FormField v-slot="{ componentField, value, errors }" name="password">
+        <FormItem class="relative pb-6 space-y-0">
+          <FormControl>
+            <FaInput type="password" placeholder="请输入密码" class="w-full" :class="errors.length && 'border-destructive'" v-bind="componentField" />
+          </FormControl>
+          <FormDescription>
+            <FaPasswordStrength :password="value" class="mt-2" />
+          </FormDescription>
+          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
+            <FormMessage class="absolute bottom-1 text-xs" />
+          </Transition>
+        </FormItem>
+      </FormField>
+      <FormField v-slot="{ componentField, errors }" name="checkPassword">
+        <FormItem class="relative pb-6 space-y-0">
+          <FormControl>
+            <FaInput type="password" placeholder="请再次输入密码" class="w-full" :class="errors.length && 'border-destructive'" v-bind="componentField" />
+          </FormControl>
+          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
+            <FormMessage class="absolute bottom-1 text-xs" />
+          </Transition>
+        </FormItem>
+      </FormField>
+      <FaButton :loading="loading" size="lg" class="mt-4 w-full" type="submit">
+        注册
+      </FaButton>
+      <div class="mt-4 flex-center gap-2 text-sm">
+        <span class="text-secondary-foreground op-50">已经有帐号?</span>
+        <FaButton variant="link" class="h-auto p-0" @click="emits('onLogin', form.values.account)">
+          去登录
+        </FaButton>
+      </div>
+    </form>
+  </div>
+</template>
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import * as z from 'zod'
+
+defineOptions({
+  name: 'ResetPasswordForm',
+})
+
+const props = defineProps<{
+  account?: string
+}>()
+
+const emits = defineEmits<{
+  onLogin: [account?: string]
+  onResetPassword: [account?: string]
+}>()
+
+const loading = ref(false)
+
+const form = useForm({
+  validationSchema: toTypedSchema(z.object({
+    account: z.string().min(1, '请输入用户名'),
+    captcha: z.string().min(6, '请输入验证码'),
+    newPassword: z.string().min(1, '请输入新密码').min(6, '密码长度为6到18位').max(18, '密码长度为6到18位'),
+  })),
+  initialValues: {
+    account: props.account ?? '',
+    captcha: '',
+    newPassword: '',
+  },
+})
+const onSubmit = form.handleSubmit((values) => {
+  loading.value = true
+  emits('onResetPassword', values.account)
+})
+
+const countdown = ref(0)
+const countdownInterval = ref(Number.NaN)
+function handleSendCaptcha() {
+  countdown.value = 60
+  countdownInterval.value = window.setInterval(() => {
+    countdown.value--
+    if (countdown.value === 0) {
+      clearInterval(countdownInterval.value)
+    }
+  }, 1000)
+}
+</script>
+
+<template>
+  <div class="min-h-500px w-full flex-col-stretch-center p-12">
+    <form @submit="onSubmit">
+      <div class="mb-8 space-y-2">
+        <h3 class="text-4xl color-[var(--el-text-color-primary)] font-bold">
+          忘记密码了? 🔒
+        </h3>
+        <p class="text-sm text-muted-foreground lg:text-base">
+          演示系统未提供该功能
+        </p>
+      </div>
+      <FormField v-slot="{ componentField, errors }" name="account">
+        <FormItem class="relative pb-6 space-y-0">
+          <FormControl>
+            <FaInput type="text" placeholder="请输入用户名" class="w-full" :class="errors.length && 'border-destructive'" v-bind="componentField" />
+          </FormControl>
+          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
+            <FormMessage class="absolute bottom-1 text-xs" />
+          </Transition>
+        </FormItem>
+      </FormField>
+      <div class="flex-start-between gap-2">
+        <FormField v-slot="{ componentField, value, setValue }" name="captcha">
+          <FormItem class="relative pb-6 space-y-0">
+            <FormControl>
+              <FaPinInput :model-value="value" :name="componentField.name" :length="6" class="border-destructive" @update:model-value="val => setValue(val)" />
+            </FormControl>
+            <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
+              <FormMessage class="absolute bottom-1 text-xs" />
+            </Transition>
+          </FormItem>
+        </FormField>
+        <FaButton variant="outline" size="lg" :disabled="countdown > 0" class="flex-1 px-4" @click="handleSendCaptcha">
+          {{ countdown === 0 ? '发送验证码' : `${countdown} 秒后可重新发送` }}
+        </FaButton>
+      </div>
+      <FormField v-slot="{ componentField, errors }" name="newPassword">
+        <FormItem class="relative pb-6 space-y-0">
+          <FormControl>
+            <FaInput type="password" placeholder="请输入新密码" class="w-full" :class="errors.length && 'border-destructive'" v-bind="componentField" />
+          </FormControl>
+          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
+            <FormMessage class="absolute bottom-1 text-xs" />
+          </Transition>
+        </FormItem>
+      </FormField>
+      <FaButton :loading="loading" size="lg" class="mt-4 w-full" type="submit">
+        确认
+      </FaButton>
+      <div class="mt-4 flex-center gap-2 text-sm color-[var(--el-text-color-secondary)]">
+        <FaButton variant="link" class="h-auto p-0" @click="emits('onLogin', form.values.account)">
+          去登录
+        </FaButton>
+      </div>
+    </form>
+  </div>
+</template>
@@ -1,20 +0,0 @@
-<script setup lang="ts">
-defineOptions({
-  name: 'Auth',
-})
-
-const props = defineProps<{
-  value: string | string[]
-}>()
-
-function check() {
-  return useAuth().auth(props.value)
-}
-</script>
-
-<template>
-  <div>
-    <slot v-if="check()" />
-    <slot v-else name="no-auth" />
-  </div>
-</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',
@@ -29,7 +30,7 @@ const props = withDefaults(
 )

 const emits = defineEmits<{
-  'onSuccess': [
+  onSuccess: [
    res: any,
    file: UploadUserFile,
    fileList: UploadUserFile[],
@@ -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,12 +92,14 @@ 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
  >
    <div class="slot">
-      <SvgIcon name="i-ep:upload-filled" class="el-icon--upload" />
+      <FaIcon name="i-ep:upload-filled" class="el-icon--upload" />
      <div class="el-upload__text">
        将文件拖到此处，或<em>点击上传</em>
      </div>
@@ -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;

@@ -1,45 +0,0 @@
-<script setup lang="ts">
-defineOptions({
-  name: 'FixedActionBar',
-})
-
-const isBottom = ref(false)
-
-onMounted(() => {
-  onScroll()
-  window.addEventListener('scroll', onScroll)
-})
-
-onUnmounted(() => {
-  window.removeEventListener('scroll', onScroll)
-})
-
-function onScroll() {
-  // 变量scrollTop是滚动条滚动时，滚动条上端距离顶部的距离
-  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
-  // 变量windowHeight是可视区的高度
-  const windowHeight = document.documentElement.clientHeight || document.body.clientHeight
-  // 变量scrollHeight是滚动条的总高度（当前可滚动的页面的总高度）
-  const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
-  // 滚动条到底部
-  isBottom.value = Math.ceil(scrollTop + windowHeight) >= scrollHeight
-}
-</script>
-
-<template>
-  <div
-    class="fixed-action-bar bottom-0 z-4 bg-[var(--g-container-bg)] p-5 text-center transition" :class="{ shadow: !isBottom }" data-fixed-calc-width
-  >
-    <slot />
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.fixed-action-bar {
-  box-shadow: 0 0 1px 0 var(--g-box-shadow-color);
-
-  &.shadow {
-    box-shadow: 0 -10px 10px -10px var(--g-box-shadow-color);
-  }
-}
-</style>
@@ -28,13 +28,13 @@ const realHeight = computed(() => {
  <ElImage :src="src" fit="cover" :style="`width:${realWidth};height:${realHeight};`" :preview-src-list="[src]" preview-teleported>
    <template #error>
      <div class="image-slot">
-        <SvgIcon name="image-load-fail" />
+        <FaIcon name="i-ph:image-broken-duotone" />
      </div>
    </template>
  </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',
@@ -31,7 +32,7 @@ const props = withDefaults(
 )

 const emits = defineEmits<{
-  'onSuccess': [
+  onSuccess: [
    res: any,
  ]
 }>()
@@ -97,13 +98,14 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
      :before-upload="beforeUpload"
      :on-progress="onProgress"
      :on-success="onSuccess"
+      :http-request="httpRequest"
      drag
      class="image-upload"
    >
      <ElImage v-if="url === ''" :src="url === '' ? placeholder : url" :style="`width:${width}px;height:${height}px;`" fit="fill">
        <template #error>
          <div class="image-slot" :style="`width:${width}px;height:${height}px;`">
-            <SvgIcon name="i-ep:plus" class="icon" />
+            <FaIcon name="i-ep:plus" class="icon" />
          </div>
        </template>
      </ElImage>
@@ -111,11 +113,11 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
        <ElImage :src="url" :style="`width:${width}px;height:${height}px;`" fit="fill" />
        <div class="mask">
          <div class="actions">
-            <span title="预览" @click.stop="preview">
-              <SvgIcon name="i-ep:zoom-in" class="icon" />
+            <span @click.stop="preview">
+              <FaIcon name="i-ep:zoom-in" class="icon" />
            </span>
-            <span title="移除" @click.stop="remove">
-              <SvgIcon name="i-ep:delete" class="icon" />
+            <span @click.stop="remove">
+              <FaIcon name="i-ep:delete" class="icon" />
            </span>
          </div>
        </div>
@@ -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',
@@ -33,7 +34,7 @@ const props = withDefaults(
 )

 const emits = defineEmits<{
-  'onSuccess': [
+  onSuccess: [
    res: any,
  ]
 }>()
@@ -106,17 +107,17 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
      <ElImage v-if="index < max" :src="item" :style="`width:${width}px;height:${height}px;`" fit="cover" />
      <div class="mask">
        <div class="actions">
-          <span title="预览" @click="preview(index)">
-            <SvgIcon name="i-ep:zoom-in" class="icon" />
+          <span @click="preview(index)">
+            <FaIcon name="i-ep:zoom-in" class="icon" />
          </span>
-          <span title="移除" @click="remove(index)">
-            <SvgIcon name="i-ep:delete" class="icon" />
+          <span @click="remove(index)">
+            <FaIcon name="i-ep:delete" class="icon" />
          </span>
-          <span v-show="url.length > 1" title="左移" :class="{ disabled: index === 0 }" @click="move(index, 'left')">
-            <SvgIcon name="i-ep:back" class="icon" />
+          <span v-show="url.length > 1" :class="{ disabled: index === 0 }" @click="move(index, 'left')">
+            <FaIcon name="i-ep:back" class="icon" />
          </span>
-          <span v-show="url.length > 1" title="右移" :class="{ disabled: index === url.length - 1 }" @click="move(index, 'right')">
-            <SvgIcon name="i-ep:right" class="icon" />
+          <span v-show="url.length > 1" :class="{ disabled: index === url.length - 1 }" @click="move(index, 'right')">
+            <FaIcon name="i-ep:right" class="icon" />
          </span>
        </div>
      </div>
@@ -131,11 +132,12 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
      :before-upload="beforeUpload"
      :on-progress="onProgress"
      :on-success="onSuccess"
+      :http-request="httpRequest"
      drag
      class="images-upload"
    >
      <div class="image-slot" :style="`width:${width}px;height:${height}px;`">
-        <SvgIcon name="i-ep:plus" class="icon" />
+        <FaIcon name="i-ep:plus" class="icon" />
      </div>
      <div v-show="uploadData.progress.percent" class="progress" :style="`width:${width}px;height:${height}px;`">
        <ElImage :src="uploadData.progress.preview" :style="`width:${width}px;height:${height}px;`" fit="fill" />
@@ -151,7 +153,7 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
  </div>
 </template>

-<style lang="scss" scoped>
+<style scoped>
 .upload-container {
  line-height: initial;
 }
@@ -163,7 +165,7 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
 .images {
  position: relative;
  display: inline-block;
-  margin-right: 10px;
+  margin-inline-end: 10px;
  overflow: hidden;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
@@ -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);
@@ -1,32 +0,0 @@
-<script setup lang="ts">
-defineOptions({
-  name: 'PageHeader',
-})
-
-defineProps<{
-  title?: string
-  content?: string
-}>()
-
-const slots = useSlots()
-</script>
-
-<template>
-  <div class="page-header mb-5 flex flex-wrap items-center justify-between gap-5 bg-[var(--g-container-bg)] px-5 py-4 transition-background-color-300">
-    <div class="main flex-[1_1_70%]">
-      <div class="text-2xl">
-        <slot name="title">
-          {{ title }}
-        </slot>
-      </div>
-      <div class="mt-2 text-sm text-stone-5 empty:hidden">
-        <slot name="content">
-          {{ content }}
-        </slot>
-      </div>
-    </div>
-    <div v-if="slots.default" class="ml-a flex-none">
-      <slot />
-    </div>
-  </div>
-</template>
@@ -1,47 +0,0 @@
-<script setup lang="ts">
-defineOptions({
-  name: 'PageMain',
-})
-
-const props = withDefaults(
-  defineProps<{
-    title?: string
-    collaspe?: boolean
-    height?: string
-  }>(),
-  {
-    title: '',
-    collaspe: false,
-    height: '',
-  },
-)
-
-const titleSlot = !!useSlots().title
-
-const isCollaspe = ref(props.collaspe)
-function unCollaspe() {
-  isCollaspe.value = false
-}
-</script>
-
-<template>
-  <div
-    class="page-main relative m-4 flex flex-col bg-[var(--g-container-bg)] transition-background-color-300" :class="{
-      'of-hidden': isCollaspe,
-    }" :style="{
-      height: isCollaspe ? height : '',
-    }"
-  >
-    <div v-if="titleSlot || title" class="title-container border-b-1 border-b-[var(--g-bg)] border-b-solid px-5 py-4 transition-border-color-300">
-      <slot name="title">
-        {{ title }}
-      </slot>
-    </div>
-    <div class="main-container p-5">
-      <slot />
-    </div>
-    <div v-if="isCollaspe" class="collaspe absolute bottom-0 w-full cursor-pointer from-transparent to-[var(--g-container-bg)] bg-gradient-to-b pb-2 pt-10 text-center" @click="unCollaspe">
-      <SvgIcon name="i-ep:arrow-down" class="text-xl op-30 transition-opacity hover:op-100" />
-    </div>
-  </div>
-</template>
@@ -1,143 +0,0 @@
-<script setup lang="ts">
-// 行政区划数据来源于 https://github.com/modood/Administrative-divisions-of-China
-import pcasRaw from './pcas-code.json'
-
-defineOptions({
-  name: 'PcasCascader',
-})
-
-const props = withDefaults(
-  defineProps<{
-    disabled?: boolean
-    type?: 'pc' | 'pca' | 'pcas'
-    format?: 'code' | 'name' | 'both'
-  }>(),
-  {
-    disabled: false,
-    type: 'pca',
-    format: 'code',
-  },
-)
-
-const value = defineModel<string[] | {
-  code: string
-  name: string
-}[]>({
-  default: [],
-})
-
-interface pcasItem {
-  code: string
-  name: string
-  children?: pcasItem[]
-}
-
-const pcasData = computed(() => {
-  const data: pcasItem[] = []
-  // 省份
-  pcasRaw.forEach((p) => {
-    const tempP: pcasItem = {
-      code: p.code,
-      name: p.name,
-    }
-    const tempChildrenC: pcasItem[] = []
-    // 城市
-    p.children.forEach((c) => {
-      const tempC: pcasItem = {
-        code: c.code,
-        name: c.name,
-      }
-      if (['pca', 'pcas'].includes(props.type)) {
-        const tempChildrenA: pcasItem[] = []
-        // 区县
-        c.children.forEach((a) => {
-          const tempA: pcasItem = {
-            code: a.code,
-            name: a.name,
-          }
-          if (props.type === 'pcas') {
-            const tempChildrenS: pcasItem[] = []
-            // 街道
-            a.children.forEach((s) => {
-              const tempS: pcasItem = {
-                code: s.code,
-                name: s.name,
-              }
-              tempChildrenS.push(tempS)
-            })
-            tempA.children = tempChildrenS
-          }
-          tempChildrenA.push(tempA)
-        })
-        tempC.children = tempChildrenA
-      }
-      tempChildrenC.push(tempC)
-    })
-    tempP.children = tempChildrenC
-    data.push(tempP)
-  })
-  return data
-})
-
-const myValue = computed({
-  // 将入参数据转成 code 码
-  get: () => {
-    return anyToCode(value.value)
-  },
-  // 将 code 码转成出参数据
-  set: (val) => {
-    value.value = val ? codeToAny(val) : []
-  },
-})
-
-function anyToCode(value: any[], dictionarie: any[] = pcasData.value) {
-  const input: string[] = []
-  if (value.length > 0) {
-    const findItem = dictionarie.find((item) => {
-      if (props.format === 'code') {
-        return item.code === value[0]
-      }
-      else if (props.format === 'name') {
-        return item.name === value[0]
-      }
-      else {
-        return item.name === value[0].name && item.code === value[0].code
-      }
-    })
-    input.push(findItem.code)
-    if (findItem.children) {
-      input.push(...anyToCode(value.slice(1 - value.length), findItem.children))
-    }
-  }
-  return input
-}
-
-function codeToAny(codes: string[], dictionarie: any[] = pcasData.value): any {
-  const output = []
-  const findItem = dictionarie.find(item => item.code === codes[0])
-  if (findItem) {
-    switch (props.format) {
-      case 'code':
-        output.push(findItem.code)
-        break
-      case 'name':
-        output.push(findItem.name)
-        break
-      case 'both':
-        output.push({
-          code: findItem.code,
-          name: findItem.name,
-        })
-    }
-    const newCodes = codes.slice(1 - codes.length)
-    if (newCodes.length > 0 && findItem.children) {
-      output.push(...codeToAny(newCodes, findItem.children))
-    }
-  }
-  return output
-}
-</script>
-
-<template>
-  <ElCascader v-model="myValue" :options="pcasData as any[]" :props="{ value: 'code', label: 'name' }" :disabled="disabled" clearable filterable />
-</template>
@@ -1,66 +0,0 @@
-<script setup lang="ts">
-import { Icon } from '@iconify/vue'
-
-defineOptions({
-  name: 'SvgIcon',
-})
-
-const props = defineProps<{
-  name: string
-  flip?: 'horizontal' | 'vertical' | 'both'
-  rotate?: number
-  color?: string
-  size?: string | number
-}>()
-
-const outputType = computed(() => {
-  if (/^https?:\/\//.test(props.name)) {
-    return 'img'
-  }
-  else if (/i-[^:]+:[^:]+/.test(props.name)) {
-    return 'unocss'
-  }
-  else if (props.name.includes(':')) {
-    return 'iconify'
-  }
-  else {
-    return 'svg'
-  }
-})
-
-const style = computed(() => {
-  const transform = []
-  if (props.flip) {
-    switch (props.flip) {
-      case 'horizontal':
-        transform.push('rotateY(180deg)')
-        break
-      case 'vertical':
-        transform.push('rotateX(180deg)')
-        break
-      case 'both':
-        transform.push('rotateX(180deg)')
-        transform.push('rotateY(180deg)')
-        break
-    }
-  }
-  if (props.rotate) {
-    transform.push(`rotate(${props.rotate % 360}deg)`)
-  }
-  return {
-    ...(props.color && { color: props.color }),
-    ...(props.size && { fontSize: typeof props.size === 'number' ? `${props.size}px` : props.size }),
-    ...(transform.length && { transform: transform.join(' ') }),
-  }
-})
-</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" />
-    <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]">
-  </i>
-</template>
@@ -1,64 +0,0 @@
-<script setup lang="ts">
-import eventBus from '@/utils/eventBus'
-
-const isShow = ref(false)
-
-const { pkg, lastBuildTime } = __SYSTEM_INFO__
-
-onMounted(() => {
-  eventBus.on('global-system-info-toggle', () => {
-    isShow.value = !isShow.value
-  })
-})
-</script>
-
-<template>
-  <HSlideover v-model="isShow" title="系统信息">
-    <div 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">
-        最后编译时间
-      </h2>
-      <div class="my-4 text-center text-lg font-sans">
-        {{ lastBuildTime }}
-      </div>
-    </div>
-    <div class="px-4">
-      <h2 class="m-0 text-lg font-bold">
-        生产环境依赖
-      </h2>
-      <ul class="list-none pl-0 text-sm">
-        <li v-for="(val, key) in (pkg.dependencies as object)" :key="key" class="flex items-center justify-between rounded px-2 py-1.5 hover:bg-stone-1 dark:hover:bg-stone-9">
-          <div class="font-bold">
-            {{ key }}
-          </div>
-          <div class="font-sans">
-            {{ val }}
-          </div>
-        </li>
-      </ul>
-    </div>
-    <div class="px-4">
-      <h2 class="m-0 text-lg font-bold">
-        开发环境依赖
-      </h2>
-      <ul class="list-none pl-0 text-sm">
-        <li v-for="(val, key) in (pkg.devDependencies as object)" :key="key" class="flex items-center justify-between rounded px-2 py-1.5 hover:bg-stone-1 dark:hover:bg-stone-9">
-          <div class="font-bold">
-            {{ key }}
-          </div>
-          <div class="font-sans">
-            {{ val }}
-          </div>
-        </li>
-      </ul>
-    </div>
-  </HSlideover>
-</template>
@@ -1,38 +0,0 @@
-<script setup lang="ts">
-defineOptions({
-  name: 'Trend',
-})
-
-const props = withDefaults(
-  defineProps<{
-    value: string
-    type?: 'up' | 'down'
-    prefix?: string
-    suffix?: string
-    reverse?: boolean
-  }>(),
-  {
-    type: 'up',
-    prefix: '',
-    suffix: '',
-    reverse: false,
-  },
-)
-
-const isUp = computed(() => {
-  let isUp = props.type === 'up'
-  if (props.reverse) {
-    isUp = !isUp
-  }
-  return isUp
-})
-</script>
-
-<template>
-  <div class="flex items-center transition" :class="`${isUp ? 'c-green' : 'c-red'}`">
-    <span v-if="prefix" class="prefix">{{ prefix }}</span>
-    <span class="text">{{ value }}</span>
-    <span v-if="suffix" class="suffix">{{ suffix }}</span>
-    <SvgIcon name="i-ep:caret-top" :rotate="isUp ? 0 : 180" class="ml-1 transition" />
-  </div>
-</template>
@@ -1,10 +1,11 @@
 <script setup lang="ts">
-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'
+import useSettingsStore from '@/store/modules/settings'
+import eventBus from '@/utils/eventBus'
+import { diffTwoObj } from '@/utils/object'
+import { useClipboard } from '@vueuse/core'
+import { toast } from 'vue-sonner'

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

 const isShow = ref(false)

-watch(() => settingsStore.settings.menu.menuMode, (value) => {
+const appRadius = computed<number[]>({
+  get() {
+    return [settingsStore.settings.app.radius]
+  },
+  set(value) {
+    settingsStore.settings.app.radius = value[0]
+  },
+})
+
+watch(() => settingsStore.settings.menu.mode, (value) => {
  if (value === 'single') {
    menuStore.setActived(0)
  }
@@ -36,405 +46,397 @@ const { copy, copied, isSupported } = useClipboard()

 watch(copied, (val) => {
  if (val) {
-    Message.success('复制成功，请粘贴到 src/settings.ts 文件中！', {
-      zIndex: 2000,
+    toast.success('复制成功，请粘贴到 src/settings.ts 文件中！', {
+      position: 'top-center',
    })
  }
 })

-function isObject(value: any) {
-  return typeof value === 'object' && !Array.isArray(value)
-}
-// 比较两个对象，并提取出不同的部分
-function getObjectDiff(originalObj: Record<string, any>, diffObj: Record<string, any>) {
-  if (!isObject(originalObj) || !isObject(diffObj)) {
-    return diffObj
-  }
-  const diff: Record<string, any> = {}
-  for (const key in diffObj) {
-    const originalValue = originalObj[key]
-    const diffValue = diffObj[key]
-    if (JSON.stringify(originalValue) !== JSON.stringify(diffValue)) {
-      if (isObject(originalValue) && isObject(diffValue)) {
-        const nestedDiff = getObjectDiff(originalValue, diffValue)
-        if (Object.keys(nestedDiff).length > 0) {
-          diff[key] = nestedDiff
-        }
-      }
-      else {
-        diff[key] = diffValue
-      }
-    }
-  }
-  return diff
-}
-
 function handleCopy() {
-  copy(JSON.stringify(getObjectDiff(settingsDefault, settingsStore.settings), null, 2))
+  copy(JSON.stringify(diffTwoObj(settingsDefault, settingsStore.settings), null, 2))
 }
 </script>

 <template>
-  <HSlideover v-model="isShow" title="应用配置">
+  <FaDrawer v-model="isShow" title="应用配置" description="在生产环境中应关闭该模块" :footer="isSupported" content-class="sm:min-w-md">
    <div class="rounded-2 bg-rose/20 px-4 py-2 text-sm/6 c-rose">
-      <p class="my-1">
-        应用配置可实时预览效果，但只是临时生效，要想真正应用于项目，可以点击下方的「复制配置」按钮，并将配置粘贴到 src/settings.ts 文件中。
-      </p>
-      <p class="my-1">
-        注意：在生产环境中应关闭该模块。
-      </p>
-    </div>
-    <div class="divider">
-      颜色主题风格
-    </div>
-    <div class="flex items-center justify-center pb-4">
-      <HTabList
-        v-model="settingsStore.settings.app.colorScheme"
-        :options="[
-          { icon: 'i-ri:sun-line', label: '明亮', value: 'light' },
-          { icon: 'i-ri:moon-line', label: '暗黑', value: 'dark' },
-          { icon: 'i-ri:computer-line', label: '系统', value: '' },
-        ]"
-        class="w-60"
-      />
-    </div>
-    <div v-if="settingsStore.mode === 'pc'" class="divider">
-      导航栏模式
-    </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-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-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-container" />
-        </div>
-      </HTooltip>
-    </div>
-    <div class="divider">
-      导航栏
-    </div>
-    <div class="setting-item">
-      <div class="label">
-        主导航切换跳转
-        <HTooltip text="开启该功能后，切换主导航时，页面自动跳转至该主导航下，次导航里第一个导航">
-          <SvgIcon name="i-ri:question-line" />
-        </HTooltip>
-      </div>
-      <HToggle v-model="settingsStore.settings.menu.switchMainMenuAndPageJump" :disabled="['single'].includes(settingsStore.settings.menu.menuMode)" />
-    </div>
-    <div class="setting-item">
-      <div class="label">
-        次导航保持展开一个
-        <HTooltip text="开启该功能后，次导航只保持单个菜单的展开">
-          <SvgIcon name="i-ri:question-line" />
-        </HTooltip>
-      </div>
-      <HToggle v-model="settingsStore.settings.menu.subMenuUniqueOpened" />
-    </div>
-    <div class="setting-item">
-      <div class="label">
-        次导航是否折叠
-      </div>
-      <HToggle v-model="settingsStore.settings.menu.subMenuCollapse" />
-    </div>
-    <div v-if="settingsStore.mode === 'pc'" class="setting-item">
-      <div class="label">
-        显示次导航折叠按钮
-      </div>
-      <HToggle v-model="settingsStore.settings.menu.enableSubMenuCollapseButton" />
-    </div>
-    <div class="setting-item">
-      <div class="label">
-        是否启用快捷键
-      </div>
-      <HToggle v-model="settingsStore.settings.menu.enableHotkeys" :disabled="['single'].includes(settingsStore.settings.menu.menuMode)" />
-    </div>
-    <div class="divider">
-      顶栏
-    </div>
-    <div class="setting-item">
-      <div class="label">
-        模式
-      </div>
-      <HCheckList
-        v-model="settingsStore.settings.topbar.mode" :options="[
-          { label: '静止', value: 'static' },
-          { label: '固定', value: 'fixed' },
-          { label: '粘性', value: 'sticky' },
-        ]"
-      />
+      应用配置可实时预览效果，但只是临时生效，要想真正应用于项目，可以点击下方的「复制配置」按钮，并将配置粘贴到 src/settings.ts 文件中。
    </div>
    <div>
-      <div class="divider">
-        标签栏
+      <FaDivider>颜色主题风格</FaDivider>
+      <div class="flex items-center justify-center pb-4">
+        <FaTabs
+          v-model="settingsStore.settings.app.colorScheme"
+          :list="[
+            { icon: 'i-ri:sun-line', label: '明亮', value: 'light' },
+            { icon: 'i-ri:moon-line', label: '暗黑', value: 'dark' },
+            { icon: 'i-codicon:color-mode', label: '系统', value: '' },
+          ]"
+          class="w-60"
+        />
      </div>
      <div class="setting-item">
        <div class="label">
-          是否启用
+          圆角系数
+        </div>
+        <FaSlider v-model="appRadius" :min="0" :max="1" :step="0.25" class="w-1/2" />
+      </div>
+    </div>
+    <div v-if="settingsStore.mode === 'pc'">
+      <FaDivider>导航栏模式</FaDivider>
+      <div class="menu-mode">
+        <FaTooltip text="侧边栏模式 (含主导航)" :delay="500">
+          <div class="mode mode-side" :class="{ active: settingsStore.settings.menu.mode === 'side' }" @click="settingsStore.settings.menu.mode = 'side'">
+            <div class="mode-container" />
+          </div>
+        </FaTooltip>
+        <FaTooltip text="顶部模式" :delay="500">
+          <div class="mode mode-head" :class="{ active: settingsStore.settings.menu.mode === 'head' }" @click="settingsStore.settings.menu.mode = 'head'">
+            <div class="mode-container" />
+          </div>
+        </FaTooltip>
+        <FaTooltip text="侧边栏模式 (不含主导航)" :delay="500">
+          <div class="mode mode-single" :class="{ active: settingsStore.settings.menu.mode === 'single' }" @click="settingsStore.settings.menu.mode = 'single'">
+            <div class="mode-container" />
+          </div>
+        </FaTooltip>
+      </div>
+    </div>
+    <div>
+      <FaDivider>导航栏</FaDivider>
+      <div class="setting-item">
+        <div class="label">
+          主导航点击模式
+          <FaTooltip text="智能选择会判断次导航是否只有且只有一个可访问的菜单进行切换或跳转操作">
+            <FaIcon name="i-ri:question-line" />
+          </FaTooltip>
+        </div>
+        <div class="flex-center-start gap-1">
+          <FaButton
+            v-for="(item, index) in [
+              { label: '切换', value: 'switch' },
+              { label: '跳转', value: 'jump' },
+              { label: '智能选择', value: 'smart' },
+            ]" :key="index" :variant="settingsStore.settings.menu.mainMenuClickMode === item.value ? 'default' : 'outline'" size="sm" @click="settingsStore.settings.menu.mainMenuClickMode = (item.value as any)"
+          >
+            {{ item.label }}
+          </FaButton>
        </div>
-        <HToggle v-model="settingsStore.settings.tabbar.enable" />
      </div>
      <div class="setting-item">
        <div class="label">
-          是否显示图标
+          次导航保持展开一个
+          <FaTooltip text="开启该功能后，次导航只保持单个菜单的展开">
+            <FaIcon name="i-ri:question-line" />
+          </FaTooltip>
        </div>
-        <HToggle v-model="settingsStore.settings.tabbar.enableIcon" :disabled="!settingsStore.settings.tabbar.enable" />
+        <FaSwitch v-model="settingsStore.settings.menu.subMenuUniqueOpened" />
+      </div>
+      <div class="setting-item">
+        <div class="label">
+          次导航是否折叠
+        </div>
+        <FaSwitch v-model="settingsStore.settings.menu.subMenuCollapse" />
+      </div>
+      <div v-if="settingsStore.mode === 'pc'" class="setting-item">
+        <div class="label">
+          显示次导航折叠按钮
+        </div>
+        <FaSwitch v-model="settingsStore.settings.menu.enableSubMenuCollapseButton" />
      </div>
      <div class="setting-item">
        <div class="label">
          是否启用快捷键
        </div>
-        <HToggle v-model="settingsStore.settings.tabbar.enableHotkeys" :disabled="!settingsStore.settings.tabbar.enable" />
+        <FaSwitch v-model="settingsStore.settings.menu.enableHotkeys" :disabled="['single'].includes(settingsStore.settings.menu.mode)" />
      </div>
    </div>
-    <div class="divider">
-      工具栏
-    </div>
-    <div v-if="settingsStore.mode === 'pc'" class="setting-item">
-      <div class="label">
-        面包屑导航
+    <div>
+      <FaDivider>顶栏</FaDivider>
+      <div class="setting-item">
+        <div class="label">
+          模式
+        </div>
+        <div class="flex-center-start gap-1">
+          <FaButton
+            v-for="(item, index) in [
+              { label: '静止', value: 'static' },
+              { label: '固定', value: 'fixed' },
+              { label: '粘性', value: 'sticky' },
+            ]" :key="index" :variant="settingsStore.settings.topbar.mode === item.value ? 'default' : 'outline'" size="sm" @click="settingsStore.settings.topbar.mode = (item.value as any)"
+          >
+            {{ item.label }}
+          </FaButton>
+        </div>
      </div>
-      <HToggle v-model="settingsStore.settings.toolbar.breadcrumb" />
    </div>
-    <div class="setting-item">
-      <div class="label">
-        导航搜索
-        <HTooltip text="对导航进行快捷搜索">
-          <SvgIcon name="i-ri:question-line" />
-        </HTooltip>
+    <div>
+      <FaDivider>标签栏</FaDivider>
+      <div class="setting-item">
+        <div class="label">
+          是否启用
+        </div>
+        <FaSwitch v-model="settingsStore.settings.tabbar.enable" />
      </div>
-      <HToggle v-model="settingsStore.settings.toolbar.navSearch" />
-    </div>
-    <div v-if="settingsStore.mode === 'pc'" class="setting-item">
-      <div class="label">
-        全屏
+      <div class="setting-item">
+        <div class="label">
+          是否显示图标
+        </div>
+        <FaSwitch v-model="settingsStore.settings.tabbar.enableIcon" :disabled="!settingsStore.settings.tabbar.enable" />
      </div>
-      <HToggle v-model="settingsStore.settings.toolbar.fullscreen" />
-    </div>
-    <div class="setting-item">
-      <div class="label">
-        页面刷新
-        <HTooltip text="使用框架内提供的刷新功能进行页面刷新">
-          <SvgIcon name="i-ri:question-line" />
-        </HTooltip>
+      <div class="setting-item">
+        <div class="label">
+          是否启用快捷键
+        </div>
+        <FaSwitch v-model="settingsStore.settings.tabbar.enableHotkeys" :disabled="!settingsStore.settings.tabbar.enable" />
      </div>
-      <HToggle v-model="settingsStore.settings.toolbar.pageReload" />
    </div>
-    <div class="setting-item">
-      <div class="label">
-        颜色主题
-        <HTooltip text="开启后可在明亮/暗黑模式中切换">
-          <SvgIcon name="i-ri:question-line" />
-        </HTooltip>
+    <div>
+      <FaDivider>工具栏</FaDivider>
+      <div v-if="settingsStore.mode === 'pc'" class="setting-item">
+        <div class="label">
+          面包屑导航
+        </div>
+        <FaSwitch v-model="settingsStore.settings.toolbar.breadcrumb" />
      </div>
-      <HToggle v-model="settingsStore.settings.toolbar.colorScheme" />
-    </div>
-    <div class="divider">
-      页面
-    </div>
-    <div class="setting-item">
-      <div class="label">
-        是否启用快捷键
+      <div class="setting-item">
+        <div class="label">
+          导航搜索
+          <FaTooltip text="对导航进行快捷搜索">
+            <FaIcon name="i-ri:question-line" />
+          </FaTooltip>
+        </div>
+        <FaSwitch v-model="settingsStore.settings.toolbar.navSearch" />
      </div>
-      <HToggle v-model="settingsStore.settings.mainPage.enableHotkeys" />
-    </div>
-    <div class="divider">
-      导航搜索
-    </div>
-    <div class="setting-item">
-      <div class="label">
-        是否启用快捷键
+      <div v-if="settingsStore.mode === 'pc'" class="setting-item">
+        <div class="label">
+          全屏
+        </div>
+        <FaSwitch v-model="settingsStore.settings.toolbar.fullscreen" />
      </div>
-      <HToggle v-model="settingsStore.settings.navSearch.enableHotkeys" :disabled="!settingsStore.settings.toolbar.navSearch" />
-    </div>
-    <div class="divider">
-      底部版权
-    </div>
-    <div class="setting-item">
-      <div class="label">
-        是否启用
+      <div class="setting-item">
+        <div class="label">
+          页面刷新
+          <FaTooltip text="使用框架内提供的刷新功能进行页面刷新">
+            <FaIcon name="i-ri:question-line" />
+          </FaTooltip>
+        </div>
+        <FaSwitch v-model="settingsStore.settings.toolbar.pageReload" />
      </div>
-      <HToggle v-model="settingsStore.settings.copyright.enable" />
-    </div>
-    <div class="setting-item">
-      <div class="label">
-        日期
+      <div class="setting-item">
+        <div class="label">
+          颜色主题
+          <FaTooltip text="开启后可在明亮/暗黑模式中切换">
+            <FaIcon name="i-ri:question-line" />
+          </FaTooltip>
+        </div>
+        <FaSwitch v-model="settingsStore.settings.toolbar.colorScheme" />
      </div>
-      <HInput v-model="settingsStore.settings.copyright.dates" :disabled="!settingsStore.settings.copyright.enable" />
    </div>
-    <div class="setting-item">
-      <div class="label">
-        公司
+    <div>
+      <FaDivider>主页</FaDivider>
+      <div class="setting-item">
+        <div class="label">
+          是否启用快捷键
+        </div>
+        <FaSwitch v-model="settingsStore.settings.mainPage.enableHotkeys" />
      </div>
-      <HInput v-model="settingsStore.settings.copyright.company" :disabled="!settingsStore.settings.copyright.enable" />
    </div>
-    <div class="setting-item">
-      <div class="label">
-        网址
+    <div>
+      <FaDivider>导航搜索</FaDivider>
+      <div class="setting-item">
+        <div class="label">
+          是否启用快捷键
+        </div>
+        <FaSwitch v-model="settingsStore.settings.navSearch.enableHotkeys" :disabled="!settingsStore.settings.toolbar.navSearch" />
      </div>
-      <HInput v-model="settingsStore.settings.copyright.website" :disabled="!settingsStore.settings.copyright.enable" />
    </div>
-    <div class="setting-item">
-      <div class="label">
-        备案
+    <div>
+      <FaDivider>底部版权</FaDivider>
+      <div class="setting-item">
+        <div class="label">
+          是否启用
+        </div>
+        <FaSwitch v-model="settingsStore.settings.copyright.enable" />
      </div>
-      <HInput v-model="settingsStore.settings.copyright.beian" :disabled="!settingsStore.settings.copyright.enable" />
-    </div>
-    <div class="divider">
-      主页
-    </div>
-    <div class="setting-item">
-      <div class="label">
-        是否启用
-        <HTooltip text="该功能开启时，登录成功默认进入主页，反之则默认进入导航栏里第一个导航页面">
-          <SvgIcon name="i-ri:question-line" />
-        </HTooltip>
+      <div class="setting-item">
+        <div class="label">
+          日期
+        </div>
+        <FaInput v-model="settingsStore.settings.copyright.dates" :disabled="!settingsStore.settings.copyright.enable" />
      </div>
-      <HToggle v-model="settingsStore.settings.home.enable" />
-    </div>
-    <div class="setting-item">
-      <div class="label">
-        主页名称
-        <HTooltip text="开启国际化时，该设置无效">
-          <SvgIcon name="i-ri:question-line" />
-        </HTooltip>
+      <div class="setting-item">
+        <div class="label">
+          公司
+        </div>
+        <FaInput v-model="settingsStore.settings.copyright.company" :disabled="!settingsStore.settings.copyright.enable" />
      </div>
-      <HInput v-model="settingsStore.settings.home.title" />
-    </div>
-    <div class="divider">
-      其它
-    </div>
-    <div class="setting-item">
-      <div class="label">
-        是否启用权限
+      <div class="setting-item">
+        <div class="label">
+          网址
+        </div>
+        <FaInput v-model="settingsStore.settings.copyright.website" :disabled="!settingsStore.settings.copyright.enable" />
      </div>
-      <HToggle v-model="settingsStore.settings.app.enablePermission" />
-    </div>
-    <div class="setting-item">
-      <div class="label">
-        载入进度条
-        <HTooltip text="该功能开启时，跳转路由会看到页面顶部有进度条">
-          <SvgIcon name="i-ri:question-line" />
-        </HTooltip>
+      <div class="setting-item">
+        <div class="label">
+          备案
+        </div>
+        <FaInput v-model="settingsStore.settings.copyright.beian" :disabled="!settingsStore.settings.copyright.enable" />
      </div>
-      <HToggle v-model="settingsStore.settings.app.enableProgress" />
    </div>
-    <div class="setting-item">
-      <div class="label">
-        动态标题
-        <HTooltip text="该功能开启时，页面标题会显示当前路由标题，格式为“页面标题 - 网站名称”；关闭时则显示网站名称，网站名称在项目根目录下 .env.* 文件里配置">
-          <SvgIcon name="i-ri:question-line" />
-        </HTooltip>
+    <div>
+      <FaDivider>主页</FaDivider>
+      <div class="setting-item">
+        <div class="label">
+          是否启用
+          <FaTooltip text="该功能开启时，登录成功默认进入主页，反之则默认进入导航栏里第一个导航页面">
+            <FaIcon name="i-ri:question-line" />
+          </FaTooltip>
+        </div>
+        <FaSwitch v-model="settingsStore.settings.home.enable" />
+      </div>
+      <div class="setting-item">
+        <div class="label">
+          主页名称
+          <FaTooltip text="开启国际化时，该设置无效">
+            <FaIcon name="i-ri:question-line" />
+          </FaTooltip>
+        </div>
+        <FaInput v-model="settingsStore.settings.home.title" />
      </div>
-      <HToggle v-model="settingsStore.settings.app.enableDynamicTitle" />
    </div>
-    <template v-if="isSupported" #footer>
-      <HButton block @click="handleCopy">
-        <SvgIcon name="i-ep:document-copy" />
+    <div>
+      <FaDivider>其它</FaDivider>
+      <div class="setting-item">
+        <div class="label">
+          是否启用权限
+        </div>
+        <FaSwitch v-model="settingsStore.settings.app.enablePermission" />
+      </div>
+      <div class="setting-item">
+        <div class="label">
+          载入进度条
+          <FaTooltip text="该功能开启时，跳转路由会看到页面顶部有进度条">
+            <FaIcon name="i-ri:question-line" />
+          </FaTooltip>
+        </div>
+        <FaSwitch v-model="settingsStore.settings.app.enableProgress" />
+      </div>
+      <div class="setting-item">
+        <div class="label">
+          哀悼模式
+          <FaTooltip text="该功能开启时，整站会变为灰色">
+            <FaIcon name="i-ri:question-line" />
+          </FaTooltip>
+        </div>
+        <FaSwitch v-model="settingsStore.settings.app.enableMournMode" />
+      </div>
+      <div class="setting-item">
+        <div class="label">
+          色弱模式
+        </div>
+        <FaSwitch v-model="settingsStore.settings.app.enableColorAmblyopiaMode" />
+      </div>
+      <div class="setting-item">
+        <div class="label">
+          动态标题
+          <FaTooltip text="该功能开启时，页面标题会显示当前路由标题，格式为“页面标题 - 网站名称”；关闭时则显示网站名称，网站名称在项目根目录下 .env.* 文件里配置">
+            <FaIcon name="i-ri:question-line" />
+          </FaTooltip>
+        </div>
+        <FaSwitch v-model="settingsStore.settings.app.enableDynamicTitle" />
+      </div>
+    </div>
+    <template #footer>
+      <FaButton class="w-full" @click="handleCopy">
+        <FaIcon name="i-ep:document-copy" />
        复制配置
-      </HButton>
+      </FaButton>
    </template>
-  </HSlideover>
+  </FaDrawer>
 </template>

-<style lang="scss" scoped>
-.divider {
-  --at-apply: 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;
-  }
-}
-
+<style scoped>
 .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-border cursor-pointer transition;

    &.active {
-      --at-apply: ring-ui-primary ring-2;
+      --uno: ring-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-primary;
    }

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

    .mode-container {
-      --at-apply: bg-ui-primary/20 border-dashed border-ui-primary;
+      --uno: bg-primary/20 border-width-1.5 border-dashed border-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-lg transition hover-bg-secondary;

  .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;
    }
  }
 }
@@ -1,45 +0,0 @@
-<script setup lang="ts">
-defineOptions({
-  name: 'BackTop',
-})
-
-const transitionClass = {
-  enterActiveClass: 'ease-out duration-300',
-  enterFromClass: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95',
-  enterToClass: 'opacity-100 translate-y-0 sm:scale-100',
-  leaveActiveClass: 'ease-in duration-200',
-  leaveFromClass: 'opacity-100 translate-y-0 sm:scale-100',
-  leaveToClass: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95',
-}
-
-onMounted(() => {
-  window.addEventListener('scroll', handleScroll)
-  handleScroll()
-})
-
-onBeforeUnmount(() => {
-  window.removeEventListener('scroll', handleScroll)
-})
-
-const scrollTop = ref<number | null>(null)
-function handleScroll() {
-  scrollTop.value = document.documentElement.scrollTop
-}
-
-function handleClick() {
-  document.documentElement.scrollTo({
-    top: 0,
-    behavior: 'smooth',
-  })
-}
-</script>
-
-<template>
-  <Teleport to="body">
-    <Transition v-bind="transitionClass">
-      <div v-if="scrollTop && scrollTop >= 200" class="fixed bottom-4 right-4 z-1000 h-12 w-12 flex cursor-pointer items-center justify-center rounded-full bg-white shadow-lg ring-1 ring-stone-3 ring-inset dark:bg-dark hover:bg-stone-1 dark:ring-stone-7 dark:hover:bg-dark/50" @click="handleClick">
-        <SvgIcon name="i-icon-park-outline:to-top-one" :size="24" />
-      </div>
-    </Transition>
-  </Teleport>
-</template>
@@ -4,7 +4,7 @@
  </div>
 </template>

-<style lang="scss" scoped>
+<style scoped>
 :deep(.breadcrumb-item) {
  &:first-child {
    .separator {
@@ -22,14 +22,14 @@ function onClick() {
 </script>

 <template>
-  <div class="breadcrumb-item flex items-center text-dark dark:text-white">
+  <div class="breadcrumb-item flex items-center text-foreground">
    <span class="separator mx-2">
      {{ separator }}
    </span>
    <span
      class="text flex items-center opacity-60"
      :class="{
-        'is-link cursor-pointer transition-opacity hover:opacity-100': !!props.to,
+        'is-link cursor-pointer transition-opacity hover-opacity-100': !!props.to,
      }" @click="onClick"
    >
      <slot />
@@ -1,37 +0,0 @@
-<script setup lang="ts">
-import useSettingsStore from '@/store/modules/settings'
-
-defineOptions({
-  name: 'Copyright',
-})
-
-const settingsStore = useSettingsStore()
-</script>
-
-<template>
-  <footer v-if="settingsStore.settings.copyright.enable" class="copyright">
-    <span>Copyright</span>
-    <SvgIcon name="i-ri:copyright-line" :size="18" />
-    <span v-if="settingsStore.settings.copyright.dates">{{ settingsStore.settings.copyright.dates }}</span>
-    <template v-if="settingsStore.settings.copyright.company">
-      <a v-if="settingsStore.settings.copyright.website" :href="settingsStore.settings.copyright.website" target="_blank" rel="noopener">{{ settingsStore.settings.copyright.company }}</a>
-      <span v-else>{{ settingsStore.settings.copyright.company }}</span>
-    </template>
-    <a v-if="settingsStore.settings.copyright.beian" href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">{{ settingsStore.settings.copyright.beian }}</a>
-  </footer>
-</template>
-
-<style lang="scss" scoped>
-.copyright {
-  --at-apply: flex items-center justify-center flex-wrap my-4 px-4 text-sm text-stone-5;
-
-  span,
-  a {
-    --at-apply: px-1;
-  }
-
-  a {
-    --at-apply: text-center no-underline text-stone-5 hover:text-dark dark:hover:text-light transition;
-  }
-}
-</style>
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import Logo from '../Logo/index.vue'
-import ToolbarRightSide from '../Topbar/Toolbar/rightSide.vue'
+import { useSlots } from '@/slots'
 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',
@@ -12,149 +13,125 @@ const settingsStore = useSettingsStore()
 const menuStore = useMenuStore()

 const { switchTo } = useMenu()
-
-const menuRef = ref()
-
-// 顶部模式鼠标滚动
-function handlerMouserScroll(event: WheelEvent) {
-  menuRef.value.scrollBy({
-    left: (event.deltaY || event.detail) > 0 ? 50 : -50,
-  })
-}
 </script>

 <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'">
+      <component :is="useSlots('header-start')" />
      <div class="header-container">
-        <div class="main">
-          <Logo class="title" />
-          <div ref="menuRef" class="menu-container" @wheel.prevent="handlerMouserScroll">
-            <!-- 顶部模式 -->
-            <div class="menu flex of-hidden transition-all">
-              <template v-for="(item, index) in menuStore.allMenus" :key="index">
+        <Logo class="title" />
+        <component :is="useSlots('header-after-logo')" />
+        <FaScrollArea :scrollbar="false" mask horizontal gradient-color="var(--g-header-bg)" class="menu-container h-full flex-1">
+          <!-- 顶部模式 -->
+          <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 mx-1 py-2 transition-all" :class="{
+                  active: index === menuStore.actived,
+                }"
+              >
                <div
-                  class="menu-item relative transition-all" :class="{
-                    active: index === menuStore.actived,
-                  }"
+                  v-if="item.children && item.children.length !== 0" class="group menu-item-container relative h-full w-full flex cursor-pointer items-center justify-between gap-1 rounded-lg px-3 text-[var(--g-header-menu-color)] transition-all hover-(bg-[var(--g-header-menu-hover-bg)] text-[var(--g-header-menu-hover-color)])" :class="{
+                    'text-[var(--g-header-menu-active-color)]! bg-[var(--g-header-menu-active-bg)]!': index === menuStore.actived,
+                  }" :title="typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title" @click="switchTo(index)"
                >
-                  <div
-                    v-if="item.children && item.children.length !== 0" class="group menu-item-container h-full w-full flex cursor-pointer items-center justify-between gap-1 px-3 text-[var(--g-header-menu-color)] transition-all hover:(bg-[var(--g-header-menu-hover-bg)] text-[var(--g-header-menu-hover-color)])" :class="{
-                      'text-[var(--g-header-menu-active-color)]! bg-[var(--g-header-menu-active-bg)]!': index === menuStore.actived,
-                    }" :title="typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title" @click="switchTo(index)"
-                  >
-                    <div class="inline-flex flex-1 items-center justify-center gap-1">
-                      <SvgIcon v-if="item.meta?.icon" :name="item.meta?.icon" :size="20" class="menu-item-container-icon transition-transform group-hover:scale-120" async />
-                      <span class="w-full flex-1 truncate text-sm transition-height transition-opacity transition-width">
-                        {{ typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title }}
-                      </span>
-                    </div>
+                  <div class="inline-flex flex-1 items-center justify-center gap-1">
+                    <FaIcon 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>
                  </div>
                </div>
-              </template>
-            </div>
+              </div>
+            </template>
          </div>
-        </div>
+        </FaScrollArea>
        <ToolbarRightSide />
      </div>
+      <component :is="useSlots('header-end')" />
    </header>
  </Transition>
 </template>

-<style lang="scss" scoped>
+<style scoped>
 header {
  position: fixed;
  top: 0;
-  right: 0;
+  right: var(--scrollbar-width, 0);
  left: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
-  width: 100%;
+  width: calc(100% - var(--scrollbar-width, 0px));
  height: var(--g-header-height);
-  padding: 0 20px;
  margin: 0 auto;
  color: var(--g-header-color);
  background-color: var(--g-header-bg);
-  box-shadow: -1px 0 0 0 var(--g-border-color), 1px 0 0 0 var(--g-border-color), 0 1px 0 0 var(--g-border-color);
+  box-shadow: -1px 0 0 0 hsl(var(--border)), 1px 0 0 0 hsl(var(--border)), 0 1px 0 0 hsl(var(--border));
  transition: background-color 0.3s;

  .header-container {
    display: flex;
+    gap: 30px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
+    padding: 0 12px 0 20px;
    margin: 0 auto;

-    .main {
-      display: flex;
-      flex: 1;
-      flex-wrap: wrap;
-      align-items: center;
-      height: 100%;
-    }
-  }
+    :deep(a.title) {
+      position: relative;
+      flex: 0;
+      width: inherit;
+      height: inherit;
+      padding: 0;
+      background-color: inherit;

-  :deep(a.title) {
-    position: relative;
-    width: inherit;
-    height: inherit;
-    padding: inherit;
-    background-color: inherit;
-
-    .logo {
-      width: initial;
-      height: 40px;
-    }
-
-    span {
-      font-size: 20px;
-      color: var(--g-header-color);
-      letter-spacing: 1px;
-    }
-  }
-
-  .menu-container {
-    flex: 1;
-    height: 100%;
-    padding: 0 20px;
-    margin: 0 30px;
-    overflow-x: auto;
-    mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
-
-    // firefox隐藏滚动条
-    scrollbar-width: none;
-
-    // chrome隐藏滚动条
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
-
-  .menu {
-    display: inline-flex;
-    height: 100%;
-
-    :deep(.menu-item) {
-      .menu-item-container {
-        color: var(--g-header-menu-color);
-
-        &:hover {
-          color: var(--g-header-menu-hover-color);
-          background-color: var(--g-header-menu-hover-bg);
-        }
+      .logo {
+        width: initial;
+        max-width: initial;
+        height: min(70%, 50px);
      }

-      &.active .menu-item-container {
-        color: var(--g-header-menu-active-color);
-        background-color: var(--g-header-menu-active-bg);
+      span {
+        font-size: 20px;
+        color: var(--g-header-color);
+        letter-spacing: 1px;
+      }
+    }
+
+    .menu-container {
+      .menu {
+        display: inline-flex;
+        height: 100%;
+
+        :deep(.menu-item) {
+          .menu-item-container {
+            color: var(--g-header-menu-color);
+
+            &:hover {
+              color: var(--g-header-menu-hover-color);
+              background-color: var(--g-header-menu-hover-bg);
+            }
+
+            .menu-item-container-icon {
+              font-size: 20px !important;
+            }
+          }
+
+          &.active .menu-item-container {
+            color: var(--g-header-menu-active-color);
+            background-color: var(--g-header-menu-active-bg);
+          }
+        }
      }
    }
  }
 }

-// 头部动画
+/* 头部动画 */
 .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',
@@ -18,71 +18,95 @@ onMounted(() => {
 </script>

 <template>
-  <HDialog v-model="isShow" title="快捷键介绍">
+  <FaModal v-model="isShow" title="快捷键介绍" :footer="false">
    <div class="px-4">
-      <div class="grid gap-2 md:grid-cols-2">
+      <div class="grid gap-4 sm-grid-cols-2">
        <div>
          <h2 class="m-0 text-lg font-bold">
            全局
          </h2>
-          <ul class="list-none pl-4 text-sm">
-            <li class="py-1">
-              <HKbd>{{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }}</HKbd>
-              <HKbd>I</HKbd>
+          <ul class="list-none ps-2 pt-2 text-sm">
+            <li class="flex-baseline gap-2 py-1">
+              <div class="flex-shrink-0 space-x-1">
+                <FaKbd>{{ settingsStore.os === 'mac' ? '⌘' : 'Ctrl' }}</FaKbd>
+                <FaKbd>I</FaKbd>
+              </div>
              查看系统信息
            </li>
-            <li v-if="settingsStore.settings.toolbar.navSearch && settingsStore.settings.navSearch.enableHotkeys" class="py-1">
-              <HKbd>{{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }}</HKbd>
-              <HKbd>S</HKbd>
+            <li v-if="settingsStore.settings.toolbar.navSearch && settingsStore.settings.navSearch.enableHotkeys" class="flex-baseline gap-2 py-1">
+              <div class="flex-shrink-0 space-x-1">
+                <FaKbd>{{ settingsStore.os === 'mac' ? '⌘' : 'Ctrl' }}</FaKbd>
+                <FaKbd>K</FaKbd>
+              </div>
              唤起导航搜索
            </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>
-          <ul class="list-none pl-4 text-sm">
-            <li class="py-1">
-              <HKbd>{{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }}</HKbd>
-              <HKbd>`</HKbd>
+          <ul class="list-none ps-2 pt-2 text-sm">
+            <li class="flex-baseline gap-2 py-1">
+              <div class="flex-shrink-0 space-x-1">
+                <FaKbd>{{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }}</FaKbd>
+                <FaKbd>`</FaKbd>
+              </div>
              激活下一个主导航
            </li>
+            <li class="flex-baseline gap-2 py-1">
+              <div class="flex-shrink-0 space-x-1">
+                <FaKbd>{{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }}</FaKbd>
+                <FaKbd>{{ settingsStore.os === 'mac' ? '⇧' : 'Shift' }}</FaKbd>
+                <FaKbd>`</FaKbd>
+              </div>
+              激活上一个主导航
+            </li>
          </ul>
        </div>
        <div v-if="settingsStore.settings.tabbar.enable && settingsStore.settings.tabbar.enableHotkeys">
          <h2 class="m-0 text-lg font-bold">
            标签栏
          </h2>
-          <ul class="list-none pl-4 text-sm">
-            <li class="py-1">
-              <HKbd>{{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }}</HKbd>
-              <HKbd>←</HKbd>
+          <ul class="list-none ps-2 pt-2 text-sm">
+            <li class="flex-baseline gap-2 py-1">
+              <div class="flex-shrink-0 space-x-1">
+                <FaKbd>{{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }}</FaKbd>
+                <FaKbd>←</FaKbd>
+              </div>
              切换到上一个标签页
            </li>
-            <li class="py-1">
-              <HKbd>{{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }}</HKbd>
-              <HKbd>→</HKbd>
+            <li class="flex-baseline gap-2 py-1">
+              <div class="flex-shrink-0 space-x-1">
+                <FaKbd>{{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }}</FaKbd>
+                <FaKbd>→</FaKbd>
+              </div>
              切换到下一个标签页
            </li>
-            <li class="py-1">
-              <HKbd>{{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }}</HKbd>
-              <HKbd>W</HKbd>
+            <li class="flex-baseline gap-2 py-1">
+              <div class="flex-shrink-0 space-x-1">
+                <FaKbd>{{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }}</FaKbd>
+                <FaKbd>W</FaKbd>
+              </div>
              关闭当前标签页
            </li>
-            <li class="py-1">
-              <HKbd>{{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }}</HKbd>
-              <HKbd>1~9</HKbd>
+            <li class="flex-baseline gap-2 py-1">
+              <div class="flex-shrink-0 space-x-1">
+                <FaKbd>{{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }}</FaKbd>
+                <FaKbd>1~9</FaKbd>
+              </div>
              切换到第 n 个标签页
            </li>
-            <li class="py-1">
-              <HKbd>{{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }}</HKbd>
-              <HKbd>0</HKbd>
+            <li class="flex-baseline gap-2 py-1">
+              <div class="flex-shrink-0 space-x-1">
+                <FaKbd>{{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }}</FaKbd>
+                <FaKbd>0</FaKbd>
+              </div>
              切换到最后一个标签页
            </li>
          </ul>
        </div>
      </div>
    </div>
-  </HDialog>
+  </FaModal>
 </template>
@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import imgLogo from '@/assets/images/logo.svg'
 import useSettingsStore from '@/store/modules/settings'
-import imgLogo from '@/assets/images/logo.png'

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

 defineOptions({
  name: 'MainSidebar',
@@ -11,49 +13,73 @@ const settingsStore = useSettingsStore()
 const menuStore = useMenuStore()

 const { switchTo } = useMenu()
+
+onMounted(() => {
+  hotkeys('alt+`', (e) => {
+    if (settingsStore.settings.menu.enableHotkeys && ['side', 'head'].includes(settingsStore.settings.menu.mode)) {
+      e.preventDefault()
+      switchTo(menuStore.actived + 1 < menuStore.allMenus.length ? menuStore.actived + 1 : 0)
+    }
+  })
+  hotkeys('alt+shift+`', (e) => {
+    if (settingsStore.settings.menu.enableHotkeys && ['side', 'head'].includes(settingsStore.settings.menu.mode)) {
+      e.preventDefault()
+      switchTo(menuStore.actived - 1 >= 0 ? menuStore.actived - 1 : menuStore.allMenus.length - 1)
+    }
+  })
+})
+onUnmounted(() => {
+  hotkeys.unbind('alt+`')
+  hotkeys.unbind('alt+shift+`')
+})
 </script>

 <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">
+      <component :is="useSlots('main-sidebar-top')" />
      <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,
-            }"
-          >
+      <component :is="useSlots('main-sidebar-after-logo')" />
+      <FaScrollArea :scrollbar="false" mask gradient-color="var(--g-main-sidebar-bg)" class="menu">
+        <!-- 侧边栏模式（含主导航） -->
+        <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 relative h-full w-full flex cursor-pointer items-center justify-between gap-1 rounded-lg 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]">
+                  <FaIcon 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>
-      </div>
+          </template>
+        </div>
+      </FaScrollArea>
+      <component :is="useSlots('main-sidebar-bottom')" />
    </div>
  </Transition>
 </template>

-<style lang="scss" scoped>
+<style scoped>
 .main-sidebar-container {
  position: relative;
-  z-index: 1;
+  z-index: 10;
  display: flex;
  flex-direction: column;
  width: var(--g-main-sidebar-width);
  color: var(--g-main-sidebar-menu-color);
  background-color: var(--g-main-sidebar-bg);
-  box-shadow: 1px 0 0 0 var(--g-border-color);
+  box-shadow: 1px 0 0 0 hsl(var(--border)), -1px 0 0 0 hsl(var(--border));
  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;

  .sidebar-logo {
@@ -63,17 +89,6 @@ const { switchTo } = useMenu()

  .menu {
    flex: 1;
-    width: initial;
-    overflow: hidden auto;
-    overscroll-behavior: contain;
-
-    // firefox隐藏滚动条
-    scrollbar-width: none;
-
-    // chrome隐藏滚动条
-    &::-webkit-scrollbar {
-      display: none;
-    }

    :deep(.menu-item) {
      .menu-item-container {
@@ -86,7 +101,7 @@ const { switchTo } = useMenu()
        }

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

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

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

 defineOptions({
@@ -69,11 +70,7 @@ const closeMenu: MenuInjection['closeMenu'] = (index) => {
    })
    return
  }
-  Object.keys(subMenus.value).forEach((item) => {
-    if (subMenus.value[item].indexPath.includes(index)) {
-      openedMenus.value = openedMenus.value.filter(item => item !== index)
-    }
-  })
+  openedMenus.value = openedMenus.value.filter(item => item !== index)
 }

 function setSubMenusActive(index: string) {
@@ -106,7 +103,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,16 +159,16 @@ 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="cn('h-full w-full flex flex-col of-hidden transition-all-300', {
+      'flex-row w-auto': isMenuPopup && props.mode === 'horizontal',
+      'py-1': props.mode === 'vertical',
+    })"
  >
-    <template v-for="(item, index) in menu" :key="index">
-      <SubMenu v-if="item.children?.length" :menu="item" :unique-key="[item.path ?? JSON.stringify(item)]" />
-      <Item v-else :item="item" :unique-key="[item.path ?? JSON.stringify(item)]" @click="handleMenuItemClick(item.path ?? JSON.stringify(item))" />
+    <template v-for="item in menu" :key="item.path ?? JSON.stringify(item)">
+      <template v-if="item.meta?.menu !== false">
+        <SubMenu v-if="item.children?.length" :menu="item" :unique-key="[item.path ?? JSON.stringify(item)]" />
+        <Item v-else :item="item" :unique-key="[item.path ?? JSON.stringify(item)]" @click="handleMenuItemClick(item.path ?? JSON.stringify(item))" />
+      </template>
    </template>
  </div>
 </template>
@@ -1,7 +1,12 @@
 <script setup lang="ts">
 import type { SubMenuItemProps } from './types'
+import { cn } from '@/utils'
 import { rootMenuInjectionKey } from './types'

+defineOptions({
+  name: 'SubMenuItem',
+})
+
 const props = withDefaults(
  defineProps<SubMenuItemProps>(),
  {
@@ -25,13 +30,6 @@ const isItemActive = computed(() => {
  return isActived.value && (!props.subMenu || rootMenu.isMenuPopup)
 })

-// 缩进样式
-const indentStyle = computed(() => {
-  return !rootMenu.isMenuPopup
-    ? `padding-left: ${20 * (props.level ?? 0)}px`
-    : ''
-})
-
 defineExpose({
  ref: itemRef,
 })
@@ -39,12 +37,14 @@ defineExpose({

 <template>
  <div
-    ref="itemRef" class="menu-item relative transition-all" :class="{
-      active: isItemActive,
-    }"
+    ref="itemRef" :class="cn('menu-item relative transition-all', {
+      '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) ?? ''">
-      <HTooltip :enable="rootMenu.isMenuPopup && level === 0 && !subMenu" :text="typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title" placement="right" class="h-full w-full">
+      <FaTooltip :disabled="!rootMenu.isMenuPopup || level !== 0 || subMenu" :text="typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title" :side="rootMenu.props.mode === 'vertical' ? 'right' : 'bottom'" class="h-full w-full">
        <component
          :is="subMenu ? 'div' : 'a'" v-bind="{
            ...(!subMenu && {
@@ -52,42 +52,43 @@ 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="cn('group menu-item-container relative h-full w-full flex cursor-pointer items-center justify-between gap-1 rounded-lg 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)])', {
            '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="{
+            'px-3': rootMenu.isMenuPopup && level === 0,
+          })" :title="typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title" v-on="{
            ...(!subMenu && {
              click: navigate,
            }),
          }"
        >
          <div
-            class="inline-flex flex-1 items-center justify-center gap-[12px]" :class="{
+            :class="cn('inline-flex flex-1 items-center justify-center gap-[12px] pl-[calc(var(--indent-level)*20px)]', {
              'flex-col': rootMenu.isMenuPopup && level === 0 && rootMenu.props.mode === 'vertical',
-              'gap-1!': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName,
+              'gap-1': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName,
              'w-full': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName && rootMenu.props.mode === 'vertical',
-            }" :style="indentStyle"
+            })" :style="{
+              '--indent-level': !rootMenu.isMenuPopup ? props.level ?? 0 : 0,
+            }"
          >
-            <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 />
+            <FaIcon v-if="props.item.meta?.icon" :name="props.item.meta.icon" class="menu-item-container-icon size-5 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="{
+              v-if="!(rootMenu.isMenuPopup && level === 0 && !rootMenu.props.showCollapseName)" :class="cn('w-0 flex-1 truncate text-sm transition-height transition-opacity transition-width', {
                'opacity-0 w-0 h-0': rootMenu.isMenuPopup && level === 0 && !rootMenu.props.showCollapseName,
                'w-full text-center': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName,
-              }"
+              })"
            >
              {{ typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title }}
            </span>
          </div>
          <i
-            v-if="subMenu && !(rootMenu.isMenuPopup && level === 0)" class="relative ml-1 w-[10px] after:(absolute h-[1.5px] w-[6px] bg-current transition-transform-200 content-empty -translate-y-[1px]) before:(absolute h-[1.5px] w-[6px] bg-current transition-transform-200 content-empty -translate-y-[1px])" :class="[
-              expand ? 'before:(-rotate-45 -translate-x-[2px]) after:(rotate-45 translate-x-[2px])' : 'before:(rotate-45 -translate-x-[2px]) after:(-rotate-45 translate-x-[2px])',
-              rootMenu.isMenuPopup && level === 0 && 'opacity-0',
-              rootMenu.isMenuPopup && level !== 0 && '-rotate-90 -top-[1.5px]',
-            ]"
+            v-if="subMenu && !(rootMenu.isMenuPopup && level === 0)" :class="cn('relative ms-1 w-[10px] after:absolute before:absolute after:h-[1.5px] after:w-[6px] before:h-[1.5px] before:w-[6px] after:bg-current before:bg-current after:transition-transform-200 before:transition-transform-200 after:content-empty before:content-empty after:-translate-y-[1px] before:-translate-y-[1px]', {
+              [expand ? 'before:-rotate-45 before:-translate-x-[2px] after:rotate-45 after:translate-x-[2px]' : 'before:rotate-45 before:-translate-x-[2px] after:-rotate-45 after:translate-x-[2px]']: true,
+              'opacity-0': rootMenu.isMenuPopup && level === 0,
+              '-rotate-90 -top-[1.5px]': rootMenu.isMenuPopup && level !== 0,
+            })"
          />
        </component>
-      </HTooltip>
+      </FaTooltip>
    </router-link>
  </div>
 </template>
@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import { useTimeoutFn } from '@vueuse/core'
-import type { OverlayScrollbarsComponentRef } from 'overlayscrollbars-vue'
-import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue'
-import Item from './item.vue'
 import type { SubMenuProps } from './types'
+import { cn } from '@/utils'
+import { useTimeoutFn } from '@vueuse/core'
+import Item from './item.vue'
 import { rootMenuInjectionKey } from './types'

 defineOptions({
@@ -18,8 +17,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('subMenuRef')
 const rootMenu = inject(rootMenuInjectionKey)!

 const opened = computed(() => {
@@ -36,41 +35,53 @@ const transitionEvent = computed(() => {
        },
        afterEnter: () => {},
        beforeLeave: (el: HTMLElement) => {
-          el.style.overflow = 'hidden'
          el.style.maxHeight = `${el.offsetHeight}px`
+          el.style.overflow = 'hidden'
        },
        leave: (el: HTMLElement) => {
          el.style.maxHeight = '0'
        },
        afterLeave(el: HTMLElement) {
-          el.style.overflow = ''
-          el.style.maxHeight = ''
-        },
-      }
-    : {
-        enter(el: HTMLElement) {
-          const memorizedHeight = el.offsetHeight
-          el.style.maxHeight = '0'
-          el.style.overflow = 'hidden'
-          void el.offsetHeight
-          el.style.maxHeight = `${memorizedHeight}px`
-        },
-        afterEnter(el: HTMLElement) {
-          el.style.overflow = ''
-          el.style.maxHeight = ''
-        },
-        beforeLeave(el: HTMLElement) {
-          el.style.overflow = 'hidden'
-          el.style.maxHeight = `${el.offsetHeight}px`
-        },
-        leave(el: HTMLElement) {
-          el.style.maxHeight = '0'
-        },
-        afterLeave(el: HTMLElement) {
-          el.style.overflow = ''
          el.style.maxHeight = ''
+          el.style.overflow = ''
        },
      }
+    : CSS.supports('height', 'calc-size(auto, size)')
+      ? {}
+      : {
+          enter(el: HTMLElement) {
+            requestAnimationFrame(() => {
+              el.dataset.height = el.offsetHeight.toString()
+              el.style.maxHeight = '0'
+              void el.offsetHeight
+              el.style.maxHeight = `${el.dataset.height}px`
+              el.style.overflow = 'hidden'
+            })
+          },
+          afterEnter(el: HTMLElement) {
+            el.style.maxHeight = ''
+            el.style.overflow = ''
+          },
+          enterCancelled(el: HTMLElement) {
+            el.style.maxHeight = ''
+            el.style.overflow = ''
+          },
+          beforeLeave(el: HTMLElement) {
+            el.style.maxHeight = `${el.offsetHeight}px`
+            el.style.overflow = 'hidden'
+          },
+          leave(el: HTMLElement) {
+            el.style.maxHeight = '0'
+          },
+          afterLeave(el: HTMLElement) {
+            el.style.maxHeight = ''
+            el.style.overflow = ''
+          },
+          leaveCancelled(el: HTMLElement) {
+            el.style.maxHeight = ''
+            el.style.overflow = ''
+          },
+        }
 })

 const transitionClass = computed(() => {
@@ -85,25 +96,16 @@ const transitionClass = computed(() => {
      }
    : {
        enterActiveClass: 'ease-in-out duration-300',
-        enterFromClass: 'opacity-0',
-        enterToClass: 'opacity-100',
+        enterFromClass: cn('opacity-0 translate-y-4 scale-95 blur-4', CSS.supports('height', 'calc-size(auto, size)') && 'h-0'),
+        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: cn('opacity-0 translate-y-4 scale-95 blur-4', CSS.supports('height', 'calc-size(auto, size)') && 'h-0'),
      }
 })

 const hasChildren = computed(() => {
-  let flag = true
-  if (props.menu.children) {
-    if (props.menu.children.every((item: any) => item.meta?.sidebar === false)) {
-      flag = false
-    }
-  }
-  else {
-    flag = false
-  }
-  return flag
+  return props.menu.children?.some((item: any) => item.meta?.menu !== false) ?? false
 })

 function handleClick() {
@@ -130,25 +132,32 @@ function handleMouseenter() {
    if (hasChildren.value) {
      rootMenu.openMenu(index, props.uniqueKey)
      nextTick(() => {
-        const el = itemRef.value.ref
+        const el = itemRef.value?.ref
+        const subMenuEl = subMenuRef.value?.$el
+        if (!el || !subMenuEl) {
+          return
+        }
        let top = 0
        let left = 0
        if (rootMenu.props.mode === 'vertical' || props.level !== 0) {
          top = el.getBoundingClientRect().top + el.scrollTop
          left = el.getBoundingClientRect().left + el.getBoundingClientRect().width
-          if (top + subMenuRef.value!.getElement()!.offsetHeight > window.innerHeight) {
-            top = window.innerHeight - subMenuRef.value!.getElement()!.offsetHeight
+          if (top + subMenuEl.offsetHeight > window.innerHeight) {
+            top = Math.max(0, window.innerHeight - subMenuEl.offsetHeight)
          }
        }
        else {
          top = el.getBoundingClientRect().top + el.getBoundingClientRect().height
          left = el.getBoundingClientRect().left
-          if (top + subMenuRef.value!.getElement()!.offsetHeight > window.innerHeight) {
-            subMenuRef.value!.getElement()!.style.height = `${window.innerHeight - top}px`
+          if (top + subMenuEl.offsetHeight > window.innerHeight) {
+            subMenuEl.style.height = `${window.innerHeight - top}px`
          }
        }
-        subMenuRef.value!.getElement()!.style.top = `${top}px`
-        subMenuRef.value!.getElement()!.style.left = `${left}px`
+        if (left + subMenuEl.offsetWidth > document.documentElement.clientWidth) {
+          left = el.getBoundingClientRect().left - el.getBoundingClientRect().width
+        }
+        subMenuEl.style.top = `${top}px`
+        subMenuEl.style.insetInlineStart = `${left}px`
      })
    }
    else {
@@ -181,17 +190,18 @@ function handleMouseleave() {
  <Item ref="itemRef" :unique-key="uniqueKey" :item="menu" :level="level" :sub-menu="hasChildren" :expand="opened" @click="handleClick" @mouseenter="handleMouseenter" @mouseleave="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="{
+      <FaScrollArea
+        v-if="opened" ref="subMenuRef" :scrollbar="false" :mask="rootMenu.isMenuPopup" :class="cn('sub-menu static h-[calc-size(auto,size)] rounded-lg', {
          '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),
-        }"
+          'border 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)">
-          <SubMenu v-if="item.meta?.sidebar !== false" :unique-key="[...uniqueKey, item.path ?? JSON.stringify(item)]" :menu="item" :level="level + 1" />
+          <SubMenu v-if="item.meta?.menu !== false" :unique-key="[...uniqueKey, item.path ?? JSON.stringify(item)]" :menu="item" :level="level + 1" />
        </template>
-      </OverlayScrollbarsComponent>
+      </FaScrollArea>
    </Transition>
  </Teleport>
 </template>
@@ -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,348 +0,0 @@
-<script setup lang="ts">
-import { Dialog, DialogDescription, DialogPanel, TransitionChild, TransitionRoot } from '@headlessui/vue'
-import type { OverlayScrollbarsComponentRef } from 'overlayscrollbars-vue'
-import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue'
-import { cloneDeep } from 'lodash-es'
-import hotkeys from 'hotkeys-js'
-import type { RouteRecordRaw } from 'vue-router'
-import Breadcrumb from '../Breadcrumb/index.vue'
-import BreadcrumbItem from '../Breadcrumb/item.vue'
-import { resolveRoutePath } from '@/utils'
-import eventBus from '@/utils/eventBus'
-import useSettingsStore from '@/store/modules/settings'
-import useRouteStore from '@/store/modules/route'
-import useMenuStore from '@/store/modules/menu'
-import type { Menu } from '@/types/global'
-
-defineOptions({
-  name: 'Search',
-})
-
-const overlayTransitionClass = ref({
-  enter: 'ease-in-out duration-500',
-  enterFrom: 'opacity-0',
-  enterTo: 'opacity-100',
-  leave: 'ease-in-out duration-500',
-  leaveFrom: 'opacity-100',
-  leaveTo: 'opacity-0',
-})
-
-const transitionClass = computed(() => {
-  return {
-    enter: 'ease-out duration-300',
-    enterFrom: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95',
-    enterTo: 'opacity-100 translate-y-0 sm:scale-100',
-    leave: 'ease-in duration-200',
-    leaveFrom: 'opacity-100 translate-y-0 sm:scale-100',
-    leaveTo: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95',
-  }
-})
-
-const router = useRouter()
-const settingsStore = useSettingsStore()
-const routeStore = useRouteStore()
-const menuStore = useMenuStore()
-
-interface listTypes {
-  path: string
-  icon?: string
-  title?: string | (() => string)
-  link?: string
-  breadcrumb: {
-    title?: string | (() => string)
-  }[]
-}
-
-const isShow = ref(false)
-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 resultList = computed(() => {
-  let result = []
-  result = sourceList.value.filter((item) => {
-    let flag = false
-    if (item.title) {
-      if (typeof item.title === 'function') {
-        if (item.title().includes(searchInput.value)) {
-          flag = true
-        }
-      }
-      else {
-        if (item.title.includes(searchInput.value)) {
-          flag = true
-        }
-      }
-    }
-    if (item.path.includes(searchInput.value)) {
-      flag = true
-    }
-    if (item.breadcrumb.some((b) => {
-      if (typeof b.title === 'function') {
-        if (b.title().includes(searchInput.value)) {
-          return true
-        }
-      }
-      else {
-        if (b.title?.includes(searchInput.value)) {
-          return true
-        }
-      }
-      return false
-    })) {
-      flag = true
-    }
-    return flag
-  })
-  return result
-})
-
-watch(() => isShow.value, (val) => {
-  if (val) {
-    searchInput.value = ''
-    actived.value = -1
-    // 当搜索显示的时候绑定上、下、回车快捷键，隐藏的时候再解绑。另外当 input 处于 focus 状态时，采用 vue 来绑定键盘事件
-    hotkeys('up', keyUp)
-    hotkeys('down', keyDown)
-    hotkeys('enter', keyEnter)
-  }
-  else {
-    hotkeys.unbind('up', keyUp)
-    hotkeys.unbind('down', keyDown)
-    hotkeys.unbind('enter', keyEnter)
-  }
-})
-watch(() => resultList.value, () => {
-  actived.value = -1
-  handleScroll()
-})
-
-onMounted(() => {
-  eventBus.on('global-search-toggle', () => {
-    if (!isShow.value) {
-      initSourceList()
-    }
-    isShow.value = !isShow.value
-  })
-  hotkeys('alt+s', (e) => {
-    if (settingsStore.settings.toolbar.navSearch && settingsStore.settings.navSearch.enableHotkeys) {
-      e.preventDefault()
-      initSourceList()
-      isShow.value = true
-    }
-  })
-  hotkeys('esc', (e) => {
-    if (settingsStore.settings.toolbar.navSearch && settingsStore.settings.navSearch.enableHotkeys) {
-      e.preventDefault()
-      isShow.value = false
-    }
-  })
-  initSourceList()
-})
-
-function initSourceList() {
-  sourceList.value = []
-  if (settingsStore.settings.app.routeBaseOn !== 'filesystem') {
-    routeStore.routes.forEach((item) => {
-      item.children && getSourceList(item.children as RouteRecordRaw[])
-    })
-  }
-  else {
-    menuStore.menus.forEach((item) => {
-      getSourceListByMenus(item.children)
-    })
-  }
-}
-
-function hasChildren(item: RouteRecordRaw) {
-  let flag = true
-  if (item.children?.every(i => i.meta?.sidebar === false)) {
-    flag = false
-  }
-  return flag
-}
-function getSourceList(arr: RouteRecordRaw[], basePath?: string, icon?: string, breadcrumb?: { title?: string | (() => string) }[]) {
-  arr.forEach((item) => {
-    if (item.meta?.sidebar !== false) {
-      const breadcrumbTemp = cloneDeep(breadcrumb) || []
-      if (item.children && hasChildren(item)) {
-        breadcrumbTemp.push({
-          title: item.meta?.title,
-        })
-        getSourceList(item.children, resolveRoutePath(basePath, item.path), item.meta?.icon ?? icon, breadcrumbTemp)
-      }
-      else {
-        breadcrumbTemp.push({
-          title: item.meta?.title,
-        })
-        sourceList.value.push({
-          path: resolveRoutePath(basePath, item.path),
-          icon: item.meta?.icon ?? icon,
-          title: item.meta?.title,
-          link: item.meta?.link,
-          breadcrumb: breadcrumbTemp,
-        })
-      }
-    }
-  })
-}
-function getSourceListByMenus(arr: Menu.recordRaw[], icon?: string, breadcrumb?: { title?: string | (() => string) }[]) {
-  arr.forEach((item) => {
-    const breadcrumbTemp = cloneDeep(breadcrumb) || []
-    if (item.children && item.children.length > 0) {
-      breadcrumbTemp.push({
-        title: item.meta?.title,
-      })
-      getSourceListByMenus(item.children, item.meta?.icon ?? icon, breadcrumbTemp)
-    }
-    else {
-      breadcrumbTemp.push({
-        title: item.meta?.title,
-      })
-      sourceList.value.push({
-        icon: item.meta?.icon ?? icon,
-        title: item.meta?.title,
-        path: item.path as string,
-        breadcrumb: breadcrumbTemp,
-      })
-    }
-  })
-}
-
-function keyUp() {
-  if (resultList.value.length) {
-    actived.value -= 1
-    if (actived.value < 0) {
-      actived.value = resultList.value.length - 1
-    }
-    handleScroll()
-  }
-}
-function keyDown() {
-  if (resultList.value.length) {
-    actived.value += 1
-    if (actived.value > resultList.value.length - 1) {
-      actived.value = 0
-    }
-    handleScroll()
-  }
-}
-function keyEnter() {
-  if (actived.value !== -1) {
-    searchResultItemRef.value.find(item => Number.parseInt(item.dataset.index!) === actived.value)?.click()
-  }
-}
-function handleScroll() {
-  if (searchResultRef.value) {
-    const contentDom = searchResultRef.value.osInstance()!.elements().content
-    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 searchScrollTop = contentDom.scrollTop
-      const searchClientHeight = contentDom.clientHeight
-      if (activedOffsetTop + activedClientHeight > searchScrollTop + searchClientHeight) {
-        scrollTo = activedOffsetTop + activedClientHeight - searchClientHeight
-      }
-      else if (activedOffsetTop <= searchScrollTop) {
-        scrollTo = activedOffsetTop
-      }
-    }
-    contentDom.scrollTo({
-      top: scrollTo,
-    })
-  }
-}
-
-function pageJump(path: listTypes['path'], link: listTypes['link']) {
-  if (link) {
-    window.open(link, '_blank')
-  }
-  else {
-    router.push(path)
-  }
-  isShow.value = false
-}
-</script>
-
-<template>
-  <TransitionRoot as="template" :show="isShow">
-    <Dialog :initial-focus="searchInputRef" class="fixed inset-0 z-2000 flex" @close="isShow && eventBus.emit('global-search-toggle')">
-      <TransitionChild as="template" v-bind="overlayTransitionClass">
-        <div class="fixed inset-0 bg-stone-200/75 backdrop-blur-sm transition-opacity dark:bg-stone-8/75" />
-      </TransitionChild>
-      <div class="fixed inset-0">
-        <div class="h-full flex items-end justify-center p-4 text-center sm:items-center sm:p-0">
-          <TransitionChild as="template" v-bind="transitionClass">
-            <DialogPanel class="relative h-full max-h-4/5 w-full flex flex-col text-left sm:max-w-2xl">
-              <div class="flex flex-col overflow-y-auto rounded-xl bg-white shadow-xl dark:bg-stone-8">
-                <div class="flex items-center px-4 py-3" border-b="~ solid stone-2 dark:stone-7">
-                  <SvgIcon name="i-ep:search" :size="18" class="text-stone-5" />
-                  <input ref="searchInputRef" v-model="searchInput" placeholder="搜索页面，支持标题、URL模糊查询" class="w-full border-0 rounded-md bg-transparent px-3 text-base text-dark dark:text-white focus:outline-none placeholder-stone-4 dark:placeholder-stone-5" @keydown.esc="eventBus.emit('global-search-toggle')" @keydown.up.prevent="keyUp" @keydown.down.prevent="keyDown" @keydown.enter.prevent="keyEnter">
-                </div>
-                <DialogDescription class="relative m-0 of-y-hidden">
-                  <OverlayScrollbarsComponent ref="searchResultRef" :options="{ scrollbars: { autoHide: 'leave', autoHideDelay: 300 } }" defer class="h-full">
-                    <template v-if="resultList.length > 0">
-                      <a v-for="(item, index) in resultList" ref="searchResultItemRef" :key="item.path" class="flex cursor-pointer items-center" :class="{ 'bg-stone-2/40 dark:bg-stone-7/40': index === actived }" :data-index="index" @click="pageJump(item.path, item.link)" @mouseover="actived = index">
-                        <SvgIcon v-if="item.icon" :name="item.icon" :size="20" class="basis-16 transition" :class="{ 'scale-120 text-ui-primary': index === actived }" />
-                        <div class="flex flex-1 flex-col gap-1 truncate px-4 py-3" border-l="~ solid stone-2 dark:stone-7">
-                          <div class="truncate text-base font-bold">{{ (typeof item.title === 'function' ? item.title() : item.title) ?? '[ 无标题 ]' }}</div>
-                          <Breadcrumb v-if="item.breadcrumb.length" class="truncate">
-                            <BreadcrumbItem v-for="(bc, bcIndex) in item.breadcrumb" :key="bcIndex" class="text-xs">
-                              {{ (typeof bc.title === 'function' ? bc.title() : bc.title) ?? '[ 无标题 ]' }}
-                            </BreadcrumbItem>
-                          </Breadcrumb>
-                        </div>
-                      </a>
-                    </template>
-                    <template v-else>
-                      <div flex="center col" py-6 text-stone-5>
-                        <SvgIcon name="i-tabler:mood-empty" :size="40" />
-                        <p m-2 text-base>
-                          没有找到你想要的
-                        </p>
-                      </div>
-                    </template>
-                  </OverlayScrollbarsComponent>
-                </DialogDescription>
-                <div v-if="settingsStore.mode === 'pc'" class="flex justify-between px-4 py-3" border-t="~ solid stone-2 dark:stone-7">
-                  <div class="flex gap-8">
-                    <div class="inline-flex items-center gap-1 text-xs">
-                      <HKbd>
-                        <SvgIcon name="i-ion:md-return-left" :size="14" />
-                      </HKbd>
-                      <span>访问</span>
-                    </div>
-                    <div class="inline-flex items-center gap-1 text-xs">
-                      <HKbd>
-                        <SvgIcon name="i-ant-design:caret-up-filled" :size="14" />
-                      </HKbd>
-                      <HKbd>
-                        <SvgIcon name="i-ant-design:caret-down-filled" :size="14" />
-                      </HKbd>
-                      <span>切换</span>
-                    </div>
-                  </div>
-                  <div v-if="settingsStore.settings.navSearch.enableHotkeys" class="inline-flex items-center gap-1 text-xs">
-                    <HKbd>
-                      ESC
-                    </HKbd>
-                    <span>退出</span>
-                  </div>
-                </div>
-              </div>
-            </DialogPanel>
-          </TransitionChild>
-        </div>
-      </div>
-    </Dialog>
-  </TransitionRoot>
-</template>
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { useElementSize } from '@vueuse/core'
+import { useSlots } from '@/slots'
+import useMenuStore from '@/store/modules/menu'
+import useSettingsStore from '@/store/modules/settings'
 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,84 +14,89 @@ const route = useRoute()
 const settingsStore = useSettingsStore()
 const menuStore = useMenuStore()

-const subSidebarRef = ref()
-const showShadowTop = ref(false)
-const showShadowBottom = ref(false)
-function onSidebarScroll() {
-  const scrollTop = subSidebarRef.value.scrollTop
-  showShadowTop.value = scrollTop > 0
-  const clientHeight = subSidebarRef.value.clientHeight
-  const scrollHeight = subSidebarRef.value.scrollHeight
-  showShadowBottom.value = Math.ceil(scrollTop + clientHeight) < scrollHeight
-}
+const enableSidebar = computed(() => {
+  return settingsStore.mode === 'mobile' || (
+    menuStore.sidebarMenus.length !== 0
+    && !menuStore.sidebarMenus.every(item => item.meta?.menu === false)
+  )
+})

-const menuRef = ref()
-
-onMounted(() => {
-  onSidebarScroll()
-  const { height } = useElementSize(menuRef)
-  watch(() => height.value, () => {
-    if (height.value > 0) {
-      onSidebarScroll()
+const transitionName = ref('')
+watch(() => menuStore.actived, (val, oldVal) => {
+  if (settingsStore.mode === 'mobile' || settingsStore.settings.menu.mode === 'side') {
+    if (val > oldVal) {
+      transitionName.value = 'sub-sidebar-y-start'
    }
-  }, {
-    immediate: true,
-  })
+    else {
+      transitionName.value = 'sub-sidebar-y-end'
+    }
+  }
+  else if (settingsStore.settings.menu.mode === 'head') {
+    if (val > oldVal) {
+      transitionName.value = 'sub-sidebar-x-start'
+    }
+    else {
+      transitionName.value = 'sub-sidebar-x-end'
+    }
+  }
 })
 </script>

 <template>
-  <div
-    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',
-      }"
-    />
+  <Transition name="sub-sidebar">
    <div
-      ref="subSidebarRef" class="sub-sidebar flex-1 transition-shadow-300" :class="{
-        'shadow-top': showShadowTop,
-        'shadow-bottom': showShadowBottom,
-      }" @scroll="onSidebarScroll"
+      v-if="enableSidebar" class="sub-sidebar-container" :class="{
+        'is-collapse': settingsStore.mode === 'pc' && settingsStore.settings.menu.subMenuCollapse,
+      }"
    >
-      <div ref="menuRef">
-        <TransitionGroup name="sub-sidebar">
+      <component :is="useSlots('sub-sidebar-top')" />
+      <Logo
+        v-if="['side', 'single'].includes(settingsStore.settings.menu.mode)" :show-logo="settingsStore.settings.menu.mode === 'single'" class="sidebar-logo" :class="{
+          single: settingsStore.settings.menu.mode === 'single',
+        }"
+      />
+      <component :is="useSlots('sub-sidebar-after-logo')" />
+      <FaScrollArea :scrollbar="false" mask gradient-color="var(--g-sub-sidebar-bg)" class="flex-1">
+        <TransitionGroup :name="transitionName">
          <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': !((settingsStore.mode === 'pc' && settingsStore.settings.menu.subMenuCollapse) || ['head', 'single'].includes(settingsStore.settings.menu.mode)),
+                }"
+              />
            </div>
          </template>
        </TransitionGroup>
+      </FaScrollArea>
+      <div v-if="settingsStore.mode === 'pc'" class="relative flex items-center px-4 py-3" :class="[settingsStore.settings.menu.subMenuCollapse ? 'justify-center' : 'justify-end']">
+        <FaButton v-show="settingsStore.settings.menu.enableSubMenuCollapseButton" variant="secondary" size="icon" class="h-8 w-8 transition" :class="{ '-rotate-z-180': settingsStore.settings.menu.subMenuCollapse }" @click="settingsStore.toggleSidebarCollapse()">
+          <FaIcon name="toolbar-collapse" class="size-4" />
+        </FaButton>
      </div>
+      <component :is="useSlots('sub-sidebar-bottom')" />
    </div>
-    <div v-if="settingsStore.mode === 'pc'" class="relative flex items-center px-4 py-3" :class="[settingsStore.settings.menu.subMenuCollapse ? 'justify-center' : 'justify-end']">
-      <span v-show="settingsStore.settings.menu.enableSubMenuCollapseButton" class="flex-center cursor-pointer rounded bg-stone-1 p-2 transition dark:bg-stone-9 hover:bg-stone-2 dark:hover:bg-stone-8" :class="{ '-rotate-z-180': settingsStore.settings.menu.subMenuCollapse }" @click="settingsStore.toggleSidebarCollapse()">
-        <SvgIcon name="toolbar-collapse" />
-      </span>
-    </div>
-  </div>
+  </Transition>
 </template>

-<style lang="scss" scoped>
+<style scoped>
 .sub-sidebar-container {
  position: absolute;
+  inset-inline-start: 0;
  top: 0;
  bottom: 0;
-  left: 0;
  display: flex;
  flex-direction: column;
  width: var(--g-sub-sidebar-width);
  background-color: var(--g-sub-sidebar-bg);
-  transition: background-color 0.3s, left 0.3s, width 0.3s;
+  box-shadow: -1px 0 0 0 hsl(var(--border)), 1px 0 0 0 hsl(var(--border));
+  transition: background-color 0.3s, inset-inline-start 0.3s, width 0.3s, box-shadow 0.3s;

  &.is-collapse {
    width: var(--g-sub-sidebar-collapse-width);

    .sidebar-logo {
-      &:not(.sidebar-logo-bg) {
+      &:not(.single) {
        display: none;
      }

@@ -101,61 +106,58 @@ onMounted(() => {
    }
  }

-  .sidebar-logo {
-    background-color: var(--g-sub-sidebar-bg);
-    transition: background-color 0.3s;
-
-    &.sidebar-logo-bg {
-      background-color: var(--g-sub-sidebar-logo-bg);
-
-      :deep(span) {
-        color: var(--g-sub-sidebar-logo-color);
-      }
-    }
-  }
-
-  .sub-sidebar {
-    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;
-    }
-
-    &.shadow-bottom {
-      box-shadow: inset 0 0 0 transparent, inset 0 -10px 10px -10px var(--g-box-shadow-color);
-    }
-
-    &.shadow-top.shadow-bottom {
-      box-shadow: inset 0 10px 10px -10px var(--g-box-shadow-color), inset 0 -10px 10px -10px var(--g-box-shadow-color);
-    }
-  }
-
  .menu {
    width: 100%;
  }
 }

-// 次侧边栏动画
-.sub-sidebar-enter-active {
+/* 次侧边栏动画 */
+.sub-sidebar-x-start-enter-active,
+.sub-sidebar-x-end-enter-active,
+.sub-sidebar-y-start-enter-active,
+.sub-sidebar-y-end-enter-active {
  transition: 0.2s;
 }

-.sub-sidebar-enter-from,
-.sub-sidebar-leave-active {
+.sub-sidebar-x-start-enter-from,
+.sub-sidebar-x-start-leave-active {
  opacity: 0;
-  transform: translateY(30px) skewY(10deg);
+  transform: translateX(30px);
 }

-.sub-sidebar-leave-active {
+.sub-sidebar-x-end-enter-from,
+.sub-sidebar-x-end-leave-active {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.sub-sidebar-y-start-enter-from,
+.sub-sidebar-y-start-leave-active {
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+.sub-sidebar-y-end-enter-from,
+.sub-sidebar-y-end-leave-active {
+  opacity: 0;
+  transform: translateY(-30px);
+}
+
+.sub-sidebar-x-start-leave-active,
+.sub-sidebar-x-end-leave-active,
+.sub-sidebar-y-start-leave-active,
+.sub-sidebar-y-end-leave-active {
  position: absolute;
 }
+
+/* 次侧边栏动画 */
+.sub-sidebar-enter-active,
+.sub-sidebar-leave-active {
+  transition: 0.3s;
+}
+
+.sub-sidebar-enter-from,
+.sub-sidebar-leave-to {
+  transform: translateX(calc(var(--g-sub-sidebar-width) * -1));
+}
 </style>
@@ -1,12 +1,11 @@
 <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 { useSlots } from '@/slots'
 import useSettingsStore from '@/store/modules/settings'
 import useTabbarStore from '@/store/modules/tabbar'
-import type { Tabbar } from '#/global'
+import { useMagicKeys } from '@vueuse/core'
+import hotkeys from 'hotkeys-js'
+import { toast } from 'vue-sonner'

 defineOptions({
  name: 'Tabbar',
@@ -25,19 +24,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 && tabsRef.value?.scrollTo(tabRef.value[index].offsetLeft - tabsRef.value.ref?.$el.clientWidth * 0.4)
        tabbarScrollTip()
      }
    })
@@ -47,76 +43,53 @@ 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?.ref?.$el.clientWidth ?? 0) && localStorage.getItem('tabbarScrollTip') === undefined) {
    localStorage.setItem('tabbarScrollTip', '')
-    Message.info('标签栏数量超过展示区域范围，可以将鼠标移到标签栏上，通过鼠标滚轮滑动浏览', {
-      title: '温馨提示',
-      duration: 5000,
-      closable: true,
-      zIndex: 2000,
+    const tips = toast.info('温馨提示', {
+      description: '标签栏数量超过展示区域范围，可以将鼠标移到标签栏上，通过鼠标滚轮滑动浏览',
+      position: 'top-center',
+      duration: Infinity,
+      action: {
+        label: '知道了',
+        onClick: () => toast.dismiss(tips),
+      },
    })
  }
 }
-function handlerMouserScroll(event: WheelEvent) {
-  if (event.deltaY || event.detail !== 0) {
-    tabsRef.value.scrollBy({
-      left: (event.deltaY || event.detail) > 0 ? 50 : -50,
-    })
-  }
-}
-function scrollTo(offsetLeft: number) {
-  tabsRef.value.scrollTo({
-    left: offsetLeft - 50,
-    behavior: 'smooth',
-  })
-}
-function onTabbarContextmenu(event: MouseEvent, routeItem: Tabbar.recordRaw) {
-  event.preventDefault()
-  ContextMenu.showContextMenu({
-    x: event.x,
-    y: event.y,
-    zIndex: 1000,
-    iconFontClass: '',
-    customClass: 'contextmenu-custom',
-    items: [
+function contextMenuItems(routeItem: Tabbar.recordRaw) {
+  return [
+    [
      {
        label: '重新加载',
        icon: 'i-ri:refresh-line',
        disabled: routeItem.tabId !== activedTabId.value,
-        onClick: () => mainPage.reload(),
+        handle: () => mainPage.reload(),
      },
      {
        label: '关闭标签页',
        icon: 'i-ri:close-line',
        disabled: tabbarStore.list.length <= 1,
-        divided: true,
-        onClick: () => {
-          tabbar.closeById(routeItem.tabId)
-        },
+        handle: () => tabbar.closeById(routeItem.tabId),
      },
+    ],
+    [
      {
        label: '关闭其他标签页',
        disabled: !tabbar.checkCloseOtherSide(routeItem.tabId),
-        onClick: () => {
-          tabbar.closeOtherSide(routeItem.tabId)
-        },
+        handle: () => tabbar.closeOtherSide(routeItem.tabId),
      },
      {
        label: '关闭左侧标签页',
        disabled: !tabbar.checkCloseLeftSide(routeItem.tabId),
-        onClick: () => {
-          tabbar.closeLeftSide(routeItem.tabId)
-        },
+        handle: () => tabbar.closeLeftSide(routeItem.tabId),
      },
      {
        label: '关闭右侧标签页',
        disabled: !tabbar.checkCloseRightSide(routeItem.tabId),
-        onClick: () => {
-          tabbar.closeRightSide(routeItem.tabId)
-        },
+        handle: () => tabbar.closeRightSide(routeItem.tabId),
      },
    ],
-  })
+  ]
 }

 onMounted(() => {
@@ -166,277 +139,228 @@ onMounted(() => {
  })
 })
 onUnmounted(() => {
-  hotkeys.unbind('alt+q,alt+e,alt+w,alt+1,alt+2,alt+3,alt+4,alt+5,alt+6,alt+7,alt+8,alt+9,alt+0')
+  hotkeys.unbind('alt+left,alt+right,alt+w,alt+1,alt+2,alt+3,alt+4,alt+5,alt+6,alt+7,alt+8,alt+9,alt+0')
 })
 </script>

 <template>
-  <div class="tabbar-container">
-    <div ref="tabsRef" class="tabs" @wheel.prevent="handlerMouserScroll">
-      <TransitionGroup ref="tabContainerRef" name="tabbar" tag="div" class="tab-container">
-        <div
-          v-for="(element, index) in tabbarStore.list" :key="element.tabId"
-          ref="tabRef" :data-index="index" class="tab" :class="{
-            actived: element.tabId === activedTabId,
-          }" :title="typeof element?.title === 'function' ? element.title() : element.title" @click="router.push(element.fullPath)" @contextmenu="onTabbarContextmenu($event, element)"
-        >
-          <div class="tab-dividers" />
-          <div class="tab-background" />
-          <div class="tab-content">
-            <div :key="element.tabId" class="title">
-              <SvgIcon v-if="settingsStore.settings.tabbar.enableIcon && element.icon" :name="element.icon" class="icon" />
-              {{ typeof element?.title === 'function' ? element.title() : element.title }}
-            </div>
-            <div v-if="tabbarStore.list.length > 1" class="action-icon">
-              <SvgIcon name="i-ri:close-fill" @click.stop="tabbar.closeById(element.tabId)" />
-            </div>
-            <div v-show="keys.alt && index < 9" class="hotkey-number">
-              {{ index + 1 }}
-            </div>
+  <div class="tabbar">
+    <component :is="useSlots('tabbar-start')" />
+    <div class="tabbar-container">
+      <FaScrollArea ref="tabsRef" horizontal :scrollbar="false" mask gradient-color="var(--g-tabbar-bg)" class="tabs">
+        <TransitionGroup ref="tabContainerRef" name="tabbar" tag="div" class="tab-container">
+          <div
+            v-for="(element, index) in tabbarStore.list" :key="element.tabId"
+            ref="tabRef" :data-index="index" class="tab" :class="{
+              actived: element.tabId === activedTabId,
+            }" @click="router.push(element.fullPath)"
+          >
+            <FaContextMenu :items="contextMenuItems(element)">
+              <div class="size-full">
+                <div class="tab-dividers" />
+                <div class="tab-background" />
+                <FaTooltip :delay="1000" side="bottom">
+                  <div class="tab-content">
+                    <div :key="element.tabId" class="title">
+                      <FaIcon v-if="settingsStore.settings.tabbar.enableIcon && element.icon" :name="element.icon" class="icon" />
+                      {{ typeof element?.title === 'function' ? element.title() : element.title }}
+                    </div>
+                    <div v-if="tabbarStore.list.length > 1" class="action-icon" @click.stop="tabbar.closeById(element.tabId)">
+                      <FaIcon name="i-ri:close-fill" />
+                    </div>
+                    <div v-show="keys.alt && index < 9" class="hotkey-number">
+                      {{ index + 1 }}
+                    </div>
+                  </div>
+                  <template #content>
+                    <div class="text-sm">
+                      {{ typeof element?.title === 'function' ? element.title() : element.title }}
+                    </div>
+                    <div class="text-accent-foreground/50">
+                      {{ element.fullPath }}
+                    </div>
+                  </template>
+                </FaTooltip>
+              </div>
+            </FaContextMenu>
          </div>
-        </div>
-      </TransitionGroup>
+        </TransitionGroup>
+      </FaScrollArea>
    </div>
+    <component :is="useSlots('tabbar-end')" />
  </div>
 </template>

-<style lang="scss">
-.mx-menu-ghost-host {
-  z-index: 1000;
-
-  .mx-context-menu {
-    --at-apply: fixed ring-1 ring-stone-2 dark:ring-stone-7 shadow-2xl;
-
-    background-color: var(--g-container-bg);
-
-    .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 {
-        width: 1em;
-        margin-right: 10px;
-        color: initial;
-      }
-
-      &.disabled span,
-      &.disabled .icon {
-        opacity: 0.25;
-      }
-    }
-
-    .mx-context-menu-item-sperator {
-      background-color: var(--g-container-bg);
-
-      &::after {
-        --at-apply: bg-stone-2 dark:bg-stone-7;
-      }
-    }
-  }
-}
-</style>
-
-<style lang="scss" scoped>
-.tabbar-container {
+<style scoped>
+.tabbar {
  position: relative;
+  display: flex;
+  align-items: center;
  height: var(--g-tabbar-height);
-  background-color: var(--g-bg);
-  transition: background-color 0.3s;
+  background-color: var(--g-tabbar-bg);
+  transition: background-color 0.3s, box-shadow 0.3s;

-  .tabs {
-    position: absolute;
-    right: 0;
-    left: 0;
-    overflow-y: hidden;
-    white-space: nowrap;
+  .dark & {
+    box-shadow: 0 1px 0 0 hsl(var(--border)), 0 -1px 0 0 hsl(var(--border));
+  }

-    // firefox隐藏滚动条
-    scrollbar-width: none;
+  .tabbar-container {
+    position: relative;
+    flex: 1;
+    height: 100%;

-    // chrome隐藏滚动条
-    &::-webkit-scrollbar {
-      display: none;
-    }
+    .tabs {
+      position: absolute;
+      inset-inline: 0;
+      white-space: nowrap;

-    .tab-container {
-      display: inline-block;
-
-      .tab {
-        position: relative;
+      .tab-container {
        display: inline-block;
-        width: 150px;
-        height: var(--g-tabbar-height);
-        font-size: 14px;
-        line-height: calc(var(--g-tabbar-height) - 2px);
-        vertical-align: bottom;
-        pointer-events: none;
-        cursor: pointer;

-        &:not(.actived):hover {
-          z-index: 3;
+        .tab {
+          position: relative;
+          display: inline-block;
+          width: 150px;
+          height: var(--g-tabbar-height);
+          font-size: 14px;
+          line-height: calc(var(--g-tabbar-height) - 2px);
+          vertical-align: bottom;
+          pointer-events: none;
+          cursor: pointer;

-          &::before,
-          &::after {
-            content: none;
-          }
+          &:not(.actived):hover {
+            z-index: 3;

-          & + .tab .tab-dividers::before {
-            opacity: 0;
-          }
+            &::before,
+            &::after {
+              content: none;
+            }

-          .tab-content {
-            .title,
-            .action-icon {
-              color: var(--g-tabbar-tab-hover-color);
+            & + .tab .tab-dividers::before {
+              opacity: 0;
+            }
+
+            .tab-content {
+              .title,
+              .action-icon {
+                color: var(--g-tabbar-tab-hover-color);
+              }
+            }
+
+            .tab-background {
+              background-color: var(--g-tabbar-tab-hover-bg);
            }
          }

-          .tab-background {
-            background-color: var(--g-tabbar-tab-hover-bg);
-          }
-        }
-
-        * {
-          user-select: none;
-        }
-
-        &.actived {
-          z-index: 5;
-
-          &::before,
-          &::after {
-            content: none;
+          * {
+            user-select: none;
          }

-          & + .tab .tab-dividers::before {
-            opacity: 0;
-          }
-
-          .tab-content {
-            .title,
-            .action-icon {
-              color: var(--g-tabbar-tab-active-color);
+          & + .tab:hover,
+          & + .tab.actived {
+            .tab-dividers::before {
+              opacity: 0;
            }
          }

-          .tab-background {
-            background-color: var(--g-container-bg);
+          &.actived {
+            z-index: 5;
+
+            &::before,
+            &::after {
+              content: none;
+            }
+
+            & + .tab .tab-dividers::before {
+              opacity: 0;
+            }
+
+            .tab-content {
+              .title,
+              .action-icon {
+                color: var(--g-tabbar-tab-active-color);
+              }
+            }
+
+            .tab-background {
+              background-color: var(--g-tabbar-tab-active-bg);
+            }
          }
-        }

-        .tab-dividers {
-          position: absolute;
-          top: 50%;
-          right: -1px;
-          left: -1px;
-          z-index: 0;
-          height: 14px;
-          transform: translateY(-50%);
+          .tab-dividers {
+            position: absolute;
+            top: 50%;
+            right: -1px;
+            left: -1px;
+            z-index: 0;
+            height: 14px;
+            transform: translateY(-50%);

-          &::before {
+            &::before {
+              position: absolute;
+              top: 0;
+              bottom: 0;
+              left: 1px;
+              display: block;
+              width: 1px;
+              content: "";
+              background-color: var(--g-tabbar-dividers-bg);
+              opacity: 1;
+              transition: opacity 0.3s, background-color 0.3s;
+            }
+          }
+
+          &:first-child .tab-dividers::before {
+            opacity: 0;
+          }
+
+          .tab-background {
            position: absolute;
            top: 0;
-            bottom: 0;
-            left: 1px;
-            display: block;
-            width: 1px;
-            content: "";
-            background-color: var(--g-tabbar-dividers-bg);
-            opacity: 1;
-            transition: opacity 0.2s ease, background-color 0.3s;
-          }
-        }
-
-        &:first-child .tab-dividers::before {
-          opacity: 0;
-        }
-
-        .tab-background {
-          position: absolute;
-          top: 0;
-          left: 0;
-          z-index: 0;
-          width: 100%;
-          height: 100%;
-          pointer-events: none;
-          transition: opacity 0.3s, background-color 0.3s;
-        }
-
-        .tab-content {
-          display: flex;
-          width: 100%;
-          height: 100%;
-          pointer-events: all;
-
-          .title {
-            display: flex;
-            flex: 1;
-            gap: 5px;
-            align-items: center;
+            left: 0;
+            z-index: 0;
+            width: 100%;
            height: 100%;
-            padding: 0 10px;
-            margin-right: 10px;
-            overflow: hidden;
-            color: var(--g-tabbar-tab-color);
-            white-space: nowrap;
-            mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
-            transition: margin-right 0.3s;
-
-            &:has(+ .action-icon) {
-              margin-right: 28px;
-            }
-
-            .icon {
-              flex-shrink: 0;
-            }
+            pointer-events: none;
+            transition: opacity 0.3s, background-color 0.3s;
          }

-          .action-icon {
-            position: absolute;
-            top: 50%;
-            right: 0.5em;
-            z-index: 10;
+          .tab-content {
            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 1.5em;
-            height: 1.5em;
-            font-size: 12px;
-            color: var(--g-tabbar-tab-color);
-            border-radius: 50%;
-            transform: translateY(-50%);
+            width: 100%;
+            height: 100%;
+            pointer-events: all;

-            &:hover {
-              --at-apply: ring-1 ring-stone-3 dark:ring-stone-7;
+            .title {
+              display: flex;
+              flex: 1;
+              gap: 5px;
+              align-items: center;
+              height: 100%;
+              padding: 0 10px;
+              margin-right: 10px;
+              overflow: hidden;
+              color: var(--g-tabbar-tab-color);
+              white-space: nowrap;
+              mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
+              transition: margin-right 0.3s;

-              background-color: var(--g-bg);
+              &:has(+ .action-icon) {
+                margin-right: 28px;
+              }
+
+              .icon {
+                flex-shrink: 0;
+              }
            }
-          }

-          .hotkey-number {
-            --at-apply: ring-1 ring-stone-3 dark:ring-stone-7;
+            .action-icon {
+              --uno: transition absolute inset-e-2 top-1/2 -translate-y-1/2 rounded-full z-10 w-5 h-5 flex-center text-xs "text-[var(--g-tabbar-tab-color)]" hover:(border bg-secondary);
+            }

-            position: absolute;
-            top: 50%;
-            right: 0.5em;
-            z-index: 10;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 1.5em;
-            height: 1.5em;
-            font-size: 12px;
-            color: var(--g-tabbar-tab-color);
-            background-color: var(--g-bg);
-            border-radius: 50%;
-            transform: translateY(-50%);
+            .hotkey-number {
+              --uno: border bg-secondary absolute inset-e-2 top-1/2 -translate-y-1/2 rounded-full z-10 w-5 h-5 flex-center text-xs "text-[var(--g-tabbar-tab-color)]";
+            }
          }
        }
      }
@@ -444,7 +368,7 @@ onUnmounted(() => {
  }
 }

-// 标签栏动画
+/* 标签栏动画 */
 .tabs {
  .tabbar-move,
  .tabbar-enter-active,
@@ -1,32 +1,36 @@
 <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()

 const settingsStore = useSettingsStore()

+// 面包屑备份
+let breadcrumbListBackup: any = []
 const breadcrumbList = computed(() => {
-  const breadcrumbList = []
+  if (route.name === 'reload') {
+    return breadcrumbListBackup
+  }
+  const list = []
  if (settingsStore.settings.home.enable) {
-    breadcrumbList.push({
+    list.push({
      path: settingsStore.settings.home.fullPath,
      title: settingsStore.settings.home.title,
    })
  }
-  if (route.meta.breadcrumbNeste) {
-    route.meta.breadcrumbNeste.forEach((item) => {
-      if (item.hide === false) {
-        breadcrumbList.push({
-          path: item.path,
-          title: item.title,
-        })
-      }
-    })
-  }
-  return breadcrumbList
+  route.matched.forEach((item) => {
+    if (item.meta?.breadcrumb !== false) {
+      list.push({
+        path: item.path,
+        title: item.meta?.title,
+      })
+    }
+  })
+  breadcrumbListBackup = list
+  return list
 })

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

-<style lang="scss" scoped>
-// 面包屑动画
+<style scoped>
+/* 面包屑动画 */
 .breadcrumb-enter-active {
  transition: transform 0.3s, opacity 0.3s;
 }
@@ -37,24 +37,12 @@ function toggleColorScheme(event: MouseEvent) {
 </script>

 <template>
-  <HDropdown class="flex-center cursor-pointer px-2 py-1">
-    <SvgIcon
+  <FaButton variant="ghost" size="icon" class="size-9" @click="toggleColorScheme">
+    <FaIcon
      :name="{
-        '': 'i-ri:computer-line',
-        'light': 'i-ri:sun-line',
-        'dark': 'i-ri:moon-line',
-      }[settingsStore.settings.app.colorScheme]" @click="toggleColorScheme"
+        light: 'i-ri:sun-line',
+        dark: 'i-ri:moon-line',
+      }[settingsStore.currentColorScheme!]" class="size-4"
    />
-    <template #dropdown>
-      <HTabList
-        v-model="settingsStore.settings.app.colorScheme"
-        :options="[
-          { icon: 'i-ri:sun-line', label: '', value: 'light' },
-          { icon: 'i-ri:moon-line', label: '', value: 'dark' },
-          { icon: 'i-ri:computer-line', label: '', value: '' },
-        ]"
-        class="m-3"
-      />
-    </template>
-  </HDropdown>
+  </FaButton>
 </template>
@@ -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',
@@ -12,7 +12,7 @@ const { isFullscreen, toggle } = useFullscreen()
 </script>

 <template>
-  <span v-if="settingsStore.mode === 'pc'" class="flex-center cursor-pointer px-2 py-1" @click="toggle">
-    <SvgIcon :name="isFullscreen ? 'i-ri:fullscreen-exit-line' : 'i-ri:fullscreen-line'" />
-  </span>
+  <FaButton v-if="settingsStore.mode === 'pc'" variant="ghost" size="icon" class="size-9" @click="toggle">
+    <FaIcon :name="isFullscreen ? 'i-ri:fullscreen-exit-line' : 'i-ri:fullscreen-line'" class="size-4" />
+  </FaButton>
 </template>
@@ -1,21 +1,25 @@
 <script setup lang="ts">
-import eventBus from '@/utils/eventBus'
 import useSettingsStore from '@/store/modules/settings'
+import Search from './search.vue'

 defineOptions({
-  name: 'ToolbarRightSide',
+  name: 'NavSearch',
 })

 const settingsStore = useSettingsStore()
+
+const isShow = ref(false)
 </script>

 <template>
-  <span class="flex-center cursor-pointer px-2 py-1" @click="eventBus.emit('global-search-toggle')">
-    <SvgIcon v-if="settingsStore.mode === 'mobile'" name="i-ri:search-line" />
-    <span v-else class="group inline-flex cursor-pointer items-center gap-1 whitespace-nowrap rounded-2 bg-stone-1 px-2 py-1.5 text-dark ring-stone-3 ring-inset transition dark:bg-stone-9 dark:text-white hover:ring-1 dark:ring-stone-7">
-      <SvgIcon name="i-ri:search-line" />
-      <span class="text-sm text-stone-5 transition group-hover:text-dark dark:group-hover:text-white">搜索</span>
-      <HKbd v-if="settingsStore.settings.navSearch.enableHotkeys" class="ml-2">{{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }} S</HKbd>
-    </span>
-  </span>
+  <FaButton :variant="settingsStore.mode === 'pc' ? 'outline' : 'ghost'" :size="settingsStore.mode === 'pc' ? undefined : 'icon'" :class="{ 'mx-2 px-3 h-9': settingsStore.mode === 'pc', 'size-9': settingsStore.mode !== 'pc' }" @click="isShow = true">
+    <FaIcon name="i-ri:search-line" class="size-4" />
+    <template v-if="settingsStore.mode === 'pc'">
+      <span class="text-sm text-muted-foreground/60 transition group-hover-text-muted-foreground">搜索</span>
+      <FaKbd v-if="settingsStore.settings.navSearch.enableHotkeys" class="-me-1">
+        {{ settingsStore.os === 'mac' ? '⌘' : 'Ctrl' }} K
+      </FaKbd>
+    </template>
+  </FaButton>
+  <Search v-model="isShow" />
 </template>
@@ -0,0 +1,276 @@
+<script setup lang="ts">
+import type { Menu } from '@/types/global'
+import Breadcrumb from '@/layouts/components/Breadcrumb/index.vue'
+import BreadcrumbItem from '@/layouts/components/Breadcrumb/item.vue'
+import useMenuStore from '@/store/modules/menu'
+import useRouteStore from '@/store/modules/route'
+import useSettingsStore from '@/store/modules/settings'
+import { resolveRoutePath } from '@/utils'
+import { useFocus } from '@vueuse/core'
+import hotkeys from 'hotkeys-js'
+
+defineOptions({
+  name: 'Search',
+})
+
+const isShow = defineModel<boolean>({
+  default: false,
+})
+
+const router = useRouter()
+const settingsStore = useSettingsStore()
+const routeStore = useRouteStore()
+const menuStore = useMenuStore()
+
+interface listTypes {
+  path: string
+  icon?: string
+  title?: string | (() => string)
+  link?: string
+}
+
+const searchInput = ref('')
+const searchInputRef = useTemplateRef('searchInputRef')
+const { focused: searchInputFocused } = useFocus(searchInputRef)
+const sourceList = ref<listTypes[]>([])
+const actived = ref(-1)
+
+const searchResultRef = useTemplateRef('searchResultRef')
+const searchResultItemRef = useTemplateRef<HTMLElement[]>('searchResultItemRef')
+
+const resultList = computed(() => {
+  let result = []
+  result = sourceList.value.filter((item) => {
+    let flag = false
+    if (searchInput.value !== '') {
+      if (item.title) {
+        if (typeof item.title === 'function') {
+          if (item.title().includes(searchInput.value)) {
+            flag = true
+          }
+        }
+        else {
+          if (item.title.includes(searchInput.value)) {
+            flag = true
+          }
+        }
+      }
+      if (item.path.includes(searchInput.value)) {
+        flag = true
+      }
+      if (routeStore.getRouteMatchedByPath(item.path).some((b) => {
+        return typeof b.meta?.title === 'function' ? b.meta?.title().includes(searchInput.value) : b.meta?.title?.includes(searchInput.value)
+      })) {
+        flag = true
+      }
+    }
+    return flag
+  })
+  return result
+})
+
+watch(() => isShow.value, (val) => {
+  if (val) {
+    searchInput.value = ''
+    actived.value = -1
+    // 当搜索显示的时候绑定上、下、回车快捷键，隐藏的时候再解绑。另外当 input 处于 focus 状态时，采用 vue 来绑定键盘事件
+    hotkeys('up', keyUp)
+    hotkeys('down', keyDown)
+    hotkeys('enter', keyEnter)
+    hotkeys('esc', (e) => {
+      if (settingsStore.settings.navSearch.enableHotkeys) {
+        e.preventDefault()
+        isShow.value = false
+      }
+    })
+  }
+  else {
+    hotkeys.unbind('up', keyUp)
+    hotkeys.unbind('down', keyDown)
+    hotkeys.unbind('enter', keyEnter)
+    hotkeys.unbind('esc')
+  }
+})
+watch(() => resultList.value, () => {
+  actived.value = -1
+  handleScroll()
+})
+
+onMounted(() => {
+  initSourceList()
+  hotkeys('command+k, ctrl+k', (e) => {
+    if (settingsStore.settings.navSearch.enableHotkeys) {
+      e.preventDefault()
+      isShow.value = true
+    }
+  })
+})
+
+onUnmounted(() => {
+  hotkeys.unbind('command+k, ctrl+k')
+})
+
+function initSourceList() {
+  sourceList.value = []
+  menuStore.allMenus.forEach((item) => {
+    getSourceList(item.children)
+  })
+}
+
+function hasChildren(item: Menu.recordRaw) {
+  let flag = true
+  if (item.children?.every(i => i.meta?.menu === false)) {
+    flag = false
+  }
+  return flag
+}
+function getSourceList(arr: Menu.recordRaw[], basePath?: string, icon?: string) {
+  arr.forEach((item) => {
+    if (item.meta?.menu !== false) {
+      if (item.children && hasChildren(item)) {
+        getSourceList(item.children, resolveRoutePath(basePath, item.path), item.meta?.icon ?? icon)
+      }
+      else {
+        sourceList.value.push({
+          path: resolveRoutePath(basePath, item.path),
+          icon: item.meta?.icon ?? icon,
+          title: item.meta?.title,
+          link: item.meta?.link,
+        })
+      }
+    }
+  })
+}
+
+function keyUp() {
+  if (resultList.value.length) {
+    actived.value -= 1
+    if (actived.value < 0) {
+      actived.value = resultList.value.length - 1
+    }
+    handleScroll()
+  }
+}
+function keyDown() {
+  if (resultList.value.length) {
+    actived.value += 1
+    if (actived.value > resultList.value.length - 1) {
+      actived.value = 0
+    }
+    handleScroll()
+  }
+}
+function keyEnter() {
+  if (actived.value !== -1) {
+    searchResultItemRef.value?.find(item => Number.parseInt(item.dataset.index!) === actived.value)?.click()
+  }
+}
+function handleScroll() {
+  if (searchResultRef.value?.areaRef?.ref?.el?.viewportElement) {
+    const contentDom = searchResultRef.value.areaRef.ref.el.viewportElement
+    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 searchScrollTop = contentDom.scrollTop
+      const searchClientHeight = contentDom.clientHeight
+      if (activedOffsetTop + activedClientHeight > searchScrollTop + searchClientHeight) {
+        scrollTo = activedOffsetTop + activedClientHeight - searchClientHeight
+      }
+      else if (activedOffsetTop <= searchScrollTop) {
+        scrollTo = activedOffsetTop - 16
+      }
+    }
+    contentDom.scrollTo({
+      top: scrollTo,
+    })
+  }
+}
+
+function pageJump(path: listTypes['path'], link: listTypes['link']) {
+  if (link) {
+    window.open(link, '_blank')
+  }
+  else {
+    router.push(path)
+  }
+  isShow.value = false
+}
+</script>
+
+<template>
+  <FaModal ref="searchResultRef" v-model="isShow" border :footer="settingsStore.mode === 'pc'" :closable="false" class="w-full lg-max-w-2xl" content-class="flex flex-col p-0 min-h-auto" header-class="p-0" footer-class="p-0" @opened="searchInputFocused = true">
+    <template #header>
+      <div class="h-12 flex flex-shrink-0 items-center">
+        <div class="h-full w-14 flex-center">
+          <FaIcon name="i-ri:search-line" class="size-4 text-foreground/30" />
+        </div>
+        <input ref="searchInputRef" v-model="searchInput" placeholder="搜索页面，支持标题、URL模糊查询" class="h-full w-full border-0 rounded-md bg-transparent text-base text-foreground focus-outline-none placeholder-foreground/30" @keydown.esc.prevent="isShow = false" @keydown.up.prevent="keyUp" @keydown.down.prevent="keyDown" @keydown.enter.prevent="keyEnter">
+        <div v-if="settingsStore.mode === 'mobile'" class="h-full w-14 flex-center border-s">
+          <FaIcon name="i-carbon:close" class="size-4" @click="isShow = false" />
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <div class="w-full flex justify-between px-4 py-3">
+        <div class="flex gap-8">
+          <div class="inline-flex items-center gap-1 text-xs">
+            <FaKbd>
+              <FaIcon name="i-ion:md-return-left" class="size-4" />
+            </FaKbd>
+            <span>访问</span>
+          </div>
+          <div class="inline-flex items-center gap-1 text-xs">
+            <FaKbd>
+              <FaIcon name="i-ant-design:caret-up-filled" class="size-4" />
+            </FaKbd>
+            <FaKbd>
+              <FaIcon name="i-ant-design:caret-down-filled" class="size-4" />
+            </FaKbd>
+            <span>切换</span>
+          </div>
+        </div>
+        <div v-if="settingsStore.settings.navSearch.enableHotkeys" class="inline-flex items-center gap-1 text-xs">
+          <FaKbd>
+            ESC
+          </FaKbd>
+          <span>退出</span>
+        </div>
+      </div>
+    </template>
+    <div>
+      <template v-if="resultList.length > 0">
+        <div v-for="(item, index) in resultList" ref="searchResultItemRef" :key="item.path" class="p-4" :data-index="index" @click="pageJump(item.path, item.link)" @mouseover="actived = index">
+          <a class="flex cursor-pointer items-center border rounded-lg" :class="{ '-mt-4': index !== 0, 'bg-accent': index === actived }">
+            <FaIcon v-if="item.icon" :name="item.icon" class="size-5 basis-16 transition" :class="{ 'scale-120 text-primary': index === actived }" />
+            <div class="flex flex-1 flex-col gap-1 truncate border-s px-4 py-3">
+              <div class="truncate text-start text-base font-bold">{{ (typeof item.title === 'function' ? item.title() : item.title) ?? '[ 无标题 ]' }}</div>
+              <Breadcrumb v-if="routeStore.getRouteMatchedByPath(item.path).length" class="truncate">
+                <BreadcrumbItem v-for="(bc, bcIndex) in routeStore.getRouteMatchedByPath(item.path)" :key="bcIndex" class="text-xs">
+                  {{ (typeof bc.meta?.title === 'function' ? bc.meta?.title() : bc.meta?.title) ?? '[ 无标题 ]' }}
+                </BreadcrumbItem>
+              </Breadcrumb>
+            </div>
+          </a>
+        </div>
+      </template>
+      <template v-else-if="searchInput === ''">
+        <div class="h-full flex-col-center py-6 text-secondary-foreground/50">
+          <FaIcon name="i-tabler:mood-smile" class="size-10" />
+          <p class="m-2 text-base">
+            输入你要搜索的导航
+          </p>
+        </div>
+      </template>
+      <template v-else>
+        <div class="h-full flex-col-center py-6 text-secondary-foreground/50">
+          <FaIcon name="i-tabler:mood-empty" class="size-10" />
+          <p class="m-2 text-base">
+            没有找到你想要的
+          </p>
+        </div>
+      </template>
+    </div>
+  </FaModal>
+</template>
@@ -1,13 +1,64 @@
 <script setup lang="ts">
+import useSettingsStore from '@/store/modules/settings'
+import hotkeys from 'hotkeys-js'
+
 defineOptions({
  name: 'PageReload',
 })

+const settingsStore = useSettingsStore()
 const mainPage = useMainPage()
+
+const isAnimating = ref(false)
+
+onMounted(() => {
+  hotkeys('f5', (e) => {
+    if (settingsStore.settings.toolbar.pageReload) {
+      e.preventDefault()
+      mainPage.reload()
+    }
+  })
+})
+onUnmounted(() => {
+  hotkeys.unbind('f5')
+})
+
+function handleClick() {
+  isAnimating.value = true
+  mainPage.reload()
+}
+
+function handleCtrlClick() {
+  location.reload()
+}
 </script>

 <template>
-  <span class="flex-center cursor-pointer px-2 py-1" @click="mainPage.reload()">
-    <SvgIcon name="i-iconoir:refresh-double" />
-  </span>
+  <FaTooltip side="bottom" :disabled="settingsStore.os === 'mac'">
+    <template #content>
+      <div class="flex-col-center gap-2">
+        <p>按住 <FaKbd>Ctrl</FaKbd> 键并点击</p>
+        <p>可切换为浏览器原生刷新</p>
+      </div>
+    </template>
+    <FaButton variant="ghost" size="icon" class="size-9" @click.exact="handleClick" @click.ctrl.exact="handleCtrlClick" @animationend="isAnimating = false">
+      <FaIcon name="i-iconoir:refresh-double" class="size-4" :class="{ animation: isAnimating }" />
+    </FaButton>
+  </FaTooltip>
 </template>
+
+<style scoped>
+.animation {
+  animation: animation 1s;
+}
+
+@keyframes animation {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>
@@ -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',
@@ -12,19 +12,23 @@ const settingsStore = useSettingsStore()

 <template>
  <div class="toolbar-container flex items-center justify-between">
-    <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);">
+    <div class="left-side h-full flex items-center of-hidden pe-16 ps-2">
      <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 flex-shrink-0 items-center justify-end 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);
+  background-color: var(--g-toolbar-bg);
  transition: background-color 0.3s;
+
+  .left-side {
+    mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 50px), transparent);
+  }
 }
 </style>
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import Breadcrumb from './Breadcrumb/index.vue'
+import { useSlots } from '@/slots'
 import useSettingsStore from '@/store/modules/settings'
+import Breadcrumb from './Breadcrumb/index.vue'

 defineOptions({
  name: 'ToolbarLeftSide',
@@ -11,9 +12,10 @@ const settingsStore = useSettingsStore()

 <template>
  <div class="flex items-center">
-    <div v-if="settingsStore.mode === 'mobile'" class="flex-center cursor-pointer px-2 py-1 -rotate-z-180" @click="settingsStore.toggleSidebarCollapse()">
-      <SvgIcon name="toolbar-collapse" />
-    </div>
+    <FaButton v-if="settingsStore.mode === 'mobile'" variant="ghost" size="icon" class="h-9 w-9 -rotate-z-180" @click="settingsStore.toggleSidebarCollapse()">
+      <FaIcon name="toolbar-collapse" class="size-4" />
+    </FaButton>
+    <component :is="useSlots('toolbar-start')" />
    <Breadcrumb v-if="settingsStore.settings.toolbar.breadcrumb" />
  </div>
 </template>
@@ -1,27 +1,16 @@
 <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 { useSlots } from '@/slots'
 import useSettingsStore from '@/store/modules/settings'
-import useUserStore from '@/store/modules/user'
+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',
+  name: 'ToolbarRightSide',
 })

-const router = useRouter()
-
 const settingsStore = useSettingsStore()
-const userStore = useUserStore()
-
-const avatarError = ref(false)
-watch(() => userStore.avatar, () => {
-  if (avatarError.value) {
-    avatarError.value = false
-  }
-})
 </script>

 <template>
@@ -30,25 +19,6 @@ watch(() => userStore.avatar, () => {
    <Fullscreen v-if="settingsStore.settings.toolbar.fullscreen" />
    <PageReload v-if="settingsStore.settings.toolbar.pageReload" />
    <ColorScheme v-if="settingsStore.settings.toolbar.colorScheme" />
-    <HDropdownMenu
-      :items="[
-        [
-          { label: settingsStore.settings.home.title, handle: () => router.push({ path: settingsStore.settings.home.fullPath }), hide: !settingsStore.settings.home.enable },
-        ],
-        [
-          { label: '快捷键介绍', handle: () => eventBus.emit('global-hotkeys-intro-toggle'), hide: settingsStore.mode !== 'pc' },
-        ],
-        [
-          { label: '退出登录', handle: () => userStore.logout() },
-        ],
-      ]" class="flex-center cursor-pointer px-2"
-    >
-      <div class="flex-center gap-1">
-        <img v-if="userStore.avatar && !avatarError" :src="userStore.avatar" :onerror="() => (avatarError = true)" class="h-[24px] w-[24px] rounded-full">
-        <SvgIcon v-else name="i-carbon:user-avatar-filled-alt" :size="24" class="text-gray-400" />
-        {{ userStore.account }}
-        <SvgIcon name="i-ep:caret-bottom" />
-      </div>
-    </HDropdownMenu>
+    <component :is="useSlots('toolbar-end')" />
  </div>
 </template>
@@ -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'
    )
  )
@@ -39,41 +39,55 @@ watch(scrollTop, (val, oldVal) => {
 </script>

 <template>
-  <div
-    class="topbar-container" :class="{
-      'has-tabbar': settingsStore.settings.tabbar.enable,
-      'has-toolbar': enableToolbar,
-      [`topbar-${settingsStore.settings.topbar.mode}`]: true,
-      'shadow': scrollTop,
-      'hide': scrollOnHide,
-    }" data-fixed-calc-width
-  >
-    <Tabbar v-if="settingsStore.settings.tabbar.enable" />
-    <Toolbar v-if="enableToolbar" />
-  </div>
+  <FaSmartFixedBlock position="top" :class="{ 'absolute!': settingsStore.settings.topbar.mode === 'static' }">
+    <div
+      class="topbar-container transition-[transform,box-shadow]-300" :class="{
+        [`topbar-${settingsStore.settings.topbar.mode}`]: true,
+        mask: scrollTop,
+        hide: scrollOnHide,
+      }"
+    >
+      <Tabbar v-if="settingsStore.settings.tabbar.enable" />
+      <Toolbar v-if="enableToolbar" />
+    </div>
+  </FaSmartFixedBlock>
 </template>

-<style lang="scss" scoped>
+<style scoped>
 .topbar-container {
-  position: absolute;
-  top: 0;
-  z-index: 999;
  display: flex;
  flex-direction: column;
-  box-shadow: 0 1px 0 0 var(--g-border-color);
-  transition: width 0.3s, top 0.3s, transform 0.3s, box-shadow 0.3s;
+  width: calc(100% - var(--scrollbar-width, 0px));
+  box-shadow: 0 1px 0 0 hsl(var(--border));
+  transition: transform 0.3s, box-shadow 0.3s;
+
+  &::before {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    width: 100%;
+    height: 50px;
+    pointer-events: none;
+    content: "";
+    background-image: linear-gradient(0deg, transparent, var(--g-main-area-bg));
+    box-shadow: 0 -1px 0 0 hsl(var(--border));
+    opacity: 0;
+    transform: translateY(100%);
+    transition: opacity 0.3s;
+  }

  &.topbar-fixed,
  &.topbar-sticky {
    position: fixed;

-    &.shadow {
-      box-shadow: 0 10px 10px -10px var(--g-box-shadow-color);
+    &.mask::before {
+      opacity: 1;
    }
  }

  &.topbar-sticky.hide {
-    top: calc((var(--g-tabbar-height) + var(--g-toolbar-height)) * -1) !important;
+    transform: translateY(-100%);
  }
 }
 </style>
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useClipboard } from '@vueuse/core'
-import Message from 'vue-m-message'
+import { toast } from 'vue-sonner'

 defineOptions({
  name: 'LinkView',
@@ -10,9 +10,7 @@ const route = useRoute()

 const { copy, copied } = useClipboard()
 watch(copied, (val) => {
-  val && Message.success('复制成功', {
-    zIndex: 2000,
-  })
+  val && toast.success('复制成功')
 })

 function open() {
@@ -23,30 +21,30 @@ function open() {
 <template>
  <div class="absolute h-full w-full flex flex-col">
    <Transition name="slide-right" mode="out-in" appear>
-      <PageMain :key="route.meta.link" class="flex flex-1 flex-col justify-center">
+      <FaPageMain :key="route.meta.link" class="flex flex-1 flex-col justify-center">
        <div class="flex flex-col items-center">
-          <SvgIcon name="i-icon-park-twotone:planet" :size="120" class="text-ui-primary/80" />
-          <div class="my-2 text-xl text-dark dark:text-white">
+          <FaIcon name="i-icon-park-twotone:planet" class="size-30 text-primary/80" />
+          <div class="my-2 text-xl text-dark dark-text-white">
            是否访问此链接
          </div>
-          <div class="my-2 max-w-[300px] cursor-pointer text-center text-[14px] text-stone-5" @click="route.meta.link && copy(route.meta.link)">
-            <HTooltip text="复制链接">
+          <div class="my-2 max-w-[300px] cursor-pointer text-center text-[14px] text-secondary-foreground/50" @click="route.meta.link && copy(route.meta.link)">
+            <FaTooltip text="复制链接">
              <div class="line-clamp-3">
                {{ route.meta.link }}
              </div>
-            </HTooltip>
+            </FaTooltip>
          </div>
-          <HButton class="my-4" @click="open">
-            <SvgIcon name="i-ri:external-link-fill" />
+          <FaButton class="my-4" @click="open">
+            <FaIcon name="i-ri:external-link-fill" />
            立即访问
-          </HButton>
+          </FaButton>
        </div>
-      </PageMain>
+      </FaPageMain>
    </Transition>
  </div>
 </template>

-<style lang="scss" scoped>
+<style scoped>
 .slide-right-enter-active {
  transition: 0.2s;
 }
@@ -1,19 +1,16 @@
 <script setup lang="ts">
-import hotkeys from 'hotkeys-js'
+import { useSlots } from '@/slots'
+import useKeepAliveStore from '@/store/modules/keepAlive'
+import useMenuStore from '@/store/modules/menu'
+import useSettingsStore from '@/store/modules/settings'
+import eventBus from '@/utils/eventBus'
+import AppSetting from './components/AppSetting/index.vue'
 import Header from './components/Header/index.vue'
+import HotkeysIntro from './components/HotkeysIntro/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 eventBus from '@/utils/eventBus'

 defineOptions({
  name: 'Layout',
@@ -25,8 +22,47 @@ const settingsStore = useSettingsStore()
 const keepAliveStore = useKeepAliveStore()
 const menuStore = useMenuStore()

-const mainPage = useMainPage()
-const menu = useMenu()
+// 头部当前实际高度
+const headerActualHeight = computed(() => {
+  let actualHeight = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--g-header-height'))
+  if (['single', 'side'].includes(settingsStore.settings.menu.mode) || settingsStore.mode === 'mobile') {
+    actualHeight = 0
+  }
+  return actualHeight
+})
+
+// 侧边栏主导航当前实际宽度
+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
+})
+
+// 侧边栏次导航当前实际宽度
+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
+})
+
+// 顶栏当前实际高度
+const topbarActualHeight = computed(() => {
+  let actualHeight = 0
+  if (settingsStore.settings.tabbar.enable) {
+    actualHeight += Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--g-tabbar-height'))
+  }
+  if (!['head'].includes(settingsStore.settings.menu.mode) || settingsStore.settings.toolbar.breadcrumb) {
+    actualHeight += Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--g-toolbar-height'))
+  }
+  return actualHeight
+})

 const isLink = computed(() => !!routeInfo.meta.link)

@@ -49,30 +85,18 @@ watch(() => routeInfo.path, () => {
  }
 })

-onMounted(() => {
-  hotkeys('f5', (e) => {
-    if (settingsStore.settings.toolbar.pageReload) {
-      e.preventDefault()
-      mainPage.reload()
-    }
-  })
-  hotkeys('alt+`', (e) => {
-    if (settingsStore.settings.menu.enableHotkeys) {
-      e.preventDefault()
-      menu.switchTo(menuStore.actived + 1 < menuStore.allMenus.length ? menuStore.actived + 1 : 0)
-    }
-  })
-})
-onUnmounted(() => {
-  hotkeys.unbind('f5')
-  hotkeys.unbind('alt+`')
-})
-
-const enableAppSetting = import.meta.env.VITE_APP_SETTING === 'true'
+const enableAppSetting = import.meta.env.VITE_APP_SETTING
 </script>

 <template>
-  <div class="layout">
+  <div
+    class="layout" :style="{
+      '--g-header-actual-height': `${headerActualHeight}px`,
+      '--g-main-sidebar-actual-width': `${mainSidebarActualWidth}px`,
+      '--g-sub-sidebar-actual-width': `${subSidebarActualWidth}px`,
+      '--g-topbar-actual-height': `${topbarActualHeight}px`,
+    }"
+  >
    <div id="app-main">
      <Header />
      <div class="wrapper">
@@ -80,12 +104,12 @@ const enableAppSetting = import.meta.env.VITE_APP_SETTING === 'true'
          <MainSidebar />
          <SubSidebar />
        </div>
-        <div class="sidebar-mask" :class="{ show: settingsStore.mode === 'mobile' && !settingsStore.settings.menu.subMenuCollapse }" @click="settingsStore.toggleSidebarCollapse()" />
-        <div class="main-container">
+        <div class="invisible fixed inset-0 z-1009 bg-black/50 op-0 backdrop-blur-sm transition-opacity" :class="{ 'op-100! visible!': settingsStore.mode === 'mobile' && !settingsStore.settings.menu.subMenuCollapse }" @click="settingsStore.toggleSidebarCollapse()" />
+        <div class="main-container pb-[var(--g-main-container-padding-bottom)]">
          <Topbar />
          <div class="main">
            <RouterView v-slot="{ Component, route }">
-              <Transition name="slide-right" mode="out-in" appear>
+              <Transition :name="!settingsStore.isReloading ? 'slide-right' : ''" mode="out-in">
                <KeepAlive :include="keepAliveStore.list">
                  <component :is="Component" v-show="!isLink" :key="route.fullPath" />
                </KeepAlive>
@@ -93,23 +117,22 @@ const enableAppSetting = import.meta.env.VITE_APP_SETTING === 'true'
            </RouterView>
            <LinkView v-if="isLink" />
          </div>
-          <Copyright />
+          <FaCopyright />
        </div>
      </div>
    </div>
-    <Search />
    <HotkeysIntro />
    <template v-if="enableAppSetting">
      <div class="app-setting" @click="eventBus.emit('global-app-setting-toggle')">
-        <SvgIcon name="i-uiw:setting-o" class="icon" />
+        <FaIcon name="i-uiw:setting-o" class="icon" />
      </div>
      <AppSetting />
    </template>
-    <BackTop />
+    <component :is="useSlots('free-position')" />
  </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));
@@ -148,44 +171,27 @@ const enableAppSetting = import.meta.env.VITE_APP_SETTING === 'true'
  position: relative;
  width: 100%;
  height: 100%;
+  padding-top: var(--g-header-actual-height);
  transition: padding-top 0.3s;

  .sidebar-container {
    position: fixed;
-    top: 0;
+    top: var(--g-header-actual-height);
    bottom: 0;
    z-index: 1010;
    display: flex;
    width: calc(var(--g-main-sidebar-actual-width) + var(--g-sub-sidebar-actual-width));
-    box-shadow: -1px 0 0 0 var(--g-border-color), 1px 0 0 0 var(--g-border-color);
+    box-shadow: -1px 0 0 0 hsl(var(--border)), 1px 0 0 0 hsl(var(--border));
    transition: width 0.3s, transform 0.3s, box-shadow 0.3s, top 0.3s;

    &:has(> .main-sidebar-container.main-sidebar-enter-active),
-    &:has(> .main-sidebar-container.main-sidebar-leave-active) {
+    &:has(> .main-sidebar-container.main-sidebar-leave-active),
+    &:has(> .sub-sidebar-container.sub-sidebar-enter-active),
+    &:has(> .sub-sidebar-container.sub-sidebar-leave-active) {
      overflow: hidden;
    }
  }

-  .sidebar-mask {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 1000;
-    width: 100%;
-    height: 100%;
-    visibility: hidden;
-    background-image: radial-gradient(transparent 1px, rgb(0 0 0 / 30%) 1px);
-    background-size: 4px 4px;
-    backdrop-filter: saturate(50%) blur(4px);
-    opacity: 0;
-    transition: all 0.2s;
-
-    &.show {
-      visibility: visible;
-      opacity: 1;
-    }
-  }
-
  .main-sidebar-container:not(.main-sidebar-leave-active) + .sub-sidebar-container {
    left: var(--g-main-sidebar-width);
  }
@@ -195,52 +201,22 @@ const enableAppSetting = import.meta.env.VITE_APP_SETTING === 'true'
    flex-direction: column;
    min-height: 100%;
    margin-left: calc(var(--g-main-sidebar-actual-width) + var(--g-sub-sidebar-actual-width));
-    background-color: var(--g-bg);
-    box-shadow: -1px 0 0 0 var(--g-border-color), 1px 0 0 0 var(--g-border-color);
+    background-color: var(--g-main-area-bg);
+    box-shadow: -1px 0 0 0 hsl(var(--border)), 1px 0 0 0 hsl(var(--border));
    transition: margin-left 0.3s, background-color 0.3s, box-shadow 0.3s;

    .main {
      position: relative;
      flex: auto;
      height: 100%;
+      margin: var(--g-topbar-actual-height) 0 0;
      overflow: hidden;
-      transition: 0.3s;
-    }
-
-    .topbar-container.has-tabbar + .main {
-      margin: var(--g-tabbar-height) 0 0;
-    }
-
-    .topbar-container.has-toolbar + .main {
-      margin: var(--g-toolbar-height) 0 0;
-    }
-
-    .topbar-container.has-tabbar.has-toolbar + .main {
-      margin: calc(var(--g-tabbar-height) + var(--g-toolbar-height)) 0 0;
-    }
-  }
-}
-
-header:not(.header-leave-active) + .wrapper {
-  padding-top: var(--g-header-height);
-
-  .sidebar-container {
-    top: var(--g-header-height);
-
-    :deep(.sidebar-logo) {
-      display: none;
-    }
-  }
-
-  .main-container {
-    .topbar-container {
-      top: var(--g-header-height);
    }
  }
 }

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

  position: fixed;
  top: calc(50% + 250px);
@@ -253,8 +229,6 @@ header:not(.header-leave-active) + .wrapper {
  height: 50px;
  font-size: 24px;
  cursor: pointer;
-  border-top-left-radius: 5px;
-  border-bottom-left-radius: 5px;

  .icon {
    animation: rotate 5s linear infinite;
@@ -271,7 +245,7 @@ header:not(.header-leave-active) + .wrapper {
  }
 }

-// 主内容区动画
+/* 主内容区动画 */
 .slide-right-enter-active {
  transition: 0.2s;
 }
@@ -1,28 +0,0 @@
-<script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    block?: boolean
-    outline?: boolean
-    disabled?: boolean
-  }>(),
-  {
-    block: false,
-    outline: false,
-    disabled: false,
-  },
-)
-
-const buttonClass = computed(() => [
-  'focus:outline-none focus-visible:outline-0 cursor-pointer disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0 gap-x-1.5 px-2.5 py-1.5 border-size-0 font-medium text-sm rounded-md select-none',
-  props.block ? 'w-full flex justify-center items-center' : 'inline-flex items-center',
-  props.outline
-    ? 'shadow-sm ring-1 ring-inset ring-ui-primary text-ui-primary bg-white dark:bg-dark hover:not-disabled:bg-ui-primary/10 dark:hover:not-disabled:bg-ui-primary/10 focus-visible:ring-2'
-    : 'shadow-sm text-ui-text bg-ui-primary hover:bg-ui-primary/75 disabled:bg-ui-primary/90 focus-visible:ring-inset focus-visible:ring-2',
-])
-</script>
-
-<template>
-  <button :disabled="disabled" :class="buttonClass">
-    <slot />
-  </button>
-</template>
@@ -1,37 +0,0 @@
-<script setup lang="ts">
-withDefaults(
-  defineProps<{
-    options: {
-      label?: string | number
-      icon?: string
-      value: string | number
-      disabled?: boolean
-    }[]
-    disabled?: boolean
-  }>(),
-  {
-    disabled: false,
-  },
-)
-
-const emits = defineEmits<{
-  'change': [string | number | undefined]
-}>()
-
-const value = defineModel<string | number>()
-
-watch(value, (val) => {
-  emits('change', val)
-})
-</script>
-
-<template>
-  <div class="inline-flex select-none items-center justify-center of-hidden rounded-md bg-stone-3 dark:bg-stone-7">
-    <button v-for="option in options" :key="option.value" :disabled="disabled || option.disabled" class="flex cursor-pointer items-center truncate border-size-0 bg-inherit px-2 py-1.5 text-sm disabled:cursor-not-allowed disabled:opacity-50 hover:not-disabled:(bg-ui-primary text-ui-text)" :class="{ 'text-ui-text bg-ui-primary': value === option.value }" @click="value = option.value">
-      <SvgIcon v-if="option.icon" :name="option.icon" />
-      <template v-else>
-        {{ option.label }}
-      </template>
-    </button>
-  </div>
-</template>
@@ -1,82 +0,0 @@
-<script setup lang="ts">
-import { Dialog, DialogDescription, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
-
-withDefaults(
-  defineProps<{
-    appear?: boolean
-    title?: string
-    preventClose?: boolean
-    overlay?: boolean
-  }>(),
-  {
-    appear: false,
-    preventClose: false,
-    overlay: false,
-  },
-)
-
-const emits = defineEmits<{
-  'close': []
-}>()
-
-const isOpen = defineModel<boolean>({
-  default: false,
-})
-
-const slots = useSlots()
-
-const overlayTransitionClass = ref({
-  enter: 'ease-in-out duration-500',
-  enterFrom: 'opacity-0',
-  enterTo: 'opacity-100',
-  leave: 'ease-in-out duration-500',
-  leaveFrom: 'opacity-100',
-  leaveTo: 'opacity-0',
-})
-
-const transitionClass = computed(() => {
-  return {
-    enter: 'ease-out duration-300',
-    enterFrom: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95',
-    enterTo: 'opacity-100 translate-y-0 sm:scale-100',
-    leave: 'ease-in duration-200',
-    leaveFrom: 'opacity-100 translate-y-0 sm:scale-100',
-    leaveTo: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95',
-  }
-})
-
-function close() {
-  isOpen.value = false
-  emits('close')
-}
-</script>
-
-<template>
-  <TransitionRoot as="template" :appear="appear" :show="isOpen">
-    <Dialog class="fixed inset-0 z-2000 flex" @close="!preventClose && close()">
-      <TransitionChild as="template" :appear="appear" v-bind="overlayTransitionClass">
-        <div class="fixed inset-0 bg-stone-2/75 transition-opacity dark:bg-stone-8/75" :class="{ 'backdrop-blur-sm': overlay }" />
-      </TransitionChild>
-      <div class="fixed inset-0 overflow-y-auto">
-        <div class="min-h-full flex items-end justify-center p-4 text-center sm:items-center sm:p-0">
-          <TransitionChild as="template" :appear="appear" v-bind="transitionClass">
-            <DialogPanel class="relative w-full flex flex-col overflow-hidden rounded-xl bg-white text-left shadow-xl sm:my-8 sm:max-w-lg dark:bg-stone-8">
-              <div flex="~ items-center justify-between" px-4 py-3 border-b="~ solid stone/15" text-6>
-                <DialogTitle m-0 text-lg text-dark dark:text-white>
-                  {{ title }}
-                </DialogTitle>
-                <SvgIcon name="i-carbon:close" cursor-pointer @click="close" />
-              </div>
-              <DialogDescription m-0 overflow-y-auto p-4>
-                <slot />
-              </DialogDescription>
-              <div v-if="!!slots.footer" flex="~ items-center justify-end" px-4 py-3 border-t="~ solid stone/15">
-                <slot name="footer" />
-              </div>
-            </DialogPanel>
-          </TransitionChild>
-        </div>
-      </div>
-    </Dialog>
-  </TransitionRoot>
-</template>
@@ -1,8 +0,0 @@
-<template>
-  <VDropdown :show-triggers="['hover']" :hide-triggers="['hover']" :auto-hide="false" :popper-triggers="['hover']" :delay="200" v-bind="$attrs">
-    <slot />
-    <template #popper>
-      <slot name="dropdown" />
-    </template>
-  </VDropdown>
-</template>
@@ -1,29 +0,0 @@
-<script setup lang="ts">
-const props = defineProps<{
-  items: {
-    label: string
-    disabled?: boolean
-    hide?: boolean
-    handle?: () => void
-  }[][]
-}>()
-
-const myItems = computed(() => {
-  return props.items.map((item) => {
-    return item.filter(v => !v.hide)
-  }).filter(v => v.length)
-})
-</script>
-
-<template>
-  <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="p-1" border-b="~ solid stone-2 dark:stone-7 last: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>
-      </div>
-    </template>
-  </VMenu>
-</template>
@@ -1,25 +0,0 @@
-<script setup lang="ts" generic="T extends string | number">
-withDefaults(
-  defineProps<{
-    placeholder?: string
-    disabled?: boolean
-  }>(),
-  {
-    disabled: false,
-  },
-)
-
-const value = defineModel<T>()
-
-const inputRef = ref()
-
-defineExpose({
-  ref: inputRef,
-})
-</script>
-
-<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">
-  </div>
-</template>
@@ -1,5 +0,0 @@
-<template>
-  <kbd class="mr-[4px] h-6 min-w-[24px] inline-flex items-center justify-center rounded bg-stone-1 px-1 text-[12px] text-dark font-medium font-sans ring-1 ring-stone-3 ring-inset last:mr-0 dark:bg-dark-9 dark:text-white dark:ring-stone-7">
-    <slot />
-  </kbd>
-</template>
@@ -1,48 +0,0 @@
-<script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    options: {
-      label: string | number
-      value: string | number
-      disabled?: boolean
-    }[]
-    disabled?: boolean
-  }>(),
-  {
-    disabled: false,
-  },
-)
-
-const value = defineModel<string | number>()
-
-const selected = computed({
-  get() {
-    return props.options.find(option => option.value === value.value) ?? props.options[0]
-  },
-  set(val) {
-    value.value = val.value
-  },
-})
-</script>
-
-<template>
-  <VMenu :triggers="['click']" :popper-triggers="['click']" :delay="0" :disabled="disabled" v-bind="$attrs">
-    <div class="w-full inline-flex">
-      <button class="relative block w-full flex cursor-default items-center gap-x-2 border-0 rounded-md bg-white px-2.5 py-1.5 pe-9 text-left text-sm shadow-sm ring-1 ring-stone-2 ring-inset lg:w-48 disabled:cursor-not-allowed dark:bg-dark focus:outline-none focus:ring-2 dark:ring-stone-8 focus:ring-ui-primary" :disabled="disabled">
-        <span class="block truncate">
-          {{ selected.label }}
-        </span>
-        <span class="pointer-events-none absolute end-0 inset-y-0 flex items-center pe-2.5">
-          <SvgIcon name="i-carbon:chevron-down" class="h-5 w-5 flex-shrink-0 text-stone-5" />
-        </span>
-      </button>
-    </div>
-    <template #popper>
-      <div class="max-h-60 w-full scroll-py-1 overflow-y-auto p-1 lg:w-48 focus:outline-none">
-        <button v-for="option in options" :key="option.value" :disabled="option.disabled" class="w-full cursor-pointer truncate border-size-0 rounded-md bg-inherit px-2 py-1.5 text-left text-sm disabled:cursor-not-allowed hover:not-disabled:bg-stone-1 dark:hover:not-disabled:bg-stone-9" :class="{ 'font-bold': modelValue === option.value }" @click="selected = option">
-          {{ option.label }}
-        </button>
-      </div>
-    </template>
-  </VMenu>
-</template>
@@ -1,83 +0,0 @@
-<script setup lang="ts">
-import { Dialog, DialogDescription, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
-import { OverlayScrollbarsComponent } from 'overlayscrollbars-vue'
-
-const props = withDefaults(
-  defineProps<{
-    appear?: boolean
-    side?: 'left' | 'right'
-    title?: string
-    preventClose?: boolean
-    overlay?: boolean
-  }>(),
-  {
-    appear: false,
-    side: 'right',
-    preventClose: false,
-    overlay: false,
-  },
-)
-
-const emits = defineEmits<{
-  'close': []
-}>()
-
-const isOpen = defineModel<boolean>({
-  default: false,
-})
-
-const slots = useSlots()
-
-const overlayTransitionClass = ref({
-  enter: 'ease-in-out duration-500',
-  enterFrom: 'opacity-0',
-  enterTo: 'opacity-100',
-  leave: 'ease-in-out duration-500',
-  leaveFrom: 'opacity-100',
-  leaveTo: 'opacity-0',
-})
-
-const transitionClass = computed(() => {
-  return {
-    enter: 'transform transition ease-in-out duration-300',
-    leave: 'transform transition ease-in-out duration-200',
-    enterFrom: props.side === 'left' ? '-translate-x-full' : 'translate-x-full',
-    enterTo: 'translate-x-0',
-    leaveFrom: 'translate-x-0',
-    leaveTo: props.side === 'left' ? '-translate-x-full' : 'translate-x-full',
-  }
-})
-
-function close() {
-  isOpen.value = false
-  emits('close')
-}
-</script>
-
-<template>
-  <TransitionRoot as="template" :appear="appear" :show="isOpen">
-    <Dialog class="fixed inset-0 z-2000 flex" :class="{ 'justify-end': side === 'right' }" @close="!preventClose && close()">
-      <TransitionChild as="template" :appear="appear" v-bind="overlayTransitionClass">
-        <div class="fixed inset-0 bg-stone-2/75 transition-opacity dark:bg-stone-8/75" :class="{ 'backdrop-blur-sm': overlay }" />
-      </TransitionChild>
-      <TransitionChild as="template" :appear="appear" v-bind="transitionClass">
-        <DialogPanel relative max-w-md w-full w-screen flex flex-1 flex-col bg-white dark:bg-stone-8 focus:outline-none>
-          <div flex="~ items-center justify-between" p-4 border-b="~ solid stone/15" text-6>
-            <DialogTitle m-0 text-lg text-dark dark:text-white>
-              {{ title }}
-            </DialogTitle>
-            <SvgIcon name="i-carbon:close" cursor-pointer @click="close" />
-          </div>
-          <DialogDescription m-0 flex-1 of-y-hidden>
-            <OverlayScrollbarsComponent :options="{ scrollbars: { autoHide: 'leave', autoHideDelay: 300 } }" defer class="h-full p-4">
-              <slot />
-            </OverlayScrollbarsComponent>
-          </DialogDescription>
-          <div v-if="!!slots.footer" flex="~ items-center justify-end" px-3 py-2 border-t="~ solid stone/15">
-            <slot name="footer" />
-          </div>
-        </DialogPanel>
-      </TransitionChild>
-    </Dialog>
-  </TransitionRoot>
-</template>
@@ -1,52 +0,0 @@
-<script setup lang="ts" generic="T">
-import { Tab, TabGroup, TabList } from '@headlessui/vue'
-
-const props = defineProps<{
-  options: {
-    icon?: string
-    label: any
-    value: T
-  }[]
-}>()
-
-const emits = defineEmits<{
-  'change': [T]
-}>()
-
-const value = defineModel<T>()
-
-const selectedIndex = computed({
-  get() {
-    return props.options.findIndex(option => option.value === value.value)
-  },
-  set(val) {
-    value.value = props.options[val].value
-  },
-})
-
-watch(value, (val) => {
-  val && emits('change', val)
-})
-
-function handleChange(index: number) {
-  value.value = props.options[index].value
-}
-</script>
-
-<template>
-  <TabGroup :selected-index="selectedIndex" @change="handleChange">
-    <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="{
-            'cursor-default bg-white dark:bg-dark-9': selected,
-            'cursor-pointer opacity-50 hover:(opacity-100)': !selected,
-          }"
-        >
-          <SvgIcon v-if="option.icon" :name="option.icon" class="flex-shrink-0" />
-          {{ option.label }}
-        </button>
-      </Tab>
-    </TabList>
-  </TabGroup>
-</template>
@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import { Switch } from '@headlessui/vue'
-
-withDefaults(
-  defineProps<{
-    disabled?: boolean
-    onIcon?: string
-    offIcon?: string
-  }>(),
-  {
-    disabled: false,
-  },
-)
-
-const enabled = defineModel<boolean>()
-</script>
-
-<template>
-  <Switch v-model="enabled" :disabled="disabled" class="relative h-5 w-10 inline-flex flex-shrink-0 cursor-pointer border-2 border-transparent rounded-full p-0 vertical-middle disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900" :class="[enabled ? 'bg-ui-primary' : 'bg-stone-3 dark:bg-stone-7']">
-    <span class="pointer-events-none relative inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out dark:bg-dark" :class="[enabled ? 'translate-x-5' : 'translate-x-0']">
-      <span class="absolute inset-0 h-full w-full flex items-center justify-center">
-        <SvgIcon v-if="(enabled && onIcon) || (!enabled && offIcon)" :name="(enabled ? onIcon : offIcon) as string" class="h-3 w-3 text-stone-7 dark:text-stone-3" />
-      </span>
-    </span>
-  </Switch>
-</template>
@@ -1,26 +0,0 @@
-<script setup lang="ts">
-withDefaults(
-  defineProps<{
-    text: string
-    enable?: boolean
-  }>(),
-  {
-    text: '',
-    enable: true,
-  },
-)
-</script>
-
-<template>
-  <VTooltip v-if="enable" :popper-triggers="['hover']" v-bind="$attrs">
-    <slot />
-    <template #popper>
-      <slot name="text">
-        {{ text }}
-      </slot>
-    </template>
-  </VTooltip>
-  <div v-else>
-    <slot />
-  </div>
-</template>
@@ -1,41 +1,29 @@
-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 ui from './ui-provider'
+// 加载 iconify 图标
+import { downloadAndInstall } from '@/iconify'

+import icons from '@/iconify/index.json'
 // 自定义指令
 import directive from '@/utils/directive'

+import App from './App.vue'
+
+import router from './router'
+import pinia from './store'
+import uiProvider from './ui/provider'
+
+import '@/utils/systemCopyright'
+
 // 加载 svg 图标
 import 'virtual:svg-icons-register'
-
-// 加载 iconify 图标
-import { downloadAndInstall } from '@/iconify'
-import icons from '@/iconify/index.json'
-
 import 'virtual:uno.css'
-
+import '@unocss/reset/tailwind-compat.css'
 // 全局样式
-import '@/assets/styles/globals.scss'
+import '@/assets/styles/globals.css'

 const app = createApp(App)
-app.use(FloatingVue, {
-  distance: 12,
-})
-app.use(Message)
 app.use(pinia)
 app.use(router)
-app.use(ui)
+app.use(uiProvider)
 directive(app)
 if (icons.isOfflineUse) {
  for (const info of icons.collections) {
@@ -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 { faker } from '@faker-js/faker'
 import { defineFakeRoute } from 'vite-plugin-fake-server/client'
-import Mock from 'mockjs'

 export default defineFakeRoute([
  {
@@ -9,11 +9,11 @@ export default defineFakeRoute([
      return {
        error: '',
        status: 1,
-        data: Mock.mock({
+        data: {
          account: body.account,
-          token: `${body.account}_@string`,
-          avatar: 'https://fantastic-admin.github.io/logo.png',
-        }),
+          token: `${body.account}:${faker.internet.jwt()}`,
+          avatar: 'https://fantastic-admin.hurui.me/logo.svg',
+        },
      }
    },
  },
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Hooray	cf16db603a	chore: release v5.2.0	2025-04-04 18:53:05 +08:00
Hooray	e68d67d606	chore: 更新依赖	2025-04-04 18:52:49 +08:00
Hooray	1bce49cce6	revert: 回滚移除 `<Suspense>`	2025-04-03 17:52:13 +08:00
Hooray	52c1bb4b58	refactor: 优化icons生成脚本	2025-04-03 14:47:31 +08:00
Hooray	1ea3345556	chore: 更新依赖	2025-03-30 20:34:53 +08:00
Hooray	35d31a078e	style: 样式优化	2025-03-29 13:20:27 +08:00
Hooray	2b18c3f138	refactor!: 重写路由 `push/go/replace` 函数，移除 useTabbar 中 `open/go/replace` 函数	2025-03-29 01:53:13 +08:00
Hooray	10c8401a88	perf: 优化子菜单过渡效果，支持两套实现方案	2025-03-26 22:38:37 +08:00
Hooray	b0ac06172e	feat: 增加 cursor 配置	2025-03-26 15:45:16 +08:00
Hooray	2a902473a8	refactor: 修改圆角系数类型为 `number`	2025-03-24 18:38:16 +08:00
Hooray	f02298bf1b	feat: 新增 `FaSlider` 组件	2025-03-24 18:23:27 +08:00
Hooray	5fcd3fe5ed	fix: 在路由守卫中捕获异常时，添加登出逻辑	2025-03-24 14:02:38 +08:00
Hooray	ee47369579	refactor: 移除 unocss-preset-scrollbar 依赖	2025-03-24 00:04:38 +08:00
Hooray	ce7477b10d	feat: layouts 布局支持 `<Suspense>`	2025-03-13 15:54:39 +08:00
Hooray	609e77c159	fix: 浏览器不支持 color-mix 时，框架主题不会同步至 element-plus 主题	2025-03-13 15:52:58 +08:00
Hooray	db4aa406eb	refactor: `FaCopyright` 组件改用 unocss 实现样式	2025-03-12 12:41:33 +08:00
Hooray	5bfb3c8fb0	fix: 修复 `FaDrawer` 组件 `contentClass` 设置无效	2025-03-12 01:22:15 +08:00
Hooray	5e59d12d73	perf: 优化导航菜单	2025-03-10 21:49:49 +08:00
Hooray	097e700464	refactor: 根据 reka-ui 调整用法	2025-03-10 17:31:06 +08:00
Hooray	501e82dd44	chore: 更新依赖	2025-03-10 16:37:13 +08:00
Hooray	dcad2c6ecf	refactor!: radix-vue 迁移到 reka-ui	2025-03-10 16:07:52 +08:00
Hooray	2b08e82c5e	revert: 面包屑导航回滚回 computed 模式	2025-03-05 10:30:06 +08:00
Hooray	b533c5a040	feat: `FaDivider` 增加 class props	2025-03-03 23:03:37 +08:00
Hooray	33db1040be	refactor: `FaPageMain` group 作用域	2025-03-03 23:01:25 +08:00
Hooray	ebf61b0738	fix: `FaContextMenu` z-index 被遮挡	2025-03-03 14:50:51 +08:00
Hooray	7daea6d605	chore: release v5.1.0	2025-03-03 00:33:03 +08:00
Hooray	1473a6c7e3	chore: 更新依赖	2025-03-03 00:32:16 +08:00
Hooray	87f5b60211	refactor: 调整动效	2025-03-02 11:00:07 +08:00
Hooray	6d58f1c2f3	feat: `FaPopover` 组件增加手动控制面板显示	2025-02-28 15:44:29 +08:00
Hooray	abac8e0152	chore: 更新依赖	2025-02-28 14:10:53 +08:00
Hooray	643d458ac2	feat: 增加 vue devtools 启动编辑器环境变量	2025-02-27 16:27:08 +08:00
Hooray	c5217aabc1	chore: 更新依赖	2025-02-26 18:40:42 +08:00
Hooray	b3b8947b62	fix: 修复 `useFaModal` 弹窗警告	2025-02-26 18:08:47 +08:00
Hooray	ea929ac427	refactor: 快捷键事件绑定/解绑迁移到各自组件中	2025-02-26 17:42:11 +08:00
Hooray	2100bbe7b0	feat: 刷新按钮增加按住ctrl使用原生浏览器刷新功能	2025-02-26 17:00:42 +08:00
Hooray	39ba382fec	refactor: 优化页面刷新，刷新时禁用页面切换动画	2025-02-26 14:47:52 +08:00
Hooray	e87c46ad0a	refactor: 优化删除路由中间层级对应组件的边界场景	2025-02-22 11:13:30 +08:00
Hooray	a6e66c3f47	fix: 导航搜索面板唤起时输入框未聚焦	2025-02-22 10:44:47 +08:00
Hooray	2080d0be5f	refactor: 抽离 `Copyright` 组件为内建组件	2025-02-20 01:48:26 +08:00
Hooray	62f489baf4	refactor: 将 `BackTop` 组件移动到 `App.vue`	2025-02-20 01:28:34 +08:00
Hooray	6f31b04ae8	chore: 更新依赖	2025-02-18 14:32:07 +08:00
Hooray	cfb4f23f18	refactor!: 重构注册路由数据结构将原先多级路由拍平成二级路由的模式，调整为将中间层级的component移除，保持原有数据结构	2025-02-16 02:48:24 +08:00
Hooray	eff07c2833	feat: `FaSelect` 组件增加 class props	2025-02-14 18:47:02 +08:00
Hooray	7f98ab21b3	refactor: `FaDrawer`/`FaModal`开启遮罩层时禁用全局滚动	2025-02-11 17:56:48 +08:00
Hooray	fcb7cb541d	chore: 更新依赖	2025-02-07 17:12:57 +08:00
Hooray	3ab394e772	refactor: 优化`FaDrawer`/`FaModal`遮罩层	2025-02-05 10:04:47 +08:00
Hooray	75411af22f	chore: release v5.0.0	2025-01-24 13:31:03 +08:00
Hooray	2909caaf0e	feat: v5.0	2025-01-24 11:45:06 +08:00
Hooray	83b87a5f3f	chore: release v5.0.0-beta.2	2025-01-16 22:19:33 +08:00
Hooray	cfd23d54da	feat: v5.0	2025-01-16 21:48:41 +08:00
Hooray	40b7f93d97	chore: release v5.0.0-beta.1	2025-01-05 21:12:10 +08:00
Hooray	7f455c5494	feat: v5.0	2025-01-05 21:04:22 +08:00
Hooray	382ece82f7	chore: 更新依赖	2024-12-09 11:07:13 +08:00
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
Hooray Hu	b00477d5fa	chore: release v4.8.2	2024-06-07 10:48:33 +08:00
Hooray Hu	fe00fa1e6f	chore: 更新依赖	2024-06-07 10:32:36 +08:00
Hooray Hu	f0679a1d59	chore: 更新readme	2024-06-04 16:12:39 +08:00
Hooray Hu	4c4f811f39	chore: 修改 unocss 写法	2024-05-29 14:29:55 +08:00
Hooray Hu	03e5e99896	perf: 优化标签栏滚动体验	2024-05-28 16:50:02 +08:00
Hooray Hu	fda48176ee	chore: 更新依赖，修改 unocss 写法	2024-05-22 15:42:16 +08:00
Hooray Hu	b639b487db	chore: release v4.8.1	2024-05-20 10:04:30 +08:00
Hooray Hu	dbd93ffb7f	chore: 更新依赖	2024-05-20 10:00:02 +08:00
Hooray Hu	daf9b1b2e2	chore: vite base 使用默认设置	2024-05-16 10:50:35 +08:00
Hooray Hu	e023671bac	fix: 修复后端返回路由数据中 children 为空数组导致菜单无法正常生成	2024-05-14 10:14:30 +08:00
Hooray Hu	e6265a7c64	chore: 增加node版本控制文件	2024-05-09 09:51:38 +08:00
Hooray Hu	8c629050ba	chore: 更换链接	2024-05-07 09:52:18 +08:00
Hooray Hu	c7d2a857f7	chore: release v4.8.0	2024-05-01 12:44:53 +08:00
Hooray Hu	b19344a1c1	chore: 更新依赖	2024-05-01 12:35:15 +08:00
Hooray Hu	b632b4d3a8	refactor: 调整标签页操作按钮点击区域	2024-04-29 17:51:56 +08:00
Hooray Hu	98d21845ce	feat: 登录页增加扫码登录参考	2024-04-26 11:27:16 +08:00
Hooray Hu	bbeeac41ce	chore: 移除无用代码	2024-04-24 17:26:10 +08:00
Hooray Hu	449495f03d	fix: 修复类型定义	2024-04-23 10:27:33 +08:00
Hooray Hu	14583bbaa5	fix: 标签栏解绑错误快捷键	2024-04-15 09:52:33 +08:00
Hooray Hu	045ab02bb2	chore: 主页微调	2024-04-11 00:49:53 +08:00
Hooray Hu	b883133dc6	refactor: 明暗图标替换	2024-04-09 17:20:49 +08:00
Hooray Hu	5269dba56b	fix: 标签栏右键菜单自定义样式没在指定 class 范围内生效	2024-04-09 16:55:09 +08:00
Hooray Hu	4911affd28	refactor!: 路由 `meta.auth` 保持元信息默认合并行为，路由访问改为通过 `route.matched` 进行逐级鉴权	2024-04-09 15:14:00 +08:00
Hooray Hu	cb53f4c84e	fix: 修复一级路由设置 `meta.menu: false` 无效	2024-04-05 14:43:44 +08:00
Hooray Hu	3164e33f1d	chore: release v4.7.0	2024-03-31 22:54:24 +08:00
Hooray Hu	06eee21032	chore: 更新依赖	2024-03-31 22:53:36 +08:00
Hooray Hu	79184f4eeb	fix: 文件路由系统下,用户权限变化后,菜单不更新	2024-03-28 21:50:48 +08:00
Hooray Hu	8416b61f6b	refactor: 移除`routeStore.routes`	2024-03-28 16:38:22 +08:00
Hooray Hu	a90a19c62e	refactor: `menuStore.menus` 转为内部使用，外部统一使用 `menuStore.allMenus`	2024-03-28 13:48:39 +08:00
Hooray Hu	ee819445d2	chore: 页面宽度判断移动端设备从992调整为1024	2024-03-28 09:22:42 +08:00
Hooray Hu	679ad4c9ee	ci: 修改 github actions 自动同步时间	2024-03-25 09:29:53 +08:00
Hooray Hu	805c13ba7a	chore: 更新依赖	2024-03-21 14:47:28 +08:00
Hooray Hu	c61675b311	fix: 修复后端返回路由时，因为父级auth为空字符串或数组导致子级权限失效的问题	2024-03-19 22:34:09 +08:00
Hooray Hu	a105df66b1	fix: 修复顶部导航数量过多，导致工具栏被遮挡	2024-03-18 00:31:09 +08:00
Hooray Hu	107e820776	fix: 修复顶部导航鼠标滚动回弹	2024-03-18 00:27:07 +08:00
Hooray Hu	04fa39c295	feat: 路由增加 `meta.menu` 配置，同时 `meta.sidebar` 进入弃用过渡期	2024-03-17 00:13:14 +08:00
Hooray Hu	1685f8b7be	chore: 更新依赖	2024-03-14 11:56:02 +08:00
Hooray Hu	73074101e1	fix: 修复 mock 模板请求无响应数据	2024-03-07 09:22:57 +08:00
Hooray Hu	e802354cab	refactor: 调整 onsize 事件写法	2024-03-05 09:28:21 +08:00
Hooray Hu	26274fdb8e	ci: 修改 workflow	2024-03-04 09:32:17 +08:00
Hooray Hu	f26b4cc50e	chore: 移除弃用扩展	2024-03-04 09:08:44 +08:00
Hooray Hu	fd1d57cebe	chore: release v4.6.2	2024-03-01 09:02:50 +08:00
Hooray Hu	4ac539d082	build: 增加最低 node 版本限制	2024-02-29 14:15:21 +08:00
Hooray Hu	fa81882f25	ci: 更新 workflows	2024-02-28 10:37:33 +08:00
Hooray Hu	606ce62cfd	revert: 用户态改回用 localStorage 存储	2024-02-26 15:17:09 +08:00
Hooray Hu	7479dfe818	chore: release v4.6.1	2024-02-26 13:58:31 +08:00
Hooray Hu	a8e964acd4	chore: 更新依赖	2024-02-26 13:58:09 +08:00
				`@@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" class="icon" viewBox="0 0 1024 1024"><path d="M704 328a72 72 0 1 0 144 0 72 72 0 1 0-144 0z"/><path d="M999.904 116.608a32 32 0 0 0-21.952-10.912L521.76 73.792a31.552 31.552 0 0 0-27.2 11.904l-92.192 114.848a32 32 0 0 0 .672 40.896l146.144 169.952-147.456 194.656 36.48-173.376a32 32 0 0 0-11.136-31.424L235.616 245.504l79.616-125.696a32 32 0 0 0-29.28-49.024L45.76 87.552a32 32 0 0 0-29.696 34.176l55.808 798.016a32.064 32.064 0 0 0 34.304 29.696l176.512-13.184c17.632-1.312 30.848-16.672 29.504-34.272s-16.576-31.04-34.304-29.536L133.44 883.232l-6.432-92.512 125.312-12.576a32 32 0 0 0 28.672-35.04 32.16 32.16 0 0 0-35.04-28.672L122.56 726.848 82.144 149.184l145.152-10.144-60.96 96.224a32 32 0 0 0 6.848 41.952l198.4 161.344-58.752 279.296a30.912 30.912 0 0 0 .736 14.752 31.68 31.68 0 0 0 1.408 11.04l51.52 154.56a31.968 31.968 0 0 0 27.456 21.76l523.104 47.552a32.064 32.064 0 0 0 34.848-29.632l55.776-798.048a32.064 32.064 0 0 0-7.776-23.232zm-98.912 630.848-412.576-39.648a31.52 31.52 0 0 0-34.912 28.768 32 32 0 0 0 28.8 34.912l414.24 39.808-6.272 89.536-469.728-42.72-39.584-118.72 234.816-310.016a31.936 31.936 0 0 0-1.248-40.192L468.896 219.84l65.088-81.056 407.584 28.48-40.576 580.192z"/></svg>