chore: release 5.0.0-beta.6

Co-authored-by: pany <939630029@qq.com>

.editorconfig

@@ -1,25 +1,24 @@
-# 修改配置后重启编辑器
-# 配置项文档：https://editorconfig.org/
+# 配置项文档：https://editorconfig.org（修改配置后重启编辑器）
 
-# 告知 EditorConfig 插件，当前即是根文件
+## 告知 EditorConfig 插件，当前即是根文件
 root = true
 
-# 适用全部文件
+## 适用全部文件
 [*]
-## 设置字符集
+### 设置字符集
 charset = utf-8
-## 缩进风格 space | tab，建议 space（会自动继承给 Prettier）
+### 缩进风格 space | tab，建议 space
 indent_style = space
-## 缩进的空格数（会自动继承给 Prettier）
+### 缩进的空格数
 indent_size = 2
-## 换行符类型 lf | cr | crlf，一般都是设置为 lf
+### 换行符类型 lf | cr | crlf，一般都是设置为 lf
 end_of_line = lf
-## 是否在文件末尾插入空白行
+### 是否在文件末尾插入空白行
 insert_final_newline = true
-## 是否删除一行中的前后空格
+### 是否删除一行中的前后空格
 trim_trailing_whitespace = true
 
-# 适用 .md 文件
+## 适用 .md 文件
 [*.md]
 insert_final_newline = false
 trim_trailing_whitespace = false

.env

@@ -1,4 +1,7 @@
-# 所有环境自定义的环境变量（命名必须以 VITE_ 开头）
+# 所有环境的环境变量（命名必须以 VITE_ 开头）
 
 ## 项目标题
 VITE_APP_TITLE = V3 Admin Vite
+
+## 路由模式 hash 或 html5
+VITE_ROUTER_HISTORY = hash

.env.development

@@ -1,10 +1,7 @@
-# 开发环境自定义的环境变量（命名必须以 VITE_ 开头）
+# 开发环境的环境变量（命名必须以 VITE_ 开头）
 
-## 后端接口公共路径（如果解决跨域问题采用反向代理就只需写公共路径）
-VITE_BASE_API = '/api/v1'
+## 后端接口地址（如果解决跨域问题采用反向代理就只需写相对路径）
+VITE_BASE_URL = /api/v1
 
-## 路由模式 hash 或 html5
-VITE_ROUTER_HISTORY = 'hash'
-
-## 开发环境地址前缀（一般 '/'，'./' 都可以）
-VITE_PUBLIC_PATH = '/'
+## 开发环境域名和静态资源公共路径（一般 / 或 ./ 都可以）
+VITE_PUBLIC_PATH = /

.env.production

@@ -1,10 +1,7 @@
-# 生产环境自定义的环境变量（命名必须以 VITE_ 开头）
+# 生产环境的环境变量（命名必须以 VITE_ 开头）
 
-## 后端接口公共路径（如果解决跨域问题采用 CORS 就需要写全路径）
-VITE_BASE_API = 'https://mock.mengxuegu.com/mock/63218b5fb4c53348ed2bc212/api/v1'
+## 后端接口地址（如果解决跨域问题采用 CORS 就需要写绝对路径）
+VITE_BASE_URL = https://apifoxmock.com/m1/2930465-2145633-default/api/v1
 
-## 路由模式 hash 或 html5
-VITE_ROUTER_HISTORY = 'hash'
-
-## 打包路径（就是网站前缀，例如部署到 https://un-pany.github.io/v3-admin-vite/ 域名下，就需要填写 /v3-admin-vite/）
-VITE_PUBLIC_PATH = '/v3-admin-vite/'
+## 打包构建静态资源公共路径（例如部署到 https://un-pany.github.io/v3-admin-vite/ 域名下就需要填写 /v3-admin-vite/）
+VITE_PUBLIC_PATH = /v3-admin-vite/

.env.staging

@@ -1,10 +1,7 @@
-# 预发布环境自定义的环境变量（命名必须以 VITE_ 开头）
+# 预发布环境的环境变量（命名必须以 VITE_ 开头）
 
-## 后端接口公共路径（如果解决跨域问题采用 CORS 就需要写全路径）
-VITE_BASE_API = 'https://mock.mengxuegu.com/mock/63218b5fb4c53348ed2bc212/api/v1'
+## 后端接口地址（如果解决跨域问题采用 CORS 就需要写绝对路径）
+VITE_BASE_URL = https://apifoxmock.com/m1/2930465-2145633-default/api/v1
 
-## 路由模式 hash 或 html5
-VITE_ROUTER_HISTORY = 'hash'
-
-## 打包路径（就是网站前缀，例如部署到 https://un-pany.github.io/v3-admin-vite/ 域名下，就需要填写 /v3-admin-vite/）
-VITE_PUBLIC_PATH = '/v3-admin-vite/'
+## 打包构建静态资源公共路径（例如部署到 https://un-pany.github.io/ 域名下就需要填写 /）
+VITE_PUBLIC_PATH = /

.eslintignore

@@ -1,8 +0,0 @@
-# Eslint 会忽略的文件
-
-.DS_Store
-node_modules
-dist
-dist-ssr
-*.local
-.npmrc

.eslintrc.cjs

@@ -1,75 +0,0 @@
-module.exports = {
-  root: true,
-  env: {
-    browser: true,
-    node: true,
-    es6: true
-  },
-  extends: [
-    "plugin:vue/vue3-essential",
-    "eslint:recommended",
-    "@vue/typescript/recommended",
-    "@vue/prettier",
-    "@vue/eslint-config-typescript"
-  ],
-  parser: "vue-eslint-parser",
-  parserOptions: {
-    parser: "@typescript-eslint/parser",
-    ecmaVersion: 2020,
-    sourceType: "module",
-    jsxPragma: "React",
-    ecmaFeatures: {
-      jsx: true,
-      tsx: true
-    }
-  },
-  rules: {
-    // TS
-    "@typescript-eslint/no-unused-expressions": "off",
-    "@typescript-eslint/no-explicit-any": "off",
-    "no-debugger": "off",
-    "@typescript-eslint/explicit-module-boundary-types": "off",
-    "@typescript-eslint/ban-types": "off",
-    "@typescript-eslint/ban-ts-comment": "off",
-    "@typescript-eslint/no-empty-function": "off",
-    "@typescript-eslint/no-non-null-assertion": "off",
-    "@typescript-eslint/no-unused-vars": [
-      "error",
-      {
-        argsIgnorePattern: "^_",
-        varsIgnorePattern: "^_"
-      }
-    ],
-    "no-unused-vars": [
-      "error",
-      {
-        argsIgnorePattern: "^_",
-        varsIgnorePattern: "^_"
-      }
-    ],
-    // Vue
-    "vue/no-v-html": "off",
-    "vue/require-default-prop": "off",
-    "vue/require-explicit-emits": "off",
-    "vue/multi-word-component-names": "off",
-    "vue/html-self-closing": [
-      "error",
-      {
-        html: {
-          void: "always",
-          normal: "always",
-          component: "always"
-        },
-        svg: "always",
-        math: "always"
-      }
-    ],
-    // Prettier
-    "prettier/prettier": [
-      "error",
-      {
-        endOfLine: "auto"
-      }
-    ]
-  }
-}

.github/workflows/deploy.yml

@@ -14,18 +14,18 @@ jobs:
         with:
           persist-credentials: false
 
-      - name: Setup Node.js 20.17.0
+      - name: Setup Node.js
         uses: actions/setup-node@master
         with:
-          node-version: 20.17.0
+          node-version: 22.12.0
 
       - name: Setup pnpm
         uses: pnpm/action-setup@v2
         with:
-          version: 9.11.0
+          version: 10.2.0
 
       - name: Build
-        run: pnpm install && pnpm build:prod
+        run: pnpm install && pnpm build
 
       - name: Deploy
         uses: JamesIves/github-pages-deploy-action@releases/v3

.github/workflows/release.yml

@@ -16,9 +16,11 @@ jobs:
         with:
           fetch-depth: 0
 
-      - uses: actions/setup-node@v4
+      - name: Set node
+        uses: actions/setup-node@v4
         with:
-          node-version: 20.17.0
+          registry-url: https://registry.npmjs.org/
+          node-version: lts/*
 
       - run: npx changelogithub
         env:

.gitignore

@@ -1,35 +1,18 @@
-# Git 会忽略的文件
-
-.DS_Store
-node_modules
+# Common
 dist
-dist-ssr
+node_modules
 .eslintcache
+vite.config.*.timestamp*
+
+# MacOS
+.DS_Store
 
 # Local env files
 *.local
 
 # Logs
-logs
 *.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
 
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-!.vscode/settings.json
-!.vscode/*.code-snippets
-.idea
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
-
-# Use the PNPM
+# Use the pnpm
 package-lock.json
 yarn.lock

.husky/pre-commit

@@ -1,2 +1,4 @@
-npx vue-tsc --noEmit
+# 全局 ts 类型检查（此操作会增加 git commit 时长）
+npx vue-tsc
+# 执行 lint-staged 中配置的任务
 npx lint-staged

.npmrc

@@ -1,8 +1,5 @@
 # China mirror of npm
 registry = https://registry.npmmirror.com
 
-# 通过该配置兜底解决组件没有类型提示的问题
-shamefully-hoist = true
-
 # 安装依赖时锁定版本号
 save-exact = true

.prettierignore

@@ -1,8 +0,0 @@
-# Prettier 会忽略的文件
-
-.DS_Store
-node_modules
-dist
-dist-ssr
-*.local
-.npmrc

.vscode/extensions.json

@@ -1,9 +1,8 @@
 {
   "recommendations": [
+    "vue.volar",
     "editorconfig.editorconfig",
     "dbaeumer.vscode-eslint",
-    "esbenp.prettier-vscode",
-    "vue.volar",
     "antfu.unocss",
     "vitest.explorer",
     "wiensss.region-highlighter"

.vscode/hook.code-snippets

@@ -1,16 +1,15 @@
 {
-  "Vue3 Hook 代码结构一键生成": {
-    "prefix": "Vue3 Hook",
+  "Vue3 Composable 代码结构一键生成": {
+    "prefix": "Vue3 Composable",
     "body": [
-      "import { ref } from \"vue\"\n",
       "const refName1 = ref<string>(\"这是一个响应式变量\")\n",
-      "export function useHookName() {",
+      "export function useName() {",
       "\tconst refName2 = ref<string>(\"这是一个响应式变量\")\n",
       "\tconst fnName = () => {}\n",
       "\treturn { refName1, refName2, fnName }",
       "}",
       "$1"
     ],
-    "description": "Vue3 Hook"
+    "description": "Vue3 Composable"
   }
 }

.vscode/settings.json

@@ -1,31 +1,53 @@
 {
+  // Use workspace TypeScript version
   "typescript.tsdk": "node_modules/typescript/lib",
-  "prettier.enable": true,
+
+  // Disable the default formatter, use eslint instead
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+
+  // Auto fix
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit"
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
   },
-  "[vue]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[javascript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[typescript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[json]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[jsonc]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[html]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[css]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[scss]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  }
+
+  // Silent the stylistic rules in you IDE, but still auto fix them
+  "eslint.rules.customizations": [
+    { "rule": "style/*", "severity": "off", "fixable": true },
+    { "rule": "format/*", "severity": "off", "fixable": true },
+    { "rule": "*-indent", "severity": "off", "fixable": true },
+    { "rule": "*-spacing", "severity": "off", "fixable": true },
+    { "rule": "*-spaces", "severity": "off", "fixable": true },
+    { "rule": "*-order", "severity": "off", "fixable": true },
+    { "rule": "*-dangle", "severity": "off", "fixable": true },
+    { "rule": "*-newline", "severity": "off", "fixable": true },
+    { "rule": "*quotes", "severity": "off", "fixable": true },
+    { "rule": "*semi", "severity": "off", "fixable": true }
+  ],
+
+  // Enable eslint for all supported languages
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml",
+    "toml",
+    "xml",
+    "gql",
+    "graphql",
+    "astro",
+    "svelte",
+    "css",
+    "less",
+    "scss",
+    "pcss",
+    "postcss"
+  ]
 }

.vscode/vue.code-snippets

@@ -4,7 +4,9 @@
     "body": [
       "<script lang=\"ts\" setup></script>\n",
       "<template>",
-      "\t<div class=\"app-container\"></div>",
+      "\t<div class=\"app-container\">",
+      "\t\t...",
+      "\t</div>",
       "</template>\n",
       "<style lang=\"scss\" scoped></style>",
       "$1"

README.md

@@ -1,160 +1,227 @@
 <div align="center">
-  <img alt="V3 Admin Vite Logo" width="120" height="120" src="./src/assets/layouts/logo.png">
+  <img alt="logo" width="120" height="120" src="./src/common/assets/images/layouts/logo.png">
   <h1>V3 Admin Vite</h1>
-  <span>English | <a href="./README.zh-CN.md">中文</a></span>
 </div>
 
-## ⚡ Introduction
+[![github release](https://img.shields.io/github/v/release/un-pany/v3-admin-vite?style=flat)](https://github.com/un-pany/v3-admin-vite/releases)
+[![github stars](https://img.shields.io/github/stars/un-pany/v3-admin-vite?style=flat)](https://github.com/un-pany/v3-admin-vite/stargazers)
+[![gitee stars](https://gitee.com/un-pany/v3-admin-vite/badge/star.svg)](https://gitee.com/un-pany/v3-admin-vite/stargazers)
 
-V3 Admin Vite is a free and open source middle and background management system basic solution, based on mainstream framework such as Vue3, TypeScript, Element Plus, Pinia and Vite
+<b>English | <a href="./README.zh-CN.md">中文</a></b>
 
-- Vue Cli 5.x: [v3-admin](https://github.com/un-pany/v3-admin)
-- Electron desktop: [v3-electron-vite](https://github.com/un-pany/v3-electron-vite)
+## Introduction
 
-China repository: [Gitee](https://gitee.com/un-pany/v3-admin-vite)
+V3 Admin Vite is a well-crafted backend management system template, built with popular technologies such as Vue3, Vite, TypeScript, and Element Plus
 
-## 📚 Document
+## Notifications
 
-- Chinese documentation: [link](https://juejin.cn/post/7089377403717287972)
-- Chinese getting started tutorial: [link](https://juejin.cn/column/7207659644487139387)
+> [!NOTE]
+> Powered by love! All source code is free and open-source. If you find it helpful, feel free to give a star to support!
 
-## 📺 Online preview
+> [!IMPORTANT]
+> Welcome to experience the brand-new version 5.0, currently in the beta stage. It will be a masterpiece!
 
-| Location     | account             | Link                                            |
-| ------------ | ------------------- | ----------------------------------------------- |
-| github-pages | `admin` or `editor` | [link](https://un-pany.github.io/v3-admin-vite) |
+> [!WARNING]
+> Version 4.x will no longer be maintained unless there are critical bugs! [Click to switch to the 4.x branch](https://github.com/un-pany/v3-admin-vite/tree/4.x)
 
-## ❤️ Generate electricity with love
+> [!TIP]
+> Paid services are officially launched! If you don’t want to do it yourself but want to remove TS or other modules, try the lazy package! [Click to check it out](https://github.com/un-pany/v3-admin-vite/issues/225)
 
-- **Completely free**：But hopefully you order a star !!!
-- **Very concise**：No complicated encapsulation, no complicated type gymnastics, out of the box
-- **Detailed annotations**：Each configuration item is written with as detailed comments as possible
-- **Latest dependencies**: Regularly update all third-party dependencies to the latest version
-- **Very specification**: The code style is unified, the naming style is unified, and the comment style is unified
+> [!TIP]
+> If you have mobile web app needs, try the new open-source template. [MobVue](https://github.com/un-pany/mobvue)
 
-## Feature
+## Usage
 
-- **Vue3**：The latest Vue3 composition API using Vue3 + script setup
-- **Element Plus**：Vue3 version of Element UI
-- **Pinia**: An alternative to Vuex in Vue3
-- **Vite**：Really fast
-- **Vue Router**：router
-- **TypeScript**：JavaScript With Syntax For Types
-- **PNPM**：Faster, disk space saving package management tool
-- **Scss**：Consistent with Element Plus
-- **CSS variable**：Mainly controls the layout and color of the item
-- **ESlint**：Code verification
-- **Prettier**： Code formatting
-- **Axios**: Promise based HTTP client (encapsulated)
-- **UnoCSS**: Real-time atomized CSS engine with high performance and flexibility
-- **Mobile Compatible**: The layout is compatible with mobile page resolution
+<details>
+<summary>Recommended Environment</summary>
 
-## Functions
+<br>
 
-- **User management**: Log in and out of the demo
-- **Authority management**: Page-level permissions (dynamic routing), button-level permissions (directive permissions, permission functions), and route navigation guards
-- **Multiple Environments**: Development, Staging, Production
-- **Multiple themes**: Normal, Dark, Dark Blue, three theme modes
-- **Multiple layouts**：Left, Top, Left Top, three layout modes
-- **Error page**: 403, 404
-- **Dashboard**: Display different Dashboard pages according to different users
-- **Other functions**：SVG, Dynamic Sidebar, Dynamic Breadcrumb Navigation, Tabbed Navigation, Screenfull, Adaptive Shrink Sidebar, Hook (Composables)
+- Latest version of `Visual Studio Code`
+- Install the recommended plugins in the `.vscode/extensions.json` file
+- `node` 20.x or 22+
+- `pnpm` 9.x or 10+
 
-## 🚀 Development
+</details>
+
+<details>
+<summary>Local Development</summary>
+
+<br>
 
 ```bash
-# configure
-1. installation of the recommended plugins in the .vscode directory
-2. node version 18.x or 20+
-3. pnpm version 8.x or latest
-
-# clone
+# Clone the project
 git clone https://github.com/un-pany/v3-admin-vite.git
 
-# enter the project directory
+# Enter the project directory
 cd v3-admin-vite
 
-# install dependencies
+# Install dependencies
 pnpm i
 
-# start the service
+# Start the development server
 pnpm dev
 ```
 
-## ✔️ Preview
+</details>
+
+<details>
+<summary>Build</summary>
+
+<br>
 
 ```bash
-# stage environment
-pnpm preview:stage
+# Build for the staging environment
+pnpm build:staging
 
-# prod environment
-pnpm preview:prod
+# Build for the production environment
+pnpm build
 ```
 
-## 📦️ Multi-environment packaging
+</details>
+
+<details>
+<summary>Local Preview</summary>
+
+<br>
 
 ```bash
-# build the stage environment
-pnpm build:stage
-
-# build the prod environment
-pnpm build:prod
+# Execute the build command first to generate the dist directory, then run the preview command
+pnpm preview
 ```
 
-## 🔧 Code inspection
+</details>
+
+<details>
+<summary>Code Check</summary>
+
+<br>
 
 ```bash
-# code formatting
+# Code linting and formatting
 pnpm lint
 
-# unit test
+# Unit tests
 pnpm test
 ```
 
-## Git commit specification reference
+</details>
 
-- `feat` add new functions
-- `fix` Fix issues/bugs
-- `perf` Optimize performance
-- `style` Change the code style without affecting the running result
-- `refactor` Re-factor code
-- `revert` Undo changes
-- `test` Test related, does not involve changes to business code
-- `docs` Documentation and Annotation
-- `chore` Updating dependencies/modifying scaffolding configuration, etc.
-- `workflow` Work flow Improvements
-- `ci` CICD
-- `types` Type definition
-- `wip` In development
+<details>
+<summary>Commit Guidelines</summary>
 
-## Project preview
+<br>
 
-![preview1.png](./src/assets/docs/preview1.png)
-![preview2.png](./src/assets/docs/preview2.png)
-![preview3.png](./src/assets/docs/preview3.png)
+`feat` New feature
 
-## 💕 Contributors
+`fix` Bug fix
 
-Thanks to all the contributors!
+`perf` Performance improvement
+
+`refactor` Code refactoring
+
+`docs` Documentation and comments
+
+`types` Type-related changes
+
+`test` Unit tests related
+
+`ci` Continuous integration, workflows
+
+`revert` Revert changes
+
+`chore` Chores (update dependencies, modify configurations, etc)
+
+</details>
+
+## Links
+
+**Online Preview**: [github-pages](https://un-pany.github.io/v3-admin-vite)
+
+**Chinese Documentation**: [link](https://juejin.cn/post/7089377403717287972)
+
+**Zero to Hero Tutorial**: [link](https://juejin.cn/column/7207659644487139387)
+
+**Mobile Web App**: [mobvue](https://github.com/un-pany/mobvue)
+
+**Electron Desktop Version**: [v3-electron-vite](https://github.com/un-pany/v3-electron-vite)
+
+**Chinese Repository**: [gitee](https://gitee.com/un-pany/v3-admin-vite)
+
+**Optional Group**: [check how to join](https://github.com/un-pany/v3-admin-vite/issues/191)
+
+**Donations**: [buy a coffee for the author](https://github.com/un-pany/v3-admin-vite/issues/69)
+
+**Releases & Changelog**: [releases](https://github.com/un-pany/v3-admin-vite/releases)
+
+## Features
+
+**Simplified structure**: No complex encapsulation, no complicated type gymnastics, just enough to meet the needs
+
+**Detailed comments**: Every configuration item comes with as detailed comments as possible
+
+**Latest dependencies**: Keeps all third-party dependencies up to date
+
+**Consistency**: Unified code style, naming conventions, and comment style
+
+## Built-in Features
+
+**User Management**: Login, logout demonstration
+
+**Permission Management**: Page-level permissions (dynamic routing), button-level permissions (permission directives, permission functions), route guards
+
+**Multiple Environments**: Development, staging, and production environments
+
+**Multiple Themes**: Normal, dark, and deep blue themes
+
+**Multiple Layouts**: Left-side, top, and hybrid layouts
+
+**Homepage**: Different dashboard pages for different users
+
+**Error Pages**: 403, 404
+
+**Mobile Compatibility**: Layouts compatible with mobile screen resolutions
+
+**Others**: SVG sprite sheet, dynamic sidebar, dynamic breadcrumbs, tab navigation, content zoom and fullscreen, composable functions
+
+## Tech Stack
+
+**Vue3**: Vue3 + script setup with the latest Vue3 Composition API
+
+**Element Plus**: The Vue3 version of Element UI
+
+**Pinia**: The legendary Vuex5
+
+**Vite**: Really fast
+
+**Vue Router**: The routing system
+
+**TypeScript**: A superset of JavaScript
+
+**pnpm**: A faster, disk-space-saving package manager
+
+**Scss**: Consistent with Element Plus
+
+**CSS Variables**: Primarily controls layout and color in the project
+
+**ESLint**: Code linting and formatting
+
+**Axios**: Sends network requests
+
+**UnoCSS**: A high-performance, flexible atomic CSS engine
+
+## Project Preview Image
+
+![preview](./src/common/assets/images/docs/preview.png)
+
+## Contributors
+
+A big thank you to all the contributors!
 
 <a href="https://github.com/un-pany/v3-admin-vite/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=un-pany/v3-admin-vite" />
+  <img src="https://contrib.rocks/image?repo=un-pany/v3-admin-vite">
 </a>
 
-## 💕 Thanks star
+## License
 
-Small projects are not easy to get a star, if you like this project, welcome to support a star! This is the only motivation for the author to maintain it on an ongoing basis (whisper: it's free after all)
-
-## ☕ Donate
-
-[See how to donate](https://github.com/un-pany/v3-admin-vite/issues/69)
-
-## Group
-
-[See how to join a group chat](https://github.com/un-pany/v3-admin-vite/issues/191)
-
-## 📄 License
-
-[MIT](./LICENSE)
-
-Copyright (c) 2022-present [pany](https://github.com/pany-ang)
+[MIT](./LICENSE) License © 2022-PRESENT [pany](https://github.com/pany-ang)

README.zh-CN.md

@@ -1,73 +1,55 @@
 <div align="center">
-  <img alt="V3 Admin Vite Logo" width="120" height="120" src="./src/assets/layouts/logo.png">
+  <img alt="logo" width="120" height="120" src="./src/common/assets/images/layouts/logo.png">
   <h1>V3 Admin Vite</h1>
-  <span><a href="./README.md">English</a> | 中文</span>
 </div>
 
-## ⚡ 简介
+[![github release](https://img.shields.io/github/v/release/un-pany/v3-admin-vite?style=flat)](https://github.com/un-pany/v3-admin-vite/releases)
+[![github stars](https://img.shields.io/github/stars/un-pany/v3-admin-vite?style=flat)](https://github.com/un-pany/v3-admin-vite/stargazers)
+[![gitee stars](https://gitee.com/un-pany/v3-admin-vite/badge/star.svg)](https://gitee.com/un-pany/v3-admin-vite/stargazers)
 
-V3 Admin Vite 是一个免费开源的中后台管理系统基础解决方案，基于 Vue3、TypeScript、Element Plus、Pinia 和 Vite 等主流技术
+<b><a href="./README.md">English</a> | 中文</b>
 
-- Vue Cli 5.x 版: [v3-admin](https://github.com/un-pany/v3-admin)
-- Electron 桌面版: [v3-electron-vite](https://github.com/un-pany/v3-electron-vite)
+## 简介
 
-国内仓库：[Gitee](https://gitee.com/un-pany/v3-admin-vite)
+V3 Admin Vite 是一个精心制作的后台管理系统模板，基于 Vue3、Vite、TypeScript、Element Plus 等主流技术
 
-## 📚 文档
+## 通知
 
-- 中文文档：[链接](https://juejin.cn/post/7089377403717287972)
-- 手摸手教程：[链接](https://juejin.cn/column/7207659644487139387)
+> [!NOTE]
+> 为爱发电！所有源码均免费开源，如果对你有帮助，欢迎点个 Star 支持一下！
 
-## 📺 在线预览
+> [!IMPORTANT]
+> 欢迎体验全新的 5.0 版本，目前正在 beta 阶段，它将是一次匠心之作！
 
-| 位置         | 账号            | 链接                                            |
-| ------------ | --------------- | ----------------------------------------------- |
-| github-pages | admin 或 editor | [链接](https://un-pany.github.io/v3-admin-vite) |
+> [!WARNING]
+> 4.x 版本如果没有严重的 BUG 将不再维护！[点击切换到 4.x 分支](https://github.com/un-pany/v3-admin-vite/tree/4.x)
 
-## ❤️ 用爱发电
+> [!TIP]
+> 正式推出付费服务，如果不想自己动手，但想移除 TS 或其他模块？试试懒人套餐！[点击看看](https://github.com/un-pany/v3-admin-vite/issues/225)
 
-- **完全免费**：但希望你点一个 star ！！！
-- **非常简洁**：没有复杂的封装，没有复杂的类型体操，开箱即用
-- **详细的注释**：各个配置项都写有尽可能详细的注释
-- **最新的依赖**: 定期更新所有三方依赖至最新版
-- **有一点规整**: 代码风格统一，命名风格统一，注释风格统一
+> [!TIP]
+> 如果你有移动端 H5 需求，试试新的开源模板。[MobVue](https://github.com/un-pany/mobvue)
 
-## 特性
+## 使用
 
-- **Vue3**：采用 Vue3 + script setup 最新的 Vue3 组合式 API
-- **Element Plus**：Element UI 的 Vue3 版本
-- **Pinia**: 传说中的 Vuex5
-- **Vite**：真的很快
-- **Vue Router**：路由路由
-- **TypeScript**：JavaScript 语言的超集
-- **PNPM**：更快速的，节省磁盘空间的包管理工具
-- **Scss**：和 Element Plus 保持一致
-- **CSS 变量**：主要控制项目的布局和颜色
-- **ESlint**：代码校验
-- **Prettier**：代码格式化
-- **Axios**：发送网络请求（已封装好）
-- **UnoCSS**：具有高性能且极具灵活性的即时原子化 CSS 引擎
-- **兼容移动端**: 布局兼容移动端页面分辨率
+<details>
+<summary>推荐环境</summary>
 
-## 功能
+<br>
 
-- **用户管理**：登录、登出演示
-- **权限管理**：页面级权限（动态路由）、按钮级权限（指令权限、权限函数）、路由守卫
-- **多环境**：开发环境（development）、预发布环境（staging）、正式环境（production）
-- **多主题**：普通、黑暗、深蓝, 三种主题模式
-- **多布局**：左侧、顶部、混合, 三种布局模式
-- **错误页面**: 403、404
-- **Dashboard**：根据不同用户显示不同的 Dashboard 页面
-- **其他内置功能**：SVG、动态侧边栏、动态面包屑、标签页快捷导航、Screenfull 全屏、自适应收缩侧边栏、Hook（Composables）
+- 新版 `Visual Studio Code`
+- 安装 `.vscode/extensions.json` 文件中推荐的插件
+- `node` 20.x 或 22+
+- `pnpm` 9.x 或 10+
 
-## 🚀 开发
+</details>
+
+<details>
+<summary>本地开发</summary>
+
+<br>
 
 ```bash
-# 配置
-1. 一键安装 .vscode 目录中推荐的插件
-2. node 版本 18.x 或 20+
-3. pnpm 版本 8.x 或最新版
-
 # 克隆项目
 git clone https://github.com/un-pany/v3-admin-vite.git
 
@@ -81,80 +63,165 @@ pnpm i
 pnpm dev
 ```
 
-## ✔️ 预览
+</details>
+
+<details>
+<summary>打包构建</summary>
+
+<br>
 
 ```bash
-# 预览预发布环境
-pnpm preview:stage
+# 打包构建预发布环境
+pnpm build:staging
 
-# 预览正式环境
-pnpm preview:prod
+# 打包构建生产环境
+pnpm build
 ```
 
-## 📦️ 多环境打包
+</details>
+
+<details>
+<summary>本地预览</summary>
+
+<br>
 
 ```bash
-# 构建预发布环境
-pnpm build:stage
-
-# 构建正式环境
-pnpm build:prod
+# 先执行打包构建命令生成 dist 目录后再执行以下预览命令
+pnpm preview
 ```
 
-## 🔧 代码检查
+</details>
+
+<details>
+<summary>代码检查</summary>
+
+<br>
 
 ```bash
-# 代码格式化
+# 代码校验与格式化
 pnpm lint
 
 # 单元测试
 pnpm test
 ```
 
-## Git 提交规范参考
+</details>
 
-- `feat` 增加新的业务功能
-- `fix` 修复业务问题/BUG
-- `perf` 优化性能
-- `style` 更改代码风格, 不影响运行结果
-- `refactor` 重构代码
-- `revert` 撤销更改
-- `test` 测试相关, 不涉及业务代码的更改
-- `docs` 文档和注释相关
-- `chore` 更新依赖/修改脚手架配置等琐事
-- `workflow` 工作流改进
-- `ci` 持续集成相关
-- `types` 类型定义文件更改
-- `wip` 开发中
+<details>
+<summary>代码提交规范</summary>
+
+<br>
+
+`feat` 新功能
+
+`fix` 修复错误
+
+`perf` 性能优化
+
+`refactor` 重构代码
+
+`docs` 文档和注释
+
+`types` 类型相关
+
+`test` 单测相关
+
+`ci` 持续集成、工作流
+
+`revert` 撤销更改
+
+`chore` 琐事（更新依赖、修改配置等）
+
+</details>
+
+## 链接
+
+**在线预览**：[github-pages](https://un-pany.github.io/v3-admin-vite)
+
+**中文文档**：[链接](https://juejin.cn/post/7445151895121543209)
+
+**零基础教程**：[链接](https://juejin.cn/column/7207659644487139387)
+
+**移动端 H5**：[mobvue](https://github.com/un-pany/mobvue)
+
+**Electron 桌面版**：[v3-electron-vite](https://github.com/un-pany/v3-electron-vite)
+
+**国内仓库**：[gitee](https://gitee.com/un-pany/v3-admin-vite)
+
+**可有可无的群**：[查看进群方式](https://github.com/un-pany/v3-admin-vite/issues/191)
+
+**捐赠**：[请作者喝咖啡](https://github.com/un-pany/v3-admin-vite/issues/69)
+
+**发行版 & 更新日志**：[releases](https://github.com/un-pany/v3-admin-vite/releases)
+
+## 特性
+
+**结构精简**：没有复杂的封装，没有复杂的类型体操，刚好够用
+
+**详细的注释**：各个配置项都写有尽可能详细的注释
+
+**最新的依赖**：及时更新所有三方依赖至最新版
+
+**有一点规范**：代码风格统一、命名风格统一、注释风格统一
+
+## 内置功能
+
+**用户管理**：登录、登出演示
+
+**权限管理**：页面级权限（动态路由）、按钮级权限（权限指令、权限函数）、路由守卫
+
+**多环境**：开发环境（development）、预发布环境（staging）、生产环境（production）
+
+**多主题**：普通、黑暗、深蓝, 三种主题模式
+
+**多布局**：左侧、顶部、混合, 三种布局模式
+
+**首页**：根据不同用户显示不同的 Dashboard 页面
+
+**错误页**：403、404
+
+**兼容移动端**：布局兼容移动端页面分辨率
+
+**其他**：SVG 雪碧图、动态侧边栏、动态面包屑、标签页快捷导航、内容区放大与全屏、组合式函数
+
+## 技术栈
+
+**Vue3**：采用 Vue3 + script setup 最新的 Vue3 组合式 API
+
+**Element Plus**：Element UI 的 Vue3 版本
+
+**Pinia**：传说中的 Vuex5
+
+**Vite**：真的很快
+
+**Vue Router**：路由路由
+
+**TypeScript**：JavaScript 语言的超集
+
+**pnpm**：更快速的，节省磁盘空间的包管理工具
+
+**Scss**：和 Element Plus 保持一致
+
+**CSS 变量**：主要控制项目的布局和颜色
+
+**ESLint**：代码校验与格式化
+
+**Axios**：发送网络请求（已封装好）
+
+**UnoCSS**：具有高性能且极具灵活性的即时原子化 CSS 引擎
 
 ## 项目预览图
 
-![preview1.png](./src/assets/docs/preview1.png)
-![preview2.png](./src/assets/docs/preview2.png)
-![preview3.png](./src/assets/docs/preview3.png)
+![preview](./src/common/assets/images/docs/preview.png)
 
-## 💕 贡献者
+## 贡献者
 
-感谢所有的贡献者！
+在此感谢所有的贡献者！
 
 <a href="https://github.com/un-pany/v3-admin-vite/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=un-pany/v3-admin-vite" />
+  <img src="https://contrib.rocks/image?repo=un-pany/v3-admin-vite">
 </a>
 
-## 💕 感谢 Star
+## License
 
-小项目获取 star 不易，如果你喜欢这个项目的话，欢迎支持一个 star！这是作者持续维护的唯一动力（小声：毕竟是免费的）
-
-## ☕ Donate
-
-[查看捐赠方式](https://github.com/un-pany/v3-admin-vite/issues/69)
-
-## 可有可无的群
-
-[查看进群方式](https://github.com/un-pany/v3-admin-vite/issues/191)
-
-## 📄 License
-
-[MIT](./LICENSE)
-
-Copyright (c) 2022-present [pany](https://github.com/pany-ang)
+[MIT](./LICENSE) License © 2022-PRESENT [pany](https://github.com/pany-ang)

changelogithub.config.json

@@ -1,16 +0,0 @@
-{
-  "types": {
-    "feat": { "title": "Feat" },
-    "fix": { "title": "Fix" },
-    "perf": { "title": "Perf" },
-    "style": { "title": "Style" },
-    "refactor": { "title": "Refactor" },
-    "revert": { "title": "Revert" },
-    "test": { "title": "Test" },
-    "docs": { "title": "Docs" },
-    "chore": { "title": "Chore" },
-    "workflow": { "title": "Workflow" },
-    "ci": { "title": "CI" },
-    "types": { "title": "Types" }
-  }
-}

eslint.config.js

@@ -0,0 +1,43 @@
+import antfu from "@antfu/eslint-config"
+
+// 更多自定义配置可查阅仓库：https://github.com/antfu/eslint-config
+export default antfu(
+  {
+    // 使用外部格式化程序格式化 css、html、markdown 等文件
+    formatters: true,
+    // 启用样式规则
+    stylistic: {
+      // 缩进级别
+      indent: 2,
+      // 引号风格 'single' | 'double'
+      quotes: "double",
+      // 是否启用分号
+      semi: false
+    },
+    // 忽略文件
+    ignores: []
+  },
+  {
+    // 对所有文件都生效的规则
+    rules: {
+      // vue
+      "vue/block-order": ["error", { order: ["script", "template", "style"] }],
+      "vue/attributes-order": "off",
+      // ts
+      "ts/no-use-before-define": "off",
+      // node
+      "node/prefer-global/process": "off",
+      // style
+      "style/comma-dangle": ["error", "never"],
+      "style/brace-style": ["error", "1tbs"],
+      // regexp
+      "regexp/no-unused-capturing-group": "off",
+      // other
+      "no-console": "off",
+      "no-debugger": "off",
+      "symbol-description": "off",
+      "antfu/if-newline": "off",
+      "unicorn/no-instanceof-builtins": "off"
+    }
+  }
+)

package.json

@@ -1,34 +1,24 @@
 {
   "name": "v3-admin-vite",
-  "version": "4.5.5",
-  "description": "一个免费开源的中后台管理系统基础解决方案，基于 Vue3、TypeScript、Element Plus、Pinia 和 Vite 等主流技术",
-  "author": {
-    "name": "pany",
-    "email": "939630029@qq.com",
-    "url": "https://github.com/pany-ang"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/un-pany/v3-admin-vite.git"
-  },
   "type": "module",
+  "version": "5.0.0-beta.6",
+  "description": "A crafted admin template, built with Vue3, Vite, TypeScript, Element Plus, and more",
+  "author": "pany <939630029@qq.com> (https://github.com/pany-ang)",
+  "repository": "https://github.com/un-pany/v3-admin-vite",
   "scripts": {
     "dev": "vite",
-    "build:stage": "vue-tsc --noEmit && vite build --mode staging",
-    "build:prod": "vue-tsc --noEmit && vite build",
-    "preview:stage": "pnpm build:stage && vite preview",
-    "preview:prod": "pnpm build:prod && vite preview",
-    "lint:eslint": "eslint --cache --max-warnings 0 \"{src,tests,types}/**/*.{vue,js,jsx,ts,tsx}\" --fix",
-    "lint:prettier": "prettier --write \"{src,tests,types}/**/*.{vue,js,jsx,ts,tsx,json,css,less,scss,html,md}\"",
-    "lint": "pnpm lint:eslint && pnpm lint:prettier",
+    "build:staging": "vue-tsc && vite build --mode staging",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --fix",
     "prepare": "husky",
     "test": "vitest"
   },
   "dependencies": {
     "@element-plus/icons-vue": "2.3.1",
-    "axios": "1.7.7",
+    "axios": "1.8.4",
     "dayjs": "1.11.13",
-    "element-plus": "2.8.8",
+    "element-plus": "2.9.7",
     "js-cookie": "3.0.5",
     "lodash-es": "4.17.21",
     "mitt": "3.0.1",
@@ -36,68 +26,39 @@
     "nprogress": "0.2.0",
     "path-browserify": "1.0.1",
     "path-to-regexp": "8.2.0",
-    "pinia": "2.2.6",
+    "pinia": "3.0.2",
     "screenfull": "6.0.2",
     "vue": "3.5.13",
-    "vue-router": "4.4.5",
-    "vxe-table": "4.6.23",
-    "vxe-table-plugin-element": "4.0.4",
-    "xe-utils": "3.5.31"
+    "vue-router": "4.5.0",
+    "vxe-table": "4.6.25"
   },
   "devDependencies": {
+    "@antfu/eslint-config": "4.12.0",
     "@types/js-cookie": "3.0.6",
     "@types/lodash-es": "4.17.12",
-    "@types/node": "22.9.0",
+    "@types/node": "22.14.1",
     "@types/nprogress": "0.2.3",
     "@types/path-browserify": "1.0.3",
-    "@typescript-eslint/eslint-plugin": "8.14.0",
-    "@typescript-eslint/parser": "8.14.0",
-    "@vitejs/plugin-vue": "5.2.0",
-    "@vitejs/plugin-vue-jsx": "4.1.0",
-    "@vue/eslint-config-prettier": "9.0.0",
-    "@vue/eslint-config-typescript": "13.0.0",
+    "@vitejs/plugin-vue": "5.2.3",
+    "@vitejs/plugin-vue-jsx": "4.1.2",
     "@vue/test-utils": "2.4.6",
-    "eslint": "8.57.1",
-    "eslint-plugin-prettier": "5.2.1",
-    "eslint-plugin-vue": "9.31.0",
-    "husky": "9.1.6",
-    "jsdom": "25.0.1",
-    "lint-staged": "15.2.10",
-    "prettier": "3.3.3",
+    "eslint": "9.24.0",
+    "eslint-plugin-format": "1.0.1",
+    "happy-dom": "17.4.4",
+    "husky": "9.1.7",
+    "lint-staged": "15.5.1",
     "sass": "1.78.0",
-    "typescript": "5.6.3",
-    "unocss": "0.64.1",
-    "vite": "5.4.11",
-    "vite-plugin-svg-icons": "2.0.1",
+    "typescript": "5.8.3",
+    "unocss": "66.1.0-beta.12",
+    "unplugin-auto-import": "19.1.2",
+    "unplugin-svg-component": "0.12.1",
+    "unplugin-vue-components": "28.5.0",
+    "vite": "6.3.2",
     "vite-svg-loader": "5.1.0",
-    "vitest": "2.1.5",
-    "vue-eslint-parser": "9.4.3",
-    "vue-tsc": "2.1.10"
+    "vitest": "3.1.1",
+    "vue-tsc": "2.2.8"
   },
   "lint-staged": {
-    "*.{vue,js,jsx,ts,tsx}": [
-      "eslint --fix",
-      "prettier --write"
-    ],
-    "*.{css,less,scss,html,md}": [
-      "prettier --write"
-    ],
-    "package.json": [
-      "prettier --write"
-    ]
-  },
-  "keywords": [
-    "vue",
-    "vue3",
-    "admin",
-    "vue-admin",
-    "vue3-admin",
-    "vite",
-    "vite-admin",
-    "element-plus",
-    "element-plus-admin",
-    "ts",
-    "typescript"
-  ],
-  "license": "MIT"
+    "*": "eslint --fix"
+  }
 }

prettier.config.js

@@ -1,22 +0,0 @@
-/**
- * 修改配置后重启编辑器
- * 配置项文档：https://prettier.io/docs/en/configuration.html
- * @type {import("prettier").Config}
- */
-
-export default {
-  /** 每一行的宽度 */
-  printWidth: 120,
-  /** 在对象中的括号之间是否用空格来间隔 */
-  bracketSpacing: true,
-  /** 箭头函数的参数无论有几个，都要括号包裹 */
-  arrowParens: "always",
-  /** 换行符的使用 */
-  endOfLine: "auto",
-  /** 是否采用单引号 */
-  singleQuote: false,
-  /** 对象或者数组的最后一个元素后面不要加逗号 */
-  trailingComma: "none",
-  /** 是否加分号 */
-  semi: false
-}

public/app-loading.css

@@ -1,4 +1,4 @@
-/** 白屏阶段会执行的 CSS 加载动画 */
+/* 白屏阶段会执行的 CSS 加载动画 */
 
 #app-loading {
   position: relative;

public/detect-ie.js

@@ -1,5 +1,4 @@
 // Tip: Simple judgments may not fully cover
-if (/MSIE\s|Trident\//.test(window.navigator.userAgent)) {
-  document.body.innerHTML =
-    "<strong>Sorry, this browser is currently not supported. We recommend using the latest version of a modern browser. For example, Chrome/Firefox/Edge.</strong>"
+if (/MSIE\s|Trident\//.test(navigator.userAgent)) {
+  document.body.innerHTML = "<strong>Sorry, this browser is currently not supported. We recommend using the latest version of a modern browser. For example, Chrome/Firefox/Edge.</strong>"
 }

src/App.vue

@@ -1,27 +1,20 @@
 <script lang="ts" setup>
-import { useTheme } from "@/hooks/useTheme"
-import { useGreyAndColorWeakness } from "@/hooks/useGreyAndColorWeakness"
-import { ElNotification } from "element-plus"
+import { useGreyAndColorWeakness } from "@@/composables/useGreyAndColorWeakness"
+import { usePany } from "@@/composables/usePany"
+import { useTheme } from "@@/composables/useTheme"
 import zhCn from "element-plus/es/locale/lang/zh-cn" // Element Plus 中文包
 
 const { initTheme } = useTheme()
 const { initGreyAndColorWeakness } = useGreyAndColorWeakness()
+const { initStarNotification, initStoreNotification } = usePany()
 
-/** 初始化主题 */
+// 初始化主题
 initTheme()
-/** 初始化灰色模式和色弱模式 */
+// 初始化灰色模式和色弱模式
 initGreyAndColorWeakness()
-
-/** 作者小心思 */
-ElNotification({
-  title: "Hello",
-  type: "success",
-  dangerouslyUseHTMLString: true,
-  message:
-    "<a style='color: teal' target='_blank' href='https://github.com/un-pany/v3-admin-vite'>小项目获取 star 不易，如果你喜欢这个项目的话，欢迎点击这里支持一个 star ！这是作者持续维护的唯一动力（小声：毕竟是免费的）</a>",
-  duration: 0,
-  position: "bottom-right"
-})
+// 初始化通知
+initStarNotification()
+initStoreNotification()
 </script>
 
 <template>

src/api/login/index.ts

@@ -1,27 +0,0 @@
-import { request } from "@/utils/service"
-import type * as Login from "./types/login"
-
-/** 获取登录验证码 */
-export function getLoginCodeApi() {
-  return request<Login.LoginCodeResponseData>({
-    url: "login/code",
-    method: "get"
-  })
-}
-
-/** 登录并返回 Token */
-export function loginApi(data: Login.LoginRequestData) {
-  return request<Login.LoginResponseData>({
-    url: "users/login",
-    method: "post",
-    data
-  })
-}
-
-/** 获取用户详情 */
-export function getUserInfoApi() {
-  return request<Login.UserInfoResponseData>({
-    url: "users/info",
-    method: "get"
-  })
-}

src/api/table/index.ts

@@ -1,37 +0,0 @@
-import { request } from "@/utils/service"
-import type * as Table from "./types/table"
-
-/** 增 */
-export function createTableDataApi(data: Table.CreateOrUpdateTableRequestData) {
-  return request({
-    url: "table",
-    method: "post",
-    data
-  })
-}
-
-/** 删 */
-export function deleteTableDataApi(id: string) {
-  return request({
-    url: `table/${id}`,
-    method: "delete"
-  })
-}
-
-/** 改 */
-export function updateTableDataApi(data: Table.CreateOrUpdateTableRequestData) {
-  return request({
-    url: "table",
-    method: "put",
-    data
-  })
-}
-
-/** 查 */
-export function getTableDataApi(params: Table.TableRequestData) {
-  return request<Table.TableResponseData>({
-    url: "table",
-    method: "get",
-    params
-  })
-}

src/common/apis/tables/index.ts

@@ -0,0 +1,37 @@
+import type * as Tables from "./type"
+import { request } from "@/http/axios"
+
+/** 增 */
+export function createTableDataApi(data: Tables.CreateOrUpdateTableRequestData) {
+  return request({
+    url: "tables",
+    method: "post",
+    data
+  })
+}
+
+/** 删 */
+export function deleteTableDataApi(id: number) {
+  return request({
+    url: `tables/${id}`,
+    method: "delete"
+  })
+}
+
+/** 改 */
+export function updateTableDataApi(data: Tables.CreateOrUpdateTableRequestData) {
+  return request({
+    url: "tables",
+    method: "put",
+    data
+  })
+}
+
+/** 查 */
+export function getTableDataApi(params: Tables.TableRequestData) {
+  return request<Tables.TableResponseData>({
+    url: "tables",
+    method: "get",
+    params
+  })
+}

src/common/apis/tables/type.ts

@@ -1,5 +1,5 @@
 export interface CreateOrUpdateTableRequestData {
-  id?: string
+  id?: number
   username: string
   password?: string
 }
@@ -18,7 +18,7 @@ export interface TableRequestData {
 export interface TableData {
   createTime: string
   email: string
-  id: string
+  id: number
   phone: string
   roles: string
   status: boolean

src/common/apis/users/index.ts

@@ -0,0 +1,10 @@
+import type * as Users from "./type"
+import { request } from "@/http/axios"
+
+/** 获取当前登录用户详情 */
+export function getCurrentUserApi() {
+  return request<Users.CurrentUserResponseData>({
+    url: "users/me",
+    method: "get"
+  })
+}

src/common/apis/users/type.ts

@@ -0,0 +1 @@
+export type CurrentUserResponseData = ApiResponseData<{ username: string, roles: string[] }>

src/common/assets/icons/preserve-color/README.md

@@ -0,0 +1,11 @@
+## 目录说明
+
+- `common/assets/icons/preserve-color` 目录下存放带颜色的 svg icon
+
+- `common/assets/icons` 目录存放的 svg icon 会被插件重写 `fill` 和 `stroke` 属性，使得图片自带的颜色丢失，从而继承父元素的颜色
+
+## 使用说明
+
+`common/assets/icons/preserve-color` 目录下需要添加 `preserve-color/` 前缀，像这样： `<SvgIcon name="preserve-color/name" />`
+
+`common/assets/icons` 目录下则不需要，像这样： `<SvgIcon name="name" />`

src/common/assets/styles/element-plus.css

@@ -1,12 +1,12 @@
 /**
- * dark-blue 主题模式下的 Element Plus CSS 变量
- * 在此查阅所有可自定义的变量：https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/src/common/var.scss
- * 也可以打开浏览器控制台选择元素，查看要覆盖的变量名
+ * @description dark-blue 主题模式下的 Element Plus CSS 变量
+ * @description 在此查阅所有可自定义的变量：https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/src/common/var.scss
+ * @description 也可以打开浏览器控制台选择元素，查看要覆盖的变量名
  */
 
-/** 基础颜色 */
+/* 基础颜色 */
 html.dark-blue {
-  /** color-primary */
+  /* color-primary */
   --el-color-primary: #00bb99;
   --el-color-primary-light-3: #00bb99b3;
   --el-color-primary-light-5: #00bb9980;
@@ -14,7 +14,7 @@ html.dark-blue {
   --el-color-primary-light-8: #00bb9933;
   --el-color-primary-light-9: #00bb991a;
   --el-color-primary-dark-2: #00bb99;
-  /** color-success */
+  /* color-success */
   --el-color-success: #67c23a;
   --el-color-success-light-3: #67c23ab3;
   --el-color-success-light-5: #67c23a80;
@@ -22,7 +22,7 @@ html.dark-blue {
   --el-color-success-light-8: #67c23a33;
   --el-color-success-light-9: #67c23a1a;
   --el-color-success-dark-2: #67c23a;
-  /** color-warning */
+  /* color-warning */
   --el-color-warning: #e6a23c;
   --el-color-warning-light-3: #e6a23cb3;
   --el-color-warning-light-5: #e6a23c80;
@@ -30,7 +30,7 @@ html.dark-blue {
   --el-color-warning-light-8: #e6a23c33;
   --el-color-warning-light-9: #e6a23c1a;
   --el-color-warning-dark-2: #e6a23c;
-  /** color-danger */
+  /* color-danger */
   --el-color-danger: #f56c6c;
   --el-color-danger-light-3: #f56c6cb3;
   --el-color-danger-light-5: #f56c6c80;
@@ -38,7 +38,7 @@ html.dark-blue {
   --el-color-danger-light-8: #f56c6c33;
   --el-color-danger-light-9: #f56c6c1a;
   --el-color-danger-dark-2: #f56c6c;
-  /** color-error */
+  /* color-error */
   --el-color-error: #f56c6c;
   --el-color-error-light-3: #f56c6cb3;
   --el-color-error-light-5: #f56c6c80;
@@ -46,7 +46,7 @@ html.dark-blue {
   --el-color-error-light-8: #f56c6c33;
   --el-color-error-light-9: #f56c6c1a;
   --el-color-error-dark-2: #f56c6c;
-  /** color-info */
+  /* color-info */
   --el-color-info: #909399;
   --el-color-info-light-3: #909399b3;
   --el-color-info-light-5: #90939980;
@@ -54,20 +54,20 @@ html.dark-blue {
   --el-color-info-light-8: #90939933;
   --el-color-info-light-9: #9093991a;
   --el-color-info-dark-2: #909399;
-  /** text-color */
+  /* text-color */
   --el-text-color-primary: #e5eaf3;
   --el-text-color-regular: #cfd3dc;
   --el-text-color-secondary: #a3a6ad;
   --el-text-color-placeholder: #8d9095;
   --el-text-color-disabled: #6c6e72;
-  /** border-color */
+  /* border-color */
   --el-border-color-darker: #003380;
   --el-border-color-dark: #003380;
   --el-border-color: #003380;
   --el-border-color-light: #003380;
   --el-border-color-lighter: #003380;
   --el-border-color-extra-light: #003380;
-  /** fill-color */
+  /* fill-color */
   --el-fill-color-darker: #002b6b;
   --el-fill-color-dark: #002b6b;
   --el-fill-color: #002b6b;
@@ -75,16 +75,16 @@ html.dark-blue {
   --el-fill-color-lighter: #002359;
   --el-fill-color-blank: #001b44;
   --el-fill-color-extra-light: #001b44;
-  /** bg-color */
+  /* bg-color */
   --el-bg-color-page: #001535;
   --el-bg-color: #001b44;
   --el-bg-color-overlay: #002359;
-  /** mask-color */
+  /* mask-color */
   --el-mask-color: rgba(0, 0, 0, 0.5);
   --el-mask-color-extra-light: rgba(0, 0, 0, 0.3);
 }
 
-/** button */
+/* button */
 html.dark-blue .el-button {
   --el-button-disabled-text-color: rgba(255, 255, 255, 0.5);
 }

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

@@ -1,8 +1,8 @@
-/** 自定义 Element Plus 样式 */
+// 自定义 Element Plus 样式
 
 // 卡片
 .el-card {
-  background-color: var(--el-bg-color);
+  background-color: var(--el-bg-color) !important;
 }
 
 // 分页
@@ -14,7 +14,7 @@
     .el-pagination__jump,
     .btn-prev,
     .btn-next {
-      display: none !important;
+      display: none;
     }
   }
 }

src/common/assets/styles/index.scss

@@ -38,7 +38,8 @@ body {
   background-color: var(--v3-body-bg-color);
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
-  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial,
+  font-family:
+    Inter, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial,
     sans-serif;
   @extend %scrollbar;
 }

src/common/assets/styles/mixins.scss

@@ -1,4 +1,4 @@
-/** 清除浮动 */
+// 清除浮动
 %clearfix {
   &::after {
     content: "";
@@ -7,7 +7,7 @@
   }
 }
 
-/** 美化原生滚动条 */
+// 美化原生滚动条
 %scrollbar {
   // 整个滚动条
   &::-webkit-scrollbar {
@@ -31,7 +31,7 @@
   }
 }
 
-/** 文本溢出时显示省略号 */
+// 文本溢出时显示省略号
 %ellipsis {
   // 隐藏溢出的文本
   overflow: hidden;

src/common/assets/styles/theme/core/element-plus.scss

@@ -1,4 +1,4 @@
-/** Element Plus 相关 */
+// Element Plus 相关
 
 // 侧边栏的 item 的 popper
 .el-popper {

src/common/assets/styles/theme/core/layouts.scss

@@ -1,4 +1,4 @@
-/** Layout 相关 */
+// Layout 相关
 
 .app-wrapper {
   // 侧边栏
@@ -21,7 +21,7 @@
     .el-sub-menu {
       &.is-active {
         > .el-sub-menu__title {
-          color: #ffffff !important;
+          color: #ffffff;
         }
       }
     }

src/common/assets/styles/theme/dark-blue/variables.scss

@@ -1,4 +1,4 @@
-/** dark-blue 主题下的变量 */
+// dark-blue 主题下的变量
 
 // 主题名称
 $theme-name: "dark-blue";

src/common/assets/styles/theme/dark/variables.scss

@@ -1,4 +1,4 @@
-/** dark 主题下的变量 */
+// dark 主题下的变量
 
 // 主题名称
 $theme-name: "dark";

src/common/assets/styles/transition.scss

@@ -1,4 +1,4 @@
-// See https://cn.vuejs.org/guide/built-ins/transition.html for detail
+// https://cn.vuejs.org/guide/built-ins/transition
 
 // fade-transform
 .fade-transform-leave-active,

src/common/assets/styles/variables.css

@@ -1,10 +1,10 @@
-/** 全局 CSS 变量，这种变量不仅可以在 CSS 和 SCSS 中使用，还可以导入到 JS 中使用 */
+/* 全局 CSS 变量，这种变量不仅可以在 CSS 和 SCSS 中使用，还可以导入到 JS 中使用 */
 
 :root {
-  /** Body */
+  /* Body */
   --v3-body-text-color: var(--el-text-color-primary);
   --v3-body-bg-color: var(--el-bg-color-page);
-  /** Header 区域 = NavigationBar 组件 + TagsView 组件 */
+  /* Header 区域 = NavigationBar 组件 + TagsView 组件 */
   --v3-header-height: calc(
     var(--v3-navigationbar-height) + var(--v3-tagsview-height) + var(--v3-header-border-bottom-width)
   );
@@ -12,10 +12,10 @@
   --v3-header-box-shadow: var(--el-box-shadow-lighter);
   --v3-header-border-bottom-width: 1px;
   --v3-header-border-bottom: var(--v3-header-border-bottom-width) solid var(--el-fill-color);
-  /** NavigationBar 组件 */
+  /* NavigationBar 组件 */
   --v3-navigationbar-height: 50px;
   --v3-navigationbar-text-color: var(--el-text-color-regular);
-  /** Sidebar 组件（左侧模式全部生效、顶部模式全部不生效、混合模式非颜色部分生效） */
+  /* Sidebar 组件（左侧模式全部生效、顶部模式全部不生效、混合模式非颜色部分生效） */
   --v3-sidebar-width: 220px;
   --v3-sidebar-hide-width: 58px;
   --v3-sidebar-border-right: 1px solid var(--el-fill-color);
@@ -25,7 +25,7 @@
   --v3-sidebar-menu-hover-bg-color: #409eff10;
   --v3-sidebar-menu-text-color: #cfd3dc;
   --v3-sidebar-menu-active-text-color: #ffffff;
-  /** TagsView 组件 */
+  /* TagsView 组件 */
   --v3-tagsview-height: 34px;
   --v3-tagsview-text-color: var(--el-text-color-regular);
   --v3-tagsview-tag-active-text-color: #ffffff;
@@ -41,32 +41,32 @@
   --v3-tagsview-contextmenu-bg-color: var(--el-bg-color-overlay);
   --v3-tagsview-contextmenu-hover-bg-color: var(--el-fill-color);
   --v3-tagsview-contextmenu-box-shadow: var(--el-box-shadow);
-  /** Hamburger 组件 */
+  /* Hamburger 组件 */
   --v3-hamburger-text-color: var(--el-text-color-primary);
-  /** RightPanel 组件  */
+  /* RightPanel 组件  */
   --v3-rightpanel-button-bg-color: #001428;
 }
 
-/** 内容区放大时，将不需要的组件隐藏 */
+/* 内容区放大时，将不需要的组件隐藏 */
 body.content-large {
-  /** Header 区域 = TagsView 组件 */
+  /* Header 区域 = TagsView 组件 */
   --v3-header-height: var(--v3-tagsview-height);
-  /** NavigationBar 组件 */
+  /* NavigationBar 组件 */
   --v3-navigationbar-height: 0px;
-  /** Sidebar 组件 */
+  /* Sidebar 组件 */
   --v3-sidebar-width: 0px;
   --v3-sidebar-hide-width: 0px;
 }
 
-/** 内容区全屏时，将不需要的组件隐藏 */
+/* 内容区全屏时，将不需要的组件隐藏 */
 body.content-full {
-  /** Header 区域 */
+  /* Header 区域 */
   --v3-header-height: 0px;
-  /** NavigationBar 组件 */
+  /* NavigationBar 组件 */
   --v3-navigationbar-height: 0px;
-  /** Sidebar 组件 */
+  /* Sidebar 组件 */
   --v3-sidebar-width: 0px;
   --v3-sidebar-hide-width: 0px;
-  /** TagsView 组件 */
+  /* TagsView 组件 */
   --v3-tagsview-height: 0px;
 }

src/common/assets/styles/view-transition.scss

@@ -1,4 +1,4 @@
-/** 控制切换主题时的动画效果（只在较新的浏览器上生效，例如 Chrome 111+） */
+// 控制切换主题时的动画效果（只在较新的浏览器上生效，例如 Chrome 111+）
 
 ::view-transition-old(root) {
   animation: none;

src/common/assets/styles/vxe-table.css

@@ -1,11 +1,11 @@
 /**
- * 所有主题模式下的 Vxe Table CSS 变量
- * 用 Element Plus 的 CSS 变量来覆写 Vxe Table 的 CSS 变量，目的是使 Vxe Table 支持多主题模式且样式统一
- * 在此查阅所有可自定义的变量：https://github.com/x-extends/vxe-table/blob/master/styles/css-variable.scss
+ * @description 所有主题模式下的 Vxe Table CSS 变量
+ * @description 用 Element Plus 的 CSS 变量来覆写 Vxe Table 的 CSS 变量，目的是使 Vxe Table 支持多主题模式且样式统一
+ * @description 在此查阅所有可自定义的变量：https://github.com/x-extends/vxe-table/blob/master/styles/css-variable.scss
  */
 
 :root {
-  /*color*/
+  /* color */
   --vxe-font-color: var(--el-text-color-regular);
   --vxe-primary-color: var(--el-color-primary);
   --vxe-success-color: var(--el-color-success);
@@ -34,16 +34,16 @@
   --vxe-warning-disabled-color: var(--el-color-warning-light-5);
   --vxe-danger-disabled-color: var(--el-color-danger-light-5);
 
-  /*input/radio/checkbox*/
+  /* input/radio/checkbox */
   --vxe-input-border-color: var(--el-border-color);
   --vxe-input-disabled-color: var(--el-text-color-disabled);
   --vxe-input-disabled-background-color: var(--el-fill-color-light);
   --vxe-input-placeholder-color: var(--el-text-color-placeholder);
 
-  /*popup*/
+  /* popup */
   --vxe-table-popup-border-color: var(--el-border-color);
 
-  /*table*/
+  /* table */
   --vxe-table-header-font-color: var(--el-text-color-regular);
   --vxe-table-footer-font-color: var(--el-text-color-regular);
   --vxe-table-border-color: var(--el-border-color-lighter);
@@ -57,41 +57,41 @@
 
   --vxe-table-checkbox-range-background-color: var(--el-fill-color-light);
 
-  /*menu*/
+  /* menu */
   --vxe-table-menu-background-color: var(--el-bg-color-overlay);
 
-  /*loading*/
+  /* loading */
   --vxe-loading-color: var(--el-color-primary);
   --vxe-loading-background-color: var(--el-mask-color);
 
-  /*validate*/
+  /* validate */
   --vxe-table-validate-error-color: var(--el-color-danger);
 
-  /*toolbar*/
+  /* toolbar */
   --vxe-toolbar-background-color: var(--el-bg-color);
   --vxe-toolbar-custom-active-background-color: var(--el-bg-color-overlay);
   --vxe-toolbar-panel-background-color: var(--el-bg-color-overlay);
 
-  /*pager*/
+  /* pager */
   --vxe-pager-background-color: var(--el-bg-color);
 
-  /*modal*/
+  /* modal */
   --vxe-modal-header-background-color: var(--el-bg-color);
   --vxe-modal-body-background-color: var(--el-bg-color);
   --vxe-modal-border-color: var(--el-border-color);
 
-  /*button*/
+  /* button */
   --vxe-button-default-background-color: var(--el-bg-color-overlay);
 
-  /*input*/
+  /* input */
   --vxe-input-background-color: var(--el-fill-color-blank);
   --vxe-input-panel-background-color: var(--el-fill-color-blank);
 
-  /*form*/
+  /* form */
   --vxe-form-background-color: var(--el-bg-color);
   --vxe-form-validate-error-color: var(--el-color-danger);
 
-  /*select*/
+  /* select */
   --vxe-select-option-hover-background-color: var(--el-bg-color-overlay);
   --vxe-select-panel-background-color: var(--el-bg-color);
 }

src/common/assets/styles/vxe-table.scss

@@ -1,26 +1,26 @@
-/** 自定义 Vxe Table 样式 */
+// 自定义 Vxe Table 样式
 
 .vxe-grid {
   // 表单
   &--form-wrapper {
     .vxe-form {
-      padding: 10px 20px !important;
-      margin-bottom: 20px !important;
+      padding: 10px 20px;
+      margin-bottom: 20px;
     }
   }
 
   // 工具栏
   &--toolbar-wrapper {
     .vxe-toolbar {
-      padding: 20px !important;
+      padding: 20px;
     }
   }
 
   // 分页
   &--pager-wrapper {
     .vxe-pager {
-      height: 70px !important;
-      padding: 0 20px !important;
+      height: 70px;
+      padding: 0 20px;
       &--wrapper {
         // 参考 Bootstrap 的响应式设计 WIDTH = 768
         @media screen and (max-width: 768px) {
@@ -29,7 +29,7 @@
           .vxe-pager--jump,
           .vxe-pager--jump-prev,
           .vxe-pager--jump-next {
-            display: none !important;
+            display: none;
           }
         }
       }

src/common/components/Notify/List.vue

@@ -1,16 +1,16 @@
 <script lang="ts" setup>
-import { type ListItem } from "./data"
+import type { NotifyItem } from "./type"
 
 interface Props {
-  list: ListItem[]
+  data: NotifyItem[]
 }
 
 const props = defineProps<Props>()
 </script>
 
 <template>
-  <el-empty v-if="props.list.length === 0" />
-  <el-card v-else v-for="(item, index) in props.list" :key="index" shadow="never" class="card-container">
+  <el-empty v-if="props.data.length === 0" />
+  <el-card v-else v-for="(item, index) in props.data" :key="index" shadow="never" class="card-container">
     <template #header>
       <div class="card-header">
         <div>
@@ -18,10 +18,12 @@ const props = defineProps<Props>()
             <span class="card-title">{{ item.title }}</span>
             <el-tag v-if="item.extra" :type="item.status" effect="plain" size="small">{{ item.extra }}</el-tag>
           </span>
-          <div class="card-time">{{ item.datetime }}</div>
+          <div class="card-time">
+            {{ item.datetime }}
+          </div>
         </div>
         <div v-if="item.avatar" class="card-avatar">
-          <img :src="item.avatar" width="34" />
+          <img :src="item.avatar" width="34">
         </div>
       </div>
     </template>

src/common/components/Notify/data.ts

@@ -1,29 +1,21 @@
-export interface ListItem {
-  avatar?: string
-  title: string
-  datetime?: string
-  description?: string
-  status?: "primary" | "success" | "info" | "warning" | "danger"
-  extra?: string
-}
+import type { NotifyItem } from "./type"
 
-export const notifyData: ListItem[] = [
+export const notifyData: NotifyItem[] = [
   {
     avatar: "https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png",
     title: "V3 Admin Vite 上线啦",
-    datetime: "一年前",
-    description:
-      "一个免费开源的中后台管理系统基础解决方案，基于 Vue3、TypeScript、Element Plus、Pinia 和 Vite 等主流技术"
+    datetime: "两年前",
+    description: "一个免费开源的中后台管理系统基础解决方案，基于 Vue3、TypeScript、Element Plus、Pinia 和 Vite 等主流技术"
   },
   {
     avatar: "https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png",
     title: "V3 Admin 上线啦",
-    datetime: "两年前",
+    datetime: "三年前",
     description: "一个中后台管理系统基础解决方案，基于 Vue3、TypeScript、Element Plus 和 Pinia"
   }
 ]
 
-export const messageData: ListItem[] = [
+export const messageData: NotifyItem[] = [
   {
     avatar: "https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png",
     title: "来自楚门的世界",
@@ -44,7 +36,7 @@ export const messageData: ListItem[] = [
   }
 ]
 
-export const todoData: ListItem[] = [
+export const todoData: NotifyItem[] = [
   {
     title: "任务名称",
     description: "这家伙很懒，什么都没留下",

src/common/components/Notify/index.vue

@@ -1,28 +1,29 @@
 <script lang="ts" setup>
-import { ref, computed } from "vue"
-import { ElMessage } from "element-plus"
+import type { NotifyItem } from "./type"
 import { Bell } from "@element-plus/icons-vue"
-import NotifyList from "./NotifyList.vue"
-import { type ListItem, notifyData, messageData, todoData } from "./data"
+import { messageData, notifyData, todoData } from "./data"
+import List from "./List.vue"
 
 type TabName = "通知" | "消息" | "待办"
 
 interface DataItem {
   name: TabName
   type: "primary" | "success" | "warning" | "danger" | "info"
-  list: ListItem[]
+  list: NotifyItem[]
 }
 
 /** 角标当前值 */
-const badgeValue = computed(() => {
-  return data.value.reduce((sum, item) => sum + item.list.length, 0)
-})
+const badgeValue = computed(() => data.value.reduce((sum, item) => sum + item.list.length, 0))
+
 /** 角标最大值 */
 const badgeMax = 99
+
 /** 面板宽度 */
 const popoverWidth = 350
+
 /** 当前 Tab */
 const activeName = ref<TabName>("通知")
+
 /** 所有数据 */
 const data = ref<DataItem[]>([
   // 通知数据
@@ -45,7 +46,7 @@ const data = ref<DataItem[]>([
   }
 ])
 
-const handleHistory = () => {
+function handleHistory() {
   ElMessage.success(`跳转到${activeName.value}历史页面`)
 }
 </script>
@@ -64,18 +65,20 @@ const handleHistory = () => {
       </template>
       <template #default>
         <el-tabs v-model="activeName" class="demo-tabs" stretch>
-          <el-tab-pane v-for="(item, index) in data" :name="item.name" :key="index">
+          <el-tab-pane v-for="(item, index) in data" :key="index" :name="item.name">
             <template #label>
               {{ item.name }}
               <el-badge :value="item.list.length" :max="badgeMax" :type="item.type" />
             </template>
             <el-scrollbar height="400px">
-              <NotifyList :list="item.list" />
+              <List :data="item.list" />
             </el-scrollbar>
           </el-tab-pane>
         </el-tabs>
         <div class="notify-history">
-          <el-button link @click="handleHistory">查看{{ activeName }}历史</el-button>
+          <el-button link @click="handleHistory">
+            查看{{ activeName }}历史
+          </el-button>
         </div>
       </template>
     </el-popover>
@@ -83,10 +86,6 @@ const handleHistory = () => {
 </template>
 
 <style lang="scss" scoped>
-.notify {
-  margin-right: 10px;
-}
-
 .notify-history {
   text-align: center;
   padding-top: 12px;

src/common/components/Notify/type.ts

@@ -0,0 +1,8 @@
+export interface NotifyItem {
+  avatar?: string
+  title: string
+  datetime?: string
+  description?: string
+  status?: "primary" | "success" | "info" | "warning" | "danger"
+  extra?: string
+}

src/common/components/Screenfull/index.vue

@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import { computed, ref, watchEffect } from "vue"
-import { ElMessage } from "element-plus"
 import screenfull from "screenfull"
 
 interface Props {
@@ -22,44 +20,52 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const CONTENT_LARGE = "content-large"
+
 const CONTENT_FULL = "content-full"
+
 const classList = document.body.classList
 
-//#region 全屏
+// #region 全屏
 const isEnabled = screenfull.isEnabled
 const isFullscreen = ref<boolean>(false)
 const fullscreenTips = computed(() => (isFullscreen.value ? props.exitTips : props.openTips))
 const fullscreenSvgName = computed(() => (isFullscreen.value ? "fullscreen-exit" : "fullscreen"))
 
-const handleFullscreenClick = () => {
+function handleFullscreenClick() {
   const dom = document.querySelector(props.element) || undefined
   isEnabled ? screenfull.toggle(dom) : ElMessage.warning("您的浏览器无法工作")
 }
-const handleFullscreenChange = () => {
+
+function handleFullscreenChange() {
   isFullscreen.value = screenfull.isFullscreen
   // 退出全屏时清除相关的 class
   isFullscreen.value || classList.remove(CONTENT_LARGE, CONTENT_FULL)
 }
+
 watchEffect((onCleanup) => {
   if (isEnabled) {
     // 挂载组件时自动执行
     screenfull.on("change", handleFullscreenChange)
     // 卸载组件时自动执行
-    onCleanup(() => screenfull.off("change", handleFullscreenChange))
+    onCleanup(() => {
+      screenfull.off("change", handleFullscreenChange)
+    })
   }
 })
-//#endregion
+// #endregion
 
-//#region 内容区
+// #region 内容区
 const isContentLarge = ref<boolean>(false)
 const contentLargeTips = computed(() => (isContentLarge.value ? "内容区复原" : "内容区放大"))
 const contentLargeSvgName = computed(() => (isContentLarge.value ? "fullscreen-exit" : "fullscreen"))
-const handleContentLargeClick = () => {
+
+function handleContentLargeClick() {
   isContentLarge.value = !isContentLarge.value
   // 内容区放大时，将不需要的组件隐藏
   classList.toggle(CONTENT_LARGE, isContentLarge.value)
 }
-const handleContentFullClick = () => {
+
+function handleContentFullClick() {
   // 取消内容区放大
   isContentLarge.value && handleContentLargeClick()
   // 内容区全屏时，将不需要的组件隐藏
@@ -67,24 +73,28 @@ const handleContentFullClick = () => {
   // 开启全屏
   handleFullscreenClick()
 }
-//#endregion
+// #endregion
 </script>
 
 <template>
   <div>
     <!-- 全屏 -->
-    <el-tooltip v-if="!content" effect="dark" :content="fullscreenTips" placement="bottom">
-      <SvgIcon :name="fullscreenSvgName" @click="handleFullscreenClick" />
+    <el-tooltip v-if="!props.content" effect="dark" :content="fullscreenTips" placement="bottom">
+      <SvgIcon :name="fullscreenSvgName" @click="handleFullscreenClick" class="svg-icon" />
     </el-tooltip>
     <!-- 内容区 -->
     <el-dropdown v-else :disabled="isFullscreen">
-      <SvgIcon :name="contentLargeSvgName" />
+      <SvgIcon :name="contentLargeSvgName" class="svg-icon" />
       <template #dropdown>
         <el-dropdown-menu>
           <!-- 内容区放大 -->
-          <el-dropdown-item @click="handleContentLargeClick">{{ contentLargeTips }}</el-dropdown-item>
+          <el-dropdown-item @click="handleContentLargeClick">
+            {{ contentLargeTips }}
+          </el-dropdown-item>
           <!-- 内容区全屏 -->
-          <el-dropdown-item @click="handleContentFullClick">内容区全屏</el-dropdown-item>
+          <el-dropdown-item @click="handleContentFullClick">
+            内容区全屏
+          </el-dropdown-item>
         </el-dropdown-menu>
       </template>
     </el-dropdown>

src/common/components/SearchMenu/Footer.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useDevice } from "@/hooks/useDevice"
+import { useDevice } from "@@/composables/useDevice"
 
 interface Props {
   total: number
@@ -14,16 +14,16 @@ const { isMobile } = useDevice()
   <div class="search-footer">
     <template v-if="!isMobile">
       <span class="search-footer-item">
-        <SvgIcon name="keyboard-enter" />
+        <SvgIcon name="keyboard-enter" class="svg-icon" />
         <span>确认</span>
       </span>
       <span class="search-footer-item">
-        <SvgIcon name="keyboard-up" />
-        <SvgIcon name="keyboard-down" />
+        <SvgIcon name="keyboard-up" class="svg-icon" />
+        <SvgIcon name="keyboard-down" class="svg-icon" />
         <span>切换</span>
       </span>
       <span class="search-footer-item">
-        <SvgIcon name="keyboard-esc" />
+        <SvgIcon name="keyboard-esc" class="svg-icon" />
         <span>关闭</span>
       </span>
     </template>

src/common/components/SearchMenu/Modal.vue

@@ -1,13 +1,12 @@
 <script lang="ts" setup>
-import { computed, ref, shallowRef } from "vue"
-import { type RouteRecordName, type RouteRecordRaw, useRouter } from "vue-router"
-import { usePermissionStore } from "@/store/modules/permission"
-import SearchResult from "./SearchResult.vue"
-import SearchFooter from "./SearchFooter.vue"
-import { ElMessage, ElScrollbar } from "element-plus"
+import type { ElScrollbar } from "element-plus"
+import type { RouteRecordNameGeneric, RouteRecordRaw } from "vue-router"
+import { usePermissionStore } from "@/pinia/stores/permission"
+import { useDevice } from "@@/composables/useDevice"
+import { isExternal } from "@@/utils/validate"
 import { cloneDeep, debounce } from "lodash-es"
-import { useDevice } from "@/hooks/useDevice"
-import { isExternal } from "@/utils/validate"
+import Footer from "./Footer.vue"
+import Result from "./Result.vue"
 
 /** 控制 modal 显隐 */
 const modelValue = defineModel<boolean>({ required: true })
@@ -17,32 +16,31 @@ const { isMobile } = useDevice()
 
 const inputRef = ref<HTMLInputElement | null>(null)
 const scrollbarRef = ref<InstanceType<typeof ElScrollbar> | null>(null)
-const searchResultRef = ref<InstanceType<typeof SearchResult> | null>(null)
+const resultRef = ref<InstanceType<typeof Result> | null>(null)
 
 const keyword = ref<string>("")
-const resultList = shallowRef<RouteRecordRaw[]>([])
-const activeRouteName = ref<RouteRecordName | undefined>(undefined)
+const result = shallowRef<RouteRecordRaw[]>([])
+const activeRouteName = ref<RouteRecordNameGeneric | undefined>(undefined)
 /** 是否按下了上键或下键（用于解决和 mouseenter 事件的冲突） */
 const isPressUpOrDown = ref<boolean>(false)
 
 /** 控制搜索对话框宽度 */
 const modalWidth = computed(() => (isMobile.value ? "80vw" : "40vw"))
 /** 树形菜单 */
-const menusData = computed(() => cloneDeep(usePermissionStore().routes))
+const menus = computed(() => cloneDeep(usePermissionStore().routes))
 
 /** 搜索（防抖） */
 const handleSearch = debounce(() => {
-  const flatMenusData = flatTree(menusData.value)
-  resultList.value = flatMenusData.filter((menu) =>
-    keyword.value ? menu.meta?.title?.toLocaleLowerCase().includes(keyword.value.toLocaleLowerCase().trim()) : false
-  )
+  const flatMenus = flatTree(menus.value)
+  const _keywords = keyword.value.toLocaleLowerCase().trim()
+  result.value = flatMenus.filter(menu => keyword.value ? menu.meta?.title?.toLocaleLowerCase().includes(_keywords) : false)
   // 默认选中搜索结果的第一项
-  const length = resultList.value?.length
-  activeRouteName.value = length > 0 ? resultList.value[0].name : undefined
+  const length = result.value?.length
+  activeRouteName.value = length > 0 ? result.value[0].name : undefined
 }, 500)
 
 /** 将树形菜单扁平化为一维数组，用于菜单搜索 */
-const flatTree = (arr: RouteRecordRaw[], result: RouteRecordRaw[] = []) => {
+function flatTree(arr: RouteRecordRaw[], result: RouteRecordRaw[] = []) {
   arr.forEach((item) => {
     result.push(item)
     item.children && flatTree(item.children, result)
@@ -51,36 +49,36 @@ const flatTree = (arr: RouteRecordRaw[], result: RouteRecordRaw[] = []) => {
 }
 
 /** 关闭搜索对话框 */
-const handleClose = () => {
+function handleClose() {
   modelValue.value = false
   // 延时处理防止用户看到重置数据的操作
   setTimeout(() => {
     keyword.value = ""
-    resultList.value = []
+    result.value = []
   }, 200)
 }
 
 /** 根据下标位置进行滚动 */
-const scrollTo = (index: number) => {
-  if (!searchResultRef.value) return
-  const scrollTop = searchResultRef.value.getScrollTop(index)
+function scrollTo(index: number) {
+  if (!resultRef.value) return
+  const scrollTop = resultRef.value.getScrollTop(index)
   // 手动控制 el-scrollbar 滚动条滚动，设置滚动条到顶部的距离
   scrollbarRef.value?.setScrollTop(scrollTop)
 }
 
 /** 键盘上键 */
-const handleUp = () => {
+function handleUp() {
   isPressUpOrDown.value = true
-  const { length } = resultList.value
+  const { length } = result.value
   if (length === 0) return
   // 获取该 name 在菜单中第一次出现的位置
-  const index = resultList.value.findIndex((item) => item.name === activeRouteName.value)
+  const index = result.value.findIndex(item => item.name === activeRouteName.value)
   // 如果已处在顶部
   if (index === 0) {
-    const bottomName = resultList.value[length - 1].name
+    const bottomName = result.value[length - 1].name
     // 如果顶部和底部的 bottomName 相同，且长度大于 1，就再跳一个位置（可解决遇到首尾两个相同 name 导致的上键不能生效的问题）
     if (activeRouteName.value === bottomName && length > 1) {
-      activeRouteName.value = resultList.value[length - 2].name
+      activeRouteName.value = result.value[length - 2].name
       scrollTo(length - 2)
     } else {
       // 跳转到底部
@@ -88,24 +86,24 @@ const handleUp = () => {
       scrollTo(length - 1)
     }
   } else {
-    activeRouteName.value = resultList.value[index - 1].name
+    activeRouteName.value = result.value[index - 1].name
     scrollTo(index - 1)
   }
 }
 
 /** 键盘下键 */
-const handleDown = () => {
+function handleDown() {
   isPressUpOrDown.value = true
-  const { length } = resultList.value
+  const { length } = result.value
   if (length === 0) return
   // 获取该 name 在菜单中最后一次出现的位置（可解决遇到连续两个相同 name 导致的下键不能生效的问题）
-  const index = resultList.value.map((item) => item.name).lastIndexOf(activeRouteName.value)
+  const index = result.value.map(item => item.name).lastIndexOf(activeRouteName.value)
   // 如果已处在底部
   if (index === length - 1) {
-    const topName = resultList.value[0].name
+    const topName = result.value[0].name
     // 如果底部和顶部的 topName 相同，且长度大于 1，就再跳一个位置（可解决遇到首尾两个相同 name 导致的下键不能生效的问题）
     if (activeRouteName.value === topName && length > 1) {
-      activeRouteName.value = resultList.value[1].name
+      activeRouteName.value = result.value[1].name
       scrollTo(1)
     } else {
       // 跳转到顶部
@@ -113,36 +111,29 @@ const handleDown = () => {
       scrollTo(0)
     }
   } else {
-    activeRouteName.value = resultList.value[index + 1].name
+    activeRouteName.value = result.value[index + 1].name
     scrollTo(index + 1)
   }
 }
 
 /** 键盘回车键 */
-const handleEnter = () => {
-  const { length } = resultList.value
+function handleEnter() {
+  const { length } = result.value
   if (length === 0) return
   const name = activeRouteName.value
-  const path = resultList.value.find((item) => item.name === name)?.path
-  if (path && isExternal(path)) {
-    window.open(path, "_blank", "noopener, noreferrer")
-    return
-  }
-  if (!name) {
-    ElMessage.warning("无法通过搜索进入该菜单，请为对应的路由设置唯一的 Name")
-    return
-  }
+  const path = result.value.find(item => item.name === name)?.path
+  if (path && isExternal(path)) return window.open(path, "_blank", "noopener, noreferrer")
+  if (!name) return ElMessage.warning("无法通过搜索进入该菜单，请为对应的路由设置唯一的 Name")
   try {
     router.push({ name })
   } catch {
-    ElMessage.error("该菜单有必填的动态参数，无法通过搜索进入")
-    return
+    return ElMessage.warning("该菜单有必填的动态参数，无法通过搜索进入")
   }
   handleClose()
 }
 
 /** 释放上键或下键 */
-const handleReleaseUpOrDown = () => {
+function handleReleaseUpOrDown() {
   isPressUpOrDown.value = false
 }
 </script>
@@ -150,38 +141,38 @@ const handleReleaseUpOrDown = () => {
 <template>
   <el-dialog
     v-model="modelValue"
+    :before-close="handleClose"
+    :width="modalWidth"
+    top="5vh"
+    class="search-modal__private"
+    append-to-body
     @opened="inputRef?.focus()"
     @closed="inputRef?.blur()"
     @keydown.up="handleUp"
     @keydown.down="handleDown"
     @keydown.enter="handleEnter"
     @keyup.up.down="handleReleaseUpOrDown"
-    :before-close="handleClose"
-    :width="modalWidth"
-    top="5vh"
-    class="search-modal__private"
-    append-to-body
   >
-    <el-input ref="inputRef" v-model="keyword" @input="handleSearch" placeholder="搜索菜单" size="large" clearable>
+    <el-input ref="inputRef" v-model="keyword" placeholder="搜索菜单" size="large" clearable @input="handleSearch">
       <template #prefix>
-        <SvgIcon name="search" />
+        <SvgIcon name="search" class="svg-icon" />
       </template>
     </el-input>
-    <el-empty v-if="resultList.length === 0" description="暂无搜索结果" :image-size="100" />
+    <el-empty v-if="result.length === 0" description="暂无搜索结果" :image-size="100" />
     <template v-else>
       <p>搜索结果</p>
       <el-scrollbar ref="scrollbarRef" max-height="40vh" always>
-        <SearchResult
-          ref="searchResultRef"
+        <Result
+          ref="resultRef"
           v-model="activeRouteName"
-          :list="resultList"
-          :isPressUpOrDown="isPressUpOrDown"
+          :data="result"
+          :is-press-up-or-down="isPressUpOrDown"
           @click="handleEnter"
         />
       </el-scrollbar>
     </template>
     <template #footer>
-      <SearchFooter :total="resultList.length" />
+      <Footer :total="result.length" />
     </template>
   </el-dialog>
 </template>

src/common/components/SearchMenu/Result.vue

@@ -1,21 +1,22 @@
 <script lang="ts" setup>
-import { getCurrentInstance, onBeforeMount, onBeforeUnmount, onMounted, ref } from "vue"
-import { type RouteRecordName, type RouteRecordRaw } from "vue-router"
+import type { RouteRecordNameGeneric, RouteRecordRaw } from "vue-router"
 
 interface Props {
-  list: RouteRecordRaw[]
+  data: RouteRecordRaw[]
   isPressUpOrDown: boolean
 }
 
-/** 选中的菜单 */
-const modelValue = defineModel<RouteRecordName | undefined>({ required: true })
 const props = defineProps<Props>()
 
+/** 选中的菜单 */
+const modelValue = defineModel<RouteRecordNameGeneric | undefined>({ required: true })
+
 const instance = getCurrentInstance()
+
 const scrollbarHeight = ref<number>(0)
 
 /** 菜单的样式 */
-const itemStyle = (item: RouteRecordRaw) => {
+function itemStyle(item: RouteRecordRaw) {
   const flag = item.name === modelValue.value
   return {
     background: flag ? "var(--el-color-primary)" : "",
@@ -24,38 +25,39 @@ const itemStyle = (item: RouteRecordRaw) => {
 }
 
 /** 鼠标移入 */
-const handleMouseenter = (item: RouteRecordRaw) => {
+function handleMouseenter(item: RouteRecordRaw) {
   // 如果上键或下键与 mouseenter 事件同时生效，则以上下键为准，不执行该函数的赋值逻辑
   if (props.isPressUpOrDown) return
   modelValue.value = item.name
 }
 
 /** 计算滚动可视区高度 */
-const getScrollbarHeight = () => {
+function getScrollbarHeight() {
   // el-scrollbar max-height="40vh"
   scrollbarHeight.value = Number((window.innerHeight * 0.4).toFixed(1))
 }
 
 /** 根据下标计算到顶部的距离 */
-const getScrollTop = (index: number) => {
+function getScrollTop(index: number) {
   const currentInstance = instance?.proxy?.$refs[`resultItemRef${index}`] as HTMLDivElement[]
   if (!currentInstance) return 0
   const currentRef = currentInstance[0]
-  const scrollTop = currentRef.offsetTop + 128 // 128 = 两个 result-item （56 + 56 = 112）高度与上下 margin（8 + 8 = 16）大小之和
+  // 128 = 两个 result-item （56 + 56 = 112）高度与上下 margin（8 + 8 = 16）大小之和
+  const scrollTop = currentRef.offsetTop + 128
   return scrollTop > scrollbarHeight.value ? scrollTop - scrollbarHeight.value : 0
 }
 
-/** 在组件挂载前添加窗口大小变化事件监听器 */
+// 在组件挂载前添加窗口大小变化事件监听器
 onBeforeMount(() => {
   window.addEventListener("resize", getScrollbarHeight)
 })
 
-/** 在组件挂载时立即计算滚动可视区高度 */
+// 在组件挂载时立即计算滚动可视区高度
 onMounted(() => {
   getScrollbarHeight()
 })
 
-/** 在组件卸载前移除窗口大小变化事件监听器 */
+// 在组件卸载前移除窗口大小变化事件监听器
 onBeforeUnmount(() => {
   window.removeEventListener("resize", getScrollbarHeight)
 })
@@ -67,25 +69,25 @@ defineExpose({ getScrollTop })
   <!-- 外层 div 不能删除，是用来接收父组件 click 事件的 -->
   <div>
     <div
-      v-for="(item, index) in list"
+      v-for="(item, index) in props.data"
       :key="index"
       :ref="`resultItemRef${index}`"
       class="result-item"
       :style="itemStyle(item)"
       @mouseenter="handleMouseenter(item)"
     >
-      <SvgIcon v-if="item.meta?.svgIcon" :name="item.meta.svgIcon" />
+      <SvgIcon v-if="item.meta?.svgIcon" :name="item.meta.svgIcon" class="svg-icon" />
       <component v-else-if="item.meta?.elIcon" :is="item.meta.elIcon" class="el-icon" />
       <span class="result-item-title">
         {{ item.meta?.title }}
       </span>
-      <SvgIcon v-if="modelValue && modelValue === item.name" name="keyboard-enter" />
+      <SvgIcon v-if="modelValue && modelValue === item.name" name="keyboard-enter" class="svg-icon" />
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-@import "@/styles/mixins.scss";
+@import "@@/assets/styles/mixins.scss";
 
 .result-item {
   display: flex;

src/common/components/SearchMenu/index.vue

@@ -1,21 +1,21 @@
 <script lang="ts" setup>
-import { ref } from "vue"
-import SearchModal from "./SearchModal.vue"
+import Modal from "./Modal.vue"
 
 /** 控制 modal 显隐 */
-const modalVisible = ref<boolean>(false)
+const visible = ref<boolean>(false)
+
 /** 打开 modal */
-const handleOpen = () => {
-  modalVisible.value = true
+function handleOpen() {
+  visible.value = true
 }
 </script>
 
 <template>
   <div>
     <el-tooltip effect="dark" content="搜索菜单" placement="bottom">
-      <SvgIcon name="search" @click="handleOpen" />
+      <SvgIcon name="search" @click="handleOpen" class="svg-icon" />
     </el-tooltip>
-    <SearchModal v-model="modalVisible" />
+    <Modal v-model="visible" />
   </div>
 </template>
 

src/common/components/ThemeSwitch/index.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import { useTheme } from "@@/composables/useTheme"
+import { MagicStick } from "@element-plus/icons-vue"
+
+const { themeList, activeThemeName, setTheme } = useTheme()
+</script>
+
+<template>
+  <el-dropdown trigger="click">
+    <div>
+      <el-tooltip effect="dark" content="主题模式" placement="bottom">
+        <el-icon :size="20">
+          <MagicStick />
+        </el-icon>
+      </el-tooltip>
+    </div>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item
+          v-for="(theme, index) in themeList"
+          :key="index"
+          :disabled="activeThemeName === theme.name"
+          @click="(e: MouseEvent) => setTheme(e, theme.name)"
+        >
+          <span>{{ theme.title }}</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>

src/common/composables/useDevice.ts

@@ -1,11 +1,12 @@
-import { computed } from "vue"
-import { useAppStore } from "@/store/modules/app"
-import { DeviceEnum } from "@/constants/app-key"
+import { useAppStore } from "@/pinia/stores/app"
+import { DeviceEnum } from "@@/constants/app-key"
 
 const appStore = useAppStore()
+
 const isMobile = computed(() => appStore.device === DeviceEnum.Mobile)
 const isDesktop = computed(() => appStore.device === DeviceEnum.Desktop)
 
+/** 设备类型 Composable */
 export function useDevice() {
   return { isMobile, isDesktop }
 }

src/common/composables/useFetchSelect.ts

@@ -1,5 +1,3 @@
-import { ref, onMounted } from "vue"
-
 type OptionValue = string | number
 
 /** Select 需要的数据格式 */
@@ -17,6 +15,7 @@ interface FetchSelectProps {
   api: () => Promise<ApiData>
 }
 
+/** 下拉选择器 Composable */
 export function useFetchSelect(props: FetchSelectProps) {
   const { api } = props
 
@@ -24,15 +23,13 @@ export function useFetchSelect(props: FetchSelectProps) {
   const options = ref<SelectOption[]>([])
   const value = ref<OptionValue>("")
 
-  /** 调用接口获取数据 */
+  // 调用接口获取数据
   const loadData = () => {
     loading.value = true
     options.value = []
-    api()
-      .then((res) => {
+    api().then((res) => {
       options.value = res.data
-      })
-      .finally(() => {
+    }).finally(() => {
       loading.value = false
     })
   }
@@ -41,9 +38,5 @@ export function useFetchSelect(props: FetchSelectProps) {
     loadData()
   })
 
-  return {
-    loading,
-    options,
-    value
-  }
+  return { loading, options, value }
 }

src/common/composables/useFullscreenLoading.ts

@@ -1,13 +1,4 @@
-import { type LoadingOptions, ElLoading } from "element-plus"
-
-const defaultOptions = {
-  lock: true,
-  text: "加载中..."
-}
-
-interface LoadingInstance {
-  close: () => void
-}
+import type { LoadingOptions } from "element-plus"
 
 interface UseFullscreenLoading {
   <T extends (...args: Parameters<T>) => ReturnType<T>>(
@@ -16,8 +7,18 @@ interface UseFullscreenLoading {
   ): (...args: Parameters<T>) => Promise<ReturnType<T>>
 }
 
+interface LoadingInstance {
+  close: () => void
+}
+
+const DEFAULT_OPTIONS = {
+  lock: true,
+  text: "加载中..."
+}
+
 /**
- * 传入一个函数 fn，在它执行周期内，加上「全屏」loading
+ * @name 全屏加载 Composable
+ * @description 传入一个函数 fn，在它执行周期内，加上「全屏」Loading
  * @param fn 要执行的函数
  * @param options LoadingOptions
  * @returns 返回一个新的函数，该函数返回一个 Promise
@@ -26,10 +27,10 @@ export const useFullscreenLoading: UseFullscreenLoading = (fn, options = {}) =>
   let loadingInstance: LoadingInstance
   return async (...args) => {
     try {
-      loadingInstance = ElLoading.service({ ...defaultOptions, ...options })
+      loadingInstance = ElLoading.service({ ...DEFAULT_OPTIONS, ...options })
       return await fn(...args)
     } finally {
-      loadingInstance?.close()
+      loadingInstance.close()
     }
   }
 }

src/common/composables/useGreyAndColorWeakness.ts

@@ -1,12 +1,12 @@
-import { watchEffect } from "vue"
-import { useSettingsStore } from "@/store/modules/settings"
+import { useSettingsStore } from "@/pinia/stores/settings"
 
 const GREY_MODE = "grey-mode"
 const COLOR_WEAKNESS = "color-weakness"
+
 const classList = document.documentElement.classList
 
 /** 初始化 */
-const initGreyAndColorWeakness = () => {
+function initGreyAndColorWeakness() {
   const settingsStore = useSettingsStore()
   watchEffect(() => {
     classList.toggle(GREY_MODE, settingsStore.showGreyMode)
@@ -14,7 +14,7 @@ const initGreyAndColorWeakness = () => {
   })
 }
 
-/** 灰色模式和色弱模式 hook */
+/** 灰色模式和色弱模式 Composable */
 export function useGreyAndColorWeakness() {
   return { initGreyAndColorWeakness }
 }

src/common/composables/useLayoutMode.ts

@@ -1,16 +1,17 @@
-import { computed } from "vue"
-import { useSettingsStore } from "@/store/modules/settings"
-import { LayoutModeEnum } from "@/constants/app-key"
+import { useSettingsStore } from "@/pinia/stores/settings"
+import { LayoutModeEnum } from "@@/constants/app-key"
 
 const settingsStore = useSettingsStore()
+
 const isLeft = computed(() => settingsStore.layoutMode === LayoutModeEnum.Left)
 const isTop = computed(() => settingsStore.layoutMode === LayoutModeEnum.Top)
 const isLeftTop = computed(() => settingsStore.layoutMode === LayoutModeEnum.LeftTop)
 
-const setLayoutMode = (mode: LayoutModeEnum) => {
+function setLayoutMode(mode: LayoutModeEnum) {
   settingsStore.layoutMode = mode
 }
 
+/** 布局模式 Composable */
 export function useLayoutMode() {
   return { isLeft, isTop, isLeftTop, setLayoutMode }
 }

src/common/composables/usePagination.ts

@@ -1,13 +1,3 @@
-import { reactive } from "vue"
-
-interface DefaultPaginationData {
-  total: number
-  currentPage: number
-  pageSizes: number[]
-  pageSize: number
-  layout: string
-}
-
 interface PaginationData {
   total?: number
   currentPage?: number
@@ -17,7 +7,7 @@ interface PaginationData {
 }
 
 /** 默认的分页参数 */
-const defaultPaginationData: DefaultPaginationData = {
+const DEFAULT_PAGINATION_DATA = {
   total: 0,
   currentPage: 1,
   pageSizes: [10, 20, 50],
@@ -25,14 +15,15 @@ const defaultPaginationData: DefaultPaginationData = {
   layout: "total, sizes, prev, pager, next, jumper"
 }
 
-export function usePagination(initialPaginationData: PaginationData = {}) {
-  /** 合并分页参数 */
-  const paginationData = reactive({ ...defaultPaginationData, ...initialPaginationData })
-  /** 改变当前页码 */
+/** 分页 Composable */
+export function usePagination(initPaginationData: PaginationData = {}) {
+  // 合并分页参数
+  const paginationData = reactive({ ...DEFAULT_PAGINATION_DATA, ...initPaginationData })
+  // 改变当前页码
   const handleCurrentChange = (value: number) => {
     paginationData.currentPage = value
   }
-  /** 改变页面大小 */
+  // 改变每页显示条数
   const handleSizeChange = (value: number) => {
     paginationData.pageSize = value
   }

src/common/composables/usePany.ts

@@ -0,0 +1,42 @@
+function initStarNotification() {
+  setTimeout(() => {
+    ElNotification({
+      title: "为爱发电！",
+      type: "success",
+      message: h(
+        "div",
+        null,
+        [
+          h("div", null, "所有源码均免费开源，如果对你有帮助，欢迎点个 Star 支持一下！"),
+          h("a", { style: "color: teal", target: "_blank", href: "https://github.com/un-pany/v3-admin-vite" }, "点击传送")
+        ]
+      ),
+      duration: 0,
+      position: "bottom-right"
+    })
+  }, 0)
+}
+
+function initStoreNotification() {
+  setTimeout(() => {
+    ElNotification({
+      title: "懒人服务？",
+      type: "warning",
+      message: h(
+        "div",
+        null,
+        [
+          h("div", null, "不想自己动手，但想移除 TS 或其他模块？也有懒人套餐！"),
+          h("a", { style: "color: teal", target: "_blank", href: "https://github.com/un-pany/v3-admin-vite/issues/225" }, "点击查看")
+        ]
+      ),
+      duration: 0,
+      position: "bottom-right"
+    })
+  }, 500)
+}
+
+/** 作者的小心思 */
+export function usePany() {
+  return { initStarNotification, initStoreNotification }
+}

src/common/composables/useRouteListener.ts

@@ -1,28 +1,34 @@
-import { onBeforeUnmount } from "vue"
-import mitt, { type Handler } from "mitt"
-import { type RouteLocationNormalized } from "vue-router"
+import type { Handler } from "mitt"
+import type { RouteLocationNormalizedGeneric } from "vue-router"
+import mitt from "mitt"
 
 /** 回调函数的类型 */
-type Callback = (route: RouteLocationNormalized) => void
+type Callback = (route: RouteLocationNormalizedGeneric) => void
 
 const emitter = mitt()
+
 const key = Symbol("ROUTE_CHANGE")
-let latestRoute: RouteLocationNormalized
+
+let latestRoute: RouteLocationNormalizedGeneric
 
 /** 设置最新的路由信息，触发路由变化事件 */
-export const setRouteChange = (to: RouteLocationNormalized) => {
+export function setRouteChange(to: RouteLocationNormalizedGeneric) {
   // 触发事件
   emitter.emit(key, to)
   // 缓存最新的路由信息
   latestRoute = to
 }
 
-/** 单独监听路由会浪费渲染性能，使用发布订阅模式去进行分发管理 */
+/**
+ * @name 订阅路由变化 Composable
+ * @description 1. 单独用 watch 监听路由会浪费渲染性能
+ * @description 2. 可优先选择使用该发布订阅模式去进行分发管理
+ */
 export function useRouteListener() {
-  /** 回调函数集合 */
+  // 回调函数集合
   const callbackList: Callback[] = []
 
-  /** 监听路由变化（可以选择立即执行） */
+  // 监听路由变化（可以选择立即执行）
   const listenerRouteChange = (callback: Callback, immediate = false) => {
     // 缓存回调函数
     callbackList.push(callback)
@@ -32,16 +38,14 @@ export function useRouteListener() {
     immediate && latestRoute && callback(latestRoute)
   }
 
-  /** 移除路由变化事件监听器 */
+  // 移除路由变化事件监听器
   const removeRouteListener = (callback: Callback) => {
     emitter.off(key, callback as Handler)
   }
 
-  /** 组件销毁前移除监听器 */
+  // 组件销毁前移除监听器
   onBeforeUnmount(() => {
-    for (let i = 0; i < callbackList.length; i++) {
-      removeRouteListener(callbackList[i])
-    }
+    callbackList.forEach(removeRouteListener)
   })
 
   return { listenerRouteChange, removeRouteListener }

src/common/composables/useTheme.ts

@@ -1,7 +1,8 @@
-import { ref, watchEffect } from "vue"
-import { getActiveThemeName, setActiveThemeName } from "@/utils/cache/local-storage"
+import { getActiveThemeName, setActiveThemeName } from "@@/utils/cache/local-storage"
+import { setCssVar } from "@@/utils/css"
 
 const DEFAULT_THEME_NAME = "normal"
+
 type DefaultThemeName = typeof DEFAULT_THEME_NAME
 
 /** 注册的主题名称, 其中 DefaultThemeName 是必填的 */
@@ -32,23 +33,33 @@ const themeList: ThemeList[] = [
 const activeThemeName = ref<ThemeName>(getActiveThemeName() || DEFAULT_THEME_NAME)
 
 /** 设置主题 */
-const setTheme = (value: ThemeName) => {
+function setTheme({ clientX, clientY }: MouseEvent, value: ThemeName) {
+  const maxRadius = Math.hypot(
+    Math.max(clientX, window.innerWidth - clientX),
+    Math.max(clientY, window.innerHeight - clientY)
+  )
+  setCssVar("--v3-theme-x", `${clientX}px`)
+  setCssVar("--v3-theme-y", `${clientY}px`)
+  setCssVar("--v3-theme-r", `${maxRadius}px`)
+  const handler = () => {
     activeThemeName.value = value
+  }
+  document.startViewTransition ? document.startViewTransition(handler) : handler()
 }
 
 /** 在 html 根元素上挂载 class */
-const addHtmlClass = (value: ThemeName) => {
+function addHtmlClass(value: ThemeName) {
   document.documentElement.classList.add(value)
 }
 
 /** 在 html 根元素上移除其他主题 class */
-const removeHtmlClass = (value: ThemeName) => {
-  const otherThemeNameList = themeList.map((item) => item.name).filter((name) => name !== value)
+function removeHtmlClass(value: ThemeName) {
+  const otherThemeNameList = themeList.map(item => item.name).filter(name => name !== value)
   document.documentElement.classList.remove(...otherThemeNameList)
 }
 
 /** 初始化 */
-const initTheme = () => {
+function initTheme() {
   // watchEffect 来收集副作用
   watchEffect(() => {
     const value = activeThemeName.value
@@ -58,7 +69,7 @@ const initTheme = () => {
   })
 }
 
-/** 主题 hook */
+/** 主题 Composable */
 export function useTheme() {
   return { themeList, activeThemeName, initTheme, setTheme }
 }

src/common/composables/useTitle.ts

@@ -1,5 +1,3 @@
-import { ref, watch } from "vue"
-
 /** 项目标题 */
 const VITE_APP_TITLE = import.meta.env.VITE_APP_TITLE ?? "V3 Admin Vite"
 
@@ -7,17 +5,18 @@ const VITE_APP_TITLE = import.meta.env.VITE_APP_TITLE ?? "V3 Admin Vite"
 const dynamicTitle = ref<string>("")
 
 /** 设置标题 */
-const setTitle = (title?: string) => {
+function setTitle(title?: string) {
   dynamicTitle.value = title ? `${VITE_APP_TITLE} | ${title}` : VITE_APP_TITLE
 }
 
-/** 监听标题变化 */
+// 监听标题变化
 watch(dynamicTitle, (value, oldValue) => {
   if (document && value !== oldValue) {
     document.title = value
   }
 })
 
+/** 标题 Composable */
 export function useTitle() {
   return { setTitle }
 }

src/common/composables/useWatermark.ts

@@ -1,16 +1,8 @@
-import { type Ref, onBeforeUnmount, ref } from "vue"
+import type { Ref } from "vue"
 import { debounce } from "lodash-es"
 
-type Observer = {
-  watermarkElMutationObserver?: MutationObserver
-  parentElMutationObserver?: MutationObserver
-  parentElResizeObserver?: ResizeObserver
-}
-
-type DefaultConfig = typeof defaultConfig
-
 /** 默认配置 */
-const defaultConfig = {
+const DEFAULT_CONFIG = {
   /** 防御（默认开启，能防御水印被删除或隐藏，但可能会有性能损耗） */
   defense: true,
   /** 文本颜色 */
@@ -29,45 +21,50 @@ const defaultConfig = {
   height: 200
 }
 
+type DefaultConfig = typeof DEFAULT_CONFIG
+
+interface Observer {
+  watermarkElMutationObserver?: MutationObserver
+  parentElMutationObserver?: MutationObserver
+  parentElResizeObserver?: ResizeObserver
+}
+
 /** body 元素 */
 const bodyEl = ref<HTMLElement>(document.body)
 
 /**
- * 创建水印
- * 1. 可以选择传入挂载水印的容器元素，默认是 body
- * 2. 做了水印防御，能有效防御别人打开控制台删除或隐藏水印
+ * @name 水印 Composable
+ * @description 1. 可以选择传入挂载水印的容器元素，默认是 body
+ * @description 2. 做了水印防御，能有效防御别人打开控制台删除或隐藏水印
  */
 export function useWatermark(parentEl: Ref<HTMLElement | null> = bodyEl) {
-  /** 备份文本 */
+  // 备份文本
   let backupText: string
-  /** 最终配置 */
+  // 最终配置
   let mergeConfig: DefaultConfig
-  /** 水印元素 */
+  // 水印元素
   let watermarkEl: HTMLElement | null = null
-  /** 观察器 */
+  // 观察器
   const observer: Observer = {
     watermarkElMutationObserver: undefined,
     parentElMutationObserver: undefined,
     parentElResizeObserver: undefined
   }
 
-  /** 设置水印 */
+  // 设置水印
   const setWatermark = (text: string, config: Partial<DefaultConfig> = {}) => {
-    if (!parentEl.value) {
-      console.warn("请在 DOM 挂载完成后再调用 setWatermark 方法设置水印")
-      return
-    }
+    if (!parentEl.value) return console.warn("请在 DOM 挂载完成后再调用 setWatermark 方法设置水印")
     // 备份文本
     backupText = text
     // 合并配置
-    mergeConfig = { ...defaultConfig, ...config }
+    mergeConfig = { ...DEFAULT_CONFIG, ...config }
     // 创建或更新水印元素
     watermarkEl ? updateWatermarkEl() : createWatermarkEl()
     // 监听水印元素和容器元素的变化
     addElListener(parentEl.value)
   }
 
-  /** 创建水印元素 */
+  // 创建水印元素
   const createWatermarkEl = () => {
     const isBody = parentEl.value!.tagName.toLowerCase() === bodyEl.value.tagName.toLowerCase()
     const watermarkElPosition = isBody ? "fixed" : "absolute"
@@ -86,7 +83,7 @@ export function useWatermark(parentEl: Ref<HTMLElement | null> = bodyEl) {
     parentEl.value!.appendChild(watermarkEl)
   }
 
-  /** 更新水印元素 */
+  // 更新水印元素
   const updateWatermarkEl = (
     options: Partial<{
       width: number
@@ -99,7 +96,7 @@ export function useWatermark(parentEl: Ref<HTMLElement | null> = bodyEl) {
     options.height && (watermarkEl.style.height = `${options.height}px`)
   }
 
-  /** 创建 base64 图片 */
+  // 创建 base64 图片
   const createBase64 = () => {
     const { color, opacity, size, family, angle, width, height } = mergeConfig
     const canvasEl = document.createElement("canvas")
@@ -116,7 +113,7 @@ export function useWatermark(parentEl: Ref<HTMLElement | null> = bodyEl) {
     return canvasEl.toDataURL()
   }
 
-  /** 清除水印 */
+  // 清除水印
   const clearWatermark = () => {
     if (!parentEl.value || !watermarkEl) return
     // 移除对水印元素和容器元素的监听
@@ -132,14 +129,14 @@ export function useWatermark(parentEl: Ref<HTMLElement | null> = bodyEl) {
     }
   }
 
-  /** 刷新水印（防御时调用） */
+  // 刷新水印（防御时调用）
   const updateWatermark = debounce(() => {
     clearWatermark()
     createWatermarkEl()
     addElListener(parentEl.value!)
   }, 100)
 
-  /** 监听水印元素和容器元素的变化（DOM 变化 & DOM 大小变化） */
+  // 监听水印元素和容器元素的变化（DOM 变化 & DOM 大小变化）
   const addElListener = (targetNode: HTMLElement) => {
     // 判断是否开启防御
     if (mergeConfig.defense) {
@@ -159,7 +156,7 @@ export function useWatermark(parentEl: Ref<HTMLElement | null> = bodyEl) {
     }
   }
 
-  /** 移除对水印元素和容器元素的监听，传参可指定要移除哪个监听，不传默认移除全部监听 */
+  // 移除对水印元素和容器元素的监听，传参可指定要移除哪个监听，不传默认移除全部监听
   const removeListener = (kind: "mutation" | "resize" | "all" = "all") => {
     // 移除 mutation 监听
     if (kind === "mutation" || kind === "all") {
@@ -175,7 +172,7 @@ export function useWatermark(parentEl: Ref<HTMLElement | null> = bodyEl) {
     }
   }
 
-  /** 监听 DOM 变化 */
+  // 监听 DOM 变化
   const addMutationListener = (targetNode: HTMLElement) => {
     // 当观察到变动时执行的回调
     const mutationCallback = debounce((mutationList: MutationRecord[]) => {
@@ -214,7 +211,7 @@ export function useWatermark(parentEl: Ref<HTMLElement | null> = bodyEl) {
     })
   }
 
-  /** 监听 DOM 大小变化 */
+  // 监听 DOM 大小变化
   const addResizeListener = (targetNode: HTMLElement) => {
     // 当 targetNode 元素大小变化时去更新整个水印的大小
     const resizeCallback = debounce(() => {
@@ -227,7 +224,7 @@ export function useWatermark(parentEl: Ref<HTMLElement | null> = bodyEl) {
     observer.parentElResizeObserver.observe(targetNode)
   }
 
-  /** 在组件卸载前移除水印以及各种监听 */
+  // 在组件卸载前移除水印以及各种监听
   onBeforeUnmount(() => {
     clearWatermark()
   })

src/common/constants/app-key.ts

@@ -13,8 +13,10 @@ export enum LayoutModeEnum {
 
 /** 侧边栏打开状态常量 */
 export const SIDEBAR_OPENED = "opened"
+
 /** 侧边栏关闭状态常量 */
 export const SIDEBAR_CLOSED = "closed"
 
 export type SidebarOpened = typeof SIDEBAR_OPENED
+
 export type SidebarClosed = typeof SIDEBAR_CLOSED

src/common/constants/cache-key.ts

@@ -1,7 +1,7 @@
 const SYSTEM_NAME = "v3-admin-vite"
 
 /** 缓存数据时用到的 Key */
-class CacheKey {
+export class CacheKey {
   static readonly TOKEN = `${SYSTEM_NAME}-token-key`
   static readonly CONFIG_LAYOUT = `${SYSTEM_NAME}-config-layout-key`
   static readonly SIDEBAR_STATUS = `${SYSTEM_NAME}-sidebar-status-key`
@@ -9,5 +9,3 @@ class CacheKey {
   static readonly VISITED_VIEWS = `${SYSTEM_NAME}-visited-views-key`
   static readonly CACHED_VIEWS = `${SYSTEM_NAME}-cached-views-key`
 }
-
-export default CacheKey

src/common/utils/cache/cookies.ts

@@ -0,0 +1,16 @@
+// 统一处理 Cookie
+
+import { CacheKey } from "@@/constants/cache-key"
+import Cookies from "js-cookie"
+
+export function getToken() {
+  return Cookies.get(CacheKey.TOKEN)
+}
+
+export function setToken(token: string) {
+  Cookies.set(CacheKey.TOKEN, token)
+}
+
+export function removeToken() {
+  Cookies.remove(CacheKey.TOKEN)
+}

src/common/utils/cache/local-storage.ts

@@ -0,0 +1,60 @@
+// 统一处理 localStorage
+
+import type { LayoutsConfig } from "@/layouts/config"
+import type { TagView } from "@/pinia/stores/tags-view"
+import type { ThemeName } from "@@/composables/useTheme"
+import type { SidebarClosed, SidebarOpened } from "@@/constants/app-key"
+import { CacheKey } from "@@/constants/cache-key"
+
+// #region 系统布局配置
+export function getLayoutsConfig() {
+  const json = localStorage.getItem(CacheKey.CONFIG_LAYOUT)
+  return json ? (JSON.parse(json) as LayoutsConfig) : null
+}
+export function setLayoutsConfig(settings: LayoutsConfig) {
+  localStorage.setItem(CacheKey.CONFIG_LAYOUT, JSON.stringify(settings))
+}
+export function removeLayoutsConfig() {
+  localStorage.removeItem(CacheKey.CONFIG_LAYOUT)
+}
+// #endregion
+
+// #region 侧边栏状态
+export function getSidebarStatus() {
+  return localStorage.getItem(CacheKey.SIDEBAR_STATUS)
+}
+export function setSidebarStatus(sidebarStatus: SidebarOpened | SidebarClosed) {
+  localStorage.setItem(CacheKey.SIDEBAR_STATUS, sidebarStatus)
+}
+// #endregion
+
+// #region 正在应用的主题名称
+export function getActiveThemeName() {
+  return localStorage.getItem(CacheKey.ACTIVE_THEME_NAME) as ThemeName | null
+}
+export function setActiveThemeName(themeName: ThemeName) {
+  localStorage.setItem(CacheKey.ACTIVE_THEME_NAME, themeName)
+}
+// #endregion
+
+// #region 标签栏
+export function getVisitedViews() {
+  const json = localStorage.getItem(CacheKey.VISITED_VIEWS)
+  return JSON.parse(json ?? "[]") as TagView[]
+}
+export function setVisitedViews(views: TagView[]) {
+  views.forEach((view) => {
+    // 删除不必要的属性，防止 JSON.stringify 处理到循环引用
+    delete view.matched
+    delete view.redirectedFrom
+  })
+  localStorage.setItem(CacheKey.VISITED_VIEWS, JSON.stringify(views))
+}
+export function getCachedViews() {
+  const json = localStorage.getItem(CacheKey.CACHED_VIEWS)
+  return JSON.parse(json ?? "[]") as string[]
+}
+export function setCachedViews(views: string[]) {
+  localStorage.setItem(CacheKey.CACHED_VIEWS, JSON.stringify(views))
+}
+// #endregion

src/common/utils/css.ts

@@ -1,7 +1,7 @@
 /** 获取指定元素（默认全局）上的 CSS 变量的值 */
-export const getCssVar = (varName: string, element: HTMLElement = document.documentElement) => {
+export function getCssVar(varName: string, element: HTMLElement = document.documentElement) {
   if (!varName?.startsWith("--")) {
-    console.warn("CSS 变量名应以 '--' 开头")
+    console.error("CSS 变量名应以 '--' 开头")
     return ""
   }
   // 没有拿到值时，会返回空串
@@ -9,9 +9,9 @@ export const getCssVar = (varName: string, element: HTMLElement = document.docum
 }
 
 /** 设置指定元素（默认全局）上的 CSS 变量的值 */
-export const setCssVar = (varName: string, value: string, element: HTMLElement = document.documentElement) => {
+export function setCssVar(varName: string, value: string, element: HTMLElement = document.documentElement) {
   if (!varName?.startsWith("--")) {
-    console.warn("CSS 变量名应以 '--' 开头")
+    console.error("CSS 变量名应以 '--' 开头")
     return
   }
   element.style.setProperty(varName, value)

src/common/utils/datetime.ts

@@ -3,7 +3,7 @@ import dayjs from "dayjs"
 const INVALID_DATE = "N/A"
 
 /** 格式化日期时间 */
-export const formatDateTime = (datetime: string | number | Date = "", template: string = "YYYY-MM-DD HH:mm:ss") => {
+export function formatDateTime(datetime: string | number | Date = "", template: string = "YYYY-MM-DD HH:mm:ss") {
   const day = dayjs(datetime)
   return day.isValid() ? day.format(template) : INVALID_DATE
 }

src/common/utils/permission.ts

@@ -0,0 +1,13 @@
+import { useUserStore } from "@/pinia/stores/user"
+import { isArray } from "@@/utils/validate"
+
+/** 全局权限判断函数，和权限指令 v-permission 功能类似 */
+export function checkPermission(permissionRoles: string[]): boolean {
+  if (isArray(permissionRoles) && permissionRoles.length > 0) {
+    const { roles } = useUserStore()
+    return roles.some(role => permissionRoles.includes(role))
+  } else {
+    console.error("参数必须是一个数组且长度大于 0，参考：checkPermission(['admin', 'editor'])")
+    return false
+  }
+}

src/common/utils/validate.ts

@@ -0,0 +1,15 @@
+/** 判断是否为数组 */
+export function isArray<T>(arg: T) {
+  return Array.isArray ? Array.isArray(arg) : Object.prototype.toString.call(arg) === "[object Array]"
+}
+
+/** 判断是否为字符串 */
+export function isString(str: unknown) {
+  return typeof str === "string" || str instanceof String
+}
+
+/** 判断是否为外链 */
+export function isExternal(path: string) {
+  const reg = /^(https?:|mailto:|tel:)/
+  return reg.test(path)
+}

src/components/SvgIcon/index.vue

@@ -1,29 +0,0 @@
-<script lang="ts" setup>
-import { computed } from "vue"
-
-interface Props {
-  prefix?: string
-  name: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  prefix: "icon"
-})
-
-const symbolId = computed(() => `#${props.prefix}-${props.name}`)
-</script>
-
-<template>
-  <svg class="svg-icon">
-    <use :href="symbolId" />
-  </svg>
-</template>
-
-<style lang="scss" scoped>
-.svg-icon {
-  width: 1em;
-  height: 1em;
-  fill: currentColor;
-  overflow: hidden;
-}
-</style>