chore: release v4.9.0

BREAKING CHANGE: `toolbar.enableFullscreen` 变更为 `toolbar.fullscreen`
`toolbar.enablePageReload` 变更为 `toolbar.pageReload`
`toolbar.enableColorScheme` 变更为 `toolbar.colorScheme`
`breadcrumb.enable` 变更为 `toolbar.breadcrumb`
`navSearch.enable` 变更为 `toolbar.navSearch`

.commitlintrc.js

@@ -1,6 +1,5 @@
-// .commitlintrc.js
 /** @type {import('cz-git').UserConfig} */
-module.exports = {
+export default {
   rules: {
     // @see: https://commitlint.js.org/#/reference-rules
   },
@@ -16,7 +15,7 @@ module.exports = {
       footerPrefixsSelect: '选择关联issue前缀（可选）:',
       customFooterPrefixs: '输入自定义issue前缀 :',
       footer: '列举关联issue (可选) 例如: #31, #I3244 :\n',
-      confirmCommit: '是否提交或修改commit ?'
+      confirmCommit: '是否提交或修改commit ?',
     },
     types: [
       { value: 'feat', name: 'feat:     ✨  新增功能 | A new feature', emoji: ':sparkles:' },
@@ -49,7 +48,7 @@ module.exports = {
     issuePrefixs: [
       // 如果使用 gitee 作为开发管理
       { value: 'link', name: 'link:     链接 ISSUES 进行中' },
-      { value: 'closed', name: 'closed:   标记 ISSUES 已完成' }
+      { value: 'closed', name: 'closed:   标记 ISSUES 已完成' },
     ],
     customIssuePrefixsAlign: 'top',
     emptyIssuePrefixsAlias: 'skip',
@@ -57,13 +56,13 @@ module.exports = {
     allowCustomIssuePrefixs: true,
     allowEmptyIssuePrefixs: true,
     confirmColorize: true,
-    maxHeaderLength: Infinity,
-    maxSubjectLength: Infinity,
+    maxHeaderLength: Number.POSITIVE_INFINITY,
+    maxSubjectLength: Number.POSITIVE_INFINITY,
     minSubjectLength: 0,
     scopeOverrides: undefined,
     defaultBody: '',
     defaultIssues: '',
     defaultScope: '',
-    defaultSubject: ''
-  }
+    defaultSubject: '',
+  },
 }

.env.development

@@ -1,9 +1,15 @@
+# 应用配置面板
+VITE_APP_SETTING = true
 # 页面标题
 VITE_APP_TITLE = Fantastic-admin 基础版
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
 VITE_APP_API_BASEURL = /
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
+# 是否禁用开发者工具，可防止被调试
+VITE_APP_DISABLE_DEVTOOL = false
 
 # 是否开启代理
-VITE_OPEN_PROXY = true
+VITE_OPEN_PROXY = false
+# 是否开启开发者工具
+VITE_OPEN_DEVTOOLS = false

.env.production

@@ -1,9 +1,13 @@
+# 应用配置面板
+VITE_APP_SETTING = false
 # 页面标题
 VITE_APP_TITLE = 页面标题
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
 VITE_APP_API_BASEURL = /
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
+# 是否禁用开发者工具，可防止被调试
+VITE_APP_DISABLE_DEVTOOL = false
 
 # 是否在打包时启用 Mock
 VITE_BUILD_MOCK = false
@@ -11,3 +15,5 @@ VITE_BUILD_MOCK = false
 VITE_BUILD_SOURCEMAP = false
 # 是否在打包时开启压缩，支持 gzip 和 brotli
 VITE_BUILD_COMPRESS = gzip,brotli
+# 是否在打包后生成存档，支持 zip 和 tar
+VITE_BUILD_ARCHIVE =

.env.test

@@ -1,9 +1,13 @@
+# 应用配置面板
+VITE_APP_SETTING = false
 # 页面标题
 VITE_APP_TITLE = 页面标题(test)
 # 接口请求地址，会设置到 axios 的 baseURL 参数上
 VITE_APP_API_BASEURL = /
 # 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
 VITE_APP_DEBUG_TOOL =
+# 是否禁用开发者工具，可防止被调试
+VITE_APP_DISABLE_DEVTOOL = false
 
 # 是否在打包时启用 Mock
 VITE_BUILD_MOCK = true
@@ -11,3 +15,5 @@ VITE_BUILD_MOCK = true
 VITE_BUILD_SOURCEMAP = true
 # 是否在打包时开启压缩，支持 gzip 和 brotli
 VITE_BUILD_COMPRESS =
+# 是否在打包后生成存档，支持 zip 和 tar
+VITE_BUILD_ARCHIVE =

.eslintignore

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

.eslintrc

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

.github/workflows/release.yml

@@ -9,13 +9,13 @@ jobs:
   release:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: 16.x
+          node-version: 20
 
       - run: npx changelogithub # or changelogithub@0.12 if ensure the stable result
         env:
@@ -25,7 +25,7 @@ jobs:
     needs: release
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
@@ -40,7 +40,7 @@ jobs:
       - name: Create Archive
         uses: thedoctor0/zip-release@main
         with:
-          type: 'zip'
+          type: zip
           filename: fantastic-admin.${{ steps.last_release.outputs.tag_name }}.zip
           exclusions: '/.git/* /.github/*'
 
@@ -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
@@ -73,9 +73,9 @@ jobs:
       - name: Create Archive
         uses: thedoctor0/zip-release@main
         with:
-          type: 'zip'
+          type: zip
           filename: fantastic-admin.example.${{ steps.last_release.outputs.tag_name }}.zip
-          exclusions: '/.git/* /.github/*'
+          exclusions: '/.git/* /.github/* /public/.github/* /public/.nojekyll'
 
       - name: Upload Archive To Release
         uses: xresloader/upload-to-github-release@v1

.github/workflows/repo-sync.yml

@@ -1,9 +1,9 @@
 name: repo-sync
 
 on:
-  # 每天自动同步
+  # 每天 00:05 自动同步
   schedule:
-    - cron: '0 0 * * *'
+    - cron: '5 0 * * *'
   # 手动触发部署
   workflow_dispatch:
 
@@ -18,6 +18,6 @@ jobs:
           SSH_PRIVATE_KEY: ${{ secrets.GITEE_RSA_PRIVATE_KEY }}
         with:
           # 注意替换为你的 GitHub 源仓库地址
-          source-repo: git@github.com:hooray/fantastic-admin.git
+          source-repo: git@github.com:fantastic-admin/basic.git
           # 注意替换为你的 Gitee 目标仓库地址
-          destination-repo: git@gitee.com:hooray/fantastic-admin.git
+          destination-repo: git@gitee.com:fantastic-admin/basic.git

.gitignore

@@ -5,6 +5,3 @@ dist-ssr
 *.local
 .eslintcache
 .stylelintcache
-src/assets/sprites/*.*
-!src/assets/sprites/.gitkeep
-public/icons

.lintstagedrc

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

.node-version

@@ -0,0 +1 @@
+20

.npmrc

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

.stylelintignore

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

.stylelintrc

@@ -1,27 +0,0 @@
-{
-  "extends": [
-    "stylelint-stylistic/config",
-    "stylelint-config-standard",
-    "stylelint-config-standard-scss",
-    "stylelint-config-standard-vue/scss"
-  ],
-  "plugins": [
-    "stylelint-scss"
-  ],
-  "rules": {
-    "stylistic/max-line-length": null,
-    "stylistic/block-closing-brace-newline-after": [
-      "always",
-      {
-        "ignoreAtRules": ["if", "else"]
-      }
-    ],
-    "at-rule-no-unknown": null,
-    "no-descending-specificity": null,
-    "property-no-unknown": null,
-    "font-family-no-missing-generic-family-keyword": null,
-    "selector-class-pattern": null,
-    "scss/double-slash-comment-empty-line-before": null,
-    "scss/no-global-function-names": null
-  }
-}

.vscode/extensions.json

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

.vscode/settings.json

@@ -1,7 +1,27 @@
 {
+  "eslint.useFlatConfig": true,
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
-    "source.fixAll.stylelint": true
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll.stylelint": "explicit",
+    "source.organizeImports": "never"
   },
-  "stylelint.validate": ["css", "scss", "vue"]
+  "stylelint.validate": [
+    "css",
+    "scss",
+    "vue"
+  ],
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml"
+  ]
 }

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 fantastic-template
+Copyright (c) 2020 fantastic-admin
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,34 +1,27 @@
 <p align="center">
-  <img src="https://hooray.gitee.io/fantastic-admin/logo.png" width="200" height="200" />
+  <img src="https://fantastic-admin.github.io/logo.png" width="200" height="200" />
 </p>
 
 <h1 align="center">Fantastic-admin</h1>
 
-<p align="center">一款<b>开箱即用</b>的 Vue 中后台管理系统框架</p>
+<p align="center">一款<b>开箱即用</b>的 Vue3 中后台管理系统框架</p>
 
 <p align="center">
-  <a href="https://hooray.gitee.io/fantastic-admin" target="_blank">官网</a>
-  ( <a href="https://hooray.github.io/fantastic-admin" target="_blank">备用</a> )
+  <a href="https://fantastic-admin.github.io" target="_blank">官网(Github)</a>
   <span>&nbsp;|&nbsp;</span>
-  演示
-  ( <a href="https://hooray.gitee.io/fantastic-admin-example" target="_blank">基础版</a>
-  <a href="https://hooray.gitee.io/fantastic-admin-pro-example" target="_blank">专业版</a> )
-  <span>&nbsp;|&nbsp;</span>
-  <a href="https://hooray.gitee.io/fantastic-admin/support.html" target="_blank">技术支持</a>
-  <span>&nbsp;|&nbsp;</span>
-  <a href="https://hooray.gitee.io/fantastic-admin/buy.html" target="_blank">购买</a>
+  <a href="https://fantastic-admin.pages.dev" target="_blank">官网(Cloudflare)</a>
 <p>
 
 <p align="center">
-  <a href="###"><img src="https://img.shields.io/github/license/hooray/fantastic-admin?label=%E5%BC%80%E6%BA%90%E5%8D%8F%E8%AE%AE&style=flat-square" /></a>
-  <a href="https://github.com/hooray/fantastic-admin/releases" target="_blank"><img src="https://img.shields.io/github/v/release/hooray/fantastic-admin?label=%E5%BD%93%E5%89%8D%E7%89%88%E6%9C%AC&style=flat-square" /></a>
+  <a href="###"><img src="https://img.shields.io/github/license/fantastic-admin/basic?label=%E5%BC%80%E6%BA%90%E5%8D%8F%E8%AE%AE&style=flat-square" /></a>
+  <a href="https://github.com/fantastic-admin/basic/releases" target="_blank"><img src="https://img.shields.io/github/v/release/fantastic-admin/basic?label=%E5%BD%93%E5%89%8D%E7%89%88%E6%9C%AC&style=flat-square" /></a>
 </p>
 
 ## 特点
 
+- 可自由替换 UI 组件库，默认使用 Element Plus
 - 丰富的布局与主题，覆盖市面上各种中后台应用场景，兼容PC、平板和移动端
 - 提供系统配置文件，轻松实现个性化定制
-- 精心设计的动效，让每一处的动画都干净利落
 - 根据路由配置自动生成导航栏
 - 基于文件系统的路由
 - 支持全方位权限验证
@@ -36,29 +29,31 @@
 - 轻松实现国际化多语言适配
 - 提供接近于浏览器原生标签栏操作体验的标签页功能
 
-## 分支说明
+## 下载
 
-- `master` Vue3 版本框架源码分支，不含示例代码，可直接用于实际开发
+> 本仓库为基础版
+
+**直接拉取源码可能会包含未发布的内容，推荐去 [Github Releases](https://github.com/fantastic-admin/basic/releases) 页面下载稳定版本的压缩包**。如果确定需要拉取源码，请参考下列分支说明：
+
+- `main` Vue3 版本框架源码分支，不含示例代码，可直接用于实际开发
 - `example` Vue3 版本演示源码分支，同线上演示站，包含大量示例，可用于参考学习
 - `vue2` Vue2 版本框架源码分支，不含示例代码，可直接用于实际开发（停止维护）
 - `vue2-example` Vue2 版本演示源码分支，包含大量示例，可用于参考学习（停止维护）
 
-如果你更注重使用时的稳定性，推荐去 [Github Releases](https://github.com/hooray/fantastic-admin/releases) 页面下载最新稳定版本的压缩包。
-
 ## 预览
 
 > 预览截图为 Vue3 专业版
 
 <table>
   <tr>
-    <td><img src="https://hooray.gitee.io/fantastic-admin/preview1.png" /></td>
-    <td><img src="https://hooray.gitee.io/fantastic-admin/preview2.png" /></td>
-    <td><img src="https://hooray.gitee.io/fantastic-admin/preview3.png" /></td>
+    <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>
   </tr>
   <tr>
-    <td><img src="https://hooray.gitee.io/fantastic-admin/preview4.png" /></td>
-    <td><img src="https://hooray.gitee.io/fantastic-admin/preview5.png" /></td>
-    <td><img src="https://hooray.gitee.io/fantastic-admin/preview6.png" /></td>
+    <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>
   </tr>
 </table>
 
@@ -66,21 +61,27 @@
 
 如果觉得 Fantastic-admin 这个框架不错，或者已经在使用了，希望你可以在 **Github** 或者 **Gitee(码云)** 帮我点个 ⭐ ，这将对我是极大的鼓励。
 
-[![star](https://img.shields.io/github/stars/hooray/fantastic-admin?style=social)](https://github.com/hooray/fantastic-admin/stargazers)
+[![star](https://img.shields.io/github/stars/fantastic-admin/basic?style=social)](https://github.com/fantastic-admin/basic)
 
-[![star](https://gitee.com/hooray/fantastic-admin/badge/star.svg?theme=dark)](https://gitee.com/hooray/fantastic-admin/stargazers)
+[![star](https://gitee.com/fantastic-admin/basic/badge/star.svg?theme=dark)](https://gitee.com/fantastic-admin/basic)
+
+<details>
+<summary>Github Stars 曲线</summary>
+
+[![Stargazers over time](https://starchart.cc/fantastic-admin/basic.svg)](https://starchart.cc/fantastic-admin/basic)
+</details>
 
 ## 生态
 
 <table>
   <tr>
     <th colspan="3" align="center">
-      <a href="https://hooray.gitee.io/fantastic-startkit/" target="_blank">Fantastic-startkit</a>
+      <a href="https://hooray.github.io/fantastic-startkit/" target="_blank">Fantastic-startkit</a>
     </th>
   </tr>
   <tr>
     <th colspan="3" align="center">
-      一款开箱即用的 Vue 项目启动套件
+      一款简单好用的 Vue3 项目启动套件
     </th>
   </tr>
 </table>
@@ -88,7 +89,7 @@
 <table>
   <tr>
     <th colspan="3" align="center">
-      <a href="https://hooray.gitee.io/one-step-admin/" target="_blank">One-step-admin</a>
+      <a href="https://one-step-admin.github.io" target="_blank">One-step-admin</a>
     </th>
   </tr>
   <tr>
@@ -97,13 +98,32 @@
     </th>
   </tr>
   <tr>
-    <td><img src="https://hooray.gitee.io/one-step-admin/preview1.png" /></td>
-    <td><img src="https://hooray.gitee.io/one-step-admin/preview2.png" /></td>
-    <td><img src="https://hooray.gitee.io/one-step-admin/preview3.png" /></td>
+    <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>
   </tr>
   <tr>
-    <td><img src="https://hooray.gitee.io/one-step-admin/preview4.png" /></td>
-    <td><img src="https://hooray.gitee.io/one-step-admin/preview5.png" /></td>
-    <td><img src="https://hooray.gitee.io/one-step-admin/preview6.png" /></td>
+    <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>
+  </tr>
+</table>
+
+<table>
+  <tr>
+    <th colspan="4" align="center">
+      <a href="https://fantastic-mobile.github.io" target="_blank">Fantastic-mobile</a>
+    </th>
+  </tr>
+  <tr>
+    <th colspan="4" align="center">
+      一款自成一派的移动端 H5 框架
+    </th>
+  </tr>
+  <tr>
+    <td><img src="https://fantastic-mobile.github.io/preview1.png" /></td>
+    <td><img src="https://fantastic-mobile.github.io/preview2.png" /></td>
+    <td><img src="https://fantastic-mobile.github.io/preview3.png" /></td>
+    <td><img src="https://fantastic-mobile.github.io/preview4.png" /></td>
   </tr>
 </table>

eslint.config.js

@@ -0,0 +1,28 @@
+import antfu from '@antfu/eslint-config'
+
+export default antfu(
+  {
+    unocss: true,
+    ignores: [
+      'public',
+      'dist*',
+    ],
+  },
+  {
+    rules: {
+      'eslint-comments/no-unlimited-disable': 'off',
+      'curly': ['error', 'all'],
+      'antfu/consistent-list-newline': 'off',
+    },
+  },
+  {
+    files: [
+      'src/**/*.vue',
+    ],
+    rules: {
+      'vue/block-order': ['error', {
+        order: ['route', 'script', 'template', 'style'],
+      }],
+    },
+  },
+)

package.json

@@ -1,86 +1,107 @@
 {
-  "version": "3.1.0",
+  "type": "module",
+  "version": "4.9.0",
+  "engines": {
+    "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+  },
   "scripts": {
     "dev": "vite",
-    "build:test": "vue-tsc --noEmit && vite build --mode test",
-    "build": "vue-tsc --noEmit && vite build",
-    "serve:test": "http-server ./dist-test -o",
+    "build": "vue-tsc && vite build",
+    "build:test": "vue-tsc && 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 --noEmit",
-    "lint:eslint": "eslint --cache --fix --no-ignore --no-error-on-unmatched-pattern --ext .ts,.tsx,.vue src/",
-    "lint:stylelint": "stylelint src/**/*.{css,scss,vue} --cache --fix --allow-empty-input",
-    "postinstall": "simple-git-hooks && esno scripts/prepare.js",
+    "lint:tsc": "vue-tsc",
+    "lint:eslint": "eslint . --cache --fix",
+    "lint:stylelint": "stylelint \"src/**/*.{css,scss,vue}\" --cache --fix",
+    "postinstall": "simple-git-hooks",
     "preinstall": "npx only-allow pnpm",
     "commit": "git cz",
     "release": "bumpp"
   },
   "dependencies": {
-    "@vueuse/core": "^10.1.2",
-    "@vueuse/integrations": "^10.1.2",
-    "axios": "^1.4.0",
-    "dayjs": "^1.11.7",
-    "element-plus": "^2.3.5",
-    "eruda": "^3.0.0",
-    "hotkeys-js": "^3.10.2",
+    "@headlessui/vue": "^1.7.22",
+    "@imengyu/vue3-context-menu": "^1.4.1",
+    "@vueuse/core": "^10.11.0",
+    "@vueuse/integrations": "^10.11.0",
+    "axios": "^1.7.2",
+    "dayjs": "^1.11.11",
+    "defu": "^6.1.4",
+    "disable-devtool": "^0.3.7",
+    "element-plus": "^2.7.6",
+    "eruda": "^3.0.1",
+    "floating-vue": "5.2.2",
+    "hotkeys-js": "^3.13.7",
     "lodash-es": "^4.17.21",
-    "mitt": "^3.0.0",
+    "mitt": "^3.0.1",
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
+    "overlayscrollbars": "^2.9.1",
+    "overlayscrollbars-vue": "^0.5.9",
     "path-browserify": "^1.0.1",
-    "path-to-regexp": "^6.2.1",
-    "pinia": "^2.1.3",
-    "qs": "^6.11.2",
-    "vconsole": "^3.15.0",
-    "vue": "^3.3.4",
-    "vue-router": "^4.2.1"
+    "path-to-regexp": "^7.0.0",
+    "pinia": "^2.1.7",
+    "qs": "^6.12.1",
+    "scule": "^1.3.0",
+    "vconsole": "^3.15.1",
+    "vue": "^3.4.31",
+    "vue-m-message": "^4.0.2",
+    "vue-router": "^4.4.0"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.39.3",
-    "@iconify-json/ep": "^1.1.10",
-    "@iconify/vue": "^4.1.1",
-    "@types/nprogress": "^0.2.0",
-    "@types/path-browserify": "^1.0.0",
-    "@types/qs": "^6.9.7",
-    "@vitejs/plugin-legacy": "^4.0.3",
-    "@vitejs/plugin-vue": "^4.2.3",
-    "@vitejs/plugin-vue-jsx": "^3.0.1",
-    "autoprefixer": "^10.4.14",
-    "bumpp": "^9.1.0",
-    "cz-git": "^1.6.1",
-    "eslint": "^8.41.0",
-    "esno": "^0.16.3",
-    "fs-extra": "^11.1.1",
+    "@antfu/eslint-config": "2.21.2",
+    "@iconify/json": "^2.2.223",
+    "@iconify/vue": "^4.1.2",
+    "@stylistic/stylelint-config": "^1.0.1",
+    "@types/lodash-es": "^4.17.12",
+    "@types/mockjs": "^1.0.10",
+    "@types/nprogress": "^0.2.3",
+    "@types/path-browserify": "^1.0.2",
+    "@types/qs": "^6.9.15",
+    "@unocss/eslint-plugin": "^0.61.0",
+    "@vitejs/plugin-legacy": "^5.4.1",
+    "@vitejs/plugin-vue": "^5.0.5",
+    "@vitejs/plugin-vue-jsx": "^4.0.0",
+    "archiver": "^7.0.1",
+    "autoprefixer": "^10.4.19",
+    "boxen": "^7.1.1",
+    "bumpp": "^9.4.1",
+    "cz-git": "^1.9.3",
+    "eslint": "^9.6.0",
+    "esno": "^4.7.0",
+    "fs-extra": "^11.2.0",
     "http-server": "^14.1.1",
-    "lint-staged": "^13.2.2",
-    "npm-run-all": "^4.1.5",
-    "plop": "^3.1.2",
-    "postcss-html": "^1.5.0",
-    "sass": "^1.62.1",
-    "simple-git-hooks": "^2.8.1",
-    "stylelint": "^15.6.2",
-    "stylelint-config-standard": "^33.0.0",
-    "stylelint-config-standard-scss": "^9.0.0",
+    "inquirer": "^9.3.1",
+    "lint-staged": "^15.2.7",
+    "npm-run-all2": "^6.2.0",
+    "picocolors": "^1.0.1",
+    "plop": "^4.0.1",
+    "postcss": "^8.4.38",
+    "sass": "^1.77.6",
+    "simple-git-hooks": "^2.11.1",
+    "stylelint": "^16.6.1",
+    "stylelint-config-recess-order": "^5.0.1",
+    "stylelint-config-standard-scss": "^13.1.0",
     "stylelint-config-standard-vue": "^1.0.0",
-    "stylelint-scss": "^5.0.0",
-    "stylelint-stylistic": "^0.4.2",
-    "svgo": "^3.0.2",
-    "terser": "^5.17.6",
-    "typescript": "^5.0.4",
-    "unplugin-auto-import": "^0.16.2",
-    "unplugin-vue-components": "^0.24.1",
-    "vite": "^4.3.8",
-    "vite-plugin-banner": "^0.7.0",
-    "vite-plugin-compression": "^0.5.1",
-    "vite-plugin-mock": "^2.9.8",
-    "vite-plugin-pages": "^0.30.1",
-    "vite-plugin-spritesmith": "^0.1.1",
+    "stylelint-scss": "^6.3.2",
+    "svgo": "^3.3.2",
+    "typescript": "^5.5.2",
+    "unocss": "^0.61.0",
+    "unplugin-auto-import": "^0.17.6",
+    "unplugin-turbo-console": "^1.8.9",
+    "unplugin-vue-components": "^0.27.2",
+    "vite": "^5.3.2",
+    "vite-plugin-banner": "^0.7.1",
+    "vite-plugin-compression2": "^1.1.1",
+    "vite-plugin-fake-server": "^2.1.1",
+    "vite-plugin-pages": "^0.32.3",
     "vite-plugin-svg-icons": "^2.0.1",
-    "vite-plugin-vue-inspector": "^3.4.2",
-    "vite-plugin-vue-meta-layouts": "^0.2.2",
-    "vue-tsc": "^1.6.5"
+    "vite-plugin-vue-devtools": "^7.3.5",
+    "vite-plugin-vue-meta-layouts": "^0.4.3",
+    "vue-tsc": "^2.0.22"
   },
   "simple-git-hooks": {
     "pre-commit": "pnpm lint-staged",

plop-templates/component/prompt.js

@@ -1,4 +1,4 @@
-const fs = require('fs')
+import fs from 'node:fs'
 
 function getFolder(path) {
   const components = []
@@ -13,7 +13,7 @@ function getFolder(path) {
   return components
 }
 
-module.exports = {
+export default {
   description: '创建组件',
   prompts: [
     {

plop-templates/mock/mock.hbs

@@ -0,0 +1,84 @@
+import Mock from 'mockjs'
+
+const AllList: any[] = []
+for (let i = 0; i < 50; i++) {
+  AllList.push(Mock.mock({
+    id: '@id',
+    title: '@ctitle(10, 20)',
+  }))
+}
+
+export default [
+  {
+    url: '/mock/{{#if relativePath}}{{ relativePath }}/{{/if}}{{ moduleName }}/list',
+    method: 'get',
+    response: (option: any) => {
+      const { title, from, limit } = option.query
+      const list = AllList.filter((item) => {
+        return title ? item.title.includes(title) : true
+      })
+      const pageList = list.filter((item, index) => {
+        return index >= ~~from && index < (~~from + ~~limit)
+      })
+      return {
+        error: '',
+        status: 1,
+        data: {
+          list: pageList,
+          total: list.length,
+        },
+      }
+    },
+  },
+  {
+    url: '/mock/{{#if relativePath}}{{ relativePath }}/{{/if}}{{ moduleName }}/detail',
+    method: 'get',
+    response: (option: any) => {
+      const info = AllList.filter(item => item.id === option.query.id)
+      return {
+        error: '',
+        status: 1,
+        data: info[0],
+      }
+    },
+  },
+  {
+    url: '/mock/{{#if relativePath}}{{ relativePath }}/{{/if}}{{ moduleName }}/create',
+    method: 'post',
+    response: () => {
+      return {
+        error: '',
+        status: 1,
+        data: {
+          isSuccess: true,
+        },
+      }
+    },
+  },
+  {
+    url: '/mock/{{#if relativePath}}{{ relativePath }}/{{/if}}{{ moduleName }}/edit',
+    method: 'post',
+    response: () => {
+      return {
+        error: '',
+        status: 1,
+        data: {
+          isSuccess: true,
+        },
+      }
+    },
+  },
+  {
+    url: '/mock/{{#if relativePath}}{{ relativePath }}/{{/if}}{{ moduleName }}/delete',
+    method: 'post',
+    response: () => {
+      return {
+        error: '',
+        status: 1,
+        data: {
+          isSuccess: true,
+        },
+      }
+    },
+  },
+]

plop-templates/mock/prompt.js

@@ -0,0 +1,43 @@
+import path from 'node:path'
+import fs from 'node:fs'
+
+function getFolder(path) {
+  const components = []
+  const files = fs.readdirSync(path)
+  files.forEach((item) => {
+    const stat = fs.lstatSync(`${path}/${item}`)
+    if (stat.isDirectory() === true && item !== 'components') {
+      components.push(`${path}/${item}`)
+      components.push(...getFolder(`${path}/${item}`))
+    }
+  })
+  return components
+}
+
+export default {
+  description: '创建标准模块 Mock',
+  prompts: [
+    {
+      type: 'list',
+      name: 'path',
+      message: '请选择模块目录',
+      choices: getFolder('src/views'),
+    },
+  ],
+  actions: (data) => {
+    const pathArr = path.relative('src/views', data.path).split('\\')
+    const moduleName = pathArr.pop()
+    const relativePath = pathArr.join('/')
+    const actions = []
+    actions.push({
+      type: 'add',
+      path: pathArr.length === 0 ? 'src/mock/{{moduleName}}.ts' : `src/mock/${pathArr.join('.')}.{{moduleName}}.ts`,
+      templateFile: 'plop-templates/mock/mock.hbs',
+      data: {
+        relativePath,
+        moduleName,
+      },
+    })
+    return actions
+  },
+}

plop-templates/page/prompt.js

@@ -1,5 +1,5 @@
-const path = require('path')
-const fs = require('fs')
+import path from 'node:path'
+import fs from 'node:fs'
 
 function getFolder(path) {
   const components = []
@@ -14,7 +14,7 @@ function getFolder(path) {
   return components
 }
 
-module.exports = {
+export default {
   description: '创建页面',
   prompts: [
     {

plop-templates/store/index.hbs

@@ -1,10 +1,12 @@
 const use{{ properCase name }}Store = defineStore(
   // 唯一ID
   '{{ camelCase name }}',
-  {
-    state: () => ({}),
-    getters: {},
-    actions: {},
+  () => {
+    const someThing = ref(0)
+
+    return {
+      someThing,
+    }
   },
 )
 

plop-templates/store/prompt.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   description: '创建全局状态',
   prompts: [
     {

plopfile.js

@@ -1,6 +1,13 @@
-module.exports = function (plop) {
+import { promises as fs } from 'node:fs'
+
+export default async function (plop) {
   plop.setWelcomeMessage('请选择需要创建的模式：')
-  plop.setGenerator('page', require('./plop-templates/page/prompt'))
-  plop.setGenerator('component', require('./plop-templates/component/prompt'))
-  plop.setGenerator('store', require('./plop-templates/store/prompt'))
+  const items = await fs.readdir('./plop-templates')
+  for (const item of items) {
+    const stat = await fs.lstat(`./plop-templates/${item}`)
+    if (stat.isDirectory()) {
+      const prompt = await import(`./plop-templates/${item}/prompt.js`)
+      plop.setGenerator(item, prompt.default)
+    }
+  }
 }

postcss.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   plugins: {
     autoprefixer: {},
   },

public/browser_upgrade/index.css

@@ -1,20 +1,20 @@
 #browser-upgrade {
   position: absolute;
-  z-index: 10001;
   top: 0;
   left: 0;
-  height: 100%;
-  width: 100%;
+  z-index: 10001;
   display: none;
-  user-select: none;
+  width: 100%;
+  height: 100%;
   color: #736477;
+  user-select: none;
   background-color: snow;
 }
 
 #browser-upgrade .title {
   margin: 40px 0;
-  text-align: center;
   font-size: 24px;
+  text-align: center;
 }
 
 #browser-upgrade .browsers {
@@ -24,8 +24,8 @@
 #browser-upgrade .browsers .browser {
   display: inline-block;
   margin: 0 20px;
-  cursor: pointer;
   text-decoration: none;
+  cursor: pointer;
 }
 
 #browser-upgrade .browsers .browser .browser-icon {
@@ -37,10 +37,10 @@
 }
 
 #browser-upgrade .browsers .browser .browser-name {
-  text-align: center;
-  margin-top: 10px;
   padding-bottom: 2px;
+  margin-top: 10px;
   color: #736477;
+  text-align: center;
   border-bottom: 1px solid transparent;
 }
 

public/loading.css

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

scripts/generate.icons.ts

@@ -0,0 +1,83 @@
+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'
+
+async function generateIcons() {
+  // 拿到全部图标集的原始数据
+  const raw = await lookupCollections()
+
+  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))
+
+  /**
+   * 分别会在对应目录下生成以下文件，其中(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')
+  })
+}
+
+generateIcons()

scripts/prepare.js

@@ -1,15 +0,0 @@
-import path from 'node:path'
-import fs from 'fs-extra'
-import { icons } from '@iconify-json/ep'
-
-async function prepare() {
-  const outputDir = path.resolve(process.cwd(), 'public/icons')
-  await fs.ensureDir(outputDir)
-  await fs.emptyDir(outputDir)
-  await fs.writeJSON(
-    path.resolve(outputDir, 'icons.json'),
-    icons,
-  )
-}
-
-prepare()

scss.template.hbs

@@ -1,66 +0,0 @@
-{
-  // Default options
-  'functions': true,
-  'variableNameTransforms': ['dasherize']
-}
-
-{{#block "sprites"}}
-{{#each sprites}}
-${{../spritesheet_info.strings.name}}-sprite-{{strings.name}}: ({{px.x}}, {{px.y}}, {{px.offset_x}}, {{px.offset_y}}, {{px.width}}, {{px.height}}, {{px.total_width}}, {{px.total_height}}, '{{{escaped_image}}}', '{{name}}');
-{{/each}}
-
-${{spritesheet_info.strings.name}}-sprites: (
-{{#each sprites}}
-	{{strings.name}}: ${{../spritesheet_info.strings.name}}-sprite-{{strings.name}},
-{{/each}}
-);
-{{/block}}
-
-{{#block "sprite-functions"}}
-{{#if options.functions}}
-@mixin {{spritesheet_info.strings.name}}-sprite-width($sprite) {
-  width: nth($sprite, 5);
-}
-
-@mixin {{spritesheet_info.strings.name}}-sprite-height($sprite) {
-  height: nth($sprite, 6);
-}
-
-@mixin {{spritesheet_info.strings.name}}-sprite-position($sprite) {
-  $sprite-offset-x: nth($sprite, 3);
-  $sprite-offset-y: nth($sprite, 4);
-  background-position: $sprite-offset-x $sprite-offset-y;
-}
-
-@mixin {{spritesheet_info.strings.name}}-sprite-size($sprite) {
-  background-size: nth($sprite, 7) nth($sprite, 8);
-}
-
-@mixin {{spritesheet_info.strings.name}}-sprite-image($sprite) {
-  $sprite-image: nth($sprite, 9);
-  background-image: url(#{$sprite-image});
-}
-
-@mixin {{spritesheet_info.strings.name}}-sprite($name) {
-  @include {{spritesheet_info.strings.name}}-sprite-image(map-get(${{spritesheet_info.strings.name}}-sprites, #{$name}));
-  @include {{spritesheet_info.strings.name}}-sprite-position(map-get(${{spritesheet_info.strings.name}}-sprites, #{$name}));
-  @include {{spritesheet_info.strings.name}}-sprite-size(map-get(${{spritesheet_info.strings.name}}-sprites, #{$name}));
-  @include {{spritesheet_info.strings.name}}-sprite-width(map-get(${{spritesheet_info.strings.name}}-sprites, #{$name}));
-  @include {{spritesheet_info.strings.name}}-sprite-height(map-get(${{spritesheet_info.strings.name}}-sprites, #{$name}));
-  background-repeat: no-repeat;
-}
-{{/if}}
-{{/block}}
-
-{{#block "spritesheet-functions"}}
-{{#if options.functions}}
-@mixin all-{{spritesheet_info.strings.name}}-sprites() {
-  @each $key, $val in ${{spritesheet_info.strings.name}}-sprites {
-    $sprite-name: nth($val, 10);
-    .{{spritesheet_info.strings.name}}-#{$sprite-name}-sprites {
-      @include {{spritesheet_info.strings.name}}-sprite($key);
-    }
-  }
-}
-{{/if}}
-{{/block}}

src/App.vue

@@ -1,22 +1,27 @@
 <script setup lang="ts">
 import eruda from 'eruda'
 import VConsole from 'vconsole'
-import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import DisableDevtool from 'disable-devtool'
 import hotkeys from 'hotkeys-js'
 import eventBus from './utils/eventBus'
+import Provider from './ui-provider/index.vue'
 import useSettingsStore from '@/store/modules/settings'
 
+const route = useRoute()
+
 const settingsStore = useSettingsStore()
 const { auth } = useAuth()
 
-const buttonConfig = ref({
-  autoInsertSpace: true,
+const isAuth = computed(() => {
+  return route.matched.every((item) => {
+    return auth(item.meta.auth ?? '')
+  })
 })
 
 // 侧边栏主导航当前实际宽度
 const mainSidebarActualWidth = computed(() => {
-  let actualWidth = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--g-main-sidebar-width'))
-  if (['head', 'single'].includes(settingsStore.settings.menu.menuMode)) {
+  let actualWidth = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--g-main-sidebar-width'))
+  if (settingsStore.settings.menu.mode === 'single' || (settingsStore.settings.menu.mode === 'head' && settingsStore.mode !== 'mobile')) {
     actualWidth = 0
   }
   return `${actualWidth}px`
@@ -24,13 +29,14 @@ const mainSidebarActualWidth = computed(() => {
 
 // 侧边栏次导航当前实际宽度
 const subSidebarActualWidth = computed(() => {
-  let actualWidth = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--g-sub-sidebar-width'))
-  if (settingsStore.settings.menu.subMenuCollapse) {
-    actualWidth = 64
+  let actualWidth = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--g-sub-sidebar-width'))
+  if (settingsStore.settings.menu.subMenuCollapse && settingsStore.mode !== 'mobile') {
+    actualWidth = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--g-sub-sidebar-collapse-width'))
   }
   return `${actualWidth}px`
 })
 
+// 设置网页 title
 watch([
   () => settingsStore.settings.app.enableDynamicTitle,
   () => settingsStore.title,
@@ -44,13 +50,14 @@ watch([
   }
 }, {
   immediate: true,
+  deep: true,
 })
 
 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')
   })
@@ -58,20 +65,21 @@ onMounted(() => {
 
 import.meta.env.VITE_APP_DEBUG_TOOL === 'eruda' && eruda.init()
 import.meta.env.VITE_APP_DEBUG_TOOL === 'vconsole' && new VConsole()
+import.meta.env.VITE_APP_DISABLE_DEVTOOL === 'true' && DisableDevtool()
 </script>
 
 <template>
-  <el-config-provider :locale="zhCn" :size="settingsStore.settings.app.elementSize" :button="buttonConfig">
+  <Provider>
     <RouterView
-      v-slot="{ Component, route }"
+      v-slot="{ Component }"
       :style="{
         '--g-main-sidebar-actual-width': mainSidebarActualWidth,
         '--g-sub-sidebar-actual-width': subSidebarActualWidth,
       }"
     >
-      <component :is="Component" v-if="auth(route.meta.auth ?? '')" />
-      <not-allowed v-else />
+      <component :is="Component" v-if="isAuth" />
+      <NotAllowed v-else />
     </RouterView>
-    <system-info />
-  </el-config-provider>
+    <SystemInfo />
+  </Provider>
 </template>

src/api/index.ts

@@ -1,7 +1,7 @@
 import axios from 'axios'
 
 // import qs from 'qs'
-import { ElMessage } from 'element-plus'
+import Message from 'vue-m-message'
 import useUserStore from '@/store/modules/user'
 
 const api = axios.create({
@@ -12,13 +12,13 @@ const api = axios.create({
 
 api.interceptors.request.use(
   (request) => {
+    // 全局拦截请求发送前提交的参数
     const userStore = useUserStore()
-    /**
-     * 全局拦截请求发送前提交的参数
-     * 以下代码为示例，在请求头里带上 token 信息
-     */
-    if (userStore.isLogin && request.headers) {
-      request.headers.Token = userStore.token
+    // 设置请求头
+    if (request.headers) {
+      if (userStore.isLogin) {
+        request.headers.Token = userStore.token
+      }
     }
     // 是否将 POST 请求参数进行字符串化处理
     if (request.method === 'post') {
@@ -40,8 +40,10 @@ api.interceptors.response.use(
      */
     if (response.data.status === 1) {
       if (response.data.error !== '') {
-        // 这里做错误提示，如果使用了 element plus 则可以使用 Message 进行提示
-        // ElMessage.error(options)
+        // 错误提示
+        Message.error(response.data.error, {
+          zIndex: 2000,
+        })
         return Promise.reject(response.data)
       }
     }
@@ -61,9 +63,8 @@ api.interceptors.response.use(
     else if (message.includes('Request failed with status code')) {
       message = `接口${message.substr(message.length - 3)}异常`
     }
-    ElMessage({
-      message,
-      type: 'error',
+    Message.error(message, {
+      zIndex: 2000,
     })
     return Promise.reject(error)
   },

src/assets/icons/fullscreen-exit.svg

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

src/assets/icons/fullscreen.svg

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

src/assets/icons/search-down.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path d="M512.213 958.99 63.595 510.93l84.025-84.023 300.584 302.222V63.546h127.94V729.13l299.652-302.222 84.01 84.024-447.593 448.058z"/></svg>

src/assets/icons/search-enter.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path d="M916.21 242.526v215.58H204.8l194.021-194.022-75.453-75.452L0 512l323.368 323.368 75.453-75.452L204.8 565.895H1024V242.526z"/></svg>

src/assets/icons/search-up.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path d="m959.804 511.604-84.009 84.024-299.652-302.222V958.99h-127.94V293.406L147.62 595.63l-84.025-84.024L512.213 63.546l447.591 448.058z"/></svg>

src/assets/icons/sidebar-breadcrumb.svg

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

src/assets/icons/sidebar-default.svg

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

src/assets/icons/sidebar-menu.svg

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

src/assets/styles/element-plus/dark.scss

@@ -1,9 +0,0 @@
-// 暗黑模式
-@forward "element-plus/theme-chalk/src/dark/var.scss" with (
-  $bg-color: (
-    "page": #0a0a0a,
-    "": #141414,
-    "overlay": #1d1e1f,
-  )
-);
-@use "element-plus/theme-chalk/src/dark/css-vars.scss" as *;

src/assets/styles/element-plus/index.scss

@@ -1,9 +0,0 @@
-// @forward "element-plus/theme-chalk/src/common/var.scss" with (
-//   $colors: (
-//     "primary": (
-//       "base": green
-//     )
-//   )
-// );
-@use "element-plus/theme-chalk/src/index.scss" as *;
-@use "./dark.scss";

src/assets/styles/globals.scss

@@ -1,21 +1,51 @@
-@use "./themes.scss";
-@use "./element-plus/index.scss";
-
-// 全局变量
+// 页面布局 CSS 变量
 :root {
-  // 头部宽度（默认自适应宽度，可固定宽度，固定宽度后为居中显示）
-  --g-header-width: 100%;
   // 头部高度
-  --g-header-height: 70px;
+  --g-header-height: 60px;
   // 侧边栏宽度
-  --g-main-sidebar-width: 70px;
+  --g-main-sidebar-width: 80px;
   --g-sub-sidebar-width: 220px;
-  // 侧边栏Logo高度
+  --g-sub-sidebar-collapse-width: 64px;
+  // 侧边栏 Logo 区域高度
   --g-sidebar-logo-height: 50px;
-  // 顶栏高度
-  --g-topbar-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;
@@ -42,9 +72,10 @@ body {
 }
 
 body {
-  margin: 0;
   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 {
@@ -55,11 +86,12 @@ body {
 * {
   box-sizing: inherit;
 }
+
 // 右侧内容区针对fixed元素，有横向铺满的需求，可在fixed元素上设置 [data-fixed-calc-width]
 [data-fixed-calc-width] {
   position: fixed;
-  left: 50%;
   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));
 }
@@ -74,15 +106,37 @@ body {
 textarea {
   font-family: inherit;
 }
-// 列表页全局样式
-.el-table.list-table {
-  margin: 20px 0;
 
-  .el-button + .el-dropdown {
-    margin-left: 10px;
-  }
+/* Overrides Floating Vue */
+.v-popper--theme-dropdown,
+.v-popper--theme-tooltip {
+  --at-apply: inline-flex;
 }
 
-.el-loading-mask {
-  z-index: 900 !important;
+.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;
 }

src/assets/styles/nprogress.scss

@@ -3,48 +3,48 @@
 
   .bar {
     position: fixed;
-    z-index: 1031;
     top: 0;
     left: 0;
+    z-index: 2000;
     width: 100%;
     height: 2px;
-    background: var(--g-nprogress-color);
+    background: rgb(var(--ui-primary));
   }
 
   .peg {
-    display: block;
     position: absolute;
     right: 0;
+    display: block;
     width: 100px;
     height: 100%;
+    box-shadow: 0 0 10px rgb(var(--ui-primary)), 0 0 5px rgb(var(--ui-primary));
     opacity: 1;
     transform: rotate(3deg) translate(0, -4px);
-    box-shadow: 0 0 10px var(--g-nprogress-color), 0 0 5px var(--g-nprogress-color);
   }
 
   .spinner {
-    display: block;
     position: fixed;
-    z-index: 1031;
     top: 11px;
     right: 14px;
+    z-index: 2000;
+    display: block;
 
     .spinner-icon {
+      box-sizing: border-box;
       width: 18px;
       height: 18px;
-      box-sizing: border-box;
       border: solid 2px transparent;
+      border-top-color: rgb(var(--ui-primary));
+      border-left-color: rgb(var(--ui-primary));
       border-radius: 50%;
       animation: nprogress-spinner 400ms linear infinite;
-      border-top-color: var(--g-nprogress-color);
-      border-left-color: var(--g-nprogress-color);
     }
   }
 }
 
 .nprogress-custom-parent {
-  overflow: hidden;
   position: relative;
+  overflow: hidden;
 
   #nprogress .spinner,
   #nprogress .bar {

src/assets/styles/resources/utils.scss

@@ -28,8 +28,8 @@
   }
 
   @if $type == xy {
-    left: 50%;
     top: 50%;
+    left: 50%;
     transform: translateX(-50%) translateY(-50%);
   }
 }
@@ -46,8 +46,8 @@
 
   &::before,
   &::after {
-    content: "";
     display: block;
     clear: both;
+    content: "";
   }
 }

src/assets/styles/themes.scss

@@ -1,124 +0,0 @@
-:root {
-  --g-box-shadow-color: rgb(0 0 0 / 12%);
-
-  /* ----- 应用 ----- */
-  // 应用背景色
-  --g-app-bg: var(--el-bg-color);
-  // 主区域背景色
-  --g-main-bg: var(--el-bg-color-page);
-
-  /* ----- 顶部 ----- */
-  // 背景色
-  --g-header-bg: #222b45;
-  // 文字颜色
-  --g-header-color: #fff;
-  // 导航文字颜色
-  --g-header-menu-color: #fff;
-  // 导航鼠标悬浮文字颜色
-  --g-header-menu-hover-color: #fff;
-  // 导航鼠标悬浮背景色
-  --g-header-menu-hover-bg: #334067;
-  // 导航选中文字颜色
-  --g-header-menu-active-color: #fff;
-  // 导航选中背景色
-  --g-header-menu-active-bg: #334067;
-
-  /* ----- 主导航 ----- */
-  // 背景色
-  --g-main-sidebar-bg: #222b45;
-  // 菜单文字颜色
-  --g-main-sidebar-menu-color: #eee;
-  // 菜单鼠标悬浮文字颜色
-  --g-main-sidebar-menu-hover-color: #fff;
-  // 菜单鼠标悬浮背景色
-  --g-main-sidebar-menu-hover-bg: #334067;
-  // 菜单选中文字颜色
-  --g-main-sidebar-menu-active-color: #fff;
-  // 菜单选中背景色
-  --g-main-sidebar-menu-active-bg: #334067;
-
-  /* ----- 次导航 ----- */
-  // 背景色
-  --g-sub-sidebar-bg: #fff;
-  // 菜单背景色
-  --g-sub-sidebar-menu-bg: #e8e8e8;
-  // 菜单文字颜色
-  --g-sub-sidebar-menu-color: var(--el-text-color-primary);
-  // 菜单鼠标悬浮文字颜色
-  --g-sub-sidebar-menu-hover-color: var(--el-text-color-primary);
-  // 菜单鼠标悬浮背景色
-  --g-sub-sidebar-menu-hover-bg: #e1e1e1;
-  // 菜单选中文字颜色
-  --g-sub-sidebar-menu-active-color: #fff;
-  // 菜单选中背景色
-  --g-sub-sidebar-menu-active-bg: var(--el-color-primary);
-
-  /* ----- 顶栏 ----- */
-  --g-toolbar-bg: var(--el-bg-color);
-
-  /* ----- 进度条 ----- */
-  --g-nprogress-color: var(--el-color-primary);
-
-  /* ----- 暗黑模式 ----- */
-  &.dark {
-    --g-box-shadow-color: rgb(0 0 0 / 72%);
-
-    /* ----- 应用 ----- */
-    // 应用背景色
-    --g-app-bg: var(--el-bg-color);
-    // 主区域背景色
-    --g-main-bg: var(--el-bg-color-page);
-
-    /* ----- 顶部 ----- */
-    // 背景色
-    --g-header-bg: var(--el-bg-color);
-    // 文字颜色
-    --g-header-color: #fff;
-    // 导航文字颜色
-    --g-header-menu-color: #ccc;
-    // 导航鼠标悬浮文字颜色
-    --g-header-menu-hover-color: #fff;
-    // 导航鼠标悬浮背景色
-    --g-header-menu-hover-bg: var(--el-color-primary-light-5);
-    // 导航选中文字颜色
-    --g-header-menu-active-color: #fff;
-    // 导航选中背景色
-    --g-header-menu-active-bg: var(--el-color-primary-light-3);
-
-    /* ----- 主导航 ----- */
-    // 背景色
-    --g-main-sidebar-bg: var(--el-bg-color);
-    // 菜单文字颜色
-    --g-main-sidebar-menu-color: #ccc;
-    // 菜单鼠标悬浮文字颜色
-    --g-main-sidebar-menu-hover-color: #fff;
-    // 菜单鼠标悬浮背景色
-    --g-main-sidebar-menu-hover-bg: var(--el-color-primary-light-5);
-    // 菜单选中文字颜色
-    --g-main-sidebar-menu-active-color: #fff;
-    // 菜单选中背景色
-    --g-main-sidebar-menu-active-bg: var(--el-color-primary-light-3);
-
-    /* ----- 次导航 ----- */
-    // 背景色
-    --g-sub-sidebar-bg: var(--el-bg-color-page);
-    // 菜单背景色
-    --g-sub-sidebar-menu-bg: var(--el-bg-color);
-    // 菜单文字颜色
-    --g-sub-sidebar-menu-color: var(--el-text-color-secondary);
-    // 菜单鼠标悬浮文字颜色
-    --g-sub-sidebar-menu-hover-color: var(--el-text-color-primary);
-    // 菜单鼠标悬浮背景色
-    --g-sub-sidebar-menu-hover-bg: var(--el-color-primary-light-5);
-    // 菜单选中文字颜色
-    --g-sub-sidebar-menu-active-color: var(--el-text-color-primary);
-    // 菜单选中背景色
-    --g-sub-sidebar-menu-active-bg: var(--el-color-primary-light-3);
-
-    /* ----- 顶栏 ----- */
-    --g-toolbar-bg: var(--el-bg-color);
-
-    /* ----- 进度条 ----- */
-    --g-nprogress-color: var(--el-color-primary);
-  }
-}

src/components/Auth/index.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-const props = defineProps<{
-  value: string | string[]
-}>()
-
 defineOptions({
   name: 'Auth',
 })
 
+const props = defineProps<{
+  value: string | string[]
+}>()
+
 function check() {
   return useAuth().auth(props.value)
 }

src/components/AuthAll/index.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-const props = defineProps<{
-  value: string[]
-}>()
-
 defineOptions({
   name: 'AuthAll',
 })
 
+const props = defineProps<{
+  value: string[]
+}>()
+
 function check() {
   return useAuth().authAll(props.value)
 }

src/components/FileUpload/index.vue

@@ -2,6 +2,10 @@
 import type { UploadProps, UploadUserFile } from 'element-plus'
 import { ElMessage } from 'element-plus'
 
+defineOptions({
+  name: 'FileUpload',
+})
+
 const props = withDefaults(
   defineProps<{
     action: UploadProps['action']
@@ -25,17 +29,13 @@ const props = withDefaults(
 )
 
 const emits = defineEmits<{
-  'onSuccess': [
+  onSuccess: [
     res: any,
     file: UploadUserFile,
     fileList: UploadUserFile[],
   ]
 }>()
 
-defineOptions({
-  name: 'FileUpload',
-})
-
 const beforeUpload: UploadProps['beforeUpload'] = (file) => {
   const fileName = file.name.split('.')
   const fileExt = fileName.at(-1) ?? ''
@@ -60,7 +60,7 @@ const onSuccess: UploadProps['onSuccess'] = (res, file, fileList) => {
 </script>
 
 <template>
-  <el-upload
+  <ElUpload
     :headers="headers"
     :action="action"
     :data="data"
@@ -68,14 +68,12 @@ const onSuccess: UploadProps['onSuccess'] = (res, file, fileList) => {
     :before-upload="beforeUpload"
     :on-exceed="onExceed"
     :on-success="onSuccess"
-    :file-list="files as UploadUserFile[]"
+    :file-list="files"
     :limit="max"
     drag
   >
     <div class="slot">
-      <el-icon class="el-icon--upload">
-        <svg-icon name="ep:upload-filled" />
-      </el-icon>
+      <SvgIcon name="i-ep:upload-filled" class="el-icon--upload" />
       <div class="el-upload__text">
         将文件拖到此处，或<em>点击上传</em>
       </div>
@@ -83,11 +81,11 @@ const onSuccess: UploadProps['onSuccess'] = (res, file, fileList) => {
     <template #tip>
       <div v-if="!notip" class="el-upload__tip">
         <div style="display: inline-block;">
-          <el-alert :title="`上传文件支持 ${ext.join(' / ')} 格式，单个文件大小不超过 ${size}MB，且文件数量不超过 ${max} 个`" type="info" show-icon :closable="false" />
+          <ElAlert :title="`上传文件支持 ${ext.join(' / ')} 格式，单个文件大小不超过 ${size}MB，且文件数量不超过 ${max} 个`" type="info" show-icon :closable="false" />
         </div>
       </div>
     </template>
-  </el-upload>
+  </ElUpload>
 </template>
 
 <style lang="scss" scoped>

src/components/FixedActionBar/index.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-const isBottom = ref(false)
-
 defineOptions({
   name: 'FixedActionBar',
 })
 
+const isBottom = ref(false)
+
 onMounted(() => {
   onScroll()
   window.addEventListener('scroll', onScroll)
@@ -27,27 +27,19 @@ function onScroll() {
 </script>
 
 <template>
-  <div class="actionbar" :class="{ shadow: !isBottom }" data-fixed-calc-width>
+  <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>
-.actionbar {
-  z-index: 4;
-  bottom: 0;
-  padding: 20px;
-  text-align: center;
-  background-color: var(--g-app-bg);
+.fixed-action-bar {
   box-shadow: 0 0 1px 0 var(--g-box-shadow-color);
-  transition: all 0.3s, var(--el-transition-box-shadow);
 
   &.shadow {
     box-shadow: 0 -10px 10px -10px var(--g-box-shadow-color);
   }
 }
-
-:deep(.el-form-item) {
-  margin-bottom: 0;
-}
 </style>

src/components/ImagePreview/index.vue

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+defineOptions({
+  name: 'ImagePreview',
+})
+
 const props = withDefaults(
   defineProps<{
     src: string
@@ -11,10 +15,6 @@ const props = withDefaults(
   },
 )
 
-defineOptions({
-  name: 'ImagePreview',
-})
-
 const realWidth = computed(() => {
   return typeof props.width === 'string' ? props.width : `${props.width}px`
 })
@@ -25,27 +25,25 @@ const realHeight = computed(() => {
 </script>
 
 <template>
-  <el-image :src="src" fit="cover" :style="`width:${realWidth};height:${realHeight};`" :preview-src-list="[src]" preview-teleported>
+  <ElImage :src="src" fit="cover" :style="`width:${realWidth};height:${realHeight};`" :preview-src-list="[src]" preview-teleported>
     <template #error>
       <div class="image-slot">
-        <el-icon>
-          <svg-icon name="image-load-fail" />
-        </el-icon>
+        <SvgIcon name="image-load-fail" />
       </div>
     </template>
-  </el-image>
+  </ElImage>
 </template>
 
 <style lang="scss" scoped>
 .el-image {
-  border-radius: 5px;
   background-color: var(--el-fill-color);
+  border-radius: 5px;
   box-shadow: var(--el-box-shadow-light);
   transition: background-color 0.3s, var(--el-transition-box-shadow);
 
   :deep(.el-image__inner) {
-    transition: all 0.3s;
     cursor: pointer;
+    transition: all 0.3s;
 
     &:hover {
       transform: scale(1.2);
@@ -54,12 +52,12 @@ const realHeight = computed(() => {
 
   :deep(.image-slot) {
     display: flex;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
     width: 100%;
     height: 100%;
-    color: #909399;
     font-size: 30px;
+    color: #909399;
   }
 }
 </style>

src/components/ImageUpload/index.vue

@@ -2,13 +2,16 @@
 import type { UploadProps } from 'element-plus'
 import { ElMessage } from 'element-plus'
 
+defineOptions({
+  name: 'ImageUpload',
+})
+
 const props = withDefaults(
   defineProps<{
     action: UploadProps['action']
     headers?: UploadProps['headers']
     data?: UploadProps['data']
     name?: UploadProps['name']
-    url?: string
     size?: number
     width?: number
     height?: number
@@ -18,7 +21,6 @@ const props = withDefaults(
   }>(),
   {
     name: 'file',
-    url: '',
     size: 2,
     width: 150,
     height: 150,
@@ -29,16 +31,13 @@ const props = withDefaults(
 )
 
 const emits = defineEmits<{
-  'update:url': [
-    url: string,
-  ]
-  'onSuccess': [
+  onSuccess: [
     res: any,
   ]
 }>()
 
-defineOptions({
-  name: 'ImageUpload',
+const url = defineModel<string>({
+  default: '',
 })
 
 const uploadData = ref({
@@ -59,7 +58,7 @@ function previewClose() {
 }
 // 移除
 function remove() {
-  emits('update:url', '')
+  url.value = ''
 }
 const beforeUpload: UploadProps['beforeUpload'] = (file) => {
   const fileName = file.name.split('.')
@@ -89,7 +88,7 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
 
 <template>
   <div class="upload-container">
-    <el-upload
+    <ElUpload
       :show-file-list="false"
       :headers="headers"
       :action="action"
@@ -101,43 +100,37 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
       drag
       class="image-upload"
     >
-      <el-image v-if="url === ''" :src="url === '' ? placeholder : url" :style="`width:${width}px;height:${height}px;`" fit="fill">
+      <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;`">
-            <el-icon>
-              <svg-icon name="ep:plus" />
-            </el-icon>
+            <SvgIcon name="i-ep:plus" class="icon" />
           </div>
         </template>
-      </el-image>
+      </ElImage>
       <div v-else class="image">
-        <el-image :src="url" :style="`width:${width}px;height:${height}px;`" fit="fill" />
+        <ElImage :src="url" :style="`width:${width}px;height:${height}px;`" fit="fill" />
         <div class="mask">
           <div class="actions">
             <span title="预览" @click.stop="preview">
-              <el-icon>
-                <svg-icon name="ep:zoom-in" />
-              </el-icon>
+              <SvgIcon name="i-ep:zoom-in" class="icon" />
             </span>
             <span title="移除" @click.stop="remove">
-              <el-icon>
-                <svg-icon name="ep:delete" />
-              </el-icon>
+              <SvgIcon name="i-ep:delete" class="icon" />
             </span>
           </div>
         </div>
       </div>
       <div v-show="url === '' && uploadData.progress.percent" class="progress" :style="`width:${width}px;height:${height}px;`">
-        <el-image :src="uploadData.progress.preview" :style="`width:${width}px;height:${height}px;`" fit="fill" />
-        <el-progress type="circle" :width="Math.min(width, height) * 0.8" :percentage="uploadData.progress.percent" />
+        <ElImage :src="uploadData.progress.preview" :style="`width:${width}px;height:${height}px;`" fit="fill" />
+        <ElProgress type="circle" :width="Math.min(width, height) * 0.8" :percentage="uploadData.progress.percent" />
       </div>
-    </el-upload>
+    </ElUpload>
     <div v-if="!notip" class="el-upload__tip">
       <div style="display: inline-block;">
-        <el-alert :title="`上传图片支持 ${ext.join(' / ')} 格式，且图片大小不超过 ${size}MB，建议图片尺寸为 ${width}*${height}`" type="info" show-icon :closable="false" />
+        <ElAlert :title="`上传图片支持 ${ext.join(' / ')} 格式，且图片大小不超过 ${size}MB，建议图片尺寸为 ${width}*${height}`" type="info" show-icon :closable="false" />
       </div>
     </div>
-    <el-image-viewer v-if="uploadData.imageViewerVisible" :url-list="[url]" teleported @close="previewClose" />
+    <ElImageViewer v-if="uploadData.imageViewerVisible" :url-list="[url]" teleported @close="previewClose" />
   </div>
 </template>
 
@@ -152,40 +145,40 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
 
 .image {
   position: relative;
-  border-radius: 6px;
   overflow: hidden;
+  border-radius: 6px;
 
   .mask {
-    opacity: 0;
     position: absolute;
     top: 0;
     width: 100%;
     height: 100%;
     background-color: var(--el-overlay-color-lighter);
+    opacity: 0;
     transition: opacity 0.3s;
 
     .actions {
-      width: 100px;
-      height: 100px;
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       justify-content: center;
+      width: 100px;
+      height: 100px;
 
       @include position-center(xy);
 
       span {
         width: 50%;
+        color: var(--el-color-white);
         text-align: center;
         cursor: pointer;
-        color: var(--el-color-white);
         transition: color 0.1s, transform 0.1s;
 
         &:hover {
           transform: scale(1.5);
         }
 
-        .el-icon {
+        .icon {
           font-size: 24px;
         }
       }
@@ -213,14 +206,14 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
 
     .image-slot {
       display: flex;
-      justify-content: center;
       align-items: center;
+      justify-content: center;
       width: 100%;
       height: 100%;
       color: var(--el-text-color-placeholder);
       background-color: transparent;
 
-      i {
+      .icon {
         font-size: 30px;
       }
     }
@@ -230,12 +223,12 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
       top: 0;
 
       &::after {
-        content: "";
         position: absolute;
+        top: 0;
+        left: 0;
         width: 100%;
         height: 100%;
-        left: 0;
-        top: 0;
+        content: "";
         background-color: var(--el-overlay-color-lighter);
       }
 

src/components/ImagesUpload/index.vue

@@ -2,13 +2,16 @@
 import type { UploadProps } from 'element-plus'
 import { ElMessage } from 'element-plus'
 
+defineOptions({
+  name: 'ImagesUpload',
+})
+
 const props = withDefaults(
   defineProps<{
     action: UploadProps['action']
     headers?: UploadProps['headers']
     data?: UploadProps['data']
     name?: UploadProps['name']
-    url?: string[]
     size?: number
     max?: number
     width?: number
@@ -19,7 +22,6 @@ const props = withDefaults(
   }>(),
   {
     name: 'file',
-    url: () => [],
     size: 2,
     max: 3,
     width: 150,
@@ -31,16 +33,13 @@ const props = withDefaults(
 )
 
 const emits = defineEmits<{
-  'update:url': [
-    value: string[],
-  ]
-  'onSuccess': [
+  onSuccess: [
     res: any,
   ]
 }>()
 
-defineOptions({
-  name: 'ImagesUpload',
+const url = defineModel<string[]>({
+  default: [],
 })
 
 const uploadData = ref({
@@ -63,20 +62,16 @@ function previewClose() {
 }
 // 移除
 function remove(index: number) {
-  const url = props.url
-  url.splice(index, 1)
-  emits('update:url', url)
+  url.value.splice(index, 1)
 }
 // 移动
 function move(index: number, type: 'left' | 'right') {
-  const url = props.url
   if (type === 'left' && index !== 0) {
-    url[index] = url.splice(index - 1, 1, url[index])[0]
+    url.value[index] = url.value.splice(index - 1, 1, url.value[index])[0]
   }
-  if (type === 'right' && index !== url.length - 1) {
-    url[index] = url.splice(index + 1, 1, url[index])[0]
+  if (type === 'right' && index !== url.value.length - 1) {
+    url.value[index] = url.value.splice(index + 1, 1, url.value[index])[0]
   }
-  emits('update:url', url)
 }
 
 const beforeUpload: UploadProps['beforeUpload'] = (file) => {
@@ -108,33 +103,25 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
 <template>
   <div class="upload-container">
     <div v-for="(item, index) in (url as string[])" :key="index" class="images">
-      <el-image v-if="index < max" :src="item" :style="`width:${width}px;height:${height}px;`" fit="cover" />
+      <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)">
-            <el-icon>
-              <svg-icon name="ep:zoom-in" />
-            </el-icon>
+            <SvgIcon name="i-ep:zoom-in" class="icon" />
           </span>
           <span title="移除" @click="remove(index)">
-            <el-icon>
-              <svg-icon name="ep:delete" />
-            </el-icon>
+            <SvgIcon name="i-ep:delete" class="icon" />
           </span>
           <span v-show="url.length > 1" title="左移" :class="{ disabled: index === 0 }" @click="move(index, 'left')">
-            <el-icon>
-              <svg-icon name="ep:back" />
-            </el-icon>
+            <SvgIcon name="i-ep:back" class="icon" />
           </span>
           <span v-show="url.length > 1" title="右移" :class="{ disabled: index === url.length - 1 }" @click="move(index, 'right')">
-            <el-icon>
-              <svg-icon name="ep:right" />
-            </el-icon>
+            <SvgIcon name="i-ep:right" class="icon" />
           </span>
         </div>
       </div>
     </div>
-    <el-upload
+    <ElUpload
       v-show="url.length < max"
       :show-file-list="false"
       :headers="headers"
@@ -148,21 +135,19 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
       class="images-upload"
     >
       <div class="image-slot" :style="`width:${width}px;height:${height}px;`">
-        <el-icon>
-          <svg-icon name="ep:plus" />
-        </el-icon>
+        <SvgIcon name="i-ep:plus" class="icon" />
       </div>
       <div v-show="uploadData.progress.percent" class="progress" :style="`width:${width}px;height:${height}px;`">
-        <el-image :src="uploadData.progress.preview" :style="`width:${width}px;height:${height}px;`" fit="fill" />
-        <el-progress type="circle" :width="Math.min(width, height) * 0.8" :percentage="uploadData.progress.percent" />
+        <ElImage :src="uploadData.progress.preview" :style="`width:${width}px;height:${height}px;`" fit="fill" />
+        <ElProgress type="circle" :width="Math.min(width, height) * 0.8" :percentage="uploadData.progress.percent" />
       </div>
-    </el-upload>
+    </ElUpload>
     <div v-if="!notip" class="el-upload__tip">
       <div style="display: inline-block;">
-        <el-alert :title="`上传图片支持 ${ext.join(' / ')} 格式，单张图片大小不超过 ${size}MB，建议图片尺寸为 ${width}*${height}，且图片数量不超过 ${max} 张`" type="info" show-icon :closable="false" />
+        <ElAlert :title="`上传图片支持 ${ext.join(' / ')} 格式，单张图片大小不超过 ${size}MB，建议图片尺寸为 ${width}*${height}，且图片数量不超过 ${max} 张`" type="info" show-icon :closable="false" />
       </div>
     </div>
-    <el-image-viewer v-if="uploadData.imageViewerVisible" :url-list="url as string[]" :initial-index="uploadData.dialogImageIndex" teleported @close="previewClose" />
+    <ElImageViewer v-if="uploadData.imageViewerVisible" :url-list="url as string[]" :initial-index="uploadData.dialogImageIndex" teleported @close="previewClose" />
   </div>
 </template>
 
@@ -179,34 +164,34 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
   position: relative;
   display: inline-block;
   margin-right: 10px;
+  overflow: hidden;
   border: 1px dashed var(--el-border-color);
   border-radius: 6px;
-  overflow: hidden;
 
   .mask {
-    opacity: 0;
     position: absolute;
     top: 0;
     width: 100%;
     height: 100%;
     background-color: var(--el-overlay-color-lighter);
+    opacity: 0;
     transition: opacity 0.3s;
 
     .actions {
-      width: 100px;
-      height: 100px;
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       justify-content: center;
+      width: 100px;
+      height: 100px;
 
       @include position-center(xy);
 
       span {
         width: 50%;
+        color: var(--el-color-white);
         text-align: center;
         cursor: pointer;
-        color: var(--el-color-white);
         transition: color 0.1s, transform 0.1s;
 
         &.disabled {
@@ -218,7 +203,7 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
           transform: scale(1.5);
         }
 
-        .el-icon {
+        .icon {
           font-size: 24px;
         }
       }
@@ -246,14 +231,14 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
 
     .image-slot {
       display: flex;
-      justify-content: center;
       align-items: center;
+      justify-content: center;
       width: 100%;
       height: 100%;
       color: var(--el-text-color-placeholder);
       background-color: transparent;
 
-      i {
+      .icon {
         font-size: 30px;
       }
     }
@@ -263,12 +248,12 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
       top: 0;
 
       &::after {
-        content: "";
         position: absolute;
+        top: 0;
+        left: 0;
         width: 100%;
         height: 100%;
-        left: 0;
-        top: 0;
+        content: "";
         background-color: var(--el-overlay-color-lighter);
       }
 

src/components/NotAllowed/index.vue

@@ -1,12 +1,16 @@
 <script setup lang="ts">
+import useSettingsStore from '@/store/modules/settings'
+
 defineOptions({
   name: 'NotAllowed',
 })
 
 const router = useRouter()
 
+const settingsStore = useSettingsStore()
+
 const data = ref({
-  inter: NaN,
+  inter: Number.NaN,
   countdown: 5,
 })
 
@@ -25,51 +29,25 @@ onMounted(() => {
 })
 
 function goBack() {
-  router.push('/')
+  router.push(settingsStore.settings.home.fullPath)
 }
 </script>
 
 <template>
-  <div class="notallowed">
-    <svg-icon name="403" class="icon" />
-    <div class="content">
-      <h1>403</h1>
-      <div class="desc">
+  <div class="absolute left-[50%] top-[50%] flex flex-col items-center justify-between lg-flex-row -translate-x-50% -translate-y-50% lg-gap-12">
+    <SvgIcon name="403" class="text-[300px] lg-text-[400px]" />
+    <div class="flex flex-col gap-4">
+      <h1 class="m-0 text-6xl font-sans">
+        403
+      </h1>
+      <div class="desc mx-0 text-xl text-stone-5">
         抱歉，你无权访问该页面
       </div>
-      <el-button type="primary" @click="goBack">
-        {{ data.countdown }} 秒后，返回首页
-      </el-button>
+      <div>
+        <HButton @click="goBack">
+          {{ data.countdown }} 秒后，返回首页
+        </HButton>
+      </div>
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.notallowed {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 700px;
-
-  @include position-center(xy);
-
-  .icon {
-    width: 400px;
-    height: 400px;
-  }
-
-  .content {
-    h1 {
-      margin: 0;
-      font-size: 72px;
-      color: var(--el-text-color-primary);
-    }
-
-    .desc {
-      margin: 20px 0 30px;
-      font-size: 20px;
-      color: var(--el-text-color-secondary);
-    }
-  }
-}
-</style>

src/components/PageHeader/index.vue

@@ -1,75 +1,32 @@
 <script setup lang="ts">
-withDefaults(
-  defineProps<{
-    title: string
-    content?: string
-  }>(),
-  {
-    content: '',
-  },
-)
-
 defineOptions({
   name: 'PageHeader',
 })
 
+defineProps<{
+  title?: string
+  content?: string
+}>()
+
 const slots = useSlots()
 </script>
 
 <template>
-  <div class="page-header">
-    <div class="main">
-      <div class="title">
-        {{ title }}
+  <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="content">
+      <div class="mt-2 text-sm text-stone-5 empty-hidden">
         <slot name="content">
           {{ content }}
         </slot>
       </div>
     </div>
-    <div v-if="slots.default" class="sub">
+    <div v-if="slots.default" class="ml-a flex-none">
       <slot />
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.page-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  gap: 20px;
-  margin-bottom: 20px;
-  padding: 16px 20px;
-  background-color: var(--g-app-bg);
-  transition: background-color 0.3s;
-
-  .main {
-    flex: 1 1 70%;
-
-    .title {
-      font-size: 22px;
-      color: var(--el-text-color-primary);
-      transition: var(--el-transition-color);
-    }
-
-    .content {
-      margin-top: 10px;
-      font-size: 14px;
-      color: var(--el-text-color-secondary);
-      transition: var(--el-transition-color);
-
-      &:empty {
-        display: none;
-      }
-    }
-  }
-
-  .sub {
-    flex: none;
-    margin-left: auto;
-  }
-}
-</style>

src/components/PageMain/index.vue

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+defineOptions({
+  name: 'PageMain',
+})
+
 const props = withDefaults(
   defineProps<{
     title?: string
@@ -12,80 +16,32 @@ const props = withDefaults(
   },
 )
 
-defineOptions({
-  name: 'PageMain',
-})
-
 const titleSlot = !!useSlots().title
 
-const collaspeData = ref(props.collaspe)
+const isCollaspe = ref(props.collaspe)
 function unCollaspe() {
-  collaspeData.value = false
+  isCollaspe.value = false
 }
 </script>
 
 <template>
   <div
-    class="page-main" :class="{
-      'is-collaspe': collaspeData,
+    class="page-main relative m-4 flex flex-col bg-[var(--g-container-bg)] transition-background-color-300" :class="{
+      'of-hidden': isCollaspe,
     }" :style="{
-      height: collaspeData ? height : '',
+      height: isCollaspe ? height : '',
     }"
   >
-    <div v-if="titleSlot || title" class="title-container">
-      <slot v-if="titleSlot" name="title" />
-      <template v-else>
+    <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 }}
-      </template>
+      </slot>
     </div>
-    <slot />
-    <div v-if="collaspeData" class="collaspe" title="展开" @click="unCollaspe">
-      <el-icon>
-        <svg-icon name="ep:arrow-down" />
-      </el-icon>
+    <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>
-
-<style lang="scss" scoped>
-.page-main {
-  position: relative;
-  margin: 20px;
-  padding: 20px;
-  background-color: var(--g-app-bg);
-  transition: background-color 0.3s;
-
-  &.is-collaspe {
-    overflow: hidden;
-
-    .collaspe {
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      width: 100%;
-      padding: 40px 0 10px;
-      text-align: center;
-      font-size: 24px;
-      color: var(--el-text-color-primary);
-      text-shadow: 0 0 1px var(--el-text-color-primary);
-      background: linear-gradient(to bottom, transparent, var(--g-app-bg));
-      transition: background 0.3s, var(--el-transition-color);
-      cursor: pointer;
-
-      &:hover {
-        color: var(--el-text-color-secondary);
-      }
-    }
-  }
-
-  .title-container {
-    width: calc(100% + 40px);
-    padding: 14px 20px;
-    margin-left: -20px;
-    margin-top: -20px;
-    margin-bottom: 20px;
-    border-bottom: 1px solid var(--el-border-color-lighter);
-    transition: var(--el-transition-border);
-  }
-}
-</style>

src/components/PcasCascader/index.vue

@@ -2,12 +2,12 @@
 // 行政区划数据来源于 https://github.com/modood/Administrative-divisions-of-China
 import pcasRaw from './pcas-code.json'
 
+defineOptions({
+  name: 'PcasCascader',
+})
+
 const props = withDefaults(
   defineProps<{
-    modelValue: string[] | {
-      code: string
-      name: string
-    }[]
     disabled?: boolean
     type?: 'pc' | 'pca' | 'pcas'
     format?: 'code' | 'name' | 'both'
@@ -19,17 +19,11 @@ const props = withDefaults(
   },
 )
 
-const emits = defineEmits<{
-  'update:modelValue': [
-    value: string[] | {
-      code: string
-      name: string
-    }[],
-  ]
-}>()
-
-defineOptions({
-  name: 'PcasCascader',
+const value = defineModel<string[] | {
+  code: string
+  name: string
+}[]>({
+  default: [],
 })
 
 interface pcasItem {
@@ -88,11 +82,11 @@ const pcasData = computed(() => {
 const myValue = computed({
   // 将入参数据转成 code 码
   get: () => {
-    return anyToCode(props.modelValue)
+    return anyToCode(value.value)
   },
   // 将 code 码转成出参数据
-  set: (value) => {
-    emits('update:modelValue', value ? codeToAny(value) : [])
+  set: (val) => {
+    value.value = val ? codeToAny(val) : []
   },
 })
 
@@ -145,5 +139,5 @@ function codeToAny(codes: string[], dictionarie: any[] = pcasData.value): any {
 </script>
 
 <template>
-  <el-cascader v-model="myValue" :options="pcasData as any[]" :props="{ value: 'code', label: 'name' }" :disabled="disabled" clearable filterable />
+  <ElCascader v-model="myValue" :options="pcasData as any[]" :props="{ value: 'code', label: 'name' }" :disabled="disabled" clearable filterable />
 </template>

src/components/SearchBar/index.vue

@@ -1,85 +1,47 @@
 <script setup lang="ts">
-const props = withDefaults(
+defineOptions({
+  name: 'SearchBar',
+})
+
+withDefaults(
   defineProps<{
-    fold?: boolean
     showToggle?: boolean
     background?: boolean
   }>(),
   {
-    fold: true,
     showToggle: true,
     background: false,
   },
 )
 
 const emits = defineEmits<{
-  'update:fold': [
-    value: boolean,
-  ]
-  'toggle': [
+  toggle: [
     value: boolean,
   ]
 }>()
 
-defineOptions({
-  name: 'SearchBar',
-})
-
-const isFold = ref(props.fold)
-
-watch(() => props.fold, (value) => {
-  isFold.value = value
-  emits('update:fold', value)
+const fold = defineModel<boolean>('fold', {
+  default: true,
 })
 
 function toggle() {
-  isFold.value = !isFold.value
-  emits('toggle', isFold.value)
+  fold.value = !fold.value
+  emits('toggle', fold.value)
 }
 </script>
 
 <template>
-  <div class="search-container" :class="{ 'has-bg': background }">
-    <slot :fold="isFold" />
-    <div v-if="showToggle" class="toggle">
-      <el-button text size="small" @click="toggle">
-        <template #icon>
-          <el-icon>
-            <svg-icon :name="isFold ? 'ep:caret-bottom' : 'ep:caret-top' " />
-          </el-icon>
-        </template>
-        {{ isFold ? '展开' : '收起' }}
-      </el-button>
+  <div
+    class="relative" :class="{
+      'py-4': showToggle,
+      'px-4 bg-[var(--g-bg)] transition': background,
+    }"
+  >
+    <slot :fold="fold" :toggle="toggle" />
+    <div v-if="showToggle" class="absolute bottom-0 left-0 w-full translate-y-1/2 text-center">
+      <button class="h-5 inline-flex cursor-pointer select-none items-center border-size-0 rounded bg-[var(--g-bg)] px-2 text-xs font-medium outline-none" @click="toggle">
+        <SvgIcon :name="fold ? 'i-ep:caret-bottom' : 'i-ep:caret-top' " />
+      </button>
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.search-container {
-  position: relative;
-
-  &.has-bg {
-    padding: 20px;
-    background-color: var(--el-fill-color-lighter);
-    transition: background-color 0.3s;
-  }
-
-  :deep(.el-form) {
-    margin-bottom: -10px;
-
-    .el-select {
-      width: 100%;
-    }
-
-    .el-date-editor {
-      width: 100%;
-    }
-  }
-
-  .toggle {
-    position: relative;
-    text-align: center;
-    margin-bottom: -10px;
-  }
-}
-</style>

src/components/SvgIcon/index.vue

@@ -1,48 +1,66 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
 
-const props = withDefaults(
-  defineProps<{
-    name: string
-    flip?: 'horizontal' | 'vertical' | 'both' | ''
-    rotate?: number
-  }>(),
-  {
-    flip: '',
-    rotate: 0,
-  },
-)
-
 defineOptions({
   name: 'SvgIcon',
 })
 
-const transformStyle = computed(() => {
-  const style = []
-  if (props.flip !== '') {
+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':
-        style.push('rotateY(180deg)')
+        transform.push('rotateY(180deg)')
         break
       case 'vertical':
-        style.push('rotateX(180deg)')
+        transform.push('rotateX(180deg)')
         break
       case 'both':
-        style.push('rotateX(180deg)')
-        style.push('rotateY(180deg)')
+        transform.push('rotateX(180deg)')
+        transform.push('rotateY(180deg)')
         break
     }
   }
-  if (props.rotate !== 0) {
-    style.push(`rotate(${props.rotate}deg)`)
+  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(' ') }),
   }
-  return `transform: ${style.join(' ')};`
 })
 </script>
 
 <template>
-  <Icon v-if="name.indexOf('ep:') === 0" :icon="name" :style="transformStyle" />
-  <svg v-else :style="transformStyle" aria-hidden="true">
-    <use :xlink:href="`#icon-${name}`" />
-  </svg>
+  <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>

src/components/SystemInfo/index.vue

@@ -13,36 +13,44 @@ onMounted(() => {
 </script>
 
 <template>
-  <div>
-    <el-drawer v-model="isShow" title="系统信息" direction="rtl" :size="360">
-      <el-descriptions direction="vertical" :column="1" border>
-        <el-descriptions-item label="最后编译时间" align="center">
-          {{ lastBuildTime }}
-        </el-descriptions-item>
-      </el-descriptions>
-      <el-descriptions title="生产环境依赖" :column="1" size="small" border>
-        <el-descriptions-item v-for="(val, key) in (pkg.dependencies as object)" :key="key" :label="key">
-          {{ val }}
-        </el-descriptions-item>
-      </el-descriptions>
-      <el-descriptions title="开发环境依赖" :column="1" size="small" border>
-        <el-descriptions-item v-for="(val, key) in (pkg.devDependencies as object)" :key="key" :label="key">
-          {{ val }}
-        </el-descriptions-item>
-      </el-descriptions>
-    </el-drawer>
-  </div>
+  <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">
+        {{ 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>
-
-<style lang="scss" scoped>
-:deep(.el-drawer__header) {
-  margin-bottom: initial;
-  padding-bottom: 20px;
-  border-bottom: 1px solid var(--el-border-color);
-  transition: var(--el-transition-border);
-}
-
-:deep(.el-descriptions) {
-  margin-bottom: 20px;
-}
-</style>

src/components/Trend/index.vue

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+defineOptions({
+  name: 'Trend',
+})
+
 const props = withDefaults(
   defineProps<{
     value: string
@@ -15,10 +19,6 @@ const props = withDefaults(
   },
 )
 
-defineOptions({
-  name: 'Trend',
-})
-
 const isUp = computed(() => {
   let isUp = props.type === 'up'
   if (props.reverse) {
@@ -29,37 +29,10 @@ const isUp = computed(() => {
 </script>
 
 <template>
-  <div :class="`trend ${isUp ? 'up' : 'down'}`">
+  <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>
-    <el-icon>
-      <svg-icon name="ep:caret-top" />
-    </el-icon>
+    <SvgIcon name="i-ep:caret-top" :rotate="isUp ? 0 : 180" class="ml-1 transition" />
   </div>
 </template>
-
-<style lang="scss" scoped>
-.trend {
-  display: flex;
-  align-items: center;
-  transition: var(--el-transition-color);
-
-  &.up {
-    color: var(--el-color-success);
-  }
-
-  &.down {
-    color: var(--el-color-danger);
-
-    .el-icon {
-      transform: rotate(180deg);
-    }
-  }
-
-  .el-icon {
-    margin-left: 5px;
-    transition: transform 0.3s;
-  }
-}
-</style>

src/iconify-ep/index.ts

@@ -1,6 +0,0 @@
-import { addCollection } from '@iconify/vue'
-
-export async function downloadAndInstall() {
-  const data = Object.freeze(await fetch('./icons/icons.json').then(r => r.json()))
-  addCollection(data)
-}

src/iconify/index.json

@@ -0,0 +1 @@
+{ "collections": ["ant-design", "ep", "flagpack", "icon-park", "mdi", "ri", "logos", "twemoji", "vscode-icons"], "isOfflineUse": false }

src/iconify/index.ts

@@ -0,0 +1,9 @@
+import { addCollection } from '@iconify/vue'
+import data from './data.json'
+
+export async function downloadAndInstall(name: string) {
+  const data = Object.freeze(await fetch(`./icons/${name}-raw.json`).then(r => r.json()))
+  addCollection(data)
+}
+
+export const icons = data.sort((a, b) => a.info.name.localeCompare(b.info.name))

src/layouts/components/AppSetting/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useClipboard } from '@vueuse/core'
-import { ElMessage } from 'element-plus'
+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'
@@ -16,7 +17,7 @@ const menuStore = useMenuStore()
 
 const isShow = ref(false)
 
-watch(() => settingsStore.settings.menu.menuMode, (value) => {
+watch(() => settingsStore.settings.menu.mode, (value) => {
   if (value === 'single') {
     menuStore.setActived(0)
   }
@@ -35,503 +36,421 @@ const { copy, copied, isSupported } = useClipboard()
 
 watch(copied, (val) => {
   if (val) {
-    ElMessage.success('复制成功，请粘贴到 src/settings.ts 文件中！')
+    Message.success('复制成功，请粘贴到 src/settings.ts 文件中！', {
+      zIndex: 2000,
+    })
   }
 })
 
+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(settingsStore.settings, null, 2))
+  copy(JSON.stringify(getObjectDiff(settingsDefault, settingsStore.settings), null, 2))
 }
 </script>
 
 <template>
-  <div>
-    <el-drawer v-model="isShow" title="应用配置" direction="rtl" :size="360">
-      <el-alert title="应用配置可实时预览效果，但只是临时生效，要想真正作用于项目，可以点击下方的“复制配置”按钮，并将配置粘贴到 src/settings.ts 文件中。同时建议在生产环境隐藏应用配置功能。" type="error" :closable="false" />
-      <el-divider>颜色主题</el-divider>
-      <div class="color-scheme">
-        <div class="switch" :class="settingsStore.settings.app.colorScheme" @click="settingsStore.settings.app.colorScheme = settingsStore.settings.app.colorScheme === 'dark' ? 'light' : 'dark'">
-          <el-icon class="icon">
-            <svg-icon :name="settingsStore.settings.app.colorScheme === 'light' ? 'ep:sunny' : 'ep:moon'" />
-          </el-icon>
+  <HSlideover v-model="isShow" title="应用配置">
+    <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-codicon:color-mode', 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.mode === 'side' }" @click="settingsStore.settings.menu.mode = 'side'">
+          <div class="mode-container" />
         </div>
-      </div>
-      <el-divider v-if="settingsStore.mode === 'pc'">
-        导航栏模式
-      </el-divider>
-      <div v-if="settingsStore.mode === 'pc'" class="menu-mode">
-        <el-tooltip content="侧边栏模式（含主导航）" placement="top" :show-after="500">
-          <div class="mode mode-side" :class="{ active: settingsStore.settings.menu.menuMode === 'side' }" @click="settingsStore.settings.menu.menuMode = 'side'">
-            <div class="mode-container" />
-            <el-icon>
-              <svg-icon name="ep:check" />
-            </el-icon>
-          </div>
-        </el-tooltip>
-        <el-tooltip content="顶部模式" placement="top" :show-after="500">
-          <div class="mode mode-head" :class="{ active: settingsStore.settings.menu.menuMode === 'head' }" @click="settingsStore.settings.menu.menuMode = 'head'">
-            <div class="mode-container" />
-            <el-icon>
-              <svg-icon name="ep:check" />
-            </el-icon>
-          </div>
-        </el-tooltip>
-        <el-tooltip content="侧边栏模式（不含主导航）" placement="top" :show-after="500">
-          <div class="mode mode-single" :class="{ active: settingsStore.settings.menu.menuMode === 'single' }" @click="settingsStore.settings.menu.menuMode = 'single'">
-            <div class="mode-container" />
-            <el-icon>
-              <svg-icon name="ep:check" />
-            </el-icon>
-          </div>
-        </el-tooltip>
-      </div>
-      <el-divider>导航栏</el-divider>
-      <div class="setting-item">
-        <div class="label">
-          主导航切换跳转
-          <el-tooltip content="开启该功能后，切换主导航时，页面自动跳转至该主导航下，次导航里第一个导航" placement="top">
-            <el-icon>
-              <svg-icon name="ep:question-filled" />
-            </el-icon>
-          </el-tooltip>
+      </HTooltip>
+      <HTooltip text="顶部模式" placement="bottom" :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>
-        <el-switch v-model="settingsStore.settings.menu.switchMainMenuAndPageJump" :disabled="['single'].includes(settingsStore.settings.menu.menuMode)" />
+      </HTooltip>
+      <HTooltip text="侧边栏模式 (不含主导航)" placement="bottom" :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>
+      </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.mode)" />
+    </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.mode)" />
+    </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' },
+        ]"
+      />
+    </div>
+    <div>
+      <div class="divider">
+        标签栏
       </div>
       <div class="setting-item">
         <div class="label">
-          次导航保持展开一个
-          <el-tooltip content="开启该功能后，次导航只保持单个菜单的展开" placement="top">
-            <el-icon>
-              <svg-icon name="ep:question-filled" />
-            </el-icon>
-          </el-tooltip>
+          是否启用
         </div>
-        <el-switch v-model="settingsStore.settings.menu.subMenuUniqueOpened" />
+        <HToggle v-model="settingsStore.settings.tabbar.enable" />
       </div>
       <div class="setting-item">
         <div class="label">
-          次导航是否折叠
+          是否显示图标
         </div>
-        <el-switch v-model="settingsStore.settings.menu.subMenuCollapse" />
-      </div>
-      <div v-if="settingsStore.mode === 'pc'" class="setting-item">
-        <div class="label">
-          显示次导航折叠按钮
-        </div>
-        <el-switch v-model="settingsStore.settings.menu.enableSubMenuCollapseButton" />
+        <HToggle v-model="settingsStore.settings.tabbar.enableIcon" :disabled="!settingsStore.settings.tabbar.enable" />
       </div>
       <div class="setting-item">
         <div class="label">
           是否启用快捷键
         </div>
-        <el-switch v-model="settingsStore.settings.menu.enableHotkeys" :disabled="['single'].includes(settingsStore.settings.menu.menuMode)" />
+        <HToggle v-model="settingsStore.settings.tabbar.enableHotkeys" :disabled="!settingsStore.settings.tabbar.enable" />
       </div>
-      <el-divider>顶栏</el-divider>
-      <div class="setting-item">
-        <div class="label">
-          模式
-        </div>
-        <el-radio-group v-model="settingsStore.settings.topbar.mode" size="small">
-          <el-radio-button label="static">
-            静止
-          </el-radio-button>
-          <el-radio-button label="fixed">
-            固定
-          </el-radio-button>
-          <el-radio-button label="sticky">
-            粘性
-          </el-radio-button>
-        </el-radio-group>
-      </div>
-      <el-divider>工具栏</el-divider>
-      <div v-if="settingsStore.mode === 'pc'" class="setting-item">
-        <div class="label">
-          全屏
-          <el-tooltip content="该功能使用场景极少，用户习惯于通过窗口“最大化”功能来扩大显示区域，以显示更多内容，并且使用 F11 键也可以进入全屏效果" placement="top">
-            <el-icon>
-              <svg-icon name="ep:question-filled" />
-            </el-icon>
-          </el-tooltip>
-        </div>
-        <el-switch v-model="settingsStore.settings.toolbar.enableFullscreen" />
-      </div>
-      <div class="setting-item">
-        <div class="label">
-          页面刷新
-          <el-tooltip content="开启时会阻止原生 F5 键刷新功能，并采用框架提供的刷新模式进行页面刷新" placement="top">
-            <el-icon>
-              <svg-icon name="ep:question-filled" />
-            </el-icon>
-          </el-tooltip>
-        </div>
-        <el-switch v-model="settingsStore.settings.toolbar.enablePageReload" />
-      </div>
-      <div class="setting-item">
-        <div class="label">
-          颜色主题
-          <el-tooltip content="开启后可在明亮/暗黑模式中切换" placement="top">
-            <el-icon>
-              <svg-icon name="ep:question-filled" />
-            </el-icon>
-          </el-tooltip>
-        </div>
-        <el-switch v-model="settingsStore.settings.toolbar.enableColorScheme" />
-      </div>
-      <el-divider v-if="settingsStore.mode === 'pc'">
+    </div>
+    <div class="divider">
+      工具栏
+    </div>
+    <div v-if="settingsStore.mode === 'pc'" class="setting-item">
+      <div class="label">
         面包屑导航
-      </el-divider>
-      <div v-if="settingsStore.mode === 'pc'" class="setting-item">
-        <div class="label">
-          是否启用
-        </div>
-        <el-switch v-model="settingsStore.settings.breadcrumb.enable" />
       </div>
-      <el-divider>导航搜索</el-divider>
-      <div class="setting-item">
-        <div class="label">
-          是否启用
-          <el-tooltip content="对导航进行快捷搜索" placement="top">
-            <el-icon>
-              <svg-icon name="ep:question-filled" />
-            </el-icon>
-          </el-tooltip>
-        </div>
-        <el-switch v-model="settingsStore.settings.navSearch.enable" />
+      <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>
-      <div class="setting-item">
-        <div class="label">
-          是否启用快捷键
-        </div>
-        <el-switch v-model="settingsStore.settings.navSearch.enableHotkeys" :disabled="!settingsStore.settings.navSearch.enable" />
+      <HToggle v-model="settingsStore.settings.toolbar.navSearch" />
+    </div>
+    <div v-if="settingsStore.mode === 'pc'" class="setting-item">
+      <div class="label">
+        全屏
       </div>
-      <el-divider>底部版权</el-divider>
-      <div class="setting-item">
-        <div class="label">
-          是否启用
-        </div>
-        <el-switch v-model="settingsStore.settings.copyright.enable" />
+      <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>
-      <div class="setting-item">
-        <div class="label">
-          日期
-        </div>
-        <el-input v-model="settingsStore.settings.copyright.dates" size="small" :disabled="!settingsStore.settings.copyright.enable" />
+      <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>
-      <div class="setting-item">
-        <div class="label">
-          公司
-        </div>
-        <el-input v-model="settingsStore.settings.copyright.company" size="small" :disabled="!settingsStore.settings.copyright.enable" />
+      <HToggle v-model="settingsStore.settings.toolbar.colorScheme" />
+    </div>
+    <div class="divider">
+      页面
+    </div>
+    <div class="setting-item">
+      <div class="label">
+        是否启用快捷键
       </div>
-      <div class="setting-item">
-        <div class="label">
-          网址
-        </div>
-        <el-input v-model="settingsStore.settings.copyright.website" size="small" :disabled="!settingsStore.settings.copyright.enable" />
+      <HToggle v-model="settingsStore.settings.mainPage.enableHotkeys" />
+    </div>
+    <div class="divider">
+      导航搜索
+    </div>
+    <div class="setting-item">
+      <div class="label">
+        是否启用快捷键
       </div>
-      <div class="setting-item">
-        <div class="label">
-          备案
-        </div>
-        <el-input v-model="settingsStore.settings.copyright.beian" size="small" :disabled="!settingsStore.settings.copyright.enable" />
+      <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>
-      <el-divider>主页</el-divider>
-      <div class="setting-item">
-        <div class="label">
-          是否开启
-          <el-tooltip content="该功能开启时，登录成功默认进入主页，反之则默认进入导航栏里第一个导航页面" placement="top">
-            <el-icon>
-              <svg-icon name="ep:question-filled" />
-            </el-icon>
-          </el-tooltip>
-        </div>
-        <el-switch v-model="settingsStore.settings.home.enable" />
+      <HToggle v-model="settingsStore.settings.copyright.enable" />
+    </div>
+    <div class="setting-item">
+      <div class="label">
+        日期
       </div>
-      <div class="setting-item">
-        <div class="label">
-          主页名称
-        </div>
-        <el-input v-model="settingsStore.settings.home.title" size="small" />
+      <HInput v-model="settingsStore.settings.copyright.dates" :disabled="!settingsStore.settings.copyright.enable" />
+    </div>
+    <div class="setting-item">
+      <div class="label">
+        公司
       </div>
-      <el-divider>其它</el-divider>
-      <div class="setting-item">
-        <div class="label">
-          组件尺寸
-          <el-tooltip content="全局设置 Element Plus 组件的默认尺寸大小" placement="top">
-            <el-icon>
-              <svg-icon name="ep:question-filled" />
-            </el-icon>
-          </el-tooltip>
-        </div>
-        <el-radio-group v-model="settingsStore.settings.app.elementSize" size="small">
-          <el-radio-button label="large">
-            较大
-          </el-radio-button>
-          <el-radio-button label="default">
-            默认
-          </el-radio-button>
-          <el-radio-button label="small">
-            稍小
-          </el-radio-button>
-        </el-radio-group>
+      <HInput v-model="settingsStore.settings.copyright.company" :disabled="!settingsStore.settings.copyright.enable" />
+    </div>
+    <div class="setting-item">
+      <div class="label">
+        网址
       </div>
-      <div class="setting-item">
-        <div class="label">
-          是否启用权限
-        </div>
-        <el-switch v-model="settingsStore.settings.app.enablePermission" />
+      <HInput v-model="settingsStore.settings.copyright.website" :disabled="!settingsStore.settings.copyright.enable" />
+    </div>
+    <div class="setting-item">
+      <div class="label">
+        备案
       </div>
-      <div class="setting-item">
-        <div class="label">
-          载入进度条
-          <el-tooltip content="该功能开启时，跳转路由会看到页面顶部有进度条" placement="top">
-            <el-icon>
-              <svg-icon name="ep:question-filled" />
-            </el-icon>
-          </el-tooltip>
-        </div>
-        <el-switch v-model="settingsStore.settings.app.enableProgress" />
+      <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>
-      <div class="setting-item">
-        <div class="label">
-          动态标题
-          <el-tooltip content="该功能开启时，页面标题会显示当前路由标题，格式为“页面标题 - 网站名称”；关闭时则显示网站名称，网站名称在项目根目录下 .env.* 文件里配置" placement="top">
-            <el-icon>
-              <svg-icon name="ep:question-filled" />
-            </el-icon>
-          </el-tooltip>
-        </div>
-        <el-switch v-model="settingsStore.settings.app.enableDynamicTitle" />
+      <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>
-      <template v-if="isSupported" #footer>
-        <el-button type="primary" @click="handleCopy">
-          <template #icon>
-            <el-icon>
-              <svg-icon name="ep:document-copy" />
-            </el-icon>
-          </template>
-          复制配置
-        </el-button>
-      </template>
-    </el-drawer>
-  </div>
+      <HInput v-model="settingsStore.settings.home.title" />
+    </div>
+    <div class="divider">
+      其它
+    </div>
+    <div class="setting-item">
+      <div class="label">
+        是否启用权限
+      </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>
+      <HToggle v-model="settingsStore.settings.app.enableProgress" />
+    </div>
+    <div class="setting-item">
+      <div class="label">
+        哀悼模式
+        <HTooltip text="该功能开启时，整站会变为灰色">
+          <SvgIcon name="i-ri:question-line" />
+        </HTooltip>
+      </div>
+      <HToggle v-model="settingsStore.settings.app.enableMournMode" />
+    </div>
+    <div class="setting-item">
+      <div class="label">
+        色弱模式
+      </div>
+      <HToggle v-model="settingsStore.settings.app.enableColorAmblyopiaMode" />
+    </div>
+    <div class="setting-item">
+      <div class="label">
+        动态标题
+        <HTooltip text="该功能开启时，页面标题会显示当前路由标题，格式为“页面标题 - 网站名称”；关闭时则显示网站名称，网站名称在项目根目录下 .env.* 文件里配置">
+          <SvgIcon name="i-ri:question-line" />
+        </HTooltip>
+      </div>
+      <HToggle v-model="settingsStore.settings.app.enableDynamicTitle" />
+    </div>
+    <template v-if="isSupported" #footer>
+      <HButton block @click="handleCopy">
+        <SvgIcon name="i-ep:document-copy" />
+        复制配置
+      </HButton>
+    </template>
+  </HSlideover>
 </template>
 
 <style lang="scss" scoped>
-:deep(.el-drawer__header) {
-  margin-bottom: initial;
-  padding-bottom: 20px;
-  border-bottom: 1px solid var(--el-border-color);
-}
+.divider {
+  --at-apply: flex items-center justify-between gap-4 my-4 whitespace-nowrap text-sm font-500;
 
-:deep(.el-drawer__footer) {
-  padding: 20px;
-  border-top: 1px solid var(--el-border-color);
-  transition: var(--el-transition-border);
-
-  .el-button {
-    width: 100%;
-  }
-}
-
-:deep(.el-divider) {
-  margin: 36px 0 24px;
-}
-
-.color-scheme {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding-bottom: 10px;
-
-  $width: 50px;
-
-  .switch {
-    width: $width;
-    height: 30px;
-    border-radius: 15px;
-    cursor: pointer;
-    background-color: var(--el-fill-color-darker);
-    transition: background-color 0.3s;
-
-    &.dark {
-      .icon {
-        margin-left: calc($width - 24px - 3px);
-      }
-    }
-
-    .icon {
-      margin: 3px;
-      padding: 5px;
-      font-size: 24px;
-      border-radius: 50%;
-      background-color: var(--el-fill-color-lighter);
-      transition: margin-left 0.3s, background-color 0.3s;
-    }
+  &::before,
+  &::after {
+    --at-apply: content-empty w-full h-1px bg-stone-2 dark-bg-stone-6;
   }
 }
 
 .menu-mode {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  padding-bottom: 10px;
+  --at-apply: flex items-center justify-center gap-4 pb-4;
 
   .mode {
-    position: relative;
-    width: 80px;
-    height: 55px;
-    margin: 10px;
-    border-radius: 5px;
-    overflow: hidden;
-    cursor: pointer;
-    background-color: var(--g-app-bg);
-    box-shadow: 0 0 5px 1px var(--el-border-color-lighter);
-    transition: 0.2s;
-
-    &:hover {
-      box-shadow: 0 0 5px 1px var(--el-border-color-darker);
-    }
+    --at-apply: relative w-16 h-12 rounded-2 ring-1 ring-stone-2 dark-ring-stone-7 cursor-pointer transition;
 
     &.active {
-      box-shadow: 0 0 0 2px var(--el-color-primary);
+      --at-apply: ring-ui-primary ring-2;
     }
 
     &::before,
     &::after,
     .mode-container {
-      pointer-events: none;
-      position: absolute;
-      border-radius: 3px;
+      --at-apply: absolute pointer-events-none;
     }
 
-    .mode-container::before {
-      content: "";
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      background-color: var(--g-sub-sidebar-menu-active-bg);
-      opacity: 0.2;
+    &::before {
+      --at-apply: content-empty bg-ui-primary;
+    }
+
+    &::after {
+      --at-apply: content-empty bg-ui-primary/60;
+    }
+
+    .mode-container {
+      --at-apply: bg-ui-primary/20 border-width-1.5 border-dashed border-ui-primary;
+
+      &::before {
+        --at-apply: content-empty absolute w-full h-full;
+      }
     }
 
     &-side {
       &::before {
-        content: "";
-        top: 5px;
-        left: 5px;
-        bottom: 5px;
-        width: 10px;
-        background-color: var(--g-sub-sidebar-menu-active-bg);
+        --at-apply: top-2 bottom-2 left-2 w-2 rounded-tl-1 rounded-bl-1;
       }
 
       &::after {
-        content: "";
-        top: 5px;
-        left: 20px;
-        bottom: 5px;
-        width: 15px;
-        background-color: var(--g-sub-sidebar-menu-active-bg);
-        opacity: 0.5;
+        --at-apply: top-2 bottom-2 left-4.5 w-3;
       }
 
       .mode-container {
-        inset: 5px 5px 5px 40px;
-        border: 1px dashed var(--g-sub-sidebar-menu-active-bg);
+        --at-apply: inset-t-2 inset-r-2 inset-b-2 inset-l-8 rounded-tr-1 rounded-br-1;
       }
     }
 
     &-head {
       &::before {
-        content: "";
-        top: 5px;
-        left: 5px;
-        right: 5px;
-        height: 10px;
-        background-color: var(--g-sub-sidebar-menu-active-bg);
+        --at-apply: top-2 left-2 right-2 h-2 rounded-tl-1 rounded-tr-1;
       }
 
       &::after {
-        content: "";
-        top: 20px;
-        left: 5px;
-        bottom: 5px;
-        width: 15px;
-        background-color: var(--g-sub-sidebar-menu-active-bg);
-        opacity: 0.5;
+        --at-apply: top-4.5 left-2 bottom-2 w-3 rounded-bl-1;
       }
 
       .mode-container {
-        inset: 20px 5px 5px 25px;
-        border: 1px dashed var(--g-sub-sidebar-menu-active-bg);
+        --at-apply: inset-t-4.5 inset-r-2 inset-b-2 inset-l-5.5 rounded-br-1;
       }
     }
 
     &-single {
-      &::before {
-        content: "";
-        position: absolute;
-        top: 5px;
-        left: 5px;
-        bottom: 5px;
-        width: 15px;
-        background-color: var(--g-sub-sidebar-menu-active-bg);
-        opacity: 0.5;
+      &::after {
+        --at-apply: top-2 left-2 bottom-2 w-3 rounded-tl-1 rounded-bl-1;
       }
 
       .mode-container {
-        inset: 5px 5px 5px 25px;
-        border: 1px dashed var(--g-sub-sidebar-menu-active-bg);
+        --at-apply: inset-t-2 inset-r-2 inset-b-2 inset-l-5.5 rounded-tr-1 rounded-br-1;
       }
     }
-
-    i {
-      position: absolute;
-      right: 10px;
-      bottom: 10px;
-      display: none;
-    }
-
-    &.active i {
-      display: block;
-      color: var(--el-color-primary);
-    }
   }
 }
 
 .setting-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin: 5px 0;
-  padding: 5px 10px;
-  border-radius: 5px;
-  transition: all 0.3s;
-
-  &:hover {
-    background: var(--el-fill-color);
-  }
+  --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;
 
   .label {
-    font-size: 14px;
-    color: var(--el-text-color-regular);
-    display: flex;
-    align-items: center;
+    --at-apply: flex items-center flex-shrink-0 gap-2 text-sm;
 
     i {
-      margin-left: 4px;
-      font-size: 17px;
-      color: var(--el-color-warning);
-      cursor: help;
+      --at-apply: text-xl text-orange cursor-help;
     }
   }
-
-  .el-switch {
-    height: auto;
-  }
-
-  .el-input {
-    width: 150px;
-  }
 }
 </style>

src/layouts/components/BackTop/index.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'BackTop',
+})
+
+const transitionClass = {
+  enterActiveClass: 'ease-out duration-300',
+  enterFromClass: 'opacity-0 translate-y-4 lg-translate-y-0 lg-scale-95',
+  enterToClass: 'opacity-100 translate-y-0 lg-scale-100',
+  leaveActiveClass: 'ease-in duration-200',
+  leaveFromClass: 'opacity-100 translate-y-0 lg-scale-100',
+  leaveToClass: 'opacity-0 translate-y-4 lg-translate-y-0 lg-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>

src/layouts/components/Breadcrumb/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="flex items-center text-sm">
+    <slot />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.breadcrumb-item) {
+  &:first-child {
+    .separator {
+      display: none;
+    }
+  }
+
+  &:last-child {
+    .text {
+      opacity: 1;
+    }
+  }
+}
+</style>

src/layouts/components/Breadcrumb/item.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { RouteLocationRaw } from 'vue-router'
+
+const props = withDefaults(
+  defineProps<{
+    to?: RouteLocationRaw
+    replace?: boolean
+    separator?: string
+  }>(),
+  {
+    separator: '/',
+  },
+)
+
+const router = useRouter()
+
+function onClick() {
+  if (props.to) {
+    props.replace ? router.replace(props.to) : router.push(props.to)
+  }
+}
+</script>
+
+<template>
+  <div class="breadcrumb-item flex items-center text-dark dark-text-white">
+    <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,
+      }" @click="onClick"
+    >
+      <slot />
+    </span>
+  </div>
+</template>

src/layouts/components/Copyright/index.vue

@@ -5,14 +5,13 @@ defineOptions({
   name: 'Copyright',
 })
 
-const route = useRoute()
 const settingsStore = useSettingsStore()
 </script>
 
 <template>
-  <footer v-if="route.meta.copyright ?? settingsStore.settings.copyright.enable" class="copyright">
+  <footer v-if="settingsStore.settings.copyright.enable" class="copyright">
     <span>Copyright</span>
-    <span class="icon">©</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>
@@ -23,32 +22,16 @@ const settingsStore = useSettingsStore()
 </template>
 
 <style lang="scss" scoped>
-footer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 40px 0 20px;
-  color: var(--el-text-color-secondary);
-  font-size: 14px;
+.copyright {
+  --at-apply: flex items-center justify-center flex-wrap my-4 px-4 text-sm text-stone-5;
 
   span,
   a {
-    padding: 0 5px;
+    --at-apply: px-1;
   }
 
   a {
-    text-decoration: none;
-    color: var(--el-text-color-secondary);
-    transition: var(--el-transition-color);
-
-    &:hover {
-      color: var(--el-text-color-primary);
-    }
-  }
-
-  .icon {
-    padding: 0;
-    font-size: 18px;
+    --at-apply: text-center no-underline text-stone-5 hover-text-dark dark-hover-text-light transition;
   }
 }
 </style>

src/layouts/components/Header/index.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import Logo from '../Logo/index.vue'
-import Tools from '../Tools/index.vue'
-import useSettingsStore from '@/store/modules/settings'
+import ToolbarRightSide from '../Topbar/Toolbar/rightSide.vue'
 import useMenuStore from '@/store/modules/menu'
+import useSettingsStore from '@/store/modules/settings'
 
 defineOptions({
   name: 'LayoutHeader',
@@ -13,171 +13,140 @@ const menuStore = useMenuStore()
 
 const { switchTo } = useMenu()
 
-const navRef = ref()
+const menuRef = ref()
 
 // 顶部模式鼠标滚动
 function handlerMouserScroll(event: WheelEvent) {
-  navRef.value.scrollBy({
-    left: (event.deltaY || event.detail) > 0 ? 50 : -50,
-  })
+  if (event.deltaY || event.detail !== 0) {
+    menuRef.value.scrollBy({
+      left: (event.deltaY || event.detail) > 0 ? 50 : -50,
+    })
+  }
 }
 </script>
 
 <template>
-  <transition name="header">
-    <header v-if="settingsStore.mode === 'pc' && settingsStore.settings.menu.menuMode === 'head'">
+  <Transition name="header">
+    <header v-if="settingsStore.mode === 'pc' && settingsStore.settings.menu.mode === 'head'">
       <div class="header-container">
-        <div class="main">
-          <Logo />
+        <Logo class="title" />
+        <div ref="menuRef" class="menu-container" @wheel.prevent="handlerMouserScroll">
           <!-- 顶部模式 -->
-          <div ref="navRef" class="nav" @wheel.prevent="handlerMouserScroll">
+          <div class="menu h-full flex of-hidden transition-all">
             <template v-for="(item, index) in menuStore.allMenus" :key="index">
-              <div v-if="item.children && item.children.length !== 0" class="item-container" :class="{ active: index === menuStore.actived }">
-                <div class="item" @click="switchTo(index)">
-                  <el-icon v-if="item.meta?.icon">
-                    <svg-icon :name="item.meta.icon" />
-                  </el-icon>
-                  <span v-if="item.meta?.title">{{ item.meta.title }}</span>
+              <div
+                class="menu-item relative transition-all" :class="{
+                  active: index === menuStore.actived,
+                }"
+              >
+                <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>
               </div>
             </template>
           </div>
         </div>
-        <Tools />
+        <ToolbarRightSide />
       </div>
     </header>
-  </transition>
+  </Transition>
 </template>
 
 <style lang="scss" scoped>
 header {
   position: fixed;
-  z-index: 1000;
   top: 0;
-  left: 0;
   right: 0;
+  left: 0;
+  z-index: 2000;
   display: flex;
   align-items: center;
-  padding: 0 20px;
+  width: 100%;
   height: var(--g-header-height);
+  padding: 0 20px;
+  margin: 0 auto;
   color: var(--g-header-color);
   background-color: var(--g-header-bg);
-  transition: background-color 0.3s, var(--el-transition-color);
+  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);
+  transition: background-color 0.3s;
 
   .header-container {
-    width: var(--g-header-width);
-    height: 100%;
-    margin: 0 auto;
     display: flex;
+    gap: 30px;
     align-items: center;
     justify-content: space-between;
-
-    .main {
-      flex: 1;
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      height: 100%;
-    }
-  }
-
-  @media screen and (max-width: var(--g-header-width)) {
-    .header-container {
-      width: 100%;
-    }
-  }
-
-  :deep(.title) {
-    position: relative;
-    width: inherit;
-    height: inherit;
-    padding: inherit;
-    background-color: inherit;
-
-    .logo {
-      width: 50px;
-      height: 50px;
-    }
-
-    span {
-      font-size: 24px;
-      letter-spacing: 1px;
-      color: var(--g-header-color);
-    }
-  }
-
-  .nav {
-    flex: 1;
-    display: flex;
-    width: 0;
+    width: 100%;
     height: 100%;
-    margin: 0 30px;
-    padding: 0 20px;
-    overflow-x: auto;
-    mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
+    margin: 0 auto;
 
-    // firefox隐藏滚动条
-    scrollbar-width: none;
-
-    // chrome隐藏滚动条
-    &::-webkit-scrollbar {
-      display: none;
-    }
-
-    .item-container {
+    :deep(a.title) {
       position: relative;
-      display: flex;
-      width: initial;
+      flex: 0;
+      width: inherit;
+      height: inherit;
+      padding: inherit;
+      background-color: inherit;
 
-      .item {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
-        padding: 0 5px;
-        width: 80px;
+      .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;
+      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%;
-        cursor: pointer;
-        color: var(--g-header-menu-color);
-        background-color: var(--g-header-bg);
-        transition: background-color 0.3s, var(--el-transition-color);
 
-        &:hover {
-          color: var(--g-header-menu-hover-color);
-          background-color: var(--g-header-menu-hover-bg);
-        }
+        :deep(.menu-item) {
+          .menu-item-container {
+            color: var(--g-header-menu-color);
 
-        .el-icon {
-          font-size: 24px;
-          vertical-align: middle;
-        }
+            &:hover {
+              color: var(--g-header-menu-hover-color);
+              background-color: var(--g-header-menu-hover-bg);
+            }
 
-        span {
-          text-align: center;
-          vertical-align: middle;
-          word-break: break-all;
+            .menu-item-container-icon {
+              font-size: 24px !important;
+            }
+          }
 
-          @include text-overflow(1, false);
+          &.active .menu-item-container {
+            color: var(--g-header-menu-active-color);
+            background-color: var(--g-header-menu-active-bg);
+          }
         }
       }
-
-      &.active .item {
-        color: var(--g-header-menu-active-color);
-        background-color: var(--g-header-menu-active-bg);
-      }
-    }
-  }
-
-  :deep(.tools) {
-    padding: 0;
-
-    .buttons .item .el-icon {
-      color: var(--g-header-color);
-    }
-
-    .user-container {
-      font-size: 16px;
-      color: var(--g-header-color);
     }
   }
 }

src/layouts/components/HotkeysIntro/index.vue

@@ -2,6 +2,10 @@
 import eventBus from '@/utils/eventBus'
 import useSettingsStore from '@/store/modules/settings'
 
+defineOptions({
+  name: 'HotkeysIntro',
+})
+
 const isShow = ref(false)
 
 const settingsStore = useSettingsStore()
@@ -14,38 +18,71 @@ onMounted(() => {
 </script>
 
 <template>
-  <div>
-    <el-drawer v-model="isShow" title="快捷键介绍" direction="rtl" :size="360">
-      <el-descriptions title="全局" :column="1" border>
-        <el-descriptions-item label="查看系统信息">
-          {{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }} + I
-        </el-descriptions-item>
-        <el-descriptions-item v-if="settingsStore.settings.navSearch.enable && settingsStore.settings.navSearch.enableHotkeys" label="唤起导航搜索">
-          {{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }} + S
-        </el-descriptions-item>
-      </el-descriptions>
-      <el-descriptions v-if="settingsStore.settings.menu.enableHotkeys && ['side', 'head'].includes(settingsStore.settings.menu.menuMode)" title="主导航" :column="1" border>
-        <el-descriptions-item label="激活下一个主导航">
-          {{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }} + `
-        </el-descriptions-item>
-      </el-descriptions>
-    </el-drawer>
-  </div>
+  <HDialog v-model="isShow" title="快捷键介绍">
+    <div class="px-4">
+      <div class="grid gap-2 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>
+              查看系统信息
+            </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>
+          </ul>
+        </div>
+        <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>
+              激活下一个主导航
+            </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>
+              切换到上一个标签页
+            </li>
+            <li class="py-1">
+              <HKbd>{{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }}</HKbd>
+              <HKbd>→</HKbd>
+              切换到下一个标签页
+            </li>
+            <li class="py-1">
+              <HKbd>{{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }}</HKbd>
+              <HKbd>W</HKbd>
+              关闭当前标签页
+            </li>
+            <li class="py-1">
+              <HKbd>{{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }}</HKbd>
+              <HKbd>1~9</HKbd>
+              切换到第 n 个标签页
+            </li>
+            <li class="py-1">
+              <HKbd>{{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }}</HKbd>
+              <HKbd>0</HKbd>
+              切换到最后一个标签页
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </HDialog>
 </template>
-
-<style lang="scss" scoped>
-:deep(.el-drawer__header) {
-  margin-bottom: initial;
-  padding-bottom: 20px;
-  border-bottom: 1px solid var(--el-border-color);
-  transition: var(--el-transition-border);
-}
-
-:deep(.el-descriptions) {
-  margin-bottom: 20px;
-
-  .el-descriptions__label {
-    width: 200px;
-  }
-}
-</style>

src/layouts/components/Logo/index.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
-import imgLogo from '@/assets/images/logo.png'
 import useSettingsStore from '@/store/modules/settings'
+import imgLogo from '@/assets/images/logo.png'
+
+defineOptions({
+  name: 'Logo',
+})
 
 withDefaults(
   defineProps<{
@@ -13,68 +17,17 @@ withDefaults(
   },
 )
 
-defineOptions({
-  name: 'Logo',
-})
-
 const settingsStore = useSettingsStore()
 
 const title = ref(import.meta.env.VITE_APP_TITLE)
 const logo = ref(imgLogo)
 
-const to = computed(() => {
-  const rtn: {
-    name?: string
-  } = {}
-  if (settingsStore.settings.home.enable) {
-    rtn.name = 'home'
-  }
-  return rtn
-})
+const to = computed(() => settingsStore.settings.home.enable ? settingsStore.settings.home.fullPath : '')
 </script>
 
 <template>
-  <router-link :to="to" class="title" :class="{ 'is-link': settingsStore.settings.home.enable }" :title="title">
-    <img v-if="showLogo" :src="logo" class="logo">
-    <span v-if="showTitle">{{ title }}</span>
-  </router-link>
+  <RouterLink :to="to" class="h-[var(--g-sidebar-logo-height)] w-inherit flex-center gap-2 px-3 text-inherit no-underline" :class="{ 'cursor-pointer': settingsStore.settings.home.enable }" :title="title">
+    <img v-if="showLogo" :src="logo" class="logo h-[30px] w-[30px] object-contain">
+    <span v-if="showTitle" class="block truncate font-bold">{{ title }}</span>
+  </RouterLink>
 </template>
-
-<style lang="scss" scoped>
-.title {
-  position: fixed;
-  z-index: 1000;
-  top: 0;
-  width: inherit;
-  padding: 0 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: var(--g-sidebar-logo-height);
-  text-align: center;
-  overflow: hidden;
-  text-decoration: none;
-
-  &.is-link {
-    cursor: pointer;
-  }
-
-  .logo {
-    width: 30px;
-    height: 30px;
-    object-fit: contain;
-
-    & + span {
-      margin-left: 10px;
-    }
-  }
-
-  span {
-    display: block;
-    font-weight: bold;
-    color: #fff;
-
-    @include text-overflow;
-  }
-}
-</style>

src/layouts/components/MainSidebar/index.vue

@@ -14,91 +14,85 @@ const { switchTo } = useMenu()
 </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">
+  <Transition name="main-sidebar">
+    <div v-if="settingsStore.settings.menu.mode === 'side' || (settingsStore.mode === 'mobile' && settingsStore.settings.menu.mode !== 'single')" class="main-sidebar-container">
       <Logo :show-title="false" class="sidebar-logo" />
       <!-- 侧边栏模式（含主导航） -->
-      <div class="nav">
-        <template v-for="(item, index) in menuStore.allMenus">
+      <div class="menu w-full flex flex-col of-hidden transition-all">
+        <template v-for="(item, index) in menuStore.allMenus" :key="index">
           <div
-            v-if="item.children && item.children.length !== 0" :key="index" class="item" :class="{
+            class="menu-item relative transition-all" :class="{
               active: index === menuStore.actived,
-            }" :title="item.meta?.title ?? '[ 无标题 ]'" @click="switchTo(index)"
+            }"
           >
-            <el-icon v-if="item.meta?.icon">
-              <svg-icon :name="item.meta.icon" />
-            </el-icon>
-            <span>{{ item.meta?.title ?? '[ 无标题 ]' }}</span>
+            <div
+              v-if="item.children && item.children.length !== 0" class="group menu-item-container h-full w-full flex cursor-pointer items-center justify-between gap-1 py-4 text-[var(--g-main-sidebar-menu-color)] transition-all hover-(bg-[var(--g-main-sidebar-menu-hover-bg)] text-[var(--g-main-sidebar-menu-hover-color)]) px-2!" :class="{
+                'text-[var(--g-main-sidebar-menu-active-color)]! bg-[var(--g-main-sidebar-menu-active-bg)]!': index === menuStore.actived,
+              }" :title="typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title" @click="switchTo(index)"
+            >
+              <div class="w-full inline-flex flex-1 flex-col items-center justify-center gap-[2px]">
+                <SvgIcon v-if="item.meta?.icon" :name="item.meta?.icon" :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>
+            </div>
           </div>
         </template>
       </div>
     </div>
-  </transition>
+  </Transition>
 </template>
 
 <style lang="scss" scoped>
 .main-sidebar-container {
-  overflow-x: hidden;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-
-  // firefox隐藏滚动条
-  scrollbar-width: none;
-
-  // chrome隐藏滚动条
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
   position: relative;
   z-index: 1;
+  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);
-  transition: background-color 0.3s, var(--el-transition-color);
+  box-shadow: 1px 0 0 0 var(--g-border-color);
+  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
 
   .sidebar-logo {
-    transition: 0.3s;
     background-color: var(--g-main-sidebar-bg);
+    transition: background-color 0.3s;
   }
 
-  .nav {
-    width: inherit;
-    padding-top: var(--g-sidebar-logo-height);
+  .menu {
+    flex: 1;
+    width: initial;
+    overflow: hidden auto;
+    overscroll-behavior: contain;
 
-    .item {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-direction: column;
-      text-align: center;
-      height: 60px;
-      padding: 0 5px;
-      cursor: pointer;
-      color: var(--g-main-sidebar-menu-color);
-      background-color: var(--g-main-sidebar-bg);
-      transition: background-color 0.3s, var(--el-transition-color);
+    // firefox隐藏滚动条
+    scrollbar-width: none;
 
-      &:hover {
-        color: var(--g-main-sidebar-menu-hover-color);
-        background-color: var(--g-main-sidebar-menu-hover-bg);
+    // chrome隐藏滚动条
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    :deep(.menu-item) {
+      .menu-item-container {
+        padding-block: 8px;
+        color: var(--g-main-sidebar-menu-color);
+
+        &:hover {
+          color: var(--g-main-sidebar-menu-hover-color);
+          background-color: var(--g-main-sidebar-menu-hover-bg);
+        }
+
+        .menu-item-container-icon {
+          font-size: 24px !important;
+        }
       }
 
-      &.active {
-        color: var(--g-main-sidebar-menu-active-color);
-        background-color: var(--g-main-sidebar-menu-active-bg);
-      }
-
-      .el-icon {
-        margin: 0 auto;
-        font-size: 24px;
-      }
-
-      span {
-        text-align: center;
-        font-size: 14px;
-
-        @include text-overflow(1, false);
+      &.active .menu-item-container {
+        color: var(--g-main-sidebar-menu-active-color) !important;
+        background-color: var(--g-main-sidebar-menu-active-bg) !important;
       }
     }
   }
@@ -107,7 +101,7 @@ const { switchTo } = useMenu()
 // 主侧边栏动画
 .main-sidebar-enter-active,
 .main-sidebar-leave-active {
-  transition: transform 0.3s;
+  transition: 0.3s;
 }
 
 .main-sidebar-enter-from,

src/layouts/components/Menu/index.vue

@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import SubMenu from './sub.vue'
+import Item from './item.vue'
+import type { MenuInjection, MenuProps } from './types'
+import { rootMenuInjectionKey } from './types'
+
+defineOptions({
+  name: 'MainMenu',
+})
+
+const props = withDefaults(
+  defineProps<MenuProps>(),
+  {
+    accordion: true,
+    defaultOpeneds: () => [],
+    mode: 'vertical',
+    collapse: false,
+    showCollapseName: false,
+  },
+)
+
+const activeIndex = ref<MenuInjection['activeIndex']>(props.value)
+const items = ref<MenuInjection['items']>({})
+const subMenus = ref<MenuInjection['subMenus']>({})
+const openedMenus = ref<MenuInjection['openedMenus']>(props.defaultOpeneds.slice(0))
+const mouseInMenu = ref<MenuInjection['mouseInMenu']>([])
+const isMenuPopup = computed<MenuInjection['isMenuPopup']>(() => {
+  return props.mode === 'horizontal' || (props.mode === 'vertical' && props.collapse)
+})
+
+// 解析传入的 menu 数据，并保存到 items 和 subMenus 对象中
+function initItems(menu: MenuProps['menu'], parentPaths: string[] = []) {
+  menu.forEach((item) => {
+    const index = item.path ?? JSON.stringify(item)
+    if (item.children) {
+      const indexPath = [...parentPaths, index]
+      subMenus.value[index] = {
+        index,
+        indexPath,
+        active: false,
+      }
+      initItems(item.children, indexPath)
+    }
+    else {
+      items.value[index] = {
+        index,
+        indexPath: parentPaths,
+      }
+    }
+  })
+}
+
+const openMenu: MenuInjection['openMenu'] = (index, indexPath) => {
+  if (openedMenus.value.includes(index)) {
+    return
+  }
+  if (props.accordion) {
+    openedMenus.value = openedMenus.value.filter(key => indexPath.includes(key))
+  }
+  openedMenus.value.push(index)
+}
+const closeMenu: MenuInjection['closeMenu'] = (index) => {
+  if (Array.isArray(index)) {
+    nextTick(() => {
+      closeMenu(index.at(-1)!)
+      if (index.length > 1) {
+        closeMenu(index.slice(0, -1))
+      }
+    })
+    return
+  }
+  Object.keys(subMenus.value).forEach((item) => {
+    if (subMenus.value[item].indexPath.includes(index)) {
+      openedMenus.value = openedMenus.value.filter(item => item !== index)
+    }
+  })
+}
+
+function setSubMenusActive(index: string) {
+  for (const key in subMenus.value) {
+    subMenus.value[key].active = false
+  }
+  subMenus.value[index]?.indexPath.forEach((idx) => {
+    subMenus.value[idx].active = true
+  })
+  items.value[index]?.indexPath.forEach((idx) => {
+    subMenus.value[idx].active = true
+  })
+}
+
+const handleMenuItemClick: MenuInjection['handleMenuItemClick'] = (index) => {
+  if (props.mode === 'horizontal' || props.collapse) {
+    openedMenus.value = []
+  }
+  setSubMenusActive(index)
+}
+const handleSubMenuClick: MenuInjection['handleSubMenuClick'] = (index, indexPath) => {
+  if (openedMenus.value.includes(index)) {
+    closeMenu(index)
+  }
+  else {
+    openMenu(index, indexPath)
+  }
+}
+
+function initMenu() {
+  const activeItem = activeIndex.value && items.value[activeIndex.value]
+  setSubMenusActive(activeIndex.value)
+  if (!activeItem || props.collapse) {
+    return
+  }
+  // 展开该菜单项的路径上所有子菜单
+  activeItem.indexPath.forEach((index) => {
+    const subMenu = subMenus.value[index]
+    subMenu && openMenu(index, subMenu.indexPath)
+  })
+}
+
+watch(() => props.menu, (val) => {
+  initItems(val)
+  initMenu()
+}, {
+  deep: true,
+  immediate: true,
+})
+
+watch(() => props.value, (currentValue) => {
+  if (!items.value[currentValue]) {
+    activeIndex.value = ''
+  }
+  const item = items.value[currentValue] || (activeIndex.value && items.value[activeIndex.value]) || items.value[props.value]
+  if (item) {
+    activeIndex.value = item.index
+  }
+  else {
+    activeIndex.value = currentValue
+  }
+  initMenu()
+})
+
+watch(() => props.collapse, (value) => {
+  if (value) {
+    openedMenus.value = []
+  }
+  initMenu()
+})
+
+provide(rootMenuInjectionKey, reactive({
+  props,
+  items,
+  subMenus,
+  activeIndex,
+  openedMenus,
+  mouseInMenu,
+  isMenuPopup,
+  openMenu,
+  closeMenu,
+  handleMenuItemClick,
+  handleSubMenuClick,
+}))
+</script>
+
+<template>
+  <div
+    class="h-full w-full flex flex-col of-hidden transition-all" :class="{
+      'flex-row! w-auto!': isMenuPopup && props.mode === 'horizontal',
+    }"
+  >
+    <template v-for="item in menu" :key="item.path ?? JSON.stringify(item)">
+      <template v-if="item.meta?.menu !== false">
+        <SubMenu v-if="item.children?.length" :menu="item" :unique-key="[item.path ?? JSON.stringify(item)]" />
+        <Item v-else :item="item" :unique-key="[item.path ?? JSON.stringify(item)]" @click="handleMenuItemClick(item.path ?? JSON.stringify(item))" />
+      </template>
+    </template>
+  </div>
+</template>

src/layouts/components/Menu/item.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import type { SubMenuItemProps } from './types'
+import { rootMenuInjectionKey } from './types'
+
+defineOptions({
+  name: 'SubMenuItem',
+})
+
+const props = withDefaults(
+  defineProps<SubMenuItemProps>(),
+  {
+    level: 0,
+    subMenu: false,
+    expand: false,
+  },
+)
+
+const rootMenu = inject(rootMenuInjectionKey)!
+
+const itemRef = ref<HTMLElement>()
+
+const isActived = computed(() => {
+  return props.subMenu
+    ? rootMenu.subMenus[props.uniqueKey.at(-1)!].active
+    : rootMenu.activeIndex === props.uniqueKey.at(-1)!
+})
+
+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,
+})
+</script>
+
+<template>
+  <div
+    ref="itemRef" class="menu-item relative transition-all" :class="{
+      active: isItemActive,
+    }"
+  >
+    <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">
+        <component
+          :is="subMenu ? 'div' : 'a'" v-bind="{
+            ...(!subMenu && {
+              href: item.meta?.link ? item.meta.link : href,
+              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="{
+            '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="{
+            ...(!subMenu && {
+              click: navigate,
+            }),
+          }"
+        >
+          <div
+            class="inline-flex flex-1 items-center justify-center gap-[12px]" :class="{
+              'flex-col': rootMenu.isMenuPopup && level === 0 && rootMenu.props.mode === 'vertical',
+              'gap-1!': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName,
+              'w-full': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName && rootMenu.props.mode === 'vertical',
+            }" :style="indentStyle"
+          >
+            <SvgIcon v-if="props.item.meta?.icon" :name="props.item.meta.icon" :size="20" class="menu-item-container-icon transition-transform group-hover-scale-120" async />
+            <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="{
+                '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]',
+            ]"
+          />
+        </component>
+      </HTooltip>
+    </router-link>
+  </div>
+</template>

src/layouts/components/Menu/sub.vue

@@ -0,0 +1,200 @@
+<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 { rootMenuInjectionKey } from './types'
+
+defineOptions({
+  name: 'SubMenu',
+})
+
+const props = withDefaults(
+  defineProps<SubMenuProps>(),
+  {
+    level: 0,
+  },
+)
+
+const index = props.menu.path ?? JSON.stringify(props.menu)
+const itemRef = shallowRef()
+const subMenuRef = shallowRef<OverlayScrollbarsComponentRef>()
+const rootMenu = inject(rootMenuInjectionKey)!
+
+const opened = computed(() => {
+  return rootMenu.openedMenus.includes(props.uniqueKey.at(-1)!)
+})
+
+const transitionEvent = computed(() => {
+  return rootMenu.isMenuPopup
+    ? {
+        enter(el: HTMLElement) {
+          if (el.offsetHeight > window.innerHeight) {
+            el.style.height = `${window.innerHeight}px`
+          }
+        },
+        afterEnter: () => {},
+        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 = ''
+        },
+      }
+    : {
+        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 = ''
+        },
+      }
+})
+
+const transitionClass = computed(() => {
+  return rootMenu.isMenuPopup
+    ? {
+        enterActiveClass: 'ease-in-out duration-300',
+        enterFromClass: 'opacity-0 translate-x-4',
+        enterToClass: 'opacity-100',
+        leaveActiveClass: 'ease-in-out duration-300',
+        leaveFromClass: 'opacity-100',
+        leaveToClass: 'opacity-0',
+      }
+    : {
+        enterActiveClass: 'ease-in-out duration-300',
+        enterFromClass: 'opacity-0',
+        enterToClass: 'opacity-100',
+        leaveActiveClass: 'ease-in-out duration-300',
+        leaveFromClass: 'opacity-100',
+        leaveToClass: 'opacity-0',
+      }
+})
+
+const hasChildren = computed(() => {
+  let flag = true
+  if (props.menu.children) {
+    if (props.menu.children.every((item: any) => item.meta?.menu === false)) {
+      flag = false
+    }
+  }
+  else {
+    flag = false
+  }
+  return flag
+})
+
+function handleClick() {
+  if (rootMenu.isMenuPopup && hasChildren.value) {
+    return
+  }
+  if (hasChildren.value) {
+    rootMenu.handleSubMenuClick(index, props.uniqueKey)
+  }
+  else {
+    rootMenu.handleMenuItemClick(index)
+  }
+}
+
+let timeout: (() => void) | undefined
+
+function handleMouseenter() {
+  if (!rootMenu.isMenuPopup) {
+    return
+  }
+  rootMenu.mouseInMenu = props.uniqueKey
+  timeout?.()
+  ;({ stop: timeout } = useTimeoutFn(() => {
+    if (hasChildren.value) {
+      rootMenu.openMenu(index, props.uniqueKey)
+      nextTick(() => {
+        const el = itemRef.value.ref
+        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
+          }
+        }
+        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 (left + subMenuRef.value!.getElement()!.offsetWidth > document.documentElement.clientWidth) {
+          left = el.getBoundingClientRect().left - el.getBoundingClientRect().width
+        }
+        subMenuRef.value!.getElement()!.style.top = `${top}px`
+        subMenuRef.value!.getElement()!.style.left = `${left}px`
+      })
+    }
+    else {
+      const path = props.menu.children ? rootMenu.subMenus[index].indexPath.at(-1)! : rootMenu.items[index].indexPath.at(-1)!
+      rootMenu.openMenu(path, rootMenu.subMenus[path].indexPath)
+    }
+  }, 300))
+}
+
+function handleMouseleave() {
+  if (!rootMenu.isMenuPopup) {
+    return
+  }
+  rootMenu.mouseInMenu = []
+  timeout?.()
+  ;({ stop: timeout } = useTimeoutFn(() => {
+    if (rootMenu.mouseInMenu.length === 0) {
+      rootMenu.closeMenu(props.uniqueKey)
+    }
+    else {
+      if (hasChildren.value) {
+        !rootMenu.mouseInMenu.includes(props.uniqueKey.at(-1)!) && rootMenu.closeMenu(props.uniqueKey.at(-1)!)
+      }
+    }
+  }, 300))
+}
+</script>
+
+<template>
+  <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="{
+          '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),
+        }"
+      >
+        <template v-for="item in menu.children" :key="item.path ?? JSON.stringify(item)">
+          <SubMenu v-if="item.meta?.menu !== false" :unique-key="[...uniqueKey, item.path ?? JSON.stringify(item)]" :menu="item" :level="level + 1" />
+        </template>
+      </OverlayScrollbarsComponent>
+    </Transition>
+  </Teleport>
+</template>

src/layouts/components/Menu/types.ts

@@ -0,0 +1,48 @@
+import { createInjectionKey } from '@/utils/injectionKeys'
+import type { Menu } from '#/global'
+
+export interface MenuItem {
+  index: string
+  indexPath: string[]
+  active?: boolean
+}
+
+export interface MenuProps {
+  menu: Menu.recordRaw[]
+  value: string
+  accordion?: boolean
+  defaultOpeneds?: string[]
+  mode?: 'horizontal' | 'vertical'
+  collapse?: boolean
+  showCollapseName?: boolean
+}
+
+export interface MenuInjection {
+  props: MenuProps
+  items: Record<string, MenuItem>
+  subMenus: Record<string, MenuItem>
+  activeIndex: MenuProps['value']
+  openedMenus: string[]
+  mouseInMenu: string[]
+  isMenuPopup: boolean
+  openMenu: (index: string, indexPath: string[]) => void
+  closeMenu: (index: string | string[]) => void
+  handleMenuItemClick: (index: string) => void
+  handleSubMenuClick: (index: string, indexPath: string[]) => void
+}
+
+export const rootMenuInjectionKey = createInjectionKey<MenuInjection>('rootMenu')
+
+export interface SubMenuProps {
+  uniqueKey: string[]
+  menu: Menu.recordRaw
+  level?: number
+}
+
+export interface SubMenuItemProps {
+  uniqueKey: string[]
+  item: Menu.recordRaw
+  level?: number
+  subMenu?: boolean
+  expand?: boolean
+}