增加后台管理系统

2025-03-28 22:45:42 +08:00 · 2025-03-28 22:45:42 +08:00 · 3934e34b1a
parent 301184e149
commit 3934e34b1a
179 changed files with 15434 additions and 266 deletions
--- a/README.md
+++ b/README.md
@ -9,33 +9,9 @@ Ragflow-Plus，该名字不是说比 Ragflow 项目牛的意思，而是对标 D

 ## 新增功能介绍

-### 一. 用户批量注册/批量加入团队
-隐藏了原本用户注册的功能，改为管理员通过后台批量注册，并加入管理员团队，可共享团队知识库及默认模型配置
-
-使用方式:
-1. python环境安装依赖：
-
-参考python版本：python == 3.10.16
-```python
-pip install mysql-connector-python
-pip install pycryptodomex
-pip install werkzeug
-```
-
-2. 修改`python_sql\add.json`文件内容：
-
- student_id 为 待添加用户学号
- tenant_id 为 共享知识库的队长id，需要连接数据库查看
-
-3. 执行批量插入操作：
-
-```python
-python python_sql/add_sql_final.py
-```
-
-默认用户名为 `学号@xidian.cn`
-默认密码为 `学号`
+### 一. 用户后台管理系统

+移除原登陆页用户注册的通道，搭建用户后台管理系统，可对用户进行管理，包括用户注册、查询、删除、修改等功能。

 ### 二. 优化对话显示
 微调了对话界面的样式，使其观感更为友好
@ -44,6 +20,9 @@ python python_sql/add_sql_final.py
 新增文档撰写全新的交互方式，支持直接导出为 Word 文档

 ## 使用方式
+
+### 前端文件替换
+
 1. 克隆项目
 ```bash
 git clone https://github.com/zstar1003/ragflow-plus.git
@ -66,6 +45,8 @@ rm -rf /ragflow/web/dist
 docker cp dist ragflow-server:/ragflow/web/
 ```

+### 管理系统运行
+
 ## Agent功能恢复

 由于在我的应用场景中，不需要Agent功能，故隐藏了Agent按钮的入口，如需恢复Agent功能，可修改`web\src\layouts\components\header\index.tsx`，对以下内容取消注释：
@ -77,23 +58,32 @@ docker cp dist ragflow-server:/ragflow/web/
 同时可将排列样式进行重置，以还原原本的样式布局，修改`web\src\layouts\components\header\index.less`文件，替换为ragflow原始样式：`https://github.com/infiniflow/ragflow/blob/main/web/src/layouts/components/header/index.less`


-## TODO
+## Todo List

- [ ] 用户批量注册可视化后台管理
-
- [ ] 文档撰写插入图片
+- [x] 搭建用户后台管理

 - [ ] 知识库批量上传解析

+- [ ] 文档撰写图表支持
+
 ## 交流群
 如果有其它需求或问题建议，可加入交流群进行讨论

-![交流群.jpg](assets/group.jpg)
-
+<div align="center">
+  <img src="assets/group.jpg" width="300" alt="交流群">
+</div>

 ## License

 版权说明：本项目在 Ragflow 项目基础上进行二开，需要遵守 Ragflow 的开源协议，如下

 This repository is available under the [Ragflow
- Open Source License](LICENSE), which is essentially Apache 2.0 with a few additional restrictions.
+ Open Source License](LICENSE), which is essentially Apache 2.0 with a few additional restrictions.
+
+## 鸣谢
+
+本项目基于以下开源项目开发：
+
+- [ragflow](https://github.com/infiniflow/ragflow)
+
+- [v3-admin-vite](https://github.com/un-pany/v3-admin-vite)
--- a/management/Dockerfile
+++ b/management/Dockerfile
@ -0,0 +1,30 @@
+# 前端构建阶段
+FROM node:18 AS frontend-builder
+WORKDIR /app/frontend
+COPY web /app/frontend
+# 安装 pnpm
+RUN npm install -g pnpm
+# 设置环境变量禁用交互式提示
+ENV CI=true
+# 安装依赖并构建
+RUN pnpm i && pnpm build
+
+# 前端服务阶段
+FROM nginx:alpine AS frontend
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=frontend-builder /app/frontend/dist /usr/share/nginx/html
+# 暴露前端端口
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]
+
+# 后端构建阶段
+FROM python:3.10.16 AS backend
+WORKDIR /app
+COPY server/requirements.txt /app/
+# 安装依赖
+RUN pip install --no-cache-dir -r requirements.txt -i https://pypi.tuna.tsinghua.edu.cn/simple
+# 复制后端代码
+COPY server /app
+# 暴露后端端口
+EXPOSE 5000
+CMD ["python", "app.py"]
--- a/management/docker-compose.yml
+++ b/management/docker-compose.yml
@ -0,0 +1,27 @@
+services:
+  frontend:
+    image: zstar1003/ragflowplus-management-web:v0.1.0
+    build:
+      context: .
+      dockerfile: Dockerfile
+      target: frontend
+    ports:
+      - "8080:80"
+    depends_on:
+      - backend
+    environment:
+      - API_URL=http://backend:5000
+
+  backend:
+    image: zstar1003/ragflowplus-management-server:v0.1.0
+    build:
+      context: .
+      dockerfile: Dockerfile
+      target: backend
+    ports:
+      - "5000:5000"
+    environment:
+      - FLASK_ENV=development
+      - CORS_ALLOWED_ORIGINS=http://localhost:8080,http://frontend
+    extra_hosts:
+      - "host.docker.internal:host-gateway"
--- a/management/nginx.conf
+++ b/management/nginx.conf
@ -0,0 +1,13 @@
+server {
+    listen 80;
+    
+    location / {
+        root /usr/share/nginx/html;
+        try_files $uri $uri/ /index.html;
+    }
+
+    location /v3-admin-vite/ {
+        alias /usr/share/nginx/html/;
+        try_files $uri $uri/ /index.html;
+    }
+}
--- a/management/server/app.py
+++ b/management/server/app.py
@ -0,0 +1,90 @@
+from flask import Flask, jsonify, request
+from flask_cors import CORS
+import mysql.connector
+import database
+
+app = Flask(__name__)
+# 启用CORS，允许前端访问
+CORS(app, resources={r"/api/*": {"origins": "*"}}, supports_credentials=True)
+
+# 添加 v1 前缀
+@app.route('/api/v1/auth/login', methods=['POST'])
+def login():
+    # 实现登录逻辑
+    return {"code": 0, "data": {"token": "your-token"}, "message": "登录成功"}
+    
+
+@app.route('/api/v1/users/me', methods=['GET'])
+def get_current_user():
+    return jsonify({
+        "code": 0,
+        "data": {
+            "username": "admin",
+            "roles": ["admin"]
+        },
+        "message": "获取用户信息成功"
+    })
+
+
+@app.route('/api/v1/users', methods=['GET'])
+def get_users():
+    """获取用户的API端点,支持分页和条件查询"""
+    try:
+        # 获取查询参数
+        current_page = int(request.args.get('currentPage', 1))
+        page_size = int(request.args.get('size', 10))
+        username = request.args.get('username', '')
+        email = request.args.get('email', '')
+        
+        # 调用数据库函数获取分页和筛选后的用户数据
+        users, total = database.get_users_with_pagination(current_page, page_size, username, email)
+        
+        # 返回符合前端期望格式的数据
+        return jsonify({
+            "code": 0,  # 成功状态码
+            "data": {
+                "list": users,
+                "total": total
+            },
+            "message": "获取用户列表成功"
+        })
+    except Exception as e:
+        # 错误处理
+        return jsonify({
+            "code": 500,
+            "message": f"获取用户列表失败: {str(e)}"
+        }), 500
+
+@app.route('/api/v1/users/<string:user_id>', methods=['DELETE'])
+def delete_user(user_id):
+    """删除用户的API端点"""
+    database.delete_user(user_id)
+    return jsonify({
+        "code": 0,
+        "message": f"用户 {user_id} 删除成功"
+    })
+
+@app.route('/api/v1/users', methods=['POST'])
+def create_user():
+    """创建用户的API端点"""
+    data = request.json
+    # 创建用户
+    database.create_user(user_data=data)
+    return jsonify({
+        "code": 0,
+        "message": "用户创建成功"
+    })
+
+@app.route('/api/v1/users/<string:user_id>', methods=['PUT'])
+def update_user(user_id):
+    """更新用户的API端点"""
+    data = request.json
+    user_id = data.get('id')
+    database.update_user(user_id=user_id, user_data=data)
+    return jsonify({
+        "code": 0,
+        "message": f"用户 {user_id} 更新成功"
+    })
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=5000, debug=True)
--- a/management/server/database.py
+++ b/management/server/database.py
@ -0,0 +1,269 @@
+import mysql.connector
+from utils import generate_uuid, encrypt_password
+from datetime import datetime
+from tabulate import tabulate
+
+# 数据库连接配置
+db_config = {
+    "host": "host.docker.internal",
+    "port": 5455,
+    "user": "root",
+    "password": "infini_rag_flow",
+    "database": "rag_flow",
+}
+    
+def get_users_with_pagination(current_page, page_size, username='', email=''):
+    """查询用户信息，支持分页和条件筛选"""
+    try:
+        # 建立数据库连接
+        conn = mysql.connector.connect(**db_config)
+        cursor = conn.cursor(dictionary=True)
+        
+        # 构建WHERE子句和参数
+        where_clauses = []
+        params = []
+        
+        if username:
+            where_clauses.append("nickname LIKE %s")
+            params.append(f"%{username}%")
+        
+        if email:
+            where_clauses.append("email LIKE %s")
+            params.append(f"%{email}%")
+        
+        # 组合WHERE子句
+        where_sql = " AND ".join(where_clauses) if where_clauses else "1=1"
+        
+        # 查询总记录数
+        count_sql = f"SELECT COUNT(*) as total FROM user WHERE {where_sql}"
+        cursor.execute(count_sql, params)
+        total = cursor.fetchone()['total']
+        
+        # 计算分页偏移量
+        offset = (current_page - 1) * page_size
+        
+        # 执行分页查询
+        query = f"""
+        SELECT id, nickname, email, create_date, update_date, status, is_superuser
+        FROM user
+        WHERE {where_sql}
+        ORDER BY id DESC
+        LIMIT %s OFFSET %s
+        """
+        cursor.execute(query, params + [page_size, offset])
+        results = cursor.fetchall()
+        
+        # 关闭连接
+        cursor.close()
+        conn.close()
+        
+        # 格式化结果
+        formatted_users = []
+        for user in results:
+            formatted_users.append({
+                "id": user["id"],
+                "username": user["nickname"],
+                "email": user["email"],
+                "createTime": user["create_date"].strftime("%Y-%m-%d %H:%M:%S") if user["create_date"] else "",
+                "updateTime": user["update_date"].strftime("%Y-%m-%d %H:%M:%S") if user["update_date"] else "",
+            })
+        
+        return formatted_users, total
+        
+    except mysql.connector.Error as err:
+        print(f"数据库错误: {err}")
+        return [], 0
+
+def delete_user(user_id):
+    """删除指定ID的用户"""
+    try:
+        conn = mysql.connector.connect(**db_config)
+        cursor = conn.cursor()
+        
+        # 删除 user 表中的用户记录
+        query = "DELETE FROM user WHERE id = %s"
+        cursor.execute(query, (user_id,))
+        
+        # 删除 user_tenant 表中的关联记录
+        user_tenant_query = "DELETE FROM user_tenant WHERE user_id = %s"
+        cursor.execute(user_tenant_query, (user_id,))
+
+        # 删除 tenant 表中的关联记录
+        tenant_query = "DELETE FROM tenant WHERE id = %s"
+        cursor.execute(tenant_query, (user_id,))
+    
+        # 删除 tenant_llm 表中的关联记录
+        tenant_llm_query = "DELETE FROM tenant_llm WHERE tenant_id = %s"
+        cursor.execute(tenant_llm_query, (user_id,))
+    
+        conn.commit()
+        cursor.close()
+        conn.close()
+        
+        return True
+    except mysql.connector.Error as err:
+        print(f"删除用户错误: {err}")
+        return False
+
+def create_user(user_data):
+    """创建新用户，并加入最早用户的团队，并使用相同的模型配置"""
+    try:
+        conn = mysql.connector.connect(**db_config)
+        cursor = conn.cursor(dictionary=True)
+        
+        # 查询最早创建的tenant配置
+        query_earliest_tenant = """
+        SELECT id, llm_id, embd_id, asr_id, img2txt_id, rerank_id, tts_id, parser_ids, credit
+        FROM tenant 
+        WHERE create_time = (SELECT MIN(create_time) FROM tenant)
+        LIMIT 1
+        """
+        cursor.execute(query_earliest_tenant)
+        earliest_tenant = cursor.fetchone()
+
+        # 查询最早创建的tenant配置
+        query_earliest_tenant_llm = """
+        SELECT llm_factory, model_type, llm_name, api_key, api_base, max_tokens, used_tokens
+        FROM tenant_llm 
+        WHERE create_time = (SELECT MIN(create_time) FROM tenant_llm)
+        LIMIT 1
+        """
+        cursor.execute(query_earliest_tenant_llm)
+        earliest_tenant_llm = cursor.fetchone()
+        
+        # 开始插入
+        user_id = generate_uuid()
+        # 获取基本信息
+        username = user_data.get("username")
+        email = user_data.get("email")
+        password = user_data.get("password")
+        # 加密密码
+        encrypted_password = encrypt_password(password)
+
+        current_datetime = datetime.now()
+        create_time = int(current_datetime.timestamp() * 1000) 
+        current_date = current_datetime.strftime("%Y-%m-%d %H:%M:%S")
+
+        # 插入用户表
+        user_insert_query = """
+        INSERT INTO user (
+            id, create_time, create_date, update_time, update_date, access_token,
+            nickname, password, email, avatar, language, color_schema, timezone,
+            last_login_time, is_authenticated, is_active, is_anonymous, login_channel,
+            status, is_superuser
+        ) VALUES (
+            %s, %s, %s, %s, %s, %s,
+            %s, %s, %s, %s, %s, %s, %s,
+            %s, %s, %s, %s, %s,
+            %s, %s
+        )
+        """
+        user_data = (
+            user_id, create_time, current_date, create_time, current_date, None,
+            username, encrypted_password, email, None, "Chinese", "Bright", "UTC+8 Asia/Shanghai",
+            current_date, 1, 1, 0, "password",
+            1, 0
+        )
+        cursor.execute(user_insert_query, user_data)
+
+        # 插入租户表
+        tenant_insert_query = """
+        INSERT INTO tenant (
+            id, create_time, create_date, update_time, update_date, name,
+            public_key, llm_id, embd_id, asr_id, img2txt_id, rerank_id, tts_id,
+            parser_ids, credit, status
+        ) VALUES (
+            %s, %s, %s, %s, %s, %s,
+            %s, %s, %s, %s, %s, %s, %s,
+            %s, %s, %s
+        )
+        """
+        tenant_data = (
+            user_id, create_time, current_date, create_time, current_date, username + "'s Kingdom",
+            None, str(earliest_tenant['llm_id']), str(earliest_tenant['embd_id']), 
+            str(earliest_tenant['asr_id']), str(earliest_tenant['img2txt_id']), 
+            str(earliest_tenant['rerank_id']), str(earliest_tenant['tts_id']),
+            str(earliest_tenant['parser_ids']), str(earliest_tenant['credit']), 1
+        )
+        cursor.execute(tenant_insert_query, tenant_data)
+
+        # 插入用户租户关系表（owner角色）
+        user_tenant_insert_owner_query = """
+        INSERT INTO user_tenant (
+            id, create_time, create_date, update_time, update_date, user_id,
+            tenant_id, role, invited_by, status
+        ) VALUES (
+            %s, %s, %s, %s, %s, %s,
+            %s, %s, %s, %s
+        )
+        """
+        user_tenant_data_owner = (
+            generate_uuid(), create_time, current_date, create_time, current_date, user_id,
+            user_id, "owner", user_id, 1
+        )
+        cursor.execute(user_tenant_insert_owner_query, user_tenant_data_owner)
+        
+        # 插入用户租户关系表（normal角色）
+        user_tenant_insert_normal_query = """
+        INSERT INTO user_tenant (
+            id, create_time, create_date, update_time, update_date, user_id,
+            tenant_id, role, invited_by, status
+        ) VALUES (
+            %s, %s, %s, %s, %s, %s,
+            %s, %s, %s, %s
+        )
+        """
+        user_tenant_data_normal = (
+            generate_uuid(), create_time, current_date, create_time, current_date, user_id,
+            earliest_tenant['id'], "normal", earliest_tenant['id'], 1
+        )
+        cursor.execute(user_tenant_insert_normal_query, user_tenant_data_normal)
+
+        # 插入租户LLM配置表
+        tenant_llm_insert_query = """
+        INSERT INTO tenant_llm (
+            create_time, create_date, update_time, update_date, tenant_id,
+            llm_factory, model_type, llm_name, api_key, api_base, max_tokens, used_tokens
+        ) VALUES (
+            %s, %s, %s, %s, %s,
+            %s, %s, %s, %s, %s, %s, %s
+        )
+        """
+        tenant_llm_data = (
+            create_time, current_date, create_time, current_date, user_id,
+            str(earliest_tenant_llm['llm_factory']), str(earliest_tenant_llm['model_type']), str(earliest_tenant_llm['llm_name']),
+            str(earliest_tenant_llm['api_key']), str(earliest_tenant_llm['api_base']), str(earliest_tenant_llm['max_tokens']), 0
+        )
+        cursor.execute(tenant_llm_insert_query, tenant_llm_data)
+    
+        conn.commit()
+        cursor.close()
+        conn.close()
+        
+        return True
+    except mysql.connector.Error as err:
+        print(f"创建用户错误: {err}")
+        return False
+
+def update_user(user_id, user_data):
+    """更新用户信息"""
+    try:
+        conn = mysql.connector.connect(**db_config)
+        cursor = conn.cursor()
+        
+        query = """
+        UPDATE user SET nickname = %s WHERE id = %s
+        """
+        cursor.execute(query, (
+            user_data.get("username"),
+            user_id
+        ))
+        conn.commit()
+        
+        cursor.close()
+        conn.close()
+        
+        return True
+    except mysql.connector.Error as err:
+        print(f"更新用户错误: {err}")
+        return False
--- a/management/server/requirements.txt
+++ b/management/server/requirements.txt
@ -0,0 +1,6 @@
+Flask==3.1.0
+flask_cors==5.0.1
+mysql-connector-python==9.2.0
+pycryptodomex==3.20.0
+tabulate==0.9.0
+Werkzeug==3.1.3
--- a/management/server/utils.py
+++ b/management/server/utils.py
@ -0,0 +1,28 @@
+import uuid
+import base64
+from datetime import datetime
+from Cryptodome.PublicKey import RSA
+from Cryptodome.Cipher import PKCS1_v1_5
+from werkzeug.security import generate_password_hash
+
+
+# 生成随机的 UUID 作为 id
+def generate_uuid():
+    return str(uuid.uuid4()).replace("-", "")
+
+# RSA 加密密码
+def rsa_psw(password: str) -> str:
+    pub_key = """-----BEGIN PUBLIC KEY-----
+    MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEArq9XTUSeYr2+N1h3Afl/z8Dse/2yD0ZGrKwx+EEEcdsBLca9Ynmx3nIB5obmLlSfmskLpBo0UACBmB5rEjBp2Q2f3AG3Hjd4B+gNCG6BDaawuDlgANIhGnaTLrIqWrrcm4EMzJOnAOI1fgzJRsOOUEfaS318Eq9OVO3apEyCCt0lOQK6PuksduOjVxtltDav+guVAA068NrPYmRNabVKRNLJpL8w4D44sfth5RvZ3q9t+6RTArpEtc5sh5ChzvqPOzKGMXW83C95TxmXqpbK6olN4RevSfVjEAgCydH6HN6OhtOQEcnrU97r9H0iZOWwbw3pVrZiUkuRD1R56Wzs2wIDAQAB
+    -----END PUBLIC KEY-----"""
+
+    rsa_key = RSA.import_key(pub_key)
+    cipher = PKCS1_v1_5.new(rsa_key)
+    encrypted_data = cipher.encrypt(base64.b64encode(password.encode()))
+    return base64.b64encode(encrypted_data).decode()
+
+# 加密密码
+def encrypt_password(raw_password: str) -> str:
+    base64_password = base64.b64encode(raw_password.encode()).decode()
+    encrypted_password = rsa_psw(base64_password)
+    return generate_password_hash(base64_password)
--- a/management/web/.editorconfig
+++ b/management/web/.editorconfig
@ -0,0 +1,24 @@
+# 配置项文档：https://editorconfig.org（修改配置后重启编辑器）
+
+## 告知 EditorConfig 插件，当前即是根文件
+root = true
+
+## 适用全部文件
+[*]
+### 设置字符集
+charset = utf-8
+### 缩进风格 space | tab，建议 space
+indent_style = space
+### 缩进的空格数
+indent_size = 2
+### 换行符类型 lf | cr | crlf，一般都是设置为 lf
+end_of_line = lf
+### 是否在文件末尾插入空白行
+insert_final_newline = true
+### 是否删除一行中的前后空格
+trim_trailing_whitespace = true
+
+## 适用 .md 文件
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false
--- a/management/web/.env
+++ b/management/web/.env
@ -0,0 +1,7 @@
+# 所有环境的环境变量（命名必须以 VITE_ 开头）
+
+## 项目标题
+VITE_APP_TITLE = Ragflow Plus
+
+## 路由模式 hash 或 html5
+VITE_ROUTER_HISTORY = hash
--- a/management/web/.env.development
+++ b/management/web/.env.development
@ -0,0 +1,7 @@
+# 开发环境的环境变量（命名必须以 VITE_ 开头）
+
+## 后端接口地址（如果解决跨域问题采用反向代理就只需写相对路径）
+VITE_BASE_URL = /api
+
+## 开发环境域名和静态资源公共路径（一般 / 或 ./ 都可以）
+VITE_PUBLIC_PATH = /
--- a/management/web/.env.production
+++ b/management/web/.env.production
@ -0,0 +1,7 @@
+# 生产环境的环境变量（命名必须以 VITE_ 开头）
+
+## 后端接口地址（如果解决跨域问题采用 CORS 就需要写绝对路径）
+VITE_BASE_URL = http://localhost:5000
+
+## 打包构建静态资源公共路径（例如部署到 https://un-pany.github.io/v3-admin-vite/ 域名下就需要填写 /v3-admin-vite/）
+VITE_PUBLIC_PATH = /v3-admin-vite/
--- a/management/web/.env.staging
+++ b/management/web/.env.staging
@ -0,0 +1,7 @@
+# 预发布环境的环境变量（命名必须以 VITE_ 开头）
+
+## 后端接口地址（如果解决跨域问题采用 CORS 就需要写绝对路径）
+VITE_BASE_URL = http://localhost:5000
+
+## 打包构建静态资源公共路径（例如部署到 https://un-pany.github.io/ 域名下就需要填写 /）
+VITE_PUBLIC_PATH = /
--- a/management/web/.gitignore
+++ b/management/web/.gitignore
@ -0,0 +1,18 @@
+# Common
+dist
+node_modules
+.eslintcache
+vite.config.*.timestamp*
+
+# MacOS
+.DS_Store
+
+# Local env files
+*.local
+
+# Logs
+*.log
+
+# Use the pnpm
+package-lock.json
+yarn.lock
--- a/management/web/.npmrc
+++ b/management/web/.npmrc
@ -0,0 +1,5 @@
+# China mirror of npm
+registry = https://registry.npmmirror.com
+
+# 安装依赖时锁定版本号
+save-exact = true
--- a/management/web/eslint.config.js
+++ b/management/web/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"
+    }
+  }
+)
--- a/management/web/index.html
+++ b/management/web/index.html
@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="/favicon.ico" />
+    <link rel="stylesheet" href="/app-loading.css" />
+    <title>%VITE_APP_TITLE%</title>
+    <script src="/detect-ie.js" defer></script>
+  </head>
+  <body>
+    <div id="app">
+      <div id="app-loading"></div>
+    </div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/management/web/package.json
+++ b/management/web/package.json
@ -0,0 +1,64 @@
+{
+  "name": "v3-admin-vite",
+  "type": "module",
+  "version": "5.0.0-beta.5",
+  "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: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.8.4",
+    "dayjs": "1.11.13",
+    "element-plus": "2.9.7",
+    "js-cookie": "3.0.5",
+    "lodash-es": "4.17.21",
+    "mitt": "3.0.1",
+    "normalize.css": "8.0.1",
+    "nprogress": "0.2.0",
+    "path-browserify": "1.0.1",
+    "path-to-regexp": "8.2.0",
+    "pinia": "3.0.1",
+    "screenfull": "6.0.2",
+    "vue": "3.5.13",
+    "vue-router": "4.5.0",
+    "vxe-table": "4.6.25"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "4.11.0",
+    "@types/js-cookie": "3.0.6",
+    "@types/lodash-es": "4.17.12",
+    "@types/node": "22.13.14",
+    "@types/nprogress": "0.2.3",
+    "@types/path-browserify": "1.0.3",
+    "@vitejs/plugin-vue": "5.2.3",
+    "@vitejs/plugin-vue-jsx": "4.1.2",
+    "@vue/test-utils": "2.4.6",
+    "eslint": "9.23.0",
+    "eslint-plugin-format": "1.0.1",
+    "happy-dom": "17.4.4",
+    "husky": "9.1.7",
+    "lint-staged": "15.5.0",
+    "sass": "1.78.0",
+    "typescript": "5.8.2",
+    "unocss": "66.1.0-beta.7",
+    "unplugin-auto-import": "19.1.2",
+    "unplugin-svg-component": "0.12.1",
+    "unplugin-vue-components": "28.4.1",
+    "vite": "6.2.3",
+    "vite-svg-loader": "5.1.0",
+    "vitest": "3.0.9",
+    "vue-tsc": "2.2.8"
+  },
+  "lint-staged": {
+    "*": "eslint --fix"
+  }
+}
--- a/management/web/pnpm-lock.yaml
+++ b/management/web/pnpm-lock.yaml
--- a/management/web/public/app-loading.css
+++ b/management/web/public/app-loading.css
@ -0,0 +1,45 @@
+/* 白屏阶段会执行的 CSS 加载动画 */
+
+#app-loading {
+  position: relative;
+  top: 45vh;
+  margin: 0 auto;
+  color: #409eff;
+  font-size: 12px;
+}
+
+#app-loading,
+#app-loading::before,
+#app-loading::after {
+  width: 2em;
+  height: 2em;
+  border-radius: 50%;
+  animation: 2s ease-in-out infinite app-loading-animation;
+}
+
+#app-loading::before,
+#app-loading::after {
+  content: "";
+  position: absolute;
+}
+
+#app-loading::before {
+  left: -4em;
+  animation-delay: -0.2s;
+}
+
+#app-loading::after {
+  left: 4em;
+  animation-delay: 0.2s;
+}
+
+@keyframes app-loading-animation {
+  0%,
+  80%,
+  100% {
+    box-shadow: 0 2em 0 -2em;
+  }
+  40% {
+    box-shadow: 0 2em 0 0;
+  }
+}
--- a/management/web/public/detect-ie.js
+++ b/management/web/public/detect-ie.js
@ -0,0 +1,4 @@
+// Tip: Simple judgments may not fully cover
+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>"
+}
--- a/management/web/public/favicon.ico
+++ b/management/web/public/favicon.ico
--- a/management/web/src/App.vue
+++ b/management/web/src/App.vue
@ -0,0 +1,24 @@
+<script lang="ts" setup>
+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()
+// 初始化通知
+initStarNotification()
+initStoreNotification()
+</script>
+
+<template>
+  <el-config-provider :locale="zhCn">
+    <router-view />
+  </el-config-provider>
+</template>
--- a/management/web/src/common/apis/tables/index.ts
+++ b/management/web/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: "api/v1/users",
+    method: "post",
+    data
+  })
+}
+
+/** 删 */
+export function deleteTableDataApi(id: number) {
+  return request({
+    url: `api/v1/users/${id}`,
+    method: "delete"
+  })
+}
+
+/** 改 */
+export function updateTableDataApi(data: Tables.CreateOrUpdateTableRequestData) {
+  return request({
+    url: `api/v1/users/${data.id}`,
+    method: "put",
+    data
+  })
+}
+
+/** 查 */
+export function getTableDataApi(params: Tables.TableRequestData) {
+  return request<Tables.TableResponseData>({
+    url: "api/v1/users",
+    method: "get",
+    params
+  })
+}
--- a/management/web/src/common/apis/tables/type.ts
+++ b/management/web/src/common/apis/tables/type.ts
@ -0,0 +1,30 @@
+export interface CreateOrUpdateTableRequestData {
+  id?: number
+  username: string
+  email?: string
+  password?: string
+}
+
+export interface TableRequestData {
+  /** 当前页码 */
+  currentPage: number
+  /** 查询条数 */
+  size: number
+  /** 查询参数：用户名 */
+  username?: string
+  /** 查询参数：邮箱 */
+  email?: string
+}
+
+export interface TableData {
+  id: number
+  username: string
+  email: string
+  createTime: string
+  updateTime: string
+}
+
+export type TableResponseData = ApiResponseData<{
+  list: TableData[]
+  total: number
+}>
--- a/management/web/src/common/apis/users/index.ts
+++ b/management/web/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: "api/v1/users/me",
+    method: "get"
+  })
+}
--- a/management/web/src/common/apis/users/type.ts
+++ b/management/web/src/common/apis/users/type.ts
@ -0,0 +1 @@
+export type CurrentUserResponseData = ApiResponseData<{ username: string, roles: string[] }>
--- a/management/web/src/common/assets/icons/dashboard.svg
+++ b/management/web/src/common/assets/icons/dashboard.svg
@ -0,0 +1 @@
+<svg t="1651118937898" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8601" width="200" height="200"><path d="M924.8 385.6c-22.6-53.4-54.9-101.3-96-142.4-41.1-41.1-89-73.4-142.4-96C631.1 123.8 572.5 112 512 112s-119.1 11.8-174.4 35.2c-53.4 22.6-101.3 54.9-142.4 96-41.1 41.1-73.4 89-96 142.4C75.8 440.9 64 499.5 64 560c0 132.7 58.3 257.7 159.9 343.1l1.7 1.4c5.8 4.8 13.1 7.5 20.6 7.5h531.7c7.5 0 14.8-2.7 20.6-7.5l1.7-1.4C901.7 817.7 960 692.7 960 560c0-60.5-11.9-119.1-35.2-174.4zM761.4 836H262.6C184.5 765.5 140 665.6 140 560c0-99.4 38.7-192.8 109-263 70.3-70.3 163.7-109 263-109 99.4 0 192.8 38.7 263 109 70.3 70.3 109 163.7 109 263 0 105.6-44.5 205.5-122.6 276z" p-id="8602"></path><path d="M623.5 421.5c-3.1-3.1-8.2-3.1-11.3 0L527.7 506c-18.7-5-39.4-0.2-54.1 14.5-21.9 21.9-21.9 57.3 0 79.2 21.9 21.9 57.3 21.9 79.2 0 14.7-14.7 19.5-35.4 14.5-54.1l84.5-84.5c3.1-3.1 3.1-8.2 0-11.3l-28.3-28.3zM490 320h44c4.4 0 8-3.6 8-8v-80c0-4.4-3.6-8-8-8h-44c-4.4 0-8 3.6-8 8v80c0 4.4 3.6 8 8 8zM750 538v44c0 4.4 3.6 8 8 8h80c4.4 0 8-3.6 8-8v-44c0-4.4-3.6-8-8-8h-80c-4.4 0-8 3.6-8 8zM762.7 340.8l-31.1-31.1c-3.1-3.1-8.2-3.1-11.3 0l-56.6 56.6c-3.1 3.1-3.1 8.2 0 11.3l31.1 31.1c3.1 3.1 8.2 3.1 11.3 0l56.6-56.6c3.1-3.1 3.1-8.2 0-11.3zM304.1 309.7c-3.1-3.1-8.2-3.1-11.3 0l-31.1 31.1c-3.1 3.1-3.1 8.2 0 11.3l56.6 56.6c3.1 3.1 8.2 3.1 11.3 0l31.1-31.1c3.1-3.1 3.1-8.2 0-11.3l-56.6-56.6zM262 530h-80c-4.4 0-8 3.6-8 8v44c0 4.4 3.6 8 8 8h80c4.4 0 8-3.6 8-8v-44c0-4.4-3.6-8-8-8z" p-id="8603"></path></svg>
--- a/management/web/src/common/assets/icons/fullscreen-exit.svg
+++ b/management/web/src/common/assets/icons/fullscreen-exit.svg
@ -0,0 +1 @@
+<svg t="1661153147729" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3352" width="200" height="200"><path d="M704 864v-96c0-54.4 41.6-96 96-96h96c19.2 0 32-12.8 32-32s-12.8-32-32-32h-96c-89.6 0-160 70.4-160 160v96c0 19.2 12.8 32 32 32s32-12.8 32-32z m-64-704v96c0 89.6 70.4 160 160 160h96c19.2 0 32-12.8 32-32s-12.8-32-32-32h-96c-54.4 0-96-41.6-96-96v-96c0-19.2-12.8-32-32-32s-32 12.8-32 32z m-256 704v-96c0-89.6-70.4-160-160-160h-96c-19.2 0-32 12.8-32 32s12.8 32 32 32h96c54.4 0 96 41.6 96 96v96c0 19.2 12.8 32 32 32s32-12.8 32-32z m-64-704v96c0 54.4-41.6 96-96 96h-96c-19.2 0-32 12.8-32 32s12.8 32 32 32h96c89.6 0 160-70.4 160-160v-96c0-19.2-12.8-32-32-32s-32 12.8-32 32z" p-id="3353"></path></svg>
--- a/management/web/src/common/assets/icons/fullscreen.svg
+++ b/management/web/src/common/assets/icons/fullscreen.svg
@ -0,0 +1 @@
+<svg t="1661151768669" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3212" width="200" height="200"><path d="M192 384v-96c0-54.4 41.6-96 96-96h96c19.2 0 32-12.8 32-32s-12.8-32-32-32h-96c-89.6 0-160 70.4-160 160v96c0 19.2 12.8 32 32 32s32-12.8 32-32z m-64 256v96c0 89.6 70.4 160 160 160h96c19.2 0 32-12.8 32-32s-12.8-32-32-32h-96c-54.4 0-96-41.6-96-96v-96c0-19.2-12.8-32-32-32s-32 12.8-32 32z m768-256v-96c0-89.6-70.4-160-160-160h-96c-19.2 0-32 12.8-32 32s12.8 32 32 32h96c54.4 0 96 41.6 96 96v96c0 19.2 12.8 32 32 32s32-12.8 32-32z m-64 256v96c0 54.4-41.6 96-96 96h-96c-19.2 0-32 12.8-32 32s12.8 32 32 32h96c89.6 0 160-70.4 160-160v-96c0-19.2-12.8-32-32-32s-32 12.8-32 32z" p-id="3213"></path></svg>
--- a/management/web/src/common/assets/icons/keyboard-down.svg
+++ b/management/web/src/common/assets/icons/keyboard-down.svg
@ -0,0 +1 @@
+<svg width="15" height="15" aria-label="Arrow down" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M7.5 3.5v8M10.5 8.5l-3 3-3-3"></path></g></svg>
--- a/management/web/src/common/assets/icons/keyboard-enter.svg
+++ b/management/web/src/common/assets/icons/keyboard-enter.svg
@ -0,0 +1 @@
+<svg width="15" height="15" aria-label="Enter key" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3"></path></g></svg>
--- a/management/web/src/common/assets/icons/keyboard-esc.svg
+++ b/management/web/src/common/assets/icons/keyboard-esc.svg
@ -0,0 +1 @@
+<svg width="15" height="15" aria-label="Escape key" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M13.6167 8.936c-.1065.3583-.6883.962-1.4875.962-.7993 0-1.653-.9165-1.653-2.1258v-.5678c0-1.2548.7896-2.1016 1.653-2.1016.8634 0 1.3601.4778 1.4875 1.0724M9 6c-.1352-.4735-.7506-.9219-1.46-.8972-.7092.0246-1.344.57-1.344 1.2166s.4198.8812 1.3445.9805C8.465 7.3992 8.968 7.9337 9 8.5c.032.5663-.454 1.398-1.4595 1.398C6.6593 9.898 6 9 5.963 8.4851m-1.4748.5368c-.2635.5941-.8099.876-1.5443.876s-1.7073-.6248-1.7073-2.204v-.4603c0-1.0416.721-2.131 1.7073-2.131.9864 0 1.6425 1.031 1.5443 2.2492h-2.956"></path></g></svg>
--- a/management/web/src/common/assets/icons/keyboard-up.svg
+++ b/management/web/src/common/assets/icons/keyboard-up.svg
@ -0,0 +1 @@
+<svg width="15" height="15" aria-label="Arrow up" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M7.5 11.5v-8M10.5 6.5l-3-3-3 3"></path></g></svg>
--- a/management/web/src/common/assets/icons/preserve-color/README.md
+++ b/management/web/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" />`
--- a/management/web/src/common/assets/icons/search.svg
+++ b/management/web/src/common/assets/icons/search.svg
@ -0,0 +1 @@
+<svg t="1691398959507" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2431" width="200" height="200"><path d="M862.609 816.955L726.44 680.785l-0.059-0.056a358.907 358.907 0 0 0 56.43-91.927c18.824-44.507 28.369-91.767 28.369-140.467 0-48.701-9.545-95.96-28.369-140.467-18.176-42.973-44.19-81.56-77.319-114.689-33.13-33.129-71.717-59.144-114.69-77.32-44.507-18.825-91.767-28.37-140.467-28.37-48.701 0-95.96 9.545-140.467 28.37-42.973 18.176-81.56 44.19-114.689 77.32-33.13 33.129-59.144 71.717-77.32 114.689-18.825 44.507-28.37 91.767-28.37 140.467 0 48.7 9.545 95.96 28.37 140.467 18.176 42.974 44.19 81.561 77.32 114.69 33.129 33.129 71.717 59.144 114.689 77.319 44.507 18.824 91.767 28.369 140.467 28.369 48.7 0 95.96-9.545 140.467-28.369 32.78-13.864 62.997-32.303 90.197-54.968 0.063 0.064 0.122 0.132 0.186 0.195l136.169 136.17c6.25 6.25 14.438 9.373 22.628 9.373 8.188 0 16.38-3.125 22.627-9.372 12.496-12.496 12.496-32.758 0-45.254z m-412.274-69.466c-79.907 0-155.031-31.118-211.534-87.62-56.503-56.503-87.62-131.627-87.62-211.534s31.117-155.031 87.62-211.534c56.502-56.503 131.626-87.62 211.534-87.62s155.031 31.117 211.534 87.62c56.502 56.502 87.62 131.626 87.62 211.534s-31.118 155.031-87.62 211.534c-56.503 56.502-131.627 87.62-211.534 87.62z" p-id="2432"></path></svg>
--- a/management/web/src/common/assets/images/docs/preview.png
+++ b/management/web/src/common/assets/images/docs/preview.png
--- a/management/web/src/common/assets/images/layouts/logo-text-1.png
+++ b/management/web/src/common/assets/images/layouts/logo-text-1.png
--- a/management/web/src/common/assets/images/layouts/logo-text-2.png
+++ b/management/web/src/common/assets/images/layouts/logo-text-2.png
--- a/management/web/src/common/assets/images/layouts/logo.png
+++ b/management/web/src/common/assets/images/layouts/logo.png
--- a/management/web/src/common/assets/styles/element-plus.css
+++ b/management/web/src/common/assets/styles/element-plus.css
@ -0,0 +1,90 @@
+/**
+ * @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 */
+  --el-color-primary: #00bb99;
+  --el-color-primary-light-3: #00bb99b3;
+  --el-color-primary-light-5: #00bb9980;
+  --el-color-primary-light-7: #00bb994d;
+  --el-color-primary-light-8: #00bb9933;
+  --el-color-primary-light-9: #00bb991a;
+  --el-color-primary-dark-2: #00bb99;
+  /* color-success */
+  --el-color-success: #67c23a;
+  --el-color-success-light-3: #67c23ab3;
+  --el-color-success-light-5: #67c23a80;
+  --el-color-success-light-7: #67c23a4d;
+  --el-color-success-light-8: #67c23a33;
+  --el-color-success-light-9: #67c23a1a;
+  --el-color-success-dark-2: #67c23a;
+  /* color-warning */
+  --el-color-warning: #e6a23c;
+  --el-color-warning-light-3: #e6a23cb3;
+  --el-color-warning-light-5: #e6a23c80;
+  --el-color-warning-light-7: #e6a23c4d;
+  --el-color-warning-light-8: #e6a23c33;
+  --el-color-warning-light-9: #e6a23c1a;
+  --el-color-warning-dark-2: #e6a23c;
+  /* color-danger */
+  --el-color-danger: #f56c6c;
+  --el-color-danger-light-3: #f56c6cb3;
+  --el-color-danger-light-5: #f56c6c80;
+  --el-color-danger-light-7: #f56c6c4d;
+  --el-color-danger-light-8: #f56c6c33;
+  --el-color-danger-light-9: #f56c6c1a;
+  --el-color-danger-dark-2: #f56c6c;
+  /* color-error */
+  --el-color-error: #f56c6c;
+  --el-color-error-light-3: #f56c6cb3;
+  --el-color-error-light-5: #f56c6c80;
+  --el-color-error-light-7: #f56c6c4d;
+  --el-color-error-light-8: #f56c6c33;
+  --el-color-error-light-9: #f56c6c1a;
+  --el-color-error-dark-2: #f56c6c;
+  /* color-info */
+  --el-color-info: #909399;
+  --el-color-info-light-3: #909399b3;
+  --el-color-info-light-5: #90939980;
+  --el-color-info-light-7: #9093994d;
+  --el-color-info-light-8: #90939933;
+  --el-color-info-light-9: #9093991a;
+  --el-color-info-dark-2: #909399;
+  /* 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 */
+  --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 */
+  --el-fill-color-darker: #002b6b;
+  --el-fill-color-dark: #002b6b;
+  --el-fill-color: #002b6b;
+  --el-fill-color-light: #002359;
+  --el-fill-color-lighter: #002359;
+  --el-fill-color-blank: #001b44;
+  --el-fill-color-extra-light: #001b44;
+  /* bg-color */
+  --el-bg-color-page: #001535;
+  --el-bg-color: #001b44;
+  --el-bg-color-overlay: #002359;
+  /* mask-color */
+  --el-mask-color: rgba(0, 0, 0, 0.5);
+  --el-mask-color-extra-light: rgba(0, 0, 0, 0.3);
+}
+
+/* button */
+html.dark-blue .el-button {
+  --el-button-disabled-text-color: rgba(255, 255, 255, 0.5);
+}
--- a/management/web/src/common/assets/styles/element-plus.scss
+++ b/management/web/src/common/assets/styles/element-plus.scss
@ -0,0 +1,20 @@
+// 自定义 Element Plus 样式
+
+// 卡片
+.el-card {
+  background-color: var(--el-bg-color) !important;
+}
+
+// 分页
+.el-pagination {
+  // 参考 Bootstrap 的响应式设计 WIDTH = 768
+  @media screen and (max-width: 768px) {
+    .el-pagination__total,
+    .el-pagination__sizes,
+    .el-pagination__jump,
+    .btn-prev,
+    .btn-next {
+      display: none;
+    }
+  }
+}
--- a/management/web/src/common/assets/styles/index.scss
+++ b/management/web/src/common/assets/styles/index.scss
@ -0,0 +1,67 @@
+// 全局 CSS 变量
+@import "./variables.css";
+// Transition
+@import "./transition.scss";
+// Element Plus
+@import "./element-plus.css";
+@import "./element-plus.scss";
+// Vxe Table
+@import "./vxe-table.css";
+@import "./vxe-table.scss";
+// 注册多主题
+@import "./theme/register.scss";
+// Mixins
+@import "./mixins.scss";
+// View Transition
+@import "./view-transition.scss";
+
+// 业务页面几乎都应该在根元素上挂载 class="app-container"，以保持页面美观
+.app-container {
+  padding: 20px;
+}
+
+html {
+  height: 100%;
+  // 灰色模式
+  &.grey-mode {
+    filter: grayscale(1);
+  }
+  // 色弱模式
+  &.color-weakness {
+    filter: invert(0.8);
+  }
+}
+
+body {
+  height: 100%;
+  color: var(--v3-body-text-color);
+  background-color: var(--v3-body-bg-color);
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-family:
+    Inter, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial,
+    sans-serif;
+  @extend %scrollbar;
+}
+
+#app {
+  height: 100%;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+a,
+a:focus,
+a:hover {
+  color: inherit;
+  outline: none;
+  text-decoration: none;
+}
+
+div:focus {
+  outline: none;
+}
--- a/management/web/src/common/assets/styles/mixins.scss
+++ b/management/web/src/common/assets/styles/mixins.scss
@ -0,0 +1,42 @@
+// 清除浮动
+%clearfix {
+  &::after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}
+
+// 美化原生滚动条
+%scrollbar {
+  // 整个滚动条
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  // 滚动条上的滚动滑块
+  &::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: #90939955;
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: #90939977;
+  }
+  &::-webkit-scrollbar-thumb:active {
+    background-color: #90939999;
+  }
+  // 当同时有垂直滚动条和水平滚动条时交汇的部分
+  &::-webkit-scrollbar-corner {
+    background-color: transparent;
+  }
+}
+
+// 文本溢出时显示省略号
+%ellipsis {
+  // 隐藏溢出的文本
+  overflow: hidden;
+  // 防止文本换行
+  white-space: nowrap;
+  // 文本内容溢出容器时，文本末尾显示省略号
+  text-overflow: ellipsis;
+}
--- a/management/web/src/common/assets/styles/theme/core/element-plus.scss
+++ b/management/web/src/common/assets/styles/theme/core/element-plus.scss
@ -0,0 +1,29 @@
+// Element Plus 相关
+
+// 侧边栏的 item 的 popper
+.el-popper {
+  .el-menu {
+    background-color: var(--el-bg-color);
+    .el-menu-item {
+      background-color: var(--el-bg-color);
+      &.is-active,
+      &:hover {
+        background-color: var(--el-bg-color-overlay);
+        color: #ffffff;
+      }
+    }
+    .el-sub-menu__title {
+      background-color: var(--el-bg-color);
+    }
+    .el-sub-menu {
+      &.is-active {
+        > .el-sub-menu__title {
+          color: #ffffff;
+        }
+      }
+    }
+  }
+  .el-menu--horizontal {
+    border: none;
+  }
+}
--- a/management/web/src/common/assets/styles/theme/core/index.scss
+++ b/management/web/src/common/assets/styles/theme/core/index.scss
@ -0,0 +1,4 @@
+.#{$theme-name} {
+  @import "./layouts.scss";
+  @import "./element-plus.scss";
+}
--- a/management/web/src/common/assets/styles/theme/core/layouts.scss
+++ b/management/web/src/common/assets/styles/theme/core/layouts.scss
@ -0,0 +1,34 @@
+// Layout 相关
+
+.app-wrapper {
+  // 侧边栏
+  .sidebar-container {
+    background-color: var(--el-bg-color);
+    .el-menu {
+      background-color: var(--el-bg-color);
+      .el-menu-item {
+        background-color: var(--el-bg-color);
+        &.is-active,
+        &:hover {
+          background-color: var(--el-bg-color-overlay);
+          color: #ffffff;
+        }
+      }
+    }
+    .el-sub-menu__title {
+      background-color: var(--el-bg-color);
+    }
+    .el-sub-menu {
+      &.is-active {
+        > .el-sub-menu__title {
+          color: #ffffff;
+        }
+      }
+    }
+  }
+}
+
+// 右侧设置面板
+.handle-button {
+  background-color: lighten($theme-bg-color, 20%) !important;
+}
--- a/management/web/src/common/assets/styles/theme/dark-blue/index.scss
+++ b/management/web/src/common/assets/styles/theme/dark-blue/index.scss
@ -0,0 +1,2 @@
+@import "./variables.scss";
+@import "../core/index.scss";
--- a/management/web/src/common/assets/styles/theme/dark-blue/variables.scss
+++ b/management/web/src/common/assets/styles/theme/dark-blue/variables.scss
@ -0,0 +1,6 @@
+// dark-blue 主题下的变量
+
+// 主题名称
+$theme-name: "dark-blue";
+// 主题背景颜色
+$theme-bg-color: #001b44;
--- a/management/web/src/common/assets/styles/theme/dark/index.scss
+++ b/management/web/src/common/assets/styles/theme/dark/index.scss
@ -0,0 +1,2 @@
+@import "./variables.scss";
+@import "../core/index.scss";
--- a/management/web/src/common/assets/styles/theme/dark/variables.scss
+++ b/management/web/src/common/assets/styles/theme/dark/variables.scss
@ -0,0 +1,6 @@
+// dark 主题下的变量
+
+// 主题名称
+$theme-name: "dark";
+// 主题背景颜色
+$theme-bg-color: #141414;
--- a/management/web/src/common/assets/styles/theme/register.scss
+++ b/management/web/src/common/assets/styles/theme/register.scss
@ -0,0 +1,3 @@
+// 注册多主题
+@import "./dark/index.scss";
+@import "./dark-blue/index.scss";
--- a/management/web/src/common/assets/styles/transition.scss
+++ b/management/web/src/common/assets/styles/transition.scss
@ -0,0 +1,25 @@
+// https://cn.vuejs.org/guide/built-ins/transition
+
+// fade-transform
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+  transition: all 0.5s;
+}
+.fade-transform-enter {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+.fade-transform-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+// layout-logo-fade
+.layout-logo-fade-enter-active,
+.layout-logo-fade-leave-active {
+  transition: opacity 1.5s;
+}
+.layout-logo-fade-enter-from,
+.layout-logo-fade-leave-to {
+  opacity: 0;
+}
--- a/management/web/src/common/assets/styles/variables.css
+++ b/management/web/src/common/assets/styles/variables.css
@ -0,0 +1,72 @@
+/* 全局 CSS 变量，这种变量不仅可以在 CSS 和 SCSS 中使用，还可以导入到 JS 中使用 */
+
+:root {
+  /* Body */
+  --v3-body-text-color: var(--el-text-color-primary);
+  --v3-body-bg-color: var(--el-bg-color-page);
+  /* Header 区域 = NavigationBar 组件 + TagsView 组件 */
+  --v3-header-height: calc(
+    var(--v3-navigationbar-height) + var(--v3-tagsview-height) + var(--v3-header-border-bottom-width)
+  );
+  --v3-header-bg-color: var(--el-bg-color);
+  --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 组件 */
+  --v3-navigationbar-height: 50px;
+  --v3-navigationbar-text-color: var(--el-text-color-regular);
+  /* Sidebar 组件（左侧模式全部生效、顶部模式全部不生效、混合模式非颜色部分生效） */
+  --v3-sidebar-width: 220px;
+  --v3-sidebar-hide-width: 58px;
+  --v3-sidebar-border-right: 1px solid var(--el-fill-color);
+  --v3-sidebar-menu-item-height: 60px;
+  --v3-sidebar-menu-tip-line-bg-color: var(--el-color-primary);
+  --v3-sidebar-menu-bg-color: #001428;
+  --v3-sidebar-menu-hover-bg-color: #409eff10;
+  --v3-sidebar-menu-text-color: #cfd3dc;
+  --v3-sidebar-menu-active-text-color: #ffffff;
+  /* TagsView 组件 */
+  --v3-tagsview-height: 34px;
+  --v3-tagsview-text-color: var(--el-text-color-regular);
+  --v3-tagsview-tag-active-text-color: #ffffff;
+  --v3-tagsview-tag-bg-color: var(--el-bg-color);
+  --v3-tagsview-tag-active-bg-color: var(--el-color-primary);
+  --v3-tagsview-tag-border-radius: 2px;
+  --v3-tagsview-tag-border-color: var(--el-border-color-lighter);
+  --v3-tagsview-tag-active-border-color: var(--el-color-primary);
+  --v3-tagsview-tag-icon-hover-bg-color: #00000030;
+  --v3-tagsview-tag-icon-hover-color: #ffffff;
+  --v3-tagsview-contextmenu-text-color: var(--el-text-color-regular);
+  --v3-tagsview-contextmenu-hover-text-color: var(--el-text-color-primary);
+  --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 组件 */
+  --v3-hamburger-text-color: var(--el-text-color-primary);
+  /* RightPanel 组件  */
+  --v3-rightpanel-button-bg-color: #001428;
+}
+
+/* 内容区放大时，将不需要的组件隐藏 */
+body.content-large {
+  /* Header 区域 = TagsView 组件 */
+  --v3-header-height: var(--v3-tagsview-height);
+  /* NavigationBar 组件 */
+  --v3-navigationbar-height: 0px;
+  /* Sidebar 组件 */
+  --v3-sidebar-width: 0px;
+  --v3-sidebar-hide-width: 0px;
+}
+
+/* 内容区全屏时，将不需要的组件隐藏 */
+body.content-full {
+  /* Header 区域 */
+  --v3-header-height: 0px;
+  /* NavigationBar 组件 */
+  --v3-navigationbar-height: 0px;
+  /* Sidebar 组件 */
+  --v3-sidebar-width: 0px;
+  --v3-sidebar-hide-width: 0px;
+  /* TagsView 组件 */
+  --v3-tagsview-height: 0px;
+}
--- a/management/web/src/common/assets/styles/view-transition.scss
+++ b/management/web/src/common/assets/styles/view-transition.scss
@ -0,0 +1,20 @@
+// 控制切换主题时的动画效果（只在较新的浏览器上生效，例如 Chrome 111+）
+
+::view-transition-old(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+
+::view-transition-new(root) {
+  animation: 0.5s ease-in clip-animation;
+  mix-blend-mode: normal;
+}
+
+@keyframes clip-animation {
+  from {
+    clip-path: circle(0px at var(--v3-theme-x) var(--v3-theme-y));
+  }
+  to {
+    clip-path: circle(var(--v3-theme-r) at var(--v3-theme-x) var(--v3-theme-y));
+  }
+}
--- a/management/web/src/common/assets/styles/vxe-table.css
+++ b/management/web/src/common/assets/styles/vxe-table.css
@ -0,0 +1,97 @@
+/**
+ * @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 */
+  --vxe-font-color: var(--el-text-color-regular);
+  --vxe-primary-color: var(--el-color-primary);
+  --vxe-success-color: var(--el-color-success);
+  --vxe-info-color: var(--el-color-info);
+  --vxe-warning-color: var(--el-color-warning);
+  --vxe-danger-color: var(--el-color-danger);
+
+  --vxe-font-lighten-color: var(--el-text-color-primary);
+  --vxe-primary-lighten-color: var(--el-color-primary-light-3);
+  --vxe-success-lighten-color: var(--el-color-success-light-3);
+  --vxe-info-lighten-color: var(--el-color-info-light-3);
+  --vxe-warning-lighten-color: var(--el-color-warning-light-3);
+  --vxe-danger-lighten-color: var(--el-color-danger-light-3);
+
+  --vxe-font-darken-color: var(--el-text-color-secondary);
+  --vxe-primary-darken-color: var(--el-color-primary-dark-2);
+  --vxe-success-darken-color: var(--el-color-success-dark-2);
+  --vxe-info-darken-color: var(--el-color-info-dark-2);
+  --vxe-warning-darken-color: var(--el-color-warning-dark-2);
+  --vxe-danger-darken-color: var(--el-color-danger-dark-2);
+
+  --vxe-font-disabled-color: var(--el-text-color-disabled);
+  --vxe-primary-disabled-color: var(--el-color-primary-light-5);
+  --vxe-success-disabled-color: var(--el-color-success-light-5);
+  --vxe-info-disabled-color: var(--el-color-info-light-5);
+  --vxe-warning-disabled-color: var(--el-color-warning-light-5);
+  --vxe-danger-disabled-color: var(--el-color-danger-light-5);
+
+  /* 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 */
+  --vxe-table-popup-border-color: var(--el-border-color);
+
+  /* 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);
+  --vxe-table-header-background-color: var(--el-bg-color);
+  --vxe-table-body-background-color: var(--el-bg-color);
+  --vxe-table-footer-background-color: var(--el-bg-color);
+
+  --vxe-table-row-hover-background-color: var(--el-fill-color-light);
+  --vxe-table-row-current-background-color: var(--el-fill-color-light);
+  --vxe-table-row-hover-current-background-color: var(--el-fill-color-light);
+
+  --vxe-table-checkbox-range-background-color: var(--el-fill-color-light);
+
+  /* menu */
+  --vxe-table-menu-background-color: var(--el-bg-color-overlay);
+
+  /* loading */
+  --vxe-loading-color: var(--el-color-primary);
+  --vxe-loading-background-color: var(--el-mask-color);
+
+  /* validate */
+  --vxe-table-validate-error-color: var(--el-color-danger);
+
+  /* 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 */
+  --vxe-pager-background-color: var(--el-bg-color);
+
+  /* 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 */
+  --vxe-button-default-background-color: var(--el-bg-color-overlay);
+
+  /* input */
+  --vxe-input-background-color: var(--el-fill-color-blank);
+  --vxe-input-panel-background-color: var(--el-fill-color-blank);
+
+  /* form */
+  --vxe-form-background-color: var(--el-bg-color);
+  --vxe-form-validate-error-color: var(--el-color-danger);
+
+  /* select */
+  --vxe-select-option-hover-background-color: var(--el-bg-color-overlay);
+  --vxe-select-panel-background-color: var(--el-bg-color);
+}
--- a/management/web/src/common/assets/styles/vxe-table.scss
+++ b/management/web/src/common/assets/styles/vxe-table.scss
@ -0,0 +1,38 @@
+// 自定义 Vxe Table 样式
+
+.vxe-grid {
+  // 表单
+  &--form-wrapper {
+    .vxe-form {
+      padding: 10px 20px;
+      margin-bottom: 20px;
+    }
+  }
+
+  // 工具栏
+  &--toolbar-wrapper {
+    .vxe-toolbar {
+      padding: 20px;
+    }
+  }
+
+  // 分页
+  &--pager-wrapper {
+    .vxe-pager {
+      height: 70px;
+      padding: 0 20px;
+      &--wrapper {
+        // 参考 Bootstrap 的响应式设计 WIDTH = 768
+        @media screen and (max-width: 768px) {
+          .vxe-pager--total,
+          .vxe-pager--sizes,
+          .vxe-pager--jump,
+          .vxe-pager--jump-prev,
+          .vxe-pager--jump-next {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}
--- a/management/web/src/common/components/Notify/List.vue
+++ b/management/web/src/common/components/Notify/List.vue
@ -0,0 +1,60 @@
+<script lang="ts" setup>
+import type { NotifyItem } from "./type"
+
+interface Props {
+  data: NotifyItem[]
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <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>
+          <span>
+            <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>
+        <div v-if="item.avatar" class="card-avatar">
+          <img :src="item.avatar" width="34">
+        </div>
+      </div>
+    </template>
+    <div class="card-body">
+      {{ item.description ?? "No Data" }}
+    </div>
+  </el-card>
+</template>
+
+<style lang="scss" scoped>
+.card-container {
+  margin-bottom: 10px;
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .card-title {
+      font-weight: bold;
+      margin-right: 10px;
+    }
+    .card-time {
+      font-size: 12px;
+      color: var(--el-text-color-secondary);
+    }
+    .card-avatar {
+      display: flex;
+      align-items: center;
+    }
+  }
+  .card-body {
+    font-size: 12px;
+  }
+}
+</style>
--- a/management/web/src/common/components/Notify/data.ts
+++ b/management/web/src/common/components/Notify/data.ts
@ -0,0 +1,58 @@
+import type { NotifyItem } from "./type"
+
+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 等主流技术"
+  },
+  {
+    avatar: "https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png",
+    title: "V3 Admin 上线啦",
+    datetime: "三年前",
+    description: "一个中后台管理系统基础解决方案，基于 Vue3、TypeScript、Element Plus 和 Pinia"
+  }
+]
+
+export const messageData: NotifyItem[] = [
+  {
+    avatar: "https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png",
+    title: "来自楚门的世界",
+    description: "如果再也不能见到你，祝你早安、午安和晚安",
+    datetime: "1998-06-05"
+  },
+  {
+    avatar: "https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png",
+    title: "来自大话西游",
+    description: "如果非要在这份爱上加上一个期限，我希望是一万年",
+    datetime: "1995-02-04"
+  },
+  {
+    avatar: "https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png",
+    title: "来自龙猫",
+    description: "心存善意，定能途遇天使",
+    datetime: "1988-04-16"
+  }
+]
+
+export const todoData: NotifyItem[] = [
+  {
+    title: "任务名称",
+    description: "这家伙很懒，什么都没留下",
+    extra: "未开始",
+    status: "info"
+  },
+  {
+    title: "任务名称",
+    description: "这家伙很懒，什么都没留下",
+    extra: "进行中",
+    status: "primary"
+  },
+  {
+    title: "任务名称",
+    description: "这家伙很懒，什么都没留下",
+    extra: "已超时",
+    status: "danger"
+  }
+]
--- a/management/web/src/common/components/Notify/index.vue
+++ b/management/web/src/common/components/Notify/index.vue
@ -0,0 +1,94 @@
+<script lang="ts" setup>
+import type { NotifyItem } from "./type"
+import { Bell } from "@element-plus/icons-vue"
+import { messageData, notifyData, todoData } from "./data"
+import List from "./List.vue"
+
+type TabName = "通知" | "消息" | "待办"
+
+interface DataItem {
+  name: TabName
+  type: "primary" | "success" | "warning" | "danger" | "info"
+  list: NotifyItem[]
+}
+
+/** 角标当前值 */
+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[]>([
+  // 通知数据
+  {
+    name: "通知",
+    type: "primary",
+    list: notifyData
+  },
+  // 消息数据
+  {
+    name: "消息",
+    type: "danger",
+    list: messageData
+  },
+  // 待办数据
+  {
+    name: "待办",
+    type: "warning",
+    list: todoData
+  }
+])
+
+function handleHistory() {
+  ElMessage.success(`跳转到${activeName.value}历史页面`)
+}
+</script>
+
+<template>
+  <div class="notify">
+    <el-popover placement="bottom" :width="popoverWidth" trigger="click">
+      <template #reference>
+        <el-badge :value="badgeValue" :max="badgeMax" :hidden="badgeValue === 0">
+          <el-tooltip effect="dark" content="消息通知" placement="bottom">
+            <el-icon :size="20">
+              <Bell />
+            </el-icon>
+          </el-tooltip>
+        </el-badge>
+      </template>
+      <template #default>
+        <el-tabs v-model="activeName" class="demo-tabs" stretch>
+          <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">
+              <List :data="item.list" />
+            </el-scrollbar>
+          </el-tab-pane>
+        </el-tabs>
+        <div class="notify-history">
+          <el-button link @click="handleHistory">
+            查看{{ activeName }}历史
+          </el-button>
+        </div>
+      </template>
+    </el-popover>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.notify-history {
+  text-align: center;
+  padding-top: 12px;
+  border-top: 1px solid var(--el-border-color);
+}
+</style>
--- a/management/web/src/common/components/Notify/type.ts
+++ b/management/web/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
+}
--- a/management/web/src/common/components/Screenfull/index.vue
+++ b/management/web/src/common/components/Screenfull/index.vue
@ -0,0 +1,111 @@
+<script lang="ts" setup>
+import screenfull from "screenfull"
+
+interface Props {
+  /** 全屏的元素，默认是 html */
+  element?: string
+  /** 打开全屏提示语 */
+  openTips?: string
+  /** 关闭全屏提示语 */
+  exitTips?: string
+  /** 是否只针对内容区 */
+  content?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  element: "html",
+  openTips: "全屏",
+  exitTips: "退出全屏",
+  content: false
+})
+
+const CONTENT_LARGE = "content-large"
+
+const CONTENT_FULL = "content-full"
+
+const classList = document.body.classList
+
+// #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"))
+
+function handleFullscreenClick() {
+  const dom = document.querySelector(props.element) || undefined
+  isEnabled ? screenfull.toggle(dom) : ElMessage.warning("您的浏览器无法工作")
+}
+
+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)
+    })
+  }
+})
+// #endregion
+
+// #region 内容区
+const isContentLarge = ref<boolean>(false)
+const contentLargeTips = computed(() => (isContentLarge.value ? "内容区复原" : "内容区放大"))
+const contentLargeSvgName = computed(() => (isContentLarge.value ? "fullscreen-exit" : "fullscreen"))
+
+function handleContentLargeClick() {
+  isContentLarge.value = !isContentLarge.value
+  // 内容区放大时，将不需要的组件隐藏
+  classList.toggle(CONTENT_LARGE, isContentLarge.value)
+}
+
+function handleContentFullClick() {
+  // 取消内容区放大
+  isContentLarge.value && handleContentLargeClick()
+  // 内容区全屏时，将不需要的组件隐藏
+  classList.add(CONTENT_FULL)
+  // 开启全屏
+  handleFullscreenClick()
+}
+// #endregion
+</script>
+
+<template>
+  <div>
+    <!-- 全屏 -->
+    <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" class="svg-icon" />
+      <template #dropdown>
+        <el-dropdown-menu>
+          <!-- 内容区放大 -->
+          <el-dropdown-item @click="handleContentLargeClick">
+            {{ contentLargeTips }}
+          </el-dropdown-item>
+          <!-- 内容区全屏 -->
+          <el-dropdown-item @click="handleContentFullClick">
+            内容区全屏
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.svg-icon {
+  font-size: 20px;
+  &:focus {
+    outline: none;
+  }
+}
+</style>
--- a/management/web/src/common/components/SearchMenu/Footer.vue
+++ b/management/web/src/common/components/SearchMenu/Footer.vue
@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import { useDevice } from "@@/composables/useDevice"
+
+interface Props {
+  total: number
+}
+
+const props = defineProps<Props>()
+
+const { isMobile } = useDevice()
+</script>
+
+<template>
+  <div class="search-footer">
+    <template v-if="!isMobile">
+      <span class="search-footer-item">
+        <SvgIcon name="keyboard-enter" class="svg-icon" />
+        <span>确认</span>
+      </span>
+      <span class="search-footer-item">
+        <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" class="svg-icon" />
+        <span>关闭</span>
+      </span>
+    </template>
+    <span class="search-footer-total">共 {{ props.total }} 项</span>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.search-footer {
+  display: flex;
+  color: var(--el-text-color-secondary);
+  font-size: 14px;
+  &-item {
+    display: flex;
+    align-items: center;
+    margin-right: 12px;
+    .svg-icon {
+      margin-right: 5px;
+      padding: 2px;
+      font-size: 20px;
+      background-color: var(--el-fill-color);
+    }
+  }
+  &-total {
+    margin: 0 0 0 auto;
+  }
+}
+</style>
--- a/management/web/src/common/components/SearchMenu/Modal.vue
+++ b/management/web/src/common/components/SearchMenu/Modal.vue
@ -0,0 +1,193 @@
+<script lang="ts" setup>
+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 Footer from "./Footer.vue"
+import Result from "./Result.vue"
+
+/** 控制 modal 显隐 */
+const modelValue = defineModel<boolean>({ required: true })
+
+const router = useRouter()
+const { isMobile } = useDevice()
+
+const inputRef = ref<HTMLInputElement | null>(null)
+const scrollbarRef = ref<InstanceType<typeof ElScrollbar> | null>(null)
+const resultRef = ref<InstanceType<typeof Result> | null>(null)
+
+const keyword = ref<string>("")
+const result = shallowRef<RouteRecordRaw[]>([])
+const activeRouteName = ref<RouteRecordNameGeneric | undefined>(undefined)
+/** 是否按下了上键或下键（用于解决和 mouseenter 事件的冲突） */
+const isPressUpOrDown = ref<boolean>(false)
+
+/** 控制搜索对话框宽度 */
+const modalWidth = computed(() => (isMobile.value ? "80vw" : "40vw"))
+/** 树形菜单 */
+const menus = computed(() => cloneDeep(usePermissionStore().routes))
+
+/** 搜索（防抖） */
+const handleSearch = debounce(() => {
+  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 = result.value?.length
+  activeRouteName.value = length > 0 ? result.value[0].name : undefined
+}, 500)
+
+/** 将树形菜单扁平化为一维数组，用于菜单搜索 */
+function flatTree(arr: RouteRecordRaw[], result: RouteRecordRaw[] = []) {
+  arr.forEach((item) => {
+    result.push(item)
+    item.children && flatTree(item.children, result)
+  })
+  return result
+}
+
+/** 关闭搜索对话框 */
+function handleClose() {
+  modelValue.value = false
+  // 延时处理防止用户看到重置数据的操作
+  setTimeout(() => {
+    keyword.value = ""
+    result.value = []
+  }, 200)
+}
+
+/** 根据下标位置进行滚动 */
+function scrollTo(index: number) {
+  if (!resultRef.value) return
+  const scrollTop = resultRef.value.getScrollTop(index)
+  // 手动控制 el-scrollbar 滚动条滚动，设置滚动条到顶部的距离
+  scrollbarRef.value?.setScrollTop(scrollTop)
+}
+
+/** 键盘上键 */
+function handleUp() {
+  isPressUpOrDown.value = true
+  const { length } = result.value
+  if (length === 0) return
+  // 获取该 name 在菜单中第一次出现的位置
+  const index = result.value.findIndex(item => item.name === activeRouteName.value)
+  // 如果已处在顶部
+  if (index === 0) {
+    const bottomName = result.value[length - 1].name
+    // 如果顶部和底部的 bottomName 相同，且长度大于 1，就再跳一个位置（可解决遇到首尾两个相同 name 导致的上键不能生效的问题）
+    if (activeRouteName.value === bottomName && length > 1) {
+      activeRouteName.value = result.value[length - 2].name
+      scrollTo(length - 2)
+    } else {
+      // 跳转到底部
+      activeRouteName.value = bottomName
+      scrollTo(length - 1)
+    }
+  } else {
+    activeRouteName.value = result.value[index - 1].name
+    scrollTo(index - 1)
+  }
+}
+
+/** 键盘下键 */
+function handleDown() {
+  isPressUpOrDown.value = true
+  const { length } = result.value
+  if (length === 0) return
+  // 获取该 name 在菜单中最后一次出现的位置（可解决遇到连续两个相同 name 导致的下键不能生效的问题）
+  const index = result.value.map(item => item.name).lastIndexOf(activeRouteName.value)
+  // 如果已处在底部
+  if (index === length - 1) {
+    const topName = result.value[0].name
+    // 如果底部和顶部的 topName 相同，且长度大于 1，就再跳一个位置（可解决遇到首尾两个相同 name 导致的下键不能生效的问题）
+    if (activeRouteName.value === topName && length > 1) {
+      activeRouteName.value = result.value[1].name
+      scrollTo(1)
+    } else {
+      // 跳转到顶部
+      activeRouteName.value = topName
+      scrollTo(0)
+    }
+  } else {
+    activeRouteName.value = result.value[index + 1].name
+    scrollTo(index + 1)
+  }
+}
+
+/** 键盘回车键 */
+function handleEnter() {
+  const { length } = result.value
+  if (length === 0) return
+  const name = activeRouteName.value
+  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 {
+    return ElMessage.warning("该菜单有必填的动态参数，无法通过搜索进入")
+  }
+  handleClose()
+}
+
+/** 释放上键或下键 */
+function handleReleaseUpOrDown() {
+  isPressUpOrDown.value = false
+}
+</script>
+
+<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"
+  >
+    <el-input ref="inputRef" v-model="keyword" placeholder="搜索菜单" size="large" clearable @input="handleSearch">
+      <template #prefix>
+        <SvgIcon name="search" class="svg-icon" />
+      </template>
+    </el-input>
+    <el-empty v-if="result.length === 0" description="暂无搜索结果" :image-size="100" />
+    <template v-else>
+      <p>搜索结果</p>
+      <el-scrollbar ref="scrollbarRef" max-height="40vh" always>
+        <Result
+          ref="resultRef"
+          v-model="activeRouteName"
+          :data="result"
+          :is-press-up-or-down="isPressUpOrDown"
+          @click="handleEnter"
+        />
+      </el-scrollbar>
+    </template>
+    <template #footer>
+      <Footer :total="result.length" />
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss">
+.search-modal__private {
+  .svg-icon {
+    font-size: 18px;
+  }
+  .el-dialog__header {
+    display: none;
+  }
+  .el-dialog__footer {
+    border-top: 1px solid var(--el-border-color);
+    padding-top: var(--el-dialog-padding-primary);
+  }
+}
+</style>
--- a/management/web/src/common/components/SearchMenu/Result.vue
+++ b/management/web/src/common/components/SearchMenu/Result.vue
@ -0,0 +1,115 @@
+<script lang="ts" setup>
+import type { RouteRecordNameGeneric, RouteRecordRaw } from "vue-router"
+
+interface Props {
+  data: RouteRecordRaw[]
+  isPressUpOrDown: boolean
+}
+
+const props = defineProps<Props>()
+
+/** 选中的菜单 */
+const modelValue = defineModel<RouteRecordNameGeneric | undefined>({ required: true })
+
+const instance = getCurrentInstance()
+
+const scrollbarHeight = ref<number>(0)
+
+/** 菜单的样式 */
+function itemStyle(item: RouteRecordRaw) {
+  const flag = item.name === modelValue.value
+  return {
+    background: flag ? "var(--el-color-primary)" : "",
+    color: flag ? "#ffffff" : ""
+  }
+}
+
+/** 鼠标移入 */
+function handleMouseenter(item: RouteRecordRaw) {
+  // 如果上键或下键与 mouseenter 事件同时生效，则以上下键为准，不执行该函数的赋值逻辑
+  if (props.isPressUpOrDown) return
+  modelValue.value = item.name
+}
+
+/** 计算滚动可视区高度 */
+function getScrollbarHeight() {
+  // el-scrollbar max-height="40vh"
+  scrollbarHeight.value = Number((window.innerHeight * 0.4).toFixed(1))
+}
+
+/** 根据下标计算到顶部的距离 */
+function getScrollTop(index: number) {
+  const currentInstance = instance?.proxy?.$refs[`resultItemRef${index}`] as HTMLDivElement[]
+  if (!currentInstance) return 0
+  const currentRef = currentInstance[0]
+  // 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)
+})
+
+defineExpose({ getScrollTop })
+</script>
+
+<template>
+  <!-- 外层 div 不能删除，是用来接收父组件 click 事件的 -->
+  <div>
+    <div
+      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" 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" class="svg-icon" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import "@@/assets/styles/mixins.scss";
+
+.result-item {
+  display: flex;
+  align-items: center;
+  height: 56px;
+  padding: 0 15px;
+  margin-bottom: 8px;
+  border: 1px solid var(--el-border-color);
+  border-radius: 4px;
+  cursor: pointer;
+  .svg-icon {
+    min-width: 1em;
+    font-size: 18px;
+  }
+  .el-icon {
+    width: 1em;
+    font-size: 18px;
+  }
+  &-title {
+    flex: 1;
+    margin-left: 12px;
+    @extend %ellipsis;
+  }
+}
+</style>
--- a/management/web/src/common/components/SearchMenu/index.vue
+++ b/management/web/src/common/components/SearchMenu/index.vue
@ -0,0 +1,29 @@
+<script lang="ts" setup>
+import Modal from "./Modal.vue"
+
+/** 控制 modal 显隐 */
+const visible = ref<boolean>(false)
+
+/** 打开 modal */
+function handleOpen() {
+  visible.value = true
+}
+</script>
+
+<template>
+  <div>
+    <el-tooltip effect="dark" content="搜索菜单" placement="bottom">
+      <SvgIcon name="search" @click="handleOpen" class="svg-icon" />
+    </el-tooltip>
+    <Modal v-model="visible" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.svg-icon {
+  font-size: 20px;
+  &:focus {
+    outline: none;
+  }
+}
+</style>
--- a/management/web/src/common/components/ThemeSwitch/index.vue
+++ b/management/web/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>
--- a/management/web/src/common/composables/useDevice.ts
+++ b/management/web/src/common/composables/useDevice.ts
@ -0,0 +1,12 @@
+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 }
+}
--- a/management/web/src/common/composables/useFetchSelect.ts
+++ b/management/web/src/common/composables/useFetchSelect.ts
@ -0,0 +1,42 @@
+type OptionValue = string | number
+
+/** Select 需要的数据格式 */
+interface SelectOption {
+  value: OptionValue
+  label: string
+  disabled?: boolean
+}
+
+/** 接口响应格式 */
+type ApiData = ApiResponseData<SelectOption[]>
+
+/** 入参格式，暂时只需要传递 api 函数即可 */
+interface FetchSelectProps {
+  api: () => Promise<ApiData>
+}
+
+/** 下拉选择器 Composable */
+export function useFetchSelect(props: FetchSelectProps) {
+  const { api } = props
+
+  const loading = ref<boolean>(false)
+  const options = ref<SelectOption[]>([])
+  const value = ref<OptionValue>("")
+
+  // 调用接口获取数据
+  const loadData = () => {
+    loading.value = true
+    options.value = []
+    api().then((res) => {
+      options.value = res.data
+    }).finally(() => {
+      loading.value = false
+    })
+  }
+
+  onMounted(() => {
+    loadData()
+  })
+
+  return { loading, options, value }
+}
--- a/management/web/src/common/composables/useFullscreenLoading.ts
+++ b/management/web/src/common/composables/useFullscreenLoading.ts
@ -0,0 +1,36 @@
+import type { LoadingOptions } from "element-plus"
+
+interface UseFullscreenLoading {
+  <T extends (...args: Parameters<T>) => ReturnType<T>>(
+    fn: T,
+    options?: LoadingOptions
+  ): (...args: Parameters<T>) => Promise<ReturnType<T>>
+}
+
+interface LoadingInstance {
+  close: () => void
+}
+
+const DEFAULT_OPTIONS = {
+  lock: true,
+  text: "加载中..."
+}
+
+/**
+ * @name 全屏加载 Composable
+ * @description 传入一个函数 fn，在它执行周期内，加上「全屏」Loading
+ * @param fn 要执行的函数
+ * @param options LoadingOptions
+ * @returns 返回一个新的函数，该函数返回一个 Promise
+ */
+export const useFullscreenLoading: UseFullscreenLoading = (fn, options = {}) => {
+  let loadingInstance: LoadingInstance
+  return async (...args) => {
+    try {
+      loadingInstance = ElLoading.service({ ...DEFAULT_OPTIONS, ...options })
+      return await fn(...args)
+    } finally {
+      loadingInstance.close()
+    }
+  }
+}
--- a/management/web/src/common/composables/useGreyAndColorWeakness.ts
+++ b/management/web/src/common/composables/useGreyAndColorWeakness.ts
@ -0,0 +1,20 @@
+import { useSettingsStore } from "@/pinia/stores/settings"
+
+const GREY_MODE = "grey-mode"
+const COLOR_WEAKNESS = "color-weakness"
+
+const classList = document.documentElement.classList
+
+/** 初始化 */
+function initGreyAndColorWeakness() {
+  const settingsStore = useSettingsStore()
+  watchEffect(() => {
+    classList.toggle(GREY_MODE, settingsStore.showGreyMode)
+    classList.toggle(COLOR_WEAKNESS, settingsStore.showColorWeakness)
+  })
+}
+
+/** 灰色模式和色弱模式 Composable */
+export function useGreyAndColorWeakness() {
+  return { initGreyAndColorWeakness }
+}
--- a/management/web/src/common/composables/useLayoutMode.ts
+++ b/management/web/src/common/composables/useLayoutMode.ts
@ -0,0 +1,17 @@
+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)
+
+function setLayoutMode(mode: LayoutModeEnum) {
+  settingsStore.layoutMode = mode
+}
+
+/** 布局模式 Composable */
+export function useLayoutMode() {
+  return { isLeft, isTop, isLeftTop, setLayoutMode }
+}
--- a/management/web/src/common/composables/usePagination.ts
+++ b/management/web/src/common/composables/usePagination.ts
@ -0,0 +1,32 @@
+interface PaginationData {
+  total?: number
+  currentPage?: number
+  pageSizes?: number[]
+  pageSize?: number
+  layout?: string
+}
+
+/** 默认的分页参数 */
+const DEFAULT_PAGINATION_DATA = {
+  total: 0,
+  currentPage: 1,
+  pageSizes: [10, 20, 50],
+  pageSize: 10,
+  layout: "total, sizes, prev, pager, next, jumper"
+}
+
+/** 分页 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
+  }
+
+  return { paginationData, handleCurrentChange, handleSizeChange }
+}
--- a/management/web/src/common/composables/usePany.ts
+++ b/management/web/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 null
+  return { initStarNotification, initStoreNotification }
+}
--- a/management/web/src/common/composables/useRouteListener.ts
+++ b/management/web/src/common/composables/useRouteListener.ts
@ -0,0 +1,52 @@
+import type { Handler } from "mitt"
+import type { RouteLocationNormalizedGeneric } from "vue-router"
+import mitt from "mitt"
+
+/** 回调函数的类型 */
+type Callback = (route: RouteLocationNormalizedGeneric) => void
+
+const emitter = mitt()
+
+const key = Symbol("ROUTE_CHANGE")
+
+let latestRoute: RouteLocationNormalizedGeneric
+
+/** 设置最新的路由信息，触发路由变化事件 */
+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)
+    // 监听事件
+    emitter.on(key, callback as Handler)
+    // 可以选择立即执行一次回调函数
+    immediate && latestRoute && callback(latestRoute)
+  }
+
+  // 移除路由变化事件监听器
+  const removeRouteListener = (callback: Callback) => {
+    emitter.off(key, callback as Handler)
+  }
+
+  // 组件销毁前移除监听器
+  onBeforeUnmount(() => {
+    callbackList.forEach(removeRouteListener)
+  })
+
+  return { listenerRouteChange, removeRouteListener }
+}
--- a/management/web/src/common/composables/useTheme.ts
+++ b/management/web/src/common/composables/useTheme.ts
@ -0,0 +1,75 @@
+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 是必填的 */
+export type ThemeName = DefaultThemeName | "dark" | "dark-blue"
+
+interface ThemeList {
+  title: string
+  name: ThemeName
+}
+
+/** 主题列表 */
+const themeList: ThemeList[] = [
+  {
+    title: "默认",
+    name: DEFAULT_THEME_NAME
+  },
+  {
+    title: "黑暗",
+    name: "dark"
+  },
+  {
+    title: "深蓝",
+    name: "dark-blue"
+  }
+]
+
+/** 正在应用的主题名称 */
+const activeThemeName = ref<ThemeName>(getActiveThemeName() || DEFAULT_THEME_NAME)
+
+/** 设置主题 */
+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 */
+function addHtmlClass(value: ThemeName) {
+  document.documentElement.classList.add(value)
+}
+
+/** 在 html 根元素上移除其他主题 class */
+function removeHtmlClass(value: ThemeName) {
+  const otherThemeNameList = themeList.map(item => item.name).filter(name => name !== value)
+  document.documentElement.classList.remove(...otherThemeNameList)
+}
+
+/** 初始化 */
+function initTheme() {
+  // watchEffect 来收集副作用
+  watchEffect(() => {
+    const value = activeThemeName.value
+    removeHtmlClass(value)
+    addHtmlClass(value)
+    setActiveThemeName(value)
+  })
+}
+
+/** 主题 Composable */
+export function useTheme() {
+  return { themeList, activeThemeName, initTheme, setTheme }
+}
--- a/management/web/src/common/composables/useTitle.ts
+++ b/management/web/src/common/composables/useTitle.ts
@ -0,0 +1,22 @@
+/** 项目标题 */
+const VITE_APP_TITLE = import.meta.env.VITE_APP_TITLE ?? "V3 Admin Vite"
+
+/** 动态标题 */
+const dynamicTitle = ref<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 }
+}
--- a/management/web/src/common/composables/useWatermark.ts
+++ b/management/web/src/common/composables/useWatermark.ts
@ -0,0 +1,233 @@
+import type { Ref } from "vue"
+import { debounce } from "lodash-es"
+
+/** 默认配置 */
+const DEFAULT_CONFIG = {
+  /** 防御（默认开启，能防御水印被删除或隐藏，但可能会有性能损耗） */
+  defense: true,
+  /** 文本颜色 */
+  color: "#c0c4cc",
+  /** 文本透明度 */
+  opacity: 0.5,
+  /** 文本字体大小 */
+  size: 16,
+  /** 文本字体 */
+  family: "serif",
+  /** 文本倾斜角度 */
+  angle: -20,
+  /** 一处水印所占宽度（数值越大水印密度越低） */
+  width: 300,
+  /** 一处水印所占高度（数值越大水印密度越低） */
+  height: 200
+}
+
+type DefaultConfig = typeof DEFAULT_CONFIG
+
+interface Observer {
+  watermarkElMutationObserver?: MutationObserver
+  parentElMutationObserver?: MutationObserver
+  parentElResizeObserver?: ResizeObserver
+}
+
+/** body 元素 */
+const bodyEl = ref<HTMLElement>(document.body)
+
+/**
+ * @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) return console.warn("请在 DOM 挂载完成后再调用 setWatermark 方法设置水印")
+    // 备份文本
+    backupText = text
+    // 合并配置
+    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"
+    const parentElPosition = isBody ? "" : "relative"
+    watermarkEl = document.createElement("div")
+    watermarkEl.style.pointerEvents = "none"
+    watermarkEl.style.top = "0"
+    watermarkEl.style.left = "0"
+    watermarkEl.style.position = watermarkElPosition
+    watermarkEl.style.zIndex = "99999"
+    const { clientWidth, clientHeight } = parentEl.value!
+    updateWatermarkEl({ width: clientWidth, height: clientHeight })
+    // 设置水印容器为相对定位
+    parentEl.value!.style.position = parentElPosition
+    // 将水印元素添加到水印容器中
+    parentEl.value!.appendChild(watermarkEl)
+  }
+
+  // 更新水印元素
+  const updateWatermarkEl = (
+    options: Partial<{
+      width: number
+      height: number
+    }> = {}
+  ) => {
+    if (!watermarkEl) return
+    backupText && (watermarkEl.style.background = `url(${createBase64()}) left top repeat`)
+    options.width && (watermarkEl.style.width = `${options.width}px`)
+    options.height && (watermarkEl.style.height = `${options.height}px`)
+  }
+
+  // 创建 base64 图片
+  const createBase64 = () => {
+    const { color, opacity, size, family, angle, width, height } = mergeConfig
+    const canvasEl = document.createElement("canvas")
+    canvasEl.width = width
+    canvasEl.height = height
+    const ctx = canvasEl.getContext("2d")
+    if (ctx) {
+      ctx.fillStyle = color
+      ctx.globalAlpha = opacity
+      ctx.font = `${size}px ${family}`
+      ctx.rotate((Math.PI / 180) * angle)
+      ctx.fillText(backupText, 0, height / 2)
+    }
+    return canvasEl.toDataURL()
+  }
+
+  // 清除水印
+  const clearWatermark = () => {
+    if (!parentEl.value || !watermarkEl) return
+    // 移除对水印元素和容器元素的监听
+    removeListener()
+    // 移除水印元素
+    try {
+      parentEl.value.removeChild(watermarkEl)
+    } catch {
+      // 比如在无防御情况下，用户打开控制台删除了这个元素
+      console.warn("水印元素已不存在，请重新创建")
+    } finally {
+      watermarkEl = null
+    }
+  }
+
+  // 刷新水印（防御时调用）
+  const updateWatermark = debounce(() => {
+    clearWatermark()
+    createWatermarkEl()
+    addElListener(parentEl.value!)
+  }, 100)
+
+  // 监听水印元素和容器元素的变化（DOM 变化 & DOM 大小变化）
+  const addElListener = (targetNode: HTMLElement) => {
+    // 判断是否开启防御
+    if (mergeConfig.defense) {
+      // 防止重复添加监听
+      if (!observer.watermarkElMutationObserver && !observer.parentElMutationObserver) {
+        // 监听 DOM 变化
+        addMutationListener(targetNode)
+      }
+    } else {
+      // 无防御时不需要 mutation 监听
+      removeListener("mutation")
+    }
+    // 防止重复添加监听
+    if (!observer.parentElResizeObserver) {
+      // 监听 DOM 大小变化
+      addResizeListener(targetNode)
+    }
+  }
+
+  // 移除对水印元素和容器元素的监听，传参可指定要移除哪个监听，不传默认移除全部监听
+  const removeListener = (kind: "mutation" | "resize" | "all" = "all") => {
+    // 移除 mutation 监听
+    if (kind === "mutation" || kind === "all") {
+      observer.watermarkElMutationObserver?.disconnect()
+      observer.watermarkElMutationObserver = undefined
+      observer.parentElMutationObserver?.disconnect()
+      observer.parentElMutationObserver = undefined
+    }
+    // 移除 resize 监听
+    if (kind === "resize" || kind === "all") {
+      observer.parentElResizeObserver?.disconnect()
+      observer.parentElResizeObserver = undefined
+    }
+  }
+
+  // 监听 DOM 变化
+  const addMutationListener = (targetNode: HTMLElement) => {
+    // 当观察到变动时执行的回调
+    const mutationCallback = debounce((mutationList: MutationRecord[]) => {
+      // 水印的防御（防止用户手动删除水印元素或通过 CSS 隐藏水印）
+      mutationList.forEach(
+        debounce((mutation: MutationRecord) => {
+          switch (mutation.type) {
+            case "attributes":
+              mutation.target === watermarkEl && updateWatermark()
+              break
+            case "childList":
+              mutation.removedNodes.forEach((item) => {
+                item === watermarkEl && targetNode.appendChild(watermarkEl)
+              })
+              break
+          }
+        }, 100)
+      )
+    }, 100)
+    // 创建观察器实例并传入回调
+    observer.watermarkElMutationObserver = new MutationObserver(mutationCallback)
+    observer.parentElMutationObserver = new MutationObserver(mutationCallback)
+    // 以上述配置开始观察目标节点
+    observer.watermarkElMutationObserver.observe(watermarkEl!, {
+      // 观察目标节点属性是否变动，默认为 true
+      attributes: true,
+      // 观察目标子节点是否有添加或者删除，默认为 false
+      childList: false,
+      // 是否拓展到观察所有后代节点，默认为 false
+      subtree: false
+    })
+    observer.parentElMutationObserver.observe(targetNode, {
+      attributes: false,
+      childList: true,
+      subtree: false
+    })
+  }
+
+  // 监听 DOM 大小变化
+  const addResizeListener = (targetNode: HTMLElement) => {
+    // 当 targetNode 元素大小变化时去更新整个水印的大小
+    const resizeCallback = debounce(() => {
+      const { clientWidth, clientHeight } = targetNode
+      updateWatermarkEl({ width: clientWidth, height: clientHeight })
+    }, 500)
+    // 创建一个观察器实例并传入回调
+    observer.parentElResizeObserver = new ResizeObserver(resizeCallback)
+    // 开始观察目标节点
+    observer.parentElResizeObserver.observe(targetNode)
+  }
+
+  // 在组件卸载前移除水印以及各种监听
+  onBeforeUnmount(() => {
+    clearWatermark()
+  })
+
+  return { setWatermark, clearWatermark }
+}
--- a/management/web/src/common/constants/app-key.ts
+++ b/management/web/src/common/constants/app-key.ts
@ -0,0 +1,22 @@
+/** 设备类型 */
+export enum DeviceEnum {
+  Mobile,
+  Desktop
+}
+
+/** 布局模式 */
+export enum LayoutModeEnum {
+  Left = "left",
+  Top = "top",
+  LeftTop = "left-top"
+}
+
+/** 侧边栏打开状态常量 */
+export const SIDEBAR_OPENED = "opened"
+
+/** 侧边栏关闭状态常量 */
+export const SIDEBAR_CLOSED = "closed"
+
+export type SidebarOpened = typeof SIDEBAR_OPENED
+
+export type SidebarClosed = typeof SIDEBAR_CLOSED
--- a/management/web/src/common/constants/cache-key.ts
+++ b/management/web/src/common/constants/cache-key.ts
@ -0,0 +1,11 @@
+const SYSTEM_NAME = "v3-admin-vite"
+
+/** 缓存数据时用到的 Key */
+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`
+  static readonly ACTIVE_THEME_NAME = `${SYSTEM_NAME}-active-theme-name-key`
+  static readonly VISITED_VIEWS = `${SYSTEM_NAME}-visited-views-key`
+  static readonly CACHED_VIEWS = `${SYSTEM_NAME}-cached-views-key`
+}
--- a/management/web/src/common/utils/cache/cookies.ts
+++ b/management/web/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)
+}
--- a/management/web/src/common/utils/cache/local-storage.ts
+++ b/management/web/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
--- a/management/web/src/common/utils/css.ts
+++ b/management/web/src/common/utils/css.ts
@ -0,0 +1,18 @@
+/** 获取指定元素（默认全局）上的 CSS 变量的值 */
+export function getCssVar(varName: string, element: HTMLElement = document.documentElement) {
+  if (!varName?.startsWith("--")) {
+    console.error("CSS 变量名应以 '--' 开头")
+    return ""
+  }
+  // 没有拿到值时，会返回空串
+  return getComputedStyle(element).getPropertyValue(varName)
+}
+
+/** 设置指定元素（默认全局）上的 CSS 变量的值 */
+export function setCssVar(varName: string, value: string, element: HTMLElement = document.documentElement) {
+  if (!varName?.startsWith("--")) {
+    console.error("CSS 变量名应以 '--' 开头")
+    return
+  }
+  element.style.setProperty(varName, value)
+}
--- a/management/web/src/common/utils/datetime.ts
+++ b/management/web/src/common/utils/datetime.ts
@ -0,0 +1,9 @@
+import dayjs from "dayjs"
+
+const INVALID_DATE = "N/A"
+
+/** 格式化日期时间 */
+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
+}
--- a/management/web/src/common/utils/permission.ts
+++ b/management/web/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
+  }
+}
--- a/management/web/src/common/utils/validate.ts
+++ b/management/web/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)
+}
--- a/management/web/src/http/axios.ts
+++ b/management/web/src/http/axios.ts
@ -0,0 +1,131 @@
+import type { AxiosInstance, AxiosRequestConfig } from "axios"
+import { useUserStore } from "@/pinia/stores/user"
+import { getToken } from "@@/utils/cache/cookies"
+import axios from "axios"
+import { get, merge } from "lodash-es"
+
+/** 退出登录并强制刷新页面（会重定向到登录页） */
+function logout() {
+  useUserStore().logout()
+  location.reload()
+}
+
+/** 创建请求实例 */
+function createInstance() {
+  // 创建一个 axios 实例命名为 instance
+  const instance = axios.create()
+  // 请求拦截器
+  instance.interceptors.request.use(
+    // 发送之前
+    config => config,
+    // 发送失败
+    error => Promise.reject(error)
+  )
+  // 响应拦截器（可根据具体业务作出相应的调整）
+  instance.interceptors.response.use(
+    (response) => {
+      // apiData 是 api 返回的数据
+      const apiData = response.data
+      // 二进制数据则直接返回
+      const responseType = response.request?.responseType
+      if (responseType === "blob" || responseType === "arraybuffer") return apiData
+      // 这个 code 是和后端约定的业务 code
+      const code = apiData.code
+      // 如果没有 code, 代表这不是项目后端开发的 api
+      if (code === undefined) {
+        ElMessage.error("非本系统的接口")
+        return Promise.reject(new Error("非本系统的接口"))
+      }
+      switch (code) {
+        case 0:
+          // 本系统采用 code === 0 来表示没有业务错误
+          return apiData
+        case 401:
+          // Token 过期时
+          return logout()
+        default:
+          // 不是正确的 code
+          ElMessage.error(apiData.message || "Error")
+          return Promise.reject(new Error("Error"))
+      }
+    },
+    (error) => {
+      // status 是 HTTP 状态码
+      const status = get(error, "response.status")
+      const message = get(error, "response.data.message")
+      switch (status) {
+        case 400:
+          error.message = "请求错误"
+          break
+        case 401:
+          // Token 过期时
+          error.message = message || "未授权"
+          logout()
+          break
+        case 403:
+          error.message = message || "拒绝访问"
+          break
+        case 404:
+          error.message = "请求地址出错"
+          break
+        case 408:
+          error.message = "请求超时"
+          break
+        case 500:
+          error.message = "服务器内部错误"
+          break
+        case 501:
+          error.message = "服务未实现"
+          break
+        case 502:
+          error.message = "网关错误"
+          break
+        case 503:
+          error.message = "服务不可用"
+          break
+        case 504:
+          error.message = "网关超时"
+          break
+        case 505:
+          error.message = "HTTP 版本不受支持"
+          break
+      }
+      ElMessage.error(error.message)
+      return Promise.reject(error)
+    }
+  )
+  return instance
+}
+
+/** 创建请求方法 */
+function createRequest(instance: AxiosInstance) {
+  return <T>(config: AxiosRequestConfig): Promise<T> => {
+    const token = getToken()
+    // 默认配置
+    const defaultConfig: AxiosRequestConfig = {
+      // 接口地址
+      baseURL: import.meta.env.VITE_BASE_URL,
+      // 请求头
+      headers: {
+        // 携带 Token
+        "Authorization": token ? `Bearer ${token}` : undefined,
+        "Content-Type": "application/json"
+      },
+      // 请求体
+      data: {},
+      // 请求超时
+      timeout: 5000,
+      // 跨域请求时是否携带 Cookies
+      withCredentials: false
+    }
+    // 将默认配置 defaultConfig 和传入的自定义配置 config 进行合并成为 mergeConfig
+    const mergeConfig = merge(defaultConfig, config)
+    return instance(mergeConfig)
+  }
+}
+
+/** 用于请求的实例 */
+const instance = createInstance()
+
+/** 用于请求的方法 */
+export const request = createRequest(instance)
--- a/management/web/src/layouts/components/AppMain/index.vue
+++ b/management/web/src/layouts/components/AppMain/index.vue
@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import { useSettingsStore } from "@/pinia/stores/settings"
+import { useTagsViewStore } from "@/pinia/stores/tags-view"
+import { Footer } from "../index"
+
+const tagsViewStore = useTagsViewStore()
+const settingsStore = useSettingsStore()
+</script>
+
+<template>
+  <section class="app-main">
+    <div class="app-scrollbar">
+      <!-- key 采用 route.path 和 route.fullPath 有着不同的效果，大多数时候 path 更通用 -->
+      <router-view v-slot="{ Component, route }">
+        <transition name="el-fade-in" mode="out-in">
+          <keep-alive :include="tagsViewStore.cachedViews">
+            <component :is="Component" :key="route.path" class="app-container-grow" />
+          </keep-alive>
+        </transition>
+      </router-view>
+      <!-- 页脚 -->
+      <Footer v-if="settingsStore.showFooter" />
+    </div>
+    <!-- 返回顶部 -->
+    <el-backtop />
+    <!-- 返回顶部（固定 Header 情况下） -->
+    <el-backtop target=".app-scrollbar" />
+  </section>
+</template>
+
+<style lang="scss" scoped>
+@import "@@/assets/styles/mixins.scss";
+
+.app-main {
+  width: 100%;
+  display: flex;
+}
+
+.app-scrollbar {
+  flex-grow: 1;
+  overflow: auto;
+  @extend %scrollbar;
+  display: flex;
+  flex-direction: column;
+  .app-container-grow {
+    flex-grow: 1;
+  }
+}
+</style>
--- a/management/web/src/layouts/components/Breadcrumb/index.vue
+++ b/management/web/src/layouts/components/Breadcrumb/index.vue
@ -0,0 +1,63 @@
+<script lang="ts" setup>
+import type { RouteLocationMatched } from "vue-router"
+import { useRouteListener } from "@@/composables/useRouteListener"
+import { compile } from "path-to-regexp"
+
+const route = useRoute()
+
+const router = useRouter()
+
+const { listenerRouteChange } = useRouteListener()
+
+/** 定义响应式数据 breadcrumbs，用于存储面包屑导航信息 */
+const breadcrumbs = ref<RouteLocationMatched[]>([])
+
+/** 获取面包屑导航信息 */
+function getBreadcrumb() {
+  breadcrumbs.value = route.matched.filter(item => item.meta?.title && item.meta?.breadcrumb !== false)
+}
+
+/** 编译路由路径 */
+function pathCompile(path: string) {
+  const toPath = compile(path)
+  return toPath(route.params)
+}
+
+/** 处理面包屑导航点击事件 */
+function handleLink(item: RouteLocationMatched) {
+  const { redirect, path } = item
+  if (redirect) return router.push(redirect as string)
+  router.push(pathCompile(path))
+}
+
+// 监听路由变化，更新面包屑导航信息
+listenerRouteChange((route) => {
+  if (route.path.startsWith("/redirect/")) return
+  getBreadcrumb()
+}, true)
+</script>
+
+<template>
+  <el-breadcrumb>
+    <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="item.path">
+      <span v-if="item.redirect === 'noRedirect' || index === breadcrumbs.length - 1" class="no-redirect">
+        {{ item.meta.title }}
+      </span>
+      <a v-else @click.prevent="handleLink(item)">
+        {{ item.meta.title }}
+      </a>
+    </el-breadcrumb-item>
+  </el-breadcrumb>
+</template>
+
+<style lang="scss" scoped>
+.el-breadcrumb {
+  line-height: var(--v3-navigationbar-height);
+  .no-redirect {
+    color: var(--el-text-color-placeholder);
+  }
+  a {
+    font-weight: normal;
+  }
+}
+</style>
--- a/management/web/src/layouts/components/Footer/index.vue
+++ b/management/web/src/layouts/components/Footer/index.vue
@ -0,0 +1,20 @@
+<script lang="ts" setup>
+const VITE_APP_TITLE = import.meta.env.VITE_APP_TITLE
+</script>
+
+<template>
+  <footer class="layout-footer">
+    {{ VITE_APP_TITLE }} : https://github.com/zstar1003/ragflow-plus
+  </footer>
+</template>
+
+<style lang="scss" scoped>
+.layout-footer {
+  width: 100%;
+  min-height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--el-text-color-placeholder);
+}
+</style>
--- a/management/web/src/layouts/components/Hamburger/index.vue
+++ b/management/web/src/layouts/components/Hamburger/index.vue
@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import { Expand, Fold } from "@element-plus/icons-vue"
+
+interface Props {
+  isActive?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isActive: false
+})
+
+const emit = defineEmits<{
+  toggleClick: []
+}>()
+
+function toggleClick() {
+  emit("toggleClick")
+}
+</script>
+
+<template>
+  <div @click="toggleClick">
+    <el-icon :size="20" class="icon">
+      <Fold v-if="props.isActive" />
+      <Expand v-else />
+    </el-icon>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.icon {
+  vertical-align: middle;
+  color: var(--v3-hamburger-text-color);
+}
+</style>
--- a/management/web/src/layouts/components/Logo/index.vue
+++ b/management/web/src/layouts/components/Logo/index.vue
@ -0,0 +1,64 @@
+<script lang="ts" setup>
+import logoText1 from "@@/assets/images/layouts/logo-text-1.png?url"
+import logoText2 from "@@/assets/images/layouts/logo-text-2.png?url"
+import logo from "@@/assets/images/layouts/logo.png?url"
+import { useLayoutMode } from "@@/composables/useLayoutMode"
+
+interface Props {
+  collapse?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  collapse: true
+})
+
+const { isLeft, isTop } = useLayoutMode()
+</script>
+
+<template>
+  <div class="layout-logo-container" :class="{ 'collapse': props.collapse, 'layout-mode-top': isTop }">
+    <transition name="layout-logo-fade">
+      <router-link v-if="props.collapse" key="collapse" to="/">
+        <img :src="logo" class="layout-logo">
+      </router-link>
+      <router-link v-else key="expand" to="/">
+        <img :src="!isLeft ? logoText2 : logoText1" class="layout-logo-text">
+      </router-link>
+    </transition>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.layout-logo-container {
+  position: relative;
+  width: 100%;
+  height: var(--v3-header-height);
+  line-height: var(--v3-header-height);
+  text-align: center;
+  overflow: hidden;
+  .layout-logo {
+    display: none;
+  }
+  .layout-logo-text {
+    height: 100%;
+    vertical-align: middle;
+  }
+}
+
+.layout-mode-top {
+  height: var(--v3-navigationbar-height);
+  line-height: var(--v3-navigationbar-height);
+}
+
+.collapse {
+  .layout-logo {
+    width: 32px;
+    height: 32px;
+    vertical-align: middle;
+    display: inline-block;
+  }
+  .layout-logo-text {
+    display: none;
+  }
+}
+</style>
--- a/management/web/src/layouts/components/NavigationBar/index.vue
+++ b/management/web/src/layouts/components/NavigationBar/index.vue
@ -0,0 +1,126 @@
+<script lang="ts" setup>
+import { useAppStore } from "@/pinia/stores/app"
+import { useSettingsStore } from "@/pinia/stores/settings"
+import { useUserStore } from "@/pinia/stores/user"
+import Notify from "@@/components/Notify/index.vue"
+import Screenfull from "@@/components/Screenfull/index.vue"
+import SearchMenu from "@@/components/SearchMenu/index.vue"
+import ThemeSwitch from "@@/components/ThemeSwitch/index.vue"
+import { useDevice } from "@@/composables/useDevice"
+import { useLayoutMode } from "@@/composables/useLayoutMode"
+import { UserFilled } from "@element-plus/icons-vue"
+import { Breadcrumb, Hamburger, Sidebar } from "../index"
+
+const { isMobile } = useDevice()
+const { isTop } = useLayoutMode()
+const router = useRouter()
+const appStore = useAppStore()
+const userStore = useUserStore()
+const settingsStore = useSettingsStore()
+const { showNotify, showThemeSwitch, showScreenfull, showSearchMenu } = storeToRefs(settingsStore)
+
+/** 切换侧边栏 */
+function toggleSidebar() {
+  appStore.toggleSidebar(false)
+}
+
+/** 登出 */
+function logout() {
+  userStore.logout()
+  router.push("/login")
+}
+</script>
+
+<template>
+  <div class="navigation-bar">
+    <Hamburger
+      v-if="!isTop || isMobile"
+      :is-active="appStore.sidebar.opened"
+      class="hamburger"
+      @toggle-click="toggleSidebar"
+    />
+    <Breadcrumb v-if="!isTop || isMobile" class="breadcrumb" />
+    <Sidebar v-if="isTop && !isMobile" class="sidebar" />
+    <div class="right-menu">
+      <SearchMenu v-if="showSearchMenu" class="right-menu-item" />
+      <Screenfull v-if="showScreenfull" class="right-menu-item" />
+      <ThemeSwitch v-if="showThemeSwitch" class="right-menu-item" />
+      <Notify v-if="showNotify" class="right-menu-item" />
+      <el-dropdown>
+        <div class="right-menu-item user">
+          <el-avatar :src="userStore.avatar" :size="30" />
+          <span>{{ userStore.username }}</span>
+        </div>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item @click="logout">
+              退出登录
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.navigation-bar {
+  height: var(--v3-navigationbar-height);
+  overflow: hidden;
+  color: var(--v3-navigationbar-text-color);
+  display: flex;
+  justify-content: space-between;
+  .hamburger {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    padding: 0 15px;
+    cursor: pointer;
+  }
+  .breadcrumb {
+    flex: 1;
+    // 参考 Bootstrap 的响应式设计将宽度设置为 576
+    @media screen and (max-width: 576px) {
+      display: none;
+    }
+  }
+  .sidebar {
+    flex: 1;
+    // 设置 min-width 是为了让 Sidebar 里的 el-menu 宽度自适应
+    min-width: 0px;
+    :deep(.el-menu) {
+      background-color: transparent;
+    }
+    :deep(.el-sub-menu) {
+      &.is-active {
+        .el-sub-menu__title {
+          color: var(--el-color-primary);
+        }
+      }
+    }
+  }
+  .right-menu {
+    margin-right: 10px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    &-item {
+      margin: 0 10px;
+      cursor: pointer;
+      &:last-child {
+        margin-left: 20px;
+      }
+    }
+    .user {
+      display: flex;
+      align-items: center;
+      .el-avatar {
+        margin-right: 10px;
+      }
+      span {
+        font-size: 16px;
+      }
+    }
+  }
+}
+</style>
--- a/management/web/src/layouts/components/RightPanel/index.vue
+++ b/management/web/src/layouts/components/RightPanel/index.vue
@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import { Setting } from "@element-plus/icons-vue"
+
+const show = ref(false)
+</script>
+
+<template>
+  <div class="handle-button" @click="show = true">
+    <el-icon :size="24">
+      <Setting />
+    </el-icon>
+  </div>
+  <el-drawer v-model="show" size="300px" :with-header="false">
+    <slot />
+  </el-drawer>
+</template>
+
+<style lang="scss" scoped>
+.handle-button {
+  width: 48px;
+  height: 48px;
+  background-color: var(--v3-rightpanel-button-bg-color);
+  position: fixed;
+  top: 45%;
+  right: 0;
+  border-radius: 6px 0 0 6px;
+  z-index: 2000;
+  cursor: pointer;
+  pointer-events: auto;
+  color: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>
--- a/management/web/src/layouts/components/Settings/SelectLayoutMode.vue
+++ b/management/web/src/layouts/components/Settings/SelectLayoutMode.vue
@ -0,0 +1,103 @@
+<script lang="ts" setup>
+import { useLayoutMode } from "@@/composables/useLayoutMode"
+import { LayoutModeEnum } from "@@/constants/app-key"
+
+const { isLeft, isTop, isLeftTop, setLayoutMode } = useLayoutMode()
+</script>
+
+<template>
+  <div class="select-layout-mode">
+    <el-tooltip content="左侧模式">
+      <el-container class="layout-mode left" :class="{ active: isLeft }" @click="setLayoutMode(LayoutModeEnum.Left)">
+        <el-aside />
+        <el-container>
+          <el-header />
+          <el-main />
+        </el-container>
+      </el-container>
+    </el-tooltip>
+    <el-tooltip content="顶部模式">
+      <el-container class="layout-mode top" :class="{ active: isTop }" @click="setLayoutMode(LayoutModeEnum.Top)">
+        <el-header />
+        <el-main />
+      </el-container>
+    </el-tooltip>
+    <el-tooltip content="混合模式">
+      <el-container
+        class="layout-mode left-top"
+        :class="{ active: isLeftTop }"
+        @click="setLayoutMode(LayoutModeEnum.LeftTop)"
+      >
+        <el-header />
+        <el-container>
+          <el-aside />
+          <el-main />
+        </el-container>
+      </el-container>
+    </el-tooltip>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.select-layout-mode {
+  display: flex;
+  justify-content: space-between;
+}
+
+.layout-mode {
+  width: 60px;
+  flex-grow: 0;
+  overflow: hidden;
+  cursor: pointer;
+  border-radius: 6px;
+  border: 2px solid transparent;
+  &:hover {
+    border: 2px solid var(--el-color-primary);
+  }
+}
+
+.active {
+  border: 2px solid var(--el-color-primary);
+}
+
+.el-header {
+  height: 12px;
+}
+
+.el-aside {
+  width: 16px;
+}
+
+.left {
+  .el-header {
+    background-color: var(--el-fill-color-darker);
+  }
+  .el-aside {
+    background-color: var(--el-color-primary);
+  }
+  .el-main {
+    background-color: var(--el-fill-color-lighter);
+  }
+}
+
+.top {
+  .el-header {
+    background-color: var(--el-color-primary);
+  }
+  .el-main {
+    background-color: var(--el-fill-color-lighter);
+  }
+}
+
+.left-top {
+  .el-header {
+    background-color: var(--el-fill-color-darker);
+  }
+  .el-aside {
+    background-color: var(--el-color-primary);
+  }
+  .el-main {
+    background-color: var(--el-fill-color-lighter);
+  }
+}
+</style>
--- a/management/web/src/layouts/components/Settings/index.vue
+++ b/management/web/src/layouts/components/Settings/index.vue
@ -0,0 +1,93 @@
+<script lang="ts" setup>
+import { useSettingsStore } from "@/pinia/stores/settings"
+import { useLayoutMode } from "@@/composables/useLayoutMode"
+import { removeLayoutsConfig } from "@@/utils/cache/local-storage"
+import { Refresh } from "@element-plus/icons-vue"
+import SelectLayoutMode from "./SelectLayoutMode.vue"
+
+const { isLeft } = useLayoutMode()
+
+const settingsStore = useSettingsStore()
+
+// 使用 storeToRefs 将提取的属性保持其响应性
+const {
+  showTagsView,
+  showLogo,
+  fixedHeader,
+  showFooter,
+  showNotify,
+  showThemeSwitch,
+  showScreenfull,
+  showSearchMenu,
+  cacheTagsView,
+  showWatermark,
+  showGreyMode,
+  showColorWeakness
+} = storeToRefs(settingsStore)
+
+/** 定义 switch 设置项 */
+const switchSettings = {
+  "显示标签栏": showTagsView,
+  "显示 Logo": showLogo,
+  "固定 Header": fixedHeader,
+  "显示页脚": showFooter,
+  "显示消息通知": showNotify,
+  "显示切换主题按钮": showThemeSwitch,
+  "显示全屏按钮": showScreenfull,
+  "显示搜索按钮": showSearchMenu,
+  "是否缓存标签栏": cacheTagsView,
+  "开启系统水印": showWatermark,
+  "显示灰色模式": showGreyMode,
+  "显示色弱模式": showColorWeakness
+}
+
+// 非左侧模式时，Header 都是 fixed 布局
+watchEffect(() => {
+  !isLeft.value && (fixedHeader.value = true)
+})
+
+/** 重置项目配置 */
+function resetLayoutsConfig() {
+  removeLayoutsConfig()
+  location.reload()
+}
+</script>
+
+<template>
+  <div class="setting-container">
+    <h4>布局配置</h4>
+    <SelectLayoutMode />
+    <el-divider />
+    <h4>功能配置</h4>
+    <div v-for="(settingValue, settingName, index) in switchSettings" :key="index" class="setting-item">
+      <span class="setting-name">{{ settingName }}</span>
+      <el-switch v-model="settingValue.value" :disabled="!isLeft && settingName === '固定 Header'" />
+    </div>
+    <el-button type="danger" :icon="Refresh" @click="resetLayoutsConfig">
+      重 置
+    </el-button>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import "@@/assets/styles/mixins.scss";
+
+.setting-container {
+  padding: 20px;
+  .setting-item {
+    font-size: 14px;
+    color: var(--el-text-color-regular);
+    padding: 5px 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .setting-name {
+      @extend %ellipsis;
+    }
+  }
+  .el-button {
+    margin-top: 40px;
+    width: 100%;
+  }
+}
+</style>
--- a/management/web/src/layouts/components/Sidebar/Item.vue
+++ b/management/web/src/layouts/components/Sidebar/Item.vue
@ -0,0 +1,98 @@
+<script lang="ts" setup>
+import type { RouteRecordRaw } from "vue-router"
+import { isExternal } from "@@/utils/validate"
+import path from "path-browserify"
+import Link from "./Link.vue"
+
+interface Props {
+  item: RouteRecordRaw
+  basePath?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  basePath: ""
+})
+
+/** 是否始终显示根菜单 */
+const alwaysShowRootMenu = computed(() => props.item.meta?.alwaysShow)
+
+/** 显示的子菜单 */
+const showingChildren = computed(() => props.item.children?.filter(child => !child.meta?.hidden) ?? [])
+
+/** 显示的子菜单数量 */
+const showingChildNumber = computed(() => showingChildren.value.length)
+
+/** 唯一的子菜单项 */
+const theOnlyOneChild = computed(() => {
+  const number = showingChildNumber.value
+  switch (true) {
+    case number > 1:
+      return null
+    case number === 1:
+      return showingChildren.value[0]
+    default:
+      return { ...props.item, path: "" }
+  }
+})
+
+/** 解析路径 */
+function resolvePath(routePath: string) {
+  switch (true) {
+    case isExternal(routePath):
+      return routePath
+    case isExternal(props.basePath):
+      return props.basePath
+    default:
+      return path.resolve(props.basePath, routePath)
+  }
+}
+</script>
+
+<template>
+  <template v-if="!alwaysShowRootMenu && theOnlyOneChild && !theOnlyOneChild.children">
+    <Link v-if="theOnlyOneChild.meta" :to="resolvePath(theOnlyOneChild.path)">
+      <el-menu-item :index="resolvePath(theOnlyOneChild.path)">
+        <SvgIcon v-if="theOnlyOneChild.meta.svgIcon" :name="theOnlyOneChild.meta.svgIcon" class="svg-icon" />
+        <component v-else-if="theOnlyOneChild.meta.elIcon" :is="theOnlyOneChild.meta.elIcon" class="el-icon" />
+        <template v-if="theOnlyOneChild.meta.title" #title>
+          <span class="title">{{ theOnlyOneChild.meta.title }}</span>
+        </template>
+      </el-menu-item>
+    </Link>
+  </template>
+  <el-sub-menu v-else :index="resolvePath(props.item.path)" teleported>
+    <template #title>
+      <SvgIcon v-if="props.item.meta?.svgIcon" :name="props.item.meta.svgIcon" class="svg-icon" />
+      <component v-else-if="props.item.meta?.elIcon" :is="props.item.meta.elIcon" class="el-icon" />
+      <span v-if="props.item.meta?.title" class="title">{{ props.item.meta.title }}</span>
+    </template>
+    <template v-if="props.item.children">
+      <Item
+        v-for="child in showingChildren"
+        :key="child.path"
+        :item="child"
+        :base-path="resolvePath(child.path)"
+      />
+    </template>
+  </el-sub-menu>
+</template>
+
+<style lang="scss" scoped>
+@import "@@/assets/styles/mixins.scss";
+
+.svg-icon {
+  min-width: 1em;
+  margin-right: 12px;
+  font-size: 18px;
+}
+
+.el-icon {
+  width: 1em !important;
+  margin-right: 12px !important;
+  font-size: 18px;
+}
+
+.title {
+  @extend %ellipsis;
+}
+</style>
--- a/management/web/src/layouts/components/Sidebar/Link.vue
+++ b/management/web/src/layouts/components/Sidebar/Link.vue
@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import { isExternal } from "@@/utils/validate"
+
+interface Props {
+  to: string
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <a v-if="isExternal(props.to)" :href="props.to" target="_blank" rel="noopener">
+    <slot />
+  </a>
+  <router-link v-else :to="props.to">
+    <slot />
+  </router-link>
+</template>
--- a/management/web/src/layouts/components/Sidebar/index.vue
+++ b/management/web/src/layouts/components/Sidebar/index.vue
@ -0,0 +1,134 @@
+<script lang="ts" setup>
+import { useAppStore } from "@/pinia/stores/app"
+import { usePermissionStore } from "@/pinia/stores/permission"
+import { useSettingsStore } from "@/pinia/stores/settings"
+import { useDevice } from "@@/composables/useDevice"
+import { useLayoutMode } from "@@/composables/useLayoutMode"
+import { getCssVar } from "@@/utils/css"
+import { Logo } from "../index"
+import Item from "./Item.vue"
+
+const v3SidebarMenuBgColor = getCssVar("--v3-sidebar-menu-bg-color")
+const v3SidebarMenuTextColor = getCssVar("--v3-sidebar-menu-text-color")
+const v3SidebarMenuActiveTextColor = getCssVar("--v3-sidebar-menu-active-text-color")
+
+const { isMobile } = useDevice()
+const { isLeft, isTop } = useLayoutMode()
+const route = useRoute()
+const appStore = useAppStore()
+const permissionStore = usePermissionStore()
+const settingsStore = useSettingsStore()
+
+const activeMenu = computed(() => route.meta.activeMenu || route.path)
+const noHiddenRoutes = computed(() => permissionStore.routes.filter(item => !item.meta?.hidden))
+const isCollapse = computed(() => !appStore.sidebar.opened)
+const isLogo = computed(() => isLeft.value && settingsStore.showLogo)
+const backgroundColor = computed(() => (isLeft.value ? v3SidebarMenuBgColor : undefined))
+const textColor = computed(() => (isLeft.value ? v3SidebarMenuTextColor : undefined))
+const activeTextColor = computed(() => (isLeft.value ? v3SidebarMenuActiveTextColor : undefined))
+const sidebarMenuItemHeight = computed(() => !isTop.value ? "var(--v3-sidebar-menu-item-height)" : "var(--v3-navigationbar-height)")
+const sidebarMenuHoverBgColor = computed(() => !isTop.value ? "var(--v3-sidebar-menu-hover-bg-color)" : "transparent")
+const tipLineWidth = computed(() => !isTop.value ? "2px" : "0px")
+</script>
+
+<template>
+  <div :class="{ 'has-logo': isLogo }">
+    <Logo v-if="isLogo" :collapse="isCollapse" />
+    <el-scrollbar wrap-class="scrollbar-wrapper">
+      <el-menu
+        :default-active="activeMenu"
+        :collapse="isCollapse && !isTop"
+        :background-color="backgroundColor"
+        :text-color="textColor"
+        :active-text-color="activeTextColor"
+        :collapse-transition="false"
+        :mode="isTop && !isMobile ? 'horizontal' : 'vertical'"
+      >
+        <Item
+          v-for="noHiddenRoute in noHiddenRoutes"
+          :key="noHiddenRoute.path"
+          :item="noHiddenRoute"
+          :base-path="noHiddenRoute.path"
+        />
+      </el-menu>
+    </el-scrollbar>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+%tip-line {
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: v-bind(tipLineWidth);
+    height: 100%;
+    background-color: var(--v3-sidebar-menu-tip-line-bg-color);
+  }
+}
+
+.has-logo {
+  .el-scrollbar {
+    height: calc(100% - var(--v3-header-height));
+  }
+}
+
+.el-scrollbar {
+  height: 100%;
+  :deep(.scrollbar-wrapper) {
+    // 限制水平宽度
+    overflow-x: hidden;
+  }
+  // 滚动条
+  :deep(.el-scrollbar__bar) {
+    &.is-horizontal {
+      // 隐藏水平滚动条
+      display: none;
+    }
+  }
+}
+
+.el-menu {
+  user-select: none;
+  border: none;
+  width: 100%;
+}
+
+.el-menu--horizontal {
+  height: v-bind(sidebarMenuItemHeight);
+}
+
+:deep(.el-menu-item),
+:deep(.el-sub-menu__title),
+:deep(.el-sub-menu .el-menu-item),
+:deep(.el-menu--horizontal .el-menu-item) {
+  height: v-bind(sidebarMenuItemHeight);
+  line-height: v-bind(sidebarMenuItemHeight);
+  &.is-active,
+  &:hover {
+    background-color: v-bind(sidebarMenuHoverBgColor);
+  }
+}
+
+:deep(.el-sub-menu) {
+  &.is-active {
+    > .el-sub-menu__title {
+      color: v-bind(activeTextColor);
+    }
+  }
+}
+
+:deep(.el-menu-item.is-active) {
+  @extend %tip-line;
+}
+
+.el-menu--collapse {
+  :deep(.el-sub-menu.is-active) {
+    .el-sub-menu__title {
+      @extend %tip-line;
+      background-color: v-bind(sidebarMenuHoverBgColor);
+    }
+  }
+}
+</style>
--- a/management/web/src/layouts/components/TagsView/ScrollPane.vue
+++ b/management/web/src/layouts/components/TagsView/ScrollPane.vue
@ -0,0 +1,162 @@
+<script lang="ts" setup>
+import type { ElScrollbar } from "element-plus"
+import type { RouterLink } from "vue-router"
+import { useSettingsStore } from "@/pinia/stores/settings"
+import Screenfull from "@@/components/Screenfull/index.vue"
+import { useRouteListener } from "@@/composables/useRouteListener"
+import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue"
+
+interface Props {
+  tagRefs: InstanceType<typeof RouterLink>[]
+}
+
+const props = defineProps<Props>()
+
+const route = useRoute()
+
+const settingsStore = useSettingsStore()
+
+const { listenerRouteChange } = useRouteListener()
+
+/** 滚动条组件元素的引用 */
+const scrollbarRef = ref<InstanceType<typeof ElScrollbar>>()
+
+/** 滚动条内容元素的引用 */
+const scrollbarContentRef = ref<HTMLDivElement>()
+
+/** 当前滚动条距离左边的距离 */
+let currentScrollLeft = 0
+
+/** 每次滚动距离 */
+const translateDistance = 200
+
+/** 滚动时触发 */
+function scroll({ scrollLeft }: { scrollLeft: number }) {
+  currentScrollLeft = scrollLeft
+}
+
+/** 鼠标滚轮滚动时触发 */
+function wheelScroll({ deltaY }: WheelEvent) {
+  if (deltaY.toString().startsWith("-")) {
+    scrollTo("left")
+  } else {
+    scrollTo("right")
+  }
+}
+
+/** 获取可能需要的宽度 */
+function getWidth() {
+  // 可滚动内容的长度
+  const scrollbarContentRefWidth = scrollbarContentRef.value!.clientWidth
+  // 滚动可视区宽度
+  const scrollbarRefWidth = scrollbarRef.value!.wrapRef!.clientWidth
+  // 最后剩余可滚动的宽度
+  const lastDistance = scrollbarContentRefWidth - scrollbarRefWidth - currentScrollLeft
+
+  return { scrollbarContentRefWidth, scrollbarRefWidth, lastDistance }
+}
+
+/** 左右滚动 */
+function scrollTo(direction: "left" | "right", distance: number = translateDistance) {
+  let scrollLeft = 0
+  const { scrollbarContentRefWidth, scrollbarRefWidth, lastDistance } = getWidth()
+  // 没有横向滚动条，直接结束
+  if (scrollbarRefWidth > scrollbarContentRefWidth) return
+  if (direction === "left") {
+    scrollLeft = Math.max(0, currentScrollLeft - distance)
+  } else {
+    scrollLeft = Math.min(currentScrollLeft + distance, currentScrollLeft + lastDistance)
+  }
+  scrollbarRef.value!.setScrollLeft(scrollLeft)
+}
+
+/** 移动到目标位置 */
+function moveTo() {
+  const tagRefs = props.tagRefs
+  for (let i = 0; i < tagRefs.length; i++) {
+    // @ts-expect-error ignore
+    if (route.path === tagRefs[i].$props.to.path) {
+      // @ts-expect-error ignore
+      const el: HTMLElement = tagRefs[i].$el
+      const offsetWidth = el.offsetWidth
+      const offsetLeft = el.offsetLeft
+      const { scrollbarRefWidth } = getWidth()
+      // 当前 tag 在可视区域左边时
+      if (offsetLeft < currentScrollLeft) {
+        const distance = currentScrollLeft - offsetLeft
+        scrollTo("left", distance)
+        return
+      }
+      // 当前 tag 在可视区域右边时
+      const width = scrollbarRefWidth + currentScrollLeft - offsetWidth
+      if (offsetLeft > width) {
+        const distance = offsetLeft - width
+        scrollTo("right", distance)
+        return
+      }
+    }
+  }
+}
+
+// 监听路由变化，移动到目标位置
+listenerRouteChange(() => {
+  nextTick(moveTo)
+})
+</script>
+
+<template>
+  <div class="scroll-container">
+    <el-tooltip content="向左滚动标签（超出最大宽度可点击）">
+      <el-icon class="arrow left" @click="scrollTo('left')">
+        <ArrowLeft />
+      </el-icon>
+    </el-tooltip>
+    <el-scrollbar ref="scrollbarRef" @wheel.passive="wheelScroll" @scroll="scroll">
+      <div ref="scrollbarContentRef" class="scrollbar-content">
+        <slot />
+      </div>
+    </el-scrollbar>
+    <el-tooltip content="向右滚动标签（超出最大宽度可点击）">
+      <el-icon class="arrow right" @click="scrollTo('right')">
+        <ArrowRight />
+      </el-icon>
+    </el-tooltip>
+    <Screenfull v-if="settingsStore.showScreenfull" :content="true" class="screenfull" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.scroll-container {
+  height: 100%;
+  user-select: none;
+  display: flex;
+  justify-content: space-between;
+  .arrow {
+    width: 40px;
+    height: 100%;
+    font-size: 18px;
+    cursor: pointer;
+    &.left {
+      box-shadow: 5px 0 5px -6px var(--el-border-color-darker);
+    }
+    &.right {
+      box-shadow: -5px 0 5px -6px var(--el-border-color-darker);
+    }
+  }
+  .el-scrollbar {
+    flex: 1;
+    // 防止换行（超出宽度时，显示滚动条）
+    white-space: nowrap;
+    .scrollbar-content {
+      display: inline-block;
+    }
+  }
+  .screenfull {
+    width: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+  }
+}
+</style>
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				`export type CurrentUserResponseData = ApiResponseData<{ username: string, roles: string[] }>`
				`@ -0,0 +1 @@`
				<svg t="1651118937898" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8601" width="200" height="200"><path d="M924.8 385.6c-22.6-53.4-54.9-101.3-96-142.4-41.1-41.1-89-73.4-142.4-96C631.1 123.8 572.5 112 512 112s-119.1 11.8-174.4 35.2c-53.4 22.6-101.3 54.9-142.4 96-41.1 41.1-73.4 89-96 142.4C75.8 440.9 64 499.5 64 560c0 132.7 58.3 257.7 159.9 343.1l1.7 1.4c5.8 4.8 13.1 7.5 20.6 7.5h531.7c7.5 0 14.8-2.7 20.6-7.5l1.7-1.4C901.7 817.7 960 692.7 960 560c0-60.5-11.9-119.1-35.2-174.4zM761.4 836H262.6C184.5 765.5 140 665.6 140 560c0-99.4 38.7-192.8 109-263 70.3-70.3 163.7-109 263-109 99.4 0 192.8 38.7 263 109 70.3 70.3 109 163.7 109 263 0 105.6-44.5 205.5-122.6 276z" p-id="8602"></path><path d="M623.5 421.5c-3.1-3.1-8.2-3.1-11.3 0L527.7 506c-18.7-5-39.4-0.2-54.1 14.5-21.9 21.9-21.9 57.3 0 79.2 21.9 21.9 57.3 21.9 79.2 0 14.7-14.7 19.5-35.4 14.5-54.1l84.5-84.5c3.1-3.1 3.1-8.2 0-11.3l-28.3-28.3zM490 320h44c4.4 0 8-3.6 8-8v-80c0-4.4-3.6-8-8-8h-44c-4.4 0-8 3.6-8 8v80c0 4.4 3.6 8 8 8zM750 538v44c0 4.4 3.6 8 8 8h80c4.4 0 8-3.6 8-8v-44c0-4.4-3.6-8-8-8h-80c-4.4 0-8 3.6-8 8zM762.7 340.8l-31.1-31.1c-3.1-3.1-8.2-3.1-11.3 0l-56.6 56.6c-3.1 3.1-3.1 8.2 0 11.3l31.1 31.1c3.1 3.1 8.2 3.1 11.3 0l56.6-56.6c3.1-3.1 3.1-8.2 0-11.3zM304.1 309.7c-3.1-3.1-8.2-3.1-11.3 0l-31.1 31.1c-3.1 3.1-3.1 8.2 0 11.3l56.6 56.6c3.1 3.1 8.2 3.1 11.3 0l31.1-31.1c3.1-3.1 3.1-8.2 0-11.3l-56.6-56.6zM262 530h-80c-4.4 0-8 3.6-8 8v44c0 4.4 3.6 8 8 8h80c4.4 0 8-3.6 8-8v-44c0-4.4-3.6-8-8-8z" p-id="8603"></path></svg>
				`@ -0,0 +1 @@`
				<svg t="1661153147729" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3352" width="200" height="200"><path d="M704 864v-96c0-54.4 41.6-96 96-96h96c19.2 0 32-12.8 32-32s-12.8-32-32-32h-96c-89.6 0-160 70.4-160 160v96c0 19.2 12.8 32 32 32s32-12.8 32-32z m-64-704v96c0 89.6 70.4 160 160 160h96c19.2 0 32-12.8 32-32s-12.8-32-32-32h-96c-54.4 0-96-41.6-96-96v-96c0-19.2-12.8-32-32-32s-32 12.8-32 32z m-256 704v-96c0-89.6-70.4-160-160-160h-96c-19.2 0-32 12.8-32 32s12.8 32 32 32h96c54.4 0 96 41.6 96 96v96c0 19.2 12.8 32 32 32s32-12.8 32-32z m-64-704v96c0 54.4-41.6 96-96 96h-96c-19.2 0-32 12.8-32 32s12.8 32 32 32h96c89.6 0 160-70.4 160-160v-96c0-19.2-12.8-32-32-32s-32 12.8-32 32z" p-id="3353"></path></svg>
				`@ -0,0 +1 @@`
				<svg t="1661151768669" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3212" width="200" height="200"><path d="M192 384v-96c0-54.4 41.6-96 96-96h96c19.2 0 32-12.8 32-32s-12.8-32-32-32h-96c-89.6 0-160 70.4-160 160v96c0 19.2 12.8 32 32 32s32-12.8 32-32z m-64 256v96c0 89.6 70.4 160 160 160h96c19.2 0 32-12.8 32-32s-12.8-32-32-32h-96c-54.4 0-96-41.6-96-96v-96c0-19.2-12.8-32-32-32s-32 12.8-32 32z m768-256v-96c0-89.6-70.4-160-160-160h-96c-19.2 0-32 12.8-32 32s12.8 32 32 32h96c54.4 0 96 41.6 96 96v96c0 19.2 12.8 32 32 32s32-12.8 32-32z m-64 256v96c0 54.4-41.6 96-96 96h-96c-19.2 0-32 12.8-32 32s12.8 32 32 32h96c89.6 0 160-70.4 160-160v-96c0-19.2-12.8-32-32-32s-32 12.8-32 32z" p-id="3213"></path></svg>
				`@ -0,0 +1 @@`
				`<svg width="15" height="15" aria-label="Arrow down" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M7.5 3.5v8M10.5 8.5l-3 3-3-3"></path></g></svg>`
				`@ -0,0 +1 @@`
				<svg width="15" height="15" aria-label="Escape key" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M13.6167 8.936c-.1065.3583-.6883.962-1.4875.962-.7993 0-1.653-.9165-1.653-2.1258v-.5678c0-1.2548.7896-2.1016 1.653-2.1016.8634 0 1.3601.4778 1.4875 1.0724M9 6c-.1352-.4735-.7506-.9219-1.46-.8972-.7092.0246-1.344.57-1.344 1.2166s.4198.8812 1.3445.9805C8.465 7.3992 8.968 7.9337 9 8.5c.032.5663-.454 1.398-1.4595 1.398C6.6593 9.898 6 9 5.963 8.4851m-1.4748.5368c-.2635.5941-.8099.876-1.5443.876s-1.7073-.6248-1.7073-2.204v-.4603c0-1.0416.721-2.131 1.7073-2.131.9864 0 1.6425 1.031 1.5443 2.2492h-2.956"></path></g></svg>
				`@ -0,0 +1 @@`
				<svg t="1691398959507" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2431" width="200" height="200"><path d="M862.609 816.955L726.44 680.785l-0.059-0.056a358.907 358.907 0 0 0 56.43-91.927c18.824-44.507 28.369-91.767 28.369-140.467 0-48.701-9.545-95.96-28.369-140.467-18.176-42.973-44.19-81.56-77.319-114.689-33.13-33.129-71.717-59.144-114.69-77.32-44.507-18.825-91.767-28.37-140.467-28.37-48.701 0-95.96 9.545-140.467 28.37-42.973 18.176-81.56 44.19-114.689 77.32-33.13 33.129-59.144 71.717-77.32 114.689-18.825 44.507-28.37 91.767-28.37 140.467 0 48.7 9.545 95.96 28.37 140.467 18.176 42.974 44.19 81.561 77.32 114.69 33.129 33.129 71.717 59.144 114.689 77.319 44.507 18.824 91.767 28.369 140.467 28.369 48.7 0 95.96-9.545 140.467-28.369 32.78-13.864 62.997-32.303 90.197-54.968 0.063 0.064 0.122 0.132 0.186 0.195l136.169 136.17c6.25 6.25 14.438 9.373 22.628 9.373 8.188 0 16.38-3.125 22.627-9.372 12.496-12.496 12.496-32.758 0-45.254z m-412.274-69.466c-79.907 0-155.031-31.118-211.534-87.62-56.503-56.503-87.62-131.627-87.62-211.534s31.117-155.031 87.62-211.534c56.502-56.503 131.626-87.62 211.534-87.62s155.031 31.117 211.534 87.62c56.502 56.502 87.62 131.626 87.62 211.534s-31.118 155.031-87.62 211.534c-56.503 56.502-131.627 87.62-211.534 87.62z" p-id="2432"></path></svg>