diff --git a/backend/app/api/v1/module_system/auth/controller.py b/backend/app/api/v1/module_system/auth/controller.py
index 080c3e6a..84d0e380 100644
--- a/backend/app/api/v1/module_system/auth/controller.py
+++ b/backend/app/api/v1/module_system/auth/controller.py
@@ -1,13 +1,17 @@
+import json
+import secrets
 from typing import Annotated
 
-from fastapi import APIRouter, Depends, Request
-from fastapi.responses import JSONResponse
+from fastapi import APIRouter, Depends, Path, Query, Request
+from fastapi.responses import JSONResponse, RedirectResponse
 from redis.asyncio.client import Redis
 from sqlalchemy.ext.asyncio import AsyncSession
 
 from app.common.response import ErrorResponse, SuccessResponse
 from app.config.setting import settings
 from app.core.dependencies import db_getter, get_current_user, redis_getter
+from app.core.exceptions import CustomException
+from app.core.redis_crud import RedisCURD
 from app.core.logger import log
 from app.core.router_class import OperationLogRoute
 from app.core.security import CustomOAuth2PasswordRequestForm
@@ -20,6 +24,15 @@ from .schema import (
     LogoutPayloadSchema,
     RefreshTokenPayloadSchema,
 )
+from .oauth_service import (
+    STATE_PREFIX,
+    build_authorize_url,
+    complete_oauth_login,
+    oauth_service_error_redirect,
+    oauth_service_frontend_redirect_from_token,
+    save_oauth_state,
+    _callback_url,
+)
 from .service import AutoLoginService, CaptchaService, LoginService
 
 AuthRouter = APIRouter(route_class=OperationLogRoute, prefix="/auth", tags=["认证授权"])
@@ -236,3 +249,100 @@ async def auto_login_controller(
     )
     log.info("用户免登录成功")
     return SuccessResponse(data=login_token.model_dump(), msg="登录成功")
+
+
+@AuthRouter.get(
+    "/oauth/{provider}/login",
+    summary="第三方OAuth跳转",
+    description="浏览器重定向到微信/GitHub/Gitee/QQ 授权页；redirect_uri 为授权完成后回到前端的登录页地址（如 http://localhost:5173/login）。",
+)
+async def oauth_login_redirect_controller(
+    request: Request,
+    redis: Annotated[Redis, Depends(redis_getter)],
+    provider: Annotated[str, Path(description="wechat | qq | github | gitee")],
+    redirect_uri: Annotated[
+        str | None,
+        Query(description="OAuth 完成后浏览器回到的前端登录页完整 URL"),
+    ] = None,
+) -> RedirectResponse:
+    allowed = {"wechat", "qq", "github", "gitee"}
+    fe = redirect_uri or settings.OAUTH_FRONTEND_FALLBACK
+    if provider not in allowed:
+        return RedirectResponse(
+            url=oauth_service_error_redirect(fe, "不支持的 OAuth 渠道"),
+            status_code=302,
+        )
+    if not redirect_uri:
+        return RedirectResponse(
+            url=oauth_service_error_redirect(fe, "缺少 redirect_uri 参数"),
+            status_code=302,
+        )
+    try:
+        state = secrets.token_urlsafe(32)
+        await save_oauth_state(
+            redis=redis,
+            state=state,
+            provider=provider,
+            frontend_redirect=redirect_uri,
+        )
+        cb = _callback_url(request, provider)
+        url = build_authorize_url(provider=provider, callback_url=cb, state=state)
+        return RedirectResponse(url=url, status_code=302)
+    except CustomException as e:
+        return RedirectResponse(
+            url=oauth_service_error_redirect(redirect_uri, e.msg),
+            status_code=302,
+        )
+
+
+@AuthRouter.get(
+    "/oauth/{provider}/callback",
+    summary="第三方OAuth回调",
+    include_in_schema=False,
+)
+async def oauth_callback_controller(
+    request: Request,
+    redis: Annotated[Redis, Depends(redis_getter)],
+    db: Annotated[AsyncSession, Depends(db_getter)],
+    provider: Annotated[str, Path()],
+    code: Annotated[str | None, Query()] = None,
+    state: Annotated[str | None, Query()] = None,
+) -> RedirectResponse:
+    fe_fallback = settings.OAUTH_FRONTEND_FALLBACK
+
+    async def resolve_frontend() -> str:
+        if not state:
+            return fe_fallback
+        raw = await RedisCURD(redis).get(f"{STATE_PREFIX}{state}")
+        if not raw:
+            return fe_fallback
+        if isinstance(raw, bytes):
+            raw = raw.decode("utf-8")
+        try:
+            payload = json.loads(raw)
+            return str(payload.get("frontend_redirect") or fe_fallback).strip() or fe_fallback
+        except json.JSONDecodeError:
+            return fe_fallback
+
+    if provider not in {"wechat", "qq", "github", "gitee"}:
+        url = oauth_service_error_redirect(await resolve_frontend(), "不支持的 OAuth 渠道")
+        return RedirectResponse(url=url, status_code=302)
+    if not code or not state:
+        url = oauth_service_error_redirect(
+            await resolve_frontend(), "授权被取消或参数不完整"
+        )
+        return RedirectResponse(url=url, status_code=302)
+    try:
+        token, fe = await complete_oauth_login(
+            request=request,
+            redis=redis,
+            db=db,
+            provider=provider,
+            code=code,
+            state=state,
+        )
+        success_url = oauth_service_frontend_redirect_from_token(fe, token)
+        return RedirectResponse(url=success_url, status_code=302)
+    except CustomException as e:
+        fe = await resolve_frontend()
+        return RedirectResponse(url=oauth_service_error_redirect(fe, e.msg), status_code=302)
diff --git a/backend/app/api/v1/module_system/auth/oauth_service.py b/backend/app/api/v1/module_system/auth/oauth_service.py
new file mode 100644
index 00000000..6e1b9ff3
--- /dev/null
+++ b/backend/app/api/v1/module_system/auth/oauth_service.py
@@ -0,0 +1,437 @@
+"""
+第三方 OAuth2 登录（微信开放平台扫码、QQ、GitHub、Gitee）。
+
+各平台需在开放平台登记「授权回调域 / redirect_uri」为：
+  {API}/system/auth/oauth/{provider}/callback
+例如：https://your-domain.com/api/v1/system/auth/oauth/github/callback
+
+环境变量见 Settings 中 OAUTH_* 字段。
+"""
+
+from __future__ import annotations
+
+import json
+import secrets
+from typing import Any, Literal, Tuple
+from urllib.parse import quote, urlencode
+
+import httpx
+from fastapi import Request
+from redis.asyncio.client import Redis
+from sqlalchemy.ext.asyncio import AsyncSession
+
+from app.api.v1.module_system.auth.schema import AuthSchema
+from app.api.v1.module_system.user.crud import UserCRUD
+from app.api.v1.module_system.user.model import UserModel
+from app.api.v1.module_system.user.schema import UserRegisterSchema
+from app.api.v1.module_system.user.service import UserService
+from app.config.setting import settings
+from app.core.exceptions import CustomException
+from app.core.logger import log
+from app.core.redis_crud import RedisCURD
+from .schema import JWTOutSchema
+from .service import LoginService
+
+OAuthProvider = Literal["wechat", "qq", "github", "gitee"]
+
+STATE_PREFIX = "oauth_state:"
+STATE_TTL_SECONDS = 600
+
+
+def _callback_url(request: Request, provider: OAuthProvider) -> str:
+    root = str(request.base_url).rstrip("/")
+    return f"{root}/system/auth/oauth/{provider}/callback"
+
+
+def _frontend_error_redirect(frontend_base: str, message: str) -> str:
+    sep = "&" if "?" in frontend_base else "?"
+    return f"{frontend_base}{sep}oauth_error={quote(message, safe='')}"
+
+
+def _frontend_success_redirect(
+    frontend_base: str, access_token: str, refresh_token: str, token_type: str
+) -> str:
+    q = urlencode(
+        {
+            "access_token": access_token,
+            "refresh_token": refresh_token,
+            "token_type": token_type,
+        }
+    )
+    sep = "&" if "?" in frontend_base else "?"
+    return f"{frontend_base}{sep}{q}"
+
+
+def _require_credentials(provider: OAuthProvider) -> tuple[str, str]:
+    if provider == "github":
+        cid, sec = settings.OAUTH_GITHUB_CLIENT_ID, settings.OAUTH_GITHUB_CLIENT_SECRET
+    elif provider == "gitee":
+        cid, sec = settings.OAUTH_GITEE_CLIENT_ID, settings.OAUTH_GITEE_CLIENT_SECRET
+    elif provider == "wechat":
+        cid, sec = settings.OAUTH_WECHAT_OPEN_APP_ID, settings.OAUTH_WECHAT_OPEN_APP_SECRET
+    elif provider == "qq":
+        cid, sec = settings.OAUTH_QQ_APP_ID, settings.OAUTH_QQ_APP_SECRET
+    else:
+        raise CustomException(msg="不支持的 OAuth 渠道")
+    if not cid or not sec:
+        raise CustomException(msg=f"{provider} OAuth 未配置（客户端密钥为空）")
+    return cid, sec
+
+
+def build_authorize_url(
+    *,
+    provider: OAuthProvider,
+    callback_url: str,
+    state: str,
+) -> str:
+    """构造跳转至第三方授权页的 URL。"""
+    cid, _ = _require_credentials(provider)
+
+    if provider == "github":
+        params = {
+            "client_id": cid,
+            "redirect_uri": callback_url,
+            "scope": "user:email",
+            "state": state,
+        }
+        return "https://github.com/login/oauth/authorize?" + urlencode(params)
+
+    if provider == "gitee":
+        params = {
+            "client_id": cid,
+            "redirect_uri": callback_url,
+            "response_type": "code",
+            "state": state,
+        }
+        return "https://gitee.com/oauth/authorize?" + urlencode(params)
+
+    if provider == "wechat":
+        params = {
+            "appid": cid,
+            "redirect_uri": callback_url,
+            "response_type": "code",
+            "scope": "snsapi_login",
+            "state": state,
+        }
+        return "https://open.weixin.qq.com/connect/qrconnect?" + urlencode(params) + "#wechat_redirect"
+
+    if provider == "qq":
+        params = {
+            "response_type": "code",
+            "client_id": cid,
+            "redirect_uri": callback_url,
+            "state": state,
+            "scope": "get_user_info",
+        }
+        return "https://graph.qq.com/oauth2.0/authorize?" + urlencode(params)
+
+    raise CustomException(msg="不支持的 OAuth 渠道")
+
+
+async def _http_json(method: str, url: str, **kwargs: Any) -> Any:
+    timeout = getattr(settings, "HTTPX_DEFAULT_TIMEOUT", 15.0)
+    async with httpx.AsyncClient(timeout=timeout) as client:
+        r = await client.request(method, url, **kwargs)
+        r.raise_for_status()
+        try:
+            return r.json()
+        except json.JSONDecodeError:
+            text = r.text
+            log.error(f"OAuth 非 JSON 响应: {text[:500]}")
+            raise CustomException(msg="OAuth 接口返回异常")
+
+
+async def _http_text(method: str, url: str, **kwargs: Any) -> str:
+    timeout = getattr(settings, "HTTPX_DEFAULT_TIMEOUT", 15.0)
+    async with httpx.AsyncClient(timeout=timeout) as client:
+        r = await client.request(method, url, **kwargs)
+        r.raise_for_status()
+        return r.text
+
+
+async def exchange_github_token(client_id: str, client_secret: str, code: str, redirect_uri: str) -> str:
+    data = await _http_json(
+        "POST",
+        "https://github.com/login/oauth/access_token",
+        headers={"Accept": "application/json"},
+        data={
+            "client_id": client_id,
+            "client_secret": client_secret,
+            "code": code,
+            "redirect_uri": redirect_uri,
+        },
+    )
+    if not isinstance(data, dict):
+        raise CustomException(msg="GitHub token 响应格式错误")
+    token = data.get("access_token")
+    if not token:
+        raise CustomException(msg=data.get("error_description") or "GitHub 换取令牌失败")
+    return str(token)
+
+
+async def exchange_gitee_token(client_id: str, client_secret: str, code: str, redirect_uri: str) -> str:
+    qs = urlencode(
+        {
+            "grant_type": "authorization_code",
+            "code": code,
+            "client_id": client_id,
+            "client_secret": client_secret,
+            "redirect_uri": redirect_uri,
+        }
+    )
+    data = await _http_json("GET", f"https://gitee.com/oauth/token?{qs}")
+    if not isinstance(data, dict):
+        raise CustomException(msg="Gitee token 响应格式错误")
+    token = data.get("access_token")
+    if not token:
+        raise CustomException(msg=data.get("error_description") or "Gitee 换取令牌失败")
+    return str(token)
+
+
+async def exchange_wechat_token(app_id: str, secret: str, code: str) -> tuple[str, str]:
+    qs = urlencode(
+        {
+            "appid": app_id,
+            "secret": secret,
+            "code": code,
+            "grant_type": "authorization_code",
+        }
+    )
+    data = await _http_json("GET", f"https://api.weixin.qq.com/sns/oauth2/access_token?{qs}")
+    if not isinstance(data, dict):
+        raise CustomException(msg="微信 token 响应格式错误")
+    token = data.get("access_token")
+    openid = data.get("openid")
+    if not token or not openid:
+        raise CustomException(msg=data.get("errmsg") or "微信换取令牌失败")
+    return str(token), str(openid)
+
+
+async def exchange_qq_token(client_id: str, client_secret: str, code: str, redirect_uri: str) -> tuple[str, str]:
+    qs = urlencode(
+        {
+            "grant_type": "authorization_code",
+            "client_id": client_id,
+            "client_secret": client_secret,
+            "code": code,
+            "redirect_uri": redirect_uri,
+        }
+    )
+    text = await _http_text("GET", f"https://graph.qq.com/oauth2.0/token?{qs}")
+    parts = dict(p.split("=", 1) for p in text.split("&") if "=" in p)
+    token = parts.get("access_token")
+    if not token:
+        raise CustomException(msg="QQ 换取 access_token 失败")
+    me = await _http_json(
+        "GET",
+        "https://graph.qq.com/oauth2.0/me",
+        params={"access_token": token, "fmt": "json"},
+    )
+    if not isinstance(me, dict):
+        raise CustomException(msg="QQ openid 响应格式错误")
+    openid = me.get("openid")
+    if not openid:
+        raise CustomException(msg="QQ 获取 openid 失败")
+    return str(token), str(openid)
+
+
+async def fetch_github_profile(access_token: str) -> tuple[str, str, str | None]:
+    headers = {"Authorization": f"Bearer {access_token}", "Accept": "application/json"}
+    user = await _http_json("GET", "https://api.github.com/user", headers=headers)
+    if not isinstance(user, dict):
+        raise CustomException(msg="GitHub 用户信息格式错误")
+    login = str(user.get("login") or "")
+    name = str(user.get("name") or login or "github")
+    email = user.get("email")
+    if not email:
+        emails = await _http_json("GET", "https://api.github.com/user/emails", headers=headers)
+        if isinstance(emails, list):
+            primary = next((e for e in emails if isinstance(e, dict) and e.get("primary")), None)
+            if primary:
+                email = primary.get("email")
+    return login, name, email
+
+
+async def fetch_gitee_profile(access_token: str) -> tuple[str, str, str | None]:
+    user = await _http_json(
+        "GET",
+        "https://gitee.com/api/v5/user",
+        params={"access_token": access_token},
+    )
+    if not isinstance(user, dict):
+        raise CustomException(msg="Gitee 用户信息格式错误")
+    login = str(user.get("login") or "")
+    name = str(user.get("name") or login)
+    email = user.get("email")
+    return login, name, email
+
+
+async def fetch_wechat_profile(access_token: str, openid: str) -> tuple[str, str]:
+    qs = urlencode({"access_token": access_token, "openid": openid, "lang": "zh_CN"})
+    user = await _http_json("GET", f"https://api.weixin.qq.com/sns/userinfo?{qs}")
+    if not isinstance(user, dict):
+        raise CustomException(msg="微信用户信息格式错误")
+    nickname = str(user.get("nickname") or "wechat")
+    unionid = user.get("unionid")
+    oid = unionid or openid
+    return str(oid), nickname
+
+
+async def fetch_qq_profile(access_token: str, app_id: str, openid: str) -> tuple[str, str]:
+    qs = urlencode(
+        {
+            "access_token": access_token,
+            "oauth_consumer_key": app_id,
+            "openid": openid,
+        }
+    )
+    user = await _http_json("GET", f"https://graph.qq.com/user/get_user_info?{qs}")
+    if not isinstance(user, dict):
+        raise CustomException(msg="QQ 用户信息格式错误")
+    if user.get("ret") not in (0, "0", None):
+        raise CustomException(msg=user.get("msg") or "QQ 用户信息失败")
+    nickname = str(user.get("nickname") or "qq")
+    return openid, nickname
+
+
+def _username_for_oauth(provider: OAuthProvider, unique_id: str) -> str:
+    """生成符合注册规则的登录名：oauth_{provider}_{id}。"""
+    raw = f"oauth_{provider}_{unique_id}"
+    raw = "".join(c if c.isalnum() or c in "_-." else "_" for c in raw)[:32]
+    if len(raw) < 3:
+        raw = (raw + "usr")[:32]
+    if not raw[0].isalpha():
+        raw = "o" + raw[:31]
+    return raw
+
+
+async def ensure_oauth_user(
+    *,
+    db: AsyncSession,
+    provider: OAuthProvider,
+    unique_id: str,
+    display_name: str,
+) -> UserModel:
+    auth = AuthSchema(db=db, user=None, check_data_scope=False)
+    username = _username_for_oauth(provider, unique_id)
+    existing = await UserCRUD(auth).get_by_username_crud(username=username)
+    if existing:
+        return existing
+
+    reg = UserRegisterSchema(
+        username=username,
+        password=secrets.token_urlsafe(24),
+        name=(display_name or username)[:32],
+        role_ids=list(settings.OAUTH_DEFAULT_ROLE_IDS),
+    )
+    await UserService.register_user_service(auth=auth, data=reg)
+    user = await UserCRUD(auth).get_by_username_crud(username=username)
+    if not user:
+        raise CustomException(msg="OAuth 注册失败")
+    log.info(f"OAuth 自动注册用户: {username} ({provider})")
+    return user
+
+
+async def complete_oauth_login(
+    *,
+    request: Request,
+    redis: Redis,
+    db: AsyncSession,
+    provider: OAuthProvider,
+    code: str,
+    state: str,
+) -> Tuple[JWTOutSchema, str]:
+    rc = RedisCURD(redis)
+    raw = await rc.get(f"{STATE_PREFIX}{state}")
+    if not raw:
+        raise CustomException(msg="登录状态已失效，请重试")
+    if isinstance(raw, bytes):
+        raw = raw.decode("utf-8")
+    payload = json.loads(raw)
+    if payload.get("provider") != provider:
+        raise CustomException(msg="OAuth 状态不匹配")
+
+    frontend = str(payload.get("frontend_redirect") or "").strip()
+    if not frontend:
+        raise CustomException(msg="缺少前端回调地址")
+
+    callback_url = _callback_url(request, provider)
+    cid, csec = _require_credentials(provider)
+
+    if provider == "github":
+        access = await exchange_github_token(cid, csec, code, callback_url)
+        login_k, name, _email = await fetch_github_profile(access)
+        uid = login_k
+    elif provider == "gitee":
+        access = await exchange_gitee_token(cid, csec, code, callback_url)
+        login_k, name, _email = await fetch_gitee_profile(access)
+        uid = login_k
+    elif provider == "wechat":
+        access, openid = await exchange_wechat_token(cid, csec, code)
+        uid, name = await fetch_wechat_profile(access, openid)
+    elif provider == "qq":
+        access, openid = await exchange_qq_token(cid, csec, code, callback_url)
+        uid, name = await fetch_qq_profile(access, cid, openid)
+    else:
+        raise CustomException(msg="不支持的 OAuth 渠道")
+
+    user = await ensure_oauth_user(db=db, provider=provider, unique_id=uid, display_name=name)
+    if user.status == "1":
+        raise CustomException(msg="用户已被停用")
+
+    user = await UserCRUD(AuthSchema(db=db, user=None, check_data_scope=False)).update_last_login_crud(
+        id=user.id
+    )
+    if not user:
+        raise CustomException(msg="用户不存在")
+
+    login_type = f"oauth_{provider}"
+    token = await LoginService.create_token_service(
+        request=request, redis=redis, user=user, login_type=login_type
+    )
+    await rc.delete(f"{STATE_PREFIX}{state}")
+    return token, frontend
+
+
+async def save_oauth_state(
+    *,
+    redis: Redis,
+    state: str,
+    provider: OAuthProvider,
+    frontend_redirect: str,
+) -> None:
+    rc = RedisCURD(redis)
+    ok = await rc.set(
+        f"{STATE_PREFIX}{state}",
+        json.dumps({"provider": provider, "frontend_redirect": frontend_redirect}),
+        expire=STATE_TTL_SECONDS,
+    )
+    if not ok:
+        raise CustomException(msg="缓存 OAuth 状态失败")
+
+
+def oauth_service_frontend_redirect_from_token(
+    frontend_base: str, token: JWTOutSchema
+) -> str:
+    return _frontend_success_redirect(
+        frontend_base,
+        token.access_token,
+        token.refresh_token,
+        token.token_type,
+    )
+
+
+def oauth_service_error_redirect(frontend_base: str, message: str) -> str:
+    return _frontend_error_redirect(frontend_base, message)
+
+
+__all__ = [
+    "OAuthProvider",
+    "STATE_PREFIX",
+    "build_authorize_url",
+    "complete_oauth_login",
+    "save_oauth_state",
+    "_callback_url",
+    "oauth_service_frontend_redirect_from_token",
+    "oauth_service_error_redirect",
+]
diff --git a/backend/app/config/setting.py b/backend/app/config/setting.py
index fe6d9ff5..35c29a33 100755
--- a/backend/app/config/setting.py
+++ b/backend/app/config/setting.py
@@ -120,6 +120,22 @@ class Settings(BaseSettings):
     CAPTCHA_FONT_SIZE: int = 32  # 字体大小
     CAPTCHA_FONT_PATH: str = "static/assets/font/Arial.ttf"  # 字体路径
 
+    # ================================================= #
+    # ***************** 第三方 OAuth 登录（可选）********* #
+    # ================================================= #
+    # 自动注册用户的默认角色 ID 列表（须与库中角色主键一致）
+    OAUTH_DEFAULT_ROLE_IDS: list[int] = [2]
+    # 回调异常时回跳的前端地址（与前端实际 /login 一致，含协议与端口）
+    OAUTH_FRONTEND_FALLBACK: str = "http://127.0.0.1:5173/login"
+    OAUTH_GITHUB_CLIENT_ID: str = ""
+    OAUTH_GITHUB_CLIENT_SECRET: str = ""
+    OAUTH_GITEE_CLIENT_ID: str = ""
+    OAUTH_GITEE_CLIENT_SECRET: str = ""
+    OAUTH_WECHAT_OPEN_APP_ID: str = ""
+    OAUTH_WECHAT_OPEN_APP_SECRET: str = ""
+    OAUTH_QQ_APP_ID: str = ""
+    OAUTH_QQ_APP_SECRET: str = ""
+
     # ================================================= #
     # ******************* 外部 HTTP（httpx）******************* #
     # ================================================= #
diff --git a/frontend/new-web/.editorconfig b/frontend/new-web/.editorconfig
new file mode 100644
index 00000000..00ee2de4
--- /dev/null
+++ b/frontend/new-web/.editorconfig
@@ -0,0 +1,15 @@
+# http://editorconfig.org
+root = true
+
+# 表示所有文件适用
+[*]
+charset = utf-8 # 设置文件字符集为 utf-8
+end_of_line = lf # 控制换行类型(lf | cr | crlf)
+indent_style = space # 缩进风格（tab | space）
+indent_size = 2 # 缩进大小
+insert_final_newline = true # 始终在文件末尾插入一个新行
+
+# 表示仅 md 文件适用以下规则
+[*.md]
+max_line_length = off # 关闭最大行长度限制
+trim_trailing_whitespace = false # 关闭末尾空格修剪
diff --git a/frontend/new-web/.env b/frontend/new-web/.env
index 3a67c6c5..4000d5b0 100755
--- a/frontend/new-web/.env
+++ b/frontend/new-web/.env
@@ -1,22 +1,28 @@
-# 【通用】环境变量
+# 【通用】环境变量 - 所有环境共享
 
-#  版本号
+# 应用版本号
 VITE_VERSION = 3.0.2
 
-# 端口号
-VITE_PORT = 3006
+# 开发服务器端口
+VITE_PORT = 5180
 
 # 应用部署基础路径（如部署在子目录 /admin，则设置为 /admin/）
 VITE_BASE_URL = /
 
-# 权限模式【 frontend 前端模式 / backend 后端模式 】
-VITE_ACCESS_MODE = frontend
+# 权限模式【 frontend 仅前端路由 / backend 仅后端菜单 / mixed 后端菜单+前端路由模块合并 】
+VITE_ACCESS_MODE = mixed
 
 # 跨域请求时是否携带 Cookie（开启前需确保后端支持）
 VITE_WITH_CREDENTIALS = false
 
-# 是否打开路由信息
+# 是否在控制台输出路由信息
 VITE_OPEN_ROUTE_INFO = false
 
 # 锁屏加密密钥
 VITE_LOCK_ENCRYPT_KEY = s3cur3k3y4adpro
+
+# 网络请求超时时间（毫秒）
+VITE_API_TIMEOUT = 60000
+
+# 代理前缀
+VITE_APP_BASE_API = /api/v1
diff --git a/frontend/new-web/.env.development b/frontend/new-web/.env.development
index 10cc209a..01c63815 100755
--- a/frontend/new-web/.env.development
+++ b/frontend/new-web/.env.development
@@ -1,13 +1,21 @@
-# 【开发】环境变量
+# 【开发】环境变量 - 覆盖通用配置
 
-# 应用部署基础路径（如部署在子目录 /admin，则设置为 /admin/）
-VITE_BASE_URL = /
+# 环境标识
+VITE_APP_ENV = development
 
-# API 请求基础路径（开发环境设置为 / 使用代理，生产环境设置为完整后端地址）
+# 项目名称
+VITE_APP_TITLE = FastAPI Admin
+
+# 浏览器侧同源前缀（与 Vite 代理配合时用 /，请求走 localhost:端口 + 代理）
 VITE_API_URL = /
 
-# 代理目标地址（开发环境通过 Vite 代理转发请求到此地址，解决跨域问题）
-VITE_API_PROXY_URL = https://m1.apifoxmock.com/m1/6400575-6097373-default
+# 代理目标：本机后端（若出现 ENOTFOUND，说明上面域名在当前网络/DNS 下不可解析，改用本地或可用地址）
+# VITE_API_BASE_URL = http://127.0.0.1:8000
+VITE_API_BASE_URL = https://service.fastapiadmin.com
 
-# Delete console
-VITE_DROP_CONSOLE = false
\ No newline at end of file
+# 是否删除控制台输出
+VITE_DROP_CONSOLE = false
+
+# WebSocket 端点（AI对话功能需要配置）
+# VITE_APP_WS_ENDPOINT = ws://localhost:8000
+VITE_APP_WS_ENDPOINT = wss://service.fastapiadmin.com
diff --git a/frontend/new-web/.env.production b/frontend/new-web/.env.production
index 89e0aaa2..e13a0191 100755
--- a/frontend/new-web/.env.production
+++ b/frontend/new-web/.env.production
@@ -1,10 +1,16 @@
-# 【生产】环境变量
+# 【生产】环境变量 - 覆盖通用配置
 
-# 应用部署基础路径（如部署在子目录 /admin，则设置为 /admin/）
-VITE_BASE_URL = /
+# 环境标识
+VITE_APP_ENV = production
 
-# API 地址前缀
-VITE_API_URL = https://m1.apifoxmock.com/m1/6400575-6097373-default
+# 项目名称
+VITE_APP_TITLE = FastAPI Admin
 
-# Delete console
-VITE_DROP_CONSOLE = true
\ No newline at end of file
+# API 请求基础路径（生产环境使用完整后端地址）
+VITE_API_BASE_URL = https://server.fastapiadmin.com
+
+# 是否删除控制台输出
+VITE_DROP_CONSOLE = true
+
+# WebSocket 端点（AI对话功能需要配置，生产环境建议使用 wss）
+VITE_APP_WS_ENDPOINT = wss://server.fastapiadmin.com
diff --git a/frontend/new-web/.gitignore b/frontend/new-web/.gitignore
index e48d2e97..da15d316 100755
--- a/frontend/new-web/.gitignore
+++ b/frontend/new-web/.gitignore
@@ -4,8 +4,25 @@ dist
 dist-ssr
 *.local
 .cursorrules
+.history
 
 # Auto-generated files
 src/types/import/auto-imports.d.ts
 src/types/import/components.d.ts
 .auto-import.json
+
+# Editor directories and files
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.local
+
+stats.html
+pnpm-lock.yaml
+package-lock.json
+.stylelintcache
+.eslintcache
+
+# docs and app directories are at frontend root, managed by frontend/.gitignore
diff --git a/frontend/new-web/.prettierignore b/frontend/new-web/.prettierignore
index 9e96efc3..44421a7a 100644
--- a/frontend/new-web/.prettierignore
+++ b/frontend/new-web/.prettierignore
@@ -1,3 +1,12 @@
-/node_modules/*
-/dist/*
-/src/main.ts
\ No newline at end of file
+dist
+node_modules
+public
+.husky
+.vscode
+.idea
+*.sh
+*.md
+
+src/assets
+stats.html
+pnpm-lock.yaml
diff --git a/frontend/new-web/.prettierrc b/frontend/new-web/.prettierrc
deleted file mode 100644
index f3d6ad50..00000000
--- a/frontend/new-web/.prettierrc
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "printWidth": 100,
-  "tabWidth": 2,
-  "useTabs": false,
-  "semi": false,
-  "vueIndentScriptAndStyle": true,
-  "singleQuote": true,
-  "quoteProps": "as-needed",
-  "bracketSpacing": true,
-  "trailingComma": "none",
-  "bracketSameLine": false,
-  "jsxSingleQuote": false,
-  "arrowParens": "always",
-  "insertPragma": false,
-  "requirePragma": false,
-  "proseWrap": "never",
-  "htmlWhitespaceSensitivity": "strict",
-  "endOfLine": "auto",
-  "rangeStart": 0
-}
diff --git a/frontend/new-web/.prettierrc.yaml b/frontend/new-web/.prettierrc.yaml
new file mode 100644
index 00000000..d9cf0c72
--- /dev/null
+++ b/frontend/new-web/.prettierrc.yaml
@@ -0,0 +1,41 @@
+# 在单参数箭头函数中始终添加括号
+arrowParens: "always"
+# JSX 多行元素的闭合标签另起一行
+bracketSameLine: false
+# 对象字面量中的括号之间添加空格
+bracketSpacing: true
+# 自动格式化嵌入的代码（如 Markdown 和 HTML 内的代码）
+embeddedLanguageFormatting: "auto"
+# 忽略 HTML 空白敏感度，将空白视为非重要内容
+htmlWhitespaceSensitivity: "ignore"
+# 不插入 @prettier 的 pragma 注释
+insertPragma: false
+# 在 JSX 中使用双引号
+jsxSingleQuote: false
+# 每行代码的最大长度限制为 100 字符
+printWidth: 100
+# 在 Markdown 中保留原有的换行格式
+proseWrap: "preserve"
+# 仅在必要时添加对象属性的引号
+quoteProps: "as-needed"
+# 不要求文件开头插入 @prettier 的 pragma 注释
+requirePragma: false
+# 在语句末尾添加分号
+semi: true
+# 使用双引号而不是单引号
+singleQuote: false
+# 缩进使用 2 个空格
+tabWidth: 2
+# 在多行元素的末尾添加逗号（ES5 支持的对象、数组等）
+trailingComma: "es5"
+# 使用空格而不是制表符缩进
+useTabs: false
+# Vue 文件中的 <script> 和 <style> 不增加额外的缩进
+vueIndentScriptAndStyle: false
+# 根据系统自动检测换行符
+endOfLine: "auto"
+# 对 HTML 文件应用特定格式化规则
+overrides:
+  - files: "*.html"
+    options:
+      parser: "html"
diff --git a/frontend/new-web/.stylelintignore b/frontend/new-web/.stylelintignore
index 476ea45c..f3e9850f 100644
--- a/frontend/new-web/.stylelintignore
+++ b/frontend/new-web/.stylelintignore
@@ -3,7 +3,9 @@ node_modules
 public
 .husky
 .vscode
+.idea
+*.sh
+*.md
 
-src/components/Layout/MenuLeft/index.vue
 src/assets
-stats.html
\ No newline at end of file
+stats.html
diff --git a/frontend/new-web/.stylelintrc.cjs b/frontend/new-web/.stylelintrc.cjs
index 9dbea0b9..222b3619 100644
--- a/frontend/new-web/.stylelintrc.cjs
+++ b/frontend/new-web/.stylelintrc.cjs
@@ -1,82 +1,60 @@
 module.exports = {
   // 继承推荐规范配置
   extends: [
-    'stylelint-config-standard',
-    'stylelint-config-recommended-scss',
-    'stylelint-config-recommended-vue/scss',
-    'stylelint-config-html/vue',
-    'stylelint-config-recess-order'
+    "stylelint-config-standard",
+    "stylelint-config-recommended",
+    "stylelint-config-recommended-scss",
+    "stylelint-config-recommended-vue/scss",
+    "stylelint-config-html/vue",
+    "stylelint-config-recess-order",
+  ],
+  plugins: [
+    "stylelint-prettier", // 统一代码风格，格式冲突时以 Prettier 规则为准
   ],
   // 指定不同文件对应的解析器
   overrides: [
     {
-      files: ['**/*.{vue,html}'],
-      customSyntax: 'postcss-html'
+      files: ["**/*.{vue,html}"],
+      customSyntax: "postcss-html",
     },
     {
-      files: ['**/*.{css,scss}'],
-      customSyntax: 'postcss-scss'
-    }
+      files: ["**/*.{css,scss}"],
+      customSyntax: "postcss-scss",
+    },
   ],
   // 自定义规则
   rules: {
-    'import-notation': 'string', // 指定导入CSS文件的方式("string"|"url")
-    'selector-class-pattern': null, // 选择器类名命名规则
-    'custom-property-pattern': null, // 自定义属性命名规则
-    'keyframes-name-pattern': null, // 动画帧节点样式命名规则
-    'no-descending-specificity': null, // 允许无降序特异性
-    'no-empty-source': null, // 允许空样式
-    'property-no-vendor-prefix': null, // 允许属性前缀
-    // 允许 global 、export 、deep伪类
-    'selector-pseudo-class-no-unknown': [
+    "prettier/prettier": true, // 强制执行 Prettier 格式化规则（需配合 .prettierrc 配置文件）
+    "declaration-property-value-no-unknown": null, // 允许非常规数值格式 ,如 height: calc(100% - 50)
+    // Tailwind CSS v4 使用 @reference 引入主题而不注入样式，需放行
+    "scss/at-rule-no-unknown": [
       true,
       {
-        ignorePseudoClasses: ['global', 'export', 'deep']
-      }
+        ignoreAtRules: ["reference"],
+      },
+    ],
+    "import-notation": "string", // 指定导入CSS文件的方式("string"|"url")
+    "selector-class-pattern": null, // 选择器类名命名规则
+    "custom-property-pattern": null, // 自定义属性命名规则
+    "keyframes-name-pattern": null, // 动画帧节点样式命名规则
+    "no-descending-specificity": null, // 允许无降序特异性
+    "no-empty-source": null, // 允许空样式
+    "property-no-vendor-prefix": null, // 允许属性前缀
+    // 允许 global 、export 、deep伪类
+    "selector-pseudo-class-no-unknown": [
+      true,
+      {
+        ignorePseudoClasses: ["global", "export", "deep"],
+      },
     ],
     // 允许未知属性
-    'property-no-unknown': [
+    "property-no-unknown": [
       true,
       {
-        ignoreProperties: []
-      }
+        ignoreProperties: [],
+      },
     ],
     // 允许未知规则
-    'at-rule-no-unknown': [
-      true,
-      {
-        ignoreAtRules: [
-          'apply',
-          'use',
-          'mixin',
-          'include',
-          'extend',
-          'each',
-          'if',
-          'else',
-          'for',
-          'while',
-          'reference'
-        ]
-      }
-    ],
-    'scss/at-rule-no-unknown': [
-      true,
-      {
-        ignoreAtRules: [
-          'apply',
-          'use',
-          'mixin',
-          'include',
-          'extend',
-          'each',
-          'if',
-          'else',
-          'for',
-          'while',
-          'reference'
-        ]
-      }
-    ]
-  }
-}
+    "at-rule-no-unknown": null, // 禁用默认的未知 at-rule 检查,
+  },
+};
diff --git a/frontend/new-web/README.md b/frontend/new-web/README.md
index a1f46760..f517534a 100755
--- a/frontend/new-web/README.md
+++ b/frontend/new-web/README.md
@@ -1,104 +1,51 @@
-<img  src="https://www.qiniu.lingchen.kim/github-cover-light6.webp" />
+# frontend
 
-<br />
-<h1 align="center">Art Design Pro</h1>
-<p align="center">A backend system template that combines design aesthetics with efficient development, helping you quickly build professional-grade applications</p>
-<div align="center">English | <a href="./README.zh-CN.md">简体中文</a></div>
+## 项目结构
 
-<br />
-<div align="center">
+```sh
+FastapiAdmin/frontend/new-web
+├─ docs                 # 项目文档工程
+├─ public               # 静态资源文件
+│  └─ docs              # 帮助文档模块
+├─ src                  # 源代码
+│  ├─ api               # 接口文件
+│  ├─ assets            # 静态资源文件
+│  ├─ components        # 组件模块
+│  ├─ constants         # 常量模块
+│  ├─ lang              # 语言模块
+│  ├─ layouts           # 布局模块
+│  ├─ plugins           # 插件模块
+│  ├─ router            # 路由模块
+│  ├─ store             # 状态管理模块
+│  ├─ styles            # 样式模块
+│  ├─ types             # 类型模块
+│  ├─ utils             # 工具模块
+│  ├─ view              # 视图模块
+│  ├─ App.vue           # 根组件
+│  ├─ main.js           # 入口文件
+│  └─ settings.js       # 全局样式文件
+├─ .env.development     # 项目开发环境配置
+├─ .env.production      # 项目生产环境配置
+├─ index.html           # 模板文件
+├─ package.json         # 项目依赖文件
+├─ tsconfig.json        # ts配置文件
+├─ uno.config.json      # uno配置文件
+├─ vite.config.js       # vite服务配置文件
+└─ README.md            # 项目说明文档
 
-[![license](https://img.shields.io/badge/license-MIT-green.svg)](./LICENSE) [![github stars](https://img.shields.io/github/stars/Daymychen/art-design-pro)](https://github.com/Daymychen/art-design-pro/stargazers) [![github forks](https://img.shields.io/github/forks/Daymychen/art-design-pro)](https://github.com/Daymychen/art-design-pro/network/members)
+```
 
-</div>
-<br />
+## 快速开始
 
-## What makes this project special?
-
-**Interface Design**: Modern UI design with smooth interactions, focusing on user experience and visual design
-
-**Quick Start**: Clean architecture + comprehensive documentation, easy for backend developers to use
-
-**Rich Components**: Built-in high-quality components for data display, forms, and more to meet different business scenarios
-
-**Smooth Interactions**: Button clicks, theme switching, page transitions, chart animations - experience comparable to commercial products
-
-**Efficient Development**: Built-in practical APIs like useTable and ArtForm to significantly improve development efficiency
-
-**Clean Scripts**: Built-in one-click cleanup script to quickly remove demo data and get a ready-to-develop base project
-
-## Tech Stack
-
-Development Framework: Vue3, TypeScript, Vite, Element-Plus, Tailwind CSS
-
-Code Standards: Eslint, Prettier, Stylelint, Husky, Lint-staged, cz-git
-
-## Preview
-
-<kbd><img src="https://www.qiniu.lingchen.kim/github-c1.webp" alt="Light Theme"/></kbd>
-
-<kbd><img src="https://www.qiniu.lingchen.kim/github-c2.webp" alt="Light Theme"/></kbd>
-
-<kbd><img src="https://www.qiniu.lingchen.kim/github-c4.webp" alt="Dark Theme"/></kbd>
-
-<kbd><img src="https://www.qiniu.lingchen.kim/github-c5.webp" alt="Dark Theme"/></kbd>
-
-## Quick Access
-
-[Live Demo](https://www.artd.pro) | [Official Documentation](https://www.artd.pro/docs) | [Changelog](./CHANGELOG.en.md)
-
-## Installation & Setup
-
-```bash
-# Install dependencies
+```sh
+# 进入前端工程目录
+cd frontend
+# 安装依赖
 pnpm install
-
-# If pnpm install fails, try using the command below
-pnpm install --ignore-scripts
-
-# Start local development environment
-pnpm dev
-
-# Build for production
-pnpm build
+# 启动前端服务
+pnpm run dev
+# 构建前端, 生成 `frontend/dist` 目录
+pnpm run build
+# 运行命令，查看未用到的依赖
+depcheck
 ```
-
-## Clean Version
-
-The project includes a cleanup script to quickly remove demo data and provide developers with a ready-to-develop base project
-
-```bash
-pnpm clean:dev
-```
-
-## Technical Support
-
-QQ Group: <a href="https://qm.qq.com/cgi-bin/qm/qr?k=Gg6yzZLFaNgmRhK0T5Qcjf7-XcAFWWXm&jump_from=webapi&authKey=YpRKVJQyFKYbGTiKw0GJ/YQXnNF+GdXNZC5beQQqnGZTvuLlXoMO7nw5fNXvmVhA">1038930070</a> (Click the link to join the group chat)
-
-## Browser Compatibility
-
-Supports modern mainstream browsers including Chrome, Safari, Firefox, and more.
-
-## Contributing
-
-We sincerely welcome and appreciate the support of every contributor! Whether you have new ideas, feature suggestions, or code optimizations, you can participate in the following ways:
-
-Submit Pull Requests: Share your code and help the project grow.
-
-Create GitHub Issues: Provide bug feedback or new feature suggestions to help us improve together.
-
-Every contribution you make takes this project one step further! Come join our open source community!
-
-## Continuous Optimization & Extension
-
-The project maintains active updates, supports the latest frontend tech stack, is compatible with mainstream frameworks, and ensures long-term stability and extensibility. Community-driven feedback mechanisms allow your needs to be quickly integrated into project iterations.
-
-## Donation
-
-If you feel this project has reduced your development costs and solved problems in your work/life, you can support us through the following ways:
-
-<img src="https://www.qiniu.lingchen.kim/%E7%BB%84%202%402x%202.png" alt="Donation QR Code"/>
-
-## Star History
-
-[![Star History Chart](https://api.star-history.com/svg?repos=Daymychen/art-design-pro&type=Date)](https://www.star-history.com/#Daymychen/art-design-pro&Date)
diff --git a/frontend/new-web/README.zh-CN.md b/frontend/new-web/README.zh-CN.md
deleted file mode 100644
index aad3c546..00000000
--- a/frontend/new-web/README.zh-CN.md
+++ /dev/null
@@ -1,104 +0,0 @@
-<img  src="https://www.qiniu.lingchen.kim/github-cover-light6.webp" />
-
-<br />
-<h1 align="center">Art Design Pro</h1>
-<p align="center">一款兼具设计美学与高效开发的后台系统模版，助你快速构建专业级应用</p>
-<div align="center">简体中文 | <a href="./README.md">English</a></div>
-
-<br />
-<div align="center">
-
-[![license](https://img.shields.io/badge/license-MIT-green.svg)](./LICENSE) [![github stars](https://img.shields.io/github/stars/Daymychen/art-design-pro)](https://github.com/Daymychen/art-design-pro/stargazers) [![github forks](https://img.shields.io/github/forks/Daymychen/art-design-pro)](https://github.com/Daymychen/art-design-pro/network/members)
-
-</div>
-<br />
-
-## 这个项目有什么特别的呢？
-
-**界面设计**：现代化 UI 设计，流畅交互，以用户体验与视觉设计为核心
-
-**极速上手**：简洁架构 + 完整文档，后端开发者也能轻松使用
-
-**丰富组件**：内置数据展示、表单等多种高质量组件，满足不同业务场景的需求
-
-**丝滑交互**：按钮点击、主题切换、页面过渡、图表动画，体验媲美商业产品
-
-**高效开发**：内置 useTable、ArtForm 等实用 API，显著提升开发效率
-
-**精简脚本**：内置一键清理脚本，可快速清理演示数据，立即得到可开发的基础项目
-
-## 技术栈
-
-开发框架：Vue3、TypeScript、Vite、Element-Plus、Tailwind CSS
-
-代码规范：Eslint、Prettier、Stylelint、Husky、Lint-staged、cz-git
-
-## 预览
-
-<kbd><img src="https://www.qiniu.lingchen.kim/github-c1.webp" alt="浅色主题"/></kbd>
-
-<kbd><img src="https://www.qiniu.lingchen.kim/github-c2.webp" alt="浅色主题"/></kbd>
-
-<kbd><img src="https://www.qiniu.lingchen.kim/github-c4.webp" alt="暗黑主题"/></kbd>
-
-<kbd><img src="https://www.qiniu.lingchen.kim/github-c5.webp" alt="暗黑主题"/></kbd>
-
-## 快速访问
-
-[演示地址](https://www.artd.pro) | [官方文档](https://www.artd.pro/docs) | [更新日志](./CHANGELOG.md)
-
-## 安装运行
-
-```bash
-# 安装依赖
-pnpm install
-
-# 如果 pnpm install 安装失败，尝试使用下面的命令安装依赖
-pnpm install --ignore-scripts
-
-# 本地开发环境启动
-pnpm dev
-
-# 生产环境打包
-pnpm build
-```
-
-## 精简版本
-
-项目内置精简脚本，可快速移除项目中的演示数据，让开发者获得一个可快速开发的基础项目
-
-```bash
-pnpm clean:dev
-```
-
-## 技术支持
-
-QQ群：<a href="https://qm.qq.com/cgi-bin/qm/qr?k=Gg6yzZLFaNgmRhK0T5Qcjf7-XcAFWWXm&jump_from=webapi&authKey=YpRKVJQyFKYbGTiKw0GJ/YQXnNF+GdXNZC5beQQqnGZTvuLlXoMO7nw5fNXvmVhA">1038930070</a>（点击链接加入群聊）
-
-## 兼容性
-
-支持 Chrome、Safari、Firefox 等现代主流浏览器。
-
-## 贡献
-
-我们真诚欢迎并感谢每一位贡献者的支持！无论您有新想法、功能建议还是代码优化，都可以通过以下方式参与：
-
-提交 Pull Request：分享您的代码，助力项目成长。
-
-创建 GitHub Issue：提出 bug 反馈或新功能建议，让我们一起完善。
-
-您的每一点贡献都让这个项目更进一步！快来加入我们的开源社区吧！
-
-## 持续优化与扩展
-
-项目保持活跃更新，支持最新前端技术栈，兼容主流框架，确保长期稳定性和扩展性。社区驱动的反馈机制，让你的需求快速融入项目迭代。
-
-## 捐赠
-
-如果你觉得这个项目为你减少了开发成本、化解了工作 / 生活里的难题，可以通过以下方式支持一下～
-
-<img src="https://www.qiniu.lingchen.kim/%E7%BB%84%202%402x%202.png" alt="捐赠二维码"/>
-
-## Star History
-
-[![Star History Chart](https://api.star-history.com/svg?repos=Daymychen/art-design-pro&type=Date)](https://www.star-history.com/#Daymychen/art-design-pro&Date)
diff --git a/frontend/new-web/commitlint.config.cjs b/frontend/new-web/commitlint.config.cjs
index d2ef1bdf..5f556e2c 100644
--- a/frontend/new-web/commitlint.config.cjs
+++ b/frontend/new-web/commitlint.config.cjs
@@ -1,87 +1,83 @@
-/**
- * commitlint 配置文件
- * 文档
- * https://commitlint.js.org/#/reference-rules
- * https://cz-git.qbb.sh/zh/guide/
- */
-
 module.exports = {
   // 继承的规则
-  extends: ['@commitlint/config-conventional'],
+  extends: ["@commitlint/config-conventional"],
   // 自定义规则
   rules: {
+    // @see https://commitlint.js.org/#/reference-rules
+
     // 提交类型枚举，git提交type必须是以下类型
-    'type-enum': [
+    "type-enum": [
       2,
-      'always',
+      "always",
       [
-        'feat', // 新增功能
-        'fix', // 修复缺陷
-        'docs', // 文档变更
-        'style', // 代码格式（不影响功能，例如空格、分号等格式修正）
-        'refactor', // 代码重构（不包括 bug 修复、功能新增）
-        'perf', // 性能优化
-        'test', // 添加疏漏测试或已有测试改动
-        'build', // 构建流程、外部依赖变更（如升级 npm 包、修改 webpack 配置等）
-        'ci', // 修改 CI 配置、脚本
-        'revert', // 回滚 commit
-        'chore', // 对构建过程或辅助工具和库的更改（不影响源文件、测试用例）
-        'wip' // 对构建过程或辅助工具和库的更改（不影响源文件、测试用例）
-      ]
+        "feat", // 新增功能
+        "fix", // 修复缺陷
+        "docs", // 文档变更
+        "style", // 代码格式（不影响功能，例如空格、分号等格式修正）
+        "refactor", // 代码重构（不包括 bug 修复、功能新增）
+        "perf", // 性能优化
+        "test", // 添加疏漏测试或已有测试改动
+        "build", // 构建流程、外部依赖变更（如升级 npm 包、修改 webpack 配置等）
+        "ci", // 修改 CI 配置、脚本
+        "revert", // 回滚 commit
+        "chore", // 对构建过程或辅助工具和库的更改（不影响源文件、测试用例）
+        "wip", // 对构建过程或辅助工具和库的更改（不影响源文件、测试用例）
+      ],
     ],
-    'subject-case': [0] // subject大小写不做校验
+    "subject-case": [0], // subject大小写不做校验
   },
 
   prompt: {
     messages: {
-      type: '选择你要提交的类型 :',
-      scope: '选择一个提交范围（可选）:',
-      customScope: '请输入自定义的提交范围 :',
-      subject: '填写简短精炼的变更描述 :\n',
+      type: "选择你要提交的类型 :",
+      scope: "选择一个提交范围（可选）:",
+      customScope: "请输入自定义的提交范围 :",
+      subject: "填写简短精炼的变更描述 :\n",
       body: '填写更加详细的变更描述（可选）。使用 "|" 换行 :\n',
       breaking: '列举非兼容性重大的变更（可选）。使用 "|" 换行 :\n',
-      footerPrefixesSelect: '选择关联issue前缀（可选）:',
-      customFooterPrefix: '输入自定义issue前缀 :',
-      footer: '列举关联issue (可选) 例如: #31, #I3244 :\n',
-      generatingByAI: '正在通过 AI 生成你的提交简短描述...',
-      generatedSelectByAI: '选择一个 AI 生成的简短描述:',
-      confirmCommit: '是否提交或修改commit ?'
+      footerPrefixesSelect: "选择关联issue前缀（可选）:",
+      customFooterPrefix: "输入自定义issue前缀 :",
+      footer: "列举关联issue (可选) 例如: #31, #I3244 :\n",
+      generatingByAI: "正在通过 AI 生成你的提交简短描述...",
+      generatedSelectByAI: "选择一个 AI 生成的简短描述:",
+      confirmCommit: "是否提交或修改commit ?",
     },
     // prettier-ignore
     types: [
-      { value: "feat",     name: "feat:     新增功能" },
-      { value: "fix",      name: "fix:      修复缺陷" },
-      { value: "docs",     name: "docs:     文档变更" },
-      { value: "style",    name: "style:    代码格式（不影响功能，例如空格、分号等格式修正）" },
-      { value: "refactor", name: "refactor: 代码重构（不包括 bug 修复、功能新增）" },
-      { value: "perf",     name: "perf:     性能优化" },
-      { value: "test",     name: "test:     添加疏漏测试或已有测试改动" },
-      { value: "build",    name: "build:    构建流程、外部依赖变更（如升级 npm 包、修改 vite 配置等）" },
-      { value: "ci",       name: "ci:       修改 CI 配置、脚本" },
-      { value: "revert",   name: "revert:   回滚 commit" },
-      { value: "chore",    name: "chore:    对构建过程或辅助工具和库的更改（不影响源文件、测试用例）" },
+      { value: "feat",     name: "特性:     ✨  新增功能", emoji: ":sparkles:" },
+      { value: "fix",      name: "修复:     🐛  修复缺陷", emoji: ":bug:" },
+      { value: "docs",     name: "文档:     📝  文档变更(更新README文件，或者注释)", emoji: ":memo:" },
+      { value: "style",    name: "格式:     🌈  代码格式（空格、格式化、缺失的分号等）", emoji: ":lipstick:" },
+      { value: "refactor", name: "重构:     🔄  代码重构（不修复错误也不添加特性的代码更改）", emoji: ":recycle:" },
+      { value: "perf",     name: "性能:     🚀  性能优化", emoji: ":zap:" },
+      { value: "test",     name: "测试:     🧪  添加疏漏测试或已有测试改动", emoji: ":white_check_mark:"},
+      { value: "build",    name: "构建:     📦️  构建流程、外部依赖变更（如升级 npm 包、修改 vite 配置等）", emoji: ":package:"},
+      { value: "ci",       name: "集成:     ⚙️   修改 CI 配置、脚本",  emoji: ":ferris_wheel:"},
+      { value: "revert",   name: "回退:     ↩️   回滚 commit",emoji: ":rewind:"},
+      { value: "chore",    name: "其他:     🛠️   对构建过程或辅助工具和库的更改（不影响源文件、测试用例）", emoji: ":hammer:"},
+      { value: "wip",      name: "开发中:   🚧  开发阶段临时提交", emoji: ":construction:"},
     ],
     useEmoji: true,
-    emojiAlign: 'center',
+    emojiAlign: "center",
     useAI: false,
     aiNumber: 1,
-    themeColorCode: '',
+    themeColorCode: "",
     scopes: [],
     allowCustomScopes: true,
     allowEmptyScopes: true,
-    customScopesAlign: 'bottom',
-    customScopesAlias: 'custom',
-    emptyScopesAlias: 'empty',
+    customScopesAlign: "bottom",
+    customScopesAlias: "custom",
+    emptyScopesAlias: "empty",
     upperCaseSubject: false,
     markBreakingChangeMode: false,
-    allowBreakingChanges: ['feat', 'fix'],
+    allowBreakingChanges: ["feat", "fix"],
     breaklineNumber: 100,
-    breaklineChar: '|',
-    skipQuestions: ['breaking', 'footerPrefix', 'footer'], // 跳过的步骤
-    issuePrefixes: [{ value: 'closed', name: 'closed:   ISSUES has been processed' }],
-    customIssuePrefixAlign: 'top',
-    emptyIssuePrefixAlias: 'skip',
-    customIssuePrefixAlias: 'custom',
+    breaklineChar: "|",
+    skipQuestions: [],
+    issuePrefixes: [{ value: "closed", name: "closed:   ISSUES has been processed" }],
+    customIssuePrefixAlign: "top",
+    emptyIssuePrefixAlias: "skip",
+    customIssuePrefixAlias: "custom",
     allowCustomIssuePrefix: true,
     allowEmptyIssuePrefix: true,
     confirmColorize: true,
@@ -89,9 +85,9 @@ module.exports = {
     maxSubjectLength: Infinity,
     minSubjectLength: 0,
     scopeOverrides: undefined,
-    defaultBody: '',
-    defaultIssues: '',
-    defaultScope: '',
-    defaultSubject: ''
-  }
-}
+    defaultBody: "",
+    defaultIssues: "",
+    defaultScope: "",
+    defaultSubject: "",
+  },
+};
diff --git a/frontend/new-web/eslint.config.mjs b/frontend/new-web/eslint.config.mjs
index ed2d4ba9..ce0be97e 100644
--- a/frontend/new-web/eslint.config.mjs
+++ b/frontend/new-web/eslint.config.mjs
@@ -1,73 +1,81 @@
-// 从 URL 和路径模块中导入必要的功能
+// ESLint 配置文件
 import fs from 'fs'
 import path, { dirname } from 'path'
 import { fileURLToPath } from 'url'
 
-// 从 ESLint 插件中导入推荐配置
 import pluginJs from '@eslint/js'
 import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
 import pluginVue from 'eslint-plugin-vue'
 import globals from 'globals'
 import tseslint from 'typescript-eslint'
 
-// 使用 import.meta.url 获取当前模块的路径
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = dirname(__filename)
 
-// 读取 .auto-import.json 文件的内容，并将其解析为 JSON 对象
 const autoImportConfig = JSON.parse(
   fs.readFileSync(path.resolve(__dirname, '.auto-import.json'), 'utf-8')
 )
 
-export default [
-  // 指定文件匹配规则
-  {
-    files: ['**/*.{js,mjs,cjs,ts,tsx,vue}']
-  },
-  // 指定全局变量和环境
-  {
-    languageOptions: {
-      globals: {
-        ...globals.browser,
-        ...globals.node
-      }
-    }
-  },
-  // 扩展配置
-  pluginJs.configs.recommended,
-  ...tseslint.configs.recommended,
-  ...pluginVue.configs['flat/essential'],
-  // 自定义规则
-  {
-    // 针对所有 JavaScript、TypeScript 和 Vue 文件应用以下配置
-    files: ['**/*.{js,mjs,cjs,ts,tsx,vue}'],
+// Element Plus 组件全局配置
+const elementPlusComponents = {
+  ElInput: 'readonly',
+  ElSelect: 'readonly',
+  ElSwitch: 'readonly',
+  ElCascader: 'readonly',
+  ElInputNumber: 'readonly',
+  ElTimePicker: 'readonly',
+  ElTimeSelect: 'readonly',
+  ElDatePicker: 'readonly',
+  ElTreeSelect: 'readonly',
+  ElText: 'readonly',
+  ElRadioGroup: 'readonly',
+  ElCheckboxGroup: 'readonly',
+  ElOption: 'readonly',
+  ElRadio: 'readonly',
+  ElCheckbox: 'readonly',
+  ElInputTag: 'readonly',
+  ElForm: 'readonly',
+  ElFormItem: 'readonly',
+  ElTable: 'readonly',
+  ElTableColumn: 'readonly',
+  ElButton: 'readonly',
+  ElDialog: 'readonly',
+  ElPagination: 'readonly',
+  ElMessage: 'readonly',
+  ElMessageBox: 'readonly',
+  ElNotification: 'readonly',
+  ElTree: 'readonly',
+  ElDropdown: 'readonly',
+  ElDropdownMenu: 'readonly',
+  ElDropdownItem: 'readonly',
+  ElAvatar: 'readonly',
+  ElBadge: 'readonly',
+  ElCard: 'readonly',
+  ElCol: 'readonly',
+  ElRow: 'readonly',
+  ElContainer: 'readonly',
+  ElHeader: 'readonly',
+  ElAside: 'readonly',
+  ElMain: 'readonly',
+  ElFooter: 'readonly',
+  ElLink: 'readonly',
+  ElDivider: 'readonly',
+  ElImage: 'readonly',
+  ElProgress: 'readonly',
+  ElSkeleton: 'readonly',
+  ElSlider: 'readonly',
+  ElSwitch: 'readonly',
+  ElTag: 'readonly',
+  ElTooltip: 'readonly',
+  ElPopover: 'readonly',
+  ElPopconfirm: 'readonly',
+  ElDrawer: 'readonly',
+  ElAlert: 'readonly',
+  ElLoading: 'readonly',
+}
 
-    languageOptions: {
-      globals: {
-        // 合并从 autoImportConfig 中读取的全局变量配置
-        ...autoImportConfig.globals,
-        // TypeScript 全局命名空间
-        Api: 'readonly'
-      }
-    },
-    rules: {
-      quotes: ['error', 'single'], // 使用单引号
-      semi: ['error', 'never'], // 语句末尾不加分号
-      'no-var': 'error', // 要求使用 let 或 const 而不是 var
-      '@typescript-eslint/no-explicit-any': 'off', // 禁用 any 检查
-      'vue/multi-word-component-names': 'off', // 禁用对 Vue 组件名称的多词要求检查
-      'no-multiple-empty-lines': ['warn', { max: 1 }], // 不允许多个空行
-      'no-unexpected-multiline': 'error' // 禁止空余的多行
-    }
-  },
-  // vue 规则
-  {
-    files: ['**/*.vue'],
-    languageOptions: {
-      parserOptions: { parser: tseslint.parser }
-    }
-  },
-  // 忽略文件
+export default [
+  // 忽略文件配置
   {
     ignores: [
       'node_modules',
@@ -75,9 +83,114 @@ export default [
       'public',
       '.vscode/**',
       'src/assets/**',
-      'src/utils/console.ts'
-    ]
+      'src/utils/console.ts',
+      '**/*.min.*',
+      '**/auto-imports.d.ts',
+      '**/components.d.ts',
+      '**/types/**/*.d.ts',
+    ],
   },
+
+  // 基础配置
+  {
+    files: ['**/*.{js,mjs,cjs,ts,tsx,vue}'],
+  },
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        ...globals.es2022,
+      },
+    },
+  },
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  ...pluginVue.configs['flat/essential'],
+
+  // 全局配置
+  {
+    files: ['**/*.{js,mjs,cjs,ts,tsx,vue}'],
+
+    languageOptions: {
+      globals: {
+        ...autoImportConfig.globals,
+        Api: 'readonly',
+        ...elementPlusComponents,
+        // 全局类型定义
+        PageQuery: 'readonly',
+        PageResult: 'readonly',
+        UserListItem: 'readonly',
+        UserSearchParams: 'readonly',
+        RoleListItem: 'readonly',
+        RoleSearchParams: 'readonly',
+        OptionType: 'readonly',
+        ApiResponse: 'readonly',
+        ExcelResult: 'readonly',
+        CommonType: 'readonly',
+        updatorType: 'readonly',
+        creatorType: 'readonly',
+        TagView: 'readonly',
+        AppSettings: 'readonly',
+        __APP_INFO__: 'readonly',
+        UploadFilePath: 'readonly',
+      },
+    },
+    rules: {
+      // 代码风格
+      quotes: ['error', 'single'],
+      semi: ['error', 'never'],
+      'no-var': 'error',
+      'prefer-const': 'error',
+      'object-shorthand': 'error',
+
+      // 最佳实践
+      'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+      'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+      'eqeqeq': 'off',
+      'no-multi-spaces': 'error',
+      'no-multiple-empty-lines': ['warn', { max: 1 }],
+      'no-unexpected-multiline': 'error',
+
+      // TypeScript 规则
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/ban-ts-comment': 'off',
+      '@typescript-eslint/no-empty-function': 'off',
+      '@typescript-eslint/no-empty-object-type': 'off',
+      '@typescript-eslint/no-non-null-assertion': 'off',
+      '@typescript-eslint/no-unused-vars': 'warn',
+
+      // Vue 规则
+      'vue/multi-word-component-names': 'off',
+      'vue/no-v-html': 'off',
+      'vue/require-default-prop': 'off',
+      'vue/require-explicit-emits': 'error',
+      'vue/no-unused-vars': 'error',
+      'vue/no-mutating-props': 'off',
+      'vue/valid-v-for': 'warn',
+      'vue/no-template-shadow': 'warn',
+      'vue/return-in-computed-property': 'warn',
+      'vue/block-order': ['error', { order: ['template', 'script', 'style'] }],
+      'vue/html-self-closing': [
+        'error',
+        {
+          html: { void: 'always', normal: 'never', component: 'always' },
+          svg: 'always',
+          math: 'always',
+        },
+      ],
+      'vue/component-name-in-template-casing': ['error', 'PascalCase'],
+    },
+  },
+
+  // Vue 文件特定配置
+  {
+    files: ['**/*.vue'],
+    languageOptions: {
+      parserOptions: { parser: tseslint.parser },
+    },
+  },
+
   // prettier 配置
-  eslintPluginPrettierRecommended
+  eslintPluginPrettierRecommended,
 ]
diff --git a/frontend/new-web/index.html b/frontend/new-web/index.html
index ba51ce56..6111faca 100755
--- a/frontend/new-web/index.html
+++ b/frontend/new-web/index.html
@@ -1,14 +1,15 @@
 <!doctype html>
-<html>
+<html lang="zh-CN">
   <head>
-    <title>Art Design Pro</title>
+    <title>%VITE_APP_TITLE%</title>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Vue3 + Vite + TypeScript + Element-Plus 的后台管理模板" />
     <meta
-      name="description"
-      content="Art Design Pro - A modern admin dashboard template built with Vue 3, TypeScript, and Element Plus."
+      name="keywords"
+      content="vue,element-plus,typescript,vue-element-admin,vue3-element-admin"
     />
-    <link rel="shortcut icon" type="image/x-icon" href="src/assets/images/favicon.ico" />
+    <link rel="shortcut icon" type="image/x-icon" href="src/assets/images/favicon.png" />
 
     <style>
       /* 防止页面刷新时白屏的初始样式 */
@@ -23,20 +24,20 @@
 
     <script>
       // 初始化 html class 主题属性
-      ;(function () {
+      (function () {
         try {
-          if (typeof Storage === 'undefined' || !window.localStorage) {
-            return
+          if (typeof Storage === "undefined" || !window.localStorage) {
+            return;
           }
 
-          const themeType = localStorage.getItem('sys-theme')
-          if (themeType === 'dark') {
-            document.documentElement.classList.add('dark')
+          const themeType = localStorage.getItem("sys-theme");
+          if (themeType === "dark") {
+            document.documentElement.classList.add("dark");
           }
         } catch (e) {
-          console.warn('Failed to apply initial theme:', e)
+          console.warn("Failed to apply initial theme:", e);
         }
-      })()
+      })();
     </script>
   </head>
 
diff --git a/frontend/new-web/package.json b/frontend/new-web/package.json
index 7b663629..c1675085 100755
--- a/frontend/new-web/package.json
+++ b/frontend/new-web/package.json
@@ -1,21 +1,38 @@
 {
-  "name": "art-design-pro",
-  "version": "0.0.0",
+  "name": "fastapiadmin",
+  "description": "Vue3 + Vite + TypeScript + Element-Plus 的后台管理模板",
+  "version": "2.2.0",
+  "private": true,
   "type": "module",
-  "engines": {
-    "node": ">=20.19.0",
-    "pnpm": ">=8.8.0"
-  },
   "scripts": {
-    "dev": "vite --open",
+    "i": "pnpm install",
+    "dev": "vite",
+    "dev:force": "vite --force",
+    "prod": "vite --mode prod",
     "build": "vue-tsc --noEmit && vite build",
-    "serve": "vite preview",
-    "lint": "eslint",
-    "fix": "eslint --fix",
+    "build:pro": "pnpm vite build --mode pro",
+    "build:gitee": "pnpm vite build --mode gitee",
+    "build:dev": "pnpm vite build --mode dev",
+    "build:test": "pnpm vite build --mode test",
+    "serve:pro": "pnpm vite preview --mode pro",
+    "serve:dev": "pnpm vite preview --mode dev",
+    "serve:test": "pnpm vite preview --mode test",
+    "clean": "pnpx rimraf node_modules",
+    "ts:check": "pnpm vue-tsc --noEmit --skipLibCheck",
+    "npm:check": "pnpx npm-check-updates -u",
+    "clean:cache": "pnpx rimraf node_modules/.cache node_modules/.vite",
+    "prepare": "husky install",
+    "icon": "esno ./scripts/icon.ts",
+    "preview": "vite preview",
+    "type-check": "vue-tsc --noEmit",
+    "lint": "pnpm run lint:eslint && pnpm run lint:prettier && pnpm run lint:stylelint",
+    "lint:format": "prettier --write --loglevel warn \"src/**/*.{js,ts,json,tsx,css,less,vue,html,md}\"",
+    "lint:style": "stylelint --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
+    "lint:lint-staged": "lint-staged -c ./.husky/lintstagedrc.cjs",
+    "lint:eslint": "eslint --cache \"src/**/*.{vue,ts,js}\" --fix",
     "lint:prettier": "prettier --write \"**/*.{js,cjs,ts,json,tsx,css,less,scss,vue,html,md}\"",
-    "lint:stylelint": "stylelint  \"**/*.{css,scss,vue}\" --fix",
-    "lint:lint-staged": "lint-staged",
-    "prepare": "husky",
+    "lint:stylelint": "stylelint --cache \"**/*.{css,scss,vue}\" --fix",
+    "fix": "eslint --fix",
     "commit": "git-cz",
     "clean:dev": "tsx scripts/clean-dev.ts"
   },
@@ -55,61 +72,98 @@
     "@element-plus/icons-vue": "^2.3.2",
     "@iconify/vue": "^5.0.0",
     "@tailwindcss/vite": "^4.1.14",
-    "@vue/reactivity": "^3.5.21",
+    "@vue-flow/background": "^1.3.2",
+    "@vue-flow/controls": "^1.1.3",
+    "@vue-flow/core": "^1.48.1",
+    "@vue-flow/minimap": "^1.5.4",
     "@vueuse/core": "^13.9.0",
-    "@wangeditor/editor": "^5.1.23",
-    "@wangeditor/editor-for-vue": "next",
+    "@wangeditor-next/editor": "^5.6.49",
+    "@wangeditor-next/editor-for-vue": "^5.1.14",
+    "animate.css": "^4.1.1",
     "axios": "^1.12.2",
+    "clipboard": "^2.0.11",
+    "codemirror": "^5.65.19",
+    "codemirror-editor-vue3": "^2.8.0",
     "crypto-js": "^4.2.0",
+    "dagre": "^0.8.5",
+    "dayjs": "^1.11.13",
+    "dompurify": "^3.3.1",
     "echarts": "^6.0.0",
     "element-plus": "^2.11.2",
+    "exceljs": "^4.4.0",
     "file-saver": "^2.0.5",
-    "highlight.js": "^11.10.0",
+    "highlight.js": "^11.11.1",
+    "js-beautify": "^1.15.4",
+    "markdown-it": "^14.1.0",
+    "markdown-it-highlightjs": "^4.2.0",
     "mitt": "^3.0.1",
     "nprogress": "^0.2.0",
     "ohash": "^2.0.11",
+    "path-browserify": "^1.0.1",
+    "path-to-regexp": "^8.2.0",
     "pinia": "^3.0.3",
-    "pinia-plugin-persistedstate": "^4.3.0",
+    "pinia-plugin-persistedstate": "^4.4.1",
     "qrcode.vue": "^3.6.0",
+    "qs": "^6.14.0",
     "tailwindcss": "^4.1.14",
     "vue": "^3.5.21",
     "vue-draggable-plus": "^0.6.0",
-    "vue-i18n": "^9.14.0",
+    "vue-i18n": "^11.1.10",
+    "vue-json-pretty": "^2.5.0",
     "vue-router": "^4.5.1",
+    "vue-web-terminal": "^3.4.1",
+    "vue3-cron-plus": "^0.1.9",
+    "vuedraggable": "^4.1.0",
     "xgplayer": "^3.0.20",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.4.1",
     "@commitlint/config-conventional": "^19.4.1",
-    "@eslint/js": "^9.9.1",
+    "@eslint/js": "^9.32.0",
+    "@iconify/utils": "^2.3.0",
+    "@types/codemirror": "^5.60.16",
+    "@types/dagre": "^0.7.53",
+    "@types/dompurify": "^3.2.0",
+    "@types/file-saver": "^2.0.7",
+    "@types/markdown-it": "^14.1.2",
     "@types/node": "^24.0.5",
-    "@typescript-eslint/eslint-plugin": "^8.3.0",
-    "@typescript-eslint/parser": "^8.3.0",
+    "@types/nprogress": "^0.2.3",
+    "@types/path-browserify": "^1.0.3",
+    "@types/qs": "^6.14.0",
+    "@typescript-eslint/eslint-plugin": "^8.38.0",
+    "@typescript-eslint/parser": "^8.38.0",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vue/compiler-sfc": "^3.0.5",
-    "commitizen": "^4.3.0",
-    "cz-git": "^1.11.1",
-    "eslint": "^9.9.1",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-vue": "^9.27.0",
-    "globals": "^15.9.0",
-    "husky": "^9.1.5",
+    "autoprefixer": "^10.4.21",
+    "commitizen": "^4.3.1",
+    "cz-git": "^1.12.0",
+    "eslint": "^9.32.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.3",
+    "eslint-plugin-vue": "^10.4.0",
+    "fs-extra": "^11.2.0",
+    "globals": "^15.15.0",
+    "husky": "^9.1.7",
     "lint-staged": "^15.5.2",
-    "prettier": "^3.5.3",
+    "postcss": "^8.5.6",
+    "postcss-html": "^1.8.0",
+    "postcss-scss": "^4.0.9",
+    "prettier": "^3.6.2",
     "rollup-plugin-visualizer": "^5.12.0",
-    "sass": "^1.81.0",
-    "stylelint": "^16.20.0",
+    "sass": "^1.89.2",
+    "stylelint": "^16.25.0",
     "stylelint-config-html": "^1.1.0",
-    "stylelint-config-recess-order": "^4.6.0",
+    "stylelint-config-recess-order": "^6.1.0",
+    "stylelint-config-recommended": "^15.0.0",
     "stylelint-config-recommended-scss": "^14.1.0",
-    "stylelint-config-recommended-vue": "^1.5.0",
+    "stylelint-config-recommended-vue": "^1.6.1",
     "stylelint-config-standard": "^36.0.1",
-    "terser": "^5.36.0",
+    "stylelint-prettier": "^5.0.3",
+    "terser": "^5.43.1",
     "tsx": "^4.20.3",
-    "typescript": "~5.6.3",
-    "typescript-eslint": "^8.9.0",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.38.0",
     "unplugin-auto-import": "^20.2.0",
     "unplugin-element-plus": "^0.10.0",
     "unplugin-vue-components": "^29.1.0",
@@ -117,7 +171,23 @@
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-vue-devtools": "^7.7.6",
     "vue-demi": "^0.14.9",
-    "vue-img-cutter": "^3.0.5",
-    "vue-tsc": "~2.1.6"
-  }
+    "vue-eslint-parser": "^10.2.0",
+    "vue-tsc": "^2.2.12"
+  },
+  "packageManager": "pnpm@9.15.3",
+  "engines": {
+    "node": ">=20.19.0",
+    "npm": ">=10.0.0",
+    "pnpm": ">=8.8.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://gitee.com/fastapiadmin/FastapiAdmin.git"
+  },
+  "bugs": {
+    "url": "https://gitee.com/fastapiadmin/FastapiAdmin/issues"
+  },
+  "author": "fastapiadmin <948080782@qq.com>",
+  "license": "MIT",
+  "homepage": "https://gitee.com/fastapiadmin/FastapiAdmin"
 }
diff --git a/frontend/new-web/pnpm-lock.yaml b/frontend/new-web/pnpm-lock.yaml
index 401c518a..066721e1 100644
--- a/frontend/new-web/pnpm-lock.yaml
+++ b/frontend/new-web/pnpm-lock.yaml
@@ -5,47 +5,90 @@ settings:
   excludeLinksFromLockfile: false
 
 importers:
+
   .:
     dependencies:
       '@element-plus/icons-vue':
         specifier: ^2.3.2
-        version: 2.3.2(vue@3.5.22(typescript@5.6.3))
+        version: 2.3.2(vue@3.5.22(typescript@5.9.3))
       '@iconify/vue':
         specifier: ^5.0.0
-        version: 5.0.0(vue@3.5.22(typescript@5.6.3))
+        version: 5.0.0(vue@3.5.22(typescript@5.9.3))
       '@tailwindcss/vite':
         specifier: ^4.1.14
         version: 4.1.14(vite@7.1.7(@types/node@24.8.1)(jiti@2.6.0)(lightningcss@1.30.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))
-      '@vue/reactivity':
-        specifier: ^3.5.21
-        version: 3.5.22
+      '@vue-flow/background':
+        specifier: ^1.3.2
+        version: 1.3.2(@vue-flow/core@1.48.2(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))
+      '@vue-flow/controls':
+        specifier: ^1.1.3
+        version: 1.1.3(@vue-flow/core@1.48.2(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))
+      '@vue-flow/core':
+        specifier: ^1.48.1
+        version: 1.48.2(vue@3.5.22(typescript@5.9.3))
+      '@vue-flow/minimap':
+        specifier: ^1.5.4
+        version: 1.5.4(@vue-flow/core@1.48.2(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))
       '@vueuse/core':
         specifier: ^13.9.0
-        version: 13.9.0(vue@3.5.22(typescript@5.6.3))
-      '@wangeditor/editor':
-        specifier: ^5.1.23
-        version: 5.1.23
-      '@wangeditor/editor-for-vue':
-        specifier: next
-        version: 5.1.12(@wangeditor/editor@5.1.23)(vue@3.5.22(typescript@5.6.3))
+        version: 13.9.0(vue@3.5.22(typescript@5.9.3))
+      '@wangeditor-next/editor':
+        specifier: ^5.6.49
+        version: 5.7.0
+      '@wangeditor-next/editor-for-vue':
+        specifier: ^5.1.14
+        version: 5.1.14(@wangeditor-next/editor@5.7.0)(vue@3.5.22(typescript@5.9.3))
+      animate.css:
+        specifier: ^4.1.1
+        version: 4.1.1
       axios:
         specifier: ^1.12.2
         version: 1.12.2
+      clipboard:
+        specifier: ^2.0.11
+        version: 2.0.11
+      codemirror:
+        specifier: ^5.65.19
+        version: 5.65.21
+      codemirror-editor-vue3:
+        specifier: ^2.8.0
+        version: 2.8.0(codemirror@5.65.21)(diff-match-patch@1.0.5)(vue@3.5.22(typescript@5.9.3))
       crypto-js:
         specifier: ^4.2.0
         version: 4.2.0
+      dagre:
+        specifier: ^0.8.5
+        version: 0.8.5
+      dayjs:
+        specifier: ^1.11.13
+        version: 1.11.18
+      dompurify:
+        specifier: ^3.3.1
+        version: 3.4.2
       echarts:
         specifier: ^6.0.0
         version: 6.0.0
       element-plus:
         specifier: ^2.11.2
-        version: 2.11.4(vue@3.5.22(typescript@5.6.3))
+        version: 2.11.4(vue@3.5.22(typescript@5.9.3))
+      exceljs:
+        specifier: ^4.4.0
+        version: 4.4.0
       file-saver:
         specifier: ^2.0.5
         version: 2.0.5
       highlight.js:
-        specifier: ^11.10.0
+        specifier: ^11.11.1
         version: 11.11.1
+      js-beautify:
+        specifier: ^1.15.4
+        version: 1.15.4
+      markdown-it:
+        specifier: ^14.1.0
+        version: 14.1.1
+      markdown-it-highlightjs:
+        specifier: ^4.2.0
+        version: 4.3.0
       mitt:
         specifier: ^3.0.1
         version: 3.0.1
@@ -55,30 +98,51 @@ importers:
       ohash:
         specifier: ^2.0.11
         version: 2.0.11
+      path-browserify:
+        specifier: ^1.0.1
+        version: 1.0.1
+      path-to-regexp:
+        specifier: ^8.2.0
+        version: 8.4.2
       pinia:
         specifier: ^3.0.3
-        version: 3.0.3(typescript@5.6.3)(vue@3.5.22(typescript@5.6.3))
+        version: 3.0.3(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3))
       pinia-plugin-persistedstate:
-        specifier: ^4.3.0
-        version: 4.5.0(pinia@3.0.3(typescript@5.6.3)(vue@3.5.22(typescript@5.6.3)))
+        specifier: ^4.4.1
+        version: 4.5.0(pinia@3.0.3(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3)))
       qrcode.vue:
         specifier: ^3.6.0
-        version: 3.6.0(vue@3.5.22(typescript@5.6.3))
+        version: 3.6.0(vue@3.5.22(typescript@5.9.3))
+      qs:
+        specifier: ^6.14.0
+        version: 6.15.1
       tailwindcss:
         specifier: ^4.1.14
         version: 4.1.14
       vue:
         specifier: ^3.5.21
-        version: 3.5.22(typescript@5.6.3)
+        version: 3.5.22(typescript@5.9.3)
       vue-draggable-plus:
         specifier: ^0.6.0
         version: 0.6.0(@types/sortablejs@1.15.8)
       vue-i18n:
-        specifier: ^9.14.0
-        version: 9.14.5(vue@3.5.22(typescript@5.6.3))
+        specifier: ^11.1.10
+        version: 11.4.0(vue@3.5.22(typescript@5.9.3))
+      vue-json-pretty:
+        specifier: ^2.5.0
+        version: 2.6.0(vue@3.5.22(typescript@5.9.3))
       vue-router:
         specifier: ^4.5.1
-        version: 4.5.1(vue@3.5.22(typescript@5.6.3))
+        version: 4.5.1(vue@3.5.22(typescript@5.9.3))
+      vue-web-terminal:
+        specifier: ^3.4.1
+        version: 3.4.2(typescript@5.9.3)
+      vue3-cron-plus:
+        specifier: ^0.1.9
+        version: 0.1.9(typescript@5.9.3)
+      vuedraggable:
+        specifier: ^4.1.0
+        version: 4.1.0(vue@3.5.22(typescript@5.9.3))
       xgplayer:
         specifier: ^3.0.20
         version: 3.0.23(core-js@3.45.1)
@@ -88,103 +152,151 @@ importers:
     devDependencies:
       '@commitlint/cli':
         specifier: ^19.4.1
-        version: 19.8.1(@types/node@24.8.1)(typescript@5.6.3)
+        version: 19.8.1(@types/node@24.8.1)(typescript@5.9.3)
       '@commitlint/config-conventional':
         specifier: ^19.4.1
         version: 19.8.1
       '@eslint/js':
-        specifier: ^9.9.1
+        specifier: ^9.32.0
         version: 9.36.0
+      '@iconify/utils':
+        specifier: ^2.3.0
+        version: 2.3.0
+      '@types/codemirror':
+        specifier: ^5.60.16
+        version: 5.60.17
+      '@types/dagre':
+        specifier: ^0.7.53
+        version: 0.7.54
+      '@types/dompurify':
+        specifier: ^3.2.0
+        version: 3.2.0
+      '@types/file-saver':
+        specifier: ^2.0.7
+        version: 2.0.7
+      '@types/markdown-it':
+        specifier: ^14.1.2
+        version: 14.1.2
       '@types/node':
         specifier: ^24.0.5
         version: 24.8.1
+      '@types/nprogress':
+        specifier: ^0.2.3
+        version: 0.2.3
+      '@types/path-browserify':
+        specifier: ^1.0.3
+        version: 1.0.3
+      '@types/qs':
+        specifier: ^6.14.0
+        version: 6.15.0
       '@typescript-eslint/eslint-plugin':
-        specifier: ^8.3.0
-        version: 8.44.1(@typescript-eslint/parser@8.44.1(eslint@9.36.0(jiti@2.6.0))(typescript@5.6.3))(eslint@9.36.0(jiti@2.6.0))(typescript@5.6.3)
+        specifier: ^8.38.0
+        version: 8.44.1(@typescript-eslint/parser@8.44.1(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.3))(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.3)
       '@typescript-eslint/parser':
-        specifier: ^8.3.0
-        version: 8.44.1(eslint@9.36.0(jiti@2.6.0))(typescript@5.6.3)
+        specifier: ^8.38.0
+        version: 8.44.1(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.3)
       '@vitejs/plugin-vue':
         specifier: ^6.0.1
-        version: 6.0.1(vite@7.1.7(@types/node@24.8.1)(jiti@2.6.0)(lightningcss@1.30.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))(vue@3.5.22(typescript@5.6.3))
+        version: 6.0.1(vite@7.1.7(@types/node@24.8.1)(jiti@2.6.0)(lightningcss@1.30.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))
       '@vue/compiler-sfc':
         specifier: ^3.0.5
         version: 3.5.22
+      autoprefixer:
+        specifier: ^10.4.21
+        version: 10.5.0(postcss@8.5.6)
       commitizen:
-        specifier: ^4.3.0
-        version: 4.3.1(@types/node@24.8.1)(typescript@5.6.3)
+        specifier: ^4.3.1
+        version: 4.3.1(@types/node@24.8.1)(typescript@5.9.3)
       cz-git:
-        specifier: ^1.11.1
+        specifier: ^1.12.0
         version: 1.12.0
       eslint:
-        specifier: ^9.9.1
+        specifier: ^9.32.0
         version: 9.36.0(jiti@2.6.0)
       eslint-config-prettier:
-        specifier: ^9.1.0
-        version: 9.1.2(eslint@9.36.0(jiti@2.6.0))
+        specifier: ^10.1.8
+        version: 10.1.8(eslint@9.36.0(jiti@2.6.0))
       eslint-plugin-prettier:
-        specifier: ^5.2.1
-        version: 5.5.4(eslint-config-prettier@9.1.2(eslint@9.36.0(jiti@2.6.0)))(eslint@9.36.0(jiti@2.6.0))(prettier@3.6.2)
+        specifier: ^5.5.3
+        version: 5.5.4(eslint-config-prettier@10.1.8(eslint@9.36.0(jiti@2.6.0)))(eslint@9.36.0(jiti@2.6.0))(prettier@3.6.2)
       eslint-plugin-vue:
-        specifier: ^9.27.0
-        version: 9.33.0(eslint@9.36.0(jiti@2.6.0))
+        specifier: ^10.4.0
+        version: 10.9.0(@typescript-eslint/parser@8.44.1(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.3))(eslint@9.36.0(jiti@2.6.0))(vue-eslint-parser@10.4.0(eslint@9.36.0(jiti@2.6.0)))
+      fs-extra:
+        specifier: ^11.2.0
+        version: 11.3.2
       globals:
-        specifier: ^15.9.0
+        specifier: ^15.15.0
         version: 15.15.0
       husky:
-        specifier: ^9.1.5
+        specifier: ^9.1.7
         version: 9.1.7
       lint-staged:
         specifier: ^15.5.2
         version: 15.5.2
+      postcss:
+        specifier: ^8.5.6
+        version: 8.5.6
+      postcss-html:
+        specifier: ^1.8.0
+        version: 1.8.0
+      postcss-scss:
+        specifier: ^4.0.9
+        version: 4.0.9(postcss@8.5.6)
       prettier:
-        specifier: ^3.5.3
+        specifier: ^3.6.2
         version: 3.6.2
       rollup-plugin-visualizer:
         specifier: ^5.12.0
         version: 5.14.0(rollup@4.52.3)
       sass:
-        specifier: ^1.81.0
+        specifier: ^1.89.2
         version: 1.93.2
       stylelint:
-        specifier: ^16.20.0
-        version: 16.24.0(typescript@5.6.3)
+        specifier: ^16.25.0
+        version: 16.26.1(typescript@5.9.3)
       stylelint-config-html:
         specifier: ^1.1.0
-        version: 1.1.0(postcss-html@1.8.0)(stylelint@16.24.0(typescript@5.6.3))
+        version: 1.1.0(postcss-html@1.8.0)(stylelint@16.26.1(typescript@5.9.3))
       stylelint-config-recess-order:
-        specifier: ^4.6.0
-        version: 4.6.0(stylelint@16.24.0(typescript@5.6.3))
+        specifier: ^6.1.0
+        version: 6.1.0(stylelint@16.26.1(typescript@5.9.3))
+      stylelint-config-recommended:
+        specifier: ^15.0.0
+        version: 15.0.0(stylelint@16.26.1(typescript@5.9.3))
       stylelint-config-recommended-scss:
         specifier: ^14.1.0
-        version: 14.1.0(postcss@8.5.6)(stylelint@16.24.0(typescript@5.6.3))
+        version: 14.1.0(postcss@8.5.6)(stylelint@16.26.1(typescript@5.9.3))
       stylelint-config-recommended-vue:
-        specifier: ^1.5.0
-        version: 1.6.1(postcss-html@1.8.0)(stylelint@16.24.0(typescript@5.6.3))
+        specifier: ^1.6.1
+        version: 1.6.1(postcss-html@1.8.0)(stylelint@16.26.1(typescript@5.9.3))
       stylelint-config-standard:
         specifier: ^36.0.1
-        version: 36.0.1(stylelint@16.24.0(typescript@5.6.3))
+        version: 36.0.1(stylelint@16.26.1(typescript@5.9.3))
+      stylelint-prettier:
+        specifier: ^5.0.3
+        version: 5.0.3(prettier@3.6.2)(stylelint@16.26.1(typescript@5.9.3))
       terser:
-        specifier: ^5.36.0
+        specifier: ^5.43.1
         version: 5.44.0
       tsx:
         specifier: ^4.20.3
         version: 4.20.6
       typescript:
-        specifier: ~5.6.3
-        version: 5.6.3
+        specifier: ^5.8.3
+        version: 5.9.3
       typescript-eslint:
-        specifier: ^8.9.0
-        version: 8.44.1(eslint@9.36.0(jiti@2.6.0))(typescript@5.6.3)
+        specifier: ^8.38.0
+        version: 8.44.1(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.3)
       unplugin-auto-import:
         specifier: ^20.2.0
-        version: 20.2.0(@vueuse/core@13.9.0(vue@3.5.22(typescript@5.6.3)))
+        version: 20.2.0(@vueuse/core@13.9.0(vue@3.5.22(typescript@5.9.3)))
       unplugin-element-plus:
         specifier: ^0.10.0
         version: 0.10.0
       unplugin-vue-components:
         specifier: ^29.1.0
-        version: 29.1.0(@babel/parser@7.28.4)(vue@3.5.22(typescript@5.6.3))
+        version: 29.1.0(@babel/parser@7.28.4)(vue@3.5.22(typescript@5.9.3))
       vite:
         specifier: ^7.1.5
         version: 7.1.7(@types/node@24.8.1)(jiti@2.6.0)(lightningcss@1.30.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1)
@@ -193,1103 +305,718 @@ importers:
         version: 0.5.1(vite@7.1.7(@types/node@24.8.1)(jiti@2.6.0)(lightningcss@1.30.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))
       vite-plugin-vue-devtools:
         specifier: ^7.7.6
-        version: 7.7.7(rollup@4.52.3)(vite@7.1.7(@types/node@24.8.1)(jiti@2.6.0)(lightningcss@1.30.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))(vue@3.5.22(typescript@5.6.3))
+        version: 7.7.7(rollup@4.52.3)(vite@7.1.7(@types/node@24.8.1)(jiti@2.6.0)(lightningcss@1.30.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))
       vue-demi:
         specifier: ^0.14.9
-        version: 0.14.10(vue@3.5.22(typescript@5.6.3))
-      vue-img-cutter:
-        specifier: ^3.0.5
-        version: 3.0.7(typescript@5.6.3)
+        version: 0.14.10(vue@3.5.22(typescript@5.9.3))
+      vue-eslint-parser:
+        specifier: ^10.2.0
+        version: 10.4.0(eslint@9.36.0(jiti@2.6.0))
       vue-tsc:
-        specifier: ~2.1.6
-        version: 2.1.10(typescript@5.6.3)
+        specifier: ^2.2.12
+        version: 2.2.12(typescript@5.9.3)
 
 packages:
+
+  '@antfu/install-pkg@1.1.0':
+    resolution: {integrity: sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==}
+
   '@antfu/utils@0.7.10':
-    resolution:
-      {
-        integrity: sha512-+562v9k4aI80m1+VuMHehNJWLOFjBnXn3tdOitzD0il5b7smkSBal4+a3oKiQTbrwMmN/TBUMDvbdoWDehgOww==
-      }
+    resolution: {integrity: sha512-+562v9k4aI80m1+VuMHehNJWLOFjBnXn3tdOitzD0il5b7smkSBal4+a3oKiQTbrwMmN/TBUMDvbdoWDehgOww==}
+
+  '@antfu/utils@8.1.1':
+    resolution: {integrity: sha512-Mex9nXf9vR6AhcXmMrlz/HVgYYZpVGJ6YlPgwl7UnaFpnshXs6EK/oa5Gpf3CzENMjkvEx2tQtntGnb7UtSTOQ==}
 
   '@babel/code-frame@7.27.1':
-    resolution:
-      {
-        integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==
-      }
-    engines: { node: '>=6.9.0' }
+    resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
+    engines: {node: '>=6.9.0'}
 
   '@babel/compat-data@7.28.4':
-    resolution:
-      {
-        integrity: sha512-YsmSKC29MJwf0gF8Rjjrg5LQCmyh+j/nD8/eP7f+BeoQTKYqs9RoWbjGOdy0+1Ekr68RJZMUOPVQaQisnIo4Rw==
-      }
-    engines: { node: '>=6.9.0' }
+    resolution: {integrity: sha512-YsmSKC29MJwf0gF8Rjjrg5LQCmyh+j/nD8/eP7f+BeoQTKYqs9RoWbjGOdy0+1Ekr68RJZMUOPVQaQisnIo4Rw==}
+    engines: {node: '>=6.9.0'}
 
   '@babel/core@7.28.4':
-    resolution:
-      {
-        integrity: sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==
-      }
-    engines: { node: '>=6.9.0' }
+    resolution: {integrity: sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==}
+    engines: {node: '>=6.9.0'}
 
   '@babel/generator@7.28.3':
-    resolution:
-      {
-        integrity: sha512-3lSpxGgvnmZznmBkCRnVREPUFJv2wrv9iAoFDvADJc0ypmdOxdUtcLeBgBJ6zE0PMeTKnxeQzyk0xTBq4Ep7zw==
-      }
-    engines: { node: '>=6.9.0' }
+    resolution: {integrity: sha512-3lSpxGgvnmZznmBkCRnVREPUFJv2wrv9iAoFDvADJc0ypmdOxdUtcLeBgBJ6zE0PMeTKnxeQzyk0xTBq4Ep7zw==}
+    engines: {node: '>=6.9.0'}
 
   '@babel/helper-annotate-as-pure@7.27.3':
-    resolution:
-      {
-        integrity: sha512-fXSwMQqitTGeHLBC08Eq5yXz2m37E4pJX1qAU1+2cNedz/ifv/bVXft90VeSav5nFO61EcNgwr0aJxbyPaWBPg==
-      }
-    engines: { node: '>=6.9.0' }
+    resolution: {integrity: sha512-fXSwMQqitTGeHLBC08Eq5yXz2m37E4pJX1qAU1+2cNedz/ifv/bVXft90VeSav5nFO61EcNgwr0aJxbyPaWBPg==}
+    engines: {node: '>=6.9.0'}
 
   '@babel/helper-compilation-targets@7.27.2':
-    resolution:
-      {
-        integrity: sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==
-      }
-    engines: { node: '>=6.9.0' }
+    resolution: {integrity: sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==}
+    engines: {node: '>=6.9.0'}
 
   '@babel/helper-create-class-features-plugin@7.28.3':
-    resolution:
-      {
-        integrity: sha512-V9f6ZFIYSLNEbuGA/92uOvYsGCJNsuA8ESZ4ldc09bWk/j8H8TKiPw8Mk1eG6olpnO0ALHJmYfZvF4MEE4gajg==
-      }
-    engines: { node: '>=6.9.0' }
+    resolution: {integrity: sha512-V9f6ZFIYSLNEbuGA/92uOvYsGCJNsuA8ESZ4ldc09bWk/j8H8TKiPw8Mk1eG6olpnO0ALHJmYfZvF4MEE4gajg==}
+    engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
   '@babel/helper-globals@7.28.0':
-    resolution:
-      {
-        integrity: sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==
-      }
-    engines: { node: '>=6.9.0' }
+    resolution: {integrity: sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==}
+    engines: {node: '>=6.9.0'}
 
   '@babel/helper-member-expression-to-functions@7.27.1':
-    resolution:
-      {
-        integrity: sha512-E5chM8eWjTp/aNoVpcbfM7mLxu9XGLWYise2eBKGQomAk/Mb4XoxyqXTZbuTohbsl8EKqdlMhnDI2CCLfcs9wA==
-      }
-    engines: { node: '>=6.9.0' }
+    resolution: {integrity: sha512-E5chM8eWjTp/aNoVpcbfM7mLxu9XGLWYise2eBKGQomAk/Mb4XoxyqXTZbuTohbsl8EKqdlMhnDI2CCLfcs9wA==}
+    engines: {node: '>=6.9.0'}
 
   '@babel/helper-module-imports@7.27.1':
-    resolution:
-      {
-        integrity: sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==
-      }
-    engines: { node: '>=6.9.0' }
+    resolution: {integrity: sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==}
+    engines: {node: '>=6.9.0'}
 
   '@babel/helper-module-transforms@7.28.3':
-    resolution:
-      {
-        integrity: sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==
-      }
-    engines: { node: '>=6.9.0' }
+    resolution: {integrity: sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==}
+    engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
   '@babel/helper-optimise-call-expression@7.27.1':
-    resolution:
-      {
-        integrity: sha512-URMGH08NzYFhubNSGJrpUEphGKQwMQYBySzat5cAByY1/YgIRkULnIy3tAMeszlL/so2HbeilYloUmSpd7GdVw==
-      }
-    engines: { node: '>=6.9.0' }
+    resolution: {integrity: sha512-URMGH08NzYFhubNSGJrpUEphGKQwMQYBySzat5cAByY1/YgIRkULnIy3tAMeszlL/so2HbeilYloUmSpd7GdVw==}
+    engines: {node: '>=6.9.0'}
 
   '@babel/helper-plugin-utils@7.27.1':
-    resolution:
-      {
-        integrity: sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==
-      }
-    engines: { node: '>=6.9.0' }
+    resolution: {integrity: sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==}
+    engines: {node: '>=6.9.0'}
 
   '@babel/helper-replace-supers@7.27.1':
-    resolution:
-      {
-        integrity: sha512-7EHz6qDZc8RYS5ElPoShMheWvEgERonFCs7IAonWLLUTXW59DP14bCZt89/GKyreYn8g3S83m21FelHKbeDCKA==
-      }
-    engines: { node: '>=6.9.0' }
+    resolution: {integrity: sha512-7EHz6qDZc8RYS5ElPoShMheWvEgERonFCs7IAonWLLUTXW59DP14bCZt89/GKyreYn8g3S83m21FelHKbeDCKA==}
+    engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
   '@babel/helper-skip-transparent-expression-wrappers@7.27.1':
-    resolution:
-      {
-        integrity: sha512-Tub4ZKEXqbPjXgWLl2+3JpQAYBJ8+ikpQ2Ocj/q/r0LwE3UhENh7EUabyHjz2kCEsrRY83ew2DQdHluuiDQFzg==
-      }
-    engines: { node: '>=6.9.0' }
+    resolution: {integrity: sha512-Tub4ZKEXqbPjXgWLl2+3JpQAYBJ8+ikpQ2Ocj/q/r0LwE3UhENh7EUabyHjz2kCEsrRY83ew2DQdHluuiDQFzg==}
+    engines: {node: '>=6.9.0'}
 
   '@babel/helper-string-parser@7.27.1':
-    resolution:
-      {
-        integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==
-      }
-    engines: { node: '>=6.9.0' }
+    resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
+    engines: {node: '>=6.9.0'}
 
   '@babel/helper-validator-identifier@7.27.1':
-    resolution:
-      {
-        integrity: sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==
-      }
-    engines: { node: '>=6.9.0' }
+    resolution: {integrity: sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==}
+    engines: {node: '>=6.9.0'}
 
   '@babel/helper-validator-option@7.27.1':
-    resolution:
-      {
-        integrity: sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==
-      }
-    engines: { node: '>=6.9.0' }
+    resolution: {integrity: sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==}
+    engines: {node: '>=6.9.0'}
 
   '@babel/helpers@7.28.4':
-    resolution:
-      {
-        integrity: sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==
-      }
-    engines: { node: '>=6.9.0' }
+    resolution: {integrity: sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==}
+    engines: {node: '>=6.9.0'}
 
   '@babel/parser@7.28.4':
-    resolution:
-      {
-        integrity: sha512-yZbBqeM6TkpP9du/I2pUZnJsRMGGvOuIrhjzC1AwHwW+6he4mni6Bp/m8ijn0iOuZuPI2BfkCoSRunpyjnrQKg==
-      }
-    engines: { node: '>=6.0.0' }
+    resolution: {integrity: sha512-yZbBqeM6TkpP9du/I2pUZnJsRMGGvOuIrhjzC1AwHwW+6he4mni6Bp/m8ijn0iOuZuPI2BfkCoSRunpyjnrQKg==}
+    engines: {node: '>=6.0.0'}
     hasBin: true
 
   '@babel/plugin-proposal-decorators@7.28.0':
-    resolution:
-      {
-        integrity: sha512-zOiZqvANjWDUaUS9xMxbMcK/Zccztbe/6ikvUXaG9nsPH3w6qh5UaPGAnirI/WhIbZ8m3OHU0ReyPrknG+ZKeg==
-      }
-    engines: { node: '>=6.9.0' }
+    resolution: {integrity: sha512-zOiZqvANjWDUaUS9xMxbMcK/Zccztbe/6ikvUXaG9nsPH3w6qh5UaPGAnirI/WhIbZ8m3OHU0ReyPrknG+ZKeg==}
+    engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
   '@babel/plugin-syntax-decorators@7.27.1':
-    resolution:
-      {
-        integrity: sha512-YMq8Z87Lhl8EGkmb0MwYkt36QnxC+fzCgrl66ereamPlYToRpIk5nUjKUY3QKLWq8mwUB1BgbeXcTJhZOCDg5A==
-      }
-    engines: { node: '>=6.9.0' }
+    resolution: {integrity: sha512-YMq8Z87Lhl8EGkmb0MwYkt36QnxC+fzCgrl66ereamPlYToRpIk5nUjKUY3QKLWq8mwUB1BgbeXcTJhZOCDg5A==}
+    engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
   '@babel/plugin-syntax-import-attributes@7.27.1':
-    resolution:
-      {
-        integrity: sha512-oFT0FrKHgF53f4vOsZGi2Hh3I35PfSmVs4IBFLFj4dnafP+hIWDLg3VyKmUHfLoLHlyxY4C7DGtmHuJgn+IGww==
-      }
-    engines: { node: '>=6.9.0' }
+    resolution: {integrity: sha512-oFT0FrKHgF53f4vOsZGi2Hh3I35PfSmVs4IBFLFj4dnafP+hIWDLg3VyKmUHfLoLHlyxY4C7DGtmHuJgn+IGww==}
+    engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
   '@babel/plugin-syntax-import-meta@7.10.4':
-    resolution:
-      {
-        integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==
-      }
+    resolution: {integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
   '@babel/plugin-syntax-jsx@7.27.1':
-    resolution:
-      {
-        integrity: sha512-y8YTNIeKoyhGd9O0Jiyzyyqk8gdjnumGTQPsz0xOZOQ2RmkVJeZ1vmmfIvFEKqucBG6axJGBZDE/7iI5suUI/w==
-      }
-    engines: { node: '>=6.9.0' }
+    resolution: {integrity: sha512-y8YTNIeKoyhGd9O0Jiyzyyqk8gdjnumGTQPsz0xOZOQ2RmkVJeZ1vmmfIvFEKqucBG6axJGBZDE/7iI5suUI/w==}
+    engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
   '@babel/plugin-syntax-typescript@7.27.1':
-    resolution:
-      {
-        integrity: sha512-xfYCBMxveHrRMnAWl1ZlPXOZjzkN82THFvLhQhFXFt81Z5HnN+EtUkZhv/zcKpmT3fzmWZB0ywiBrbC3vogbwQ==
-      }
-    engines: { node: '>=6.9.0' }
+    resolution: {integrity: sha512-xfYCBMxveHrRMnAWl1ZlPXOZjzkN82THFvLhQhFXFt81Z5HnN+EtUkZhv/zcKpmT3fzmWZB0ywiBrbC3vogbwQ==}
+    engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
   '@babel/plugin-transform-typescript@7.28.0':
-    resolution:
-      {
-        integrity: sha512-4AEiDEBPIZvLQaWlc9liCavE0xRM0dNca41WtBeM3jgFptfUOSG9z0uteLhq6+3rq+WB6jIvUwKDTpXEHPJ2Vg==
-      }
-    engines: { node: '>=6.9.0' }
+    resolution: {integrity: sha512-4AEiDEBPIZvLQaWlc9liCavE0xRM0dNca41WtBeM3jgFptfUOSG9z0uteLhq6+3rq+WB6jIvUwKDTpXEHPJ2Vg==}
+    engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
   '@babel/runtime@7.28.4':
-    resolution:
-      {
-        integrity: sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==
-      }
-    engines: { node: '>=6.9.0' }
+    resolution: {integrity: sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==}
+    engines: {node: '>=6.9.0'}
 
   '@babel/template@7.27.2':
-    resolution:
-      {
-        integrity: sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==
-      }
-    engines: { node: '>=6.9.0' }
+    resolution: {integrity: sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==}
+    engines: {node: '>=6.9.0'}
 
   '@babel/traverse@7.28.4':
-    resolution:
-      {
-        integrity: sha512-YEzuboP2qvQavAcjgQNVgsvHIDv6ZpwXvcvjmyySP2DIMuByS/6ioU5G9pYrWHM6T2YDfc7xga9iNzYOs12CFQ==
-      }
-    engines: { node: '>=6.9.0' }
+    resolution: {integrity: sha512-YEzuboP2qvQavAcjgQNVgsvHIDv6ZpwXvcvjmyySP2DIMuByS/6ioU5G9pYrWHM6T2YDfc7xga9iNzYOs12CFQ==}
+    engines: {node: '>=6.9.0'}
 
   '@babel/types@7.28.4':
-    resolution:
-      {
-        integrity: sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q==
-      }
-    engines: { node: '>=6.9.0' }
+    resolution: {integrity: sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q==}
+    engines: {node: '>=6.9.0'}
 
-  '@cacheable/memoize@2.0.2':
-    resolution:
-      {
-        integrity: sha512-wPrr7FUiq3Qt4yQyda2/NcOLTJCFcQSU3Am2adP+WLy+sz93/fKTokVTHmtz+rjp4PD7ee0AEOeRVNN6IvIfsg==
-      }
+  '@cacheable/memory@2.0.8':
+    resolution: {integrity: sha512-FvEb29x5wVwu/Kf93IWwsOOEuhHh6dYCJF3vcKLzXc0KXIW181AOzv6ceT4ZpBHDvAfG60eqb+ekmrnLHIy+jw==}
 
-  '@cacheable/memory@2.0.2':
-    resolution:
-      {
-        integrity: sha512-sJTITLfeCI1rg7P3ssaGmQryq235EGT8dXGcx6oZwX5NRnKq9IE6lddlllcOl+oXW+yaeTRddCjo0xrfU6ZySA==
-      }
-
-  '@cacheable/utils@2.0.2':
-    resolution:
-      {
-        integrity: sha512-JTFM3raFhVv8LH95T7YnZbf2YoE9wEtkPPStuRF9a6ExZ103hFvs+QyCuYJ6r0hA9wRtbzgZtwUCoDWxssZd4Q==
-      }
+  '@cacheable/utils@2.4.1':
+    resolution: {integrity: sha512-eiFgzCbIneyMlLOmNG4g9xzF7Hv3Mga4LjxjcSC/ues6VYq2+gUbQI8JqNuw/ZM8tJIeIaBGpswAsqV2V7ApgA==}
 
   '@commitlint/cli@19.8.1':
-    resolution:
-      {
-        integrity: sha512-LXUdNIkspyxrlV6VDHWBmCZRtkEVRpBKxi2Gtw3J54cGWhLCTouVD/Q6ZSaSvd2YaDObWK8mDjrz3TIKtaQMAA==
-      }
-    engines: { node: '>=v18' }
+    resolution: {integrity: sha512-LXUdNIkspyxrlV6VDHWBmCZRtkEVRpBKxi2Gtw3J54cGWhLCTouVD/Q6ZSaSvd2YaDObWK8mDjrz3TIKtaQMAA==}
+    engines: {node: '>=v18'}
     hasBin: true
 
   '@commitlint/config-conventional@19.8.1':
-    resolution:
-      {
-        integrity: sha512-/AZHJL6F6B/G959CsMAzrPKKZjeEiAVifRyEwXxcT6qtqbPwGw+iQxmNS+Bu+i09OCtdNRW6pNpBvgPrtMr9EQ==
-      }
-    engines: { node: '>=v18' }
+    resolution: {integrity: sha512-/AZHJL6F6B/G959CsMAzrPKKZjeEiAVifRyEwXxcT6qtqbPwGw+iQxmNS+Bu+i09OCtdNRW6pNpBvgPrtMr9EQ==}
+    engines: {node: '>=v18'}
 
   '@commitlint/config-validator@19.8.1':
-    resolution:
-      {
-        integrity: sha512-0jvJ4u+eqGPBIzzSdqKNX1rvdbSU1lPNYlfQQRIFnBgLy26BtC0cFnr7c/AyuzExMxWsMOte6MkTi9I3SQ3iGQ==
-      }
-    engines: { node: '>=v18' }
+    resolution: {integrity: sha512-0jvJ4u+eqGPBIzzSdqKNX1rvdbSU1lPNYlfQQRIFnBgLy26BtC0cFnr7c/AyuzExMxWsMOte6MkTi9I3SQ3iGQ==}
+    engines: {node: '>=v18'}
 
   '@commitlint/config-validator@20.0.0':
-    resolution:
-      {
-        integrity: sha512-BeyLMaRIJDdroJuYM2EGhDMGwVBMZna9UiIqV9hxj+J551Ctc6yoGuGSmghOy/qPhBSuhA6oMtbEiTmxECafsg==
-      }
-    engines: { node: '>=v18' }
+    resolution: {integrity: sha512-BeyLMaRIJDdroJuYM2EGhDMGwVBMZna9UiIqV9hxj+J551Ctc6yoGuGSmghOy/qPhBSuhA6oMtbEiTmxECafsg==}
+    engines: {node: '>=v18'}
 
   '@commitlint/ensure@19.8.1':
-    resolution:
-      {
-        integrity: sha512-mXDnlJdvDzSObafjYrOSvZBwkD01cqB4gbnnFuVyNpGUM5ijwU/r/6uqUmBXAAOKRfyEjpkGVZxaDsCVnHAgyw==
-      }
-    engines: { node: '>=v18' }
+    resolution: {integrity: sha512-mXDnlJdvDzSObafjYrOSvZBwkD01cqB4gbnnFuVyNpGUM5ijwU/r/6uqUmBXAAOKRfyEjpkGVZxaDsCVnHAgyw==}
+    engines: {node: '>=v18'}
 
   '@commitlint/execute-rule@19.8.1':
-    resolution:
-      {
-        integrity: sha512-YfJyIqIKWI64Mgvn/sE7FXvVMQER/Cd+s3hZke6cI1xgNT/f6ZAz5heND0QtffH+KbcqAwXDEE1/5niYayYaQA==
-      }
-    engines: { node: '>=v18' }
+    resolution: {integrity: sha512-YfJyIqIKWI64Mgvn/sE7FXvVMQER/Cd+s3hZke6cI1xgNT/f6ZAz5heND0QtffH+KbcqAwXDEE1/5niYayYaQA==}
+    engines: {node: '>=v18'}
 
   '@commitlint/execute-rule@20.0.0':
-    resolution:
-      {
-        integrity: sha512-xyCoOShoPuPL44gVa+5EdZsBVao/pNzpQhkzq3RdtlFdKZtjWcLlUFQHSWBuhk5utKYykeJPSz2i8ABHQA+ZZw==
-      }
-    engines: { node: '>=v18' }
+    resolution: {integrity: sha512-xyCoOShoPuPL44gVa+5EdZsBVao/pNzpQhkzq3RdtlFdKZtjWcLlUFQHSWBuhk5utKYykeJPSz2i8ABHQA+ZZw==}
+    engines: {node: '>=v18'}
 
   '@commitlint/format@19.8.1':
-    resolution:
-      {
-        integrity: sha512-kSJj34Rp10ItP+Eh9oCItiuN/HwGQMXBnIRk69jdOwEW9llW9FlyqcWYbHPSGofmjsqeoxa38UaEA5tsbm2JWw==
-      }
-    engines: { node: '>=v18' }
+    resolution: {integrity: sha512-kSJj34Rp10ItP+Eh9oCItiuN/HwGQMXBnIRk69jdOwEW9llW9FlyqcWYbHPSGofmjsqeoxa38UaEA5tsbm2JWw==}
+    engines: {node: '>=v18'}
 
   '@commitlint/is-ignored@19.8.1':
-    resolution:
-      {
-        integrity: sha512-AceOhEhekBUQ5dzrVhDDsbMaY5LqtN8s1mqSnT2Kz1ERvVZkNihrs3Sfk1Je/rxRNbXYFzKZSHaPsEJJDJV8dg==
-      }
-    engines: { node: '>=v18' }
+    resolution: {integrity: sha512-AceOhEhekBUQ5dzrVhDDsbMaY5LqtN8s1mqSnT2Kz1ERvVZkNihrs3Sfk1Je/rxRNbXYFzKZSHaPsEJJDJV8dg==}
+    engines: {node: '>=v18'}
 
   '@commitlint/lint@19.8.1':
-    resolution:
-      {
-        integrity: sha512-52PFbsl+1EvMuokZXLRlOsdcLHf10isTPlWwoY1FQIidTsTvjKXVXYb7AvtpWkDzRO2ZsqIgPK7bI98x8LRUEw==
-      }
-    engines: { node: '>=v18' }
+    resolution: {integrity: sha512-52PFbsl+1EvMuokZXLRlOsdcLHf10isTPlWwoY1FQIidTsTvjKXVXYb7AvtpWkDzRO2ZsqIgPK7bI98x8LRUEw==}
+    engines: {node: '>=v18'}
 
   '@commitlint/load@19.8.1':
-    resolution:
-      {
-        integrity: sha512-9V99EKG3u7z+FEoe4ikgq7YGRCSukAcvmKQuTtUyiYPnOd9a2/H9Ak1J9nJA1HChRQp9OA/sIKPugGS+FK/k1A==
-      }
-    engines: { node: '>=v18' }
+    resolution: {integrity: sha512-9V99EKG3u7z+FEoe4ikgq7YGRCSukAcvmKQuTtUyiYPnOd9a2/H9Ak1J9nJA1HChRQp9OA/sIKPugGS+FK/k1A==}
+    engines: {node: '>=v18'}
 
   '@commitlint/load@20.0.0':
-    resolution:
-      {
-        integrity: sha512-WiNKO9fDPlLY90Rruw2HqHKcghrmj5+kMDJ4GcTlX1weL8K07Q6b27C179DxnsrjGCRAKVwFKyzxV4x+xDY28Q==
-      }
-    engines: { node: '>=v18' }
+    resolution: {integrity: sha512-WiNKO9fDPlLY90Rruw2HqHKcghrmj5+kMDJ4GcTlX1weL8K07Q6b27C179DxnsrjGCRAKVwFKyzxV4x+xDY28Q==}
+    engines: {node: '>=v18'}
 
   '@commitlint/message@19.8.1':
-    resolution:
-      {
-        integrity: sha512-+PMLQvjRXiU+Ae0Wc+p99EoGEutzSXFVwQfa3jRNUZLNW5odZAyseb92OSBTKCu+9gGZiJASt76Cj3dLTtcTdg==
-      }
-    engines: { node: '>=v18' }
+    resolution: {integrity: sha512-+PMLQvjRXiU+Ae0Wc+p99EoGEutzSXFVwQfa3jRNUZLNW5odZAyseb92OSBTKCu+9gGZiJASt76Cj3dLTtcTdg==}
+    engines: {node: '>=v18'}
 
   '@commitlint/parse@19.8.1':
-    resolution:
-      {
-        integrity: sha512-mmAHYcMBmAgJDKWdkjIGq50X4yB0pSGpxyOODwYmoexxxiUCy5JJT99t1+PEMK7KtsCtzuWYIAXYAiKR+k+/Jw==
-      }
-    engines: { node: '>=v18' }
+    resolution: {integrity: sha512-mmAHYcMBmAgJDKWdkjIGq50X4yB0pSGpxyOODwYmoexxxiUCy5JJT99t1+PEMK7KtsCtzuWYIAXYAiKR+k+/Jw==}
+    engines: {node: '>=v18'}
 
   '@commitlint/read@19.8.1':
-    resolution:
-      {
-        integrity: sha512-03Jbjb1MqluaVXKHKRuGhcKWtSgh3Jizqy2lJCRbRrnWpcM06MYm8th59Xcns8EqBYvo0Xqb+2DoZFlga97uXQ==
-      }
-    engines: { node: '>=v18' }
+    resolution: {integrity: sha512-03Jbjb1MqluaVXKHKRuGhcKWtSgh3Jizqy2lJCRbRrnWpcM06MYm8th59Xcns8EqBYvo0Xqb+2DoZFlga97uXQ==}
+    engines: {node: '>=v18'}
 
   '@commitlint/resolve-extends@19.8.1':
-    resolution:
-      {
-        integrity: sha512-GM0mAhFk49I+T/5UCYns5ayGStkTt4XFFrjjf0L4S26xoMTSkdCf9ZRO8en1kuopC4isDFuEm7ZOm/WRVeElVg==
-      }
-    engines: { node: '>=v18' }
+    resolution: {integrity: sha512-GM0mAhFk49I+T/5UCYns5ayGStkTt4XFFrjjf0L4S26xoMTSkdCf9ZRO8en1kuopC4isDFuEm7ZOm/WRVeElVg==}
+    engines: {node: '>=v18'}
 
   '@commitlint/resolve-extends@20.0.0':
-    resolution:
-      {
-        integrity: sha512-BA4vva1hY8y0/Hl80YDhe9TJZpRFMsUYzVxvwTLPTEBotbGx/gS49JlVvtF1tOCKODQp7pS7CbxCpiceBgp3Dg==
-      }
-    engines: { node: '>=v18' }
+    resolution: {integrity: sha512-BA4vva1hY8y0/Hl80YDhe9TJZpRFMsUYzVxvwTLPTEBotbGx/gS49JlVvtF1tOCKODQp7pS7CbxCpiceBgp3Dg==}
+    engines: {node: '>=v18'}
 
   '@commitlint/rules@19.8.1':
-    resolution:
-      {
-        integrity: sha512-Hnlhd9DyvGiGwjfjfToMi1dsnw1EXKGJNLTcsuGORHz6SS9swRgkBsou33MQ2n51/boIDrbsg4tIBbRpEWK2kw==
-      }
-    engines: { node: '>=v18' }
+    resolution: {integrity: sha512-Hnlhd9DyvGiGwjfjfToMi1dsnw1EXKGJNLTcsuGORHz6SS9swRgkBsou33MQ2n51/boIDrbsg4tIBbRpEWK2kw==}
+    engines: {node: '>=v18'}
 
   '@commitlint/to-lines@19.8.1':
-    resolution:
-      {
-        integrity: sha512-98Mm5inzbWTKuZQr2aW4SReY6WUukdWXuZhrqf1QdKPZBCCsXuG87c+iP0bwtD6DBnmVVQjgp4whoHRVixyPBg==
-      }
-    engines: { node: '>=v18' }
+    resolution: {integrity: sha512-98Mm5inzbWTKuZQr2aW4SReY6WUukdWXuZhrqf1QdKPZBCCsXuG87c+iP0bwtD6DBnmVVQjgp4whoHRVixyPBg==}
+    engines: {node: '>=v18'}
 
   '@commitlint/top-level@19.8.1':
-    resolution:
-      {
-        integrity: sha512-Ph8IN1IOHPSDhURCSXBz44+CIu+60duFwRsg6HqaISFHQHbmBtxVw4ZrFNIYUzEP7WwrNPxa2/5qJ//NK1FGcw==
-      }
-    engines: { node: '>=v18' }
+    resolution: {integrity: sha512-Ph8IN1IOHPSDhURCSXBz44+CIu+60duFwRsg6HqaISFHQHbmBtxVw4ZrFNIYUzEP7WwrNPxa2/5qJ//NK1FGcw==}
+    engines: {node: '>=v18'}
 
   '@commitlint/types@19.8.1':
-    resolution:
-      {
-        integrity: sha512-/yCrWGCoA1SVKOks25EGadP9Pnj0oAIHGpl2wH2M2Y46dPM2ueb8wyCVOD7O3WCTkaJ0IkKvzhl1JY7+uCT2Dw==
-      }
-    engines: { node: '>=v18' }
+    resolution: {integrity: sha512-/yCrWGCoA1SVKOks25EGadP9Pnj0oAIHGpl2wH2M2Y46dPM2ueb8wyCVOD7O3WCTkaJ0IkKvzhl1JY7+uCT2Dw==}
+    engines: {node: '>=v18'}
 
   '@commitlint/types@20.0.0':
-    resolution:
-      {
-        integrity: sha512-bVUNBqG6aznYcYjTjnc3+Cat/iBgbgpflxbIBTnsHTX0YVpnmINPEkSRWymT2Q8aSH3Y7aKnEbunilkYe8TybA==
-      }
-    engines: { node: '>=v18' }
+    resolution: {integrity: sha512-bVUNBqG6aznYcYjTjnc3+Cat/iBgbgpflxbIBTnsHTX0YVpnmINPEkSRWymT2Q8aSH3Y7aKnEbunilkYe8TybA==}
+    engines: {node: '>=v18'}
 
   '@csstools/css-parser-algorithms@3.0.5':
-    resolution:
-      {
-        integrity: sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==}
+    engines: {node: '>=18'}
     peerDependencies:
       '@csstools/css-tokenizer': ^3.0.4
 
+  '@csstools/css-syntax-patches-for-csstree@1.1.3':
+    resolution: {integrity: sha512-SH60bMfrRCJF3morcdk57WklujF4Jr/EsQUzqkarfHXEFcAR1gg7fS/chAE922Sehgzc1/+Tz5H3Ypa1HiEKrg==}
+    peerDependencies:
+      css-tree: ^3.2.1
+    peerDependenciesMeta:
+      css-tree:
+        optional: true
+
   '@csstools/css-tokenizer@3.0.4':
-    resolution:
-      {
-        integrity: sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==}
+    engines: {node: '>=18'}
 
   '@csstools/media-query-list-parser@4.0.3':
-    resolution:
-      {
-        integrity: sha512-HAYH7d3TLRHDOUQK4mZKf9k9Ph/m8Akstg66ywKR4SFAigjs3yBiUeZtFxywiTm5moZMAp/5W/ZuFnNXXYLuuQ==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-HAYH7d3TLRHDOUQK4mZKf9k9Ph/m8Akstg66ywKR4SFAigjs3yBiUeZtFxywiTm5moZMAp/5W/ZuFnNXXYLuuQ==}
+    engines: {node: '>=18'}
     peerDependencies:
       '@csstools/css-parser-algorithms': ^3.0.5
       '@csstools/css-tokenizer': ^3.0.4
 
   '@csstools/selector-specificity@5.0.0':
-    resolution:
-      {
-        integrity: sha512-PCqQV3c4CoVm3kdPhyeZ07VmBRdH2EpMFA/pd9OASpOEC3aXNGoqPDAZ80D0cLpMBxnmk0+yNhGsEx31hq7Gtw==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-PCqQV3c4CoVm3kdPhyeZ07VmBRdH2EpMFA/pd9OASpOEC3aXNGoqPDAZ80D0cLpMBxnmk0+yNhGsEx31hq7Gtw==}
+    engines: {node: '>=18'}
     peerDependencies:
       postcss-selector-parser: ^7.0.0
 
   '@ctrl/tinycolor@3.6.1':
-    resolution:
-      {
-        integrity: sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==
-      }
-    engines: { node: '>=10' }
+    resolution: {integrity: sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==}
+    engines: {node: '>=10'}
 
   '@dual-bundle/import-meta-resolve@4.2.1':
-    resolution:
-      {
-        integrity: sha512-id+7YRUgoUX6CgV0DtuhirQWodeeA7Lf4i2x71JS/vtA5pRb/hIGWlw+G6MeXvsM+MXrz0VAydTGElX1rAfgPg==
-      }
+    resolution: {integrity: sha512-id+7YRUgoUX6CgV0DtuhirQWodeeA7Lf4i2x71JS/vtA5pRb/hIGWlw+G6MeXvsM+MXrz0VAydTGElX1rAfgPg==}
 
   '@element-plus/icons-vue@2.3.2':
-    resolution:
-      {
-        integrity: sha512-OzIuTaIfC8QXEPmJvB4Y4kw34rSXdCJzxcD1kFStBvr8bK6X1zQAYDo0CNMjojnfTqRQCJ0I7prlErcoRiET2A==
-      }
+    resolution: {integrity: sha512-OzIuTaIfC8QXEPmJvB4Y4kw34rSXdCJzxcD1kFStBvr8bK6X1zQAYDo0CNMjojnfTqRQCJ0I7prlErcoRiET2A==}
     peerDependencies:
       vue: ^3.2.0
 
   '@esbuild/aix-ppc64@0.25.10':
-    resolution:
-      {
-        integrity: sha512-0NFWnA+7l41irNuaSVlLfgNT12caWJVLzp5eAVhZ0z1qpxbockccEt3s+149rE64VUI3Ml2zt8Nv5JVc4QXTsw==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-0NFWnA+7l41irNuaSVlLfgNT12caWJVLzp5eAVhZ0z1qpxbockccEt3s+149rE64VUI3Ml2zt8Nv5JVc4QXTsw==}
+    engines: {node: '>=18'}
     cpu: [ppc64]
     os: [aix]
 
   '@esbuild/android-arm64@0.25.10':
-    resolution:
-      {
-        integrity: sha512-LSQa7eDahypv/VO6WKohZGPSJDq5OVOo3UoFR1E4t4Gj1W7zEQMUhI+lo81H+DtB+kP+tDgBp+M4oNCwp6kffg==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-LSQa7eDahypv/VO6WKohZGPSJDq5OVOo3UoFR1E4t4Gj1W7zEQMUhI+lo81H+DtB+kP+tDgBp+M4oNCwp6kffg==}
+    engines: {node: '>=18'}
     cpu: [arm64]
     os: [android]
 
   '@esbuild/android-arm@0.25.10':
-    resolution:
-      {
-        integrity: sha512-dQAxF1dW1C3zpeCDc5KqIYuZ1tgAdRXNoZP7vkBIRtKZPYe2xVr/d3SkirklCHudW1B45tGiUlz2pUWDfbDD4w==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-dQAxF1dW1C3zpeCDc5KqIYuZ1tgAdRXNoZP7vkBIRtKZPYe2xVr/d3SkirklCHudW1B45tGiUlz2pUWDfbDD4w==}
+    engines: {node: '>=18'}
     cpu: [arm]
     os: [android]
 
   '@esbuild/android-x64@0.25.10':
-    resolution:
-      {
-        integrity: sha512-MiC9CWdPrfhibcXwr39p9ha1x0lZJ9KaVfvzA0Wxwz9ETX4v5CHfF09bx935nHlhi+MxhA63dKRRQLiVgSUtEg==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-MiC9CWdPrfhibcXwr39p9ha1x0lZJ9KaVfvzA0Wxwz9ETX4v5CHfF09bx935nHlhi+MxhA63dKRRQLiVgSUtEg==}
+    engines: {node: '>=18'}
     cpu: [x64]
     os: [android]
 
   '@esbuild/darwin-arm64@0.25.10':
-    resolution:
-      {
-        integrity: sha512-JC74bdXcQEpW9KkV326WpZZjLguSZ3DfS8wrrvPMHgQOIEIG/sPXEN/V8IssoJhbefLRcRqw6RQH2NnpdprtMA==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-JC74bdXcQEpW9KkV326WpZZjLguSZ3DfS8wrrvPMHgQOIEIG/sPXEN/V8IssoJhbefLRcRqw6RQH2NnpdprtMA==}
+    engines: {node: '>=18'}
     cpu: [arm64]
     os: [darwin]
 
   '@esbuild/darwin-x64@0.25.10':
-    resolution:
-      {
-        integrity: sha512-tguWg1olF6DGqzws97pKZ8G2L7Ig1vjDmGTwcTuYHbuU6TTjJe5FXbgs5C1BBzHbJ2bo1m3WkQDbWO2PvamRcg==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-tguWg1olF6DGqzws97pKZ8G2L7Ig1vjDmGTwcTuYHbuU6TTjJe5FXbgs5C1BBzHbJ2bo1m3WkQDbWO2PvamRcg==}
+    engines: {node: '>=18'}
     cpu: [x64]
     os: [darwin]
 
   '@esbuild/freebsd-arm64@0.25.10':
-    resolution:
-      {
-        integrity: sha512-3ZioSQSg1HT2N05YxeJWYR+Libe3bREVSdWhEEgExWaDtyFbbXWb49QgPvFH8u03vUPX10JhJPcz7s9t9+boWg==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-3ZioSQSg1HT2N05YxeJWYR+Libe3bREVSdWhEEgExWaDtyFbbXWb49QgPvFH8u03vUPX10JhJPcz7s9t9+boWg==}
+    engines: {node: '>=18'}
     cpu: [arm64]
     os: [freebsd]
 
   '@esbuild/freebsd-x64@0.25.10':
-    resolution:
-      {
-        integrity: sha512-LLgJfHJk014Aa4anGDbh8bmI5Lk+QidDmGzuC2D+vP7mv/GeSN+H39zOf7pN5N8p059FcOfs2bVlrRr4SK9WxA==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-LLgJfHJk014Aa4anGDbh8bmI5Lk+QidDmGzuC2D+vP7mv/GeSN+H39zOf7pN5N8p059FcOfs2bVlrRr4SK9WxA==}
+    engines: {node: '>=18'}
     cpu: [x64]
     os: [freebsd]
 
   '@esbuild/linux-arm64@0.25.10':
-    resolution:
-      {
-        integrity: sha512-5luJWN6YKBsawd5f9i4+c+geYiVEw20FVW5x0v1kEMWNq8UctFjDiMATBxLvmmHA4bf7F6hTRaJgtghFr9iziQ==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-5luJWN6YKBsawd5f9i4+c+geYiVEw20FVW5x0v1kEMWNq8UctFjDiMATBxLvmmHA4bf7F6hTRaJgtghFr9iziQ==}
+    engines: {node: '>=18'}
     cpu: [arm64]
     os: [linux]
 
   '@esbuild/linux-arm@0.25.10':
-    resolution:
-      {
-        integrity: sha512-oR31GtBTFYCqEBALI9r6WxoU/ZofZl962pouZRTEYECvNF/dtXKku8YXcJkhgK/beU+zedXfIzHijSRapJY3vg==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-oR31GtBTFYCqEBALI9r6WxoU/ZofZl962pouZRTEYECvNF/dtXKku8YXcJkhgK/beU+zedXfIzHijSRapJY3vg==}
+    engines: {node: '>=18'}
     cpu: [arm]
     os: [linux]
 
   '@esbuild/linux-ia32@0.25.10':
-    resolution:
-      {
-        integrity: sha512-NrSCx2Kim3EnnWgS4Txn0QGt0Xipoumb6z6sUtl5bOEZIVKhzfyp/Lyw4C1DIYvzeW/5mWYPBFJU3a/8Yr75DQ==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-NrSCx2Kim3EnnWgS4Txn0QGt0Xipoumb6z6sUtl5bOEZIVKhzfyp/Lyw4C1DIYvzeW/5mWYPBFJU3a/8Yr75DQ==}
+    engines: {node: '>=18'}
     cpu: [ia32]
     os: [linux]
 
   '@esbuild/linux-loong64@0.25.10':
-    resolution:
-      {
-        integrity: sha512-xoSphrd4AZda8+rUDDfD9J6FUMjrkTz8itpTITM4/xgerAZZcFW7Dv+sun7333IfKxGG8gAq+3NbfEMJfiY+Eg==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-xoSphrd4AZda8+rUDDfD9J6FUMjrkTz8itpTITM4/xgerAZZcFW7Dv+sun7333IfKxGG8gAq+3NbfEMJfiY+Eg==}
+    engines: {node: '>=18'}
     cpu: [loong64]
     os: [linux]
 
   '@esbuild/linux-mips64el@0.25.10':
-    resolution:
-      {
-        integrity: sha512-ab6eiuCwoMmYDyTnyptoKkVS3k8fy/1Uvq7Dj5czXI6DF2GqD2ToInBI0SHOp5/X1BdZ26RKc5+qjQNGRBelRA==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-ab6eiuCwoMmYDyTnyptoKkVS3k8fy/1Uvq7Dj5czXI6DF2GqD2ToInBI0SHOp5/X1BdZ26RKc5+qjQNGRBelRA==}
+    engines: {node: '>=18'}
     cpu: [mips64el]
     os: [linux]
 
   '@esbuild/linux-ppc64@0.25.10':
-    resolution:
-      {
-        integrity: sha512-NLinzzOgZQsGpsTkEbdJTCanwA5/wozN9dSgEl12haXJBzMTpssebuXR42bthOF3z7zXFWH1AmvWunUCkBE4EA==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-NLinzzOgZQsGpsTkEbdJTCanwA5/wozN9dSgEl12haXJBzMTpssebuXR42bthOF3z7zXFWH1AmvWunUCkBE4EA==}
+    engines: {node: '>=18'}
     cpu: [ppc64]
     os: [linux]
 
   '@esbuild/linux-riscv64@0.25.10':
-    resolution:
-      {
-        integrity: sha512-FE557XdZDrtX8NMIeA8LBJX3dC2M8VGXwfrQWU7LB5SLOajfJIxmSdyL/gU1m64Zs9CBKvm4UAuBp5aJ8OgnrA==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-FE557XdZDrtX8NMIeA8LBJX3dC2M8VGXwfrQWU7LB5SLOajfJIxmSdyL/gU1m64Zs9CBKvm4UAuBp5aJ8OgnrA==}
+    engines: {node: '>=18'}
     cpu: [riscv64]
     os: [linux]
 
   '@esbuild/linux-s390x@0.25.10':
-    resolution:
-      {
-        integrity: sha512-3BBSbgzuB9ajLoVZk0mGu+EHlBwkusRmeNYdqmznmMc9zGASFjSsxgkNsqmXugpPk00gJ0JNKh/97nxmjctdew==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-3BBSbgzuB9ajLoVZk0mGu+EHlBwkusRmeNYdqmznmMc9zGASFjSsxgkNsqmXugpPk00gJ0JNKh/97nxmjctdew==}
+    engines: {node: '>=18'}
     cpu: [s390x]
     os: [linux]
 
   '@esbuild/linux-x64@0.25.10':
-    resolution:
-      {
-        integrity: sha512-QSX81KhFoZGwenVyPoberggdW1nrQZSvfVDAIUXr3WqLRZGZqWk/P4T8p2SP+de2Sr5HPcvjhcJzEiulKgnxtA==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-QSX81KhFoZGwenVyPoberggdW1nrQZSvfVDAIUXr3WqLRZGZqWk/P4T8p2SP+de2Sr5HPcvjhcJzEiulKgnxtA==}
+    engines: {node: '>=18'}
     cpu: [x64]
     os: [linux]
 
   '@esbuild/netbsd-arm64@0.25.10':
-    resolution:
-      {
-        integrity: sha512-AKQM3gfYfSW8XRk8DdMCzaLUFB15dTrZfnX8WXQoOUpUBQ+NaAFCP1kPS/ykbbGYz7rxn0WS48/81l9hFl3u4A==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-AKQM3gfYfSW8XRk8DdMCzaLUFB15dTrZfnX8WXQoOUpUBQ+NaAFCP1kPS/ykbbGYz7rxn0WS48/81l9hFl3u4A==}
+    engines: {node: '>=18'}
     cpu: [arm64]
     os: [netbsd]
 
   '@esbuild/netbsd-x64@0.25.10':
-    resolution:
-      {
-        integrity: sha512-7RTytDPGU6fek/hWuN9qQpeGPBZFfB4zZgcz2VK2Z5VpdUxEI8JKYsg3JfO0n/Z1E/6l05n0unDCNc4HnhQGig==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-7RTytDPGU6fek/hWuN9qQpeGPBZFfB4zZgcz2VK2Z5VpdUxEI8JKYsg3JfO0n/Z1E/6l05n0unDCNc4HnhQGig==}
+    engines: {node: '>=18'}
     cpu: [x64]
     os: [netbsd]
 
   '@esbuild/openbsd-arm64@0.25.10':
-    resolution:
-      {
-        integrity: sha512-5Se0VM9Wtq797YFn+dLimf2Zx6McttsH2olUBsDml+lm0GOCRVebRWUvDtkY4BWYv/3NgzS8b/UM3jQNh5hYyw==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-5Se0VM9Wtq797YFn+dLimf2Zx6McttsH2olUBsDml+lm0GOCRVebRWUvDtkY4BWYv/3NgzS8b/UM3jQNh5hYyw==}
+    engines: {node: '>=18'}
     cpu: [arm64]
     os: [openbsd]
 
   '@esbuild/openbsd-x64@0.25.10':
-    resolution:
-      {
-        integrity: sha512-XkA4frq1TLj4bEMB+2HnI0+4RnjbuGZfet2gs/LNs5Hc7D89ZQBHQ0gL2ND6Lzu1+QVkjp3x1gIcPKzRNP8bXw==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-XkA4frq1TLj4bEMB+2HnI0+4RnjbuGZfet2gs/LNs5Hc7D89ZQBHQ0gL2ND6Lzu1+QVkjp3x1gIcPKzRNP8bXw==}
+    engines: {node: '>=18'}
     cpu: [x64]
     os: [openbsd]
 
   '@esbuild/openharmony-arm64@0.25.10':
-    resolution:
-      {
-        integrity: sha512-AVTSBhTX8Y/Fz6OmIVBip9tJzZEUcY8WLh7I59+upa5/GPhh2/aM6bvOMQySspnCCHvFi79kMtdJS1w0DXAeag==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-AVTSBhTX8Y/Fz6OmIVBip9tJzZEUcY8WLh7I59+upa5/GPhh2/aM6bvOMQySspnCCHvFi79kMtdJS1w0DXAeag==}
+    engines: {node: '>=18'}
     cpu: [arm64]
     os: [openharmony]
 
   '@esbuild/sunos-x64@0.25.10':
-    resolution:
-      {
-        integrity: sha512-fswk3XT0Uf2pGJmOpDB7yknqhVkJQkAQOcW/ccVOtfx05LkbWOaRAtn5SaqXypeKQra1QaEa841PgrSL9ubSPQ==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-fswk3XT0Uf2pGJmOpDB7yknqhVkJQkAQOcW/ccVOtfx05LkbWOaRAtn5SaqXypeKQra1QaEa841PgrSL9ubSPQ==}
+    engines: {node: '>=18'}
     cpu: [x64]
     os: [sunos]
 
   '@esbuild/win32-arm64@0.25.10':
-    resolution:
-      {
-        integrity: sha512-ah+9b59KDTSfpaCg6VdJoOQvKjI33nTaQr4UluQwW7aEwZQsbMCfTmfEO4VyewOxx4RaDT/xCy9ra2GPWmO7Kw==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-ah+9b59KDTSfpaCg6VdJoOQvKjI33nTaQr4UluQwW7aEwZQsbMCfTmfEO4VyewOxx4RaDT/xCy9ra2GPWmO7Kw==}
+    engines: {node: '>=18'}
     cpu: [arm64]
     os: [win32]
 
   '@esbuild/win32-ia32@0.25.10':
-    resolution:
-      {
-        integrity: sha512-QHPDbKkrGO8/cz9LKVnJU22HOi4pxZnZhhA2HYHez5Pz4JeffhDjf85E57Oyco163GnzNCVkZK0b/n4Y0UHcSw==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-QHPDbKkrGO8/cz9LKVnJU22HOi4pxZnZhhA2HYHez5Pz4JeffhDjf85E57Oyco163GnzNCVkZK0b/n4Y0UHcSw==}
+    engines: {node: '>=18'}
     cpu: [ia32]
     os: [win32]
 
   '@esbuild/win32-x64@0.25.10':
-    resolution:
-      {
-        integrity: sha512-9KpxSVFCu0iK1owoez6aC/s/EdUQLDN3adTxGCqxMVhrPDj6bt5dbrHDXUuq+Bs2vATFBBrQS5vdQ/Ed2P+nbw==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-9KpxSVFCu0iK1owoez6aC/s/EdUQLDN3adTxGCqxMVhrPDj6bt5dbrHDXUuq+Bs2vATFBBrQS5vdQ/Ed2P+nbw==}
+    engines: {node: '>=18'}
     cpu: [x64]
     os: [win32]
 
   '@eslint-community/eslint-utils@4.9.0':
-    resolution:
-      {
-        integrity: sha512-ayVFHdtZ+hsq1t2Dy24wCmGXGe4q9Gu3smhLYALJrr473ZH27MsnSL+LKUlimp4BWJqMDMLmPpx/Q9R3OAlL4g==
-      }
-    engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
+    resolution: {integrity: sha512-ayVFHdtZ+hsq1t2Dy24wCmGXGe4q9Gu3smhLYALJrr473ZH27MsnSL+LKUlimp4BWJqMDMLmPpx/Q9R3OAlL4g==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
 
   '@eslint-community/regexpp@4.12.1':
-    resolution:
-      {
-        integrity: sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==
-      }
-    engines: { node: ^12.0.0 || ^14.0.0 || >=16.0.0 }
+    resolution: {integrity: sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
 
   '@eslint/config-array@0.21.0':
-    resolution:
-      {
-        integrity: sha512-ENIdc4iLu0d93HeYirvKmrzshzofPw6VkZRKQGe9Nv46ZnWUzcF1xV01dcvEg/1wXUR61OmmlSfyeyO7EvjLxQ==
-      }
-    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
+    resolution: {integrity: sha512-ENIdc4iLu0d93HeYirvKmrzshzofPw6VkZRKQGe9Nv46ZnWUzcF1xV01dcvEg/1wXUR61OmmlSfyeyO7EvjLxQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@eslint/config-helpers@0.3.1':
-    resolution:
-      {
-        integrity: sha512-xR93k9WhrDYpXHORXpxVL5oHj3Era7wo6k/Wd8/IsQNnZUTzkGS29lyn3nAT05v6ltUuTFVCCYDEGfy2Or/sPA==
-      }
-    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
+    resolution: {integrity: sha512-xR93k9WhrDYpXHORXpxVL5oHj3Era7wo6k/Wd8/IsQNnZUTzkGS29lyn3nAT05v6ltUuTFVCCYDEGfy2Or/sPA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@eslint/core@0.15.2':
-    resolution:
-      {
-        integrity: sha512-78Md3/Rrxh83gCxoUc0EiciuOHsIITzLy53m3d9UyiW8y9Dj2D29FeETqyKA+BRK76tnTp6RXWb3pCay8Oyomg==
-      }
-    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
+    resolution: {integrity: sha512-78Md3/Rrxh83gCxoUc0EiciuOHsIITzLy53m3d9UyiW8y9Dj2D29FeETqyKA+BRK76tnTp6RXWb3pCay8Oyomg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@eslint/eslintrc@3.3.1':
-    resolution:
-      {
-        integrity: sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==
-      }
-    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
+    resolution: {integrity: sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@eslint/js@9.36.0':
-    resolution:
-      {
-        integrity: sha512-uhCbYtYynH30iZErszX78U+nR3pJU3RHGQ57NXy5QupD4SBVwDeU8TNBy+MjMngc1UyIW9noKqsRqfjQTBU2dw==
-      }
-    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
+    resolution: {integrity: sha512-uhCbYtYynH30iZErszX78U+nR3pJU3RHGQ57NXy5QupD4SBVwDeU8TNBy+MjMngc1UyIW9noKqsRqfjQTBU2dw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@eslint/object-schema@2.1.6':
-    resolution:
-      {
-        integrity: sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==
-      }
-    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
+    resolution: {integrity: sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@eslint/plugin-kit@0.3.5':
-    resolution:
-      {
-        integrity: sha512-Z5kJ+wU3oA7MMIqVR9tyZRtjYPr4OC004Q4Rw7pgOKUOKkJfZ3O24nz3WYfGRpMDNmcOi3TwQOmgm7B7Tpii0w==
-      }
-    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
+    resolution: {integrity: sha512-Z5kJ+wU3oA7MMIqVR9tyZRtjYPr4OC004Q4Rw7pgOKUOKkJfZ3O24nz3WYfGRpMDNmcOi3TwQOmgm7B7Tpii0w==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@fast-csv/format@4.3.5':
+    resolution: {integrity: sha512-8iRn6QF3I8Ak78lNAa+Gdl5MJJBM5vRHivFtMRUWINdevNo00K7OXxS2PshawLKTejVwieIlPmK5YlLu6w4u8A==}
+
+  '@fast-csv/parse@4.3.6':
+    resolution: {integrity: sha512-uRsLYksqpbDmWaSmzvJcuApSEe38+6NQZBUsuAyMZKqHxH0g1wcJgsKUvN3WC8tewaqFjBMMGrkHmC+T7k8LvA==}
 
   '@floating-ui/core@1.7.3':
-    resolution:
-      {
-        integrity: sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==
-      }
+    resolution: {integrity: sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==}
 
   '@floating-ui/dom@1.7.4':
-    resolution:
-      {
-        integrity: sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==
-      }
+    resolution: {integrity: sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==}
 
   '@floating-ui/utils@0.2.10':
-    resolution:
-      {
-        integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==
-      }
+    resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
 
   '@humanfs/core@0.19.1':
-    resolution:
-      {
-        integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==
-      }
-    engines: { node: '>=18.18.0' }
+    resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
+    engines: {node: '>=18.18.0'}
 
   '@humanfs/node@0.16.7':
-    resolution:
-      {
-        integrity: sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==
-      }
-    engines: { node: '>=18.18.0' }
+    resolution: {integrity: sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==}
+    engines: {node: '>=18.18.0'}
 
   '@humanwhocodes/module-importer@1.0.1':
-    resolution:
-      {
-        integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==
-      }
-    engines: { node: '>=12.22' }
+    resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
+    engines: {node: '>=12.22'}
 
   '@humanwhocodes/retry@0.4.3':
-    resolution:
-      {
-        integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==
-      }
-    engines: { node: '>=18.18' }
+    resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
+    engines: {node: '>=18.18'}
 
   '@iconify/types@2.0.0':
-    resolution:
-      {
-        integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==
-      }
+    resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
+
+  '@iconify/utils@2.3.0':
+    resolution: {integrity: sha512-GmQ78prtwYW6EtzXRU1rY+KwOKfz32PD7iJh6Iyqw68GiKuoZ2A6pRtzWONz5VQJbp50mEjXh/7NkumtrAgRKA==}
 
   '@iconify/vue@5.0.0':
-    resolution:
-      {
-        integrity: sha512-C+KuEWIF5nSBrobFJhT//JS87OZ++QDORB6f2q2Wm6fl2mueSTpFBeBsveK0KW9hWiZ4mNiPjsh6Zs4jjdROSg==
-      }
+    resolution: {integrity: sha512-C+KuEWIF5nSBrobFJhT//JS87OZ++QDORB6f2q2Wm6fl2mueSTpFBeBsveK0KW9hWiZ4mNiPjsh6Zs4jjdROSg==}
     peerDependencies:
       vue: '>=3'
 
-  '@intlify/core-base@9.14.5':
-    resolution:
-      {
-        integrity: sha512-5ah5FqZG4pOoHjkvs8mjtv+gPKYU0zCISaYNjBNNqYiaITxW8ZtVih3GS/oTOqN8d9/mDLyrjD46GBApNxmlsA==
-      }
-    engines: { node: '>= 16' }
+  '@intlify/core-base@11.4.0':
+    resolution: {integrity: sha512-nlxFOnmjJgVkL1PsuSMagyh3qIHTwc2KlO2R3qQQV1ydrcwh1XpM7opWUGqvGaLlktttopDzbLBpr/k5tvbNmA==}
+    engines: {node: '>= 16'}
 
-  '@intlify/message-compiler@9.14.5':
-    resolution:
-      {
-        integrity: sha512-IHzgEu61/YIpQV5Pc3aRWScDcnFKWvQA9kigcINcCBXN8mbW+vk9SK+lDxA6STzKQsVJxUPg9ACC52pKKo3SVQ==
-      }
-    engines: { node: '>= 16' }
+  '@intlify/devtools-types@11.4.0':
+    resolution: {integrity: sha512-LtQ04kG8/2Nv6AbuINpkjODuhKHdd+MGLlXKW3I0GTCeDsDIBZUot82nnyK7D6+qersF08FqSvoN/eGPcL3c7Q==}
+    engines: {node: '>= 16'}
 
-  '@intlify/shared@9.14.5':
-    resolution:
-      {
-        integrity: sha512-9gB+E53BYuAEMhbCAxVgG38EZrk59sxBtv3jSizNL2hEWlgjBjAw1AwpLHtNaeda12pe6W20OGEa0TwuMSRbyQ==
-      }
-    engines: { node: '>= 16' }
+  '@intlify/message-compiler@11.4.0':
+    resolution: {integrity: sha512-v455gVZqMb0er63Wd/akX8DXTnwSubgrgQaRigLB60V3xpnq3B99oPvGXW+N4G/5QFt8Ls84FJ8qHJUVnRCs1A==}
+    engines: {node: '>= 16'}
+
+  '@intlify/shared@11.4.0':
+    resolution: {integrity: sha512-r9qUeLeO0TMZmUZ+mXS6IGQ6xwzZJaVMK6j4CdoA3eQP8xp3JtCfwkZ30gB4+knlN40pmBdDXgx85SWhMCzHng==}
+    engines: {node: '>= 16'}
+
+  '@isaacs/cliui@8.0.2':
+    resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
+    engines: {node: '>=12'}
 
   '@isaacs/fs-minipass@4.0.1':
-    resolution:
-      {
-        integrity: sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==
-      }
-    engines: { node: '>=18.0.0' }
+    resolution: {integrity: sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==}
+    engines: {node: '>=18.0.0'}
 
   '@jridgewell/gen-mapping@0.3.13':
-    resolution:
-      {
-        integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==
-      }
+    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
 
   '@jridgewell/remapping@2.3.5':
-    resolution:
-      {
-        integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==
-      }
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
 
   '@jridgewell/resolve-uri@3.1.2':
-    resolution:
-      {
-        integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==
-      }
-    engines: { node: '>=6.0.0' }
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
 
   '@jridgewell/source-map@0.3.11':
-    resolution:
-      {
-        integrity: sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==
-      }
+    resolution: {integrity: sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==}
 
   '@jridgewell/sourcemap-codec@1.5.5':
-    resolution:
-      {
-        integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==
-      }
+    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
 
   '@jridgewell/trace-mapping@0.3.31':
-    resolution:
-      {
-        integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==
-      }
+    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
 
-  '@keyv/bigmap@1.0.2':
-    resolution:
-      {
-        integrity: sha512-KR03xkEZlAZNF4IxXgVXb+uNIVNvwdh8UwI0cnc7WI6a+aQcDp8GL80qVfeB4E5NpsKJzou5jU0r6yLSSbMOtA==
-      }
-    engines: { node: '>= 18' }
+  '@keyv/bigmap@1.3.1':
+    resolution: {integrity: sha512-WbzE9sdmQtKy8vrNPa9BRnwZh5UF4s1KTmSK0KUVLo3eff5BlQNNWDnFOouNpKfPKDnms9xynJjsMYjMaT/aFQ==}
+    engines: {node: '>= 18'}
+    peerDependencies:
+      keyv: ^5.6.0
 
   '@keyv/serialize@1.1.1':
-    resolution:
-      {
-        integrity: sha512-dXn3FZhPv0US+7dtJsIi2R+c7qWYiReoEh5zUntWCf4oSpMNib8FDhSoed6m3QyZdx5hK7iLFkYk3rNxwt8vTA==
-      }
+    resolution: {integrity: sha512-dXn3FZhPv0US+7dtJsIi2R+c7qWYiReoEh5zUntWCf4oSpMNib8FDhSoed6m3QyZdx5hK7iLFkYk3rNxwt8vTA==}
 
   '@nodelib/fs.scandir@2.1.5':
-    resolution:
-      {
-        integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==
-      }
-    engines: { node: '>= 8' }
+    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
+    engines: {node: '>= 8'}
 
   '@nodelib/fs.stat@2.0.5':
-    resolution:
-      {
-        integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
-      }
-    engines: { node: '>= 8' }
+    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
+    engines: {node: '>= 8'}
 
   '@nodelib/fs.walk@1.2.8':
-    resolution:
-      {
-        integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==
-      }
-    engines: { node: '>= 8' }
+    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
+    engines: {node: '>= 8'}
+
+  '@one-ini/wasm@0.1.1':
+    resolution: {integrity: sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==}
 
   '@parcel/watcher-android-arm64@2.5.1':
-    resolution:
-      {
-        integrity: sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==
-      }
-    engines: { node: '>= 10.0.0' }
+    resolution: {integrity: sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==}
+    engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [android]
 
   '@parcel/watcher-darwin-arm64@2.5.1':
-    resolution:
-      {
-        integrity: sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==
-      }
-    engines: { node: '>= 10.0.0' }
+    resolution: {integrity: sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==}
+    engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [darwin]
 
   '@parcel/watcher-darwin-x64@2.5.1':
-    resolution:
-      {
-        integrity: sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==
-      }
-    engines: { node: '>= 10.0.0' }
+    resolution: {integrity: sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==}
+    engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [darwin]
 
   '@parcel/watcher-freebsd-x64@2.5.1':
-    resolution:
-      {
-        integrity: sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==
-      }
-    engines: { node: '>= 10.0.0' }
+    resolution: {integrity: sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==}
+    engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [freebsd]
 
   '@parcel/watcher-linux-arm-glibc@2.5.1':
-    resolution:
-      {
-        integrity: sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==
-      }
-    engines: { node: '>= 10.0.0' }
+    resolution: {integrity: sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==}
+    engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
     libc: [glibc]
 
   '@parcel/watcher-linux-arm-musl@2.5.1':
-    resolution:
-      {
-        integrity: sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==
-      }
-    engines: { node: '>= 10.0.0' }
+    resolution: {integrity: sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==}
+    engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
     libc: [musl]
 
   '@parcel/watcher-linux-arm64-glibc@2.5.1':
-    resolution:
-      {
-        integrity: sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==
-      }
-    engines: { node: '>= 10.0.0' }
+    resolution: {integrity: sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==}
+    engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
   '@parcel/watcher-linux-arm64-musl@2.5.1':
-    resolution:
-      {
-        integrity: sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==
-      }
-    engines: { node: '>= 10.0.0' }
+    resolution: {integrity: sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==}
+    engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
   '@parcel/watcher-linux-x64-glibc@2.5.1':
-    resolution:
-      {
-        integrity: sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==
-      }
-    engines: { node: '>= 10.0.0' }
+    resolution: {integrity: sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==}
+    engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
   '@parcel/watcher-linux-x64-musl@2.5.1':
-    resolution:
-      {
-        integrity: sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==
-      }
-    engines: { node: '>= 10.0.0' }
+    resolution: {integrity: sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==}
+    engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
   '@parcel/watcher-win32-arm64@2.5.1':
-    resolution:
-      {
-        integrity: sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==
-      }
-    engines: { node: '>= 10.0.0' }
+    resolution: {integrity: sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==}
+    engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [win32]
 
   '@parcel/watcher-win32-ia32@2.5.1':
-    resolution:
-      {
-        integrity: sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==
-      }
-    engines: { node: '>= 10.0.0' }
+    resolution: {integrity: sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==}
+    engines: {node: '>= 10.0.0'}
     cpu: [ia32]
     os: [win32]
 
   '@parcel/watcher-win32-x64@2.5.1':
-    resolution:
-      {
-        integrity: sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==
-      }
-    engines: { node: '>= 10.0.0' }
+    resolution: {integrity: sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==}
+    engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [win32]
 
   '@parcel/watcher@2.5.1':
-    resolution:
-      {
-        integrity: sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==
-      }
-    engines: { node: '>= 10.0.0' }
+    resolution: {integrity: sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==}
+    engines: {node: '>= 10.0.0'}
+
+  '@pkgjs/parseargs@0.11.0':
+    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
+    engines: {node: '>=14'}
 
   '@pkgr/core@0.2.9':
-    resolution:
-      {
-        integrity: sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==
-      }
-    engines: { node: ^12.20.0 || ^14.18.0 || >=16.0.0 }
+    resolution: {integrity: sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==}
+    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
 
   '@polka/url@1.0.0-next.29':
-    resolution:
-      {
-        integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==
-      }
+    resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
 
   '@rolldown/pluginutils@1.0.0-beta.29':
-    resolution:
-      {
-        integrity: sha512-NIJgOsMjbxAXvoGq/X0gD7VPMQ8j9g0BiDaNjVNVjvl+iKXxL3Jre0v31RmBYeLEmkbj2s02v8vFTbUXi5XS2Q==
-      }
+    resolution: {integrity: sha512-NIJgOsMjbxAXvoGq/X0gD7VPMQ8j9g0BiDaNjVNVjvl+iKXxL3Jre0v31RmBYeLEmkbj2s02v8vFTbUXi5XS2Q==}
 
   '@rollup/pluginutils@5.3.0':
-    resolution:
-      {
-        integrity: sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q==
-      }
-    engines: { node: '>=14.0.0' }
+    resolution: {integrity: sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q==}
+    engines: {node: '>=14.0.0'}
     peerDependencies:
       rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
     peerDependenciesMeta:
@@ -1297,308 +1024,200 @@ packages:
         optional: true
 
   '@rollup/rollup-android-arm-eabi@4.52.3':
-    resolution:
-      {
-        integrity: sha512-h6cqHGZ6VdnwliFG1NXvMPTy/9PS3h8oLh7ImwR+kl+oYnQizgjxsONmmPSb2C66RksfkfIxEVtDSEcJiO0tqw==
-      }
+    resolution: {integrity: sha512-h6cqHGZ6VdnwliFG1NXvMPTy/9PS3h8oLh7ImwR+kl+oYnQizgjxsONmmPSb2C66RksfkfIxEVtDSEcJiO0tqw==}
     cpu: [arm]
     os: [android]
 
   '@rollup/rollup-android-arm64@4.52.3':
-    resolution:
-      {
-        integrity: sha512-wd+u7SLT/u6knklV/ifG7gr5Qy4GUbH2hMWcDauPFJzmCZUAJ8L2bTkVXC2niOIxp8lk3iH/QX8kSrUxVZrOVw==
-      }
+    resolution: {integrity: sha512-wd+u7SLT/u6knklV/ifG7gr5Qy4GUbH2hMWcDauPFJzmCZUAJ8L2bTkVXC2niOIxp8lk3iH/QX8kSrUxVZrOVw==}
     cpu: [arm64]
     os: [android]
 
   '@rollup/rollup-darwin-arm64@4.52.3':
-    resolution:
-      {
-        integrity: sha512-lj9ViATR1SsqycwFkJCtYfQTheBdvlWJqzqxwc9f2qrcVrQaF/gCuBRTiTolkRWS6KvNxSk4KHZWG7tDktLgjg==
-      }
+    resolution: {integrity: sha512-lj9ViATR1SsqycwFkJCtYfQTheBdvlWJqzqxwc9f2qrcVrQaF/gCuBRTiTolkRWS6KvNxSk4KHZWG7tDktLgjg==}
     cpu: [arm64]
     os: [darwin]
 
   '@rollup/rollup-darwin-x64@4.52.3':
-    resolution:
-      {
-        integrity: sha512-+Dyo7O1KUmIsbzx1l+4V4tvEVnVQqMOIYtrxK7ncLSknl1xnMHLgn7gddJVrYPNZfEB8CIi3hK8gq8bDhb3h5A==
-      }
+    resolution: {integrity: sha512-+Dyo7O1KUmIsbzx1l+4V4tvEVnVQqMOIYtrxK7ncLSknl1xnMHLgn7gddJVrYPNZfEB8CIi3hK8gq8bDhb3h5A==}
     cpu: [x64]
     os: [darwin]
 
   '@rollup/rollup-freebsd-arm64@4.52.3':
-    resolution:
-      {
-        integrity: sha512-u9Xg2FavYbD30g3DSfNhxgNrxhi6xVG4Y6i9Ur1C7xUuGDW3banRbXj+qgnIrwRN4KeJ396jchwy9bCIzbyBEQ==
-      }
+    resolution: {integrity: sha512-u9Xg2FavYbD30g3DSfNhxgNrxhi6xVG4Y6i9Ur1C7xUuGDW3banRbXj+qgnIrwRN4KeJ396jchwy9bCIzbyBEQ==}
     cpu: [arm64]
     os: [freebsd]
 
   '@rollup/rollup-freebsd-x64@4.52.3':
-    resolution:
-      {
-        integrity: sha512-5M8kyi/OX96wtD5qJR89a/3x5x8x5inXBZO04JWhkQb2JWavOWfjgkdvUqibGJeNNaz1/Z1PPza5/tAPXICI6A==
-      }
+    resolution: {integrity: sha512-5M8kyi/OX96wtD5qJR89a/3x5x8x5inXBZO04JWhkQb2JWavOWfjgkdvUqibGJeNNaz1/Z1PPza5/tAPXICI6A==}
     cpu: [x64]
     os: [freebsd]
 
   '@rollup/rollup-linux-arm-gnueabihf@4.52.3':
-    resolution:
-      {
-        integrity: sha512-IoerZJ4l1wRMopEHRKOO16e04iXRDyZFZnNZKrWeNquh5d6bucjezgd+OxG03mOMTnS1x7hilzb3uURPkJ0OfA==
-      }
+    resolution: {integrity: sha512-IoerZJ4l1wRMopEHRKOO16e04iXRDyZFZnNZKrWeNquh5d6bucjezgd+OxG03mOMTnS1x7hilzb3uURPkJ0OfA==}
     cpu: [arm]
     os: [linux]
     libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.52.3':
-    resolution:
-      {
-        integrity: sha512-ZYdtqgHTDfvrJHSh3W22TvjWxwOgc3ThK/XjgcNGP2DIwFIPeAPNsQxrJO5XqleSlgDux2VAoWQ5iJrtaC1TbA==
-      }
+    resolution: {integrity: sha512-ZYdtqgHTDfvrJHSh3W22TvjWxwOgc3ThK/XjgcNGP2DIwFIPeAPNsQxrJO5XqleSlgDux2VAoWQ5iJrtaC1TbA==}
     cpu: [arm]
     os: [linux]
     libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.52.3':
-    resolution:
-      {
-        integrity: sha512-NcViG7A0YtuFDA6xWSgmFb6iPFzHlf5vcqb2p0lGEbT+gjrEEz8nC/EeDHvx6mnGXnGCC1SeVV+8u+smj0CeGQ==
-      }
+    resolution: {integrity: sha512-NcViG7A0YtuFDA6xWSgmFb6iPFzHlf5vcqb2p0lGEbT+gjrEEz8nC/EeDHvx6mnGXnGCC1SeVV+8u+smj0CeGQ==}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.52.3':
-    resolution:
-      {
-        integrity: sha512-d3pY7LWno6SYNXRm6Ebsq0DJGoiLXTb83AIPCXl9fmtIQs/rXoS8SJxxUNtFbJ5MiOvs+7y34np77+9l4nfFMw==
-      }
+    resolution: {integrity: sha512-d3pY7LWno6SYNXRm6Ebsq0DJGoiLXTb83AIPCXl9fmtIQs/rXoS8SJxxUNtFbJ5MiOvs+7y34np77+9l4nfFMw==}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
   '@rollup/rollup-linux-loong64-gnu@4.52.3':
-    resolution:
-      {
-        integrity: sha512-3y5GA0JkBuirLqmjwAKwB0keDlI6JfGYduMlJD/Rl7fvb4Ni8iKdQs1eiunMZJhwDWdCvrcqXRY++VEBbvk6Eg==
-      }
+    resolution: {integrity: sha512-3y5GA0JkBuirLqmjwAKwB0keDlI6JfGYduMlJD/Rl7fvb4Ni8iKdQs1eiunMZJhwDWdCvrcqXRY++VEBbvk6Eg==}
     cpu: [loong64]
     os: [linux]
     libc: [glibc]
 
   '@rollup/rollup-linux-ppc64-gnu@4.52.3':
-    resolution:
-      {
-        integrity: sha512-AUUH65a0p3Q0Yfm5oD2KVgzTKgwPyp9DSXc3UA7DtxhEb/WSPfbG4wqXeSN62OG5gSo18em4xv6dbfcUGXcagw==
-      }
+    resolution: {integrity: sha512-AUUH65a0p3Q0Yfm5oD2KVgzTKgwPyp9DSXc3UA7DtxhEb/WSPfbG4wqXeSN62OG5gSo18em4xv6dbfcUGXcagw==}
     cpu: [ppc64]
     os: [linux]
     libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-gnu@4.52.3':
-    resolution:
-      {
-        integrity: sha512-1makPhFFVBqZE+XFg3Dkq+IkQ7JvmUrwwqaYBL2CE+ZpxPaqkGaiWFEWVGyvTwZace6WLJHwjVh/+CXbKDGPmg==
-      }
+    resolution: {integrity: sha512-1makPhFFVBqZE+XFg3Dkq+IkQ7JvmUrwwqaYBL2CE+ZpxPaqkGaiWFEWVGyvTwZace6WLJHwjVh/+CXbKDGPmg==}
     cpu: [riscv64]
     os: [linux]
     libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-musl@4.52.3':
-    resolution:
-      {
-        integrity: sha512-OOFJa28dxfl8kLOPMUOQBCO6z3X2SAfzIE276fwT52uXDWUS178KWq0pL7d6p1kz7pkzA0yQwtqL0dEPoVcRWg==
-      }
+    resolution: {integrity: sha512-OOFJa28dxfl8kLOPMUOQBCO6z3X2SAfzIE276fwT52uXDWUS178KWq0pL7d6p1kz7pkzA0yQwtqL0dEPoVcRWg==}
     cpu: [riscv64]
     os: [linux]
     libc: [musl]
 
   '@rollup/rollup-linux-s390x-gnu@4.52.3':
-    resolution:
-      {
-        integrity: sha512-jMdsML2VI5l+V7cKfZx3ak+SLlJ8fKvLJ0Eoa4b9/vCUrzXKgoKxvHqvJ/mkWhFiyp88nCkM5S2v6nIwRtPcgg==
-      }
+    resolution: {integrity: sha512-jMdsML2VI5l+V7cKfZx3ak+SLlJ8fKvLJ0Eoa4b9/vCUrzXKgoKxvHqvJ/mkWhFiyp88nCkM5S2v6nIwRtPcgg==}
     cpu: [s390x]
     os: [linux]
     libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.52.3':
-    resolution:
-      {
-        integrity: sha512-tPgGd6bY2M2LJTA1uGq8fkSPK8ZLYjDjY+ZLK9WHncCnfIz29LIXIqUgzCR0hIefzy6Hpbe8Th5WOSwTM8E7LA==
-      }
+    resolution: {integrity: sha512-tPgGd6bY2M2LJTA1uGq8fkSPK8ZLYjDjY+ZLK9WHncCnfIz29LIXIqUgzCR0hIefzy6Hpbe8Th5WOSwTM8E7LA==}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.52.3':
-    resolution:
-      {
-        integrity: sha512-BCFkJjgk+WFzP+tcSMXq77ymAPIxsX9lFJWs+2JzuZTLtksJ2o5hvgTdIcZ5+oKzUDMwI0PfWzRBYAydAHF2Mw==
-      }
+    resolution: {integrity: sha512-BCFkJjgk+WFzP+tcSMXq77ymAPIxsX9lFJWs+2JzuZTLtksJ2o5hvgTdIcZ5+oKzUDMwI0PfWzRBYAydAHF2Mw==}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
   '@rollup/rollup-openharmony-arm64@4.52.3':
-    resolution:
-      {
-        integrity: sha512-KTD/EqjZF3yvRaWUJdD1cW+IQBk4fbQaHYJUmP8N4XoKFZilVL8cobFSTDnjTtxWJQ3JYaMgF4nObY/+nYkumA==
-      }
+    resolution: {integrity: sha512-KTD/EqjZF3yvRaWUJdD1cW+IQBk4fbQaHYJUmP8N4XoKFZilVL8cobFSTDnjTtxWJQ3JYaMgF4nObY/+nYkumA==}
     cpu: [arm64]
     os: [openharmony]
 
   '@rollup/rollup-win32-arm64-msvc@4.52.3':
-    resolution:
-      {
-        integrity: sha512-+zteHZdoUYLkyYKObGHieibUFLbttX2r+58l27XZauq0tcWYYuKUwY2wjeCN9oK1Um2YgH2ibd6cnX/wFD7DuA==
-      }
+    resolution: {integrity: sha512-+zteHZdoUYLkyYKObGHieibUFLbttX2r+58l27XZauq0tcWYYuKUwY2wjeCN9oK1Um2YgH2ibd6cnX/wFD7DuA==}
     cpu: [arm64]
     os: [win32]
 
   '@rollup/rollup-win32-ia32-msvc@4.52.3':
-    resolution:
-      {
-        integrity: sha512-of1iHkTQSo3kr6dTIRX6t81uj/c/b15HXVsPcEElN5sS859qHrOepM5p9G41Hah+CTqSh2r8Bm56dL2z9UQQ7g==
-      }
+    resolution: {integrity: sha512-of1iHkTQSo3kr6dTIRX6t81uj/c/b15HXVsPcEElN5sS859qHrOepM5p9G41Hah+CTqSh2r8Bm56dL2z9UQQ7g==}
     cpu: [ia32]
     os: [win32]
 
   '@rollup/rollup-win32-x64-gnu@4.52.3':
-    resolution:
-      {
-        integrity: sha512-s0hybmlHb56mWVZQj8ra9048/WZTPLILKxcvcq+8awSZmyiSUZjjem1AhU3Tf4ZKpYhK4mg36HtHDOe8QJS5PQ==
-      }
+    resolution: {integrity: sha512-s0hybmlHb56mWVZQj8ra9048/WZTPLILKxcvcq+8awSZmyiSUZjjem1AhU3Tf4ZKpYhK4mg36HtHDOe8QJS5PQ==}
     cpu: [x64]
     os: [win32]
 
   '@rollup/rollup-win32-x64-msvc@4.52.3':
-    resolution:
-      {
-        integrity: sha512-zGIbEVVXVtauFgl3MRwGWEN36P5ZGenHRMgNw88X5wEhEBpq0XrMEZwOn07+ICrwM17XO5xfMZqh0OldCH5VTA==
-      }
+    resolution: {integrity: sha512-zGIbEVVXVtauFgl3MRwGWEN36P5ZGenHRMgNw88X5wEhEBpq0XrMEZwOn07+ICrwM17XO5xfMZqh0OldCH5VTA==}
     cpu: [x64]
     os: [win32]
 
   '@sec-ant/readable-stream@0.4.1':
-    resolution:
-      {
-        integrity: sha512-831qok9r2t8AlxLko40y2ebgSDhenenCatLVeW/uBtnHPyhHOvG0C7TvfgecV+wHzIm5KUICgzmVpWS+IMEAeg==
-      }
+    resolution: {integrity: sha512-831qok9r2t8AlxLko40y2ebgSDhenenCatLVeW/uBtnHPyhHOvG0C7TvfgecV+wHzIm5KUICgzmVpWS+IMEAeg==}
 
   '@sindresorhus/merge-streams@4.0.0':
-    resolution:
-      {
-        integrity: sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==}
+    engines: {node: '>=18'}
 
   '@sxzz/popperjs-es@2.11.7':
-    resolution:
-      {
-        integrity: sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==
-      }
+    resolution: {integrity: sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==}
 
   '@tailwindcss/node@4.1.14':
-    resolution:
-      {
-        integrity: sha512-hpz+8vFk3Ic2xssIA3e01R6jkmsAhvkQdXlEbRTk6S10xDAtiQiM3FyvZVGsucefq764euO/b8WUW9ysLdThHw==
-      }
+    resolution: {integrity: sha512-hpz+8vFk3Ic2xssIA3e01R6jkmsAhvkQdXlEbRTk6S10xDAtiQiM3FyvZVGsucefq764euO/b8WUW9ysLdThHw==}
 
   '@tailwindcss/oxide-android-arm64@4.1.14':
-    resolution:
-      {
-        integrity: sha512-a94ifZrGwMvbdeAxWoSuGcIl6/DOP5cdxagid7xJv6bwFp3oebp7y2ImYsnZBMTwjn5Ev5xESvS3FFYUGgPODQ==
-      }
-    engines: { node: '>= 10' }
+    resolution: {integrity: sha512-a94ifZrGwMvbdeAxWoSuGcIl6/DOP5cdxagid7xJv6bwFp3oebp7y2ImYsnZBMTwjn5Ev5xESvS3FFYUGgPODQ==}
+    engines: {node: '>= 10'}
     cpu: [arm64]
     os: [android]
 
   '@tailwindcss/oxide-darwin-arm64@4.1.14':
-    resolution:
-      {
-        integrity: sha512-HkFP/CqfSh09xCnrPJA7jud7hij5ahKyWomrC3oiO2U9i0UjP17o9pJbxUN0IJ471GTQQmzwhp0DEcpbp4MZTA==
-      }
-    engines: { node: '>= 10' }
+    resolution: {integrity: sha512-HkFP/CqfSh09xCnrPJA7jud7hij5ahKyWomrC3oiO2U9i0UjP17o9pJbxUN0IJ471GTQQmzwhp0DEcpbp4MZTA==}
+    engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
 
   '@tailwindcss/oxide-darwin-x64@4.1.14':
-    resolution:
-      {
-        integrity: sha512-eVNaWmCgdLf5iv6Qd3s7JI5SEFBFRtfm6W0mphJYXgvnDEAZ5sZzqmI06bK6xo0IErDHdTA5/t7d4eTfWbWOFw==
-      }
-    engines: { node: '>= 10' }
+    resolution: {integrity: sha512-eVNaWmCgdLf5iv6Qd3s7JI5SEFBFRtfm6W0mphJYXgvnDEAZ5sZzqmI06bK6xo0IErDHdTA5/t7d4eTfWbWOFw==}
+    engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
 
   '@tailwindcss/oxide-freebsd-x64@4.1.14':
-    resolution:
-      {
-        integrity: sha512-QWLoRXNikEuqtNb0dhQN6wsSVVjX6dmUFzuuiL09ZeXju25dsei2uIPl71y2Ic6QbNBsB4scwBoFnlBfabHkEw==
-      }
-    engines: { node: '>= 10' }
+    resolution: {integrity: sha512-QWLoRXNikEuqtNb0dhQN6wsSVVjX6dmUFzuuiL09ZeXju25dsei2uIPl71y2Ic6QbNBsB4scwBoFnlBfabHkEw==}
+    engines: {node: '>= 10'}
     cpu: [x64]
     os: [freebsd]
 
   '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.14':
-    resolution:
-      {
-        integrity: sha512-VB4gjQni9+F0VCASU+L8zSIyjrLLsy03sjcR3bM0V2g4SNamo0FakZFKyUQ96ZVwGK4CaJsc9zd/obQy74o0Fw==
-      }
-    engines: { node: '>= 10' }
+    resolution: {integrity: sha512-VB4gjQni9+F0VCASU+L8zSIyjrLLsy03sjcR3bM0V2g4SNamo0FakZFKyUQ96ZVwGK4CaJsc9zd/obQy74o0Fw==}
+    engines: {node: '>= 10'}
     cpu: [arm]
     os: [linux]
 
   '@tailwindcss/oxide-linux-arm64-gnu@4.1.14':
-    resolution:
-      {
-        integrity: sha512-qaEy0dIZ6d9vyLnmeg24yzA8XuEAD9WjpM5nIM1sUgQ/Zv7cVkharPDQcmm/t/TvXoKo/0knI3me3AGfdx6w1w==
-      }
-    engines: { node: '>= 10' }
+    resolution: {integrity: sha512-qaEy0dIZ6d9vyLnmeg24yzA8XuEAD9WjpM5nIM1sUgQ/Zv7cVkharPDQcmm/t/TvXoKo/0knI3me3AGfdx6w1w==}
+    engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
   '@tailwindcss/oxide-linux-arm64-musl@4.1.14':
-    resolution:
-      {
-        integrity: sha512-ISZjT44s59O8xKsPEIesiIydMG/sCXoMBCqsphDm/WcbnuWLxxb+GcvSIIA5NjUw6F8Tex7s5/LM2yDy8RqYBQ==
-      }
-    engines: { node: '>= 10' }
+    resolution: {integrity: sha512-ISZjT44s59O8xKsPEIesiIydMG/sCXoMBCqsphDm/WcbnuWLxxb+GcvSIIA5NjUw6F8Tex7s5/LM2yDy8RqYBQ==}
+    engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
   '@tailwindcss/oxide-linux-x64-gnu@4.1.14':
-    resolution:
-      {
-        integrity: sha512-02c6JhLPJj10L2caH4U0zF8Hji4dOeahmuMl23stk0MU1wfd1OraE7rOloidSF8W5JTHkFdVo/O7uRUJJnUAJg==
-      }
-    engines: { node: '>= 10' }
+    resolution: {integrity: sha512-02c6JhLPJj10L2caH4U0zF8Hji4dOeahmuMl23stk0MU1wfd1OraE7rOloidSF8W5JTHkFdVo/O7uRUJJnUAJg==}
+    engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
   '@tailwindcss/oxide-linux-x64-musl@4.1.14':
-    resolution:
-      {
-        integrity: sha512-TNGeLiN1XS66kQhxHG/7wMeQDOoL0S33x9BgmydbrWAb9Qw0KYdd8o1ifx4HOGDWhVmJ+Ul+JQ7lyknQFilO3Q==
-      }
-    engines: { node: '>= 10' }
+    resolution: {integrity: sha512-TNGeLiN1XS66kQhxHG/7wMeQDOoL0S33x9BgmydbrWAb9Qw0KYdd8o1ifx4HOGDWhVmJ+Ul+JQ7lyknQFilO3Q==}
+    engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
   '@tailwindcss/oxide-wasm32-wasi@4.1.14':
-    resolution:
-      {
-        integrity: sha512-uZYAsaW/jS/IYkd6EWPJKW/NlPNSkWkBlaeVBi/WsFQNP05/bzkebUL8FH1pdsqx4f2fH/bWFcUABOM9nfiJkQ==
-      }
-    engines: { node: '>=14.0.0' }
+    resolution: {integrity: sha512-uZYAsaW/jS/IYkd6EWPJKW/NlPNSkWkBlaeVBi/WsFQNP05/bzkebUL8FH1pdsqx4f2fH/bWFcUABOM9nfiJkQ==}
+    engines: {node: '>=14.0.0'}
     cpu: [wasm32]
     bundledDependencies:
       - '@napi-rs/wasm-runtime'
@@ -1609,264 +1228,222 @@ packages:
       - tslib
 
   '@tailwindcss/oxide-win32-arm64-msvc@4.1.14':
-    resolution:
-      {
-        integrity: sha512-Az0RnnkcvRqsuoLH2Z4n3JfAef0wElgzHD5Aky/e+0tBUxUhIeIqFBTMNQvmMRSP15fWwmvjBxZ3Q8RhsDnxAA==
-      }
-    engines: { node: '>= 10' }
+    resolution: {integrity: sha512-Az0RnnkcvRqsuoLH2Z4n3JfAef0wElgzHD5Aky/e+0tBUxUhIeIqFBTMNQvmMRSP15fWwmvjBxZ3Q8RhsDnxAA==}
+    engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
 
   '@tailwindcss/oxide-win32-x64-msvc@4.1.14':
-    resolution:
-      {
-        integrity: sha512-ttblVGHgf68kEE4om1n/n44I0yGPkCPbLsqzjvybhpwa6mKKtgFfAzy6btc3HRmuW7nHe0OOrSeNP9sQmmH9XA==
-      }
-    engines: { node: '>= 10' }
+    resolution: {integrity: sha512-ttblVGHgf68kEE4om1n/n44I0yGPkCPbLsqzjvybhpwa6mKKtgFfAzy6btc3HRmuW7nHe0OOrSeNP9sQmmH9XA==}
+    engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
 
   '@tailwindcss/oxide@4.1.14':
-    resolution:
-      {
-        integrity: sha512-23yx+VUbBwCg2x5XWdB8+1lkPajzLmALEfMb51zZUBYaYVPDQvBSD/WYDqiVyBIo2BZFa3yw1Rpy3G2Jp+K0dw==
-      }
-    engines: { node: '>= 10' }
+    resolution: {integrity: sha512-23yx+VUbBwCg2x5XWdB8+1lkPajzLmALEfMb51zZUBYaYVPDQvBSD/WYDqiVyBIo2BZFa3yw1Rpy3G2Jp+K0dw==}
+    engines: {node: '>= 10'}
 
   '@tailwindcss/vite@4.1.14':
-    resolution:
-      {
-        integrity: sha512-BoFUoU0XqgCUS1UXWhmDJroKKhNXeDzD7/XwabjkDIAbMnc4ULn5e2FuEuBbhZ6ENZoSYzKlzvZ44Yr6EUDUSA==
-      }
+    resolution: {integrity: sha512-BoFUoU0XqgCUS1UXWhmDJroKKhNXeDzD7/XwabjkDIAbMnc4ULn5e2FuEuBbhZ6ENZoSYzKlzvZ44Yr6EUDUSA==}
     peerDependencies:
       vite: ^5.2.0 || ^6 || ^7
 
   '@transloadit/prettier-bytes@0.0.7':
-    resolution:
-      {
-        integrity: sha512-VeJbUb0wEKbcwaSlj5n+LscBl9IPgLPkHVGBkh00cztv6X4L/TJXK58LzFuBKX7/GAfiGhIwH67YTLTlzvIzBA==
-      }
+    resolution: {integrity: sha512-VeJbUb0wEKbcwaSlj5n+LscBl9IPgLPkHVGBkh00cztv6X4L/TJXK58LzFuBKX7/GAfiGhIwH67YTLTlzvIzBA==}
+
+  '@types/codemirror@5.60.17':
+    resolution: {integrity: sha512-AZq2FIsUHVMlp7VSe2hTfl5w4pcUkoFkM3zVsRKsn1ca8CXRDYvnin04+HP2REkwsxemuHqvDofdlhUWNpbwfw==}
 
   '@types/conventional-commits-parser@5.0.1':
-    resolution:
-      {
-        integrity: sha512-7uz5EHdzz2TqoMfV7ee61Egf5y6NkcO4FB/1iCCQnbeiI1F3xzv3vK5dBCXUCLQgGYS+mUeigK1iKQzvED+QnQ==
-      }
+    resolution: {integrity: sha512-7uz5EHdzz2TqoMfV7ee61Egf5y6NkcO4FB/1iCCQnbeiI1F3xzv3vK5dBCXUCLQgGYS+mUeigK1iKQzvED+QnQ==}
+
+  '@types/dagre@0.7.54':
+    resolution: {integrity: sha512-QjcRY+adGbYvBFS7cwv5txhVIwX1XXIUswWl+kSQTbI6NjgZydrZkEKX/etzVd7i+bCsCb40Z/xlBY5eoFuvWQ==}
+
+  '@types/dompurify@3.2.0':
+    resolution: {integrity: sha512-Fgg31wv9QbLDA0SpTOXO3MaxySc4DKGLi8sna4/Utjo4r3ZRPdCt4UQee8BWr+Q5z21yifghREPJGYaEOEIACg==}
+    deprecated: This is a stub types definition. dompurify provides its own type definitions, so you do not need this installed.
 
   '@types/estree@1.0.8':
-    resolution:
-      {
-        integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==
-      }
+    resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
   '@types/event-emitter@0.3.5':
-    resolution:
-      {
-        integrity: sha512-zx2/Gg0Eg7gwEiOIIh5w9TrhKKTeQh7CPCOPNc0el4pLSwzebA8SmnHwZs2dWlLONvyulykSwGSQxQHLhjGLvQ==
-      }
+    resolution: {integrity: sha512-zx2/Gg0Eg7gwEiOIIh5w9TrhKKTeQh7CPCOPNc0el4pLSwzebA8SmnHwZs2dWlLONvyulykSwGSQxQHLhjGLvQ==}
+
+  '@types/file-saver@2.0.7':
+    resolution: {integrity: sha512-dNKVfHd/jk0SkR/exKGj2ggkB45MAkzvWCaqLUUgkyjITkGNzH8H+yUwr+BLJUBjZOe9w8X3wgmXhZDRg1ED6A==}
 
   '@types/json-schema@7.0.15':
-    resolution:
-      {
-        integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
-      }
+    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
+
+  '@types/linkify-it@5.0.0':
+    resolution: {integrity: sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==}
 
   '@types/lodash-es@4.17.12':
-    resolution:
-      {
-        integrity: sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==
-      }
+    resolution: {integrity: sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==}
 
   '@types/lodash@4.17.20':
-    resolution:
-      {
-        integrity: sha512-H3MHACvFUEiujabxhaI/ImO6gUrd8oOurg7LQtS7mbwIXA/cUqWrvBsaeJ23aZEPk1TAYkurjfMbSELfoCXlGA==
-      }
+    resolution: {integrity: sha512-H3MHACvFUEiujabxhaI/ImO6gUrd8oOurg7LQtS7mbwIXA/cUqWrvBsaeJ23aZEPk1TAYkurjfMbSELfoCXlGA==}
+
+  '@types/markdown-it@14.1.2':
+    resolution: {integrity: sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==}
+
+  '@types/mdurl@2.0.0':
+    resolution: {integrity: sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==}
+
+  '@types/node@14.18.63':
+    resolution: {integrity: sha512-fAtCfv4jJg+ExtXhvCkCqUKZ+4ok/JQk01qDKhL5BDDoS3AxKXhV5/MAVUZyQnSEd2GT92fkgZl0pz0Q0AzcIQ==}
 
   '@types/node@24.8.1':
-    resolution:
-      {
-        integrity: sha512-alv65KGRadQVfVcG69MuB4IzdYVpRwMG/mq8KWOaoOdyY617P5ivaDiMCGOFDWD2sAn5Q0mR3mRtUOgm99hL9Q==
-      }
+    resolution: {integrity: sha512-alv65KGRadQVfVcG69MuB4IzdYVpRwMG/mq8KWOaoOdyY617P5ivaDiMCGOFDWD2sAn5Q0mR3mRtUOgm99hL9Q==}
+
+  '@types/nprogress@0.2.3':
+    resolution: {integrity: sha512-k7kRA033QNtC+gLc4VPlfnue58CM1iQLgn1IMAU8VPHGOj7oIHPp9UlhedEnD/Gl8evoCjwkZjlBORtZ3JByUA==}
+
+  '@types/path-browserify@1.0.3':
+    resolution: {integrity: sha512-ZmHivEbNCBtAfcrFeBCiTjdIc2dey0l7oCGNGpSuRTy8jP6UVND7oUowlvDujBy8r2Hoa8bfFUOCiPWfmtkfxw==}
+
+  '@types/qs@6.15.0':
+    resolution: {integrity: sha512-JawvT8iBVWpzTrz3EGw9BTQFg3BQNmwERdKE22vlTxawwtbyUSlMppvZYKLZzB5zgACXdXxbD3m1bXaMqP/9ow==}
 
   '@types/sortablejs@1.15.8':
-    resolution:
-      {
-        integrity: sha512-b79830lW+RZfwaztgs1aVPgbasJ8e7AXtZYHTELNXZPsERt4ymJdjV4OccDbHQAvHrCcFpbF78jkm0R6h/pZVg==
-      }
+    resolution: {integrity: sha512-b79830lW+RZfwaztgs1aVPgbasJ8e7AXtZYHTELNXZPsERt4ymJdjV4OccDbHQAvHrCcFpbF78jkm0R6h/pZVg==}
+
+  '@types/tern@0.23.9':
+    resolution: {integrity: sha512-ypzHFE/wBzh+BlH6rrBgS5I/Z7RD21pGhZ2rltb/+ZrVM1awdZwjx7hE5XfuYgHWk9uvV5HLZN3SloevCAp3Bw==}
+
+  '@types/trusted-types@2.0.7':
+    resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
 
   '@types/web-bluetooth@0.0.16':
-    resolution:
-      {
-        integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==
-      }
+    resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
+
+  '@types/web-bluetooth@0.0.20':
+    resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
 
   '@types/web-bluetooth@0.0.21':
-    resolution:
-      {
-        integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==
-      }
+    resolution: {integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==}
 
   '@typescript-eslint/eslint-plugin@8.44.1':
-    resolution:
-      {
-        integrity: sha512-molgphGqOBT7t4YKCSkbasmu1tb1MgrZ2szGzHbclF7PNmOkSTQVHy+2jXOSnxvR3+Xe1yySHFZoqMpz3TfQsw==
-      }
-    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
+    resolution: {integrity: sha512-molgphGqOBT7t4YKCSkbasmu1tb1MgrZ2szGzHbclF7PNmOkSTQVHy+2jXOSnxvR3+Xe1yySHFZoqMpz3TfQsw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       '@typescript-eslint/parser': ^8.44.1
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
   '@typescript-eslint/parser@8.44.1':
-    resolution:
-      {
-        integrity: sha512-EHrrEsyhOhxYt8MTg4zTF+DJMuNBzWwgvvOYNj/zm1vnaD/IC5zCXFehZv94Piqa2cRFfXrTFxIvO95L7Qc/cw==
-      }
-    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
+    resolution: {integrity: sha512-EHrrEsyhOhxYt8MTg4zTF+DJMuNBzWwgvvOYNj/zm1vnaD/IC5zCXFehZv94Piqa2cRFfXrTFxIvO95L7Qc/cw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
   '@typescript-eslint/project-service@8.44.1':
-    resolution:
-      {
-        integrity: sha512-ycSa60eGg8GWAkVsKV4E6Nz33h+HjTXbsDT4FILyL8Obk5/mx4tbvCNsLf9zret3ipSumAOG89UcCs/KRaKYrA==
-      }
-    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
+    resolution: {integrity: sha512-ycSa60eGg8GWAkVsKV4E6Nz33h+HjTXbsDT4FILyL8Obk5/mx4tbvCNsLf9zret3ipSumAOG89UcCs/KRaKYrA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
   '@typescript-eslint/scope-manager@8.44.1':
-    resolution:
-      {
-        integrity: sha512-NdhWHgmynpSvyhchGLXh+w12OMT308Gm25JoRIyTZqEbApiBiQHD/8xgb6LqCWCFcxFtWwaVdFsLPQI3jvhywg==
-      }
-    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
+    resolution: {integrity: sha512-NdhWHgmynpSvyhchGLXh+w12OMT308Gm25JoRIyTZqEbApiBiQHD/8xgb6LqCWCFcxFtWwaVdFsLPQI3jvhywg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@typescript-eslint/tsconfig-utils@8.44.1':
-    resolution:
-      {
-        integrity: sha512-B5OyACouEjuIvof3o86lRMvyDsFwZm+4fBOqFHccIctYgBjqR3qT39FBYGN87khcgf0ExpdCBeGKpKRhSFTjKQ==
-      }
-    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
+    resolution: {integrity: sha512-B5OyACouEjuIvof3o86lRMvyDsFwZm+4fBOqFHccIctYgBjqR3qT39FBYGN87khcgf0ExpdCBeGKpKRhSFTjKQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
   '@typescript-eslint/type-utils@8.44.1':
-    resolution:
-      {
-        integrity: sha512-KdEerZqHWXsRNKjF9NYswNISnFzXfXNDfPxoTh7tqohU/PRIbwTmsjGK6V9/RTYWau7NZvfo52lgVk+sJh0K3g==
-      }
-    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
+    resolution: {integrity: sha512-KdEerZqHWXsRNKjF9NYswNISnFzXfXNDfPxoTh7tqohU/PRIbwTmsjGK6V9/RTYWau7NZvfo52lgVk+sJh0K3g==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
   '@typescript-eslint/types@8.44.1':
-    resolution:
-      {
-        integrity: sha512-Lk7uj7y9uQUOEguiDIDLYLJOrYHQa7oBiURYVFqIpGxclAFQ78f6VUOM8lI2XEuNOKNB7XuvM2+2cMXAoq4ALQ==
-      }
-    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
+    resolution: {integrity: sha512-Lk7uj7y9uQUOEguiDIDLYLJOrYHQa7oBiURYVFqIpGxclAFQ78f6VUOM8lI2XEuNOKNB7XuvM2+2cMXAoq4ALQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@typescript-eslint/typescript-estree@8.44.1':
-    resolution:
-      {
-        integrity: sha512-qnQJ+mVa7szevdEyvfItbO5Vo+GfZ4/GZWWDRRLjrxYPkhM+6zYB2vRYwCsoJLzqFCdZT4mEqyJoyzkunsZ96A==
-      }
-    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
+    resolution: {integrity: sha512-qnQJ+mVa7szevdEyvfItbO5Vo+GfZ4/GZWWDRRLjrxYPkhM+6zYB2vRYwCsoJLzqFCdZT4mEqyJoyzkunsZ96A==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
   '@typescript-eslint/utils@8.44.1':
-    resolution:
-      {
-        integrity: sha512-DpX5Fp6edTlocMCwA+mHY8Mra+pPjRZ0TfHkXI8QFelIKcbADQz1LUPNtzOFUriBB2UYqw4Pi9+xV4w9ZczHFg==
-      }
-    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
+    resolution: {integrity: sha512-DpX5Fp6edTlocMCwA+mHY8Mra+pPjRZ0TfHkXI8QFelIKcbADQz1LUPNtzOFUriBB2UYqw4Pi9+xV4w9ZczHFg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
   '@typescript-eslint/visitor-keys@8.44.1':
-    resolution:
-      {
-        integrity: sha512-576+u0QD+Jp3tZzvfRfxon0EA2lzcDt3lhUbsC6Lgzy9x2VR4E+JUiNyGHi5T8vk0TV+fpJ5GLG1JsJuWCaKhw==
-      }
-    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
+    resolution: {integrity: sha512-576+u0QD+Jp3tZzvfRfxon0EA2lzcDt3lhUbsC6Lgzy9x2VR4E+JUiNyGHi5T8vk0TV+fpJ5GLG1JsJuWCaKhw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@uppy/companion-client@2.2.2':
-    resolution:
-      {
-        integrity: sha512-5mTp2iq97/mYSisMaBtFRry6PTgZA6SIL7LePteOV5x0/DxKfrZW3DEiQERJmYpHzy7k8johpm2gHnEKto56Og==
-      }
+    resolution: {integrity: sha512-5mTp2iq97/mYSisMaBtFRry6PTgZA6SIL7LePteOV5x0/DxKfrZW3DEiQERJmYpHzy7k8johpm2gHnEKto56Og==}
 
   '@uppy/core@2.3.4':
-    resolution:
-      {
-        integrity: sha512-iWAqppC8FD8mMVqewavCz+TNaet6HPXitmGXpGGREGrakZ4FeuWytVdrelydzTdXx6vVKkOmI2FLztGg73sENQ==
-      }
+    resolution: {integrity: sha512-iWAqppC8FD8mMVqewavCz+TNaet6HPXitmGXpGGREGrakZ4FeuWytVdrelydzTdXx6vVKkOmI2FLztGg73sENQ==}
 
   '@uppy/store-default@2.1.1':
-    resolution:
-      {
-        integrity: sha512-xnpTxvot2SeAwGwbvmJ899ASk5tYXhmZzD/aCFsXePh/v8rNvR2pKlcQUH7cF/y4baUGq3FHO/daKCok/mpKqQ==
-      }
+    resolution: {integrity: sha512-xnpTxvot2SeAwGwbvmJ899ASk5tYXhmZzD/aCFsXePh/v8rNvR2pKlcQUH7cF/y4baUGq3FHO/daKCok/mpKqQ==}
 
   '@uppy/utils@4.1.3':
-    resolution:
-      {
-        integrity: sha512-nTuMvwWYobnJcytDO3t+D6IkVq/Qs4Xv3vyoEZ+Iaf8gegZP+rEyoaFT2CK5XLRMienPyqRqNbIfRuFaOWSIFw==
-      }
+    resolution: {integrity: sha512-nTuMvwWYobnJcytDO3t+D6IkVq/Qs4Xv3vyoEZ+Iaf8gegZP+rEyoaFT2CK5XLRMienPyqRqNbIfRuFaOWSIFw==}
 
   '@uppy/xhr-upload@2.1.3':
-    resolution:
-      {
-        integrity: sha512-YWOQ6myBVPs+mhNjfdWsQyMRWUlrDLMoaG7nvf/G6Y3GKZf8AyjFDjvvJ49XWQ+DaZOftGkHmF1uh/DBeGivJQ==
-      }
+    resolution: {integrity: sha512-YWOQ6myBVPs+mhNjfdWsQyMRWUlrDLMoaG7nvf/G6Y3GKZf8AyjFDjvvJ49XWQ+DaZOftGkHmF1uh/DBeGivJQ==}
     peerDependencies:
       '@uppy/core': ^2.3.3
 
   '@vitejs/plugin-vue@6.0.1':
-    resolution:
-      {
-        integrity: sha512-+MaE752hU0wfPFJEUAIxqw18+20euHHdxVtMvbFcOEpjEyfqXH/5DCoTHiVJ0J29EhTJdoTkjEv5YBKU9dnoTw==
-      }
-    engines: { node: ^20.19.0 || >=22.12.0 }
+    resolution: {integrity: sha512-+MaE752hU0wfPFJEUAIxqw18+20euHHdxVtMvbFcOEpjEyfqXH/5DCoTHiVJ0J29EhTJdoTkjEv5YBKU9dnoTw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     peerDependencies:
       vite: ^5.0.0 || ^6.0.0 || ^7.0.0
       vue: ^3.2.25
 
-  '@volar/language-core@2.4.23':
-    resolution:
-      {
-        integrity: sha512-hEEd5ET/oSmBC6pi1j6NaNYRWoAiDhINbT8rmwtINugR39loROSlufGdYMF9TaKGfz+ViGs1Idi3mAhnuPcoGQ==
-      }
+  '@volar/language-core@2.4.15':
+    resolution: {integrity: sha512-3VHw+QZU0ZG9IuQmzT68IyN4hZNd9GchGPhbD9+pa8CVv7rnoOZwo7T8weIbrRmihqy3ATpdfXFnqRrfPVK6CA==}
 
-  '@volar/source-map@2.4.23':
-    resolution:
-      {
-        integrity: sha512-Z1Uc8IB57Lm6k7q6KIDu/p+JWtf3xsXJqAX/5r18hYOTpJyBn0KXUR8oTJ4WFYOcDzWC9n3IflGgHowx6U6z9Q==
-      }
+  '@volar/source-map@2.4.15':
+    resolution: {integrity: sha512-CPbMWlUN6hVZJYGcU/GSoHu4EnCHiLaXI9n8c9la6RaI9W5JHX+NqG+GSQcB0JdC2FIBLdZJwGsfKyBB71VlTg==}
 
-  '@volar/typescript@2.4.23':
-    resolution:
-      {
-        integrity: sha512-lAB5zJghWxVPqfcStmAP1ZqQacMpe90UrP5RJ3arDyrhy4aCUQqmxPPLB2PWDKugvylmO41ljK7vZ+t6INMTag==
-      }
+  '@volar/typescript@2.4.15':
+    resolution: {integrity: sha512-2aZ8i0cqPGjXb4BhkMsPYDkkuc2ZQ6yOpqwAuNwUoncELqoy5fRgOQtLR9gB0g902iS0NAkvpIzs27geVyVdPg==}
+
+  '@vue-flow/background@1.3.2':
+    resolution: {integrity: sha512-eJPhDcLj1wEo45bBoqTXw1uhl0yK2RaQGnEINqvvBsAFKh/camHJd5NPmOdS1w+M9lggc9igUewxaEd3iCQX2w==}
+    peerDependencies:
+      '@vue-flow/core': ^1.23.0
+      vue: ^3.3.0
+
+  '@vue-flow/controls@1.1.3':
+    resolution: {integrity: sha512-XCf+G+jCvaWURdFlZmOjifZGw3XMhN5hHlfMGkWh9xot+9nH9gdTZtn+ldIJKtarg3B21iyHU8JjKDhYcB6JMw==}
+    peerDependencies:
+      '@vue-flow/core': ^1.23.0
+      vue: ^3.3.0
+
+  '@vue-flow/core@1.48.2':
+    resolution: {integrity: sha512-raxhgKWE+G/mcEvXJjGFUDYW9rAI3GOtiHR3ZkNpwBWuIaCC1EYiBmKGwJOoNzVFgwO7COgErnK7i08i287AFA==}
+    peerDependencies:
+      vue: ^3.3.0
+
+  '@vue-flow/minimap@1.5.4':
+    resolution: {integrity: sha512-l4C+XTAXnRxsRpUdN7cAVFBennC1sVRzq4bDSpVK+ag7tdMczAnhFYGgbLkUw3v3sY6gokyWwMl8CDonp8eB2g==}
+    peerDependencies:
+      '@vue-flow/core': ^1.23.0
+      vue: ^3.3.0
 
   '@vue/babel-helper-vue-transform-on@1.5.0':
-    resolution:
-      {
-        integrity: sha512-0dAYkerNhhHutHZ34JtTl2czVQHUNWv6xEbkdF5W+Yrv5pCWsqjeORdOgbtW2I9gWlt+wBmVn+ttqN9ZxR5tzA==
-      }
+    resolution: {integrity: sha512-0dAYkerNhhHutHZ34JtTl2czVQHUNWv6xEbkdF5W+Yrv5pCWsqjeORdOgbtW2I9gWlt+wBmVn+ttqN9ZxR5tzA==}
 
   '@vue/babel-plugin-jsx@1.5.0':
-    resolution:
-      {
-        integrity: sha512-mneBhw1oOqCd2247O0Yw/mRwC9jIGACAJUlawkmMBiNmL4dGA2eMzuNZVNqOUfYTa6vqmND4CtOPzmEEEqLKFw==
-      }
+    resolution: {integrity: sha512-mneBhw1oOqCd2247O0Yw/mRwC9jIGACAJUlawkmMBiNmL4dGA2eMzuNZVNqOUfYTa6vqmND4CtOPzmEEEqLKFw==}
     peerDependencies:
       '@babel/core': ^7.0.0-0
     peerDependenciesMeta:
@@ -1874,80 +1451,44 @@ packages:
         optional: true
 
   '@vue/babel-plugin-resolve-type@1.5.0':
-    resolution:
-      {
-        integrity: sha512-Wm/60o+53JwJODm4Knz47dxJnLDJ9FnKnGZJbUUf8nQRAtt6P+undLUAVU3Ha33LxOJe6IPoifRQ6F/0RrU31w==
-      }
+    resolution: {integrity: sha512-Wm/60o+53JwJODm4Knz47dxJnLDJ9FnKnGZJbUUf8nQRAtt6P+undLUAVU3Ha33LxOJe6IPoifRQ6F/0RrU31w==}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
   '@vue/compiler-core@3.5.22':
-    resolution:
-      {
-        integrity: sha512-jQ0pFPmZwTEiRNSb+i9Ow/I/cHv2tXYqsnHKKyCQ08irI2kdF5qmYedmF8si8mA7zepUFmJ2hqzS8CQmNOWOkQ==
-      }
+    resolution: {integrity: sha512-jQ0pFPmZwTEiRNSb+i9Ow/I/cHv2tXYqsnHKKyCQ08irI2kdF5qmYedmF8si8mA7zepUFmJ2hqzS8CQmNOWOkQ==}
 
   '@vue/compiler-dom@3.5.22':
-    resolution:
-      {
-        integrity: sha512-W8RknzUM1BLkypvdz10OVsGxnMAuSIZs9Wdx1vzA3mL5fNMN15rhrSCLiTm6blWeACwUwizzPVqGJgOGBEN/hA==
-      }
+    resolution: {integrity: sha512-W8RknzUM1BLkypvdz10OVsGxnMAuSIZs9Wdx1vzA3mL5fNMN15rhrSCLiTm6blWeACwUwizzPVqGJgOGBEN/hA==}
 
   '@vue/compiler-sfc@3.5.22':
-    resolution:
-      {
-        integrity: sha512-tbTR1zKGce4Lj+JLzFXDq36K4vcSZbJ1RBu8FxcDv1IGRz//Dh2EBqksyGVypz3kXpshIfWKGOCcqpSbyGWRJQ==
-      }
+    resolution: {integrity: sha512-tbTR1zKGce4Lj+JLzFXDq36K4vcSZbJ1RBu8FxcDv1IGRz//Dh2EBqksyGVypz3kXpshIfWKGOCcqpSbyGWRJQ==}
 
   '@vue/compiler-ssr@3.5.22':
-    resolution:
-      {
-        integrity: sha512-GdgyLvg4R+7T8Nk2Mlighx7XGxq/fJf9jaVofc3IL0EPesTE86cP/8DD1lT3h1JeZr2ySBvyqKQJgbS54IX1Ww==
-      }
+    resolution: {integrity: sha512-GdgyLvg4R+7T8Nk2Mlighx7XGxq/fJf9jaVofc3IL0EPesTE86cP/8DD1lT3h1JeZr2ySBvyqKQJgbS54IX1Ww==}
 
   '@vue/compiler-vue2@2.7.16':
-    resolution:
-      {
-        integrity: sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==
-      }
+    resolution: {integrity: sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==}
 
   '@vue/devtools-api@6.6.4':
-    resolution:
-      {
-        integrity: sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==
-      }
+    resolution: {integrity: sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==}
 
   '@vue/devtools-api@7.7.7':
-    resolution:
-      {
-        integrity: sha512-lwOnNBH2e7x1fIIbVT7yF5D+YWhqELm55/4ZKf45R9T8r9dE2AIOy8HKjfqzGsoTHFbWbr337O4E0A0QADnjBg==
-      }
+    resolution: {integrity: sha512-lwOnNBH2e7x1fIIbVT7yF5D+YWhqELm55/4ZKf45R9T8r9dE2AIOy8HKjfqzGsoTHFbWbr337O4E0A0QADnjBg==}
 
   '@vue/devtools-core@7.7.7':
-    resolution:
-      {
-        integrity: sha512-9z9TLbfC+AjAi1PQyWX+OErjIaJmdFlbDHcD+cAMYKY6Bh5VlsAtCeGyRMrXwIlMEQPukvnWt3gZBLwTAIMKzQ==
-      }
+    resolution: {integrity: sha512-9z9TLbfC+AjAi1PQyWX+OErjIaJmdFlbDHcD+cAMYKY6Bh5VlsAtCeGyRMrXwIlMEQPukvnWt3gZBLwTAIMKzQ==}
     peerDependencies:
       vue: ^3.0.0
 
   '@vue/devtools-kit@7.7.7':
-    resolution:
-      {
-        integrity: sha512-wgoZtxcTta65cnZ1Q6MbAfePVFxfM+gq0saaeytoph7nEa7yMXoi6sCPy4ufO111B9msnw0VOWjPEFCXuAKRHA==
-      }
+    resolution: {integrity: sha512-wgoZtxcTta65cnZ1Q6MbAfePVFxfM+gq0saaeytoph7nEa7yMXoi6sCPy4ufO111B9msnw0VOWjPEFCXuAKRHA==}
 
   '@vue/devtools-shared@7.7.7':
-    resolution:
-      {
-        integrity: sha512-+udSj47aRl5aKb0memBvcUG9koarqnxNM5yjuREvqwK6T3ap4mn3Zqqc17QrBFTqSMjr3HK1cvStEZpMDpfdyw==
-      }
+    resolution: {integrity: sha512-+udSj47aRl5aKb0memBvcUG9koarqnxNM5yjuREvqwK6T3ap4mn3Zqqc17QrBFTqSMjr3HK1cvStEZpMDpfdyw==}
 
-  '@vue/language-core@2.1.10':
-    resolution:
-      {
-        integrity: sha512-DAI289d0K3AB5TUG3xDp9OuQ71CnrujQwJrQnfuZDwo6eGNf0UoRlPuaVNO+Zrn65PC3j0oB2i7mNmVPggeGeQ==
-      }
+  '@vue/language-core@2.2.12':
+    resolution: {integrity: sha512-IsGljWbKGU1MZpBPN+BvPAdr55YPkj2nB/TBNGNC32Vy2qLG25DYu/NBN2vNtZqdRbTRjaoYrahLrToim2NanA==}
     peerDependencies:
       typescript: '*'
     peerDependenciesMeta:
@@ -1955,745 +1496,541 @@ packages:
         optional: true
 
   '@vue/reactivity@3.5.22':
-    resolution:
-      {
-        integrity: sha512-f2Wux4v/Z2pqc9+4SmgZC1p73Z53fyD90NFWXiX9AKVnVBEvLFOWCEgJD3GdGnlxPZt01PSlfmLqbLYzY/Fw4A==
-      }
+    resolution: {integrity: sha512-f2Wux4v/Z2pqc9+4SmgZC1p73Z53fyD90NFWXiX9AKVnVBEvLFOWCEgJD3GdGnlxPZt01PSlfmLqbLYzY/Fw4A==}
 
   '@vue/runtime-core@3.5.22':
-    resolution:
-      {
-        integrity: sha512-EHo4W/eiYeAzRTN5PCextDUZ0dMs9I8mQ2Fy+OkzvRPUYQEyK9yAjbasrMCXbLNhF7P0OUyivLjIy0yc6VrLJQ==
-      }
+    resolution: {integrity: sha512-EHo4W/eiYeAzRTN5PCextDUZ0dMs9I8mQ2Fy+OkzvRPUYQEyK9yAjbasrMCXbLNhF7P0OUyivLjIy0yc6VrLJQ==}
 
   '@vue/runtime-dom@3.5.22':
-    resolution:
-      {
-        integrity: sha512-Av60jsryAkI023PlN7LsqrfPvwfxOd2yAwtReCjeuugTJTkgrksYJJstg1e12qle0NarkfhfFu1ox2D+cQotww==
-      }
+    resolution: {integrity: sha512-Av60jsryAkI023PlN7LsqrfPvwfxOd2yAwtReCjeuugTJTkgrksYJJstg1e12qle0NarkfhfFu1ox2D+cQotww==}
 
   '@vue/server-renderer@3.5.22':
-    resolution:
-      {
-        integrity: sha512-gXjo+ao0oHYTSswF+a3KRHZ1WszxIqO7u6XwNHqcqb9JfyIL/pbWrrh/xLv7jeDqla9u+LK7yfZKHih1e1RKAQ==
-      }
+    resolution: {integrity: sha512-gXjo+ao0oHYTSswF+a3KRHZ1WszxIqO7u6XwNHqcqb9JfyIL/pbWrrh/xLv7jeDqla9u+LK7yfZKHih1e1RKAQ==}
     peerDependencies:
       vue: 3.5.22
 
   '@vue/shared@3.5.22':
-    resolution:
-      {
-        integrity: sha512-F4yc6palwq3TT0u+FYf0Ns4Tfl9GRFURDN2gWG7L1ecIaS/4fCIuFOjMTnCyjsu/OK6vaDKLCrGAa+KvvH+h4w==
-      }
+    resolution: {integrity: sha512-F4yc6palwq3TT0u+FYf0Ns4Tfl9GRFURDN2gWG7L1ecIaS/4fCIuFOjMTnCyjsu/OK6vaDKLCrGAa+KvvH+h4w==}
+
+  '@vueuse/core@10.11.1':
+    resolution: {integrity: sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==}
 
   '@vueuse/core@13.9.0':
-    resolution:
-      {
-        integrity: sha512-ts3regBQyURfCE2BcytLqzm8+MmLlo5Ln/KLoxDVcsZ2gzIwVNnQpQOL/UKV8alUqjSZOlpFZcRNsLRqj+OzyA==
-      }
+    resolution: {integrity: sha512-ts3regBQyURfCE2BcytLqzm8+MmLlo5Ln/KLoxDVcsZ2gzIwVNnQpQOL/UKV8alUqjSZOlpFZcRNsLRqj+OzyA==}
     peerDependencies:
       vue: ^3.5.0
 
   '@vueuse/core@9.13.0':
-    resolution:
-      {
-        integrity: sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==
-      }
+    resolution: {integrity: sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==}
+
+  '@vueuse/metadata@10.11.1':
+    resolution: {integrity: sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==}
 
   '@vueuse/metadata@13.9.0':
-    resolution:
-      {
-        integrity: sha512-1AFRvuiGphfF7yWixZa0KwjYH8ulyjDCC0aFgrGRz8+P4kvDFSdXLVfTk5xAN9wEuD1J6z4/myMoYbnHoX07zg==
-      }
+    resolution: {integrity: sha512-1AFRvuiGphfF7yWixZa0KwjYH8ulyjDCC0aFgrGRz8+P4kvDFSdXLVfTk5xAN9wEuD1J6z4/myMoYbnHoX07zg==}
 
   '@vueuse/metadata@9.13.0':
-    resolution:
-      {
-        integrity: sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==
-      }
+    resolution: {integrity: sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==}
+
+  '@vueuse/shared@10.11.1':
+    resolution: {integrity: sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==}
 
   '@vueuse/shared@13.9.0':
-    resolution:
-      {
-        integrity: sha512-e89uuTLMh0U5cZ9iDpEI2senqPGfbPRTHM/0AaQkcxnpqjkZqDYP8rpfm7edOz8s+pOCOROEy1PIveSW8+fL5g==
-      }
+    resolution: {integrity: sha512-e89uuTLMh0U5cZ9iDpEI2senqPGfbPRTHM/0AaQkcxnpqjkZqDYP8rpfm7edOz8s+pOCOROEy1PIveSW8+fL5g==}
     peerDependencies:
       vue: ^3.5.0
 
   '@vueuse/shared@9.13.0':
-    resolution:
-      {
-        integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==
-      }
+    resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==}
 
-  '@wangeditor/basic-modules@1.1.7':
-    resolution:
-      {
-        integrity: sha512-cY9CPkLJaqF05STqfpZKWG4LpxTMeGSIIF1fHvfm/mz+JXatCagjdkbxdikOuKYlxDdeqvOeBmsUBItufDLXZg==
-      }
+  '@wangeditor-next/basic-modules@2.0.0':
+    resolution: {integrity: sha512-oH7Cv6mHorvBkj5t3isP9wncgWABYLlQpoQZYOIFtWVwgsQatwoGVFHF6PoJzz+mTkt5UaJcyfDxFSo9Thvhdw==}
     peerDependencies:
-      '@wangeditor/core': 1.x
-      dom7: ^3.0.0
+      '@wangeditor-next/core': 1.8.0
+      dom7: ^3.0.0 || ^4.0.0
       lodash.throttle: ^4.1.1
-      nanoid: ^3.2.0
-      slate: ^0.72.0
-      snabbdom: ^3.1.0
+      nanoid: ^5.0.0
+      slate: ^0.123.0
+      snabbdom: ^3.6.0
 
-  '@wangeditor/code-highlight@1.0.3':
-    resolution:
-      {
-        integrity: sha512-iazHwO14XpCuIWJNTQTikqUhGKyqj+dUNWJ9288Oym9M2xMVHvnsOmDU2sgUDWVy+pOLojReMPgXCsvvNlOOhw==
-      }
+  '@wangeditor-next/code-highlight@2.0.0':
+    resolution: {integrity: sha512-A0m4KghOK+9jyufSBidTAtva5VssC2zW3oYItRdMi75p3WV8Kqb67q0kUeFcDzlm9H+IvXzwvSnQ8xl6Zk07nw==}
     peerDependencies:
-      '@wangeditor/core': 1.x
-      dom7: ^3.0.0
-      slate: ^0.72.0
-      snabbdom: ^3.1.0
+      '@wangeditor-next/core': 1.8.0
+      dom7: ^3.0.0 || ^4.0.0
+      slate: ^0.123.0
+      snabbdom: ^3.6.0
 
-  '@wangeditor/core@1.1.19':
-    resolution:
-      {
-        integrity: sha512-KevkB47+7GhVszyYF2pKGKtCSj/YzmClsD03C3zTt+9SR2XWT5T0e3yQqg8baZpcMvkjs1D8Dv4fk8ok/UaS2Q==
-      }
+  '@wangeditor-next/core@1.8.0':
+    resolution: {integrity: sha512-U2TlQ0Lpo6aLb0KD8oJgzG/rFAYO61cy+qbZu+t5lDfS3CECNjOhGIC3C7/dXIhiMQ8V/LY4cvrPt9R5G4vLjA==}
     peerDependencies:
       '@uppy/core': ^2.1.1
       '@uppy/xhr-upload': ^2.0.3
-      dom7: ^3.0.0
+      dom7: ^3.0.0 || ^4.0.0
       is-hotkey: ^0.2.0
       lodash.camelcase: ^4.3.0
       lodash.clonedeep: ^4.5.0
       lodash.debounce: ^4.0.8
       lodash.foreach: ^4.5.0
-      lodash.isequal: ^4.5.0
       lodash.throttle: ^4.1.1
       lodash.toarray: ^4.4.0
-      nanoid: ^3.2.0
-      slate: ^0.72.0
-      snabbdom: ^3.1.0
+      nanoid: ^5.0.0
+      slate: ^0.123.0
+      snabbdom: ^3.6.0
 
-  '@wangeditor/editor-for-vue@5.1.12':
-    resolution:
-      {
-        integrity: sha512-0Ds3D8I+xnpNWezAeO7HmPRgTfUxHLMd9JKcIw+QzvSmhC5xUHbpCcLU+KLmeBKTR/zffnS5GQo6qi3GhTMJWQ==
-      }
+  '@wangeditor-next/editor-for-vue@5.1.14':
+    resolution: {integrity: sha512-Xkrdo590AhLHvzyR+U246t6T89nIWHz1weAgMuo8jEA2HS5RiUnsA4U6+iUGaQ2E5c8mYQaeNqzHQXUp9Okbiw==}
     peerDependencies:
-      '@wangeditor/editor': '>=5.1.0'
+      '@wangeditor-next/editor': '>=5.1.0'
       vue: ^3.0.5
 
-  '@wangeditor/editor@5.1.23':
-    resolution:
-      {
-        integrity: sha512-0RxfeVTuK1tktUaPROnCoFfaHVJpRAIE2zdS0mpP+vq1axVQpLjM8+fCvKzqYIkH0Pg+C+44hJpe3VVroSkEuQ==
-      }
+  '@wangeditor-next/editor@5.7.0':
+    resolution: {integrity: sha512-bxkw/TeWBJz7AU4qXZnx5tx/s1yzx8XdLmSRN9ev4btArKnfXR/6hr3dqxUSsyea8q//IpEv1qr9tc2ureEAsA==}
 
-  '@wangeditor/list-module@1.0.5':
-    resolution:
-      {
-        integrity: sha512-uDuYTP6DVhcYf7mF1pTlmNn5jOb4QtcVhYwSSAkyg09zqxI1qBqsfUnveeDeDqIuptSJhkh81cyxi+MF8sEPOQ==
-      }
+  '@wangeditor-next/list-module@2.0.0':
+    resolution: {integrity: sha512-n7WruLV9VQxBFbav/pwWS+n5rsANqmEhVINwtngTSbScD/tDYRtLJ95SGKPU3gtBR9KHd06yEnXEgG3Pmy7A4A==}
     peerDependencies:
-      '@wangeditor/core': 1.x
-      dom7: ^3.0.0
-      slate: ^0.72.0
-      snabbdom: ^3.1.0
+      '@wangeditor-next/core': 1.8.0
+      dom7: ^3.0.0 || ^4.0.0
+      slate: ^0.123.0
+      snabbdom: ^3.6.0
 
-  '@wangeditor/table-module@1.1.4':
-    resolution:
-      {
-        integrity: sha512-5saanU9xuEocxaemGdNi9t8MCDSucnykEC6jtuiT72kt+/Hhh4nERYx1J20OPsTCCdVr7hIyQenFD1iSRkIQ6w==
-      }
+  '@wangeditor-next/table-module@2.0.0':
+    resolution: {integrity: sha512-uOj0QA6Esb/T75cCGYWByWDRX/i8EBYIJq0tNOhGxufKQVAS9/D8QshTKQpKniS1AR2PaZg4BEPkn6+QuipKTw==}
     peerDependencies:
-      '@wangeditor/core': 1.x
-      dom7: ^3.0.0
-      lodash.isequal: ^4.5.0
+      '@wangeditor-next/core': 1.8.0
+      dom7: ^3.0.0 || ^4.0.0
+      lodash.debounce: ^4.0.8
       lodash.throttle: ^4.1.1
-      nanoid: ^3.2.0
-      slate: ^0.72.0
-      snabbdom: ^3.1.0
+      nanoid: ^5.0.0
+      slate: ^0.123.0
+      snabbdom: ^3.6.0
 
-  '@wangeditor/upload-image-module@1.0.2':
-    resolution:
-      {
-        integrity: sha512-z81lk/v71OwPDYeQDxj6cVr81aDP90aFuywb8nPD6eQeECtOymrqRODjpO6VGvCVxVck8nUxBHtbxKtjgcwyiA==
-      }
+  '@wangeditor-next/upload-image-module@2.0.0':
+    resolution: {integrity: sha512-mAZjCEpANWYmAZ1xkdda25AT+BMvEUqY5F3WHMB0zg3yPqUtzMv7FN1dpLl1ujErpnX+CdkL0iwon7nejpymjw==}
     peerDependencies:
       '@uppy/core': ^2.0.3
       '@uppy/xhr-upload': ^2.0.3
-      '@wangeditor/basic-modules': 1.x
-      '@wangeditor/core': 1.x
-      dom7: ^3.0.0
+      '@wangeditor-next/basic-modules': 2.0.0
+      '@wangeditor-next/core': 1.8.0
+      dom7: ^3.0.0 || ^4.0.0
       lodash.foreach: ^4.5.0
-      slate: ^0.72.0
-      snabbdom: ^3.1.0
+      slate: ^0.123.0
+      snabbdom: ^3.6.0
 
-  '@wangeditor/video-module@1.1.4':
-    resolution:
-      {
-        integrity: sha512-ZdodDPqKQrgx3IwWu4ZiQmXI8EXZ3hm2/fM6E3t5dB8tCaIGWQZhmqd6P5knfkRAd3z2+YRSRbxOGfoRSp/rLg==
-      }
+  '@wangeditor-next/video-module@2.0.0':
+    resolution: {integrity: sha512-M21rIXlQ41rb5mjAlzEuZB9mRDDrNSsj8EmJBzAwKStEGpJhzMC44HCOFtzbRvh2W3J5mGAPXXWbdHGknxDa6g==}
     peerDependencies:
       '@uppy/core': ^2.1.4
       '@uppy/xhr-upload': ^2.0.7
-      '@wangeditor/core': 1.x
-      dom7: ^3.0.0
-      nanoid: ^3.2.0
-      slate: ^0.72.0
-      snabbdom: ^3.1.0
+      '@wangeditor-next/core': 1.8.0
+      dom7: ^3.0.0 || ^4.0.0
+      nanoid: ^5.0.0
+      slate: ^0.123.0
+      snabbdom: ^3.6.0
 
   JSONStream@1.3.5:
-    resolution:
-      {
-        integrity: sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==
-      }
+    resolution: {integrity: sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==}
     hasBin: true
 
+  abbrev@2.0.0:
+    resolution: {integrity: sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+
   acorn-jsx@5.3.2:
-    resolution:
-      {
-        integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
-      }
+    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
 
   acorn@8.15.0:
-    resolution:
-      {
-        integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==
-      }
-    engines: { node: '>=0.4.0' }
+    resolution: {integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==}
+    engines: {node: '>=0.4.0'}
     hasBin: true
 
   adler-32@1.3.1:
-    resolution:
-      {
-        integrity: sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==
-      }
-    engines: { node: '>=0.8' }
+    resolution: {integrity: sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==}
+    engines: {node: '>=0.8'}
 
   ajv@6.12.6:
-    resolution:
-      {
-        integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
-      }
+    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
 
   ajv@8.17.1:
-    resolution:
-      {
-        integrity: sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==
-      }
+    resolution: {integrity: sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==}
 
-  alien-signals@0.2.2:
-    resolution:
-      {
-        integrity: sha512-cZIRkbERILsBOXTQmMrxc9hgpxglstn69zm+F1ARf4aPAzdAFYd6sBq87ErO0Fj3DV94tglcyHG5kQz9nDC/8A==
-      }
+  alien-signals@1.0.13:
+    resolution: {integrity: sha512-OGj9yyTnJEttvzhTUWuscOvtqxq5vrhF7vL9oS0xJ2mK0ItPYP1/y+vCFebfxoEyAz0++1AIwJ5CMr+Fk3nDmg==}
+
+  animate.css@4.1.1:
+    resolution: {integrity: sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==}
 
   ansi-escapes@4.3.2:
-    resolution:
-      {
-        integrity: sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==
-      }
-    engines: { node: '>=8' }
+    resolution: {integrity: sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==}
+    engines: {node: '>=8'}
 
   ansi-escapes@7.1.1:
-    resolution:
-      {
-        integrity: sha512-Zhl0ErHcSRUaVfGUeUdDuLgpkEo8KIFjB4Y9uAc46ScOpdDiU1Dbyplh7qWJeJ/ZHpbyMSM26+X3BySgnIz40Q==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-Zhl0ErHcSRUaVfGUeUdDuLgpkEo8KIFjB4Y9uAc46ScOpdDiU1Dbyplh7qWJeJ/ZHpbyMSM26+X3BySgnIz40Q==}
+    engines: {node: '>=18'}
 
   ansi-regex@5.0.1:
-    resolution:
-      {
-        integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
-      }
-    engines: { node: '>=8' }
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
 
   ansi-regex@6.2.2:
-    resolution:
-      {
-        integrity: sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==
-      }
-    engines: { node: '>=12' }
+    resolution: {integrity: sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==}
+    engines: {node: '>=12'}
 
   ansi-styles@3.2.1:
-    resolution:
-      {
-        integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
-      }
-    engines: { node: '>=4' }
+    resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
+    engines: {node: '>=4'}
 
   ansi-styles@4.3.0:
-    resolution:
-      {
-        integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
-      }
-    engines: { node: '>=8' }
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+    engines: {node: '>=8'}
 
   ansi-styles@6.2.3:
-    resolution:
-      {
-        integrity: sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==
-      }
-    engines: { node: '>=12' }
+    resolution: {integrity: sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==}
+    engines: {node: '>=12'}
 
   anymatch@3.1.3:
-    resolution:
-      {
-        integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==
-      }
-    engines: { node: '>= 8' }
+    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
+    engines: {node: '>= 8'}
+
+  archiver-utils@2.1.0:
+    resolution: {integrity: sha512-bEL/yUb/fNNiNTuUz979Z0Yg5L+LzLxGJz8x79lYmR54fmTIb6ob/hNQgkQnIUDWIFjZVQwl9Xs356I6BAMHfw==}
+    engines: {node: '>= 6'}
+
+  archiver-utils@3.0.4:
+    resolution: {integrity: sha512-KVgf4XQVrTjhyWmx6cte4RxonPLR9onExufI1jhvw/MQ4BB6IsZD5gT8Lq+u/+pRkWna/6JoHpiQioaqFP5Rzw==}
+    engines: {node: '>= 10'}
+
+  archiver@5.3.2:
+    resolution: {integrity: sha512-+25nxyyznAXF7Nef3y0EbBeqmGZgeN/BxHX29Rs39djAfaFalmQ89SE6CWyDCHzGL0yt/ycBtNOmGTW0FyGWNw==}
+    engines: {node: '>= 10'}
 
   argparse@2.0.1:
-    resolution:
-      {
-        integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
-      }
+    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
   array-ify@1.0.0:
-    resolution:
-      {
-        integrity: sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng==
-      }
+    resolution: {integrity: sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng==}
 
   array-union@2.1.0:
-    resolution:
-      {
-        integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
-      }
-    engines: { node: '>=8' }
+    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
+    engines: {node: '>=8'}
 
   astral-regex@2.0.0:
-    resolution:
-      {
-        integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==
-      }
-    engines: { node: '>=8' }
+    resolution: {integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==}
+    engines: {node: '>=8'}
 
   async-validator@4.2.5:
-    resolution:
-      {
-        integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==
-      }
+    resolution: {integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==}
+
+  async@3.2.6:
+    resolution: {integrity: sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==}
 
   asynckit@0.4.0:
-    resolution:
-      {
-        integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
-      }
+    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
 
   at-least-node@1.0.0:
-    resolution:
-      {
-        integrity: sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==
-      }
-    engines: { node: '>= 4.0.0' }
+    resolution: {integrity: sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==}
+    engines: {node: '>= 4.0.0'}
+
+  autoprefixer@10.5.0:
+    resolution: {integrity: sha512-FMhOoZV4+qR6aTUALKX2rEqGG+oyATvwBt9IIzVR5rMa2HRWPkxf+P+PAJLD1I/H5/II+HuZcBJYEFBpq39ong==}
+    engines: {node: ^10 || ^12 || >=14}
+    hasBin: true
+    peerDependencies:
+      postcss: ^8.1.0
 
   axios@1.12.2:
-    resolution:
-      {
-        integrity: sha512-vMJzPewAlRyOgxV2dU0Cuz2O8zzzx9VYtbJOaBgXFeLc4IV/Eg50n4LowmehOOR61S8ZMpc2K5Sa7g6A4jfkUw==
-      }
+    resolution: {integrity: sha512-vMJzPewAlRyOgxV2dU0Cuz2O8zzzx9VYtbJOaBgXFeLc4IV/Eg50n4LowmehOOR61S8ZMpc2K5Sa7g6A4jfkUw==}
 
   balanced-match@1.0.2:
-    resolution:
-      {
-        integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
-      }
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
   balanced-match@2.0.0:
-    resolution:
-      {
-        integrity: sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==
-      }
+    resolution: {integrity: sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==}
 
   base64-js@1.5.1:
-    resolution:
-      {
-        integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
-      }
+    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
+
+  baseline-browser-mapping@2.10.25:
+    resolution: {integrity: sha512-QO/VHsXCQdnzADMfmkeOPvHdIAkoB7i0/rGjINPJEetLx75hNttVWGQ/jycHUDP9zZ9rupbm60WRxcwViB0MiA==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
 
   baseline-browser-mapping@2.8.8:
-    resolution:
-      {
-        integrity: sha512-be0PUaPsQX/gPWWgFsdD+GFzaoig5PXaUC1xLkQiYdDnANU8sMnHoQd8JhbJQuvTWrWLyeFN9Imb5Qtfvr4RrQ==
-      }
+    resolution: {integrity: sha512-be0PUaPsQX/gPWWgFsdD+GFzaoig5PXaUC1xLkQiYdDnANU8sMnHoQd8JhbJQuvTWrWLyeFN9Imb5Qtfvr4RrQ==}
     hasBin: true
 
+  big-integer@1.6.52:
+    resolution: {integrity: sha512-QxD8cf2eVqJOOz63z6JIN9BzvVs/dlySa5HGSBH5xtR8dPteIRQnBxxKqkNTiT6jbDTF6jAfrd4oMcND9RGbQg==}
+    engines: {node: '>=0.6'}
+
   binary-extensions@2.3.0:
-    resolution:
-      {
-        integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==
-      }
-    engines: { node: '>=8' }
+    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
+    engines: {node: '>=8'}
+
+  binary@0.3.0:
+    resolution: {integrity: sha512-D4H1y5KYwpJgK8wk1Cue5LLPgmwHKYSChkbspQg5JtVuR5ulGckxfR62H3AE9UDkdMC8yyXlqYihuz3Aqg2XZg==}
 
   birpc@2.6.1:
-    resolution:
-      {
-        integrity: sha512-LPnFhlDpdSH6FJhJyn4M0kFO7vtQ5iPw24FnG0y21q09xC7e8+1LeR31S1MAIrDAHp4m7aas4bEkTDTvMAtebQ==
-      }
+    resolution: {integrity: sha512-LPnFhlDpdSH6FJhJyn4M0kFO7vtQ5iPw24FnG0y21q09xC7e8+1LeR31S1MAIrDAHp4m7aas4bEkTDTvMAtebQ==}
 
   bl@4.1.0:
-    resolution:
-      {
-        integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==
-      }
+    resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
+
+  bluebird@3.4.7:
+    resolution: {integrity: sha512-iD3898SR7sWVRHbiQv+sHUtHnMvC1o3nW5rAcqnq3uOn07DSAppZYUkIGslDz6gXC7HfunPe7YVBgoEJASPcHA==}
 
   boolbase@1.0.0:
-    resolution:
-      {
-        integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
-      }
+    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
 
   brace-expansion@1.1.12:
-    resolution:
-      {
-        integrity: sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==
-      }
+    resolution: {integrity: sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==}
 
   brace-expansion@2.0.2:
-    resolution:
-      {
-        integrity: sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==
-      }
+    resolution: {integrity: sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==}
 
   braces@3.0.3:
-    resolution:
-      {
-        integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
-      }
-    engines: { node: '>=8' }
+    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
+    engines: {node: '>=8'}
 
   browserslist@4.26.2:
-    resolution:
-      {
-        integrity: sha512-ECFzp6uFOSB+dcZ5BK/IBaGWssbSYBHvuMeMt3MMFyhI0Z8SqGgEkBLARgpRH3hutIgPVsALcMwbDrJqPxQ65A==
-      }
-    engines: { node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7 }
+    resolution: {integrity: sha512-ECFzp6uFOSB+dcZ5BK/IBaGWssbSYBHvuMeMt3MMFyhI0Z8SqGgEkBLARgpRH3hutIgPVsALcMwbDrJqPxQ65A==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
+  browserslist@4.28.2:
+    resolution: {integrity: sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+
+  buffer-crc32@0.2.13:
+    resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==}
+
   buffer-from@1.1.2:
-    resolution:
-      {
-        integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
-      }
+    resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
+
+  buffer-indexof-polyfill@1.0.2:
+    resolution: {integrity: sha512-I7wzHwA3t1/lwXQh+A5PbNvJxgfo5r3xulgpYDB5zckTu/Z9oUK9biouBKQUjEqzaz3HnAT6TYoovmE+GqSf7A==}
+    engines: {node: '>=0.10'}
 
   buffer@5.7.1:
-    resolution:
-      {
-        integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==
-      }
+    resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==}
+
+  buffers@0.1.1:
+    resolution: {integrity: sha512-9q/rDEGSb/Qsvv2qvzIzdluL5k7AaJOTrw23z9reQthrbF7is4CtlT0DXyO1oei2DCp4uojjzQ7igaSHp1kAEQ==}
+    engines: {node: '>=0.2.0'}
 
   bundle-name@4.1.0:
-    resolution:
-      {
-        integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==}
+    engines: {node: '>=18'}
 
-  cacheable@2.0.2:
-    resolution:
-      {
-        integrity: sha512-dWjhLx8RWnPsAWVKwW/wI6OJpQ/hSVb1qS0NUif8TR9vRiSwci7Gey8x04kRU9iAF+Rnbtex5Kjjfg/aB5w8Pg==
-      }
+  cacheable@2.3.4:
+    resolution: {integrity: sha512-djgxybDbw9fL/ZWMI3+CE8ZilNxcwFkVtDc1gJ+IlOSSWkSMPQabhV/XCHTQ6pwwN6aivXPZ43omTooZiX06Ew==}
 
   cachedir@2.3.0:
-    resolution:
-      {
-        integrity: sha512-A+Fezp4zxnit6FanDmv9EqXNAi3vt9DWp51/71UEhXukb7QUuvtv9344h91dyAxuTLoSYJFU299qzR3tzwPAhw==
-      }
-    engines: { node: '>=6' }
+    resolution: {integrity: sha512-A+Fezp4zxnit6FanDmv9EqXNAi3vt9DWp51/71UEhXukb7QUuvtv9344h91dyAxuTLoSYJFU299qzR3tzwPAhw==}
+    engines: {node: '>=6'}
 
   call-bind-apply-helpers@1.0.2:
-    resolution:
-      {
-        integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==
-      }
-    engines: { node: '>= 0.4' }
+    resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
+    engines: {node: '>= 0.4'}
+
+  call-bound@1.0.4:
+    resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
+    engines: {node: '>= 0.4'}
 
   callsites@3.1.0:
-    resolution:
-      {
-        integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
-      }
-    engines: { node: '>=6' }
+    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
+    engines: {node: '>=6'}
 
   caniuse-lite@1.0.30001745:
-    resolution:
-      {
-        integrity: sha512-ywt6i8FzvdgrrrGbr1jZVObnVv6adj+0if2/omv9cmR2oiZs30zL4DIyaptKcbOrBdOIc74QTMoJvSE2QHh5UQ==
-      }
+    resolution: {integrity: sha512-ywt6i8FzvdgrrrGbr1jZVObnVv6adj+0if2/omv9cmR2oiZs30zL4DIyaptKcbOrBdOIc74QTMoJvSE2QHh5UQ==}
+
+  caniuse-lite@1.0.30001791:
+    resolution: {integrity: sha512-yk0l/YSrOnFZk3UROpDLQD9+kC1l4meK/wed583AXrzoarMGJcbRi2Q4RaUYbKxYAsZ8sWmaSa/DsLmdBeI1vQ==}
 
   cfb@1.2.2:
-    resolution:
-      {
-        integrity: sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==
-      }
-    engines: { node: '>=0.8' }
+    resolution: {integrity: sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==}
+    engines: {node: '>=0.8'}
+
+  chainsaw@0.1.0:
+    resolution: {integrity: sha512-75kWfWt6MEKNC8xYXIdRpDehRYY/tNSgwKaJq+dbbDcxORuVrrQ+SEHoWsniVn9XPYfP4gmdWIeDk/4YNp1rNQ==}
 
   chalk@2.4.2:
-    resolution:
-      {
-        integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
-      }
-    engines: { node: '>=4' }
+    resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
+    engines: {node: '>=4'}
 
   chalk@4.1.2:
-    resolution:
-      {
-        integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
-      }
-    engines: { node: '>=10' }
+    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
+    engines: {node: '>=10'}
 
   chalk@5.6.2:
-    resolution:
-      {
-        integrity: sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==
-      }
-    engines: { node: ^12.17.0 || ^14.13 || >=16.0.0 }
+    resolution: {integrity: sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==}
+    engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
 
   chardet@0.7.0:
-    resolution:
-      {
-        integrity: sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
-      }
+    resolution: {integrity: sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==}
 
   chokidar@3.6.0:
-    resolution:
-      {
-        integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
-      }
-    engines: { node: '>= 8.10.0' }
+    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
+    engines: {node: '>= 8.10.0'}
 
   chokidar@4.0.3:
-    resolution:
-      {
-        integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==
-      }
-    engines: { node: '>= 14.16.0' }
+    resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
+    engines: {node: '>= 14.16.0'}
 
   chownr@3.0.0:
-    resolution:
-      {
-        integrity: sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==}
+    engines: {node: '>=18'}
 
   cli-cursor@3.1.0:
-    resolution:
-      {
-        integrity: sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==
-      }
-    engines: { node: '>=8' }
+    resolution: {integrity: sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==}
+    engines: {node: '>=8'}
 
   cli-cursor@5.0.0:
-    resolution:
-      {
-        integrity: sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==}
+    engines: {node: '>=18'}
 
   cli-spinners@2.9.2:
-    resolution:
-      {
-        integrity: sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==
-      }
-    engines: { node: '>=6' }
+    resolution: {integrity: sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==}
+    engines: {node: '>=6'}
 
   cli-truncate@4.0.0:
-    resolution:
-      {
-        integrity: sha512-nPdaFdQ0h/GEigbPClz11D0v/ZJEwxmeVZGeMo3Z5StPtUTkA9o1lD6QwoirYiSDzbcwn2XcjwmCp68W1IS4TA==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-nPdaFdQ0h/GEigbPClz11D0v/ZJEwxmeVZGeMo3Z5StPtUTkA9o1lD6QwoirYiSDzbcwn2XcjwmCp68W1IS4TA==}
+    engines: {node: '>=18'}
 
   cli-width@3.0.0:
-    resolution:
-      {
-        integrity: sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==
-      }
-    engines: { node: '>= 10' }
+    resolution: {integrity: sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==}
+    engines: {node: '>= 10'}
+
+  clipboard@2.0.11:
+    resolution: {integrity: sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==}
 
   cliui@8.0.1:
-    resolution:
-      {
-        integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==
-      }
-    engines: { node: '>=12' }
+    resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
+    engines: {node: '>=12'}
 
   clone@1.0.4:
-    resolution:
-      {
-        integrity: sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
-      }
-    engines: { node: '>=0.8' }
+    resolution: {integrity: sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==}
+    engines: {node: '>=0.8'}
+
+  codemirror-editor-vue3@2.8.0:
+    resolution: {integrity: sha512-ebYGNhBpLmQNLguXzNyMMkn6K8v3lcS5/Ncvdn6YS4bLGEHE67MfsJIS/WV0L7I6WavUuFlY/Rs/AJKChIwSwg==}
+    peerDependencies:
+      codemirror: ^5
+      diff-match-patch: ^1.0.5
+      vue: ^3.x
+
+  codemirror@5.65.21:
+    resolution: {integrity: sha512-6teYk0bA0nR3QP0ihGMoxuKzpl5W80FpnHpBJpgy66NK3cZv5b/d/HY8PnRvfSsCG1MTfr92u2WUl+wT0E40mQ==}
 
   codepage@1.15.0:
-    resolution:
-      {
-        integrity: sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==
-      }
-    engines: { node: '>=0.8' }
+    resolution: {integrity: sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==}
+    engines: {node: '>=0.8'}
 
   color-convert@1.9.3:
-    resolution:
-      {
-        integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
-      }
+    resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
 
   color-convert@2.0.1:
-    resolution:
-      {
-        integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
-      }
-    engines: { node: '>=7.0.0' }
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+    engines: {node: '>=7.0.0'}
 
   color-name@1.1.3:
-    resolution:
-      {
-        integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
-      }
+    resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
 
   color-name@1.1.4:
-    resolution:
-      {
-        integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
-      }
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
   colord@2.9.3:
-    resolution:
-      {
-        integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==
-      }
+    resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==}
 
   colorette@2.0.20:
-    resolution:
-      {
-        integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==
-      }
+    resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
 
   combined-stream@1.0.8:
-    resolution:
-      {
-        integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
-      }
-    engines: { node: '>= 0.8' }
+    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
+    engines: {node: '>= 0.8'}
+
+  commander@10.0.1:
+    resolution: {integrity: sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==}
+    engines: {node: '>=14'}
 
   commander@13.1.0:
-    resolution:
-      {
-        integrity: sha512-/rFeCpNJQbhSZjGVwO9RFV3xPqbnERS8MmIQzCtD/zl6gpJuV/bMLuN92oG3F7d8oDEHHRrujSXNUr8fpjntKw==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-/rFeCpNJQbhSZjGVwO9RFV3xPqbnERS8MmIQzCtD/zl6gpJuV/bMLuN92oG3F7d8oDEHHRrujSXNUr8fpjntKw==}
+    engines: {node: '>=18'}
 
   commander@2.20.3:
-    resolution:
-      {
-        integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
-      }
+    resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
 
   commitizen@4.3.1:
-    resolution:
-      {
-        integrity: sha512-gwAPAVTy/j5YcOOebcCRIijn+mSjWJC+IYKivTu6aG8Ei/scoXgfsMRnuAk6b0GRste2J4NGxVdMN3ZpfNaVaw==
-      }
-    engines: { node: '>= 12' }
+    resolution: {integrity: sha512-gwAPAVTy/j5YcOOebcCRIijn+mSjWJC+IYKivTu6aG8Ei/scoXgfsMRnuAk6b0GRste2J4NGxVdMN3ZpfNaVaw==}
+    engines: {node: '>= 12'}
     hasBin: true
 
   compare-func@2.0.0:
-    resolution:
-      {
-        integrity: sha512-zHig5N+tPWARooBnb0Zx1MFcdfpyJrfTJ3Y5L+IFvUm8rM74hHz66z0gw0x4tijh5CorKkKUCnW82R2vmpeCRA==
-      }
+    resolution: {integrity: sha512-zHig5N+tPWARooBnb0Zx1MFcdfpyJrfTJ3Y5L+IFvUm8rM74hHz66z0gw0x4tijh5CorKkKUCnW82R2vmpeCRA==}
 
-  compute-scroll-into-view@1.0.20:
-    resolution:
-      {
-        integrity: sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg==
-      }
+  compress-commons@4.1.2:
+    resolution: {integrity: sha512-D3uMHtGc/fcO1Gt1/L7i1e33VOvD4A9hfQLP+6ewd+BvG/gQ84Yh4oftEhAdjSMgBgwGL+jsppT7JYNpo6MHHg==}
+    engines: {node: '>= 10'}
+
+  compute-scroll-into-view@3.1.1:
+    resolution: {integrity: sha512-VRhuHOLoKYOy4UbilLbUzbYg93XLjv2PncJC50EuTWPA3gaja1UjBsUP/D/9/juV3vQFr6XBEzn9KCAHdUvOHw==}
 
   concat-map@0.0.1:
-    resolution:
-      {
-        integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
-      }
+    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
   confbox@0.1.8:
-    resolution:
-      {
-        integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==
-      }
+    resolution: {integrity: sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==}
 
   confbox@0.2.2:
-    resolution:
-      {
-        integrity: sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==
-      }
+    resolution: {integrity: sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==}
+
+  config-chain@1.1.13:
+    resolution: {integrity: sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==}
 
   conventional-changelog-angular@7.0.0:
-    resolution:
-      {
-        integrity: sha512-ROjNchA9LgfNMTTFSIWPzebCwOGFdgkEq45EnvvrmSLvCtAw0HSmrCs7/ty+wAeYUZyNay0YMUNYFTRL72PkBQ==
-      }
-    engines: { node: '>=16' }
+    resolution: {integrity: sha512-ROjNchA9LgfNMTTFSIWPzebCwOGFdgkEq45EnvvrmSLvCtAw0HSmrCs7/ty+wAeYUZyNay0YMUNYFTRL72PkBQ==}
+    engines: {node: '>=16'}
 
   conventional-changelog-conventionalcommits@7.0.2:
-    resolution:
-      {
-        integrity: sha512-NKXYmMR/Hr1DevQegFB4MwfM5Vv0m4UIxKZTTYuD98lpTknaZlSRrDOG4X7wIXpGkfsYxZTghUN+Qq+T0YQI7w==
-      }
-    engines: { node: '>=16' }
+    resolution: {integrity: sha512-NKXYmMR/Hr1DevQegFB4MwfM5Vv0m4UIxKZTTYuD98lpTknaZlSRrDOG4X7wIXpGkfsYxZTghUN+Qq+T0YQI7w==}
+    engines: {node: '>=16'}
 
   conventional-commit-types@3.0.0:
-    resolution:
-      {
-        integrity: sha512-SmmCYnOniSsAa9GqWOeLqc179lfr5TRu5b4QFDkbsrJ5TZjPJx85wtOr3zn+1dbeNiXDKGPbZ72IKbPhLXh/Lg==
-      }
+    resolution: {integrity: sha512-SmmCYnOniSsAa9GqWOeLqc179lfr5TRu5b4QFDkbsrJ5TZjPJx85wtOr3zn+1dbeNiXDKGPbZ72IKbPhLXh/Lg==}
 
   conventional-commits-parser@5.0.0:
-    resolution:
-      {
-        integrity: sha512-ZPMl0ZJbw74iS9LuX9YIAiW8pfM5p3yh2o/NbXHbkFuZzY5jvdi5jFycEOkmBW5H5I7nA+D6f3UcsCLP2vvSEA==
-      }
-    engines: { node: '>=16' }
+    resolution: {integrity: sha512-ZPMl0ZJbw74iS9LuX9YIAiW8pfM5p3yh2o/NbXHbkFuZzY5jvdi5jFycEOkmBW5H5I7nA+D6f3UcsCLP2vvSEA==}
+    engines: {node: '>=16'}
     hasBin: true
 
   convert-source-map@2.0.0:
-    resolution:
-      {
-        integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==
-      }
+    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
   copy-anything@3.0.5:
-    resolution:
-      {
-        integrity: sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==
-      }
-    engines: { node: '>=12.13' }
+    resolution: {integrity: sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==}
+    engines: {node: '>=12.13'}
 
   core-js@3.45.1:
-    resolution:
-      {
-        integrity: sha512-L4NPsJlCfZsPeXukyzHFlg/i7IIVwHSItR0wg0FLNqYClJ4MQYTYLbC7EkjKYRLZF2iof2MUgN0EGy7MdQFChg==
-      }
+    resolution: {integrity: sha512-L4NPsJlCfZsPeXukyzHFlg/i7IIVwHSItR0wg0FLNqYClJ4MQYTYLbC7EkjKYRLZF2iof2MUgN0EGy7MdQFChg==}
+
+  core-util-is@1.0.3:
+    resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
 
   cosmiconfig-typescript-loader@6.1.0:
-    resolution:
-      {
-        integrity: sha512-tJ1w35ZRUiM5FeTzT7DtYWAFFv37ZLqSRkGi2oeCK1gPhvaWjkAtfXvLmvE1pRfxxp9aQo6ba/Pvg1dKj05D4g==
-      }
-    engines: { node: '>=v18' }
+    resolution: {integrity: sha512-tJ1w35ZRUiM5FeTzT7DtYWAFFv37ZLqSRkGi2oeCK1gPhvaWjkAtfXvLmvE1pRfxxp9aQo6ba/Pvg1dKj05D4g==}
+    engines: {node: '>=v18'}
     peerDependencies:
       '@types/node': '*'
       cosmiconfig: '>=9'
       typescript: '>=5'
 
   cosmiconfig@9.0.0:
-    resolution:
-      {
-        integrity: sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==
-      }
-    engines: { node: '>=14' }
+    resolution: {integrity: sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==}
+    engines: {node: '>=14'}
     peerDependencies:
       typescript: '>=4.9.5'
     peerDependenciesMeta:
@@ -2701,106 +2038,106 @@ packages:
         optional: true
 
   crc-32@1.2.2:
-    resolution:
-      {
-        integrity: sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==
-      }
-    engines: { node: '>=0.8' }
+    resolution: {integrity: sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==}
+    engines: {node: '>=0.8'}
     hasBin: true
 
+  crc32-stream@4.0.3:
+    resolution: {integrity: sha512-NT7w2JVU7DFroFdYkeq8cywxrgjPHWkdX1wjpRQXPX5Asews3tA+Ght6lddQO5Mkumffp3X7GEqku3epj2toIw==}
+    engines: {node: '>= 10'}
+
   cross-spawn@7.0.6:
-    resolution:
-      {
-        integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==
-      }
-    engines: { node: '>= 8' }
+    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
+    engines: {node: '>= 8'}
 
   crypto-js@4.2.0:
-    resolution:
-      {
-        integrity: sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==
-      }
+    resolution: {integrity: sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==}
 
   css-functions-list@3.2.3:
-    resolution:
-      {
-        integrity: sha512-IQOkD3hbR5KrN93MtcYuad6YPuTSUhntLHDuLEbFWE+ff2/XSZNdZG+LcbbIW5AXKg/WFIfYItIzVoHngHXZzA==
-      }
-    engines: { node: '>=12 || >=16' }
+    resolution: {integrity: sha512-IQOkD3hbR5KrN93MtcYuad6YPuTSUhntLHDuLEbFWE+ff2/XSZNdZG+LcbbIW5AXKg/WFIfYItIzVoHngHXZzA==}
+    engines: {node: '>=12 || >=16'}
 
   css-tree@3.1.0:
-    resolution:
-      {
-        integrity: sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==
-      }
-    engines: { node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0 }
+    resolution: {integrity: sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
 
   cssesc@3.0.0:
-    resolution:
-      {
-        integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
-      }
-    engines: { node: '>=4' }
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+    engines: {node: '>=4'}
     hasBin: true
 
   csstype@3.1.3:
-    resolution:
-      {
-        integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
-      }
+    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
   cz-conventional-changelog@3.3.0:
-    resolution:
-      {
-        integrity: sha512-U466fIzU5U22eES5lTNiNbZ+d8dfcHcssH4o7QsdWaCcRs/feIPCxKYSWkYBNs5mny7MvEfwpTLWjvbm94hecw==
-      }
-    engines: { node: '>= 10' }
+    resolution: {integrity: sha512-U466fIzU5U22eES5lTNiNbZ+d8dfcHcssH4o7QsdWaCcRs/feIPCxKYSWkYBNs5mny7MvEfwpTLWjvbm94hecw==}
+    engines: {node: '>= 10'}
 
   cz-git@1.12.0:
-    resolution:
-      {
-        integrity: sha512-LaZ+8whPPUOo6Y0Zy4nIbf6JOleV3ejp41sT6N4RPKiKKA+ICWf4ueeIlxIO8b6JtdlDxRzHH/EcRji07nDxcg==
-      }
-    engines: { node: '>=v12.20.0' }
+    resolution: {integrity: sha512-LaZ+8whPPUOo6Y0Zy4nIbf6JOleV3ejp41sT6N4RPKiKKA+ICWf4ueeIlxIO8b6JtdlDxRzHH/EcRji07nDxcg==}
+    engines: {node: '>=v12.20.0'}
+
+  d3-color@3.1.0:
+    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
+    engines: {node: '>=12'}
+
+  d3-dispatch@3.0.1:
+    resolution: {integrity: sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==}
+    engines: {node: '>=12'}
+
+  d3-drag@3.0.0:
+    resolution: {integrity: sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==}
+    engines: {node: '>=12'}
+
+  d3-ease@3.0.1:
+    resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
+    engines: {node: '>=12'}
+
+  d3-interpolate@3.0.1:
+    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
+    engines: {node: '>=12'}
+
+  d3-selection@3.0.0:
+    resolution: {integrity: sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==}
+    engines: {node: '>=12'}
+
+  d3-timer@3.0.1:
+    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
+    engines: {node: '>=12'}
+
+  d3-transition@3.0.1:
+    resolution: {integrity: sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      d3-selection: 2 - 3
+
+  d3-zoom@3.0.0:
+    resolution: {integrity: sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==}
+    engines: {node: '>=12'}
 
   d@1.0.2:
-    resolution:
-      {
-        integrity: sha512-MOqHvMWF9/9MX6nza0KgvFH4HpMU0EF5uUDXqX/BtxtU8NfB0QzRtJ8Oe/6SuS4kbhyzVJwjd97EA4PKrzJ8bw==
-      }
-    engines: { node: '>=0.12' }
+    resolution: {integrity: sha512-MOqHvMWF9/9MX6nza0KgvFH4HpMU0EF5uUDXqX/BtxtU8NfB0QzRtJ8Oe/6SuS4kbhyzVJwjd97EA4PKrzJ8bw==}
+    engines: {node: '>=0.12'}
+
+  dagre@0.8.5:
+    resolution: {integrity: sha512-/aTqmnRta7x7MCCpExk7HQL2O4owCT2h8NT//9I1OQ9vt29Pa0BzSAkR5lwFUcQ7491yVi/3CXU9jQ5o0Mn2Sw==}
 
   danmu.js@1.1.13:
-    resolution:
-      {
-        integrity: sha512-knFd0/cB2HA4FFWiA7eB2suc5vCvoHdqio33FyyCSfP7C+1A+zQcTvnvwfxaZhrxsGj4qaQI2I8XiTqedRaVmg==
-      }
+    resolution: {integrity: sha512-knFd0/cB2HA4FFWiA7eB2suc5vCvoHdqio33FyyCSfP7C+1A+zQcTvnvwfxaZhrxsGj4qaQI2I8XiTqedRaVmg==}
 
   dargs@8.1.0:
-    resolution:
-      {
-        integrity: sha512-wAV9QHOsNbwnWdNW2FYvE1P56wtgSbM+3SZcdGiWQILwVjACCXDCI3Ai8QlCjMDB8YK5zySiXZYBiwGmNY3lnw==
-      }
-    engines: { node: '>=12' }
+    resolution: {integrity: sha512-wAV9QHOsNbwnWdNW2FYvE1P56wtgSbM+3SZcdGiWQILwVjACCXDCI3Ai8QlCjMDB8YK5zySiXZYBiwGmNY3lnw==}
+    engines: {node: '>=12'}
 
   dayjs@1.11.18:
-    resolution:
-      {
-        integrity: sha512-zFBQ7WFRvVRhKcWoUh+ZA1g2HVgUbsZm9sbddh8EC5iv93sui8DVVz1Npvz+r6meo9VKfa8NyLWBsQK1VvIKPA==
-      }
+    resolution: {integrity: sha512-zFBQ7WFRvVRhKcWoUh+ZA1g2HVgUbsZm9sbddh8EC5iv93sui8DVVz1Npvz+r6meo9VKfa8NyLWBsQK1VvIKPA==}
 
   de-indent@1.0.2:
-    resolution:
-      {
-        integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==
-      }
+    resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
 
   debug@4.4.3:
-    resolution:
-      {
-        integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==
-      }
-    engines: { node: '>=6.0' }
+    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
+    engines: {node: '>=6.0'}
     peerDependencies:
       supports-color: '*'
     peerDependenciesMeta:
@@ -2808,352 +2145,222 @@ packages:
         optional: true
 
   dedent@0.7.0:
-    resolution:
-      {
-        integrity: sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==
-      }
+    resolution: {integrity: sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==}
 
   deep-is@0.1.4:
-    resolution:
-      {
-        integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
-      }
+    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
   deep-pick-omit@1.2.1:
-    resolution:
-      {
-        integrity: sha512-2J6Kc/m3irCeqVG42T+SaUMesaK7oGWaedGnQQK/+O0gYc+2SP5bKh/KKTE7d7SJ+GCA9UUE1GRzh6oDe0EnGw==
-      }
+    resolution: {integrity: sha512-2J6Kc/m3irCeqVG42T+SaUMesaK7oGWaedGnQQK/+O0gYc+2SP5bKh/KKTE7d7SJ+GCA9UUE1GRzh6oDe0EnGw==}
 
   default-browser-id@5.0.0:
-    resolution:
-      {
-        integrity: sha512-A6p/pu/6fyBcA1TRz/GqWYPViplrftcW2gZC9q79ngNCKAeR/X3gcEdXQHl4KNXV+3wgIJ1CPkJQ3IHM6lcsyA==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-A6p/pu/6fyBcA1TRz/GqWYPViplrftcW2gZC9q79ngNCKAeR/X3gcEdXQHl4KNXV+3wgIJ1CPkJQ3IHM6lcsyA==}
+    engines: {node: '>=18'}
 
   default-browser@5.2.1:
-    resolution:
-      {
-        integrity: sha512-WY/3TUME0x3KPYdRRxEJJvXRHV4PyPoUsxtZa78lwItwRQRHhd2U9xOscaT/YTf8uCXIAjeJOFBVEh/7FtD8Xg==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-WY/3TUME0x3KPYdRRxEJJvXRHV4PyPoUsxtZa78lwItwRQRHhd2U9xOscaT/YTf8uCXIAjeJOFBVEh/7FtD8Xg==}
+    engines: {node: '>=18'}
 
   defaults@1.0.4:
-    resolution:
-      {
-        integrity: sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==
-      }
+    resolution: {integrity: sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==}
 
   define-lazy-prop@2.0.0:
-    resolution:
-      {
-        integrity: sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==
-      }
-    engines: { node: '>=8' }
+    resolution: {integrity: sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==}
+    engines: {node: '>=8'}
 
   define-lazy-prop@3.0.0:
-    resolution:
-      {
-        integrity: sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==
-      }
-    engines: { node: '>=12' }
+    resolution: {integrity: sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==}
+    engines: {node: '>=12'}
 
   defu@6.1.4:
-    resolution:
-      {
-        integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==
-      }
+    resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==}
 
   delayed-stream@1.0.0:
-    resolution:
-      {
-        integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
-      }
-    engines: { node: '>=0.4.0' }
+    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
+    engines: {node: '>=0.4.0'}
 
   delegate@3.2.0:
-    resolution:
-      {
-        integrity: sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==
-      }
+    resolution: {integrity: sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==}
 
   destr@2.0.5:
-    resolution:
-      {
-        integrity: sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA==
-      }
+    resolution: {integrity: sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA==}
 
   detect-file@1.0.0:
-    resolution:
-      {
-        integrity: sha512-DtCOLG98P007x7wiiOmfI0fi3eIKyWiLTGJ2MDnVi/E04lWGbf+JzrRHMm0rgIIZJGtHpKpbVgLWHrv8xXpc3Q==
-      }
-    engines: { node: '>=0.10.0' }
+    resolution: {integrity: sha512-DtCOLG98P007x7wiiOmfI0fi3eIKyWiLTGJ2MDnVi/E04lWGbf+JzrRHMm0rgIIZJGtHpKpbVgLWHrv8xXpc3Q==}
+    engines: {node: '>=0.10.0'}
 
   detect-indent@6.1.0:
-    resolution:
-      {
-        integrity: sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==
-      }
-    engines: { node: '>=8' }
+    resolution: {integrity: sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==}
+    engines: {node: '>=8'}
 
   detect-libc@1.0.3:
-    resolution:
-      {
-        integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==
-      }
-    engines: { node: '>=0.10' }
+    resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==}
+    engines: {node: '>=0.10'}
     hasBin: true
 
   detect-libc@2.1.2:
-    resolution:
-      {
-        integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==
-      }
-    engines: { node: '>=8' }
+    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
+    engines: {node: '>=8'}
+
+  diff-match-patch@1.0.5:
+    resolution: {integrity: sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==}
 
   dir-glob@3.0.1:
-    resolution:
-      {
-        integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==
-      }
-    engines: { node: '>=8' }
+    resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
+    engines: {node: '>=8'}
 
   dom-serializer@2.0.0:
-    resolution:
-      {
-        integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==
-      }
+    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
 
-  dom7@3.0.0:
-    resolution:
-      {
-        integrity: sha512-oNlcUdHsC4zb7Msx7JN3K0Nro1dzJ48knvBOnDPKJ2GV9wl1i5vydJZUSyOfrkKFDZEud/jBsTk92S/VGSAe/g==
-      }
+  dom7@4.0.6:
+    resolution: {integrity: sha512-emjdpPLhpNubapLFdjNL9tP06Sr+GZkrIHEXLWvOGsytACUrkbeIdjO5g77m00BrHTznnlcNqgmn7pCN192TBA==}
 
   domelementtype@2.3.0:
-    resolution:
-      {
-        integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
-      }
+    resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
 
   domhandler@5.0.3:
-    resolution:
-      {
-        integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==
-      }
-    engines: { node: '>= 4' }
+    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
+    engines: {node: '>= 4'}
+
+  dompurify@3.4.2:
+    resolution: {integrity: sha512-lHeS9SA/IKeIFFyYciHBr2n0v1VMPlSj843HdLOwjb2OxNwdq9Xykxqhk+FE42MzAdHvInbAolSE4mhahPpjXA==}
 
   domutils@3.2.2:
-    resolution:
-      {
-        integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==
-      }
+    resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
 
   dot-prop@5.3.0:
-    resolution:
-      {
-        integrity: sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==
-      }
-    engines: { node: '>=8' }
+    resolution: {integrity: sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==}
+    engines: {node: '>=8'}
 
   downloadjs@1.4.7:
-    resolution:
-      {
-        integrity: sha512-LN1gO7+u9xjU5oEScGFKvXhYf7Y/empUIIEAGBs1LzUq/rg5duiDrkuH5A2lQGd5jfMOb9X9usDa2oVXwJ0U/Q==
-      }
+    resolution: {integrity: sha512-LN1gO7+u9xjU5oEScGFKvXhYf7Y/empUIIEAGBs1LzUq/rg5duiDrkuH5A2lQGd5jfMOb9X9usDa2oVXwJ0U/Q==}
 
   dunder-proto@1.0.1:
-    resolution:
-      {
-        integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==
-      }
-    engines: { node: '>= 0.4' }
+    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
+    engines: {node: '>= 0.4'}
+
+  duplexer2@0.1.4:
+    resolution: {integrity: sha512-asLFVfWWtJ90ZyOUHMqk7/S2w2guQKxUI2itj3d92ADHhxUSbCMGi1f1cBcJ7xM1To+pE/Khbwo1yuNbMEPKeA==}
+
+  eastasianwidth@0.2.0:
+    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
   echarts@6.0.0:
-    resolution:
-      {
-        integrity: sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==
-      }
+    resolution: {integrity: sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==}
+
+  editorconfig@1.0.7:
+    resolution: {integrity: sha512-e0GOtq/aTQhVdNyDU9e02+wz9oDDM+SIOQxWME2QRjzRX5yyLAuHDE+0aE8vHb9XRC8XD37eO2u57+F09JqFhw==}
+    engines: {node: '>=14'}
+    hasBin: true
 
   electron-to-chromium@1.5.227:
-    resolution:
-      {
-        integrity: sha512-ITxuoPfJu3lsNWUi2lBM2PaBPYgH3uqmxut5vmBxgYvyI4AlJ6P3Cai1O76mOrkJCBzq0IxWg/NtqOrpu/0gKA==
-      }
+    resolution: {integrity: sha512-ITxuoPfJu3lsNWUi2lBM2PaBPYgH3uqmxut5vmBxgYvyI4AlJ6P3Cai1O76mOrkJCBzq0IxWg/NtqOrpu/0gKA==}
+
+  electron-to-chromium@1.5.348:
+    resolution: {integrity: sha512-QC2X59nRlycQQMc4ZXjSVBX+tSgJfgRtcrYHbIZLgOV2dCvefoQGegLR7lLXKgpPpSuVmJU19LMzGrSa2C7k3Q==}
 
   element-plus@2.11.4:
-    resolution:
-      {
-        integrity: sha512-sLq+Ypd0cIVilv8wGGMEGvzRVBBsRpJjnAS5PsI/1JU1COZXqzH3N1UYMUc/HCdvdjf6dfrBy80Sj7KcACsT7w==
-      }
+    resolution: {integrity: sha512-sLq+Ypd0cIVilv8wGGMEGvzRVBBsRpJjnAS5PsI/1JU1COZXqzH3N1UYMUc/HCdvdjf6dfrBy80Sj7KcACsT7w==}
     peerDependencies:
       vue: ^3.2.0
 
   emoji-regex@10.5.0:
-    resolution:
-      {
-        integrity: sha512-lb49vf1Xzfx080OKA0o6l8DQQpV+6Vg95zyCJX9VB/BqKYlhG7N4wgROUUHRA+ZPUefLnteQOad7z1kT2bV7bg==
-      }
+    resolution: {integrity: sha512-lb49vf1Xzfx080OKA0o6l8DQQpV+6Vg95zyCJX9VB/BqKYlhG7N4wgROUUHRA+ZPUefLnteQOad7z1kT2bV7bg==}
 
   emoji-regex@8.0.0:
-    resolution:
-      {
-        integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
-      }
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+
+  emoji-regex@9.2.2:
+    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
+
+  end-of-stream@1.4.5:
+    resolution: {integrity: sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==}
 
   enhanced-resolve@5.18.3:
-    resolution:
-      {
-        integrity: sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==
-      }
-    engines: { node: '>=10.13.0' }
+    resolution: {integrity: sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==}
+    engines: {node: '>=10.13.0'}
 
   entities@4.5.0:
-    resolution:
-      {
-        integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
-      }
-    engines: { node: '>=0.12' }
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+    engines: {node: '>=0.12'}
 
   env-paths@2.2.1:
-    resolution:
-      {
-        integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==
-      }
-    engines: { node: '>=6' }
+    resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
+    engines: {node: '>=6'}
 
   environment@1.1.0:
-    resolution:
-      {
-        integrity: sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==}
+    engines: {node: '>=18'}
 
   error-ex@1.3.4:
-    resolution:
-      {
-        integrity: sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==
-      }
+    resolution: {integrity: sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==}
 
   error-stack-parser-es@0.1.5:
-    resolution:
-      {
-        integrity: sha512-xHku1X40RO+fO8yJ8Wh2f2rZWVjqyhb1zgq1yZ8aZRQkv6OOKhKWRUaht3eSCUbAOBaKIgM+ykwFLE+QUxgGeg==
-      }
+    resolution: {integrity: sha512-xHku1X40RO+fO8yJ8Wh2f2rZWVjqyhb1zgq1yZ8aZRQkv6OOKhKWRUaht3eSCUbAOBaKIgM+ykwFLE+QUxgGeg==}
 
   es-define-property@1.0.1:
-    resolution:
-      {
-        integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==
-      }
-    engines: { node: '>= 0.4' }
+    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
+    engines: {node: '>= 0.4'}
 
   es-errors@1.3.0:
-    resolution:
-      {
-        integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==
-      }
-    engines: { node: '>= 0.4' }
+    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
+    engines: {node: '>= 0.4'}
 
   es-module-lexer@1.7.0:
-    resolution:
-      {
-        integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==
-      }
+    resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==}
 
   es-object-atoms@1.1.1:
-    resolution:
-      {
-        integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==
-      }
-    engines: { node: '>= 0.4' }
+    resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
+    engines: {node: '>= 0.4'}
 
   es-set-tostringtag@2.1.0:
-    resolution:
-      {
-        integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==
-      }
-    engines: { node: '>= 0.4' }
+    resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
+    engines: {node: '>= 0.4'}
 
   es5-ext@0.10.64:
-    resolution:
-      {
-        integrity: sha512-p2snDhiLaXe6dahss1LddxqEm+SkuDvV8dnIQG0MWjyHpcMNfXKPE+/Cc0y+PhxJX3A4xGNeFCj5oc0BUh6deg==
-      }
-    engines: { node: '>=0.10' }
+    resolution: {integrity: sha512-p2snDhiLaXe6dahss1LddxqEm+SkuDvV8dnIQG0MWjyHpcMNfXKPE+/Cc0y+PhxJX3A4xGNeFCj5oc0BUh6deg==}
+    engines: {node: '>=0.10'}
 
   es6-iterator@2.0.3:
-    resolution:
-      {
-        integrity: sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==
-      }
+    resolution: {integrity: sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==}
 
   es6-symbol@3.1.4:
-    resolution:
-      {
-        integrity: sha512-U9bFFjX8tFiATgtkJ1zg25+KviIXpgRvRHS8sau3GfhVzThRQrOeksPeT0BWW2MNZs1OEWJ1DPXOQMn0KKRkvg==
-      }
-    engines: { node: '>=0.12' }
+    resolution: {integrity: sha512-U9bFFjX8tFiATgtkJ1zg25+KviIXpgRvRHS8sau3GfhVzThRQrOeksPeT0BWW2MNZs1OEWJ1DPXOQMn0KKRkvg==}
+    engines: {node: '>=0.12'}
 
   esbuild@0.25.10:
-    resolution:
-      {
-        integrity: sha512-9RiGKvCwaqxO2owP61uQ4BgNborAQskMR6QusfWzQqv7AZOg5oGehdY2pRJMTKuwxd1IDBP4rSbI5lHzU7SMsQ==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-9RiGKvCwaqxO2owP61uQ4BgNborAQskMR6QusfWzQqv7AZOg5oGehdY2pRJMTKuwxd1IDBP4rSbI5lHzU7SMsQ==}
+    engines: {node: '>=18'}
     hasBin: true
 
   escalade@3.2.0:
-    resolution:
-      {
-        integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==
-      }
-    engines: { node: '>=6' }
+    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
+    engines: {node: '>=6'}
 
   escape-html@1.0.3:
-    resolution:
-      {
-        integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==
-      }
+    resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
 
   escape-string-regexp@1.0.5:
-    resolution:
-      {
-        integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==
-      }
-    engines: { node: '>=0.8.0' }
+    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
+    engines: {node: '>=0.8.0'}
 
   escape-string-regexp@4.0.0:
-    resolution:
-      {
-        integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
-      }
-    engines: { node: '>=10' }
+    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
+    engines: {node: '>=10'}
 
   escape-string-regexp@5.0.0:
-    resolution:
-      {
-        integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==
-      }
-    engines: { node: '>=12' }
+    resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
+    engines: {node: '>=12'}
 
-  eslint-config-prettier@9.1.2:
-    resolution:
-      {
-        integrity: sha512-iI1f+D2ViGn+uvv5HuHVUamg8ll4tN+JRHGc6IJi4TP9Kl976C57fzPXgseXNs8v0iA8aSJpHsTWjDb9QJamGQ==
-      }
+  eslint-config-prettier@10.1.8:
+    resolution: {integrity: sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==}
     hasBin: true
     peerDependencies:
       eslint: '>=7.0.0'
 
   eslint-plugin-prettier@5.5.4:
-    resolution:
-      {
-        integrity: sha512-swNtI95SToIz05YINMA6Ox5R057IMAmWZ26GqPxusAp1TZzj+IdY9tXNWWD3vkF/wEqydCONcwjTFpxybBqZsg==
-      }
-    engines: { node: ^14.18.0 || >=16.0.0 }
+    resolution: {integrity: sha512-swNtI95SToIz05YINMA6Ox5R057IMAmWZ26GqPxusAp1TZzj+IdY9tXNWWD3vkF/wEqydCONcwjTFpxybBqZsg==}
+    engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
       '@types/eslint': '>=8.0.0'
       eslint: '>=8.0.0'
@@ -3165,49 +2372,35 @@ packages:
       eslint-config-prettier:
         optional: true
 
-  eslint-plugin-vue@9.33.0:
-    resolution:
-      {
-        integrity: sha512-174lJKuNsuDIlLpjeXc5E2Tss8P44uIimAfGD0b90k0NoirJqpG7stLuU9Vp/9ioTOrQdWVREc4mRd1BD+CvGw==
-      }
-    engines: { node: ^14.17.0 || >=16.0.0 }
+  eslint-plugin-vue@10.9.0:
+    resolution: {integrity: sha512-EFNNzu4HqtTRb5DJINpyd+u3bDdzETWDMpCzG+UBHz1tpsnMDCeOcf61u4Wy/cbXnMymK+MT9bjH7KcG1fItSw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      eslint: ^6.2.0 || ^7.0.0 || ^8.0.0 || ^9.0.0
-
-  eslint-scope@7.2.2:
-    resolution:
-      {
-        integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==
-      }
-    engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
+      '@stylistic/eslint-plugin': ^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0
+      '@typescript-eslint/parser': ^7.0.0 || ^8.0.0
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      vue-eslint-parser: ^10.0.0
+    peerDependenciesMeta:
+      '@stylistic/eslint-plugin':
+        optional: true
+      '@typescript-eslint/parser':
+        optional: true
 
   eslint-scope@8.4.0:
-    resolution:
-      {
-        integrity: sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==
-      }
-    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
+    resolution: {integrity: sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   eslint-visitor-keys@3.4.3:
-    resolution:
-      {
-        integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
-      }
-    engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
+    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
   eslint-visitor-keys@4.2.1:
-    resolution:
-      {
-        integrity: sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==
-      }
-    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
+    resolution: {integrity: sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   eslint@9.36.0:
-    resolution:
-      {
-        integrity: sha512-hB4FIzXovouYzwzECDcUkJ4OcfOEkXTv2zRY6B9bkwjx/cprAq0uvm1nl7zvQ0/TsUk0zQiN4uPfJpB9m+rPMQ==
-      }
-    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
+    resolution: {integrity: sha512-hB4FIzXovouYzwzECDcUkJ4OcfOEkXTv2zRY6B9bkwjx/cprAq0uvm1nl7zvQ0/TsUk0zQiN4uPfJpB9m+rPMQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     hasBin: true
     peerDependencies:
       jiti: '*'
@@ -3216,180 +2409,103 @@ packages:
         optional: true
 
   esniff@2.0.1:
-    resolution:
-      {
-        integrity: sha512-kTUIGKQ/mDPFoJ0oVfcmyJn4iBDRptjNVIzwIFR7tqWXdVI9xfA2RMwY/gbSpJG3lkdWNEjLap/NqVHZiJsdfg==
-      }
-    engines: { node: '>=0.10' }
+    resolution: {integrity: sha512-kTUIGKQ/mDPFoJ0oVfcmyJn4iBDRptjNVIzwIFR7tqWXdVI9xfA2RMwY/gbSpJG3lkdWNEjLap/NqVHZiJsdfg==}
+    engines: {node: '>=0.10'}
 
   espree@10.4.0:
-    resolution:
-      {
-        integrity: sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==
-      }
-    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
-
-  espree@9.6.1:
-    resolution:
-      {
-        integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==
-      }
-    engines: { node: ^12.22.0 || ^14.17.0 || >=16.0.0 }
+    resolution: {integrity: sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   esquery@1.6.0:
-    resolution:
-      {
-        integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==
-      }
-    engines: { node: '>=0.10' }
+    resolution: {integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==}
+    engines: {node: '>=0.10'}
 
   esrecurse@4.3.0:
-    resolution:
-      {
-        integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==
-      }
-    engines: { node: '>=4.0' }
+    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
+    engines: {node: '>=4.0'}
 
   estraverse@5.3.0:
-    resolution:
-      {
-        integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
-      }
-    engines: { node: '>=4.0' }
+    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
+    engines: {node: '>=4.0'}
 
   estree-walker@2.0.2:
-    resolution:
-      {
-        integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
-      }
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
 
   estree-walker@3.0.3:
-    resolution:
-      {
-        integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==
-      }
+    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
 
   esutils@2.0.3:
-    resolution:
-      {
-        integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
-      }
-    engines: { node: '>=0.10.0' }
+    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
+    engines: {node: '>=0.10.0'}
 
   event-emitter@0.3.5:
-    resolution:
-      {
-        integrity: sha512-D9rRn9y7kLPnJ+hMq7S/nhvoKwwvVJahBi2BPmx3bvbsEdK3W9ii8cBSGjP+72/LnM4n6fo3+dkCX5FeTQruXA==
-      }
+    resolution: {integrity: sha512-D9rRn9y7kLPnJ+hMq7S/nhvoKwwvVJahBi2BPmx3bvbsEdK3W9ii8cBSGjP+72/LnM4n6fo3+dkCX5FeTQruXA==}
 
   eventemitter3@4.0.7:
-    resolution:
-      {
-        integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
-      }
+    resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}
 
   eventemitter3@5.0.1:
-    resolution:
-      {
-        integrity: sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==
-      }
+    resolution: {integrity: sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==}
+
+  exceljs@4.4.0:
+    resolution: {integrity: sha512-XctvKaEMaj1Ii9oDOqbW/6e1gXknSY4g/aLCDicOXqBE4M0nRWkUu0PTp++UPNzoFY12BNHMfs/VadKIS6llvg==}
+    engines: {node: '>=8.3.0'}
 
   execa@8.0.1:
-    resolution:
-      {
-        integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==
-      }
-    engines: { node: '>=16.17' }
+    resolution: {integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==}
+    engines: {node: '>=16.17'}
 
   execa@9.6.0:
-    resolution:
-      {
-        integrity: sha512-jpWzZ1ZhwUmeWRhS7Qv3mhpOhLfwI+uAX4e5fOcXqwMR7EcJ0pj2kV1CVzHVMX/LphnKWD3LObjZCoJ71lKpHw==
-      }
-    engines: { node: ^18.19.0 || >=20.5.0 }
+    resolution: {integrity: sha512-jpWzZ1ZhwUmeWRhS7Qv3mhpOhLfwI+uAX4e5fOcXqwMR7EcJ0pj2kV1CVzHVMX/LphnKWD3LObjZCoJ71lKpHw==}
+    engines: {node: ^18.19.0 || >=20.5.0}
 
   expand-tilde@2.0.2:
-    resolution:
-      {
-        integrity: sha512-A5EmesHW6rfnZ9ysHQjPdJRni0SRar0tjtG5MNtm9n5TUvsYU8oozprtRD4AqHxcZWWlVuAmQo2nWKfN9oyjTw==
-      }
-    engines: { node: '>=0.10.0' }
+    resolution: {integrity: sha512-A5EmesHW6rfnZ9ysHQjPdJRni0SRar0tjtG5MNtm9n5TUvsYU8oozprtRD4AqHxcZWWlVuAmQo2nWKfN9oyjTw==}
+    engines: {node: '>=0.10.0'}
 
   exsolve@1.0.7:
-    resolution:
-      {
-        integrity: sha512-VO5fQUzZtI6C+vx4w/4BWJpg3s/5l+6pRQEHzFRM8WFi4XffSP1Z+4qi7GbjWbvRQEbdIco5mIMq+zX4rPuLrw==
-      }
+    resolution: {integrity: sha512-VO5fQUzZtI6C+vx4w/4BWJpg3s/5l+6pRQEHzFRM8WFi4XffSP1Z+4qi7GbjWbvRQEbdIco5mIMq+zX4rPuLrw==}
 
   ext@1.7.0:
-    resolution:
-      {
-        integrity: sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==
-      }
+    resolution: {integrity: sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==}
 
   external-editor@3.1.0:
-    resolution:
-      {
-        integrity: sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==
-      }
-    engines: { node: '>=4' }
+    resolution: {integrity: sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==}
+    engines: {node: '>=4'}
+
+  fast-csv@4.3.6:
+    resolution: {integrity: sha512-2RNSpuwwsJGP0frGsOmTb9oUF+VkFSM4SyLTDgwf2ciHWTarN0lQTC+F2f/t5J9QjW+c65VFIAAu85GsvMIusw==}
+    engines: {node: '>=10.0.0'}
 
   fast-deep-equal@3.1.3:
-    resolution:
-      {
-        integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
-      }
+    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
   fast-diff@1.3.0:
-    resolution:
-      {
-        integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==
-      }
+    resolution: {integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==}
 
   fast-glob@3.3.3:
-    resolution:
-      {
-        integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==
-      }
-    engines: { node: '>=8.6.0' }
+    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
+    engines: {node: '>=8.6.0'}
 
   fast-json-stable-stringify@2.1.0:
-    resolution:
-      {
-        integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
-      }
+    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
 
   fast-levenshtein@2.0.6:
-    resolution:
-      {
-        integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
-      }
+    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
 
   fast-uri@3.1.0:
-    resolution:
-      {
-        integrity: sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==
-      }
+    resolution: {integrity: sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==}
 
   fastest-levenshtein@1.0.16:
-    resolution:
-      {
-        integrity: sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==
-      }
-    engines: { node: '>= 4.9.1' }
+    resolution: {integrity: sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==}
+    engines: {node: '>= 4.9.1'}
 
   fastq@1.19.1:
-    resolution:
-      {
-        integrity: sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==
-      }
+    resolution: {integrity: sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==}
 
   fdir@6.5.0:
-    resolution:
-      {
-        integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==
-      }
-    engines: { node: '>=12.0.0' }
+    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
+    engines: {node: '>=12.0.0'}
     peerDependencies:
       picomatch: ^3 || ^4
     peerDependenciesMeta:
@@ -3397,1664 +2513,1073 @@ packages:
         optional: true
 
   figures@3.2.0:
-    resolution:
-      {
-        integrity: sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==
-      }
-    engines: { node: '>=8' }
+    resolution: {integrity: sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==}
+    engines: {node: '>=8'}
 
   figures@6.1.0:
-    resolution:
-      {
-        integrity: sha512-d+l3qxjSesT4V7v2fh+QnmFnUWv9lSpjarhShNTgBOfA0ttejbQUAlHLitbjkoRiDulW0OPoQPYIGhIC8ohejg==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-d+l3qxjSesT4V7v2fh+QnmFnUWv9lSpjarhShNTgBOfA0ttejbQUAlHLitbjkoRiDulW0OPoQPYIGhIC8ohejg==}
+    engines: {node: '>=18'}
 
-  file-entry-cache@10.1.4:
-    resolution:
-      {
-        integrity: sha512-5XRUFc0WTtUbjfGzEwXc42tiGxQHBmtbUG1h9L2apu4SulCGN3Hqm//9D6FAolf8MYNL7f/YlJl9vy08pj5JuA==
-      }
+  file-entry-cache@11.1.2:
+    resolution: {integrity: sha512-N2WFfK12gmrK1c1GXOqiAJ1tc5YE+R53zvQ+t5P8S5XhnmKYVB5eZEiLNZKDSmoG8wqqbF9EXYBBW/nef19log==}
 
   file-entry-cache@8.0.0:
-    resolution:
-      {
-        integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==
-      }
-    engines: { node: '>=16.0.0' }
+    resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
+    engines: {node: '>=16.0.0'}
 
   file-saver@2.0.5:
-    resolution:
-      {
-        integrity: sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==
-      }
+    resolution: {integrity: sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==}
 
   fill-range@7.1.1:
-    resolution:
-      {
-        integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
-      }
-    engines: { node: '>=8' }
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+    engines: {node: '>=8'}
 
   find-node-modules@2.1.3:
-    resolution:
-      {
-        integrity: sha512-UC2I2+nx1ZuOBclWVNdcnbDR5dlrOdVb7xNjmT/lHE+LsgztWks3dG7boJ37yTS/venXw84B/mAW9uHVoC5QRg==
-      }
+    resolution: {integrity: sha512-UC2I2+nx1ZuOBclWVNdcnbDR5dlrOdVb7xNjmT/lHE+LsgztWks3dG7boJ37yTS/venXw84B/mAW9uHVoC5QRg==}
 
   find-root@1.1.0:
-    resolution:
-      {
-        integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
-      }
+    resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==}
 
   find-up@5.0.0:
-    resolution:
-      {
-        integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==
-      }
-    engines: { node: '>=10' }
+    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
+    engines: {node: '>=10'}
 
   find-up@7.0.0:
-    resolution:
-      {
-        integrity: sha512-YyZM99iHrqLKjmt4LJDj58KI+fYyufRLBSYcqycxf//KpBk9FoewoGX0450m9nB44qrZnovzC2oeP5hUibxc/g==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-YyZM99iHrqLKjmt4LJDj58KI+fYyufRLBSYcqycxf//KpBk9FoewoGX0450m9nB44qrZnovzC2oeP5hUibxc/g==}
+    engines: {node: '>=18'}
 
   findup-sync@4.0.0:
-    resolution:
-      {
-        integrity: sha512-6jvvn/12IC4quLBL1KNokxC7wWTvYncaVUYSoxWw7YykPLuRrnv4qdHcSOywOI5RpkOVGeQRtWM8/q+G6W6qfQ==
-      }
-    engines: { node: '>= 8' }
+    resolution: {integrity: sha512-6jvvn/12IC4quLBL1KNokxC7wWTvYncaVUYSoxWw7YykPLuRrnv4qdHcSOywOI5RpkOVGeQRtWM8/q+G6W6qfQ==}
+    engines: {node: '>= 8'}
 
   flat-cache@4.0.1:
-    resolution:
-      {
-        integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==
-      }
-    engines: { node: '>=16' }
+    resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
+    engines: {node: '>=16'}
 
-  flat-cache@6.1.14:
-    resolution:
-      {
-        integrity: sha512-ExZSCSV9e7v/Zt7RzCbX57lY2dnPdxzU/h3UE6WJ6NtEMfwBd8jmi1n4otDEUfz+T/R+zxrFDpICFdjhD3H/zw==
-      }
+  flat-cache@6.1.22:
+    resolution: {integrity: sha512-N2dnzVJIphnNsjHcrxGW7DePckJ6haPrSFqpsBUhHYgwtKGVq4JrBGielEGD2fCVnsGm1zlBVZ8wGhkyuetgug==}
 
   flatted@3.3.3:
-    resolution:
-      {
-        integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==
-      }
+    resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
+
+  flatted@3.4.2:
+    resolution: {integrity: sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==}
 
   follow-redirects@1.15.11:
-    resolution:
-      {
-        integrity: sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==
-      }
-    engines: { node: '>=4.0' }
+    resolution: {integrity: sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==}
+    engines: {node: '>=4.0'}
     peerDependencies:
       debug: '*'
     peerDependenciesMeta:
       debug:
         optional: true
 
+  foreground-child@3.3.1:
+    resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
+    engines: {node: '>=14'}
+
   form-data@4.0.4:
-    resolution:
-      {
-        integrity: sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==
-      }
-    engines: { node: '>= 6' }
+    resolution: {integrity: sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==}
+    engines: {node: '>= 6'}
 
   frac@1.1.2:
-    resolution:
-      {
-        integrity: sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==
-      }
-    engines: { node: '>=0.8' }
+    resolution: {integrity: sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==}
+    engines: {node: '>=0.8'}
+
+  fraction.js@5.3.4:
+    resolution: {integrity: sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==}
+
+  fs-constants@1.0.0:
+    resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==}
 
   fs-extra@10.1.0:
-    resolution:
-      {
-        integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==
-      }
-    engines: { node: '>=12' }
+    resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==}
+    engines: {node: '>=12'}
 
   fs-extra@11.3.2:
-    resolution:
-      {
-        integrity: sha512-Xr9F6z6up6Ws+NjzMCZc6WXg2YFRlrLP9NQDO3VQrWrfiojdhS56TzueT88ze0uBdCTwEIhQ3ptnmKeWGFAe0A==
-      }
-    engines: { node: '>=14.14' }
+    resolution: {integrity: sha512-Xr9F6z6up6Ws+NjzMCZc6WXg2YFRlrLP9NQDO3VQrWrfiojdhS56TzueT88ze0uBdCTwEIhQ3ptnmKeWGFAe0A==}
+    engines: {node: '>=14.14'}
 
   fs-extra@9.1.0:
-    resolution:
-      {
-        integrity: sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==
-      }
-    engines: { node: '>=10' }
+    resolution: {integrity: sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==}
+    engines: {node: '>=10'}
 
   fs.realpath@1.0.0:
-    resolution:
-      {
-        integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
-      }
+    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
 
   fsevents@2.3.3:
-    resolution:
-      {
-        integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
-      }
-    engines: { node: ^8.16.0 || ^10.6.0 || >=11.0.0 }
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
 
+  fstream@1.0.12:
+    resolution: {integrity: sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg==}
+    engines: {node: '>=0.6'}
+    deprecated: This package is no longer supported.
+
   function-bind@1.1.2:
-    resolution:
-      {
-        integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
-      }
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
 
   gensync@1.0.0-beta.2:
-    resolution:
-      {
-        integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
-      }
-    engines: { node: '>=6.9.0' }
+    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
+    engines: {node: '>=6.9.0'}
 
   get-caller-file@2.0.5:
-    resolution:
-      {
-        integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
-      }
-    engines: { node: 6.* || 8.* || >= 10.* }
+    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
+    engines: {node: 6.* || 8.* || >= 10.*}
 
   get-east-asian-width@1.4.0:
-    resolution:
-      {
-        integrity: sha512-QZjmEOC+IT1uk6Rx0sX22V6uHWVwbdbxf1faPqJ1QhLdGgsRGCZoyaQBm/piRdJy/D2um6hM1UP7ZEeQ4EkP+Q==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-QZjmEOC+IT1uk6Rx0sX22V6uHWVwbdbxf1faPqJ1QhLdGgsRGCZoyaQBm/piRdJy/D2um6hM1UP7ZEeQ4EkP+Q==}
+    engines: {node: '>=18'}
 
   get-intrinsic@1.3.0:
-    resolution:
-      {
-        integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==
-      }
-    engines: { node: '>= 0.4' }
+    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
+    engines: {node: '>= 0.4'}
 
   get-proto@1.0.1:
-    resolution:
-      {
-        integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==
-      }
-    engines: { node: '>= 0.4' }
+    resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
+    engines: {node: '>= 0.4'}
 
   get-stream@8.0.1:
-    resolution:
-      {
-        integrity: sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==
-      }
-    engines: { node: '>=16' }
+    resolution: {integrity: sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==}
+    engines: {node: '>=16'}
 
   get-stream@9.0.1:
-    resolution:
-      {
-        integrity: sha512-kVCxPF3vQM/N0B1PmoqVUqgHP+EeVjmZSQn+1oCRPxd2P21P2F19lIgbR3HBosbB1PUhOAoctJnfEn2GbN2eZA==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-kVCxPF3vQM/N0B1PmoqVUqgHP+EeVjmZSQn+1oCRPxd2P21P2F19lIgbR3HBosbB1PUhOAoctJnfEn2GbN2eZA==}
+    engines: {node: '>=18'}
 
   get-tsconfig@4.10.1:
-    resolution:
-      {
-        integrity: sha512-auHyJ4AgMz7vgS8Hp3N6HXSmlMdUyhSUrfBF16w153rxtLIEOE+HGqaBppczZvnHLqQJfiHotCYpNhl0lUROFQ==
-      }
+    resolution: {integrity: sha512-auHyJ4AgMz7vgS8Hp3N6HXSmlMdUyhSUrfBF16w153rxtLIEOE+HGqaBppczZvnHLqQJfiHotCYpNhl0lUROFQ==}
 
   git-raw-commits@4.0.0:
-    resolution:
-      {
-        integrity: sha512-ICsMM1Wk8xSGMowkOmPrzo2Fgmfo4bMHLNX6ytHjajRJUqvHOw/TFapQ+QG75c3X/tTDDhOSRPGC52dDbNM8FQ==
-      }
-    engines: { node: '>=16' }
+    resolution: {integrity: sha512-ICsMM1Wk8xSGMowkOmPrzo2Fgmfo4bMHLNX6ytHjajRJUqvHOw/TFapQ+QG75c3X/tTDDhOSRPGC52dDbNM8FQ==}
+    engines: {node: '>=16'}
     hasBin: true
 
   glob-parent@5.1.2:
-    resolution:
-      {
-        integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
-      }
-    engines: { node: '>= 6' }
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
+    engines: {node: '>= 6'}
 
   glob-parent@6.0.2:
-    resolution:
-      {
-        integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
-      }
-    engines: { node: '>=10.13.0' }
+    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
+    engines: {node: '>=10.13.0'}
+
+  glob@10.4.5:
+    resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
+    hasBin: true
 
   glob@7.2.3:
-    resolution:
-      {
-        integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
-      }
+    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
     deprecated: Glob versions prior to v9 are no longer supported
 
   global-directory@4.0.1:
-    resolution:
-      {
-        integrity: sha512-wHTUcDUoZ1H5/0iVqEudYW4/kAlN5cZ3j/bXn0Dpbizl9iaUVeWSHqiOjsgk6OW2bkLclbBjzewBz6weQ1zA2Q==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-wHTUcDUoZ1H5/0iVqEudYW4/kAlN5cZ3j/bXn0Dpbizl9iaUVeWSHqiOjsgk6OW2bkLclbBjzewBz6weQ1zA2Q==}
+    engines: {node: '>=18'}
 
   global-modules@1.0.0:
-    resolution:
-      {
-        integrity: sha512-sKzpEkf11GpOFuw0Zzjzmt4B4UZwjOcG757PPvrfhxcLFbq0wpsgpOqxpxtxFiCG4DtG93M6XRVbF2oGdev7bg==
-      }
-    engines: { node: '>=0.10.0' }
+    resolution: {integrity: sha512-sKzpEkf11GpOFuw0Zzjzmt4B4UZwjOcG757PPvrfhxcLFbq0wpsgpOqxpxtxFiCG4DtG93M6XRVbF2oGdev7bg==}
+    engines: {node: '>=0.10.0'}
 
   global-modules@2.0.0:
-    resolution:
-      {
-        integrity: sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==
-      }
-    engines: { node: '>=6' }
+    resolution: {integrity: sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==}
+    engines: {node: '>=6'}
 
   global-prefix@1.0.2:
-    resolution:
-      {
-        integrity: sha512-5lsx1NUDHtSjfg0eHlmYvZKv8/nVqX4ckFbM+FrGcQ+04KWcWFo9P5MxPZYSzUvyzmdTbI7Eix8Q4IbELDqzKg==
-      }
-    engines: { node: '>=0.10.0' }
+    resolution: {integrity: sha512-5lsx1NUDHtSjfg0eHlmYvZKv8/nVqX4ckFbM+FrGcQ+04KWcWFo9P5MxPZYSzUvyzmdTbI7Eix8Q4IbELDqzKg==}
+    engines: {node: '>=0.10.0'}
 
   global-prefix@3.0.0:
-    resolution:
-      {
-        integrity: sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==
-      }
-    engines: { node: '>=6' }
-
-  globals@13.24.0:
-    resolution:
-      {
-        integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==
-      }
-    engines: { node: '>=8' }
+    resolution: {integrity: sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==}
+    engines: {node: '>=6'}
 
   globals@14.0.0:
-    resolution:
-      {
-        integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
+    engines: {node: '>=18'}
 
   globals@15.15.0:
-    resolution:
-      {
-        integrity: sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==}
+    engines: {node: '>=18'}
 
   globby@11.1.0:
-    resolution:
-      {
-        integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==
-      }
-    engines: { node: '>=10' }
+    resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
+    engines: {node: '>=10'}
 
   globjoin@0.1.4:
-    resolution:
-      {
-        integrity: sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==
-      }
+    resolution: {integrity: sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==}
+
+  good-listener@1.2.2:
+    resolution: {integrity: sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==}
 
   gopd@1.2.0:
-    resolution:
-      {
-        integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==
-      }
-    engines: { node: '>= 0.4' }
+    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
+    engines: {node: '>= 0.4'}
 
   graceful-fs@4.2.11:
-    resolution:
-      {
-        integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
-      }
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
   graphemer@1.4.0:
-    resolution:
-      {
-        integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==
-      }
+    resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
+
+  graphlib@2.1.8:
+    resolution: {integrity: sha512-jcLLfkpoVGmH7/InMC/1hIvOPSUh38oJtGhvrOFGzioE1DZ+0YW16RgmOJhHiuWTvGiJQ9Z1Ik43JvkRPRvE+A==}
 
   has-flag@3.0.0:
-    resolution:
-      {
-        integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==
-      }
-    engines: { node: '>=4' }
+    resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
+    engines: {node: '>=4'}
 
   has-flag@4.0.0:
-    resolution:
-      {
-        integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
-      }
-    engines: { node: '>=8' }
+    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
+    engines: {node: '>=8'}
 
   has-symbols@1.1.0:
-    resolution:
-      {
-        integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==
-      }
-    engines: { node: '>= 0.4' }
+    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
+    engines: {node: '>= 0.4'}
 
   has-tostringtag@1.0.2:
-    resolution:
-      {
-        integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==
-      }
-    engines: { node: '>= 0.4' }
+    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
+    engines: {node: '>= 0.4'}
+
+  hashery@1.5.1:
+    resolution: {integrity: sha512-iZyKG96/JwPz1N55vj2Ie2vXbhu440zfUfJvSwEqEbeLluk7NnapfGqa7LH0mOsnDxTF85Mx8/dyR6HfqcbmbQ==}
+    engines: {node: '>=20'}
 
   hasown@2.0.2:
-    resolution:
-      {
-        integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==
-      }
-    engines: { node: '>= 0.4' }
+    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
+    engines: {node: '>= 0.4'}
 
   he@1.2.0:
-    resolution:
-      {
-        integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
-      }
+    resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
     hasBin: true
 
   highlight.js@11.11.1:
-    resolution:
-      {
-        integrity: sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==
-      }
-    engines: { node: '>=12.0.0' }
+    resolution: {integrity: sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==}
+    engines: {node: '>=12.0.0'}
 
   homedir-polyfill@1.0.3:
-    resolution:
-      {
-        integrity: sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==
-      }
-    engines: { node: '>=0.10.0' }
+    resolution: {integrity: sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==}
+    engines: {node: '>=0.10.0'}
 
   hookable@5.5.3:
-    resolution:
-      {
-        integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==
-      }
+    resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
 
-  hookified@1.12.1:
-    resolution:
-      {
-        integrity: sha512-xnKGl+iMIlhrZmGHB729MqlmPoWBznctSQTYCpFKqNsCgimJQmithcW0xSQMMFzYnV2iKUh25alswn6epgxS0Q==
-      }
+  hookified@1.15.1:
+    resolution: {integrity: sha512-MvG/clsADq1GPM2KGo2nyfaWVyn9naPiXrqIe4jYjXNZQt238kWyOGrsyc/DmRAQ+Re6yeo6yX/yoNCG5KAEVg==}
+
+  hookified@2.2.0:
+    resolution: {integrity: sha512-p/LgFzRN5FeoD3DLS6bkUapeye6E4SI6yJs6KetENd18S+FBthqYq2amJUWpt5z0EQwwHemidjY5OqJGEKm5uA==}
 
   html-tags@3.3.1:
-    resolution:
-      {
-        integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==
-      }
-    engines: { node: '>=8' }
+    resolution: {integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==}
+    engines: {node: '>=8'}
 
-  html-void-elements@2.0.1:
-    resolution:
-      {
-        integrity: sha512-0quDb7s97CfemeJAnW9wC0hw78MtW7NU3hqtCD75g2vFlDLt36llsYD7uB7SUzojLMP24N5IatXf7ylGXiGG9A==
-      }
+  html-void-elements@3.0.0:
+    resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
 
   htmlparser2@8.0.2:
-    resolution:
-      {
-        integrity: sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==
-      }
+    resolution: {integrity: sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==}
 
   human-signals@5.0.0:
-    resolution:
-      {
-        integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==
-      }
-    engines: { node: '>=16.17.0' }
+    resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==}
+    engines: {node: '>=16.17.0'}
 
   human-signals@8.0.1:
-    resolution:
-      {
-        integrity: sha512-eKCa6bwnJhvxj14kZk5NCPc6Hb6BdsU9DZcOnmQKSnO1VKrfV0zCvtttPZUsBvjmNDn8rpcJfpwSYnHBjc95MQ==
-      }
-    engines: { node: '>=18.18.0' }
+    resolution: {integrity: sha512-eKCa6bwnJhvxj14kZk5NCPc6Hb6BdsU9DZcOnmQKSnO1VKrfV0zCvtttPZUsBvjmNDn8rpcJfpwSYnHBjc95MQ==}
+    engines: {node: '>=18.18.0'}
 
   husky@9.1.7:
-    resolution:
-      {
-        integrity: sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA==}
+    engines: {node: '>=18'}
     hasBin: true
 
-  i18next@20.6.1:
-    resolution:
-      {
-        integrity: sha512-yCMYTMEJ9ihCwEQQ3phLo7I/Pwycf8uAx+sRHwwk5U9Aui/IZYgQRyMqXafQOw5QQ7DM1Z+WyEXWIqSuJHhG2A==
-      }
+  i18next@23.16.8:
+    resolution: {integrity: sha512-06r/TitrM88Mg5FdUXAKL96dJMzgqLE5dv3ryBAra4KCwD9mJ4ndOTS95ZuymIGoE+2hzfdaMak2X11/es7ZWg==}
 
   iconv-lite@0.4.24:
-    resolution:
-      {
-        integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
-      }
-    engines: { node: '>=0.10.0' }
+    resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
+    engines: {node: '>=0.10.0'}
 
   ieee754@1.2.1:
-    resolution:
-      {
-        integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
-      }
+    resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
 
   ignore@5.3.2:
-    resolution:
-      {
-        integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==
-      }
-    engines: { node: '>= 4' }
+    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
+    engines: {node: '>= 4'}
 
   ignore@7.0.5:
-    resolution:
-      {
-        integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==
-      }
-    engines: { node: '>= 4' }
+    resolution: {integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==}
+    engines: {node: '>= 4'}
 
-  immer@9.0.21:
-    resolution:
-      {
-        integrity: sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==
-      }
+  immediate@3.0.6:
+    resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==}
 
   immutable@5.1.3:
-    resolution:
-      {
-        integrity: sha512-+chQdDfvscSF1SJqv2gn4SRO2ZyS3xL3r7IW/wWEEzrzLisnOlKiQu5ytC/BVNcS15C39WT2Hg/bjKjDMcu+zg==
-      }
+    resolution: {integrity: sha512-+chQdDfvscSF1SJqv2gn4SRO2ZyS3xL3r7IW/wWEEzrzLisnOlKiQu5ytC/BVNcS15C39WT2Hg/bjKjDMcu+zg==}
 
   import-fresh@3.3.1:
-    resolution:
-      {
-        integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==
-      }
-    engines: { node: '>=6' }
+    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
+    engines: {node: '>=6'}
 
   import-meta-resolve@4.2.0:
-    resolution:
-      {
-        integrity: sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg==
-      }
+    resolution: {integrity: sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg==}
 
   imurmurhash@0.1.4:
-    resolution:
-      {
-        integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==
-      }
-    engines: { node: '>=0.8.19' }
+    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
+    engines: {node: '>=0.8.19'}
 
   inflight@1.0.6:
-    resolution:
-      {
-        integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==
-      }
+    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
     deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
 
   inherits@2.0.4:
-    resolution:
-      {
-        integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
-      }
+    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
 
   ini@1.3.8:
-    resolution:
-      {
-        integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
-      }
+    resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
 
   ini@4.1.1:
-    resolution:
-      {
-        integrity: sha512-QQnnxNyfvmHFIsj7gkPcYymR8Jdw/o7mp5ZFihxn6h8Ci6fh3Dx4E1gPjpQEpIuPo9XVNY/ZUwh4BPMjGyL01g==
-      }
-    engines: { node: ^14.17.0 || ^16.13.0 || >=18.0.0 }
+    resolution: {integrity: sha512-QQnnxNyfvmHFIsj7gkPcYymR8Jdw/o7mp5ZFihxn6h8Ci6fh3Dx4E1gPjpQEpIuPo9XVNY/ZUwh4BPMjGyL01g==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
   inquirer@8.2.5:
-    resolution:
-      {
-        integrity: sha512-QAgPDQMEgrDssk1XiwwHoOGYF9BAbUcc1+j+FhEvaOt8/cKRqyLn0U5qA6F74fGhTMGxf92pOvPBeh29jQJDTQ==
-      }
-    engines: { node: '>=12.0.0' }
+    resolution: {integrity: sha512-QAgPDQMEgrDssk1XiwwHoOGYF9BAbUcc1+j+FhEvaOt8/cKRqyLn0U5qA6F74fGhTMGxf92pOvPBeh29jQJDTQ==}
+    engines: {node: '>=12.0.0'}
 
   is-arrayish@0.2.1:
-    resolution:
-      {
-        integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==
-      }
+    resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
 
   is-binary-path@2.1.0:
-    resolution:
-      {
-        integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
-      }
-    engines: { node: '>=8' }
+    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
+    engines: {node: '>=8'}
 
   is-docker@2.2.1:
-    resolution:
-      {
-        integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==
-      }
-    engines: { node: '>=8' }
+    resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==}
+    engines: {node: '>=8'}
     hasBin: true
 
   is-docker@3.0.0:
-    resolution:
-      {
-        integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==
-      }
-    engines: { node: ^12.20.0 || ^14.13.1 || >=16.0.0 }
+    resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     hasBin: true
 
   is-extglob@2.1.1:
-    resolution:
-      {
-        integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
-      }
-    engines: { node: '>=0.10.0' }
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
 
   is-fullwidth-code-point@3.0.0:
-    resolution:
-      {
-        integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
-      }
-    engines: { node: '>=8' }
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
 
   is-fullwidth-code-point@4.0.0:
-    resolution:
-      {
-        integrity: sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==
-      }
-    engines: { node: '>=12' }
+    resolution: {integrity: sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==}
+    engines: {node: '>=12'}
 
   is-fullwidth-code-point@5.1.0:
-    resolution:
-      {
-        integrity: sha512-5XHYaSyiqADb4RnZ1Bdad6cPp8Toise4TzEjcOYDHZkTCbKgiUl7WTUCpNWHuxmDt91wnsZBc9xinNzopv3JMQ==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-5XHYaSyiqADb4RnZ1Bdad6cPp8Toise4TzEjcOYDHZkTCbKgiUl7WTUCpNWHuxmDt91wnsZBc9xinNzopv3JMQ==}
+    engines: {node: '>=18'}
 
   is-glob@4.0.3:
-    resolution:
-      {
-        integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
-      }
-    engines: { node: '>=0.10.0' }
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
 
   is-hotkey@0.2.0:
-    resolution:
-      {
-        integrity: sha512-UknnZK4RakDmTgz4PI1wIph5yxSs/mvChWs9ifnlXsKuXgWmOkY/hAE0H/k2MIqH0RlRye0i1oC07MCRSD28Mw==
-      }
+    resolution: {integrity: sha512-UknnZK4RakDmTgz4PI1wIph5yxSs/mvChWs9ifnlXsKuXgWmOkY/hAE0H/k2MIqH0RlRye0i1oC07MCRSD28Mw==}
 
   is-inside-container@1.0.0:
-    resolution:
-      {
-        integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==
-      }
-    engines: { node: '>=14.16' }
+    resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==}
+    engines: {node: '>=14.16'}
     hasBin: true
 
   is-interactive@1.0.0:
-    resolution:
-      {
-        integrity: sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==
-      }
-    engines: { node: '>=8' }
+    resolution: {integrity: sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==}
+    engines: {node: '>=8'}
 
   is-number@7.0.0:
-    resolution:
-      {
-        integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
-      }
-    engines: { node: '>=0.12.0' }
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
 
   is-obj@2.0.0:
-    resolution:
-      {
-        integrity: sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==
-      }
-    engines: { node: '>=8' }
+    resolution: {integrity: sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==}
+    engines: {node: '>=8'}
 
   is-plain-obj@4.1.0:
-    resolution:
-      {
-        integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==
-      }
-    engines: { node: '>=12' }
+    resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
+    engines: {node: '>=12'}
 
   is-plain-object@5.0.0:
-    resolution:
-      {
-        integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==
-      }
-    engines: { node: '>=0.10.0' }
+    resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==}
+    engines: {node: '>=0.10.0'}
 
   is-stream@3.0.0:
-    resolution:
-      {
-        integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==
-      }
-    engines: { node: ^12.20.0 || ^14.13.1 || >=16.0.0 }
+    resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
   is-stream@4.0.1:
-    resolution:
-      {
-        integrity: sha512-Dnz92NInDqYckGEUJv689RbRiTSEHCQ7wOVeALbkOz999YpqT46yMRIGtSNl2iCL1waAZSx40+h59NV/EwzV/A==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-Dnz92NInDqYckGEUJv689RbRiTSEHCQ7wOVeALbkOz999YpqT46yMRIGtSNl2iCL1waAZSx40+h59NV/EwzV/A==}
+    engines: {node: '>=18'}
 
   is-text-path@2.0.0:
-    resolution:
-      {
-        integrity: sha512-+oDTluR6WEjdXEJMnC2z6A4FRwFoYuvShVVEGsS7ewc0UTi2QtAKMDJuL4BDEVt+5T7MjFo12RP8ghOM75oKJw==
-      }
-    engines: { node: '>=8' }
+    resolution: {integrity: sha512-+oDTluR6WEjdXEJMnC2z6A4FRwFoYuvShVVEGsS7ewc0UTi2QtAKMDJuL4BDEVt+5T7MjFo12RP8ghOM75oKJw==}
+    engines: {node: '>=8'}
 
   is-unicode-supported@0.1.0:
-    resolution:
-      {
-        integrity: sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==
-      }
-    engines: { node: '>=10' }
+    resolution: {integrity: sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==}
+    engines: {node: '>=10'}
 
   is-unicode-supported@2.1.0:
-    resolution:
-      {
-        integrity: sha512-mE00Gnza5EEB3Ds0HfMyllZzbBrmLOX3vfWoj9A9PEnTfratQ/BcaJOuMhnkhjXvb2+FkY3VuHqtAGpTPmglFQ==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-mE00Gnza5EEB3Ds0HfMyllZzbBrmLOX3vfWoj9A9PEnTfratQ/BcaJOuMhnkhjXvb2+FkY3VuHqtAGpTPmglFQ==}
+    engines: {node: '>=18'}
 
   is-url@1.2.4:
-    resolution:
-      {
-        integrity: sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==
-      }
+    resolution: {integrity: sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==}
 
   is-utf8@0.2.1:
-    resolution:
-      {
-        integrity: sha512-rMYPYvCzsXywIsldgLaSoPlw5PfoB/ssr7hY4pLfcodrA5M/eArza1a9VmTiNIBNMjOGr1Ow9mTyU2o69U6U9Q==
-      }
+    resolution: {integrity: sha512-rMYPYvCzsXywIsldgLaSoPlw5PfoB/ssr7hY4pLfcodrA5M/eArza1a9VmTiNIBNMjOGr1Ow9mTyU2o69U6U9Q==}
 
   is-what@4.1.16:
-    resolution:
-      {
-        integrity: sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==
-      }
-    engines: { node: '>=12.13' }
+    resolution: {integrity: sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==}
+    engines: {node: '>=12.13'}
 
   is-windows@1.0.2:
-    resolution:
-      {
-        integrity: sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==
-      }
-    engines: { node: '>=0.10.0' }
+    resolution: {integrity: sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==}
+    engines: {node: '>=0.10.0'}
 
   is-wsl@2.2.0:
-    resolution:
-      {
-        integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==
-      }
-    engines: { node: '>=8' }
+    resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
+    engines: {node: '>=8'}
 
   is-wsl@3.1.0:
-    resolution:
-      {
-        integrity: sha512-UcVfVfaK4Sc4m7X3dUSoHoozQGBEFeDC+zVo06t98xe8CzHSZZBekNXH+tu0NalHolcJ/QAGqS46Hef7QXBIMw==
-      }
-    engines: { node: '>=16' }
+    resolution: {integrity: sha512-UcVfVfaK4Sc4m7X3dUSoHoozQGBEFeDC+zVo06t98xe8CzHSZZBekNXH+tu0NalHolcJ/QAGqS46Hef7QXBIMw==}
+    engines: {node: '>=16'}
+
+  isarray@1.0.0:
+    resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
 
   isexe@2.0.0:
-    resolution:
-      {
-        integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
-      }
+    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+
+  jackspeak@3.4.3:
+    resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
 
   jiti@2.6.0:
-    resolution:
-      {
-        integrity: sha512-VXe6RjJkBPj0ohtqaO8vSWP3ZhAKo66fKrFNCll4BTcwljPLz03pCbaNKfzGP5MbrCYcbJ7v0nOYYwUzTEIdXQ==
-      }
+    resolution: {integrity: sha512-VXe6RjJkBPj0ohtqaO8vSWP3ZhAKo66fKrFNCll4BTcwljPLz03pCbaNKfzGP5MbrCYcbJ7v0nOYYwUzTEIdXQ==}
     hasBin: true
 
+  js-beautify@1.15.4:
+    resolution: {integrity: sha512-9/KXeZUKKJwqCXUdBxFJ3vPh467OCckSBmYDwSK/EtV090K+iMJ7zx2S3HLVDIWFQdqMIsZWbnaGiba18aWhaA==}
+    engines: {node: '>=14'}
+    hasBin: true
+
+  js-cookie@3.0.5:
+    resolution: {integrity: sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==}
+    engines: {node: '>=14'}
+
   js-tokens@4.0.0:
-    resolution:
-      {
-        integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
-      }
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
   js-tokens@9.0.1:
-    resolution:
-      {
-        integrity: sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==
-      }
+    resolution: {integrity: sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==}
 
   js-yaml@4.1.0:
-    resolution:
-      {
-        integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==
-      }
+    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
     hasBin: true
 
   jsesc@3.1.0:
-    resolution:
-      {
-        integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==
-      }
-    engines: { node: '>=6' }
+    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
+    engines: {node: '>=6'}
     hasBin: true
 
   json-buffer@3.0.1:
-    resolution:
-      {
-        integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==
-      }
+    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
 
   json-parse-even-better-errors@2.3.1:
-    resolution:
-      {
-        integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
-      }
+    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
 
   json-schema-traverse@0.4.1:
-    resolution:
-      {
-        integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
-      }
+    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
 
   json-schema-traverse@1.0.0:
-    resolution:
-      {
-        integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==
-      }
+    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
 
   json-stable-stringify-without-jsonify@1.0.1:
-    resolution:
-      {
-        integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
-      }
+    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
 
   json5@2.2.3:
-    resolution:
-      {
-        integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
-      }
-    engines: { node: '>=6' }
+    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
+    engines: {node: '>=6'}
     hasBin: true
 
   jsonfile@6.2.0:
-    resolution:
-      {
-        integrity: sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==
-      }
+    resolution: {integrity: sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==}
 
   jsonparse@1.3.1:
-    resolution:
-      {
-        integrity: sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==
-      }
-    engines: { '0': node >= 0.2.0 }
+    resolution: {integrity: sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==}
+    engines: {'0': node >= 0.2.0}
+
+  jszip@3.10.1:
+    resolution: {integrity: sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==}
 
   keyv@4.5.4:
-    resolution:
-      {
-        integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==
-      }
+    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
-  keyv@5.5.3:
-    resolution:
-      {
-        integrity: sha512-h0Un1ieD+HUrzBH6dJXhod3ifSghk5Hw/2Y4/KHBziPlZecrFyE9YOTPU6eOs0V9pYl8gOs86fkr/KN8lUX39A==
-      }
+  keyv@5.6.0:
+    resolution: {integrity: sha512-CYDD3SOtsHtyXeEORYRx2qBtpDJFjRTGXUtmNEMGyzYOKj1TE3tycdlho7kA1Ufx9OYWZzg52QFBGALTirzDSw==}
 
   kind-of@6.0.3:
-    resolution:
-      {
-        integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
-      }
-    engines: { node: '>=0.10.0' }
+    resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
+    engines: {node: '>=0.10.0'}
 
   known-css-properties@0.36.0:
-    resolution:
-      {
-        integrity: sha512-A+9jP+IUmuQsNdsLdcg6Yt7voiMF/D4K83ew0OpJtpu+l34ef7LaohWV0Rc6KNvzw6ZDizkqfyB5JznZnzuKQA==
-      }
+    resolution: {integrity: sha512-A+9jP+IUmuQsNdsLdcg6Yt7voiMF/D4K83ew0OpJtpu+l34ef7LaohWV0Rc6KNvzw6ZDizkqfyB5JznZnzuKQA==}
 
   known-css-properties@0.37.0:
-    resolution:
-      {
-        integrity: sha512-JCDrsP4Z1Sb9JwG0aJ8Eo2r7k4Ou5MwmThS/6lcIe1ICyb7UBJKGRIUUdqc2ASdE/42lgz6zFUnzAIhtXnBVrQ==
-      }
+    resolution: {integrity: sha512-JCDrsP4Z1Sb9JwG0aJ8Eo2r7k4Ou5MwmThS/6lcIe1ICyb7UBJKGRIUUdqc2ASdE/42lgz6zFUnzAIhtXnBVrQ==}
 
   kolorist@1.8.0:
-    resolution:
-      {
-        integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==
-      }
+    resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
+
+  lazystream@1.0.1:
+    resolution: {integrity: sha512-b94GiNHQNy6JNTrt5w6zNyffMrNkXZb3KTkCZJb2V1xaEGCk093vkZ2jk3tpaeP33/OiXC+WvK9AxUebnf5nbw==}
+    engines: {node: '>= 0.6.3'}
 
   levn@0.4.1:
-    resolution:
-      {
-        integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==
-      }
-    engines: { node: '>= 0.8.0' }
+    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
+    engines: {node: '>= 0.8.0'}
+
+  lie@3.3.0:
+    resolution: {integrity: sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==}
 
   lightningcss-darwin-arm64@1.30.1:
-    resolution:
-      {
-        integrity: sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==
-      }
-    engines: { node: '>= 12.0.0' }
+    resolution: {integrity: sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==}
+    engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [darwin]
 
   lightningcss-darwin-x64@1.30.1:
-    resolution:
-      {
-        integrity: sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==
-      }
-    engines: { node: '>= 12.0.0' }
+    resolution: {integrity: sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==}
+    engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [darwin]
 
   lightningcss-freebsd-x64@1.30.1:
-    resolution:
-      {
-        integrity: sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==
-      }
-    engines: { node: '>= 12.0.0' }
+    resolution: {integrity: sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==}
+    engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [freebsd]
 
   lightningcss-linux-arm-gnueabihf@1.30.1:
-    resolution:
-      {
-        integrity: sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==
-      }
-    engines: { node: '>= 12.0.0' }
+    resolution: {integrity: sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==}
+    engines: {node: '>= 12.0.0'}
     cpu: [arm]
     os: [linux]
 
   lightningcss-linux-arm64-gnu@1.30.1:
-    resolution:
-      {
-        integrity: sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==
-      }
-    engines: { node: '>= 12.0.0' }
+    resolution: {integrity: sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==}
+    engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
   lightningcss-linux-arm64-musl@1.30.1:
-    resolution:
-      {
-        integrity: sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==
-      }
-    engines: { node: '>= 12.0.0' }
+    resolution: {integrity: sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==}
+    engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
   lightningcss-linux-x64-gnu@1.30.1:
-    resolution:
-      {
-        integrity: sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==
-      }
-    engines: { node: '>= 12.0.0' }
+    resolution: {integrity: sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==}
+    engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
   lightningcss-linux-x64-musl@1.30.1:
-    resolution:
-      {
-        integrity: sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==
-      }
-    engines: { node: '>= 12.0.0' }
+    resolution: {integrity: sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==}
+    engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
   lightningcss-win32-arm64-msvc@1.30.1:
-    resolution:
-      {
-        integrity: sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==
-      }
-    engines: { node: '>= 12.0.0' }
+    resolution: {integrity: sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==}
+    engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [win32]
 
   lightningcss-win32-x64-msvc@1.30.1:
-    resolution:
-      {
-        integrity: sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==
-      }
-    engines: { node: '>= 12.0.0' }
+    resolution: {integrity: sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==}
+    engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [win32]
 
   lightningcss@1.30.1:
-    resolution:
-      {
-        integrity: sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==
-      }
-    engines: { node: '>= 12.0.0' }
+    resolution: {integrity: sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==}
+    engines: {node: '>= 12.0.0'}
 
   lilconfig@3.1.3:
-    resolution:
-      {
-        integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==
-      }
-    engines: { node: '>=14' }
+    resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
+    engines: {node: '>=14'}
 
   lines-and-columns@1.2.4:
-    resolution:
-      {
-        integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
-      }
+    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
+
+  linkify-it@5.0.0:
+    resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==}
 
   lint-staged@15.5.2:
-    resolution:
-      {
-        integrity: sha512-YUSOLq9VeRNAo/CTaVmhGDKG+LBtA8KF1X4K5+ykMSwWST1vDxJRB2kv2COgLb1fvpCo+A/y9A0G0znNVmdx4w==
-      }
-    engines: { node: '>=18.12.0' }
+    resolution: {integrity: sha512-YUSOLq9VeRNAo/CTaVmhGDKG+LBtA8KF1X4K5+ykMSwWST1vDxJRB2kv2COgLb1fvpCo+A/y9A0G0znNVmdx4w==}
+    engines: {node: '>=18.12.0'}
     hasBin: true
 
+  listenercount@1.0.1:
+    resolution: {integrity: sha512-3mk/Zag0+IJxeDrxSgaDPy4zZ3w05PRZeJNnlWhzFz5OkX49J4krc+A8X2d2M69vGMBEX0uyl8M+W+8gH+kBqQ==}
+
   listr2@8.3.3:
-    resolution:
-      {
-        integrity: sha512-LWzX2KsqcB1wqQ4AHgYb4RsDXauQiqhjLk+6hjbaeHG4zpjjVAB6wC/gz6X0l+Du1cN3pUB5ZlrvTbhGSNnUQQ==
-      }
-    engines: { node: '>=18.0.0' }
+    resolution: {integrity: sha512-LWzX2KsqcB1wqQ4AHgYb4RsDXauQiqhjLk+6hjbaeHG4zpjjVAB6wC/gz6X0l+Du1cN3pUB5ZlrvTbhGSNnUQQ==}
+    engines: {node: '>=18.0.0'}
 
   local-pkg@1.1.2:
-    resolution:
-      {
-        integrity: sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==
-      }
-    engines: { node: '>=14' }
+    resolution: {integrity: sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==}
+    engines: {node: '>=14'}
 
   locate-path@6.0.0:
-    resolution:
-      {
-        integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==
-      }
-    engines: { node: '>=10' }
+    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
+    engines: {node: '>=10'}
 
   locate-path@7.2.0:
-    resolution:
-      {
-        integrity: sha512-gvVijfZvn7R+2qyPX8mAuKcFGDf6Nc61GdvGafQsHL0sBIxfKzA+usWn4GFC/bk+QdwPUD4kWFJLhElipq+0VA==
-      }
-    engines: { node: ^12.20.0 || ^14.13.1 || >=16.0.0 }
+    resolution: {integrity: sha512-gvVijfZvn7R+2qyPX8mAuKcFGDf6Nc61GdvGafQsHL0sBIxfKzA+usWn4GFC/bk+QdwPUD4kWFJLhElipq+0VA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
   lodash-es@4.17.21:
-    resolution:
-      {
-        integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
-      }
+    resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
 
   lodash-unified@1.0.3:
-    resolution:
-      {
-        integrity: sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==
-      }
+    resolution: {integrity: sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==}
     peerDependencies:
       '@types/lodash-es': '*'
       lodash: '*'
       lodash-es: '*'
 
   lodash.camelcase@4.3.0:
-    resolution:
-      {
-        integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==
-      }
+    resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
 
   lodash.clonedeep@4.5.0:
-    resolution:
-      {
-        integrity: sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==
-      }
+    resolution: {integrity: sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==}
 
   lodash.debounce@4.0.8:
-    resolution:
-      {
-        integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
-      }
+    resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
+
+  lodash.defaults@4.2.0:
+    resolution: {integrity: sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ==}
+
+  lodash.difference@4.5.0:
+    resolution: {integrity: sha512-dS2j+W26TQ7taQBGN8Lbbq04ssV3emRw4NY58WErlTO29pIqS0HmoT5aJ9+TUQ1N3G+JOZSji4eugsWwGp9yPA==}
+
+  lodash.escaperegexp@4.1.2:
+    resolution: {integrity: sha512-TM9YBvyC84ZxE3rgfefxUWiQKLilstD6k7PTGt6wfbtXF8ixIJLOL3VYyV/z+ZiPLsVxAsKAFVwWlWeb2Y8Yyw==}
+
+  lodash.flatten@4.4.0:
+    resolution: {integrity: sha512-C5N2Z3DgnnKr0LOpv/hKCgKdb7ZZwafIrsesve6lmzvZIRZRGaZ/l6Q8+2W7NaT+ZwO3fFlSCzCzrDCFdJfZ4g==}
 
   lodash.foreach@4.5.0:
-    resolution:
-      {
-        integrity: sha512-aEXTF4d+m05rVOAUG3z4vZZ4xVexLKZGF0lIxuHZ1Hplpk/3B6Z1+/ICICYRLm7c41Z2xiejbkCkJoTlypoXhQ==
-      }
+    resolution: {integrity: sha512-aEXTF4d+m05rVOAUG3z4vZZ4xVexLKZGF0lIxuHZ1Hplpk/3B6Z1+/ICICYRLm7c41Z2xiejbkCkJoTlypoXhQ==}
+
+  lodash.groupby@4.6.0:
+    resolution: {integrity: sha512-5dcWxm23+VAoz+awKmBaiBvzox8+RqMgFhi7UvX9DHZr2HdxHXM/Wrf8cfKpsW37RNrvtPn6hSwNqurSILbmJw==}
+
+  lodash.isboolean@3.0.3:
+    resolution: {integrity: sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==}
 
   lodash.isequal@4.5.0:
-    resolution:
-      {
-        integrity: sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==
-      }
+    resolution: {integrity: sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==}
     deprecated: This package is deprecated. Use require('node:util').isDeepStrictEqual instead.
 
+  lodash.isfunction@3.0.9:
+    resolution: {integrity: sha512-AirXNj15uRIMMPihnkInB4i3NHeb4iBtNg9WRWuK2o31S+ePwwNmDPaTL3o7dTJ+VXNZim7rFs4rxN4YU1oUJw==}
+
+  lodash.isnil@4.0.0:
+    resolution: {integrity: sha512-up2Mzq3545mwVnMhTDMdfoG1OurpA/s5t88JmQX809eH3C8491iu2sfKhTfhQtKY78oPNhiaHJUpT/dUDAAtng==}
+
   lodash.isplainobject@4.0.6:
-    resolution:
-      {
-        integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==
-      }
+    resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}
+
+  lodash.isundefined@3.0.1:
+    resolution: {integrity: sha512-MXB1is3s899/cD8jheYYE2V9qTHwKvt+npCwpD+1Sxm3Q3cECXCiYHjeHWXNwr6Q0SOBPrYUDxendrO6goVTEA==}
 
   lodash.kebabcase@4.1.1:
-    resolution:
-      {
-        integrity: sha512-N8XRTIMMqqDgSy4VLKPnJ/+hpGZN+PHQiJnSenYqPaVV/NCqEogTnAdZLQiGKhxX+JCs8waWq2t1XHWKOmlY8g==
-      }
+    resolution: {integrity: sha512-N8XRTIMMqqDgSy4VLKPnJ/+hpGZN+PHQiJnSenYqPaVV/NCqEogTnAdZLQiGKhxX+JCs8waWq2t1XHWKOmlY8g==}
 
   lodash.map@4.6.0:
-    resolution:
-      {
-        integrity: sha512-worNHGKLDetmcEYDvh2stPCrrQRkP20E4l0iIS7F8EvzMqBBi7ltvFN5m1HvTf1P7Jk1txKhvFcmYsCr8O2F1Q==
-      }
+    resolution: {integrity: sha512-worNHGKLDetmcEYDvh2stPCrrQRkP20E4l0iIS7F8EvzMqBBi7ltvFN5m1HvTf1P7Jk1txKhvFcmYsCr8O2F1Q==}
 
   lodash.merge@4.6.2:
-    resolution:
-      {
-        integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
-      }
+    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
 
   lodash.mergewith@4.6.2:
-    resolution:
-      {
-        integrity: sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==
-      }
+    resolution: {integrity: sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==}
 
   lodash.snakecase@4.1.1:
-    resolution:
-      {
-        integrity: sha512-QZ1d4xoBHYUeuouhEq3lk3Uq7ldgyFXGBhg04+oRLnIz8o9T65Eh+8YdroUwn846zchkA9yDsDl5CVVaV2nqYw==
-      }
+    resolution: {integrity: sha512-QZ1d4xoBHYUeuouhEq3lk3Uq7ldgyFXGBhg04+oRLnIz8o9T65Eh+8YdroUwn846zchkA9yDsDl5CVVaV2nqYw==}
 
   lodash.startcase@4.4.0:
-    resolution:
-      {
-        integrity: sha512-+WKqsK294HMSc2jEbNgpHpd0JfIBhp7rEV4aqXWqFr6AlXov+SlcgB1Fv01y2kGe3Gc8nMW7VA0SrGuSkRfIEg==
-      }
+    resolution: {integrity: sha512-+WKqsK294HMSc2jEbNgpHpd0JfIBhp7rEV4aqXWqFr6AlXov+SlcgB1Fv01y2kGe3Gc8nMW7VA0SrGuSkRfIEg==}
 
   lodash.throttle@4.1.1:
-    resolution:
-      {
-        integrity: sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==
-      }
+    resolution: {integrity: sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==}
 
   lodash.toarray@4.4.0:
-    resolution:
-      {
-        integrity: sha512-QyffEA3i5dma5q2490+SgCvDN0pXLmRGSyAANuVi0HQ01Pkfr9fuoKQW8wm1wGBnJITs/mS7wQvS6VshUEBFCw==
-      }
+    resolution: {integrity: sha512-QyffEA3i5dma5q2490+SgCvDN0pXLmRGSyAANuVi0HQ01Pkfr9fuoKQW8wm1wGBnJITs/mS7wQvS6VshUEBFCw==}
 
   lodash.truncate@4.4.2:
-    resolution:
-      {
-        integrity: sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==
-      }
+    resolution: {integrity: sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==}
+
+  lodash.union@4.6.0:
+    resolution: {integrity: sha512-c4pB2CdGrGdjMKYLA+XiRDO7Y0PRQbm/Gzg8qMj+QH+pFVAoTp5sBpO0odL3FjoPCGjK96p6qsP+yQoiLoOBcw==}
 
   lodash.uniq@4.5.0:
-    resolution:
-      {
-        integrity: sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==
-      }
+    resolution: {integrity: sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==}
 
   lodash.upperfirst@4.3.1:
-    resolution:
-      {
-        integrity: sha512-sReKOYJIJf74dhJONhU4e0/shzi1trVbSWDOhKYE5XV2O+H7Sb2Dihwuc7xWxVl+DgFPyTqIN3zMfT9cq5iWDg==
-      }
+    resolution: {integrity: sha512-sReKOYJIJf74dhJONhU4e0/shzi1trVbSWDOhKYE5XV2O+H7Sb2Dihwuc7xWxVl+DgFPyTqIN3zMfT9cq5iWDg==}
 
   lodash@4.17.21:
-    resolution:
-      {
-        integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
-      }
+    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
 
   log-symbols@4.1.0:
-    resolution:
-      {
-        integrity: sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==
-      }
-    engines: { node: '>=10' }
+    resolution: {integrity: sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==}
+    engines: {node: '>=10'}
 
   log-update@6.1.0:
-    resolution:
-      {
-        integrity: sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==}
+    engines: {node: '>=18'}
 
   longest@2.0.1:
-    resolution:
-      {
-        integrity: sha512-Ajzxb8CM6WAnFjgiloPsI3bF+WCxcvhdIG3KNA2KN962+tdBsHcuQ4k4qX/EcS/2CRkcc0iAkR956Nib6aXU/Q==
-      }
-    engines: { node: '>=0.10.0' }
+    resolution: {integrity: sha512-Ajzxb8CM6WAnFjgiloPsI3bF+WCxcvhdIG3KNA2KN962+tdBsHcuQ4k4qX/EcS/2CRkcc0iAkR956Nib6aXU/Q==}
+    engines: {node: '>=0.10.0'}
+
+  lru-cache@10.4.3:
+    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
 
   lru-cache@5.1.1:
-    resolution:
-      {
-        integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==
-      }
+    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
   magic-string@0.30.19:
-    resolution:
-      {
-        integrity: sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==
-      }
+    resolution: {integrity: sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==}
+
+  markdown-it-highlightjs@4.3.0:
+    resolution: {integrity: sha512-dTEXpTV2J9WJiO8TA/FJ4DxidrYtTNcfBAdl+CLjQ3UFWj8s4dJyCPTcvoXNLmN5U5ZTCGu7TSkSvBvi4fUqkQ==}
+
+  markdown-it@14.1.1:
+    resolution: {integrity: sha512-BuU2qnTti9YKgK5N+IeMubp14ZUKUUw7yeJbkjtosvHiP0AZ5c8IAgEMk79D0eC8F23r4Ac/q8cAIFdm2FtyoA==}
+    hasBin: true
 
   math-intrinsics@1.1.0:
-    resolution:
-      {
-        integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==
-      }
-    engines: { node: '>= 0.4' }
+    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
+    engines: {node: '>= 0.4'}
 
   mathml-tag-names@2.1.3:
-    resolution:
-      {
-        integrity: sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==
-      }
+    resolution: {integrity: sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==}
 
   mdn-data@2.12.2:
-    resolution:
-      {
-        integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==
-      }
+    resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==}
 
   mdn-data@2.24.0:
-    resolution:
-      {
-        integrity: sha512-i97fklrJl03tL1tdRVw0ZfLLvuDsdb6wxL+TrJ+PKkCbLrp2PCu2+OYdCKychIUm19nSM/35S6qz7pJpnXttoA==
-      }
+    resolution: {integrity: sha512-i97fklrJl03tL1tdRVw0ZfLLvuDsdb6wxL+TrJ+PKkCbLrp2PCu2+OYdCKychIUm19nSM/35S6qz7pJpnXttoA==}
+
+  mdurl@2.0.0:
+    resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
 
   memoize-one@6.0.0:
-    resolution:
-      {
-        integrity: sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==
-      }
+    resolution: {integrity: sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==}
 
   meow@12.1.1:
-    resolution:
-      {
-        integrity: sha512-BhXM0Au22RwUneMPwSCnyhTOizdWoIEPU9sp0Aqa1PnDMR5Wv2FGXYDjuzJEIX+Eo2Rb8xuYe5jrnm5QowQFkw==
-      }
-    engines: { node: '>=16.10' }
+    resolution: {integrity: sha512-BhXM0Au22RwUneMPwSCnyhTOizdWoIEPU9sp0Aqa1PnDMR5Wv2FGXYDjuzJEIX+Eo2Rb8xuYe5jrnm5QowQFkw==}
+    engines: {node: '>=16.10'}
 
   meow@13.2.0:
-    resolution:
-      {
-        integrity: sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==}
+    engines: {node: '>=18'}
 
   merge-stream@2.0.0:
-    resolution:
-      {
-        integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
-      }
+    resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
 
   merge2@1.4.1:
-    resolution:
-      {
-        integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
-      }
-    engines: { node: '>= 8' }
+    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
+    engines: {node: '>= 8'}
 
   merge@2.1.1:
-    resolution:
-      {
-        integrity: sha512-jz+Cfrg9GWOZbQAnDQ4hlVnQky+341Yk5ru8bZSe6sIDTCIg8n9i/u7hSQGSVOF3C7lH6mGtqjkiT9G4wFLL0w==
-      }
+    resolution: {integrity: sha512-jz+Cfrg9GWOZbQAnDQ4hlVnQky+341Yk5ru8bZSe6sIDTCIg8n9i/u7hSQGSVOF3C7lH6mGtqjkiT9G4wFLL0w==}
 
   micromatch@4.0.8:
-    resolution:
-      {
-        integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
-      }
-    engines: { node: '>=8.6' }
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
+    engines: {node: '>=8.6'}
 
   mime-db@1.52.0:
-    resolution:
-      {
-        integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
-      }
-    engines: { node: '>= 0.6' }
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
 
   mime-match@1.0.2:
-    resolution:
-      {
-        integrity: sha512-VXp/ugGDVh3eCLOBCiHZMYWQaTNUHv2IJrut+yXA6+JbLPXHglHwfS/5A5L0ll+jkCY7fIzRJcH6OIunF+c6Cg==
-      }
+    resolution: {integrity: sha512-VXp/ugGDVh3eCLOBCiHZMYWQaTNUHv2IJrut+yXA6+JbLPXHglHwfS/5A5L0ll+jkCY7fIzRJcH6OIunF+c6Cg==}
 
   mime-types@2.1.35:
-    resolution:
-      {
-        integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
-      }
-    engines: { node: '>= 0.6' }
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
 
   mimic-fn@2.1.0:
-    resolution:
-      {
-        integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
-      }
-    engines: { node: '>=6' }
+    resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
+    engines: {node: '>=6'}
 
   mimic-fn@4.0.0:
-    resolution:
-      {
-        integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==
-      }
-    engines: { node: '>=12' }
+    resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
+    engines: {node: '>=12'}
 
   mimic-function@5.0.1:
-    resolution:
-      {
-        integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==}
+    engines: {node: '>=18'}
 
   minimatch@3.1.2:
-    resolution:
-      {
-        integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
-      }
+    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
+
+  minimatch@5.1.9:
+    resolution: {integrity: sha512-7o1wEA2RyMP7Iu7GNba9vc0RWWGACJOCZBJX2GJWip0ikV+wcOsgVuY9uE8CPiyQhkGFSlhuSkZPavN7u1c2Fw==}
+    engines: {node: '>=10'}
 
   minimatch@9.0.5:
-    resolution:
-      {
-        integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==
-      }
-    engines: { node: '>=16 || 14 >=14.17' }
+    resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
+    engines: {node: '>=16 || 14 >=14.17'}
 
   minimist@1.2.7:
-    resolution:
-      {
-        integrity: sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==
-      }
+    resolution: {integrity: sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==}
 
   minimist@1.2.8:
-    resolution:
-      {
-        integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
-      }
+    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
 
   minipass@7.1.2:
-    resolution:
-      {
-        integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==
-      }
-    engines: { node: '>=16 || 14 >=14.17' }
+    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
+    engines: {node: '>=16 || 14 >=14.17'}
 
   minizlib@3.1.0:
-    resolution:
-      {
-        integrity: sha512-KZxYo1BUkWD2TVFLr0MQoM8vUUigWD3LlD83a/75BqC+4qE0Hb1Vo5v1FgcfaNXvfXzr+5EhQ6ing/CaBijTlw==
-      }
-    engines: { node: '>= 18' }
+    resolution: {integrity: sha512-KZxYo1BUkWD2TVFLr0MQoM8vUUigWD3LlD83a/75BqC+4qE0Hb1Vo5v1FgcfaNXvfXzr+5EhQ6ing/CaBijTlw==}
+    engines: {node: '>= 18'}
 
   mitt@3.0.1:
-    resolution:
-      {
-        integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==
-      }
+    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
+
+  mkdirp@0.5.6:
+    resolution: {integrity: sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==}
+    hasBin: true
 
   mlly@1.8.0:
-    resolution:
-      {
-        integrity: sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==
-      }
+    resolution: {integrity: sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==}
 
   mrmime@2.0.1:
-    resolution:
-      {
-        integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==
-      }
-    engines: { node: '>=10' }
+    resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
+    engines: {node: '>=10'}
 
   ms@2.1.3:
-    resolution:
-      {
-        integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
-      }
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
   muggle-string@0.4.1:
-    resolution:
-      {
-        integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==
-      }
+    resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}
 
   mute-stream@0.0.8:
-    resolution:
-      {
-        integrity: sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==
-      }
+    resolution: {integrity: sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==}
 
   namespace-emitter@2.0.1:
-    resolution:
-      {
-        integrity: sha512-N/sMKHniSDJBjfrkbS/tpkPj4RAbvW3mr8UAzvlMHyun93XEm83IAvhWtJVHo+RHn/oO8Job5YN4b+wRjSVp5g==
-      }
+    resolution: {integrity: sha512-N/sMKHniSDJBjfrkbS/tpkPj4RAbvW3mr8UAzvlMHyun93XEm83IAvhWtJVHo+RHn/oO8Job5YN4b+wRjSVp5g==}
 
   nanoid@3.3.11:
-    resolution:
-      {
-        integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==
-      }
-    engines: { node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1 }
+    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
   nanoid@5.1.6:
-    resolution:
-      {
-        integrity: sha512-c7+7RQ+dMB5dPwwCp4ee1/iV/q2P6aK1mTZcfr1BTuVlyW9hJYiMPybJCcnBlQtuSmTIWNeazm/zqNoZSSElBg==
-      }
-    engines: { node: ^18 || >=20 }
+    resolution: {integrity: sha512-c7+7RQ+dMB5dPwwCp4ee1/iV/q2P6aK1mTZcfr1BTuVlyW9hJYiMPybJCcnBlQtuSmTIWNeazm/zqNoZSSElBg==}
+    engines: {node: ^18 || >=20}
     hasBin: true
 
   natural-compare@1.4.0:
-    resolution:
-      {
-        integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
-      }
+    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
   next-tick@1.1.0:
-    resolution:
-      {
-        integrity: sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==
-      }
+    resolution: {integrity: sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==}
 
   node-addon-api@7.1.1:
-    resolution:
-      {
-        integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==
-      }
+    resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
 
   node-releases@2.0.21:
-    resolution:
-      {
-        integrity: sha512-5b0pgg78U3hwXkCM8Z9b2FJdPZlr9Psr9V2gQPESdGHqbntyFJKFW4r5TeWGFzafGY3hzs1JC62VEQMbl1JFkw==
-      }
+    resolution: {integrity: sha512-5b0pgg78U3hwXkCM8Z9b2FJdPZlr9Psr9V2gQPESdGHqbntyFJKFW4r5TeWGFzafGY3hzs1JC62VEQMbl1JFkw==}
+
+  node-releases@2.0.38:
+    resolution: {integrity: sha512-3qT/88Y3FbH/Kx4szpQQ4HzUbVrHPKTLVpVocKiLfoYvw9XSGOX2FmD2d6DrXbVYyAQTF2HeF6My8jmzx7/CRw==}
+
+  nopt@7.2.1:
+    resolution: {integrity: sha512-taM24ViiimT/XntxbPyJQzCG+p4EKOpgD3mxFwW38mGjVUrfERQOeY4EDHjdnptttfHuHQXFx+lTP08Q+mLa/w==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+    hasBin: true
 
   normalize-path@3.0.0:
-    resolution:
-      {
-        integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
-      }
-    engines: { node: '>=0.10.0' }
+    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+    engines: {node: '>=0.10.0'}
 
   normalize-wheel-es@1.2.0:
-    resolution:
-      {
-        integrity: sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==
-      }
+    resolution: {integrity: sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==}
 
   npm-run-path@5.3.0:
-    resolution:
-      {
-        integrity: sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==
-      }
-    engines: { node: ^12.20.0 || ^14.13.1 || >=16.0.0 }
+    resolution: {integrity: sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
   npm-run-path@6.0.0:
-    resolution:
-      {
-        integrity: sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA==}
+    engines: {node: '>=18'}
 
   nprogress@0.2.0:
-    resolution:
-      {
-        integrity: sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==
-      }
+    resolution: {integrity: sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==}
 
   nth-check@2.1.1:
-    resolution:
-      {
-        integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==
-      }
+    resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
+
+  object-inspect@1.13.4:
+    resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
+    engines: {node: '>= 0.4'}
 
   ohash@2.0.11:
-    resolution:
-      {
-        integrity: sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==
-      }
+    resolution: {integrity: sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==}
 
   once@1.4.0:
-    resolution:
-      {
-        integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==
-      }
+    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
 
   onetime@5.1.2:
-    resolution:
-      {
-        integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==
-      }
-    engines: { node: '>=6' }
+    resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
+    engines: {node: '>=6'}
 
   onetime@6.0.0:
-    resolution:
-      {
-        integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==
-      }
-    engines: { node: '>=12' }
+    resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
+    engines: {node: '>=12'}
 
   onetime@7.0.0:
-    resolution:
-      {
-        integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==}
+    engines: {node: '>=18'}
 
   open@10.2.0:
-    resolution:
-      {
-        integrity: sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA==}
+    engines: {node: '>=18'}
 
   open@8.4.2:
-    resolution:
-      {
-        integrity: sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==
-      }
-    engines: { node: '>=12' }
+    resolution: {integrity: sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==}
+    engines: {node: '>=12'}
 
   optionator@0.9.4:
-    resolution:
-      {
-        integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==
-      }
-    engines: { node: '>= 0.8.0' }
+    resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
+    engines: {node: '>= 0.8.0'}
 
   ora@5.4.1:
-    resolution:
-      {
-        integrity: sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==
-      }
-    engines: { node: '>=10' }
+    resolution: {integrity: sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==}
+    engines: {node: '>=10'}
 
   os-tmpdir@1.0.2:
-    resolution:
-      {
-        integrity: sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==
-      }
-    engines: { node: '>=0.10.0' }
+    resolution: {integrity: sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==}
+    engines: {node: '>=0.10.0'}
 
   p-limit@3.1.0:
-    resolution:
-      {
-        integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==
-      }
-    engines: { node: '>=10' }
+    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
+    engines: {node: '>=10'}
 
   p-limit@4.0.0:
-    resolution:
-      {
-        integrity: sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==
-      }
-    engines: { node: ^12.20.0 || ^14.13.1 || >=16.0.0 }
+    resolution: {integrity: sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
   p-locate@5.0.0:
-    resolution:
-      {
-        integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==
-      }
-    engines: { node: '>=10' }
+    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
+    engines: {node: '>=10'}
 
   p-locate@6.0.0:
-    resolution:
-      {
-        integrity: sha512-wPrq66Llhl7/4AGC6I+cqxT07LhXvWL08LNXz1fENOw0Ap4sRZZ/gZpTTJ5jpurzzzfS2W/Ge9BY3LgLjCShcw==
-      }
-    engines: { node: ^12.20.0 || ^14.13.1 || >=16.0.0 }
+    resolution: {integrity: sha512-wPrq66Llhl7/4AGC6I+cqxT07LhXvWL08LNXz1fENOw0Ap4sRZZ/gZpTTJ5jpurzzzfS2W/Ge9BY3LgLjCShcw==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  package-json-from-dist@1.0.1:
+    resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
+
+  package-manager-detector@1.6.0:
+    resolution: {integrity: sha512-61A5ThoTiDG/C8s8UMZwSorAGwMJ0ERVGj2OjoW5pAalsNOg15+iQiPzrLJ4jhZ1HJzmC2PIHT2oEiH3R5fzNA==}
+
+  pako@1.0.11:
+    resolution: {integrity: sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==}
 
   parent-module@1.0.1:
-    resolution:
-      {
-        integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==
-      }
-    engines: { node: '>=6' }
+    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
+    engines: {node: '>=6'}
 
   parse-json@5.2.0:
-    resolution:
-      {
-        integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==
-      }
-    engines: { node: '>=8' }
+    resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
+    engines: {node: '>=8'}
 
   parse-ms@4.0.0:
-    resolution:
-      {
-        integrity: sha512-TXfryirbmq34y8QBwgqCVLi+8oA3oWx2eAnSn62ITyEhEYaWRlVZ2DvMM9eZbMs/RfxPu/PK/aBLyGj4IrqMHw==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-TXfryirbmq34y8QBwgqCVLi+8oA3oWx2eAnSn62ITyEhEYaWRlVZ2DvMM9eZbMs/RfxPu/PK/aBLyGj4IrqMHw==}
+    engines: {node: '>=18'}
 
   parse-passwd@1.0.0:
-    resolution:
-      {
-        integrity: sha512-1Y1A//QUXEZK7YKz+rD9WydcE1+EuPr6ZBgKecAB8tmoW6UFv0NREVJe1p+jRxtThkcbbKkfwIbWJe/IeE6m2Q==
-      }
-    engines: { node: '>=0.10.0' }
+    resolution: {integrity: sha512-1Y1A//QUXEZK7YKz+rD9WydcE1+EuPr6ZBgKecAB8tmoW6UFv0NREVJe1p+jRxtThkcbbKkfwIbWJe/IeE6m2Q==}
+    engines: {node: '>=0.10.0'}
 
   path-browserify@1.0.1:
-    resolution:
-      {
-        integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==
-      }
+    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
 
   path-exists@4.0.0:
-    resolution:
-      {
-        integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
-      }
-    engines: { node: '>=8' }
+    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
+    engines: {node: '>=8'}
 
   path-exists@5.0.0:
-    resolution:
-      {
-        integrity: sha512-RjhtfwJOxzcFmNOi6ltcbcu4Iu+FL3zEj83dk4kAS+fVpTxXLO1b38RvJgT/0QwvV/L3aY9TAnyv0EOqW4GoMQ==
-      }
-    engines: { node: ^12.20.0 || ^14.13.1 || >=16.0.0 }
+    resolution: {integrity: sha512-RjhtfwJOxzcFmNOi6ltcbcu4Iu+FL3zEj83dk4kAS+fVpTxXLO1b38RvJgT/0QwvV/L3aY9TAnyv0EOqW4GoMQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
   path-is-absolute@1.0.1:
-    resolution:
-      {
-        integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==
-      }
-    engines: { node: '>=0.10.0' }
+    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
+    engines: {node: '>=0.10.0'}
 
   path-key@3.1.1:
-    resolution:
-      {
-        integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
-      }
-    engines: { node: '>=8' }
+    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
+    engines: {node: '>=8'}
 
   path-key@4.0.0:
-    resolution:
-      {
-        integrity: sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==
-      }
-    engines: { node: '>=12' }
+    resolution: {integrity: sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==}
+    engines: {node: '>=12'}
+
+  path-scurry@1.11.1:
+    resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
+    engines: {node: '>=16 || 14 >=14.18'}
+
+  path-to-regexp@8.4.2:
+    resolution: {integrity: sha512-qRcuIdP69NPm4qbACK+aDogI5CBDMi1jKe0ry5rSQJz8JVLsC7jV8XpiJjGRLLol3N+R5ihGYcrPLTno6pAdBA==}
 
   path-type@4.0.0:
-    resolution:
-      {
-        integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
-      }
-    engines: { node: '>=8' }
+    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
+    engines: {node: '>=8'}
 
   pathe@2.0.3:
-    resolution:
-      {
-        integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==
-      }
+    resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
 
   perfect-debounce@1.0.0:
-    resolution:
-      {
-        integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==
-      }
+    resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
 
   picocolors@1.1.1:
-    resolution:
-      {
-        integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
-      }
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
   picomatch@2.3.1:
-    resolution:
-      {
-        integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
-      }
-    engines: { node: '>=8.6' }
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+    engines: {node: '>=8.6'}
 
   picomatch@4.0.3:
-    resolution:
-      {
-        integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==
-      }
-    engines: { node: '>=12' }
+    resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
+    engines: {node: '>=12'}
 
   pidtree@0.6.0:
-    resolution:
-      {
-        integrity: sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==
-      }
-    engines: { node: '>=0.10' }
+    resolution: {integrity: sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==}
+    engines: {node: '>=0.10'}
     hasBin: true
 
   pinia-plugin-persistedstate@4.5.0:
-    resolution:
-      {
-        integrity: sha512-QTkP1xJVyCdr2I2p3AKUZM84/e+IS+HktRxKGAIuDzkyaKKV48mQcYkJFVVDuvTxlI5j6X3oZObpqoVB8JnWpw==
-      }
+    resolution: {integrity: sha512-QTkP1xJVyCdr2I2p3AKUZM84/e+IS+HktRxKGAIuDzkyaKKV48mQcYkJFVVDuvTxlI5j6X3oZObpqoVB8JnWpw==}
     peerDependencies:
       '@nuxt/kit': '>=3.0.0'
       '@pinia/nuxt': '>=0.10.0'
@@ -5068,10 +3593,7 @@ packages:
         optional: true
 
   pinia@3.0.3:
-    resolution:
-      {
-        integrity: sha512-ttXO/InUULUXkMHpTdp9Fj4hLpD/2AoJdmAbAeW2yu1iy1k+pkFekQXw5VpC0/5p51IOR/jDaDRfRWRnMMsGOA==
-      }
+    resolution: {integrity: sha512-ttXO/InUULUXkMHpTdp9Fj4hLpD/2AoJdmAbAeW2yu1iy1k+pkFekQXw5VpC0/5p51IOR/jDaDRfRWRnMMsGOA==}
     peerDependencies:
       typescript: '>=4.4.4'
       vue: ^2.7.0 || ^3.5.11
@@ -5080,268 +3602,179 @@ packages:
         optional: true
 
   pkg-types@1.3.1:
-    resolution:
-      {
-        integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==
-      }
+    resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
 
   pkg-types@2.3.0:
-    resolution:
-      {
-        integrity: sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==
-      }
+    resolution: {integrity: sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==}
 
   postcss-html@1.8.0:
-    resolution:
-      {
-        integrity: sha512-5mMeb1TgLWoRKxZ0Xh9RZDfwUUIqRrcxO2uXO+Ezl1N5lqpCiSU5Gk6+1kZediBfBHFtPCdopr2UZ2SgUsKcgQ==
-      }
-    engines: { node: ^12 || >=14 }
+    resolution: {integrity: sha512-5mMeb1TgLWoRKxZ0Xh9RZDfwUUIqRrcxO2uXO+Ezl1N5lqpCiSU5Gk6+1kZediBfBHFtPCdopr2UZ2SgUsKcgQ==}
+    engines: {node: ^12 || >=14}
 
   postcss-media-query-parser@0.2.3:
-    resolution:
-      {
-        integrity: sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==
-      }
+    resolution: {integrity: sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==}
 
   postcss-resolve-nested-selector@0.1.6:
-    resolution:
-      {
-        integrity: sha512-0sglIs9Wmkzbr8lQwEyIzlDOOC9bGmfVKcJTaxv3vMmd3uo4o4DerC3En0bnmgceeql9BfC8hRkp7cg0fjdVqw==
-      }
+    resolution: {integrity: sha512-0sglIs9Wmkzbr8lQwEyIzlDOOC9bGmfVKcJTaxv3vMmd3uo4o4DerC3En0bnmgceeql9BfC8hRkp7cg0fjdVqw==}
 
   postcss-safe-parser@6.0.0:
-    resolution:
-      {
-        integrity: sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==
-      }
-    engines: { node: '>=12.0' }
+    resolution: {integrity: sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==}
+    engines: {node: '>=12.0'}
     peerDependencies:
       postcss: ^8.3.3
 
   postcss-safe-parser@7.0.1:
-    resolution:
-      {
-        integrity: sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A==
-      }
-    engines: { node: '>=18.0' }
+    resolution: {integrity: sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A==}
+    engines: {node: '>=18.0'}
     peerDependencies:
       postcss: ^8.4.31
 
   postcss-scss@4.0.9:
-    resolution:
-      {
-        integrity: sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==
-      }
-    engines: { node: '>=12.0' }
+    resolution: {integrity: sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==}
+    engines: {node: '>=12.0'}
     peerDependencies:
       postcss: ^8.4.29
 
-  postcss-selector-parser@6.1.2:
-    resolution:
-      {
-        integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==
-      }
-    engines: { node: '>=4' }
-
   postcss-selector-parser@7.1.0:
-    resolution:
-      {
-        integrity: sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==
-      }
-    engines: { node: '>=4' }
+    resolution: {integrity: sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==}
+    engines: {node: '>=4'}
 
   postcss-sorting@8.0.2:
-    resolution:
-      {
-        integrity: sha512-M9dkSrmU00t/jK7rF6BZSZauA5MAaBW4i5EnJXspMwt4iqTh/L9j6fgMnbElEOfyRyfLfVbIHj/R52zHzAPe1Q==
-      }
+    resolution: {integrity: sha512-M9dkSrmU00t/jK7rF6BZSZauA5MAaBW4i5EnJXspMwt4iqTh/L9j6fgMnbElEOfyRyfLfVbIHj/R52zHzAPe1Q==}
     peerDependencies:
       postcss: ^8.4.20
 
   postcss-value-parser@4.2.0:
-    resolution:
-      {
-        integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
-      }
+    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
   postcss@8.5.6:
-    resolution:
-      {
-        integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==
-      }
-    engines: { node: ^10 || ^12 || >=14 }
+    resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
+    engines: {node: ^10 || ^12 || >=14}
 
   preact@10.27.2:
-    resolution:
-      {
-        integrity: sha512-5SYSgFKSyhCbk6SrXyMpqjb5+MQBgfvEKE/OC+PujcY34sOpqtr+0AZQtPYx5IA6VxynQ7rUPCtKzyovpj9Bpg==
-      }
+    resolution: {integrity: sha512-5SYSgFKSyhCbk6SrXyMpqjb5+MQBgfvEKE/OC+PujcY34sOpqtr+0AZQtPYx5IA6VxynQ7rUPCtKzyovpj9Bpg==}
 
   prelude-ls@1.2.1:
-    resolution:
-      {
-        integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
-      }
-    engines: { node: '>= 0.8.0' }
+    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
+    engines: {node: '>= 0.8.0'}
 
   prettier-linter-helpers@1.0.0:
-    resolution:
-      {
-        integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==
-      }
-    engines: { node: '>=6.0.0' }
+    resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==}
+    engines: {node: '>=6.0.0'}
 
   prettier@3.6.2:
-    resolution:
-      {
-        integrity: sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==
-      }
-    engines: { node: '>=14' }
+    resolution: {integrity: sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==}
+    engines: {node: '>=14'}
     hasBin: true
 
   pretty-ms@9.3.0:
-    resolution:
-      {
-        integrity: sha512-gjVS5hOP+M3wMm5nmNOucbIrqudzs9v/57bWRHQWLYklXqoXKrVfYW2W9+glfGsqtPgpiz5WwyEEB+ksXIx3gQ==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-gjVS5hOP+M3wMm5nmNOucbIrqudzs9v/57bWRHQWLYklXqoXKrVfYW2W9+glfGsqtPgpiz5WwyEEB+ksXIx3gQ==}
+    engines: {node: '>=18'}
 
   prismjs@1.30.0:
-    resolution:
-      {
-        integrity: sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==
-      }
-    engines: { node: '>=6' }
+    resolution: {integrity: sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==}
+    engines: {node: '>=6'}
+
+  process-nextick-args@2.0.1:
+    resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
+
+  proto-list@1.2.4:
+    resolution: {integrity: sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==}
 
   proxy-from-env@1.1.0:
-    resolution:
-      {
-        integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
-      }
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+
+  punycode.js@2.3.1:
+    resolution: {integrity: sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==}
+    engines: {node: '>=6'}
 
   punycode@2.3.1:
-    resolution:
-      {
-        integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
-      }
-    engines: { node: '>=6' }
+    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
+    engines: {node: '>=6'}
+
+  qified@0.9.1:
+    resolution: {integrity: sha512-n7mar4T0xQ+39dE2vGTAlbxUEpndwPANH0kDef1/MYsB8Bba9wshkybIRx74qgcvKQPEWErf9AqAdYjhzY2Ilg==}
+    engines: {node: '>=20'}
 
   qrcode.vue@3.6.0:
-    resolution:
-      {
-        integrity: sha512-vQcl2fyHYHMjDO1GguCldJxepq2izQjBkDEEu9NENgfVKP6mv/e2SU62WbqYHGwTgWXLhxZ1NCD1dAZKHQq1fg==
-      }
+    resolution: {integrity: sha512-vQcl2fyHYHMjDO1GguCldJxepq2izQjBkDEEu9NENgfVKP6mv/e2SU62WbqYHGwTgWXLhxZ1NCD1dAZKHQq1fg==}
     peerDependencies:
       vue: ^3.0.0
 
+  qs@6.15.1:
+    resolution: {integrity: sha512-6YHEFRL9mfgcAvql/XhwTvf5jKcOiiupt2FiJxHkiX1z4j7WL8J/jRHYLluORvc1XxB5rV20KoeK00gVJamspg==}
+    engines: {node: '>=0.6'}
+
   quansync@0.2.11:
-    resolution:
-      {
-        integrity: sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==
-      }
+    resolution: {integrity: sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==}
 
   queue-microtask@1.2.3:
-    resolution:
-      {
-        integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
-      }
+    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+
+  readable-stream@2.3.8:
+    resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}
 
   readable-stream@3.6.2:
-    resolution:
-      {
-        integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==
-      }
-    engines: { node: '>= 6' }
+    resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
+    engines: {node: '>= 6'}
+
+  readdir-glob@1.1.3:
+    resolution: {integrity: sha512-v05I2k7xN8zXvPD9N+z/uhXPaj0sUFCe2rcWZIpBsqxfP7xXFQ0tipAd/wjj1YxWyWtUS5IDJpOG82JKt2EAVA==}
 
   readdirp@3.6.0:
-    resolution:
-      {
-        integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
-      }
-    engines: { node: '>=8.10.0' }
+    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
+    engines: {node: '>=8.10.0'}
 
   readdirp@4.1.2:
-    resolution:
-      {
-        integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==
-      }
-    engines: { node: '>= 14.18.0' }
+    resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
+    engines: {node: '>= 14.18.0'}
 
   require-directory@2.1.1:
-    resolution:
-      {
-        integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==
-      }
-    engines: { node: '>=0.10.0' }
+    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
+    engines: {node: '>=0.10.0'}
 
   require-from-string@2.0.2:
-    resolution:
-      {
-        integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==
-      }
-    engines: { node: '>=0.10.0' }
+    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
+    engines: {node: '>=0.10.0'}
 
   resolve-dir@1.0.1:
-    resolution:
-      {
-        integrity: sha512-R7uiTjECzvOsWSfdM0QKFNBVFcK27aHOUwdvK53BcW8zqnGdYp0Fbj82cy54+2A4P2tFM22J5kRfe1R+lM/1yg==
-      }
-    engines: { node: '>=0.10.0' }
+    resolution: {integrity: sha512-R7uiTjECzvOsWSfdM0QKFNBVFcK27aHOUwdvK53BcW8zqnGdYp0Fbj82cy54+2A4P2tFM22J5kRfe1R+lM/1yg==}
+    engines: {node: '>=0.10.0'}
 
   resolve-from@4.0.0:
-    resolution:
-      {
-        integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
-      }
-    engines: { node: '>=4' }
+    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
+    engines: {node: '>=4'}
 
   resolve-from@5.0.0:
-    resolution:
-      {
-        integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
-      }
-    engines: { node: '>=8' }
+    resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
+    engines: {node: '>=8'}
 
   resolve-pkg-maps@1.0.0:
-    resolution:
-      {
-        integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==
-      }
+    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
 
   restore-cursor@3.1.0:
-    resolution:
-      {
-        integrity: sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==
-      }
-    engines: { node: '>=8' }
+    resolution: {integrity: sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==}
+    engines: {node: '>=8'}
 
   restore-cursor@5.1.0:
-    resolution:
-      {
-        integrity: sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==}
+    engines: {node: '>=18'}
 
   reusify@1.1.0:
-    resolution:
-      {
-        integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==
-      }
-    engines: { iojs: '>=1.0.0', node: '>=0.10.0' }
+    resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
+    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
 
   rfdc@1.4.1:
-    resolution:
-      {
-        integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==
-      }
+    resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
+
+  rimraf@2.7.1:
+    resolution: {integrity: sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==}
+    deprecated: Rimraf versions prior to v4 are no longer supported
+    hasBin: true
 
   rollup-plugin-visualizer@5.14.0:
-    resolution:
-      {
-        integrity: sha512-VlDXneTDaKsHIw8yzJAFWtrzguoJ/LnQ+lMpoVfYJ3jJF4Ihe5oYLAqLklIK/35lgUY+1yEzCkHyZ1j4A5w5fA==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-VlDXneTDaKsHIw8yzJAFWtrzguoJ/LnQ+lMpoVfYJ3jJF4Ihe5oYLAqLklIK/35lgUY+1yEzCkHyZ1j4A5w5fA==}
+    engines: {node: '>=18'}
     hasBin: true
     peerDependencies:
       rolldown: 1.x
@@ -5353,322 +3786,223 @@ packages:
         optional: true
 
   rollup@4.52.3:
-    resolution:
-      {
-        integrity: sha512-RIDh866U8agLgiIcdpB+COKnlCreHJLfIhWC3LVflku5YHfpnsIKigRZeFfMfCc4dVcqNVfQQ5gO/afOck064A==
-      }
-    engines: { node: '>=18.0.0', npm: '>=8.0.0' }
+    resolution: {integrity: sha512-RIDh866U8agLgiIcdpB+COKnlCreHJLfIhWC3LVflku5YHfpnsIKigRZeFfMfCc4dVcqNVfQQ5gO/afOck064A==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
   run-applescript@7.1.0:
-    resolution:
-      {
-        integrity: sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==}
+    engines: {node: '>=18'}
 
   run-async@2.4.1:
-    resolution:
-      {
-        integrity: sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==
-      }
-    engines: { node: '>=0.12.0' }
+    resolution: {integrity: sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==}
+    engines: {node: '>=0.12.0'}
 
   run-parallel@1.2.0:
-    resolution:
-      {
-        integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==
-      }
+    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
 
   rxjs@7.8.2:
-    resolution:
-      {
-        integrity: sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==
-      }
+    resolution: {integrity: sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==}
+
+  safe-buffer@5.1.2:
+    resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
 
   safe-buffer@5.2.1:
-    resolution:
-      {
-        integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
-      }
+    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
 
   safer-buffer@2.1.2:
-    resolution:
-      {
-        integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
-      }
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
   sass@1.93.2:
-    resolution:
-      {
-        integrity: sha512-t+YPtOQHpGW1QWsh1CHQ5cPIr9lbbGZLZnbihP/D/qZj/yuV68m8qarcV17nvkOX81BCrvzAlq2klCQFZghyTg==
-      }
-    engines: { node: '>=14.0.0' }
+    resolution: {integrity: sha512-t+YPtOQHpGW1QWsh1CHQ5cPIr9lbbGZLZnbihP/D/qZj/yuV68m8qarcV17nvkOX81BCrvzAlq2klCQFZghyTg==}
+    engines: {node: '>=14.0.0'}
     hasBin: true
 
-  scroll-into-view-if-needed@2.2.31:
-    resolution:
-      {
-        integrity: sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==
-      }
+  saxes@5.0.1:
+    resolution: {integrity: sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==}
+    engines: {node: '>=10'}
+
+  scroll-into-view-if-needed@3.1.0:
+    resolution: {integrity: sha512-49oNpRjWRvnU8NyGVmUaYG4jtTkNonFZI86MmGRDqBphEK2EXT9gdEUoQPZhuBM8yWHxCWbobltqYO5M4XrUvQ==}
 
   scule@1.3.0:
-    resolution:
-      {
-        integrity: sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==
-      }
+    resolution: {integrity: sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==}
+
+  select@1.1.2:
+    resolution: {integrity: sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA==}
 
   semver@6.3.1:
-    resolution:
-      {
-        integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
-      }
+    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
 
   semver@7.7.2:
-    resolution:
-      {
-        integrity: sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==
-      }
-    engines: { node: '>=10' }
+    resolution: {integrity: sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==}
+    engines: {node: '>=10'}
     hasBin: true
 
+  setimmediate@1.0.5:
+    resolution: {integrity: sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==}
+
   shebang-command@2.0.0:
-    resolution:
-      {
-        integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
-      }
-    engines: { node: '>=8' }
+    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
+    engines: {node: '>=8'}
 
   shebang-regex@3.0.0:
-    resolution:
-      {
-        integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
-      }
-    engines: { node: '>=8' }
+    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
+    engines: {node: '>=8'}
+
+  side-channel-list@1.0.1:
+    resolution: {integrity: sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-map@1.0.1:
+    resolution: {integrity: sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-weakmap@1.0.2:
+    resolution: {integrity: sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==}
+    engines: {node: '>= 0.4'}
+
+  side-channel@1.1.0:
+    resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
+    engines: {node: '>= 0.4'}
 
   signal-exit@3.0.7:
-    resolution:
-      {
-        integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
-      }
+    resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
 
   signal-exit@4.1.0:
-    resolution:
-      {
-        integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==
-      }
-    engines: { node: '>=14' }
+    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
+    engines: {node: '>=14'}
 
   sirv@3.0.2:
-    resolution:
-      {
-        integrity: sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g==}
+    engines: {node: '>=18'}
 
   slash@3.0.0:
-    resolution:
-      {
-        integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
-      }
-    engines: { node: '>=8' }
+    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
+    engines: {node: '>=8'}
 
-  slate-history@0.66.0:
-    resolution:
-      {
-        integrity: sha512-6MWpxGQZiMvSINlCbMW43E2YBSVMCMCIwQfBzGssjWw4kb0qfvj0pIdblWNRQZD0hR6WHP+dHHgGSeVdMWzfng==
-      }
+  slate-history@0.115.0:
+    resolution: {integrity: sha512-QdUm9aVyQFz6JG4a84Z6Um+tJpZJmsh9bjXwTVTvYiN4rdKbqL6+/4HT94on1WYxe10Q4vY6mA6BCpoYxgF3tQ==}
     peerDependencies:
-      slate: '>=0.65.3'
+      slate: '>=0.114.3'
 
-  slate@0.72.8:
-    resolution:
-      {
-        integrity: sha512-/nJwTswQgnRurpK+bGJFH1oM7naD5qDmHd89JyiKNT2oOKD8marW0QSBtuFnwEbL5aGCS8AmrhXQgNOsn4osAw==
-      }
+  slate@0.123.0:
+    resolution: {integrity: sha512-Oon3HR/QzJQBjuOUJT1jGGlp8Ff7t3Bkr/rJ2lDqxNT4H+cBnXpEVQ/si6hn1ZCHhD2xY/2N91PQoH/rD7kxTg==}
 
   slice-ansi@4.0.0:
-    resolution:
-      {
-        integrity: sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==
-      }
-    engines: { node: '>=10' }
+    resolution: {integrity: sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==}
+    engines: {node: '>=10'}
 
   slice-ansi@5.0.0:
-    resolution:
-      {
-        integrity: sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==
-      }
-    engines: { node: '>=12' }
+    resolution: {integrity: sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==}
+    engines: {node: '>=12'}
 
   slice-ansi@7.1.2:
-    resolution:
-      {
-        integrity: sha512-iOBWFgUX7caIZiuutICxVgX1SdxwAVFFKwt1EvMYYec/NWO5meOJ6K5uQxhrYBdQJne4KxiqZc+KptFOWFSI9w==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-iOBWFgUX7caIZiuutICxVgX1SdxwAVFFKwt1EvMYYec/NWO5meOJ6K5uQxhrYBdQJne4KxiqZc+KptFOWFSI9w==}
+    engines: {node: '>=18'}
 
   snabbdom@3.6.2:
-    resolution:
-      {
-        integrity: sha512-ig5qOnCDbugFntKi6c7Xlib8bA6xiJVk8O+WdFrV3wxbMqeHO0hXFQC4nAhPVWfZfi8255lcZkNhtIBINCc4+Q==
-      }
-    engines: { node: '>=12.17.0' }
+    resolution: {integrity: sha512-ig5qOnCDbugFntKi6c7Xlib8bA6xiJVk8O+WdFrV3wxbMqeHO0hXFQC4nAhPVWfZfi8255lcZkNhtIBINCc4+Q==}
+    engines: {node: '>=12.17.0'}
+
+  sortablejs@1.14.0:
+    resolution: {integrity: sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==}
 
   source-map-js@1.2.1:
-    resolution:
-      {
-        integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
-      }
-    engines: { node: '>=0.10.0' }
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
 
   source-map-support@0.5.21:
-    resolution:
-      {
-        integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==
-      }
+    resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
 
   source-map@0.6.1:
-    resolution:
-      {
-        integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
-      }
-    engines: { node: '>=0.10.0' }
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
 
   source-map@0.7.6:
-    resolution:
-      {
-        integrity: sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==
-      }
-    engines: { node: '>= 12' }
+    resolution: {integrity: sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==}
+    engines: {node: '>= 12'}
 
   speakingurl@14.0.1:
-    resolution:
-      {
-        integrity: sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==
-      }
-    engines: { node: '>=0.10.0' }
+    resolution: {integrity: sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==}
+    engines: {node: '>=0.10.0'}
 
   split2@4.2.0:
-    resolution:
-      {
-        integrity: sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==
-      }
-    engines: { node: '>= 10.x' }
+    resolution: {integrity: sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==}
+    engines: {node: '>= 10.x'}
 
   ssf@0.11.2:
-    resolution:
-      {
-        integrity: sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==
-      }
-    engines: { node: '>=0.8' }
+    resolution: {integrity: sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==}
+    engines: {node: '>=0.8'}
 
-  ssr-window@3.0.0:
-    resolution:
-      {
-        integrity: sha512-q+8UfWDg9Itrg0yWK7oe5p/XRCJpJF9OBtXfOPgSJl+u3Xd5KI328RUEvUqSMVM9CiQUEf1QdBzJMkYGErj9QA==
-      }
+  ssr-window@4.0.2:
+    resolution: {integrity: sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==}
 
   string-argv@0.3.2:
-    resolution:
-      {
-        integrity: sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==
-      }
-    engines: { node: '>=0.6.19' }
+    resolution: {integrity: sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==}
+    engines: {node: '>=0.6.19'}
 
   string-width@4.2.3:
-    resolution:
-      {
-        integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-      }
-    engines: { node: '>=8' }
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    engines: {node: '>=8'}
+
+  string-width@5.1.2:
+    resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
+    engines: {node: '>=12'}
 
   string-width@7.2.0:
-    resolution:
-      {
-        integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==}
+    engines: {node: '>=18'}
+
+  string_decoder@1.1.1:
+    resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
 
   string_decoder@1.3.0:
-    resolution:
-      {
-        integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
-      }
+    resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
 
   strip-ansi@6.0.1:
-    resolution:
-      {
-        integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-      }
-    engines: { node: '>=8' }
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
 
   strip-ansi@7.1.2:
-    resolution:
-      {
-        integrity: sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==
-      }
-    engines: { node: '>=12' }
+    resolution: {integrity: sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==}
+    engines: {node: '>=12'}
 
   strip-bom@4.0.0:
-    resolution:
-      {
-        integrity: sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==
-      }
-    engines: { node: '>=8' }
+    resolution: {integrity: sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==}
+    engines: {node: '>=8'}
 
   strip-final-newline@3.0.0:
-    resolution:
-      {
-        integrity: sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==
-      }
-    engines: { node: '>=12' }
+    resolution: {integrity: sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==}
+    engines: {node: '>=12'}
 
   strip-final-newline@4.0.0:
-    resolution:
-      {
-        integrity: sha512-aulFJcD6YK8V1G7iRB5tigAP4TsHBZZrOV8pjV++zdUwmeV8uzbY7yn6h9MswN62adStNZFuCIx4haBnRuMDaw==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-aulFJcD6YK8V1G7iRB5tigAP4TsHBZZrOV8pjV++zdUwmeV8uzbY7yn6h9MswN62adStNZFuCIx4haBnRuMDaw==}
+    engines: {node: '>=18'}
 
   strip-json-comments@3.1.1:
-    resolution:
-      {
-        integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
-      }
-    engines: { node: '>=8' }
+    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
+    engines: {node: '>=8'}
 
   strip-literal@3.1.0:
-    resolution:
-      {
-        integrity: sha512-8r3mkIM/2+PpjHoOtiAW8Rg3jJLHaV7xPwG+YRGrv6FP0wwk/toTpATxWYOW0BKdWwl82VT2tFYi5DlROa0Mxg==
-      }
+    resolution: {integrity: sha512-8r3mkIM/2+PpjHoOtiAW8Rg3jJLHaV7xPwG+YRGrv6FP0wwk/toTpATxWYOW0BKdWwl82VT2tFYi5DlROa0Mxg==}
 
   stylelint-config-html@1.1.0:
-    resolution:
-      {
-        integrity: sha512-IZv4IVESjKLumUGi+HWeb7skgO6/g4VMuAYrJdlqQFndgbj6WJAXPhaysvBiXefX79upBdQVumgYcdd17gCpjQ==
-      }
-    engines: { node: ^12 || >=14 }
+    resolution: {integrity: sha512-IZv4IVESjKLumUGi+HWeb7skgO6/g4VMuAYrJdlqQFndgbj6WJAXPhaysvBiXefX79upBdQVumgYcdd17gCpjQ==}
+    engines: {node: ^12 || >=14}
     peerDependencies:
       postcss-html: ^1.0.0
       stylelint: '>=14.0.0'
 
-  stylelint-config-recess-order@4.6.0:
-    resolution:
-      {
-        integrity: sha512-V76fhv3YtcNXh/hyAuAdSzi5FmcrG54Mp2AThJ3D/PTMTSYzUPd7GIhP6z9mTqnRhmkk6YTfcu/JWB8h+Yrcaw==
-      }
+  stylelint-config-recess-order@6.1.0:
+    resolution: {integrity: sha512-0rGZgJQjUKqv1PXZnRJxr13f3hb3i2snx2nIL6luDWUf4nD3BAweB8noS7jdfBQ56HQG3RKSF0a+MAHfBGFxgw==}
     peerDependencies:
-      stylelint: '>=15'
+      stylelint: '>=16'
 
   stylelint-config-recommended-scss@14.1.0:
-    resolution:
-      {
-        integrity: sha512-bhaMhh1u5dQqSsf6ri2GVWWQW5iUjBYgcHkh7SgDDn92ijoItC/cfO/W+fpXshgTQWhwFkP1rVcewcv4jaftRg==
-      }
-    engines: { node: '>=18.12.0' }
+    resolution: {integrity: sha512-bhaMhh1u5dQqSsf6ri2GVWWQW5iUjBYgcHkh7SgDDn92ijoItC/cfO/W+fpXshgTQWhwFkP1rVcewcv4jaftRg==}
+    engines: {node: '>=18.12.0'}
     peerDependencies:
       postcss: ^8.3.3
       stylelint: ^16.6.1
@@ -5677,316 +4011,204 @@ packages:
         optional: true
 
   stylelint-config-recommended-vue@1.6.1:
-    resolution:
-      {
-        integrity: sha512-lLW7hTIMBiTfjenGuDq2kyHA6fBWd/+Df7MO4/AWOxiFeXP9clbpKgg27kHfwA3H7UNMGC7aeP3mNlZB5LMmEQ==
-      }
-    engines: { node: ^12 || >=14 }
+    resolution: {integrity: sha512-lLW7hTIMBiTfjenGuDq2kyHA6fBWd/+Df7MO4/AWOxiFeXP9clbpKgg27kHfwA3H7UNMGC7aeP3mNlZB5LMmEQ==}
+    engines: {node: ^12 || >=14}
     peerDependencies:
       postcss-html: ^1.0.0
       stylelint: '>=14.0.0'
 
   stylelint-config-recommended@14.0.1:
-    resolution:
-      {
-        integrity: sha512-bLvc1WOz/14aPImu/cufKAZYfXs/A/owZfSMZ4N+16WGXLoX5lOir53M6odBxvhgmgdxCVnNySJmZKx73T93cg==
-      }
-    engines: { node: '>=18.12.0' }
+    resolution: {integrity: sha512-bLvc1WOz/14aPImu/cufKAZYfXs/A/owZfSMZ4N+16WGXLoX5lOir53M6odBxvhgmgdxCVnNySJmZKx73T93cg==}
+    engines: {node: '>=18.12.0'}
     peerDependencies:
       stylelint: ^16.1.0
 
-  stylelint-config-recommended@17.0.0:
-    resolution:
-      {
-        integrity: sha512-WaMSdEiPfZTSFVoYmJbxorJfA610O0tlYuU2aEwY33UQhSPgFbClrVJYWvy3jGJx+XW37O+LyNLiZOEXhKhJmA==
-      }
-    engines: { node: '>=18.12.0' }
+  stylelint-config-recommended@15.0.0:
+    resolution: {integrity: sha512-9LejMFsat7L+NXttdHdTq94byn25TD+82bzGRiV1Pgasl99pWnwipXS5DguTpp3nP1XjvLXVnEJIuYBfsRjRkA==}
+    engines: {node: '>=18.12.0'}
     peerDependencies:
-      stylelint: ^16.23.0
+      stylelint: ^16.13.0
 
   stylelint-config-standard@36.0.1:
-    resolution:
-      {
-        integrity: sha512-8aX8mTzJ6cuO8mmD5yon61CWuIM4UD8Q5aBcWKGSf6kg+EC3uhB+iOywpTK4ca6ZL7B49en8yanOFtUW0qNzyw==
-      }
-    engines: { node: '>=18.12.0' }
+    resolution: {integrity: sha512-8aX8mTzJ6cuO8mmD5yon61CWuIM4UD8Q5aBcWKGSf6kg+EC3uhB+iOywpTK4ca6ZL7B49en8yanOFtUW0qNzyw==}
+    engines: {node: '>=18.12.0'}
     peerDependencies:
       stylelint: ^16.1.0
 
   stylelint-order@6.0.4:
-    resolution:
-      {
-        integrity: sha512-0UuKo4+s1hgQ/uAxlYU4h0o0HS4NiQDud0NAUNI0aa8FJdmYHA5ZZTFHiV5FpmE3071e9pZx5j0QpVJW5zOCUA==
-      }
+    resolution: {integrity: sha512-0UuKo4+s1hgQ/uAxlYU4h0o0HS4NiQDud0NAUNI0aa8FJdmYHA5ZZTFHiV5FpmE3071e9pZx5j0QpVJW5zOCUA==}
     peerDependencies:
       stylelint: ^14.0.0 || ^15.0.0 || ^16.0.1
 
+  stylelint-prettier@5.0.3:
+    resolution: {integrity: sha512-B6V0oa35ekRrKZlf+6+jA+i50C4GXJ7X1PPmoCqSUoXN6BrNF6NhqqhanvkLjqw2qgvrS0wjdpeC+Tn06KN3jw==}
+    engines: {node: '>=18.12.0'}
+    peerDependencies:
+      prettier: '>=3.0.0'
+      stylelint: '>=16.0.0'
+
   stylelint-scss@6.12.1:
-    resolution:
-      {
-        integrity: sha512-UJUfBFIvXfly8WKIgmqfmkGKPilKB4L5j38JfsDd+OCg2GBdU0vGUV08Uw82tsRZzd4TbsUURVVNGeOhJVF7pA==
-      }
-    engines: { node: '>=18.12.0' }
+    resolution: {integrity: sha512-UJUfBFIvXfly8WKIgmqfmkGKPilKB4L5j38JfsDd+OCg2GBdU0vGUV08Uw82tsRZzd4TbsUURVVNGeOhJVF7pA==}
+    engines: {node: '>=18.12.0'}
     peerDependencies:
       stylelint: ^16.0.2
 
-  stylelint@16.24.0:
-    resolution:
-      {
-        integrity: sha512-7ksgz3zJaSbTUGr/ujMXvLVKdDhLbGl3R/3arNudH7z88+XZZGNLMTepsY28WlnvEFcuOmUe7fg40Q3lfhOfSQ==
-      }
-    engines: { node: '>=18.12.0' }
+  stylelint@16.26.1:
+    resolution: {integrity: sha512-v20V59/crfc8sVTAtge0mdafI3AdnzQ2KsWe6v523L4OA1bJO02S7MO2oyXDCS6iWb9ckIPnqAFVItqSBQr7jw==}
+    engines: {node: '>=18.12.0'}
     hasBin: true
 
   superjson@2.2.2:
-    resolution:
-      {
-        integrity: sha512-5JRxVqC8I8NuOUjzBbvVJAKNM8qoVuH0O77h4WInc/qC2q5IreqKxYwgkga3PfA22OayK2ikceb/B26dztPl+Q==
-      }
-    engines: { node: '>=16' }
+    resolution: {integrity: sha512-5JRxVqC8I8NuOUjzBbvVJAKNM8qoVuH0O77h4WInc/qC2q5IreqKxYwgkga3PfA22OayK2ikceb/B26dztPl+Q==}
+    engines: {node: '>=16'}
 
   supports-color@5.5.0:
-    resolution:
-      {
-        integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
-      }
-    engines: { node: '>=4' }
+    resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
+    engines: {node: '>=4'}
 
   supports-color@7.2.0:
-    resolution:
-      {
-        integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
-      }
-    engines: { node: '>=8' }
+    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
+    engines: {node: '>=8'}
 
   supports-hyperlinks@3.2.0:
-    resolution:
-      {
-        integrity: sha512-zFObLMyZeEwzAoKCyu1B91U79K2t7ApXuQfo8OuxwXLDgcKxuwM+YvcbIhm6QWqz7mHUH1TVytR1PwVVjEuMig==
-      }
-    engines: { node: '>=14.18' }
+    resolution: {integrity: sha512-zFObLMyZeEwzAoKCyu1B91U79K2t7ApXuQfo8OuxwXLDgcKxuwM+YvcbIhm6QWqz7mHUH1TVytR1PwVVjEuMig==}
+    engines: {node: '>=14.18'}
 
   svg-tags@1.0.0:
-    resolution:
-      {
-        integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==
-      }
+    resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==}
 
   synckit@0.11.11:
-    resolution:
-      {
-        integrity: sha512-MeQTA1r0litLUf0Rp/iisCaL8761lKAZHaimlbGK4j0HysC4PLfqygQj9srcs0m2RdtDYnF8UuYyKpbjHYp7Jw==
-      }
-    engines: { node: ^14.18.0 || >=16.0.0 }
+    resolution: {integrity: sha512-MeQTA1r0litLUf0Rp/iisCaL8761lKAZHaimlbGK4j0HysC4PLfqygQj9srcs0m2RdtDYnF8UuYyKpbjHYp7Jw==}
+    engines: {node: ^14.18.0 || >=16.0.0}
 
   table@6.9.0:
-    resolution:
-      {
-        integrity: sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==
-      }
-    engines: { node: '>=10.0.0' }
+    resolution: {integrity: sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==}
+    engines: {node: '>=10.0.0'}
 
   tailwindcss@4.1.14:
-    resolution:
-      {
-        integrity: sha512-b7pCxjGO98LnxVkKjaZSDeNuljC4ueKUddjENJOADtubtdo8llTaJy7HwBMeLNSSo2N5QIAgklslK1+Ir8r6CA==
-      }
+    resolution: {integrity: sha512-b7pCxjGO98LnxVkKjaZSDeNuljC4ueKUddjENJOADtubtdo8llTaJy7HwBMeLNSSo2N5QIAgklslK1+Ir8r6CA==}
 
   tapable@2.3.0:
-    resolution:
-      {
-        integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==
-      }
-    engines: { node: '>=6' }
+    resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==}
+    engines: {node: '>=6'}
+
+  tar-stream@2.2.0:
+    resolution: {integrity: sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==}
+    engines: {node: '>=6'}
 
   tar@7.5.1:
-    resolution:
-      {
-        integrity: sha512-nlGpxf+hv0v7GkWBK2V9spgactGOp0qvfWRxUMjqHyzrt3SgwE48DIv/FhqPHJYLHpgW1opq3nERbz5Anq7n1g==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-nlGpxf+hv0v7GkWBK2V9spgactGOp0qvfWRxUMjqHyzrt3SgwE48DIv/FhqPHJYLHpgW1opq3nERbz5Anq7n1g==}
+    engines: {node: '>=18'}
 
   terser@5.44.0:
-    resolution:
-      {
-        integrity: sha512-nIVck8DK+GM/0Frwd+nIhZ84pR/BX7rmXMfYwyg+Sri5oGVE99/E3KvXqpC2xHFxyqXyGHTKBSioxxplrO4I4w==
-      }
-    engines: { node: '>=10' }
+    resolution: {integrity: sha512-nIVck8DK+GM/0Frwd+nIhZ84pR/BX7rmXMfYwyg+Sri5oGVE99/E3KvXqpC2xHFxyqXyGHTKBSioxxplrO4I4w==}
+    engines: {node: '>=10'}
     hasBin: true
 
   text-extensions@2.4.0:
-    resolution:
-      {
-        integrity: sha512-te/NtwBwfiNRLf9Ijqx3T0nlqZiQ2XrrtBvu+cLL8ZRrGkO0NHTug8MYFKyoSrv/sHTaSKfilUkizV6XhxMJ3g==
-      }
-    engines: { node: '>=8' }
+    resolution: {integrity: sha512-te/NtwBwfiNRLf9Ijqx3T0nlqZiQ2XrrtBvu+cLL8ZRrGkO0NHTug8MYFKyoSrv/sHTaSKfilUkizV6XhxMJ3g==}
+    engines: {node: '>=8'}
 
   through@2.3.8:
-    resolution:
-      {
-        integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==
-      }
+    resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
 
-  tiny-warning@1.0.3:
-    resolution:
-      {
-        integrity: sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
-      }
+  tiny-emitter@2.1.0:
+    resolution: {integrity: sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==}
 
   tinyexec@1.0.1:
-    resolution:
-      {
-        integrity: sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==
-      }
+    resolution: {integrity: sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==}
 
   tinyglobby@0.2.15:
-    resolution:
-      {
-        integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==
-      }
-    engines: { node: '>=12.0.0' }
+    resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
+    engines: {node: '>=12.0.0'}
 
   tmp@0.0.33:
-    resolution:
-      {
-        integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==
-      }
-    engines: { node: '>=0.6.0' }
+    resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==}
+    engines: {node: '>=0.6.0'}
+
+  tmp@0.2.5:
+    resolution: {integrity: sha512-voyz6MApa1rQGUxT3E+BK7/ROe8itEx7vD8/HEvt4xwXucvQ5G5oeEiHkmHZJuBO21RpOf+YYm9MOivj709jow==}
+    engines: {node: '>=14.14'}
 
   to-regex-range@5.0.1:
-    resolution:
-      {
-        integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
-      }
-    engines: { node: '>=8.0' }
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
 
   totalist@3.0.1:
-    resolution:
-      {
-        integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==
-      }
-    engines: { node: '>=6' }
+    resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
+    engines: {node: '>=6'}
+
+  traverse@0.3.9:
+    resolution: {integrity: sha512-iawgk0hLP3SxGKDfnDJf8wTz4p2qImnyihM5Hh/sGvQ3K37dPi/w8sRhdNIxYA1TwFwc5mDhIJq+O0RsvXBKdQ==}
 
   ts-api-utils@2.1.0:
-    resolution:
-      {
-        integrity: sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==
-      }
-    engines: { node: '>=18.12' }
+    resolution: {integrity: sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==}
+    engines: {node: '>=18.12'}
     peerDependencies:
       typescript: '>=4.8.4'
 
   tslib@2.3.0:
-    resolution:
-      {
-        integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
-      }
+    resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
 
   tslib@2.8.1:
-    resolution:
-      {
-        integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
-      }
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
   tsx@4.20.6:
-    resolution:
-      {
-        integrity: sha512-ytQKuwgmrrkDTFP4LjR0ToE2nqgy886GpvRSpU0JAnrdBYppuY5rLkRUYPU1yCryb24SsKBTL/hlDQAEFVwtZg==
-      }
-    engines: { node: '>=18.0.0' }
+    resolution: {integrity: sha512-ytQKuwgmrrkDTFP4LjR0ToE2nqgy886GpvRSpU0JAnrdBYppuY5rLkRUYPU1yCryb24SsKBTL/hlDQAEFVwtZg==}
+    engines: {node: '>=18.0.0'}
     hasBin: true
 
   type-check@0.4.0:
-    resolution:
-      {
-        integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==
-      }
-    engines: { node: '>= 0.8.0' }
-
-  type-fest@0.20.2:
-    resolution:
-      {
-        integrity: sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
-      }
-    engines: { node: '>=10' }
+    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
+    engines: {node: '>= 0.8.0'}
 
   type-fest@0.21.3:
-    resolution:
-      {
-        integrity: sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==
-      }
-    engines: { node: '>=10' }
+    resolution: {integrity: sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==}
+    engines: {node: '>=10'}
 
   type@2.7.3:
-    resolution:
-      {
-        integrity: sha512-8j+1QmAbPvLZow5Qpi6NCaN8FB60p/6x8/vfNqOk/hC+HuvFZhL4+WfekuhQLiqFZXOgQdrs3B+XxEmCc6b3FQ==
-      }
+    resolution: {integrity: sha512-8j+1QmAbPvLZow5Qpi6NCaN8FB60p/6x8/vfNqOk/hC+HuvFZhL4+WfekuhQLiqFZXOgQdrs3B+XxEmCc6b3FQ==}
 
   typescript-eslint@8.44.1:
-    resolution:
-      {
-        integrity: sha512-0ws8uWGrUVTjEeN2OM4K1pLKHK/4NiNP/vz6ns+LjT/6sqpaYzIVFajZb1fj/IDwpsrrHb3Jy0Qm5u9CPcKaeg==
-      }
-    engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
+    resolution: {integrity: sha512-0ws8uWGrUVTjEeN2OM4K1pLKHK/4NiNP/vz6ns+LjT/6sqpaYzIVFajZb1fj/IDwpsrrHb3Jy0Qm5u9CPcKaeg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  typescript@5.6.3:
-    resolution:
-      {
-        integrity: sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==
-      }
-    engines: { node: '>=14.17' }
+  typescript@5.9.3:
+    resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
+    engines: {node: '>=14.17'}
     hasBin: true
 
+  uc.micro@2.1.0:
+    resolution: {integrity: sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==}
+
   ufo@1.6.1:
-    resolution:
-      {
-        integrity: sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==
-      }
+    resolution: {integrity: sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==}
 
   undici-types@7.14.0:
-    resolution:
-      {
-        integrity: sha512-QQiYxHuyZ9gQUIrmPo3IA+hUl4KYk8uSA7cHrcKd/l3p1OTpZcM0Tbp9x7FAtXdAYhlasd60ncPpgu6ihG6TOA==
-      }
+    resolution: {integrity: sha512-QQiYxHuyZ9gQUIrmPo3IA+hUl4KYk8uSA7cHrcKd/l3p1OTpZcM0Tbp9x7FAtXdAYhlasd60ncPpgu6ihG6TOA==}
 
   unicorn-magic@0.1.0:
-    resolution:
-      {
-        integrity: sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==}
+    engines: {node: '>=18'}
 
   unicorn-magic@0.3.0:
-    resolution:
-      {
-        integrity: sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==}
+    engines: {node: '>=18'}
 
   unimport@5.4.0:
-    resolution:
-      {
-        integrity: sha512-g/OLFZR2mEfqbC6NC9b2225eCJGvufxq34mj6kM3OmI5gdSL0qyqtnv+9qmsGpAmnzSl6x0IWZj4W+8j2hLkMA==
-      }
-    engines: { node: '>=18.12.0' }
+    resolution: {integrity: sha512-g/OLFZR2mEfqbC6NC9b2225eCJGvufxq34mj6kM3OmI5gdSL0qyqtnv+9qmsGpAmnzSl6x0IWZj4W+8j2hLkMA==}
+    engines: {node: '>=18.12.0'}
 
   universalify@2.0.1:
-    resolution:
-      {
-        integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==
-      }
-    engines: { node: '>= 10.0.0' }
+    resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
+    engines: {node: '>= 10.0.0'}
 
   unplugin-auto-import@20.2.0:
-    resolution:
-      {
-        integrity: sha512-vfBI/SvD9hJqYNinipVOAj5n8dS8DJXFlCKFR5iLDp2SaQwsfdnfLXgZ+34Kd3YY3YEY9omk8XQg0bwos3Q8ug==
-      }
-    engines: { node: '>=14' }
+    resolution: {integrity: sha512-vfBI/SvD9hJqYNinipVOAj5n8dS8DJXFlCKFR5iLDp2SaQwsfdnfLXgZ+34Kd3YY3YEY9omk8XQg0bwos3Q8ug==}
+    engines: {node: '>=14'}
     peerDependencies:
       '@nuxt/kit': ^4.0.0
       '@vueuse/core': '*'
@@ -5997,32 +4219,20 @@ packages:
         optional: true
 
   unplugin-element-plus@0.10.0:
-    resolution:
-      {
-        integrity: sha512-oRSW0x6U58xBOWKy8TcoVZNA8ElIpfp3TUJRLQI6ey/E9PpjHl9/deeTAZNt8D57Li4OA4pCJtM6p2cb4Ff4ZA==
-      }
-    engines: { node: '>=18.12.0' }
+    resolution: {integrity: sha512-oRSW0x6U58xBOWKy8TcoVZNA8ElIpfp3TUJRLQI6ey/E9PpjHl9/deeTAZNt8D57Li4OA4pCJtM6p2cb4Ff4ZA==}
+    engines: {node: '>=18.12.0'}
 
   unplugin-utils@0.2.5:
-    resolution:
-      {
-        integrity: sha512-gwXJnPRewT4rT7sBi/IvxKTjsms7jX7QIDLOClApuZwR49SXbrB1z2NLUZ+vDHyqCj/n58OzRRqaW+B8OZi8vg==
-      }
-    engines: { node: '>=18.12.0' }
+    resolution: {integrity: sha512-gwXJnPRewT4rT7sBi/IvxKTjsms7jX7QIDLOClApuZwR49SXbrB1z2NLUZ+vDHyqCj/n58OzRRqaW+B8OZi8vg==}
+    engines: {node: '>=18.12.0'}
 
   unplugin-utils@0.3.0:
-    resolution:
-      {
-        integrity: sha512-JLoggz+PvLVMJo+jZt97hdIIIZ2yTzGgft9e9q8iMrC4ewufl62ekeW7mixBghonn2gVb/ICjyvlmOCUBnJLQg==
-      }
-    engines: { node: '>=20.19.0' }
+    resolution: {integrity: sha512-JLoggz+PvLVMJo+jZt97hdIIIZ2yTzGgft9e9q8iMrC4ewufl62ekeW7mixBghonn2gVb/ICjyvlmOCUBnJLQg==}
+    engines: {node: '>=20.19.0'}
 
   unplugin-vue-components@29.1.0:
-    resolution:
-      {
-        integrity: sha512-z/9ACPXth199s9aCTCdKZAhe5QGOpvzJYP+Hkd0GN1/PpAmsu+W3UlRY3BJAewPqQxh5xi56+Og6mfiCV1Jzpg==
-      }
-    engines: { node: '>=14' }
+    resolution: {integrity: sha512-z/9ACPXth199s9aCTCdKZAhe5QGOpvzJYP+Hkd0GN1/PpAmsu+W3UlRY3BJAewPqQxh5xi56+Og6mfiCV1Jzpg==}
+    engines: {node: '>=14'}
     peerDependencies:
       '@babel/parser': ^7.15.8
       '@nuxt/kit': ^3.2.2 || ^4.0.0
@@ -6034,55 +4244,47 @@ packages:
         optional: true
 
   unplugin@2.3.10:
-    resolution:
-      {
-        integrity: sha512-6NCPkv1ClwH+/BGE9QeoTIl09nuiAt0gS28nn1PvYXsGKRwM2TCbFA2QiilmehPDTXIe684k4rZI1yl3A1PCUw==
-      }
-    engines: { node: '>=18.12.0' }
+    resolution: {integrity: sha512-6NCPkv1ClwH+/BGE9QeoTIl09nuiAt0gS28nn1PvYXsGKRwM2TCbFA2QiilmehPDTXIe684k4rZI1yl3A1PCUw==}
+    engines: {node: '>=18.12.0'}
+
+  unzipper@0.10.14:
+    resolution: {integrity: sha512-ti4wZj+0bQTiX2KmKWuwj7lhV+2n//uXEotUmGuQqrbVZSEGFMbI68+c6JCQ8aAmUWYvtHEz2A8K6wXvueR/6g==}
 
   update-browserslist-db@1.1.3:
-    resolution:
-      {
-        integrity: sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==
-      }
+    resolution: {integrity: sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+
+  update-browserslist-db@1.2.3:
+    resolution: {integrity: sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==}
     hasBin: true
     peerDependencies:
       browserslist: '>= 4.21.0'
 
   uri-js@4.4.1:
-    resolution:
-      {
-        integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==
-      }
+    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
   util-deprecate@1.0.2:
-    resolution:
-      {
-        integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
-      }
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+
+  uuid@8.3.2:
+    resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==}
+    hasBin: true
 
   vite-hot-client@2.1.0:
-    resolution:
-      {
-        integrity: sha512-7SpgZmU7R+dDnSmvXE1mfDtnHLHQSisdySVR7lO8ceAXvM0otZeuQQ6C8LrS5d/aYyP/QZ0hI0L+dIPrm4YlFQ==
-      }
+    resolution: {integrity: sha512-7SpgZmU7R+dDnSmvXE1mfDtnHLHQSisdySVR7lO8ceAXvM0otZeuQQ6C8LrS5d/aYyP/QZ0hI0L+dIPrm4YlFQ==}
     peerDependencies:
       vite: ^2.6.0 || ^3.0.0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0 || ^7.0.0-0
 
   vite-plugin-compression@0.5.1:
-    resolution:
-      {
-        integrity: sha512-5QJKBDc+gNYVqL/skgFAP81Yuzo9R+EAf19d+EtsMF/i8kFUpNi3J/H01QD3Oo8zBQn+NzoCIFkpPLynoOzaJg==
-      }
+    resolution: {integrity: sha512-5QJKBDc+gNYVqL/skgFAP81Yuzo9R+EAf19d+EtsMF/i8kFUpNi3J/H01QD3Oo8zBQn+NzoCIFkpPLynoOzaJg==}
     peerDependencies:
       vite: '>=2.0.0'
 
   vite-plugin-inspect@0.8.9:
-    resolution:
-      {
-        integrity: sha512-22/8qn+LYonzibb1VeFZmISdVao5kC22jmEKm24vfFE8siEn47EpVcCLYMv6iKOYMJfjSvSJfueOwcFCkUnV3A==
-      }
-    engines: { node: '>=14' }
+    resolution: {integrity: sha512-22/8qn+LYonzibb1VeFZmISdVao5kC22jmEKm24vfFE8siEn47EpVcCLYMv6iKOYMJfjSvSJfueOwcFCkUnV3A==}
+    engines: {node: '>=14'}
     peerDependencies:
       '@nuxt/kit': '*'
       vite: ^3.1.0 || ^4.0.0 || ^5.0.0-0 || ^6.0.1
@@ -6091,28 +4293,19 @@ packages:
         optional: true
 
   vite-plugin-vue-devtools@7.7.7:
-    resolution:
-      {
-        integrity: sha512-d0fIh3wRcgSlr4Vz7bAk4va1MkdqhQgj9ANE/rBhsAjOnRfTLs2ocjFMvSUOsv6SRRXU9G+VM7yMgqDb6yI4iQ==
-      }
-    engines: { node: '>=v14.21.3' }
+    resolution: {integrity: sha512-d0fIh3wRcgSlr4Vz7bAk4va1MkdqhQgj9ANE/rBhsAjOnRfTLs2ocjFMvSUOsv6SRRXU9G+VM7yMgqDb6yI4iQ==}
+    engines: {node: '>=v14.21.3'}
     peerDependencies:
       vite: ^3.1.0 || ^4.0.0-0 || ^5.0.0-0 || ^6.0.0-0 || ^7.0.0-0
 
   vite-plugin-vue-inspector@5.3.2:
-    resolution:
-      {
-        integrity: sha512-YvEKooQcSiBTAs0DoYLfefNja9bLgkFM7NI2b07bE2SruuvX0MEa9cMaxjKVMkeCp5Nz9FRIdcN1rOdFVBeL6Q==
-      }
+    resolution: {integrity: sha512-YvEKooQcSiBTAs0DoYLfefNja9bLgkFM7NI2b07bE2SruuvX0MEa9cMaxjKVMkeCp5Nz9FRIdcN1rOdFVBeL6Q==}
     peerDependencies:
       vite: ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0 || ^6.0.0-0 || ^7.0.0-0
 
   vite@7.1.7:
-    resolution:
-      {
-        integrity: sha512-VbA8ScMvAISJNJVbRDTJdCwqQoAareR/wutevKanhR2/1EkoXVZVkkORaYm/tNVCjP/UDTKtcw3bAkwOUdedmA==
-      }
-    engines: { node: ^20.19.0 || >=22.12.0 }
+    resolution: {integrity: sha512-VbA8ScMvAISJNJVbRDTJdCwqQoAareR/wutevKanhR2/1EkoXVZVkkORaYm/tNVCjP/UDTKtcw3bAkwOUdedmA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
     peerDependencies:
       '@types/node': ^20.19.0 || >=22.12.0
@@ -6151,17 +4344,11 @@ packages:
         optional: true
 
   vscode-uri@3.1.0:
-    resolution:
-      {
-        integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==
-      }
+    resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
 
   vue-demi@0.14.10:
-    resolution:
-      {
-        integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==
-      }
-    engines: { node: '>=12' }
+    resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
+    engines: {node: '>=12'}
     hasBin: true
     peerDependencies:
       '@vue/composition-api': ^1.0.0-rc.1
@@ -6171,10 +4358,7 @@ packages:
         optional: true
 
   vue-draggable-plus@0.6.0:
-    resolution:
-      {
-        integrity: sha512-G5TSfHrt9tX9EjdG49InoFJbt2NYk0h3kgjgKxkFWr3ulIUays0oFObr5KZ8qzD4+QnhtALiRwIqY6qul4egqw==
-      }
+    resolution: {integrity: sha512-G5TSfHrt9tX9EjdG49InoFJbt2NYk0h3kgjgKxkFWr3ulIUays0oFObr5KZ8qzD4+QnhtALiRwIqY6qul4egqw==}
     peerDependencies:
       '@types/sortablejs': ^1.15.0
       '@vue/composition-api': '*'
@@ -6182,249 +4366,188 @@ packages:
       '@vue/composition-api':
         optional: true
 
-  vue-eslint-parser@9.4.3:
-    resolution:
-      {
-        integrity: sha512-2rYRLWlIpaiN8xbPiDyXZXRgLGOtWxERV7ND5fFAv5qo1D2N9Fu9MNajBNc6o13lZ+24DAWCkQCvj4klgmcITg==
-      }
-    engines: { node: ^14.17.0 || >=16.0.0 }
+  vue-eslint-parser@10.4.0:
+    resolution: {integrity: sha512-Vxi9pJdbN3ZnVGLODVtZ7y4Y2kzAAE2Cm0CZ3ZDRvydVYxZ6VrnBhLikBsRS+dpwj4Jv4UCv21PTEwF5rQ9WXg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      eslint: '>=6.0.0'
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
 
-  vue-i18n@9.14.5:
-    resolution:
-      {
-        integrity: sha512-0jQ9Em3ymWngyiIkj0+c/k7WgaPO+TNzjKSNq9BvBQaKJECqn9cd9fL4tkDhB5G1QBskGl9YxxbDAhgbFtpe2g==
-      }
-    engines: { node: '>= 16' }
+  vue-i18n@11.4.0:
+    resolution: {integrity: sha512-gxLVtcwdvOgwKSzkdb7nHKlW0N85A6aDNmHLnq6V+3w2/BXy/os5l71P7TIlgIQTxX0zJjiz89iImoHi51GieQ==}
+    engines: {node: '>= 16'}
     peerDependencies:
       vue: ^3.0.0
 
-  vue-img-cutter@3.0.7:
-    resolution:
-      {
-        integrity: sha512-fNw3kimawg9XVXDZCw2bI74NI+Jq+H42wjymatZVVSY46wuBty6LbQsu4GeVfo/yzpS9AHY0tzckpYzX3D2fmA==
-      }
+  vue-json-pretty@2.6.0:
+    resolution: {integrity: sha512-glz1aBVS35EO8+S9agIl3WOQaW2cJZW192UVKTuGmryx01ZvOVWc4pR3t+5UcyY4jdOfBUgVHjcpRpcnjRhCAg==}
+    engines: {node: '>= 10.0.0', npm: '>= 5.0.0'}
+    peerDependencies:
+      vue: '>=3.0.0'
+
+  vue-json-viewer@3.0.4:
+    resolution: {integrity: sha512-pnC080rTub6YjccthVSNQod2z9Sl5IUUq46srXtn6rxwhW8QM4rlYn+CTSLFKXWfw+N3xv77Cioxw7B4XUKIbQ==}
+    peerDependencies:
+      vue: ^3.2.2
 
   vue-router@4.5.1:
-    resolution:
-      {
-        integrity: sha512-ogAF3P97NPm8fJsE4by9dwSYtDwXIY1nFY9T6DyQnGHd1E2Da94w9JIolpe42LJGIl0DwOHBi8TcRPlPGwbTtw==
-      }
+    resolution: {integrity: sha512-ogAF3P97NPm8fJsE4by9dwSYtDwXIY1nFY9T6DyQnGHd1E2Da94w9JIolpe42LJGIl0DwOHBi8TcRPlPGwbTtw==}
     peerDependencies:
       vue: ^3.2.0
 
-  vue-tsc@2.1.10:
-    resolution:
-      {
-        integrity: sha512-RBNSfaaRHcN5uqVqJSZh++Gy/YUzryuv9u1aFWhsammDJXNtUiJMNoJ747lZcQ68wUQFx6E73y4FY3D8E7FGMA==
-      }
+  vue-tsc@2.2.12:
+    resolution: {integrity: sha512-P7OP77b2h/Pmk+lZdJ0YWs+5tJ6J2+uOQPo7tlBnY44QqQSPYvS0qVT4wqDJgwrZaLe47etJLLQRFia71GYITw==}
     hasBin: true
     peerDependencies:
       typescript: '>=5.0.0'
 
+  vue-web-terminal@3.4.2:
+    resolution: {integrity: sha512-H+wvDxZxWu7vHMNhsHzqPLn/wxgiQ7bSKWbcAORMwNfPadtWgAZa0fCvct25RJBMBYQrh1wfCJ6KtrDzdAn6Gg==}
+
+  vue3-cron-plus@0.1.9:
+    resolution: {integrity: sha512-jirDV1F9q7oaGerJztzcXY7e9eGUZbkP2jzfR/Chxice1c7ywthA+iO1zERvPtpbK2WHjOfidbvoY1DUzI3YKA==}
+
   vue@3.5.22:
-    resolution:
-      {
-        integrity: sha512-toaZjQ3a/G/mYaLSbV+QsQhIdMo9x5rrqIpYRObsJ6T/J+RyCSFwN2LHNVH9v8uIcljDNa3QzPVdv3Y6b9hAJQ==
-      }
+    resolution: {integrity: sha512-toaZjQ3a/G/mYaLSbV+QsQhIdMo9x5rrqIpYRObsJ6T/J+RyCSFwN2LHNVH9v8uIcljDNa3QzPVdv3Y6b9hAJQ==}
     peerDependencies:
       typescript: '*'
     peerDependenciesMeta:
       typescript:
         optional: true
 
+  vuedraggable@4.1.0:
+    resolution: {integrity: sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==}
+    peerDependencies:
+      vue: ^3.0.1
+
   wcwidth@1.0.1:
-    resolution:
-      {
-        integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==
-      }
+    resolution: {integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==}
 
   webpack-virtual-modules@0.6.2:
-    resolution:
-      {
-        integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==
-      }
+    resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
 
   which@1.3.1:
-    resolution:
-      {
-        integrity: sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
-      }
+    resolution: {integrity: sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==}
     hasBin: true
 
   which@2.0.2:
-    resolution:
-      {
-        integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
-      }
-    engines: { node: '>= 8' }
+    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
+    engines: {node: '>= 8'}
     hasBin: true
 
   wildcard@1.1.2:
-    resolution:
-      {
-        integrity: sha512-DXukZJxpHA8LuotRwL0pP1+rS6CS7FF2qStDDE1C7DDg2rLud2PXRMuEDYIPhgEezwnlHNL4c+N6MfMTjCGTng==
-      }
+    resolution: {integrity: sha512-DXukZJxpHA8LuotRwL0pP1+rS6CS7FF2qStDDE1C7DDg2rLud2PXRMuEDYIPhgEezwnlHNL4c+N6MfMTjCGTng==}
 
   wmf@1.0.2:
-    resolution:
-      {
-        integrity: sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==
-      }
-    engines: { node: '>=0.8' }
+    resolution: {integrity: sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==}
+    engines: {node: '>=0.8'}
 
   word-wrap@1.2.5:
-    resolution:
-      {
-        integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
-      }
-    engines: { node: '>=0.10.0' }
+    resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
+    engines: {node: '>=0.10.0'}
 
   word@0.3.0:
-    resolution:
-      {
-        integrity: sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==
-      }
-    engines: { node: '>=0.8' }
+    resolution: {integrity: sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==}
+    engines: {node: '>=0.8'}
 
   wrap-ansi@7.0.0:
-    resolution:
-      {
-        integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-      }
-    engines: { node: '>=10' }
+    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
+    engines: {node: '>=10'}
+
+  wrap-ansi@8.1.0:
+    resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
+    engines: {node: '>=12'}
 
   wrap-ansi@9.0.2:
-    resolution:
-      {
-        integrity: sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==}
+    engines: {node: '>=18'}
 
   wrappy@1.0.2:
-    resolution:
-      {
-        integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
-      }
+    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
 
   write-file-atomic@5.0.1:
-    resolution:
-      {
-        integrity: sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==
-      }
-    engines: { node: ^14.17.0 || ^16.13.0 || >=18.0.0 }
+    resolution: {integrity: sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
   wsl-utils@0.1.0:
-    resolution:
-      {
-        integrity: sha512-h3Fbisa2nKGPxCpm89Hk33lBLsnaGBvctQopaBSOW/uIs6FTe1ATyAnKFJrzVs9vpGdsTe73WF3V4lIsk4Gacw==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-h3Fbisa2nKGPxCpm89Hk33lBLsnaGBvctQopaBSOW/uIs6FTe1ATyAnKFJrzVs9vpGdsTe73WF3V4lIsk4Gacw==}
+    engines: {node: '>=18'}
 
   xgplayer-subtitles@3.0.23:
-    resolution:
-      {
-        integrity: sha512-deGdV75giVzfTTdG9XATmji39NHwKTpEelWt2rRx/RyXGgU2bQFp0Ft7yWaK2Uu8A/WVrP5fpxEAj4MstREMkQ==
-      }
+    resolution: {integrity: sha512-deGdV75giVzfTTdG9XATmji39NHwKTpEelWt2rRx/RyXGgU2bQFp0Ft7yWaK2Uu8A/WVrP5fpxEAj4MstREMkQ==}
     peerDependencies:
       core-js: '>=3.12.1'
 
   xgplayer@3.0.23:
-    resolution:
-      {
-        integrity: sha512-Bn3zQfMMAZimlVG9EeIDybMcklc+6FH8Sv47KpTq4K6ofCzyhPG/KenxailDedlHmxjb5B2o+240TpJtMQ3oJA==
-      }
+    resolution: {integrity: sha512-Bn3zQfMMAZimlVG9EeIDybMcklc+6FH8Sv47KpTq4K6ofCzyhPG/KenxailDedlHmxjb5B2o+240TpJtMQ3oJA==}
     peerDependencies:
       core-js: '>=3.12.1'
 
   xlsx@0.18.5:
-    resolution:
-      {
-        integrity: sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==
-      }
-    engines: { node: '>=0.8' }
+    resolution: {integrity: sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==}
+    engines: {node: '>=0.8'}
     hasBin: true
 
   xml-name-validator@4.0.0:
-    resolution:
-      {
-        integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==
-      }
-    engines: { node: '>=12' }
+    resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
+    engines: {node: '>=12'}
+
+  xmlchars@2.2.0:
+    resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
 
   y18n@5.0.8:
-    resolution:
-      {
-        integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
-      }
-    engines: { node: '>=10' }
+    resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
+    engines: {node: '>=10'}
 
   yallist@3.1.1:
-    resolution:
-      {
-        integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
-      }
+    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
 
   yallist@5.0.0:
-    resolution:
-      {
-        integrity: sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==}
+    engines: {node: '>=18'}
 
   yaml@2.8.1:
-    resolution:
-      {
-        integrity: sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==
-      }
-    engines: { node: '>= 14.6' }
+    resolution: {integrity: sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==}
+    engines: {node: '>= 14.6'}
     hasBin: true
 
   yargs-parser@21.1.1:
-    resolution:
-      {
-        integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==
-      }
-    engines: { node: '>=12' }
+    resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
+    engines: {node: '>=12'}
 
   yargs@17.7.2:
-    resolution:
-      {
-        integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==
-      }
-    engines: { node: '>=12' }
+    resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
+    engines: {node: '>=12'}
 
   yocto-queue@0.1.0:
-    resolution:
-      {
-        integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
-      }
-    engines: { node: '>=10' }
+    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
+    engines: {node: '>=10'}
 
   yocto-queue@1.2.1:
-    resolution:
-      {
-        integrity: sha512-AyeEbWOu/TAXdxlV9wmGcR0+yh2j3vYPGOECcIj2S7MkrLyC7ne+oye2BKTItt0ii2PHk4cDy+95+LshzbXnGg==
-      }
-    engines: { node: '>=12.20' }
+    resolution: {integrity: sha512-AyeEbWOu/TAXdxlV9wmGcR0+yh2j3vYPGOECcIj2S7MkrLyC7ne+oye2BKTItt0ii2PHk4cDy+95+LshzbXnGg==}
+    engines: {node: '>=12.20'}
 
   yoctocolors@2.1.2:
-    resolution:
-      {
-        integrity: sha512-CzhO+pFNo8ajLM2d2IW/R93ipy99LWjtwblvC1RsoSUMZgyLbYFr221TnSNT7GjGdYui6P459mw9JH/g/zW2ug==
-      }
-    engines: { node: '>=18' }
+    resolution: {integrity: sha512-CzhO+pFNo8ajLM2d2IW/R93ipy99LWjtwblvC1RsoSUMZgyLbYFr221TnSNT7GjGdYui6P459mw9JH/g/zW2ug==}
+    engines: {node: '>=18'}
+
+  zip-stream@4.1.1:
+    resolution: {integrity: sha512-9qv4rlDiopXg4E69k+vMHjNN63YFMe9sZMrdlvKnCjlCRWeCBswPPMPUfx+ipsAWq1LXHe70RcbaHdJJpS6hyQ==}
+    engines: {node: '>= 10'}
 
   zrender@6.0.0:
-    resolution:
-      {
-        integrity: sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg==
-      }
+    resolution: {integrity: sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg==}
 
 snapshots:
+
+  '@antfu/install-pkg@1.1.0':
+    dependencies:
+      package-manager-detector: 1.6.0
+      tinyexec: 1.0.1
+
   '@antfu/utils@0.7.10': {}
 
+  '@antfu/utils@8.1.1': {}
+
   '@babel/code-frame@7.27.1':
     dependencies:
       '@babel/helper-validator-identifier': 7.27.1
@@ -6618,25 +4741,23 @@ snapshots:
       '@babel/helper-string-parser': 7.27.1
       '@babel/helper-validator-identifier': 7.27.1
 
-  '@cacheable/memoize@2.0.2':
+  '@cacheable/memory@2.0.8':
     dependencies:
-      '@cacheable/utils': 2.0.2
+      '@cacheable/utils': 2.4.1
+      '@keyv/bigmap': 1.3.1(keyv@5.6.0)
+      hookified: 1.15.1
+      keyv: 5.6.0
 
-  '@cacheable/memory@2.0.2':
+  '@cacheable/utils@2.4.1':
     dependencies:
-      '@cacheable/memoize': 2.0.2
-      '@cacheable/utils': 2.0.2
-      '@keyv/bigmap': 1.0.2
-      hookified: 1.12.1
-      keyv: 5.5.3
+      hashery: 1.5.1
+      keyv: 5.6.0
 
-  '@cacheable/utils@2.0.2': {}
-
-  '@commitlint/cli@19.8.1(@types/node@24.8.1)(typescript@5.6.3)':
+  '@commitlint/cli@19.8.1(@types/node@24.8.1)(typescript@5.9.3)':
     dependencies:
       '@commitlint/format': 19.8.1
       '@commitlint/lint': 19.8.1
-      '@commitlint/load': 19.8.1(@types/node@24.8.1)(typescript@5.6.3)
+      '@commitlint/load': 19.8.1(@types/node@24.8.1)(typescript@5.9.3)
       '@commitlint/read': 19.8.1
       '@commitlint/types': 19.8.1
       tinyexec: 1.0.1
@@ -6692,15 +4813,15 @@ snapshots:
       '@commitlint/rules': 19.8.1
       '@commitlint/types': 19.8.1
 
-  '@commitlint/load@19.8.1(@types/node@24.8.1)(typescript@5.6.3)':
+  '@commitlint/load@19.8.1(@types/node@24.8.1)(typescript@5.9.3)':
     dependencies:
       '@commitlint/config-validator': 19.8.1
       '@commitlint/execute-rule': 19.8.1
       '@commitlint/resolve-extends': 19.8.1
       '@commitlint/types': 19.8.1
       chalk: 5.6.2
-      cosmiconfig: 9.0.0(typescript@5.6.3)
-      cosmiconfig-typescript-loader: 6.1.0(@types/node@24.8.1)(cosmiconfig@9.0.0(typescript@5.6.3))(typescript@5.6.3)
+      cosmiconfig: 9.0.0(typescript@5.9.3)
+      cosmiconfig-typescript-loader: 6.1.0(@types/node@24.8.1)(cosmiconfig@9.0.0(typescript@5.9.3))(typescript@5.9.3)
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       lodash.uniq: 4.5.0
@@ -6708,15 +4829,15 @@ snapshots:
       - '@types/node'
       - typescript
 
-  '@commitlint/load@20.0.0(@types/node@24.8.1)(typescript@5.6.3)':
+  '@commitlint/load@20.0.0(@types/node@24.8.1)(typescript@5.9.3)':
     dependencies:
       '@commitlint/config-validator': 20.0.0
       '@commitlint/execute-rule': 20.0.0
       '@commitlint/resolve-extends': 20.0.0
       '@commitlint/types': 20.0.0
       chalk: 5.6.2
-      cosmiconfig: 9.0.0(typescript@5.6.3)
-      cosmiconfig-typescript-loader: 6.1.0(@types/node@24.8.1)(cosmiconfig@9.0.0(typescript@5.6.3))(typescript@5.6.3)
+      cosmiconfig: 9.0.0(typescript@5.9.3)
+      cosmiconfig-typescript-loader: 6.1.0(@types/node@24.8.1)(cosmiconfig@9.0.0(typescript@5.9.3))(typescript@5.9.3)
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       lodash.uniq: 4.5.0
@@ -6788,6 +4909,10 @@ snapshots:
     dependencies:
       '@csstools/css-tokenizer': 3.0.4
 
+  '@csstools/css-syntax-patches-for-csstree@1.1.3(css-tree@3.1.0)':
+    optionalDependencies:
+      css-tree: 3.1.0
+
   '@csstools/css-tokenizer@3.0.4': {}
 
   '@csstools/media-query-list-parser@4.0.3(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
@@ -6803,9 +4928,9 @@ snapshots:
 
   '@dual-bundle/import-meta-resolve@4.2.1': {}
 
-  '@element-plus/icons-vue@2.3.2(vue@3.5.22(typescript@5.6.3))':
+  '@element-plus/icons-vue@2.3.2(vue@3.5.22(typescript@5.9.3))':
     dependencies:
-      vue: 3.5.22(typescript@5.6.3)
+      vue: 3.5.22(typescript@5.9.3)
 
   '@esbuild/aix-ppc64@0.25.10':
     optional: true
@@ -6929,6 +5054,25 @@ snapshots:
       '@eslint/core': 0.15.2
       levn: 0.4.1
 
+  '@fast-csv/format@4.3.5':
+    dependencies:
+      '@types/node': 14.18.63
+      lodash.escaperegexp: 4.1.2
+      lodash.isboolean: 3.0.3
+      lodash.isequal: 4.5.0
+      lodash.isfunction: 3.0.9
+      lodash.isnil: 4.0.0
+
+  '@fast-csv/parse@4.3.6':
+    dependencies:
+      '@types/node': 14.18.63
+      lodash.escaperegexp: 4.1.2
+      lodash.groupby: 4.6.0
+      lodash.isfunction: 3.0.9
+      lodash.isnil: 4.0.0
+      lodash.isundefined: 3.0.1
+      lodash.uniq: 4.5.0
+
   '@floating-ui/core@1.7.3':
     dependencies:
       '@floating-ui/utils': 0.2.10
@@ -6953,22 +5097,50 @@ snapshots:
 
   '@iconify/types@2.0.0': {}
 
-  '@iconify/vue@5.0.0(vue@3.5.22(typescript@5.6.3))':
+  '@iconify/utils@2.3.0':
+    dependencies:
+      '@antfu/install-pkg': 1.1.0
+      '@antfu/utils': 8.1.1
+      '@iconify/types': 2.0.0
+      debug: 4.4.3
+      globals: 15.15.0
+      kolorist: 1.8.0
+      local-pkg: 1.1.2
+      mlly: 1.8.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@iconify/vue@5.0.0(vue@3.5.22(typescript@5.9.3))':
     dependencies:
       '@iconify/types': 2.0.0
-      vue: 3.5.22(typescript@5.6.3)
+      vue: 3.5.22(typescript@5.9.3)
 
-  '@intlify/core-base@9.14.5':
+  '@intlify/core-base@11.4.0':
     dependencies:
-      '@intlify/message-compiler': 9.14.5
-      '@intlify/shared': 9.14.5
+      '@intlify/devtools-types': 11.4.0
+      '@intlify/message-compiler': 11.4.0
+      '@intlify/shared': 11.4.0
 
-  '@intlify/message-compiler@9.14.5':
+  '@intlify/devtools-types@11.4.0':
     dependencies:
-      '@intlify/shared': 9.14.5
+      '@intlify/core-base': 11.4.0
+      '@intlify/shared': 11.4.0
+
+  '@intlify/message-compiler@11.4.0':
+    dependencies:
+      '@intlify/shared': 11.4.0
       source-map-js: 1.2.1
 
-  '@intlify/shared@9.14.5': {}
+  '@intlify/shared@11.4.0': {}
+
+  '@isaacs/cliui@8.0.2':
+    dependencies:
+      string-width: 5.1.2
+      string-width-cjs: string-width@4.2.3
+      strip-ansi: 7.1.2
+      strip-ansi-cjs: strip-ansi@6.0.1
+      wrap-ansi: 8.1.0
+      wrap-ansi-cjs: wrap-ansi@7.0.0
 
   '@isaacs/fs-minipass@4.0.1':
     dependencies:
@@ -6998,9 +5170,11 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
-  '@keyv/bigmap@1.0.2':
+  '@keyv/bigmap@1.3.1(keyv@5.6.0)':
     dependencies:
-      hookified: 1.12.1
+      hashery: 1.5.1
+      hookified: 1.15.1
+      keyv: 5.6.0
 
   '@keyv/serialize@1.1.1': {}
 
@@ -7016,6 +5190,8 @@ snapshots:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.19.1
 
+  '@one-ini/wasm@0.1.1': {}
+
   '@parcel/watcher-android-arm64@2.5.1':
     optional: true
 
@@ -7077,6 +5253,9 @@ snapshots:
       '@parcel/watcher-win32-x64': 2.5.1
     optional: true
 
+  '@pkgjs/parseargs@0.11.0':
+    optional: true
+
   '@pkgr/core@0.2.9': {}
 
   '@polka/url@1.0.0-next.29': {}
@@ -7236,67 +5415,105 @@ snapshots:
 
   '@transloadit/prettier-bytes@0.0.7': {}
 
+  '@types/codemirror@5.60.17':
+    dependencies:
+      '@types/tern': 0.23.9
+
   '@types/conventional-commits-parser@5.0.1':
     dependencies:
       '@types/node': 24.8.1
 
+  '@types/dagre@0.7.54': {}
+
+  '@types/dompurify@3.2.0':
+    dependencies:
+      dompurify: 3.4.2
+
   '@types/estree@1.0.8': {}
 
   '@types/event-emitter@0.3.5': {}
 
+  '@types/file-saver@2.0.7': {}
+
   '@types/json-schema@7.0.15': {}
 
+  '@types/linkify-it@5.0.0': {}
+
   '@types/lodash-es@4.17.12':
     dependencies:
       '@types/lodash': 4.17.20
 
   '@types/lodash@4.17.20': {}
 
+  '@types/markdown-it@14.1.2':
+    dependencies:
+      '@types/linkify-it': 5.0.0
+      '@types/mdurl': 2.0.0
+
+  '@types/mdurl@2.0.0': {}
+
+  '@types/node@14.18.63': {}
+
   '@types/node@24.8.1':
     dependencies:
       undici-types: 7.14.0
 
+  '@types/nprogress@0.2.3': {}
+
+  '@types/path-browserify@1.0.3': {}
+
+  '@types/qs@6.15.0': {}
+
   '@types/sortablejs@1.15.8': {}
 
+  '@types/tern@0.23.9':
+    dependencies:
+      '@types/estree': 1.0.8
+
+  '@types/trusted-types@2.0.7':
+    optional: true
+
   '@types/web-bluetooth@0.0.16': {}
 
+  '@types/web-bluetooth@0.0.20': {}
+
   '@types/web-bluetooth@0.0.21': {}
 
-  '@typescript-eslint/eslint-plugin@8.44.1(@typescript-eslint/parser@8.44.1(eslint@9.36.0(jiti@2.6.0))(typescript@5.6.3))(eslint@9.36.0(jiti@2.6.0))(typescript@5.6.3)':
+  '@typescript-eslint/eslint-plugin@8.44.1(@typescript-eslint/parser@8.44.1(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.3))(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.1
-      '@typescript-eslint/parser': 8.44.1(eslint@9.36.0(jiti@2.6.0))(typescript@5.6.3)
+      '@typescript-eslint/parser': 8.44.1(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.3)
       '@typescript-eslint/scope-manager': 8.44.1
-      '@typescript-eslint/type-utils': 8.44.1(eslint@9.36.0(jiti@2.6.0))(typescript@5.6.3)
-      '@typescript-eslint/utils': 8.44.1(eslint@9.36.0(jiti@2.6.0))(typescript@5.6.3)
+      '@typescript-eslint/type-utils': 8.44.1(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.44.1(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.3)
       '@typescript-eslint/visitor-keys': 8.44.1
       eslint: 9.36.0(jiti@2.6.0)
       graphemer: 1.4.0
       ignore: 7.0.5
       natural-compare: 1.4.0
-      ts-api-utils: 2.1.0(typescript@5.6.3)
-      typescript: 5.6.3
+      ts-api-utils: 2.1.0(typescript@5.9.3)
+      typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.44.1(eslint@9.36.0(jiti@2.6.0))(typescript@5.6.3)':
+  '@typescript-eslint/parser@8.44.1(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/scope-manager': 8.44.1
       '@typescript-eslint/types': 8.44.1
-      '@typescript-eslint/typescript-estree': 8.44.1(typescript@5.6.3)
+      '@typescript-eslint/typescript-estree': 8.44.1(typescript@5.9.3)
       '@typescript-eslint/visitor-keys': 8.44.1
       debug: 4.4.3
       eslint: 9.36.0(jiti@2.6.0)
-      typescript: 5.6.3
+      typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/project-service@8.44.1(typescript@5.6.3)':
+  '@typescript-eslint/project-service@8.44.1(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/tsconfig-utils': 8.44.1(typescript@5.6.3)
+      '@typescript-eslint/tsconfig-utils': 8.44.1(typescript@5.9.3)
       '@typescript-eslint/types': 8.44.1
       debug: 4.4.3
-      typescript: 5.6.3
+      typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
@@ -7305,28 +5522,28 @@ snapshots:
       '@typescript-eslint/types': 8.44.1
       '@typescript-eslint/visitor-keys': 8.44.1
 
-  '@typescript-eslint/tsconfig-utils@8.44.1(typescript@5.6.3)':
+  '@typescript-eslint/tsconfig-utils@8.44.1(typescript@5.9.3)':
     dependencies:
-      typescript: 5.6.3
+      typescript: 5.9.3
 
-  '@typescript-eslint/type-utils@8.44.1(eslint@9.36.0(jiti@2.6.0))(typescript@5.6.3)':
+  '@typescript-eslint/type-utils@8.44.1(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/types': 8.44.1
-      '@typescript-eslint/typescript-estree': 8.44.1(typescript@5.6.3)
-      '@typescript-eslint/utils': 8.44.1(eslint@9.36.0(jiti@2.6.0))(typescript@5.6.3)
+      '@typescript-eslint/typescript-estree': 8.44.1(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.44.1(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.3)
       debug: 4.4.3
       eslint: 9.36.0(jiti@2.6.0)
-      ts-api-utils: 2.1.0(typescript@5.6.3)
-      typescript: 5.6.3
+      ts-api-utils: 2.1.0(typescript@5.9.3)
+      typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
   '@typescript-eslint/types@8.44.1': {}
 
-  '@typescript-eslint/typescript-estree@8.44.1(typescript@5.6.3)':
+  '@typescript-eslint/typescript-estree@8.44.1(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/project-service': 8.44.1(typescript@5.6.3)
-      '@typescript-eslint/tsconfig-utils': 8.44.1(typescript@5.6.3)
+      '@typescript-eslint/project-service': 8.44.1(typescript@5.9.3)
+      '@typescript-eslint/tsconfig-utils': 8.44.1(typescript@5.9.3)
       '@typescript-eslint/types': 8.44.1
       '@typescript-eslint/visitor-keys': 8.44.1
       debug: 4.4.3
@@ -7334,19 +5551,19 @@ snapshots:
       is-glob: 4.0.3
       minimatch: 9.0.5
       semver: 7.7.2
-      ts-api-utils: 2.1.0(typescript@5.6.3)
-      typescript: 5.6.3
+      ts-api-utils: 2.1.0(typescript@5.9.3)
+      typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.44.1(eslint@9.36.0(jiti@2.6.0))(typescript@5.6.3)':
+  '@typescript-eslint/utils@8.44.1(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.3)':
     dependencies:
       '@eslint-community/eslint-utils': 4.9.0(eslint@9.36.0(jiti@2.6.0))
       '@typescript-eslint/scope-manager': 8.44.1
       '@typescript-eslint/types': 8.44.1
-      '@typescript-eslint/typescript-estree': 8.44.1(typescript@5.6.3)
+      '@typescript-eslint/typescript-estree': 8.44.1(typescript@5.9.3)
       eslint: 9.36.0(jiti@2.6.0)
-      typescript: 5.6.3
+      typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
@@ -7384,24 +5601,52 @@ snapshots:
       '@uppy/utils': 4.1.3
       nanoid: 3.3.11
 
-  '@vitejs/plugin-vue@6.0.1(vite@7.1.7(@types/node@24.8.1)(jiti@2.6.0)(lightningcss@1.30.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))(vue@3.5.22(typescript@5.6.3))':
+  '@vitejs/plugin-vue@6.0.1(vite@7.1.7(@types/node@24.8.1)(jiti@2.6.0)(lightningcss@1.30.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))':
     dependencies:
       '@rolldown/pluginutils': 1.0.0-beta.29
       vite: 7.1.7(@types/node@24.8.1)(jiti@2.6.0)(lightningcss@1.30.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1)
-      vue: 3.5.22(typescript@5.6.3)
+      vue: 3.5.22(typescript@5.9.3)
 
-  '@volar/language-core@2.4.23':
+  '@volar/language-core@2.4.15':
     dependencies:
-      '@volar/source-map': 2.4.23
+      '@volar/source-map': 2.4.15
 
-  '@volar/source-map@2.4.23': {}
+  '@volar/source-map@2.4.15': {}
 
-  '@volar/typescript@2.4.23':
+  '@volar/typescript@2.4.15':
     dependencies:
-      '@volar/language-core': 2.4.23
+      '@volar/language-core': 2.4.15
       path-browserify: 1.0.1
       vscode-uri: 3.1.0
 
+  '@vue-flow/background@1.3.2(@vue-flow/core@1.48.2(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))':
+    dependencies:
+      '@vue-flow/core': 1.48.2(vue@3.5.22(typescript@5.9.3))
+      vue: 3.5.22(typescript@5.9.3)
+
+  '@vue-flow/controls@1.1.3(@vue-flow/core@1.48.2(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))':
+    dependencies:
+      '@vue-flow/core': 1.48.2(vue@3.5.22(typescript@5.9.3))
+      vue: 3.5.22(typescript@5.9.3)
+
+  '@vue-flow/core@1.48.2(vue@3.5.22(typescript@5.9.3))':
+    dependencies:
+      '@vueuse/core': 10.11.1(vue@3.5.22(typescript@5.9.3))
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-zoom: 3.0.0
+      vue: 3.5.22(typescript@5.9.3)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+
+  '@vue-flow/minimap@1.5.4(@vue-flow/core@1.48.2(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))':
+    dependencies:
+      '@vue-flow/core': 1.48.2(vue@3.5.22(typescript@5.9.3))
+      d3-selection: 3.0.0
+      d3-zoom: 3.0.0
+      vue: 3.5.22(typescript@5.9.3)
+
   '@vue/babel-helper-vue-transform-on@1.5.0': {}
 
   '@vue/babel-plugin-jsx@1.5.0(@babel/core@7.28.4)':
@@ -7472,7 +5717,7 @@ snapshots:
     dependencies:
       '@vue/devtools-kit': 7.7.7
 
-  '@vue/devtools-core@7.7.7(vite@7.1.7(@types/node@24.8.1)(jiti@2.6.0)(lightningcss@1.30.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))(vue@3.5.22(typescript@5.6.3))':
+  '@vue/devtools-core@7.7.7(vite@7.1.7(@types/node@24.8.1)(jiti@2.6.0)(lightningcss@1.30.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))':
     dependencies:
       '@vue/devtools-kit': 7.7.7
       '@vue/devtools-shared': 7.7.7
@@ -7480,7 +5725,7 @@ snapshots:
       nanoid: 5.1.6
       pathe: 2.0.3
       vite-hot-client: 2.1.0(vite@7.1.7(@types/node@24.8.1)(jiti@2.6.0)(lightningcss@1.30.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))
-      vue: 3.5.22(typescript@5.6.3)
+      vue: 3.5.22(typescript@5.9.3)
     transitivePeerDependencies:
       - vite
 
@@ -7498,18 +5743,18 @@ snapshots:
     dependencies:
       rfdc: 1.4.1
 
-  '@vue/language-core@2.1.10(typescript@5.6.3)':
+  '@vue/language-core@2.2.12(typescript@5.9.3)':
     dependencies:
-      '@volar/language-core': 2.4.23
+      '@volar/language-core': 2.4.15
       '@vue/compiler-dom': 3.5.22
       '@vue/compiler-vue2': 2.7.16
       '@vue/shared': 3.5.22
-      alien-signals: 0.2.2
+      alien-signals: 1.0.13
       minimatch: 9.0.5
       muggle-string: 0.4.1
       path-browserify: 1.0.1
     optionalDependencies:
-      typescript: 5.6.3
+      typescript: 5.9.3
 
   '@vue/reactivity@3.5.22':
     dependencies:
@@ -7527,152 +5772,169 @@ snapshots:
       '@vue/shared': 3.5.22
       csstype: 3.1.3
 
-  '@vue/server-renderer@3.5.22(vue@3.5.22(typescript@5.6.3))':
+  '@vue/server-renderer@3.5.22(vue@3.5.22(typescript@5.9.3))':
     dependencies:
       '@vue/compiler-ssr': 3.5.22
       '@vue/shared': 3.5.22
-      vue: 3.5.22(typescript@5.6.3)
+      vue: 3.5.22(typescript@5.9.3)
 
   '@vue/shared@3.5.22': {}
 
-  '@vueuse/core@13.9.0(vue@3.5.22(typescript@5.6.3))':
+  '@vueuse/core@10.11.1(vue@3.5.22(typescript@5.9.3))':
     dependencies:
-      '@types/web-bluetooth': 0.0.21
-      '@vueuse/metadata': 13.9.0
-      '@vueuse/shared': 13.9.0(vue@3.5.22(typescript@5.6.3))
-      vue: 3.5.22(typescript@5.6.3)
-
-  '@vueuse/core@9.13.0(vue@3.5.22(typescript@5.6.3))':
-    dependencies:
-      '@types/web-bluetooth': 0.0.16
-      '@vueuse/metadata': 9.13.0
-      '@vueuse/shared': 9.13.0(vue@3.5.22(typescript@5.6.3))
-      vue-demi: 0.14.10(vue@3.5.22(typescript@5.6.3))
+      '@types/web-bluetooth': 0.0.20
+      '@vueuse/metadata': 10.11.1
+      '@vueuse/shared': 10.11.1(vue@3.5.22(typescript@5.9.3))
+      vue-demi: 0.14.10(vue@3.5.22(typescript@5.9.3))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
 
+  '@vueuse/core@13.9.0(vue@3.5.22(typescript@5.9.3))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.21
+      '@vueuse/metadata': 13.9.0
+      '@vueuse/shared': 13.9.0(vue@3.5.22(typescript@5.9.3))
+      vue: 3.5.22(typescript@5.9.3)
+
+  '@vueuse/core@9.13.0(vue@3.5.22(typescript@5.9.3))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.16
+      '@vueuse/metadata': 9.13.0
+      '@vueuse/shared': 9.13.0(vue@3.5.22(typescript@5.9.3))
+      vue-demi: 0.14.10(vue@3.5.22(typescript@5.9.3))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
+  '@vueuse/metadata@10.11.1': {}
+
   '@vueuse/metadata@13.9.0': {}
 
   '@vueuse/metadata@9.13.0': {}
 
-  '@vueuse/shared@13.9.0(vue@3.5.22(typescript@5.6.3))':
+  '@vueuse/shared@10.11.1(vue@3.5.22(typescript@5.9.3))':
     dependencies:
-      vue: 3.5.22(typescript@5.6.3)
-
-  '@vueuse/shared@9.13.0(vue@3.5.22(typescript@5.6.3))':
-    dependencies:
-      vue-demi: 0.14.10(vue@3.5.22(typescript@5.6.3))
+      vue-demi: 0.14.10(vue@3.5.22(typescript@5.9.3))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
 
-  '@wangeditor/basic-modules@1.1.7(@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.11)(slate@0.72.8)(snabbdom@3.6.2))(dom7@3.0.0)(lodash.throttle@4.1.1)(nanoid@3.3.11)(slate@0.72.8)(snabbdom@3.6.2)':
+  '@vueuse/shared@13.9.0(vue@3.5.22(typescript@5.9.3))':
     dependencies:
-      '@wangeditor/core': 1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.11)(slate@0.72.8)(snabbdom@3.6.2)
-      dom7: 3.0.0
+      vue: 3.5.22(typescript@5.9.3)
+
+  '@vueuse/shared@9.13.0(vue@3.5.22(typescript@5.9.3))':
+    dependencies:
+      vue-demi: 0.14.10(vue@3.5.22(typescript@5.9.3))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
+  '@wangeditor-next/basic-modules@2.0.0(@wangeditor-next/core@1.8.0(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.6)(slate@0.123.0)(snabbdom@3.6.2))(dom7@4.0.6)(lodash.throttle@4.1.1)(nanoid@5.1.6)(slate@0.123.0)(snabbdom@3.6.2)':
+    dependencies:
+      '@wangeditor-next/core': 1.8.0(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.6)(slate@0.123.0)(snabbdom@3.6.2)
+      dom7: 4.0.6
       is-url: 1.2.4
       lodash.throttle: 4.1.1
-      nanoid: 3.3.11
-      slate: 0.72.8
+      nanoid: 5.1.6
+      slate: 0.123.0
       snabbdom: 3.6.2
 
-  '@wangeditor/code-highlight@1.0.3(@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.11)(slate@0.72.8)(snabbdom@3.6.2))(dom7@3.0.0)(slate@0.72.8)(snabbdom@3.6.2)':
+  '@wangeditor-next/code-highlight@2.0.0(@wangeditor-next/core@1.8.0(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.6)(slate@0.123.0)(snabbdom@3.6.2))(dom7@4.0.6)(slate@0.123.0)(snabbdom@3.6.2)':
     dependencies:
-      '@wangeditor/core': 1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.11)(slate@0.72.8)(snabbdom@3.6.2)
-      dom7: 3.0.0
+      '@wangeditor-next/core': 1.8.0(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.6)(slate@0.123.0)(snabbdom@3.6.2)
+      dom7: 4.0.6
       prismjs: 1.30.0
-      slate: 0.72.8
+      slate: 0.123.0
       snabbdom: 3.6.2
 
-  '@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.11)(slate@0.72.8)(snabbdom@3.6.2)':
+  '@wangeditor-next/core@1.8.0(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.6)(slate@0.123.0)(snabbdom@3.6.2)':
     dependencies:
       '@types/event-emitter': 0.3.5
       '@uppy/core': 2.3.4
       '@uppy/xhr-upload': 2.1.3(@uppy/core@2.3.4)
-      dom7: 3.0.0
+      dom7: 4.0.6
       event-emitter: 0.3.5
-      html-void-elements: 2.0.1
-      i18next: 20.6.1
+      html-void-elements: 3.0.0
+      i18next: 23.16.8
       is-hotkey: 0.2.0
       lodash.camelcase: 4.3.0
       lodash.clonedeep: 4.5.0
       lodash.debounce: 4.0.8
       lodash.foreach: 4.5.0
-      lodash.isequal: 4.5.0
       lodash.throttle: 4.1.1
       lodash.toarray: 4.4.0
-      nanoid: 3.3.11
-      scroll-into-view-if-needed: 2.2.31
-      slate: 0.72.8
-      slate-history: 0.66.0(slate@0.72.8)
+      nanoid: 5.1.6
+      scroll-into-view-if-needed: 3.1.0
+      slate: 0.123.0
+      slate-history: 0.115.0(slate@0.123.0)
       snabbdom: 3.6.2
 
-  '@wangeditor/editor-for-vue@5.1.12(@wangeditor/editor@5.1.23)(vue@3.5.22(typescript@5.6.3))':
+  '@wangeditor-next/editor-for-vue@5.1.14(@wangeditor-next/editor@5.7.0)(vue@3.5.22(typescript@5.9.3))':
     dependencies:
-      '@wangeditor/editor': 5.1.23
-      vue: 3.5.22(typescript@5.6.3)
+      '@wangeditor-next/editor': 5.7.0
+      vue: 3.5.22(typescript@5.9.3)
 
-  '@wangeditor/editor@5.1.23':
+  '@wangeditor-next/editor@5.7.0':
     dependencies:
       '@uppy/core': 2.3.4
       '@uppy/xhr-upload': 2.1.3(@uppy/core@2.3.4)
-      '@wangeditor/basic-modules': 1.1.7(@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.11)(slate@0.72.8)(snabbdom@3.6.2))(dom7@3.0.0)(lodash.throttle@4.1.1)(nanoid@3.3.11)(slate@0.72.8)(snabbdom@3.6.2)
-      '@wangeditor/code-highlight': 1.0.3(@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.11)(slate@0.72.8)(snabbdom@3.6.2))(dom7@3.0.0)(slate@0.72.8)(snabbdom@3.6.2)
-      '@wangeditor/core': 1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.11)(slate@0.72.8)(snabbdom@3.6.2)
-      '@wangeditor/list-module': 1.0.5(@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.11)(slate@0.72.8)(snabbdom@3.6.2))(dom7@3.0.0)(slate@0.72.8)(snabbdom@3.6.2)
-      '@wangeditor/table-module': 1.1.4(@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.11)(slate@0.72.8)(snabbdom@3.6.2))(dom7@3.0.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(nanoid@3.3.11)(slate@0.72.8)(snabbdom@3.6.2)
-      '@wangeditor/upload-image-module': 1.0.2(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(@wangeditor/basic-modules@1.1.7(@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.11)(slate@0.72.8)(snabbdom@3.6.2))(dom7@3.0.0)(lodash.throttle@4.1.1)(nanoid@3.3.11)(slate@0.72.8)(snabbdom@3.6.2))(@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.11)(slate@0.72.8)(snabbdom@3.6.2))(dom7@3.0.0)(lodash.foreach@4.5.0)(slate@0.72.8)(snabbdom@3.6.2)
-      '@wangeditor/video-module': 1.1.4(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.11)(slate@0.72.8)(snabbdom@3.6.2))(dom7@3.0.0)(nanoid@3.3.11)(slate@0.72.8)(snabbdom@3.6.2)
-      dom7: 3.0.0
+      '@wangeditor-next/basic-modules': 2.0.0(@wangeditor-next/core@1.8.0(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.6)(slate@0.123.0)(snabbdom@3.6.2))(dom7@4.0.6)(lodash.throttle@4.1.1)(nanoid@5.1.6)(slate@0.123.0)(snabbdom@3.6.2)
+      '@wangeditor-next/code-highlight': 2.0.0(@wangeditor-next/core@1.8.0(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.6)(slate@0.123.0)(snabbdom@3.6.2))(dom7@4.0.6)(slate@0.123.0)(snabbdom@3.6.2)
+      '@wangeditor-next/core': 1.8.0(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.6)(slate@0.123.0)(snabbdom@3.6.2)
+      '@wangeditor-next/list-module': 2.0.0(@wangeditor-next/core@1.8.0(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.6)(slate@0.123.0)(snabbdom@3.6.2))(dom7@4.0.6)(slate@0.123.0)(snabbdom@3.6.2)
+      '@wangeditor-next/table-module': 2.0.0(@wangeditor-next/core@1.8.0(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.6)(slate@0.123.0)(snabbdom@3.6.2))(dom7@4.0.6)(lodash.debounce@4.0.8)(lodash.throttle@4.1.1)(nanoid@5.1.6)(slate@0.123.0)(snabbdom@3.6.2)
+      '@wangeditor-next/upload-image-module': 2.0.0(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(@wangeditor-next/basic-modules@2.0.0(@wangeditor-next/core@1.8.0(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.6)(slate@0.123.0)(snabbdom@3.6.2))(dom7@4.0.6)(lodash.throttle@4.1.1)(nanoid@5.1.6)(slate@0.123.0)(snabbdom@3.6.2))(@wangeditor-next/core@1.8.0(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.6)(slate@0.123.0)(snabbdom@3.6.2))(dom7@4.0.6)(lodash.foreach@4.5.0)(slate@0.123.0)(snabbdom@3.6.2)
+      '@wangeditor-next/video-module': 2.0.0(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(@wangeditor-next/core@1.8.0(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.6)(slate@0.123.0)(snabbdom@3.6.2))(dom7@4.0.6)(nanoid@5.1.6)(slate@0.123.0)(snabbdom@3.6.2)
+      dom7: 4.0.6
       is-hotkey: 0.2.0
       lodash.camelcase: 4.3.0
       lodash.clonedeep: 4.5.0
       lodash.debounce: 4.0.8
       lodash.foreach: 4.5.0
-      lodash.isequal: 4.5.0
       lodash.throttle: 4.1.1
       lodash.toarray: 4.4.0
-      nanoid: 3.3.11
-      slate: 0.72.8
+      nanoid: 5.1.6
+      slate: 0.123.0
       snabbdom: 3.6.2
 
-  '@wangeditor/list-module@1.0.5(@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.11)(slate@0.72.8)(snabbdom@3.6.2))(dom7@3.0.0)(slate@0.72.8)(snabbdom@3.6.2)':
+  '@wangeditor-next/list-module@2.0.0(@wangeditor-next/core@1.8.0(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.6)(slate@0.123.0)(snabbdom@3.6.2))(dom7@4.0.6)(slate@0.123.0)(snabbdom@3.6.2)':
     dependencies:
-      '@wangeditor/core': 1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.11)(slate@0.72.8)(snabbdom@3.6.2)
-      dom7: 3.0.0
-      slate: 0.72.8
+      '@wangeditor-next/core': 1.8.0(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.6)(slate@0.123.0)(snabbdom@3.6.2)
+      dom7: 4.0.6
+      slate: 0.123.0
       snabbdom: 3.6.2
 
-  '@wangeditor/table-module@1.1.4(@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.11)(slate@0.72.8)(snabbdom@3.6.2))(dom7@3.0.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(nanoid@3.3.11)(slate@0.72.8)(snabbdom@3.6.2)':
+  '@wangeditor-next/table-module@2.0.0(@wangeditor-next/core@1.8.0(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.6)(slate@0.123.0)(snabbdom@3.6.2))(dom7@4.0.6)(lodash.debounce@4.0.8)(lodash.throttle@4.1.1)(nanoid@5.1.6)(slate@0.123.0)(snabbdom@3.6.2)':
     dependencies:
-      '@wangeditor/core': 1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.11)(slate@0.72.8)(snabbdom@3.6.2)
-      dom7: 3.0.0
-      lodash.isequal: 4.5.0
+      '@wangeditor-next/core': 1.8.0(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.6)(slate@0.123.0)(snabbdom@3.6.2)
+      dom7: 4.0.6
+      lodash.debounce: 4.0.8
       lodash.throttle: 4.1.1
-      nanoid: 3.3.11
-      slate: 0.72.8
+      nanoid: 5.1.6
+      slate: 0.123.0
       snabbdom: 3.6.2
 
-  '@wangeditor/upload-image-module@1.0.2(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(@wangeditor/basic-modules@1.1.7(@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.11)(slate@0.72.8)(snabbdom@3.6.2))(dom7@3.0.0)(lodash.throttle@4.1.1)(nanoid@3.3.11)(slate@0.72.8)(snabbdom@3.6.2))(@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.11)(slate@0.72.8)(snabbdom@3.6.2))(dom7@3.0.0)(lodash.foreach@4.5.0)(slate@0.72.8)(snabbdom@3.6.2)':
+  '@wangeditor-next/upload-image-module@2.0.0(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(@wangeditor-next/basic-modules@2.0.0(@wangeditor-next/core@1.8.0(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.6)(slate@0.123.0)(snabbdom@3.6.2))(dom7@4.0.6)(lodash.throttle@4.1.1)(nanoid@5.1.6)(slate@0.123.0)(snabbdom@3.6.2))(@wangeditor-next/core@1.8.0(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.6)(slate@0.123.0)(snabbdom@3.6.2))(dom7@4.0.6)(lodash.foreach@4.5.0)(slate@0.123.0)(snabbdom@3.6.2)':
     dependencies:
       '@uppy/core': 2.3.4
       '@uppy/xhr-upload': 2.1.3(@uppy/core@2.3.4)
-      '@wangeditor/basic-modules': 1.1.7(@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.11)(slate@0.72.8)(snabbdom@3.6.2))(dom7@3.0.0)(lodash.throttle@4.1.1)(nanoid@3.3.11)(slate@0.72.8)(snabbdom@3.6.2)
-      '@wangeditor/core': 1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.11)(slate@0.72.8)(snabbdom@3.6.2)
-      dom7: 3.0.0
+      '@wangeditor-next/basic-modules': 2.0.0(@wangeditor-next/core@1.8.0(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.6)(slate@0.123.0)(snabbdom@3.6.2))(dom7@4.0.6)(lodash.throttle@4.1.1)(nanoid@5.1.6)(slate@0.123.0)(snabbdom@3.6.2)
+      '@wangeditor-next/core': 1.8.0(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.6)(slate@0.123.0)(snabbdom@3.6.2)
+      dom7: 4.0.6
       lodash.foreach: 4.5.0
-      slate: 0.72.8
+      slate: 0.123.0
       snabbdom: 3.6.2
 
-  '@wangeditor/video-module@1.1.4(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.11)(slate@0.72.8)(snabbdom@3.6.2))(dom7@3.0.0)(nanoid@3.3.11)(slate@0.72.8)(snabbdom@3.6.2)':
+  '@wangeditor-next/video-module@2.0.0(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(@wangeditor-next/core@1.8.0(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.6)(slate@0.123.0)(snabbdom@3.6.2))(dom7@4.0.6)(nanoid@5.1.6)(slate@0.123.0)(snabbdom@3.6.2)':
     dependencies:
       '@uppy/core': 2.3.4
       '@uppy/xhr-upload': 2.1.3(@uppy/core@2.3.4)
-      '@wangeditor/core': 1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.11)(slate@0.72.8)(snabbdom@3.6.2)
-      dom7: 3.0.0
-      nanoid: 3.3.11
-      slate: 0.72.8
+      '@wangeditor-next/core': 1.8.0(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@4.0.6)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@5.1.6)(slate@0.123.0)(snabbdom@3.6.2)
+      dom7: 4.0.6
+      nanoid: 5.1.6
+      slate: 0.123.0
       snabbdom: 3.6.2
 
   JSONStream@1.3.5:
@@ -7680,6 +5942,8 @@ snapshots:
       jsonparse: 1.3.1
       through: 2.3.8
 
+  abbrev@2.0.0: {}
+
   acorn-jsx@5.3.2(acorn@8.15.0):
     dependencies:
       acorn: 8.15.0
@@ -7702,7 +5966,9 @@ snapshots:
       json-schema-traverse: 1.0.0
       require-from-string: 2.0.2
 
-  alien-signals@0.2.2: {}
+  alien-signals@1.0.13: {}
+
+  animate.css@4.1.1: {}
 
   ansi-escapes@4.3.2:
     dependencies:
@@ -7731,6 +5997,42 @@ snapshots:
       normalize-path: 3.0.0
       picomatch: 2.3.1
 
+  archiver-utils@2.1.0:
+    dependencies:
+      glob: 7.2.3
+      graceful-fs: 4.2.11
+      lazystream: 1.0.1
+      lodash.defaults: 4.2.0
+      lodash.difference: 4.5.0
+      lodash.flatten: 4.4.0
+      lodash.isplainobject: 4.0.6
+      lodash.union: 4.6.0
+      normalize-path: 3.0.0
+      readable-stream: 2.3.8
+
+  archiver-utils@3.0.4:
+    dependencies:
+      glob: 7.2.3
+      graceful-fs: 4.2.11
+      lazystream: 1.0.1
+      lodash.defaults: 4.2.0
+      lodash.difference: 4.5.0
+      lodash.flatten: 4.4.0
+      lodash.isplainobject: 4.0.6
+      lodash.union: 4.6.0
+      normalize-path: 3.0.0
+      readable-stream: 3.6.2
+
+  archiver@5.3.2:
+    dependencies:
+      archiver-utils: 2.1.0
+      async: 3.2.6
+      buffer-crc32: 0.2.13
+      readable-stream: 3.6.2
+      readdir-glob: 1.1.3
+      tar-stream: 2.2.0
+      zip-stream: 4.1.1
+
   argparse@2.0.1: {}
 
   array-ify@1.0.0: {}
@@ -7741,10 +6043,21 @@ snapshots:
 
   async-validator@4.2.5: {}
 
+  async@3.2.6: {}
+
   asynckit@0.4.0: {}
 
   at-least-node@1.0.0: {}
 
+  autoprefixer@10.5.0(postcss@8.5.6):
+    dependencies:
+      browserslist: 4.28.2
+      caniuse-lite: 1.0.30001791
+      fraction.js: 5.3.4
+      picocolors: 1.1.1
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
+
   axios@1.12.2:
     dependencies:
       follow-redirects: 1.15.11
@@ -7759,10 +6072,19 @@ snapshots:
 
   base64-js@1.5.1: {}
 
+  baseline-browser-mapping@2.10.25: {}
+
   baseline-browser-mapping@2.8.8: {}
 
+  big-integer@1.6.52: {}
+
   binary-extensions@2.3.0: {}
 
+  binary@0.3.0:
+    dependencies:
+      buffers: 0.1.1
+      chainsaw: 0.1.0
+
   birpc@2.6.1: {}
 
   bl@4.1.0:
@@ -7771,6 +6093,8 @@ snapshots:
       inherits: 2.0.4
       readable-stream: 3.6.2
 
+  bluebird@3.4.7: {}
+
   boolbase@1.0.0: {}
 
   brace-expansion@1.1.12:
@@ -7794,24 +6118,38 @@ snapshots:
       node-releases: 2.0.21
       update-browserslist-db: 1.1.3(browserslist@4.26.2)
 
+  browserslist@4.28.2:
+    dependencies:
+      baseline-browser-mapping: 2.10.25
+      caniuse-lite: 1.0.30001791
+      electron-to-chromium: 1.5.348
+      node-releases: 2.0.38
+      update-browserslist-db: 1.2.3(browserslist@4.28.2)
+
+  buffer-crc32@0.2.13: {}
+
   buffer-from@1.1.2: {}
 
+  buffer-indexof-polyfill@1.0.2: {}
+
   buffer@5.7.1:
     dependencies:
       base64-js: 1.5.1
       ieee754: 1.2.1
 
+  buffers@0.1.1: {}
+
   bundle-name@4.1.0:
     dependencies:
       run-applescript: 7.1.0
 
-  cacheable@2.0.2:
+  cacheable@2.3.4:
     dependencies:
-      '@cacheable/memoize': 2.0.2
-      '@cacheable/memory': 2.0.2
-      '@cacheable/utils': 2.0.2
-      hookified: 1.12.1
-      keyv: 5.5.3
+      '@cacheable/memory': 2.0.8
+      '@cacheable/utils': 2.4.1
+      hookified: 1.15.1
+      keyv: 5.6.0
+      qified: 0.9.1
 
   cachedir@2.3.0: {}
 
@@ -7820,15 +6158,26 @@ snapshots:
       es-errors: 1.3.0
       function-bind: 1.1.2
 
+  call-bound@1.0.4:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      get-intrinsic: 1.3.0
+
   callsites@3.1.0: {}
 
   caniuse-lite@1.0.30001745: {}
 
+  caniuse-lite@1.0.30001791: {}
+
   cfb@1.2.2:
     dependencies:
       adler-32: 1.3.1
       crc-32: 1.2.2
 
+  chainsaw@0.1.0:
+    dependencies:
+      traverse: 0.3.9
+
   chalk@2.4.2:
     dependencies:
       ansi-styles: 3.2.1
@@ -7879,6 +6228,12 @@ snapshots:
 
   cli-width@3.0.0: {}
 
+  clipboard@2.0.11:
+    dependencies:
+      good-listener: 1.2.2
+      select: 1.1.2
+      tiny-emitter: 2.1.0
+
   cliui@8.0.1:
     dependencies:
       string-width: 4.2.3
@@ -7887,6 +6242,14 @@ snapshots:
 
   clone@1.0.4: {}
 
+  codemirror-editor-vue3@2.8.0(codemirror@5.65.21)(diff-match-patch@1.0.5)(vue@3.5.22(typescript@5.9.3)):
+    dependencies:
+      codemirror: 5.65.21
+      diff-match-patch: 1.0.5
+      vue: 3.5.22(typescript@5.9.3)
+
+  codemirror@5.65.21: {}
+
   codepage@1.15.0: {}
 
   color-convert@1.9.3:
@@ -7909,14 +6272,16 @@ snapshots:
     dependencies:
       delayed-stream: 1.0.0
 
+  commander@10.0.1: {}
+
   commander@13.1.0: {}
 
   commander@2.20.3: {}
 
-  commitizen@4.3.1(@types/node@24.8.1)(typescript@5.6.3):
+  commitizen@4.3.1(@types/node@24.8.1)(typescript@5.9.3):
     dependencies:
       cachedir: 2.3.0
-      cz-conventional-changelog: 3.3.0(@types/node@24.8.1)(typescript@5.6.3)
+      cz-conventional-changelog: 3.3.0(@types/node@24.8.1)(typescript@5.9.3)
       dedent: 0.7.0
       detect-indent: 6.1.0
       find-node-modules: 2.1.3
@@ -7938,7 +6303,14 @@ snapshots:
       array-ify: 1.0.0
       dot-prop: 5.3.0
 
-  compute-scroll-into-view@1.0.20: {}
+  compress-commons@4.1.2:
+    dependencies:
+      buffer-crc32: 0.2.13
+      crc32-stream: 4.0.3
+      normalize-path: 3.0.0
+      readable-stream: 3.6.2
+
+  compute-scroll-into-view@3.1.1: {}
 
   concat-map@0.0.1: {}
 
@@ -7946,6 +6318,11 @@ snapshots:
 
   confbox@0.2.2: {}
 
+  config-chain@1.1.13:
+    dependencies:
+      ini: 1.3.8
+      proto-list: 1.2.4
+
   conventional-changelog-angular@7.0.0:
     dependencies:
       compare-func: 2.0.0
@@ -7971,24 +6348,31 @@ snapshots:
 
   core-js@3.45.1: {}
 
-  cosmiconfig-typescript-loader@6.1.0(@types/node@24.8.1)(cosmiconfig@9.0.0(typescript@5.6.3))(typescript@5.6.3):
+  core-util-is@1.0.3: {}
+
+  cosmiconfig-typescript-loader@6.1.0(@types/node@24.8.1)(cosmiconfig@9.0.0(typescript@5.9.3))(typescript@5.9.3):
     dependencies:
       '@types/node': 24.8.1
-      cosmiconfig: 9.0.0(typescript@5.6.3)
+      cosmiconfig: 9.0.0(typescript@5.9.3)
       jiti: 2.6.0
-      typescript: 5.6.3
+      typescript: 5.9.3
 
-  cosmiconfig@9.0.0(typescript@5.6.3):
+  cosmiconfig@9.0.0(typescript@5.9.3):
     dependencies:
       env-paths: 2.2.1
       import-fresh: 3.3.1
       js-yaml: 4.1.0
       parse-json: 5.2.0
     optionalDependencies:
-      typescript: 5.6.3
+      typescript: 5.9.3
 
   crc-32@1.2.2: {}
 
+  crc32-stream@4.0.3:
+    dependencies:
+      crc-32: 1.2.2
+      readable-stream: 3.6.2
+
   cross-spawn@7.0.6:
     dependencies:
       path-key: 3.1.1
@@ -8008,27 +6392,68 @@ snapshots:
 
   csstype@3.1.3: {}
 
-  cz-conventional-changelog@3.3.0(@types/node@24.8.1)(typescript@5.6.3):
+  cz-conventional-changelog@3.3.0(@types/node@24.8.1)(typescript@5.9.3):
     dependencies:
       chalk: 2.4.2
-      commitizen: 4.3.1(@types/node@24.8.1)(typescript@5.6.3)
+      commitizen: 4.3.1(@types/node@24.8.1)(typescript@5.9.3)
       conventional-commit-types: 3.0.0
       lodash.map: 4.6.0
       longest: 2.0.1
       word-wrap: 1.2.5
     optionalDependencies:
-      '@commitlint/load': 20.0.0(@types/node@24.8.1)(typescript@5.6.3)
+      '@commitlint/load': 20.0.0(@types/node@24.8.1)(typescript@5.9.3)
     transitivePeerDependencies:
       - '@types/node'
       - typescript
 
   cz-git@1.12.0: {}
 
+  d3-color@3.1.0: {}
+
+  d3-dispatch@3.0.1: {}
+
+  d3-drag@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-selection: 3.0.0
+
+  d3-ease@3.0.1: {}
+
+  d3-interpolate@3.0.1:
+    dependencies:
+      d3-color: 3.1.0
+
+  d3-selection@3.0.0: {}
+
+  d3-timer@3.0.1: {}
+
+  d3-transition@3.0.1(d3-selection@3.0.0):
+    dependencies:
+      d3-color: 3.1.0
+      d3-dispatch: 3.0.1
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-timer: 3.0.1
+
+  d3-zoom@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+
   d@1.0.2:
     dependencies:
       es5-ext: 0.10.64
       type: 2.7.3
 
+  dagre@0.8.5:
+    dependencies:
+      graphlib: 2.1.8
+      lodash: 4.17.21
+
   danmu.js@1.1.13:
     dependencies:
       event-emitter: 0.3.5
@@ -8081,6 +6506,8 @@ snapshots:
 
   detect-libc@2.1.2: {}
 
+  diff-match-patch@1.0.5: {}
+
   dir-glob@3.0.1:
     dependencies:
       path-type: 4.0.0
@@ -8091,9 +6518,9 @@ snapshots:
       domhandler: 5.0.3
       entities: 4.5.0
 
-  dom7@3.0.0:
+  dom7@4.0.6:
     dependencies:
-      ssr-window: 3.0.0
+      ssr-window: 4.0.2
 
   domelementtype@2.3.0: {}
 
@@ -8101,6 +6528,10 @@ snapshots:
     dependencies:
       domelementtype: 2.3.0
 
+  dompurify@3.4.2:
+    optionalDependencies:
+      '@types/trusted-types': 2.0.7
+
   domutils@3.2.2:
     dependencies:
       dom-serializer: 2.0.0
@@ -8119,22 +6550,37 @@ snapshots:
       es-errors: 1.3.0
       gopd: 1.2.0
 
+  duplexer2@0.1.4:
+    dependencies:
+      readable-stream: 2.3.8
+
+  eastasianwidth@0.2.0: {}
+
   echarts@6.0.0:
     dependencies:
       tslib: 2.3.0
       zrender: 6.0.0
 
+  editorconfig@1.0.7:
+    dependencies:
+      '@one-ini/wasm': 0.1.1
+      commander: 10.0.1
+      minimatch: 9.0.5
+      semver: 7.7.2
+
   electron-to-chromium@1.5.227: {}
 
-  element-plus@2.11.4(vue@3.5.22(typescript@5.6.3)):
+  electron-to-chromium@1.5.348: {}
+
+  element-plus@2.11.4(vue@3.5.22(typescript@5.9.3)):
     dependencies:
       '@ctrl/tinycolor': 3.6.1
-      '@element-plus/icons-vue': 2.3.2(vue@3.5.22(typescript@5.6.3))
+      '@element-plus/icons-vue': 2.3.2(vue@3.5.22(typescript@5.9.3))
       '@floating-ui/dom': 1.7.4
       '@popperjs/core': '@sxzz/popperjs-es@2.11.7'
       '@types/lodash': 4.17.20
       '@types/lodash-es': 4.17.12
-      '@vueuse/core': 9.13.0(vue@3.5.22(typescript@5.6.3))
+      '@vueuse/core': 9.13.0(vue@3.5.22(typescript@5.9.3))
       async-validator: 4.2.5
       dayjs: 1.11.18
       escape-html: 1.0.3
@@ -8143,7 +6589,7 @@ snapshots:
       lodash-unified: 1.0.3(@types/lodash-es@4.17.12)(lodash-es@4.17.21)(lodash@4.17.21)
       memoize-one: 6.0.0
       normalize-wheel-es: 1.2.0
-      vue: 3.5.22(typescript@5.6.3)
+      vue: 3.5.22(typescript@5.9.3)
     transitivePeerDependencies:
       - '@vue/composition-api'
 
@@ -8151,6 +6597,12 @@ snapshots:
 
   emoji-regex@8.0.0: {}
 
+  emoji-regex@9.2.2: {}
+
+  end-of-stream@1.4.5:
+    dependencies:
+      once: 1.4.0
+
   enhanced-resolve@5.18.3:
     dependencies:
       graceful-fs: 4.2.11
@@ -8242,37 +6694,31 @@ snapshots:
 
   escape-string-regexp@5.0.0: {}
 
-  eslint-config-prettier@9.1.2(eslint@9.36.0(jiti@2.6.0)):
+  eslint-config-prettier@10.1.8(eslint@9.36.0(jiti@2.6.0)):
     dependencies:
       eslint: 9.36.0(jiti@2.6.0)
 
-  eslint-plugin-prettier@5.5.4(eslint-config-prettier@9.1.2(eslint@9.36.0(jiti@2.6.0)))(eslint@9.36.0(jiti@2.6.0))(prettier@3.6.2):
+  eslint-plugin-prettier@5.5.4(eslint-config-prettier@10.1.8(eslint@9.36.0(jiti@2.6.0)))(eslint@9.36.0(jiti@2.6.0))(prettier@3.6.2):
     dependencies:
       eslint: 9.36.0(jiti@2.6.0)
       prettier: 3.6.2
       prettier-linter-helpers: 1.0.0
       synckit: 0.11.11
     optionalDependencies:
-      eslint-config-prettier: 9.1.2(eslint@9.36.0(jiti@2.6.0))
+      eslint-config-prettier: 10.1.8(eslint@9.36.0(jiti@2.6.0))
 
-  eslint-plugin-vue@9.33.0(eslint@9.36.0(jiti@2.6.0)):
+  eslint-plugin-vue@10.9.0(@typescript-eslint/parser@8.44.1(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.3))(eslint@9.36.0(jiti@2.6.0))(vue-eslint-parser@10.4.0(eslint@9.36.0(jiti@2.6.0))):
     dependencies:
       '@eslint-community/eslint-utils': 4.9.0(eslint@9.36.0(jiti@2.6.0))
       eslint: 9.36.0(jiti@2.6.0)
-      globals: 13.24.0
       natural-compare: 1.4.0
       nth-check: 2.1.1
-      postcss-selector-parser: 6.1.2
+      postcss-selector-parser: 7.1.0
       semver: 7.7.2
-      vue-eslint-parser: 9.4.3(eslint@9.36.0(jiti@2.6.0))
+      vue-eslint-parser: 10.4.0(eslint@9.36.0(jiti@2.6.0))
       xml-name-validator: 4.0.0
-    transitivePeerDependencies:
-      - supports-color
-
-  eslint-scope@7.2.2:
-    dependencies:
-      esrecurse: 4.3.0
-      estraverse: 5.3.0
+    optionalDependencies:
+      '@typescript-eslint/parser': 8.44.1(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.3)
 
   eslint-scope@8.4.0:
     dependencies:
@@ -8338,12 +6784,6 @@ snapshots:
       acorn-jsx: 5.3.2(acorn@8.15.0)
       eslint-visitor-keys: 4.2.1
 
-  espree@9.6.1:
-    dependencies:
-      acorn: 8.15.0
-      acorn-jsx: 5.3.2(acorn@8.15.0)
-      eslint-visitor-keys: 3.4.3
-
   esquery@1.6.0:
     dependencies:
       estraverse: 5.3.0
@@ -8371,6 +6811,18 @@ snapshots:
 
   eventemitter3@5.0.1: {}
 
+  exceljs@4.4.0:
+    dependencies:
+      archiver: 5.3.2
+      dayjs: 1.11.18
+      fast-csv: 4.3.6
+      jszip: 3.10.1
+      readable-stream: 3.6.2
+      saxes: 5.0.1
+      tmp: 0.2.5
+      unzipper: 0.10.14
+      uuid: 8.3.2
+
   execa@8.0.1:
     dependencies:
       cross-spawn: 7.0.6
@@ -8414,6 +6866,11 @@ snapshots:
       iconv-lite: 0.4.24
       tmp: 0.0.33
 
+  fast-csv@4.3.6:
+    dependencies:
+      '@fast-csv/format': 4.3.5
+      '@fast-csv/parse': 4.3.6
+
   fast-deep-equal@3.1.3: {}
 
   fast-diff@1.3.0: {}
@@ -8450,9 +6907,9 @@ snapshots:
     dependencies:
       is-unicode-supported: 2.1.0
 
-  file-entry-cache@10.1.4:
+  file-entry-cache@11.1.2:
     dependencies:
-      flat-cache: 6.1.14
+      flat-cache: 6.1.22
 
   file-entry-cache@8.0.0:
     dependencies:
@@ -8494,16 +6951,23 @@ snapshots:
       flatted: 3.3.3
       keyv: 4.5.4
 
-  flat-cache@6.1.14:
+  flat-cache@6.1.22:
     dependencies:
-      cacheable: 2.0.2
-      flatted: 3.3.3
-      hookified: 1.12.1
+      cacheable: 2.3.4
+      flatted: 3.4.2
+      hookified: 1.15.1
 
   flatted@3.3.3: {}
 
+  flatted@3.4.2: {}
+
   follow-redirects@1.15.11: {}
 
+  foreground-child@3.3.1:
+    dependencies:
+      cross-spawn: 7.0.6
+      signal-exit: 4.1.0
+
   form-data@4.0.4:
     dependencies:
       asynckit: 0.4.0
@@ -8514,6 +6978,10 @@ snapshots:
 
   frac@1.1.2: {}
 
+  fraction.js@5.3.4: {}
+
+  fs-constants@1.0.0: {}
+
   fs-extra@10.1.0:
     dependencies:
       graceful-fs: 4.2.11
@@ -8538,6 +7006,13 @@ snapshots:
   fsevents@2.3.3:
     optional: true
 
+  fstream@1.0.12:
+    dependencies:
+      graceful-fs: 4.2.11
+      inherits: 2.0.4
+      mkdirp: 0.5.6
+      rimraf: 2.7.1
+
   function-bind@1.1.2: {}
 
   gensync@1.0.0-beta.2: {}
@@ -8589,6 +7064,15 @@ snapshots:
     dependencies:
       is-glob: 4.0.3
 
+  glob@10.4.5:
+    dependencies:
+      foreground-child: 3.3.1
+      jackspeak: 3.4.3
+      minimatch: 9.0.5
+      minipass: 7.1.2
+      package-json-from-dist: 1.0.1
+      path-scurry: 1.11.1
+
   glob@7.2.3:
     dependencies:
       fs.realpath: 1.0.0
@@ -8626,10 +7110,6 @@ snapshots:
       kind-of: 6.0.3
       which: 1.3.1
 
-  globals@13.24.0:
-    dependencies:
-      type-fest: 0.20.2
-
   globals@14.0.0: {}
 
   globals@15.15.0: {}
@@ -8645,12 +7125,20 @@ snapshots:
 
   globjoin@0.1.4: {}
 
+  good-listener@1.2.2:
+    dependencies:
+      delegate: 3.2.0
+
   gopd@1.2.0: {}
 
   graceful-fs@4.2.11: {}
 
   graphemer@1.4.0: {}
 
+  graphlib@2.1.8:
+    dependencies:
+      lodash: 4.17.21
+
   has-flag@3.0.0: {}
 
   has-flag@4.0.0: {}
@@ -8661,6 +7149,10 @@ snapshots:
     dependencies:
       has-symbols: 1.1.0
 
+  hashery@1.5.1:
+    dependencies:
+      hookified: 1.15.1
+
   hasown@2.0.2:
     dependencies:
       function-bind: 1.1.2
@@ -8675,11 +7167,13 @@ snapshots:
 
   hookable@5.5.3: {}
 
-  hookified@1.12.1: {}
+  hookified@1.15.1: {}
+
+  hookified@2.2.0: {}
 
   html-tags@3.3.1: {}
 
-  html-void-elements@2.0.1: {}
+  html-void-elements@3.0.0: {}
 
   htmlparser2@8.0.2:
     dependencies:
@@ -8694,7 +7188,7 @@ snapshots:
 
   husky@9.1.7: {}
 
-  i18next@20.6.1:
+  i18next@23.16.8:
     dependencies:
       '@babel/runtime': 7.28.4
 
@@ -8708,7 +7202,7 @@ snapshots:
 
   ignore@7.0.5: {}
 
-  immer@9.0.21: {}
+  immediate@3.0.6: {}
 
   immutable@5.1.3: {}
 
@@ -8818,10 +7312,28 @@ snapshots:
     dependencies:
       is-inside-container: 1.0.0
 
+  isarray@1.0.0: {}
+
   isexe@2.0.0: {}
 
+  jackspeak@3.4.3:
+    dependencies:
+      '@isaacs/cliui': 8.0.2
+    optionalDependencies:
+      '@pkgjs/parseargs': 0.11.0
+
   jiti@2.6.0: {}
 
+  js-beautify@1.15.4:
+    dependencies:
+      config-chain: 1.1.13
+      editorconfig: 1.0.7
+      glob: 10.4.5
+      js-cookie: 3.0.5
+      nopt: 7.2.1
+
+  js-cookie@3.0.5: {}
+
   js-tokens@4.0.0: {}
 
   js-tokens@9.0.1: {}
@@ -8852,11 +7364,18 @@ snapshots:
 
   jsonparse@1.3.1: {}
 
+  jszip@3.10.1:
+    dependencies:
+      lie: 3.3.0
+      pako: 1.0.11
+      readable-stream: 2.3.8
+      setimmediate: 1.0.5
+
   keyv@4.5.4:
     dependencies:
       json-buffer: 3.0.1
 
-  keyv@5.5.3:
+  keyv@5.6.0:
     dependencies:
       '@keyv/serialize': 1.1.1
 
@@ -8868,11 +7387,19 @@ snapshots:
 
   kolorist@1.8.0: {}
 
+  lazystream@1.0.1:
+    dependencies:
+      readable-stream: 2.3.8
+
   levn@0.4.1:
     dependencies:
       prelude-ls: 1.2.1
       type-check: 0.4.0
 
+  lie@3.3.0:
+    dependencies:
+      immediate: 3.0.6
+
   lightningcss-darwin-arm64@1.30.1:
     optional: true
 
@@ -8922,6 +7449,10 @@ snapshots:
 
   lines-and-columns@1.2.4: {}
 
+  linkify-it@5.0.0:
+    dependencies:
+      uc.micro: 2.1.0
+
   lint-staged@15.5.2:
     dependencies:
       chalk: 5.6.2
@@ -8937,6 +7468,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  listenercount@1.0.1: {}
+
   listr2@8.3.3:
     dependencies:
       cli-truncate: 4.0.0
@@ -8974,12 +7507,30 @@ snapshots:
 
   lodash.debounce@4.0.8: {}
 
+  lodash.defaults@4.2.0: {}
+
+  lodash.difference@4.5.0: {}
+
+  lodash.escaperegexp@4.1.2: {}
+
+  lodash.flatten@4.4.0: {}
+
   lodash.foreach@4.5.0: {}
 
+  lodash.groupby@4.6.0: {}
+
+  lodash.isboolean@3.0.3: {}
+
   lodash.isequal@4.5.0: {}
 
+  lodash.isfunction@3.0.9: {}
+
+  lodash.isnil@4.0.0: {}
+
   lodash.isplainobject@4.0.6: {}
 
+  lodash.isundefined@3.0.1: {}
+
   lodash.kebabcase@4.1.1: {}
 
   lodash.map@4.6.0: {}
@@ -8998,6 +7549,8 @@ snapshots:
 
   lodash.truncate@4.4.2: {}
 
+  lodash.union@4.6.0: {}
+
   lodash.uniq@4.5.0: {}
 
   lodash.upperfirst@4.3.1: {}
@@ -9019,6 +7572,8 @@ snapshots:
 
   longest@2.0.1: {}
 
+  lru-cache@10.4.3: {}
+
   lru-cache@5.1.1:
     dependencies:
       yallist: 3.1.1
@@ -9027,6 +7582,19 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  markdown-it-highlightjs@4.3.0:
+    dependencies:
+      highlight.js: 11.11.1
+
+  markdown-it@14.1.1:
+    dependencies:
+      argparse: 2.0.1
+      entities: 4.5.0
+      linkify-it: 5.0.0
+      mdurl: 2.0.0
+      punycode.js: 2.3.1
+      uc.micro: 2.1.0
+
   math-intrinsics@1.1.0: {}
 
   mathml-tag-names@2.1.3: {}
@@ -9035,6 +7603,8 @@ snapshots:
 
   mdn-data@2.24.0: {}
 
+  mdurl@2.0.0: {}
+
   memoize-one@6.0.0: {}
 
   meow@12.1.1: {}
@@ -9072,6 +7642,10 @@ snapshots:
     dependencies:
       brace-expansion: 1.1.12
 
+  minimatch@5.1.9:
+    dependencies:
+      brace-expansion: 2.0.2
+
   minimatch@9.0.5:
     dependencies:
       brace-expansion: 2.0.2
@@ -9088,6 +7662,10 @@ snapshots:
 
   mitt@3.0.1: {}
 
+  mkdirp@0.5.6:
+    dependencies:
+      minimist: 1.2.8
+
   mlly@1.8.0:
     dependencies:
       acorn: 8.15.0
@@ -9118,6 +7696,12 @@ snapshots:
 
   node-releases@2.0.21: {}
 
+  node-releases@2.0.38: {}
+
+  nopt@7.2.1:
+    dependencies:
+      abbrev: 2.0.0
+
   normalize-path@3.0.0: {}
 
   normalize-wheel-es@1.2.0: {}
@@ -9137,6 +7721,8 @@ snapshots:
     dependencies:
       boolbase: 1.0.0
 
+  object-inspect@1.13.4: {}
+
   ohash@2.0.11: {}
 
   once@1.4.0:
@@ -9207,6 +7793,12 @@ snapshots:
     dependencies:
       p-limit: 4.0.0
 
+  package-json-from-dist@1.0.1: {}
+
+  package-manager-detector@1.6.0: {}
+
+  pako@1.0.11: {}
+
   parent-module@1.0.1:
     dependencies:
       callsites: 3.1.0
@@ -9234,6 +7826,13 @@ snapshots:
 
   path-key@4.0.0: {}
 
+  path-scurry@1.11.1:
+    dependencies:
+      lru-cache: 10.4.3
+      minipass: 7.1.2
+
+  path-to-regexp@8.4.2: {}
+
   path-type@4.0.0: {}
 
   pathe@2.0.3: {}
@@ -9248,20 +7847,20 @@ snapshots:
 
   pidtree@0.6.0: {}
 
-  pinia-plugin-persistedstate@4.5.0(pinia@3.0.3(typescript@5.6.3)(vue@3.5.22(typescript@5.6.3))):
+  pinia-plugin-persistedstate@4.5.0(pinia@3.0.3(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3))):
     dependencies:
       deep-pick-omit: 1.2.1
       defu: 6.1.4
       destr: 2.0.5
     optionalDependencies:
-      pinia: 3.0.3(typescript@5.6.3)(vue@3.5.22(typescript@5.6.3))
+      pinia: 3.0.3(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3))
 
-  pinia@3.0.3(typescript@5.6.3)(vue@3.5.22(typescript@5.6.3)):
+  pinia@3.0.3(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3)):
     dependencies:
       '@vue/devtools-api': 7.7.7
-      vue: 3.5.22(typescript@5.6.3)
+      vue: 3.5.22(typescript@5.9.3)
     optionalDependencies:
-      typescript: 5.6.3
+      typescript: 5.9.3
 
   pkg-types@1.3.1:
     dependencies:
@@ -9298,11 +7897,6 @@ snapshots:
     dependencies:
       postcss: 8.5.6
 
-  postcss-selector-parser@6.1.2:
-    dependencies:
-      cssesc: 3.0.0
-      util-deprecate: 1.0.2
-
   postcss-selector-parser@7.1.0:
     dependencies:
       cssesc: 3.0.0
@@ -9336,24 +7930,52 @@ snapshots:
 
   prismjs@1.30.0: {}
 
+  process-nextick-args@2.0.1: {}
+
+  proto-list@1.2.4: {}
+
   proxy-from-env@1.1.0: {}
 
+  punycode.js@2.3.1: {}
+
   punycode@2.3.1: {}
 
-  qrcode.vue@3.6.0(vue@3.5.22(typescript@5.6.3)):
+  qified@0.9.1:
     dependencies:
-      vue: 3.5.22(typescript@5.6.3)
+      hookified: 2.2.0
+
+  qrcode.vue@3.6.0(vue@3.5.22(typescript@5.9.3)):
+    dependencies:
+      vue: 3.5.22(typescript@5.9.3)
+
+  qs@6.15.1:
+    dependencies:
+      side-channel: 1.1.0
 
   quansync@0.2.11: {}
 
   queue-microtask@1.2.3: {}
 
+  readable-stream@2.3.8:
+    dependencies:
+      core-util-is: 1.0.3
+      inherits: 2.0.4
+      isarray: 1.0.0
+      process-nextick-args: 2.0.1
+      safe-buffer: 5.1.2
+      string_decoder: 1.1.1
+      util-deprecate: 1.0.2
+
   readable-stream@3.6.2:
     dependencies:
       inherits: 2.0.4
       string_decoder: 1.3.0
       util-deprecate: 1.0.2
 
+  readdir-glob@1.1.3:
+    dependencies:
+      minimatch: 5.1.9
+
   readdirp@3.6.0:
     dependencies:
       picomatch: 2.3.1
@@ -9389,6 +8011,10 @@ snapshots:
 
   rfdc@1.4.1: {}
 
+  rimraf@2.7.1:
+    dependencies:
+      glob: 7.2.3
+
   rollup-plugin-visualizer@5.14.0(rollup@4.52.3):
     dependencies:
       open: 8.4.2
@@ -9438,6 +8064,8 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
+  safe-buffer@5.1.2: {}
+
   safe-buffer@5.2.1: {}
 
   safer-buffer@2.1.2: {}
@@ -9450,22 +8078,58 @@ snapshots:
     optionalDependencies:
       '@parcel/watcher': 2.5.1
 
-  scroll-into-view-if-needed@2.2.31:
+  saxes@5.0.1:
     dependencies:
-      compute-scroll-into-view: 1.0.20
+      xmlchars: 2.2.0
+
+  scroll-into-view-if-needed@3.1.0:
+    dependencies:
+      compute-scroll-into-view: 3.1.1
 
   scule@1.3.0: {}
 
+  select@1.1.2: {}
+
   semver@6.3.1: {}
 
   semver@7.7.2: {}
 
+  setimmediate@1.0.5: {}
+
   shebang-command@2.0.0:
     dependencies:
       shebang-regex: 3.0.0
 
   shebang-regex@3.0.0: {}
 
+  side-channel-list@1.0.1:
+    dependencies:
+      es-errors: 1.3.0
+      object-inspect: 1.13.4
+
+  side-channel-map@1.0.1:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      object-inspect: 1.13.4
+
+  side-channel-weakmap@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      object-inspect: 1.13.4
+      side-channel-map: 1.0.1
+
+  side-channel@1.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      object-inspect: 1.13.4
+      side-channel-list: 1.0.1
+      side-channel-map: 1.0.1
+      side-channel-weakmap: 1.0.2
+
   signal-exit@3.0.7: {}
 
   signal-exit@4.1.0: {}
@@ -9478,16 +8142,11 @@ snapshots:
 
   slash@3.0.0: {}
 
-  slate-history@0.66.0(slate@0.72.8):
+  slate-history@0.115.0(slate@0.123.0):
     dependencies:
-      is-plain-object: 5.0.0
-      slate: 0.72.8
+      slate: 0.123.0
 
-  slate@0.72.8:
-    dependencies:
-      immer: 9.0.21
-      is-plain-object: 5.0.0
-      tiny-warning: 1.0.3
+  slate@0.123.0: {}
 
   slice-ansi@4.0.0:
     dependencies:
@@ -9507,6 +8166,8 @@ snapshots:
 
   snabbdom@3.6.2: {}
 
+  sortablejs@1.14.0: {}
+
   source-map-js@1.2.1: {}
 
   source-map-support@0.5.21:
@@ -9526,7 +8187,7 @@ snapshots:
     dependencies:
       frac: 1.1.2
 
-  ssr-window@3.0.0: {}
+  ssr-window@4.0.2: {}
 
   string-argv@0.3.2: {}
 
@@ -9536,12 +8197,22 @@ snapshots:
       is-fullwidth-code-point: 3.0.0
       strip-ansi: 6.0.1
 
+  string-width@5.1.2:
+    dependencies:
+      eastasianwidth: 0.2.0
+      emoji-regex: 9.2.2
+      strip-ansi: 7.1.2
+
   string-width@7.2.0:
     dependencies:
       emoji-regex: 10.5.0
       get-east-asian-width: 1.4.0
       strip-ansi: 7.1.2
 
+  string_decoder@1.1.1:
+    dependencies:
+      safe-buffer: 5.1.2
+
   string_decoder@1.3.0:
     dependencies:
       safe-buffer: 5.2.1
@@ -9566,53 +8237,59 @@ snapshots:
     dependencies:
       js-tokens: 9.0.1
 
-  stylelint-config-html@1.1.0(postcss-html@1.8.0)(stylelint@16.24.0(typescript@5.6.3)):
+  stylelint-config-html@1.1.0(postcss-html@1.8.0)(stylelint@16.26.1(typescript@5.9.3)):
     dependencies:
       postcss-html: 1.8.0
-      stylelint: 16.24.0(typescript@5.6.3)
+      stylelint: 16.26.1(typescript@5.9.3)
 
-  stylelint-config-recess-order@4.6.0(stylelint@16.24.0(typescript@5.6.3)):
+  stylelint-config-recess-order@6.1.0(stylelint@16.26.1(typescript@5.9.3)):
     dependencies:
-      stylelint: 16.24.0(typescript@5.6.3)
-      stylelint-order: 6.0.4(stylelint@16.24.0(typescript@5.6.3))
+      stylelint: 16.26.1(typescript@5.9.3)
+      stylelint-order: 6.0.4(stylelint@16.26.1(typescript@5.9.3))
 
-  stylelint-config-recommended-scss@14.1.0(postcss@8.5.6)(stylelint@16.24.0(typescript@5.6.3)):
+  stylelint-config-recommended-scss@14.1.0(postcss@8.5.6)(stylelint@16.26.1(typescript@5.9.3)):
     dependencies:
       postcss-scss: 4.0.9(postcss@8.5.6)
-      stylelint: 16.24.0(typescript@5.6.3)
-      stylelint-config-recommended: 14.0.1(stylelint@16.24.0(typescript@5.6.3))
-      stylelint-scss: 6.12.1(stylelint@16.24.0(typescript@5.6.3))
+      stylelint: 16.26.1(typescript@5.9.3)
+      stylelint-config-recommended: 14.0.1(stylelint@16.26.1(typescript@5.9.3))
+      stylelint-scss: 6.12.1(stylelint@16.26.1(typescript@5.9.3))
     optionalDependencies:
       postcss: 8.5.6
 
-  stylelint-config-recommended-vue@1.6.1(postcss-html@1.8.0)(stylelint@16.24.0(typescript@5.6.3)):
+  stylelint-config-recommended-vue@1.6.1(postcss-html@1.8.0)(stylelint@16.26.1(typescript@5.9.3)):
     dependencies:
       postcss-html: 1.8.0
       semver: 7.7.2
-      stylelint: 16.24.0(typescript@5.6.3)
-      stylelint-config-html: 1.1.0(postcss-html@1.8.0)(stylelint@16.24.0(typescript@5.6.3))
-      stylelint-config-recommended: 17.0.0(stylelint@16.24.0(typescript@5.6.3))
+      stylelint: 16.26.1(typescript@5.9.3)
+      stylelint-config-html: 1.1.0(postcss-html@1.8.0)(stylelint@16.26.1(typescript@5.9.3))
+      stylelint-config-recommended: 15.0.0(stylelint@16.26.1(typescript@5.9.3))
 
-  stylelint-config-recommended@14.0.1(stylelint@16.24.0(typescript@5.6.3)):
+  stylelint-config-recommended@14.0.1(stylelint@16.26.1(typescript@5.9.3)):
     dependencies:
-      stylelint: 16.24.0(typescript@5.6.3)
+      stylelint: 16.26.1(typescript@5.9.3)
 
-  stylelint-config-recommended@17.0.0(stylelint@16.24.0(typescript@5.6.3)):
+  stylelint-config-recommended@15.0.0(stylelint@16.26.1(typescript@5.9.3)):
     dependencies:
-      stylelint: 16.24.0(typescript@5.6.3)
+      stylelint: 16.26.1(typescript@5.9.3)
 
-  stylelint-config-standard@36.0.1(stylelint@16.24.0(typescript@5.6.3)):
+  stylelint-config-standard@36.0.1(stylelint@16.26.1(typescript@5.9.3)):
     dependencies:
-      stylelint: 16.24.0(typescript@5.6.3)
-      stylelint-config-recommended: 14.0.1(stylelint@16.24.0(typescript@5.6.3))
+      stylelint: 16.26.1(typescript@5.9.3)
+      stylelint-config-recommended: 14.0.1(stylelint@16.26.1(typescript@5.9.3))
 
-  stylelint-order@6.0.4(stylelint@16.24.0(typescript@5.6.3)):
+  stylelint-order@6.0.4(stylelint@16.26.1(typescript@5.9.3)):
     dependencies:
       postcss: 8.5.6
       postcss-sorting: 8.0.2(postcss@8.5.6)
-      stylelint: 16.24.0(typescript@5.6.3)
+      stylelint: 16.26.1(typescript@5.9.3)
 
-  stylelint-scss@6.12.1(stylelint@16.24.0(typescript@5.6.3)):
+  stylelint-prettier@5.0.3(prettier@3.6.2)(stylelint@16.26.1(typescript@5.9.3)):
+    dependencies:
+      prettier: 3.6.2
+      prettier-linter-helpers: 1.0.0
+      stylelint: 16.26.1(typescript@5.9.3)
+
+  stylelint-scss@6.12.1(stylelint@16.26.1(typescript@5.9.3)):
     dependencies:
       css-tree: 3.1.0
       is-plain-object: 5.0.0
@@ -9622,24 +8299,25 @@ snapshots:
       postcss-resolve-nested-selector: 0.1.6
       postcss-selector-parser: 7.1.0
       postcss-value-parser: 4.2.0
-      stylelint: 16.24.0(typescript@5.6.3)
+      stylelint: 16.26.1(typescript@5.9.3)
 
-  stylelint@16.24.0(typescript@5.6.3):
+  stylelint@16.26.1(typescript@5.9.3):
     dependencies:
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-syntax-patches-for-csstree': 1.1.3(css-tree@3.1.0)
       '@csstools/css-tokenizer': 3.0.4
       '@csstools/media-query-list-parser': 4.0.3(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
       '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.0)
       '@dual-bundle/import-meta-resolve': 4.2.1
       balanced-match: 2.0.0
       colord: 2.9.3
-      cosmiconfig: 9.0.0(typescript@5.6.3)
+      cosmiconfig: 9.0.0(typescript@5.9.3)
       css-functions-list: 3.2.3
       css-tree: 3.1.0
       debug: 4.4.3
       fast-glob: 3.3.3
       fastest-levenshtein: 1.0.16
-      file-entry-cache: 10.1.4
+      file-entry-cache: 11.1.2
       global-modules: 2.0.0
       globby: 11.1.0
       globjoin: 0.1.4
@@ -9703,6 +8381,14 @@ snapshots:
 
   tapable@2.3.0: {}
 
+  tar-stream@2.2.0:
+    dependencies:
+      bl: 4.1.0
+      end-of-stream: 1.4.5
+      fs-constants: 1.0.0
+      inherits: 2.0.4
+      readable-stream: 3.6.2
+
   tar@7.5.1:
     dependencies:
       '@isaacs/fs-minipass': 4.0.1
@@ -9722,7 +8408,7 @@ snapshots:
 
   through@2.3.8: {}
 
-  tiny-warning@1.0.3: {}
+  tiny-emitter@2.1.0: {}
 
   tinyexec@1.0.1: {}
 
@@ -9735,15 +8421,19 @@ snapshots:
     dependencies:
       os-tmpdir: 1.0.2
 
+  tmp@0.2.5: {}
+
   to-regex-range@5.0.1:
     dependencies:
       is-number: 7.0.0
 
   totalist@3.0.1: {}
 
-  ts-api-utils@2.1.0(typescript@5.6.3):
+  traverse@0.3.9: {}
+
+  ts-api-utils@2.1.0(typescript@5.9.3):
     dependencies:
-      typescript: 5.6.3
+      typescript: 5.9.3
 
   tslib@2.3.0: {}
 
@@ -9760,24 +8450,24 @@ snapshots:
     dependencies:
       prelude-ls: 1.2.1
 
-  type-fest@0.20.2: {}
-
   type-fest@0.21.3: {}
 
   type@2.7.3: {}
 
-  typescript-eslint@8.44.1(eslint@9.36.0(jiti@2.6.0))(typescript@5.6.3):
+  typescript-eslint@8.44.1(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.3):
     dependencies:
-      '@typescript-eslint/eslint-plugin': 8.44.1(@typescript-eslint/parser@8.44.1(eslint@9.36.0(jiti@2.6.0))(typescript@5.6.3))(eslint@9.36.0(jiti@2.6.0))(typescript@5.6.3)
-      '@typescript-eslint/parser': 8.44.1(eslint@9.36.0(jiti@2.6.0))(typescript@5.6.3)
-      '@typescript-eslint/typescript-estree': 8.44.1(typescript@5.6.3)
-      '@typescript-eslint/utils': 8.44.1(eslint@9.36.0(jiti@2.6.0))(typescript@5.6.3)
+      '@typescript-eslint/eslint-plugin': 8.44.1(@typescript-eslint/parser@8.44.1(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.3))(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.44.1(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.3)
+      '@typescript-eslint/typescript-estree': 8.44.1(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.44.1(eslint@9.36.0(jiti@2.6.0))(typescript@5.9.3)
       eslint: 9.36.0(jiti@2.6.0)
-      typescript: 5.6.3
+      typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  typescript@5.6.3: {}
+  typescript@5.9.3: {}
+
+  uc.micro@2.1.0: {}
 
   ufo@1.6.1: {}
 
@@ -9806,7 +8496,7 @@ snapshots:
 
   universalify@2.0.1: {}
 
-  unplugin-auto-import@20.2.0(@vueuse/core@13.9.0(vue@3.5.22(typescript@5.6.3))):
+  unplugin-auto-import@20.2.0(@vueuse/core@13.9.0(vue@3.5.22(typescript@5.9.3))):
     dependencies:
       local-pkg: 1.1.2
       magic-string: 0.30.19
@@ -9815,7 +8505,7 @@ snapshots:
       unplugin: 2.3.10
       unplugin-utils: 0.3.0
     optionalDependencies:
-      '@vueuse/core': 13.9.0(vue@3.5.22(typescript@5.6.3))
+      '@vueuse/core': 13.9.0(vue@3.5.22(typescript@5.9.3))
 
   unplugin-element-plus@0.10.0:
     dependencies:
@@ -9834,7 +8524,7 @@ snapshots:
       pathe: 2.0.3
       picomatch: 4.0.3
 
-  unplugin-vue-components@29.1.0(@babel/parser@7.28.4)(vue@3.5.22(typescript@5.6.3)):
+  unplugin-vue-components@29.1.0(@babel/parser@7.28.4)(vue@3.5.22(typescript@5.9.3)):
     dependencies:
       chokidar: 3.6.0
       debug: 4.4.3
@@ -9844,7 +8534,7 @@ snapshots:
       tinyglobby: 0.2.15
       unplugin: 2.3.10
       unplugin-utils: 0.3.0
-      vue: 3.5.22(typescript@5.6.3)
+      vue: 3.5.22(typescript@5.9.3)
     optionalDependencies:
       '@babel/parser': 7.28.4
     transitivePeerDependencies:
@@ -9857,18 +8547,39 @@ snapshots:
       picomatch: 4.0.3
       webpack-virtual-modules: 0.6.2
 
+  unzipper@0.10.14:
+    dependencies:
+      big-integer: 1.6.52
+      binary: 0.3.0
+      bluebird: 3.4.7
+      buffer-indexof-polyfill: 1.0.2
+      duplexer2: 0.1.4
+      fstream: 1.0.12
+      graceful-fs: 4.2.11
+      listenercount: 1.0.1
+      readable-stream: 2.3.8
+      setimmediate: 1.0.5
+
   update-browserslist-db@1.1.3(browserslist@4.26.2):
     dependencies:
       browserslist: 4.26.2
       escalade: 3.2.0
       picocolors: 1.1.1
 
+  update-browserslist-db@1.2.3(browserslist@4.28.2):
+    dependencies:
+      browserslist: 4.28.2
+      escalade: 3.2.0
+      picocolors: 1.1.1
+
   uri-js@4.4.1:
     dependencies:
       punycode: 2.3.1
 
   util-deprecate@1.0.2: {}
 
+  uuid@8.3.2: {}
+
   vite-hot-client@2.1.0(vite@7.1.7(@types/node@24.8.1)(jiti@2.6.0)(lightningcss@1.30.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1)):
     dependencies:
       vite: 7.1.7(@types/node@24.8.1)(jiti@2.6.0)(lightningcss@1.30.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1)
@@ -9898,9 +8609,9 @@ snapshots:
       - rollup
       - supports-color
 
-  vite-plugin-vue-devtools@7.7.7(rollup@4.52.3)(vite@7.1.7(@types/node@24.8.1)(jiti@2.6.0)(lightningcss@1.30.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))(vue@3.5.22(typescript@5.6.3)):
+  vite-plugin-vue-devtools@7.7.7(rollup@4.52.3)(vite@7.1.7(@types/node@24.8.1)(jiti@2.6.0)(lightningcss@1.30.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3)):
     dependencies:
-      '@vue/devtools-core': 7.7.7(vite@7.1.7(@types/node@24.8.1)(jiti@2.6.0)(lightningcss@1.30.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))(vue@3.5.22(typescript@5.6.3))
+      '@vue/devtools-core': 7.7.7(vite@7.1.7(@types/node@24.8.1)(jiti@2.6.0)(lightningcss@1.30.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.20.6)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))
       '@vue/devtools-kit': 7.7.7
       '@vue/devtools-shared': 7.7.7
       execa: 9.6.0
@@ -9949,63 +8660,85 @@ snapshots:
 
   vscode-uri@3.1.0: {}
 
-  vue-demi@0.14.10(vue@3.5.22(typescript@5.6.3)):
+  vue-demi@0.14.10(vue@3.5.22(typescript@5.9.3)):
     dependencies:
-      vue: 3.5.22(typescript@5.6.3)
+      vue: 3.5.22(typescript@5.9.3)
 
   vue-draggable-plus@0.6.0(@types/sortablejs@1.15.8):
     dependencies:
       '@types/sortablejs': 1.15.8
 
-  vue-eslint-parser@9.4.3(eslint@9.36.0(jiti@2.6.0)):
+  vue-eslint-parser@10.4.0(eslint@9.36.0(jiti@2.6.0)):
     dependencies:
       debug: 4.4.3
       eslint: 9.36.0(jiti@2.6.0)
-      eslint-scope: 7.2.2
-      eslint-visitor-keys: 3.4.3
-      espree: 9.6.1
+      eslint-scope: 8.4.0
+      eslint-visitor-keys: 4.2.1
+      espree: 10.4.0
       esquery: 1.6.0
-      lodash: 4.17.21
       semver: 7.7.2
     transitivePeerDependencies:
       - supports-color
 
-  vue-i18n@9.14.5(vue@3.5.22(typescript@5.6.3)):
+  vue-i18n@11.4.0(vue@3.5.22(typescript@5.9.3)):
     dependencies:
-      '@intlify/core-base': 9.14.5
-      '@intlify/shared': 9.14.5
+      '@intlify/core-base': 11.4.0
+      '@intlify/devtools-types': 11.4.0
+      '@intlify/shared': 11.4.0
       '@vue/devtools-api': 6.6.4
-      vue: 3.5.22(typescript@5.6.3)
+      vue: 3.5.22(typescript@5.9.3)
 
-  vue-img-cutter@3.0.7(typescript@5.6.3):
+  vue-json-pretty@2.6.0(vue@3.5.22(typescript@5.9.3)):
     dependencies:
-      core-js: 3.45.1
-      vue: 3.5.22(typescript@5.6.3)
-      vue-i18n: 9.14.5(vue@3.5.22(typescript@5.6.3))
+      vue: 3.5.22(typescript@5.9.3)
+
+  vue-json-viewer@3.0.4(vue@3.5.22(typescript@5.9.3)):
+    dependencies:
+      clipboard: 2.0.11
+      vue: 3.5.22(typescript@5.9.3)
+
+  vue-router@4.5.1(vue@3.5.22(typescript@5.9.3)):
+    dependencies:
+      '@vue/devtools-api': 6.6.4
+      vue: 3.5.22(typescript@5.9.3)
+
+  vue-tsc@2.2.12(typescript@5.9.3):
+    dependencies:
+      '@volar/typescript': 2.4.15
+      '@vue/language-core': 2.2.12(typescript@5.9.3)
+      typescript: 5.9.3
+
+  vue-web-terminal@3.4.2(typescript@5.9.3):
+    dependencies:
+      vue: 3.5.22(typescript@5.9.3)
+      vue-json-viewer: 3.0.4(vue@3.5.22(typescript@5.9.3))
     transitivePeerDependencies:
       - typescript
 
-  vue-router@4.5.1(vue@3.5.22(typescript@5.6.3)):
+  vue3-cron-plus@0.1.9(typescript@5.9.3):
     dependencies:
-      '@vue/devtools-api': 6.6.4
-      vue: 3.5.22(typescript@5.6.3)
+      '@element-plus/icons-vue': 2.3.2(vue@3.5.22(typescript@5.9.3))
+      core-js: 3.45.1
+      element-plus: 2.11.4(vue@3.5.22(typescript@5.9.3))
+      vue: 3.5.22(typescript@5.9.3)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - typescript
 
-  vue-tsc@2.1.10(typescript@5.6.3):
-    dependencies:
-      '@volar/typescript': 2.4.23
-      '@vue/language-core': 2.1.10(typescript@5.6.3)
-      semver: 7.7.2
-      typescript: 5.6.3
-
-  vue@3.5.22(typescript@5.6.3):
+  vue@3.5.22(typescript@5.9.3):
     dependencies:
       '@vue/compiler-dom': 3.5.22
       '@vue/compiler-sfc': 3.5.22
       '@vue/runtime-dom': 3.5.22
-      '@vue/server-renderer': 3.5.22(vue@3.5.22(typescript@5.6.3))
+      '@vue/server-renderer': 3.5.22(vue@3.5.22(typescript@5.9.3))
       '@vue/shared': 3.5.22
     optionalDependencies:
-      typescript: 5.6.3
+      typescript: 5.9.3
+
+  vuedraggable@4.1.0(vue@3.5.22(typescript@5.9.3)):
+    dependencies:
+      sortablejs: 1.14.0
+      vue: 3.5.22(typescript@5.9.3)
 
   wcwidth@1.0.1:
     dependencies:
@@ -10035,6 +8768,12 @@ snapshots:
       string-width: 4.2.3
       strip-ansi: 6.0.1
 
+  wrap-ansi@8.1.0:
+    dependencies:
+      ansi-styles: 6.2.3
+      string-width: 5.1.2
+      strip-ansi: 7.1.2
+
   wrap-ansi@9.0.2:
     dependencies:
       ansi-styles: 6.2.3
@@ -10078,6 +8817,8 @@ snapshots:
 
   xml-name-validator@4.0.0: {}
 
+  xmlchars@2.2.0: {}
+
   y18n@5.0.8: {}
 
   yallist@3.1.1: {}
@@ -10104,6 +8845,12 @@ snapshots:
 
   yoctocolors@2.1.2: {}
 
+  zip-stream@4.1.1:
+    dependencies:
+      archiver-utils: 3.0.4
+      compress-commons: 4.1.2
+      readable-stream: 3.6.2
+
   zrender@6.0.0:
     dependencies:
       tslib: 2.3.0
diff --git a/frontend/new-web/public/background.svg b/frontend/new-web/public/background.svg
new file mode 100644
index 00000000..70f391f6
--- /dev/null
+++ b/frontend/new-web/public/background.svg
@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1400 800">
+  <defs>
+    <style>
+      @media (prefers-color-scheme: dark) {
+        #bg-rect { fill: #101a29; }
+        #blueGlow-rect { fill: url(#blueGlowDark); }
+        #blueGlow2-rect { fill: url(#blueGlow2Dark); }
+        #pinkPurpleGlow-rect { fill: url(#pinkPurpleGlowDark); }
+      }
+    </style>
+
+    <!-- 亮色主题渐变 -->
+    <linearGradient id="bgGradient" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#f9fcff" />
+      <stop offset="100%" stop-color="#f5f9fd" />
+    </linearGradient>
+    
+    <!-- 中间区域淡蓝白光晕 -->
+    <radialGradient id="blueGlow" cx="50%" cy="50%" r="70%" fx="50%" fy="50%">
+      <stop offset="0%" stop-color="#ffffff" stop-opacity="0.9" />
+      <stop offset="50%" stop-color="#f0f8ff" stop-opacity="0.5" />
+      <stop offset="100%" stop-color="#eef7fd" stop-opacity="0" />
+    </radialGradient>
+    
+    <!-- 左上角蓝白光晕  -->
+    <radialGradient id="blueGlow2" cx="15%" cy="15%" r="40%" fx="15%" fy="15%">
+      <stop offset="0%" stop-color="#d9efff" stop-opacity="0.85" />
+      <stop offset="40%" stop-color="#e5f4fd" stop-opacity="0.6" />
+      <stop offset="100%" stop-color="#e9f5fd" stop-opacity="0" />
+    </radialGradient>
+    
+    <!-- 右下角粉紫色光晕  -->
+    <radialGradient id="pinkPurpleGlow" cx="85%" cy="85%" r="40%" fx="85%" fy="85%">
+      <stop offset="0%" stop-color="#f7e6f9" stop-opacity="0.8" />
+      <stop offset="35%" stop-color="#f9edf8" stop-opacity="0.6" />
+      <stop offset="100%" stop-color="#f8f2f8" stop-opacity="0" />
+    </radialGradient>
+
+    <!-- 暗色主题渐变 -->
+    <radialGradient id="blueGlowDark" cx="50%" cy="50%" r="70%" fx="50%" fy="50%">
+      <stop offset="0%" stop-color="#1e3a5e" stop-opacity="0.6" />
+      <stop offset="50%" stop-color="#1c314e" stop-opacity="0.3" />
+      <stop offset="100%" stop-color="#1a2d47" stop-opacity="0" />
+    </radialGradient>
+    
+    <!-- 左上角蓝白光晕 - 暗色模式 -->
+    <radialGradient id="blueGlow2Dark" cx="15%" cy="15%" r="40%" fx="15%" fy="15%">
+      <stop offset="0%" stop-color="#1e3858" stop-opacity="0.85" />
+      <stop offset="40%" stop-color="#1a304f" stop-opacity="0.6" />
+      <stop offset="100%" stop-color="#172b45" stop-opacity="0" />
+    </radialGradient>
+    
+    <!-- 右下角粉紫色光晕 - 暗色模式 -->
+    <radialGradient id="pinkPurpleGlowDark" cx="85%" cy="85%" r="40%" fx="85%" fy="85%">
+      <stop offset="0%" stop-color="#2e2335" stop-opacity="0.85" />
+      <stop offset="35%" stop-color="#2a2035" stop-opacity="0.6" />
+      <stop offset="100%" stop-color="#2a202d" stop-opacity="0" />
+    </radialGradient>
+  </defs>
+  
+  <!-- 背景层 -->
+  <rect id="bg-rect" width="100%" height="100%" fill="url(#bgGradient)" />
+  
+  <!-- 中间淡蓝白光晕 -->
+  <rect id="blueGlow-rect" width="100%" height="100%" fill="url(#blueGlow)" />
+  
+  <!-- 左上蓝白光晕 -->
+  <rect id="blueGlow2-rect" width="100%" height="100%" fill="url(#blueGlow2)" />
+  
+  <!-- 右下粉紫光晕 -->
+  <rect id="pinkPurpleGlow-rect" width="100%" height="100%" fill="url(#pinkPurpleGlow)" />
+</svg>
diff --git a/frontend/new-web/public/favicon.svg b/frontend/new-web/public/favicon.svg
new file mode 100755
index 00000000..b7407f87
--- /dev/null
+++ b/frontend/new-web/public/favicon.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="410" height="404" viewBox="0 0 410 404" fill="none">
+  <path
+    d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z"
+    fill="url(#paint0_linear)" />
+  <path
+    d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z"
+    fill="url(#paint1_linear)" />
+  <defs>
+    <linearGradient id="paint0_linear" x1="6.00017" y1="32.9999" x2="235" y2="344" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#41D1FF" />
+      <stop offset="1" stop-color="#BD34FE" />
+    </linearGradient>
+    <linearGradient id="paint1_linear" x1="194.651" y1="8.81818" x2="236.076" y2="292.989"
+      gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FFEA83" />
+      <stop offset="0.0833333" stop-color="#FFDD35" />
+      <stop offset="1" stop-color="#FFA800" />
+    </linearGradient>
+  </defs>
+</svg>
\ No newline at end of file
diff --git a/frontend/new-web/scripts/clean-dev.ts b/frontend/new-web/scripts/clean-dev.ts
index cc0b9bce..68fc02bb 100644
--- a/frontend/new-web/scripts/clean-dev.ts
+++ b/frontend/new-web/scripts/clean-dev.ts
@@ -1,63 +1,63 @@
 // scripts/clean-dev.ts
-import fs from 'fs/promises'
-import path from 'path'
+import fs from "fs/promises";
+import path from "path";
 
 // 现代化颜色主题
 const theme = {
   // 基础颜色
-  reset: '\x1b[0m',
-  bold: '\x1b[1m',
-  dim: '\x1b[2m',
+  reset: "\x1b[0m",
+  bold: "\x1b[1m",
+  dim: "\x1b[2m",
 
   // 前景色
-  primary: '\x1b[38;5;75m', // 亮蓝色
-  success: '\x1b[38;5;82m', // 亮绿色
-  warning: '\x1b[38;5;220m', // 亮黄色
-  error: '\x1b[38;5;196m', // 亮红色
-  info: '\x1b[38;5;159m', // 青色
-  purple: '\x1b[38;5;141m', // 紫色
-  orange: '\x1b[38;5;208m', // 橙色
-  gray: '\x1b[38;5;245m', // 灰色
-  white: '\x1b[38;5;255m', // 白色
+  primary: "\x1b[38;5;75m", // 亮蓝色
+  success: "\x1b[38;5;82m", // 亮绿色
+  warning: "\x1b[38;5;220m", // 亮黄色
+  error: "\x1b[38;5;196m", // 亮红色
+  info: "\x1b[38;5;159m", // 青色
+  purple: "\x1b[38;5;141m", // 紫色
+  orange: "\x1b[38;5;208m", // 橙色
+  gray: "\x1b[38;5;245m", // 灰色
+  white: "\x1b[38;5;255m", // 白色
 
   // 背景色
-  bgDark: '\x1b[48;5;235m', // 深灰背景
-  bgBlue: '\x1b[48;5;24m', // 蓝色背景
-  bgGreen: '\x1b[48;5;22m', // 绿色背景
-  bgRed: '\x1b[48;5;52m' // 红色背景
-}
+  bgDark: "\x1b[48;5;235m", // 深灰背景
+  bgBlue: "\x1b[48;5;24m", // 蓝色背景
+  bgGreen: "\x1b[48;5;22m", // 绿色背景
+  bgRed: "\x1b[48;5;52m", // 红色背景
+};
 
 // 现代化图标集
 const icons = {
-  rocket: '🚀',
-  fire: '🔥',
-  star: '⭐',
-  gem: '💎',
-  crown: '👑',
-  magic: '✨',
-  warning: '⚠️',
-  success: '✅',
-  error: '❌',
-  info: 'ℹ️',
-  folder: '📁',
-  file: '📄',
-  image: '🖼️',
-  code: '💻',
-  data: '📊',
-  globe: '🌐',
-  map: '🗺️',
-  chat: '💬',
-  bolt: '⚡',
-  shield: '🛡️',
-  key: '🔑',
-  link: '🔗',
-  clean: '🧹',
-  trash: '🗑️',
-  check: '✓',
-  cross: '✗',
-  arrow: '→',
-  loading: '⏳'
-}
+  rocket: "🚀",
+  fire: "🔥",
+  star: "⭐",
+  gem: "💎",
+  crown: "👑",
+  magic: "✨",
+  warning: "⚠️",
+  success: "✅",
+  error: "❌",
+  info: "ℹ️",
+  folder: "📁",
+  file: "📄",
+  image: "🖼️",
+  code: "💻",
+  data: "📊",
+  globe: "🌐",
+  map: "🗺️",
+  chat: "💬",
+  bolt: "⚡",
+  shield: "🛡️",
+  key: "🔑",
+  link: "🔗",
+  clean: "🧹",
+  trash: "🗑️",
+  check: "✓",
+  cross: "✗",
+  arrow: "→",
+  loading: "⏳",
+};
 
 // 格式化工具
 const fmt = {
@@ -77,66 +77,66 @@ const fmt = {
 
   // 渐变效果模拟
   gradient: (text: string) => {
-    const colors = ['\x1b[38;5;75m', '\x1b[38;5;81m', '\x1b[38;5;87m', '\x1b[38;5;159m']
-    const chars = text.split('')
-    return chars.map((char, i) => `${colors[i % colors.length]}${char}`).join('') + theme.reset
-  }
-}
+    const colors = ["\x1b[38;5;75m", "\x1b[38;5;81m", "\x1b[38;5;87m", "\x1b[38;5;159m"];
+    const chars = text.split("");
+    return chars.map((char, i) => `${colors[i % colors.length]}${char}`).join("") + theme.reset;
+  },
+};
 
 // 创建现代化标题横幅
 function createModernBanner() {
-  console.log()
+  console.log();
   console.log(
-    fmt.gradient('  ╔══════════════════════════════════════════════════════════════════╗')
-  )
+    fmt.gradient("  ╔══════════════════════════════════════════════════════════════════╗")
+  );
   console.log(
-    fmt.gradient('  ║                                                                  ║')
-  )
+    fmt.gradient("  ║                                                                  ║")
+  );
   console.log(
-    `  ║               ${icons.rocket} ${fmt.title('ART DESIGN PRO')} ${fmt.subtitle('· 代码精简程序')} ${icons.magic}                ║`
-  )
+    `  ║               ${icons.rocket} ${fmt.title("ART DESIGN PRO")} ${fmt.subtitle("· 代码精简程序")} ${icons.magic}                ║`
+  );
   console.log(
-    `  ║               ${fmt.dim('为项目移除演示数据，快速切换至开发模式')}             ║`
-  )
+    `  ║               ${fmt.dim("为项目移除演示数据，快速切换至开发模式")}             ║`
+  );
   console.log(
-    fmt.gradient('  ║                                                                  ║')
-  )
+    fmt.gradient("  ║                                                                  ║")
+  );
   console.log(
-    fmt.gradient('  ╚══════════════════════════════════════════════════════════════════╝')
-  )
-  console.log()
+    fmt.gradient("  ╚══════════════════════════════════════════════════════════════════╝")
+  );
+  console.log();
 }
 
 // 创建分割线
-function createDivider(char = '─', color = theme.primary) {
-  console.log(`${color}${'  ' + char.repeat(66)}${theme.reset}`)
+function createDivider(char = "─", color = theme.primary) {
+  console.log(`${color}${"  " + char.repeat(66)}${theme.reset}`);
 }
 
 // 创建卡片样式容器
 function createCard(title: string, content: string[]) {
-  console.log(`  ${fmt.badge('', theme.bgBlue)} ${fmt.title(title)}`)
-  console.log()
+  console.log(`  ${fmt.badge("", theme.bgBlue)} ${fmt.title(title)}`);
+  console.log();
   content.forEach((line) => {
-    console.log(`     ${line}`)
-  })
-  console.log()
+    console.log(`     ${line}`);
+  });
+  console.log();
 }
 
 // 进度条动画
 function createProgressBar(current: number, total: number, text: string, width = 40) {
-  const percentage = Math.round((current / total) * 100)
-  const filled = Math.round((current / total) * width)
-  const empty = width - filled
+  const percentage = Math.round((current / total) * 100);
+  const filled = Math.round((current / total) * width);
+  const empty = width - filled;
 
-  const filledBar = '█'.repeat(filled)
-  const emptyBar = '░'.repeat(empty)
+  const filledBar = "█".repeat(filled);
+  const emptyBar = "░".repeat(empty);
 
   process.stdout.write(
-    `\r  ${fmt.info('进度')} [${theme.success}${filledBar}${theme.gray}${emptyBar}${theme.reset}] ${fmt.highlight(percentage + '%')})}`
-  )
+    `\r  ${fmt.info("进度")} [${theme.success}${filledBar}${theme.gray}${emptyBar}${theme.reset}] ${fmt.highlight(percentage + "%")})}`
+  );
 
   if (current === total) {
-    console.log()
+    console.log();
   }
 }
 
@@ -146,113 +146,106 @@ const stats = {
   deletedPaths: 0,
   failedPaths: 0,
   startTime: Date.now(),
-  totalFiles: 0
-}
+  totalFiles: 0,
+};
 
 // 清理目标
 const targets = [
-  'README.md',
-  'README.zh-CN.md',
-  'CHANGELOG.md',
-  'CHANGELOG.zh-CN.md',
-  'src/views/change',
-  'src/views/safeguard',
-  'src/views/article',
-  'src/views/examples',
-  'src/views/system/nested',
-  'src/views/widgets',
-  'src/views/template',
-  'src/views/dashboard/analysis',
-  'src/views/dashboard/ecommerce',
-  'src/mock/json',
-  'src/mock/temp/articleList.ts',
-  'src/mock/temp/commentDetail.ts',
-  'src/mock/temp/commentList.ts',
-  'src/assets/images/cover',
-  'src/assets/images/safeguard',
-  'src/assets/images/3d',
-  'src/components/core/charts/art-map-chart',
-  'src/components/business/comment-widget'
-]
+  "README.md",
+  "README.zh-CN.md",
+  "CHANGELOG.md",
+  "CHANGELOG.zh-CN.md",
+  "src/views/change",
+  "src/views/safeguard",
+  "src/views/article",
+  "src/views/examples",
+  "src/views/system/nested",
+  "src/views/widgets",
+  "src/views/template",
+  "src/views/dashboard/analysis",
+  "src/views/dashboard/ecommerce",
+  "src/mock/json",
+  "src/mock/temp/articleList.ts",
+  "src/mock/temp/commentDetail.ts",
+  "src/mock/temp/commentList.ts",
+  "src/assets/images/cover",
+  "src/assets/images/safeguard",
+  "src/assets/images/3d",
+  "src/components/core/charts/art-map-chart",
+  "src/components/business/comment-widget",
+];
 
 // 递归统计文件数量
 async function countFiles(targetPath: string): Promise<number> {
-  const fullPath = path.resolve(process.cwd(), targetPath)
+  const fullPath = path.resolve(process.cwd(), targetPath);
 
   try {
-    const stat = await fs.stat(fullPath)
+    const stat = await fs.stat(fullPath);
 
     if (stat.isFile()) {
-      return 1
+      return 1;
     } else if (stat.isDirectory()) {
-      const entries = await fs.readdir(fullPath)
-      let count = 0
+      const entries = await fs.readdir(fullPath);
+      let count = 0;
 
       for (const entry of entries) {
-        const entryPath = path.join(targetPath, entry)
-        count += await countFiles(entryPath)
+        const entryPath = path.join(targetPath, entry);
+        count += await countFiles(entryPath);
       }
 
-      return count
+      return count;
     }
   } catch {
-    return 0
+    return 0;
   }
 
-  return 0
+  return 0;
 }
 
 // 统计所有目标的文件数量
 async function countAllFiles(): Promise<number> {
-  let totalCount = 0
+  let totalCount = 0;
 
   for (const target of targets) {
-    const count = await countFiles(target)
-    totalCount += count
+    const count = await countFiles(target);
+    totalCount += count;
   }
 
-  return totalCount
+  return totalCount;
 }
 
 // 删除文件和目录
 async function remove(targetPath: string, index: number) {
-  const fullPath = path.resolve(process.cwd(), targetPath)
+  const fullPath = path.resolve(process.cwd(), targetPath);
 
-  createProgressBar(index + 1, targets.length, targetPath)
+  createProgressBar(index + 1, targets.length, targetPath);
 
   try {
-    const fileCount = await countFiles(targetPath)
-    await fs.rm(fullPath, { recursive: true, force: true })
-    stats.deletedFiles += fileCount
-    stats.deletedPaths++
-    await new Promise((resolve) => setTimeout(resolve, 50))
+    const fileCount = await countFiles(targetPath);
+    await fs.rm(fullPath, { recursive: true, force: true });
+    stats.deletedFiles += fileCount;
+    stats.deletedPaths++;
+    await new Promise((resolve) => setTimeout(resolve, 50));
   } catch (err) {
-    stats.failedPaths++
-    console.log()
-    console.log(`     ${icons.error} ${fmt.error('删除失败')}: ${fmt.highlight(targetPath)}`)
-    console.log(`     ${fmt.dim('错误详情: ' + err)}`)
+    stats.failedPaths++;
+    console.log();
+    console.log(`     ${icons.error} ${fmt.error("删除失败")}: ${fmt.highlight(targetPath)}`);
+    console.log(`     ${fmt.dim("错误详情: " + err)}`);
   }
 }
 
 // 清理路由模块
 async function cleanRouteModules() {
-  const modulesPath = path.resolve(process.cwd(), 'src/router/modules')
+  const modulesPath = path.resolve(process.cwd(), "src/router/modules");
 
   try {
     // 删除演示相关的路由模块
-    const modulesToRemove = [
-      'template.ts',
-      'widgets.ts',
-      'examples.ts',
-      'article.ts',
-      'safeguard.ts',
-      'help.ts'
-    ]
+    const modulesToRemove = ["template.ts", "widgets.ts", "examples.ts", "article.ts"];
 
     for (const module of modulesToRemove) {
-      const modulePath = path.join(modulesPath, module)
+      const modulePath = path.join(modulesPath, module);
       try {
-        await fs.rm(modulePath, { force: true })
+        await fs.rm(modulePath, { force: true });
       } catch {
         // 文件不存在时忽略错误
       }
@@ -283,8 +276,8 @@ export const dashboardRoutes: AppRouteRecord = {
     }
   ]
 }
-`
-    await fs.writeFile(path.join(modulesPath, 'dashboard.ts'), dashboardContent, 'utf-8')
+`;
+    await fs.writeFile(path.join(modulesPath, "dashboard.ts"), dashboardContent, "utf-8");
 
     // 重写 system.ts - 移除 nested 嵌套菜单
     const systemContent = `import { AppRouteRecord } from '@/types/router'
@@ -347,8 +340,8 @@ export const systemRoutes: AppRouteRecord = {
     }
   ]
 }
-`
-    await fs.writeFile(path.join(modulesPath, 'system.ts'), systemContent, 'utf-8')
+`;
+    await fs.writeFile(path.join(modulesPath, "system.ts"), systemContent, "utf-8");
 
     // 重写 index.ts - 只导入保留的模块
     const indexContent = `import { AppRouteRecord } from '@/types/router'
@@ -366,19 +359,19 @@ export const routeModules: AppRouteRecord[] = [
   resultRoutes,
   exceptionRoutes
 ]
-`
-    await fs.writeFile(path.join(modulesPath, 'index.ts'), indexContent, 'utf-8')
+`;
+    await fs.writeFile(path.join(modulesPath, "index.ts"), indexContent, "utf-8");
 
-    console.log(`     ${icons.success} ${fmt.success('清理路由模块完成')}`)
+    console.log(`     ${icons.success} ${fmt.success("清理路由模块完成")}`);
   } catch (err) {
-    console.log(`     ${icons.error} ${fmt.error('清理路由模块失败')}`)
-    console.log(`     ${fmt.dim('错误详情: ' + err)}`)
+    console.log(`     ${icons.error} ${fmt.error("清理路由模块失败")}`);
+    console.log(`     ${fmt.dim("错误详情: " + err)}`);
   }
 }
 
 // 清理路由别名
 async function cleanRoutesAlias() {
-  const routesAliasPath = path.resolve(process.cwd(), 'src/router/routesAlias.ts')
+  const routesAliasPath = path.resolve(process.cwd(), "src/router/routesAlias.ts");
 
   try {
     const cleanedAlias = `/**
@@ -389,19 +382,19 @@ export enum RoutesAlias {
   Layout = '/index/index', // 布局容器
   Login = '/auth/login' // 登录页
 }
-`
+`;
 
-    await fs.writeFile(routesAliasPath, cleanedAlias, 'utf-8')
-    console.log(`     ${icons.success} ${fmt.success('重写路由别名配置完成')}`)
+    await fs.writeFile(routesAliasPath, cleanedAlias, "utf-8");
+    console.log(`     ${icons.success} ${fmt.success("重写路由别名配置完成")}`);
   } catch (err) {
-    console.log(`     ${icons.error} ${fmt.error('清理路由别名失败')}`)
-    console.log(`     ${fmt.dim('错误详情: ' + err)}`)
+    console.log(`     ${icons.error} ${fmt.error("清理路由别名失败")}`);
+    console.log(`     ${fmt.dim("错误详情: " + err)}`);
   }
 }
 
 // 清理变更日志
 async function cleanChangeLog() {
-  const changeLogPath = path.resolve(process.cwd(), 'src/mock/upgrade/changeLog.ts')
+  const changeLogPath = path.resolve(process.cwd(), "src/mock/upgrade/changeLog.ts");
 
   try {
     const cleanedChangeLog = `import { ref } from 'vue'
@@ -416,86 +409,86 @@ interface UpgradeLog {
 }
 
 export const upgradeLogList = ref<UpgradeLog[]>([])
-`
+`;
 
-    await fs.writeFile(changeLogPath, cleanedChangeLog, 'utf-8')
-    console.log(`     ${icons.success} ${fmt.success('清空变更日志数据完成')}`)
+    await fs.writeFile(changeLogPath, cleanedChangeLog, "utf-8");
+    console.log(`     ${icons.success} ${fmt.success("清空变更日志数据完成")}`);
   } catch (err) {
-    console.log(`     ${icons.error} ${fmt.error('清理变更日志失败')}`)
-    console.log(`     ${fmt.dim('错误详情: ' + err)}`)
+    console.log(`     ${icons.error} ${fmt.error("清理变更日志失败")}`);
+    console.log(`     ${fmt.dim("错误详情: " + err)}`);
   }
 }
 
 // 清理语言文件
 async function cleanLanguageFiles() {
   const languageFiles = [
-    { path: 'src/locales/langs/zh.json', name: '中文语言文件' },
-    { path: 'src/locales/langs/en.json', name: '英文语言文件' }
-  ]
+    { path: "src/locales/langs/zh.json", name: "中文语言文件" },
+    { path: "src/locales/langs/en.json", name: "英文语言文件" },
+  ];
 
   for (const { path: langPath, name } of languageFiles) {
     try {
-      const fullPath = path.resolve(process.cwd(), langPath)
-      const content = await fs.readFile(fullPath, 'utf-8')
-      const langData = JSON.parse(content)
+      const fullPath = path.resolve(process.cwd(), langPath);
+      const content = await fs.readFile(fullPath, "utf-8");
+      const langData = JSON.parse(content);
 
       const menusToRemove = [
-        'widgets',
-        'template',
-        'article',
-        'examples',
-        'safeguard',
-        'plan',
-        'help'
-      ]
+        "widgets",
+        "template",
+        "article",
+        "examples",
+        "safeguard",
+        "plan",
+        "help",
+      ];
 
       if (langData.menus) {
         menusToRemove.forEach((menuKey) => {
           if (langData.menus[menuKey]) {
-            delete langData.menus[menuKey]
+            delete langData.menus[menuKey];
           }
-        })
+        });
 
         if (langData.menus.dashboard) {
           if (langData.menus.dashboard.analysis) {
-            delete langData.menus.dashboard.analysis
+            delete langData.menus.dashboard.analysis;
           }
           if (langData.menus.dashboard.ecommerce) {
-            delete langData.menus.dashboard.ecommerce
+            delete langData.menus.dashboard.ecommerce;
           }
         }
 
         if (langData.menus.system) {
           const systemKeysToRemove = [
-            'nested',
-            'menu1',
-            'menu2',
-            'menu21',
-            'menu3',
-            'menu31',
-            'menu32',
-            'menu321'
-          ]
+            "nested",
+            "menu1",
+            "menu2",
+            "menu21",
+            "menu3",
+            "menu31",
+            "menu32",
+            "menu321",
+          ];
           systemKeysToRemove.forEach((key) => {
             if (langData.menus.system[key]) {
-              delete langData.menus.system[key]
+              delete langData.menus.system[key];
             }
-          })
+          });
         }
       }
 
-      await fs.writeFile(fullPath, JSON.stringify(langData, null, 2), 'utf-8')
-      console.log(`     ${icons.success} ${fmt.success(`清理${name}完成`)}`)
+      await fs.writeFile(fullPath, JSON.stringify(langData, null, 2), "utf-8");
+      console.log(`     ${icons.success} ${fmt.success(`清理${name}完成`)}`);
     } catch (err) {
-      console.log(`     ${icons.error} ${fmt.error(`清理${name}失败`)}`)
-      console.log(`     ${fmt.dim('错误详情: ' + err)}`)
+      console.log(`     ${icons.error} ${fmt.error(`清理${name}失败`)}`);
+      console.log(`     ${fmt.dim("错误详情: " + err)}`);
     }
   }
 }
 
 // 清理快速入口组件
 async function cleanFastEnterComponent() {
-  const fastEnterPath = path.resolve(process.cwd(), 'src/config/fastEnter.ts')
+  const fastEnterPath = path.resolve(process.cwd(), "src/config/fastEnter.ts");
 
   try {
     const cleanedFastEnter = `/**
@@ -559,13 +552,13 @@ const fastEnterConfig: FastEnterConfig = {
       name: '注册',
       enabled: true,
       order: 2,
-      routeName: 'Register'
+      routeName: 'Login'
     },
     {
       name: '忘记密码',
       enabled: true,
       order: 3,
-      routeName: 'ForgetPassword'
+      routeName: 'Login'
     },
     {
       name: '个人中心',
@@ -577,262 +570,262 @@ const fastEnterConfig: FastEnterConfig = {
 }
 
 export default Object.freeze(fastEnterConfig)
-`
+`;
 
-    await fs.writeFile(fastEnterPath, cleanedFastEnter, 'utf-8')
-    console.log(`     ${icons.success} ${fmt.success('清理快速入口配置完成')}`)
+    await fs.writeFile(fastEnterPath, cleanedFastEnter, "utf-8");
+    console.log(`     ${icons.success} ${fmt.success("清理快速入口配置完成")}`);
   } catch (err) {
-    console.log(`     ${icons.error} ${fmt.error('清理快速入口配置失败')}`)
-    console.log(`     ${fmt.dim('错误详情: ' + err)}`)
+    console.log(`     ${icons.error} ${fmt.error("清理快速入口配置失败")}`);
+    console.log(`     ${fmt.dim("错误详情: " + err)}`);
   }
 }
 
 // 更新菜单接口
 async function updateMenuApi() {
-  const apiPath = path.resolve(process.cwd(), 'src/api/system-manage.ts')
+  const apiPath = path.resolve(process.cwd(), "src/api/system-manage.ts");
 
   try {
-    const content = await fs.readFile(apiPath, 'utf-8')
+    const content = await fs.readFile(apiPath, "utf-8");
     const updatedContent = content.replace(
       "url: '/api/v3/system/menus'",
       "url: '/api/v3/system/menus/simple'"
-    )
+    );
 
-    await fs.writeFile(apiPath, updatedContent, 'utf-8')
-    console.log(`     ${icons.success} ${fmt.success('更新菜单接口完成')}`)
+    await fs.writeFile(apiPath, updatedContent, "utf-8");
+    console.log(`     ${icons.success} ${fmt.success("更新菜单接口完成")}`);
   } catch (err) {
-    console.log(`     ${icons.error} ${fmt.error('更新菜单接口失败')}`)
-    console.log(`     ${fmt.dim('错误详情: ' + err)}`)
+    console.log(`     ${icons.error} ${fmt.error("更新菜单接口失败")}`);
+    console.log(`     ${fmt.dim("错误详情: " + err)}`);
   }
 }
 
 // 用户确认函数
 async function getUserConfirmation(): Promise<boolean> {
-  const { createInterface } = await import('readline')
+  const { createInterface } = await import("readline");
 
   return new Promise((resolve) => {
     const rl = createInterface({
       input: process.stdin,
-      output: process.stdout
-    })
+      output: process.stdout,
+    });
 
     console.log(
-      `  ${fmt.highlight('请输入')} ${fmt.success('yes')} ${fmt.highlight('确认执行清理操作，或按 Enter 取消')}`
-    )
-    console.log()
-    process.stdout.write(`  ${icons.arrow} `)
+      `  ${fmt.highlight("请输入")} ${fmt.success("yes")} ${fmt.highlight("确认执行清理操作，或按 Enter 取消")}`
+    );
+    console.log();
+    process.stdout.write(`  ${icons.arrow} `);
 
-    rl.question('', (answer: string) => {
-      rl.close()
-      resolve(answer.toLowerCase().trim() === 'yes')
-    })
-  })
+    rl.question("", (answer: string) => {
+      rl.close();
+      resolve(answer.toLowerCase().trim() === "yes");
+    });
+  });
 }
 
 // 显示清理警告
 async function showCleanupWarning() {
-  createCard('安全警告', [
-    `${fmt.warning('此操作将永久删除以下演示内容，且无法恢复！')}`,
-    `${fmt.dim('请仔细阅读清理列表，确认后再继续操作')}`
-  ])
+  createCard("安全警告", [
+    `${fmt.warning("此操作将永久删除以下演示内容，且无法恢复！")}`,
+    `${fmt.dim("请仔细阅读清理列表，确认后再继续操作")}`,
+  ]);
 
   const cleanupItems = [
     {
       icon: icons.image,
-      name: '图片资源',
-      desc: '演示用的封面图片、3D图片、运维图片等',
-      color: theme.orange
+      name: "图片资源",
+      desc: "演示用的封面图片、3D图片、运维图片等",
+      color: theme.orange,
     },
     {
       icon: icons.file,
-      name: '演示页面',
-      desc: 'widgets、template、article、examples、safeguard等页面',
-      color: theme.purple
+      name: "演示页面",
+      desc: "widgets、template、article、examples、safeguard等页面",
+      color: theme.purple,
     },
     {
       icon: icons.code,
-      name: '路由模块文件',
-      desc: '删除演示路由模块，只保留核心模块（dashboard、system、result、exception）',
-      color: theme.primary
+      name: "路由模块文件",
+      desc: "删除演示路由模块，只保留核心模块（dashboard、system、result、exception）",
+      color: theme.primary,
     },
     {
       icon: icons.link,
-      name: '路由别名',
-      desc: '重写routesAlias.ts，移除演示路由别名',
-      color: theme.info
+      name: "路由别名",
+      desc: "重写routesAlias.ts，移除演示路由别名",
+      color: theme.info,
     },
     {
       icon: icons.data,
-      name: 'Mock数据',
-      desc: '演示用的JSON数据、文章列表、评论数据等',
-      color: theme.success
+      name: "Mock数据",
+      desc: "演示用的JSON数据、文章列表、评论数据等",
+      color: theme.success,
     },
     {
       icon: icons.globe,
-      name: '多语言文件',
-      desc: '清理中英文语言包中的演示菜单项',
-      color: theme.warning
+      name: "多语言文件",
+      desc: "清理中英文语言包中的演示菜单项",
+      color: theme.warning,
     },
-    { icon: icons.map, name: '地图组件', desc: '移除art-map-chart地图组件', color: theme.error },
-    { icon: icons.chat, name: '评论组件', desc: '移除comment-widget评论组件', color: theme.orange },
+    { icon: icons.map, name: "地图组件", desc: "移除art-map-chart地图组件", color: theme.error },
+    { icon: icons.chat, name: "评论组件", desc: "移除comment-widget评论组件", color: theme.orange },
     {
       icon: icons.bolt,
-      name: '快速入口',
-      desc: '移除分析页、礼花效果、聊天、更新日志、定价、留言管理等无效项目',
-      color: theme.purple
-    }
-  ]
+      name: "快速入口",
+      desc: "移除分析页、礼花效果、聊天、更新日志、定价、留言管理等无效项目",
+      color: theme.purple,
+    },
+  ];
 
-  console.log(`  ${fmt.badge('', theme.bgRed)} ${fmt.title('将要清理的内容')}`)
-  console.log()
+  console.log(`  ${fmt.badge("", theme.bgRed)} ${fmt.title("将要清理的内容")}`);
+  console.log();
 
   cleanupItems.forEach((item, index) => {
-    console.log(`     ${item.color}${theme.reset} ${fmt.highlight(`${index + 1}. ${item.name}`)}`)
-    console.log(`        ${fmt.dim(item.desc)}`)
-  })
+    console.log(`     ${item.color}${theme.reset} ${fmt.highlight(`${index + 1}. ${item.name}`)}`);
+    console.log(`        ${fmt.dim(item.desc)}`);
+  });
 
-  console.log()
-  console.log(`  ${fmt.badge('', theme.bgGreen)} ${fmt.title('保留的功能模块')}`)
-  console.log()
+  console.log();
+  console.log(`  ${fmt.badge("", theme.bgGreen)} ${fmt.title("保留的功能模块")}`);
+  console.log();
 
   const preservedModules = [
-    { name: 'Dashboard', desc: '工作台页面' },
-    { name: 'System', desc: '系统管理模块' },
-    { name: 'Result', desc: '结果页面' },
-    { name: 'Exception', desc: '异常页面' },
-    { name: 'Auth', desc: '登录注册功能' },
-    { name: 'Core Components', desc: '核心组件库' }
-  ]
+    { name: "Dashboard", desc: "工作台页面" },
+    { name: "System", desc: "系统管理模块" },
+    { name: "Result", desc: "结果页面" },
+    { name: "Exception", desc: "异常页面" },
+    { name: "Auth", desc: "登录注册功能" },
+    { name: "Core Components", desc: "核心组件库" },
+  ];
 
   preservedModules.forEach((module) => {
-    console.log(`     ${icons.check} ${fmt.success(module.name)} ${fmt.dim(`- ${module.desc}`)}`)
-  })
+    console.log(`     ${icons.check} ${fmt.success(module.name)} ${fmt.dim(`- ${module.desc}`)}`);
+  });
 
-  console.log()
-  createDivider()
-  console.log()
+  console.log();
+  createDivider();
+  console.log();
 }
 
 // 显示统计信息
 async function showStats() {
-  const duration = Date.now() - stats.startTime
-  const seconds = (duration / 1000).toFixed(2)
+  const duration = Date.now() - stats.startTime;
+  const seconds = (duration / 1000).toFixed(2);
 
-  console.log()
-  createCard('清理统计', [
-    `${fmt.success('成功删除')}: ${fmt.highlight(stats.deletedFiles.toString())} 个文件`,
-    `${fmt.info('涉及路径')}: ${fmt.highlight(stats.deletedPaths.toString())} 个目录/文件`,
+  console.log();
+  createCard("清理统计", [
+    `${fmt.success("成功删除")}: ${fmt.highlight(stats.deletedFiles.toString())} 个文件`,
+    `${fmt.info("涉及路径")}: ${fmt.highlight(stats.deletedPaths.toString())} 个目录/文件`,
     ...(stats.failedPaths > 0
       ? [
-          `${icons.error} ${fmt.error('删除失败')}: ${fmt.highlight(stats.failedPaths.toString())} 个路径`
+          `${icons.error} ${fmt.error("删除失败")}: ${fmt.highlight(stats.failedPaths.toString())} 个路径`,
         ]
       : []),
-    `${fmt.info('耗时')}: ${fmt.highlight(seconds)} 秒`
-  ])
+    `${fmt.info("耗时")}: ${fmt.highlight(seconds)} 秒`,
+  ]);
 }
 
 // 创建成功横幅
 function createSuccessBanner() {
-  console.log()
+  console.log();
   console.log(
-    fmt.gradient('  ╔══════════════════════════════════════════════════════════════════╗')
-  )
+    fmt.gradient("  ╔══════════════════════════════════════════════════════════════════╗")
+  );
   console.log(
-    fmt.gradient('  ║                                                                  ║')
-  )
+    fmt.gradient("  ║                                                                  ║")
+  );
   console.log(
-    `  ║                  ${icons.star} ${fmt.success('清理完成！项目已准备就绪')} ${icons.rocket}                  ║`
-  )
+    `  ║                  ${icons.star} ${fmt.success("清理完成！项目已准备就绪")} ${icons.rocket}                  ║`
+  );
   console.log(
-    `  ║                    ${fmt.dim('现在可以开始您的开发之旅了！')}                  ║`
-  )
+    `  ║                    ${fmt.dim("现在可以开始您的开发之旅了！")}                  ║`
+  );
   console.log(
-    fmt.gradient('  ║                                                                  ║')
-  )
+    fmt.gradient("  ║                                                                  ║")
+  );
   console.log(
-    fmt.gradient('  ╚══════════════════════════════════════════════════════════════════╝')
-  )
-  console.log()
+    fmt.gradient("  ╚══════════════════════════════════════════════════════════════════╝")
+  );
+  console.log();
 }
 
 // 主函数
 async function main() {
   // 清屏并显示横幅
-  console.clear()
-  createModernBanner()
+  console.clear();
+  createModernBanner();
 
   // 显示清理警告
-  await showCleanupWarning()
+  await showCleanupWarning();
 
   // 统计文件数量
-  console.log(`  ${fmt.info('正在统计文件数量...')}`)
-  stats.totalFiles = await countAllFiles()
+  console.log(`  ${fmt.info("正在统计文件数量...")}`);
+  stats.totalFiles = await countAllFiles();
 
-  console.log(`  ${fmt.info('即将清理')}: ${fmt.highlight(stats.totalFiles.toString())} 个文件`)
-  console.log(`  ${fmt.dim(`涉及 ${targets.length} 个目录/文件路径`)}`)
-  console.log()
+  console.log(`  ${fmt.info("即将清理")}: ${fmt.highlight(stats.totalFiles.toString())} 个文件`);
+  console.log(`  ${fmt.dim(`涉及 ${targets.length} 个目录/文件路径`)}`);
+  console.log();
 
   // 用户确认
-  const confirmed = await getUserConfirmation()
+  const confirmed = await getUserConfirmation();
 
   if (!confirmed) {
-    console.log(`  ${fmt.warning('操作已取消，清理中止')}`)
-    console.log()
-    return
+    console.log(`  ${fmt.warning("操作已取消，清理中止")}`);
+    console.log();
+    return;
   }
 
-  console.log()
-  console.log(`  ${icons.check} ${fmt.success('确认成功，开始清理...')}`)
-  console.log()
+  console.log();
+  console.log(`  ${icons.check} ${fmt.success("确认成功，开始清理...")}`);
+  console.log();
 
   // 开始清理过程
-  console.log(`  ${fmt.badge('步骤 1/6', theme.bgBlue)} ${fmt.title('删除演示文件')}`)
-  console.log()
+  console.log(`  ${fmt.badge("步骤 1/6", theme.bgBlue)} ${fmt.title("删除演示文件")}`);
+  console.log();
   for (let i = 0; i < targets.length; i++) {
-    await remove(targets[i], i)
+    await remove(targets[i], i);
   }
-  console.log()
+  console.log();
 
-  console.log(`  ${fmt.badge('步骤 2/6', theme.bgBlue)} ${fmt.title('清理路由模块')}`)
-  console.log()
-  await cleanRouteModules()
-  console.log()
+  console.log(`  ${fmt.badge("步骤 2/6", theme.bgBlue)} ${fmt.title("清理路由模块")}`);
+  console.log();
+  await cleanRouteModules();
+  console.log();
 
-  console.log(`  ${fmt.badge('步骤 3/6', theme.bgBlue)} ${fmt.title('重写路由别名')}`)
-  console.log()
-  await cleanRoutesAlias()
-  console.log()
+  console.log(`  ${fmt.badge("步骤 3/6", theme.bgBlue)} ${fmt.title("重写路由别名")}`);
+  console.log();
+  await cleanRoutesAlias();
+  console.log();
 
-  console.log(`  ${fmt.badge('步骤 4/6', theme.bgBlue)} ${fmt.title('清空变更日志')}`)
-  console.log()
-  await cleanChangeLog()
-  console.log()
+  console.log(`  ${fmt.badge("步骤 4/6", theme.bgBlue)} ${fmt.title("清空变更日志")}`);
+  console.log();
+  await cleanChangeLog();
+  console.log();
 
-  console.log(`  ${fmt.badge('步骤 5/6', theme.bgBlue)} ${fmt.title('清理语言文件')}`)
-  console.log()
-  await cleanLanguageFiles()
-  console.log()
+  console.log(`  ${fmt.badge("步骤 5/6", theme.bgBlue)} ${fmt.title("清理语言文件")}`);
+  console.log();
+  await cleanLanguageFiles();
+  console.log();
 
-  console.log(`  ${fmt.badge('步骤 6/7', theme.bgBlue)} ${fmt.title('清理快速入口')}`)
-  console.log()
-  await cleanFastEnterComponent()
-  console.log()
+  console.log(`  ${fmt.badge("步骤 6/7", theme.bgBlue)} ${fmt.title("清理快速入口")}`);
+  console.log();
+  await cleanFastEnterComponent();
+  console.log();
 
-  console.log(`  ${fmt.badge('步骤 7/7', theme.bgBlue)} ${fmt.title('更新菜单接口')}`)
-  console.log()
-  await updateMenuApi()
+  console.log(`  ${fmt.badge("步骤 7/7", theme.bgBlue)} ${fmt.title("更新菜单接口")}`);
+  console.log();
+  await updateMenuApi();
 
   // 显示统计信息
-  await showStats()
+  await showStats();
 
   // 显示成功横幅
-  createSuccessBanner()
+  createSuccessBanner();
 }
 
 main().catch((err) => {
-  console.log()
-  console.log(`  ${icons.error} ${fmt.error('清理脚本执行出错')}`)
-  console.log(`  ${fmt.dim('错误详情: ' + err)}`)
-  console.log()
-  process.exit(1)
-})
+  console.log();
+  console.log(`  ${icons.error} ${fmt.error("清理脚本执行出错")}`);
+  console.log(`  ${fmt.dim("错误详情: " + err)}`);
+  console.log();
+  process.exit(1);
+});
diff --git a/frontend/new-web/src/App.vue b/frontend/new-web/src/App.vue
index d941a489..a150ee4b 100755
--- a/frontend/new-web/src/App.vue
+++ b/frontend/new-web/src/App.vue
@@ -1,41 +1,74 @@
 <template>
   <ElConfigProvider
-    size="default"
-    :locale="locales[language]"
+    :size="size"
+    :locale="locale"
     :z-index="3000"
     :card="{
-      shadow: 'never'
+      shadow: 'never',
     }"
   >
-    <RouterView></RouterView>
+    <el-watermark
+      :font="{ color: fontColor }"
+      :content="showWatermark ? watermarkContent : ''"
+      :z-index="9999"
+      class="wh-full"
+    >
+      <RouterView></RouterView>
+
+      <!-- AI 助手 -->
+      <AiAssistant v-if="enableAiAssistant" />
+    </el-watermark>
   </ElConfigProvider>
 </template>
 
 <script setup lang="ts">
-  import { useUserStore } from './store/modules/user'
-  import zh from 'element-plus/es/locale/lang/zh-cn'
-  import en from 'element-plus/es/locale/lang/en'
-  import { systemUpgrade } from './utils/sys'
-  import { toggleTransition } from './utils/ui/animation'
-  import { checkStorageCompatibility } from './utils/storage'
-  import { initializeTheme } from './hooks/core/useTheme'
+import { computed, onBeforeMount, onMounted } from "vue";
+import { useAppStore, useUserStore } from "./store";
+import { useSettingsStore } from "./store/modules/setting.store";
+import { defaultSettings } from "./config/setting";
+import { ComponentSize } from "./enums/settings/layout.enum";
+import AiAssistant from "./components/AiAssistant/index.vue";
+import { toggleTransition } from "./utils/ui/animation";
+import { checkStorageCompatibility } from "./utils/storage";
+import { initializeTheme } from "./hooks/core/useTheme";
+import { systemUpgrade } from "./utils/sys";
+import { ThemeMode } from "./enums";
+import en from "element-plus/es/locale/lang/en";
+import zhCn from "element-plus/es/locale/lang/zh-cn";
 
-  const userStore = useUserStore()
-  const { language } = storeToRefs(userStore)
+const appStore = useAppStore();
+const settingsStore = useSettingsStore();
+const userStore = useUserStore();
 
-  const locales = {
-    zh: zh,
-    en: en
-  }
+const size = computed(() => appStore.size as ComponentSize);
+const showWatermark = computed(() => settingsStore.showWatermark);
+const watermarkContent = defaultSettings.watermarkContent;
 
-  onBeforeMount(() => {
-    toggleTransition(true)
-    initializeTheme()
-  })
+// 根据语言设置返回对应的语言包
+const locale = computed(() => {
+  return appStore.language === "en" ? en : zhCn;
+});
 
-  onMounted(() => {
-    checkStorageCompatibility()
-    toggleTransition(false)
-    systemUpgrade()
-  })
+// 只有在启用 AI 助手且用户已登录时才显示
+const enableAiAssistant = computed(() => {
+  const isEnabled = settingsStore.userEnableAi;
+  const isLoggedIn = userStore.basicInfo && Object.keys(userStore.basicInfo).length > 0;
+  return isEnabled && isLoggedIn;
+});
+
+// 明亮/暗黑主题水印字体颜色适配
+const fontColor = computed(() => {
+  return settingsStore.theme === ThemeMode.DARK ? "rgba(255, 255, 255, .15)" : "rgba(0, 0, 0, .15)";
+});
+
+onBeforeMount(() => {
+  toggleTransition(true);
+  initializeTheme();
+});
+
+onMounted(() => {
+  checkStorageCompatibility();
+  toggleTransition(false);
+  systemUpgrade();
+});
 </script>
diff --git a/frontend/new-web/src/api/auth.ts b/frontend/new-web/src/api/auth.ts
index 9dc7b6a2..355bae90 100644
--- a/frontend/new-web/src/api/auth.ts
+++ b/frontend/new-web/src/api/auth.ts
@@ -1,29 +1,53 @@
-import request from '@/utils/http'
-
 /**
- * 登录
- * @param params 登录参数
- * @returns 登录响应
+ * 认证相关便捷接口（示例页等使用 `@/api/auth` 路径导入）
+ * 实现委托至 `@/api/module_system/auth` / `user`
  */
-export function fetchLogin(params: Api.Auth.LoginParams) {
-  return request.post<Api.Auth.LoginResponse>({
-    url: '/api/auth/login',
-    params
-    // showSuccessMessage: true // 显示成功消息
-    // showErrorMessage: false // 不显示错误消息
-  })
+import AuthAPI, { type LoginFormData } from "@/api/module_system/auth";
+import UserAPI, { type UserInfo } from "@/api/module_system/user";
+import { ResultEnum } from "@/enums/api/result.enum";
+
+export interface FetchLoginParams {
+  userName: string;
+  password: string;
 }
 
-/**
- * 获取用户信息
- * @returns 用户信息
- */
-export function fetchGetUserInfo() {
-  return request.get<Api.Auth.UserInfo>({
-    url: '/api/user/info'
-    // 自定义请求头
-    // headers: {
-    //   'X-Custom-Header': 'your-custom-value'
-    // }
-  })
+export async function fetchLogin(params: FetchLoginParams): Promise<{
+  token: string;
+  refreshToken: string;
+}> {
+  const captchaRes = await AuthAPI.getCaptcha();
+  const captchaInfo = captchaRes.data?.data;
+
+  const loginForm: LoginFormData = {
+    username: params.userName,
+    password: params.password,
+    captcha_key: captchaInfo?.key ?? "",
+    captcha: "",
+    remember: false,
+    login_type: "PC端",
+  };
+
+  const response = await AuthAPI.login(loginForm);
+  if (response.data.code !== ResultEnum.SUCCESS || !response.data.data) {
+    throw new Error(response.data.msg || "登录失败");
+  }
+
+  const data = response.data.data;
+  return {
+    token: data.access_token,
+    refreshToken: data.refresh_token,
+  };
+}
+
+/** 使用当前请求上下文中的 token 拉取用户信息（与 store.getUserInfo 数据来源一致） */
+export async function fetchGetUserInfo(): Promise<UserInfo> {
+  const response = await UserAPI.getCurrentUserInfo();
+  if (response.data.code !== ResultEnum.SUCCESS || response.data.data == null) {
+    throw new Error(response.data.msg || "获取用户信息失败");
+  }
+
+  const raw = response.data.data;
+  const next = { ...raw };
+  delete next.menus;
+  return next as UserInfo;
 }
diff --git a/frontend/new-web/src/api/module_ai/chat.ts b/frontend/new-web/src/api/module_ai/chat.ts
new file mode 100644
index 00000000..cf4f112f
--- /dev/null
+++ b/frontend/new-web/src/api/module_ai/chat.ts
@@ -0,0 +1,140 @@
+import request from "@/utils/http";
+
+const API_PATH = "/ai/chat";
+
+export const AiChatAPI = {
+  getSessionList(query: {
+    page_no: number;
+    page_size: number;
+    title?: string;
+    created_at?: string[];
+    updated_at?: string[];
+  }) {
+    return request<ApiResponse<PageResult<ChatSession[]>>>({
+      url: `${API_PATH}/list`,
+      method: "get",
+      params: query,
+    });
+  },
+
+  createSession(body: { title: string }) {
+    return request<ApiResponse<ChatSession>>({
+      url: `${API_PATH}/create`,
+      method: "post",
+      data: body,
+    });
+  },
+
+  updateSession(id: string, body: { title: string }) {
+    return request<ApiResponse<ChatSession>>({
+      url: `${API_PATH}/update/${id}`,
+      method: "put",
+      data: body,
+    });
+  },
+
+  deleteSession(body: string[]) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/delete`,
+      method: "delete",
+      data: body,
+    });
+  },
+
+  chat(body: { message: string; session_id?: string | null }) {
+    return request<ApiResponse<AiChatResponse>>({
+      url: `${API_PATH}/ai-chat`,
+      method: "post",
+      data: body,
+    });
+  },
+
+  getSessionDetail(sessionId: string) {
+    return request<ApiResponse<ChatSessionDetail>>({
+      url: `${API_PATH}/detail/${sessionId}`,
+      method: "get",
+    });
+  },
+};
+
+export default AiChatAPI;
+
+export interface ChatSessionMessage {
+  id: string;
+  role: string;
+  content: string;
+  created_at: number | null;
+}
+
+export interface ChatSession {
+  session_id: string;
+  agent_id: string | null;
+  team_id: string | null;
+  team_name: string | null;
+  workflow_id: string | null;
+  user_id: string | null;
+  session_data: Record<string, any> | null;
+  agent_data: Record<string, any> | null;
+  team_data: Record<string, any> | null;
+  workflow_data: Record<string, any> | null;
+  metadata: Record<string, any> | null;
+  runs: Array<Record<string, any>> | null;
+  summary: Record<string, any> | null;
+  created_at: number | null;
+  updated_at: number | null;
+
+  id: string;
+  title: string | null;
+  created_time: string | null;
+  updated_time: string | null;
+  message_count: number;
+  messages: ChatSessionMessage[];
+}
+
+export interface SessionGroup {
+  id: string;
+  title: string;
+  sessions: ChatSession[];
+}
+
+export interface UserInfo {
+  id: number;
+  name: string;
+  username: string;
+  avatar: string;
+  email: string;
+}
+
+export interface AiChatResponse {
+  response: string;
+  session_id: string;
+  function_calls: Array<{
+    name: string;
+    arguments: Record<string, any>;
+  }> | null;
+}
+
+export interface ChatSessionDetail {
+  session_id: string;
+  agent_id: string | null;
+  team_id: string | null;
+  team_name: string | null;
+  workflow_id: string | null;
+  user_id: string | null;
+  session_data: Record<string, any> | null;
+  agent_data: Record<string, any> | null;
+  team_data: Record<string, any> | null;
+  workflow_data: Record<string, any> | null;
+  metadata: Record<string, any> | null;
+  runs: Array<Record<string, any>> | null;
+  summary: Record<string, any> | null;
+  created_at: number | null;
+  updated_at: number | null;
+
+  id: string;
+  title: string | null;
+  created_time: string | null;
+  updated_time: string | null;
+  message_count: number;
+  messages: ChatSessionMessage[];
+}
diff --git a/frontend/new-web/src/api/module_application/portal.ts b/frontend/new-web/src/api/module_application/portal.ts
new file mode 100644
index 00000000..dfb9e1a2
--- /dev/null
+++ b/frontend/new-web/src/api/module_application/portal.ts
@@ -0,0 +1,114 @@
+import request from "@/utils/http";
+
+const API_PATH = "/application/portal";
+
+export const ApplicationAPI = {
+  /**
+   * 获取应用详情
+   * @param id 应用ID
+   */
+  detailApp(id: number) {
+    return request<ApiResponse<ApplicationInfo>>({
+      url: `${API_PATH}/detail/${id}`,
+      method: "get",
+    });
+  },
+
+  /**
+   * 查询应用列表
+   * @param query 查询参数
+   */
+  listApp(query: ApplicationPageQuery) {
+    return request<ApiResponse<PageResult<ApplicationInfo[]>>>({
+      url: `${API_PATH}/list`,
+      method: "get",
+      params: query,
+    });
+  },
+
+  /**
+   * 创建应用
+   * @param body 应用信息
+   */
+  createApp(body: ApplicationForm) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/create`,
+      method: "post",
+      data: body,
+    });
+  },
+
+  /**
+   * 修改应用
+   * @param id 应用ID
+   * @param body 应用信息
+   */
+  updateApp(id: number, body: ApplicationForm) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/update/${id}`,
+      method: "put",
+      data: body,
+    });
+  },
+
+  /**
+   * 删除应用
+   * @param body 应用ID数组
+   */
+  deleteApp(body: number[]) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/delete`,
+      method: "delete",
+      data: body,
+    });
+  },
+
+  /**
+   * 批量修改应用状态
+   * @param body 批量操作参数
+   */
+  batchApp(body: BatchType) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/available/setting`,
+      method: "patch",
+      data: body,
+    });
+  },
+};
+
+export default ApplicationAPI;
+
+/**
+ * 应用分页查询参数
+ */
+export interface ApplicationPageQuery extends PageQuery {
+  name?: string;
+  tenant_id?: number;
+  status?: string;
+  created_id?: number;
+  created_time?: string[];
+  updated_id?: number;
+  updated_time?: string[];
+}
+
+/**
+ * 应用信息
+ */
+export interface ApplicationInfo extends BaseType {
+  name?: string;
+  access_url?: string;
+  icon_url?: string;
+  tenant?: TenantType;
+  created_by?: CommonType;
+  updated_by?: CommonType;
+  deleted_by?: CommonType;
+}
+
+/**
+ * 应用表单
+ */
+export interface ApplicationForm extends BaseFormType {
+  name: string;
+  access_url: string;
+  icon_url: string;
+}
diff --git a/frontend/new-web/src/api/module_example/demo.ts b/frontend/new-web/src/api/module_example/demo.ts
new file mode 100644
index 00000000..92647c0c
--- /dev/null
+++ b/frontend/new-web/src/api/module_example/demo.ts
@@ -0,0 +1,124 @@
+import request from "@/utils/http";
+
+const API_PATH = "/example/demo";
+
+const DemoAPI = {
+  getDemoList(query: DemoPageQuery) {
+    return request<ApiResponse<PageResult<DemoTable[]>>>({
+      url: `${API_PATH}/list`,
+      method: "get",
+      params: query,
+    });
+  },
+
+  getDemoDetail(query: number) {
+    return request<ApiResponse<DemoTable>>({
+      url: `${API_PATH}/detail/${query}`,
+      method: "get",
+    });
+  },
+
+  createDemo(body: DemoForm) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/create`,
+      method: "post",
+      data: body,
+    });
+  },
+
+  updateDemo(id: number, body: DemoForm) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/update/${id}`,
+      method: "put",
+      data: body,
+    });
+  },
+
+  deleteDemo(body: number[]) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/delete`,
+      method: "delete",
+      data: body,
+    });
+  },
+
+  batchDemo(body: BatchType) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/available/setting`,
+      method: "patch",
+      data: body,
+    });
+  },
+
+  exportDemo(body: DemoPageQuery) {
+    return request<Blob>({
+      url: `${API_PATH}/export`,
+      method: "post",
+      data: body,
+      responseType: "blob",
+    });
+  },
+
+  downloadTemplateDemo() {
+    return request<ApiResponse>({
+      url: `${API_PATH}/download/template`,
+      method: "post",
+      responseType: "blob",
+    });
+  },
+
+  importDemo(body: FormData) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/import`,
+      method: "post",
+      data: body,
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    });
+  },
+};
+
+export default DemoAPI;
+
+export interface DemoPageQuery extends PageQuery {
+  name?: string;
+  status?: string;
+  created_time?: string[];
+  updated_time?: string[];
+  created_id?: number;
+  updated_id?: number;
+}
+
+export interface DemoTable extends BaseType {
+  name?: string;
+  status?: string;
+  description?: string;
+  created_by?: CommonType;
+  updated_by?: CommonType;
+  deleted_by?: CommonType;
+  a?: number;
+  b?: number;
+  c?: number;
+  d?: boolean;
+  e?: string;
+  f?: string;
+  g?: string;
+  h?: string;
+  i?: Record<string, any>;
+}
+
+export interface DemoForm extends BaseFormType {
+  name?: string;
+  status?: string;
+  description?: string;
+  a?: number;
+  b?: number;
+  c?: number;
+  d?: boolean;
+  e?: string;
+  f?: Date | string;
+  g?: Date | string;
+  h?: string;
+  i?: Record<string, any>;
+}
diff --git a/frontend/new-web/src/api/module_example/demo01.ts b/frontend/new-web/src/api/module_example/demo01.ts
new file mode 100644
index 00000000..5262431e
--- /dev/null
+++ b/frontend/new-web/src/api/module_example/demo01.ts
@@ -0,0 +1,116 @@
+import request from "@/utils/http";
+
+const API_PATH = "/example/demo01";
+
+const Demo01API = {
+  getDemo01List(query: Demo01PageQuery) {
+    return request<ApiResponse<PageResult<Demo01Table[]>>>({
+      url: `${API_PATH}/list`,
+      method: "get",
+      params: query,
+    });
+  },
+
+  getDemo01Detail(id: number) {
+    return request<ApiResponse<Demo01Table>>({
+      url: `${API_PATH}/detail/${id}`,
+      method: "get",
+    });
+  },
+
+  createDemo01(body: Demo01Form) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/create`,
+      method: "post",
+      data: body,
+    });
+  },
+
+  updateDemo01(id: number, body: Demo01Form) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/update/${id}`,
+      method: "put",
+      data: body,
+    });
+  },
+
+  deleteDemo01(body: number[]) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/delete`,
+      method: "delete",
+      data: body,
+    });
+  },
+
+  batchDemo01(body: BatchType) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/available/setting`,
+      method: "patch",
+      data: body,
+    });
+  },
+
+  exportDemo01(body: Demo01PageQuery) {
+    return request<Blob>({
+      url: `${API_PATH}/export`,
+      method: "post",
+      data: body,
+      responseType: "blob",
+    });
+  },
+
+  downloadDemo01Template() {
+    return request<ApiResponse>({
+      url: `${API_PATH}/download/template`,
+      method: "post",
+      responseType: "blob",
+    });
+  },
+
+  importDemo01(body: FormData) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/import`,
+      method: "post",
+      data: body,
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    });
+  },
+};
+
+export default Demo01API;
+
+export interface Demo01PageQuery extends PageQuery {
+  /** 与后端 Demo01QueryParam 一致 */
+  name?: string;
+  description?: string;
+  /** 是否启用：0 启用 / 1 禁用（字符串） */
+  status?: string;
+  created_time?: string[];
+  updated_time?: string[];
+  created_id?: number;
+  updated_id?: number;
+}
+
+/**
+ * 与后端 Demo01OutSchema 一致：
+ * Demo01CreateSchema(name,status,description) + BaseSchema + UserBySchema
+ */
+export interface Demo01Table extends BaseType {
+  name?: string;
+  status?: string;
+  description?: string;
+  created_id?: number;
+  updated_id?: number;
+  created_by?: CommonType;
+  updated_by?: CommonType;
+  deleted_by?: CommonType;
+}
+
+/** 与后端 Demo01CreateSchema / Demo01UpdateSchema 一致（不含 id，更新走 URL） */
+export interface Demo01Form extends BaseFormType {
+  name?: string;
+  status?: string;
+  description?: string;
+}
diff --git a/frontend/new-web/src/api/module_generator/gencode.ts b/frontend/new-web/src/api/module_generator/gencode.ts
new file mode 100644
index 00000000..747d5728
--- /dev/null
+++ b/frontend/new-web/src/api/module_generator/gencode.ts
@@ -0,0 +1,199 @@
+import request from "@/utils/http";
+
+const API_PATH = "/generator/gencode";
+
+const GencodeAPI = {
+  // 查询生成表数据
+  listTable(query: GenTablePageQuery) {
+    return request<ApiResponse<PageResult<GenTableSchema[]>>>({
+      url: `${API_PATH}/list`,
+      method: "get",
+      params: query,
+    });
+  },
+
+  // 查询db数据库列表
+  listDbTable(query: DBTablePageQuery) {
+    return request<ApiResponse<PageResult<DBTableSchema[]>>>({
+      url: `${API_PATH}/db/list`,
+      method: "get",
+      params: query,
+    });
+  },
+
+  // 导入表
+  importTable(table_names: string[]) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/import`,
+      method: "post",
+      data: table_names,
+    });
+  },
+
+  // 查询表详细信息
+  detailTable(table_id: number) {
+    return request<ApiResponse<GenTableSchema>>({
+      url: `${API_PATH}/detail/${table_id}`,
+      method: "get",
+    });
+  },
+
+  // 创建表（与后端 GenCreateTableSqlBody 一致）
+  createTable(sql: string) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/create`,
+      method: "post",
+      data: { sql },
+    });
+  },
+
+  // 更新表信息
+  updateTable(data: GenTableSchema, table_id: number) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/update/${table_id}`,
+      method: "put",
+      data,
+    });
+  },
+
+  // 删除表数据
+  deleteTable(table_ids: number[]) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/delete`,
+      method: "delete",
+      data: table_ids,
+    });
+  },
+
+  // 批量生成代码
+  batchGenCode(table_names: string[]) {
+    return request<Blob>({
+      url: `${API_PATH}/batch/output`,
+      method: "patch",
+      data: table_names,
+      responseType: "blob",
+    });
+  },
+
+  // 生成代码到指定路径
+  genCodeToPath(table_name: string) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/output/${table_name}`,
+      method: "post",
+    });
+  },
+
+  // 预览生成代码
+  previewTable(id: number) {
+    return request<ApiResponse<Record<string, string>>>({
+      url: `${API_PATH}/preview/${id}`,
+      method: "get",
+    });
+  },
+
+  // 同步数据库
+  syncDb(table_name: string) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/sync_db/${table_name}`,
+      method: "post",
+    });
+  },
+
+  // 同步数据库差异预览（不落库）
+  syncDbPreview(table_name: string) {
+    return request<ApiResponse<GenSyncPreviewSchema>>({
+      url: `${API_PATH}/sync_db/preview/${table_name}`,
+      method: "get",
+    });
+  },
+};
+
+export default GencodeAPI;
+
+/** 代码生成预览对象 */
+export interface GeneratorPreviewVO {
+  /** 文件生成路径 */
+  path: string;
+  /** 文件名称 */
+  file_name: string;
+  /** 文件内容 */
+  content: string;
+}
+
+/** 业务表结构 */
+export interface GenTableSchema extends BaseType {
+  table_name?: string;
+  table_comment?: string;
+  class_name?: string;
+  package_name?: string;
+  module_name?: string;
+  business_name?: string;
+  function_name?: string;
+  description?: string;
+  parent_menu_id?: number;
+  sub?: boolean;
+  sub_table_name?: string;
+  sub_table_fk_name?: string;
+  master_sub_hint?: string | null;
+  pk_column?: GenTableColumnSchema;
+  columns: GenTableColumnSchema[];
+  sub_table?: GenTableSchema;
+}
+
+export interface GenTableColumnSchema extends BaseType {
+  table_id?: number;
+  column_name?: string;
+  column_comment?: string;
+  column_type?: string;
+  column_length?: string;
+  column_default?: string;
+  is_pk?: boolean;
+  is_increment?: boolean;
+  is_nullable?: boolean;
+  is_unique?: boolean;
+  sort?: number;
+  python_type?: string;
+  python_field?: string;
+  html_type?: string | null;
+  dict_type?: string;
+  is_insert?: boolean | null;
+  is_edit?: boolean | null;
+  is_list?: boolean | null;
+  is_query?: boolean | null;
+  query_type?: string | null;
+}
+
+/** 查询参数：生成表 */
+export interface GenTablePageQuery extends PageQuery {
+  table_name?: string;
+  table_comment?: string;
+}
+
+/** 查询参数：DB 表 */
+export interface DBTablePageQuery extends PageQuery {
+  table_name?: string;
+  table_comment?: string;
+}
+
+export interface DBTableSchema {
+  table_name: string;
+  table_comment?: string;
+  create_time?: string;
+  update_time?: string;
+}
+
+export interface GenSyncColumnChange {
+  column_name: string;
+  before?: Record<string, any> | null;
+  after?: Record<string, any> | null;
+  changed_keys?: string[];
+}
+
+export interface GenSyncPreviewSchema {
+  table_name: string;
+  added: string[];
+  removed: string[];
+  unchanged: string[];
+  changed: GenSyncColumnChange[];
+  sub_tables?: GenSyncPreviewSchema[];
+}
diff --git a/frontend/new-web/src/api/module_monitor/cache.ts b/frontend/new-web/src/api/module_monitor/cache.ts
new file mode 100644
index 00000000..dffe1a63
--- /dev/null
+++ b/frontend/new-web/src/api/module_monitor/cache.ts
@@ -0,0 +1,95 @@
+import request from "@/utils/http";
+
+const API_PATH = "/monitor/cache";
+
+const CacheAPI = {
+  getCacheInfo() {
+    return request<ApiResponse>({
+      url: `${API_PATH}/info`,
+      method: "get",
+    });
+  },
+
+  getCacheNames() {
+    return request<ApiResponse>({
+      url: `${API_PATH}/get/names`,
+      method: "get",
+    });
+  },
+
+  getCacheKeys(cacheName: string) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/get/keys/${cacheName}`,
+      method: "get",
+    });
+  },
+
+  getCacheValue(cacheName: string, cacheKey: string) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/get/value/${cacheName}/${cacheKey}`,
+      method: "get",
+    });
+  },
+
+  deleteCacheName(cacheName: string) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/delete/name/${cacheName}`,
+      method: "delete",
+    });
+  },
+
+  deleteCacheKey(cacheKey: string) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/delete/key/${cacheKey}`,
+      method: "delete",
+    });
+  },
+
+  deleteCacheAll() {
+    return request<ApiResponse>({
+      url: `${API_PATH}/delete/all`,
+      method: "delete",
+    });
+  },
+};
+
+export default CacheAPI;
+
+export interface CacheForm {
+  cache_name: string;
+  cache_key: string;
+  cache_value: string;
+}
+
+export interface CacheInfo {
+  cache_key: string;
+  cache_name: string;
+  cache_value: string;
+  remark: string;
+}
+
+export interface CommandStats {
+  name: string;
+  value: string;
+}
+
+export interface RedisInfo {
+  redis_version: string;
+  redis_mode: string;
+  tcp_port: number;
+  connected_clients: number;
+  uptime_in_days: number;
+  used_memory_human: string;
+  used_cpu_user_children: string;
+  maxmemory_human: string;
+  aof_enabled: string;
+  rdb_last_bgsave_status: string;
+  instantaneous_input_kbps: number;
+  instantaneous_output_kbps: number;
+}
+
+export interface CacheMonitor {
+  command_stats: CommandStats[];
+  db_size: number;
+  info: RedisInfo;
+}
diff --git a/frontend/new-web/src/api/module_monitor/online.ts b/frontend/new-web/src/api/module_monitor/online.ts
new file mode 100644
index 00000000..5ce44ae9
--- /dev/null
+++ b/frontend/new-web/src/api/module_monitor/online.ts
@@ -0,0 +1,52 @@
+import request from "@/utils/http";
+
+const API_PATH = "/monitor/online";
+
+const OnlineAPI = {
+  // 查询在线用户列表
+  listOnline(query: OnlineUserPageQuery) {
+    return request<ApiResponse<PageResult<OnlineUserTable[]>>>({
+      url: `${API_PATH}/list`,
+      method: "get",
+      params: query,
+    });
+  },
+
+  // 强退用户
+  deleteOnline(body: string) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/delete`,
+      method: "delete",
+      data: body,
+    });
+  },
+
+  // 强退用户
+  clearOnline() {
+    return request<ApiResponse>({
+      url: `${API_PATH}/clear`,
+      method: "delete",
+    });
+  },
+};
+
+export default OnlineAPI;
+
+export interface OnlineUserPageQuery extends PageQuery {
+  ipaddr?: string;
+  name?: string;
+  login_location?: string;
+}
+
+export interface OnlineUserTable {
+  session_id: string;
+  user_id: number;
+  name: string;
+  user_name: string;
+  ipaddr: string;
+  login_location: string;
+  os: string;
+  browser: string;
+  login_time: string;
+  login_type: string;
+}
diff --git a/frontend/new-web/src/api/module_monitor/resource.ts b/frontend/new-web/src/api/module_monitor/resource.ts
new file mode 100644
index 00000000..267e804f
--- /dev/null
+++ b/frontend/new-web/src/api/module_monitor/resource.ts
@@ -0,0 +1,248 @@
+import request from "@/utils/http";
+
+const API_PATH = "/monitor/resource";
+
+export const ResourceAPI = {
+  /**
+   * 获取目录列表
+   * @param query 查询参数
+   */
+  listResource(query: ResourcePageQuery) {
+    return request<ApiResponse<PageResult<ResourceItem[]>>>({
+      url: `${API_PATH}/list`,
+      method: "get",
+      params: query,
+    });
+  },
+
+  /**
+   * 上传文件
+   * @param formData 文件数据
+   */
+  uploadFile(formData: FormData) {
+    return request<ApiResponse<ResourceUploadSchema>>({
+      url: `${API_PATH}/upload`,
+      method: "post",
+      data: formData,
+      headers: { "Content-Type": "multipart/form-data" },
+    });
+  },
+
+  /**
+   * 下载文件
+   * @param path 文件路径
+   */
+  downloadFile(path: string) {
+    return request<Blob>({
+      url: `${API_PATH}/download`,
+      method: "get",
+      params: { path },
+      responseType: "blob",
+    });
+  },
+
+  /**
+   * 删除文件或目录
+   * @param body 文件路径数组
+   */
+  deleteResource(body: string[]) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/delete`,
+      method: "delete",
+      data: body,
+    });
+  },
+
+  /**
+   * 移动文件或目录
+   * @param body 移动参数
+   */
+  moveResource(body: ResourceMoveQuery) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/move`,
+      method: "post",
+      data: body,
+    });
+  },
+
+  /**
+   * 复制文件或目录
+   * @param body 复制参数
+   */
+  copyResource(body: ResourceCopyQuery) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/copy`,
+      method: "post",
+      data: body,
+    });
+  },
+
+  /**
+   * 重命名文件或目录
+   * @param body 重命名参数
+   */
+  renameResource(body: ResourceRenameQuery) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/rename`,
+      method: "post",
+      data: body,
+    });
+  },
+
+  /**
+   * 创建目录
+   * @param body 创建目录参数
+   */
+  createDirectory(body: ResourceCreateDirQuery) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/create-dir`,
+      method: "post",
+      data: body,
+    });
+  },
+
+  /**
+   * 导出资源列表
+   * @param body 导出条件
+   */
+  exportResource(body: ResourcePageQuery) {
+    return request<Blob>({
+      url: `${API_PATH}/export`,
+      method: "post",
+      data: body,
+      responseType: "blob",
+    });
+  },
+};
+
+export default ResourceAPI;
+
+/**
+ * 资源列表查询参数
+ */
+export interface ResourceListQuery {
+  /** 目录路径 */
+  path?: string;
+  /** 包含隐藏文件 */
+  include_hidden?: boolean;
+}
+
+/**
+ * 资源目录模型
+ */
+export interface ResourceDirectorySchema {
+  /** 目录路径 */
+  path: string;
+  /** 目录名称 */
+  name: string;
+  /** 目录项 */
+  items: ResourceItem[];
+  /** 文件总数 */
+  total_files: number;
+  /** 目录总数 */
+  total_dirs: number;
+  /** 总大小 */
+  total_size: number;
+}
+
+/**
+ * 资源搜索查询参数
+ */
+export interface ResourceSearchQuery {
+  /** 关键词 */
+  name?: string;
+}
+
+/**
+ * 资源分页查询参数
+ */
+export interface ResourcePageQuery extends PageQuery {
+  /** 关键词 */
+  name?: string;
+  /** 目录路径 */
+  path?: string;
+  /** 包含隐藏文件 */
+  include_hidden?: boolean;
+}
+
+/**
+ * 资源上传响应模型
+ */
+export interface ResourceUploadSchema {
+  /** 文件名 */
+  filename: string;
+  /** 访问URL */
+  file_url: string;
+  /** 文件大小 */
+  file_size: number;
+  /** 上传时间 */
+  upload_time: string;
+}
+
+/**
+ * 资源项信息
+ */
+export interface ResourceItem {
+  /** 文件/目录名称 */
+  name: string;
+  /** 文件URL路径 */
+  file_url: string;
+  /** 相对路径 */
+  relative_path?: string;
+  /** 是否为文件 */
+  is_file?: boolean;
+  /** 是否为目录 */
+  is_dir?: boolean;
+  /** 文件大小（字节） */
+  size?: number | null;
+  /** 创建时间 */
+  created_time: string;
+  /** 修改时间 */
+  modified_time: string;
+  /** 是否为隐藏文件 */
+  is_hidden?: boolean;
+}
+
+/**
+ * 资源移动参数
+ */
+export interface ResourceMoveQuery {
+  /** 源路径 */
+  source_path: string;
+  /** 目标路径 */
+  target_path: string;
+  /** 是否覆盖 */
+  overwrite?: boolean;
+}
+
+/**
+ * 资源复制参数
+ */
+export interface ResourceCopyQuery {
+  /** 源路径 */
+  source_path: string;
+  /** 目标路径 */
+  target_path: string;
+  /** 是否覆盖 */
+  overwrite?: boolean;
+}
+
+/**
+ * 资源重命名参数
+ */
+export interface ResourceRenameQuery {
+  /** 原路径 */
+  old_path: string;
+  /** 新名称 */
+  new_name: string;
+}
+
+/**
+ * 创建目录参数
+ */
+export interface ResourceCreateDirQuery {
+  /** 父目录路径 */
+  parent_path: string;
+  /** 目录名称 */
+  dir_name: string;
+}
diff --git a/frontend/new-web/src/api/module_monitor/server.ts b/frontend/new-web/src/api/module_monitor/server.ts
new file mode 100644
index 00000000..ae8e026d
--- /dev/null
+++ b/frontend/new-web/src/api/module_monitor/server.ts
@@ -0,0 +1,67 @@
+import request from "@/utils/http";
+
+const API_PATH = "/monitor/server";
+
+const ServerAPI = {
+  // 获取服务信息
+  getServer() {
+    return request<ApiResponse>({
+      url: `${API_PATH}/info`,
+      method: "get",
+    });
+  },
+};
+
+export default ServerAPI;
+
+export interface Cpu {
+  cpu_num: number;
+  used: number;
+  sys: number;
+  free: number;
+}
+
+export interface Memory {
+  total: string;
+  used: string;
+  free: string;
+  usage: number;
+}
+
+export interface System {
+  computer_name: string;
+  os_name: string;
+  computer_ip: string;
+  os_arch: string;
+  user_dir: string;
+}
+
+export interface Python {
+  name: string;
+  version: string;
+  start_time: string;
+  run_time: string;
+  home: string;
+  memory_total: string;
+  memory_used: string;
+  memory_free: string;
+  memory_usage: number;
+}
+
+export interface SysFile {
+  dirName: string;
+  sysTypeName: string;
+  typeName: string;
+  total: string;
+  free: string;
+  used: string;
+  usage: number;
+}
+
+export interface ServerInfo {
+  cpu: Cpu;
+  mem: Memory;
+  sys: System;
+  py: Python;
+  disks: SysFile[];
+}
diff --git a/frontend/new-web/src/api/module_system/auth.ts b/frontend/new-web/src/api/module_system/auth.ts
new file mode 100644
index 00000000..d6dbc50a
--- /dev/null
+++ b/frontend/new-web/src/api/module_system/auth.ts
@@ -0,0 +1,125 @@
+import request from "@/utils/http";
+// import request from '@/utils/http'
+
+const API_PATH = "/system/auth";
+
+/** 第三方 OAuth 登录渠道（与后端 `/system/auth/oauth/{provider}` 一致） */
+export type OAuthProvider = "wechat" | "qq" | "github" | "gitee";
+
+const AuthAPI = {
+  /**
+   * 登录
+   * @param body 登录参数
+   * @returns 登录响应
+   */
+  login(body: LoginFormData) {
+    return request<ApiResponse<LoginResult>>({
+      url: `${API_PATH}/login`,
+      method: "post",
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+      data: body,
+    });
+  },
+
+  refreshToken(body: RefreshToekenBody) {
+    return request<ApiResponse<LoginResult>>({
+      url: `${API_PATH}/token/refresh`,
+      method: "post",
+      data: body,
+    });
+  },
+
+  getCaptcha() {
+    return request<ApiResponse<CaptchaInfo>>({
+      url: `${API_PATH}/captcha/get`,
+      method: "get",
+    });
+  },
+
+  logout(body: LogoutBody) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/logout`,
+      method: "post",
+      data: body,
+    });
+  },
+
+  /** 获取免登录用户列表 */
+  getAutoLoginUsers() {
+    return request<ApiResponse<AutoLoginUser[]>>({
+      url: `${API_PATH}/auto-login/users`,
+      method: "get",
+    });
+  },
+
+  /** 获取免登录Token */
+  getAutoLoginToken(userId: number) {
+    return request<ApiResponse<AutoLoginToken>>({
+      url: `${API_PATH}/auto-login/token`,
+      method: "post",
+      params: { user_id: userId },
+    });
+  },
+
+  /** 免登录 */
+  autoLogin(token: string) {
+    return request<ApiResponse<LoginResult>>({
+      url: `${API_PATH}/auto-login`,
+      method: "post",
+      params: { token },
+    });
+  },
+};
+
+export default AuthAPI;
+
+/** 登录表单数据 */
+export interface LoginFormData {
+  username: string;
+  password: string;
+  captcha_key: string;
+  captcha: string;
+  remember: boolean;
+  login_type: string;
+}
+
+// 刷新令牌
+export interface RefreshToekenBody {
+  refresh_token: string;
+}
+
+/** 登录响应 */
+export interface LoginResult {
+  access_token: string;
+  refresh_token: string;
+  token_type: string;
+  expires_in: number;
+}
+
+/** 验证码信息 */
+export interface CaptchaInfo {
+  enable: boolean;
+  key: string;
+  img_base: string;
+}
+
+/** 退出登录操作 */
+export interface LogoutBody {
+  token: string;
+}
+
+/** 免登录用户信息 */
+export interface AutoLoginUser {
+  id: number;
+  username: string;
+  name: string;
+  avatar: string | null;
+}
+
+/** 免登录Token响应 */
+export interface AutoLoginToken {
+  token: string;
+  user: AutoLoginUser;
+}
diff --git a/frontend/new-web/src/api/module_system/dept.ts b/frontend/new-web/src/api/module_system/dept.ts
new file mode 100644
index 00000000..9a394520
--- /dev/null
+++ b/frontend/new-web/src/api/module_system/dept.ts
@@ -0,0 +1,82 @@
+import request from "@/utils/http";
+
+const API_PATH = "/system/dept";
+
+const DeptAPI = {
+  listDept(query?: DeptPageQuery) {
+    return request<ApiResponse<DeptTable[]>>({
+      url: `${API_PATH}/tree`,
+      method: "get",
+      params: query,
+    });
+  },
+
+  detailDept(query: number) {
+    return request<ApiResponse<DeptTable>>({
+      url: `${API_PATH}/detail/${query}`,
+      method: "get",
+    });
+  },
+
+  createDept(body: DeptForm) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/create`,
+      method: "post",
+      data: body,
+    });
+  },
+
+  updateDept(id: number, body: DeptForm) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/update/${id}`,
+      method: "put",
+      data: body,
+    });
+  },
+
+  deleteDept(body: number[]) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/delete`,
+      method: "delete",
+      data: body,
+    });
+  },
+
+  batchDept(body: BatchType) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/available/setting`,
+      method: "patch",
+      data: body,
+    });
+  },
+};
+
+export default DeptAPI;
+
+export interface DeptPageQuery {
+  name?: string;
+  status?: string;
+  created_time?: string[];
+}
+
+export interface DeptTable extends BaseType {
+  name?: string;
+  order?: number;
+  code: string;
+  leader?: string;
+  phone?: string;
+  email?: string;
+  parent_id?: number;
+  parent_name?: string;
+  children?: DeptTable[];
+}
+
+export interface DeptForm extends BaseFormType {
+  name?: string;
+  order?: number;
+  code: string;
+  leader?: string;
+  phone?: string;
+  email?: string;
+  parent_id?: number;
+}
diff --git a/frontend/new-web/src/api/module_system/dict.ts b/frontend/new-web/src/api/module_system/dict.ts
new file mode 100644
index 00000000..e78731f0
--- /dev/null
+++ b/frontend/new-web/src/api/module_system/dict.ts
@@ -0,0 +1,182 @@
+import request from "@/utils/http";
+
+const API_PATH = "/system/dict";
+
+const DictAPI = {
+  listDictType(query: DictPageQuery) {
+    return request<ApiResponse<PageResult<DictTable[]>>>({
+      url: `${API_PATH}/type/list`,
+      method: "get",
+      params: query,
+    });
+  },
+
+  optionDictType() {
+    return request<ApiResponse>({
+      url: `${API_PATH}/type/optionselect`,
+      method: "get",
+    });
+  },
+
+  detailDictType(query: number) {
+    return request<ApiResponse<DictTable>>({
+      url: `${API_PATH}/type/detail/${query}`,
+      method: "get",
+    });
+  },
+
+  createDictType(body: DictForm) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/type/create`,
+      method: "post",
+      data: body,
+    });
+  },
+
+  updateDictType(id: number, body: DictForm) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/type/update/${id}`,
+      method: "put",
+      data: body,
+    });
+  },
+
+  deleteDictType(body: number[]) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/type/delete`,
+      method: "delete",
+      data: body,
+    });
+  },
+
+  batchDictType(body: BatchType) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/type/available/setting`,
+      method: "patch",
+      data: body,
+    });
+  },
+
+  exportDictType(body: DictPageQuery) {
+    return request<Blob>({
+      url: `${API_PATH}/type/export`,
+      method: "post",
+      data: body,
+      responseType: "blob",
+    });
+  },
+
+  listDictData(query: DictDataPageQuery) {
+    return request<ApiResponse<PageResult<DictDataTable[]>>>({
+      url: `${API_PATH}/data/list`,
+      method: "get",
+      params: query,
+    });
+  },
+
+  detailDictData(query: number) {
+    return request<ApiResponse<DictDataTable>>({
+      url: `${API_PATH}/data/detail/${query}`,
+      method: "get",
+    });
+  },
+
+  createDictData(body: DictDataForm) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/data/create`,
+      method: "post",
+      data: body,
+    });
+  },
+
+  updateDictData(id: number, body: DictDataForm) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/data/update/${id}`,
+      method: "put",
+      data: body,
+    });
+  },
+
+  deleteDictData(body: number[]) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/data/delete`,
+      method: "delete",
+      data: body,
+    });
+  },
+
+  batchDictData(body: BatchType) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/data/available/setting`,
+      method: "patch",
+      data: body,
+    });
+  },
+
+  exportDictData(body: DictDataPageQuery) {
+    return request<Blob>({
+      url: `${API_PATH}/data/export`,
+      method: "post",
+      data: body,
+      responseType: "blob",
+    });
+  },
+
+  getInitDict(dict_type: string) {
+    return request<ApiResponse<DictDataTable[]>>({
+      url: `${API_PATH}/data/info/${dict_type}`,
+      method: "get",
+    });
+  },
+};
+
+export default DictAPI;
+
+export interface DictPageQuery extends PageQuery {
+  dict_name?: string;
+  dict_type?: string;
+  status?: string;
+  created_time?: string[];
+  updated_time?: string[];
+}
+
+export interface DictDataPageQuery extends PageQuery {
+  dict_label?: string;
+  dict_type?: string;
+  dict_type_id?: number;
+  status?: string;
+  created_time?: string[];
+  updated_time?: string[];
+}
+
+export interface DictTable extends BaseType {
+  dict_name?: string;
+  dict_type?: string;
+}
+
+export interface DictForm extends BaseFormType {
+  dict_name?: string;
+  dict_type?: string;
+}
+
+export interface DictDataTable extends BaseType {
+  dict_sort?: number;
+  dict_label?: string;
+  dict_value?: string;
+  dict_type_id?: number;
+  dict_type?: string;
+  css_class?: string;
+  list_class?: string;
+  is_default?: boolean;
+}
+
+export interface DictDataForm extends BaseFormType {
+  dict_sort?: number;
+  dict_label?: string;
+  dict_value?: string;
+  dict_type_id?: number;
+  dict_type?: string;
+  css_class?: string;
+  list_class?: string;
+  is_default?: boolean;
+}
diff --git a/frontend/new-web/src/api/module_system/log.ts b/frontend/new-web/src/api/module_system/log.ts
new file mode 100644
index 00000000..e9a8e700
--- /dev/null
+++ b/frontend/new-web/src/api/module_system/log.ts
@@ -0,0 +1,66 @@
+import request from "@/utils/http";
+
+const API_PATH = "/system/log";
+
+const LogAPI = {
+  listLog(query: LogPageQuery) {
+    return request<ApiResponse<PageResult<LogTable[]>>>({
+      url: `${API_PATH}/list`,
+      method: "get",
+      params: query,
+    });
+  },
+
+  detailLog(query: number) {
+    return request<ApiResponse<LogTable>>({
+      url: `${API_PATH}/detail/${query}`,
+      method: "get",
+    });
+  },
+
+  deleteLog(body: number[]) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/delete`,
+      method: "delete",
+      data: body,
+    });
+  },
+
+  exportLog(body: LogPageQuery) {
+    return request<Blob>({
+      url: `${API_PATH}/export`,
+      method: "post",
+      data: body,
+      responseType: "blob",
+    });
+  },
+};
+
+export default LogAPI;
+
+export interface LogPageQuery extends PageQuery {
+  type?: number;
+  request_path?: string;
+  creator_name?: string;
+  created_time?: string[];
+  updated_time?: string[];
+  created_id?: number;
+  updated_id?: number;
+}
+
+export interface LogTable extends BaseType {
+  type?: number; // 1 登录日志 2 操作日志
+  request_path?: string;
+  request_method?: string;
+  request_ip?: string;
+  login_location?: string;
+  request_browser?: string;
+  request_os?: string;
+  response_code?: number;
+  request_payload?: string;
+  response_json?: string;
+  process_time?: string;
+  created_by?: CommonType;
+  updated_by?: CommonType;
+  deleted_by?: CommonType;
+}
diff --git a/frontend/new-web/src/api/module_system/menu.ts b/frontend/new-web/src/api/module_system/menu.ts
new file mode 100644
index 00000000..72a22095
--- /dev/null
+++ b/frontend/new-web/src/api/module_system/menu.ts
@@ -0,0 +1,110 @@
+import request from "@/utils/http";
+
+const API_PATH = "/system/menu";
+
+const MenuAPI = {
+  listMenu(query?: MenuPageQuery) {
+    return request<ApiResponse<MenuTable[]>>({
+      url: `${API_PATH}/tree`,
+      method: "get",
+      params: query,
+    });
+  },
+
+  detailMenu(query: number) {
+    return request<ApiResponse<MenuTable>>({
+      url: `${API_PATH}/detail/${query}`,
+      method: "get",
+    });
+  },
+
+  createMenu(body: MenuForm) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/create`,
+      method: "post",
+      data: body,
+    });
+  },
+
+  updateMenu(id: number, body: MenuForm) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/update/${id}`,
+      method: "put",
+      data: body,
+    });
+  },
+
+  deleteMenu(body: number[]) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/delete`,
+      method: "delete",
+      data: body,
+    });
+  },
+
+  batchMenu(body: BatchType) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/available/setting`,
+      method: "patch",
+      data: body,
+    });
+  },
+};
+
+export default MenuAPI;
+
+export interface MenuPageQuery {
+  name?: string;
+  status?: string;
+  created_time?: string[];
+  updated_time?: string[];
+  /** 与后端 Query `menu_client` 一致：pc | app；菜单管理 Tab 切换时传入 */
+  menu_client?: "pc" | "app";
+}
+
+export interface MenuTable extends BaseType {
+  name?: string;
+  type?: number;
+  icon?: string;
+  order?: number;
+  permission?: string;
+  route_name?: string;
+  route_path?: string;
+  component_path?: string;
+  redirect?: string;
+  parent_id?: number;
+  parent_name?: string;
+  keep_alive?: boolean;
+  hidden?: boolean;
+  always_show?: boolean;
+  title?: string;
+  params?: { key: string; value: string }[];
+  affix?: boolean;
+  children?: MenuTable[];
+  client?: "pc" | "app";
+}
+
+export interface MenuForm extends BaseFormType {
+  name?: string;
+  type?: number;
+  icon?: string;
+  order?: number;
+  permission?: string;
+  route_name?: string;
+  route_path?: string;
+  component_path?: string;
+  redirect?: string;
+  parent_id?: number;
+  keep_alive?: boolean;
+  hidden?: boolean;
+  always_show?: boolean;
+  title?: string;
+  params?: KeyValue[];
+  affix?: boolean;
+  client?: "pc" | "app";
+}
+
+export interface KeyValue {
+  key: string;
+  value: string;
+}
diff --git a/frontend/new-web/src/api/module_system/notice.ts b/frontend/new-web/src/api/module_system/notice.ts
new file mode 100644
index 00000000..525c3e15
--- /dev/null
+++ b/frontend/new-web/src/api/module_system/notice.ts
@@ -0,0 +1,95 @@
+import request from "@/utils/http";
+
+const API_PATH = "/system/notice";
+
+const NoticeAPI = {
+  listNotice(query: NoticePageQuery) {
+    return request<ApiResponse<PageResult<NoticeTable[]>>>({
+      url: `${API_PATH}/list`,
+      method: "get",
+      params: query,
+    });
+  },
+
+  listNoticeAvailable() {
+    return request<ApiResponse<PageResult<NoticeTable[]>>>({
+      url: `${API_PATH}/available`,
+      method: "get",
+    });
+  },
+
+  detailNotice(query: number) {
+    return request<ApiResponse<NoticeTable>>({
+      url: `${API_PATH}/detail/${query}`,
+      method: "get",
+    });
+  },
+
+  createNotice(body: NoticeForm) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/create`,
+      method: "post",
+      data: body,
+    });
+  },
+
+  updateNotice(id: number, body: NoticeForm) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/update/${id}`,
+      method: "put",
+      data: body,
+    });
+  },
+
+  deleteNotice(body: number[]) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/delete`,
+      method: "delete",
+      data: body,
+    });
+  },
+
+  batchNotice(body: BatchType) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/available/setting`,
+      method: "patch",
+      data: body,
+    });
+  },
+
+  exportNotice(body: NoticePageQuery) {
+    return request<Blob>({
+      url: `${API_PATH}/export`,
+      method: "post",
+      data: body,
+      responseType: "blob",
+    });
+  },
+};
+
+export default NoticeAPI;
+
+export interface NoticePageQuery extends PageQuery {
+  notice_title?: string;
+  notice_type?: string;
+  status?: string;
+  created_time?: string[];
+  updated_time?: string[];
+  created_id?: number;
+  updated_id?: number;
+}
+
+export interface NoticeTable extends BaseType {
+  notice_title?: string;
+  notice_type?: string;
+  notice_content?: string;
+  created_by?: CommonType;
+  updated_by?: CommonType;
+  deleted_by?: CommonType;
+}
+
+export interface NoticeForm extends BaseFormType {
+  notice_title?: string;
+  notice_type?: string;
+  notice_content?: string;
+}
diff --git a/frontend/new-web/src/api/module_system/params.ts b/frontend/new-web/src/api/module_system/params.ts
new file mode 100644
index 00000000..33db4f1b
--- /dev/null
+++ b/frontend/new-web/src/api/module_system/params.ts
@@ -0,0 +1,98 @@
+import request from "@/utils/http";
+import { NO_AUTH_FLAG } from "@/utils/http/config";
+
+const API_PATH = "/system/param";
+
+const ParamsAPI = {
+  uploadFile(body: any) {
+    return request<ApiResponse<UploadFilePath>>({
+      url: `${API_PATH}/upload`,
+      method: "post",
+      data: body,
+      headers: { "Content-Type": "multipart/form-data" },
+    });
+  },
+
+  /** 登录前拉取站点参数：不带 Token，避免过期 JWT 导致 401 无法展示底部备案等 */
+  getInitConfig() {
+    return request<ApiResponse<ConfigTable[]>>({
+      url: `${API_PATH}/info`,
+      method: "get",
+      headers: {
+        Authorization: NO_AUTH_FLAG,
+      },
+    });
+  },
+
+  listParams(query: ConfigPageQuery) {
+    return request<ApiResponse<PageResult<ConfigTable[]>>>({
+      url: `${API_PATH}/list`,
+      method: "get",
+      params: query,
+    });
+  },
+
+  detailParams(query: number) {
+    return request<ApiResponse<ConfigTable>>({
+      url: `${API_PATH}/detail/${query}`,
+      method: "get",
+    });
+  },
+
+  createParams(body: ConfigForm) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/create`,
+      method: "post",
+      data: body,
+    });
+  },
+
+  updateParams(id: number, body: ConfigForm) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/update/${id}`,
+      method: "put",
+      data: body,
+    });
+  },
+
+  deleteParams(body: number[]) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/delete`,
+      method: "delete",
+      data: body,
+    });
+  },
+
+  exportParams(body: ConfigPageQuery) {
+    return request<Blob>({
+      url: `${API_PATH}/export`,
+      method: "post",
+      data: body,
+      responseType: "blob",
+    });
+  },
+};
+
+export default ParamsAPI;
+
+export interface ConfigPageQuery extends PageQuery {
+  config_name?: string;
+  config_key?: string;
+  config_type?: boolean;
+  created_time?: string[];
+  updated_time?: string[];
+}
+
+export interface ConfigTable extends BaseType {
+  config_name?: string;
+  config_key?: string;
+  config_value?: string;
+  config_type?: boolean;
+}
+
+export interface ConfigForm extends BaseFormType {
+  config_name?: string;
+  config_key?: string;
+  config_value?: string;
+  config_type?: boolean;
+}
diff --git a/frontend/new-web/src/api/module_system/position.ts b/frontend/new-web/src/api/module_system/position.ts
new file mode 100644
index 00000000..0c0f11f6
--- /dev/null
+++ b/frontend/new-web/src/api/module_system/position.ts
@@ -0,0 +1,84 @@
+import request from "@/utils/http";
+
+const API_PATH = "/system/position";
+
+const PositionAPI = {
+  listPosition(query?: PositionPageQuery) {
+    return request<ApiResponse<PageResult<PositionTable[]>>>({
+      url: `${API_PATH}/list`,
+      method: "get",
+      params: query,
+    });
+  },
+
+  detailPosition(query: number) {
+    return request<ApiResponse<PositionTable>>({
+      url: `${API_PATH}/detail/${query}`,
+      method: "get",
+    });
+  },
+
+  createPosition(body: PositionForm) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/create`,
+      method: "post",
+      data: body,
+    });
+  },
+
+  updatePosition(id: number, body: PositionForm) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/update/${id}`,
+      method: "put",
+      data: body,
+    });
+  },
+
+  deletePosition(body: number[]) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/delete`,
+      method: "delete",
+      data: body,
+    });
+  },
+
+  batchPosition(body: BatchType) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/available/setting`,
+      method: "patch",
+      data: body,
+    });
+  },
+
+  exportPosition(body: PositionPageQuery) {
+    return request<Blob>({
+      url: `${API_PATH}/export`,
+      method: "post",
+      data: body,
+      responseType: "blob",
+    });
+  },
+};
+
+export default PositionAPI;
+
+export interface PositionPageQuery extends PageQuery {
+  name?: string;
+  status?: string;
+  created_id?: number;
+  created_time?: string[];
+  updated_time?: string[];
+}
+
+export interface PositionTable extends BaseType {
+  name?: string;
+  order?: number;
+  created_by?: CommonType;
+  updated_by?: CommonType;
+  deleted_by?: CommonType;
+}
+
+export interface PositionForm extends BaseFormType {
+  name?: string;
+  order?: number;
+}
diff --git a/frontend/new-web/src/api/module_system/role.ts b/frontend/new-web/src/api/module_system/role.ts
new file mode 100644
index 00000000..af936fe0
--- /dev/null
+++ b/frontend/new-web/src/api/module_system/role.ts
@@ -0,0 +1,119 @@
+import request from "@/utils/http";
+
+const API_PATH = "/system/role";
+
+const RoleAPI = {
+  listRole(query?: TablePageQuery) {
+    return request<ApiResponse<PageResult<RoleTable[]>>>({
+      url: `${API_PATH}/list`,
+      method: "get",
+      params: query,
+    });
+  },
+
+  detailRole(query: number) {
+    return request<ApiResponse<RoleTable>>({
+      url: `${API_PATH}/detail/${query}`,
+      method: "get",
+    });
+  },
+
+  createRole(body: RoleForm) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/create`,
+      method: "post",
+      data: body,
+    });
+  },
+
+  updateRole(id: number, body: RoleForm) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/update/${id}`,
+      method: "put",
+      data: body,
+    });
+  },
+
+  deleteRole(body: number[]) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/delete`,
+      method: "delete",
+      data: body,
+    });
+  },
+
+  batchRole(body: BatchType) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/available/setting`,
+      method: "patch",
+      data: body,
+    });
+  },
+
+  setPermission(body: permissionDataType) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/permission/setting`,
+      method: "patch",
+      data: body,
+    });
+  },
+
+  exportRole(body: TablePageQuery) {
+    return request<Blob>({
+      url: `${API_PATH}/export`,
+      method: "post",
+      data: body,
+      responseType: "blob",
+    });
+  },
+};
+
+export default RoleAPI;
+
+export interface TablePageQuery extends PageQuery {
+  name?: string;
+  status?: string;
+  created_time?: string[];
+  updated_time?: string[];
+}
+
+export interface RoleTable extends BaseType {
+  id: number;
+  name: string;
+  order?: number;
+  code: string;
+  data_scope?: number;
+  menus?: permissionMenuType[];
+  depts?: permissionDeptType[];
+}
+
+export interface RoleForm extends BaseFormType {
+  name?: string;
+  order?: number;
+  code: string;
+}
+
+export interface permissionDataType {
+  data_scope: number;
+  role_ids: RoleTable["id"][];
+  menu_ids: permissionMenuType["id"][];
+  dept_ids: permissionDeptType["id"][];
+}
+
+export interface permissionDeptType {
+  id: number;
+  name: string;
+  parent_id: number;
+  children: permissionDeptType[];
+}
+
+export interface permissionMenuType {
+  id: number;
+  name: string;
+  type: number;
+  permission: string;
+  parent_id?: number;
+  status: string;
+  description?: string;
+  children?: permissionMenuType[];
+}
diff --git a/frontend/new-web/src/api/module_system/tenant.ts b/frontend/new-web/src/api/module_system/tenant.ts
new file mode 100644
index 00000000..d5d5af93
--- /dev/null
+++ b/frontend/new-web/src/api/module_system/tenant.ts
@@ -0,0 +1,100 @@
+import request from "@/utils/http";
+
+const API_PATH = "/system/tenant";
+
+const TenantAPI = {
+  listTenant(query?: TenantPageQuery) {
+    return request<ApiResponse<PageResult<TenantTable[]>>>({
+      url: `${API_PATH}/list`,
+      method: "get",
+      params: query,
+    });
+  },
+
+  detailTenant(id: number) {
+    return request<ApiResponse<TenantTable>>({
+      url: `${API_PATH}/detail/${id}`,
+      method: "get",
+    });
+  },
+
+  createTenant(body: TenantCreateForm) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/create`,
+      method: "post",
+      data: body,
+    });
+  },
+
+  updateTenant(id: number, body: TenantUpdateForm) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/update/${id}`,
+      method: "put",
+      data: body,
+    });
+  },
+
+  deleteTenant(body: number[]) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/delete`,
+      method: "delete",
+      data: body,
+    });
+  },
+
+  batchTenant(body: BatchType) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/available/setting`,
+      method: "patch",
+      data: body,
+    });
+  },
+};
+
+export default TenantAPI;
+
+export interface TenantPageQuery extends PageQuery {
+  name?: string;
+  code?: string;
+  status?: string;
+  created_time?: string[];
+}
+
+export interface TenantTable extends BaseType {
+  name: string;
+  code: string;
+  start_time?: string;
+  end_time?: string;
+}
+
+export interface TenantForm {
+  id?: number;
+  name?: string;
+  code?: string;
+  status?: string;
+  description?: string;
+  start_time?: string;
+  end_time?: string;
+}
+
+export interface TenantCreateForm {
+  name: string;
+  code: string;
+  status?: string;
+  description?: string;
+  start_time?: string;
+  end_time?: string;
+}
+
+export interface TenantUpdateForm {
+  name?: string;
+  status?: string;
+  description?: string;
+  start_time?: string;
+  end_time?: string;
+}
+
+export interface BatchType {
+  ids: number[];
+  status: string;
+}
diff --git a/frontend/new-web/src/api/module_system/user.ts b/frontend/new-web/src/api/module_system/user.ts
new file mode 100644
index 00000000..954cefbb
--- /dev/null
+++ b/frontend/new-web/src/api/module_system/user.ts
@@ -0,0 +1,268 @@
+import request from "@/utils/http";
+import { MenuTable, MenuForm } from "@/api/module_system/menu";
+
+const API_PATH = "/system/user";
+
+export const UserAPI = {
+  getCurrentUserInfo() {
+    return request<ApiResponse<UserInfo>>({
+      url: `${API_PATH}/current/info`,
+      method: "get",
+    });
+  },
+
+  uploadCurrentUserAvatar(body: any) {
+    return request<ApiResponse<UploadFilePath>>({
+      url: `${API_PATH}/current/avatar/upload`,
+      method: "post",
+      data: body,
+      headers: { "Content-Type": "multipart/form-data" },
+    });
+  },
+
+  updateCurrentUserInfo(body: InfoFormState) {
+    return request<ApiResponse<UserInfo>>({
+      url: `${API_PATH}/current/info/update`,
+      method: "put",
+      data: body,
+    });
+  },
+
+  changeCurrentUserPassword(body: PasswordFormState) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/current/password/change`,
+      method: "put",
+      data: body,
+    });
+  },
+
+  resetUserPassword(body: ResetPasswordForm) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/reset/password`,
+      method: "put",
+      data: body,
+    });
+  },
+
+  registerUser(body: RegisterForm) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/register`,
+      method: "post",
+      data: body,
+    });
+  },
+
+  forgetPassword(body: ForgetPasswordForm) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/forget/password`,
+      method: "post",
+      data: body,
+    });
+  },
+
+  listUser(query: UserPageQuery) {
+    return request<ApiResponse<PageResult<UserInfo[]>>>({
+      url: `${API_PATH}/list`,
+      method: "get",
+      params: query,
+    });
+  },
+
+  detailUser(query: number) {
+    return request<ApiResponse<UserInfo>>({
+      url: `${API_PATH}/detail/${query}`,
+      method: "get",
+    });
+  },
+
+  createUser(body: UserForm) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/create`,
+      method: "post",
+      data: body,
+    });
+  },
+
+  updateUser(id: number, body: UserForm) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/update/${id}`,
+      method: "put",
+      data: body,
+    });
+  },
+
+  deleteUser(body: number[]) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/delete`,
+      method: "delete",
+      data: body,
+    });
+  },
+
+  batchUser(body: BatchType) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/available/setting`,
+      method: "patch",
+      data: body,
+    });
+  },
+
+  exportUser(body: UserPageQuery) {
+    return request<Blob>({
+      url: `${API_PATH}/export`,
+      method: "post",
+      data: body,
+      responseType: "blob",
+    });
+  },
+
+  downloadTemplateUser() {
+    return request<ApiResponse>({
+      url: `${API_PATH}/import/template`,
+      method: "post",
+      responseType: "blob",
+    });
+  },
+
+  importUser(body: any) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/import/data`,
+      method: "post",
+      data: body,
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    });
+  },
+};
+
+export default UserAPI;
+
+export interface ForgetPasswordForm {
+  username: string;
+  new_password: string;
+  mobile?: string;
+  confirmPassword: string;
+}
+
+export interface RegisterForm {
+  username: string;
+  password: string;
+  confirmPassword: string;
+}
+
+export interface UserPageQuery extends PageQuery {
+  username?: string;
+  name?: string;
+  mobile?: string;
+  email?: string;
+  dept_id?: number;
+  status?: string;
+  created_time?: string[];
+  created_id?: number;
+  updated_id?: number;
+}
+
+export interface searchSelectDataType {
+  name?: string;
+  status?: string;
+}
+
+export interface UserInfo extends BaseType {
+  username?: string;
+  name?: string;
+  avatar?: string;
+  email?: string;
+  mobile?: string;
+  gender?: string;
+  password?: string;
+  menus?: MenuTable[];
+  dept?: deptTreeType;
+  dept_id?: deptTreeType["id"];
+  dept_name?: deptTreeType["name"];
+  roles?: roleSelectorType[];
+  role_names?: roleSelectorType["name"][];
+  role_ids?: roleSelectorType["id"][];
+  positions?: positionSelectorType[];
+  position_names?: positionSelectorType["name"][];
+  position_ids?: positionSelectorType["id"][];
+  is_superuser?: boolean;
+  last_login?: string;
+  created_by?: CommonType;
+  updated_by?: CommonType;
+  deleted_by?: CommonType;
+}
+
+export interface deptTreeType {
+  id?: number;
+  name?: string;
+  parent_id?: number;
+  children?: deptTreeType[];
+}
+
+export interface roleSelectorType {
+  id?: number;
+  name?: string;
+  code?: string;
+  status?: string;
+  description?: string;
+  menus?: MenuForm[];
+}
+
+export interface positionSelectorType {
+  id?: number;
+  name?: string;
+  status?: string;
+  description?: string;
+}
+
+export interface InfoFormState {
+  id?: number;
+  name?: string;
+  gender?: number;
+  mobile?: string;
+  email?: string;
+  username?: string;
+  dept_name?: string;
+  dept?: deptTreeType;
+  positions?: positionSelectorType[];
+  roles?: roleSelectorType[];
+  avatar?: string;
+  created_time?: string;
+  updated_time?: string;
+}
+
+export interface PasswordFormState {
+  old_password: string;
+  new_password: string;
+  confirm_password: string;
+}
+
+export interface ResetPasswordForm {
+  id: number;
+  password: string;
+}
+
+export interface UserForm extends BaseFormType {
+  username?: string;
+  name?: string;
+  dept_id?: number;
+  dept_name?: string;
+  role_ids?: number[];
+  role_names?: string[];
+  position_ids?: number[];
+  position_names?: string[];
+  password?: string;
+  gender?: number;
+  email?: string;
+  mobile?: string;
+  is_superuser?: boolean;
+}
+
+export interface CurrentUserFormState {
+  name?: string;
+  gender?: number;
+  mobile?: string;
+  email?: string;
+  avatar?: string;
+}
diff --git a/frontend/new-web/src/api/module_task/cronjob/job.ts b/frontend/new-web/src/api/module_task/cronjob/job.ts
new file mode 100644
index 00000000..5d3d661b
--- /dev/null
+++ b/frontend/new-web/src/api/module_task/cronjob/job.ts
@@ -0,0 +1,155 @@
+import request from "@/utils/http";
+
+const API_PATH = "/task/cronjob/job";
+
+const JobAPI = {
+  getSchedulerStatus() {
+    return request<ApiResponse<SchedulerStatus>>({
+      url: `${API_PATH}/scheduler/status`,
+      method: "get",
+    });
+  },
+
+  getSchedulerJobs() {
+    return request<ApiResponse<SchedulerJob[]>>({
+      url: `${API_PATH}/scheduler/jobs`,
+      method: "get",
+    });
+  },
+
+  startScheduler() {
+    return request<ApiResponse>({
+      url: `${API_PATH}/scheduler/start`,
+      method: "post",
+    });
+  },
+
+  pauseScheduler() {
+    return request<ApiResponse>({
+      url: `${API_PATH}/scheduler/pause`,
+      method: "post",
+    });
+  },
+
+  resumeScheduler() {
+    return request<ApiResponse>({
+      url: `${API_PATH}/scheduler/resume`,
+      method: "post",
+    });
+  },
+
+  shutdownScheduler() {
+    return request<ApiResponse>({
+      url: `${API_PATH}/scheduler/shutdown`,
+      method: "post",
+    });
+  },
+
+  clearAllJobs() {
+    return request<ApiResponse>({
+      url: `${API_PATH}/scheduler/jobs/clear`,
+      method: "delete",
+    });
+  },
+
+  getSchedulerConsole() {
+    return request<ApiResponse<string>>({
+      url: `${API_PATH}/scheduler/console`,
+      method: "get",
+    });
+  },
+
+  syncJobsToDb() {
+    return request<ApiResponse<number>>({
+      url: `${API_PATH}/scheduler/sync`,
+      method: "post",
+    });
+  },
+
+  pauseJob(jobId: string) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/task/pause/${jobId}`,
+      method: "post",
+    });
+  },
+
+  resumeJob(jobId: string) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/task/resume/${jobId}`,
+      method: "post",
+    });
+  },
+
+  runJobNow(jobId: string) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/task/run/${jobId}`,
+      method: "post",
+    });
+  },
+
+  removeJob(jobId: string) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/task/remove/${jobId}`,
+      method: "delete",
+    });
+  },
+
+  getJobLogList(query: JobLogPageQuery) {
+    return request<ApiResponse<PageResult<JobLogTable[]>>>({
+      url: `${API_PATH}/log/list`,
+      method: "get",
+      params: query,
+    });
+  },
+
+  getJobLogDetail(id: number) {
+    return request<ApiResponse<JobLogTable>>({
+      url: `${API_PATH}/log/detail/${id}`,
+      method: "get",
+    });
+  },
+
+  deleteJobLog(ids: number[]) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/log/delete`,
+      method: "delete",
+      data: ids,
+    });
+  },
+};
+
+export default JobAPI;
+
+export interface SchedulerStatus {
+  status: string;
+  is_running: boolean;
+  job_count: number;
+}
+
+export interface SchedulerJob {
+  id: string;
+  name: string;
+  trigger: string;
+  next_run_time?: string;
+  status: string;
+}
+
+export interface JobLogPageQuery extends PageQuery {
+  job_id?: string;
+  job_name?: string;
+  status?: string;
+  trigger_type?: string;
+}
+
+export interface JobLogTable extends BaseType {
+  job_id: string;
+  job_name?: string;
+  trigger_type?: string;
+  status: string;
+  next_run_time?: string;
+  job_state?: string;
+  result?: string;
+  error?: string;
+  created_time?: string;
+  updated_time?: string;
+}
diff --git a/frontend/new-web/src/api/module_task/cronjob/node.ts b/frontend/new-web/src/api/module_task/cronjob/node.ts
new file mode 100644
index 00000000..16213714
--- /dev/null
+++ b/frontend/new-web/src/api/module_task/cronjob/node.ts
@@ -0,0 +1,135 @@
+import request from "@/utils/http";
+
+const API_PATH = "/task/cronjob/node";
+
+const NodeAPI = {
+  getNodeTypeOptions() {
+    return request<ApiResponse<NodeType[]>>({
+      url: `${API_PATH}/options`,
+      method: "get",
+    });
+  },
+
+  listNode(query: NodePageQuery) {
+    return request<ApiResponse<PageResult<NodeTable[]>>>({
+      url: `${API_PATH}/list`,
+      method: "get",
+      params: query,
+    });
+  },
+
+  detailNode(query: number) {
+    return request<ApiResponse<NodeTable>>({
+      url: `${API_PATH}/detail/${query}`,
+      method: "get",
+    });
+  },
+
+  createNode(body: NodeForm) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/create`,
+      method: "post",
+      data: body,
+    });
+  },
+
+  updateNode(id: number, body: NodeForm) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/update/${id}`,
+      method: "put",
+      data: body,
+    });
+  },
+
+  deleteNode(body: number[]) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/delete`,
+      method: "delete",
+      data: body,
+    });
+  },
+
+  clearNode() {
+    return request<ApiResponse>({
+      url: `${API_PATH}/clear`,
+      method: "delete",
+    });
+  },
+
+  executeNode(id: number, params: ExecuteNodeParams = { trigger: "now" }) {
+    return request<ApiResponse<ExecuteNodeResult>>({
+      url: `${API_PATH}/execute/${id}`,
+      method: "post",
+      data: params,
+    });
+  },
+};
+
+export default NodeAPI;
+
+export interface NodePageQuery extends PageQuery {
+  name?: string;
+  code?: string;
+  created_id?: number;
+  updated_id?: number;
+  created_time?: string[];
+  updated_time?: string[];
+}
+
+export type TriggerType = "now" | "cron" | "interval" | "date";
+
+export interface ExecuteNodeParams {
+  trigger: TriggerType;
+  trigger_args?: string;
+  start_date?: string;
+  end_date?: string;
+}
+
+export interface ExecuteNodeResult {
+  job_id: number;
+  status: string;
+  trigger: TriggerType;
+}
+
+export interface NodeTable extends BaseType {
+  name: string;
+  code: string;
+  jobstore?: string;
+  executor?: string;
+  trigger?: TriggerType;
+  trigger_args?: string;
+  func?: string;
+  args?: string;
+  kwargs?: string;
+  coalesce?: boolean;
+  max_instances?: number;
+  start_date?: string;
+  end_date?: string;
+  created_by?: CommonType;
+  updated_by?: CommonType;
+  deleted_by?: CommonType;
+}
+
+export interface NodeForm {
+  id?: number;
+  name: string;
+  code?: string;
+  jobstore?: string;
+  executor?: string;
+  func?: string;
+  args?: string;
+  kwargs?: string;
+  coalesce?: boolean;
+  max_instances?: number;
+  start_date?: string;
+  end_date?: string;
+}
+
+export interface NodeType {
+  id: number;
+  name: string;
+  code: string;
+  func?: string;
+  args?: string;
+  kwargs?: string;
+}
diff --git a/frontend/new-web/src/api/module_task/workflow/definition.ts b/frontend/new-web/src/api/module_task/workflow/definition.ts
new file mode 100644
index 00000000..5065a8c9
--- /dev/null
+++ b/frontend/new-web/src/api/module_task/workflow/definition.ts
@@ -0,0 +1,117 @@
+import request from "@/utils/http";
+
+/** 对应后端 `plugin.module_task.workflow.definition` */
+const API_PATH = "/task/workflow/definition";
+
+const WorkflowDefinitionAPI = {
+  getWorkflowList(query: WorkflowPageQuery) {
+    return request<ApiResponse<PageResult<WorkflowTable[]>>>({
+      url: `${API_PATH}/list`,
+      method: "get",
+      params: query,
+    });
+  },
+
+  getWorkflowDetail(query: number) {
+    return request<ApiResponse<WorkflowTable>>({
+      url: `${API_PATH}/detail/${query}`,
+      method: "get",
+    });
+  },
+
+  createWorkflow(body: WorkflowForm) {
+    return request<ApiResponse<WorkflowTable>>({
+      url: `${API_PATH}/create`,
+      method: "post",
+      data: body,
+    });
+  },
+
+  updateWorkflow(id: number, body: WorkflowForm) {
+    return request<ApiResponse<WorkflowTable>>({
+      url: `${API_PATH}/update/${id}`,
+      method: "put",
+      data: body,
+    });
+  },
+
+  deleteWorkflow(body: number[]) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/delete`,
+      method: "delete",
+      data: body,
+    });
+  },
+
+  publishWorkflow(id: number, body: WorkflowPublishForm) {
+    return request<ApiResponse<WorkflowTable>>({
+      url: `${API_PATH}/publish/${id}`,
+      method: "post",
+      data: body,
+    });
+  },
+
+  executeWorkflow(body: WorkflowExecuteForm) {
+    return request<ApiResponse<WorkflowExecuteResult>>({
+      url: `${API_PATH}/execute`,
+      method: "post",
+      data: body,
+    });
+  },
+};
+
+export default WorkflowDefinitionAPI;
+export { WorkflowDefinitionAPI };
+
+export interface WorkflowPageQuery extends PageQuery {
+  name?: string;
+  code?: string;
+  status?: string;
+  created_time?: string[];
+  updated_time?: string[];
+  created_id?: number;
+  updated_id?: number;
+}
+
+export interface WorkflowTable extends BaseType {
+  name?: string;
+  code?: string;
+  status?: string;
+  description?: string;
+  nodes?: any[];
+  edges?: any[];
+  created_by?: CommonType;
+  updated_by?: CommonType;
+  deleted_by?: CommonType;
+}
+
+export interface WorkflowForm extends BaseFormType {
+  name?: string;
+  code?: string;
+  status?: string;
+  description?: string;
+  nodes?: any[];
+  edges?: any[];
+}
+
+export interface WorkflowPublishForm {
+  remark?: string;
+}
+
+export interface WorkflowExecuteForm {
+  workflow_id: number;
+  variables?: Record<string, any>;
+  business_key?: string;
+  job_id?: number;
+}
+
+export interface WorkflowExecuteResult {
+  workflow_id: number;
+  workflow_name: string;
+  status: string;
+  start_time?: string;
+  end_time?: string;
+  variables?: Record<string, any>;
+  node_results?: Record<string, any>;
+  error?: string;
+}
diff --git a/frontend/new-web/src/api/module_task/workflow/node-type.ts b/frontend/new-web/src/api/module_task/workflow/node-type.ts
new file mode 100644
index 00000000..fbbb9e3a
--- /dev/null
+++ b/frontend/new-web/src/api/module_task/workflow/node-type.ts
@@ -0,0 +1,101 @@
+import request from "@/utils/http";
+
+/** 对应后端 `plugin.module_task.workflow.node_type` */
+const API_PATH = "/task/workflow/node-type";
+
+const WorkflowNodeTypeAPI = {
+  getWorkflowNodeTypeOptions() {
+    return request<ApiResponse<WorkflowNodeTypeOption[]>>({
+      url: `${API_PATH}/options`,
+      method: "get",
+    });
+  },
+
+  getWorkflowNodeTypeList(query: WorkflowNodeTypePageQuery) {
+    return request<ApiResponse<PageResult<WorkflowNodeTypeTable[]>>>({
+      url: `${API_PATH}/list`,
+      method: "get",
+      params: query,
+    });
+  },
+
+  getWorkflowNodeTypeDetail(id: number) {
+    return request<ApiResponse<WorkflowNodeTypeTable>>({
+      url: `${API_PATH}/detail/${id}`,
+      method: "get",
+    });
+  },
+
+  createWorkflowNodeType(body: WorkflowNodeTypeForm) {
+    return request<ApiResponse<WorkflowNodeTypeTable>>({
+      url: `${API_PATH}/create`,
+      method: "post",
+      data: body,
+    });
+  },
+
+  updateWorkflowNodeType(id: number, body: WorkflowNodeTypeForm) {
+    return request<ApiResponse<WorkflowNodeTypeTable>>({
+      url: `${API_PATH}/update/${id}`,
+      method: "put",
+      data: body,
+    });
+  },
+
+  deleteWorkflowNodeType(body: number[]) {
+    return request<ApiResponse>({
+      url: `${API_PATH}/delete`,
+      method: "delete",
+      data: body,
+    });
+  },
+};
+
+export default WorkflowNodeTypeAPI;
+export { WorkflowNodeTypeAPI };
+
+/** 编排节点类型选项（对应后端 task_workflow_node_type） */
+export interface WorkflowNodeTypeOption {
+  id: number;
+  code: string;
+  name: string;
+  category: string;
+  args?: string;
+  kwargs?: string;
+}
+
+export interface WorkflowNodeTypePageQuery extends PageQuery {
+  name?: string;
+  code?: string;
+  category?: string;
+  is_active?: boolean;
+  created_time?: string[];
+  updated_time?: string[];
+  created_id?: number;
+  updated_id?: number;
+}
+
+export interface WorkflowNodeTypeTable extends BaseType {
+  name?: string;
+  code?: string;
+  category?: string;
+  func?: string;
+  args?: string;
+  kwargs?: string;
+  sort_order?: number;
+  is_active?: boolean;
+  created_by?: CommonType;
+  updated_by?: CommonType;
+  deleted_by?: CommonType;
+}
+
+export interface WorkflowNodeTypeForm {
+  name: string;
+  code: string;
+  category?: string;
+  func: string;
+  args?: string;
+  kwargs?: string;
+  sort_order?: number;
+  is_active?: boolean;
+}
diff --git a/frontend/new-web/src/api/system-manage.ts b/frontend/new-web/src/api/system-manage.ts
index f0345256..6b974cff 100644
--- a/frontend/new-web/src/api/system-manage.ts
+++ b/frontend/new-web/src/api/system-manage.ts
@@ -1,25 +1,115 @@
-import request from '@/utils/http'
-import { AppRouteRecord } from '@/types/router'
+/**
+ * 系统管理相关聚合接口（表格示例、views/system/* 等使用的 `@/api/system-manage`）
+ * 内部委托至 `module_system` 下各 API，并做分页字段与行展示字段映射。
+ */
+import MenuAPI, { type MenuTable } from "@/api/module_system/menu";
+import RoleAPI, { type RoleTable, type TablePageQuery } from "@/api/module_system/role";
+import UserAPI, { type UserInfo, type UserPageQuery } from "@/api/module_system/user";
+import type { AppRouteRecord } from "@/types/router";
+import { ResultEnum } from "@/enums/api/result.enum";
 
-// 获取用户列表
-export function fetchGetUserList(params: Api.SystemManage.UserSearchParams) {
-  return request.get<Api.SystemManage.UserList>({
-    url: '/api/user/list',
-    params
-  })
+function assertSuccess<T>(res: { data: ApiResponse<T> }, fallbackMsg: string): T {
+  if (res.data.code !== ResultEnum.SUCCESS || res.data.data == null) {
+    throw new Error(res.data.msg || fallbackMsg);
+  }
+  return res.data.data;
 }
 
-// 获取角色列表
-export function fetchGetRoleList(params: Api.SystemManage.RoleSearchParams) {
-  return request.get<Api.SystemManage.RoleList>({
-    url: '/api/role/list',
-    params
-  })
+/** useTable 传入 current / size 及演示页自定义筛选字段 */
+export async function fetchGetUserList(params: Record<string, unknown>) {
+  const q: UserPageQuery = {
+    page_no: Number(params.current) || 1,
+    page_size: Number(params.size) || 20,
+    username: (params.userName ?? params.name) as string | undefined,
+    name: params.name as string | undefined,
+    mobile: (params.userPhone ?? params.phone) as string | undefined,
+    email: (params.userEmail ?? params.email) as string | undefined,
+    status: params.status as string | undefined,
+  };
+
+  const res = await UserAPI.listUser(q);
+  const page = assertSuccess(res, "获取用户列表失败");
+
+  const items = (page.items || []).map((u) => mapUserToListRow(u));
+
+  return {
+    items,
+    total: page.total,
+    page_no: page.page_no,
+    page_size: page.page_size,
+    has_next: page.has_next,
+  };
 }
 
-// 获取菜单列表
-export function fetchGetMenuList() {
-  return request.get<AppRouteRecord[]>({
-    url: '/api/v3/system/menus'
-  })
+function mapUserToListRow(u: UserInfo) {
+  return {
+    id: u.id,
+    nickName: u.name ?? u.username,
+    userName: u.username,
+    userGender: u.gender,
+    userPhone: u.mobile,
+    userEmail: u.email,
+    avatar: u.avatar,
+    status: u.status,
+  };
+}
+
+export async function fetchGetRoleList(params: Record<string, unknown>) {
+  const q: TablePageQuery = {
+    page_no: Number(params.current) || 1,
+    page_size: Number(params.size) || 20,
+    name: params.roleName as string | undefined,
+    status:
+      params.enabled !== undefined && params.enabled !== null && params.enabled !== ""
+        ? String(params.enabled)
+        : undefined,
+  };
+
+  const res = await RoleAPI.listRole(q);
+  const page = assertSuccess(res, "获取角色列表失败");
+
+  const items = (page.items || []).map((r) => mapRoleToListRow(r));
+
+  return {
+    items,
+    total: page.total,
+    page_no: page.page_no,
+    page_size: page.page_size,
+    has_next: page.has_next,
+  };
+}
+
+function mapRoleToListRow(r: RoleTable) {
+  return {
+    roleId: r.id,
+    roleName: r.name,
+    roleCode: r.code,
+    description: r.description,
+    enabled: r.status === "0",
+    createTime: r.created_time,
+  };
+}
+
+function mapMenuTableToRoute(m: MenuTable): AppRouteRecord {
+  const childrenRaw = m.children?.filter(Boolean) ?? [];
+  const children = childrenRaw.length ? childrenRaw.map(mapMenuTableToRoute) : undefined;
+
+  return {
+    path: (m.route_path ?? "").trim(),
+    name: m.route_name,
+    meta: {
+      title: m.title ?? m.name ?? "",
+      icon: m.icon,
+      hidden: m.hidden,
+      keepAlive: m.keep_alive,
+    },
+    children,
+  };
+}
+
+/** 菜单管理演示页：树形表格数据 */
+export async function fetchGetMenuList(): Promise<AppRouteRecord[]> {
+  const res = await MenuAPI.listMenu({});
+  const tree = assertSuccess(res, "获取菜单失败");
+  return (tree || []).map(mapMenuTableToRoute);
 }
diff --git a/frontend/new-web/src/assets/icons/ai copy.svg b/frontend/new-web/src/assets/icons/ai copy.svg
new file mode 100644
index 00000000..2ad5041a
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/ai copy.svg	
@@ -0,0 +1 @@
+<svg t="1765953898889" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6018" width="200" height="200"><path d="M603.904 244.992c134.4 0 243.3536 108.9536 243.3536 243.3536v202.8032c0 134.4-108.9536 243.3536-243.3536 243.3536H320c-134.4 0-243.3536-108.9536-243.3536-243.3536V488.3456c0-134.4 108.9536-243.3536 243.3536-243.3536h283.904z m0 81.1008H320c-89.6 0-162.2528 72.6528-162.2528 162.2528v202.8032c0 89.6 72.6528 162.2528 162.2528 162.2528h283.904c89.6 0 162.2528-72.6528 162.2528-162.2528V488.3456c0-89.6-72.6528-162.2528-162.2528-162.2528z" p-id="6019"></path><path d="M340.224 508.6208c27.0336 0 40.5504 13.5168 40.5504 40.5504v81.1008c0 27.0336-13.5168 40.5504-40.5504 40.5504-27.0336 0-40.5504-13.5168-40.5504-40.5504v-81.1008c0-27.0336 13.5168-40.5504 40.5504-40.5504zM583.2192 501.3504c15.2576-11.4176 36.864-8.3456 48.2816 6.912a34.4832 34.4832 0 0 1-6.912 48.2816l-44.3904 33.28 44.3904 33.28a34.53952 34.53952 0 0 1 9.472 44.3392l-2.56 3.9424c-11.4176 15.2576-33.024 18.3296-48.2816 6.912l-59.4944-44.5952c-13.7728-10.3424-21.9136-26.5728-21.9136-43.8272s8.0896-33.4848 21.9136-43.8272l59.4944-44.5952zM883.5072 261.12l-19.7632 47.3088c-2.7648 6.656-9.2672 10.9568-16.4864 10.9568s-13.6704-4.3008-16.4864-10.9568L811.008 261.12a44.416 44.416 0 0 0-19.7632-21.9648l-34.8672-19.0976c-5.7344-3.1232-9.2672-9.1136-9.2672-15.6672s3.5328-12.544 9.2672-15.6672l34.8672-19.0464a44.89728 44.89728 0 0 0 19.7632-21.9648l19.7632-47.3088c2.7648-6.656 9.2672-10.9568 16.4864-10.9568s13.6704 4.3008 16.4864 10.9568l19.7632 47.3088a44.416 44.416 0 0 0 19.7632 21.9648l34.8672 19.0976c5.7344 3.1232 9.2672 9.1136 9.2672 15.6672s-3.584 12.544-9.2672 15.6672l-34.8672 19.0464c-8.9088 4.864-15.872 12.6464-19.7632 21.9648z" p-id="6020"></path></svg>
diff --git a/frontend/new-web/src/assets/icons/ai.svg b/frontend/new-web/src/assets/icons/ai.svg
new file mode 100644
index 00000000..c3a1c1a3
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/ai.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1762619142165" class="icon" viewBox="0 0 1097 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18994" xmlns:xlink="http://www.w3.org/1999/xlink" width="137.125" height="128"><path d="M406.7 399.8c-1.9-1.2-5.3-1.1-7.2 0-2.5-1.4-4.8-1.4-6.5-0.4 2.5-1.2 10.6-5.1 20.3 0-1.8-1-4.1-1-6.6 0.4z" fill="#C5BEED" p-id="18995"></path><path d="M399.7 399.8c-2.3-1.2-4.4-1.2-6.2-0.2 0.4-0.2 1.2-0.7 1.2-0.7l1.1-0.5c0.4 0 1.1-0.4 1.1-0.4l1.1-0.4c0.4-0.2 1.1-0.5 1.1-0.5h0.9c0.2-0.2 0.9-0.4 0.9-0.4h4.5c0.2 0 0.9 0.2 0.9 0.2h0.9c0.4 0.2 1.1 0.5 1.1 0.5h1.1c0.4 0.2 1.1 0.4 1.1 0.4l1.1 0.4c0.9 0.4 0.9 0.4 2.3 1.1-1.8-1.1-4.1-0.9-6.3 0.4-0.9-0.4-3.9-1.6-7.8 0l-0.1 0.1z" fill="#C5BEED" p-id="18996"></path><path d="M283.5 913.3c-55.4-31.9-85.8-74.5-85.8-120 0-45.6 30.5-88.1 85.8-120 112.8-65.1 296.4-65.1 409.2 0 55.4 32 85.8 74.5 85.8 120s-30.5 88.1-85.8 120c-56.5 32.7-130.5 48.9-204.6 48.9S340 946 283.5 913.3z m3.2-234.4c-53.1 30.7-82.4 71.3-82.4 114.4 0 43.1 29.3 83.7 82.4 114.4 111 64.1 291.6 64.1 402.7 0 53.1-30.7 82.4-71.3 82.4-114.4 0-43.1-29.3-83.7-82.4-114.4-55.4-31.9-128.3-48-201.2-48-73.2 0-146.1 15.9-201.5 48z" fill="#0277FC" p-id="18997"></path><path d="M223.7 947.9c-71.3-41.1-110.5-96-110.5-154.6 0-58.6 39.2-113.5 110.5-154.6 145.8-84.2 383.1-84.2 528.9 0 71.3 41.1 110.5 96 110.5 154.6 0 58.6-39.2 113.5-110.5 154.6-72.9 42.2-168.6 63.2-264.4 63.2-95.8 0-191.6-21.2-264.5-63.2z m264.6-365.7c-94.6 0-189.2 20.7-261.2 62.3-69 40.1-107.1 92.8-107.1 149 0 56.1 37.9 109.1 107.1 149 144 83.1 378.3 83.1 522.3 0 69-40.1 107.1-92.9 107.1-149 0-56.1-38-109.1-107.1-149-72-41.5-166.6-62.3-261.2-62.3h0.1z" fill="#0277FC" p-id="18998"></path><path d="M337.9 882.1c-40.8-23.5-63.2-55.1-63.2-88.6 0-33.5 22.4-65.1 63.2-88.6 82.8-47.8 217.7-47.8 300.4 0 40.8 23.5 63.2 55.1 63.2 88.6 0 33.5-22.4 65.1-63.2 88.6-41.5 23.8-95.9 35.8-150.2 35.8-54.4 0-108.7-12-150.2-35.8z m150.4-206.7c-53.3 0-106.4 11.7-147 35.1-38.5 22.2-59.8 51.7-59.8 83 0 31.2 21.2 60.7 59.8 83 81 46.8 212.9 46.8 293.9 0 38.5-22.2 59.8-51.7 59.8-83 0-31.2-21.2-60.7-59.8-83-40.6-23.5-93.7-35.1-147-35.1h0.1z" fill="#0277FC" p-id="18999"></path><path d="M396.1 848.4c-25.1-14.5-39-34.1-39-54.9 0-20.8 13.8-40.4 39-54.9 50.8-29.3 133.3-29.3 183.9 0 25.1 14.5 39 34.1 39 54.9 0 20.8-13.8 40.4-39 54.9-25.4 14.7-58.6 21.9-92 21.9-33.3 0-66.4-7.3-91.9-21.9z m91.8-125.5c-32.1 0-64.2 7.1-88.6 21.2-23.1 13.2-35.8 30.9-35.8 49.2 0 18.4 12.7 36 35.8 49.2 48.9 28.2 128.5 28.2 177.4 0 23.1-13.2 35.8-30.9 35.8-49.2 0-18.4-12.7-36-35.8-49.2-24.4-14.1-56.5-21.2-88.6-21.2h-0.2z" fill="#0277FC" p-id="19000"></path><path d="M723.8 163.5c37.8 11.6 73.4 26.8 105.4 45.2 40.8 23.7 72.2 50.7 93.9 79.6l-0.4 123.7c-21.7-28.9-53.1-56-93.9-79.6-31.9-18.5-67.4-33.5-105.4-45.2l0.4-123.7zM803.5 421.9v123.9c-25.1-12.4-51.9-23-80.1-31.6l0.4-123.7c28.1 8.7 54.7 19.2 79.8 31.6v-0.2zM69.6 501.3c0.2-65.7 43.2-131.1 129.2-181.1 81.7-47.5 188-72.6 295.9-75.2l0.3-126.6c-107.7 2.6-213.9 27.7-295.9 75.2-86 50-129 115.4-129.2 181.1l-0.3 126.6zM283.9 498.1v90.6c-24.5 7.6-47.7 16.9-68.7 27.9-8.1 4.2-15.9 8.7-23.1 13.2v-90.6c7.4-4.6 15.2-9.2 23.5-13.4 21-11 44.1-20.1 68.5-27.7h-0.2z" fill="#1EB0FC" fill-opacity=".5" p-id="19001"></path><path d="M298.2 454.4c-39 11.5-75.6 26.3-108.4 44.8V372.8c32.8-18.4 69.4-33.4 108.4-44.8v126.4zM298.2 126.4c-39 11.5-75.6 26.3-108.4 44.8V44.8C222.6 26.5 259.2 11.5 298.2 0v126.4z" fill="#1EB0FC" fill-opacity=".5" p-id="19002"></path><path d="M421.9 426.5c29.1-4.4 58.8-6.9 88.6-7.6l-0.4 122.3c-29.7 0.7-59.3 3.2-88.3 7.4V426.3v0.2z" fill="#50A7F5" fill-opacity=".3" p-id="19003"></path><path d="M284 342.5h-0.4c-1.2-0.2-1.9-1.2-1.9-2.5 2.7-23.1 8.8-44.8 17.7-63 0.4-1.1 1.8-1.6 2.8-1.1 1.1 0.5 1.6 1.9 1.1 3-8.7 17.7-14.5 39-17.3 61.6-0.2 1.1-1.1 1.9-2.1 1.9h0.1z" fill="#040158" p-id="19004"></path><path d="M357.3 115.4l30.9 17.8c19.9-11.7 38.1-12.7 51.4-5.1l-30.9-17.8c-13.1-7.6-31.3-6.5-51.4 5.1z" fill="#1462FC" p-id="19005"></path><path d="M439.4 128.2l-30.9-17.8c-13.1-7.6-31.2-6.5-51.4 5.1l30.9 17.8c20-11.7 38.2-12.7 51.4-5.1z" fill="#0277FC" p-id="19006"></path><path d="M315.8 258.1c-0.2-45.9 32.1-101.9 72-125l-30.9-17.8c-39.9 23.1-72 79.1-72 125 0.2 22.8 8.1 38.8 21.2 46.4l30.9 17.8c-13.1-7.6-21.2-23.6-21.2-46.4z" fill="#1462FC" p-id="19007"></path><path d="M315.8 258.1c-0.2-45.9 32.1-101.9 72-125l-30.9-17.8c-39.9 23.1-72 79.1-72 125 0.2 22.8 8.1 38.8 21.2 46.4l30.9 17.8c-13.1-7.6-21.2-23.6-21.2-46.4z" fill="#0277FC" p-id="19008"></path><path d="M316 258.3c0.2 45.9 32.7 64.4 72.6 41.3 39.9-23 72-78.9 72-124.8-0.2-46.1-32.7-64.6-72.6-41.5-39.9 23.1-72 79.1-72 125z" fill="#031020" p-id="19009"></path><path d="M327.5 386.9c3.4-1.8 7.4-1.6 11.8 1.1 13.4-7.6 26.6-8.8 36.3-3-2.1-1.2-5.5-3.2-10.4-4.4-1.6-0.4-6-1.4-12.4-1.2-5.8 0.2-10.6 1.6-12 1.9-6.5 1.9-9.7 3.5-13.6 5.6h0.3z" fill="#8486D5" p-id="19010"></path><path d="M327.5 386.9c3.4-1.8 7.4-1.6 11.8 1.1 13.4-7.6 26.6-8.8 36.3-3-14.5-8.1-30.4-7.6-48.4 1.9h0.3z" fill="#8486D5" p-id="19011"></path><path d="M339.8 388c13.4-7.2 26.5-8.5 36-2.6-1.2-0.7-3-1.6-4.4-2.3l-2.5-1.1c-1.1-0.3-2.5-0.7-3.5-1.1l-2.7-0.5c-1.1-0.2-2.5-0.4-3.5-0.7h-2.8c-1.1 0-2.5 0-3.5 0.2h-2.8c-1.1 0-2.3 0.4-3.4 0.4l-2.6 0.5c-1.1 0.2-2.3 0.5-3.2 0.7l-2.6 0.9c-0.9 0.4-2.1 0.7-3 1.1l-2.7 1.1c-0.9 0.4-1.9 0.9-2.8 1.2-0.7 0.4-1.8 0.9-2.5 1.2 3.4-1.8 7.2-1.8 11.5 0.7h0.9l0.1 0.3zM216.1 668.8c3.7 5.3 4.8 8.8 3.7 10.2l7.9-9.5 8-9.5 7.9-9.5 7.9-9.5 7.9-9.5 8-9.5 7.9-9.5 7.9-9.5 7.9-9.5 8-9.5 7.9-9.5 7.9-9.5 7.9-9.5 8-9.5 7.9-9.5 7.9-9.5 7.9-9.5 7.9-9.5 8-9.5 7.9-9.5c1.2-1.2 0-4.8-3.7-10.1L216.8 668.1l-0.7 0.7z" fill="#8486D5" p-id="19012"></path><path d="M339.3 388l4.9 3c13.4-7.6 26.7-8.8 36.4-3l-4.9-3c-9.7-5.8-23-4.4-36.4 3z" fill="#8486D5" p-id="19013"></path><path d="M344.6 390.6l-4.9-3c0 0.2-0.3 0.2-0.3 0.2l4.9 3c-0.1-0.2 0.3-0.2 0.3-0.2z" fill="#8486D5" p-id="19014"></path><path d="M380.6 388l-4.9-3c-9.7-5.8-22.6-4.6-36 2.6l4.9 3c13.4-7.2 26.5-8.4 36-2.6z" fill="#8486D5" p-id="19015"></path><path d="M374.6 477.8c3.7 5.3 4.8 8.7 3.7 10.1 0.9-1.2 2.3-2.8 3.2-4.1l3-4.1c0.9-1.2 1.8-3 2.6-4.2l2.5-4.2c0.7-1.2 1.6-3.2 2.3-4.4l1.9-4.4c0.5-1.4 1.2-3.2 1.8-4.6l1.6-4.4c0.5-1.4 1.1-3.4 1.4-4.8l1.1-4.6c0.4-1.4 0.7-3.5 0.9-5.1l0.5-4.4v-9.9c-0.2-1.8-0.5-4.2-0.7-6l-0.9-4c-0.5-1.8-1.2-4.2-1.9-6.2l-1.6-3.7c-1.1-1.8-2.5-4.2-3.7-6l-2.5-3-1.8-1.9-2.1-1.9c-0.9-0.9-2.1-1.8-3-2.5-0.7-0.5-1.6-1.1-2.3-1.6-9.5-5.8-25.4-4.6-36.4 3 1.4 1.1 8.1 7.8 8.5 8.3 6.5 9.2 11 22.8 10.8 35.1 7.8-4.4 15.2-4.4 19.8 0.9 7.6 8.7 3.7 28.8-8.3 43.3l-0.4-0.7z" fill="#8486D5" p-id="19016"></path><path d="M307.3 417.8c9.7-13.6 20.8-23.7 32-29.8-4.4-2.8-8.7-3-12-1.1-11.5 6.5-20.5 14.8-29.3 27 0.5-0.7 3.7 0.6 9.3 3.9z" fill="#E5E2F2" p-id="19017"></path><path d="M339.5 387.8c-0.7-0.3-1.2-0.7-1.9-1.1-3.7-1.8-7.2-1.6-10.1 0-0.5 0.4-1.8 1.1-1.8 1.1l-1.6 1.1c-0.4 0.4-1.6 1.1-1.6 1.1l-1.6 1.1c-0.5 0.4-1.6 1.2-1.6 1.2l-1.6 1.2c-0.5 0.4-1.6 1.2-1.6 1.2l-1.6 1.2c-0.5 0.4-1.6 1.2-1.6 1.2l-1.4 1.4c-0.4 0.5-1.4 1.4-1.4 1.4l-1.4 1.4-1.4 1.4-1.4 1.4c-0.5 0.5-1.4 1.6-1.4 1.6l-1.4 1.6c-0.4 0.5-1.2 1.6-1.2 1.6l-1.2 1.6c-0.4 0.4-0.9 1.1-1.2 1.6-0.4 0.5-0.9 1.2-1.2 1.8 0.5-0.9 3.5 0.2 8.7 3.4 1.2-1.8 17.3-20.7 32.5-29.5z" fill="#C5BEED" p-id="19018"></path><path d="M312.3 420.5c1.2-1.8 2.7-3.5 3.9-5.1l-4.9-3c-1.2 1.8-2.7 3.5-3.9 5.3l4.9 3v-0.2z" fill="#E5E2F2" p-id="19019"></path><path d="M344.1 390.8l-4.9-3c-9.5 5.3-19.2 13.8-27.9 24.7l4.9 3c8.6-11.1 18.3-19.4 27.9-24.7z" fill="#E5E2F2" p-id="19020"></path><path d="M348.5 448.7c4.8-6.9 10.1-11.6 15.2-14.5 0.2-17.3-8.5-36.7-19.4-43.4-11.1 6.2-22.4 16.2-31.9 29.8 11 6.7 27.2 19.2 36 28.1h0.1z" fill="#C5BEED" p-id="19021"></path><path d="M363.5 434.4c0.2-17.3-8.5-36.7-19.4-43.4-9.5 5.1-19.2 13.6-27.9 24.5 4.9-4.4 8.5-5.7 9.7-6 7.4-1.9 6.9 5.5-1.2 19.4 8.7 6.3 17.7 13.9 23.7 19.8 4.8-6.9 10.1-11.6 15.2-14.5v0.2z" fill="#C5BEED" p-id="19022"></path><path d="M363.5 434.4c0.2-13.2-4.8-27.7-12-36.7-0.2 6.4-1.8 8.5-19.1 35.7-0.2 0.4-0.5 0.7-0.7 1.1 6.2 4.9 12.4 10.1 16.6 14.3 4.8-6.9 10.1-11.6 15.2-14.5v0.1z" fill="#C5BEED" p-id="19023"></path><path d="M363.5 434.1c-5.1 2.8-10.2 7.6-15.2 14.5-49.1 67.8-98 135.4-146.5 202.7-5.7 8.1-7.1 17.8-3.2 22.4 2.5 2.8 6.7 3 11.1 0.5 2.3-1.2 4.8-3.2 7.1-6 52.8-63.4 105.6-126.6 158.2-189.8 12-14.7 15.9-34.6 8.3-43.3-4.6-5.1-12-5.1-19.8-0.9v-0.1z" fill="#989BE0" p-id="19024"></path><path d="M151.3 617.1c0.5-0.7 3.5 0.5 9.2 3.9l146.9-203.2c-5.6-3.5-8.8-4.8-9.3-3.9-48.9 67.6-97.8 135.4-146.7 203v0.2z" fill="#D2CBF6" p-id="19025"></path><path d="M306.6 417.3L159.8 620.5c0.4 0 0.7 0.3 0.7 0.3l146.9-203.2c-0.4-0.1-0.8-0.3-0.8-0.3z" fill="#E5E2F2" p-id="19026"></path><path d="M307 417.3c-3-1.8-5.3-2.8-6.7-3.4L153.4 617.1c1.4 0.5 3.5 1.6 6.5 3.4l146.9-203.2h0.2z" fill="#D2CBF6" p-id="19027"></path><path d="M301.5 413.6c-1.2-0.4-2.1 0-2.1 0l-7.4 10.2-7.4 10.2-7.4 10.2-7.4 10.2-7.4 10.2-7.4 10.2-7.4 10.2-7.4 10.2-7.4 10.2-7.4 10.2-7.4 10.2-7.4 10.2-7.4 10.2-7.4 10.1-7.4 10.1-7.4 10.1-7.4 10.1L166 597l-7.4 10.1-7.2 10.1c0.2-0.5 0.9-0.3 1.9 0L300.2 414l1.3-0.4z" fill="#C5BEED" p-id="19028"></path><path d="M150.8 688.8c-11.8-13.6-7.4-43.4 9.9-68-5.5-3.4-8.7-4.6-9.2-3.9-9.4 13.2-14.3 29.1-13.6 43.3 0.5 9.5 3.2 15.7 4.8 18.7 2.1 3.9 3.9 6 4.9 7.2 3.2 3.4 4.2 4.2 7.9 6.7-1.7-1-3.3-2.4-4.7-4z" fill="#8486D5" p-id="19029"></path><path d="M150.8 688.8c-11.8-13.6-7.4-43.4 9.9-68-5.5-3.4-8.7-4.6-9.2-3.9-19.9 29.3-18.2 61.2 4.1 75.9-1.8-1-3.4-2.4-4.8-4z" fill="#8486D5" p-id="19030"></path><path d="M153.6 616.8c-1.1-0.2-1.8-0.4-1.9 0-0.5 0.9-1.4 2.1-1.9 3l-1.8 3c-0.5 0.9-1.2 2.1-1.8 3l-1.6 3c-0.5 0.9-1.1 2.3-1.4 3.2l-1.2 3.2c-0.4 1.1-0.7 2.3-1.1 3.4l-0.9 3.2c-0.4 1.1-0.7 2.5-0.9 3.5l-0.5 3.4c0 1.2-0.2 2.7-0.5 3.9v7.6l0.3 3.4c0.2 1.4 0.5 3.2 0.7 4.6l0.7 3.2c0.4 1.4 1.1 3.4 1.6 4.8l1.4 3c0.7 1.4 1.9 3.2 2.8 4.6l1.9 2.5 1.6 1.8 1.8 1.6c0.7 0.7 1.8 1.6 2.6 2.1 0.5 0.5 1.4 1.1 1.9 1.4-1.8-1.1-3.4-2.5-4.8-4.1-5.1-5.7-7.2-14.1-6.7-24-4.1-6.7-6.9-24.4 9.2-47.7l0.5-0.6z" fill="#8486D5" p-id="19031"></path><path d="M312.3 420.7l-4.9-3L160.5 621l5.1 3 146.7-203.3z" fill="#E5E2F2" p-id="19032"></path><path d="M155.7 691.8c-11.8-13.6-7.4-43.4 9.9-68l-4.9-3c-17.5 24.5-21.7 54.4-9.9 68 1.4 1.8 3 3 4.8 4.1l4.9 3c-1.8-1.1-3.4-2.5-4.8-4.1z" fill="#8486D5" p-id="19033"></path><path d="M155.7 691.8c-5.1-5.6-7.2-14.1-6.7-24l-4.9-3c-0.4 9.7 1.8 18.4 6.7 24 1.4 1.8 3 3 4.8 4.1l4.9 3c-1.8-1.1-3.4-2.5-4.8-4.1z" fill="#8486D5" p-id="19034"></path><path d="M156.9 638.8l-4.9-3c-4.8 9.9-7.4 19.9-7.8 28.9l4.9 3c0.6-8.9 3.3-19 7.8-28.9z" fill="#C5BEED" p-id="19035"></path><path d="M165.4 624l-4.9-3c-3.4 4.8-6.4 9.7-8.7 14.8l4.9 3c2.4-4.9 5.4-10 8.7-14.8zM348.1 448.9c-4.2-4.4-10.2-9.5-16.6-14.5l-146.7 203c6.3 4.8 12.5 9.9 16.9 13.9l146.5-202.6-0.1 0.2z" fill="#C5BEED" p-id="19036"></path><path d="M331.7 434.2c-2.3-1.8-4.8-3.5-7.1-5.3L177.8 632.1c2.5 1.8 4.9 3.5 7.2 5.3l146.7-203v-0.2zM320.9 426.5L174.1 629.7c1.2 0.9 2.3 1.6 3.5 2.5L324.5 429c-1.3-0.9-2.3-1.6-3.6-2.5z" fill="#D2CBF6" p-id="19037"></path><path d="M321.1 426.7c-1.8-1.4-3.5-2.7-5.3-3.7L169 626.1c1.6 1.1 3.4 2.3 5.3 3.5l146.9-203.2v0.3zM312.3 420.7L165.4 623.8c1.1 0.7 2.1 1.4 3.4 2.1l146.9-203.2c-1.3-0.6-2.3-1.3-3.4-2z" fill="#D2CBF6" p-id="19038"></path><path d="M220.7 678.5c1.1-1.4 0-4.9-3.7-10.2-2.3 2.8-4.8 4.8-7.1 6-4.4 2.5-8.7 2.5-11.1-0.5-3.9-4.6-2.5-14.3 3.2-22.4-9.2-8.7-25.4-20.8-36.4-27.5-17.5 24.5-21.7 54.4-9.9 68 1.4 1.8 3 3 4.8 4.1 18.5 10.6 42.2 3.7 60-17.5h0.2z" fill="#8486D5" p-id="19039"></path><path d="M577.1 807.9c33.9-14.1 54.5-35.5 61.8-44.1 23.7-28.1 30.5-49.2 36.5-72-4.6 21-21.2 41.1-49.6 57-66.2 36.9-171.2 35.8-234.6-2.3-25.4-15.2-40.2-34.1-44.7-53.1 5.5 20.3 18.4 68 75.4 103.3 35.5 21.8 94.8 36.3 155.2 11.2z" fill="#C5BEED" p-id="19040"></path><path d="M566.1 363.1c29.7 17.8 28.6 46.4-2.3 63.7-30.9 17.3-80.1 16.8-110-1.1-29.7-17.8-28.8-46.4 2.3-63.7 30.9-17.3 80.2-16.7 110 1.1z m-62.5 27.7c-3.7 2.1-3.9 5.5-0.4 7.6 3.5 1.9 9.4 2.1 13.1 0 3.7-2.1 3.9-5.5 0.4-7.6-3.5-1.9-9.4-2.1-13.1 0z" fill="#D6D6D6" p-id="19041"></path><path d="M346.5 692.9c4.4 19.4 19.2 38.3 44.7 53.7 63.4 38.1 168.4 39.2 234.6 2.3 28.2-15.7 44.8-36 49.6-57l32.3-164.5c-5.5 25.2-25.4 49.4-59.5 68.5-79.4 44.3-205.3 42.9-281.4-2.8-30.5-18.4-48.4-41-53.7-64.4L346.3 693h0.2z" fill="#C5BEED" p-id="19042"></path><path d="M396.1 354.8c-30.7 16.8-57.5 44.3-71.7 73.6-21.7 45.4-15.2 81-11.6 100.1 5.3 23.5 23.1 46.1 53.7 64.4 76.1 45.7 202.1 47 281.4 2.8 34.1-19.1 54-43.3 59.8-69.6 4.6-26.6 7.4-56.1-12.2-98.5-18-38.8-52.6-61.2-65.7-69.7-16.1-9.7-38.5-9-63.7 5.1 29.7 17.8 28.6 46.4-2.3 63.7-30.9 17.3-80.1 16.8-110-1.1-29.7-17.8-28.8-46.4 2.3-63.7 30.9-17.3 80.1-16.8 110 1.1 25.3-13.9 47.7-14.8 63.7-5.1-68.3-40.6-162.1-41.8-233.4-3.2h-0.3z" fill="#F5F4FB" p-id="19043"></path><path d="M381.1 499.2c53.7 33.2 135.9 42.9 199.8 23.5 44.1-13.4 67.3-29.3 90.2-50.7 29.3-27.2 39.9-62.1 43.4-73.6-6.7 25.4-27.2 49.8-61.6 68.8-83 46.2-215 45-294.6-3-30.5-18.4-49.1-41.1-55.4-64.6 5.1 17.3 18.7 63 78.2 99.7v-0.1z" fill="#E5E2F2" p-id="19044"></path><path d="M403 142.1c-23.5 12.9-44 31.1-55.1 43.8-21.5 24.5-31.1 42.2-41.1 66-8.3 19.9-13.4 43.9-14.8 71.3-1.4 25.6 3.4 46.4 7.6 65 6.5 23.8 25.2 46.8 56.3 65.5 80.8 48.7 214.6 50 299 3 35-19.4 55.8-44.1 62.8-70.4 5.1-23.1 9-41.5 6.4-75-2.5-30.4-11.6-53.1-17.8-68.3-5.5-13.4-19.2-36.7-34.1-53.3-21-23.5-36.2-33.4-52.2-43.8-28.1-17.1-67.4-15.7-111.9 9 44.3-24.7 83.7-26 111.9-9-67.8-40.3-146.9-41.5-216.8-3.5l-0.2-0.3z" fill="#EFECF8" p-id="19045"></path><path d="M495.7 305.6c-38.5-0.3-77.1-9.5-105.6-27.5-8.5-5.3-15.4-11-21-16.9-7.2-5.3-12.6-8.3-16.2-9-49.2-9.7-78.4 97.8-28.8 162.4 7.6 8.1 16.9 15.7 28.1 22.8 38.1 24 89.8 36.4 141.4 36.7 77-5.8 86-69.9 86.3-72.6 4.4-34.5-23.1-88.5-84.2-95.9z" fill="#041B99" p-id="19046"></path><path d="M303.1 399.8c6.3 23.5 24.9 46.1 55.4 64.4 79.6 48 211.6 49.3 294.6 3 34.2-19.1 54.9-43.4 61.6-68.7l3-11.5c-6.9 25.6-27.9 50.3-62.7 69.7-84.2 46.9-218.2 45.7-299-3-31.1-18.7-49.8-41.6-56.3-65.5l3.2 11.5h0.2z" fill="#E5E2F2" p-id="19047"></path><path d="M343.9 283.3c-1.1-1.1-2.1-2.5-4.1-3.2-16.9-5.8-38.5 40.8-26.7 69.5 6.2 15.2 17.7 10.4 26.3-10.9 5-12.1 12.4-41.8 4.5-55.4zM474.7 343c-28.9-0.5-45.7 45.4-25.4 70.1 19.1 23.3 51.2 9.5 53.8-23.1 1.4-17-6.7-43.7-28.4-47zM405.3 425.8c0.2-1.8 0.2-2.8 0.2-3.5-19.4-6-37.6-14.1-53.3-24h-0.5c-0.7 4.6 0.5 13.2 6.5 22.2 14.8 22.4 43.4 25.8 47 5.3h0.1z" fill="#1EB0FC" p-id="19048"></path><path d="M689.2 559.8c-13.6 7.9-24.7 27.7-23.7 43.4-15 9.5-36.2 11.8-47.3 5.5v-6.2 6.2l-4.9-3c-4.2-2.5-6.4-5.8-6.5-9.5-0.5-19.1 5.3-36 13.8-50.1 8.7-14.5 19.9-26.1 31.8-33 3.2-1.8 7.4-1.8 11.8 0.9l4.9 3c11.1 6.5 20.1 25.8 20.1 43.1v-0.3z" fill="#F5F4FB" p-id="19049"></path><path d="M636.4 885.3c-6.7-3.9-11.1-11.8-11.8-23.1-4.2-2.5-6.3-5.8-6.5-9.7 0.5 5.7 0.9 7.2 1.8 10.6 0.7 2.6 2.1 6.3 3 7.8 2.6 4.8 3.4 5.7 6.7 9.4 1.1 1.2 2.8 2.5 4.1 3.5 0.7 0.5 2.6 1.6 2.6 1.6h0.1z" fill="#C5BEED" p-id="19050"></path><path d="M624.4 862.1c-4.2-2.5-6.3-5.8-6.5-9.7 1.2 15.4 6.9 25.4 18.4 32.8-6.8-3.8-11.2-11.8-11.9-23.1z" fill="#C5BEED" p-id="19051"></path><path d="M629.3 865.1l-4.9-3c0.7 11.3 5.1 19.2 11.8 23.1l4.9 3c-6.7-3.8-11.1-11.8-11.8-23.1z" fill="#C5BEED" p-id="19052"></path><path d="M629.3 865.1l-4.9-3c0.7 11.3 5.1 19.2 11.8 23.1l4.9 3c-6.7-3.8-11.1-11.8-11.8-23.1z" fill="#C5BEED" p-id="19053"></path><path d="M717.2 828.6c-0.4 5.3-4.9 11.1-13.8 15.7-0.4 7.8-6.2 17.5-13.2 21.5-7.1 4.1-12.9 1.1-13.4-6.7-15 9.7-36.2 12.4-47.3 6 0.7 11.3 5.1 19.2 11.8 23.1 30.5 16.9 72.4-16.1 75.9-59.8v0.2z" fill="#989BE0" p-id="19054"></path><path d="M702.6 843.9c8.8-4.6 13.6-10.4 13.8-15.9l0.5-13.4 0.5-13.4 0.5-13.4 0.5-13.4 0.6-13.4 0.5-13.4 0.5-13.4 0.5-13.4 0.5-13.4 0.5-13.4 0.5-13.4 0.5-13.4 0.5-13.4 0.5-13.4 0.5-13.4 0.5-13.4 0.5-13.4 0.5-13.4 0.5-13.4 0.5-13.4c-0.2 5.3-4.9 11.1-13.8 15.5L703 844.3l-0.4-0.4z" fill="#989BE0" p-id="19055"></path><path d="M613.8 604.6c-4.2-2.5-6.5-5.8-6.5-9.7l0.5 12.9 0.5 12.9 0.5 12.9 0.5 12.9 0.5 12.9 0.5 12.9 0.5 12.9 0.5 12.9 0.5 12.9 0.5 12.9 0.5 12.9 0.5 12.9 0.5 12.9 0.5 12.9 0.5 12.9 0.5 12.9 0.5 12.9 0.5 12.9 0.5 12.7 0.5 12.7c0.2 3.9 2.3 7.4 6.5 9.9L613.3 606l0.5-1.4zM664.4 514c14.1-7.9 26.8-8.7 36-3.4l-4.6-2.3-3.5-1.2c-1.9-0.5-4.6-1.1-6.5-1.4l-3.7-0.4c-1.9-0.2-4.6 0-6.5 0l-3.9 0.5c-1.8 0.4-4.2 0.9-6 1.4l-4 1.4c-1.8 0.7-3.9 1.8-5.5 2.5-1.2 0.5-2.8 1.4-4 2.1 3.2-1.9 7.2-1.8 11.5 0.5h0.9v0.3z" fill="#E5E2F2" p-id="19056"></path><path d="M618.2 608.8l-4.9-2.8 11.1 256.1 5.1 3-11.3-256.3z" fill="#E5E2F2" p-id="19057"></path><path d="M669 516.9h0.4c14.1-7.9 26.8-8.7 36-3.4l-4.9-3c-9.2-5.3-22.8-4.6-36.9 3.4l5.5 3.2v-0.2zM665.5 603.3c3.7 85.4 7.4 170.7 11.1 255.6 0.5 7.9 6.3 10.8 13.4 6.7s12.9-13.8 13.2-21.5c3.2-89.5 6.5-178.8 9.7-268.8 0.9-16.2-10.1-23.3-23.8-15.4-13.5 8-24.7 27.7-23.6 43.4z" fill="#C5BEED" p-id="19058"></path><path d="M618.2 608.8L629.3 865c11.1 6.5 32.3 3.7 47.3-6l-11.1-255.6c-15 9.5-36.2 11.8-47.3 5.4z" fill="#E5E2F2" p-id="19059"></path><path d="M606.7 596.6c0.2 3.7 2.3 7.1 6.5 9.5-1.9-32.8 21.3-75 50.8-92-4.4-2.6-8.5-2.8-11.8-0.9-10.1 5.8-16.2 12.4-19.6 15.9-3.5 3.9-9.4 11.3-13.9 19.6-5.8 10.8-8.3 19.4-9.2 22.6-0.4 1.6-0.9 3.7-1.2 5.3-0.5 2.8-1.1 6.5-1.4 9.3-0.2 1.8-0.2 4.1-0.2 5.8V596.6z" fill="#F5F4FB" p-id="19060"></path><path d="M689.2 559.9c0-17.3-9-36.7-20.1-43.1-29.5 17.1-52.8 59.3-50.8 92 11.1 6.5 32.3 4.1 47.3-5.5-1.2-15.7 10-35.6 23.6-43.4z" fill="#F5F4FB" p-id="19061"></path><path d="M726.8 552.5v7.8c-0.4 5.3-5.1 10.9-13.8 15.4 0.9-16.2-10.1-23.3-23.8-15.4 0-17.3-9-36.7-20.1-43.1 14.3-8.1 27.2-8.8 36.4-3.5 1.1 0.5 2.3 1.2 3.2 1.9 1.6 1.2 3.7 2.8 5.1 4.4 1.6 1.6 3.5 3.9 4.8 5.8 1.2 1.8 2.5 4 3.4 6 1.4 3.4 3 6.9 4.2 14.1 0.3 1.8 0.7 4.4 0.7 6.4v0.2z" fill="#C5BEED" p-id="19062"></path><path d="M688.6 560.1c-13.6 8-24.7 27.7-23.7 43.4-15 9.5-36.2 11.8-47.3 5.5l-4.9-3c-4.2-2.5-6.3-5.8-6.5-9.5v-4.6c0-1.8 0.2-4.1 0.2-5.8l0.5-4.8c0.2-1.6 0.5-3.7 0.9-5.3l1.1-4.6c0.4-1.6 0.9-3.5 1.4-4.9l1.6-4.6c0.7-1.4 1.4-3.2 1.9-4.6l1.9-4.4c0.7-1.2 1.6-3 2.3-4.2l2.5-4.2c0.9-1.2 1.8-2.8 2.7-4l2.8-3.9c0.9-1.2 2.1-2.8 3-3.9l3.2-3.5 3.5-3.5 3.5-3.2c1.2-1.1 2.8-2.5 4.1-3.4l3.9-2.8c1.4-0.9 3.4-2.1 4.8-3 3.2-1.9 7.2-1.8 11.5 0.5-3.5 0.2-7.1 1.1-10.4 2.5-3.5 1.4-6.9 3.4-9.9 5.7-3.4 2.5-6.4 5.1-9.2 8.1-3 3-5.6 6.4-8.1 9.9s-4.8 7.2-6.7 11.1c-1.9 3.9-3.7 7.8-5.1 11.8-1.2 3.7-2.5 7.6-3.2 11.6-0.7 3.5-1.1 7.2-1.1 10.9 0 2.3 0.4 4.6 0.7 6.9 0.4 1.6 0.5 3.9 1.6 5.1 2.7 3 6.7 4.8 10.6 5.1 4.4 0.4 10.6-1.6 13.1-5.5 0.9-1.4 1.6-2.8 2.5-4.2 3.2-5.1 6.2-10.4 9.3-15.5 3.9-6.4 7.6-12.7 11.5-19.1 3.2-5.3 6.2-10.4 9.4-15.5 1.1-1.8 1.9-3.4 3-5.1 2.1-3.7 4.8-9.2 5.1-13.4v-0.7c7.4 9 12.7 23.3 12.7 36.5l-0.7 0.1z" fill="#E5E2F2" p-id="19063"></path><path d="M658.8 289.5l30.9 17.8c20-11.5 38.3-12.5 51.4-4.9l-30.9-17.8c-13.1-7.8-31.3-6.8-51.4 4.9z" fill="#1462FC" p-id="19064"></path><path d="M740.9 302.6L710 284.7c-13.1-7.8-31.2-6.7-51.4 4.9l30.9 17.8c20-11.4 38.3-12.4 51.4-4.8z" fill="#0277FC" p-id="19065"></path><path d="M617.3 432.3c-0.2-45.9 32.1-101.8 72-125l-30.9-17.8c-39.9 23.1-72 79.1-72 125 0.2 22.8 8.1 38.8 21.2 46.4l30.9 17.8c-13.1-7.6-21.2-23.6-21.2-46.4z" fill="#1462FC" p-id="19066"></path><path d="M617.3 432.3c-0.2-45.9 32.1-101.8 72-125l-30.9-17.8c-39.9 23.1-72 79.1-72 125 0.2 22.8 8.1 38.8 21.2 46.4l30.9 17.8c-13.1-7.6-21.2-23.6-21.2-46.4z" fill="#0277FC" p-id="19067"></path><path d="M617.5 432.5c0.2 45.9 32.7 64.4 72.5 41.3 39.9-23 72-78.9 72-124.8-0.2-46.1-32.7-64.6-72.6-41.5-39.8 23.1-71.9 79.1-71.9 125z" fill="#031020" p-id="19068"></path><path d="M690.2 328.5l10.2 6c15.9-9.2 30.4-10.1 40.8-4.1l-10.2-6c-10.4-6-24.9-5.1-40.8 4.1z" fill="#E5E2F2" p-id="19069"></path><path d="M741.4 330.3l-10.2-6c-10.4-6-24.9-5.1-40.8 4.1l10.2 6c15.9-9.2 30.4-10.1 40.8-4.1zM643.5 433.2c-0.2-36.4 25.4-80.7 57-98.8l-10.2-6c-31.6 18.2-57 62.5-57 98.8 0.2 18 6.5 30.7 16.8 36.7l10.2 6c-10.5-6-16.8-18.7-16.8-36.7z" fill="#E5E2F2" p-id="19070"></path><path d="M643.5 433.2c-0.2-36.4 25.4-80.7 57-98.8l-10.2-6c-31.6 18.2-57 62.5-57 98.8 0.2 18 6.5 30.7 16.8 36.7l10.2 6c-10.5-6-16.8-18.7-16.8-36.7z" fill="#E5E2F2" p-id="19071"></path><path d="M700.6 334.5c-31.6 18.2-57 62.5-57 98.8 0 36.2 25.8 50.8 57.4 32.7 31.6-18.2 57-62.5 57-98.8 0-36.4-25.8-51-57.4-32.8v0.1z" fill="#989BE0" p-id="19072"></path><path d="M690.2 328.5l10.2 6c15.9-9.2 30.4-10.1 40.8-4.1l-10.2-6c-10.4-6-24.9-5.1-40.8 4.1z" fill="#E5E2F2" p-id="19073"></path><path d="M741.4 330.3l-10.2-6c-10.4-6-24.9-5.1-40.8 4.1l10.2 6c15.9-9.2 30.4-10.1 40.8-4.1zM643.5 433.2c-0.2-36.4 25.4-80.7 57-98.8l-10.2-6c-31.6 18.2-57 62.5-57 98.8 0.2 18 6.5 30.7 16.8 36.7l10.2 6c-10.5-6-16.8-18.7-16.8-36.7z" fill="#E5E2F2" p-id="19074"></path><path d="M643.5 433.2c-0.2-36.4 25.4-80.7 57-98.8l-10.2-6c-31.6 18.2-57 62.5-57 98.8 0.2 18 6.5 30.7 16.8 36.7l10.2 6c-10.5-6-16.8-18.7-16.8-36.7z" fill="#E5E2F2" p-id="19075"></path><path d="M700.6 334.5c-31.6 18.2-57 62.5-57 98.8 0 36.2 25.8 50.8 57.4 32.7 31.6-18.2 57-62.5 57-98.8 0-36.4-25.8-51-57.4-32.8v0.1z" fill="#989BE0" p-id="19076"></path><path d="M700.6 353c-22.8 13.1-41.1 45-41.1 71.1 0 26.1 18.5 36.5 41.3 23.5 22.8-13.1 41.1-45 41.1-71.1 0-26.3-18.5-36.7-41.3-23.7v0.2z" fill="#1EB0FC" p-id="19077"></path><path d="M412.4 126.9c3.5-2.3 30.5-11.8 41.7-11.8 16.2 0 34.4 3.9 53.7 12.5 17.8 7.9 35.1 19.1 51.2 32.5 1.8 1.6 3.7 3.2 5.5 4.8 17.3 15.2 33 32.8 46.8 52.2 7.4 10.6 14.3 21.5 20.3 32.8 17.1 31.9 16.1 47.7 19.8 69.7l46.6-30.2c-2.3-32.5-2.5-37.8-19.8-69.7-6-11.3-12.9-22.2-20.3-32.8-13.8-19.2-29.5-37.1-46.8-52.2-1.8-1.6-3.5-3.2-5.5-4.8-16.2-13.4-33.5-24.5-51.2-32.5-19.2-8.7-37.4-12.5-53.7-12.5-15.9 0.2-30 4.2-41.7 11.8l-46.6 30.2z" fill="#0277FC" p-id="19078"></path><path d="M651.6 319.9l-7.9-3.5c-4.1-35.3-13.2-58.2-39.7-96.2-13.2-19.1-25.2-34.4-42-49.1-16.6-14.6-34.6-26.8-53.3-35.1-18.4-8.1-35.3-11.8-50.7-11.8-4.4 0-8.7 0.4-12.7 1.1 1.4-2.1 2.8-4.1 4.2-5.8 1.1-1.6 4.8-4.2 4.8-4.2 16.2 0 34.4 3.9 53.7 12.5 19.8 8.8 39 21.7 56.7 37.2 26.5 23.5 49.8 53.1 67.1 85.1 17.1 31.9 16.9 49.2 19.8 69.7v0.1z" fill="#031020" p-id="19079"></path><path d="M413.3 126.6c-39.4 20.8-60.2 44-62.3 56.5 22.9-23.1 75-56.3 94.3-58.1 1.6-1.9 7.6-8.6 9-9.9-3.2-0.2-20.8 0.7-41.1 11.5h0.1zM355.2 494.3c-0.4 0-0.7-0.2-1.1-0.2-35.1-18.4-61.8-54.4-71.3-96.2-3.4-15-3.9-36.7-1.2-58.1 0.2-1.2 1.2-1.9 2.5-1.9 1.2 0.2 1.9 1.2 1.9 2.5-2.5 20.8-2.1 42 1.2 56.5 9.2 40.8 35.1 75.6 69 93.4 0.9 0.5 1.4 1.9 0.9 3-0.4 0.9-1.9 1.2-1.9 1.2v-0.2z" fill="#031020" p-id="19080"></path><path d="M371.4 475c-15-8.5-31.6-7.4-37.4 2.5-5.8 9.9 1.6 24.9 16.6 33.6 15 8.5 31.6 7.4 37.4-2.5 5.8-9.9-1.6-24.9-16.6-33.6z" fill="#031020" p-id="19081"></path><path d="M877.3 668.7c54.9 44.7 82.1 97.4 82.1 150l0.4-123.7c0.2-52.6-27.2-105.2-82.1-150l-0.4 123.7z" fill="#1EB0FC" fill-opacity=".4" p-id="19082"></path><path d="M70.1 535.2c0-10.4 1.2-20.8 3.5-31.2v-66.9c-2.3 10.4-3.4 20.8-3.4 31.2-0.1 22.3-0.1 44.7-0.1 66.9z" fill="#50A7F5" fill-opacity=".5" p-id="19083"></path><path d="M197.4 943l0.4-123.7c-44.5-26.1-77.5-56.7-98.8-89v62c-13.1-19.9-21.9-40.6-26.3-61.6v62c11.1 54.9 52.8 108.2 124.6 150.6l0.1-0.3z" fill="#1EB0FC" fill-opacity=".5" p-id="19084"></path><path d="M99.2 730.3c-13.1-19.9-21.9-40.6-26.3-61.6v62c-2.1-10.2-3.2-20.7-3.2-31.1l0.4-126.6c-0.2 31.4 9.5 62.8 29.1 92.7v64.6z" fill="#1EB0FC" fill-opacity=".5" p-id="19085"></path><path d="M99.1 792.2v-62c-13.1-19.9-21.9-40.6-26.3-61.6v62c4.4 21 13.1 41.7 26.1 61.6h0.2z" fill="#50A7F5" fill-opacity=".75" p-id="19086"></path><path d="M113 646.2c-28.6-35-42.7-73.1-42.7-111v-31.6-35.3c-0.2 38 14.1 75.9 42.7 111v66.9zM905.6 594.2c28.6-35 42.7-73.1 42.7-111v-31.6-35.3c0.2 38-14.1 75.9-42.7 111v66.9z" fill="#1EB0FC" fill-opacity=".5" p-id="19087"></path><path d="M959.6 818.7c0 2.7-0.2 5.1-0.2 7.8l0.4-123.7c0.2-2.7 0.2-5.1 0.2-7.8l-0.4 123.7zM926.9 614.8c-21.5 30.2-53.3 58.6-95.7 83.1-166.6 96.9-434.9 100.4-610.1 10.8l-0.4 126.6c117.4 60.2 276.6 78.4 419.1 54.7v-41.7c70.1-11.6 136.1-33.5 191.2-65.5 17.3-10.1 32.8-20.7 46.6-32v41.7c19.9-16.1 36.2-33.4 48.9-51.2l0.4-126.5z" fill="#50A7F5" fill-opacity=".5" p-id="19088"></path><path d="M877.7 792.8h-0.2V875c-13.9 11.1-29.5 21.9-46.8 31.9-55.1 31.9-121.1 53.8-191 65.5V848.5c70.1-11.7 136.1-33.6 191.2-65.5 17.3-10.1 33-20.8 46.8-31.9v41.7z" fill="#50A7F5" fill-opacity=".75" p-id="19089"></path><path d="M70.1 535.2c0-10.4 1.2-20.8 3.5-31.2v-66.9c-2.3 10.4-3.4 20.8-3.4 31.2-0.1 22.3-0.1 44.7-0.1 66.9z" fill="#50A7F5" fill-opacity=".5" p-id="19090"></path><path d="M842.6 582.2h0.2v-82.3c-13.9 11.1-29.5 21.9-46.8 31.9-55.1 32.1-121.1 53.8-191.5 65.5v82.3c70.1-11.6 136.1-33.6 191.2-65.5 17.3-10.1 33-20.7 46.8-31.9h0.1z" fill="#1EB0FC" fill-opacity=".5" p-id="19091"></path><path d="M959.6 818.7c0 2.7-0.2 5.1-0.2 7.8l0.4-123.7c0.2-2.7 0.2-5.1 0.2-7.8l-0.4 123.7z" fill="#50A7F5" fill-opacity=".5" p-id="19092"></path><path d="M926.9 614.8c-21.5 30.2-53.3 58.6-95.7 83.1-166.6 96.9-434.9 100.4-610.1 10.8l-0.4 126.6c117.4 60.2 276.6 78.4 419.1 54.7v-41.7c70.1-11.6 136.1-33.5 191.2-65.5 17.3-10.1 32.8-20.7 46.6-32v41.7c19.9-16.1 36.2-33.4 48.9-51.2l0.4-126.5z" fill="#1EB0FC" fill-opacity=".5" p-id="19093"></path><path d="M450.2 1024v-68.1c-83-7.2-162.9-27.9-229.8-62V962c66.7 34.2 146.9 54.9 229.6 62h0.2z" fill="#50A7F5" fill-opacity=".5" p-id="19094"></path><path d="M450.2 1024v-68.1c-83-7.2-162.9-27.9-229.8-62V962c66.7 34.2 146.9 54.9 229.6 62h0.2z" fill="#1EB0FC" fill-opacity=".5" p-id="19095"></path></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/alipay.svg b/frontend/new-web/src/assets/icons/alipay.svg
new file mode 100755
index 00000000..bd7cd549
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/alipay.svg
@@ -0,0 +1,6 @@
+<svg t="1655172500569" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4063"
+  width="200" height="200">
+  <path
+    d="M230.4 576.512c-12.288 9.728-25.088 24.064-28.672 41.984-5.12 24.576-1.024 55.296 22.528 79.872 28.672 29.184 72.704 37.376 91.648 38.912 51.2 3.584 105.984-22.016 147.456-50.688 16.384-11.264 44.032-34.304 70.144-69.632-59.392-30.72-133.632-64.512-212.48-61.44-40.448 1.536-69.632 9.728-90.624 20.992z m752.64 135.68c26.112-61.44 40.96-129.024 40.96-200.192C1024 229.888 794.112 0 512 0S0 229.888 0 512s229.888 512 512 512c170.496 0 321.536-83.968 414.72-211.968-88.064-43.52-232.96-115.712-322.56-159.232-42.496 48.64-105.472 97.28-176.64 118.272-44.544 13.312-84.992 18.432-126.976 9.728-41.984-8.704-72.704-28.16-90.624-47.616-9.216-10.24-19.456-22.528-27.136-37.888 0.512 1.024 1.024 2.048 1.024 3.072 0 0-4.608-7.68-7.68-19.456-1.536-6.144-3.072-11.776-3.584-17.92-0.512-4.096-0.512-8.704 0-12.8-0.512-7.68 0-15.872 1.536-24.064 4.096-20.48 12.8-44.032 35.328-65.536 49.152-48.128 114.688-50.688 148.992-50.176 50.176 0.512 138.24 22.528 211.968 48.64 20.48-43.52 33.792-90.112 41.984-121.344h-307.2v-33.28h157.696v-66.56H272.384V302.08h190.464V235.52c0-9.216 2.048-16.384 16.384-16.384h74.752V302.08h207.36v33.28h-207.36v66.56h165.888s-16.896 92.672-68.608 184.32c115.2 40.96 278.016 104.448 331.776 125.952z"
+    fill="#06B4FD" p-id="4064"></path>
+</svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/api.svg b/frontend/new-web/src/assets/icons/api.svg
new file mode 100644
index 00000000..0181bdde
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/api.svg
@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M499.2 671.232v-261.12h102.4c16.384 0 28.672 1.024 37.888 2.56 13.312 2.048 24.576 6.656 34.816 13.312 9.728 6.656 17.92 16.384 23.552 28.16 6.144 12.288 8.704 25.6 8.192 38.4 0 23.552-7.68 44.032-23.04 59.904-15.36 16.896-40.96 25.088-78.848 25.088h-43.52v93.184l-61.44.512zm281.6 0h-61.952v-261.12H780.8v261.12zm-287.744 0h-69.12L396.8 601.6h-73.728l-25.088 69.632h-66.56l100.352-261.12h54.272l107.008 261.12zM343.552 545.28h32.256l-15.872-42.496c0-.512-.512-1.024-.512-1.536l-15.872 44.032zm217.6-26.112h43.52c20.48 0 28.16-4.608 31.232-7.168 4.608-4.096 7.168-10.752 7.168-18.944 0-6.656-1.536-11.776-4.096-15.36-2.56-3.584-6.144-6.144-10.752-7.68-1.536-.512-6.656-1.536-24.064-1.536h-43.008v50.688z"/><path d="M747.52 842.752H512c-8.704 0-16.384-3.584-22.016-9.728-6.144-6.144-9.216-14.336-8.704-22.528.512-16.896 14.336-30.72 31.232-31.232H747.52c115.712 0 209.408-94.208 209.408-209.408 0-104.96-78.848-194.56-183.296-207.872l-22.528-3.072-4.608-22.016C724.992 231.936 631.808 156.16 524.288 156.16c-124.928 0-226.304 101.376-226.304 226.304v8.704l1.536 36.352-36.352-4.096c-6.144-1.024-12.288-1.024-18.432-1.024-98.304 0-178.176 79.872-178.176 178.176 0 98.304 79.872 178.176 178.176 178.176h63.488c8.704 0 16.384 3.584 22.016 9.728 6.144 6.144 9.216 14.336 8.704 22.528-.512 16.896-14.336 30.72-31.232 31.232h-64c-64 0-123.904-25.088-169.472-70.144C28.16 726.528 3.072 665.6 3.072 601.088c0-129.536 103.936-236.544 232.448-241.152 12.288-157.184 149.504-276.48 307.2-266.24 59.904 3.584 118.784 27.136 165.888 65.536 45.568 37.376 77.824 87.04 94.208 143.872 125.952 26.112 217.088 137.728 217.088 266.752.512 151.04-121.856 272.896-272.384 272.896z"/><path d="M572.416 930.816c-8.192 0-15.872-3.072-21.504-8.704L431.616 812.544l113.152-117.76c6.144-6.144 13.824-9.216 22.528-9.216 8.704 0 16.384 3.072 22.528 9.216 11.776 11.776 12.288 31.232 1.024 44.032l-68.608 70.656 71.68 66.048c6.144 5.632 9.728 13.312 10.24 22.016.512 8.704-2.56 16.384-8.192 23.04-6.656 6.656-14.848 10.24-23.552 10.24z"/></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/arco.svg b/frontend/new-web/src/assets/icons/arco.svg
new file mode 100755
index 00000000..3913a29e
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/arco.svg
@@ -0,0 +1,5 @@
+<svg width="22" height="16" viewBox="0 0 22 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.72938 13.2709C1.31587 11.8234 1.31587 9.51246 2.72938 8.06503L7.9367 2.73274C9.39842 1.23594 11.8058 1.23594 13.2675 2.73274C14.681 4.18017 14.681 6.49116 13.2675 7.93859L8.06017 13.2709C6.59845 14.7677 4.19111 14.7677 2.72938 13.2709Z" fill="#12D2AC"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.94084 2.7323C9.40256 1.23549 11.8099 1.23549 13.2716 2.7323L18.4789 8.06459C19.8925 9.51202 19.8925 11.823 18.4789 13.2704C17.0172 14.7672 14.6099 14.7672 13.1482 13.2704L7.94084 7.93815C6.52733 6.49071 6.52733 4.17973 7.94084 2.7323Z" fill="#307AF2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.7384 2.93044C9.30781 1.32337 11.8925 1.32337 13.4619 2.93045L15.8075 5.33229L10.6002 10.6646L5.39285 5.33229L7.7384 2.93044Z" fill="#0057FE"/>
+</svg>
diff --git a/frontend/new-web/src/assets/icons/avatar-man.svg b/frontend/new-web/src/assets/icons/avatar-man.svg
new file mode 100755
index 00000000..ddbcef69
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/avatar-man.svg
@@ -0,0 +1,29 @@
+<svg t="1648864366083" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+  p-id="43365" width="200" height="200">
+  <path d="M0 512c0 281.6 230.4 512 512 512s512-230.4 512-512S793.6 0 512 0 0 230.4 0 512z" fill="#D7D1D1" p-id="43366">
+  </path>
+  <path
+    d="M512 1024c140.8 0 264.541091-55.458909 358.4-145.058909-8.541091-29.882182-17.058909-55.482182-25.6-68.282182-42.658909-51.2-221.858909-72.517818-221.858909-72.517818L512 768l-106.658909-29.858909s-179.2 25.6-221.882182 72.517818c-8.517818 12.8-17.058909 38.4-25.6 68.282182C247.458909 968.541091 371.2 1024 512 1024z"
+    fill="#6B8E9D" p-id="43367"></path>
+  <path
+    d="M281.6 456.541091c0-29.882182 12.8-55.482182 34.141091-55.482182 21.317818 0 42.658909 17.082182 46.917818 46.941091 4.282182 29.858909-12.8 55.458909-34.117818 55.458909-21.341091 0-46.941091-17.058909-46.941091-46.917818z m145.058909 170.658909v149.341091h170.682182V627.2h-170.682182z m273.082182-123.741091c-21.341091 0-38.4-29.858909-34.141091-55.458909 4.258909-29.858909 25.6-51.2 46.941091-46.941091 21.317818 0 38.4 29.882182 34.117818 55.482182-4.258909 29.858909-25.6 51.2-46.917818 46.917818z"
+    fill="#FFE5C5" p-id="43368"></path>
+  <path
+    d="M512 213.341091s-183.458909 8.517818-183.458909 106.658909v200.541091c0 38.4 59.717818 149.317818 119.458909 153.6 29.858909 0 64 4.258909 64 4.258909s38.4-4.258909 64-4.258909c55.458909-4.282182 115.2-115.2 115.2-153.6v-196.282182c4.258909-98.117818-179.2-110.917818-179.2-110.917818"
+    fill="#FEE1B9" p-id="43369"></path>
+  <path
+    d="M622.941091 243.2C571.741091 217.6 512 213.341091 512 213.341091c-8.541091 0-183.458909 8.517818-183.458909 106.658909v200.541091c0 38.4 59.717818 149.317818 119.458909 153.6H512s38.4-4.282182 64-4.282182c55.458909-4.258909 119.458909-115.2 119.458909-153.6v-192c0-38.4-29.858909-68.258909-72.517818-81.058909"
+    fill="#FFF0DA" p-id="43370"></path>
+  <path d="M401.058909 729.6L499.2 1024h29.858909l98.141091-294.4-115.2 25.6z" fill="#FFFFFF" p-id="43371"></path>
+  <path d="M524.8 819.2l25.6-25.6L512 755.2l-38.4 38.4 25.6 25.6-29.858909 149.341091L512 1011.2l46.941091-42.658909z"
+    fill="#515151" p-id="43372"></path>
+  <path
+    d="M512 755.2l89.6-46.941091 46.941091 25.6-76.8 106.682182L512 755.2z m0 0l-89.6-46.941091-46.941091 25.6 93.882182 106.682182L512 755.2z"
+    fill="#FFFFFF" p-id="43373"></path>
+  <path
+    d="M704 439.458909h-17.058909l-21.341091-162.117818s51.2-21.341091 64 42.658909c12.8 64-25.6 119.458909-25.6 119.458909m-392.541091 0h17.082182l21.317818-162.117818s-51.2-21.341091-64 42.658909c-8.517818 64 25.6 119.458909 25.6 119.458909"
+    fill="#46382E" p-id="43374"></path>
+  <path
+    d="M512 349.858909c102.4 0 174.941091-12.8 221.858909-102.4 0 0-46.917818-12.8-153.6-55.458909-166.4-68.258909-302.917818 42.658909-256 119.458909 12.8 25.6 85.341091 38.4 187.741091 38.4z"
+    fill="#46382E" p-id="43375"></path>
+</svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/avatar-woman.svg b/frontend/new-web/src/assets/icons/avatar-woman.svg
new file mode 100755
index 00000000..ab027df9
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/avatar-woman.svg
@@ -0,0 +1,24 @@
+<svg t="1648864059094" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+  p-id="34164" width="200" height="200">
+  <path
+    d="M510.002302 510.002302m-510.002302 0a510.002302 510.002302 0 1 0 1020.004604 0 510.002302 510.002302 0 1 0-1020.004604 0Z"
+    fill="#F9E9E6" p-id="34165"></path>
+  <path
+    d="M511.532309 1023.999622c126.952795 0.151112 249.608349-44.738535 344.893779-126.216125l-7.09281-43.54853C849.031055 778.934072 786.206327 717.969908 708.676532 717.781018H318.043102c-77.539239 0.245557-140.326189 61.22861-140.571745 136.529505L170.000767 900.465731c94.813206 79.777582 216.08042 123.628336 341.531542 123.533891"
+    fill="#FCA183" p-id="34166"></path>
+  <path
+    d="M523.668475 806.200306H511.607865c-46.183542 0-96.050434-38.967954-96.050434-86.577613l12.117277-160.820726c0.160556-47.713549 37.636281-86.369834 83.942601-86.577613h11.966166c46.362987 0.122778 83.933157 38.797953 84.093712 86.577613l11.966166 160.820726c0 47.675771-49.781891 86.577613-95.984323 86.577613"
+    fill="#FFFFFF" p-id="34167"></path>
+  <path
+    d="M523.668475 806.200306H511.607865c-46.183542 0-96.050434-38.967954-96.050434-86.577613l12.117277-160.820726c0.160556-47.713549 37.636281-86.369834 83.942601-86.577613h11.966166c46.362987 0.122778 83.933157 38.797953 84.093712 86.577613l11.966166 160.820726c0 47.675771-49.781891 86.577613-95.984323 86.577613"
+    fill="#FFFFFF" p-id="34168"></path>
+  <path
+    d="M610.236643 651.46183l-5.987804-77.973686c-0.198334-45.437427-37.041278-82.21426-82.516484-82.374816h-11.833942c-45.475205 0.198334-82.280371 37.0035-82.440928 82.440928L415.557431 726.696614a67.490305 67.490305 0 0 0 8.575595 32.432368c5.940582 0.670559 11.918943 1.001116 17.887858 1.001116h17.604524a159.252941 159.252941 0 0 0 150.611235-108.668268"
+    fill="#DCE6EA" p-id="34169"></path>
+  <path
+    d="M647.070143 302.223586a45.48465 45.48465 0 0 1 45.522428 45.446872v79.73036A52.643571 52.643571 0 0 1 708.336531 425.001918c31.29903 0 56.666922 27.483457 56.666922 61.389166S739.635561 547.78025 708.336531 547.78025a52.700238 52.700238 0 0 1-19.956202-3.910017 166.383529 166.383529 0 0 1-44.672423 80.646475 167.025754 167.025754 0 0 1-118.027755 48.809109h-18.747307a167.035198 167.035198 0 0 1-118.0372-48.809109 166.383529 166.383529 0 0 1-44.219088-78.644244c-4.514465 1.237228-9.246153 1.907786-14.119508 1.907786-31.29903 0-56.666922-27.483457-56.666923-61.389166s25.367892-61.389166 56.666923-61.389166c3.22057 0 6.375029 0.283335 9.444487 0.850004v-78.181464A45.475205 45.475205 0 0 1 385.523962 302.223586h261.546181z"
+    fill="#FFFFFF" p-id="34170"></path>
+  <path
+    d="M703.727621 832.097089l-85.652053-80.202584C672.63637 763.426224 687.369769 848.039384 739.19167 868.892811c1.095561 0.54778 13.099504-2.200565 50.188004-10.993383 1.643341-1.086116-3.815573-49.432445-2.720012-47.222435 7.650035 13.72284 13.637839 28.002904 19.644533 42.292413 22.912326-29.117354 40.375182-51.085231 45.824651-85.689831l-25.641782-32.96126 31.648476 21.977321 20.173425-48.346329s-75.272562-45.040759-95.47432-99.969896c-13.628395-34.62349-19.096753-224.117678-19.096753-224.117678s-3.815573-28.361795-26.727899-80.542586c-1.633896-3.296126-2.729457-6.592252-4.363353-9.888378-62.739728-174.128008-225.874353-139.523408-225.874352-139.523408-108.026043-9.340598-157.675712 38.448507-194.773657 101.074901-8.726706 12.627279-16.905632 27.464568-24.007887 43.397418-26.727898 60.964164-40.365738 129.965587-28.919019 256.323379 0 0 12.003943 173.570783 80.750364 255.964489 22.912326-9.878933 37.097945-47.241324 60.010271-56.024697 46.939101 0.538336 27.832903 2.191121 35.473494-18.681196 10.360602-22.515657 7.631146-58.234707 1.624452-84.59427-15.271736-10.983938-28.90013-23.611218-30.543472-25.273448-9.822267-8.783373-70.389762-65.355851-76.934791-98.31711l-1.633897-3.296126c-0.54778-2.200565-0.54778-3.853351-1.086116-6.044472a29.051242 29.051242 0 0 1-21.278429-3.296126c-11.994499-7.130588-16.905632-21.420097-18.548973-34.614045-1.643341-11.522274-1.095561-25.811783 5.987805-36.247941C522.053468 412.969642 506.224507 266.296758 506.224507 266.296758 517.13289 382.756728 658.99853 426.701926 722.824374 441.529771c13.637839 25.273447 2.738901 74.715337-28.361795 76.349233-1.643341 0-2.738901 0-3.834462-0.538335-1.086116 4.391686-2.172232 8.235593-3.258348 12.636723-13.656728 50.528006-47.477437 78.011463-87.304838 112.60662-8.178926 8.235593-14.18562 8.783373-22.364546 14.827844 1.633896 21.977321-2.729457 58.225263 6.54503 76.897014 10.370047 1.652785 29.4668 7.149477 33.830153 17.585635"
+    fill="#3E435C" p-id="34171"></path>
+</svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/backtop copy.svg b/frontend/new-web/src/assets/icons/backtop copy.svg
new file mode 100755
index 00000000..af4eadfe
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/backtop copy.svg	
@@ -0,0 +1 @@
+<svg t="1658914025483" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3426" width="200" height="200"><path d="M390 679.988v-35.864c0-111.8-70.278-134.488-70.278-134.488S250 534.068 250 644.126v35.864h140z" fill="#4988FD" p-id="3427"></path><path d="M390 699.988h-140c-11.046 0-20-8.956-20-20v-35.864c0-122.828 79.714-152.174 83.108-153.364a20.012 20.012 0 0 1 12.758-0.158c3.434 1.11 84.132 28.598 84.132 153.522v35.864c0.002 11.046-8.952 20-19.998 20z m-120-40h100v-15.864c0-76.286-35.178-104.09-49.982-112.408-14.948 8.808-50.018 37.46-50.018 112.41v15.862z" fill="#4988FD" p-id="3428"></path><path d="M776 679.988v-35.864c0-111.8-70.278-134.488-70.278-134.488S636 534.068 636 644.126v35.864h140z" fill="#4988FD" p-id="3429"></path><path d="M776 699.988h-140c-11.044 0-20-8.956-20-20v-35.864c0-122.828 79.714-152.174 83.11-153.364a20.026 20.026 0 0 1 12.758-0.158c3.436 1.11 84.132 28.598 84.132 153.522v35.864c0 11.046-8.956 20-20 20z m-120-40h100v-15.864c0-76.286-35.178-104.09-49.982-112.408-14.948 8.808-50.018 37.46-50.018 112.41v15.862z" fill="#4988FD" p-id="3430"></path><path d="M693.146 651.988v-92.516c0-288.398-181.292-346.924-181.292-346.924S332 275.57 332 559.476c0.012 56.328 0 92.514 0 92.514l361.146-0.002z" fill="#4988FD" p-id="3431"></path><path d="M332 671.99a19.996 19.996 0 0 1-20-20.006c0-0.004 0.012-36.184 0-92.504 0-152.884 51.604-243.788 94.894-293.124 47.876-54.564 96.308-71.968 98.346-72.684a20.012 20.012 0 0 1 12.758-0.158c2.06 0.666 51.034 16.918 99.41 71.014 43.676 48.838 95.738 139.654 95.738 294.944v92.516c0 11.044-8.956 20-20 20L332 671.99z m180.098-437.812c-13.256 6.236-45.196 23.814-76.73 60.39C380.828 357.83 352 449.434 352 559.476c0.006 31.314 0.006 56.404 0.004 72.514l321.142-0.002v-72.516c0-111.762-29.016-203.89-83.91-266.424-31.678-36.086-63.762-52.93-77.138-58.87z" fill="#4988FD" p-id="3432"></path><path d="M497.858 864.994l-42.426-42.426c-31.244-31.244-31.244-81.894 0-113.138 31.242-31.242 81.894-31.242 113.136 0 31.242 31.24 31.244 81.894 0 113.138l-42.426 42.426c-7.81 7.81-20.474 7.81-28.284 0z" fill="#DFECFD" p-id="3433"></path><path d="M512 870.852a19.868 19.868 0 0 1-14.142-5.86l-42.426-42.424c-15.11-15.11-23.432-35.2-23.432-56.57s8.322-41.46 23.432-56.568S490.632 686 512 685.996c21.37 0.002 41.46 8.324 56.568 23.434S592 744.63 592 766s-8.322 41.46-23.432 56.57l-42.428 42.428a19.864 19.864 0 0 1-14.14 5.856zM512 688c-20.832-0.002-40.42 8.112-55.154 22.844S434 745.164 434 766c0 20.834 8.112 40.422 22.846 55.156l42.426 42.426a17.88 17.88 0 0 0 12.728 5.272 17.88 17.88 0 0 0 12.726-5.27l42.428-42.428c14.732-14.732 22.846-34.32 22.846-55.156 0-20.834-8.114-40.42-22.846-55.154S532.834 688 512 688z" fill="#DFECFD" p-id="3434"></path><path d="M312.576 803.972l-22.274-22.274c-16.402-16.402-16.402-42.996 0-59.398 16.4-16.4 42.994-16.4 59.396 0 16.402 16.402 16.404 42.996 0 59.398l-22.272 22.274a10.5 10.5 0 0 1-14.85 0z" fill="#DFECFD" p-id="3435"></path><path d="M320 806.896a10.784 10.784 0 0 1-7.68-3.18l-22.02-22.02c-16.374-16.374-16.374-43.02 0-59.396A41.728 41.728 0 0 1 320 710c11.22 0 21.764 4.366 29.7 12.3 16.374 16.376 16.374 43.022 0 59.398l-22.02 22.02a10.784 10.784 0 0 1-7.68 3.178zM320 712a39.744 39.744 0 0 0-28.284 11.714c-15.596 15.596-15.596 40.974 0 56.57l22.02 22.02c1.674 1.674 3.898 2.594 6.264 2.592s4.59-0.92 6.264-2.594l22.02-22.02c15.596-15.594 15.596-40.972 0-56.568A39.744 39.744 0 0 0 320 712z" fill="#DFECFD" p-id="3436"></path><path d="M698.576 803.972l-22.274-22.274c-16.4-16.4-16.4-42.994 0-59.398 16.4-16.4 42.994-16.4 59.396 0 16.402 16.402 16.4 42.996 0 59.398l-22.274 22.274a10.498 10.498 0 0 1-14.848 0z" fill="#DFECFD" p-id="3437"></path><path d="M706 806.896a10.784 10.784 0 0 1-7.68-3.18l-22.02-22.02c-16.37-16.374-16.37-43.02 0-59.396 7.936-7.934 18.482-12.3 29.7-12.3s21.764 4.366 29.7 12.3c16.374 16.376 16.372 43.02 0 59.398l-22.02 22.02a10.784 10.784 0 0 1-7.68 3.178zM706 712a39.736 39.736 0 0 0-28.284 11.714c-15.594 15.596-15.594 40.974 0 56.57l22.02 22.02c1.672 1.672 3.896 2.592 6.264 2.592s4.592-0.92 6.264-2.594l22.02-22.02c15.596-15.594 15.594-40.972 0-56.568A39.736 39.736 0 0 0 706 712z" fill="#DFECFD" p-id="3438"></path><path d="M512 352c22.092 0 40 17.908 40 40v80c0 22.092-17.908 40-40 40s-40-17.908-40-40v-80c0-22.092 17.908-40 40-40z" fill="#DFECFD" p-id="3439"></path><path d="M512 512c-22.056 0-40-17.944-40-40v-80c0-22.056 17.944-40 40-40s40 17.944 40 40v80c0 22.056-17.944 40-40 40z m0-158c-20.954 0-38 17.046-38 38v80c0 20.954 17.046 38 38 38s38-17.046 38-38v-80c0-20.954-17.046-38-38-38z" fill="#DFECFD" p-id="3440"></path></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/backtop.svg b/frontend/new-web/src/assets/icons/backtop.svg
new file mode 100644
index 00000000..f8e6aa02
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/backtop.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M2.88 18.054a35.9 35.9 0 0 1 8.531-16.32.8.8 0 0 1 1.178 0q.25.27.413.455a35.9 35.9 0 0 1 8.118 15.865c-2.141.451-4.34.747-6.584.874l-2.089 4.178a.5.5 0 0 1-.894 0l-2.089-4.178a44 44 0 0 1-6.584-.874m6.698-1.123 1.157.066L12 19.527l1.265-2.53 1.157-.066a42 42 0 0 0 4.227-.454A33.9 33.9 0 0 0 12 4.09a33.9 33.9 0 0 0-6.649 12.387q2.093.334 4.227.454M12 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6m0-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2"/></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/bell.svg b/frontend/new-web/src/assets/icons/bell.svg
new file mode 100644
index 00000000..262d0ac0
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/bell.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5 18H19V11.0314C19 7.14806 15.866 4 12 4C8.13401 4 5 7.14806 5 11.0314V18ZM12 2C16.9706 2 21 6.04348 21 11.0314V20H3V11.0314C3 6.04348 7.02944 2 12 2ZM9.5 21H14.5C14.5 22.3807 13.3807 23.5 12 23.5C10.6193 23.5 9.5 22.3807 9.5 21Z"></path></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/bilibili.svg b/frontend/new-web/src/assets/icons/bilibili.svg
new file mode 100644
index 00000000..b86747cc
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/bilibili.svg
@@ -0,0 +1 @@
+<svg t="1733556119022" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="60026" width="128" height="128"><path d="M0 0m184.32 0l655.36 0q184.32 0 184.32 184.32l0 655.36q0 184.32-184.32 184.32l-655.36 0q-184.32 0-184.32-184.32l0-655.36q0-184.32 184.32-184.32Z" fill="#EC5D85" p-id="60027"></path><path d="M512 241.96096h52.224l65.06496-96.31744c49.63328-50.31936 89.64096 0.43008 63.85664 45.71136l-34.31424 51.5072c257.64864 5.02784 257.64864 43.008 257.64864 325.03808 0 325.94944 0 336.46592-404.48 336.46592S107.52 893.8496 107.52 567.90016c0-277.69856 0-318.80192 253.14304-324.95616l-39.43424-58.368c-31.26272-54.90688 37.33504-90.40896 64.68608-42.37312l60.416 99.80928c18.18624-0.0512 41.18528-0.0512 65.66912-0.0512z" fill="#EF85A7" p-id="60028"></path><path d="M512 338.5856c332.8 0 332.8 0 332.8 240.64s0 248.39168-332.8 248.39168-332.8-7.75168-332.8-248.39168 0-240.64 332.8-240.64z" fill="#EC5D85" p-id="60029"></path><path d="M281.6 558.08a30.72 30.72 0 0 1-27.47392-16.97792 30.72 30.72 0 0 1 13.73184-41.216l122.88-61.44a30.72 30.72 0 0 1 41.216 13.74208 30.72 30.72 0 0 1-13.74208 41.216l-122.88 61.44a30.59712 30.59712 0 0 1-13.73184 3.23584zM752.64 558.08a30.60736 30.60736 0 0 1-12.8512-2.83648l-133.12-61.44a30.72 30.72 0 0 1-15.04256-40.7552 30.72 30.72 0 0 1 40.76544-15.02208l133.12 61.44A30.72 30.72 0 0 1 752.64 558.08zM454.656 666.88a15.36 15.36 0 0 1-12.288-6.1952 15.36 15.36 0 0 1 3.072-21.49376l68.5056-50.91328 50.35008 52.62336a15.36 15.36 0 0 1-22.20032 21.23776l-31.5904-33.024-46.71488 34.72384a15.28832 15.28832 0 0 1-9.13408 3.04128z" fill="#EF85A7" p-id="60030"></path><path d="M65.536 369.31584c15.03232 101.90848 32.84992 147.17952 44.544 355.328 14.63296 2.18112 177.70496 10.04544 204.05248-74.62912a16.14848 16.14848 0 0 0 1.64864-10.87488c-30.60736-80.3328-169.216-60.416-169.216-60.416s-10.36288-146.50368-11.49952-238.83776zM362.25024 383.03744l34.816 303.17568h34.64192L405.23776 381.1328zM309.52448 536.28928h45.48608l16.09728 158.6176-31.82592 1.85344zM446.86336 542.98624h45.80352V705.3312h-33.87392zM296.6016 457.97376h21.39136l5.2736 58.99264-18.91328 2.26304zM326.99392 457.97376h21.39136l2.53952 55.808-17.408 1.61792zM470.62016 459.88864h19.456v62.27968h-19.456zM440.23808 459.88864h22.20032v62.27968h-16.62976z" fill="#FFFFFF" p-id="60031"></path><path d="M243.56864 645.51936a275.456 275.456 0 0 1-28.4672 23.74656 242.688 242.688 0 0 1-29.53216 17.52064 2.70336 2.70336 0 0 1-4.4032-1.95584 258.60096 258.60096 0 0 1-5.12-29.57312c-1.41312-12.1856-1.95584-25.68192-2.16064-36.36224 0-0.3072 0-2.5088 3.01056-1.90464a245.92384 245.92384 0 0 1 34.22208 9.5744 257.024 257.024 0 0 1 32.3584 15.17568c0.52224 0.256 2.51904 1.4848 0.09216 3.77856z" fill="#EB5480" p-id="60032"></path><path d="M513.29024 369.31584c15.03232 101.90848 32.84992 147.17952 44.544 355.328 14.63296 2.18112 177.70496 10.04544 204.05248-74.62912a16.14848 16.14848 0 0 0 1.64864-10.87488c-30.60736-80.3328-169.216-60.416-169.216-60.416s-10.36288-146.50368-11.49952-238.83776zM810.00448 383.03744l34.816 303.17568h34.64192L852.992 381.1328zM757.27872 536.28928h45.48608l16.09728 158.6176-31.82592 1.85344zM894.6176 542.98624h45.80352V705.3312H906.5472zM744.35584 457.97376h21.39136l5.2736 58.99264-18.91328 2.26304zM774.74816 457.97376h21.39136l2.53952 55.808-17.408 1.61792zM918.3744 459.88864h19.456v62.27968h-19.456zM887.99232 459.88864h22.20032v62.27968h-16.62976z" fill="#FFFFFF" p-id="60033"></path><path d="M691.32288 645.51936a275.456 275.456 0 0 1-28.4672 23.74656 242.688 242.688 0 0 1-29.53216 17.52064 2.70336 2.70336 0 0 1-4.4032-1.95584 258.60096 258.60096 0 0 1-5.12-29.57312c-1.41312-12.1856-1.95584-25.68192-2.16064-36.36224 0-0.3072 0-2.5088 3.01056-1.90464a245.92384 245.92384 0 0 1 34.22208 9.5744 257.024 257.024 0 0 1 32.3584 15.17568c0.52224 0.256 2.51904 1.4848 0.09216 3.77856z" fill="#EB5480" p-id="60034"></path></svg>
diff --git a/frontend/new-web/src/assets/icons/browser.svg b/frontend/new-web/src/assets/icons/browser.svg
new file mode 100644
index 00000000..15c3927c
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/browser.svg
@@ -0,0 +1 @@
+<svg t="1733620744216" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13366" width="128" height="128"><path d="M512.956 741.549c24.671-8.545 73.221-25.811 120.072-46.486 12.131-5.394 24.087-12.036 47.412-25.31a109.078 109.078 0 0 0 37.94-29.11 83.344 83.344 0 0 0 12.227-23.053V219.281c-0.096-24.831-20.211-44.936-45.045-45.043-9.34 1.573-22.76 4.209-38.757 8.543 24.439 62.406 18.146 132.708-17.021 189.792-34.498 55.993-92.88 92.712-158.098 99.992-1.275 0.137-2.499 0.463-3.776 0.585v223.354c0.11 24.835 20.213 44.934 45.046 45.045zM378.672 741.549c24.833-0.108 44.939-20.21 45.046-45.047V472.779a213.556 213.556 0 0 1-158.787-101.461c-34.357-56.592-40.495-125.929-16.655-187.697a423.782 423.782 0 0 0-42.873-9.482c-24.833 0.098-44.938 20.214-45.047 45.047v398.308a82.748 82.748 0 0 0 12.242 23.039c10.5 12.524 23.704 22.495 38.591 29.219 23.801 13.273 35.756 20.011 47.424 25.311 46.84 20.673 95.405 37.942 120.059 46.486z" fill="#FFBA00" opacity=".4" p-id="13367"></path><path d="M744.827 708.729a57 57 0 0 0 32.919-11.275 53.974 53.974 0 0 0 17.343-27.226V271.907c-0.066-23.054-17.548-42.33-40.493-44.667 0.528 2.635 0.815 5.297 0.855 7.974v398.309a82.915 82.915 0 0 1-12.227 23.037 108.602 108.602 0 0 1-37.941 29.126c-22.944 12.799-34.805 19.428-46.568 24.752 12.528 0.003 49.706 0.761 86.112-1.709zM141.202 227.432c-22.861 2.335-40.317 21.49-40.495 44.475V670.23a53.882 53.882 0 0 0 17.362 27.4 56.9 56.9 0 0 0 32.902 11.291c36.421 2.471 73.585 1.984 86.112 1.711-11.764-5.324-23.61-11.958-46.565-24.751a108.597 108.597 0 0 1-37.928-29.128 82.787 82.787 0 0 1-12.242-23.036V235.404c0.041-2.676 0.327-5.338 0.854-7.972z" fill="#FFBA00" opacity=".4" p-id="13368"></path><path d="M629.782 372.569c35.172-57.083 41.463-127.383 17.023-189.792-0.007-0.026-0.016-0.066-0.029-0.096-51.497 13.939-127.844 45.508-165.674 117.207a189.132 189.132 0 0 0-13.288 31.87v141.388c1.307-0.123 2.569-0.447 3.872-0.585 65.218-7.28 123.598-44 158.096-99.992zM248.658 183.62c-23.842 61.769-17.701 131.105 16.639 187.697 34.357 56.608 93.013 94.084 158.8 101.461h0.099v-141.02a190.385 190.385 0 0 0-13.273-31.87c-36.989-70.079-110.861-101.855-162.265-116.268z" fill="#FEC744" opacity=".4" p-id="13369"></path><path d="M593.104 570.52v223.357c0.105 24.83 20.215 44.938 45.05 45.046 24.668-8.544 73.218-25.811 120.071-46.488 12.127-5.392 24.086-12.036 47.409-25.306a109.116 109.116 0 0 0 37.941-29.114 83.408 83.408 0 0 0 12.225-23.051v-398.31c-0.092-24.833-20.21-44.938-45.045-45.047-9.481 1.602-23.134 4.265-39.446 8.723 24.355 62.297 18.091 132.42-16.915 189.423a213.388 213.388 0 0 1-161.29 100.767zM330.601 271.513c-24.833 0.094-44.939 20.214-45.048 45.045v398.31a82.678 82.678 0 0 0 12.24 23.039c10.502 12.524 23.708 22.493 38.595 29.22 23.799 13.271 35.753 20.013 47.422 25.307 46.841 20.677 95.404 37.944 120.062 46.488 24.831-0.109 44.938-20.216 45.045-45.046v-223.72c-65.791-7.377-124.448-44.86-158.79-101.463-34.354-56.591-40.496-125.93-16.655-187.696a423.057 423.057 0 0 0-42.871-9.484z" fill="#FFBA00" p-id="13370"></path><path d="M868.422 753.937a108.626 108.626 0 0 1-37.943 29.126c-22.944 12.796-34.805 19.428-46.567 24.75 12.526 0 49.702 0.765 86.112-1.71a56.988 56.988 0 0 0 32.916-11.274 54.009 54.009 0 0 0 17.346-27.228v-398.32c-0.069-23.053-17.552-42.328-40.496-44.667 0.529 2.635 0.815 5.299 0.855 7.974v398.31a83.035 83.035 0 0 1-12.223 23.039zM266.399 324.804c-22.863 2.338-40.319 21.491-40.496 44.477v398.323a53.886 53.886 0 0 0 17.361 27.4 56.879 56.879 0 0 0 32.901 11.291c36.419 2.471 73.587 1.983 86.111 1.708-11.764-5.323-23.608-11.953-46.566-24.75a108.578 108.578 0 0 1-37.928-29.124 82.698 82.698 0 0 1-12.238-23.039V332.779c0.039-2.675 0.326-5.338 0.855-7.975z" fill="#FFBA00" p-id="13371"></path><path d="M771.97 280.058c-51.497 13.939-127.844 45.508-165.675 117.207a188.947 188.947 0 0 0-13.289 31.871v141.386c66.797-6.206 126.786-43.472 161.969-100.58 35.184-57.11 41.473-127.45 16.995-189.884z" fill="#FFBA00" p-id="13372"></path><path d="M771.97 280.058c-51.497 13.939-127.844 45.508-165.675 117.207a188.947 188.947 0 0 0-13.289 31.871v141.386c66.797-6.206 126.786-43.472 161.969-100.58 35.184-57.11 41.473-127.45 16.995-189.884z" fill="#FEC744" p-id="13373"></path><path d="M549.294 570.155h0.095V429.132a189.948 189.948 0 0 0-13.271-31.871c-36.992-70.081-110.863-101.856-162.266-116.268-23.839 61.769-17.701 131.105 16.642 187.696 34.352 56.608 93.012 94.089 158.8 101.466z" fill="#FFBA00" p-id="13374"></path><path d="M549.294 570.155h0.095V429.132a189.948 189.948 0 0 0-13.271-31.871c-36.992-70.081-110.863-101.856-162.266-116.268-23.839 61.769-17.701 131.105 16.642 187.696 34.352 56.608 93.012 94.089 158.8 101.466z" fill="#FEC744" p-id="13375"></path></svg>
diff --git a/frontend/new-web/src/assets/icons/captcha.svg b/frontend/new-web/src/assets/icons/captcha.svg
new file mode 100644
index 00000000..8b1da30e
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/captcha.svg
@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M917.6 267.2c-36.1-2.5-72.4-9.3-103.6-19.3-10.1-3-20.2-6.4-30.3-10-21.4-6.3-50.5-18.8-83.6-36.6-.4-.2-.7-.4-1.1-.6-7.8-4.2-15.7-8.7-23.8-13.4-10.9-6.3-21.7-12.9-32.5-19.9-.4-.3-.8-.5-1.2-.8-7.7-5-15.5-10.2-23.1-15.5-5-3.4-10-7.1-15-10.7-3.8-2.8-7.5-5.3-11.3-8.2-27.4-20.5-54.5-43.5-79.9-68.3-25.4 24.8-52.5 47.8-79.9 68.3-3.7 2.8-7.5 5.4-11.3 8.2-5 3.6-10 7.3-15 10.7-7.7 5.4-15.4 10.5-23.1 15.5-.4.3-.8.5-1.2.8-10.8 6.9-21.6 13.6-32.5 19.9-8.1 4.7-16 9.2-23.8 13.4-.3.2-.7.4-1 .6-33 17.8-62.2 30.3-83.6 36.6-10.1 3.6-20.2 7-30.3 10-31.1 10-67.4 16.8-103.6 19.3h.1c1.1 16.2 2.1 37.7 3.4 60.9h.7c6.1 86.8 23.5 210.2 49.7 282.8 1.2 3.2 2.2 6.5 3.3 9.6.6 1.5 1.2 2.8 1.8 4.3 62.8 162.1 171.9 280.1 303 323.4v.4c17.3 5.7 31.9 9.3 43.5 11.5 11.5-2.2 26.1-5.8 43.5-11.5v-.4C687 905 796.1 787 858.9 624.8c.6-1.5 1.2-2.8 1.8-4.3 1.2-3.1 2.2-6.4 3.3-9.6 26.2-72.5 43.6-196 49.7-282.8h.7c1.1-23.3 2.2-44.7 3.2-60.9zm-47.4 41.9-.5 9.5c-.5 2.2-.9 4.4-1 6.6C863 406 847 525.7 821.3 596.7c-.7 1.9-1.4 3.9-2 5.8-.4 1.2-.8 2.5-1.4 4.1-.5 1.2-1 2.5-1.4 3.4C758.1 760.8 657.7 869.3 541 907.8c-1.9.6-3.7 1.4-5.5 2.2-7.9 2.5-15.7 4.6-23.2 6.3-7.5-1.7-15.2-3.8-23.1-6.3-1.8-.9-3.6-1.6-5.5-2.2-116.7-38.5-217.1-147-275.4-297.5-.5-1.2-.9-2.4-1.7-4.1-.4-1.2-.8-2.4-1.3-3.6-.7-2-1.3-3.9-1.9-5.6-25.8-71.2-41.7-191-47.4-271.7-.2-2.3-.5-4.5-1-6.6l-.5-9.3c-.1-1.5-.2-3-.2-4.5 24.6-3.8 48.4-9.3 70-16.2 10.1-3 20.4-6.4 31.4-10.4 25.2-7.6 56.5-21.2 90.5-39.6.6-.3 1.2-.6 1.7-.9 8.2-4.4 16.7-9.2 24.8-14 10.7-6.1 22-13 34.5-21.1.4-.2 1-.6 1.3-.8 8.2-5.3 16.4-10.8 24.1-16.2 4.5-3.1 9.1-6.4 13.7-9.7l2.4-1.8 4-2.9c2.6-1.9 5.2-3.7 7.5-5.5 17.9-13.4 35.3-27.5 52-42.1 16.7 14.7 34 28.7 51.8 42 2.6 1.9 5.1 3.8 7.7 5.6l4.3 3.1 1.5 1.1c4.8 3.5 9.6 6.9 14 9.9 8.1 5.7 16.3 11.2 23.7 16l2.1 1.3c12.4 8 23.7 14.9 34.1 20.8 8.6 5 17 9.8 25 14.1.4.2 1 .5 1.5.8 34.2 18.4 65.6 32.1 90.9 39.7 11 3.9 21.3 7.3 30.6 10.1 22.1 7.1 46.1 12.6 70.8 16.5.1 1.5.1 3 0 4.4z"/><path d="M710.6 411.2 476.1 651.6l-120-123c-8.3-8.5-21.8-8.5-30.1 0s-8.3 22.3 0 30.9L461.1 698c4.2 4.3 9.6 6.4 15.1 6.4 5.4 0 10.9-2.1 15-6.4l249.5-255.7c8.3-8.5 8.3-22.3 0-30.9-8.3-8.7-21.8-8.7-30.1-.2z"/></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/cascader.svg b/frontend/new-web/src/assets/icons/cascader.svg
new file mode 100644
index 00000000..57209bf5
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/cascader.svg
@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M832.128 768c33.195 0 60.501 25.173 63.573 57.813L896 832a64 64 0 0 1-63.872 64H533.205a63.787 63.787 0 0 1-63.872-64 64 64 0 0 1 63.872-64h298.923zM213.333 874.667c-23.722 0-42.666-19.072-42.666-42.624V362.667A42.667 42.667 0 0 1 213.333 320l4.992.299C239.66 322.73 256 340.779 256 362.624l-.043 128.043h128.299c21.248 0 39.595 16.469 42.112 37.674l.299 4.992-.299 4.992A42.368 42.368 0 0 1 384.256 576H256l.043 213.333h128.256c22.869 0 42.41 19.115 42.41 42.667l-.298 4.992a42.368 42.368 0 0 1-42.112 37.675zm618.795-405.334c33.195 0 60.501 25.174 63.573 57.814l.299 6.186a64 64 0 0 1-63.872 64H533.205a63.787 63.787 0 0 1-63.872-64 64 64 0 0 1 63.872-64h298.923zM576.171 128c33.194 0 60.458 25.173 63.573 57.813L640 192c0 35.328-29.013 64-63.83 64H191.83A63.744 63.744 0 0 1 128 192c0-35.328 29.013-64 63.83-64h384.34z"/></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/client.svg b/frontend/new-web/src/assets/icons/client.svg
new file mode 100644
index 00000000..7373b3d9
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/client.svg
@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M962.184 55.874H61.818C27.732 55.874 0 83.606 0 117.692v621.64c0 34.086 27.732 61.818 61.818 61.818h308.52v44.98c0 41.234-33.547 74.782-74.781 74.782h-67.995c-13.036 0-23.606 10.568-23.606 23.606 0 13.038 10.57 23.606 23.606 23.606h568.874c13.036 0 23.606-10.568 23.606-23.606 0-13.038-10.57-23.606-23.606-23.606h-67.997c-41.234 0-74.782-33.548-74.782-74.782v-44.978h308.52c34.087 0 61.821-27.732 61.821-61.819v-621.64c.004-34.087-27.728-61.819-61.814-61.819zM391.84 920.916c16.092-20.672 25.714-46.616 25.714-74.782v-44.98h188.894v44.98c0 28.166 9.622 54.112 25.714 74.782H391.841zm584.95-181.583c0 8.054-6.552 14.608-14.608 14.608H61.818c-8.054 0-14.608-6.552-14.608-14.608V615.267h929.58v124.066zm0-171.28H47.212v-450.36c0-8.055 6.552-14.609 14.608-14.609h900.362c8.054 0 14.61 6.552 14.61 14.608v450.361z"/><path d="M486.531 684.611a25.476 25.476 0 1 0 50.952 0 25.476 25.476 0 1 0-50.952 0zm65.946-466.103c-9.22-9.218-24.162-9.218-33.386 0L352.263 385.337c-9.218 9.218-9.218 24.166 0 33.386a23.534 23.534 0 0 0 16.694 6.914 23.526 23.526 0 0 0 16.692-6.914l166.828-166.829c9.218-9.218 9.218-24.166 0-33.386zm98.88 96.679c-9.216-9.218-24.158-9.218-33.384-.002l-66.46 66.456c-9.218 9.22-9.218 24.168 0 33.386a23.53 23.53 0 0 0 16.692 6.914c6.04 0 12.082-2.304 16.692-6.914l66.46-66.456c9.218-9.218 9.218-24.166 0-33.384z"/></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/close.svg b/frontend/new-web/src/assets/icons/close.svg
new file mode 100644
index 00000000..e99c9788
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/close.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em" viewBox="0 0 36 36"><path d="m19.41 18 8.29-8.29a1 1 0 0 0-1.41-1.41L18 16.59l-8.29-8.3a1 1 0 0 0-1.42 1.42l8.3 8.29-8.3 8.29A1 1 0 1 0 9.7 27.7l8.3-8.29 8.29 8.29a1 1 0 0 0 1.41-1.41z" fill="currentColor"/></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/close_all.svg b/frontend/new-web/src/assets/icons/close_all.svg
new file mode 100644
index 00000000..20051986
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/close_all.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em" viewBox="0 0 36 36"><path d="M26 17H10a1 1 0 0 0 0 2h16a1 1 0 0 0 0-2z" fill="currentColor"/></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/close_left.svg b/frontend/new-web/src/assets/icons/close_left.svg
new file mode 100644
index 00000000..fc5cf716
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/close_left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="m7 12 7 7m-7-7 7-7" stroke-linejoin="round"/><path d="M21 12H7.5"/><path d="M3 3v18" stroke-linejoin="round"/></g></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/close_other.svg b/frontend/new-web/src/assets/icons/close_other.svg
new file mode 100644
index 00000000..27ffc328
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/close_other.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em" viewBox="0 0 20 20"><path d="M3 5h14V3H3v2zm12 8V7H5v6h10zM3 17h14v-2H3v2z" fill="currentColor"/></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/close_right.svg b/frontend/new-web/src/assets/icons/close_right.svg
new file mode 100644
index 00000000..b96dc1c0
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/close_right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="m17 12-7 7m7-7-7-7" stroke-linejoin="round"/><path d="M3 12h13.5"/><path d="M21 3v18" stroke-linejoin="round"/></g></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/cnblogs.svg b/frontend/new-web/src/assets/icons/cnblogs.svg
new file mode 100644
index 00000000..4920a4c1
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/cnblogs.svg
@@ -0,0 +1 @@
+<svg t="1733555747788" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10924" width="128" height="128"><path d="M851.404 172.596c-187.462-187.461-491.346-187.461-678.808 0-187.461 187.462-187.461 491.346 0 678.808 187.462 187.461 491.346 187.461 678.808 0 187.461-187.462 187.461-491.346 0-678.808zM387.33 728.087a47.084 47.084 0 1 1-66.633-66.502 47.084 47.084 0 0 1 66.633 66.502z m205.527 1.397a38.75 38.75 0 0 1-76.625-11.52h-0.044a6.545 6.545 0 0 0-0.044 0.305v-0.349c0.306-2.618 2.051-20.727-2.967-44.99a174.24 174.24 0 0 0-48.567-89.28 172.102 172.102 0 0 0-88.8-48.305 156.698 156.698 0 0 0-42.458-2.923 38.662 38.662 0 0 1-35.39-65.324 38.618 38.618 0 0 1 21.12-10.822v-0.218c4.452-0.742 111.142-16.45 200.335 72.742 89.018 89.018 74.182 196.145 73.44 200.727z m175.2 7.592a38.75 38.75 0 0 1-65.673 21.382 39.49 39.49 0 0 1-11.65-33.73c0.087-0.35 5.105-37.484-5.062-88.975-13.31-67.375-45.295-126.895-94.953-176.902-50.007-49.702-109.527-81.644-176.945-94.953-51.491-10.167-88.582-5.193-89.019-5.149h0.219-0.044a39.927 39.927 0 0 1-44.684-32.902 38.836 38.836 0 0 1 32.204-44.378c1.92-0.305 47.869-7.33 111.273 4.364a411.753 411.753 0 0 1 106.254 34.952 425.76 425.76 0 0 1 114.633 82.255l0.916 0.96 0.96 0.873a425.89 425.89 0 0 1 82.255 114.72c16.407 33.6 28.145 69.294 34.996 106.21 11.651 63.404 4.67 109.353 4.32 111.273z" fill="#1296DB" p-id="10925"></path></svg>
diff --git a/frontend/new-web/src/assets/icons/code.svg b/frontend/new-web/src/assets/icons/code.svg
new file mode 100644
index 00000000..d8b546ca
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/code.svg
@@ -0,0 +1 @@
+<svg t="1720831003829" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5159" width="200" height="200"><path d="M438.4 849.1l222.7-646.7c0.2-0.5 0.3-1.1 0.4-1.6L438.4 849.1z" opacity=".224" p-id="5160"></path><path d="M661.2 168.7h-67.5c-3.4 0-6.5 2.2-7.6 5.4L354.7 846c-0.3 0.8-0.4 1.7-0.4 2.6 0 4.4 3.6 8 8 8h67.8c3.4 0 6.5-2.2 7.6-5.4l0.7-2.1 223.1-648.3 7.4-21.4c0.3-0.8 0.4-1.7 0.4-2.6-0.1-4.5-3.6-8.1-8.1-8.1zM954.6 502.1c-0.8-1-1.7-1.9-2.7-2.7l-219-171.3c-3.5-2.7-8.5-2.1-11.2 1.4-1.1 1.4-1.7 3.1-1.7 4.9v81.3c0 2.5 1.1 4.8 3.1 6.3l115 90-115 90c-1.9 1.5-3.1 3.8-3.1 6.3v81.3c0 4.4 3.6 8 8 8 1.8 0 3.5-0.6 4.9-1.7l219-171.3c6.9-5.4 8.2-15.5 2.7-22.5zM291.1 328.1l-219 171.3c-1 0.8-1.9 1.7-2.7 2.7-5.4 7-4.2 17 2.7 22.5l219 171.3c1.4 1.1 3.1 1.7 4.9 1.7 4.4 0 8-3.6 8-8v-81.3c0-2.5-1.1-4.8-3.1-6.3l-115-90 115-90c1.9-1.5 3.1-3.8 3.1-6.3v-81.3c0-1.8-0.6-3.5-1.7-4.9-2.7-3.5-7.7-4.1-11.2-1.4z" p-id="5161"></path></svg>
diff --git a/frontend/new-web/src/assets/icons/collapse.svg b/frontend/new-web/src/assets/icons/collapse.svg
new file mode 100644
index 00000000..15075688
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/collapse.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3 4h18v2H3V4zm0 15h18v2H3v-2zm8-5h10v2H11v-2zm0-5h10v2H11V9zm-8 3.5L7 9v7l-4-3.5z"/></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/csdn.svg b/frontend/new-web/src/assets/icons/csdn.svg
new file mode 100644
index 00000000..e16bad0d
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/csdn.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" viewBox="0 0 30 30" version="1.1">
+    <title>ic/csdn</title>
+    <g id="ic/csdn" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M24.7385612,21.818791 C24.4728206,21.5662432 24.1090763,21.4267765 23.7575825,21.4343152 C23.3966653,21.4399693 23.0696724,21.5907441 22.8378562,21.8555424 C20.7581061,24.2349574 17.1347988,24.4922169 15.6732254,24.4922169 C12.9611634,24.4922169 10.886125,23.8043069 9.50559315,22.4501605 C8.19385225,21.1638629 7.50594216,19.2678696 7.46070972,16.8168365 C7.35516735,11.1345107 10.5732673,5.25806226 16.139685,5.25806226 C18.7980335,5.25806226 20.8627061,7.14368979 21.6260036,7.95410443 C21.8917442,8.23586486 22.2583155,8.39794779 22.6352525,8.39983247 C23.0131319,8.4092559 23.362741,8.24151892 23.599269,7.96164317 L23.8160078,7.70532598 C24.2607935,7.18232584 24.4605701,6.50572386 24.380471,5.80179394 C24.2984872,5.09126763 23.9422817,4.44293592 23.3778185,3.97459165 C22.0133064,2.84472288 19.6951436,1.5 16.3969445,1.5 C12.9715292,1.5 9.58757695,3.07465447 7.1129853,5.82441016 C4.51306208,8.71269021 3.1240491,12.6441435 3.20320588,16.895051 C3.26634283,20.3063311 4.38490349,23.1729373 6.44015269,25.1886081 C8.64806138,27.3550537 11.8821812,28.5 15.7947876,28.5 C20.3849384,28.5 23.2289283,27.1401996 24.8082945,26.0009074 C25.4198749,25.5608334 25.7845615,24.8644423 25.8128317,24.093606 C25.8392173,23.3190004 25.5225902,22.5604146 24.9430495,22.0119712 L24.7385612,21.818791 Z" id="Fill-1" fill="#FC5533"/>
+    </g>
+<script xmlns=""/></svg>
diff --git a/frontend/new-web/src/assets/icons/dict.svg b/frontend/new-web/src/assets/icons/dict.svg
new file mode 100644
index 00000000..db602201
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/dict.svg
@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M449.6 116.2H303.8c-14.2 0-25.7-11.5-25.7-25.7s11.5-25.7 25.7-25.7h145.8c14.2 0 25.7 11.5 25.7 25.7s-11.5 25.7-25.7 25.7zm0 0"/><path d="M160.1 859.3c-14.2 0-25.7-11.5-25.7-25.7V167.4c0-56.6 46-102.6 102.6-102.6h66.8c14.2 0 25.7 11.5 25.7 25.7s-11.5 25.7-25.7 25.7H237c-28.2 0-51.1 22.9-51.1 51.1v666.2c-.1 14.3-11.6 25.8-25.8 25.8zm373.5-512.6c-6.3 0-12.4-1.3-17.6-3.5-13.5-5.8-21.9-17.9-21.9-31.6v-221c0-14.2 11.5-25.7 25.7-25.7s25.7 11.5 25.7 25.7v189l27.7-26.6c14.1-13.5 36.1-13.5 50.1 0l22.1 21.3V90.5c0-14.2 11.5-25.7 25.7-25.7s25.7 11.5 25.7 25.7v219.6c0 14.5-8.6 27.5-22 33.2-13.3 5.7-28.7 2.9-39.2-7.2l-37.5-36-37.5 36c-7.6 7.6-17.5 10.6-27 10.6zm0 0"/><path d="M846.1 958.9H236.9c-56.6 0-102.6-46-102.6-102.6v-22.8c0-14.2 11.5-25.7 25.7-25.7s25.7 11.5 25.7 25.7v22.8c0 28.2 22.9 51.1 51.1 51.1H846c14.2 0 25.7 11.5 25.7 25.7.1 14.3-11.4 25.8-25.6 25.8zm0 0"/><path d="M160.1 876h-.9c-14.2-.5-25.3-12.4-24.8-26.6 1-28.2 6.3-48.5 16.7-63.6 13.8-20.1 35.4-30.3 64.3-30.3h615c3.2-2.7 6.4-6.1 8.6-8.6V133.1c-1.8-5.1-11.7-15-16.8-16.8H449.6c-14.2 0-25.7-11.5-25.7-25.7s11.5-25.7 25.7-25.7h373.6c19.8 0 36.7 13.9 45 22.2 8.3 8.3 22.2 25.2 22.2 45v621.6c0 10.8-6.2 19.6-12.3 26.7-4.6 5.4-10.3 11-15.6 15.4-1 .9-2.1 1.7-3.2 2.5-5.4 4.1-12.9 8.8-22.3 8.8H215.3c-15 0-28 0-29.5 44.2-.5 13.8-11.9 24.7-25.7 24.7zm0 0"/><path d="M284.4 806.4c-14.2 0-25.7-11.5-25.7-25.7V90.5c0-14.2 11.5-25.7 25.7-25.7s25.7 11.5 25.7 25.7v690.1c0 14.3-11.5 25.8-25.7 25.8zM844.9 959h-1.6c-6.6-.3-30-2.3-52.2-16.9-19.5-12.7-42.6-38-42.6-86.3 0-62.3 35.7-101 93.1-101 14.2 0 25.7 11.5 25.7 25.7s-11.5 25.7-25.7 25.7c-12.5 0-41.7 0-41.7 49.6 0 21 6.6 35.3 20.1 43.8 10.6 6.6 22.1 7.8 25 8 1.4-.1 2.9 0 4.4.2 13.7 1.7 23.6 14 22.5 27.7-.9 9.5-8.8 23.5-27 23.5zm-1.8-51.3c-1.1.1-2.3.3-3.4.6 1.1-.3 2.2-.5 3.4-.6zm0 0"/></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/document.svg b/frontend/new-web/src/assets/icons/document.svg
new file mode 100644
index 00000000..aaa0574f
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/document.svg
@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M832.1 185.1H609.4l-17.1-62c-9.6-34.6-40.5-58.8-75.3-58.8H196c-43.2 0-78.3 36.4-78.3 81.1V897c0 35.3 28.7 64 64 64H832c35.3 0 64-28.7 64-64V249c.1-35.2-28.6-63.9-63.9-63.9zm-644.4-39.7c0-6.6 4.4-11.1 8.3-11.1h321c3.4 0 6.6 3.1 7.8 7.4l12 43.4H187.7v-39.7zm638.4 745.8H187.7V255.1h638.4v636.1z"/><path d="M311.1 415.1a35 35 0 1 0 70 0 35 35 0 1 0-70 0zm151.2-35h257.8v70H462.3zM311.1 582.3a35 35 0 1 0 70 0 35 35 0 1 0-70 0zm151.2-35h257.8v70H462.3zM311.1 749.5a35 35 0 1 0 70 0 35 35 0 1 0-70 0zm151.2-35h257.8v70H462.3z"/></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/down.svg b/frontend/new-web/src/assets/icons/down.svg
new file mode 100644
index 00000000..5fc8b88e
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/down.svg
@@ -0,0 +1 @@
+<svg width="15" height="15" aria-label="向下键" 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>
diff --git a/frontend/new-web/src/assets/icons/download.svg b/frontend/new-web/src/assets/icons/download.svg
new file mode 100644
index 00000000..a8077dc3
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/download.svg
@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M624 706.3h-74.1V464c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v242.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.7c3.2 4.1 9.4 4.1 12.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9z"/><path d="M811.4 366.7C765.6 245.9 648.9 160 512.2 160S258.8 245.8 213 366.6C127.3 389.1 64 467.2 64 560c0 110.5 89.5 200 199.9 200H304c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8h-40.1c-33.7 0-65.4-13.4-89-37.7-23.5-24.2-36-56.8-34.9-90.6.9-26.4 9.9-51.2 26.2-72.1 16.7-21.3 40.1-36.8 66.1-43.7l37.9-9.9 13.9-36.6c8.6-22.8 20.6-44.1 35.7-63.4 14.9-19.2 32.6-35.9 52.4-49.9 41.1-28.9 89.5-44.2 140-44.2s98.9 15.3 140 44.2c19.9 14 37.5 30.8 52.4 49.9 15.1 19.3 27.1 40.7 35.7 63.4l13.8 36.5 37.8 10C846.1 454.5 884 503.8 884 560c0 33.1-12.9 64.3-36.3 87.7-23.4 23.4-54.5 36.3-87.6 36.3H720c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h40.1C870.5 760 960 670.5 960 560c0-92.7-63.1-170.7-148.6-193.3z"/></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/enter.svg b/frontend/new-web/src/assets/icons/enter.svg
new file mode 100644
index 00000000..9e199df2
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/enter.svg
@@ -0,0 +1 @@
+<svg width="15" height="15" aria-label="回车键" 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>
diff --git a/frontend/new-web/src/assets/icons/esc.svg b/frontend/new-web/src/assets/icons/esc.svg
new file mode 100644
index 00000000..2f85dd25
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/esc.svg
@@ -0,0 +1 @@
+<svg width="15" height="15" aria-label="Esc 键" 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>
diff --git a/frontend/new-web/src/assets/icons/file copy.svg b/frontend/new-web/src/assets/icons/file copy.svg
new file mode 100755
index 00000000..4768a536
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/file copy.svg	
@@ -0,0 +1,12 @@
+<svg t="1640574422482" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3140"
+  width="128" height="128">
+  <path
+    d="M913.29536 941.04064c0.0256 24.82688-16.54784 44.96384-37.0176 44.98432l-708.23936 0.6912c-20.46464 0.02048-37.07904-20.08576-37.10464-44.91264l-0.83968-859.02848c-0.0256-24.82688 16.54784-44.96384 37.0176-44.98432l521.10848-0.50688 224.39424 210.50368 0.68096 693.25312z"
+    fill="#e6e6e6" p-id="3141"></path>
+  <path
+    d="M913.29536 253.26592l-189.11744 0.18432c-20.46464 0.02048-37.07904-20.08576-37.10464-44.91264l-0.16384-165.77024 226.38592 210.49856z"
+    fill="#C4BCB1" p-id="3142"></path>
+  <path
+    d="M720.72192 396.84096a22.54848 22.54848 0 0 1-22.54848 22.54848H326.13376a22.54848 22.54848 0 0 1 0-45.09696h372.0448a22.54848 22.54848 0 0 1 22.54336 22.54848zM720.72192 565.95456a22.54848 22.54848 0 0 1-22.54848 22.54848H326.13376a22.54848 22.54848 0 0 1 0-45.09696h372.0448a22.54848 22.54848 0 0 1 22.54336 22.54848zM720.72192 746.33728a22.54848 22.54848 0 0 1-22.54848 22.54848H326.13376a22.54848 22.54848 0 0 1 0-45.09696h372.0448a22.54848 22.54848 0 0 1 22.54336 22.54848z"
+    fill="#8a8a8a" p-id="3143"></path>
+</svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/file-close.svg b/frontend/new-web/src/assets/icons/file-close.svg
new file mode 100755
index 00000000..04daada7
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/file-close.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1627885889837" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17560" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M0 139.636364a46.545455 46.545455 0 0 1 46.545455-46.545455h354.897454a51.2 51.2 0 0 1 47.057455 31.034182L473.6 182.679273 977.454545 182.690909a46.545455 46.545455 0 0 1 46.545455 46.545455v546.909091a46.545455 46.545455 0 0 1-46.545455 46.545454H46.545455a46.545455 46.545455 0 0 1-46.545455-46.545454V139.636364z" fill="#FFA000" p-id="17561"></path><path d="M0 276.945455m46.545455 0l930.90909 0q46.545455 0 46.545455 46.545454l0 558.545455q0 46.545455-46.545455 46.545454l-930.90909 0q-46.545455 0-46.545455-46.545454l0-558.545455q0-46.545455 46.545455-46.545454Z" fill="#FFCA28" p-id="17562"></path></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/file-css.svg b/frontend/new-web/src/assets/icons/file-css.svg
new file mode 100755
index 00000000..1aabe7c8
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/file-css.svg
@@ -0,0 +1,14 @@
+<svg t="1642407662269" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+  p-id="19932" width="200" height="200">
+  <path d="M847.872 240.128v688c0 26.56-21.408 48-48 48h-576c-26.56 0-48-21.44-48-48v-832c0-26.592 21.44-48 48-48h432z"
+    fill="#E9EDED" p-id="19933"></path>
+  <path d="M160 768.128v160c0 35.456 28.544 64 64 64h576c35.456 0 64-28.544 64-64v-160H160z" fill="#4BBFEB"
+    p-id="19934"></path>
+  <path d="M847.872 240.128h-144c-26.56 0-48-21.44-48-48v-144" fill="#4BBFEB" p-id="19935"></path>
+  <path
+    d="M432.256 320.128c-35.2 0-64 28.8-64 64v32c0 18.016-14.016 32-32 32a16 16 0 0 0-15.936 12.992 16 16 0 0 0 0 0.064 16 16 0 0 0 4.736 14.56 16 16 0 0 0 2.496 1.92 16 16 0 0 0 4.448 1.92 16 16 0 0 0 3.136 0.48 16 16 0 0 0 1.12 0.064c17.984 0 32 13.984 32 32v32c0 35.2 28.8 64 64 64a16 16 0 1 0 0-32c-18.016 0-32-13.984-32-32v-32c0-19.136-8.736-36.256-22.208-48a63.68 63.68 0 0 0 22.208-48v-32c0-18.016 13.984-32 32-32a16 16 0 1 0 0-32z m157.856 0a16 16 0 0 0 1.632 32c18.016 0 32 13.984 32 32v32c0 19.168 8.736 36.224 22.208 48-13.44 11.744-22.208 28.864-22.208 48v32c0 18.016-13.984 32-32 32a16 16 0 1 0 0 32c35.2 0 64-28.8 64-64v-32c0-18.016 14.016-32 32-32a16 16 0 0 0 10.368-3.616 16 16 0 0 0 1.216-1.152 16 16 0 0 0-11.584-27.232c-17.984 0-32-13.984-32-32v-32c0-35.2-28.8-64-64-64a16 16 0 0 0-1.6 0z"
+    fill="#4BBFEB" p-id="19936"></path>
+  <path
+    d="M334.496 800.128a16 16 0 0 0-3.36 0.672c-41.664 3.712-75.008 37.44-75.008 79.328 0 42.08 33.696 75.904 75.616 79.296a16 16 0 0 0 4.64 0.704h32a16 16 0 1 0 0-32h-29.824c-28.544 0-50.432-21.44-50.432-48s21.888-48 50.432-48h29.568a16 16 0 1 0 0-32h-32a16 16 0 0 0-1.6 0z m128 0a16 16 0 0 0-1.984 0.384c-24.64 1.92-44.384 22.528-44.384 47.616 0 25.28 20.064 46.08 44.992 47.68a16 16 0 0 0 3.008 0.32h32c9.152 0 16 6.848 16 16 0 9.152-6.848 16-16 16h-64a16 16 0 1 0 0 32h64a16 16 0 0 0 3.296-0.384 48.096 48.096 0 0 0 44.704-47.616c0-25.152-19.84-45.888-44.576-47.68a16 16 0 0 0-3.424-0.32h-32a15.616 15.616 0 0 1-16-16c0-9.152 6.848-16 16-16h64a16 16 0 1 0 0-32h-62.88a16 16 0 0 0-1.12 0 16 16 0 0 0-1.6 0z m159.744 0a16 16 0 0 0-1.984 0.384c-24.64 1.92-44.384 22.528-44.384 47.616 0 25.28 20.096 46.08 44.992 47.68a16 16 0 0 0 3.008 0.32h32c9.152 0 16 6.848 16 16 0 9.152-6.848 16-16 16h-64a16 16 0 1 0 0 32h64a16 16 0 0 0 3.328-0.384 48.096 48.096 0 0 0 44.672-47.616c0-25.152-19.84-45.888-44.544-47.68a16 16 0 0 0-3.456-0.32h-32a15.616 15.616 0 0 1-16-16c0-9.152 6.848-16 16-16h64a16 16 0 1 0 0-32h-62.88a16 16 0 0 0-1.12 0 16 16 0 0 0-1.6 0z"
+    fill="#E9EDED" p-id="19937"></path>
+</svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/file-dir.svg b/frontend/new-web/src/assets/icons/file-dir.svg
new file mode 100755
index 00000000..04daada7
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/file-dir.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1627885889837" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17560" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M0 139.636364a46.545455 46.545455 0 0 1 46.545455-46.545455h354.897454a51.2 51.2 0 0 1 47.057455 31.034182L473.6 182.679273 977.454545 182.690909a46.545455 46.545455 0 0 1 46.545455 46.545455v546.909091a46.545455 46.545455 0 0 1-46.545455 46.545454H46.545455a46.545455 46.545455 0 0 1-46.545455-46.545454V139.636364z" fill="#FFA000" p-id="17561"></path><path d="M0 276.945455m46.545455 0l930.90909 0q46.545455 0 46.545455 46.545454l0 558.545455q0 46.545455-46.545455 46.545454l-930.90909 0q-46.545455 0-46.545455-46.545454l0-558.545455q0-46.545455 46.545455-46.545454Z" fill="#FFCA28" p-id="17562"></path></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/file-excel.svg b/frontend/new-web/src/assets/icons/file-excel.svg
new file mode 100755
index 00000000..f53b51fa
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/file-excel.svg
@@ -0,0 +1,11 @@
+<svg t="1642407332637" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6055"
+  width="200" height="200">
+  <path
+    d="M967.111111 281.6V910.222222c0 62.577778-51.2 113.777778-113.777778 113.777778H170.666667c-62.577778 0-113.777778-51.2-113.777778-113.777778V113.777778c0-62.577778 51.2-113.777778 113.777778-113.777778h514.844444L967.111111 281.6z"
+    fill="#62C558" p-id="6056"></path>
+  <path d="M685.511111 224.711111V0L967.111111 281.6H742.4c-31.288889 0-56.888889-25.6-56.888889-56.888889"
+    fill="#2A8121" p-id="6057"></path>
+  <path
+    d="M682.666667 724.024889L638.691556 768 341.333333 470.670222 385.308444 426.666667zM454.087111 611.128889l44.088889 44.088889L385.422222 768 341.333333 723.911111zM682.666667 470.755556l-113.066667 113.066666-44.088889-44.088889L638.577778 426.666667z"
+    fill="#FFFFFF" p-id="6058"></path>
+</svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/file-exe.svg b/frontend/new-web/src/assets/icons/file-exe.svg
new file mode 100755
index 00000000..4111d06f
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/file-exe.svg
@@ -0,0 +1,20 @@
+<svg t="1642408099555" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+  p-id="53361" width="200" height="200">
+  <path
+    d="M967.111111 281.6V910.222222c0 62.862222-50.915556 113.777778-113.777778 113.777778H170.666667c-62.862222 0-113.777778-50.915556-113.777778-113.777778V113.777778c0-62.862222 50.915556-113.777778 113.777778-113.777778h514.844444L967.111111 281.6z"
+    fill="#BABABA" p-id="53362"></path>
+  <path d="M685.511111 167.822222V0L967.111111 281.6H799.288889c-62.862222 0-113.777778-50.915556-113.777778-113.777778"
+    fill="#979797" p-id="53363"></path>
+  <path
+    d="M586.865778 521.671111a148.650667 148.650667 0 0 1-3.754667 49.265778l44.629333 22.556444a164.664889 164.664889 0 0 1-10.154666 26.254223l-4.266667 8.448a162.986667 162.986667 0 0 1-15.104 23.751111l-44.657778-22.528a149.048889 149.048889 0 0 1-37.404444 32.312889l15.587555 47.388444a192.910222 192.910222 0 0 1-62.179555 20.48l-15.587556-47.416889a148.053333 148.053333 0 0 1-49.322666-3.783111l-22.528 44.657778a163.612444 163.612444 0 0 1-26.254223-10.154667l-8.448-4.266667a158.350222 158.350222 0 0 1-23.751111-15.132444l22.528-44.600889a147.569778 147.569778 0 0 1-32.312889-37.461333l-47.416888 15.644444a195.868444 195.868444 0 0 1-12.856889-30.264889l-7.594667-31.943111 47.416889-15.616a148.650667 148.650667 0 0 1 3.754667-49.294222l-44.600889-22.528c2.190222-7.452444 4.892444-14.904889 8.078222-21.959111l8.533333-16.952889c3.84-6.769778 8.220444-13.368889 12.885334-19.569778l44.629333 22.528c10.353778-12.515556 23.04-23.608889 37.432889-32.284444l-15.587556-47.416889c9.557333-5.034667 19.626667-9.386667 30.236445-12.885333L410.737778 341.333333l15.587555 47.416889a147.370667 147.370667 0 0 1 49.322667 3.754667l22.528-44.629333c7.452444 2.190222 14.876444 4.920889 21.959111 8.106666l4.266667 2.048 8.504889 4.266667 4.181333 2.275555c6.741333 3.754667 13.368889 8.135111 19.569778 12.828445l-22.528 44.657778a147.911111 147.911111 0 0 1 32.284444 37.404444l47.416889-15.587555a195.527111 195.527111 0 0 1 20.451556 62.179555l-47.416889 15.587556z"
+    fill="#FFFFFF" p-id="53364"></path>
+  <path
+    d="M520.618667 508.984889a84.707556 84.707556 0 1 1-160.938667 52.963555 84.707556 84.707556 0 0 1 160.938667-52.963555"
+    fill="#BABABA" p-id="53365"></path>
+  <path
+    d="M742.371556 771.84c-4.864 6.826667-10.865778 12.743111-17.521778 17.436444l9.557333 23.096889c-3.896889 2.56-8.106667 4.807111-12.401778 6.656l-4.408889 1.792a79.644444 79.644444 0 0 1-13.454222 4.067556l-9.557333-23.096889c-7.992889 1.365333-16.440889 1.422222-24.746667 0l-9.557333 23.04a97.792 97.792 0 0 1-30.208-12.515556l9.557333-23.04a74.524444 74.524444 0 0 1-17.464889-17.521777l-23.096889 9.557333a82.488889 82.488889 0 0 1-6.627555-12.430222l-1.792-4.380445a80.554667 80.554667 0 0 1-4.096-13.454222l23.096889-9.557333a75.264 75.264 0 0 1 0-24.746667l-23.068445-9.557333a98.986667 98.986667 0 0 1 5.006223-15.644445l7.566222-14.592 23.04 9.557334c4.835556-6.826667 10.894222-12.743111 17.521778-17.436445l-9.557334-23.096889c3.271111-2.104889 6.741333-4.039111 10.24-5.688889l8.789334-3.612444c3.640889-1.308444 7.452444-2.389333 11.235555-3.214222l9.557333 23.096889c8.021333-1.365333 16.440889-1.422222 24.718223 0l9.585777-23.068445c5.233778 1.223111 10.496 2.844444 15.644445 5.006222l14.592 7.537778-9.585778 23.04c6.826667 4.892444 12.771556 10.894222 17.436445 17.521778l23.096888-9.528889c2.133333 3.271111 4.067556 6.712889 5.688889 10.24l0.967111 2.161778 1.792 4.380444 0.853334 2.218667c1.336889 3.640889 2.417778 7.480889 3.214222 11.264l-23.096889 9.557333c1.393778 7.964444 1.422222 16.440889 0 24.718223l23.04 9.557333a96 96 0 0 1-12.515555 30.236444l-23.04-9.557333z"
+    fill="#FFFFFF" p-id="53366"></path>
+  <path
+    d="M721.408 745.415111a42.382222 42.382222 0 1 1-78.250667-32.455111 42.382222 42.382222 0 0 1 78.222223 32.426667"
+    fill="#BABABA" p-id="53367"></path>
+</svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/file-html.svg b/frontend/new-web/src/assets/icons/file-html.svg
new file mode 100755
index 00000000..9b704e92
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/file-html.svg
@@ -0,0 +1,14 @@
+<svg t="1642407647664" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+  p-id="19787" width="200" height="200">
+  <path d="M847.872 240.128v688c0 26.56-21.408 48-48 48h-576c-26.56 0-48-21.44-48-48v-832c0-26.592 21.44-48 48-48h432z"
+    fill="#E9EDED" p-id="19788"></path>
+  <path d="M160 768.128v160c0 35.456 28.544 64 64 64h576c35.456 0 64-28.544 64-64v-160H160z" fill="#F05542"
+    p-id="19789"></path>
+  <path d="M847.872 240.128h-144c-26.56 0-48-21.44-48-48v-144" fill="#F05542" p-id="19790"></path>
+  <path
+    d="M432.736 384.064a16 16 0 0 0-10.976 4.8l-96.96 95.776a16 16 0 0 0-0.416 0.416 16 16 0 0 0 1.664 23.808l95.68 94.56a16 16 0 1 0 22.528-22.72l-85.568-84.576 85.568-84.48a16 16 0 0 0-11.52-27.584z m157.824 0a16 16 0 0 0-11.008 27.552l85.504 84.48-85.504 84.576a16 16 0 1 0 22.496 22.752l95.648-94.56a16 16 0 0 0 5.44-17.504 16 16 0 0 0-1.28-2.912 16 16 0 0 0-0.608-1.12 16 16 0 0 0-0.192-0.256 16 16 0 0 0-0.192-0.256 16 16 0 0 0-0.8-0.992 16 16 0 0 0-0.192-0.256 16 16 0 0 0-0.864-0.96 16 16 0 0 0-0.064 0l-0.64-0.544a16 16 0 0 0-0.48-0.512l-95.776-94.688a16 16 0 0 0-11.488-4.8z"
+    fill="#F05542" p-id="19791"></path>
+  <path
+    d="M654.88 799.744a16 16 0 0 0-11.84 6.624L608 853.312l-35.136-46.944-0.128 0.064a16 16 0 0 0-13.056-6.368 16 16 0 0 0-15.744 16.192v127.68a16 16 0 1 0 32 0v-80.128l15.936 21.248a16 16 0 0 0 28.864 4.448l19.2-25.6v80.032a16 16 0 1 0 32 0v-126.816a16 16 0 0 0-15.424-17.376 16 16 0 0 0-1.632 0z m-383.136 0.32a16 16 0 0 0-15.744 16.192V943.936a16 16 0 1 0 32 0v-47.808h64v47.808a16 16 0 1 0 32 0v-61.312a16 16 0 0 0 0-5.12v-61.248a16 16 0 0 0-16.256-16.192 16 16 0 0 0-15.744 16.192v47.872H288v-47.872a16 16 0 0 0-16.256-16.192z m192 0a16 16 0 0 0-1.6 0.064H432a16 16 0 1 0 0 32h16v111.808a16 16 0 1 0 32 0v-111.808h16a16 16 0 1 0 0-32h-30.304a16 16 0 0 0-1.92-0.064z m255.936 0a16 16 0 0 0-15.744 16.192v126.496a16 16 0 0 0 0.64 5.824 16 16 0 0 0 0 0.064 16 16 0 0 0 0.096 0.416 16 16 0 0 0 0.448 1.12 16 16 0 0 0 0.864 1.824 16 16 0 0 0 0.64 0.992 16 16 0 0 0 0.192 0.32 16 16 0 0 0 0.736 0.96 16 16 0 0 0 0.832 0.864 16 16 0 0 0 0.352 0.416 16 16 0 0 0 0.832 0.704 16 16 0 0 0 0.448 0.384 16 16 0 0 0 0.352 0.32 16 16 0 0 0 1.12 0.736 16 16 0 0 0 2.464 1.248 16 16 0 0 0 0.864 0.32 16 16 0 0 0 5.376 0.864h63.552a16 16 0 1 0 0-32h-47.808v-111.872a16 16 0 0 0-16.256-16.192z"
+    fill="#E9EDED" p-id="19792"></path>
+</svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/file-image.svg b/frontend/new-web/src/assets/icons/file-image.svg
new file mode 100755
index 00000000..e4989db5
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/file-image.svg
@@ -0,0 +1,11 @@
+<svg t="1642407370336" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6354"
+  width="200" height="200">
+  <path
+    d="M952.888889 281.6V910.222222c0 62.862222-50.915556 113.777778-113.777778 113.777778H156.444444c-62.862222 0-113.777778-50.915556-113.777777-113.777778V113.777778c0-62.862222 50.915556-113.777778 113.777777-113.777778h514.844445L952.888889 281.6z"
+    fill="#85BCFF" p-id="6355"></path>
+  <path d="M676.664889 167.822222V0l281.6 281.6h-167.822222c-62.862222 0-113.777778-50.915556-113.777778-113.777778"
+    fill="#529EE0" p-id="6356"></path>
+  <path
+    d="M685.824 363.804444a53.76 53.76 0 0 1 53.731556 53.731556v307.029333a53.76 53.76 0 0 1-53.731556 53.731556H309.76a53.731556 53.731556 0 0 1-53.731556-53.76V417.564444c0-29.667556 24.035556-53.731556 53.731556-53.731555H685.795556z m-72.903111 149.674667l-138.183111 146.545778-80.583111-62.805333-92.131556 94.208v31.402666c0 11.548444 10.325333 20.906667 23.04 20.906667h345.400889c12.714667 0 23.04-9.386667 23.04-20.906667v-125.610666l-80.583111-83.740445z m-227.896889-85.532444a32.085333 32.085333 0 1 0 0 64.142222 32.085333 32.085333 0 0 0 0-64.142222z"
+    fill="#FFFFFF" p-id="6357"></path>
+</svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/file-js.svg b/frontend/new-web/src/assets/icons/file-js.svg
new file mode 100755
index 00000000..b38ef349
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/file-js.svg
@@ -0,0 +1,14 @@
+<svg t="1642408007951" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+  p-id="50023" width="200" height="200">
+  <path d="M847.872 240.128v688c0 26.56-21.408 48-48 48h-576c-26.56 0-48-21.44-48-48v-832c0-26.592 21.44-48 48-48h432z"
+    fill="#E9EDED" p-id="50024"></path>
+  <path d="M160 768.128v160c0 35.456 28.544 64 64 64h576c35.456 0 64-28.544 64-64v-160H160z" fill="#25B39E"
+    p-id="50025"></path>
+  <path d="M847.872 240.128h-144c-26.56 0-48-21.44-48-48v-144" fill="#25B39E" p-id="50026"></path>
+  <path
+    d="M432.256 320.128c-35.2 0-64 28.8-64 64v32c0 18.016-14.016 32-32 32a16 16 0 0 0-3.2 0.256 16 16 0 0 0-12.384 11.232 16 16 0 0 0-0.352 1.504 16 16 0 0 0 0 0.064 16 16 0 0 0 15.936 18.944c17.984 0 32 13.984 32 32v32c0 35.2 28.8 64 64 64a16 16 0 1 0 0-32c-18.016 0-32-13.984-32-32v-32c0-19.136-8.736-36.256-22.208-48a63.68 63.68 0 0 0 22.208-48v-32c0-18.016 13.984-32 32-32a16 16 0 1 0 0-32z m157.856 0a16 16 0 0 0 1.632 32c18.016 0 32 13.984 32 32v32c0 19.168 8.736 36.224 22.208 48-13.44 11.744-22.208 28.864-22.208 48v32c0 18.016-13.984 32-32 32a16 16 0 1 0 0 32c35.2 0 64-28.8 64-64v-32c0-18.016 14.016-32 32-32a16 16 0 0 0 10.368-3.616 16 16 0 0 0 1.216-1.152 16 16 0 0 0-11.584-27.232c-17.984 0-32-13.984-32-32v-32c0-35.2-28.8-64-64-64a16 16 0 0 0-1.6 0zM512 367.936a32 32 0 0 0-32 32 32 32 0 0 0 32 32 32 32 0 0 0 32-32 32 32 0 0 0-32-32z m0 96a32 32 0 0 0-32 32 32 32 0 0 0 16.256 27.872l-14.4 28.864a16 16 0 1 0 28.64 14.272l24-48.256a32 32 0 0 0 9.44-21.504 16 16 0 0 0 0-0.192 32 32 0 0 0 0.064-1.056 32 32 0 0 0-32-32z"
+    fill="#25B39E" p-id="50027"></path>
+  <path
+    d="M335.872 800a16 16 0 0 0-15.744 16.256V912c0 9.152-6.848 16-16 16a15.616 15.616 0 0 1-16-16 16 16 0 0 0-16.256-16.192 16 16 0 0 0-15.744 16.192c0 26.304 21.696 48 48 48 24.768 0 45.12-19.296 47.488-43.52a16 16 0 0 0 0.512-4.224v-96a16 16 0 0 0-16.256-16.256z m94.4 0.128a16 16 0 0 0-2.016 0.384c-24.64 1.92-44.384 22.528-44.384 47.616 0 25.28 20.096 46.08 44.992 47.68a16 16 0 0 0 3.008 0.32h32c9.152 0 16 6.848 16 16 0 9.152-6.848 16-16 16h-64a16 16 0 1 0 0 32h64a16 16 0 0 0 3.328-0.384 48.096 48.096 0 0 0 44.672-47.616c0-25.152-19.84-45.888-44.544-47.68a16 16 0 0 0-3.456-0.32h-30.88a16 16 0 0 0-1.12 0 15.616 15.616 0 0 1-16-16c0-9.152 6.848-16 16-16h64a16 16 0 1 0 0-32h-62.88a16 16 0 0 0-1.12 0 16 16 0 0 0-1.6 0z"
+    fill="#E9EDED" p-id="50028"></path>
+</svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/file-json.svg b/frontend/new-web/src/assets/icons/file-json.svg
new file mode 100755
index 00000000..e7cd332a
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/file-json.svg
@@ -0,0 +1,14 @@
+<svg t="1642407743753" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+  p-id="20514" width="200" height="200">
+  <path d="M847.872 240.128v688c0 26.56-21.408 48-48 48h-576c-26.56 0-48-21.44-48-48v-832c0-26.592 21.44-48 48-48h432z"
+    fill="#E9EDED" p-id="20515"></path>
+  <path d="M160 768.128v160c0 35.456 28.544 64 64 64h576c35.456 0 64-28.544 64-64v-160H160z" fill="#F17F53"
+    p-id="20516"></path>
+  <path d="M847.872 240.128h-144c-26.56 0-48-21.44-48-48v-144" fill="#F17F53" p-id="20517"></path>
+  <path
+    d="M432.256 320.128c-35.2 0-64 28.8-64 64v32c0 18.016-14.016 32-32 32a16 16 0 0 0-15.936 12.992 16 16 0 0 0 0 0.064 16 16 0 0 0 4.736 14.56 16 16 0 0 0 2.496 1.92 16 16 0 0 0 4.448 1.92 16 16 0 0 0 3.136 0.48 16 16 0 0 0 1.12 0.064c17.984 0 32 13.984 32 32v32c0 35.2 28.8 64 64 64a16 16 0 1 0 0-32c-18.016 0-32-13.984-32-32v-32c0-19.136-8.736-36.256-22.208-48a63.68 63.68 0 0 0 22.208-48v-32c0-18.016 13.984-32 32-32a16 16 0 1 0 0-32z m125.856 0a16 16 0 0 0 1.632 32c18.016 0 32 13.984 32 32v32c0 19.168 8.736 36.224 22.208 48-13.44 11.744-22.208 28.864-22.208 48v32c0 18.016-13.984 32-32 32a16 16 0 1 0 0 32c35.2 0 64-28.8 64-64v-32c0-18.016 14.016-32 32-32a16 16 0 0 0 10.368-3.616 16 16 0 0 0 1.216-1.152 16 16 0 0 0-11.584-27.232c-17.984 0-32-13.984-32-32v-32c0-35.2-28.8-64-64-64a16 16 0 0 0-1.6 0zM496 384a16 16 0 0 0-16 16 16 16 0 0 0 16 16 16 16 0 0 0 16-16 16 16 0 0 0-16-16z m-0.256 63.808A16 16 0 0 0 480 464v96a16 16 0 1 0 32 0v-96a16 16 0 0 0-16.256-16.192z"
+    fill="#F17F53" p-id="20518"></path>
+  <path
+    d="M720.576 799.616a16 16 0 0 0-1.632 0.064 16 16 0 0 0-15.008 17.312v126.816a16 16 0 1 0 32 0v-80l66.624 88.96a16 16 0 0 0 0.064 0.096l0.448 0.576a16 16 0 0 0 28.864-9.6v-127.68a16 16 0 0 0-16.256-16.224 16 16 0 0 0-15.744 16.256v79.68l-67.136-89.6a16 16 0 0 0-12.224-6.656zM303.744 800a16 16 0 0 0-15.744 16.256V912c0 9.152-6.848 16-16 16a15.616 15.616 0 0 1-16-16 16 16 0 0 0-16.256-16.192A16 16 0 0 0 224 912c0 26.304 21.696 48 48 48 24.768 0 45.152-19.296 47.488-43.52a16 16 0 0 0 0.512-4.224v-96A16 16 0 0 0 303.744 800z m288.256 0a80.256 80.256 0 0 0-80 80c0 44 36 80 80 80s80-36 80-80-36-80-80-80z m-193.888 0.128a16 16 0 0 0-1.984 0.384c-24.64 1.92-44.384 22.528-44.384 47.616 0 25.28 20.096 46.08 44.992 47.68a16 16 0 0 0 3.008 0.32h32c9.152 0 16 6.848 16 16 0 9.152-6.848 16-16 16h-64a16 16 0 1 0 0 32h64a16 16 0 0 0 3.328-0.384 48.096 48.096 0 0 0 44.672-47.616c0-25.152-19.84-45.888-44.544-47.68a16 16 0 0 0-3.456-0.32h-30.88a16 16 0 0 0-1.12 0 15.616 15.616 0 0 1-16-16c0-9.152 6.88-16 16-16h64a16 16 0 1 0 0-32h-62.88a16 16 0 0 0-1.12 0 16 16 0 0 0-1.6 0zM592 832c26.688 0 48 21.312 48 48s-21.312 48-48 48-48-21.312-48-48 21.312-48 48-48z"
+    fill="#E9EDED" p-id="20519"></path>
+</svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/file-music.svg b/frontend/new-web/src/assets/icons/file-music.svg
new file mode 100755
index 00000000..77581161
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/file-music.svg
@@ -0,0 +1,11 @@
+<svg t="1642407502942" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7293"
+  width="200" height="200">
+  <path
+    d="M967.111111 281.6V910.222222c0 62.862222-50.915556 113.777778-113.777778 113.777778H170.666667c-62.862222 0-113.777778-50.915556-113.777778-113.777778V113.777778c0-62.862222 50.915556-113.777778 113.777778-113.777778h514.844444L967.111111 281.6z"
+    fill="#A15FDE" p-id="7294"></path>
+  <path d="M685.511111 196.266667V0L967.111111 281.6H770.844444a85.333333 85.333333 0 0 1-85.333333-85.333333"
+    fill="#C386F0" p-id="7295"></path>
+  <path
+    d="M669.980444 426.268444v236.999112c0 26.254222-31.857778 47.587556-71.082666 47.587555-39.253333 0-70.741333-21.333333-70.741334-47.587555 0-26.282667 31.516444-47.587556 70.741334-47.587556 14.848 0 28.728889 3.100444 40.163555 8.334222v-165.916444l-205.767111 48.497778v211.057777c0 26.254222-32.142222 47.559111-71.992889 47.559111-39.850667 0-72.305778-21.333333-72.305777-47.559111 0-26.282667 32.426667-47.587556 72.305777-47.587555a96.711111 96.711111 0 0 1 41.102223 8.647111V474.168889c0-14.222222 9.870222-26.88 23.779555-29.980445l205.795556-47.900444a30.862222 30.862222 0 0 1 38.001777 29.980444"
+    fill="#FFFFFF" p-id="7296"></path>
+</svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/file-open.svg b/frontend/new-web/src/assets/icons/file-open.svg
new file mode 100755
index 00000000..9da190e8
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/file-open.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1627364345844" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15116" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.eot?#iefix") format("embedded-opentype"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff2") format("woff2"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.woff") format("woff"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.ttf") format("truetype"), url("//at.alicdn.com/t/font_1031158_1uhr8ri0pk5.svg#iconfont") format("svg"); }
+</style></defs><path d="M0 128a51.2 51.2 0 0 1 51.2-51.2h350.24a51.2 51.2 0 0 1 47.0592 31.0336L473.6 166.4h499.2a51.2 51.2 0 0 1 51.2 51.2v537.6a51.2 51.2 0 0 1-51.2 51.2H51.2a51.2 51.2 0 0 1-51.2-51.2V128z" fill="#FFA000" p-id="15117"></path><path d="M89.6 249.6m51.2 0l742.4 0q51.2 0 51.2 51.2l0 460.8q0 51.2-51.2 51.2l-742.4 0q-51.2 0-51.2-51.2l0-460.8q0-51.2 51.2-51.2Z" fill="#FFFFFF" p-id="15118"></path><path d="M0 332.8m51.2 0l921.6 0q51.2 0 51.2 51.2l0 512q0 51.2-51.2 51.2l-921.6 0q-51.2 0-51.2-51.2l0-512q0-51.2 51.2-51.2Z" fill="#FFCA28" p-id="15119"></path></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/file-other.svg b/frontend/new-web/src/assets/icons/file-other.svg
new file mode 100755
index 00000000..4215a134
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/file-other.svg
@@ -0,0 +1,11 @@
+<svg t="1642408119178" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+  p-id="53519" width="200" height="200">
+  <path
+    d="M967.111111 281.6V910.222222c0 62.862222-50.915556 113.777778-113.777778 113.777778H170.666667c-62.862222 0-113.777778-50.915556-113.777778-113.777778V113.777778c0-62.862222 50.915556-113.777778 113.777778-113.777778h514.844444L967.111111 281.6z"
+    fill="#BABABA" p-id="53520"></path>
+  <path d="M685.511111 167.822222V0L967.111111 281.6H799.288889c-62.862222 0-113.777778-50.915556-113.777778-113.777778"
+    fill="#979797" p-id="53521"></path>
+  <path
+    d="M733.667556 632.689778a111.104 111.104 0 0 1-110.819556 110.819555h-221.667556a111.132444 111.132444 0 0 1-110.848-110.819555 111.047111 111.047111 0 0 1 99.754667-110.279111A122.197333 122.197333 0 0 1 512 407.694222a122.197333 122.197333 0 0 1 121.912889 114.716445 111.160889 111.160889 0 0 1 99.754667 110.279111"
+    fill="#FFFFFF" p-id="53522"></path>
+</svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/file-pdf.svg b/frontend/new-web/src/assets/icons/file-pdf.svg
new file mode 100755
index 00000000..9bf682b2
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/file-pdf.svg
@@ -0,0 +1,11 @@
+<svg t="1642407248989" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5608"
+  width="200" height="200">
+  <path
+    d="M967.111111 281.6V910.222222c0 62.577778-51.2 113.777778-113.777778 113.777778H170.666667c-62.577778 0-113.777778-51.2-113.777778-113.777778V113.777778c0-62.577778 51.2-113.777778 113.777778-113.777778h514.844444L967.111111 281.6z"
+    fill="#D23B41" p-id="5609"></path>
+  <path d="M685.511111 224.711111V0L967.111111 281.6H742.4c-31.288889 0-56.888889-25.6-56.888889-56.888889"
+    fill="#9C171C" p-id="5610"></path>
+  <path
+    d="M680.277333 662.698667c-11.889778-1.194667-23.751111-3.640889-35.640889-9.728 10.666667-2.133333 20.110222-2.133333 30.776889-2.133334 23.751111 0 28.330667 5.774222 28.330667 9.443556-6.997333 2.417778-15.246222 3.356444-23.466667 2.417778z m-120.945777-15.530667c-25.884444 5.802667-54.556444 14.336-80.440889 23.779556v-2.446223l-2.446223 1.223111c13.084444-26.197333 25.002667-53.333333 35.640889-80.753777l0.938667 1.223111 1.194667-2.133334c13.112889 20.110222 29.866667 40.220444 47.530666 57.884445h-3.640889l1.223112 1.223111zM497.777778 417.450667c1.223111-1.223111 3.669333-1.223111 4.551111-1.223111h3.697778a96.739556 96.739556 0 0 1-1.251556 61.553777c-8.220444-18.915556-11.861333-40.220444-6.997333-60.330666zM352.142222 770.275556l-3.669333 1.223111a96.768 96.768 0 0 1 42.666667-34.417778c-9.443556 15.502222-22.556444 27.392-38.997334 33.194667z m324.494222-155.107556c-25.002667 0-49.664 3.669333-74.666666 8.248889a353.365333 353.365333 0 0 1-73.415111-94.776889c20.110222-66.417778 21.333333-111.217778 5.774222-132.551111a39.253333 39.253333 0 0 0-30.748445-15.502222c-15.246222-1.223111-29.582222 6.087111-36.579555 18.887111-21.333333 35.640889 9.443556 105.415111 23.779555 134.058666-16.782222 50.887111-36.864 99.328-63.089777 146.858667-112.412444 48.440889-114.858667 77.994667-114.858667 88.661333 0 13.084444 7.310222 26.197333 20.110222 32 4.864 3.640889 11.889778 4.835556 17.976889 4.835556 29.582222 0 64-33.194667 100.551111-98.389333 46.307556-18.887111 92.615111-34.133333 141.084445-44.8a153.941333 153.941333 0 0 0 87.722666 35.356444c20.110222 0 59.107556 0 59.107556-40.220444 1.223111-15.530667-6.997333-41.443556-62.748445-42.666667z"
+    fill="#FFFFFF" p-id="5611"></path>
+</svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/file-ppt.svg b/frontend/new-web/src/assets/icons/file-ppt.svg
new file mode 100755
index 00000000..72bac64c
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/file-ppt.svg
@@ -0,0 +1,12 @@
+<svg t="1642407349568" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6204"
+  width="200" height="200">
+  <path
+    d="M967.111111 281.6V910.222222c0 62.577778-51.2 113.777778-113.777778 113.777778H170.666667c-62.577778 0-113.777778-51.2-113.777778-113.777778V113.777778c0-62.577778 51.2-113.777778 113.777778-113.777778h514.844444L967.111111 281.6z"
+    fill="#F16C41" p-id="6205"></path>
+  <path d="M685.511111 224.711111V0L967.111111 281.6H742.4c-31.288889 0-56.888889-25.6-56.888889-56.888889"
+    fill="#CD4B29" p-id="6206"></path>
+  <path
+    d="M525.880889 648.135111a88.32 88.32 0 0 1-68.750222-32.995555 87.04 87.04 0 0 1-19.626667-55.381334c0-21.048889 7.253333-40.248889 19.626667-55.381333a88.234667 88.234667 0 0 1 68.750222-32.995556 88.490667 88.490667 0 0 1 88.376889 88.376889 88.519111 88.519111 0 0 1-88.376889 88.376889m0-235.690667c-24.945778 0-48.327111 6.087111-68.750222 17.294223a143.075556 143.075556 0 0 0-58.88 56.945777v146.119112a143.132444 143.132444 0 0 0 58.88 56.974222c20.423111 11.178667 43.804444 17.265778 68.750222 17.265778a147.342222 147.342222 0 0 0 147.285333-147.285334 147.342222 147.342222 0 0 0-147.285333-147.342222"
+    fill="#FFFFFF" p-id="6207"></path>
+  <path d="M398.222222 824.888889h58.908445V412.444444H398.222222z" fill="#FFFFFF" p-id="6208"></path>
+</svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/file-rar.svg b/frontend/new-web/src/assets/icons/file-rar.svg
new file mode 100755
index 00000000..8cc3ee23
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/file-rar.svg
@@ -0,0 +1,16 @@
+<svg t="1642407407406" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6649"
+  width="200" height="200">
+  <path
+    d="M967.111111 281.6V910.222222c0 62.862222-50.915556 113.777778-113.777778 113.777778H170.666667c-62.862222 0-113.777778-50.915556-113.777778-113.777778V113.777778c0-62.862222 50.915556-113.777778 113.777778-113.777778h514.844444L967.111111 281.6z"
+    fill="#FFC63A" p-id="6650"></path>
+  <path d="M685.511111 167.822222V0L967.111111 281.6H799.288889c-62.862222 0-113.777778-50.915556-113.777778-113.777778"
+    fill="#DD9F08" p-id="6651"></path>
+  <path
+    d="M436.565333 68.437333h68.437334V0h-68.437334zM505.002667 136.874667h68.437333V68.437333h-68.437333zM436.565333 205.312h68.437334V136.874667h-68.437334zM505.002667 273.749333h68.437333V205.312h-68.437333z"
+    fill="#FFFFFF" p-id="6652"></path>
+  <path d="M436.565333 342.158222h68.437334V273.720889h-68.437334zM505.002667 410.624h68.437333V342.186667h-68.437333z"
+    fill="#FFFFFF" p-id="6653"></path>
+  <path
+    d="M436.565333 479.032889h68.437334v-68.437333h-68.437334zM505.002667 547.470222h68.437333v-68.437333h-68.437333zM470.784 762.225778h68.437333v-68.437334h-68.437333v68.437334z m-34.218667-136.874667v136.874667c0 18.915556 15.331556 34.218667 34.218667 34.218666h68.437333c18.915556 0 34.218667-15.303111 34.218667-34.218666v-136.874667h-136.874667z"
+    fill="#FFFFFF" p-id="6654"></path>
+</svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/file-txt.svg b/frontend/new-web/src/assets/icons/file-txt.svg
new file mode 100755
index 00000000..833e12ac
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/file-txt.svg
@@ -0,0 +1,11 @@
+<svg t="1642407315436" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5906"
+  width="200" height="200">
+  <path
+    d="M967.111111 281.6V910.222222c0 62.862222-50.915556 113.777778-113.777778 113.777778H170.666667c-62.862222 0-113.777778-50.915556-113.777778-113.777778V113.777778c0-62.862222 50.915556-113.777778 113.777778-113.777778h514.844444L967.111111 281.6z"
+    fill="#6D9FE5" p-id="5907"></path>
+  <path d="M685.511111 167.822222V0L967.111111 281.6H799.288889c-62.862222 0-113.777778-50.915556-113.777778-113.777778"
+    fill="#4B80CB" p-id="5908"></path>
+  <path
+    d="M344.177778 485.575111h312.888889V426.666667h-312.888889zM471.153778 770.019556h58.908444v-284.444445h-58.908444z"
+    fill="#FFFFFF" p-id="5909"></path>
+</svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/file-video.svg b/frontend/new-web/src/assets/icons/file-video.svg
new file mode 100755
index 00000000..720ee9f9
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/file-video.svg
@@ -0,0 +1,14 @@
+<svg t="1642407389455" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6501"
+  width="200" height="200">
+  <path
+    d="M967.111111 281.6V910.222222c0 62.862222-50.915556 113.777778-113.777778 113.777778H170.666667c-62.862222 0-113.777778-50.915556-113.777778-113.777778V113.777778c0-62.862222 50.915556-113.777778 113.777778-113.777778h514.844444L967.111111 281.6z"
+    fill="#C386F0" p-id="6502"></path>
+  <path
+    d="M284.444444 398.222222m42.666667 0l298.666667 0q42.666667 0 42.666666 42.666667l0 234.666667q0 42.666667-42.666666 42.666666l-298.666667 0q-42.666667 0-42.666667-42.666666l0-234.666667q0-42.666667 42.666667-42.666667Z"
+    fill="#FFFFFF" p-id="6503"></path>
+  <path
+    d="M738.417778 457.841778a31.971556 31.971556 0 0 1 48.014222 27.676444v154.538667c0 24.632889-26.652444 40.021333-47.985778 27.704889L684.430222 636.586667V488.96z"
+    fill="#FFFFFF" p-id="6504"></path>
+  <path d="M685.511111 167.822222V0L967.111111 281.6H799.288889c-62.862222 0-113.777778-50.915556-113.777778-113.777778"
+    fill="#A15FDE" p-id="6505"></path>
+</svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/file-wps.svg b/frontend/new-web/src/assets/icons/file-wps.svg
new file mode 100755
index 00000000..210fd333
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/file-wps.svg
@@ -0,0 +1,13 @@
+<svg t="1642407280584" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5757"
+  width="200" height="200">
+  <path
+    d="M967.111111 281.6V910.222222c0 62.577778-51.2 113.777778-113.777778 113.777778H170.666667c-62.577778 0-113.777778-51.2-113.777778-113.777778V113.777778c0-62.577778 51.2-113.777778 113.777778-113.777778h514.844444L967.111111 281.6z"
+    fill="#4F6BF6" p-id="5758"></path>
+  <path d="M581.262222 755.626667h59.363556L739.555556 439.04h-59.335112z" fill="#FFFFFF" p-id="5759"></path>
+  <path d="M685.511111 224.711111V0L967.111111 281.6H742.4c-31.288889 0-56.888889-25.6-56.888889-56.888889"
+    fill="#243EBB" p-id="5760"></path>
+  <path
+    d="M640.625778 755.626667h-59.363556l-98.929778-277.020445h59.335112zM442.737778 755.626667h-59.363556L284.444444 439.04h59.335112z"
+    fill="#FFFFFF" p-id="5761"></path>
+  <path d="M383.374222 755.626667h59.363556l98.929778-277.020445h-59.335112z" fill="#FFFFFF" p-id="5762"></path>
+</svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/file-zip.svg b/frontend/new-web/src/assets/icons/file-zip.svg
new file mode 100755
index 00000000..51fde6fa
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/file-zip.svg
@@ -0,0 +1 @@
+<svg t="1642421944380" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="865" width="200" height="200"><path d="M97.9 376h828.4v269.2H97.9z" fill="#F95F5D" p-id="866"></path><path d="M926.3 376V161.5c0-26.6-23.8-50.3-52.1-50.3H149.9c-28.3 0-52.1 23.7-52.1 50.3V376h828.5z m0 0" fill="#55C7F7" p-id="867"></path><path d="M97.9 645.2v214.5c0 26.6 23.6 50.3 51.7 50.3h725c28.1 0 51.7-23.7 51.7-50.3V645.2H97.9z m0 0" fill="#7ECF3B" p-id="868"></path><path d="M421.8 111.2h184.9V910H421.8z" fill="#FDAF42" p-id="869"></path><path d="M606.7 457.4v112.4H413V457.4h193.7m31.1-45.9H381.9c-4.4 0-11.8 4.4-11.8 11.8v179c0 4.4 4.4 11.8 11.8 11.8h255.9c4.4 0 11.8-4.4 11.8-11.8v-179c-2.9-8.8-7.4-11.8-11.8-11.8z m0 0" fill="#FFFFFF" p-id="870"></path></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/file.svg b/frontend/new-web/src/assets/icons/file.svg
new file mode 100644
index 00000000..fac9bf01
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/file.svg
@@ -0,0 +1 @@
+<svg t="1721541550402" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1592" width="200" height="200"><path d="M979.096493 980.950486H44.904061C19.829898 980.950486 0.000277 960.442811 0.000277 935.839135v-740.047567c0-25.184865 20.410811-45.111351 44.903784-45.111352h934.192432c25.074162 0 44.903784 20.507676 44.903784 45.111352v740.047567c0 25.184865-20.410811 45.111351-44.903784 45.111351z" fill="#FFA000" p-id="1593"></path><path d="M512.000277 344.409946H0.000277V112.902919a45.097514 45.097514 0 0 1 44.903784-45.24973h350.470918c19.829622 0 37.320649 12.924541 43.146379 32.311352L512.000277 344.423784z" fill="#FFA000" p-id="1594"></path><path d="M909.699736 925.599135H114.300817c-25.184865 0-45.111351-20.134054-45.111351-44.281081v-603.32973c0-24.728216 20.493838-44.281081 45.111351-44.281081h795.398919c25.184865 0 45.111351 20.134054 45.111352 44.281081v603.32973c0.567351 24.147027-19.926486 44.281081-45.111352 44.281081z" fill="#FFFFFF" p-id="1595"></path><path d="M979.096493 980.950486H44.904061C19.829898 980.950486 0.000277 960.802595 0.000277 936.627892V361.056865c0-24.755892 20.410811-44.322595 44.903784-44.322595h934.192432c25.074162 0 44.903784 20.147892 44.903784 44.322595v575.571027c0 24.755892-20.410811 44.322595-44.903784 44.322594z" fill="#FFCA28" p-id="1596"></path><path d="M364.46125 485.708108H106.634655C93.917682 485.708108 83.027304 476.021622 83.027304 463.512216c0-11.96973 10.295351-22.223568 23.607351-22.223567h257.21773c12.716973 0 23.607351 9.686486 23.607351 22.223567 0 11.955892-10.295351 22.223568-22.998486 22.223568z m0 149.296433H106.634655c-12.716973 0-23.607351-9.686486-23.607351-22.223568 0-12.537081 10.295351-22.223568 23.607351-22.223568h257.21773c12.716973 0 23.607351 9.686486 23.607351 22.223568 0 12.537081-10.295351 22.223568-22.998486 22.223568z" fill="#FFF8E1" p-id="1597"></path></svg>
diff --git a/frontend/new-web/src/assets/icons/fullscreen-exit.svg b/frontend/new-web/src/assets/icons/fullscreen-exit.svg
new file mode 100644
index 00000000..2452f2b0
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/fullscreen-exit.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"/></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/fullscreen.svg b/frontend/new-web/src/assets/icons/fullscreen.svg
new file mode 100644
index 00000000..4b6ee110
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/fullscreen.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M8 3v2H4v4H2V3h6zM2 21v-6h2v4h4v2H2zm20 0h-6v-2h4v-4h2v6zm0-12h-2V5h-4V3h6v6z"/></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/gitcode.svg b/frontend/new-web/src/assets/icons/gitcode.svg
new file mode 100644
index 00000000..7a02760a
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/gitcode.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" class="icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.4791 4.97677C15.6201 4.89789 15.7691 4.8145 15.93 4.72314C15.9494 4.82848 15.9683 4.92046 15.9854 5.00383C16.0157 5.15091 16.0406 5.2719 16.0525 5.39144C16.1479 6.4296 16.6697 7.1933 17.4092 7.36527C18.4908 7.61639 19.5106 7.20133 20.06 6.28555C20.72 5.18673 20.4334 3.84099 19.3097 3.03098C16.1851 0.777435 12.7523 0.155888 9.05448 1.24127C1.08137 3.59371 -1.64675 13.3884 4.01196 19.3949C6.43291 21.9642 9.50695 23.0727 12.9963 22.9889C17.4663 22.8839 20.6857 20.6563 22.7408 16.7954C24.1978 14.0561 22.6139 11.0619 19.5805 10.4396C17.8481 10.0908 16.0765 9.97756 14.3137 10.103C13.7272 10.1594 13.1579 10.3325 12.6394 10.6124C12.0592 10.9135 11.8915 11.5383 11.9565 12.1575C12.0171 12.7217 12.4498 13.0601 12.965 13.1453C14.0024 13.3077 15.0522 13.402 16.1 13.4881C16.4032 13.5136 16.7093 13.5166 17.0149 13.5197C17.4534 13.5241 17.8912 13.5285 18.3187 13.5991C19.5385 13.8007 19.9574 14.7905 19.33 15.8495C19.1763 16.1041 18.9971 16.3424 18.7951 16.5607C17.9745 17.4632 16.9014 18.0981 15.7152 18.3827C13.55 18.9127 11.3827 18.9425 9.22755 18.2617C6.77347 17.4875 5.31042 15.6849 5.25902 13.2584C5.2398 11.7619 5.61972 10.2874 6.35969 8.9865C6.694 8.38013 6.87751 7.75562 6.82593 7.06851C6.80422 6.77557 6.79219 6.48231 6.77927 6.16716C6.77239 5.99944 6.76526 5.82551 6.75628 5.64214C7.00484 5.69431 7.25032 5.76016 7.49161 5.83943C8.43027 6.21622 9.35415 6.38811 10.3702 6.11155C10.9481 5.97335 11.5455 5.93511 12.1363 5.9985C13.0877 6.07606 14.0387 5.84361 14.847 5.33586C15.0488 5.2176 15.2539 5.10279 15.4791 4.97677Z" fill="currentColor"></path></svg>
diff --git a/frontend/new-web/src/assets/icons/gitee.svg b/frontend/new-web/src/assets/icons/gitee.svg
new file mode 100644
index 00000000..c799c2f3
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/gitee.svg
@@ -0,0 +1 @@
+<svg t="1725812178308" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4564" width="200" height="200"><path d="M512 1024C229.234 1024 0 794.766 0 512S229.234 0 512 0s512 229.234 512 512-229.234 512-512 512z m259.157-568.889l-290.759 0.014c-13.966 0-25.287 11.321-25.287 25.273l-0.028 63.218c0 13.966 11.306 25.287 25.273 25.287H657.38c13.966 0 25.287 11.307 25.287 25.273v12.644a75.847 75.847 0 0 1-75.847 75.847H366.606a25.287 25.287 0 0 1-25.287-25.273v-240.2a75.847 75.847 0 0 1 75.847-75.846l353.92-0.015c13.966 0 25.273-11.306 25.287-25.273l0.071-63.189c0-13.966-11.306-25.287-25.272-25.301l-353.992 0.014c-104.718-0.014-189.624 84.892-189.624 189.61v353.963c0 13.967 11.32 25.287 25.287 25.287h372.935c94.265 0 170.666-76.401 170.666-170.666v-145.38c0-13.952-11.32-25.273-25.287-25.273z" p-id="4565"></path></svg>
diff --git a/frontend/new-web/src/assets/icons/github.svg b/frontend/new-web/src/assets/icons/github.svg
new file mode 100644
index 00000000..1adfa4e7
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/github.svg
@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M511.543 14.057C228.914 13.943 0 242.743 0 525.143 0 748.457 143.2 938.286 342.629 1008c26.857 6.743 22.742-12.343 22.742-25.371v-88.572C210.286 912.23 204 809.6 193.6 792.457c-21.029-35.886-70.743-45.028-55.886-62.171 35.315-18.172 71.315 4.571 113.029 66.171 30.171 44.686 89.028 37.143 118.857 29.714 6.514-26.857 20.457-50.857 39.657-69.485C248.571 727.886 181.6 629.829 181.6 513.257c0-56.571 18.629-108.571 55.2-150.514-23.314-69.143 2.171-128.343 5.6-137.143 66.4-5.943 135.429 47.543 140.8 51.771C420.914 267.2 464 261.83 512.229 261.83c48.457 0 91.657 5.6 129.714 15.885 12.914-9.828 76.914-55.771 138.628-50.171 3.315 8.8 28.229 66.628 6.286 134.857 37.029 42.057 55.886 94.514 55.886 151.2 0 116.8-67.429 214.971-228.572 243.314a145.714 145.714 0 0 1 43.543 104v128.572c.915 10.285 0 20.457 17.143 20.457 202.4-68.229 348.114-259.429 348.114-484.686 0-282.514-229.028-511.2-511.428-511.2z"/></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/homepage.svg b/frontend/new-web/src/assets/icons/homepage.svg
new file mode 100644
index 00000000..1e1feabf
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/homepage.svg
@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M958.401 451.55a20.01 20.01 0 0 0-6.966-14.972L524.345 69.511c-7.499-6.446-18.581-6.446-26.08 0L309.583 231.676V129.657c0-11.05-8.902-19.533-19.952-19.533h-88.034c-11.048 0-19.928 8.482-19.928 19.533v211.954L71.176 436.578a20.003 20.003 0 0 0-6.968 15.174v105.5a20.007 20.007 0 0 0 33.052 15.172l53.298-45.826V850.7c0 60.678 49.364 110.042 110.042 110.042h504.192c60.678 0 110.043-49.364 110.043-110.042V527.026l51.586 44.336a20.001 20.001 0 0 0 21.48 2.966 20.006 20.006 0 0 0 11.566-18.343l-1.066-104.436zM221.579 150.033h48.095v115.942l-48.095 41.336V150.034zm349.14 770.692H436.665V700.642c0-11.03 8.977-20.007 20.008-20.007h94.036c11.03 0 20.007 8.976 20.007 20.007v220.084zm264.1-424.83v354.803c0 38.612-31.415 70.027-70.028 70.027H610.733V700.642c0-33.096-26.927-60.023-60.023-60.023h-94.036c-33.097 0-60.023 26.927-60.023 60.023v220.085H260.599c-38.612 0-70.027-31.415-70.027-70.027V495.895a20.07 20.07 0 0 0-.315-3.432L512.37 215.504l322.703 277.349a20.158 20.158 0 0 0-.255 3.042zM525.41 173.947c-7.502-6.446-18.587-6.447-26.086.003l-395.1 339.714v-52.727l407.081-349.87 407.177 349.952.522 51.205L525.41 173.948z"/></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/icon-msg.svg b/frontend/new-web/src/assets/icons/icon-msg.svg
new file mode 100755
index 00000000..8c615a9b
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/icon-msg.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="10" fill="#00AA2A"/><path d="M10 5C7.243 5 5 7.02 5 9.501c0 1.381.68 2.652 1.871 3.513-.27.697-.743 1.274-1.343 1.631l-.506.302.575.04a5.975 5.975 0 002.07-.232 5.927 5.927 0 001.685-.79c.215.024.433.038.648.038 2.757 0 5-2.02 5-4.502C15 7.02 12.757 5 10 5z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/icon-notice.svg b/frontend/new-web/src/assets/icons/icon-notice.svg
new file mode 100755
index 00000000..13c2e7b7
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/icon-notice.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 20 20" fill="none"><path d="M0 10a10 10 0 1020 0 10 10 0 00-20 0z" fill="#4086FF"/><path d="M13.703 8.349v3.81H6.295v-3.81a3.908 3.908 0 01.255-1.487c.18-.473.451-.904.797-1.268a3.702 3.702 0 011.212-.85 3.615 3.615 0 012.877 0c.456.197.868.486 1.213.85.345.364.616.795.797 1.268.18.473.267.978.255 1.487h.002zm-8.147 5.333v-.763h8.889v.763a.776.776 0 01-.218.538.733.733 0 01-.524.224H6.295a.733.733 0 01-.522-.225.776.776 0 01-.217-.537z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/icon-num.svg b/frontend/new-web/src/assets/icons/icon-num.svg
new file mode 100755
index 00000000..072832d1
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/icon-num.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="10" fill="#0AC8D2"/><path d="M14.77 12.418L12 7.962a1.048 1.048 0 01-.143-.416v-.01a1.148 1.148 0 01-.018-.13V5.15a.863.863 0 00-.86-.863H9.016a.863.863 0 00-.864.865l.005 2.253c0 .197-.055.39-.159.558L5.231 12.42c-.15.186-.231.418-.231.657v.157c0 .581.471 1.053 1.053 1.053h7.894c.582 0 1.053-.472 1.053-1.053v-.157c0-.24-.082-.471-.23-.658z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/icon-user.svg b/frontend/new-web/src/assets/icons/icon-user.svg
new file mode 100755
index 00000000..a65f7ecb
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/icon-user.svg
@@ -0,0 +1 @@
+<svg t="1666058092823" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10268" width="200" height="200"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#FD846F" p-id="10269"></path><path d="M437.563077 588.937846a190.818462 190.818462 0 0 0-0.886154-1.398154 31.113846 31.113846 0 0 0-4.076308-20.40123 192.236308 192.236308 0 0 1-35.190153-69.612308 95.862154 95.862154 0 0 1-33.910154-63.468308c-2.56-39.266462 6.892308-39.266462 6.892307-39.266461-9.452308-28.553846-14.375385-111.084308 16.128-153.777231 39.542154-68.273231 109.883077-72.644923 144.009847-54.902154a108.248615 108.248615 0 0 1 56.477538 19.180308c63.606154 26.190769 68.706462 155.372308 56.989538 190.72 0 0 9.432615 0 6.892308 39.266461a95.862154 95.862154 0 0 1-33.910154 63.488 192.236308 192.236308 0 0 1-35.190154 69.612308 31.113846 31.113846 0 0 0-4.076307 20.401231 190.424615 190.424615 0 0 0-0.256 0.393846c3.800615 8.388923 10.436923 15.478154 19.081846 19.790769 94.838154 19.377231 181.543385 70.616615 181.543385 127.468308v43.342769c0 50.412308-99.072 68.371692-205.469539 73.058462a927.192615 927.192615 0 0 1-64.768 2.638769h0.768c-127.488 0-272.305231-13.508923-272.305231-74.436923V737.673846c0-56.851692 86.685538-108.110769 181.543385-127.488 9.137231-4.548923 16.029538-12.209231 19.692308-21.248z" fill="#FFFFFF" p-id="10270"></path></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/icon-wait.svg b/frontend/new-web/src/assets/icons/icon-wait.svg
new file mode 100755
index 00000000..1af3cbac
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/icon-wait.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="10" fill="#4086FF"/><g clip-path="url(#svg_d3d9446802__clip0_896:213998)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10 4.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zm2.475 6.6h-2.47a.707.707 0 01-.688-.688V7.258a.688.688 0 011.375 0v2.465h1.783a.687.687 0 110 1.375v.003z" fill="#fff"/></g><defs><clipPath id="svg_d3d9446802__clip0_896:213998"><path fill="#fff" transform="translate(4.5 4.5)" d="M0 0h11v11H0z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/item-angular.svg b/frontend/new-web/src/assets/icons/item-angular.svg
new file mode 100755
index 00000000..9ac7695f
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/item-angular.svg
@@ -0,0 +1,8 @@
+<svg t="1642510137242" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+  p-id="11523" width="200" height="200">
+  <path d="M435.8 536.2H512V353z" fill="#DD0031" p-id="11524"></path>
+  <path d="M400.9 616.8l-52.4 130.8h-97.2L512 163V64L94.9 212.7l63.6 551.5L512 960V616.8z" fill="#DD0031" p-id="11525">
+  </path>
+  <path d="M512 353v183.2h76.2z" fill="#C3002F" p-id="11526"></path>
+  <path d="M512 64v99l259.8 584.6h-97.2l-52.4-130.8H512V960l353.5-195.8 63.6-551.5z" fill="#C3002F" p-id="11527"></path>
+</svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/item-github.svg b/frontend/new-web/src/assets/icons/item-github.svg
new file mode 100755
index 00000000..a27e69e3
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/item-github.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" data-v-149482e7=""><path d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5C64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9c26.4 39.1 77.9 32.5 104 26c5.7-23.5 17.9-44.5 34.7-60.8c-140.6-25.2-199.2-111-199.2-213c0-49.5 16.3-95 48.3-131.7c-20.4-60.5 1.9-112.3 4.9-120c58.1-5.2 118.5 41.6 123.2 45.3c33-8.9 70.7-13.6 112.9-13.6c42.4 0 80.2 4.9 113.5 13.9c11.3-8.6 67.3-48.8 121.3-43.9c2.9 7.7 24.7 58.3 5.5 118c32.4 36.8 48.9 82.7 48.9 132.3c0 102.2-59 188.1-200 212.9a127.5 127.5 0 0 1 38.1 91v112.5c.8 9 0 17.9 15 17.9c177.1-59.7 304.6-227 304.6-424.1c0-247.2-200.4-447.3-447.5-447.3z" fill="currentColor"></path></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/item-html5.svg b/frontend/new-web/src/assets/icons/item-html5.svg
new file mode 100755
index 00000000..d88d66e4
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/item-html5.svg
@@ -0,0 +1,6 @@
+<svg t="1642510064087" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9093"
+  width="200" height="200">
+  <path
+    d="M116.7 63.8l71.9 806.9 322.8 89.6 323.7-89.8 72.1-806.7H116.7z m634 263.9H372l9 101.3h360.7l-27.2 303.8-203 56.3-202.7-56.3-13.9-155.4h99.4l7.1 79 110.2 29.7 0.3-0.1L622 656.3 633.5 528h-343l-26.7-299.2h495.7l-8.8 98.9z"
+    fill="#E44D26" p-id="9094"></path>
+</svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/item-js.svg b/frontend/new-web/src/assets/icons/item-js.svg
new file mode 100755
index 00000000..f2e6e29a
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/item-js.svg
@@ -0,0 +1,6 @@
+<svg t="1642509935122" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2677"
+  width="200" height="200">
+  <path
+    d="M864 64H160C107 64 64 107 64 160v704c0 53 43 96 96 96h704c53 0 96-43 96-96V160c0-53-43-96-96-96zM551.6 762.8c0 87.2-51.2 127-125.8 127-67.4 0-106.4-34.8-126.4-77l68.6-41.4c13.2 23.4 25.2 43.2 54.2 43.2 27.6 0 45.2-10.8 45.2-53V475.4h84.2v287.4z m199.2 127c-78.2 0-128.8-37.2-153.4-86l68.6-39.6c18 29.4 41.6 51.2 83 51.2 34.8 0 57.2-17.4 57.2-41.6 0-28.8-22.8-39-61.4-56l-21-9c-60.8-25.8-101-58.4-101-127 0-63.2 48.2-111.2 123.2-111.2 53.6 0 92 18.6 119.6 67.4L800 580c-14.4-25.8-30-36-54.2-36-24.6 0-40.2 15.6-40.2 36 0 25.2 15.6 35.4 51.8 51.2l21 9c71.6 30.6 111.8 62 111.8 132.4 0 75.6-59.6 117.2-139.4 117.2z"
+    p-id="2678" fill="#FF7D00"></path>
+</svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/item-react.svg b/frontend/new-web/src/assets/icons/item-react.svg
new file mode 100755
index 00000000..3a99542f
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/item-react.svg
@@ -0,0 +1,6 @@
+<svg t="1642510099531" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+  p-id="10719" width="200" height="200">
+  <path
+    d="M512 420.736a91.264 91.264 0 0 0 0 182.528 91.264 91.264 0 0 0 0-182.528z m-255.648 272.8l-20.128-5.12C86.112 650.496 0.032 586.112 0.032 511.808s86.112-138.656 236.192-176.608l20.128-5.088 5.664 19.968a995.328 995.328 0 0 0 60.768 158.624l-2.624-5.952 4.32 9.088-4.32 9.088a939.776 939.776 0 0 0-56.352 145.632l-1.792 7.04z m-29.504-311.68c-114.08 32.032-184.096 81.056-184.096 129.952 0 48.864 70.016 97.888 184.096 129.952a1043.552 1043.552 0 0 1 53.184-136.416l-2.752 6.464a973.92 973.92 0 0 1-48.352-122.496l-2.08-7.488z m540.8 311.68l-5.664-20a985.024 985.024 0 0 0-60.8-158.528l2.592 5.888-4.32-9.088 4.32-9.088a942.592 942.592 0 0 0 56.384-145.6l1.792-7.072 5.664-19.968 20.192 5.088c150.048 37.92 236.16 102.304 236.16 176.64s-86.112 138.656-236.16 176.608z m-20.928-181.696a1057.216 1057.216 0 0 1 50.432 129.952c114.144-32.096 184.096-81.12 184.096-129.952 0-48.896-70.016-97.888-184.096-129.952a1037.568 1037.568 0 0 1-53.184 136.384l2.752-6.4zM226.56 381.664l-5.664-19.936C178.688 212.992 191.488 106.4 256 69.216c63.264-36.512 164.864 6.624 271.328 115.872l14.496 14.88-14.496 14.88a1011.2 1011.2 0 0 0-101.184 123.296l-2.176 3.296-5.76 8.224-10.016 0.864a1013.344 1013.344 0 0 0-168.448 27.52l6.976-1.504z m80.896-282.88c-11.424 0-21.536 2.464-30.08 7.392-42.4 24.448-49.92 109.44-20.704 224.128a998.208 998.208 0 0 1 133.76-21.056l4.192-0.32a1066.496 1066.496 0 0 1 88.192-109.248l-0.64 0.704c-66.56-64.8-129.568-101.6-174.72-101.6z m409.12 868.768c-0.032 0-0.032 0 0 0-60.8 0-138.88-45.792-219.904-128.992l-14.496-14.88 14.496-14.88a1005.664 1005.664 0 0 0 101.12-123.328l2.176-3.296 5.76-8.224 9.984-0.864a1015.68 1015.68 0 0 0 168.544-27.456l-6.976 1.472 20.128-5.088 5.728 19.968c42.112 148.64 29.344 255.264-35.168 292.448a100.224 100.224 0 0 1-49.984 13.152h-1.504 0.064z m-174.752-144.256c66.56 64.8 129.568 101.6 174.72 101.6h0.032c11.392 0 21.536-2.464 30.048-7.392 42.4-24.448 49.952-109.472 20.704-224.16a989.856 989.856 0 0 1-133.824 21.056l-4.16 0.32a1063.008 1063.008 0 0 1-88.16 109.312l0.64-0.704z m255.616-441.632l-20.128-5.088c-46.496-12.032-101.6-21.248-158.048-25.792l-3.552-0.224-9.984-0.864-5.76-8.224a1010.24 1010.24 0 0 0-103.584-126.912l0.288 0.32-14.496-14.88 14.496-14.88C603.072 75.904 704.64 32.768 768 69.248c64.512 37.216 77.312 143.776 35.168 292.48z m-168.096-72.768c48.736 4.448 95.008 11.648 137.984 21.376 29.28-114.688 21.728-199.68-20.704-224.128-42.144-24.352-121.376 12.96-204.8 94.208a1068.032 1068.032 0 0 1 85.312 105.248l2.208 3.296zM307.456 967.552h-1.472a100.896 100.896 0 0 1-50.464-13.408l0.48 0.256c-64.512-37.152-77.312-143.744-35.104-292.448l5.632-19.968 20.128 5.088c49.28 12.416 103.648 21.152 161.504 25.984l10.016 0.864 5.728 8.224a1008.672 1008.672 0 0 0 103.648 126.944l-0.32-0.32 14.496 14.88-14.496 14.88c-80.992 83.2-159.072 128.992-219.776 128.992z m-50.784-274.208c-29.28 114.688-21.728 199.712 20.704 224.16 42.112 24.032 121.312-13.024 204.8-94.208a1073.376 1073.376 0 0 1-85.344-105.28l-2.208-3.296a1066.08 1066.08 0 0 1-145.088-22.752l7.168 1.376z m255.328 26.784c-35.104 0-71.2-1.536-107.36-4.512l-10.016-0.864-5.76-8.224a1225.696 1225.696 0 0 1-54.304-84.448l-3.296-6.08a1155.84 1155.84 0 0 1-46.4-87.296l-3.36-7.776-4.256-9.088 4.256-9.088a1233.184 1233.184 0 0 1 53.056-101.152l-3.296 6.112a1292.8 1292.8 0 0 1 57.6-90.528l5.76-8.224 10.016-0.864a1287.264 1287.264 0 0 1 219.52 0.352l-4.8-0.352 9.984 0.864 5.728 8.224a1251.296 1251.296 0 0 1 104.064 177.92l3.328 7.68 4.32 9.088-4.32 9.088a1258.496 1258.496 0 0 1-110.048 189.6l2.656-4-5.728 8.224-9.984 0.864a1314.656 1314.656 0 0 1-107.392 4.512z m-93.728-46.24c63.136 4.736 124.32 4.736 187.52 0a1202.24 1202.24 0 0 0 90.464-154.752l3.232-7.296a1212.512 1212.512 0 0 0-96.384-166.08l2.656 4.032a1257.728 1257.728 0 0 0-191.744 0.256l4.288-0.256a1182.4 1182.4 0 0 0-90.56 154.88l-3.168 7.168a1232.064 1232.064 0 0 0 96.448 166.176l-2.72-4.16z"
+    fill="#61DAFB" p-id="10720"></path>
+</svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/item-vue.svg b/frontend/new-web/src/assets/icons/item-vue.svg
new file mode 100755
index 00000000..386fc7ba
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/item-vue.svg
@@ -0,0 +1,5 @@
+<svg t="1642509868674" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4281"
+  width="200" height="200">
+  <path d="M615.6 123.6h165.5L512 589.7 242.9 123.6H63.5L512 900.4l448.5-776.9z" fill="#41B883" p-id="4282"></path>
+  <path d="M781.1 123.6H615.6L512 303 408.4 123.6H242.9L512 589.7z" fill="#34495E" p-id="4283"></path>
+</svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/java.svg b/frontend/new-web/src/assets/icons/java.svg
new file mode 100644
index 00000000..eaa93dbe
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/java.svg
@@ -0,0 +1 @@
+<svg t="1721534999310" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2348" width="200" height="200"><path d="M558.08 472.064c48.128 53.248-13.312 103.424-13.312 103.424s119.808-61.44 65.536-139.264c-51.2-71.68-91.136-107.52 122.88-232.448 0 1.024-335.872 86.016-175.104 268.288" fill="#FF0000" p-id="2349"></path><path d="M610.304 5.12s101.376 101.376-96.256 258.048C356.352 389.12 478.208 460.8 514.048 543.744 420.864 459.776 354.304 386.048 399.36 317.44 463.872 216.064 651.264 166.912 610.304 5.12" fill="#FF0000" p-id="2350"></path><path d="M720.896 757.76c183.296-95.232 98.304-188.416 39.936-175.104-15.36 3.072-21.504 5.12-21.504 5.12s5.12-8.192 16.384-11.264c117.76-40.96 207.872 120.832-37.888 186.368-1.024 0 2.048-3.072 3.072-5.12m-337.92 38.912s-37.888 21.504 26.624 29.696c76.8 8.192 117.76 8.192 202.752-8.192 0 0 23.552 15.36 53.248 26.624-191.488 80.896-433.152-5.12-282.624-48.128m-23.552-106.496s-43.008 31.744 23.552 37.888c82.944 8.192 149.504 10.24 261.12-13.312 0 0 16.384 16.384 40.96 24.576-231.424 68.608-490.496 5.12-325.632-49.152" fill="#6699FF" p-id="2351"></path><path d="M811.008 876.544s27.648 23.552-31.744 40.96c-111.616 34.816-460.8 45.056-558.08 2.048-34.816-15.36 31.744-35.84 51.2-40.96 21.504-5.12 34.816-3.072 34.816-3.072-38.912-28.672-251.904 52.224-107.52 75.776 390.144 62.464 712.704-28.672 611.328-74.752M400.384 578.56s-178.176 43.008-63.488 56.32c49.152 6.144 146.432 5.12 235.52-3.072 73.728-6.144 147.456-19.456 147.456-19.456s-26.624 11.264-45.056 24.576c-181.248 48.128-530.432 26.624-430.08-23.552 88.064-39.936 155.648-34.816 155.648-34.816" fill="#6699FF" p-id="2352"></path><path d="M418.816 1015.808c176.128 11.264 446.464-6.144 453.632-90.112 0 0-13.312 31.744-146.432 56.32-150.528 27.648-336.896 24.576-446.464 6.144 2.048 1.024 24.576 20.48 139.264 27.648" fill="#6699FF" p-id="2353"></path></svg>
diff --git a/frontend/new-web/src/assets/icons/juejin.svg b/frontend/new-web/src/assets/icons/juejin.svg
new file mode 100644
index 00000000..937ace37
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/juejin.svg
@@ -0,0 +1 @@
+<svg t="1733555774238" class="icon" viewBox="0 0 1316 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="46620" width="128" height="128"><path d="M643.181714 247.698286l154.916572-123.172572L643.181714 0.256 643.072 0l-154.660571 124.269714 154.660571 123.245715 0.109714 0.182857z m0 388.461714h0.109715l399.579428-315.245714-108.361143-87.04-291.218285 229.888h-0.146286l-0.109714 0.146285L351.817143 234.093714l-108.251429 87.04 399.433143 315.136 0.146286-0.146285z m-0.146285 215.552l0.146285-0.146286 534.893715-422.034285 108.397714 87.04-243.309714 192L643.145143 1024 10.422857 525.056 0 516.754286l108.251429-86.893715L643.035429 851.748571z" fill="#1E80FF" p-id="46621"></path></svg>
diff --git a/frontend/new-web/src/assets/icons/language.svg b/frontend/new-web/src/assets/icons/language.svg
new file mode 100644
index 00000000..e754062d
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/language.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="m18.5 10 4.4 11h-2.155l-1.201-3h-4.09l-1.199 3h-2.154L16.5 10h2zM10 2v2h6v2h-1.968a18.221 18.221 0 0 1-3.62 6.301 14.865 14.865 0 0 0 2.335 1.707l-.75 1.878A17.016 17.016 0 0 1 9 13.725a16.677 16.677 0 0 1-6.201 3.548l-.536-1.929a14.7 14.7 0 0 0 5.327-3.042A18.078 18.078 0 0 1 4.767 8h2.24A16.031 16.031 0 0 0 9 10.877a16.165 16.165 0 0 0 2.91-4.876L2 6V4h6V2h2zm7.5 10.885L16.253 16h2.492L17.5 12.885z"/></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/layout_leftbar_close_line.svg b/frontend/new-web/src/assets/icons/layout_leftbar_close_line.svg
new file mode 100644
index 00000000..084c1db0
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/layout_leftbar_close_line.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1770734319809" class="icon" viewBox="0 0 1194 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23510" xmlns:xlink="http://www.w3.org/1999/xlink" width="233.203125" height="200"><path d="M694.857143 109.714286a73.142857 73.142857 0 0 1 73.142857 73.142857v512a73.142857 73.142857 0 0 1-73.142857 73.142857H182.857143a73.142857 73.142857 0 0 1-73.142857-73.142857V182.857143a73.142857 73.142857 0 0 1 73.142857-73.142857zM292.571429 182.857143H182.857143v512h109.714286z m402.285714 0h-329.142857v512h329.142857z m-153.856 152.576a36.571429 36.571429 0 0 1 54.747428 48.274286l-3.035428 3.437714L541.001143 438.857143l51.712 51.712a36.571429 36.571429 0 0 1-48.274286 54.784l-3.437714-3.072-77.568-77.531429a36.571429 36.571429 0 0 1-3.072-48.274285l3.072-3.474286z" p-id="23511"></path></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/layout_leftbar_open_line.svg b/frontend/new-web/src/assets/icons/layout_leftbar_open_line.svg
new file mode 100644
index 00000000..8a9e395a
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/layout_leftbar_open_line.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1770734259884" class="icon" viewBox="0 0 1194 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23359" xmlns:xlink="http://www.w3.org/1999/xlink" width="233.203125" height="200"><path d="M694.857143 109.714286a73.142857 73.142857 0 0 1 73.142857 73.142857v512a73.142857 73.142857 0 0 1-73.142857 73.142857H182.857143a73.142857 73.142857 0 0 1-73.142857-73.142857V182.857143a73.142857 73.142857 0 0 1 73.142857-73.142857zM292.571429 182.857143H182.857143v512h109.714286z m402.285714 0h-329.142857v512h329.142857z m-175.286857 152.576l77.568 77.531428a36.571429 36.571429 0 0 1 0 51.748572l-77.531429 77.568a36.571429 36.571429 0 1 1-51.748571-51.712L519.570286 438.857143l-51.712-51.712a36.571429 36.571429 0 0 1 51.712-51.712" p-id="23360"></path></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/menu-about.svg b/frontend/new-web/src/assets/icons/menu-about.svg
new file mode 100755
index 00000000..424adade
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/menu-about.svg
@@ -0,0 +1 @@
+<svg t="1684652747690" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1922" width="200" height="200"><path d="M0 0m349.090909 0l325.818182 0q349.090909 0 349.090909 349.090909l0 325.818182q0 349.090909-349.090909 349.090909l-325.818182 0q-349.090909 0-349.090909-349.090909l0-325.818182q0-349.090909 349.090909-349.090909Z" fill="#52B852" p-id="1923"></path><path d="M269.346909 581.236364c-3.584-33.338182-2.338909-65.931636 11.52-101.969455 16.279273-43.869091 46.650182-76.241455 85.655273-101.969454 59.112727-39.924364 124.672-63.220364 192.616727-78.650182A727.528727 727.528727 0 0 1 726.644364 279.272727c12.648727 0 22.690909 2.443636 27.729454 15.429818 5.015273 13.009455 0 21.818182-8.843636 30.894546-27.729455 29.672727-37.806545 67.153455-46.650182 105.879273-11.252364 46.312727-22.737455 94.103273-35.188364 140.683636-3.816727 15.429818-12.660364 29.649455-18.920727 43.869091-37.771636 72.285091-99.490909 105.890909-176.314182 114.967273-36.631273 3.898182-72.96 1.198545-107.182545-14.231273a219.857455 219.857455 0 0 1-32.779637-19.374546c-7.68 19.374545-15.069091 38.749091-26.58909 41.192728a24.005818 24.005818 0 0 1-26.554182-14.219637c-1.163636-3.909818-3.816727-10.309818-2.373818-14.219636 5.015273-29.684364 12.683636-43.869091 17.710545-52.945455 30.370909-61.742545 69.154909-101.213091 116.514909-148.282181 16.965818-16.64 58.612364-50.734545 95.243636-69.841455-61.521455 16.896-123.950545 49.512727-187.35709 106.344727-25.611636 23.051636-39.959273 40.704-43.054546 48.791273l-2.653091-12.986182h-0.034909z" fill="#FFFFFF" p-id="1924"></path></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/menu-analyse.svg b/frontend/new-web/src/assets/icons/menu-analyse.svg
new file mode 100755
index 00000000..2a6cb928
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/menu-analyse.svg
@@ -0,0 +1 @@
+<svg t="1684653015168" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2715" width="200" height="200"><path d="M0 0m349.206261 0l325.587478 0q349.206261 0 349.206261 349.206261l0 325.587478q0 349.206261-349.206261 349.206261l-325.587478 0q-349.206261 0-349.206261-349.206261l0-325.587478q0-349.206261 349.206261-349.206261Z" fill="#F96C17" p-id="2716"></path><path d="M649.026783 536.242087C714.462609 536.242087 768 590.825739 768 657.552696c0 66.715826-53.537391 121.310609-118.973217 121.310608-65.446957 0-118.973217-54.594783-118.973218-121.321739 0-66.704696 53.504-121.299478 118.984348-121.299478zM667.614609 256c21.481739 0.066783 38.845217 17.786435 38.92313 39.68v222.130087c-17.842087-9.104696-38.66713-12.132174-59.492174-12.132174-83.277913 0-148.702609 66.715826-148.702608 151.641044 0 33.357913 11.887304 66.715826 29.729391 90.980173H294.912c-21.459478-0.066783-38.845217-17.786435-38.912-39.68v-412.93913c0.066783-21.893565 17.452522-39.624348 38.912-39.68h372.713739z m-2.270609 337.385739l-1.558261 1.78087c-3.962435 4.006957-9.282783 6.433391-15.170782 6.433391a21.292522 21.292522 0 0 1-15.237566-6.500174l-1.491478-1.714087c-2.070261-2.370783-6.110609-3.428174-8.97113-2.31513l-0.222609 0.089043c-0.723478 0.311652-3.328 1.513739-8.236522 4.518957l-0.500869 0.311652c-5.509565 3.450435-7.457391 5.231304-7.457392 5.231304-2.31513 2.092522-3.472696 6.322087-2.582261 9.449739l0.634435 2.259479a25.110261 25.110261 0 0 1-2.348522 17.330087c-2.949565 5.465043-7.635478 9.193739-12.877913 10.852173l-2.137043 0.512c-2.949565 0.712348-5.832348 3.917913-6.377739 7.123479 0 0-0.467478 2.782609-0.478609 9.828174v0.300521c0 7.268174 0.478609 10.128696 0.478609 10.128696 0.545391 3.205565 3.405913 6.41113 6.377739 7.123478l2.081391 0.512c5.253565 1.669565 9.961739 5.376 12.911305 10.874435a25.043478 25.043478 0 0 1 2.348521 17.363478l-0.612174 2.203826c-0.890435 3.094261 0.26713 7.346087 2.593392 9.472 0 0 2.025739 1.836522 7.724521 5.36487l0.256 0.155826c5.197913 3.216696 7.791304 4.34087 8.325566 4.563478l0.044521 0.022261 0.055653 0.022261c2.871652 1.113043 6.878609 0.055652 8.97113-2.31513l1.469217-1.691826c3.984696-4.029217 9.349565-6.489043 15.248696-6.489044 5.921391 0 11.308522 2.482087 15.259826 6.522435l1.480348 1.680696c2.05913 2.381913 6.099478 3.439304 8.96 2.32626 0 0 2.57113-1.001739 8.45913-4.608 5.89913-3.639652 7.94713-5.520696 7.947131-5.520695 2.337391-2.092522 3.483826-6.355478 2.604522-9.472l-0.645566-2.29287a24.954435 24.954435 0 0 1 2.359653-17.285565c2.938435-5.453913 7.646609-9.20487 12.900173-10.863304l2.081392-0.523131c2.949565-0.712348 5.843478-3.917913 6.377739-7.123478 0 0 0.478609-2.860522 0.478609-10.128696-0.022261-6.678261-0.434087-9.650087-0.50087-10.095304v-0.055652c-0.545391-3.172174-3.405913-6.41113-6.377739-7.123479l-2.226087-0.545391a22.394435 22.394435 0 0 1-12.8-10.818782 25.043478 25.043478 0 0 1-2.348522-17.363479l0.701218-2.226087c0.879304-3.094261-0.278261-7.357217-2.604522-9.472 0 0-2.081391-1.892174-7.969391-5.520695-5.89913-3.606261-8.43687-4.608-8.43687-4.608-2.860522-1.113043-6.878609-0.055652-8.96 2.31513z m-16.740174 31.376696a34.148174 34.148174 0 0 1 34.125913 34.148174 34.170435 34.170435 0 0 1-34.125913 34.114782 34.125913 34.125913 0 1 1 0-68.262956z m-36.340869-289.636174h-57.6c-11.52 0-19.2 7.312696-19.2 18.287304s7.68 18.287304 19.2 18.287305h11.52l-55.674435 53.025391-69.12-65.825391a21.281391 21.281391 0 0 0-13.445565-5.487305c-5.754435 0-9.594435 1.825391-15.36 5.487305l-80.64 76.8c-7.68 7.312696-7.68 18.287304 0 25.6 7.68 7.312696 19.2 7.312696 26.88 0l69.12-64 67.205565 64c3.84 3.650783 9.594435 5.487304 15.36 5.487304 5.754435 0 9.594435-1.836522 15.36-5.487304l67.194435-64v10.974608c0 10.963478 7.68 18.276174 19.2 18.276174 11.52 0 19.2-9.138087 19.2-18.276174v-54.861913c0-10.974609-9.594435-18.287304-19.2-18.287304z" fill="#FFFFFF" p-id="2717"></path></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/menu-crud.svg b/frontend/new-web/src/assets/icons/menu-crud.svg
new file mode 100755
index 00000000..a55d0866
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/menu-crud.svg
@@ -0,0 +1 @@
+<svg t="1684652927115" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2556" width="200" height="200"><path d="M0 0m349.090909 0l325.818182 0q349.090909 0 349.090909 349.090909l0 325.818182q0 349.090909-349.090909 349.090909l-325.818182 0q-349.090909 0-349.090909-349.090909l0-325.818182q0-349.090909 349.090909-349.090909Z" fill="#62A8FC" p-id="2557"></path><path d="M751.371636 631.691636A39.901091 39.901091 0 0 1 791.272727 671.581091v79.790545A39.901091 39.901091 0 0 1 751.371636 791.272727H272.64A39.901091 39.901091 0 0 1 232.727273 751.371636v-79.790545a39.901091 39.901091 0 0 1 39.901091-39.889455H751.36z m-19.944727 79.790546H571.845818a19.944727 19.944727 0 0 0-3.595636 39.575273l3.595636 0.314181h159.581091a19.944727 19.944727 0 0 0 0-39.889454z m19.944727-279.272727A39.901091 39.901091 0 0 1 791.272727 472.087273v79.802182a39.901091 39.901091 0 0 1-39.901091 39.889454H272.64A39.901091 39.901091 0 0 1 232.727273 551.912727V472.087273a39.901091 39.901091 0 0 1 39.901091-39.889455H751.36z m-418.909091 79.790545h-39.889454a19.944727 19.944727 0 0 0-3.595636 39.575273l3.595636 0.325818h39.889454a19.944727 19.944727 0 1 0 0-39.901091z m199.482182 0H412.276364a19.944727 19.944727 0 0 0-3.595637 39.575273l3.595637 0.325818h119.68a19.944727 19.944727 0 1 0 0-39.901091z m219.426909-279.272727A39.901091 39.901091 0 0 1 791.272727 272.628364v79.790545a39.901091 39.901091 0 0 1-39.901091 39.889455H272.64A39.901091 39.901091 0 0 1 232.727273 352.418909v-79.790545A39.901091 39.901091 0 0 1 272.628364 232.727273H751.36z m-458.798545 79.790545a19.944727 19.944727 0 1 0 0 39.901091 19.944727 19.944727 0 0 0 0-39.901091z m79.790545 0a19.944727 19.944727 0 1 0 0 39.901091 19.944727 19.944727 0 0 0 0-39.901091z" fill="#FFFFFF" p-id="2558"></path></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/menu-detail.svg b/frontend/new-web/src/assets/icons/menu-detail.svg
new file mode 100755
index 00000000..c7c5dc8c
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/menu-detail.svg
@@ -0,0 +1 @@
+<svg t="1768298799288" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20217" width="200" height="200"><path d="M716.8 0c169.664 0 307.2 137.536 307.2 307.2v409.6c0 169.664-137.536 307.2-307.2 307.2H307.2C137.536 1024 0 886.464 0 716.8V307.2C0 137.536 137.536 0 307.2 0h409.6z m26.7904 281.6H267.7504C216.8064 281.6 192 304.2816 192 349.6192v325.248c0 45.3248 23.2704 66.7648 72.9472 66.7648h72.9472l-8.9728 69.2992a22.3616 22.3616 0 0 0 13.3504 19.968 27.5072 27.5072 0 0 0 25.8944-1.1008l144.7936-88.1664h233.4336c50.5216 0 72.9472-21.44 72.9472-66.7776V349.6192c0-45.3504-25.2544-68.0192-75.7504-68.0192z m-267.904 258.4448c13.696-0.2176 25.7536 8.96 29.184 22.2208a29.184 29.184 0 0 1-28.3776 36.1472H353.28a29.696 29.696 0 0 1-29.184-22.2208 29.184 29.184 0 0 1 28.3904-36.1472h123.2z m182.3744-124.0064c13.6832-0.2176 25.7408 8.96 29.184 22.2208a29.184 29.184 0 0 1-28.3904 36.1344H353.28a29.696 29.696 0 0 1-29.184-22.208 29.184 29.184 0 0 1 28.3904-36.1472H658.048z" fill="#1677FF" p-id="20218"></path></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/menu-document.svg b/frontend/new-web/src/assets/icons/menu-document.svg
new file mode 100755
index 00000000..2ca37bea
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/menu-document.svg
@@ -0,0 +1,6 @@
+<svg t="1732257910580" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+  p-id="19036" width="64" height="64">
+  <path
+    d="M716.8 0c169.664 0 307.2 137.536 307.2 307.2v409.6c0 169.664-137.536 307.2-307.2 307.2H307.2C137.536 1024 0 886.464 0 716.8V307.2C0 137.536 137.536 0 307.2 0h409.6z m-10.432 192h-395.136c-39.2704 0-71.232 31.7568-71.232 70.7968v498.3936c0 39.04 31.9488 70.8096 71.232 70.8096h219.6224c136.064 0 246.7456-110.0288 246.7456-245.2608V262.784c0-39.04-31.9488-70.7968-71.232-70.7968zM499.0976 550.4c12.4288 0 22.5024 11.4688 22.5024 25.6s-10.0736 25.6-22.5024 25.6h-108.5952l-1.7664-0.0768c-11.5968-1.024-20.736-12.0576-20.736-25.5232 0-14.144 10.0736-25.6 22.5024-25.6z m100.7744-153.6c13.3248 0 24.128 11.4688 24.128 25.6s-10.8032 25.6-24.128 25.6h-207.744l-1.8816-0.0768c-12.4544-1.024-22.2464-12.0576-22.2464-25.5232 0-14.1312 10.8032-25.6 24.128-25.6z"
+    fill="#1677FF" p-id="19037"></path>
+</svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/menu-error.svg b/frontend/new-web/src/assets/icons/menu-error.svg
new file mode 100755
index 00000000..5aa48926
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/menu-error.svg
@@ -0,0 +1,9 @@
+<svg t="1732686590792" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3153"
+  width="200" height="200">
+  <path
+    d="M0 0m365.714286 0l292.571428 0q365.714286 0 365.714286 365.714286l0 292.571428q0 365.714286-365.714286 365.714286l-292.571428 0q-365.714286 0-365.714286-365.714286l0-292.571428q0-365.714286 365.714286-365.714286Z"
+    fill="#EA4D2C" p-id="3154"></path>
+  <path
+    d="M526.628571 219.428571a226.084571 226.084571 0 0 0-159.158857 64.219429 219.355429 219.355429 0 0 0-65.097143 155.428571v299.885715h446.025143v-299.885715c0-58.514286-23.625143-114.541714-65.389714-155.428571A225.206857 225.206857 0 0 0 526.628571 219.428571z m-18.432 447.634286L501.76 521.654857H391.753143l144.384-182.125714 12.288 117.321143 104.448 3.657143L506.953143 667.062857h1.243428zM219.428571 800.256a33.499429 33.499429 0 0 1 33.499429-33.792h547.401143a34.377143 34.377143 0 0 1 23.698286 9.874286 35.035429 35.035429 0 0 1 9.801142 23.917714 33.499429 33.499429 0 0 1-33.499428 33.499429H252.928A33.499429 33.499429 0 0 1 219.428571 800.329143z"
+    fill="#FFFFFF" p-id="3155"></path>
+</svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/menu-example.svg b/frontend/new-web/src/assets/icons/menu-example.svg
new file mode 100755
index 00000000..7c62fe58
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/menu-example.svg
@@ -0,0 +1 @@
+<svg t="1768298850318" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25241" width="200" height="200"><path d="M0 0m349.090909 0l325.818182 0q349.090909 0 349.090909 349.090909l0 325.818182q0 349.090909-349.090909 349.090909l-325.818182 0q-349.090909 0-349.090909-349.090909l0-325.818182q0-349.090909 349.090909-349.090909Z" fill="#3271FD" p-id="25242"></path><path d="M718.661818 232.727273a22.341818 22.341818 0 0 1 22.283637 20.677818l0.058181 1.664 0.011637 328.145454a61.463273 61.463273 0 0 1 0 114.501819l-0.011637 71.214545a22.341818 22.341818 0 0 1-44.625454 1.664l-0.058182-1.664v-71.214545a61.463273 61.463273 0 0 1 0-114.501819v-328.145454c0-12.334545 10.007273-22.341818 22.341818-22.341818z m-424.494545 0a22.341818 22.341818 0 0 1 22.283636 20.677818l0.058182 1.664v328.145454a61.463273 61.463273 0 0 1 0 114.501819v71.214545a22.341818 22.341818 0 0 1-44.625455 1.664l-0.058181-1.664-0.011637-71.214545a61.463273 61.463273 0 0 1 0-114.501819l0.011637-328.145454c0-12.334545 10.007273-22.341818 22.341818-22.341818z m212.247272 0a22.341818 22.341818 0 0 1 22.283637 20.677818l0.058182 1.664v81.221818a83.816727 83.816727 0 0 1 0 161.512727v271.127273a22.341818 22.341818 0 0 1-44.625455 1.664l-0.058182-1.664v-271.127273a83.816727 83.816727 0 0 1 0-161.512727v-81.221818c0-12.334545 10.007273-22.341818 22.341818-22.341818z" fill="#FFFFFF" p-id="25243"></path></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/menu-file.svg b/frontend/new-web/src/assets/icons/menu-file.svg
new file mode 100755
index 00000000..d2a1c8a0
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/menu-file.svg
@@ -0,0 +1 @@
+<svg t="1684652847211" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2238" width="200" height="200"><path d="M0 0m372.363636 0l279.272728 0q372.363636 0 372.363636 372.363636l0 279.272728q0 372.363636-372.363636 372.363636l-279.272728 0q-372.363636 0-372.363636-372.363636l0-279.272728q0-372.363636 372.363636-372.363636Z" fill="#F7A647" p-id="2239"></path><path d="M232.727273 303.872C232.727273 290.327273 243.781818 279.272727 257.326545 279.272727h148.631273c5.620364 0 10.984727 2.292364 14.848 6.283637l50.897455 52.805818c1.186909 1.233455 2.210909 2.594909 3.037091 4.049454h259.874909c31.138909 0 56.657455 25.460364 56.657454 56.610909V688.058182c0 31.150545-25.518545 56.669091-56.657454 56.669091H289.396364C258.245818 744.727273 232.727273 719.208727 232.727273 688.058182V303.872zM726.702545 556.218182h-239.825454a10.216727 10.216727 0 0 0-10.205091 10.205091v25.390545c0 5.620364 4.584727 10.205091 10.205091 10.205091h239.825454a10.216727 10.216727 0 0 0 10.205091-10.205091v-25.390545a10.216727 10.216727 0 0 0-10.205091-10.205091z m-0.058181-87.691637h-239.825455a10.216727 10.216727 0 0 0-10.205091 10.205091h-0.069818v25.390546c0 5.632 4.573091 10.216727 10.205091 10.216727h239.895273a10.216727 10.216727 0 0 0 10.205091-10.216727V478.72a10.216727 10.216727 0 0 0-10.205091-10.205091z" fill="#FFFFFF" p-id="2240"></path></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/menu-form.svg b/frontend/new-web/src/assets/icons/menu-form.svg
new file mode 100755
index 00000000..e9c9065f
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/menu-form.svg
@@ -0,0 +1 @@
+<svg t="1684652892745" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2397" width="200" height="200"><path d="M0 0m349.090909 0l325.818182 0q349.090909 0 349.090909 349.090909l0 325.818182q0 349.090909-349.090909 349.090909l-325.818182 0q-349.090909 0-349.090909-349.090909l0-325.818182q0-349.090909 349.090909-349.090909Z" fill="#F7A647" p-id="2398"></path><path d="M663.272727 244.363636a46.545455 46.545455 0 0 1 46.545455 46.545455v84.026182L465.501091 619.264a64 64 0 0 0-2.024727 88.389818l2.024727 2.117818a64 64 0 0 0 88.389818 2.024728l2.117818-2.024728L709.818182 555.950545V733.090909a46.545455 46.545455 0 0 1-46.545455 46.545455H279.272727a46.545455 46.545455 0 0 1-46.545454-46.545455V290.909091a46.545455 46.545455 0 0 1 46.545454-46.545455h384z m108.101818 160.046546a29.090909 29.090909 0 0 1 0.93091 39.633454l-1.44291 1.512728-238.545454 232.727272a29.090909 29.090909 0 0 1-42.065455-40.145454l1.431273-1.512727 238.545455-232.727273a29.090909 29.090909 0 0 1 41.134545 0.512zM401.454545 581.818182H314.181818l-1.745454 0.058182A23.272727 23.272727 0 0 0 314.181818 628.363636h87.272727l1.745455-0.058181A23.272727 23.272727 0 0 0 401.454545 581.818182z m64-110.545455H314.181818l-1.745454 0.058182A23.272727 23.272727 0 0 0 314.181818 517.818182h151.272727l1.745455-0.058182A23.272727 23.272727 0 0 0 465.454545 471.272727z m58.181819-116.363636H314.181818l-1.745454 0.058182A23.272727 23.272727 0 0 0 314.181818 401.454545h209.454546l1.745454-0.058181A23.272727 23.272727 0 0 0 523.636364 354.909091z" fill="#FFFFFF" p-id="2399"></path></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/menu-gitee.svg b/frontend/new-web/src/assets/icons/menu-gitee.svg
new file mode 100755
index 00000000..0e55b981
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/menu-gitee.svg
@@ -0,0 +1 @@
+<svg t="1684563092128" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1590" width="200" height="200"><path d="M512 1024C229.222 1024 0 794.778 0 512S229.222 0 512 0s512 229.222 512 512-229.222 512-512 512z m259.149-568.883h-290.74a25.293 25.293 0 0 0-25.292 25.293l-0.026 63.206c0 13.952 11.315 25.293 25.267 25.293h177.024c13.978 0 25.293 11.315 25.293 25.267v12.646a75.853 75.853 0 0 1-75.853 75.853h-240.23a25.293 25.293 0 0 1-25.267-25.293V417.203a75.853 75.853 0 0 1 75.827-75.853h353.946a25.293 25.293 0 0 0 25.267-25.292l0.077-63.207a25.293 25.293 0 0 0-25.268-25.293H417.152a189.62000001 189.62000001 0 0 0-189.62000001 189.645V771.15c0 13.977 11.31600001 25.293 25.29400001 25.293h372.94a170.65 170.65 0 0 0 170.65-170.65V480.384a25.293 25.293 0 0 0-25.293-25.267z" fill="#C71D23" p-id="1591"></path></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/menu-home.svg b/frontend/new-web/src/assets/icons/menu-home.svg
new file mode 100755
index 00000000..97ff012a
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/menu-home.svg
@@ -0,0 +1 @@
+<svg t="1684562716410" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1057" width="200" height="200"><path d="M1024 512c0 282.7776-229.2224 512-512 512S0 794.7776 0 512 229.2224 0 512 0s512 229.2224 512 512z" fill="#2962FF" p-id="1058"></path><path d="M493.5936 234.9056a39.3984 39.3984 0 0 1 36.608 0l1.9584 1.024 1.6384 1.536 243.7376 224.512a45.4144 45.4144 0 0 1 13.7344 49.024 36.8896 36.8896 0 0 1-35.6096 23.168H704V716.8a51.2 51.2 0 0 1-51.2 51.2h-76.8v-115.2a64 64 0 0 0-128 0v115.2h-76.8a51.2 51.2 0 0 1-51.2-51.2V534.1696h-54.2336a36.6336 36.6336 0 0 1-33.024-23.552 44.9536 44.9536 0 0 1 13.9136-48.896l244.992-225.792z" fill="#FFFFFF" p-id="1059"></path></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/menu-layout.svg b/frontend/new-web/src/assets/icons/menu-layout.svg
new file mode 100755
index 00000000..b31cd2f9
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/menu-layout.svg
@@ -0,0 +1,21 @@
+<svg t="1742293755193" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+  p-id="35074" width="64" height="64">
+  <path
+    d="M1023.910943 511.999898c5.11911 317.794367-194.116663 516.825376-511.91103 511.911029-317.794367 4.914346-516.825376-194.116663-511.91103-511.911029C-4.825463 194.20553 194.205546-4.825478 511.999913 0.088868c317.794367-4.914346 516.825376 194.116663 511.91103 511.91103z"
+    fill="#3377FF" p-id="35075"></path>
+  <path
+    d="M1022.477592 566.671996C1006.915497 340.40732 852.318366 201.16752 614.382119 204.85328c-254.112635-4.095288-413.624112 155.416189-409.528824 409.528824-3.890524 237.936247 135.554041 392.533378 361.613952 408.095473 268.036615-16.381153 439.629192-187.97373 456.010345-455.805581z"
+    fill="#336DFF" p-id="35076"></path>
+  <path
+    d="M1015.515602 629.944199C985.824762 491.523456 876.480566 407.160519 716.764325 409.617692c-190.635668-3.071466-310.218084 116.51095-307.146618 307.146618-2.457173 159.716241 81.905765 269.060437 220.121743 298.751277 211.112109-34.400421 351.375731-174.664043 385.776152-385.571388z"
+    fill="#3364FF" p-id="35077"></path>
+  <path
+    d="M997.701098 705.707031C964.734028 646.734881 902.076118 613.153517 819.146531 614.382104c-127.1587-2.047644-206.812056 77.605712-204.764412 204.764412-1.433351 82.929587 32.352777 145.587497 91.120163 178.554567a431.233852 431.233852 0 0 0 292.198816-291.994052z"
+    fill="#335AFF" p-id="35078"></path>
+  <path
+    d="M593.905678 225.329721h163.811529a61.429324 61.429324 0 0 1 61.429324 61.429323v245.717295a20.476441 20.476441 0 0 1-20.476441 20.476441H593.905678a20.476441 20.476441 0 0 1-20.476441-20.476441V245.806162a20.476441 20.476441 0 0 1 20.476441-20.476441z"
+    fill="#FFFFFF" p-id="35079"></path>
+  <path
+    d="M593.905678 614.382104h204.764412a20.476441 20.476441 0 0 1 20.476441 20.476441v102.382206a61.429324 61.429324 0 0 1-61.429324 61.429323h-163.811529a20.476441 20.476441 0 0 1-20.476441-20.476441v-143.335088a20.476441 20.476441 0 0 1 20.476441-20.476441zM266.282619 225.329721h225.240853a20.476441 20.476441 0 0 1 20.476441 20.476441v532.387471a20.476441 20.476441 0 0 1-20.476441 20.476441H266.282619a61.429324 61.429324 0 0 1-61.429324-61.429323V286.759044a61.429324 61.429324 0 0 1 61.429324-61.429323z"
+    fill="#80AAFF" p-id="35080"></path>
+</svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/menu-multi.svg b/frontend/new-web/src/assets/icons/menu-multi.svg
new file mode 100755
index 00000000..7a5be39e
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/menu-multi.svg
@@ -0,0 +1,6 @@
+<svg t="1732326712933" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+  p-id="10809" width="64" height="64">
+  <path
+    d="M716.8 0c169.664 0 307.2 137.536 307.2 307.2v409.6c0 169.664-137.536 307.2-307.2 307.2H307.2C137.536 1024 0 886.464 0 716.8V307.2C0 137.536 137.536 0 307.2 0h409.6zM510.1312 196.8c-70.6944 0-128 57.3056-128 128 0 62.4384 44.7104 114.4448 103.872 125.7344v41.0112h-106.8288l-2.7008 0.064c-38.72 1.5104-69.6704 35.2896-69.6704 76.7488v19.6224a115.2128 115.2128 0 1 0 48.256 5.504v-25.1264l0.064-1.92c0.9216-13.2352 11.3408-23.68 24.064-23.68h264.8448l1.792 0.064c12.4928 0.9856 22.336 12.032 22.336 25.536v24.1664a115.2 115.2 0 1 0 48.256-4.224v0.0128-19.968l-0.064-2.8672c-1.4208-41.088-33.2544-73.92-72.32-73.92H537.216V449.92c57.6896-12.4288 100.928-63.744 100.928-125.1328 0-70.6944-57.3056-128-128-128z"
+    fill="#F3C03A" p-id="10810"></path>
+</svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/menu-result.svg b/frontend/new-web/src/assets/icons/menu-result.svg
new file mode 100755
index 00000000..7807e624
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/menu-result.svg
@@ -0,0 +1,9 @@
+<svg t="1732686715618" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3453"
+  width="200" height="200">
+  <path
+    d="M273.066667 0h477.866666c182.050133 0 273.066667 91.016533 273.066667 273.066667v477.866666c0 182.050133-91.016533 273.066667-273.066667 273.066667H273.066667C91.016533 1024 0 932.983467 0 750.933333V273.066667C0 91.016533 91.016533 0 273.066667 0z"
+    fill="#32B357" p-id="3454"></path>
+  <path
+    d="M273.066667 802.133333a17.066667 17.066667 0 0 1-17.066667-17.066666v-34.133334a17.066667 17.066667 0 0 1 17.066667-17.066666h477.866666a17.066667 17.066667 0 0 1 17.066667 17.066666v34.133334a17.066667 17.066667 0 0 1-17.066667 17.066666H273.066667z m-4.949334-102.4a12.151467 12.151467 0 0 1-12.117333-12.202666v-64.375467a37.973333 37.973333 0 0 1 37.8368-38.144h95.914667a49.186133 49.186133 0 0 0 48.827733-45.346133c5.3248-69.307733-68.7616-102.4-68.7616-187.460267C369.8176 280.098133 424.277333 221.866667 512 221.866667s142.250667 58.146133 142.250667 130.338133c0 85.009067-74.103467 118.152533-68.744534 187.460267a49.1008 49.1008 0 0 0 48.810667 45.346133h95.8464A38.024533 38.024533 0 0 1 768 623.138133v64.375467a12.1344 12.1344 0 0 1-12.100267 12.202667L268.117333 699.733333z"
+    fill="#FFFFFF" p-id="3455"></path>
+</svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/menu-system.svg b/frontend/new-web/src/assets/icons/menu-system.svg
new file mode 100755
index 00000000..7d220b30
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/menu-system.svg
@@ -0,0 +1 @@
+<svg t="1684562805352" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1365" width="200" height="200"><path d="M1024 512c0 282.7776-229.2224 512-512 512S0 794.7776 0 512 229.2224 0 512 0s512 229.2224 512 512z" fill="#2962FF" p-id="1366"></path><path d="M760 433.1392a73.5744 73.5744 0 0 1-52.992-36.0576 74.7264 74.7264 0 0 1-5.0176-64.256 35.008 35.008 0 0 0-10.3296-39.168 276.3776 276.3776 0 0 0-82.5984-48.256 34.56 34.56 0 0 0-39.2448 10.9696A73.1904 73.1904 0 0 1 512 284.7872a73.1904 73.1904 0 0 1-57.8176-28.416 34.56 34.56 0 0 0-39.2448-10.9824 277.6064 277.6064 0 0 0-76.9664 43.5328 35.3792 35.3792 0 0 0-10.88 40.32 74.3296 74.3296 0 0 1-5.1712 66.2016 73.152 73.152 0 0 1-55.8464 35.2384 34.8416 34.8416 0 0 0-30.4128 28.1984 273.216 273.216 0 0 0-1.6896 97.472 34.8544 34.8544 0 0 0 30.592 29.3248 73.1776 73.1776 0 0 1 56.576 36.5952 74.3424 74.3424 0 0 1 3.1232 67.6864 34.624 34.624 0 0 0 9.5744 41.2544 278.4256 278.4256 0 0 0 81.856 47.5008c3.8016 1.3312 7.808 2.048 11.8272 2.0864a34.4576 34.4576 0 0 0 28.16-14.7584 72.4864 72.4864 0 0 1 60.0704-31.7952 73.3952 73.3952 0 0 1 58.9568 29.9008c9.344 12.672 25.9968 17.408 40.5504 11.5456a281.1392 281.1392 0 0 0 75.0848-45.2352 35.2 35.2 0 0 0 10.1376-39.936c-8.9472-21.3632-7.424-45.7216 4.1344-65.792a73.1904 73.1904 0 0 1 54.6304-36.224 34.8544 34.8544 0 0 0 29.4784-28.7616c3.008-15.7824 4.6464-31.808 4.8768-47.872 0-16.96-1.5616-33.8816-4.6976-50.5344a34.4832 34.4832 0 0 0-28.9024-28.1984z m-154.1376 78.72c0 52.2752-42.0224 94.6304-93.8624 94.6304-51.84 0-93.8624-42.368-93.8624-94.6176 0-52.2624 42.0224-94.6304 93.8624-94.6304 51.84 0 93.8624 42.368 93.8624 94.6304z" fill="#FFFFFF" p-id="1367"></path></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/menu-table.svg b/frontend/new-web/src/assets/icons/menu-table.svg
new file mode 100755
index 00000000..404a0f69
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/menu-table.svg
@@ -0,0 +1 @@
+<svg t="1684562826195" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1673" width="200" height="200"><path d="M1024 512c0 282.7776-229.2224 512-512 512S0 794.7776 0 512 229.2224 0 512 0s512 229.2224 512 512z" fill="#2962FF" p-id="1674"></path><path d="M486.4 537.6v166.4a38.4 38.4 0 0 1-38.4 38.4H320a38.4 38.4 0 0 1-38.4-38.4V576a38.4 38.4 0 0 1 38.4-38.4h166.4z m217.6 0a38.4 38.4 0 0 1 38.4 38.4v128a38.4 38.4 0 0 1-38.4 38.4H576a38.4 38.4 0 0 1-38.4-38.4V537.6h166.4zM448 281.6a38.4 38.4 0 0 1 38.4 38.4v166.4H320a38.4 38.4 0 0 1-38.4-38.4V320a38.4 38.4 0 0 1 38.4-38.4h128z m256 0a38.4 38.4 0 0 1 38.4 38.4v128a38.4 38.4 0 0 1-38.4 38.4H537.6V320a38.4 38.4 0 0 1 38.4-38.4h128z" fill="#FFFFFF" p-id="1675"></path></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/menu-test.svg b/frontend/new-web/src/assets/icons/menu-test.svg
new file mode 100755
index 00000000..5fe46944
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/menu-test.svg
@@ -0,0 +1 @@
+<svg t="1695043461790" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20099" width="200" height="200"><path d="M512 0A512 512 0 1 1 0 512 512 512 0 0 1 512 0z" fill="#8967FC" p-id="20100"></path><path d="M523.615086 204.8l254.741943 92.935314a22.908343 22.908343 0 0 1 16.091428 22.1184v171.841829c0 204.419657-222.676114 294.209829-277.167543 322.106514a22.601143 22.601143 0 0 1-20.304457 0C442.382629 785.92 234.057143 697.080686 234.057143 492.982857V320.468114a23.6544 23.6544 0 0 1 15.652571-22.045257L508.094171 204.8h15.520915z m-9.406172 152.853943a76.419657 76.419657 0 0 0-25.117257 148.611657 23.317943 23.317943 0 0 0-0.351086 4.242286V637.805714a25.468343 25.468343 0 0 0 50.936686 0v-127.268571a22.396343 22.396343 0 0 0-0.380343-4.213029 76.463543 76.463543 0 0 0-25.058743-148.640914z" fill="#FFFFFF" p-id="20101"></path></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/menu.svg b/frontend/new-web/src/assets/icons/menu.svg
new file mode 100644
index 00000000..f5875d36
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/menu.svg
@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M374.272 440.832H127.488c-33.792 0-61.44-27.648-61.44-61.44V132.608c0-33.792 27.648-61.44 61.44-61.44h247.296c33.792 0 61.44 27.648 61.44 61.44v247.296c-.512 33.792-27.648 60.928-61.952 60.928zM127.488 132.608v247.296h247.296V132.608H127.488zM762.88 492.032c-16.384 0-31.744-6.144-43.52-17.92L544.768 299.52c-11.776-11.776-17.92-27.136-17.92-43.52s6.144-31.744 17.92-43.52L719.36 37.888c11.776-11.776 27.136-17.92 43.52-17.92s31.744 6.144 43.52 17.92L980.992 212.48c11.776 11.776 17.92 27.136 17.92 43.52s-6.144 31.744-17.92 43.52L806.4 474.112c-11.776 11.776-27.136 17.92-43.52 17.92zm0-410.624L588.288 256 762.88 430.592 937.472 256 762.88 81.408zM374.272 952.832H127.488c-33.792 0-61.44-27.648-61.44-61.44V644.096c0-33.792 27.648-61.44 61.44-61.44h247.296c33.792 0 61.44 27.648 61.44 61.44v247.296c-.512 34.304-27.648 61.44-61.952 61.44zM127.488 644.608v247.296h247.296V644.608H127.488zm758.784 308.224H638.976c-33.792 0-61.44-27.648-61.44-61.44V644.096c0-33.792 27.648-61.44 61.44-61.44h247.296c33.792 0 61.44 27.648 61.44 61.44v247.296c0 34.304-27.136 61.44-61.44 61.44zM639.488 644.608v247.296h247.296V644.608H639.488z"/></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/message.svg b/frontend/new-web/src/assets/icons/message.svg
new file mode 100644
index 00000000..deacdc33
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/message.svg
@@ -0,0 +1 @@
+<svg t="1719845783644" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="277659" width="200" height="200"><path d="M392.297931 841.021793a130.01269 128.635586 90 1 0 257.271172 0 130.01269 128.635586 90 1 0-257.271172 0Z" fill="#FFD08D" p-id="277660"></path><path d="M456.174345 52.965517m50.458483 0l-0.035311 0q50.458483 0 50.458483 50.458483l0 59.568552q0 50.458483-50.458483 50.458482l0.035311 0q-50.458483 0-50.458483-50.458482l0-59.568552q0-50.458483 50.458483-50.458483Z" fill="#FFD293" p-id="277661"></path><path d="M520.933517 1006.344828c-90.641655 0-163.945931-74.081103-163.945931-165.323035 0-91.206621 73.304276-165.323034 163.945931-165.323034 90.606345 0 163.945931 74.116414 163.945931 165.323034 0 91.241931-73.339586 165.323034-163.945931 165.323035z m0-70.62069c51.447172 0 93.325241-42.301793 93.325242-94.702345 0-52.365241-41.878069-94.702345-93.325242-94.702345-51.482483 0-93.325241 42.337103-93.325241 94.702345 0 52.400552 41.842759 94.702345 93.325241 94.702345z" fill="#FCA100" p-id="277662"></path><path d="M506.632828 88.275862a15.148138 15.148138 0 0 0-15.148138 15.148138v59.603862a15.148138 15.148138 0 0 0 30.296276 0V103.424a15.148138 15.148138 0 0 0-15.183449-15.148138z m85.768827 15.148138v59.603862a85.768828 85.768828 0 1 1-171.537655 0V103.424a85.768828 85.768828 0 1 1 171.537655 0z" fill="#FB9C00" p-id="277663"></path><path d="M177.893517 494.344828c0-183.472552 147.173517-332.270345 328.739311-332.270345 181.530483 0 346.394483 148.797793 346.394482 332.270345v260.025379l100.034207 129.977379H77.85931l100.034207-129.977379V494.344828z" fill="#FFA300" p-id="277664"></path></svg>
diff --git a/frontend/new-web/src/assets/icons/monitor.svg b/frontend/new-web/src/assets/icons/monitor.svg
new file mode 100644
index 00000000..f153b9c5
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/monitor.svg
@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><defs><style>@font-face{font-family:rbicon;src:url(chrome-extension://dipiagiiohfljcicegpgffpbnjmgjcnf/fonts/rbicon.woff2) format(&quot;woff2&quot;);font-weight:400;font-style:normal}</style></defs><path d="M64 64v576h832V64H64zM0 0h960v704H0V0z"/><path d="M192 896h576v64H192zm256-256h64v256h-64zm31.232-78.396 309.99-348.33-47.803-42.548-259.567 291.67-177.895-222.387L163.21 438.605l52.224 37.009 91.622-129.28z"/></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/project.svg b/frontend/new-web/src/assets/icons/project.svg
new file mode 100644
index 00000000..eaf6a122
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/project.svg
@@ -0,0 +1 @@
+<svg t="1719844718926" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="266272" width="200" height="200"><path d="M138.0173018 383.04044608h747.9653964c7.09277447 0 12.89595271-5.80317818 12.89595812-12.89595273v-64.47977419c0-28.37110348-23.21271811-51.58382158-51.58382153-51.58382161H497.81445089c-24.50231446 0-47.71503251-11.60636172-62.54538509-31.59508902l-24.50231442-33.52948343c-14.83034722-19.98873261-38.04306533-31.59508889-62.54537971-31.59509427h-145.72429566c-42.55665253 0-77.37573228 34.81907982-77.37573233 77.37573236v135.40753016c0 7.09277447 5.80317818 12.89595271 12.89595812 12.89595273zM885.9826982 415.2803386h-747.9653964c-7.09277447 0-12.89595271 5.80317818-12.89595812 12.89595272V787.97344057c0 42.55665253 34.81907982 77.37573228 77.37573233 77.37573223l619.00584798 1.28959637c42.55665253 0 77.37573228-34.81907982 77.37573233-77.37573236v-361.08674549c0-7.09277447-5.80317818-12.89595271-12.89595812-12.89595272z m-606.1098899 310.14771686c-1.28959636 1.93439451-3.22399088 3.86878903-5.8031835 5.80318347-32.88468534 20.63353074-67.05896691-13.54075089-46.4254362-46.42544153 1.28959636-1.93439451 3.22399088-3.86878903 5.80317822-5.80317821 32.88468534-20.63353074 67.70376514 14.18554911 46.42544148 46.42543627z m0-137.98671761c-1.28959636 1.93439451-3.22399088 3.86878903-5.8031835 5.80317817-32.88468534 20.63353074-67.05896691-13.54075089-46.4254362-46.4254362 1.28959636-1.93439451 3.22399088-3.86878903 5.80317822-5.80317818 32.88468534-21.27832364 67.70376514 13.54075089 46.42544148 46.42543621z m361.08674562 149.59307926h-264.36708411c-6.44797635 0-12.25115989-2.57919268-16.11994359-7.73757266-21.27832364-27.08150713-2.57919268-56.74220161 23.212718-56.74220164h264.36708417c6.44797635 0 12.25115989 2.57919268 16.11994364 7.73757283 21.27832364 27.08150713 2.57919268 56.74220161-23.21271811 56.74220147z m128.95954853-137.98671756h-393.32663264c-6.44797635 0-12.25115989-2.57919268-16.11994359-7.73757269-21.27832364-27.08150713-2.57919268-56.74220161 23.212718-56.74220692h393.32663275c6.44797635 0 12.25115989 2.57919268 16.11994354 7.7375727 21.27832364 27.08150713 2.57919268 56.74220161-23.21271806 56.74220691z" fill="#08D19F" p-id="266273"></path></svg>
diff --git a/frontend/new-web/src/assets/icons/python.svg b/frontend/new-web/src/assets/icons/python.svg
new file mode 100644
index 00000000..d9bab518
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/python.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1760263323196" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1502" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M420.693333 85.333333C353.28 85.333333 298.666667 139.946667 298.666667 207.36v71.68h183.04c16.64 0 30.293333 24.32 30.293333 40.96H207.36C139.946667 320 85.333333 374.613333 85.333333 442.026667v161.322666c0 67.413333 54.613333 122.026667 122.026667 122.026667h50.346667v-114.346667c0-67.413333 54.186667-122.026667 121.6-122.026666h224c67.413333 0 122.026667-54.229333 122.026666-121.642667V207.36C725.333333 139.946667 670.72 85.333333 603.306667 85.333333z m-30.72 68.693334c17.066667 0 30.72 5.12 30.72 30.293333s-13.653333 38.016-30.72 38.016c-16.64 0-30.293333-12.8-30.293333-37.973333s13.653333-30.336 30.293333-30.336z" fill="#3C78AA" p-id="1503"></path><path d="M766.250667 298.666667v114.346666a121.6 121.6 0 0 1-121.6 121.984H420.693333A121.6 121.6 0 0 0 298.666667 656.597333v160a122.026667 122.026667 0 0 0 122.026666 122.026667h182.613334A122.026667 122.026667 0 0 0 725.333333 816.64v-71.68h-183.082666c-16.64 0-30.250667-24.32-30.250667-40.96h304.64A122.026667 122.026667 0 0 0 938.666667 581.973333v-161.28a122.026667 122.026667 0 0 0-122.026667-122.026666zM354.986667 491.221333l-0.170667 0.170667c0.512-0.085333 1.066667-0.042667 1.621333-0.170667z m279.04 310.442667c16.64 0 30.293333 12.8 30.293333 37.973333a30.293333 30.293333 0 0 1-30.293333 30.293334c-17.066667 0-30.72-5.12-30.72-30.293334s13.653333-37.973333 30.72-37.973333z" fill="#FDD835" p-id="1504"></path></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/qq.svg b/frontend/new-web/src/assets/icons/qq.svg
new file mode 100644
index 00000000..a59086b4
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/qq.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19.9139 14.529C19.7336 13.955 19.4877 13.2856 19.2385 12.643L18.3288 10.3969C18.3295 10.371 18.3408 9.92858 18.3408 9.70053C18.3408 5.8599 16.5082 2.00037 12.0009 2C7.49403 2.00037 5.66113 5.8599 5.66113 9.70053C5.66113 9.92858 5.67237 10.371 5.67312 10.3969L4.76379 12.643C4.51453 13.2856 4.26827 13.955 4.08798 14.529C3.2285 17.2657 3.507 18.3982 3.71915 18.4238C4.17419 18.4779 5.49021 16.3635 5.49021 16.3635C5.49021 17.5879 6.12741 19.1858 7.5064 20.3398C6.99064 20.4971 6.35868 20.7388 5.95237 21.0355C5.58729 21.3025 5.63302 21.5743 5.69861 21.6841C5.9876 22.1661 10.6542 21.9918 12.0017 21.8417C13.3488 21.9918 18.0158 22.1661 18.3044 21.6841C18.3704 21.5743 18.4157 21.3025 18.0507 21.0355C17.6443 20.7388 17.012 20.4971 16.4959 20.3395C17.8745 19.1858 18.5117 17.5879 18.5117 16.3635C18.5117 16.3635 19.8281 18.4779 20.2831 18.4238C20.4949 18.3982 20.7734 17.2657 19.9139 14.529Z"></path></svg>
diff --git a/frontend/new-web/src/assets/icons/refresh.svg b/frontend/new-web/src/assets/icons/refresh.svg
new file mode 100644
index 00000000..e598ed11
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/refresh.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1em" height="1em" viewBox="0 0 512 512"><path d="m400 148-21.12-24.57A191.43 191.43 0 0 0 240 64C134 64 48 150 48 256s86 192 192 192a192.09 192.09 0 0 0 181.07-128" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="32"/><path d="M464 68.45V220a4 4 0 0 1-4 4H308.45a4 4 0 0 1-2.83-6.83L457.17 65.62a4 4 0 0 1 6.83 2.83z" fill="currentColor"/></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/role.svg b/frontend/new-web/src/assets/icons/role.svg
new file mode 100644
index 00000000..5d252784
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/role.svg
@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="256" height="256"><path d="M79.238 961.896v-25.442c0-109.28 28.835-214.892 81.139-297.416 48.427-76.396 115.304-131.573 195.508-161.896A240.785 240.785 0 0 1 279.488 300.5c0-131.538 104.331-238.535 232.547-238.535S744.546 168.962 744.546 300.5a240.854 240.854 0 0 1-76.742 176.988c190.87 73.004 276.992 277.131 276.992 458.966v25.442H79.238zM694.908 300.5c0-103.43-82.039-187.615-182.873-187.615-100.835 0-182.873 84.184-182.873 187.615 0 103.465 82.038 187.65 182.873 187.65 100.834 0 182.873-84.185 182.873-187.65zm-79.166 213.508a226.454 226.454 0 0 1-103.707 25.096A225.935 225.935 0 0 1 407.912 513.8C212.888 564.927 136.804 752.854 129.5 910.977h765.035c-7.997-167.4-95.227-347.746-278.793-396.97zm-143.411 37.246h79.407l39.739-8.48-45.242 65.664 30.6 227.527-64.8 56.908-69.197-56.908 40.535-227.527-50.78-65.665 39.738 8.48z"/></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/search.svg b/frontend/new-web/src/assets/icons/search.svg
new file mode 100644
index 00000000..2312daf9
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/search.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 2C15.968 2 20 6.032 20 11C20 15.968 15.968 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2ZM11 18C14.8675 18 18 14.8675 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18ZM19.4853 18.0711L22.3137 20.8995L20.8995 22.3137L18.0711 19.4853L19.4853 18.0711Z"></path></svg>
diff --git a/frontend/new-web/src/assets/icons/setting.svg b/frontend/new-web/src/assets/icons/setting.svg
new file mode 100644
index 00000000..fbc49451
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/setting.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="m12 1 9.5 5.5v11L12 23l-9.5-5.5v-11L12 1zm0 2.311L4.5 7.653v8.694l7.5 4.342 7.5-4.342V7.653L12 3.311zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/size.svg b/frontend/new-web/src/assets/icons/size.svg
new file mode 100644
index 00000000..f92f852e
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/size.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M10 6v15H8V6H2V4h14v2h-6zm8 8v7h-2v-7h-3v-2h8v2h-3z"/></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/sql.svg b/frontend/new-web/src/assets/icons/sql.svg
new file mode 100644
index 00000000..dc4a3a82
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/sql.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1760263428378" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5841" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M33.792 631.808c0 84.992 214.016 153.6 478.208 153.6 263.168 0 477.184-68.608 478.208-153.6V509.952C891.904 580.608 701.44 614.4 512 614.4c-189.44 0-379.904-33.792-478.208-105.472v122.88z" fill="#00CCFF" p-id="5842"></path><path d="M990.208 747.52C891.904 819.2 701.44 852.992 512 852.992 322.56 852.992 132.096 819.2 33.792 747.52v139.264C60.416 964.608 266.24 1024 512 1024s451.584-59.392 478.208-136.192V747.52zM33.792 392.192c0 84.992 214.016 153.6 478.208 153.6 263.168 0 477.184-68.608 478.208-153.6V270.336c-98.304 71.68-288.768 105.472-478.208 105.472-189.44 0-379.904-33.792-478.208-105.472v121.856z" fill="#00CCFF" p-id="5843"></path><path d="M33.792 153.6a478.208 153.6 0 1 0 956.416 0 478.208 153.6 0 1 0-956.416 0Z" fill="#00CCFF" p-id="5844"></path></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/system.svg b/frontend/new-web/src/assets/icons/system.svg
new file mode 100644
index 00000000..2e6045b4
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/system.svg
@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M139 669.6V164.3c0-12.7 10.3-23.1 23.1-23.1h694.4c12.7 0 23.1 10.4 23.1 23.1v248.5h70V164.3c0-51.3-41.8-93.1-93.1-93.1H162c-51.3.1-93 41.8-93 93.1v505.3c0 51.3 41.8 93.1 93.1 93.1h224.7v-70H162c-12.7 0-23-10.4-23-23.1zm-34.3 131h282v70h-282z"/><path d="m954.9 599.4-5.1-15c-11.5-33.9-29.4-64.9-53.2-91.9l-10.5-11.9h-83.2l-41.7-72.2-15.6-3.1c-34.8-6.9-71.3-6.9-106.1 0l-15.6 3.1-41.7 72.2H499l-10.5 11.9c-23.8 27.1-41.7 58-53.2 91.9l-5.1 15 41.7 72.2-41.7 72.2 5.1 15c11.5 33.9 29.4 64.9 53.2 91.9l10.5 11.9h83.2l41.7 72.2 15.6 3.1c17.4 3.5 35.3 5.2 53.1 5.2s35.6-1.8 53.1-5.2l15.6-3.1 41.7-72.2h83.2l10.5-11.9c23.8-27.1 41.7-58 53.2-91.9l5.1-15-41.7-72.2 41.6-72.2zm-76.8 151.2c-6.4 14.9-14.5 29-24.3 42h-91.2l-45.6 79c-16.1 1.9-32.4 1.9-48.5 0l-45.6-79h-91.2c-9.8-13-17.9-27-24.3-42l45.6-79.1-45.6-79.1c6.4-14.9 14.5-29 24.3-42h91.2l45.6-79c16.1-1.9 32.4-1.9 48.5 0l45.6 79h91.2c9.8 13 17.9 27 24.3 42l-45.6 79.1 45.6 79.1z"/><path d="M692.7 560.2c-61.4 0-111.3 49.9-111.3 111.3s49.9 111.3 111.3 111.3S804 732.9 804 671.5c0-61.3-49.9-111.3-111.3-111.3zm0 152.7c-22.8 0-41.3-18.5-41.3-41.3s18.5-41.3 41.3-41.3 41.3 18.5 41.3 41.3-18.5 41.3-41.3 41.3z"/></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/table.svg b/frontend/new-web/src/assets/icons/table.svg
new file mode 100644
index 00000000..1a16abb3
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/table.svg
@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M0 64v896h1024V64H0zm384 576V448h256v192H384zm256 64v192H384V704h256zm0-512v192H384V192h256zm-320 0v192H64V192h256zM64 448h256v192H64V448zm640 0h256v192H704V448zm0-64V192h256v192H704zM64 704h256v192H64V704zm640 192V704h256v192H704z"/></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/time.svg b/frontend/new-web/src/assets/icons/time.svg
new file mode 100755
index 00000000..9d2327bc
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/time.svg
@@ -0,0 +1,9 @@
+<svg t="1696822386369" class="icon" viewBox="0 0 1126 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2748"
+  width="48" height="48">
+  <path
+    d="M742.4 0h-358.4C199.68 0 51.2 148.48 51.2 332.8v358.4C51.2 875.52 199.68 1024 384 1024h358.4C926.72 1024 1075.2 875.52 1075.2 691.2v-358.4C1075.2 148.48 926.72 0 742.4 0z m63.146667 754.346667c-133.12 133.12-351.573333 133.12-484.693334 0-133.12-133.12-133.12-351.573333 0-484.693334 133.12-133.12 351.573333-133.12 484.693334 0 134.826667 133.12 134.826667 351.573333 0 484.693334z"
+    fill="#FD3C13" p-id="2749"></path>
+  <path
+    d="M356.693333 305.493333c-114.346667 114.346667-114.346667 298.666667 0 411.306667 114.346667 114.346667 298.666667 114.346667 411.306667 0 114.346667-114.346667 114.346667-298.666667 0-411.306667-112.64-112.64-296.96-112.64-411.306667 0zM699.733333 558.08h-153.6c-8.533333 0-15.36-3.413333-22.186666-8.533333-8.533333-6.826667-13.653333-17.066667-13.653334-27.306667v-150.186667c0-18.773333 8.533333-34.133333 27.306667-34.133333s23.893333 15.36 23.893333 34.133333v134.826667H699.733333c18.773333 0 34.133333 5.12 34.133334 23.893333 0 18.773333-15.36 27.306667-34.133334 27.306667z"
+    fill="#FD3C13" p-id="2750"></path>
+</svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/todo.svg b/frontend/new-web/src/assets/icons/todo.svg
new file mode 100644
index 00000000..f48e667b
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/todo.svg
@@ -0,0 +1 @@
+<svg t="1719844784164" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="269353" width="200" height="200"><path d="M920.78 322.56L700.878 102.656c-36.199-36.198-94.925-36.198-131.123 0s-36.199 94.925 0 131.123l23.5 23.501-86.272 86.323c-123.033-75.11-285.798-59.494-392.192 46.9l-37.376 37.375L293.94 644.403l-89.088 89.088c-23.5 23.501-23.5 61.645 0 85.146s61.645 23.5 85.146 0l89.088-89.088L595.61 946.074l37.376-37.376c106.393-106.394 122.01-269.21 46.899-392.192l86.323-86.324 23.5 23.501c36.2 36.199 94.926 36.199 131.124 0s36.198-94.925-0.051-131.123z m-454.758 132.3a41.206 41.206 0 0 1-34.304 18.28 41.057 41.057 0 0 1-22.988-7.015c-55.91-37.581-122.266-8.09-122.932-7.783-20.633 9.728-45.21 0.87-54.886-19.763a41.196 41.196 0 0 1 19.763-54.886c4.403-2.048 108.851-50.023 204.083 13.926 18.893 12.698 23.962 38.349 11.264 57.242z" fill="#FF5C64" p-id="269354"></path><path d="M569.754 102.656c-36.199 36.198-36.199 94.925 0 131.123l23.5 23.501-86.272 86.323c-123.033-75.11-285.798-59.494-392.192 46.9l-37.376 37.375L293.94 644.403l-89.088 89.088c-23.5 23.501-23.5 61.645 0 85.146s61.645 23.5 85.146 0l89.088-89.088 105.83 105.83c99.226-42.445 182.119-115.558 236.851-207.462a319.145 319.145 0 0 0-41.881-111.411l86.323-86.324 20.173 20.173c4.3-26.624 6.656-53.862 6.656-81.664 0-82.073-19.61-159.539-54.221-228.147l-37.888-37.888c-36.25-36.198-94.976-36.198-131.174 0zM466.022 454.861a41.206 41.206 0 0 1-34.304 18.278 41.057 41.057 0 0 1-22.988-7.014c-55.91-37.581-122.266-8.09-122.932-7.783-20.633 9.728-45.21 0.87-54.886-19.763a41.196 41.196 0 0 1 19.763-54.886c4.403-2.048 108.851-50.023 204.083 13.926 18.893 12.698 23.962 38.349 11.264 57.242z" fill="#FF5C64" p-id="269355"></path><path d="M253.85 684.442c228.812-49.152 400.332-252.468 400.332-495.924 0-38.758-4.505-76.441-12.697-112.69-25.754-1.69-52.07 7.167-71.731 26.88-36.199 36.198-36.199 94.924 0 131.122l23.5 23.501-86.272 86.272c-123.033-75.11-285.798-59.494-392.192 46.9l-37.376 37.375L293.94 644.403l-40.09 40.039z m32-226.15c-20.634 9.727-45.21 0.87-54.887-19.764a41.196 41.196 0 0 1 19.763-54.886c4.404-2.048 108.852-50.023 204.084 13.926 18.892 12.698 23.961 38.349 11.264 57.242a41.206 41.206 0 0 1-34.304 18.278 41.057 41.057 0 0 1-22.99-7.014c-55.96-37.53-122.316-8.09-122.93-7.783z" fill="#FF5C64" p-id="269356"></path><path d="M230.912 438.58a41.196 41.196 0 0 1 19.763-54.887c3.226-1.536 60.058-27.546 127.642-16.333 18.022-18.074 34.662-37.53 49.817-58.112-107.827-30.618-228.505-3.584-313.395 81.306L77.363 427.93l71.629 71.628a502.748 502.748 0 0 0 103.885-40.243 41.861 41.861 0 0 1-21.965-20.736z" fill="#FF5C64" p-id="269357"></path></svg>
diff --git a/frontend/new-web/src/assets/icons/tree.svg b/frontend/new-web/src/assets/icons/tree.svg
new file mode 100644
index 00000000..51aea8f7
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/tree.svg
@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M977.455 558.545h-34.91V453.818c0-44.218-37.236-81.454-81.454-81.454H546.909v-93.091h197.818c25.6 0 46.546-20.946 46.546-46.546V93.091c0-25.6-20.946-46.546-46.546-46.546H279.273c-25.6 0-46.546 20.946-46.546 46.546v139.636c0 25.6 20.946 46.546 46.546 46.546H477.09v93.09H162.909c-44.218 0-81.454 37.237-81.454 81.455v104.727h-34.91C20.945 558.545 0 579.491 0 605.091v325.818c0 25.6 20.945 46.546 46.545 46.546h139.637c25.6 0 46.545-20.946 46.545-46.546V605.091c0-25.6-20.945-46.546-46.545-46.546h-34.91V453.818c0-6.982 4.655-11.636 11.637-11.636h314.182v116.363h-34.91c-25.6 0-46.545 20.946-46.545 46.546v325.818c0 25.6 20.946 46.546 46.546 46.546h139.636c25.6 0 46.546-20.946 46.546-46.546V605.091c0-25.6-20.946-46.546-46.546-46.546H546.91V442.182h314.182c6.982 0 11.636 4.654 11.636 11.636v104.727h-34.909c-25.6 0-46.545 20.946-46.545 46.546v325.818c0 25.6 20.945 46.546 46.545 46.546h139.637c25.6 0 46.545-20.946 46.545-46.546V605.091c0-25.6-20.945-46.546-46.545-46.546zm-814.546 69.819v279.272H69.82V628.364h93.09zm395.636 0v279.272h-93.09V628.364h93.09zm-256-418.91v-93.09h418.91v93.09h-418.91zm651.637 698.182H861.09V628.364h93.09v279.272z"/></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/typescript.svg b/frontend/new-web/src/assets/icons/typescript.svg
new file mode 100644
index 00000000..781d6f88
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/typescript.svg
@@ -0,0 +1 @@
+<svg t="1721541160105" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13856" width="200" height="200"><path d="M762.464 263.776a141.568 141.568 0 0 1 71.136 40.992 187.296 187.296 0 0 1 27.264 36.576c0.352 1.44-49.088 34.656-79.072 53.184-1.088 0.736-5.408-3.968-10.304-11.2a64.448 64.448 0 0 0-53.44-32c-34.464-2.368-56.672 15.68-56.512 45.856a41.6 41.6 0 0 0 4.896 21.312c7.584 15.68 21.664 25.088 65.888 44.256 81.408 35.04 116.352 58.144 137.92 90.976a165.056 165.056 0 0 1 13.312 138.656 152.448 152.448 0 0 1-125.824 90.08 348.8 348.8 0 0 1-86.656-0.896 208.992 208.992 0 0 1-115.712-60.288 200.896 200.896 0 0 1-29.632-43.872 84.96 84.96 0 0 1 10.464-6.656c5.056-2.88 24.192-13.888 42.24-24.352l32.768-19.2 6.848 9.984a152.672 152.672 0 0 0 43.2 41.344 105.6 105.6 0 0 0 110.656-5.6 49.44 49.44 0 0 0 6.4-63.168c-8.832-12.64-26.88-23.264-78.176-45.504a281.6 281.6 0 0 1-107.168-65.76 149.984 149.984 0 0 1-31.232-56.864 227.712 227.712 0 0 1-1.984-72.576 138.624 138.624 0 0 1 116.608-107.968 288 288 0 0 1 86.112 2.688z m-266.976 47.456l0.352 46.528h-148.16v420.736H243.2V357.856H95.04V312.16a447.552 447.552 0 0 1 1.28-46.912c0.544-0.736 90.624-1.088 199.84-0.896l198.752 0.544z" fill="#007ACC" p-id="13857"></path></svg>
diff --git a/frontend/new-web/src/assets/icons/up.svg b/frontend/new-web/src/assets/icons/up.svg
new file mode 100644
index 00000000..3b6c5353
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/up.svg
@@ -0,0 +1 @@
+<svg width="15" height="15" aria-label="向上键" 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>
diff --git a/frontend/new-web/src/assets/icons/upload-file.svg b/frontend/new-web/src/assets/icons/upload-file.svg
new file mode 100755
index 00000000..8cc3731d
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/upload-file.svg
@@ -0,0 +1,9 @@
+<svg t="1657792221683" class="icon" viewBox="0 0 1228 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+  p-id="45354" width="200" height="200">
+  <path
+    d="M1196.987733 212.5824v540.0576c0 39.594667-34.474667 71.3728-76.765866 71.3728H323.242667c-51.780267 0-88.746667-46.762667-73.250134-92.808533l126.737067-375.808H70.417067C31.675733 355.362133 0 326.4512 0 291.089067V98.372267C0 63.044267 31.675733 34.0992 70.417067 34.0992h378.811733c26.7264 0 51.029333 13.9264 63.010133 35.703467l39.048534 71.406933H1120.256c42.257067 0 76.8 32.119467 76.8 71.3728"
+    fill="#5398DF" p-id="45355"></path>
+  <path
+    d="M1128.721067 997.853867H68.266667a68.266667 68.266667 0 0 1-68.266667-68.266667V280.3712a68.266667 68.266667 0 0 1 68.266667-68.266667h1060.4544a68.266667 68.266667 0 0 1 68.266666 68.266667V929.5872a68.266667 68.266667 0 0 1-68.266666 68.266667"
+    fill="#85BCFF" p-id="45356"></path>
+</svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/upload-folder.svg b/frontend/new-web/src/assets/icons/upload-folder.svg
new file mode 100755
index 00000000..07dd1df4
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/upload-folder.svg
@@ -0,0 +1,12 @@
+<svg t="1657792062684" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+  p-id="34419" width="200" height="200">
+  <path
+    d="M0 128a51.2 51.2 0 0 1 51.2-51.2h350.24a51.2 51.2 0 0 1 47.0592 31.0336L473.6 166.4h499.2a51.2 51.2 0 0 1 51.2 51.2v537.6a51.2 51.2 0 0 1-51.2 51.2H51.2a51.2 51.2 0 0 1-51.2-51.2V128z"
+    fill="#FFA000" p-id="34420"></path>
+  <path
+    d="M89.6 249.6m51.2 0l742.4 0q51.2 0 51.2 51.2l0 460.8q0 51.2-51.2 51.2l-742.4 0q-51.2 0-51.2-51.2l0-460.8q0-51.2 51.2-51.2Z"
+    fill="#FFFFFF" p-id="34421"></path>
+  <path
+    d="M0 332.8m51.2 0l921.6 0q51.2 0 51.2 51.2l0 512q0 51.2-51.2 51.2l-921.6 0q-51.2 0-51.2-51.2l0-512q0-51.2 51.2-51.2Z"
+    fill="#FFCA28" p-id="34422"></path>
+</svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/user.svg b/frontend/new-web/src/assets/icons/user.svg
new file mode 100644
index 00000000..8e693ec4
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/user.svg
@@ -0,0 +1 @@
+<svg t="1719843414729" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="175406" width="200" height="200"><path d="M512 1024C229.236364 1024 0 794.763636 0 512S229.236364 0 512 0s512 229.236364 512 512-229.236364 512-512 512z m56.599273-542.72a153.134545 153.134545 0 0 0 97.652363-142.149818C666.251636 254.789818 597.038545 186.181818 512 186.181818S357.794909 254.789818 357.794909 339.130182a153.134545 153.134545 0 0 0 97.605818 142.149818C328.471273 507.345455 232.727273 619.054545 232.727273 752.500364c0 32.488727 22.993455 43.240727 41.425454 51.851636l1.070546 0.465455c74.333091 26.065455 181.992727 33.000727 233.797818 33.000727 56.552727 0 167.191273-9.122909 240.686545-34.304 27.601455-10.472727 41.565091-27.648 41.565091-51.013818 0-133.492364-95.744-245.201455-222.673454-271.220364z" fill="#17E3C7" p-id="175407"></path></svg>
diff --git a/frontend/new-web/src/assets/icons/visitor.svg b/frontend/new-web/src/assets/icons/visitor.svg
new file mode 100644
index 00000000..1fd8dbe6
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/visitor.svg
@@ -0,0 +1 @@
+<svg t="1733620604471" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1596" width="128" height="128"><path d="M604.766 304.391c55.072 0 101.33 31.359 125.567 76.137v-94.054c0-51.505-41.856-91.812-92.513-91.812H250.118c-50.659 0-92.518 40.307-92.518 91.812v423.255c0 49.268 41.859 89.574 92.518 89.574h171.824c-30.848-11.195-48.466-33.586-50.672-71.662-4.402-85.105 48.465-161.231 90.321-197.066 6.608-6.728 11.01-11.194 17.616-15.685-8.813-20.149-15.421-42.548-15.421-67.176 0-78.385 61.679-143.323 140.98-143.323z" fill="#C4F7F0" p-id="1597"></path><path d="M804.423 349.242c0-51.507-41.855-91.814-92.515-91.814H324.204c-50.658 0-92.514 40.308-92.514 91.814v423.254c0 49.268 41.855 89.576 92.514 89.576h171.828c-30.846-11.197-48.466-33.587-50.67-71.668-4.404-85.101 48.462-161.239 90.319-197.063 6.608-6.727 11.009-11.196 17.617-15.682-8.813-20.152-15.422-42.549-15.422-67.182 0-78.384 61.68-143.318 140.977-143.318 55.071 0 101.336 31.356 125.57 76.133v-94.05zM394.702 638.123h-66.081c-6.612 0-11.024-4.474-11.024-11.187 0-6.729 4.413-11.2 11.024-11.2h66.081c6.608 0 11.008 4.471 11.008 11.2 0 6.713-4.4 11.187-11.008 11.187z m66.081-89.572H328.62c-4.417 0-11.025-4.477-11.025-11.199 0-6.707 4.413-11.189 11.025-11.189h132.163c6.609 0 11.01 4.482 11.01 11.189 0.001 6.72-4.401 11.199-11.01 11.199z m0-89.577H328.62c-4.417 0-11.025-4.481-11.025-11.2s6.608-11.198 11.025-11.198h132.163c6.609 0 11.01 4.481 11.01 11.198 0.001 6.719-4.401 11.2-11.01 11.2z" fill="#00DFC1" p-id="1598"></path><path d="M566.516 620.21c-33.043 26.875-72.692 85.096-70.484 152.288 2.193 67.177 72.686 67.177 176.216 67.177 103.535 0 174.03 0 176.228-67.177 2.205-67.192-39.651-123.183-70.485-152.288-24.239-22.396-44.066-26.868-50.672-26.868 28.64-15.683 46.256-47.039 46.256-82.861 0-53.743-41.841-96.294-94.722-96.294-52.863 0-94.707 42.551-92.511 96.294 0 35.822 17.628 64.951 46.253 82.861H621.59c-0.002 0-22.034 0-55.074 26.868z" fill="#00DFC1" p-id="1599"></path></svg>
diff --git a/frontend/new-web/src/assets/icons/vite.svg b/frontend/new-web/src/assets/icons/vite.svg
new file mode 100755
index 00000000..b7407f87
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/vite.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="410" height="404" viewBox="0 0 410 404" fill="none">
+  <path
+    d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z"
+    fill="url(#paint0_linear)" />
+  <path
+    d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z"
+    fill="url(#paint1_linear)" />
+  <defs>
+    <linearGradient id="paint0_linear" x1="6.00017" y1="32.9999" x2="235" y2="344" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#41D1FF" />
+      <stop offset="1" stop-color="#BD34FE" />
+    </linearGradient>
+    <linearGradient id="paint1_linear" x1="194.651" y1="8.81818" x2="236.076" y2="292.989"
+      gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FFEA83" />
+      <stop offset="0.0833333" stop-color="#FFDD35" />
+      <stop offset="1" stop-color="#FFA800" />
+    </linearGradient>
+  </defs>
+</svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/vue copy.svg b/frontend/new-web/src/assets/icons/vue copy.svg
new file mode 100755
index 00000000..ac47eb63
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/vue copy.svg	
@@ -0,0 +1,4 @@
+<svg class="logo" viewBox="0 0 128 128" width="24" height="24" data-v-f32e683e="">
+  <path fill="#42b883" d="M78.8,10L64,35.4L49.2,10H0l64,110l64-110C128,10,78.8,10,78.8,10z" data-v-f32e683e=""></path>
+  <path fill="#35495e" d="M78.8,10L64,35.4L49.2,10H25.6L64,76l38.4-66H78.8z" data-v-f32e683e=""></path>
+</svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/vue.svg b/frontend/new-web/src/assets/icons/vue.svg
new file mode 100644
index 00000000..456f8768
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/vue.svg
@@ -0,0 +1 @@
+<svg t="1721541029594" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3336" width="200" height="200"><path d="M615.6 123.6h165.5L512 589.7 242.9 123.6H63.5L512 900.4l448.5-776.9z" fill="#41B883" p-id="3337"></path><path d="M781.1 123.6H615.6L512 303 408.4 123.6H242.9L512 589.7z" fill="#34495E" p-id="3338"></path></svg>
diff --git a/frontend/new-web/src/assets/icons/wechat copy.svg b/frontend/new-web/src/assets/icons/wechat copy.svg
new file mode 100755
index 00000000..263c89cb
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/wechat copy.svg	
@@ -0,0 +1,9 @@
+<svg t="1655172426715" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1956"
+  width="200" height="200">
+  <path
+    d="M1010.8 628c0-141.2-141.3-256.2-299.9-256.2-168 0-300.3 115.1-300.3 256.2 0 141.4 132.3 256.2 300.3 256.2 35.2 0 70.7-8.9 106-17.7l96.8 53-26.6-88.2c70.9-53.2 123.7-123.7 123.7-203.3zM618 588.8c-22.1 0-40-17.9-40-40s17.9-40 40-40 40 17.9 40 40c0 22-17.9 40-40 40z m194.3-0.3c-22.1 0-40-17.9-40-40s17.9-40 40-40 40 17.9 40 40-17.9 40-40 40z"
+    fill="#00C800" p-id="1957"></path>
+  <path
+    d="M366.3 106.9c-194.1 0-353.1 132.3-353.1 300.3 0 97 52.9 176.6 141.3 238.4l-35.3 106.2 123.4-61.9c44.2 8.7 79.6 17.7 123.7 17.7 11.1 0 22.1-0.5 33-1.4-6.9-23.6-10.9-48.3-10.9-74 0-154.3 132.5-279.5 300.2-279.5 11.5 0 22.8 0.8 34 2.1C692 212.6 539.9 106.9 366.3 106.9zM247.7 349.2c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48z m246.6 0c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48z"
+    fill="#00C800" p-id="1958"></path>
+</svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/icons/wechat.svg b/frontend/new-web/src/assets/icons/wechat.svg
new file mode 100644
index 00000000..2fc58038
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/wechat.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.5753 13.7114C19.0742 13.7114 19.4733 13.2873 19.4733 12.8134C19.4733 12.3145 19.0742 11.9155 18.5753 11.9155C18.0765 11.9155 17.6774 12.3145 17.6774 12.8134C17.6774 13.3123 18.0765 13.7114 18.5753 13.7114ZM14.1497 13.7114C14.6485 13.7114 15.0476 13.2873 15.0476 12.8134C15.0476 12.3145 14.6485 11.9155 14.1497 11.9155C13.6508 11.9155 13.2517 12.3145 13.2517 12.8134C13.2517 13.3123 13.6508 13.7114 14.1497 13.7114ZM20.717 18.7516C20.5942 18.8253 20.5205 18.9482 20.5451 19.1202C20.5451 19.1693 20.5451 19.2185 20.5696 19.2676C20.6679 19.6854 20.8643 20.349 20.8643 20.3736C20.8643 20.4473 20.8889 20.4964 20.8889 20.5456C20.8889 20.6685 20.7907 20.7668 20.6679 20.7668C20.6187 20.7668 20.5942 20.7422 20.5451 20.7176L19.0961 19.882C18.9978 19.8329 18.875 19.7837 18.7522 19.7837C18.6786 19.7837 18.6049 19.7837 18.5558 19.8083C17.8681 20.0049 17.1559 20.1032 16.3946 20.1032C12.7352 20.1032 9.78815 17.6456 9.78815 14.5983C9.78815 11.5509 12.7352 9.09329 16.3946 9.09329C20.0539 9.09329 23.001 11.5509 23.001 14.5983C23.001 16.2448 22.1168 17.7439 20.717 18.7516ZM16.6737 8.09757C16.581 8.09473 16.488 8.09329 16.3946 8.09329C12.2199 8.09329 8.78815 10.9536 8.78815 14.5983C8.78815 15.1519 8.86733 15.6874 9.01626 16.1975H8.92711C8.04096 16.1975 7.15481 16.0503 6.3425 15.8296C6.26866 15.805 6.19481 15.805 6.12097 15.805C5.97327 15.805 5.82558 15.8541 5.7025 15.9277L3.95482 16.9334C3.90559 16.958 3.85635 16.9825 3.80712 16.9825C3.65943 16.9825 3.53636 16.8599 3.53636 16.7127C3.53636 16.6391 3.56097 16.59 3.58559 16.5164C3.6102 16.4919 3.83174 15.6824 3.95482 15.1918C3.95482 15.1427 3.97943 15.0691 3.97943 15.0201C3.97943 14.8238 3.88097 14.6766 3.75789 14.5785C2.05944 13.3765 1.00098 11.5858 1.00098 9.59876C1.00098 5.94369 4.5702 3 8.95173 3C12.7157 3 15.8802 5.16856 16.6737 8.09757ZM11.5199 8.51604C12.0927 8.51604 12.5462 8.03871 12.5462 7.4898C12.5462 6.91701 12.0927 6.46356 11.5199 6.46356C10.9471 6.46356 10.4937 6.91701 10.4937 7.4898C10.4937 8.06258 10.9471 8.51604 11.5199 8.51604ZM6.26045 8.51604C6.83324 8.51604 7.28669 8.03871 7.28669 7.4898C7.28669 6.91701 6.83324 6.46356 6.26045 6.46356C5.68767 6.46356 5.23421 6.91701 5.23421 7.4898C5.23421 8.06258 5.68767 8.51604 6.26045 8.51604Z"></path></svg>
diff --git a/frontend/new-web/src/assets/icons/xml.svg b/frontend/new-web/src/assets/icons/xml.svg
new file mode 100644
index 00000000..f0412130
--- /dev/null
+++ b/frontend/new-web/src/assets/icons/xml.svg
@@ -0,0 +1 @@
+<svg t="1721557951693" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19605" width="200" height="200"><path d="M692.497067 546.133333h52.087466l40.482134-260.642133V273.066667h-63.624534L605.730133 471.722667 542.037333 279.210667V273.066667h-63.6928L443.733333 546.133333h52.087467l23.1424-161.3824L570.9824 546.133333h46.2848l98.372267-155.170133-23.1424 148.957867z" fill="#FF7D19" p-id="19606"></path><path d="M845.2096 572.074667c-12.0832 0-18.090667 0-24.1664 11.400533-6.007467 5.7344-12.0832 17.2032-12.0832 22.9376v85.8112H597.674667c-54.340267 0-96.597333 40.004267-96.597334 91.477333v165.888H150.869333c-18.0224 0-36.181333-5.666133-48.264533-17.066666-12.014933-11.4688-24.098133-28.672-24.098133-45.806934V137.216c0-40.004267 36.181333-68.608 72.362666-68.608h585.728c42.1888 0 72.362667 28.603733 72.362667 68.608v51.473067c0 17.2032 18.158933 34.338133 36.2496 34.338133s36.181333-11.400533 42.257067-34.338133v-51.473067C887.466667 62.8736 821.0432 0 742.6048 0H144.861867C66.3552 0 0 57.207467 0 137.284267V886.784C0 961.1264 66.423467 1024 144.861867 1024H615.765333c12.0832 0 18.158933-5.7344 24.1664-11.4688l229.376-211.626667c6.144-5.7344 12.151467-17.2032 12.151467-22.869333v-165.888c0-22.9376-18.158933-40.072533-36.2496-40.072533z m-42.325333 183.022933l-205.2096 188.8256h-24.1664v-165.888c0-5.7344 0-11.4688 6.075733-17.2032 6.007467-5.7344 12.0832-5.7344 18.090667-5.7344h205.277866z" fill="#FF7D19" p-id="19607"></path><path d="M372.804267 273.066667L303.650133 366.1824 251.767467 273.066667H182.613333l80.6912 136.533333L136.533333 546.133333h74.888534L292.181333 453.0176 344.064 546.133333h69.154133L332.458667 409.6l115.234133-136.533333H372.804267z m501.3504 229.649066l28.808533-217.224533V273.066667h-51.882667l-40.277333 266.922666V546.133333h207.4624L1024 502.715733h-149.845333z" fill="#FF7D19" p-id="19608"></path></svg>
diff --git a/frontend/new-web/src/assets/images/401.svg b/frontend/new-web/src/assets/images/401.svg
new file mode 100644
index 00000000..45005961
--- /dev/null
+++ b/frontend/new-web/src/assets/images/401.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800" enable-background="new 0 0 800 800"><style>.st26{fill:#fff}</style><g id="图层_11"><linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="401.773" y1="162.104" x2="401.773" y2="717.596"><stop offset="0" stop-color="#F4F2FB"/><stop offset="1" stop-color="#E1EEF5"/></linearGradient><path d="M485.03 203.46c-38.37 30.29-120.74 33.81-181.17-2.22s-172-31.38-202.22 34.87 37.19 131.33 12.78 178.98S8.66 530.13 64.45 611.49s126.6 60.62 169.22 52.45c84.17-16.13 189.79 115.67 308.62 16.13 68.47-57.35 170.44 42.09 210.17-81.36 32.78-101.86-85.67-139.5-49.97-208.03 37.96-72.88 30.67-159.24-10.46-201.06-38.31-38.96-140.75-38.46-207 13.84z" style="fill:url(#SVGID_1_)"/><linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="494.782" y1="599.604" x2="494.782" y2="428.659"><stop offset=".34" stop-color="#B0B9E1"/><stop offset=".866" stop-color="#EAF0F8"/></linearGradient><path d="M406.65 428.66h216.44l-22.53 49.03s59.19 57.87-14.13 121.91c-134.28-44.17-221.74-37.1-219.98-38.87 1.77-1.76 40.2-132.07 40.2-132.07z" style="fill:url(#SVGID_2_)"/><linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="116.855" y1="542.49" x2="116.855" y2="405.316"><stop offset=".227" stop-color="#B7ACE0"/><stop offset=".789" stop-color="#E8E7FA"/></linearGradient><path d="M117.64 405.56s-.22-.57-.52.04c-2.7 5.49-27.15 64.96-29.09 110.86 0 0-4.08 26.37 30.11 26.02 28.54-.29 27.78-24.6 27.68-32.79-.39-33.22-28.18-104.13-28.18-104.13z" style="fill:url(#SVGID_3_)"/><linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="116.857" y1="420.547" x2="116.857" y2="571.681"><stop offset="0" stop-color="#ECF1FB"/><stop offset=".818" stop-color="#AFB0E7"/></linearGradient><path d="M116.86 571.68c-.55 0-1-.45-1-1V421.55c0-.55.45-1 1-1s1 .45 1 1v149.13c0 .55-.45 1-1 1z" style="fill:url(#SVGID_4_)"/><linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="617.984" y1="450.968" x2="617.984" y2="362.644"><stop offset=".227" stop-color="#CCD4F4"/><stop offset=".789" stop-color="#ECF1FB"/></linearGradient><path d="M618.49 362.8s-.14-.37-.33.03c-1.74 3.53-17.48 41.83-18.73 71.38 0 0-2.63 16.98 19.39 16.76 18.38-.18 17.89-15.84 17.82-21.11-.25-21.4-18.15-67.06-18.15-67.06z" style="fill:url(#SVGID_5_)"/><linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="617.985" y1="372.451" x2="617.985" y2="469.764"><stop offset="0" stop-color="#ECF1FB"/><stop offset="1" stop-color="#A6A8E2"/></linearGradient><path d="M617.99 469.76c-.36 0-.64-.29-.64-.64V373.1c0-.36.29-.64.64-.64s.64.29.64.64v96.02c0 .36-.29.64-.64.64z" style="fill:url(#SVGID_6_)"/><linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="463.902" y1="88.362" x2="429.148" y2="148.558"><stop offset="0" stop-color="#FFDB80"/><stop offset="1" stop-color="#FFBB24"/></linearGradient><circle cx="446.52" cy="118.46" r="34.75" style="fill:url(#SVGID_7_)"/><linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="421.565" y1="118.828" x2="421.565" y2="176.282"><stop offset="0" stop-color="#F9FAFE"/><stop offset="1" stop-color="#E5EDF7"/></linearGradient><path d="M466.3 137.41h-34.57c-2.23-10.61-11.65-18.58-22.93-18.58s-20.69 7.97-22.93 18.58h-9.05c-10.73 0-19.44 8.7-19.44 19.44 0 10.73 8.7 19.44 19.44 19.44h89.47c10.73 0 19.44-8.7 19.44-19.44.01-10.74-8.69-19.44-19.43-19.44z" style="fill:url(#SVGID_8_)"/><g><linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="688.586" y1="540.208" x2="688.586" y2="512.38"><stop offset=".227" stop-color="#AFB0E7"/><stop offset="1" stop-color="#ECF1FB"/></linearGradient><circle cx="688.59" cy="526.29" r="13.91" style="fill:url(#SVGID_9_)"/><linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="688.635" y1="515.894" x2="688.635" y2="560.69"><stop offset="0" stop-color="#DDE1F6"/><stop offset=".818" stop-color="#A6A8E2"/></linearGradient><path d="M688.64 560.69c-.24 0-.43-.19-.43-.43v-43.94c0-.24.19-.43.43-.43s.43.19.43.43v43.94a.44.44 0 01-.43.43z" style="fill:url(#SVGID_10_)"/></g><g><linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="2622.045" y1="266.481" x2="2451.058" y2="562.64" gradientTransform="matrix(-1 0 0 1 2941.346 0)"><stop offset="0" stop-color="#C8CBF2"/><stop offset="1" stop-color="#AFB0E7"/></linearGradient><path d="M248.82 393.99c0-24.52-.03-49.03.01-73.54.02-14.37 4.24-18.36 17.97-20.53 41.87-6.61 82.03-18.72 117.91-42.29 10.38-6.82 18.3-7.59 29.06-.47 34.85 23.06 73.26 37.11 114.55 42.8 13.12 1.81 16.84 5.88 16.85 19.25.04 45.72-.4 91.44.18 137.15.34 26.77-8.17 49.99-24.02 70.73-31.46 41.17-74.88 63.76-122.21 80.03-2.5.86-5.83.67-8.36-.23-38.47-13.74-74.58-31.84-104.15-61.09-22.97-22.73-37.84-49.56-37.79-83.22.03-22.87.01-45.73 0-68.59z" style="fill:url(#SVGID_11_)"/><linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="2625.25" y1="279.944" x2="2462.749" y2="561.403" gradientTransform="matrix(-1 0 0 1 2941.346 0)"><stop offset=".116" stop-color="#DEE4FF"/><stop offset=".847" stop-color="#BACBEE"/></linearGradient><path d="M247.94 401.44c0-23.21-.03-46.42.01-69.63.02-13.61 4.06-17.38 17.23-19.43 40.15-6.26 78.67-17.72 113.07-40.04 9.95-6.46 17.55-7.18 27.86-.44 33.42 21.83 70.25 35.14 109.84 40.52 12.58 1.71 16.14 5.56 16.15 18.22.03 43.28-.38 86.57.18 129.84.33 25.34-7.83 47.33-23.03 66.96-30.17 38.98-71.81 60.36-117.19 75.77-2.4.81-5.59.64-8.01-.22-36.89-13.01-71.52-30.14-99.87-57.84-22.03-21.52-36.28-46.91-36.23-78.78.02-21.65-.01-43.29-.01-64.93z" style="fill:url(#SVGID_12_)"/><linearGradient id="SVGID_13_" gradientUnits="userSpaceOnUse" x1="361.421" y1="346.477" x2="449.513" y2="499.057"><stop offset="0" stop-color="#C8CBF2"/><stop offset="1" stop-color="#AFB0E7"/></linearGradient><path d="M411.59 435.75c23.18-5.61 40.41-26.11 40.41-50.49 0-28.68-23.85-52.01-53.17-52.01s-53.17 23.33-53.17 52.01c0 24.38 17.24 44.88 40.41 50.49v85.2h25.52v-36.38h32.67v-24.96h-32.67v-23.86zm-40.41-50.49c0-14.91 12.41-27.05 27.65-27.05s27.65 12.14 27.65 27.05-12.41 27.05-27.65 27.05-27.65-12.14-27.65-27.05z" style="fill:url(#SVGID_13_)"/><path class="st26" d="M407.67 439.03c21.8-5.39 38.01-25.1 38.01-48.54 0-27.58-22.43-50.01-50.01-50.01s-50.01 22.43-50.01 50.01c0 23.44 16.21 43.15 38.01 48.54v81.92h24v-34.98h30.73v-24h-30.73v-22.94zm-38.01-48.55c0-14.34 11.67-26.01 26.01-26.01s26.01 11.67 26.01 26.01-11.67 26.01-26.01 26.01-26.01-11.67-26.01-26.01z"/><linearGradient id="SVGID_14_" gradientUnits="userSpaceOnUse" x1="484.836" y1="475.674" x2="565.754" y2="615.828"><stop offset="0" stop-color="#C8CBF2"/><stop offset="1" stop-color="#AFB0E7"/></linearGradient><circle cx="525.3" cy="545.75" r="80.9" style="fill:url(#SVGID_14_)"/><linearGradient id="SVGID_15_" gradientUnits="userSpaceOnUse" x1="482.787" y1="483.323" x2="559.605" y2="616.376"><stop offset=".116" stop-color="#DEE4FF"/><stop offset=".847" stop-color="#C6D5F4"/></linearGradient><circle cx="521.2" cy="549.85" r="76.81" style="fill:url(#SVGID_15_)"/><path class="st26" d="M538.5 547.62l23.01-23.01c4.44-4.44 4.44-11.63 0-16.06-4.44-4.44-11.63-4.44-16.06 0l-23.01 23.01-23.01-23.01c-4.44-4.44-11.63-4.44-16.06 0-4.44 4.44-4.44 11.63 0 16.06l23.01 23.01-23.01 23.01c-4.44 4.44-4.44 11.63 0 16.06 2.22 2.22 5.13 3.33 8.03 3.33 2.91 0 5.81-1.11 8.03-3.33l23.01-23.01 23.01 23.01c2.22 2.22 5.13 3.33 8.03 3.33s5.81-1.11 8.03-3.33c4.44-4.44 4.44-11.63 0-16.06l-23.01-23.01z"/></g><g><linearGradient id="SVGID_16_" gradientUnits="userSpaceOnUse" x1="232.569" y1="558.709" x2="232.569" y2="484.191"><stop offset="0" stop-color="#C3D5FD"/><stop offset="1" stop-color="#1A90FC"/></linearGradient><path d="M224.88 484.54s-18.08-2.5-23.95 5.81-8.02 29.58-8.02 29.58l13.61-.72-1.15 24.78 25.11 14.72 35.77-19.24-5.44-22.45 11.43-2.98s-3.4-32.58-19.31-27.77c-8.17.87-10.74.73-10.74.73s-2.15 6.85-9.53 6.27c-7.38-.59-7.78-8.73-7.78-8.73z" style="fill:url(#SVGID_16_)"/><linearGradient id="SVGID_17_" gradientUnits="userSpaceOnUse" x1="233.602" y1="471.483" x2="233.602" y2="495.089"><stop offset="0" stop-color="#F4AE98"/><stop offset="1" stop-color="#FAD1BB"/></linearGradient><path d="M226.69 474.3l-3.76 16.76c-.18.79.23 1.59.98 1.89 1.94.79 5.83 2.13 9.82 2.13 4.15 0 8.06-2.27 9.86-3.48.62-.42.88-1.19.64-1.9l-5.75-17.09a1.643 1.643 0 00-1.86-1.1l-8.61 1.53c-.65.11-1.18.61-1.32 1.26z" style="fill:url(#SVGID_17_)"/><linearGradient id="SVGID_18_" gradientUnits="userSpaceOnUse" x1="-816.068" y1="920.854" x2="-804.529" y2="839.612" gradientTransform="rotate(-8.082 -2795.015 -6505.71)"><stop offset="0" stop-color="#C3D5FD"/><stop offset="1" stop-color="#1A90FC"/></linearGradient><path d="M204.24 487.44c5.26-1.75 12.4-.58 12.69 11.22s-11.28 30.62-7.13 37.16c4.2 6.63 13.17 16.05 18.89 21.41-1.33 6.3-4.91 11.61-4.91 11.61s-21.05-9.71-30.21-19.44c-9.17-9.73-4.54-32.03-.3-47.9 3.19-11.95 10.97-14.06 10.97-14.06z" style="fill:url(#SVGID_18_)"/><linearGradient id="SVGID_19_" gradientUnits="userSpaceOnUse" x1="-6575.898" y1="102.823" x2="-6564.359" y2="21.581" gradientTransform="scale(-1 1) rotate(-8.082 -118.103 -44396.273)"><stop offset="0" stop-color="#C3D5FD"/><stop offset="1" stop-color="#1A90FC"/></linearGradient><path d="M259.39 487.44c-5.26-1.75-12.4-.58-12.69 11.22s11.28 30.62 7.13 37.16c-4.2 6.63-13.17 16.05-18.89 21.41 1.33 6.3 4.91 11.61 4.91 11.61s21.05-9.71 30.21-19.44c9.17-9.73 4.54-32.03.3-47.9-3.19-11.95-10.97-14.06-10.97-14.06z" style="fill:url(#SVGID_19_)"/><linearGradient id="SVGID_20_" gradientUnits="userSpaceOnUse" x1="232.569" y1="531.798" x2="232.569" y2="579.152"><stop offset="0" stop-color="#275C89"/><stop offset="1" stop-color="#013F7C"/></linearGradient><path d="M206.79 579.15h51.1c2.31 0 4.38-1.75 5.19-4.4l10.3-33.89c1.34-4.4-1.33-9.07-5.19-9.07h-71.23c-3.82 0-6.48 4.6-5.21 8.98l9.84 33.89c.77 2.69 2.86 4.49 5.2 4.49z" style="fill:url(#SVGID_20_)"/><path class="st26" d="M204.75 594.74s-.79-1.74-1.4-1.93c-.61-.19-9.35-.54-12.53-1.36-3.19-.83-12.38-2.14-16.32 1.59-3.43 3.25-4.56 10.84.66 15.2 1.96 1.7 3.89 2.2 11.14 1.86 7.26-.34 17.78-.26 20.09-3.63-.07-5.55-1.64-11.73-1.64-11.73z"/><linearGradient id="SVGID_21_" gradientUnits="userSpaceOnUse" x1="-5720.751" y1="599.589" x2="-5703.986" y2="599.589" gradientTransform="matrix(-1 0 0 1 -5504.059 0)"><stop offset="0" stop-color="#F4B9A4"/><stop offset=".652" stop-color="#FAD1BB"/></linearGradient><path d="M212.86 592.81s-8.44 1.9-11.45 1.62-.49 11.87-.49 11.87 8.05.56 15.18-1.51c2.4-9.3-3.24-11.98-3.24-11.98z" style="fill:url(#SVGID_21_)"/><linearGradient id="SVGID_22_" gradientUnits="userSpaceOnUse" x1="209.839" y1="581.112" x2="296.322" y2="581.112"><stop offset="0" stop-color="#18264B"/><stop offset=".652" stop-color="#2D3C65"/></linearGradient><path d="M209.84 592.37l4.39 13.64s94.25-12.41 80.78-43c-11.27-25.57-85.17 29.36-85.17 29.36z" style="fill:url(#SVGID_22_)"/><linearGradient id="SVGID_23_" gradientUnits="userSpaceOnUse" x1="190.339" y1="591.445" x2="190.339" y2="609.24"><stop offset="0" stop-color="#FFDB80"/><stop offset="1" stop-color="#FFBB24"/></linearGradient><path d="M203.66 593.42s3.45 1.35 3.89 6.17c.44 4.82-.99 8.05-8.33 8.94s-9.21.56-13.81.67-11.29.56-12.27-8.2c-.99-8.75 7.96-10.98 17.24-8.75 2.92.56 13.28 1.17 13.28 1.17z" style="fill:url(#SVGID_23_)"/><g><path class="st26" d="M263.56 594.74s.79-1.74 1.4-1.93c.61-.19 9.35-.54 12.53-1.36 3.19-.83 11.75-2.2 16.08 1.49 4.01 3.42 4.27 11-.29 15.18-1.96 1.7-4.02 2.32-11.28 1.98-7.26-.34-17.78-.26-20.09-3.63.09-5.55 1.65-11.73 1.65-11.73z"/><linearGradient id="SVGID_24_" gradientUnits="userSpaceOnUse" x1="251.623" y1="599.589" x2="268.387" y2="599.589"><stop offset="0" stop-color="#F4B9A4"/><stop offset=".652" stop-color="#FAD1BB"/></linearGradient><path d="M255.45 592.81s8.44 1.9 11.45 1.62.49 11.87.49 11.87-8.05.56-15.18-1.51c-2.4-9.3 3.24-11.98 3.24-11.98z" style="fill:url(#SVGID_24_)"/><linearGradient id="SVGID_25_" gradientUnits="userSpaceOnUse" x1="171.993" y1="581.112" x2="258.476" y2="581.112"><stop offset="0" stop-color="#445677"/><stop offset="1" stop-color="#293861"/></linearGradient><path d="M258.48 592.37L254.09 606s-94.25-12.41-80.78-43c11.26-25.56 85.17 29.37 85.17 29.37z" style="fill:url(#SVGID_25_)"/><linearGradient id="SVGID_26_" gradientUnits="userSpaceOnUse" x1="277.976" y1="591.445" x2="277.976" y2="609.24"><stop offset="0" stop-color="#FFDB80"/><stop offset="1" stop-color="#FFBB24"/></linearGradient><path d="M264.66 593.42s-3.45 1.35-3.89 6.17.99 8.05 8.33 8.94c7.34.89 9.21.56 13.81.67s11.29.56 12.27-8.2c.99-8.75-7.96-10.98-17.24-8.75-2.92.56-13.28 1.17-13.28 1.17z" style="fill:url(#SVGID_26_)"/></g><linearGradient id="SVGID_27_" gradientUnits="userSpaceOnUse" x1="249.053" y1="466.067" x2="218.202" y2="466.067"><stop offset="0" stop-color="#F4B9A4"/><stop offset=".652" stop-color="#FAD1BB"/></linearGradient><path d="M248.39 467.6c.56-.8.91-2.84.46-3.44-.83-.67-1.61-.28-2.21.3.14-4.88-.31-8.94-.41-9.97-.3-2.99-3.35-8.48-13.3-8.48-9.95 0-11.88 7.18-11.88 7.18s-.65 5.08-.46 11.24c-.59-.57-1.37-.93-2.18-.27-.46.6-.1 2.64.46 3.44.56.8.91 2.69 1.02 3.74.1.99-.62 3.65 2 3.31 1.56 6.25 7.89 11.47 11.82 11.47 4.3 0 10.01-5.26 11.63-11.48 2.68.37 1.95-2.31 2.04-3.31.09-1.04.45-2.93 1.01-3.73z" style="fill:url(#SVGID_27_)"/><linearGradient id="SVGID_28_" gradientUnits="userSpaceOnUse" x1="213.957" y1="454.142" x2="249.774" y2="454.142"><stop offset="0" stop-color="#4F5C7C"/><stop offset="1" stop-color="#274168"/></linearGradient><path d="M240.1 443.88s-1.94-6.12-9.39-4.65c-7.44 1.46-7.95 4.98-10.87 5.12-4.99.23-8.97 6.45-2.58 13.03 2.85 2.93.44 4.19 1.79 6.78s1.34 5.12 1.34 5.12 2.38-7.6.81-10.84c-.81-1.67 2.77-2.13 7.24-1.73s11.51-1.08 12.06-4.12c1.32 6.23 2.64 6.88 4.31 7.83 1.68.95 1.78 8.48 1.78 8.48s.3-5.53 1.47-6.78c.96-2.04 2.85-10.07.72-12.02s-.32-8.19-8.68-6.22z" style="fill:url(#SVGID_28_)"/></g></g></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/images/404.svg b/frontend/new-web/src/assets/images/404.svg
new file mode 100644
index 00000000..5244d8d4
--- /dev/null
+++ b/frontend/new-web/src/assets/images/404.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800" enable-background="new 0 0 800 800"><style>.st49{fill:#d4e4fe}</style><g id="图层_5"><linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="401.193" y1="159.763" x2="401.193" y2="715.254"><stop offset="0" stop-color="#F4F2FB"/><stop offset="1" stop-color="#E1EEF5"/></linearGradient><path d="M484.45 201.12c-38.37 30.29-120.74 33.81-181.17-2.22s-172-31.38-202.22 34.87 37.19 131.33 12.78 178.98S8.08 527.79 63.87 609.15s126.6 60.62 169.22 52.45c84.17-16.13 189.79 115.67 308.62 16.13 68.47-57.35 170.44 42.09 210.17-81.36 32.78-101.86-85.67-139.5-49.97-208.03 37.96-72.88 30.67-159.24-10.46-201.06-38.31-38.96-140.75-38.46-207 13.84z" style="fill:url(#SVGID_1_)"/><linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="484.537" y1="604.68" x2="484.537" y2="493.367"><stop offset=".34" stop-color="#B0B9E1"/><stop offset=".866" stop-color="#EAF0F8"/></linearGradient><path d="M285.1 583.44c1.77-1.63 77.74-90.07 77.74-90.07h321.13l-99.5 111.31-299.37-21.24z" style="fill:url(#SVGID_2_)"/><linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="616.023" y1="627.266" x2="657.332" y2="555.716"><stop offset="0" stop-color="#B0B9E1"/><stop offset=".866" stop-color="#EAF0F8"/></linearGradient><path d="M604.49 620.61L659.43 556.93 633.22 624.12z" style="fill:url(#SVGID_3_)"/><linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="116.275" y1="540.149" x2="116.275" y2="402.974"><stop offset=".003" stop-color="#9A9ADB"/><stop offset=".789" stop-color="#CECDF1"/></linearGradient><path d="M117.06 403.22s-.22-.57-.52.04c-2.7 5.49-27.15 64.96-29.09 110.86 0 0-4.08 26.37 30.11 26.02 28.54-.29 27.78-24.6 27.68-32.79-.39-33.22-28.18-104.13-28.18-104.13z" style="fill:url(#SVGID_4_)"/><linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="116.277" y1="418.206" x2="116.277" y2="569.34"><stop offset="0" stop-color="#ECF1FB"/><stop offset=".818" stop-color="#AFB0E7"/></linearGradient><path d="M116.28 569.34c-.55 0-1-.45-1-1V419.21c0-.55.45-1 1-1s1 .45 1 1v149.13c0 .55-.45 1-1 1z" style="fill:url(#SVGID_5_)"/><linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="617.404" y1="448.627" x2="617.404" y2="360.303"><stop offset=".227" stop-color="#CCD4F4"/><stop offset=".789" stop-color="#ECF1FB"/></linearGradient><path d="M617.91 360.46s-.14-.37-.33.03c-1.74 3.53-17.48 41.83-18.73 71.38 0 0-2.63 16.98 19.39 16.76 18.38-.18 17.89-15.84 17.82-21.11-.25-21.4-18.15-67.06-18.15-67.06z" style="fill:url(#SVGID_6_)"/><linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="617.405" y1="370.11" x2="617.405" y2="467.422"><stop offset="0" stop-color="#ECF1FB"/><stop offset="1" stop-color="#A6A8E2"/></linearGradient><path d="M617.41 467.42c-.36 0-.64-.29-.64-.64v-96.02c0-.36.29-.64.64-.64.36 0 .64.29.64.64v96.02c0 .35-.29.64-.64.64z" style="fill:url(#SVGID_7_)"/><linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="463.322" y1="86.02" x2="428.568" y2="146.217"><stop offset="0" stop-color="#FFDB80"/><stop offset="1" stop-color="#FFBB24"/></linearGradient><circle cx="445.95" cy="116.12" r="34.75" style="fill:url(#SVGID_8_)"/><linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="420.985" y1="116.487" x2="420.985" y2="173.941"><stop offset="0" stop-color="#F9FAFE"/><stop offset="1" stop-color="#E5EDF7"/></linearGradient><path d="M465.72 135.07h-34.57c-2.23-10.61-11.65-18.58-22.93-18.58s-20.69 7.97-22.93 18.58h-9.05c-10.73 0-19.44 8.7-19.44 19.44 0 10.73 8.7 19.44 19.44 19.44h89.47c10.73 0 19.44-8.7 19.44-19.44.01-10.74-8.69-19.44-19.43-19.44z" style="fill:url(#SVGID_9_)"/><g><linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="688.006" y1="537.867" x2="688.006" y2="510.039"><stop offset=".227" stop-color="#AFB0E7"/><stop offset="1" stop-color="#ECF1FB"/></linearGradient><circle cx="688.01" cy="523.95" r="13.91" style="fill:url(#SVGID_10_)"/><linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="688.056" y1="513.553" x2="688.056" y2="558.349"><stop offset="0" stop-color="#DDE1F6"/><stop offset=".818" stop-color="#A6A8E2"/></linearGradient><path d="M688.06 558.35c-.24 0-.43-.19-.43-.43v-43.94c0-.24.19-.43.43-.43s.43.19.43.43v43.94a.44.44 0 01-.43.43z" style="fill:url(#SVGID_11_)"/></g><g><linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="2879.853" y1="308.382" x2="2737.462" y2="450.774" gradientTransform="matrix(-1 0 0 1 3207.18 0)"><stop offset="0" stop-color="#C8CBF2"/><stop offset="1" stop-color="#AFB0E7"/></linearGradient><path d="M270.73 392.79l91.4-73.3c7.43 11.92 20.65 19.87 35.7 19.87 16.43 0 30.69-9.48 37.6-23.26l92.11 76.85 10.83-12.98-98.5-82.19c0-.16.01-.31.01-.47 0-23.18-18.86-42.04-42.05-42.04-23.18 0-42.04 18.86-42.04 42.04 0 1.8.13 3.58.35 5.32l-95.98 76.97 10.57 13.19zm101.96-95.48c0-13.86 11.28-25.14 25.14-25.14s25.14 11.28 25.14 25.14-11.28 25.14-25.14 25.14-25.14-11.27-25.14-25.14z" style="fill:url(#SVGID_12_)"/><linearGradient id="SVGID_13_" gradientUnits="userSpaceOnUse" x1="2814.247" y1="259.815" x2="2814.247" y2="392.836" gradientTransform="matrix(-1 0 0 1 3207.18 0)"><stop offset=".116" stop-color="#DEE4FF"/><stop offset=".847" stop-color="#C6D5F4"/></linearGradient><path d="M268.75 392.68l88.31-70.82c7.18 11.51 19.95 19.2 34.49 19.2 15.88 0 29.65-9.16 36.33-22.47l88.99 74.25 10.46-12.54-95.17-79.41c0-.15.01-.3.01-.46 0-22.4-18.22-40.62-40.62-40.62s-40.62 18.22-40.62 40.62c0 1.74.12 3.46.34 5.14l-92.73 74.37 10.21 12.74zm98.51-92.24c0-13.4 10.9-24.29 24.29-24.29 13.4 0 24.29 10.9 24.29 24.29 0 13.4-10.9 24.29-24.29 24.29-13.4 0-24.29-10.9-24.29-24.29z" style="fill:url(#SVGID_13_)"/><linearGradient id="SVGID_14_" gradientUnits="userSpaceOnUse" x1="2966.463" y1="329.794" x2="2654.707" y2="641.55" gradientTransform="matrix(-1 0 0 1 3203.43 0)"><stop offset="0" stop-color="#C8CBF2"/><stop offset="1" stop-color="#AFB0E7"/></linearGradient><path d="M230.6 619.91h326.35c17.89 0 32.39-14.5 32.39-32.39V388.31c0-21.39-17.34-38.72-38.72-38.72H230.6c-17.89 0-32.39 14.5-32.39 32.39v205.54c-.01 17.88 14.5 32.39 32.39 32.39z" style="fill:url(#SVGID_14_)"/><linearGradient id="SVGID_15_" gradientUnits="userSpaceOnUse" x1="2716.773" y1="319.563" x2="2914.293" y2="661.678" gradientTransform="matrix(-1 0 0 1 3203.43 0)"><stop offset="0" stop-color="#EBF2FA"/><stop offset=".525" stop-color="#FDFEFF"/></linearGradient><path d="M223.6 619.91h328.59c14.03 0 25.4-11.37 25.4-25.4V386.73c0-14.03-11.37-25.4-25.4-25.4H223.6c-14.03 0-25.4 11.37-25.4 25.4v207.78c0 14.03 11.38 25.4 25.4 25.4z" style="fill:url(#SVGID_15_)"/><linearGradient id="SVGID_16_" gradientUnits="userSpaceOnUse" x1="2815.495" y1="361.334" x2="2815.495" y2="425.526" gradientTransform="matrix(-1 0 0 1 3203.43 0)"><stop offset=".116" stop-color="#DEE4FF"/><stop offset=".847" stop-color="#BACBEE"/></linearGradient><path d="M198.24 425.53h379.39v-38.79c0-14.03-11.37-25.4-25.4-25.4H223.64c-14.03 0-25.4 11.37-25.4 25.4v38.79z" style="fill:url(#SVGID_16_)"/><linearGradient id="SVGID_17_" gradientUnits="userSpaceOnUse" x1="276.445" y1="488.742" x2="350.685" y2="531.604"><stop offset=".116" stop-color="#DEE4FF"/><stop offset=".847" stop-color="#BACBEE"/></linearGradient><path d="M328.82 457.46H307.7c-1.27 0-2.46.59-3.24 1.59L261.91 514c-.56.72-.86 1.6-.86 2.51v23.15c0 2.26 1.83 4.09 4.09 4.09h41.34c2.26 0 4.09 1.83 4.09 4.09v13.46c0 2.26 1.83 4.09 4.09 4.09h14.14c2.26 0 4.09-1.83 4.09-4.09v-13.46c0-2.26 1.83-4.09 4.09-4.09s4.09-1.83 4.09-4.09V525.5c0-2.26-1.83-4.09-4.09-4.09s-4.09-1.83-4.09-4.09v-55.77a4.059 4.059 0 00-4.07-4.09zm-39.3 57.35l13.74-17.74c2.39-3.08 7.33-1.4 7.33 2.51v17.74c0 2.26-1.83 4.09-4.09 4.09h-13.74c-3.41 0-5.33-3.91-3.24-6.6z" style="fill:url(#SVGID_17_)"/><linearGradient id="SVGID_18_" gradientUnits="userSpaceOnUse" x1="455.095" y1="488.742" x2="529.335" y2="531.604"><stop offset=".116" stop-color="#DEE4FF"/><stop offset=".847" stop-color="#BACBEE"/></linearGradient><path d="M511.56 517.32v-55.77c0-2.26-1.83-4.09-4.09-4.09h-21.12c-1.27 0-2.46.59-3.24 1.59L440.56 514c-.56.72-.86 1.6-.86 2.51v23.15c0 2.26 1.83 4.09 4.09 4.09h41.34c2.26 0 4.09 1.83 4.09 4.09v13.46c0 2.26 1.83 4.09 4.09 4.09h14.14c2.26 0 4.09-1.83 4.09-4.09v-13.46c0-2.26 1.83-4.09 4.09-4.09s4.09-1.83 4.09-4.09V525.5c0-2.26-1.83-4.09-4.09-4.09-2.24 0-4.07-1.83-4.07-4.09zm-43.39-2.51l13.74-17.74c2.39-3.08 7.33-1.4 7.33 2.51v17.74c0 2.26-1.83 4.09-4.09 4.09H471.4c-3.4 0-5.32-3.91-3.23-6.6z" style="fill:url(#SVGID_18_)"/><linearGradient id="SVGID_19_" gradientUnits="userSpaceOnUse" x1="339.488" y1="482.174" x2="441.31" y2="540.961"><stop offset=".116" stop-color="#DEE4FF"/><stop offset=".847" stop-color="#BACBEE"/></linearGradient><path d="M356.4 566.16h68c2.26 0 4.09-1.83 4.09-4.09v-101c0-2.26-1.83-4.09-4.09-4.09h-68c-2.26 0-4.09 1.83-4.09 4.09v101c0 2.26 1.83 4.09 4.09 4.09zm49.76-82.76v56.34c0 2.26-1.83 4.09-4.09 4.09h-23.34c-2.26 0-4.09-1.83-4.09-4.09V483.4c0-2.26 1.83-4.09 4.09-4.09h23.34c2.26 0 4.09 1.83 4.09 4.09z" style="fill:url(#SVGID_19_)"/></g><g><linearGradient id="SVGID_20_" gradientUnits="userSpaceOnUse" x1="871.514" y1="4485.232" x2="872.065" y2="4498.77" gradientTransform="rotate(2.333 95904.663 -3670.234)"><stop offset="0" stop-color="#FFDB80"/><stop offset="1" stop-color="#FFBB24"/></linearGradient><path d="M605.95 610.6s3.25 4.88 10.55 1.06c3.91 2.72 8.92 4.97 12.39 5.88 3.47.91 3.68 5.4 3.12 6.61-4.66-.47-18.14.64-27.3-2.94.72-7.53 1.24-10.61 1.24-10.61z" style="fill:url(#SVGID_20_)"/><path class="st49" d="M604.06 623.84l.43-3.23s10.54 2.63 28.38 1.03c.17 1.66.35 2.48.35 2.48s-13.56 2.02-29.16-.28z"/><linearGradient id="SVGID_21_" gradientUnits="userSpaceOnUse" x1="-1427.263" y1="-235.579" x2="-1409.896" y2="-215.318" gradientTransform="rotate(40.6 -1575.457 2818.52)"><stop offset="0" stop-color="#FFDB80"/><stop offset="1" stop-color="#FFBB24"/></linearGradient><path d="M520.47 596.12s-.05 5.81 7.27 7.94c1.95 5-3.73 11.79 5.37 12.42 3.34.23 1.75 5.12.73 5.63-10.95 4.01-14.63-10.12-19.62-18.98 4.32-5.09 6.25-7.01 6.25-7.01z" style="fill:url(#SVGID_21_)"/><linearGradient id="SVGID_22_" gradientUnits="userSpaceOnUse" x1="-3772.01" y1="604.486" x2="-3772.01" y2="502.198" gradientTransform="matrix(-1 0 0 1 -3222.68 0)"><stop offset="0" stop-color="#445677"/><stop offset="1" stop-color="#293861"/></linearGradient><path d="M569.3 502.2s-14.44-.26-17.67 18.85c-3.23 19.11 1.57 23.66-5.38 37.29-3.62 7.1-27.15 41.12-27.15 41.12l6.83 5.03s37.94-34.72 43.52-48.71 9.83-28.83 10.13-41.46c.28-12.62-10.28-12.12-10.28-12.12z" style="fill:url(#SVGID_22_)"/><linearGradient id="SVGID_23_" gradientUnits="userSpaceOnUse" x1="-3839.642" y1="559.801" x2="-3786.238" y2="559.801" gradientTransform="matrix(-1 0 0 1 -3222.68 0)"><stop offset="0" stop-color="#445677"/><stop offset="1" stop-color="#293861"/></linearGradient><path d="M572.72 506.19s14.87 3.53 15.75 3.98c.44.23 2.89 7.07 5.24 13.95 5.04 6.87 23.02 32.28 23.21 45.51.29 20.13-.96 43.67-.96 43.67l-9.24.11s-3.5-38.9-5.85-42.31c-.42-.61-1.29-1.95-2.42-3.74-5.14-6.22-16.5-16.65-28.16-27.07-16.45-14.66 2.43-34.1 2.43-34.1z" style="fill:url(#SVGID_23_)"/><linearGradient id="SVGID_24_" gradientUnits="userSpaceOnUse" x1="5317.908" y1="132.095" x2="5317.908" y2="56.817" gradientTransform="rotate(26.086 2112.504 -9908.036)"><stop offset="0" stop-color="#C3D5FD"/><stop offset="1" stop-color="#1A90FC"/></linearGradient><path d="M603.14 448.91s-10.69-8.37-16.99-4.36c-6.3 4-14.27 18.91-14.27 18.91l8.85 4.38-23.8 39.67 40.69 21.83 14.6-42.28 11.79.69s7.96-25.24-3.62-27.43c-5.45-2.3-7.04-3.34-7.04-3.34s-3.49 4.27-7.99 1.18-2.22-9.25-2.22-9.25z" style="fill:url(#SVGID_24_)"/><linearGradient id="SVGID_25_" gradientUnits="userSpaceOnUse" x1="5161.945" y1="1134.369" x2="5171.26" y2="1068.78" gradientTransform="rotate(18.006 4848.87 -13687.47)"><stop offset="0" stop-color="#C3D5FD"/><stop offset="1" stop-color="#1A90FC"/></linearGradient><path d="M589.15 443.6c3.88.61 8.04 4.05 4.56 12.85-3.48 8.8-16.66 18.5-16.06 24.82.6 6.4 3.37 16.58 5.33 22.6-2.8 4.17-6.72 6.78-6.72 6.78s-10.33-14.75-13.12-25.23 7.07-25.25 14.69-35.41c5.73-7.67 11.32-6.41 11.32-6.41z" style="fill:url(#SVGID_25_)"/><linearGradient id="SVGID_26_" gradientUnits="userSpaceOnUse" x1="-8924.659" y1="-865.525" x2="-8915.544" y2="-929.706" gradientTransform="scale(-1 1) rotate(-34.172 -2504.53 -13720.806)"><stop offset="0" stop-color="#C3D5FD"/><stop offset="1" stop-color="#1A90FC"/></linearGradient><path d="M624.12 463.5c-2.79-3.19-7.68-4.9-11.53 3.69s-2.35 26.64-7.02 29.97c-4.72 3.37-13.34 7.07-18.62 8.96-1.12 5.12-.49 10.33-.49 10.33s16.36.44 25.19-3.42c8.83-3.86 12.82-21.97 15.06-35.2 1.69-9.97-2.59-14.33-2.59-14.33z" style="fill:url(#SVGID_26_)"/><linearGradient id="SVGID_27_" gradientUnits="userSpaceOnUse" x1="-3813.896" y1="480.898" x2="-3841.811" y2="423.883" gradientTransform="matrix(-1 0 0 1 -3222.68 0)"><stop offset="0" stop-color="#4F5C7C"/><stop offset="1" stop-color="#274168"/></linearGradient><path d="M590.9 439.68c.43-4.69 4.5-7.9 9.3-7.17.4-1.31 4.44-2.98 5.38-4.6 3.5-6.03 9.26-7 14-3.56 9.79 2.79 8.01 12.2 4.75 21.55 2.8 5.61 1.52 12.41-.06 15.18 4.75 5.07 2.09 11.58-1.39 16.52-.4.56-.82 1.06-1.25 1.52-.21 5.85-8.34 7.86-11.32 4.89-3.17-3.16-3.57-4.49-9.32-1.76-5.75 2.73-11.24-1.54-11.3-7.34-.06-5.8-4.28-4.1-6.12-5.63-3.33-2.77-1.15-5.93-1.15-5.93s-4.85-.26-6.01-7.38c-1.33-16.99 11.95-17.08 14.49-16.29z" style="fill:url(#SVGID_27_)"/><path class="st49" d="M515.38 601.24s4.92 12.03 5.91 13.61 5.9 9.27 14.26 5.05c-.04 1.49-.11 2.43-.11 2.43s-9.42 6.26-15.33-4.62c-5.91-10.88-6.75-14.63-6.75-14.63l2.02-1.84z"/></g></g></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/images/500.svg b/frontend/new-web/src/assets/images/500.svg
new file mode 100644
index 00000000..9c020927
--- /dev/null
+++ b/frontend/new-web/src/assets/images/500.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800" enable-background="new 0 0 800 800"><style>.st26{fill:#fff}</style><g id="图层_16"><linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="402.832" y1="159.843" x2="402.832" y2="715.335"><stop offset="0" stop-color="#F4F2FB"/><stop offset="1" stop-color="#E1EEF5"/></linearGradient><path d="M486.09 201.2c-38.37 30.29-120.74 33.81-181.17-2.22s-172-31.38-202.22 34.87 37.19 131.33 12.78 178.98S9.72 527.87 65.5 609.23s126.6 60.62 169.22 52.45c84.17-16.13 189.79 115.67 308.62 16.13 68.47-57.35 170.44 42.09 210.17-81.36 32.78-101.86-85.67-139.5-49.97-208.03 37.96-72.88 30.67-159.24-10.46-201.06-38.3-38.96-140.75-38.46-206.99 13.84z" style="fill:url(#SVGID_1_)"/><linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="117.913" y1="540.229" x2="117.913" y2="403.055"><stop offset=".227" stop-color="#B7ACE0"/><stop offset=".789" stop-color="#E8E7FA"/></linearGradient><path d="M118.7 403.3s-.22-.57-.52.04c-2.7 5.49-27.15 64.96-29.09 110.86 0 0-4.08 26.37 30.11 26.02 28.54-.29 27.78-24.6 27.68-32.79-.39-33.22-28.18-104.13-28.18-104.13z" style="fill:url(#SVGID_2_)"/><linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="117.915" y1="418.287" x2="117.915" y2="569.42"><stop offset="0" stop-color="#ECF1FB"/><stop offset=".818" stop-color="#AFB0E7"/></linearGradient><path d="M117.92 569.42c-.55 0-1-.45-1-1V419.29c0-.55.45-1 1-1s1 .45 1 1v149.13c0 .55-.45 1-1 1z" style="fill:url(#SVGID_3_)"/><linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="619.042" y1="448.707" x2="619.042" y2="360.383"><stop offset=".227" stop-color="#CCD4F4"/><stop offset=".789" stop-color="#ECF1FB"/></linearGradient><path d="M619.55 360.54s-.14-.37-.33.03c-1.74 3.53-17.48 41.83-18.73 71.38 0 0-2.63 16.98 19.39 16.76 18.38-.18 17.89-15.84 17.82-21.11-.26-21.4-18.15-67.06-18.15-67.06z" style="fill:url(#SVGID_4_)"/><linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="619.043" y1="370.19" x2="619.043" y2="467.503"><stop offset="0" stop-color="#ECF1FB"/><stop offset="1" stop-color="#A6A8E2"/></linearGradient><path d="M619.04 467.5c-.36 0-.64-.29-.64-.64v-96.02c0-.36.29-.64.64-.64s.64.29.64.64v96.02c.01.35-.28.64-.64.64z" style="fill:url(#SVGID_5_)"/><linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="464.96" y1="86.101" x2="430.206" y2="146.297"><stop offset="0" stop-color="#FFDB80"/><stop offset="1" stop-color="#FFBB24"/></linearGradient><circle cx="447.58" cy="116.2" r="34.75" style="fill:url(#SVGID_6_)"/><linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="422.623" y1="116.567" x2="422.623" y2="174.021"><stop offset="0" stop-color="#F9FAFE"/><stop offset="1" stop-color="#E5EDF7"/></linearGradient><path d="M467.36 135.15h-34.57c-2.23-10.61-11.65-18.58-22.93-18.58s-20.69 7.97-22.93 18.58h-9.05c-10.73 0-19.44 8.7-19.44 19.44 0 10.73 8.7 19.44 19.44 19.44h89.47c10.73 0 19.44-8.7 19.44-19.44.01-10.74-8.7-19.44-19.43-19.44z" style="fill:url(#SVGID_7_)"/><linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="689.644" y1="537.948" x2="689.644" y2="510.119"><stop offset=".227" stop-color="#AFB0E7"/><stop offset="1" stop-color="#ECF1FB"/></linearGradient><circle cx="689.64" cy="524.03" r="13.91" style="fill:url(#SVGID_8_)"/><linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="689.694" y1="513.633" x2="689.694" y2="558.429"><stop offset="0" stop-color="#DDE1F6"/><stop offset=".818" stop-color="#A6A8E2"/></linearGradient><path d="M689.69 558.43c-.24 0-.43-.19-.43-.43v-43.94c0-.24.19-.43.43-.43s.43.19.43.43V558c0 .24-.19.43-.43.43z" style="fill:url(#SVGID_9_)"/><linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="289.384" y1="477.19" x2="289.384" y2="411.226"><stop offset="0" stop-color="#B0B9E1"/><stop offset="1" stop-color="#E7EFF7"/></linearGradient><path d="M202.07 451.28L270.1 411.23 376.7 411.23 315.15 477.19 237.41 476.01z" style="fill:url(#SVGID_10_)"/><linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="454.145" y1="502.809" x2="454.145" y2="420.65"><stop offset="0" stop-color="#B0B9E1"/><stop offset="1" stop-color="#E7EFF7"/></linearGradient><path d="M386.71 479.55L431.76 420.65 521.58 420.65 423.81 502.81 394.37 495.15z" style="fill:url(#SVGID_11_)"/><linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="589.016" y1="472.132" x2="589.016" y2="397.68"><stop offset="0" stop-color="#B0B9E1"/><stop offset="1" stop-color="#E7EFF7"/></linearGradient><path d="M501.26 458.64l64.79-60.96h110.72l-48.99 66.61a19.243 19.243 0 01-17.85 7.7l-108.67-13.35z" style="fill:url(#SVGID_12_)"/><linearGradient id="SVGID_13_" gradientUnits="userSpaceOnUse" x1="314.267" y1="607.349" x2="314.267" y2="497.361"><stop offset="0" stop-color="#B0B9E1"/><stop offset="1" stop-color="#E7EFF7"/></linearGradient><path d="M212.23 592.77L303.67 497.36 416.3 497.36 297.04 607.35 247.57 604.7z" style="fill:url(#SVGID_13_)"/><g><linearGradient id="SVGID_14_" gradientUnits="userSpaceOnUse" x1="515.604" y1="312.867" x2="613.092" y2="481.721"><stop offset="0" stop-color="#C8CBF2"/><stop offset="1" stop-color="#AFB0E7"/></linearGradient><path d="M564.35 296.53c-41.79 0-75.67 33.6-75.67 75.05v51.43c0 41.45 33.88 75.05 75.67 75.05s75.67-33.6 75.67-75.05v-51.43c-.01-41.45-33.88-75.05-75.67-75.05zm23.82 137.83c0 13.05-10.67 23.63-23.82 23.63-13.16 0-23.82-10.58-23.82-23.63v-74.13c0-13.05 10.67-23.63 23.82-23.63 13.16 0 23.82 10.58 23.82 23.63v74.13z" style="fill:url(#SVGID_14_)"/><linearGradient id="SVGID_15_" gradientUnits="userSpaceOnUse" x1="513.839" y1="321.619" x2="606.64" y2="482.355"><stop offset=".116" stop-color="#DEE4FF"/><stop offset=".847" stop-color="#BACBEE"/></linearGradient><path d="M560.24 305.91c-39.52 0-71.56 32.04-71.56 71.56v49.03c0 39.52 32.04 71.56 71.56 71.56s71.56-32.04 71.56-71.56v-49.03c0-39.52-32.04-71.56-71.56-71.56zm22.53 131.41c0 12.44-10.09 22.53-22.53 22.53-12.44 0-22.53-10.09-22.53-22.53v-70.67c0-12.44 10.09-22.53 22.53-22.53 12.44 0 22.53 10.09 22.53 22.53v70.67z" style="fill:url(#SVGID_15_)"/><linearGradient id="SVGID_16_" gradientUnits="userSpaceOnUse" x1="217.031" y1="307.363" x2="316.583" y2="479.793"><stop offset="0" stop-color="#C8CBF2"/><stop offset="1" stop-color="#AFB0E7"/></linearGradient><path d="M333.72 412.6c-5.55-58.15-65.99-54.01-90.14-49.98l2.26-15.28 71.49 5.88 8.98-5.88V307.2h-109l-9.09 7.47-14.81 92.41h43.6c22.73-19.99 38.77-11.37 45.38 0 6.34 10.92 7.27 43.26-19.71 43.87-23.34.53-23.13-19.92-23.13-19.92l-41.55.58-8.06 7.52s6.18 59.41 69.73 59.41 77.3-50.09 74.05-85.94z" style="fill:url(#SVGID_16_)"/><linearGradient id="SVGID_17_" gradientUnits="userSpaceOnUse" x1="212.735" y1="311.982" x2="309.699" y2="479.928"><stop offset=".116" stop-color="#DEE4FF"/><stop offset=".847" stop-color="#BACBEE"/></linearGradient><path d="M324.26 415.94c-5.19-55.89-61.65-51.92-84.21-48.04l2.11-14.69h75.17v-38.58H208.14l-14.95 96h40.73c21.23-19.21 36.22-10.93 42.39 0 5.92 10.49 6.79 46.38-18.41 46.97-21.8.51-24.41-19.14-24.41-19.14l-43.54.66s5.78 59.41 65.14 59.41 72.2-48.14 69.17-82.59z" style="fill:url(#SVGID_17_)"/><linearGradient id="SVGID_18_" gradientUnits="userSpaceOnUse" x1="368.459" y1="304.731" x2="452.448" y2="450.205"><stop offset="0" stop-color="#C8CBF2"/><stop offset="1" stop-color="#AFB0E7"/></linearGradient><path d="M387.26 461.26s-54.09-36.72-56.49-83.83c-2.29-45.03 25.47-81.27 76.27-81.27 55.29 0 78.12 47.95 78.12 73.99 0 26.04-10.63 63.25-55.73 93.35-23.53 0-42.17-2.24-42.17-2.24z" style="fill:url(#SVGID_18_)"/><linearGradient id="SVGID_19_" gradientUnits="userSpaceOnUse" x1="366.623" y1="312.428" x2="445.175" y2="448.483"><stop offset=".116" stop-color="#DEE4FF"/><stop offset=".847" stop-color="#BACBEE"/></linearGradient><path d="M384.76 461.29s-51.7-34.94-53.99-79.77c-2.19-42.85 24.35-77.34 72.9-77.34 52.85 0 73.47 45.54 73.47 70.32 0 24.78-12.03 58.72-55.14 87.36-22.49.01-37.24-.57-37.24-.57z" style="fill:url(#SVGID_19_)"/><linearGradient id="SVGID_20_" gradientUnits="userSpaceOnUse" x1="400.418" y1="454.748" x2="417.994" y2="485.191"><stop offset="0" stop-color="#C8CBF2"/><stop offset="1" stop-color="#AFB0E7"/></linearGradient><path d="M414.59 486.78h-16.64c-.85 0-1.64-.44-2.08-1.17l-11.39-18.8c-.7-1.15-.33-2.64.82-3.34 1.15-.69 2.64-.33 3.34.82l10.68 17.62h13.84l10.6-19.05c.65-1.17 2.13-1.6 3.31-.94 1.17.65 1.6 2.13.94 3.31l-11.29 20.3c-.44.77-1.25 1.25-2.13 1.25z" style="fill:url(#SVGID_20_)"/><linearGradient id="SVGID_21_" gradientUnits="userSpaceOnUse" x1="397.841" y1="454.748" x2="415.417" y2="485.191"><stop offset=".116" stop-color="#DEE4FF"/><stop offset=".847" stop-color="#BACBEE"/></linearGradient><path d="M412.01 486.78h-16.64c-.85 0-1.64-.44-2.08-1.17l-11.39-18.8c-.7-1.15-.33-2.64.82-3.34 1.15-.69 2.64-.33 3.34.82l10.68 17.62h13.84l10.6-19.05c.65-1.17 2.13-1.6 3.31-.94 1.17.65 1.6 2.13.94 3.31l-11.29 20.3c-.43.77-1.25 1.25-2.13 1.25z" style="fill:url(#SVGID_21_)"/><linearGradient id="SVGID_22_" gradientUnits="userSpaceOnUse" x1="395.626" y1="441.888" x2="415.816" y2="476.856"><stop offset="0" stop-color="#C8CBF2"/><stop offset="1" stop-color="#AFB0E7"/></linearGradient><path d="M429.22 468.35h-47.66c-2.76 0-5-2.24-5-5V452.9h57.65v10.45c0 2.76-2.23 5-4.99 5z" style="fill:url(#SVGID_22_)"/><linearGradient id="SVGID_23_" gradientUnits="userSpaceOnUse" x1="395.022" y1="445.756" x2="412.776" y2="476.507"><stop offset=".116" stop-color="#DEE4FF"/><stop offset=".847" stop-color="#BACBEE"/></linearGradient><path d="M425.57 468.35h-44.01c-2.76 0-5-2.24-5-5v-6.93h54.01v6.93c0 2.76-2.24 5-5 5z" style="fill:url(#SVGID_23_)"/><linearGradient id="SVGID_24_" gradientUnits="userSpaceOnUse" x1="396.171" y1="472.261" x2="416.697" y2="507.813"><stop offset="0" stop-color="#C8CBF2"/><stop offset="1" stop-color="#AFB0E7"/></linearGradient><path d="M418.79 505.46h-25.7c-4.09 0-7.4-3.31-7.4-7.4v-19.75h40.5v19.75c0 4.09-3.31 7.4-7.4 7.4z" style="fill:url(#SVGID_24_)"/><linearGradient id="SVGID_25_" gradientUnits="userSpaceOnUse" x1="395.099" y1="476.159" x2="413.018" y2="507.195"><stop offset=".116" stop-color="#DEE4FF"/><stop offset=".847" stop-color="#BACBEE"/></linearGradient><path d="M414.04 505.46h-20.95c-4.09 0-7.4-3.31-7.4-7.4v-16.47h35.75v16.47c0 4.09-3.31 7.4-7.4 7.4z" style="fill:url(#SVGID_25_)"/><linearGradient id="SVGID_26_" gradientUnits="userSpaceOnUse" x1="370.752" y1="345.042" x2="439.366" y2="413.656"><stop offset="0" stop-color="#C8CBF2"/><stop offset="1" stop-color="#AFB0E7"/></linearGradient><path d="M404.4 311.4s-17.23 79.51 1.33 135.9c47.84-62.43-1.33-135.9-1.33-135.9z" style="fill:url(#SVGID_26_)"/><linearGradient id="SVGID_27_" gradientUnits="userSpaceOnUse" x1="352.936" y1="350.49" x2="415.513" y2="413.067"><stop offset="0" stop-color="#C8CBF2"/><stop offset="1" stop-color="#AFB0E7"/></linearGradient><path d="M386.43 316.99s-15.24 26.94-16.34 62.72c-.75 24.43 11.93 66.85 11.93 66.85s-20.76-36.07-20.76-70.23 25.17-59.34 25.17-59.34z" style="fill:url(#SVGID_27_)"/><linearGradient id="SVGID_28_" gradientUnits="userSpaceOnUse" x1="389.798" y1="347.846" x2="456.792" y2="414.84"><stop offset="0" stop-color="#C8CBF2"/><stop offset="1" stop-color="#AFB0E7"/></linearGradient><path d="M420.65 316.99s34.1 22.12 34.1 60.99-29.68 68.58-29.68 68.58 23.5-42.18 23.5-70.9c0-14.24-13.98-48.76-27.92-58.67z" style="fill:url(#SVGID_28_)"/><path class="st26" d="M386.43 316.99s-62.13 47.12-4.42 129.57c-7.06-15.6-36.21-73.62 4.42-129.57zM420.65 316.99s62.13 47.12 4.42 129.57c7.07-15.6 36.22-73.62-4.42-129.57zM404.4 311.4s-35.48 79.66 1.33 135.9c32.24-57.5-1.33-135.9-1.33-135.9z"/></g><g><linearGradient id="SVGID_29_" gradientUnits="userSpaceOnUse" x1="234.692" y1="561.708" x2="234.692" y2="486.088"><stop offset="0" stop-color="#C3D5FD"/><stop offset="1" stop-color="#1A90FC"/></linearGradient><path d="M226.89 486.45s-18.35-2.54-24.31 5.89c-5.96 8.43-8.14 30.01-8.14 30.01l13.81-.73-1.16 25.14 25.48 14.94 36.3-19.52-5.52-22.78 11.6-3.03s-3.46-33.06-19.59-28.18c-8.29.89-10.9.74-10.9.74s-2.18 6.95-9.67 6.36c-7.49-.58-7.9-8.84-7.9-8.84z" style="fill:url(#SVGID_29_)"/><linearGradient id="SVGID_30_" gradientUnits="userSpaceOnUse" x1="235.741" y1="473.191" x2="235.741" y2="497.147"><stop offset="0" stop-color="#F4AE98"/><stop offset="1" stop-color="#FAD1BB"/></linearGradient><path d="M228.72 476.05l-3.81 17.01c-.18.8.24 1.61 1 1.92 1.97.8 5.91 2.17 9.97 2.17 4.21 0 8.18-2.3 10-3.53.63-.42.89-1.21.65-1.93l-5.83-17.35a1.681 1.681 0 00-1.89-1.12l-8.74 1.55c-.67.11-1.2.62-1.35 1.28z" style="fill:url(#SVGID_30_)"/><linearGradient id="SVGID_31_" gradientUnits="userSpaceOnUse" x1="-1535.437" y1="750.954" x2="-1523.728" y2="668.51" gradientTransform="rotate(-8.082 -1929.216 -11692.611)"><stop offset="0" stop-color="#C3D5FD"/><stop offset="1" stop-color="#1A90FC"/></linearGradient><path d="M205.94 489.39c5.34-1.77 12.58-.59 12.88 11.39.29 11.98-11.45 31.07-7.24 37.71 4.26 6.73 13.37 16.29 19.17 21.73-1.35 6.4-4.99 11.78-4.99 11.78s-21.36-9.86-30.66-19.73c-9.3-9.87-4.61-32.5-.3-48.61 3.24-12.13 11.14-14.27 11.14-14.27z" style="fill:url(#SVGID_31_)"/><linearGradient id="SVGID_32_" gradientUnits="userSpaceOnUse" x1="-5585.118" y1="175.804" x2="-5573.409" y2="93.36" gradientTransform="scale(-1 1) rotate(-8.082 -118.041 -37329.02)"><stop offset="0" stop-color="#C3D5FD"/><stop offset="1" stop-color="#1A90FC"/></linearGradient><path d="M261.91 489.39c-5.34-1.77-12.58-.59-12.88 11.39-.29 11.98 11.45 31.07 7.24 37.71-4.26 6.73-13.37 16.29-19.17 21.73 1.35 6.4 4.99 11.78 4.99 11.78s21.36-9.86 30.66-19.73c9.3-9.87 4.61-32.5.3-48.61-3.24-12.13-11.14-14.27-11.14-14.27z" style="fill:url(#SVGID_32_)"/><linearGradient id="SVGID_33_" gradientUnits="userSpaceOnUse" x1="234.692" y1="534.399" x2="234.692" y2="582.454"><stop offset="0" stop-color="#275C89"/><stop offset="1" stop-color="#013F7C"/></linearGradient><path d="M208.53 582.45h51.85c2.35 0 4.45-1.78 5.26-4.46l10.45-34.39c1.36-4.46-1.35-9.21-5.26-9.21h-72.29c-3.87 0-6.58 4.67-5.29 9.11l9.98 34.39c.8 2.74 2.92 4.56 5.3 4.56z" style="fill:url(#SVGID_33_)"/><path class="st26" d="M206.46 598.27s-.8-1.76-1.42-1.95c-.62-.19-9.49-.54-12.72-1.38s-12.56-2.17-16.56 1.61c-3.48 3.3-4.63 11 .67 15.43 1.99 1.73 3.94 2.23 11.31 1.89s18.04-.27 20.38-3.68c-.07-5.65-1.66-11.92-1.66-11.92z"/><linearGradient id="SVGID_34_" gradientUnits="userSpaceOnUse" x1="-3991.106" y1="603.193" x2="-3974.093" y2="603.193" gradientTransform="matrix(-1 0 0 1 -3772.525 0)"><stop offset="0" stop-color="#F4B9A4"/><stop offset=".652" stop-color="#FAD1BB"/></linearGradient><path d="M214.69 596.31s-8.56 1.92-11.62 1.64c-3.06-.28-.5 12.05-.5 12.05s8.17.57 15.4-1.53c2.45-9.44-3.28-12.16-3.28-12.16z" style="fill:url(#SVGID_34_)"/><linearGradient id="SVGID_35_" gradientUnits="userSpaceOnUse" x1="211.625" y1="584.443" x2="299.388" y2="584.443"><stop offset="0" stop-color="#18264B"/><stop offset=".652" stop-color="#2D3C65"/></linearGradient><path d="M211.63 595.87l4.45 13.84s95.64-12.6 81.97-43.63c-11.43-25.96-86.42 29.79-86.42 29.79z" style="fill:url(#SVGID_35_)"/><linearGradient id="SVGID_36_" gradientUnits="userSpaceOnUse" x1="191.837" y1="594.929" x2="191.837" y2="612.987"><stop offset="0" stop-color="#FFDB80"/><stop offset="1" stop-color="#FFBB24"/></linearGradient><path d="M205.35 596.94s3.5 1.37 3.95 6.26c.44 4.89-1 8.17-8.45 9.07-7.45.91-9.34.57-14.01.68-4.67.11-11.45.57-12.46-8.32-1-8.88 8.08-11.15 17.5-8.88 2.96.56 13.47 1.19 13.47 1.19z" style="fill:url(#SVGID_36_)"/><g><path class="st26" d="M266.14 598.27s.8-1.76 1.42-1.95c.62-.19 9.49-.54 12.72-1.38 3.23-.84 11.93-2.24 16.32 1.51 4.07 3.48 4.34 11.16-.3 15.4-1.99 1.73-4.08 2.35-11.44 2.01s-18.04-.27-20.38-3.68c.08-5.64 1.66-11.91 1.66-11.91z"/><linearGradient id="SVGID_37_" gradientUnits="userSpaceOnUse" x1="254.028" y1="603.193" x2="271.04" y2="603.193"><stop offset="0" stop-color="#F4B9A4"/><stop offset=".652" stop-color="#FAD1BB"/></linearGradient><path d="M257.92 596.31s8.56 1.92 11.62 1.64c3.06-.28.5 12.05.5 12.05s-8.17.57-15.4-1.53c-2.45-9.44 3.28-12.16 3.28-12.16z" style="fill:url(#SVGID_37_)"/><linearGradient id="SVGID_38_" gradientUnits="userSpaceOnUse" x1="173.22" y1="584.443" x2="260.983" y2="584.443"><stop offset="0" stop-color="#445677"/><stop offset="1" stop-color="#293861"/></linearGradient><path d="M260.98 595.87l-4.45 13.84s-95.64-12.6-81.97-43.63c11.43-25.96 86.42 29.79 86.42 29.79z" style="fill:url(#SVGID_38_)"/><linearGradient id="SVGID_39_" gradientUnits="userSpaceOnUse" x1="280.771" y1="594.929" x2="280.771" y2="612.987"><stop offset="0" stop-color="#FFDB80"/><stop offset="1" stop-color="#FFBB24"/></linearGradient><path d="M267.26 596.94s-3.5 1.37-3.95 6.26 1 8.17 8.45 9.07 9.34.57 14.01.68 11.45.57 12.46-8.32c1-8.88-8.08-11.15-17.5-8.88-2.96.56-13.47 1.19-13.47 1.19z" style="fill:url(#SVGID_39_)"/></g><linearGradient id="SVGID_40_" gradientUnits="userSpaceOnUse" x1="251.42" y1="467.696" x2="220.113" y2="467.696"><stop offset="0" stop-color="#F4B9A4"/><stop offset=".652" stop-color="#FAD1BB"/></linearGradient><path d="M250.74 469.25c.57-.81.93-2.88.46-3.49-.84-.68-1.63-.29-2.24.3.14-4.96-.31-9.07-.42-10.12-.31-3.04-3.4-8.6-13.5-8.6s-12.05 7.29-12.05 7.29-.66 5.15-.46 11.41c-.6-.58-1.39-.95-2.22-.28-.46.61-.1 2.68.46 3.49.57.81.93 2.73 1.03 3.79.1 1.01-.63 3.7 2.03 3.36 1.59 6.35 8.01 11.64 11.99 11.64 4.36 0 10.16-5.33 11.8-11.65 2.71.37 1.98-2.34 2.07-3.35.13-1.06.49-2.98 1.05-3.79z" style="fill:url(#SVGID_40_)"/><linearGradient id="SVGID_41_" gradientUnits="userSpaceOnUse" x1="215.804" y1="455.594" x2="252.152" y2="455.594"><stop offset="0" stop-color="#4F5C7C"/><stop offset="1" stop-color="#274168"/></linearGradient><path d="M242.34 445.19s-1.97-6.21-9.53-4.72c-7.55 1.48-8.06 5.06-11.03 5.19-5.06.24-9.11 6.54-2.61 13.22 2.89 2.97.45 4.25 1.82 6.88s1.36 5.19 1.36 5.19 2.41-7.71.82-11c-.82-1.7 2.82-2.16 7.35-1.75s11.68-1.1 12.24-4.18c1.34 6.32 2.68 6.98 4.38 7.94 1.7.96 1.8 8.6 1.8 8.6s.3-5.62 1.49-6.88c.98-2.07 2.89-10.22.73-12.19s-.34-8.31-8.82-6.3z" style="fill:url(#SVGID_41_)"/></g><linearGradient id="SVGID_42_" gradientUnits="userSpaceOnUse" x1="509.948" y1="612.061" x2="509.948" y2="547.57"><stop offset="0" stop-color="#B0B9E1"/><stop offset="1" stop-color="#E7EFF7"/></linearGradient><path d="M452.67 596.16L498.32 547.57 567.22 547.57 506.27 612.06z" style="fill:url(#SVGID_42_)"/><linearGradient id="SVGID_43_" gradientUnits="userSpaceOnUse" x1="461.835" y1="563.724" x2="495.632" y2="622.263"><stop offset="0" stop-color="#C8CBF2"/><stop offset="1" stop-color="#AFB0E7"/></linearGradient><circle cx="478.73" cy="592.99" r="33.79" style="fill:url(#SVGID_43_)"/><linearGradient id="SVGID_44_" gradientUnits="userSpaceOnUse" x1="455.798" y1="564.313" x2="489.595" y2="622.851"><stop offset=".116" stop-color="#DEE4FF"/><stop offset=".847" stop-color="#BACBEE"/></linearGradient><circle cx="472.7" cy="593.58" r="33.79" style="fill:url(#SVGID_44_)"/><linearGradient id="SVGID_45_" gradientUnits="userSpaceOnUse" x1="479.001" y1="231.35" x2="503.267" y2="273.38"><stop offset="0" stop-color="#C8CBF2"/><stop offset="1" stop-color="#AFB0E7"/></linearGradient><circle cx="491.13" cy="252.36" r="24.26" style="fill:url(#SVGID_45_)"/><linearGradient id="SVGID_46_" gradientUnits="userSpaceOnUse" x1="474.666" y1="231.772" x2="498.933" y2="273.803"><stop offset=".116" stop-color="#DEE4FF"/><stop offset=".847" stop-color="#BACBEE"/></linearGradient><circle cx="486.8" cy="252.79" r="24.26" style="fill:url(#SVGID_46_)"/></g></svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/images/common/logo.png b/frontend/new-web/src/assets/images/common/logo.png
new file mode 100644
index 00000000..81834963
Binary files /dev/null and b/frontend/new-web/src/assets/images/common/logo.png differ
diff --git a/frontend/new-web/src/assets/images/favicon.png b/frontend/new-web/src/assets/images/favicon.png
new file mode 100644
index 00000000..43eeb762
Binary files /dev/null and b/frontend/new-web/src/assets/images/favicon.png differ
diff --git a/frontend/new-web/src/assets/images/login-bg.svg b/frontend/new-web/src/assets/images/login-bg.svg
new file mode 100644
index 00000000..b143be88
--- /dev/null
+++ b/frontend/new-web/src/assets/images/login-bg.svg
@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1400 800">
+  <defs>
+    <style>
+      @media (prefers-color-scheme: dark) {
+        #bg-layer { fill: url(#bgDark); }
+        #soft-glow { fill: url(#glowDark); }
+        .accent-arc { stroke: rgba(118, 156, 255, 0.35); }
+        .accent-dot { fill: rgba(154, 188, 255, 0.45); }
+      }
+    </style>
+
+    <linearGradient id="bgLight" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#f3f7ff" />
+      <stop offset="60%" stop-color="#e3edff" />
+      <stop offset="100%" stop-color="#d6e7ff" />
+    </linearGradient>
+    
+    <linearGradient id="bgDark" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#0b1324" />
+      <stop offset="60%" stop-color="#162135" />
+      <stop offset="100%" stop-color="#1e2c44" />
+    </linearGradient>
+    
+    <radialGradient id="glowLight" cx="20%" cy="15%" r="60%">
+      <stop offset="0%" stop-color="rgba(64,128,255,0.35)" />
+      <stop offset="40%" stop-color="rgba(64,128,255,0.18)" />
+      <stop offset="100%" stop-color="rgba(64,128,255,0)" />
+    </radialGradient>
+    
+    <radialGradient id="glowDark" cx="20%" cy="15%" r="60%">
+      <stop offset="0%" stop-color="rgba(98,142,255,0.4)" />
+      <stop offset="50%" stop-color="rgba(98,142,255,0.18)" />
+      <stop offset="100%" stop-color="rgba(98,142,255,0)" />
+    </radialGradient>
+    
+    <radialGradient id="glowSecondary" cx="80%" cy="70%" r="55%">
+      <stop offset="0%" stop-color="rgba(22,93,255,0.3)" />
+      <stop offset="50%" stop-color="rgba(22,93,255,0.12)" />
+      <stop offset="100%" stop-color="rgba(22,93,255,0)" />
+    </radialGradient>
+    
+    <linearGradient id="meshLight" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="rgba(255,255,255,0.6)" />
+      <stop offset="35%" stop-color="rgba(255,255,255,0.2)" />
+      <stop offset="100%" stop-color="rgba(255,255,255,0)" />
+    </linearGradient>
+  </defs>
+  
+  <rect id="bg-layer" width="100%" height="100%" fill="url(#bgLight)" />
+  <rect id="soft-glow" width="100%" height="100%" fill="url(#glowLight)" />
+  <rect width="100%" height="100%" fill="url(#glowSecondary)" />
+  <rect width="100%" height="100%" fill="url(#meshLight)" />
+  
+  <!-- 柔和块面光影，替代明显线条 -->
+  <g opacity="0.45">
+    <rect x="-40" y="520" width="520" height="220" rx="180" fill="rgba(255,255,255,0.25)" />
+    <rect x="760" y="90" width="520" height="210" rx="180" fill="rgba(255,255,255,0.22)" />
+    <rect x="420" y="620" width="560" height="190" rx="180" fill="rgba(255,255,255,0.18)" />
+  </g>
+
+  <!-- 去掉点状噪声，仅保留大区域柔光 -->
+</svg>
\ No newline at end of file
diff --git a/frontend/new-web/src/assets/images/login-bg1.svg b/frontend/new-web/src/assets/images/login-bg1.svg
new file mode 100644
index 00000000..a0fbc13f
--- /dev/null
+++ b/frontend/new-web/src/assets/images/login-bg1.svg
@@ -0,0 +1,71 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" width="100%" height="100%" viewBox="0 0 1400 800">
+  <style>
+    :root {
+      --blue: rgba(64, 158, 255, 0.08);
+      --grey: rgba(144, 147, 153, 0.05);
+      --orange: rgba(230, 162, 60, 0.06);
+      --green: rgba(144, 238, 144, 0.06);
+    }
+
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --blue: rgba(64, 158, 255, 0.04);
+        --grey: rgba(144, 147, 153, 0.03);
+        --orange: rgba(230, 162, 60, 0.04);
+        --green: rgba(144, 238, 144, 0.04);
+      }
+    }
+  </style>
+
+  <!-- 左侧波浪 -->
+  <path d="M-50 550 Q200 500 450 550 T950 530"
+        fill="none"
+        stroke="#409EFF"
+        stroke-width="1.5"
+        stroke-opacity="0.05"
+        stroke-linecap="round">
+  </path>
+
+  <!-- 右侧波浪 -->
+  <path d="M450 650 Q800 620 1150 660 T1550 630"
+        fill="none"
+        stroke="#909399"
+        stroke-width="1"
+        stroke-opacity="0.03"
+        stroke-linecap="round">
+  </path>
+
+  <!-- 右下方圆形 -->
+  <circle cx="950" cy="400" r="70" 
+          fill="var(--blue)" 
+          stroke="#409EFF" 
+          stroke-width="1" 
+          stroke-opacity="0.05">
+  </circle>
+
+  <!-- 左上方半球形  -->
+  <g transform="rotate(-10, 300, 180)">
+    <path d="M 180 180 A 120 120 0 1 1 420 180 Q420 195 405 195 L 310 195 L 195 195 Q180 195 180 180" 
+          fill="var(--orange)" 
+          stroke="#E6A23C" 
+          stroke-width="1" 
+          stroke-opacity="0.05">
+    </path>
+  </g>
+
+  <!-- 左下方三角形 -->
+  <path d="M300 600 L380 520 L420 650 Z" 
+        fill="var(--green)" 
+        stroke="#909399" 
+        stroke-width="1" 
+        stroke-opacity="0.04">
+  </path>
+
+  <!-- 旋转方块 -->
+ <rect x="1000" y="420" rx="10" ry="10" width="60" height="60" fill="rgba(169, 174, 184, 0.1)" stroke="rgba(169, 174, 184, 0.2)" stroke-width="1" opacity="0.5">
+    <animateTransform attributeType="XML" attributeName="transform"
+                      begin="0s" dur="30s" type="rotate"
+                      from="0 1450 550" to="360 1450 550"
+                      repeatCount="indefinite"/>
+  </rect>
+</svg>
diff --git a/frontend/new-web/src/components/AiAssistant/index.vue b/frontend/new-web/src/components/AiAssistant/index.vue
new file mode 100644
index 00000000..73b8be93
--- /dev/null
+++ b/frontend/new-web/src/components/AiAssistant/index.vue
@@ -0,0 +1,901 @@
+<template>
+  <!-- 悬浮按钮 -->
+  <div class="ai-assistant">
+    <!-- AI 助手图标按钮 -->
+    <el-button
+      v-if="!dialogVisible && !fabCollapsed"
+      class="ai-fab-button"
+      type="primary"
+      circle
+      size="large"
+      :style="fabStyle"
+      @contextmenu.prevent="fabCollapsed = true"
+      @click="handleOpen"
+    >
+      <div class="i-svg:ai ai-icon" />
+    </el-button>
+
+    <!-- 收缩态：贴边小标签，避免遮挡表单控件 -->
+    <div
+      v-if="!dialogVisible && fabCollapsed"
+      class="ai-fab-tab"
+      :style="fabStyle"
+      @click="fabCollapsed = false"
+    >
+      AI
+    </div>
+
+    <!-- AI 对话框 -->
+    <el-dialog
+      v-model="dialogVisible"
+      title="AI 智能助手"
+      width="600px"
+      :close-on-click-modal="false"
+      draggable
+      class="ai-assistant-dialog"
+    >
+      <template #header>
+        <div class="dialog-header">
+          <div class="i-svg:ai header-icon" />
+          <span class="title">AI 智能助手</span>
+        </div>
+      </template>
+
+      <!-- 命令输入 -->
+      <div class="command-input">
+        <el-input
+          v-model="command"
+          type="textarea"
+          :rows="3"
+          placeholder="试试说：打开角色管理页面&#10;或者：跳转到用户管理&#10;按 Ctrl+Enter 快速发送"
+          :disabled="loading"
+          @keydown.ctrl.enter="handleExecute"
+        />
+      </div>
+
+      <!-- 快捷命令示例 -->
+      <div class="quick-commands">
+        <div class="section-title">💡 试试这些命令：</div>
+        <el-tag
+          v-for="example in examples"
+          :key="example"
+          class="command-tag"
+          @click="command = example"
+        >
+          {{ example }}
+        </el-tag>
+      </div>
+
+      <!-- AI 响应结果 -->
+      <div v-if="response" class="ai-response">
+        <el-alert :title="response.explanation" type="success" :closable="false" show-icon />
+
+        <!-- 将要执行的操作 -->
+        <div v-if="response.action" class="action-preview">
+          <div class="action-title">🎯 将要执行：</div>
+          <div class="action-content">
+            <div v-if="response.action.type === 'navigate'">
+              <el-icon><Position /></el-icon>
+              跳转到：
+              <strong>{{ response.action.pageName }}</strong>
+              <span v-if="response.action.query" class="query-info">
+                并搜索：
+                <el-tag type="warning" size="small">{{ response.action.query }}</el-tag>
+              </span>
+            </div>
+            <div v-if="response.action.type === 'navigate-and-execute'">
+              <el-icon><Position /></el-icon>
+              跳转至：
+              <strong>{{ response.action.pageName }}</strong>
+              <span v-if="response.action.query" class="query-info">
+                并搜索：
+                <el-tag type="warning" size="small">{{ response.action.query }}</el-tag>
+              </span>
+              <el-divider direction="vertical" />
+              <el-icon><Tools /></el-icon>
+              执行：
+              <strong>{{ response.action.functionCall.name }}</strong>
+            </div>
+            <div v-if="response.action.type === 'execute'">
+              <el-icon><Tools /></el-icon>
+              执行：
+              <strong>{{ response.action.functionName }}</strong>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="handleClose">取消</el-button>
+          <el-button type="primary" :loading="loading" @click="handleExecute">
+            <el-icon><MagicStick /></el-icon>
+            执行命令
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { nextTick, onBeforeUnmount, onMounted, watch, ref, computed } from "vue";
+import { useRouter } from "vue-router";
+import { ElMessage } from "element-plus";
+import { useSettingsStore } from "@/store";
+import { AiChatAPI, ChatSession, ChatSessionDetail } from "@/api/module_ai/chat";
+
+type ToolFunctionCall = {
+  name: string;
+  arguments: Record<string, any>;
+};
+
+// 统一的动作描述（区分“跳转”、“跳转+执行”、“仅执行”三种场景）
+type AiAction =
+  | {
+      type: "navigate";
+      path: string;
+      pageName: string;
+      query?: string;
+    }
+  | {
+      type: "navigate-and-execute";
+      path: string;
+      pageName: string;
+      query?: string;
+      functionCall: ToolFunctionCall;
+    }
+  | {
+      type: "execute";
+      functionName: string;
+      functionCall: ToolFunctionCall;
+    };
+
+type AiResponse = {
+  explanation: string;
+  action: AiAction | null;
+};
+
+const router = useRouter();
+const settingsStore = useSettingsStore();
+
+// 状态管理
+const dialogVisible = ref(false);
+const command = ref("");
+const loading = ref(false);
+const response = ref<AiResponse | null>(null);
+
+// 会话管理
+const sessions = ref<ChatSession[]>([]);
+const currentSessionId = ref<string | null>(null);
+const currentSession = ref<ChatSessionDetail | null>(null);
+const sessionLoading = ref(false);
+
+const fabCollapsed = useStorage<boolean>("vea:ui:ai_assistant_fab_collapsed", false);
+
+const fabRight = ref(30);
+const fabBottom = ref(80);
+const fabStyle = computed(() => ({
+  right: `${fabRight.value}px`,
+  bottom: `${fabBottom.value}px`,
+}));
+
+const isElementVisible = (el: Element) => {
+  const style = window.getComputedStyle(el);
+  if (style.display === "none" || style.visibility === "hidden") {
+    return false;
+  }
+  return (el as HTMLElement).getClientRects().length > 0;
+};
+
+const getActiveRightDrawerWidth = (): number => {
+  const drawers = Array.from(document.querySelectorAll(".el-drawer"));
+  for (let i = drawers.length - 1; i >= 0; i--) {
+    const drawer = drawers[i] as HTMLElement;
+    if (!isElementVisible(drawer)) {
+      continue;
+    }
+    const rect = drawer.getBoundingClientRect();
+    if (rect.width > 0 && rect.right >= window.innerWidth - 8) {
+      return rect.width;
+    }
+  }
+  return 0;
+};
+
+const updateFabPosition = () => {
+  const safeMargin = 24;
+  const drawerWidth = getActiveRightDrawerWidth() || 0;
+  const baseRight = drawerWidth + 30;
+
+  // base position
+  const nextRight = baseRight;
+  let nextBottom = 80;
+
+  // Avoid Element Plus popper overlays (select dropdown, icon picker, date picker, etc.)
+  // If the FAB would overlap any visible popper, push it upward.
+  const fabSize = fabCollapsed.value ? 42 : 60;
+  const computeFabRect = (rightPx: number, bottomPx: number) => {
+    const right = window.innerWidth - rightPx;
+    const left = right - fabSize;
+    const bottom = window.innerHeight - bottomPx;
+    const top = bottom - fabSize;
+    return { left, right, top, bottom };
+  };
+
+  const intersects = (
+    a: { left: number; right: number; top: number; bottom: number },
+    b: DOMRect
+  ) => {
+    return !(a.right <= b.left || a.left >= b.right || a.bottom <= b.top || a.top >= b.bottom);
+  };
+
+  const poppers = Array.from(document.querySelectorAll(".el-popper"));
+  for (const popper of poppers) {
+    if (!isElementVisible(popper)) {
+      continue;
+    }
+    const rect = (popper as HTMLElement).getBoundingClientRect();
+    if (rect.width <= 0 || rect.height <= 0) {
+      continue;
+    }
+
+    const candidateFabRect = computeFabRect(nextRight, nextBottom);
+    if (intersects(candidateFabRect, rect)) {
+      const requiredBottom = Math.ceil(window.innerHeight - rect.top + safeMargin);
+      nextBottom = Math.max(nextBottom, requiredBottom);
+    }
+  }
+
+  // clamp so the button doesn't get pushed off-screen
+  const maxBottom = window.innerHeight - fabSize - safeMargin;
+  nextBottom = Math.min(nextBottom, Math.max(0, maxBottom));
+
+  fabRight.value = nextRight + (drawerWidth > 0 ? safeMargin : 0);
+  fabBottom.value = nextBottom;
+};
+
+watch(
+  fabCollapsed,
+  () => {
+    updateFabPosition();
+  },
+  { flush: "post" }
+);
+
+watch(
+  () => settingsStore.settingsVisible,
+  () => {
+    nextTick(() => {
+      scheduleUpdateFabPositionBurst();
+    });
+  },
+  { flush: "post" }
+);
+
+let domObserver: MutationObserver | null = null;
+let rafId: number | null = null;
+
+const scheduleUpdateFabPosition = () => {
+  if (rafId != null) {
+    return;
+  }
+  rafId = window.requestAnimationFrame(() => {
+    rafId = null;
+    updateFabPosition();
+  });
+};
+
+const scheduleUpdateFabPositionBurst = (frames = 18) => {
+  let count = 0;
+  const tick = () => {
+    scheduleUpdateFabPosition();
+    count += 1;
+    if (count < frames) {
+      window.requestAnimationFrame(tick);
+    }
+  };
+  tick();
+};
+
+// 快捷命令示例
+const examples = [
+  "跳转到用户管理",
+  "打开角色管理页面",
+  "修改test用户的姓名为测试人员",
+  "获取姓名为张三的用户信息",
+];
+
+// 加载会话列表
+const loadSessions = async () => {
+  try {
+    sessionLoading.value = true;
+    const response = await AiChatAPI.getSessionList({ page_no: 1, page_size: 100 });
+    if (response.data?.success) {
+      sessions.value = response.data.data?.items || [];
+    }
+  } catch (error) {
+    console.error("加载会话列表失败:", error);
+  } finally {
+    sessionLoading.value = false;
+  }
+};
+
+// 加载会话详情
+const loadSessionDetail = async (sessionId: string) => {
+  try {
+    sessionLoading.value = true;
+    const response = await AiChatAPI.getSessionDetail(sessionId);
+    if (response.data?.success) {
+      currentSessionId.value = sessionId;
+      currentSession.value = response.data.data;
+    } else {
+      ElMessage.error("获取会话详情失败");
+    }
+  } catch (error) {
+    console.error("获取会话详情失败:", error);
+    ElMessage.error("获取会话详情失败");
+  } finally {
+    sessionLoading.value = false;
+  }
+};
+
+// 打开对话框
+const handleOpen = () => {
+  dialogVisible.value = true;
+  command.value = "";
+  response.value = null;
+  loadSessions();
+};
+
+// 关闭对话框
+const handleClose = () => {
+  dialogVisible.value = false;
+  command.value = "";
+  response.value = null;
+};
+
+// 执行命令
+const handleExecute = async () => {
+  const rawCommand = command.value.trim();
+  if (!rawCommand) {
+    ElMessage.warning("请输入命令");
+    return;
+  }
+
+  // 优先检测无需调用 AI 的纯跳转命令
+  const directNavigation = tryDirectNavigate(rawCommand);
+  if (directNavigation && directNavigation.action) {
+    response.value = directNavigation;
+    await executeAction(directNavigation.action);
+    return;
+  }
+
+  loading.value = true;
+
+  try {
+    // 调用 AI API 解析命令
+    const result = await AiChatAPI.chat({
+      message: rawCommand,
+      session_id: currentSessionId.value || undefined,
+    });
+
+    if (!result.data.success) {
+      ElMessage.error(result.data.msg || "命令解析失败");
+      return;
+    }
+
+    // 更新会话ID
+    if (result.data.data?.session_id) {
+      currentSessionId.value = result.data.data.session_id;
+      // 重新加载会话列表和详情
+      await loadSessions();
+      await loadSessionDetail(result.data.data.session_id);
+    }
+
+    // 解析 AI 返回的操作类型
+    const action = parseAction(result.data.data, rawCommand);
+    response.value = {
+      explanation: result.data.data?.response ?? "命令解析成功，准备执行操作",
+      action,
+    };
+
+    // 等待用户确认后执行
+    if (action) {
+      await executeAction(action);
+    }
+  } catch (error: any) {
+    console.error("AI 命令执行失败:", error);
+    ElMessage.error(error.message || "命令执行失败");
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 路由配置映射表
+const routeConfig = [
+  { keywords: ["用户", "user", "user list"], path: "/system/user", name: "用户管理" },
+  { keywords: ["角色", "role"], path: "/system/role", name: "角色管理" },
+  { keywords: ["菜单", "menu"], path: "/system/menu", name: "菜单管理" },
+  { keywords: ["部门", "dept"], path: "/system/dept", name: "部门管理" },
+  { keywords: ["字典", "dict"], path: "/system/dict", name: "字典管理" },
+  { keywords: ["日志", "log"], path: "/system/log", name: "系统日志" },
+];
+
+// 根据函数名推断路由（如 getUserInfo -> /system/user）
+const normalizeText = (text: string) => text.replace(/\s+/g, " ").trim().toLowerCase();
+
+const inferRouteFromFunction = (functionName: string) => {
+  const fnLower = normalizeText(functionName);
+  for (const config of routeConfig) {
+    // 检查函数名是否包含关键词（如 getUserInfo 包含 user）
+    if (config.keywords.some((kw) => fnLower.includes(kw.toLowerCase()))) {
+      return { path: config.path, name: config.name };
+    }
+  }
+  return null;
+};
+
+// 根据命令文本匹配路由
+const matchRouteFromCommand = (cmd: string) => {
+  const normalized = normalizeText(cmd);
+  for (const config of routeConfig) {
+    if (config.keywords.some((kw) => normalized.includes(kw.toLowerCase()))) {
+      return { path: config.path, name: config.name };
+    }
+  }
+  return null;
+};
+
+const extractKeywordFromCommand = (cmd: string): string => {
+  const normalized = normalizeText(cmd);
+  // 从 routeConfig 动态获取所有数据类型关键词
+  const allKeywords = routeConfig.flatMap((config) =>
+    config.keywords.map((kw) => kw.toLowerCase())
+  );
+  const keywordsPattern = allKeywords.join("|");
+
+  const patterns = [
+    new RegExp(`(?:查询|获取|搜索|查找|找).*?([^\\s，。]+?)(?:的)?(?:${keywordsPattern})`, "i"),
+    new RegExp(`(?:${keywordsPattern}).*?([^\\s，。]+?)(?:的|信息|详情)?`, "i"),
+    new RegExp(
+      `(?:姓名为|名字叫|叫做|名称为|名是|为)([^\\s，。]+?)(?:的)?(?:${keywordsPattern})?`,
+      "i"
+    ),
+    new RegExp(`([^\\s，。]+?)(?:的)?(?:${keywordsPattern})(?:信息|详情)?`, "i"),
+  ];
+
+  for (const pattern of patterns) {
+    const match = normalized.match(pattern);
+    if (match && match[1]) {
+      let extracted = match[1].trim();
+      extracted = extracted.replace(/姓名为|名字叫|叫做|名称为|名是|为|的|信息|详情/g, "");
+      if (
+        extracted &&
+        !allKeywords.some((type) => extracted.toLowerCase().includes(type.toLowerCase()))
+      ) {
+        return extracted;
+      }
+    }
+  }
+  return "";
+};
+
+const tryDirectNavigate = (rawCommand: string): AiResponse | null => {
+  const navigationIntents = ["跳转", "打开", "进入", "前往", "去", "浏览", "查看"];
+  const operationIntents = [
+    "修改",
+    "更新",
+    "变更",
+    "删除",
+    "添加",
+    "创建",
+    "设置",
+    "获取",
+    "查询",
+    "搜索",
+  ];
+
+  const hasNavigationIntent = navigationIntents.some((keyword) => rawCommand.includes(keyword));
+  const hasOperationIntent = operationIntents.some((keyword) => rawCommand.includes(keyword));
+
+  if (!hasNavigationIntent || hasOperationIntent) {
+    return null;
+  }
+
+  const routeInfo = matchRouteFromCommand(rawCommand);
+  if (!routeInfo) {
+    return null;
+  }
+
+  const keyword = extractKeywordFromCommand(rawCommand);
+  const action: AiAction = {
+    type: "navigate",
+    path: routeInfo.path,
+    pageName: routeInfo.name,
+    query: keyword || undefined,
+  };
+
+  return {
+    explanation: `检测到跳转命令，正在前往 ${routeInfo.name}`,
+    action,
+  };
+};
+
+// 解析 AI 返回的操作类型
+const parseAction = (result: any, rawCommand: string): AiAction | null => {
+  const cmd = normalizeText(rawCommand);
+  // 后端返回的是 function_calls（下划线命名）
+  const functionCalls = result.function_calls || result.functionCalls;
+  const primaryCall = functionCalls?.[0];
+  const functionName = primaryCall?.name;
+
+  // 优先从函数名推断路由，其次从命令文本匹配
+  let routeInfo = functionName ? inferRouteFromFunction(functionName) : null;
+  if (!routeInfo) {
+    routeInfo = matchRouteFromCommand(cmd);
+  }
+
+  const routePath = routeInfo?.path || "";
+  const pageName = routeInfo?.name || "";
+  const keyword = extractKeywordFromCommand(cmd);
+
+  if (primaryCall && functionName) {
+    const fnNameLower = functionName.toLowerCase();
+
+    // 1) 查询类函数（query/search/list/get）-> 跳转并执行筛选操作
+    const isQueryFunction =
+      fnNameLower.includes("query") ||
+      fnNameLower.includes("search") ||
+      fnNameLower.includes("list") ||
+      fnNameLower.includes("get");
+
+    if (isQueryFunction) {
+      // 统一使用 keywords 参数（约定大于配置）
+      const args = (primaryCall.arguments || {}) as Record<string, unknown>;
+      const keywords =
+        typeof args.keywords === "string" && args.keywords.trim().length > 0
+          ? args.keywords
+          : keyword;
+
+      if (routePath) {
+        return {
+          type: "navigate-and-execute",
+          path: routePath,
+          pageName,
+          functionCall: primaryCall,
+          query: keywords || undefined,
+        };
+      }
+    }
+
+    // 2) 其他操作类函数（修改/删除/创建/更新等）-> 跳转并执行
+    const isModifyFunction =
+      fnNameLower.includes("update") ||
+      fnNameLower.includes("modify") ||
+      fnNameLower.includes("edit") ||
+      fnNameLower.includes("delete") ||
+      fnNameLower.includes("remove") ||
+      fnNameLower.includes("create") ||
+      fnNameLower.includes("add") ||
+      fnNameLower.includes("save");
+
+    if (isModifyFunction && routePath) {
+      return {
+        type: "navigate-and-execute",
+        path: routePath,
+        pageName,
+        functionCall: primaryCall,
+      };
+    }
+
+    // 3) 其他未匹配的函数，如果有路由则跳转，否则执行
+    if (routePath) {
+      return {
+        type: "navigate-and-execute",
+        path: routePath,
+        pageName,
+        functionCall: primaryCall,
+      };
+    }
+
+    return {
+      type: "execute",
+      functionName,
+      functionCall: primaryCall,
+    };
+  }
+
+  // 4) 无函数调用，仅跳转
+  if (routePath) {
+    return {
+      type: "navigate",
+      path: routePath,
+      pageName,
+      query: keyword || undefined,
+    };
+  }
+
+  return null;
+};
+
+// 定时器引用（用于清理）
+let navigationTimer: ReturnType<typeof setTimeout> | null = null;
+let executeTimer: ReturnType<typeof setTimeout> | null = null;
+
+// 执行操作
+const executeAction = async (action: AiAction) => {
+  // 🎯 新增：跳转并执行操作
+  if (action.type === "navigate-and-execute") {
+    ElMessage.success(`正在跳转到 ${action.pageName} 并执行操作...`);
+
+    // 清理之前的定时器
+    if (navigationTimer) {
+      clearTimeout(navigationTimer);
+    }
+
+    // 跳转并传递待执行的操作信息
+    navigationTimer = setTimeout(() => {
+      navigationTimer = null;
+      const queryParams: any = {
+        // 通过 URL 参数传递 AI 操作信息
+        aiAction: encodeURIComponent(
+          JSON.stringify({
+            functionName: action.functionCall.name,
+            arguments: action.functionCall.arguments,
+            timestamp: Date.now(),
+          })
+        ),
+      };
+
+      // 如果有查询关键字，也一并传递
+      if (action.query) {
+        queryParams.keywords = action.query;
+        queryParams.autoSearch = "true";
+      }
+
+      router.push({
+        path: action.path,
+        query: queryParams,
+      });
+
+      // 关闭对话框
+      handleClose();
+    }, 800);
+    return;
+  }
+
+  if (action.type === "navigate") {
+    // 检查是否已经在目标页面
+    const currentPath = router.currentRoute.value.path;
+
+    if (currentPath === action.path) {
+      // 如果已经在目标页面
+      if (action.query) {
+        // 有查询关键字，直接在当前页面执行搜索
+        ElMessage.info(`您已在 ${action.pageName} 页面，为您执行搜索：${action.query}`);
+
+        // 触发路由更新，让页面执行搜索
+        router.replace({
+          path: action.path,
+          query: {
+            keywords: action.query,
+            autoSearch: "true",
+            _t: Date.now().toString(), // 添加时间戳强制刷新
+          },
+        });
+      } else {
+        // 没有查询关键字，只是跳转，给出提示
+        ElMessage.warning(`您已经在 ${action.pageName} 页面了`);
+      }
+
+      // 关闭对话框
+      handleClose();
+      return;
+    }
+
+    // 不在目标页面，正常跳转
+    ElMessage.success(`正在跳转到 ${action.pageName}...`);
+
+    // 清理之前的定时器
+    if (navigationTimer) {
+      clearTimeout(navigationTimer);
+    }
+
+    // 延迟一下让用户看到提示
+    navigationTimer = setTimeout(() => {
+      navigationTimer = null;
+      // 跳转并传递查询参数
+      router.push({
+        path: action.path,
+        query: action.query
+          ? {
+              keywords: action.query, // 传递关键字参数
+              autoSearch: "true", // 标记自动搜索
+            }
+          : undefined,
+      });
+
+      // 关闭对话框
+      handleClose();
+    }, 1000);
+  } else if (action.type === "execute") {
+    // 执行函数调用
+    ElMessage.info("功能开发中，请前往 AI 命令助手页面体验完整功能");
+
+    // 清理之前的定时器
+    if (executeTimer) {
+      clearTimeout(executeTimer);
+    }
+
+    // 可以跳转到完整的 AI 命令页面
+    executeTimer = setTimeout(() => {
+      executeTimer = null;
+      router.push("/function/ai-command");
+      handleClose();
+    }, 1000);
+  }
+};
+
+// 组件卸载时清理定时器
+onMounted(() => {
+  updateFabPosition();
+  window.addEventListener("resize", updateFabPosition);
+
+  domObserver = new MutationObserver(() => {
+    scheduleUpdateFabPosition();
+  });
+  domObserver.observe(document.body, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: ["class", "style"],
+  });
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", updateFabPosition);
+  if (domObserver) {
+    domObserver.disconnect();
+    domObserver = null;
+  }
+  if (rafId != null) {
+    window.cancelAnimationFrame(rafId);
+    rafId = null;
+  }
+
+  if (navigationTimer) {
+    clearTimeout(navigationTimer);
+    navigationTimer = null;
+  }
+  if (executeTimer) {
+    clearTimeout(executeTimer);
+    executeTimer = null;
+  }
+});
+</script>
+
+<style scoped lang="scss">
+.ai-assistant {
+  .ai-fab-button {
+    position: fixed;
+    z-index: 9999;
+    width: 60px;
+    height: 60px;
+    box-shadow: var(--el-box-shadow);
+    transition: all 0.3s ease;
+
+    &:hover {
+      box-shadow: var(--el-box-shadow-dark);
+      transform: scale(1.1);
+    }
+
+    .ai-icon {
+      width: 32px;
+      height: 32px;
+    }
+  }
+
+  .ai-fab-tab {
+    position: fixed;
+    z-index: 9999;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 42px;
+    height: 42px;
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--el-color-white);
+    cursor: pointer;
+    user-select: none;
+    background: var(--el-color-primary);
+    border-radius: 999px;
+    box-shadow: var(--el-box-shadow);
+  }
+}
+
+.ai-assistant-dialog {
+  .dialog-header {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+
+    .header-icon {
+      width: 28px;
+      height: 28px;
+    }
+
+    .title {
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--el-text-color-primary);
+    }
+  }
+
+  .command-input {
+    margin-bottom: 16px;
+  }
+
+  .quick-commands {
+    margin-bottom: 20px;
+
+    .section-title {
+      margin-bottom: 8px;
+      font-size: 14px;
+      color: var(--el-text-color-secondary);
+    }
+
+    .command-tag {
+      margin-right: 8px;
+      margin-bottom: 8px;
+      cursor: pointer;
+      transition: all 0.3s;
+
+      &:hover {
+        box-shadow: var(--el-box-shadow-light);
+        transform: translateY(-2px);
+      }
+    }
+  }
+
+  .ai-response {
+    margin-top: 16px;
+
+    .action-preview {
+      padding: 12px;
+      margin-top: 12px;
+      background-color: var(--el-fill-color-light);
+      border-radius: 8px;
+
+      .action-title {
+        margin-bottom: 8px;
+        font-size: 14px;
+        font-weight: 600;
+        color: var(--el-text-color-primary);
+      }
+
+      .action-content {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+        color: var(--el-text-color-regular);
+
+        .el-icon {
+          color: var(--el-color-primary);
+        }
+
+        .query-info {
+          margin-left: 8px;
+        }
+      }
+    }
+  }
+
+  .dialog-footer {
+    display: flex;
+    gap: 12px;
+    justify-content: flex-end;
+  }
+}
+</style>
diff --git a/frontend/new-web/src/components/AppLink/index.vue b/frontend/new-web/src/components/AppLink/index.vue
new file mode 100644
index 00000000..b3b8f172
--- /dev/null
+++ b/frontend/new-web/src/components/AppLink/index.vue
@@ -0,0 +1,38 @@
+<template>
+  <component :is="linkType" v-bind="linkProps(to)">
+    <slot />
+  </component>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  name: "AppLink",
+  inheritAttrs: false,
+});
+
+import { isExternal } from "@/utils/index";
+
+const props = defineProps({
+  to: {
+    type: Object,
+    required: true,
+  },
+});
+
+const isExternalLink = computed(() => {
+  return isExternal(props.to.path || "");
+});
+
+const linkType = computed(() => (isExternalLink.value ? "a" : "router-link"));
+
+const linkProps = (to: any) => {
+  if (isExternalLink.value) {
+    return {
+      href: to.path,
+      target: "_blank",
+      rel: "noopener noreferrer",
+    };
+  }
+  return { to };
+};
+</script>
diff --git a/frontend/new-web/src/components/Breadcrumb/index.vue b/frontend/new-web/src/components/Breadcrumb/index.vue
new file mode 100644
index 00000000..f2d8063c
--- /dev/null
+++ b/frontend/new-web/src/components/Breadcrumb/index.vue
@@ -0,0 +1,88 @@
+<template>
+  <el-breadcrumb class="flex-y-center">
+    <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="item.path">
+      <span
+        v-if="item.redirect === 'noredirect' || index === breadcrumbs.length - 1"
+        class="color-gray-400"
+      >
+        {{ translateRouteTitle(item.meta.title) }}
+      </span>
+      <a v-else @click.prevent="handleLink(item)">
+        {{ translateRouteTitle(item.meta.title) }}
+      </a>
+    </el-breadcrumb-item>
+  </el-breadcrumb>
+</template>
+
+<script setup lang="ts">
+import { RouteLocationMatched } from "vue-router";
+import { compile } from "path-to-regexp";
+import { router } from "@/router";
+import { translateRouteTitle } from "@/utils/i18n";
+
+const currentRoute = useRoute();
+const pathCompile = (path: string) => {
+  const { params } = currentRoute;
+  const toPath = compile(path);
+  return toPath(params);
+};
+
+const breadcrumbs = ref<Array<RouteLocationMatched>>([]);
+
+function getBreadcrumb() {
+  let matched = currentRoute.matched.filter((item) => item.meta && item.meta.title);
+  const first = matched[0];
+  if (!isDashboard(first)) {
+    matched = [{ path: "/workbench", meta: { title: "menus.workbench.title" } } as any].concat(
+      matched
+    );
+  }
+  breadcrumbs.value = matched.filter((item) => {
+    return item.meta && item.meta.title && item.meta.breadcrumb !== false;
+  });
+}
+
+function isDashboard(route: RouteLocationMatched) {
+  const name = route && route.name;
+  if (!name) {
+    return false;
+  }
+  const n = name.toString().trim().toLowerCase();
+  return n === "dashboard" || n === "dashboarddemo";
+}
+
+function handleLink(item: any) {
+  const { redirect, path } = item;
+  if (redirect) {
+    router.push(redirect).catch((err) => {
+      console.warn(err);
+    });
+    return;
+  }
+  router.push(pathCompile(path)).catch((err) => {
+    console.warn(err);
+  });
+}
+
+watch(
+  () => currentRoute.path,
+  (path) => {
+    if (path.startsWith("/redirect/")) {
+      return;
+    }
+    getBreadcrumb();
+  }
+);
+
+onBeforeMount(() => {
+  getBreadcrumb();
+});
+</script>
+
+<style lang="scss" scoped>
+// 覆盖 element-plus 的样式
+.el-breadcrumb__inner,
+.el-breadcrumb__inner a {
+  font-weight: 400 !important;
+}
+</style>
diff --git a/frontend/new-web/src/components/CURD/CrudToolbarLeft.vue b/frontend/new-web/src/components/CURD/CrudToolbarLeft.vue
new file mode 100644
index 00000000..9d0707f3
--- /dev/null
+++ b/frontend/new-web/src/components/CURD/CrudToolbarLeft.vue
@@ -0,0 +1,92 @@
+<!-- 列表页左侧工具栏：1) configButtons 与 PageContent 配置驱动一致 2) perm 预设「新增/批删/更多」 3) 默认插槽完全自定义 -->
+<template>
+  <div class="data-table__toolbar--left">
+    <template v-if="configButtons && configButtons.length">
+      <template v-for="(btn, index) in configButtons" :key="index">
+        <el-button
+          v-hasPerm="btn.perm ?? '*:*:*'"
+          v-bind="btn.attrs"
+          :disabled="btn.name === 'delete' && removeIds.length === 0"
+          @click="$emit('toolbar', btn.name)"
+        >
+          {{ btn.text }}
+        </el-button>
+      </template>
+    </template>
+    <slot v-else>
+      <el-button
+        v-if="permCreate"
+        v-hasPerm="permCreate"
+        type="success"
+        icon="plus"
+        @click="$emit('add')"
+      >
+        新增
+      </el-button>
+      <el-button
+        v-if="permDelete"
+        v-hasPerm="permDelete"
+        type="danger"
+        icon="delete"
+        :loading="deleteLoading"
+        :disabled="removeIds.length === 0"
+        @click="$emit('delete')"
+      >
+        批量删除
+      </el-button>
+      <el-dropdown v-if="permPatch" v-hasPerm="permPatch" trigger="click">
+        <el-button
+          type="default"
+          :disabled="removeIds.length === 0 || moreDisabled"
+          icon="ArrowDown"
+        >
+          更多
+        </el-button>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item icon="Check" @click="$emit('more', '0')">批量启用</el-dropdown-item>
+            <el-dropdown-item icon="CircleClose" @click="$emit('more', '1')">
+              批量停用
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import type { CrudToolbarConfigButton } from "./types";
+
+const props = withDefaults(
+  defineProps<{
+    /** 与 PageContent `toolbarLeftBtn` 一致时走配置驱动（与 handleToolbar 对齐） */
+    configButtons?: CrudToolbarConfigButton[];
+    /** 勾选行主键，用于禁用批删 / 更多（插槽完全自定义时可不传） */
+    removeIds?: Array<string | number>;
+    /** 新增按钮权限，不传则不显示（configButtons 未传时） */
+    permCreate?: string | string[];
+    /** 批量删除权限，不传则不显示 */
+    permDelete?: string | string[];
+    /** 「更多」下拉权限，不传则不显示 */
+    permPatch?: string | string[];
+    /** 批量删除中（按钮 loading，并禁用「更多」） */
+    deleteLoading?: boolean;
+  }>(),
+  {
+    removeIds: () => [],
+    deleteLoading: false,
+  }
+);
+
+defineEmits<{
+  /** 配置模式：与 PageContent handleToolbar 一致 */
+  toolbar: [name: string];
+  add: [];
+  delete: [];
+  more: [value: string];
+}>();
+
+const moreDisabled = computed(() => props.removeIds.length === 0 || props.deleteLoading);
+</script>
diff --git a/frontend/new-web/src/components/CURD/CrudToolbarRight.vue b/frontend/new-web/src/components/CURD/CrudToolbarRight.vue
new file mode 100644
index 00000000..033498df
--- /dev/null
+++ b/frontend/new-web/src/components/CURD/CrudToolbarRight.vue
@@ -0,0 +1,55 @@
+<!-- PageContent 右侧圆形工具条：与业务页 #toolbar 中重复的 v-for 逻辑一致，含 Tooltip / 列筛选 -->
+<template>
+  <slot name="prepend" />
+  <template v-for="(btn, index) in buttons" :key="index">
+    <el-popover v-if="btn.name === 'filter'" placement="bottom" trigger="click">
+      <template #reference>
+        <el-button v-bind="btn.attrs" />
+      </template>
+      <el-scrollbar max-height="350px">
+        <template v-for="c in cols" :key="c.prop">
+          <el-checkbox v-if="c.prop" v-model="c.show" :label="c.label" />
+        </template>
+      </el-scrollbar>
+    </el-popover>
+    <el-tooltip v-else-if="tooltipContent(btn.name)" :content="tooltipContent(btn.name)!">
+      <el-button v-hasPerm="btn.perm ?? '*:*:*'" v-bind="btn.attrs" @click="onToolbar(btn.name)" />
+    </el-tooltip>
+    <el-button
+      v-else
+      v-hasPerm="btn.perm ?? '*:*:*'"
+      v-bind="btn.attrs"
+      @click="onToolbar(btn.name)"
+    />
+  </template>
+</template>
+
+<script setup lang="ts">
+import type { ButtonProps } from "element-plus";
+import type { CSSProperties } from "vue";
+
+/** 与 PageContent createToolbar 产出的右侧按钮结构一致 */
+export type CrudToolbarRightButton = {
+  name: string;
+  text?: string;
+  attrs?: Partial<ButtonProps> & { style?: CSSProperties };
+  perm?: string | string[] | null;
+};
+
+defineProps<{
+  buttons: CrudToolbarRightButton[];
+  cols: Array<{ prop?: string; label?: string; show?: boolean }>;
+  onToolbar: (name: string) => void;
+}>();
+
+const TOOLTIPS: Record<string, string> = {
+  import: "导入",
+  export: "导出",
+  filter: "筛选",
+  refresh: "刷新",
+};
+
+function tooltipContent(name: string): string | undefined {
+  return TOOLTIPS[name];
+}
+</script>
diff --git a/frontend/new-web/src/components/CURD/EnhancedDialog.vue b/frontend/new-web/src/components/CURD/EnhancedDialog.vue
new file mode 100644
index 00000000..9522f0a9
--- /dev/null
+++ b/frontend/new-web/src/components/CURD/EnhancedDialog.vue
@@ -0,0 +1,118 @@
+<template>
+  <el-dialog
+    v-model="visible"
+    :width="width"
+    :draggable="draggable"
+    :fullscreen="fullscreen"
+    :show-close="false"
+    :class="dialogClass"
+    :modal-class="modalClass"
+    align-center
+    destroy-on-close
+    v-bind="dialogAttrs"
+    @close="emit('close')"
+    @opened="emit('opened')"
+  >
+    <template #header="{ titleId, titleClass, close }">
+      <div class="curd-dialog-header">
+        <span :id="titleId" :class="titleClass">{{ title }}</span>
+        <div class="curd-dialog-header__actions">
+          <el-tooltip :content="fullscreen ? '还原' : '全屏'" placement="top">
+            <el-button text circle type="primary" @click="fullscreen = !fullscreen">
+              <el-icon>
+                <Fold v-if="fullscreen" />
+                <FullScreen v-else />
+              </el-icon>
+            </el-button>
+          </el-tooltip>
+          <el-tooltip content="关闭" placement="top">
+            <el-button text circle @click="close">
+              <el-icon><Close /></el-icon>
+            </el-button>
+          </el-tooltip>
+        </div>
+      </div>
+    </template>
+    <slot />
+    <template v-if="$slots.footer" #footer>
+      <slot name="footer" />
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { Close, Fold, FullScreen } from "@element-plus/icons-vue";
+import type { DialogProps } from "element-plus";
+import { computed, ref, useAttrs, watch } from "vue";
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean;
+    title?: string;
+    width?: string | number;
+    /** 默认可拖拽；全屏时 Element Plus 会限制拖拽 */
+    draggable?: boolean;
+    /** 透传到 el-dialog 的 class */
+    dialogClass?: string;
+    /** 遮罩层自定义 class */
+    modalClass?: string;
+  }>(),
+  {
+    draggable: true,
+  }
+);
+
+const emit = defineEmits<{
+  "update:modelValue": [v: boolean];
+  close: [];
+  opened: [];
+  "fullscreen-change": [isFullscreen: boolean];
+}>();
+
+const attrs = useAttrs();
+const fullscreen = ref(false);
+
+// 监听全屏状态变化并发出事件
+watch(fullscreen, (newVal) => {
+  emit("fullscreen-change", newVal);
+});
+
+const dialogClass = computed(() => {
+  const a = attrs.class;
+  return [props.dialogClass, a].filter(Boolean);
+});
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (v: boolean) => emit("update:modelValue", v),
+});
+
+/** 透传除 modelValue 外的 el-dialog 属性（如 top、modal-class、append-to-body 等） */
+const dialogAttrs = computed(() => {
+  const a = { ...attrs } as Record<string, unknown>;
+  delete a.class;
+  return a as Partial<Omit<DialogProps, "modelValue">>;
+});
+</script>
+
+<style scoped lang="scss">
+.curd-dialog-header {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding-right: 4px;
+}
+
+.curd-dialog-header__actions {
+  display: inline-flex;
+  flex-shrink: 0;
+  gap: 2px;
+  align-items: center;
+  margin-left: auto;
+}
+</style>
diff --git a/frontend/new-web/src/components/CURD/EnhancedDrawer.vue b/frontend/new-web/src/components/CURD/EnhancedDrawer.vue
new file mode 100644
index 00000000..61ba3925
--- /dev/null
+++ b/frontend/new-web/src/components/CURD/EnhancedDrawer.vue
@@ -0,0 +1,102 @@
+<template>
+  <el-drawer
+    v-model="visible"
+    :size="size"
+    :direction="direction"
+    :show-close="false"
+    :class="drawerClassMerged"
+    destroy-on-close
+    v-bind="drawerAttrs"
+    @close="emit('close')"
+    @opened="emit('opened')"
+  >
+    <template #header>
+      <div class="curd-drawer-header">
+        <span class="curd-drawer-header__title">{{ title }}</span>
+        <div class="curd-drawer-header__actions">
+          <el-tooltip content="关闭" placement="top">
+            <el-button text circle @click="visible = false">
+              <el-icon><Close /></el-icon>
+            </el-button>
+          </el-tooltip>
+        </div>
+      </div>
+    </template>
+    <slot />
+    <template v-if="$slots.footer" #footer>
+      <slot name="footer" />
+    </template>
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+import { Close } from "@element-plus/icons-vue";
+import type { DrawerProps } from "element-plus";
+import { computed, useAttrs } from "vue";
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean;
+    title?: string;
+    size?: string | number;
+    direction?: "rtl" | "ltr" | "ttb" | "btt";
+    /** 透传到 el-drawer 的 class */
+    drawerClass?: string;
+  }>(),
+  {
+    direction: "rtl",
+  }
+);
+
+const emit = defineEmits<{
+  "update:modelValue": [v: boolean];
+  close: [];
+  opened: [];
+}>();
+
+const attrs = useAttrs();
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (v: boolean) => emit("update:modelValue", v),
+});
+
+const drawerClassMerged = computed(() => {
+  const a = attrs.class;
+  return [props.drawerClass, a].filter(Boolean);
+});
+
+const drawerAttrs = computed(() => {
+  const a = { ...attrs } as Record<string, unknown>;
+  delete a.class;
+  return a as Partial<Omit<DrawerProps, "modelValue">>;
+});
+</script>
+
+<style scoped lang="scss">
+.curd-drawer-header {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding-right: 4px;
+}
+
+.curd-drawer-header__title {
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--el-text-color-primary);
+}
+
+.curd-drawer-header__actions {
+  display: inline-flex;
+  flex-shrink: 0;
+  gap: 2px;
+  align-items: center;
+  margin-left: auto;
+}
+</style>
diff --git a/frontend/new-web/src/components/CURD/ExportModal.vue b/frontend/new-web/src/components/CURD/ExportModal.vue
new file mode 100644
index 00000000..628d6967
--- /dev/null
+++ b/frontend/new-web/src/components/CURD/ExportModal.vue
@@ -0,0 +1,277 @@
+<template>
+  <div class="curd-export-modal-host">
+    <!-- 导出弹窗 -->
+    <EnhancedDialog
+      v-model="exportsModalVisible"
+      title="导出数据"
+      width="600px"
+      dialog-class="curd-embed-dialog"
+      @close="handleCloseExportsModal"
+    >
+      <!-- 滚动 -->
+      <el-scrollbar max-height="60vh">
+        <!-- 表单 -->
+        <el-form
+          ref="exportsFormRef"
+          style="padding-right: var(--el-dialog-padding-primary)"
+          :model="exportsFormData"
+          :rules="exportsFormRules"
+        >
+          <el-form-item label="文件名" prop="filename">
+            <el-input v-model="exportsFormData.filename" placeholder="请输入文件名" clearable />
+          </el-form-item>
+          <el-form-item label="工作表名" prop="sheetname">
+            <el-input v-model="exportsFormData.sheetname" placeholder="请输入工作表名" clearable />
+          </el-form-item>
+          <el-form-item label="数据源" prop="origin">
+            <el-select v-model="exportsFormData.origin">
+              <el-option
+                label="当前数据 (当前页的数据)"
+                :value="ExportsOriginEnum.CURRENT"
+                :disabled="!pageData?.length"
+              />
+              <el-option
+                label="选中数据 (所有选中的数据)"
+                :value="ExportsOriginEnum.SELECTED"
+                :disabled="!selectionData?.length"
+              />
+              <el-option
+                label="全量数据 (所有分页的数据)"
+                :value="ExportsOriginEnum.REMOTE"
+                :disabled="!props.contentConfig.exportsAction"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="字段" prop="fields">
+            <el-checkbox-group v-model="exportsFormData.fields">
+              <template v-for="col in cols" :key="col.prop">
+                <el-checkbox v-if="col.prop" :value="col.prop" :label="col.label" />
+              </template>
+            </el-checkbox-group>
+          </el-form-item>
+        </el-form>
+      </el-scrollbar>
+      <!-- 弹窗底部操作按钮 -->
+      <template #footer>
+        <div style="padding-right: var(--el-dialog-padding-primary)">
+          <el-button type="primary" @click="handleExportsSubmit">确 定</el-button>
+          <el-button @click="handleCloseExportsModal">取 消</el-button>
+        </div>
+      </template>
+    </EnhancedDialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import EnhancedDialog from "./EnhancedDialog.vue";
+import ExcelJS from "exceljs";
+import type { IContentConfig, IObject } from "./types";
+import { useThrottleFn } from "@vueuse/core";
+import { type FormInstance, type FormRules, ElMessage } from "element-plus";
+import { nextTick, ref, reactive, computed } from "vue";
+
+/**
+ * 导出模态框组件属性定义
+ */
+interface ExportModalProps {
+  /** 内容配置 */
+  contentConfig: Pick<IContentConfig, "permPrefix" | "cols" | "exportsAction">;
+  /** 查询参数 */
+  queryParams?: IObject;
+  /** 页面数据 */
+  pageData?: IObject[];
+  /** 选中数据 */
+  selectionData?: IObject[];
+}
+
+// 定义接收的属性
+const props = defineProps<ExportModalProps>();
+
+// 定义模型值（控制弹窗显示/隐藏）
+const exportsModalVisible = defineModel<boolean>("modelValue", {
+  required: true,
+  default: false,
+});
+
+/**
+ * 导出数据源枚举
+ */
+enum ExportsOriginEnum {
+  /** 当前数据 */
+  CURRENT = "current",
+  /** 选中数据 */
+  SELECTED = "selected",
+  /** 远程数据 */
+  REMOTE = "remote",
+}
+
+const exportsFormRef = ref<FormInstance>();
+const exportsFormData = reactive({
+  filename: "",
+  sheetname: "",
+  fields: [] as string[],
+  origin: ExportsOriginEnum.CURRENT,
+});
+const exportsFormRules: FormRules = {
+  fields: [{ required: true, message: "请选择字段" }],
+  origin: [{ required: true, message: "请选择数据源" }],
+};
+
+// 表格列
+const cols = computed(() =>
+  props.contentConfig.cols.map((col) => {
+    if (col.initFn) {
+      col.initFn(col);
+    }
+    if (col.show === undefined) {
+      col.show = true;
+    }
+    if (col.prop !== undefined && col.columnKey === undefined && col["column-key"] === undefined) {
+      col.columnKey = col.prop;
+    }
+    if (
+      col.type === "selection" &&
+      col.reserveSelection === undefined &&
+      col["reserve-selection"] === undefined
+    ) {
+      // 配合表格row-key实现跨页多选
+      col.reserveSelection = true;
+    }
+    return col;
+  })
+);
+
+// 初始化字段
+const initFields = () => {
+  const fields: string[] = [];
+  cols.value.forEach((item) => {
+    if (item.prop !== undefined) {
+      fields.push(item.prop);
+    }
+  });
+  exportsFormData.fields = fields;
+};
+
+// 初始化
+initFields();
+
+// 关闭导出弹窗
+function handleCloseExportsModal() {
+  exportsModalVisible.value = false;
+  exportsFormRef.value?.resetFields();
+  nextTick(() => {
+    exportsFormRef.value?.clearValidate();
+  });
+}
+
+// 导出
+function handleExports() {
+  try {
+    const filename = exportsFormData.filename
+      ? exportsFormData.filename
+      : props.contentConfig.permPrefix || "export";
+    const sheetname = exportsFormData.sheetname ? exportsFormData.sheetname : "sheet";
+    const workbook = new ExcelJS.Workbook();
+    const worksheet = workbook.addWorksheet(sheetname);
+    const columns: Partial<ExcelJS.Column>[] = [];
+    cols.value.forEach((col) => {
+      if (col.label && col.prop && exportsFormData.fields.includes(col.prop)) {
+        columns.push({ header: col.label, key: col.prop });
+      }
+    });
+    worksheet.columns = columns;
+
+    if (exportsFormData.origin === ExportsOriginEnum.REMOTE) {
+      if (props.contentConfig.exportsAction) {
+        const lastFormData = props.queryParams ?? {};
+        props.contentConfig
+          .exportsAction(lastFormData)
+          .then((res) => {
+            worksheet.addRows(res);
+            workbook.xlsx
+              .writeBuffer()
+              .then((buffer) => {
+                saveXlsx(buffer, filename as string);
+              })
+              .catch((error) => {
+                console.error("导出远程数据失败:", error);
+                ElMessage.error("导出远程数据失败");
+              });
+          })
+          .catch((error) => {
+            console.error("获取远程数据失败:", error);
+            ElMessage.error("获取远程数据失败");
+          });
+      } else {
+        ElMessage.error("未配置exportsAction");
+      }
+    } else if (exportsFormData.origin === ExportsOriginEnum.SELECTED) {
+      const rows = props.selectionData ?? [];
+      worksheet.addRows(rows);
+      workbook.xlsx
+        .writeBuffer()
+        .then((buffer) => {
+          saveXlsx(buffer, filename as string);
+        })
+        .catch((error) => {
+          console.error("导出选中数据失败:", error);
+          ElMessage.error("导出选中数据失败");
+        });
+    } else {
+      const rows = props.pageData ?? [];
+      worksheet.addRows(rows);
+      workbook.xlsx
+        .writeBuffer()
+        .then((buffer) => {
+          saveXlsx(buffer, filename as string);
+        })
+        .catch((error) => {
+          console.error("导出当前数据失败:", error);
+          ElMessage.error("导出当前数据失败");
+        });
+    }
+  } catch (error) {
+    console.error("导出失败:", error);
+    ElMessage.error("导出失败");
+  }
+}
+
+// 导出确认
+const handleExportsSubmit = useThrottleFn(() => {
+  exportsFormRef.value?.validate((valid: boolean) => {
+    if (valid) {
+      handleExports();
+      handleCloseExportsModal();
+    }
+  });
+}, 3000);
+
+// 浏览器保存文件
+function saveXlsx(fileData: any, fileName: string) {
+  try {
+    const fileType =
+      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
+
+    const blob = new Blob([fileData], { type: fileType });
+    const downloadUrl = window.URL.createObjectURL(blob);
+
+    const downloadLink = document.createElement("a");
+    downloadLink.href = downloadUrl;
+    downloadLink.download = fileName;
+
+    document.body.appendChild(downloadLink);
+    downloadLink.click();
+
+    document.body.removeChild(downloadLink);
+    window.URL.revokeObjectURL(downloadUrl);
+  } catch (error) {
+    console.error("保存文件失败:", error);
+    ElMessage.error("保存文件失败");
+  }
+}
+
+// 提供给父组件的方法
+defineExpose({
+  handleCloseExportsModal,
+});
+</script>
diff --git a/frontend/new-web/src/components/CURD/ImportModal.vue b/frontend/new-web/src/components/CURD/ImportModal.vue
new file mode 100644
index 00000000..d58c4e75
--- /dev/null
+++ b/frontend/new-web/src/components/CURD/ImportModal.vue
@@ -0,0 +1,305 @@
+<template>
+  <div class="curd-import-modal-host">
+    <!-- 导入弹窗 -->
+    <EnhancedDialog
+      v-model="importModalVisible"
+      :title="props.title"
+      :width="props.width"
+      dialog-class="curd-embed-dialog"
+      @close="handleClose"
+    >
+      <!-- 滚动 -->
+      <el-scrollbar :max-height="props.maxHeight">
+        <!-- 表单 -->
+        <el-form
+          ref="importFormRef"
+          style="padding-right: var(--el-dialog-padding-primary)"
+          :model="importFormData"
+          :rules="importFormRules"
+        >
+          <el-form-item prop="files">
+            <el-upload
+              ref="uploadRef"
+              v-model:file-list="importFormData.files"
+              class="w-full"
+              :accept="props.accept"
+              :drag="true"
+              :limit="props.limit"
+              :auto-upload="false"
+              :on-exceed="handleFileExceed"
+            >
+              <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+              <div class="el-upload__text">
+                {{ props.dropText || "将文件拖到此处，或" }}
+                <em>{{ props.browseText || "点击上传" }}</em>
+              </div>
+              <template #tip>
+                <div class="el-upload__tip flex flex-wrap gap-2">
+                  <el-text v-if="props.note" type="warning" class="mx-1">{{ props.note }}</el-text>
+                  <el-text v-if="props.fileTypeWarning" type="danger" class="mx-1">
+                    {{ props.fileTypeWarning }}
+                  </el-text>
+                  <el-link
+                    v-if="props.showTemplateDownload"
+                    v-hasPerm="[`${props.contentConfig.permPrefix}:download`]"
+                    class="mx-1"
+                    type="primary"
+                    icon="download"
+                    underline="never"
+                    @click="handleDownloadTemplate"
+                  >
+                    {{ props.templateDownloadText || "下载模板" }}
+                  </el-link>
+                </div>
+              </template>
+            </el-upload>
+          </el-form-item>
+        </el-form>
+      </el-scrollbar>
+      <template #footer>
+        <div style="padding-right: var(--el-dialog-padding-primary)">
+          <el-button @click="handleClose">{{ props.cancelButtonText || "取 消" }}</el-button>
+          <el-button
+            type="primary"
+            :disabled="importFormData.files.length === 0 || props.loading"
+            :loading="props.loading"
+            @click="handleUpload"
+          >
+            {{ props.confirmButtonText || "确 定" }}
+          </el-button>
+        </div>
+      </template>
+    </EnhancedDialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import EnhancedDialog from "./EnhancedDialog.vue";
+import { ElMessage, type UploadUserFile } from "element-plus";
+import { ref, reactive } from "vue";
+import type { IContentConfig, IObject } from "./types";
+
+/**
+ * 导入模态框组件属性定义
+ */
+interface ImportModalProps {
+  /**
+   * 弹窗标题
+   */
+  title?: string;
+
+  /**
+   * 弹窗宽度
+   */
+  width?: string;
+
+  /**
+   * 最大高度
+   */
+  maxHeight?: string;
+
+  /**
+   * 接受的文件类型
+   */
+  accept?: string;
+
+  /**
+   * 文件数量限制
+   */
+  limit?: number;
+
+  /**
+   * 是否显示下载模板按钮
+   */
+  showTemplateDownload?: boolean;
+
+  /**
+   * 拖放提示文本
+   */
+  dropText?: string;
+
+  /**
+   * 浏览按钮文本
+   */
+  browseText?: string;
+
+  /**
+   * 模板下载按钮文本
+   */
+  templateDownloadText?: string;
+
+  /**
+   * 取消按钮文本
+   */
+  cancelButtonText?: string;
+
+  /**
+   * 确认按钮文本
+   */
+  confirmButtonText?: string;
+
+  /**
+   * 注意事项文本
+   */
+  note?: string;
+
+  /**
+   * 文件类型警告文本
+   */
+  fileTypeWarning?: string;
+
+  /**
+   * 上传文件的参数名
+   */
+  uploadFileName?: string;
+
+  /**
+   * 上传请求的额外参数
+   */
+  uploadData?: IObject;
+
+  /**
+   * 导入配置
+   */
+  contentConfig: IContentConfig;
+
+  /**
+   * 上传loading状态
+   */
+  loading?: boolean;
+}
+
+// 定义props
+const props = withDefaults(defineProps<ImportModalProps>(), {
+  title: "导入数据",
+  width: "600px",
+  maxHeight: "60vh",
+  accept:
+    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel",
+  limit: 1,
+  showTemplateDownload: true,
+  note: "注意事项：",
+  fileTypeWarning: "格式为*.xlsx / *.xls，文件不超过 5MB",
+  uploadFileName: "file",
+  uploadData: () => ({}),
+});
+
+// 定义模型值（控制弹窗显示/隐藏）
+const importModalVisible = defineModel<boolean>("modelValue", {
+  required: true,
+  default: false,
+});
+
+// 定义事件
+const emit = defineEmits<{
+  /** 导入成功事件 */
+  "import-success": [data: any];
+  /** 导入失败事件 */
+  "import-fail": [error: any];
+  /** 关闭事件 */
+  close: [];
+  /** 下载模板事件 */
+  "download-template": [];
+  /** 上传事件 */
+  upload: [formData: FormData, file: File];
+}>();
+
+// 引用
+const importFormRef = ref(null);
+const uploadRef = ref(null);
+
+// 表单数据
+const importFormData = reactive<{
+  files: UploadUserFile[];
+}>({
+  files: [],
+});
+
+// 表单规则
+const importFormRules = {
+  files: [{ required: true, message: "文件不能为空", trigger: "blur" }],
+};
+
+// 文件超出个数限制
+const handleFileExceed = () => {
+  ElMessage.warning(`只能上传${props.limit}个文件`);
+};
+
+// 浏览器保存文件
+function saveXlsx(fileData: any, fileName: string) {
+  const fileType =
+    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
+
+  const blob = new Blob([fileData], { type: fileType });
+  const downloadUrl = window.URL.createObjectURL(blob);
+
+  const downloadLink = document.createElement("a");
+  downloadLink.href = downloadUrl;
+  downloadLink.download = fileName;
+
+  document.body.appendChild(downloadLink);
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+  window.URL.revokeObjectURL(downloadUrl);
+}
+
+// 下载导入模板
+function handleDownloadTemplate() {
+  try {
+    const importTemplate = props.contentConfig.importTemplate;
+    if (typeof importTemplate === "string") {
+      window.open(importTemplate);
+    } else if (typeof importTemplate === "function") {
+      importTemplate().then((response) => {
+        const fileData = response.data;
+        const fileName = decodeURI(
+          response.headers["content-disposition"].split(";")[1].split("=")[1]
+        );
+        saveXlsx(fileData, fileName);
+      });
+    } else {
+      ElMessage.error("未配置importTemplate");
+    }
+  } catch (error) {
+    console.error("下载模板失败:", error);
+    ElMessage.error("下载模板失败");
+  }
+}
+
+// 上传文件 - 由父组件实现具体逻辑
+const handleUpload = async () => {
+  if (!importFormData.files.length) {
+    ElMessage.warning("请选择文件");
+    return;
+  }
+
+  try {
+    const file = importFormData.files[0].raw as File;
+    const formData = new FormData();
+    formData.append(props.uploadFileName, file);
+
+    Object.keys(props.uploadData).forEach((key) => {
+      formData.append(key, props.uploadData[key]);
+    });
+
+    emit("upload", formData, file);
+  } catch (error: any) {
+    console.error("上传失败:", error);
+    ElMessage.error("上传失败：" + error.message || error);
+    emit("import-fail", error);
+  }
+};
+
+// 关闭弹窗
+const handleClose = () => {
+  importFormData.files.length = 0;
+  importModalVisible.value = false;
+  emit("close");
+};
+
+// 提供给父组件的方法
+defineExpose({
+  handleClose,
+});
+</script>
diff --git a/frontend/new-web/src/components/CURD/PageContent.vue b/frontend/new-web/src/components/CURD/PageContent.vue
new file mode 100644
index 00000000..89eaa026
--- /dev/null
+++ b/frontend/new-web/src/components/CURD/PageContent.vue
@@ -0,0 +1,997 @@
+<template>
+  <el-card
+    class="data-table flex-1 min-h-0"
+    :shadow="config.cardShadow ?? 'never'"
+    :class="contentConfig.cardClass"
+    :body-style="cardBodyStyle"
+  >
+    <template v-if="slots.header" #header>
+      <slot name="header" />
+    </template>
+    <!-- 表格工具栏：#toolbar 可完全自定义；默认左右分栏 -->
+    <div
+      v-if="
+        config.showToolbar !== false &&
+        (slots.toolbar || toolbarLeftBtn.length > 0 || toolbarRightBtn.length > 0)
+      "
+      class="data-table__toolbar"
+    >
+      <slot
+        name="toolbar"
+        :toolbar-left="toolbarLeftBtn"
+        :toolbar-right="toolbarRightBtn"
+        :on-toolbar="handleToolbar"
+        :remove-ids="removeIds"
+        :cols="cols"
+      >
+        <CrudToolbarLeft
+          v-if="toolbarLeftBtn.length > 0"
+          :remove-ids="removeIds"
+          :config-buttons="toolbarLeftBtn"
+          @toolbar="handleToolbar"
+        />
+        <div class="data-table__toolbar--right">
+          <CrudToolbarRight :buttons="toolbarRightBtn" :cols="cols" :on-toolbar="handleToolbar" />
+        </div>
+      </slot>
+    </div>
+
+    <!-- 列表：默认内置 el-table；传入 #table 插槽可完全自定义（普通表 / 树表等） -->
+    <div class="data-table__content">
+      <slot
+        name="table"
+        :data="pageData"
+        :loading="loading"
+        :table-ref="tableRef"
+        :on-selection-change="handleSelectionChange"
+        :pagination="pagination"
+      >
+        <el-table
+          ref="tableRef"
+          v-loading="loading"
+          v-bind="contentConfig.table"
+          :data="pageData"
+          :row-key="pk"
+          class="flex-1"
+          @selection-change="handleSelectionChange"
+          @filter-change="handleFilterChange"
+        >
+          <template v-for="col in cols" :key="col.prop">
+            <el-table-column v-if="col.show" v-bind="col">
+              <template #default="scope">
+                <!-- 显示图片 -->
+                <template v-if="col.templet === 'image'">
+                  <template v-if="col.prop">
+                    <template v-if="Array.isArray(scope.row[col.prop])">
+                      <template v-for="(item, index) in scope.row[col.prop]" :key="item">
+                        <el-image
+                          :src="item"
+                          :preview-src-list="scope.row[col.prop]"
+                          :initial-index="Number(index)"
+                          :preview-teleported="true"
+                          :style="`width: ${col.imageWidth ?? 40}px; height: ${col.imageHeight ?? 40}px`"
+                        />
+                      </template>
+                    </template>
+                    <template v-else>
+                      <el-image
+                        :src="scope.row[col.prop]"
+                        :preview-src-list="[scope.row[col.prop]]"
+                        :preview-teleported="true"
+                        :style="`width: ${col.imageWidth ?? 40}px; height: ${col.imageHeight ?? 40}px`"
+                      />
+                    </template>
+                  </template>
+                </template>
+                <!-- 根据行的selectList属性返回对应列表值 -->
+                <template v-else-if="col.templet === 'list'">
+                  <template v-if="col.prop">
+                    {{ (col.selectList ?? {})[scope.row[col.prop]] }}
+                  </template>
+                </template>
+                <!-- 格式化显示链接 -->
+                <template v-else-if="col.templet === 'url'">
+                  <template v-if="col.prop">
+                    <el-link type="primary" :href="scope.row[col.prop]" target="_blank">
+                      {{ scope.row[col.prop] }}
+                    </el-link>
+                  </template>
+                </template>
+                <!-- 生成开关组件 -->
+                <template v-else-if="col.templet === 'switch'">
+                  <template v-if="col.prop">
+                    <!-- pageData.length>0: 解决el-switch组件会在表格初始化的时候触发一次change事件 -->
+                    <el-switch
+                      v-model="scope.row[col.prop]"
+                      :active-value="col.activeValue ?? 1"
+                      :inactive-value="col.inactiveValue ?? 0"
+                      :inline-prompt="true"
+                      :active-text="col.activeText ?? ''"
+                      :inactive-text="col.inactiveText ?? ''"
+                      :validate-event="false"
+                      :disabled="col.disabled"
+                      @change="
+                        pageData.length > 0 &&
+                        handleModify(col.prop, scope.row[col.prop], scope.row)
+                      "
+                    />
+                  </template>
+                </template>
+                <!-- 生成输入框组件 -->
+                <template v-else-if="col.templet === 'input'">
+                  <template v-if="col.prop">
+                    <el-input
+                      v-model="scope.row[col.prop]"
+                      :type="col.inputType ?? 'text'"
+                      :disabled="col.disabled"
+                      @blur="handleModify(col.prop, scope.row[col.prop], scope.row)"
+                    />
+                  </template>
+                </template>
+                <!-- 格式化为价格 -->
+                <template v-else-if="col.templet === 'price'">
+                  <template v-if="col.prop">
+                    {{ `${col.priceFormat ?? "￥"}${scope.row[col.prop]}` }}
+                  </template>
+                </template>
+                <!-- 格式化为百分比 -->
+                <template v-else-if="col.templet === 'percent'">
+                  <template v-if="col.prop">{{ scope.row[col.prop] }}%</template>
+                </template>
+                <!-- 显示图标 -->
+                <template v-else-if="col.templet === 'icon'">
+                  <template v-if="col.prop">
+                    <template v-if="scope.row[col.prop].startsWith('el-icon-')">
+                      <el-icon>
+                        <component :is="scope.row[col.prop].replace('el-icon-', '')" />
+                      </el-icon>
+                    </template>
+                    <template v-else>
+                      <div class="i-svg:{{ scope.row[col.prop] }}" />
+                    </template>
+                  </template>
+                </template>
+                <!-- 格式化时间 -->
+                <template v-else-if="col.templet === 'date'">
+                  <template v-if="col.prop">
+                    {{
+                      scope.row[col.prop]
+                        ? useDateFormat(
+                            scope.row[col.prop],
+                            col.dateFormat ?? "YYYY-MM-DD HH:mm:ss"
+                          ).value
+                        : ""
+                    }}
+                  </template>
+                </template>
+                <!-- 列操作栏 -->
+                <template v-else-if="col.templet === 'tool'">
+                  <template v-for="(btn, index) in tableToolbarBtn" :key="index">
+                    <el-button
+                      v-if="btn.render === undefined || btn.render(scope.row)"
+                      v-hasPerm="btn.perm ?? '*:*:*'"
+                      v-bind="btn.attrs"
+                      @click="
+                        handleOperate({
+                          name: btn.name,
+                          row: scope.row,
+                          column: scope.column,
+                          $index: scope.$index,
+                        })
+                      "
+                    >
+                      {{ btn.text }}
+                    </el-button>
+                  </template>
+                </template>
+                <!-- 自定义 -->
+                <template v-else-if="col.templet === 'custom'">
+                  <slot :name="col.slotName ?? col.prop" :prop="col.prop" v-bind="scope" />
+                </template>
+              </template>
+            </el-table-column>
+          </template>
+        </el-table>
+      </slot>
+    </div>
+
+    <template v-if="showPagination" #footer>
+      <el-scrollbar :class="['h-8!', { 'flex-x-end': contentConfig?.pagePosition === 'right' }]">
+        <el-pagination
+          v-bind="pagination"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </el-scrollbar>
+    </template>
+
+    <!-- 导出弹窗 -->
+    <EnhancedDialog
+      v-model="exportsModalVisible"
+      title="导出数据"
+      width="600px"
+      dialog-class="curd-embed-dialog"
+      modal-class="curd-embed-dialog"
+      @close="handleCloseExportsModal"
+    >
+      <!-- 滚动 -->
+      <el-scrollbar max-height="60vh">
+        <!-- 表单 -->
+        <el-form
+          ref="exportsFormRef"
+          style="padding-right: var(--el-dialog-padding-primary)"
+          :model="exportsFormData"
+          :rules="exportsFormRules"
+        >
+          <el-form-item label="文件名" prop="filename">
+            <el-input v-model="exportsFormData.filename" clearable />
+          </el-form-item>
+          <el-form-item label="工作表名" prop="sheetname">
+            <el-input v-model="exportsFormData.sheetname" clearable />
+          </el-form-item>
+          <el-form-item label="数据源" prop="origin">
+            <el-select v-model="exportsFormData.origin">
+              <el-option label="当前数据 (当前页的数据)" :value="ExportsOriginEnum.CURRENT" />
+              <el-option
+                label="选中数据 (所有选中的数据)"
+                :value="ExportsOriginEnum.SELECTED"
+                :disabled="selectionData.length <= 0"
+              />
+              <el-option
+                label="全量数据 (所有分页的数据)"
+                :value="ExportsOriginEnum.REMOTE"
+                :disabled="contentConfig.exportsAction === undefined"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="字段" prop="fields">
+            <el-checkbox-group v-model="exportsFormData.fields">
+              <template v-for="col in cols" :key="col.prop">
+                <el-checkbox v-if="col.prop" :value="col.prop" :label="col.label" />
+              </template>
+            </el-checkbox-group>
+          </el-form-item>
+        </el-form>
+      </el-scrollbar>
+      <!-- 弹窗底部操作按钮 -->
+      <template #footer>
+        <div style="padding-right: var(--el-dialog-padding-primary)">
+          <el-button type="primary" @click="handleExportsSubmit">确 定</el-button>
+          <el-button @click="handleCloseExportsModal">取 消</el-button>
+        </div>
+      </template>
+    </EnhancedDialog>
+    <!-- 导入弹窗 -->
+    <EnhancedDialog
+      v-model="importModalVisible"
+      title="导入数据"
+      width="600px"
+      dialog-class="curd-embed-dialog"
+      modal-class="curd-embed-dialog"
+      @close="handleCloseImportModal"
+    >
+      <!-- 滚动 -->
+      <el-scrollbar max-height="60vh">
+        <!-- 表单 -->
+        <el-form
+          ref="importFormRef"
+          style="padding-right: var(--el-dialog-padding-primary)"
+          :model="importFormData"
+          :rules="importFormRules"
+        >
+          <el-form-item label="文件名" prop="files">
+            <el-upload
+              ref="uploadRef"
+              v-model:file-list="importFormData.files"
+              class="w-full"
+              accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
+              :drag="true"
+              :limit="1"
+              :auto-upload="false"
+              :on-exceed="handleFileExceed"
+            >
+              <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+              <div class="el-upload__text">
+                <span>将文件拖到此处，或</span>
+                <em>点击上传</em>
+              </div>
+              <template #tip>
+                <div class="el-upload__tip">
+                  *.xlsx / *.xls
+                  <el-link
+                    v-if="contentConfig.importTemplate"
+                    type="primary"
+                    icon="download"
+                    underline="never"
+                    @click="handleDownloadTemplate"
+                  >
+                    下载模板
+                  </el-link>
+                </div>
+              </template>
+            </el-upload>
+          </el-form-item>
+        </el-form>
+      </el-scrollbar>
+      <!-- 弹窗底部操作按钮 -->
+      <template #footer>
+        <div style="padding-right: var(--el-dialog-padding-primary)">
+          <el-button
+            type="primary"
+            :disabled="importFormData.files.length === 0"
+            @click="handleImportSubmit"
+          >
+            确 定
+          </el-button>
+          <el-button @click="handleCloseImportModal">取 消</el-button>
+        </div>
+      </template>
+    </EnhancedDialog>
+  </el-card>
+</template>
+
+<script setup lang="ts">
+import { useDateFormat, useThrottleFn } from "@vueuse/core";
+import {
+  ElMessage,
+  genFileId,
+  type FormInstance,
+  type FormRules,
+  type UploadInstance,
+  type UploadRawFile,
+  type UploadUserFile,
+  type TableInstance,
+} from "element-plus";
+import ExcelJS from "exceljs";
+import { reactive, ref, computed, nextTick, useSlots } from "vue";
+import CrudToolbarLeft from "./CrudToolbarLeft.vue";
+import CrudToolbarRight from "./CrudToolbarRight.vue";
+import EnhancedDialog from "./EnhancedDialog.vue";
+import type { IContentConfig, IObject, IOperateData } from "./types";
+import type { IToolsButton } from "./types";
+
+const slots = useSlots();
+
+const cardBodyStyle = {
+  display: "flex",
+  flex: 1,
+  flexDirection: "column" as const,
+  minHeight: 0,
+  overflow: "hidden",
+  padding: "16px 20px",
+};
+
+// 定义接收的属性
+const props = defineProps<{ contentConfig: IContentConfig }>();
+// 定义自定义事件
+const emit = defineEmits<{
+  addClick: [];
+  exportClick: [];
+  toolbarClick: [name: string];
+  editClick: [row: IObject];
+  filterChange: [data: IObject];
+  operateClick: [data: IOperateData];
+}>();
+
+// 表格工具栏按钮配置
+const config = computed(() => props.contentConfig);
+const buttonConfig = reactive<Record<string, IObject>>({
+  add: { text: "新增", attrs: { icon: "plus", type: "success" }, perm: "create" },
+  delete: { text: "删除", attrs: { icon: "delete", type: "danger" }, perm: "delete" },
+  patch: { text: "批量修改", attrs: { icon: "edit", type: "warning" }, perm: "patch" },
+  import: { text: "导入", attrs: { icon: "upload", type: "info" }, perm: "import" },
+  export: { text: "导出", attrs: { icon: "download", type: "warning" }, perm: "export" },
+  refresh: { text: "刷新", attrs: { icon: "refresh", type: "success" }, perm: "*:*:*" },
+  filter: { text: "筛选列", attrs: { icon: "operation", type: "danger" }, perm: "*:*:*" },
+  view: { text: "详情", attrs: { icon: "view", type: "primary" }, perm: "detail" },
+  edit: { text: "编辑", attrs: { icon: "edit", type: "primary" }, perm: "update" },
+});
+
+// 主键
+const pk = props.contentConfig.pk ?? "id";
+// 权限名称前缀
+const authPrefix = computed(() => props.contentConfig.permPrefix);
+
+// 获取按钮权限标识
+function getButtonPerm(action: string): string | null {
+  // 如果action已经包含完整路径(包含冒号)，则直接使用
+  if (action.includes(":")) {
+    return action;
+  }
+  // 否则使用权限前缀组合
+  return authPrefix.value ? `${authPrefix.value}:${action}` : null;
+}
+
+// 检查是否有权限
+// function hasButtonPerm(action: string): boolean {
+//   const perm = getButtonPerm(action);
+//   // 如果没有设置权限标识，则默认具有权限
+//   if (!perm) return true;
+//   return hasAuth(perm);
+// }
+
+// 创建工具栏按钮
+function createToolbar(toolbar: Array<string | IToolsButton>, attr = {}) {
+  return toolbar.map((item) => {
+    const isString = typeof item === "string";
+    const name = isString ? item : item?.name || "";
+    const base = (isString ? buttonConfig[item] : buttonConfig[name]) as IObject | undefined;
+    return {
+      name,
+      text: isString ? buttonConfig[item].text : (item?.text ?? base?.text),
+      // 对象写法（如 { name: 'refresh', perm: 'refresh' }）需合并 buttonConfig 默认 attrs，否则无 icon/type
+      attrs: {
+        ...attr,
+        ...(isString ? buttonConfig[item].attrs : { ...base?.attrs, ...item?.attrs }),
+      },
+      render: isString ? undefined : (item?.render ?? undefined),
+      perm: isString
+        ? getButtonPerm(buttonConfig[item].perm)
+        : item?.perm
+          ? getButtonPerm(item.perm as string)
+          : "*:*:*",
+    };
+  });
+}
+
+// 左侧工具栏按钮
+const toolbarLeftBtn = computed(() => {
+  if (!config.value.toolbar || config.value.toolbar.length === 0) return [];
+  return createToolbar(config.value.toolbar, {});
+});
+
+const hideColumnFilter = computed(() => {
+  if (config.value.hideColumnFilter === true) return true;
+  if (config.value.hideColumnFilter === false) return false;
+  return Boolean(slots.table);
+});
+
+// 右侧工具栏按钮
+const toolbarRightBtn = computed(() => {
+  if (!config.value.defaultToolbar || config.value.defaultToolbar.length === 0) return [];
+  const raw = createToolbar(config.value.defaultToolbar, { circle: true });
+  if (hideColumnFilter.value) {
+    return raw.filter((b) => b.name !== "filter");
+  }
+  return raw;
+});
+
+// 表格操作工具栏（优先使用 templet 为 tool 的列，避免仅数据列时取错最后一列）
+const toolColumn = computed(
+  () => config.value.cols.find((c) => c.templet === "tool") ?? config.value.cols.at(-1)
+);
+const tableToolbar = computed(() => toolColumn.value?.operat ?? ["edit", "delete"]);
+const tableToolbarBtn = computed(() =>
+  createToolbar(tableToolbar.value, { link: true, size: "small" })
+);
+
+// 表格列
+const cols = ref(
+  props.contentConfig.cols.map((col) => {
+    if (col.initFn) {
+      col.initFn(col);
+    }
+    if (col.show === undefined) {
+      col.show = true;
+    }
+    if (col.prop !== undefined && col.columnKey === undefined && col["column-key"] === undefined) {
+      col.columnKey = col.prop;
+    }
+    if (
+      col.type === "selection" &&
+      col.reserveSelection === undefined &&
+      col["reserve-selection"] === undefined
+    ) {
+      // 配合表格row-key实现跨页多选
+      col.reserveSelection = true;
+    }
+    return col;
+  })
+);
+// 加载状态
+const loading = ref(false);
+// 列表数据
+const pageData = ref<IObject[]>([]);
+// 显示分页
+const showPagination = props.contentConfig.pagination !== false;
+// 分页配置
+const defaultPagination = {
+  background: true,
+  layout: "total, sizes, prev, pager, next, jumper",
+  pageSize: 20,
+  pageSizes: [10, 20, 30, 50],
+  total: 0,
+  currentPage: 1,
+};
+const pagination = reactive(
+  typeof props.contentConfig.pagination === "object"
+    ? { ...defaultPagination, ...props.contentConfig.pagination }
+    : defaultPagination
+);
+// 分页相关的请求参数
+const request = props.contentConfig.request ?? {
+  page_no: 1,
+  page_size: 10,
+};
+
+const tableRef = ref<TableInstance>();
+
+// 行选中
+const selectionData = ref<IObject[]>([]);
+// 删除ID集合 用于批量删除
+const removeIds = ref<(number | string)[]>([]);
+function handleSelectionChange(selection: any[]) {
+  selectionData.value = selection;
+  removeIds.value = selection.map((item) => item[pk]);
+}
+
+// 获取行选中
+function getSelectionData() {
+  return selectionData.value;
+}
+
+// 刷新
+function handleRefresh(isRestart = false) {
+  fetchPageData(lastFormData, isRestart);
+}
+
+// 删除
+function handleDelete(id?: number | string) {
+  let ids = "";
+  if (id !== undefined && id !== null && id !== "") {
+    ids = String(id);
+  } else if (removeIds.value.length) {
+    ids = removeIds.value.map(String).join(",");
+  }
+  if (!ids) {
+    ElMessage.warning("请勾选删除项");
+    return;
+  }
+
+  const dc = props.contentConfig.deleteConfirm;
+  ElMessageBox.confirm(dc?.message ?? "确认删除?", dc?.title ?? "警告", {
+    confirmButtonText: dc?.confirmButtonText ?? "确定",
+    cancelButtonText: dc?.cancelButtonText ?? "取消",
+    type: dc?.type ?? "warning",
+  })
+    .then(function () {
+      if (props.contentConfig.deleteAction) {
+        props.contentConfig
+          .deleteAction(ids)
+          .then(() => {
+            removeIds.value = [];
+            //清空选中项
+            tableRef.value?.clearSelection();
+            handleRefresh(true);
+          })
+          .catch(() => {});
+      } else {
+        ElMessage.error("未配置deleteAction");
+      }
+    })
+    .catch(() => {});
+}
+
+// 导出表单
+const fields: string[] = [];
+cols.value.forEach((item) => {
+  if (item.prop !== undefined) {
+    fields.push(item.prop);
+  }
+});
+const enum ExportsOriginEnum {
+  CURRENT = "current",
+  SELECTED = "selected",
+  REMOTE = "remote",
+}
+const exportsModalVisible = ref(false);
+const exportsFormRef = ref<FormInstance>();
+const exportsFormData = reactive({
+  filename: "",
+  sheetname: "",
+  fields,
+  origin: ExportsOriginEnum.CURRENT,
+});
+const exportsFormRules: FormRules = {
+  fields: [{ required: true, message: "请选择字段" }],
+  origin: [{ required: true, message: "请选择数据源" }],
+};
+// 打开导出弹窗
+function handleOpenExportsModal() {
+  exportsModalVisible.value = true;
+}
+// 导出确认
+const handleExportsSubmit = useThrottleFn(() => {
+  exportsFormRef.value?.validate((valid: boolean) => {
+    if (valid) {
+      handleExports();
+      handleCloseExportsModal();
+    }
+  });
+}, 3000);
+// 关闭导出弹窗
+function handleCloseExportsModal() {
+  exportsModalVisible.value = false;
+  exportsFormRef.value?.resetFields();
+  nextTick(() => {
+    exportsFormRef.value?.clearValidate();
+  });
+}
+// 导出
+function handleExports() {
+  const filename = exportsFormData.filename
+    ? exportsFormData.filename
+    : props.contentConfig.permPrefix || "export";
+  const sheetname = exportsFormData.sheetname ? exportsFormData.sheetname : "sheet";
+  const workbook = new ExcelJS.Workbook();
+  const worksheet = workbook.addWorksheet(sheetname);
+  const columns: Partial<ExcelJS.Column>[] = [];
+  cols.value.forEach((col) => {
+    if (col.label && col.prop && exportsFormData.fields.includes(col.prop)) {
+      columns.push({ header: col.label, key: col.prop });
+    }
+  });
+  worksheet.columns = columns;
+  if (exportsFormData.origin === ExportsOriginEnum.REMOTE) {
+    if (props.contentConfig.exportsAction) {
+      props.contentConfig.exportsAction(lastFormData).then((res) => {
+        worksheet.addRows(res);
+        workbook.xlsx
+          .writeBuffer()
+          .then((buffer) => {
+            saveXlsx(buffer, filename as string);
+          })
+          .catch((error) => console.log(error));
+      });
+    } else {
+      ElMessage.error("未配置exportsAction");
+    }
+  } else {
+    worksheet.addRows(
+      exportsFormData.origin === ExportsOriginEnum.SELECTED ? selectionData.value : pageData.value
+    );
+    workbook.xlsx
+      .writeBuffer()
+      .then((buffer) => {
+        saveXlsx(buffer, filename as string);
+      })
+      .catch((error) => console.log(error));
+  }
+}
+
+// 导入表单
+let isFileImport = false;
+const uploadRef = ref<UploadInstance>();
+const importModalVisible = ref(false);
+const importFormRef = ref<FormInstance>();
+const importFormData = reactive<{
+  files: UploadUserFile[];
+}>({
+  files: [],
+});
+const importFormRules: FormRules = {
+  files: [{ required: true, message: "请选择文件" }],
+};
+// 打开导入弹窗
+function handleOpenImportModal(isFile: boolean = false) {
+  importModalVisible.value = true;
+  isFileImport = isFile;
+}
+// 覆盖前一个文件
+function handleFileExceed(files: File[]) {
+  uploadRef.value!.clearFiles();
+  const file = files[0] as UploadRawFile;
+  file.uid = genFileId();
+  uploadRef.value!.handleStart(file);
+}
+// 下载导入模板
+function handleDownloadTemplate() {
+  const importTemplate = props.contentConfig.importTemplate;
+  if (typeof importTemplate === "string") {
+    window.open(importTemplate);
+  } else if (typeof importTemplate === "function") {
+    importTemplate().then((response) => {
+      const fileData = response.data;
+      const fileName = decodeURI(
+        response.headers["content-disposition"].split(";")[1].split("=")[1]
+      );
+      saveXlsx(fileData, fileName);
+    });
+  } else {
+    ElMessage.error("未配置importTemplate");
+  }
+}
+// 导入确认
+const handleImportSubmit = useThrottleFn(() => {
+  importFormRef.value?.validate((valid: boolean) => {
+    if (valid) {
+      if (isFileImport) {
+        handleImport();
+      } else {
+        handleImports();
+      }
+    }
+  });
+}, 3000);
+// 关闭导入弹窗
+function handleCloseImportModal() {
+  importModalVisible.value = false;
+  importFormRef.value?.resetFields();
+  nextTick(() => {
+    importFormRef.value?.clearValidate();
+  });
+}
+// 文件导入
+function handleImport() {
+  const importAction = props.contentConfig.importAction;
+  if (importAction === undefined) {
+    ElMessage.error("未配置importAction");
+    return;
+  }
+  importAction(importFormData.files[0].raw as File).then(() => {
+    ElMessage.success("导入数据成功");
+    handleCloseImportModal();
+    handleRefresh(true);
+  });
+}
+// 导入
+function handleImports() {
+  const importsAction = props.contentConfig.importsAction;
+  if (importsAction === undefined) {
+    ElMessage.error("未配置importsAction");
+    return;
+  }
+  // 获取选择的文件
+  const file = importFormData.files[0].raw as File;
+  // 创建Workbook实例
+  const workbook = new ExcelJS.Workbook();
+  // 使用FileReader对象来读取文件内容
+  const fileReader = new FileReader();
+  // 二进制字符串的形式加载文件
+  fileReader.readAsArrayBuffer(file);
+  fileReader.onload = (ev) => {
+    if (ev.target !== null && ev.target.result !== null) {
+      const result = ev.target.result as ArrayBuffer;
+      // 从 buffer中加载数据解析
+      workbook.xlsx
+        .load(result)
+        .then((workbook) => {
+          // 解析后的数据
+          const data = [];
+          // 获取第一个worksheet内容
+          const worksheet = workbook.getWorksheet(1);
+          if (worksheet) {
+            // 获取第一行的标题
+            const fields: any[] = [];
+            worksheet.getRow(1).eachCell((cell) => {
+              fields.push(cell.value);
+            });
+            // 遍历工作表的每一行（从第二行开始，因为第一行通常是标题行）
+            for (let rowNumber = 2; rowNumber <= worksheet.rowCount; rowNumber++) {
+              const rowData: IObject = {};
+              const row = worksheet.getRow(rowNumber);
+              // 遍历当前行的每个单元格
+              row.eachCell((cell, colNumber) => {
+                // 获取标题对应的键，并将当前单元格的值存储到相应的属性名中
+                rowData[fields[colNumber - 1]] = cell.value;
+              });
+              // 将当前行的数据对象添加到数组中
+              data.push(rowData);
+            }
+          }
+          if (data.length === 0) {
+            ElMessage.error("未解析到数据");
+            return;
+          }
+          importsAction(data).then(() => {
+            ElMessage.success("导入数据成功");
+            handleCloseImportModal();
+            handleRefresh(true);
+          });
+        })
+        .catch((error) => console.log(error));
+    } else {
+      ElMessage.error("读取文件失败");
+    }
+  };
+}
+
+// 操作栏
+function handleToolbar(name: string) {
+  switch (name) {
+    case "refresh":
+      handleRefresh();
+      break;
+    case "export":
+      handleOpenExportsModal();
+      break;
+    case "imports":
+      handleOpenImportModal();
+      break;
+    case "add":
+      emit("addClick");
+      break;
+    case "delete":
+      handleDelete();
+      break;
+    case "patch":
+      emit("toolbarClick", name);
+      break;
+    case "import":
+      handleOpenImportModal(true);
+      break;
+    default:
+      emit("toolbarClick", name);
+      break;
+  }
+}
+
+// 操作列
+function handleOperate(data: IOperateData) {
+  switch (data.name) {
+    case "delete":
+      if (props.contentConfig?.deleteAction) {
+        handleDelete(data.row[pk]);
+      } else {
+        emit("operateClick", data);
+      }
+      break;
+    default:
+      emit("operateClick", data);
+      break;
+  }
+}
+
+// 属性修改
+function handleModify(field: string, value: boolean | string | number, row: Record<string, any>) {
+  if (props.contentConfig.modifyAction) {
+    props.contentConfig.modifyAction({
+      [pk]: row[pk],
+      field,
+      value,
+    });
+  } else {
+    ElMessage.error("未配置modifyAction");
+  }
+}
+
+// 分页切换
+function handleSizeChange(value: number) {
+  pagination.pageSize = value;
+  handleRefresh();
+}
+function handleCurrentChange(value: number) {
+  pagination.currentPage = value;
+  handleRefresh();
+}
+
+// 远程数据筛选
+let filterParams: IObject = {};
+function handleFilterChange(newFilters: any) {
+  const filters: IObject = {};
+  for (const key in newFilters) {
+    const col = cols.value.find((col) => {
+      return col.columnKey === key || col["column-key"] === key;
+    });
+    if (col && col.filterJoin !== undefined) {
+      filters[key] = newFilters[key].join(col.filterJoin);
+    } else {
+      filters[key] = newFilters[key];
+    }
+  }
+  filterParams = { ...filterParams, ...filters };
+  emit("filterChange", filterParams);
+}
+
+// 获取筛选条件
+function getFilterParams() {
+  return filterParams;
+}
+
+// 获取分页数据
+let lastFormData = {};
+function getIndexActionErrorMessage(err: unknown): string {
+  if (err && typeof err === "object" && "response" in err) {
+    const d = (err as { response?: { data?: { msg?: string; message?: string } } }).response?.data;
+    if (d?.msg) return String(d.msg);
+    if (d?.message) return String(d.message);
+  }
+  if (err instanceof Error && err.message) return err.message;
+  return "数据加载失败";
+}
+
+function fetchPageData(formData: IObject = {}, isRestart = false) {
+  loading.value = true;
+  // 上一次搜索条件
+  lastFormData = formData;
+  // 重置页码
+  if (isRestart) {
+    pagination.currentPage = 1;
+  }
+  props.contentConfig
+    .indexAction(
+      showPagination
+        ? {
+            [request.page_no]: pagination.currentPage,
+            [request.page_size]: pagination.pageSize,
+            ...formData,
+          }
+        : formData
+    )
+    .then((data) => {
+      if (showPagination) {
+        if (props.contentConfig.parseData) {
+          data = props.contentConfig.parseData(data);
+        }
+        pagination.total = data.total;
+        pageData.value = data.list;
+      } else {
+        pageData.value = data;
+      }
+    })
+    .catch((err: unknown) => {
+      console.error(err);
+      ElMessage.error(getIndexActionErrorMessage(err));
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+if (props.contentConfig.initialFetch !== false) {
+  fetchPageData();
+}
+
+// 导出Excel
+function exportPageData(formData: IObject = {}) {
+  if (props.contentConfig.exportAction) {
+    props.contentConfig.exportAction(formData).then((response) => {
+      const fileData = response.data;
+      const fileName = decodeURI(
+        response.headers["content-disposition"].split(";")[1].split("=")[1]
+      );
+      saveXlsx(fileData, fileName);
+    });
+  } else {
+    ElMessage.error("未配置exportAction");
+  }
+}
+
+// 浏览器保存文件
+function saveXlsx(fileData: any, fileName: string) {
+  const fileType =
+    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
+
+  const blob = new Blob([fileData], { type: fileType });
+  const downloadUrl = window.URL.createObjectURL(blob);
+
+  const downloadLink = document.createElement("a");
+  downloadLink.href = downloadUrl;
+  downloadLink.download = fileName;
+
+  document.body.appendChild(downloadLink);
+  downloadLink.click();
+
+  document.body.removeChild(downloadLink);
+  window.URL.revokeObjectURL(downloadUrl);
+}
+
+// 暴露的属性和方法
+defineExpose({
+  fetchPageData,
+  exportPageData,
+  getFilterParams,
+  getSelectionData,
+  handleRefresh,
+  handleToolbar,
+  handleDelete,
+  pageData,
+  pagination,
+  tableRef,
+});
+</script>
+
+<style lang="scss" scoped>
+:deep(.curd-embed-dialog) {
+  padding-right: 0;
+}
+</style>
diff --git a/frontend/new-web/src/components/CURD/PageModal.vue b/frontend/new-web/src/components/CURD/PageModal.vue
new file mode 100644
index 00000000..a86e298b
--- /dev/null
+++ b/frontend/new-web/src/components/CURD/PageModal.vue
@@ -0,0 +1,284 @@
+<template>
+  <div>
+    <!-- drawer -->
+    <template v-if="modalConfig.component === 'drawer'">
+      <el-drawer
+        v-model="modalVisible"
+        v-bind="{ destroyOnClose: true, ...modalConfig.drawer }"
+        @close="handleClose"
+      >
+        <el-form ref="formRef" v-bind="modalConfig.form" :model="formData" :rules="formRules">
+          <el-row :gutter="20">
+            <template v-for="item in formItems" :key="item.prop">
+              <el-col v-show="!item.hidden" v-bind="item.col">
+                <el-form-item :label="item.label" :prop="item.prop">
+                  <!-- Label -->
+                  <template #label>
+                    <span>
+                      {{ item?.label || "" }}
+                      <el-tooltip v-if="item?.tips" v-bind="getTooltipProps(item.tips)">
+                        <QuestionFilled class="w-4 h-4 mx-1" />
+                      </el-tooltip>
+                      <span v-if="modalConfig.colon" class="ml-0.5">:</span>
+                    </span>
+                  </template>
+
+                  <!-- components -->
+                  <template v-if="item.type === 'custom'">
+                    <slot
+                      :name="item.slotName ?? item.prop"
+                      :prop="item.prop"
+                      :form-data="formData"
+                      :attrs="item.attrs"
+                    ></slot>
+                  </template>
+                  <component
+                    :is="componentMap.get(item.type)"
+                    v-else
+                    v-model.trim="formData[item.prop]"
+                    v-bind="{ style: { width: '100%' }, ...item.attrs }"
+                  >
+                    <template v-if="['select', 'radio', 'checkbox'].includes(item.type)">
+                      <component
+                        :is="childrenMap.get(item.type)"
+                        v-for="opt in item.options"
+                        :key="opt.value"
+                        :label="opt.label"
+                        :value="opt.value"
+                      ></component>
+                    </template>
+
+                    <template v-if="item?.slotName && $slots[item.slotName]" #[item.slotName]>
+                      <slot :name="item.slotName" />
+                    </template>
+                  </component>
+                </el-form-item>
+              </el-col>
+            </template>
+          </el-row>
+        </el-form>
+
+        <template #footer>
+          <el-button v-if="!formDisable" type="primary" @click="handleSubmit">确 定</el-button>
+          <el-button @click="handleClose">{{ !formDisable ? "取 消" : "关闭" }}</el-button>
+        </template>
+      </el-drawer>
+    </template>
+    <!-- dialog -->
+    <template v-else>
+      <EnhancedDialog
+        v-model="modalVisible"
+        :title="String(modalConfig.dialog?.title ?? '')"
+        :width="modalConfig.dialog?.width ?? '600px'"
+        :draggable="modalConfig.dialog?.draggable !== false"
+        v-bind="dialogRestAttrs"
+        @close="handleClose"
+      >
+        <el-form ref="formRef" v-bind="modalConfig.form" :model="formData" :rules="formRules">
+          <el-scrollbar max-height="70vh" :view-style="{ overflowX: 'hidden' }">
+            <el-row :gutter="20">
+              <template v-for="item in formItems" :key="item.prop">
+                <el-col v-show="!item.hidden" v-bind="item.col">
+                  <el-form-item :label="item.label" :prop="item.prop">
+                    <template #label>
+                      <span>
+                        {{ item?.label || "" }}
+                        <el-tooltip v-if="item?.tips" v-bind="getTooltipProps(item.tips)">
+                          <QuestionFilled class="w-4 h-4 mx-1" />
+                        </el-tooltip>
+                        <span v-if="modalConfig.colon" class="ml-0.5">:</span>
+                      </span>
+                    </template>
+
+                    <template v-if="item.type === 'custom'">
+                      <slot
+                        :name="item.slotName ?? item.prop"
+                        :prop="item.prop"
+                        :form-data="formData"
+                        :attrs="item.attrs"
+                      ></slot>
+                    </template>
+                    <component
+                      :is="componentMap.get(item.type)"
+                      v-else
+                      v-model.trim="formData[item.prop]"
+                      v-bind="{ style: { width: '100%' }, ...item.attrs }"
+                    >
+                      <template v-if="['select', 'radio', 'checkbox'].includes(item.type)">
+                        <component
+                          :is="childrenMap.get(item.type)"
+                          v-for="opt in item.options"
+                          :key="opt.value"
+                          :label="opt.label"
+                          :value="opt.value"
+                        ></component>
+                      </template>
+
+                      <template v-if="item?.slotName && $slots[item.slotName]" #[item.slotName]>
+                        <slot :name="item.slotName" />
+                      </template>
+                    </component>
+                  </el-form-item>
+                </el-col>
+              </template>
+            </el-row>
+            <slot name="bottom" :form-data="formData"></slot>
+          </el-scrollbar>
+        </el-form>
+
+        <template #footer>
+          <el-button v-if="!formDisable" type="primary" @click="handleSubmit">确 定</el-button>
+          <el-button @click="handleClose">{{ !formDisable ? "取 消" : "关闭" }}</el-button>
+        </template>
+      </EnhancedDialog>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, markRaw, onMounted, reactive, ref } from "vue";
+import { useThrottleFn } from "@vueuse/core";
+import type { FormInstance, FormRules } from "element-plus";
+import type { IComponentType, IModalConfig, IObject } from "./types";
+import InputTag from "@/components/InputTag/index.vue";
+import IconSelect from "@/components/IconSelect/index.vue";
+import EnhancedDialog from "./EnhancedDialog.vue";
+
+defineSlots<{ [key: string]: (_args: any) => any }>();
+// 定义接收的属性
+const props = defineProps<{ modalConfig: IModalConfig }>();
+// 自定义事件
+const emit = defineEmits<{ submitClick: []; customSubmit: [queryParams: IObject] }>();
+// 组件映射表
+
+const componentMap = new Map<IComponentType, any>([
+  // @ts-ignore
+  ["input", markRaw(ElInput)], // @ts-ignore
+  ["select", markRaw(ElSelect)], // @ts-ignore
+  ["switch", markRaw(ElSwitch)], // @ts-ignore
+  ["cascader", markRaw(ElCascader)], // @ts-ignore
+  ["input-number", markRaw(ElInputNumber)], // @ts-ignore
+  ["input-tag", markRaw(InputTag)], // @ts-ignore
+  ["time-picker", markRaw(ElTimePicker)], // @ts-ignore
+  ["time-select", markRaw(ElTimeSelect)], // @ts-ignore
+  ["date-picker", markRaw(ElDatePicker)], // @ts-ignore
+  ["tree-select", markRaw(ElTreeSelect)], // @ts-ignore"
+  ["custom-tag", markRaw(InputTag)], // @ts-ignore
+  ["text", markRaw(ElText)], // @ts-ignore
+  ["radio", markRaw(ElRadioGroup)], // @ts-ignore"
+  ["checkbox", markRaw(ElCheckboxGroup)], // @ts-ignore"
+  ["icon-select", markRaw(IconSelect)], // @ts-ignore"
+  ["custom", ""],
+]);
+const childrenMap = new Map<IComponentType, any>([
+  // @ts-ignore
+  ["select", markRaw(ElOption)], // @ts-ignore
+  ["radio", markRaw(ElRadio)], // @ts-ignore"
+  ["checkbox", markRaw(ElCheckbox)],
+]);
+
+const pk = props.modalConfig.pk ?? "id"; // 主键名，用于表单数据处理
+
+const dialogRestAttrs = computed(() => {
+  const d = props.modalConfig.dialog ?? {};
+  return { destroyOnClose: true, ...d };
+});
+const modalVisible = ref(false); // 弹窗显示状态
+const formRef = ref<FormInstance>(); // 表单实例
+const formItems = reactive(props.modalConfig.formItems ?? []); // 表单配置项
+const formData = reactive<IObject>({}); // 表单数据
+const formRules: FormRules = {}; // 表单验证规则
+const formDisable = ref(false); // 表单禁用状态
+
+// 获取tooltip提示框属性
+const getTooltipProps = (tips: string | IObject) => {
+  return typeof tips === "string" ? { content: tips } : tips;
+};
+// 隐藏弹窗
+const handleClose = () => {
+  modalVisible.value = false;
+  formRef.value?.resetFields();
+};
+// 设置表单值
+const setFormData = (data: IObject) => {
+  for (const key in formData) {
+    if (Object.prototype.hasOwnProperty.call(formData, key) && key in data) {
+      formData[key] = data[key];
+    }
+  }
+  if (Object.prototype.hasOwnProperty.call(data, pk)) {
+    formData[pk] = data[pk];
+  }
+};
+// 表单提交
+const handleSubmit = useThrottleFn(() => {
+  formRef.value?.validate((valid: boolean) => {
+    if (!valid) return;
+    if (typeof props.modalConfig.beforeSubmit === "function") {
+      props.modalConfig.beforeSubmit(formData);
+    }
+    if (!props.modalConfig?.formAction) {
+      emit("customSubmit", formData);
+      handleClose();
+      return;
+    }
+    props.modalConfig.formAction(formData).then(() => {
+      if (props.modalConfig.component === "drawer") {
+        ElMessage.success(`${props.modalConfig.drawer?.title}成功`);
+      } else {
+        ElMessage.success(`${props.modalConfig.dialog?.title}成功`);
+      }
+      emit("submitClick");
+      handleClose();
+    });
+  });
+}, 3000);
+
+onMounted(() => {
+  formItems.forEach((item) => {
+    if (item.initFn) {
+      item.initFn(item);
+    }
+    formRules[item.prop] = item?.rules ?? [];
+    props.modalConfig.form = { labelWidth: "auto", ...props.modalConfig?.form };
+
+    if (["input-tag", "custom-tag", "cascader"].includes(item.type)) {
+      formData[item.prop] = Array.isArray(item.initialValue) ? item.initialValue : [];
+    } else if (item.type === "input-number") {
+      formData[item.prop] = item.initialValue ?? null;
+    } else {
+      formData[item.prop] = item.initialValue ?? "";
+    }
+  });
+});
+
+// 暴露的属性和方法
+defineExpose({
+  setFormData,
+  // 展示/因此 modal
+  setModalVisible: (visible: boolean = true) => (modalVisible.value = visible),
+  // 获取表单数据
+  getFormData: (key: string) => formData[key] ?? formData,
+  // 设置表单项值
+  setFormItemData: (key: string, value: any) => (formData[key] = value),
+  // 禁用表单
+  handleDisabled: (disable: boolean) => {
+    formDisable.value = disable;
+    props.modalConfig.form = {
+      ...props.modalConfig.form,
+      disabled: disable,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-input-number .el-input__inner) {
+  text-align: left;
+}
+
+:deep(.el-input-number.is-without-controls .el-input__wrapper) {
+  padding-right: 11px !important ;
+  padding-left: 11px !important;
+}
+</style>
diff --git a/frontend/new-web/src/components/CURD/PageSearch.vue b/frontend/new-web/src/components/CURD/PageSearch.vue
new file mode 100644
index 00000000..bad67dec
--- /dev/null
+++ b/frontend/new-web/src/components/CURD/PageSearch.vue
@@ -0,0 +1,335 @@
+<template>
+  <div>
+    <el-card v-bind="cardAttrs">
+      <!-- 搜索表单区域 -->
+      <el-form
+        :key="'page-search-expand-' + isExpand"
+        ref="queryFormRef"
+        label-suffix=":"
+        v-bind="formAttrs"
+        :model="queryParams"
+        :class="isGrid"
+        @submit.prevent="handleQuery"
+      >
+        <template v-for="(item, index) in formItems" :key="item.prop">
+          <el-form-item
+            v-show="isExpand ? true : index < showNumber"
+            :label="item?.label"
+            :prop="item.prop"
+          >
+            <!-- Label -->
+            <template #label>
+              <span class="flex-y-center">
+                {{ item?.label || "" }}
+                <el-tooltip v-if="item?.tips" v-bind="getTooltipProps(item.tips)">
+                  <QuestionFilled class="w-4 h-4 mx-1" />
+                </el-tooltip>
+                <span v-if="searchConfig.colon" class="ml-0.5">:</span>
+              </span>
+            </template>
+
+            <ElCascader
+              v-if="item.type === 'cascader'"
+              v-model="queryParams[item.prop]"
+              v-bind="{ style: { width: '100%' }, ...item.attrs }"
+              v-on="item.events || {}"
+            />
+            <component
+              :is="getCustomComponent(item.type) || componentMap.get(item.type)"
+              v-else
+              v-model="queryParams[item.prop]"
+              v-bind="{ style: { width: '100%' }, ...item.attrs }"
+              v-on="item.events || {}"
+            >
+              <template v-if="item.type === 'select'">
+                <template v-for="opt in item.options" :key="opt.value">
+                  <el-option :label="opt.label" :value="opt.value" />
+                </template>
+              </template>
+              <!-- 自定义组件的插槽支持 -->
+              <template v-if="getCustomComponent(item.type) && item.slotName">
+                <template v-for="slot in Object.keys($slots)" :key="slot">
+                  <slot :name="slot"></slot>
+                </template>
+              </template>
+            </component>
+          </el-form-item>
+        </template>
+
+        <el-form-item :class="{ 'col-[auto/-1] justify-self-end': searchConfig?.grid === 'right' }">
+          <!-- 自定义按钮组 -->
+          <template v-if="searchConfig?.customButtons && searchConfig.customButtons.length > 0">
+            <template v-for="button in searchConfig.customButtons" :key="button.key">
+              <el-button
+                v-if="!button.perm || hasPermission(button.perm)"
+                v-bind="button.attrs"
+                @click="handleCustomButtonClick(button)"
+              >
+                {{ button.text }}
+              </el-button>
+            </template>
+          </template>
+
+          <!-- 默认搜索/重置按钮 -->
+          <template v-else>
+            <!-- 搜索按钮 -->
+            <el-button
+              v-if="
+                !searchConfig?.showSearchButton ||
+                hasPermission(searchConfig.searchButtonPerm || [])
+              "
+              icon="search"
+              type="primary"
+              @click="handleQuery"
+            >
+              搜索
+            </el-button>
+            <!-- 重置按钮 -->
+            <el-button
+              v-if="
+                !searchConfig?.showResetButton || hasPermission(searchConfig.resetButtonPerm || [])
+              "
+              icon="refresh"
+              @click="handleReset"
+            >
+              重置
+            </el-button>
+          </template>
+
+          <!-- 展开/收起 -->
+          <template v-if="isExpandable && formItems.length > showNumber">
+            <el-link class="ml-3" type="primary" underline="never" @click="isExpand = !isExpand">
+              {{ isExpand ? "收起" : "展开" }}
+              <component :is="isExpand ? ArrowUp : ArrowDown" class="w-4 h-4 ml-2" />
+            </el-link>
+          </template>
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { IObject, IForm, ISearchConfig, ISearchComponent } from "./types";
+import { ArrowUp, ArrowDown, QuestionFilled } from "@element-plus/icons-vue";
+import type { FormInstance } from "element-plus";
+import InputTag from "@/components/InputTag/index.vue";
+import { getCurrentInstance, nextTick, watch } from "vue";
+import {
+  ElInput,
+  ElSelect,
+  ElCascader,
+  ElInputNumber,
+  ElDatePicker,
+  ElTimePicker,
+  ElTimeSelect,
+  ElTreeSelect,
+  ElInputTag,
+  ElRadioGroup,
+  ElCheckboxGroup,
+  ElSwitch,
+  ElRate,
+  ElSlider,
+} from "element-plus";
+
+// 定义接收的属性
+const props = defineProps<{ searchConfig: ISearchConfig }>();
+// 自定义事件
+const emit = defineEmits<{
+  queryClick: [queryParams: IObject];
+  resetClick: [queryParams: IObject];
+  dateRangeChange: [prop: string, range: [Date, Date] | [string, string] | [null, null]];
+  customButtonClick: [buttonKey: string, queryParams: IObject];
+}>();
+
+// 时间范围处理相关
+const dateRangeRefs = ref<Record<string, any>>({});
+
+// 组件映射表
+const componentMap = new Map<ISearchComponent, any>([
+  // @ts-ignore
+  ["input", markRaw(ElInput)], // @ts-ignore
+  ["select", markRaw(ElSelect)], // @ts-ignore
+  ["cascader", markRaw(ElCascader)], // @ts-ignore
+  ["input-number", markRaw(ElInputNumber)], // @ts-ignore
+  ["date-picker", markRaw(ElDatePicker)], // @ts-ignore
+  ["time-picker", markRaw(ElTimePicker)], // @ts-ignore
+  ["time-select", markRaw(ElTimeSelect)], // @ts-ignore
+  ["tree-select", markRaw(ElTreeSelect)], // @ts-ignore
+  ["input-tag", markRaw(ElInputTag)], // @ts-ignore
+  ["custom-tag", markRaw(InputTag)], // @ts-ignore
+  ["radio", markRaw(ElRadioGroup)], // @ts-ignore
+  ["checkbox", markRaw(ElCheckboxGroup)], // @ts-ignore
+  ["switch", markRaw(ElSwitch)], // @ts-ignore
+  ["rate", markRaw(ElRate)], // @ts-ignore
+  ["slider", markRaw(ElSlider)], // @ts-ignore
+]);
+
+// 自定义组件映射（从searchConfig中获取）
+const getCustomComponent = (componentName: string) => {
+  return props.searchConfig?.customComponents?.[componentName] || null;
+};
+
+// 存储表单实例
+const queryFormRef = ref<FormInstance>();
+// 存储查询参数
+const queryParams = reactive<IObject>({});
+// 响应式的formItems
+const formItems = reactive(props.searchConfig?.formItems ?? []);
+// 是否可展开/收缩
+const isExpandable = ref(props.searchConfig?.isExpandable ?? true);
+// 是否已展开
+const isExpand = ref(false);
+// 表单项展示数量，若可展开，超出展示数量的表单项隐藏
+const showNumber = computed(() =>
+  isExpandable.value ? (props.searchConfig?.showNumber ?? 3) : formItems.length
+);
+// 卡片组件自定义属性（阴影、自定义边距样式等）
+const cardAttrs = computed<IObject>(() => {
+  return {
+    class: "search-container",
+    shadow: "never",
+    style: { marginBottom: "0" },
+    ...props.searchConfig?.cardAttrs,
+  };
+});
+// 表单组件自定义属性（label位置、宽度、对齐方式等）
+const formAttrs = computed<IForm>(() => {
+  const custom = props.searchConfig?.form ?? {};
+  if (props.searchConfig?.grid) {
+    return { ...custom, inline: false };
+  }
+  return { inline: true, ...custom };
+});
+/** 默认 flex（scoped）；grid 时见 .curd-page-search--grid */
+const isGrid = computed(() =>
+  props.searchConfig?.grid ? "curd-page-search--grid" : "curd-page-search--flex"
+);
+
+/** 展开/收起后：表单已随 :key 重建，再触发 resize 让日期范围等组件量宽 */
+watch(isExpand, () => {
+  nextTick(() => {
+    window.dispatchEvent(new Event("resize"));
+  });
+});
+
+// 获取tooltip提示框属性
+const getTooltipProps = (tips: string | IObject) => {
+  return typeof tips === "string" ? { content: tips } : tips;
+};
+
+/** 查询前对 input 做 trim；去掉空条件，避免 GET 出现 name=&created_id= 等导致后端 Optional[int] 解析失败 */
+function buildQueryPayload() {
+  const q = { ...queryParams };
+  for (const item of formItems) {
+    if (item.type === "input" && typeof q[item.prop] === "string") {
+      q[item.prop] = q[item.prop].trim();
+    }
+  }
+  const out: IObject = {};
+  for (const key of Object.keys(q)) {
+    const v = q[key];
+    if (v === "" || v === null || v === undefined) continue;
+    if (Array.isArray(v) && v.length === 0) continue;
+    out[key] = v;
+  }
+  return out;
+}
+
+// 查询/重置操作
+const handleQuery = () => emit("queryClick", buildQueryPayload());
+const handleReset = () => {
+  queryFormRef.value?.resetFields();
+  // 重置所有时间范围组件
+  Object.values(dateRangeRefs.value).forEach((ref) => {
+    if (ref && typeof ref.reset === "function") {
+      ref.reset();
+    }
+  });
+  emit("resetClick", buildQueryPayload());
+};
+
+// 处理自定义按钮点击
+const handleCustomButtonClick = (button: any) => {
+  // 如果配置了自定义处理器，优先使用
+  if (button.handler && typeof button.handler === "function") {
+    button.handler(queryParams, getCurrentInstance());
+  }
+  // 触发自定义事件
+  emit("customButtonClick", button.key, queryParams);
+};
+
+// 权限控制检查
+const hasPermission = (perm: string | string[]): boolean => {
+  if (!perm || !props.searchConfig?.permPrefix) return true;
+  // 这里应该根据实际的权限系统来实现
+  // 暂时返回 true，实际项目中需要对接权限系统
+  return true;
+};
+
+onMounted(() => {
+  formItems.forEach((item) => {
+    if (item?.initFn) {
+      item.initFn(item);
+    }
+    if (getCustomComponent(item.type ?? "")) {
+      queryParams[item.prop] = item.initialValue ?? null;
+    } else if (["input-tag", "custom-tag", "cascader"].includes(item?.type ?? "")) {
+      queryParams[item.prop] = Array.isArray(item.initialValue) ? item.initialValue : [];
+    } else if (
+      item.type === "date-picker" &&
+      String(item.attrs?.type ?? "")
+        .toLowerCase()
+        .includes("range")
+    ) {
+      queryParams[item.prop] = item.initialValue ?? [];
+    } else if (item.type === "select") {
+      queryParams[item.prop] = item.initialValue !== undefined ? item.initialValue : null;
+    } else if (item.type === "input-number") {
+      queryParams[item.prop] = item.initialValue ?? null;
+    } else {
+      queryParams[item.prop] = item.initialValue ?? "";
+    }
+  });
+});
+// 暴露的属性和方法
+defineExpose({
+  // 获取分页数据（与「搜索」提交时一致，含 input trim）
+  getQueryParams: () => buildQueryPayload(),
+});
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-input-number .el-input__inner) {
+  text-align: left;
+}
+
+.el-form-item {
+  margin-right: 0;
+  margin-bottom: 0;
+}
+
+/* 卡片参与 flex 布局链时允许高度随内容收回，避免展开后再收起仍「撑住」 */
+.search-container :deep(.el-card__body) {
+  min-height: 0;
+}
+
+/* 默认行内搜索：明确左起排布，避免展开宽表单项后 flex 残留 justify/end 对齐 */
+.curd-page-search--flex {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  place-content: flex-start flex-start;
+  align-items: center;
+  width: 100%;
+  min-height: 0;
+}
+
+.curd-page-search--grid {
+  display: grid !important;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 1rem;
+  align-items: center;
+  width: 100%;
+}
+</style>
diff --git a/frontend/new-web/src/components/CURD/helpers.ts b/frontend/new-web/src/components/CURD/helpers.ts
new file mode 100644
index 00000000..e7779398
--- /dev/null
+++ b/frontend/new-web/src/components/CURD/helpers.ts
@@ -0,0 +1,90 @@
+import type { IObject, IComponentType, ISearchComponent } from "./types";
+import { markRaw } from "vue";
+import InputTag from "@/components/InputTag/index.vue";
+import IconSelect from "@/components/IconSelect/index.vue";
+import DatePicker from "@/components/DatePicker/index.vue";
+
+/**
+ * 获取提示属性
+ * @param tips 提示内容
+ * @returns 提示属性对象
+ */
+export const getTooltipProps = (tips: string | IObject) => {
+  return typeof tips === "string" ? { content: tips } : tips;
+};
+
+/**
+ * 模态框组件映射表
+ */
+export const modalComponentMap = new Map<IComponentType, any>([
+  // @ts-ignore
+  ["input", markRaw(ElInput)],
+  // @ts-ignore
+  ["select", markRaw(ElSelect)],
+  // @ts-ignore
+  ["switch", markRaw(ElSwitch)],
+  // @ts-ignore
+  ["cascader", markRaw(ElCascader)],
+  // @ts-ignore
+  ["input-number", markRaw(ElInputNumber)],
+  // @ts-ignore
+  ["input-tag", markRaw(InputTag)],
+  // @ts-ignore
+  ["time-picker", markRaw(ElTimePicker)],
+  // @ts-ignore
+  ["time-select", markRaw(ElTimeSelect)],
+  // @ts-ignore
+  ["date-picker", markRaw(ElDatePicker)],
+  // @ts-ignore
+  ["tree-select", markRaw(ElTreeSelect)],
+  // @ts-ignore
+  ["custom-tag", markRaw(InputTag)],
+  // @ts-ignore
+  ["text", markRaw(ElText)],
+  // @ts-ignore
+  ["radio", markRaw(ElRadioGroup)],
+  // @ts-ignore
+  ["checkbox", markRaw(ElCheckboxGroup)],
+  // @ts-ignore
+  ["icon-select", markRaw(IconSelect)],
+  // @ts-ignore
+  ["custom", ""],
+]);
+
+/**
+ * 搜索组件映射表
+ */
+export const searchComponentMap = new Map<ISearchComponent, any>([
+  // @ts-ignore
+  ["input", markRaw(ElInput)],
+  // @ts-ignore
+  ["select", markRaw(ElSelect)],
+  // @ts-ignore
+  ["cascader", markRaw(ElCascader)],
+  // @ts-ignore
+  ["input-number", markRaw(ElInputNumber)],
+  // @ts-ignore
+  ["date-picker", markRaw(DatePicker)],
+  // @ts-ignore
+  ["time-picker", markRaw(ElTimePicker)],
+  // @ts-ignore
+  ["time-select", markRaw(ElTimeSelect)],
+  // @ts-ignore
+  ["tree-select", markRaw(ElTreeSelect)],
+  // @ts-ignore
+  ["input-tag", markRaw(ElInputTag)],
+  // @ts-ignore
+  ["custom-tag", markRaw(InputTag)],
+]);
+
+/**
+ * 子组件映射表
+ */
+export const childrenMap = new Map<IComponentType, any>([
+  // @ts-ignore
+  ["select", markRaw(ElOption)],
+  // @ts-ignore
+  ["radio", markRaw(ElRadio)],
+  // @ts-ignore
+  ["checkbox", markRaw(ElCheckbox)],
+]);
diff --git a/frontend/new-web/src/components/CURD/types.ts b/frontend/new-web/src/components/CURD/types.ts
new file mode 100644
index 00000000..b656bb68
--- /dev/null
+++ b/frontend/new-web/src/components/CURD/types.ts
@@ -0,0 +1,371 @@
+import type { DialogProps, DrawerProps, FormItemRule, PaginationProps } from "element-plus";
+import type { FormProps, ColProps, ButtonProps, CardProps } from "element-plus";
+import type PageContent from "./PageContent.vue";
+import type PageModal from "./PageModal.vue";
+import type PageSearch from "./PageSearch.vue";
+import type { CSSProperties } from "vue";
+
+export type PageSearchInstance = InstanceType<typeof PageSearch>;
+export type PageContentInstance = InstanceType<typeof PageContent>;
+export type PageModalInstance = InstanceType<typeof PageModal>;
+
+/**
+ * 通用对象类型
+ */
+export type IObject = Record<string, any>;
+
+/**
+ * 组件类型定义
+ */
+type DateComponent = "date-picker" | "time-picker" | "time-select" | "custom-tag" | "input-tag";
+type InputComponent = "input" | "select" | "input-number" | "cascader" | "tree-select";
+type OtherComponent =
+  | "text"
+  | "radio"
+  | "checkbox"
+  | "switch"
+  | "rate"
+  | "slider"
+  | "icon-select"
+  | "custom";
+export type ISearchComponent =
+  | DateComponent
+  | InputComponent
+  | "radio"
+  | "checkbox"
+  | "switch"
+  | "rate"
+  | "slider"
+  /** 在 customComponents 中注册的自定义搜索控件类型 */
+  | "user-table-select";
+export type IComponentType = DateComponent | InputComponent | OtherComponent;
+
+/**
+ * 工具按钮类型定义
+ */
+type ToolbarLeft = "add" | "delete" | "patch";
+type ToolbarRight = "refresh" | "filter" | "import" | "export";
+type ToolbarTable = "edit" | "view" | "delete";
+
+/**
+ * 工具按钮接口
+ */
+export type IToolsButton = {
+  /** 按钮名称 */
+  name: string;
+  /** 按钮文本 */
+  text?: string;
+  /** 权限标识(可以是完整权限字符串如'sys:user:add'或操作权限如'add') */
+  perm?: Array<string> | string;
+  /** 按钮属性 */
+  attrs?: Partial<ButtonProps> & { style?: CSSProperties };
+  /** 条件渲染 */
+  render?: (row: IObject) => boolean;
+  /** 按钮提示（支持字符串或Tooltip属性对象） */
+  tooltip?: string | IObject;
+};
+
+/**
+ * 工具按钮默认类型
+ */
+export type IToolsDefault = ToolbarLeft | ToolbarRight | ToolbarTable | IToolsButton;
+
+/**
+ * 操作数据接口
+ */
+export interface IOperateData {
+  /** 操作名称 */
+  name: string;
+  /** 行数据 */
+  row: IObject;
+  /** 列数据 */
+  column: IObject;
+  /** 行索引 */
+  $index: number;
+}
+
+/**
+ * 搜索配置接口
+ */
+export interface ISearchConfig {
+  /** 权限前缀(如sys:user，用于组成权限标识)，不提供则不进行权限校验 */
+  permPrefix?: string;
+  /** 标签冒号(默认：false) */
+  colon?: boolean;
+  /** 表单项(默认：[]) */
+  formItems?: IFormItems<ISearchComponent>;
+  /** 是否开启展开和收缩(默认：true) */
+  isExpandable?: boolean;
+  /** 默认展示的表单项数量(默认：3) */
+  showNumber?: number;
+  /** 卡片属性 */
+  cardAttrs?: Partial<CardProps> & { style?: CSSProperties };
+  /** form组件属性 */
+  form?: IForm;
+  /** 启用等宽网格布局；为 "right" 时操作按钮靠行末 */
+  grid?: boolean | "left" | "right";
+  /** 自定义组件映射 */
+  customComponents?: Record<string, any>;
+  /** 是否显示搜索按钮(默认：true) */
+  showSearchButton?: boolean;
+  /** 是否显示重置按钮(默认：true) */
+  showResetButton?: boolean;
+  /** 搜索按钮权限 */
+  searchButtonPerm?: string | string[];
+  /** 重置按钮权限 */
+  resetButtonPerm?: string | string[];
+  /** 自定义按钮组 */
+  customButtons?: Array<{
+    /** 按钮唯一标识 */
+    key: string;
+    /** 按钮文本 */
+    text: string;
+    /** 按钮属性 */
+    attrs?: IObject;
+    /** 按钮权限 */
+    perm?: string | string[];
+    /** 点击事件处理函数 */
+    handler?: (params: IObject, instance: any) => void;
+  }>;
+}
+
+/**
+ * 内容配置接口
+ */
+export interface IContentConfig<T = any> {
+  /** 权限前缀(如sys:user，用于组成权限标识)，不提供则不进行权限校验 */
+  permPrefix?: string;
+  /** table组件属性（用 IObject 避免与 el-table TableProps.context 等内部类型不兼容） */
+  table?: IObject;
+  /** 页面标题与提示（用于卡片头部显示） */
+  title?: string;
+  /** 提示信息 */
+  tooltip?: string | IObject;
+  /** 分页组件位置(默认：left) */
+  pagePosition?: "left" | "right";
+  /** pagination组件属性 */
+  pagination?:
+    | boolean
+    | Partial<
+        Omit<
+          PaginationProps,
+          "v-model:page-size" | "v-model:current-page" | "total" | "currentPage"
+        >
+      >;
+  /** 列表的网络请求函数(需返回promise) */
+  indexAction: (queryParams: T) => Promise<any>;
+  /**
+   * 是否在挂载时立即请求列表（默认 true）。
+   * 若需在父组件合并 PageSearch 与额外条件后再请求，可设为 false，并在 onMounted 中自行调用 fetchPageData。
+   */
+  initialFetch?: boolean;
+  /** 默认的分页相关的请求参数 */
+  request?: {
+    page_no: string;
+    page_size: string;
+  };
+  /** 数据格式解析的回调函数 */
+  parseData?: (res: any) => {
+    total: number;
+    list: IObject[];
+    [key: string]: any;
+  };
+  /** 修改属性的网络请求函数(需返回promise) */
+  modifyAction?: (data: {
+    [key: string]: any;
+    field: string;
+    value: boolean | string | number;
+  }) => Promise<any>;
+  /** 删除的网络请求函数(需返回promise) */
+  deleteAction?: (ids: string) => Promise<any>;
+  /** 删除确认弹窗（不传则标题「警告」、内容「确认删除?」） */
+  deleteConfirm?: {
+    title?: string;
+    message?: string;
+    confirmButtonText?: string;
+    cancelButtonText?: string;
+    type?: "warning" | "info" | "success" | "error";
+  };
+  /** 后端导出的网络请求函数(需返回promise) */
+  exportAction?: (queryParams: T) => Promise<any>;
+  /** 前端全量导出的网络请求函数(需返回promise) */
+  exportsAction?: (queryParams: T) => Promise<IObject[]>;
+  /** 导入模板 */
+  importTemplate?: string | (() => Promise<any>);
+  /** 后端导入的网络请求函数(需返回promise) */
+  importAction?: (file: File) => Promise<any>;
+  /** 前端导入的网络请求函数(需返回promise) */
+  importsAction?: (data: IObject[]) => Promise<any>;
+  /** 主键名(默认为id) */
+  pk?: string;
+  /** 表格工具栏(默认:add,delete,export,也可自定义) */
+  toolbar?: Array<ToolbarLeft | IToolsButton>;
+  /** 表格工具栏右侧图标(默认:refresh,filter,import,export) */
+  defaultToolbar?: Array<ToolbarRight | IToolsButton>;
+  /** 使用 #table 插槽自定义表格/树表时，为 true 则隐藏「列筛选」按钮（避免与自定义列不同步） */
+  hideColumnFilter?: boolean;
+  /** 内容区外层 el-card 额外 class */
+  cardClass?: string;
+  /** el-card 阴影（默认 never，与 Element Plus el-card shadow 一致） */
+  cardShadow?: "always" | "hover" | "never";
+  /** 是否显示表格上方工具条（默认 true；纯卡片/无按钮时可设为 false） */
+  showToolbar?: boolean;
+  /** 更多操作按钮配置 */
+  moreButtons?: Array<IToolsButton>;
+  /** table组件列属性(额外的属性templet,operat,slotName) */
+  cols: Array<{
+    /** 列类型 */
+    type?: "default" | "selection" | "index" | "expand";
+    /** 列标签 */
+    label?: string;
+    /** 列属性 */
+    prop?: string;
+    /** 列宽度 */
+    width?: string | number;
+    /** 最小列宽度 */
+    minWidth?: string | number;
+    /** 对齐方式 */
+    align?: "left" | "center" | "right";
+    /** 列键名 */
+    columnKey?: string;
+    /** 是否保留选择 */
+    reserveSelection?: boolean;
+    /** 列是否显示 */
+    show?: boolean;
+    /** 模板类型 */
+    templet?:
+      | "image"
+      | "list"
+      | "url"
+      | "switch"
+      | "input"
+      | "price"
+      | "percent"
+      | "icon"
+      | "date"
+      | "tool"
+      | "custom";
+    /** image模板相关参数 */
+    imageWidth?: number;
+    /** image模板相关参数 */
+    imageHeight?: number;
+    /** list模板相关参数 */
+    selectList?: IObject;
+    /** switch模板相关参数 */
+    activeValue?: boolean | string | number;
+    /** switch模板相关参数 */
+    inactiveValue?: boolean | string | number;
+    /** switch模板相关参数 */
+    activeText?: string;
+    /** switch模板相关参数 */
+    inactiveText?: string;
+    /** input模板相关参数 */
+    inputType?: string;
+    /** price模板相关参数 */
+    priceFormat?: string;
+    /** date模板相关参数 */
+    dateFormat?: string;
+    /** tool模板相关参数 */
+    operat?: Array<ToolbarTable | IToolsButton>;
+    /** filter值拼接符 */
+    filterJoin?: string;
+    /** 初始化数据函数 */
+    initFn?: (item: IObject) => void;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 固定列 */
+    fixed?: boolean | "left" | "right";
+    /** 权限 */
+    perm?: string;
+    [key: string]: any;
+  }>;
+}
+
+/**
+ * PageContent 左侧 `createToolbar` 产物，供 CrudToolbarLeft 的 `configButtons` 使用。
+ */
+export type CrudToolbarConfigButton = {
+  name: string;
+  text?: string;
+  attrs?: Record<string, unknown>;
+  perm?: string | string[] | null;
+};
+
+/**
+ * 模态框配置接口
+ */
+export interface IModalConfig<T = any> {
+  /** 权限前缀(如sys:user，用于组成权限标识)，不提供则不进行权限校验 */
+  permPrefix?: string;
+  /** 标签冒号(默认：false) */
+  colon?: boolean;
+  /** 主键名(主要用于编辑数据,默认为id) */
+  pk?: string;
+  /** 组件类型(默认：dialog) */
+  component?: "dialog" | "drawer";
+  /** dialog组件属性（默认可拖拽；全屏由 EnhancedDialog 标题栏按钮切换） */
+  dialog?: Partial<Omit<DialogProps, "modelValue">> & { draggable?: boolean };
+  /** drawer组件属性 */
+  drawer?: Partial<Omit<DrawerProps, "modelValue">>;
+  /** 查看模式渲染方式(默认：form；可选：descriptions) */
+  viewMode?: "form" | "descriptions";
+  /** descriptions组件属性（当 viewMode 为 descriptions 时生效） */
+  descriptions?: IObject;
+  /** form组件属性 */
+  form?: IForm;
+  /** 表单项 */
+  formItems: IFormItems<IComponentType>;
+  /** 提交之前处理 */
+  beforeSubmit?: (data: T) => void;
+  /** 提交的网络请求函数(需返回promise) */
+  formAction?: (data: T) => Promise<any>;
+}
+
+/**
+ * 表单属性类型
+ */
+export type IForm = Partial<Omit<FormProps, "model" | "rules">>;
+
+/**
+ * 表单项类型
+ */
+export type IFormItems<T = IComponentType> = Array<{
+  /** 组件类型(如input,select,radio,custom等) */
+  type: T;
+  /** 标签提示 */
+  tips?: string | IObject;
+  /** 标签 */
+  label: string;
+  /** 属性名 */
+  prop: string;
+  /** 属性 */
+  attrs?: IObject;
+  /** 选项 */
+  options?: Array<{ label: string; value: any; [key: string]: any }> | Ref<any[]>;
+  /** 规则 */
+  rules?: FormItemRule[];
+  /** 初始值 */
+  initialValue?: any;
+  /** 插槽名称 */
+  slotName?: string;
+  /** 是否隐藏 */
+  hidden?: boolean;
+  /** 列属性 */
+  col?: Partial<ColProps>;
+  /** 事件 */
+  events?: Record<string, (...args: any) => void>;
+  /** 初始化函数 */
+  initFn?: (item: IObject) => void;
+}>;
+
+/**
+ * 页面表单接口
+ */
+export interface IPageForm {
+  /** 主键 */
+  pk?: string;
+  /** 表单属性 */
+  form?: IForm;
+  /** 表单项 */
+  formItems: IFormItems<IComponentType>;
+}
diff --git a/frontend/new-web/src/components/CURD/useCrudList.ts b/frontend/new-web/src/components/CURD/useCrudList.ts
new file mode 100644
index 00000000..a8225061
--- /dev/null
+++ b/frontend/new-web/src/components/CURD/useCrudList.ts
@@ -0,0 +1,53 @@
+import { ElMessage } from "element-plus";
+import { ref } from "vue";
+import type { IObject, PageContentInstance, PageSearchInstance } from "./types";
+
+/**
+ * 仅列表查询区 + 表格区时复用：searchRef / contentRef 与查询、重置拉数逻辑。
+ * 合并 `PageSearch` 查询参数与 `PageContent.getFilterParams()`（表头筛选等），与 usePage 中同名逻辑一致。
+ * 业务页可替换手写 `handleQueryClick` / `handleResetClick` + 双 ref，参见 `module_example/demo`。
+ */
+export function useCrudList() {
+  const searchRef = ref<PageSearchInstance>();
+  const contentRef = ref<PageContentInstance>();
+
+  function handleQueryClick(queryParams: IObject) {
+    try {
+      const filterParams = contentRef.value?.getFilterParams() || {};
+      contentRef.value?.fetchPageData({ ...queryParams, ...filterParams }, true);
+    } catch (error) {
+      console.error("查询数据失败:", error);
+      ElMessage.error("查询数据失败: " + (error instanceof Error ? error.message : String(error)));
+    }
+  }
+
+  function handleResetClick(queryParams: IObject) {
+    try {
+      const filterParams = contentRef.value?.getFilterParams() || {};
+      contentRef.value?.fetchPageData({ ...queryParams, ...filterParams }, true);
+    } catch (error) {
+      console.error("重置数据失败:", error);
+      ElMessage.error("重置数据失败: " + (error instanceof Error ? error.message : String(error)));
+    }
+  }
+
+  /** 弹窗提交后等与「查询」同参刷新：合并搜索条件 + 表头筛选 */
+  function refreshList() {
+    try {
+      const q = searchRef.value?.getQueryParams() ?? {};
+      const f = contentRef.value?.getFilterParams() ?? {};
+      contentRef.value?.fetchPageData({ ...q, ...f }, true);
+    } catch (error) {
+      console.error("刷新列表失败:", error);
+      ElMessage.error("刷新列表失败: " + (error instanceof Error ? error.message : String(error)));
+    }
+  }
+
+  return {
+    searchRef,
+    contentRef,
+    handleQueryClick,
+    handleResetClick,
+    refreshList,
+  };
+}
diff --git a/frontend/new-web/src/components/CURD/usePage.ts b/frontend/new-web/src/components/CURD/usePage.ts
new file mode 100644
index 00000000..28df4567
--- /dev/null
+++ b/frontend/new-web/src/components/CURD/usePage.ts
@@ -0,0 +1,184 @@
+import { ref, Ref } from "vue";
+import type { IObject, PageModalInstance } from "./types";
+import { useCrudList } from "./useCrudList";
+
+/**
+ * CURD页面组合式函数
+ * @returns 包含各种引用和处理函数的对象
+ */
+function usePage() {
+  const { searchRef, contentRef, handleQueryClick, handleResetClick } = useCrudList();
+  const addModalRef = ref<PageModalInstance>();
+  const editModalRef = ref<PageModalInstance>();
+  const viewModalRef = ref<PageModalInstance>();
+
+  /**
+   * 处理新增点击事件
+   * @param RefImpl 可选的模态框引用
+   */
+  function handleAddClick(RefImpl?: Ref<PageModalInstance>) {
+    try {
+      if (RefImpl) {
+        RefImpl.value?.setModalVisible();
+        RefImpl.value?.handleDisabled(false);
+      } else {
+        addModalRef.value?.setModalVisible();
+        addModalRef.value?.handleDisabled(false);
+      }
+    } catch (error) {
+      console.error("打开新增模态框失败:", error);
+      ElMessage.error(
+        "打开新增模态框失败: " + (error instanceof Error ? error.message : String(error))
+      );
+    }
+  }
+
+  /**
+   * 处理编辑点击事件
+   * @param row 行数据
+   * @param callback 回调函数
+   * @param RefImpl 可选的模态框引用
+   */
+  async function handleEditClick(
+    row: IObject,
+    callback?: (result?: IObject) => IObject | Promise<IObject>,
+    RefImpl?: Ref<PageModalInstance>
+  ) {
+    try {
+      if (RefImpl) {
+        RefImpl.value?.setModalVisible();
+        RefImpl.value?.handleDisabled(false);
+        const from = await (callback?.(row) ?? Promise.resolve(row));
+        RefImpl.value?.setFormData(from ? from : row);
+      } else {
+        editModalRef.value?.setModalVisible();
+        editModalRef.value?.handleDisabled(false);
+        const from = await (callback?.(row) ?? Promise.resolve(row));
+        editModalRef.value?.setFormData(from ? from : row);
+      }
+    } catch (error) {
+      console.error("打开编辑模态框失败:", error);
+      ElMessage.error(
+        "打开编辑模态框失败: " + (error instanceof Error ? error.message : String(error))
+      );
+    }
+  }
+
+  /**
+   * 处理查看点击事件
+   * @param row 行数据
+   * @param callback 回调函数
+   * @param RefImpl 可选的模态框引用
+   */
+  async function handleViewClick(
+    row: IObject,
+    callback?: (result?: IObject) => IObject | Promise<IObject>,
+    RefImpl?: Ref<PageModalInstance>
+  ) {
+    try {
+      if (RefImpl) {
+        RefImpl.value?.setModalVisible();
+        RefImpl.value?.handleDisabled(true);
+        const from = await (callback?.(row) ?? Promise.resolve(row));
+        RefImpl.value?.setFormData(from ? from : row);
+      } else {
+        viewModalRef.value?.setModalVisible();
+        viewModalRef.value?.handleDisabled(true);
+        const from = await (callback?.(row) ?? Promise.resolve(row));
+        viewModalRef.value?.setFormData(from ? from : row);
+      }
+    } catch (error) {
+      console.error("打开查看模态框失败:", error);
+      ElMessage.error(
+        "打开查看模态框失败: " + (error instanceof Error ? error.message : String(error))
+      );
+    }
+  }
+
+  /**
+   * 处理表单提交点击事件
+   */
+  function handleSubmitClick() {
+    try {
+      //根据检索条件刷新列表数据
+      const queryParams = searchRef.value?.getQueryParams() || {};
+      contentRef.value?.fetchPageData(queryParams, true);
+    } catch (error) {
+      console.error("提交表单失败:", error);
+      ElMessage.error("提交表单失败: " + (error instanceof Error ? error.message : String(error)));
+    }
+  }
+
+  /**
+   * 处理导出点击事件
+   */
+  function handleExportClick() {
+    try {
+      // 根据检索条件导出数据
+      const queryParams = searchRef.value?.getQueryParams() || {};
+      contentRef.value?.exportPageData(queryParams);
+    } catch (error) {
+      console.error("导出数据失败:", error);
+      ElMessage.error("导出数据失败: " + (error instanceof Error ? error.message : String(error)));
+    }
+  }
+
+  /**
+   * 处理筛选改变事件
+   * @param filterParams 筛选参数
+   */
+  function handleFilterChange(filterParams: IObject) {
+    try {
+      const queryParams = searchRef.value?.getQueryParams() || {};
+      contentRef.value?.fetchPageData({ ...queryParams, ...filterParams }, true);
+    } catch (error) {
+      console.error("筛选数据失败:", error);
+      ElMessage.error("筛选数据失败: " + (error instanceof Error ? error.message : String(error)));
+    }
+  }
+
+  /**
+   * 处理更多操作事件
+   * @param name 操作名称
+   * @param selectedRows 选中的行数据
+   * @param callback 回调函数
+   */
+  async function handleMoreOperation(
+    name: string,
+    selectedRows: IObject[],
+    callback?: (name: string, selectedRows: IObject[]) => Promise<void>
+  ) {
+    try {
+      if (callback) {
+        await callback(name, selectedRows);
+      }
+      // 默认刷新数据
+      handleSubmitClick();
+    } catch (error) {
+      console.error("处理更多操作失败:", error);
+      ElMessage.error(
+        "处理更多操作失败: " + (error instanceof Error ? error.message : String(error))
+      );
+    }
+  }
+
+  return {
+    searchRef,
+    contentRef,
+    addModalRef,
+    editModalRef,
+    viewModalRef,
+    handleQueryClick,
+    handleResetClick,
+    handleAddClick,
+    handleEditClick,
+    handleViewClick,
+    handleSubmitClick,
+    handleExportClick,
+    handleFilterChange,
+    handleMoreOperation,
+  };
+}
+
+export default usePage;
+export { useCrudList } from "./useCrudList";
diff --git a/frontend/new-web/src/components/CommonWrapper/index.vue b/frontend/new-web/src/components/CommonWrapper/index.vue
new file mode 100644
index 00000000..3b3b0161
--- /dev/null
+++ b/frontend/new-web/src/components/CommonWrapper/index.vue
@@ -0,0 +1,22 @@
+<template>
+  <div cursor-pointer flex-center rounded class="el" :class="padding">
+    <slot></slot>
+  </div>
+</template>
+<script setup lang="ts">
+defineProps({
+  padding: {
+    type: String,
+    default: "p-2",
+  },
+});
+</script>
+<style scoped lang="scss">
+.el {
+  transition: 0.3s var(--el-transition-function-ease-in-out-bezier);
+
+  &:hover {
+    background-color: var(--el-fill-color);
+  }
+}
+</style>
diff --git a/frontend/new-web/src/components/CopyButton/index.vue b/frontend/new-web/src/components/CopyButton/index.vue
new file mode 100644
index 00000000..9ca3f12b
--- /dev/null
+++ b/frontend/new-web/src/components/CopyButton/index.vue
@@ -0,0 +1,64 @@
+<!-- 复制组件 -->
+<template>
+  <el-button link :style="style" @click="handleClipboard">
+    <slot>
+      <el-icon><DocumentCopy color="var(--el-color-primary)" /></el-icon>
+    </slot>
+  </el-button>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  name: "CopyButton",
+  inheritAttrs: false,
+});
+
+const { t } = useI18n();
+
+const props = defineProps({
+  text: {
+    type: String,
+    default: "",
+  },
+  style: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+function handleClipboard() {
+  if (navigator.clipboard && navigator.clipboard.writeText) {
+    // 使用 Clipboard API
+    navigator.clipboard
+      .writeText(props.text)
+      .then(() => {
+        ElMessage.success(t("common.copySuccess"));
+      })
+      .catch((error) => {
+        ElMessage.warning(t("common.copyFailed"));
+        console.log("[CopyButton] Copy failed", error);
+      });
+  } else {
+    // 兼容性处理（useClipboard 有兼容性问题）
+    const input = document.createElement("input");
+    input.style.position = "absolute";
+    input.style.left = "-9999px";
+    input.setAttribute("value", props.text);
+    document.body.appendChild(input);
+    input.select();
+    try {
+      const successful = document.execCommand("copy");
+      if (successful) {
+        ElMessage.success(t("common.copySuccess"));
+      } else {
+        ElMessage.warning(t("common.copyFailed"));
+      }
+    } catch (err) {
+      ElMessage.warning(t("common.copyFailed"));
+      console.log("[CopyButton] Copy failed.", err);
+    } finally {
+      document.body.removeChild(input);
+    }
+  }
+}
+</script>
diff --git a/frontend/new-web/src/components/DatePicker/index.vue b/frontend/new-web/src/components/DatePicker/index.vue
new file mode 100644
index 00000000..6982b4d0
--- /dev/null
+++ b/frontend/new-web/src/components/DatePicker/index.vue
@@ -0,0 +1,84 @@
+<!-- 日期选择器 -->
+<template>
+  <div class="custom-date-picker">
+    <el-date-picker
+      :model-value="modelValue"
+      type="datetimerange"
+      format="YYYY-MM-DD HH:mm:ss"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
+      :shortcuts="shortcuts"
+      @update:model-value="(val) => emit('update:model-value', val)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+// 定义组件属性
+defineProps({
+  modelValue: {
+    type: Array as unknown as () => [Date, Date] | [],
+    default: () => [],
+  },
+});
+
+// 定义事件
+const emit = defineEmits(["update:model-value"]);
+
+// 快捷选项配置
+const shortcuts = [
+  {
+    text: "近一天",
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      // 修正：起始时间为当前时间往前 24 小时
+      start.setTime(start.getTime() - 3600 * 1000 * 24);
+      return [start, end];
+    },
+  },
+  {
+    text: "近三天",
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
+      return [start, end];
+    },
+  },
+  {
+    text: "近一周",
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+      return [start, end];
+    },
+  },
+  {
+    text: "近一个月",
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+      return [start, end];
+    },
+  },
+  {
+    text: "近三个月",
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+      return [start, end];
+    },
+  },
+];
+</script>
+
+<style lang="scss" scoped>
+.custom-date-picker {
+  width: 100%;
+}
+</style>
diff --git a/frontend/new-web/src/components/ECharts/index.vue b/frontend/new-web/src/components/ECharts/index.vue
new file mode 100644
index 00000000..df159f19
--- /dev/null
+++ b/frontend/new-web/src/components/ECharts/index.vue
@@ -0,0 +1,82 @@
+<!--
+ * 基于 ECharts 的 Vue3 图表组件
+ * 版权所有 © 2021-present 有来开源组织
+ *
+ * 开源协议：https://opensource.org/licenses/MIT
+ * 项目地址：https://gitee.com/youlaiorg/vue3-element-admin
+ * 参考：https://echarts.apache.org/handbook/zh/basics/import/#%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5-echarts-%E5%9B%BE%E8%A1%A8%E5%92%8C%E7%BB%84%E4%BB%B6
+ *
+ * 在使用时，请保留此注释，感谢您对开源的支持！
+-->
+
+<template>
+  <div ref="chartRef" :style="{ width, height }"></div>
+</template>
+
+<script setup lang="ts">
+// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
+import * as echarts from "echarts/core";
+// 引入柱状、折线和饼图常用图表
+import { BarChart, LineChart, PieChart, RadarChart } from "echarts/charts";
+// 引入标题，提示框，直角坐标系，数据集，内置数据转换器组件，
+import { GridComponent, TooltipComponent, LegendComponent } from "echarts/components";
+// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
+import { CanvasRenderer } from "echarts/renderers";
+
+import { useResizeObserver } from "@vueuse/core";
+
+// 按需注册组件
+echarts.use([
+  RadarChart,
+  CanvasRenderer,
+  BarChart,
+  LineChart,
+  PieChart,
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+]);
+
+const props = defineProps<{
+  options: echarts.EChartsCoreOption;
+  width?: string;
+  height?: string;
+}>();
+
+const chartRef = ref<HTMLDivElement | null>(null);
+let chartInstance: echarts.ECharts | null = null;
+
+// 初始化图表
+const initChart = () => {
+  if (chartRef.value) {
+    chartInstance = echarts.init(chartRef.value);
+    if (props.options) {
+      chartInstance.setOption(props.options);
+    }
+  }
+};
+
+// 监听尺寸变化，自动调整
+useResizeObserver(chartRef, () => {
+  chartInstance?.resize();
+});
+
+// 监听 options 变化，更新图表
+watch(
+  () => props.options,
+  (newOptions) => {
+    if (chartInstance && newOptions) {
+      chartInstance.setOption(newOptions);
+    }
+  },
+  { deep: true }
+);
+
+onMounted(() => {
+  nextTick(() => initChart());
+});
+
+onBeforeUnmount(() => {
+  chartInstance?.dispose();
+});
+</script>
diff --git a/frontend/new-web/src/components/Frame/index.vue b/frontend/new-web/src/components/Frame/index.vue
new file mode 100644
index 00000000..f0ac15c6
--- /dev/null
+++ b/frontend/new-web/src/components/Frame/index.vue
@@ -0,0 +1,43 @@
+<!-- 自定义 iframe 组件 -->
+<template>
+  <div v-loading="loading" :style="'height:' + height">
+    <iframe :src="url" frameborder="0" width="100%" height="100%" scrolling="auto" />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from "vue";
+
+const props = defineProps({
+  src: {
+    type: String,
+    required: true,
+  },
+});
+
+const height = ref(document.documentElement.clientHeight - 94.5 + "px;");
+const loading = ref(true);
+const url = computed(() => props.src);
+
+onMounted(() => {
+  setTimeout(() => {
+    loading.value = false;
+  }, 300);
+});
+</script>
+
+<style lang="scss" scoped>
+/** 关闭tag标签  */
+.app-container {
+  /* 50px = navbar = 50px */
+  height: calc(100vh - 50px);
+}
+
+/** 开启tag标签  */
+.hasTagsView {
+  .app-container {
+    /* 84px = navbar + tags-view = 50px + 34px */
+    height: calc(100vh - 84px);
+  }
+}
+</style>
diff --git a/frontend/new-web/src/components/Fullscreen/index.vue b/frontend/new-web/src/components/Fullscreen/index.vue
new file mode 100644
index 00000000..8de13538
--- /dev/null
+++ b/frontend/new-web/src/components/Fullscreen/index.vue
@@ -0,0 +1,12 @@
+<!-- 全屏切换按钮 -->
+<template>
+  <div @click="toggle">
+    <div :class="`i-svg:` + (isFullscreen ? 'fullscreen-exit' : 'fullscreen')" />
+  </div>
+</template>
+
+<script setup lang="ts">
+const { isFullscreen, toggle } = useFullscreen();
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/frontend/new-web/src/components/GithubCorner/index.vue b/frontend/new-web/src/components/GithubCorner/index.vue
new file mode 100644
index 00000000..3f5a9ce0
--- /dev/null
+++ b/frontend/new-web/src/components/GithubCorner/index.vue
@@ -0,0 +1,63 @@
+<!-- github 角标 -->
+<template>
+  <a
+    href="https://github.com/fastapiadmin/FastapiAdmin"
+    target="_blank"
+    class="github-corner"
+    aria-label="View source on Github"
+  >
+    <svg
+      width="80"
+      height="80"
+      viewBox="0 0 250 250"
+      style="color: var(--el-color-white); fill: var(--el-color-primary)"
+      aria-hidden="true"
+    >
+      <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
+      <path
+        d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
+        fill="currentColor"
+        style="transform-origin: 130px 106px"
+        class="octo-arm"
+      />
+      <path
+        d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
+        fill="currentColor"
+        class="octo-body"
+      />
+    </svg>
+  </a>
+</template>
+
+<style scoped>
+.github-corner:hover .octo-arm {
+  animation: octocat-wave 560ms ease-in-out;
+}
+
+@keyframes octocat-wave {
+  0%,
+  100% {
+    transform: rotate(0);
+  }
+
+  20%,
+  60% {
+    transform: rotate(-25deg);
+  }
+
+  40%,
+  80% {
+    transform: rotate(10deg);
+  }
+}
+
+@media (width <= 500px) {
+  .github-corner .octo-arm {
+    animation: octocat-wave 560ms ease-in-out;
+  }
+
+  .github-corner:hover .octo-arm {
+    animation: none;
+  }
+}
+</style>
diff --git a/frontend/new-web/src/components/Guide/index.vue b/frontend/new-web/src/components/Guide/index.vue
new file mode 100644
index 00000000..7e68002c
--- /dev/null
+++ b/frontend/new-web/src/components/Guide/index.vue
@@ -0,0 +1,134 @@
+<!-- 引导页 -->
+<template>
+  <el-tour v-model="open" :show-close="false" @change="handleChange">
+    <el-tour-step
+      v-for="(step, index) in steps"
+      :key="index"
+      :target="step.target"
+      :title="step.title"
+      :description="step.description"
+      :prev-button-props="{
+        children: t('common.prevLabel'),
+        onClick: handlePrevClick,
+      }"
+      :next-button-props="{
+        children: nextBtnName(index),
+        onClick: handleNextClick,
+      }"
+      :placement="step.placement"
+    />
+    <template #indicators>
+      <el-button size="small" @click="handleSkip">{{ t("common.skipLabel") }}</el-button>
+    </template>
+  </el-tour>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { useSettingsStore } from "@/store";
+
+const settingStore = useSettingsStore();
+const { t } = useI18n();
+
+const props = defineProps({
+  // 是否可见
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  teleport: {
+    type: [String, Object] as PropType<string | HTMLElement | null>,
+    default: "body",
+  },
+});
+
+const emit = defineEmits(["update:modelValue", "change", "prev", "next", "skip"]);
+
+const open = computed({
+  get: () => props.modelValue,
+  set: (val) => emit("update:modelValue", val),
+});
+
+interface TourStep {
+  target: string;
+  title: string;
+  description: string;
+  placement: "top" | "bottom" | "left" | "right";
+}
+
+const layout = settingStore.layout;
+
+const menuTarget = (): string => {
+  if (layout === "left") {
+    return ".layout__sidebar";
+  } else if (layout === "top") {
+    return ".layout__header-left";
+  } else {
+    return ".layout__header-menu";
+  }
+};
+
+// 内置引导步骤数据
+const steps: TourStep[] = [
+  {
+    target: menuTarget(),
+    title: t("common.menu"),
+    description: t("common.menuDes"),
+    placement: layout === "left" ? "right" : "bottom",
+  },
+  {
+    target: ".navbar-actions",
+    title: t("common.tool"),
+    description: t("common.toolDes"),
+    placement: "bottom",
+  },
+  {
+    target: ".tags-container",
+    title: t("common.tagsView"),
+    description: t("common.tagsViewDes"),
+    placement: "bottom",
+  },
+];
+
+// 当前步数
+const currentStep = ref(0);
+
+// 动态设置下一步按钮名称
+const nextBtnName = computed(() => (index: number) => {
+  if (index === steps.length - 1) {
+    return t("common.doneLabel");
+  }
+  return t("common.nextLabel");
+});
+
+// 步数切换时触发
+function handleChange(step: number) {
+  currentStep.value = step;
+  emit("change", step);
+}
+
+// 点击跳过按钮时触发
+function handleSkip() {
+  open.value = false;
+  emit("skip");
+}
+
+// 点击上一步按钮时触发
+function handlePrevClick() {
+  emit("prev");
+}
+
+// 点击下一步按钮时触发
+function handleNextClick() {
+  emit("next");
+}
+</script>
+
+<style scoped>
+/* 可根据需要添加自定义样式 */
+.el-tour__content .el-tour-indicators {
+  display: flex;
+  justify-content: flex-end;
+  margin-right: 5px;
+}
+</style>
diff --git a/frontend/new-web/src/components/Hamburger/index.vue b/frontend/new-web/src/components/Hamburger/index.vue
new file mode 100644
index 00000000..7c33db49
--- /dev/null
+++ b/frontend/new-web/src/components/Hamburger/index.vue
@@ -0,0 +1,43 @@
+<!-- 折叠按钮 -->
+<template>
+  <div class="hamburger-wrapper" @click="toggleClick">
+    <div :class="['i-svg:collapse', { hamburger: true, 'is-active': isActive }]" />
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  isActive: { type: Boolean, required: true },
+});
+
+const emit = defineEmits(["toggleClick"]);
+
+function toggleClick() {
+  emit("toggleClick");
+}
+</script>
+
+<style scoped lang="scss">
+.hamburger-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 15px;
+  cursor: pointer;
+
+  .hamburger {
+    vertical-align: middle;
+    color: var(--el-text-color-secondary);
+    transform: scaleX(-1);
+    transition: all 0.3s ease;
+
+    &:hover {
+      color: var(--el-color-primary);
+    }
+
+    &.is-active {
+      transform: scaleX(1);
+    }
+  }
+}
+</style>
diff --git a/frontend/new-web/src/components/IconSelect/index.vue b/frontend/new-web/src/components/IconSelect/index.vue
new file mode 100644
index 00000000..9e828e79
--- /dev/null
+++ b/frontend/new-web/src/components/IconSelect/index.vue
@@ -0,0 +1,212 @@
+<!-- 图标选择器 -->
+<template>
+  <div ref="iconSelectRef" :style="{ width: props.width }">
+    <el-popover :visible="popoverVisible" :width="props.width" placement="bottom-end">
+      <template #reference>
+        <div @click="popoverVisible = !popoverVisible">
+          <slot>
+            <el-input v-model="selectedIcon" readonly placeholder="点击选择图标" class="reference">
+              <template #prepend>
+                <!-- EP（含 el-icon- 前缀或与 icons-vue 同名的裸值） / Iconify / 自定义 SVG 文件名 -->
+                <el-icon v-if="elementIconComp">
+                  <component :is="elementIconComp" />
+                </el-icon>
+                <ArtSvgIcon v-else-if="isIconifyStoredIcon(selectedIcon)" :icon="selectedIcon" />
+                <div v-else-if="selectedIcon" :class="`i-svg:${selectedIcon}`" />
+              </template>
+              <template #suffix>
+                <!-- 清空按钮 -->
+                <el-icon
+                  v-if="selectedIcon"
+                  style="margin-right: 8px"
+                  @click.stop="clearSelectedIcon"
+                >
+                  <CircleClose />
+                </el-icon>
+
+                <el-icon
+                  :style="{
+                    transform: popoverVisible ? 'rotate(180deg)' : 'rotate(0)',
+                    transition: 'transform .5s',
+                  }"
+                >
+                  <ArrowDown @click.stop="togglePopover" />
+                </el-icon>
+              </template>
+            </el-input>
+          </slot>
+        </div>
+      </template>
+
+      <!-- 图标选择弹窗 -->
+      <div ref="popoverContentRef">
+        <el-input v-model="filterText" placeholder="搜索图标" clearable @input="filterIcons" />
+        <el-tabs v-model="activeTab" @tab-click="handleTabClick">
+          <el-tab-pane label="SVG 图标" name="svg">
+            <el-scrollbar height="300px">
+              <ul class="icon-grid">
+                <li
+                  v-for="icon in filteredSvgIcons"
+                  :key="'svg-' + icon"
+                  class="icon-grid-item"
+                  @click="selectIcon(icon)"
+                >
+                  <el-tooltip :content="icon" placement="bottom" effect="light">
+                    <div :class="`i-svg:${icon}`" />
+                  </el-tooltip>
+                </li>
+              </ul>
+            </el-scrollbar>
+          </el-tab-pane>
+          <el-tab-pane label="Element 图标" name="element">
+            <el-scrollbar height="300px">
+              <ul class="icon-grid">
+                <li
+                  v-for="icon in filteredElementIcons"
+                  :key="icon"
+                  class="icon-grid-item"
+                  @click="selectIcon(icon)"
+                >
+                  <el-icon>
+                    <component :is="icon" />
+                  </el-icon>
+                </li>
+              </ul>
+            </el-scrollbar>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </el-popover>
+  </div>
+</template>
+
+<script setup lang="ts">
+import * as ElementPlusIconsVue from "@element-plus/icons-vue";
+import ArtSvgIcon from "@/components/core/base/art-svg-icon/index.vue";
+import { isIconifyStoredIcon, resolveElementPlusIconComponent } from "@/utils/menuIcon";
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: "",
+  },
+  width: {
+    type: String,
+    default: "500px",
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const iconSelectRef = ref();
+const popoverContentRef = ref();
+const popoverVisible = ref(false);
+const activeTab = ref("svg");
+
+const svgIcons = ref<string[]>([]);
+const elementIcons = ref<string[]>(Object.keys(ElementPlusIconsVue));
+const selectedIcon = defineModel("modelValue", {
+  type: String,
+  required: true,
+  default: "",
+});
+
+const filterText = ref("");
+const filteredSvgIcons = ref<string[]>([]);
+const filteredElementIcons = ref<string[]>(elementIcons.value);
+
+const elementIconComp = computed(() => resolveElementPlusIconComponent(selectedIcon.value));
+
+function loadIcons() {
+  const icons = import.meta.glob("../../assets/icons/*.svg");
+  for (const path in icons) {
+    const iconName = path.replace(/.*\/(.*)\.svg$/, "$1");
+    svgIcons.value.push(iconName);
+  }
+  filteredSvgIcons.value = svgIcons.value;
+}
+
+function handleTabClick(tabPane: any) {
+  activeTab.value = tabPane.props.name;
+  filterIcons();
+}
+
+function filterIcons() {
+  if (activeTab.value === "svg") {
+    filteredSvgIcons.value = filterText.value
+      ? svgIcons.value.filter((icon) => icon.toLowerCase().includes(filterText.value.toLowerCase()))
+      : svgIcons.value;
+  } else {
+    filteredElementIcons.value = filterText.value
+      ? elementIcons.value.filter((icon) =>
+          icon.toLowerCase().includes(filterText.value.toLowerCase())
+        )
+      : elementIcons.value;
+  }
+}
+
+function selectIcon(icon: string) {
+  const iconName = activeTab.value === "element" ? "el-icon-" + icon : icon;
+  emit("update:modelValue", iconName);
+  popoverVisible.value = false;
+}
+
+function togglePopover() {
+  popoverVisible.value = !popoverVisible.value;
+}
+
+onClickOutside(iconSelectRef, () => (popoverVisible.value = false), {
+  ignore: [popoverContentRef],
+});
+
+/**
+ * 清空已选图标
+ */
+function clearSelectedIcon() {
+  selectedIcon.value = "";
+}
+
+onMounted(() => {
+  loadIcons();
+  if (selectedIcon.value) {
+    const raw = selectedIcon.value.trim();
+    const epKey = raw.replace(/^el-icon-/i, "");
+    if (elementIcons.value.includes(epKey)) {
+      activeTab.value = "element";
+    } else if (isIconifyStoredIcon(raw)) {
+      activeTab.value = "svg";
+    } else {
+      activeTab.value = "svg";
+    }
+  }
+});
+</script>
+
+<style scoped lang="scss">
+.reference :deep(.el-input__wrapper),
+.reference :deep(.el-input__inner) {
+  cursor: pointer;
+}
+
+.icon-grid {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.icon-grid-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px;
+  margin: 4px;
+  cursor: pointer;
+  border: 1px solid var(--el-border-color);
+  border-radius: 4px;
+  transition: all 0.3s;
+}
+
+.icon-grid-item:hover {
+  border-color: var(--el-color-primary);
+  transform: scale(1.2);
+}
+</style>
diff --git a/frontend/new-web/src/components/InputTag/index.vue b/frontend/new-web/src/components/InputTag/index.vue
new file mode 100644
index 00000000..a22b993e
--- /dev/null
+++ b/frontend/new-web/src/components/InputTag/index.vue
@@ -0,0 +1,73 @@
+<template>
+  <el-scrollbar>
+    <div class="flex-y-center gap-2">
+      <el-tag
+        v-for="tag in tags"
+        :key="tag"
+        closable
+        :disable-transitions="false"
+        v-bind="config.tagAttrs"
+        @close="handleClose(tag)"
+      >
+        {{ tag }}
+      </el-tag>
+      <el-input
+        v-if="inputVisible"
+        ref="inputRef"
+        v-model.trim="inputValue"
+        style="min-width: 100px"
+        @keyup.enter.stop.prevent="handleInputConfirm"
+        @blur.stop.prevent="handleInputConfirm"
+      />
+      <el-button v-else v-bind="config.buttonAttrs" @click="showInput">
+        {{ config.buttonAttrs.btnText ? config.buttonAttrs.btnText : "+ New Tag" }}
+      </el-button>
+    </div>
+  </el-scrollbar>
+</template>
+<script setup lang="ts">
+import type { InputInstance } from "element-plus";
+
+const inputValue = ref("");
+const inputVisible = ref(false);
+const inputRef = ref<InputInstance>();
+
+// 定义 model，用于与父组件的 v-model绑定
+const tags = defineModel<string[]>();
+
+defineProps({
+  config: {
+    type: Object as () => {
+      buttonAttrs: Record<string, any>;
+      inputAttrs: Record<string, any>;
+      tagAttrs: Record<string, any>;
+    },
+    default: () => ({
+      buttonAttrs: {},
+      inputAttrs: {},
+      tagAttrs: {},
+    }),
+  },
+});
+
+const handleClose = (tag: string) => {
+  if (tags.value) {
+    const newTags = tags.value.filter((t) => t !== tag);
+    tags.value = [...newTags];
+  }
+};
+
+const showInput = () => {
+  inputVisible.value = true;
+  nextTick(() => inputRef.value?.focus());
+};
+
+const handleInputConfirm = () => {
+  if (inputValue.value) {
+    const newTags = [...(tags.value || []), inputValue.value];
+    tags.value = newTags;
+  }
+  inputVisible.value = false;
+  inputValue.value = "";
+};
+</script>
diff --git a/frontend/new-web/src/components/IntervalTab/index.vue b/frontend/new-web/src/components/IntervalTab/index.vue
new file mode 100644
index 00000000..42c71f21
--- /dev/null
+++ b/frontend/new-web/src/components/IntervalTab/index.vue
@@ -0,0 +1,199 @@
+<template>
+  <el-form
+    ref="formRef"
+    :model="crontabValueObj"
+    label-width="auto"
+    label-suffix=":"
+    :inline="true"
+    class="interval-tab-form"
+  >
+    <el-form-item label="秒" prop="second" class="form-item">
+      <el-select v-model="crontabValueObj.second" placeholder="秒" clearable>
+        <el-option label="每秒" value="*">*</el-option>
+        <el-option
+          v-for="second in seconds"
+          :key="second"
+          :label="second"
+          :value="second.toString()"
+        >
+          {{ second }}
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="分" prop="min" class="form-item">
+      <el-select v-model="crontabValueObj.min" placeholder="分" clearable>
+        <el-option label="每分" value="*">*</el-option>
+        <el-option v-for="min in minutes" :key="min" :label="min" :value="min.toString()">
+          {{ min }}
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="时" prop="hour" class="form-item">
+      <el-select v-model="crontabValueObj.hour" placeholder="时" clearable>
+        <el-option label="每时" value="*">*</el-option>
+        <el-option v-for="hour in hours" :key="hour" :label="hour" :value="hour.toString()">
+          {{ hour }}
+        </el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="天" prop="day" class="form-item">
+      <el-select v-model="crontabValueObj.day" placeholder="天" clearable>
+        <el-option label="每天" value="*">*</el-option>
+        <el-option v-for="day in days" :key="day" :label="day" :value="day">{{ day }}</el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="周" prop="week" class="form-item">
+      <el-select v-model="crontabValueObj.week" placeholder="周" clearable>
+        <el-option label="每周" value="*">*</el-option>
+        <el-option
+          v-for="week in weekOptions"
+          :key="week.value"
+          :label="week.label"
+          :value="week.value"
+        >
+          {{ week.label }}
+        </el-option>
+      </el-select>
+    </el-form-item>
+
+    <div class="form-actions">
+      <el-button @click="emit('cancel')">取消</el-button>
+      <el-button type="primary" @click="handleConfirm">确认</el-button>
+    </div>
+  </el-form>
+</template>
+
+<script lang="ts" setup>
+// 定义接口，增强类型安全
+interface CrontabValue {
+  second: string;
+  min: string;
+  hour: string;
+  day: string;
+  week: string;
+}
+
+interface WeekOption {
+  value: string;
+  label: string;
+}
+
+// 定义props
+const props = defineProps<{
+  cronValue?: string;
+}>();
+
+// 定义emits
+const emit = defineEmits<{
+  (e: "confirm", value: string): void;
+  (e: "cancel"): void;
+}>();
+
+const formRef = ref();
+
+// 响应式数据
+const crontabValueObj = ref<CrontabValue>({
+  second: "*",
+  min: "*",
+  hour: "*",
+  day: "*",
+  week: "*",
+});
+
+// 常量定义，避免魔法数字
+const MAX_SECONDS = 60;
+const MAX_MINUTES = 60;
+const MAX_HOURS = 24;
+const MAX_DAYS = 31;
+
+// 生成选择器选项
+const seconds = ref(Array.from({ length: MAX_SECONDS }, (_, i) => i));
+const minutes = ref(Array.from({ length: MAX_MINUTES }, (_, i) => i));
+const hours = ref(Array.from({ length: MAX_HOURS }, (_, i) => i));
+const days = ref(Array.from({ length: MAX_DAYS }, (_, i) => i + 1));
+const weekOptions: WeekOption[] = [
+  { value: "1", label: "周一" },
+  { value: "2", label: "周二" },
+  { value: "3", label: "周三" },
+  { value: "4", label: "周四" },
+  { value: "5", label: "周五" },
+  { value: "6", label: "周六" },
+  { value: "7", label: "周日" },
+];
+
+// 初始化时设置cron值
+onMounted(() => {
+  if (props.cronValue) {
+    setCron(props.cronValue);
+  }
+});
+
+// 处理确认
+const handleConfirm = () => {
+  // 简单验证
+  const obj = crontabValueObj.value;
+  if (!obj.second || !obj.min || !obj.hour || !obj.day || !obj.week) {
+    ElMessage.warning("请完善所有时间选项");
+    return;
+  }
+
+  const cronStr = `${obj.second} ${obj.min} ${obj.hour} ${obj.day} ${obj.week}`;
+  emit("confirm", cronStr);
+};
+
+// 设置cron表达式的值
+const setCron = (cronStr: string) => {
+  if (!cronStr) return;
+  const parts = cronStr.split(" ");
+  if (parts.length !== 5) {
+    ElMessage.warning("无效的cron表达式格式");
+    return;
+  }
+
+  const [second, min, hour, day, week] = parts;
+  crontabValueObj.value = {
+    second: second || "*",
+    min: min || "*",
+    hour: hour || "*",
+    day: day || "*",
+    week: week || "*",
+  };
+};
+
+// 暴露方法给父组件
+defineExpose({ setCron });
+</script>
+
+<style lang="scss" scoped>
+.interval-tab-form {
+  flex-wrap: wrap;
+  gap: 16px 8px;
+  width: 100%;
+}
+
+.form-item {
+  width: calc(20% - 8px);
+  min-width: 120px;
+}
+
+.form-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  width: 100%;
+  margin-top: 16px;
+}
+
+// 响应式调整
+@media (width <= 768px) {
+  .form-item {
+    width: calc(33.33% - 8px);
+  }
+}
+
+@media (width <= 480px) {
+  .form-item {
+    width: calc(50% - 8px);
+  }
+}
+</style>
diff --git a/frontend/new-web/src/components/JsonPretty/index.vue b/frontend/new-web/src/components/JsonPretty/index.vue
new file mode 100644
index 00000000..2a9ac97d
--- /dev/null
+++ b/frontend/new-web/src/components/JsonPretty/index.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="json-pretty-wrapper" :style="{ maxHeight: height }">
+    <VueJsonPretty
+      v-if="isJson"
+      :data="parsed"
+      :show-line="true"
+      :show-icon="true"
+      :show-double-quotes="false"
+      :show-length="true"
+      :deep="3"
+    />
+    <pre v-else class="json-pretty-fallback">{{ displayText }}</pre>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import VueJsonPretty from "vue-json-pretty";
+import "vue-json-pretty/lib/styles.css";
+
+const props = defineProps({
+  value: { type: [String, Object, Array, Number, Boolean], default: "" },
+  height: { type: String, default: "240px" },
+});
+
+const parsed = computed(() => {
+  const v: any = props.value;
+  if (typeof v === "string") {
+    try {
+      return JSON.parse(v);
+    } catch {
+      return v; // 非 JSON 字符串，原样展示
+    }
+  }
+  return v;
+});
+
+const isJson = computed(() => typeof parsed.value === "object" && parsed.value !== null);
+const displayText = computed(() => {
+  const v: any = props.value;
+  return typeof v === "string" ? v : JSON.stringify(v, null, 2);
+});
+</script>
+
+<style scoped>
+.json-pretty-wrapper {
+  padding: 8px;
+  overflow: auto;
+  background-color: var(--el-fill-color-blank);
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 4px;
+}
+
+.json-pretty-fallback {
+  margin: 0;
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+    monospace;
+  font-size: 12px;
+  word-break: break-all;
+  white-space: pre-wrap;
+}
+</style>
diff --git a/frontend/new-web/src/components/LangSelect/index.vue b/frontend/new-web/src/components/LangSelect/index.vue
new file mode 100644
index 00000000..3e15377e
--- /dev/null
+++ b/frontend/new-web/src/components/LangSelect/index.vue
@@ -0,0 +1,50 @@
+<!-- 语言切换 -->
+<template>
+  <el-dropdown trigger="click" @command="handleLanguageChange">
+    <div class="i-svg:language" :class="size" />
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item
+          v-for="item in langOptions"
+          :key="item.value"
+          :disabled="appStore.language === item.value"
+          :command="item.value"
+        >
+          {{ item.label }}
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+
+<script setup lang="ts">
+import { useAppStore } from "@/store/modules/app.store";
+import { LanguageEnum } from "@/enums/settings/locale.enum";
+
+defineProps({
+  size: {
+    type: String,
+    required: false,
+  },
+});
+
+const langOptions = [
+  { label: "中文", value: LanguageEnum.ZH_CN },
+  { label: "English", value: LanguageEnum.EN },
+];
+
+const appStore = useAppStore();
+const { locale, t } = useI18n();
+
+/**
+ * 处理语言切换
+ *
+ * @param lang  语言（zh-cn、en）
+ */
+function handleLanguageChange(lang: string) {
+  locale.value = lang;
+  appStore.changeLanguage(lang);
+
+  ElMessage.success(t("langSelect.message.success"));
+}
+</script>
diff --git a/frontend/new-web/src/components/MarkdownRenderer/index.vue b/frontend/new-web/src/components/MarkdownRenderer/index.vue
new file mode 100644
index 00000000..27298252
--- /dev/null
+++ b/frontend/new-web/src/components/MarkdownRenderer/index.vue
@@ -0,0 +1,141 @@
+<template>
+  <div class="markdown-content" v-html="renderedContent"></div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import MarkdownIt from "markdown-it";
+import markdownItHighlightjs from "markdown-it-highlightjs";
+import hljs from "highlight.js";
+import "highlight.js/styles/atom-one-light.css";
+
+interface Props {
+  content: string;
+  maxLength?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  maxLength: undefined,
+});
+
+const md: MarkdownIt = new MarkdownIt({
+  html: true,
+  linkify: true,
+  typographer: true,
+  breaks: true,
+  highlight(str: string, lang: string): string {
+    if (lang && hljs.getLanguage(lang)) {
+      try {
+        return `<pre class="hljs"><code>${hljs.highlight(str, { language: lang, ignoreIllegals: true }).value}</code></pre>`;
+      } catch {
+        return `<pre class="hljs"><code>${md.utils.escapeHtml(str)}</code></pre>`;
+      }
+    }
+    return `<pre class="hljs"><code>${md.utils.escapeHtml(str)}</code></pre>`;
+  },
+}).use(markdownItHighlightjs);
+
+const defaultRender =
+  md.renderer.rules.link_open ||
+  function (tokens: any[], idx: number, options: any, env: any, self: any) {
+    return self.renderToken(tokens, idx, options, env, self);
+  };
+
+md.renderer.rules.link_open = function (
+  tokens: any[],
+  idx: number,
+  options: any,
+  env: any,
+  self: any
+) {
+  tokens[idx].attrPush(["target", "_blank"]);
+  tokens[idx].attrPush(["rel", "noopener noreferrer"]);
+  return defaultRender(tokens, idx, options, env, self);
+};
+
+const renderedContent = computed(() => {
+  if (!props.content) return "";
+  const content =
+    props.maxLength && props.content.length > props.maxLength
+      ? props.content.substring(0, props.maxLength) + "..."
+      : props.content;
+  return md.render(content);
+});
+</script>
+
+<style lang="scss" scoped>
+.markdown-content {
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--el-text-color-primary);
+  word-wrap: break-word;
+
+  :deep(pre) {
+    padding: 12px;
+    margin: 12px 0;
+    overflow-x: auto;
+    background: var(--el-fill-color-light);
+    border-radius: 6px;
+
+    code {
+      font-family: "Courier New", Courier, monospace;
+      font-size: 13px;
+    }
+  }
+
+  :deep(code) {
+    padding: 2px 6px;
+    font-family: "Courier New", Courier, monospace;
+    font-size: 13px;
+    background: var(--el-fill-color-light);
+    border-radius: 3px;
+  }
+
+  :deep(p) {
+    margin: 8px 0;
+  }
+
+  :deep(ul),
+  :deep(ol) {
+    padding-left: 24px;
+    margin: 8px 0;
+  }
+
+  :deep(li) {
+    margin: 4px 0;
+  }
+
+  :deep(a) {
+    color: var(--el-color-primary);
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  :deep(blockquote) {
+    padding: 8px 16px;
+    margin: 12px 0;
+    background: var(--el-fill-color-light);
+    border-left: 4px solid var(--el-color-primary);
+  }
+
+  :deep(table) {
+    width: 100%;
+    margin: 12px 0;
+    border-collapse: collapse;
+
+    th,
+    td {
+      padding: 8px 12px;
+      border: 1px solid var(--el-border-color-light);
+    }
+
+    th {
+      font-weight: 600;
+      background: var(--el-fill-color-light);
+    }
+  }
+}
+</style>
diff --git a/frontend/new-web/src/components/MenuRouteIcon/index.vue b/frontend/new-web/src/components/MenuRouteIcon/index.vue
new file mode 100644
index 00000000..59bf4161
--- /dev/null
+++ b/frontend/new-web/src/components/MenuRouteIcon/index.vue
@@ -0,0 +1,106 @@
+<!-- 路由 / 侧栏菜单图标：与 IconSelect 存值规则一致 -->
+<template>
+  <template v-if="!trimmedIcon" />
+
+  <ElIcon
+    v-else-if="elementComponent"
+    :class="iconClass"
+    :style="mergedStyle"
+    class="menu-route-icon"
+  >
+    <component :is="elementComponent" />
+  </ElIcon>
+
+  <ArtSvgIcon
+    v-else-if="isInvalidElementPrefix"
+    :icon="epFallback"
+    :color="color"
+    :class="iconClass"
+    :style="mergedStyle"
+  />
+
+  <!-- 本地 SVG：用 Vite URL，避免动态 `i-svg:*` 未被 Tailwind 扫描导致空白 -->
+  <img
+    v-else-if="isLocalSvgIcon && localSvgAssetUrl"
+    :src="localSvgAssetUrl"
+    alt=""
+    :class="['menu-route-icon', 'menu-route-icon__local-img', iconClass]"
+    :style="mergedStyle"
+    draggable="false"
+  />
+
+  <div
+    v-else-if="isLocalSvgIcon"
+    :class="['menu-route-icon', localSvgClass, iconClass]"
+    :style="mergedStyle"
+  />
+
+  <ArtSvgIcon v-else :icon="trimmedIcon" :color="color" :class="iconClass" :style="mergedStyle" />
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import ArtSvgIcon from "@/components/core/base/art-svg-icon/index.vue";
+import {
+  elementMenuIconToEpIconify,
+  isElementPlusStoredIcon,
+  isIconifyStoredIcon,
+  resolveElementPlusIconComponent,
+} from "@/utils/menuIcon";
+import { resolveMenuLocalSvgUrl } from "@/utils/menuLocalSvg";
+
+defineOptions({ name: "MenuRouteIcon", inheritAttrs: false });
+
+const props = defineProps<{
+  icon?: string;
+  color?: string;
+  class?: string;
+  style?: Record<string, unknown> | string;
+}>();
+
+const trimmedIcon = computed(() => props.icon?.trim() ?? "");
+
+const elementComponent = computed(() => resolveElementPlusIconComponent(trimmedIcon.value));
+
+/** 仅带 `el-icon-` 却解析不出 EP 组件时走 ep 兜底，裸名无效则仍按自定义 SVG 处理 */
+const isInvalidElementPrefix = computed(
+  () => !!trimmedIcon.value && isElementPlusStoredIcon(trimmedIcon.value) && !elementComponent.value
+);
+
+const epFallback = computed(() => elementMenuIconToEpIconify(trimmedIcon.value));
+
+/** 非 Iconify、且不能映射为 EP 组件时，按 IconSelect「SVG」视为本地 `i-svg:` */
+const isLocalSvgIcon = computed(() => {
+  const ic = trimmedIcon.value;
+  if (!ic || isIconifyStoredIcon(ic)) return false;
+  if (resolveElementPlusIconComponent(ic)) return false;
+  if (isElementPlusStoredIcon(ic)) return false;
+  return true;
+});
+
+const localSvgAssetUrl = computed(() => {
+  if (!isLocalSvgIcon.value) return undefined;
+  return resolveMenuLocalSvgUrl(trimmedIcon.value);
+});
+
+const localSvgClass = computed(() => (trimmedIcon.value ? `i-svg:${trimmedIcon.value}` : ""));
+
+const iconClass = computed(() => props.class ?? "");
+const mergedStyle = computed(() => {
+  const base = typeof props.style === "object" && props.style !== null ? { ...props.style } : {};
+  if (props.color) {
+    (base as Record<string, string>).color = props.color;
+  }
+  return base as Record<string, string>;
+});
+</script>
+
+<style scoped lang="scss">
+.menu-route-icon__local-img {
+  flex-shrink: 0;
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  object-fit: contain;
+}
+</style>
diff --git a/frontend/new-web/src/components/MenuSearch/index.vue b/frontend/new-web/src/components/MenuSearch/index.vue
new file mode 100644
index 00000000..870e058c
--- /dev/null
+++ b/frontend/new-web/src/components/MenuSearch/index.vue
@@ -0,0 +1,581 @@
+<template>
+  <div @click="openSearchModal">
+    <!-- <div class="i-svg:search" /> -->
+    <div class="command-palette-trigger" role="button" tabindex="0" aria-label="打开搜索面板">
+      <div class="command-palette-trigger__left">
+        <div class="i-svg:search" />
+        <span class="command-palette-trigger__text">搜索菜单</span>
+      </div>
+      <kbd class="command-palette-trigger__kbd">Ctrl K</kbd>
+    </div>
+    <el-dialog
+      v-model="isModalVisible"
+      width="30%"
+      :append-to-body="true"
+      :show-close="false"
+      @close="closeSearchModal"
+    >
+      <template #header>
+        <el-input
+          ref="searchInputRef"
+          v-model="searchKeyword"
+          size="large"
+          placeholder="输入菜单名称关键字搜索"
+          clearable
+          @keyup.enter="selectActiveResult"
+          @input="updateSearchResults"
+          @keydown.up.prevent="navigateResults('up')"
+          @keydown.down.prevent="navigateResults('down')"
+          @keydown.esc="closeSearchModal"
+        >
+          <template #prepend>
+            <el-button icon="Search" />
+          </template>
+        </el-input>
+      </template>
+
+      <div class="search-result">
+        <!-- 搜索历史 -->
+        <template v-if="searchKeyword === '' && searchHistory.length > 0">
+          <div class="search-history">
+            <div class="search-history__title">
+              搜索历史
+              <el-button
+                type="primary"
+                text
+                size="small"
+                class="search-history__clear"
+                @click="clearHistory"
+              >
+                <el-icon><Delete /></el-icon>
+              </el-button>
+            </div>
+            <ul class="search-history__list">
+              <li
+                v-for="(item, index) in searchHistory"
+                :key="index"
+                class="search-history__item"
+                @click="navigateToRoute(item)"
+              >
+                <div class="search-history__icon">
+                  <el-icon><Clock /></el-icon>
+                </div>
+                <span class="search-history__name">{{ item.title }}</span>
+                <div class="search-history__action">
+                  <el-icon @click.stop="removeHistoryItem(index)"><Close /></el-icon>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </template>
+
+        <!-- 搜索结果 -->
+        <template v-else>
+          <ul v-if="displayResults.length > 0">
+            <li
+              v-for="(item, index) in displayResults"
+              :key="item.path"
+              :class="[
+                'search-result__item',
+                {
+                  'search-result__item--active': index === activeIndex,
+                },
+              ]"
+              @click="navigateToRoute(item)"
+            >
+              <!-- 与 MenuRouteIcon / 旧版 MenuItemContent 一致：EP + 自定义 SVG + Iconify -->
+              <MenuRouteIcon :icon="item.icon || 'menu'" class="flex-shrink-0" />
+              <span class="ml-2">{{ item.title }}</span>
+            </li>
+          </ul>
+        </template>
+
+        <!-- 无搜索历史显示 -->
+        <div v-if="searchKeyword === '' && searchHistory.length === 0" class="no-history">
+          <p class="no-history__text">没有搜索历史</p>
+        </div>
+      </div>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <div class="ctrl-k-hint">
+            <span class="ctrl-k-text">Ctrl+K 快速打开</span>
+          </div>
+          <div class="shortcuts-group">
+            <div class="key-box">
+              <div class="key-btn">选择</div>
+            </div>
+            <div class="arrow-box">
+              <div class="arrow-up-down">
+                <div class="key-btn">
+                  <div class="i-svg:up" />
+                </div>
+                <div class="key-btn ml-1">
+                  <div class="i-svg:down" />
+                </div>
+              </div>
+              <span class="key-text">切换</span>
+            </div>
+            <div class="key-box">
+              <div class="key-btn esc-btn">ESC</div>
+              <span class="key-text">关闭</span>
+            </div>
+          </div>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { router } from "@/router";
+import { usePermissionStore } from "@/store";
+import { isExternal } from "@/utils";
+import { RouteRecordRaw, LocationQueryRaw } from "vue-router";
+import * as ElementPlusIconsVue from "@element-plus/icons-vue";
+
+const { Clock, Close, Delete } = ElementPlusIconsVue;
+
+const HISTORY_KEY = "menu_search_history";
+const MAX_HISTORY = 5;
+
+const permissionStore = usePermissionStore();
+const isModalVisible = ref(false);
+const searchKeyword = ref("");
+const searchInputRef = ref();
+const excludedRoutes = ref(["/redirect", "/login", "/401", "/404", "/500", "/:pathMatch(.*)*"]);
+const menuItems = ref<SearchItem[]>([]);
+const searchResults = ref<SearchItem[]>([]);
+const activeIndex = ref(-1);
+const searchHistory = ref<SearchItem[]>([]);
+
+interface SearchItem {
+  title: string;
+  path: string;
+  name?: string;
+  icon?: string;
+  redirect?: string;
+  params?: LocationQueryRaw;
+}
+
+// 从本地存储加载搜索历史
+function loadSearchHistory() {
+  const historyStr = localStorage.getItem(HISTORY_KEY);
+  if (historyStr) {
+    try {
+      searchHistory.value = JSON.parse(historyStr);
+    } catch {
+      searchHistory.value = [];
+    }
+  }
+}
+
+// 保存搜索历史到本地存储
+function saveSearchHistory() {
+  localStorage.setItem(HISTORY_KEY, JSON.stringify(searchHistory.value));
+}
+
+// 添加项目到搜索历史
+function addToHistory(item: SearchItem) {
+  // 检查是否已存在
+  const index = searchHistory.value.findIndex((i) => i.path === item.path);
+
+  // 如果存在则移除
+  if (index !== -1) {
+    searchHistory.value.splice(index, 1);
+  }
+
+  // 添加到历史开头
+  searchHistory.value.unshift(item);
+
+  // 限制历史记录数量
+  if (searchHistory.value.length > MAX_HISTORY) {
+    searchHistory.value = searchHistory.value.slice(0, MAX_HISTORY);
+  }
+
+  // 保存到本地存储
+  saveSearchHistory();
+}
+
+// 移除历史记录项
+function removeHistoryItem(index: number) {
+  searchHistory.value.splice(index, 1);
+  saveSearchHistory();
+}
+
+// 清空历史记录
+function clearHistory() {
+  searchHistory.value = [];
+  localStorage.removeItem(HISTORY_KEY);
+}
+
+// 注册全局快捷键
+function handleKeyDown(e: KeyboardEvent) {
+  // 判断是否为Ctrl+K组合键
+  if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "k") {
+    e.preventDefault(); // 阻止默认行为
+    openSearchModal();
+  }
+}
+
+// 添加键盘事件监听
+onMounted(() => {
+  loadRoutes(permissionStore.routes);
+  loadSearchHistory();
+  document.addEventListener("keydown", handleKeyDown);
+});
+
+// 移除键盘事件监听
+onBeforeUnmount(() => {
+  document.removeEventListener("keydown", handleKeyDown);
+});
+
+// 打开搜索模态框
+function openSearchModal() {
+  searchKeyword.value = "";
+  activeIndex.value = -1;
+  isModalVisible.value = true;
+  setTimeout(() => {
+    searchInputRef.value.focus();
+  }, 100);
+}
+
+// 关闭搜索模态框
+function closeSearchModal() {
+  isModalVisible.value = false;
+}
+
+// 更新搜索结果
+function updateSearchResults() {
+  activeIndex.value = -1;
+  if (searchKeyword.value) {
+    const keyword = searchKeyword.value.toLowerCase();
+    searchResults.value = menuItems.value.filter((item) =>
+      item.title.toLowerCase().includes(keyword)
+    );
+  } else {
+    searchResults.value = [];
+  }
+}
+
+// 显示搜索结果
+const displayResults = computed(() => searchResults.value);
+
+// 执行搜索
+function selectActiveResult() {
+  if (displayResults.value.length > 0 && activeIndex.value >= 0) {
+    navigateToRoute(displayResults.value[activeIndex.value]);
+  }
+}
+
+// 导航搜索结果
+function navigateResults(direction: string) {
+  if (displayResults.value.length === 0) return;
+
+  if (direction === "up") {
+    activeIndex.value =
+      activeIndex.value <= 0 ? displayResults.value.length - 1 : activeIndex.value - 1;
+  } else if (direction === "down") {
+    activeIndex.value =
+      activeIndex.value >= displayResults.value.length - 1 ? 0 : activeIndex.value + 1;
+  }
+}
+
+// 跳转到
+function navigateToRoute(item: SearchItem) {
+  closeSearchModal();
+  // 添加到历史记录
+  addToHistory(item);
+
+  if (isExternal(item.path)) {
+    window.open(item.path, "_blank");
+  } else {
+    router.push({ path: item.path, query: item.params });
+  }
+}
+
+function loadRoutes(routes: RouteRecordRaw[], parentPath = "") {
+  routes.forEach((route) => {
+    // 计算完整路径
+    const path = route.path.startsWith("/")
+      ? route.path
+      : `${parentPath}${parentPath.endsWith("/") ? "" : "/"}${route.path}`;
+
+    // 检查是否需要排除
+    if (excludedRoutes.value.includes(route.path) || isExternal(route.path) || route.meta?.hidden)
+      return;
+
+    // 处理有子路由的情况
+    if (route.children) {
+      // 如果父路由本身有title，也添加到menuItems中
+      if (route.meta?.title) {
+        const title = route.meta.title === "dashboard" ? "首页" : route.meta.title;
+        menuItems.value.push({
+          title,
+          path,
+          name: typeof route.name === "string" ? route.name : undefined,
+          icon: route.meta.icon,
+          redirect: typeof route.redirect === "string" ? route.redirect : undefined,
+          params: route.meta.params
+            ? JSON.parse(JSON.stringify(toRaw(route.meta.params)))
+            : undefined,
+        });
+      }
+      // 递归处理子路由
+      loadRoutes(route.children, path);
+    }
+    // 处理没有子路由但有title的情况
+    else if (route.meta?.title) {
+      const title = route.meta.title === "dashboard" ? "首页" : route.meta.title;
+      menuItems.value.push({
+        title,
+        path,
+        name: typeof route.name === "string" ? route.name : undefined,
+        icon: route.meta.icon,
+        redirect: typeof route.redirect === "string" ? route.redirect : undefined,
+        params: route.meta.params
+          ? JSON.parse(JSON.stringify(toRaw(route.meta.params)))
+          : undefined,
+      });
+    }
+  });
+}
+</script>
+
+<style scoped lang="scss">
+.command-palette-trigger {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  justify-content: space-between;
+  height: 32px;
+  padding: 0 12px;
+  user-select: none;
+  background: var(--el-fill-color-light);
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 999px;
+}
+
+.command-palette-trigger__left {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.command-palette-trigger__left :deep([class^="i-svg:"]) {
+  color: var(--el-text-color-secondary) !important;
+}
+
+.command-palette-trigger__text {
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+  white-space: nowrap;
+}
+
+.command-palette-trigger__kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px 8px;
+  font-size: 12px;
+  line-height: 1;
+  color: var(--el-text-color-secondary);
+  white-space: nowrap;
+  background: var(--el-bg-color-overlay);
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 8px;
+}
+
+.command-palette-trigger:focus-visible {
+  outline: 2px solid var(--el-color-primary);
+  outline-offset: 2px;
+}
+
+.command-palette-trigger:hover {
+  border-color: var(--el-border-color);
+}
+
+.search-result {
+  max-height: 400px;
+  overflow-y: auto;
+
+  ul {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    text-align: left;
+    cursor: pointer;
+
+    &--active {
+      color: var(--el-color-primary);
+      background-color: var(--el-menu-hover-bg-color);
+    }
+  }
+}
+
+/* 搜索历史样式 */
+.search-history {
+  &__title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 12px;
+    font-size: 12px;
+    line-height: 34px;
+    color: var(--el-text-color-secondary);
+  }
+
+  &__clear {
+    padding: 2px;
+    font-size: 12px;
+
+    &:hover {
+      color: var(--el-color-danger);
+    }
+  }
+
+  &__list {
+    padding: 0;
+    margin: 0;
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    margin-right: 10px;
+    font-size: 16px;
+    color: var(--el-text-color-secondary);
+  }
+
+  &__name {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 14px;
+    color: var(--el-text-color-primary);
+    white-space: nowrap;
+  }
+
+  &__action {
+    padding: 4px;
+    color: var(--el-text-color-secondary);
+    border-radius: 4px;
+    opacity: 0;
+    transition: opacity 0.2s;
+
+    &:hover {
+      color: var(--el-color-danger);
+      background-color: var(--el-fill-color);
+    }
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    height: 40px;
+    padding: 0 12px;
+    cursor: pointer;
+
+    &:hover {
+      background-color: var(--el-fill-color-light);
+
+      .search-history__action {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+/* 没有搜索历史时的样式 */
+.no-history {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100px;
+
+  &__text {
+    font-size: 14px;
+    color: var(--el-text-color-secondary);
+  }
+}
+
+.dialog-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.shortcuts-group {
+  display: flex;
+  gap: 15px;
+  align-items: center;
+}
+
+.key-box {
+  display: flex;
+  gap: 5px;
+  align-items: center;
+}
+
+.arrow-box {
+  display: flex;
+  gap: 5px;
+  align-items: center;
+}
+
+.arrow-up-down {
+  display: flex;
+  gap: 2px;
+  align-items: center;
+}
+
+.key-btn {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 32px;
+  height: 20px;
+  padding: 0 4px;
+  font-size: 12px;
+  color: var(--el-text-color-regular);
+  background-color: var(--el-fill-color-blank);
+  border: 1px solid var(--el-border-color);
+  border-radius: 3px;
+  box-shadow: var(--el-box-shadow-light);
+}
+
+.esc-btn {
+  font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
+  font-size: 11px;
+}
+
+.key-text {
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+}
+
+.ctrl-k-hint {
+  display: flex;
+  align-items: center;
+}
+
+.ctrl-k-text {
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+}
+
+// 适配Element Plus对话框
+:deep(.el-dialog__footer) {
+  box-sizing: border-box;
+  padding-top: 10px;
+  text-align: right;
+}
+</style>
diff --git a/frontend/new-web/src/components/Notification/index.vue b/frontend/new-web/src/components/Notification/index.vue
new file mode 100644
index 00000000..e398affd
--- /dev/null
+++ b/frontend/new-web/src/components/Notification/index.vue
@@ -0,0 +1,128 @@
+<!-- 顶部通知公告 -->
+<template>
+  <el-dropdown trigger="click">
+    <el-badge v-if="noticeList.length > 0" :value="noticeList.length" :max="99">
+      <div class="i-svg:bell" />
+    </el-badge>
+
+    <div v-else class="i-svg:bell" />
+
+    <template #dropdown>
+      <div class="p-5">
+        <template v-if="noticeList.length > 0">
+          <div v-for="(item, index) in noticeList" :key="index" class="w-400px py-3">
+            <div class="flex-y-center">
+              <el-tag :type="item.notice_type === '1' ? 'primary' : 'warning'">
+                {{ item.notice_type === "1" ? "通知" : "公告" }}
+              </el-tag>
+
+              <!-- truncated: 超出部分省略 -->
+              <el-text size="small" class="w-200px cursor-pointer !ml-2 !flex-1" truncated>
+                {{ item.notice_content }}
+              </el-text>
+
+              <!-- 时间 -->
+              <div class="text-xs text-gray">
+                {{ item.created_time }}
+              </div>
+            </div>
+          </div>
+          <el-divider />
+
+          <div class="flex-x-between">
+            <el-link type="primary" underline="never" @click="handleViewMoreNotice">
+              <span class="text-xs">查看更多</span>
+              <el-icon class="text-xs">
+                <ArrowRight />
+              </el-icon>
+            </el-link>
+            <el-link
+              v-if="noticeList.length > 0"
+              type="primary"
+              underline="never"
+              @click="handleMarkAllAsRead"
+            >
+              <span class="text-xs">全部已读</span>
+            </el-link>
+          </div>
+        </template>
+        <template v-else>
+          <div class="flex-center h-150px w-350px">
+            <el-empty :image-size="50" description="暂无消息" />
+          </div>
+        </template>
+      </div>
+    </template>
+  </el-dropdown>
+
+  <el-dialog
+    v-model="noticeDialogVisible"
+    :title="noticeDetail?.notice_title ?? '通知详情'"
+    width="800px"
+    custom-class="notification-detail"
+  >
+    <div v-if="noticeDetail" class="p-x-20px">
+      <div class="flex-y-center mb-16px text-13px text-color-secondary">
+        <span class="flex-y-center">
+          <el-icon>
+            <User />
+          </el-icon>
+          {{ noticeDetail.created_by?.name }}
+        </span>
+        <span class="ml-2 flex-y-center">
+          <el-icon>
+            <Timer />
+          </el-icon>
+          {{ noticeDetail.created_time }}
+        </span>
+      </div>
+
+      <div class="max-h-60vh pt-16px mb-24px overflow-y-auto border-t border-solid border-color">
+        <div v-html="noticeDetail.notice_content"></div>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import NoticeAPI, { NoticeTable } from "@/api/module_system/notice";
+import { ArrowRight, Timer, User } from "@element-plus/icons-vue";
+import { router } from "@/router";
+import { useNoticeStore } from "@/store";
+
+const noticeStore = useNoticeStore();
+
+const noticeList = ref<NoticeTable[]>([]);
+const noticeDialogVisible = ref(false);
+const noticeDetail = ref<NoticeTable | null>(null);
+
+/**
+ * 获取我的通知公告
+ */
+async function featchMyNotice() {
+  await noticeStore.getNotice();
+  noticeList.value = noticeStore.noticeList;
+}
+
+// 查看更多
+function handleViewMoreNotice() {
+  router.push({ name: "Notice" });
+}
+
+// 全部已读：将这些公告禁用（status=false），刷新后不再出现
+function handleMarkAllAsRead() {
+  const ids = noticeList.value
+    .map((item) => item.id)
+    .filter((id): id is number => id !== undefined);
+  NoticeAPI.batchNotice({ ids, status: "1" }).then(async () => {
+    await noticeStore.getNotice();
+    noticeList.value = noticeStore.noticeList;
+  });
+}
+
+onMounted(() => {
+  featchMyNotice();
+});
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/frontend/new-web/src/components/OperationColumn/index.vue b/frontend/new-web/src/components/OperationColumn/index.vue
new file mode 100644
index 00000000..eb5c1354
--- /dev/null
+++ b/frontend/new-web/src/components/OperationColumn/index.vue
@@ -0,0 +1,94 @@
+<!-- 操作列自适应宽度 -->
+<template>
+  <el-table-column
+    :label="label"
+    :fixed="fixed"
+    :align="align"
+    :show-overflow-tooltip="showOverflowTooltip"
+    :width="finalWidth"
+  >
+    <template #default="{ row, column, $index }">
+      <div v-auto-width class="operation-buttons">
+        <slot v-bind="{ row, column, $index }"></slot>
+      </div>
+    </template>
+  </el-table-column>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  listDataLength: number;
+  prop?: string;
+  label?: string;
+  fixed?: string | boolean;
+  align?: string;
+  width?: number | string;
+  showOverflowTooltip?: boolean;
+  minWidth?: number | string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: "操作",
+  fixed: "right",
+  align: "center",
+  minWidth: 80,
+});
+
+const count = ref(0);
+const operationWidth = ref(Number(props.minWidth) || 80);
+
+// 计算操作列宽度
+const calculateWidth = () => {
+  count.value++;
+
+  if (count.value !== props.listDataLength) return;
+  const maxWidth = getOperationMaxWidth();
+  operationWidth.value = Math.max(maxWidth, Number(props.minWidth));
+  count.value = 0;
+};
+
+// 计算最终宽度
+const finalWidth = computed(() => {
+  const widthNum = typeof props.width === "number" ? props.width : Number(props.width);
+  const minWidthNum = typeof props.minWidth === "number" ? props.minWidth : Number(props.minWidth);
+  return widthNum || operationWidth.value || minWidthNum;
+});
+
+// 自适应宽度指令
+const vAutoWidth = {
+  mounted() {
+    // 初次挂载的时候计算一次
+    calculateWidth();
+  },
+  updated() {
+    // 数据更新时重新计算一次
+    calculateWidth();
+  },
+};
+
+/**
+ * 获取按钮数量和宽带来获取操作组的最大宽度
+ * 注意使用时需要使用 `class="operation-buttons"` 的标签包裹操作按钮
+ * @returns {number} 返回操作组的最大宽度
+ */
+const getOperationMaxWidth = () => {
+  const el = document.getElementsByClassName("operation-buttons");
+
+  // 取操作组的最大宽度
+  let maxWidth = 0;
+  let totalWidth: any = 0;
+  Array.prototype.forEach.call(el, (item) => {
+    // 获取每个item的dom
+    const buttons = item.querySelectorAll(".el-button");
+    // 获取每行按钮的总宽度
+    totalWidth = Array.from(buttons).reduce((acc, button: any) => {
+      return acc + button.scrollWidth + 14; // 每个按钮的宽度加上预留宽度
+    }, 0);
+
+    // 获取最大的宽度
+    if (totalWidth > maxWidth) maxWidth = totalWidth;
+  });
+
+  return maxWidth;
+};
+</script>
diff --git a/frontend/new-web/src/components/Pagination/index.vue b/frontend/new-web/src/components/Pagination/index.vue
new file mode 100644
index 00000000..235fef35
--- /dev/null
+++ b/frontend/new-web/src/components/Pagination/index.vue
@@ -0,0 +1,92 @@
+<!-- 分页组件 -->
+<template>
+  <el-scrollbar>
+    <div :class="{ hidden: hidden }" class="pagination">
+      <el-pagination
+        v-model:current-page="currentPage"
+        v-model:page-size="pageSize"
+        :background="background"
+        :layout="layout"
+        :page-sizes="pageSizes"
+        :total="total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+  </el-scrollbar>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  total: {
+    type: Number as PropType<number>,
+    default: 0,
+  },
+  pageSizes: {
+    type: Array as PropType<number[]>,
+    default() {
+      return [10, 20, 30, 50];
+    },
+  },
+  layout: {
+    type: String,
+    default: "total, sizes, prev, pager, next, jumper",
+  },
+  background: {
+    type: Boolean,
+    default: true,
+  },
+  autoScroll: {
+    type: Boolean,
+    default: true,
+  },
+  hidden: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["pagination"]);
+
+const currentPage = defineModel("page", {
+  type: Number,
+  required: true,
+  default: 1,
+});
+
+const pageSize = defineModel("limit", {
+  type: Number,
+  required: true,
+  default: 10,
+});
+
+watch(
+  () => props.total,
+  (newVal: number) => {
+    const lastPage = Math.ceil(newVal / pageSize.value);
+    if (newVal > 0 && currentPage.value > lastPage) {
+      currentPage.value = lastPage;
+      emit("pagination", { page: currentPage.value, limit: pageSize.value });
+    }
+  }
+);
+
+function handleSizeChange(val: number) {
+  currentPage.value = 1;
+  emit("pagination", { page: currentPage.value, limit: val });
+}
+
+function handleCurrentChange(val: number) {
+  emit("pagination", { page: val, limit: pageSize.value });
+}
+</script>
+
+<style lang="scss" scoped>
+.pagination {
+  padding: 12px;
+
+  &.hidden {
+    display: none;
+  }
+}
+</style>
diff --git a/frontend/new-web/src/components/SizeSelect/index.vue b/frontend/new-web/src/components/SizeSelect/index.vue
new file mode 100644
index 00000000..a329289d
--- /dev/null
+++ b/frontend/new-web/src/components/SizeSelect/index.vue
@@ -0,0 +1,40 @@
+<!-- 布局大小 -->
+<template>
+  <el-tooltip :content="t('sizeSelect.tooltip')" effect="dark" placement="bottom">
+    <el-dropdown trigger="click" @command="handleSizeChange">
+      <div class="i-svg:size" />
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item
+            v-for="item of sizeOptions"
+            :key="item.value"
+            :disabled="appStore.size == item.value"
+            :command="item.value"
+          >
+            {{ item.label }}
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+  </el-tooltip>
+</template>
+
+<script setup lang="ts">
+import { ComponentSize } from "@/enums/settings/layout.enum";
+import { useAppStore } from "@/store/modules/app.store";
+
+const { t } = useI18n();
+const sizeOptions = computed(() => {
+  return [
+    { label: t("sizeSelect.default"), value: ComponentSize.DEFAULT },
+    { label: t("sizeSelect.large"), value: ComponentSize.LARGE },
+    { label: t("sizeSelect.small"), value: ComponentSize.SMALL },
+  ];
+});
+
+const appStore = useAppStore();
+function handleSizeChange(size: string) {
+  appStore.changeSize(size);
+  ElMessage.success(t("sizeSelect.message.success"));
+}
+</script>
diff --git a/frontend/new-web/src/components/TableSelect/index.vue b/frontend/new-web/src/components/TableSelect/index.vue
new file mode 100644
index 00000000..25e9ba10
--- /dev/null
+++ b/frontend/new-web/src/components/TableSelect/index.vue
@@ -0,0 +1,361 @@
+<template>
+  <div ref="tableSelectRef" :style="'width:' + width">
+    <el-popover
+      :visible="popoverVisible"
+      :width="selectConfig.popover?.width ?? popoverWidth"
+      placement="bottom-end"
+      v-bind="selectConfig.popover"
+      @show="handleShow"
+    >
+      <template #reference>
+        <div @click="popoverVisible = !popoverVisible">
+          <slot>
+            <el-input
+              class="reference"
+              :model-value="text"
+              :readonly="true"
+              :placeholder="placeholder"
+              :clearable="true"
+              @clear="handleClear"
+            >
+              <template #suffix>
+                <el-icon
+                  :style="{
+                    transform: popoverVisible ? 'rotate(180deg)' : 'rotate(0)',
+                    transition: 'transform .5s',
+                  }"
+                >
+                  <ArrowDown />
+                </el-icon>
+              </template>
+            </el-input>
+          </slot>
+        </div>
+      </template>
+      <!-- 弹出框内容 -->
+      <div ref="popoverContentRef">
+        <!-- 表单 -->
+        <el-form ref="formRef" :model="queryParams" :inline="true">
+          <template v-for="item in selectConfig.formItems" :key="item.prop">
+            <el-form-item :label="item.label" :prop="item.prop">
+              <!-- Input 输入框 -->
+              <template v-if="item.type === 'input'">
+                <template v-if="item.attrs?.type === 'number'">
+                  <el-input
+                    v-model.number="queryParams[item.prop]"
+                    v-bind="item.attrs"
+                    @keyup.enter="handleQuery"
+                  />
+                </template>
+                <template v-else>
+                  <el-input
+                    v-model="queryParams[item.prop]"
+                    v-bind="item.attrs"
+                    @keyup.enter="handleQuery"
+                  />
+                </template>
+              </template>
+              <!-- Select 选择器 -->
+              <template v-else-if="item.type === 'select'">
+                <el-select v-model="queryParams[item.prop]" v-bind="item.attrs">
+                  <template v-for="option in item.options" :key="option.value">
+                    <el-option :label="option.label" :value="option.value" />
+                  </template>
+                </el-select>
+              </template>
+              <!-- TreeSelect 树形选择 -->
+              <template v-else-if="item.type === 'tree-select'">
+                <el-tree-select v-model="queryParams[item.prop]" v-bind="item.attrs" />
+              </template>
+              <!-- DatePicker 日期选择器 -->
+              <template v-else-if="item.type === 'date-picker'">
+                <el-date-picker v-model="queryParams[item.prop]" v-bind="item.attrs" />
+              </template>
+              <!-- Input 输入框 -->
+              <template v-else>
+                <template v-if="item.attrs?.type === 'number'">
+                  <el-input
+                    v-model.number="queryParams[item.prop]"
+                    v-bind="item.attrs"
+                    @keyup.enter="handleQuery"
+                  />
+                </template>
+                <template v-else>
+                  <el-input
+                    v-model="queryParams[item.prop]"
+                    v-bind="item.attrs"
+                    @keyup.enter="handleQuery"
+                  />
+                </template>
+              </template>
+            </el-form-item>
+          </template>
+          <el-form-item>
+            <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
+            <el-button icon="refresh" @click="handleReset">重置</el-button>
+          </el-form-item>
+        </el-form>
+        <!-- 列表 -->
+        <el-table
+          ref="tableRef"
+          v-loading="loading"
+          :data="pageData"
+          :border="true"
+          :max-height="250"
+          :row-key="pk"
+          :class="{ radio: !isMultiple }"
+          @select="handleSelect"
+          @select-all="handleSelectAll"
+        >
+          <template v-for="col in selectConfig.tableColumns" :key="col.prop">
+            <!-- 自定义 -->
+            <template v-if="col.templet === 'custom'">
+              <el-table-column v-bind="col">
+                <template #default="scope">
+                  <slot :name="col.slotName ?? col.prop" :prop="col.prop" v-bind="scope" />
+                </template>
+              </el-table-column>
+            </template>
+            <!-- 其他 -->
+            <template v-else>
+              <el-table-column v-bind="col" />
+            </template>
+          </template>
+        </el-table>
+        <!-- 分页 -->
+        <pagination
+          v-model:total="total"
+          v-model:page="queryParams.page_no"
+          v-model:limit="queryParams.page_size"
+          @pagination="handlePagination"
+        />
+        <div class="feedback">
+          <el-button type="primary" size="small" @click="handleConfirm">
+            {{ confirmText }}
+          </el-button>
+          <el-button size="small" @click="handleClear">清 空</el-button>
+          <el-button size="small" @click="handleClose">关 闭</el-button>
+        </div>
+      </div>
+    </el-popover>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, computed } from "vue";
+import { useResizeObserver } from "@vueuse/core";
+import type { FormInstance, PopoverProps, TableInstance } from "element-plus";
+
+// 对象类型
+export type IObject = Record<string, any>;
+// 定义接收的属性
+export interface ISelectConfig<T = any> {
+  // 宽度
+  width?: string;
+  // 占位符
+  placeholder?: string;
+  // popover组件属性
+  popover?: Partial<Omit<PopoverProps, "visible" | "v-model:visible">> & {
+    width?: number | string;
+  };
+  // 列表的网络请求函数(需返回promise)
+  indexAction: (_queryParams: T) => Promise<any>;
+  // 主键名(跨页选择必填,默认为id)
+  pk?: string;
+  // 多选
+  multiple?: boolean;
+  // 表单项
+  formItems: Array<{
+    // 组件类型(如input,select等)
+    type?: "input" | "select" | "tree-select" | "date-picker";
+    // 标签文本
+    label: string;
+    // 键名
+    prop: string;
+    // 组件属性
+    attrs?: IObject;
+    // 初始值
+    initialValue?: any;
+    // 可选项(适用于select组件)
+    options?: { label: string; value: any }[];
+  }>;
+  // 列选项
+  tableColumns: Array<{
+    type?: "default" | "selection" | "index" | "expand";
+    label?: string;
+    prop?: string;
+    width?: string | number;
+    [key: string]: any;
+  }>;
+}
+const props = withDefaults(
+  defineProps<{
+    selectConfig: ISelectConfig;
+    text?: string;
+  }>(),
+  {
+    text: "",
+  }
+);
+
+// 自定义事件
+const emit = defineEmits<{
+  confirmClick: [selection: any[]];
+  clearClick: [];
+}>();
+
+// 主键
+const pk = props.selectConfig.pk ?? "id";
+// 是否多选
+const isMultiple = props.selectConfig.multiple === true;
+// 宽度
+const width = props.selectConfig.width ?? "100%";
+// 占位符
+const placeholder = props.selectConfig.placeholder ?? "请选择";
+// 是否显示弹出框
+const popoverVisible = ref(false);
+// 加载状态
+const loading = ref(false);
+// 数据总数
+const total = ref(0);
+// 列表数据
+const pageData = ref<IObject[]>([]);
+// 每页条数
+const page_size = 10;
+// 搜索参数
+const queryParams = reactive<{
+  page_no: number;
+  page_size: number;
+  [key: string]: any;
+}>({
+  page_no: 1,
+  page_size,
+});
+
+// 计算popover的宽度
+const tableSelectRef = ref();
+const popoverWidth = ref(width);
+useResizeObserver(tableSelectRef, (entries) => {
+  popoverWidth.value = `${entries[0].contentRect.width}px`;
+});
+
+// 表单操作
+const formRef = ref<FormInstance>();
+// 初始化搜索条件
+for (const item of props.selectConfig.formItems) {
+  queryParams[item.prop] = item.initialValue ?? "";
+}
+// 重置操作
+function handleReset() {
+  formRef.value?.resetFields();
+  fetchPageData(true);
+}
+// 查询操作
+function handleQuery() {
+  fetchPageData(true);
+}
+
+// 获取分页数据
+function fetchPageData(isRestart = false) {
+  loading.value = true;
+  if (isRestart) {
+    queryParams.page_no = 1;
+    queryParams.page_size = page_size;
+  }
+  props.selectConfig
+    .indexAction(queryParams)
+    .then((data) => {
+      total.value = data.total;
+      pageData.value = data.list;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+// 列表操作
+const tableRef = ref<TableInstance>();
+// 数据刷新后是否保留选项
+for (const item of props.selectConfig.tableColumns) {
+  if (item.type === "selection") {
+    item.reserveSelection = true;
+    break;
+  }
+}
+// 选择
+const selectedItems = ref<IObject[]>([]);
+const confirmText = computed(() => {
+  return selectedItems.value.length > 0 ? `已选(${selectedItems.value.length})` : "确 定";
+});
+function handleSelect(selection: any[]) {
+  if (isMultiple || selection.length === 0) {
+    // 多选
+    selectedItems.value = selection;
+  } else {
+    // 单选
+    selectedItems.value = [selection[selection.length - 1]];
+    tableRef.value?.clearSelection();
+    tableRef.value?.toggleRowSelection(selectedItems.value[0], true);
+    tableRef.value?.setCurrentRow(selectedItems.value[0]);
+  }
+}
+function handleSelectAll(selection: any[]) {
+  if (isMultiple) {
+    selectedItems.value = selection;
+  }
+}
+// 分页
+function handlePagination() {
+  fetchPageData();
+}
+
+// 弹出框
+const isInit = ref(false);
+// 显示
+function handleShow() {
+  if (isInit.value === false) {
+    isInit.value = true;
+    fetchPageData();
+  }
+}
+// 确定
+function handleConfirm() {
+  if (selectedItems.value.length === 0) {
+    ElMessage.error("请选择数据");
+    return;
+  }
+  popoverVisible.value = false;
+  emit("confirmClick", selectedItems.value);
+}
+// 清空
+function handleClear() {
+  tableRef.value?.clearSelection();
+  selectedItems.value = [];
+  emit("clearClick");
+}
+// 关闭
+function handleClose() {
+  popoverVisible.value = false;
+}
+const popoverContentRef = ref();
+/* onClickOutside(tableSelectRef, () => (popoverVisible.value = false), {
+  ignore: [popoverContentRef],
+}); */
+</script>
+
+<style scoped lang="scss">
+.reference :deep(.el-input__wrapper),
+.reference :deep(.el-input__inner) {
+  cursor: pointer;
+}
+
+.feedback {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 6px;
+}
+// 隐藏全选按钮
+.radio :deep(.el-table__header th.el-table__cell:nth-child(1) .el-checkbox) {
+  visibility: hidden;
+}
+</style>
diff --git a/frontend/new-web/src/components/TextScroll/index.vue b/frontend/new-web/src/components/TextScroll/index.vue
new file mode 100644
index 00000000..dbe0745c
--- /dev/null
+++ b/frontend/new-web/src/components/TextScroll/index.vue
@@ -0,0 +1,427 @@
+<!--
+  TextScroll 组件 - 文本滚动公告
+  
+  功能：
+  - 支持水平方向文本滚动
+  - 提供多种预设样式（默认、成功、警告、危险、信息）
+  - 支持自定义滚动速度和方向
+  - 可选的打字机输入效果
+  - 鼠标悬停时暂停滚动
+  - 可选的关闭按钮
+-->
+<template>
+  <div
+    ref="containerRef"
+    class="text-scroll-container"
+    :class="[`text-scroll--${props.type}`]"
+    :typewriter="props.typewriter ? 'true' : undefined"
+  >
+    <!-- 左侧图标 -->
+    <div class="left-icon">
+      <el-icon><Bell /></el-icon>
+    </div>
+    <!-- 滚动内容包装器 -->
+    <div class="scroll-wrapper">
+      <div
+        ref="scrollContent"
+        class="text-scroll-content"
+        :class="{ scrolling: shouldScroll }"
+        :style="scrollStyle"
+      >
+        <!-- 滚动内容，复制两份以实现无缝滚动 -->
+        <div class="scroll-item" v-html="sanitizedContent" />
+        <div class="scroll-item" v-html="sanitizedContent" />
+      </div>
+    </div>
+    <!-- 可选的关闭按钮 -->
+    <div v-if="showClose" class="right-icon" @click="handleRightIconClick">
+      <el-icon><Close /></el-icon>
+    </div>
+  </div>
+</template>
+
+<!-- 使用案例 -->
+<!-- <div class="app-container">
+  <TextScroll text="这是一条基础的滚动公告，默认向左滚动。" typewriter />
+
+  <TextScroll type="success" text="这是一条成功类型的滚动公告" typewriter />
+
+  <TextScroll type="warning" text="这是一条警告类型的滚动公告" />
+
+  <TextScroll type="danger" text="这是一条危险类型的滚动公告" />
+
+  <TextScroll type="info" text="这是一条信息类型的滚动公告" />
+
+  <TextScroll text="这是一条速度较慢、向右滚动的公告" :speed="30" direction="right" show-close />
+</div> -->
+
+<script setup lang="ts">
+import { useElementHover } from "@vueuse/core";
+
+const emit = defineEmits(["close"]);
+
+interface Props {
+  /** 滚动文本内容（必填） */
+  text: string;
+  /** 滚动速度，数值越小滚动越慢 */
+  speed?: number;
+  /** 滚动方向：左侧或右侧 */
+  direction?: "left" | "right";
+  /** 样式类型 */
+  type?: "default" | "success" | "warning" | "danger" | "info";
+  /** 是否显示关闭按钮 */
+  showClose?: boolean;
+  /** 是否启用打字机效果 */
+  typewriter?: boolean;
+  /** 打字机效果的速度，数值越小打字越快 */
+  typewriterSpeed?: number;
+}
+
+// 定义组件属性及默认值
+const props = withDefaults(defineProps<Props>(), {
+  speed: 70,
+  direction: "left",
+  type: "default",
+  showClose: false,
+  typewriter: false,
+  typewriterSpeed: 100,
+});
+
+// 容器元素引用
+const containerRef = ref<HTMLElement | null>(null);
+// 使用 vueuse 的 useElementHover 检测鼠标悬停状态
+const isHovered = useElementHover(containerRef);
+// 滚动内容元素引用
+const scrollContent = ref<HTMLElement | null>(null);
+// 动画持续时间（秒）
+const animationDuration = ref(0);
+
+/**
+ * 打字机效果相关状态
+ */
+// 当前已显示的文本内容
+const currentText = ref("");
+// 打字机定时器引用，用于清理
+let typewriterTimer: ReturnType<typeof setTimeout> | null = null;
+// 打字机效果是否已完成
+const isTypewriterComplete = ref(false);
+
+/**
+ * 计算是否应该滚动
+ * 条件：
+ * 1. 鼠标未悬停在组件上
+ * 2. 如果启用了打字机效果，则需要等待打字效果完成
+ */
+const shouldScroll = computed(() => {
+  if (props.typewriter) {
+    return !isHovered.value && isTypewriterComplete.value;
+  }
+  return !isHovered.value;
+});
+
+/**
+ * 计算最终显示的内容
+ * 如果启用了打字机效果，则显示当前已打出的文本
+ * 否则直接显示完整文本
+ * 注意：内容支持 HTML，使用时需注意 XSS 风险
+ */
+const sanitizedContent = computed(() => (props.typewriter ? currentText.value : props.text));
+
+/**
+ * 计算滚动样式
+ * 包括动画持续时间、播放状态和方向
+ * 这些值通过 CSS 变量传递给样式
+ */
+const scrollStyle = computed(() => ({
+  "--animation-duration": `${animationDuration.value}s`,
+  "--animation-play-state": shouldScroll.value ? "running" : "paused",
+  "--animation-direction": props.direction === "left" ? "normal" : "reverse",
+}));
+
+/**
+ * 计算动画持续时间
+ * 根据内容宽度和设定的速度计算出合适的动画持续时间
+ * 内容越长或速度值越小，动画持续时间越长
+ */
+const calculateDuration = () => {
+  if (scrollContent.value) {
+    const contentWidth = scrollContent.value.scrollWidth / 2;
+    animationDuration.value = contentWidth / props.speed;
+  }
+};
+
+/**
+ * 处理关闭按钮点击事件
+ * 触发 close 事件，并直接销毁当前组件
+ */
+const handleRightIconClick = () => {
+  emit("close");
+  // 获取当前组件的DOM元素
+  if (containerRef.value) {
+    // 从DOM中移除元素
+    containerRef.value.remove();
+  }
+};
+
+/**
+ * 启动打字机效果
+ * 逐字显示文本内容，完成后设置状态以开始滚动
+ */
+const startTypewriter = () => {
+  let index = 0;
+  currentText.value = "";
+  isTypewriterComplete.value = false; // 重置状态
+
+  // 递归函数，逐字添加文本
+  const type = () => {
+    if (index < props.text.length) {
+      // 添加一个字符
+      currentText.value += props.text[index];
+      index++;
+      // 设置下一个字符的延迟
+      typewriterTimer = setTimeout(type, props.typewriterSpeed);
+    } else {
+      // 所有字符都已添加，设置完成状态
+      isTypewriterComplete.value = true;
+    }
+  };
+
+  // 开始打字过程
+  type();
+};
+
+onMounted(() => {
+  // 计算初始动画持续时间
+  calculateDuration();
+  // 监听窗口大小变化，重新计算动画持续时间
+  window.addEventListener("resize", calculateDuration);
+
+  // 如果启用了打字机效果，开始打字
+  if (props.typewriter) {
+    startTypewriter();
+  }
+});
+
+onUnmounted(() => {
+  // 移除事件监听
+  window.removeEventListener("resize", calculateDuration);
+  // 清除打字机定时器
+  if (typewriterTimer) {
+    clearTimeout(typewriterTimer);
+  }
+});
+
+/**
+ * 监听文本内容变化
+ * 当文本内容变化时，如果启用了打字机效果，重新开始打字
+ */
+watch(
+  () => props.text,
+  () => {
+    if (props.typewriter) {
+      // 清除现有定时器
+      if (typewriterTimer) {
+        clearTimeout(typewriterTimer);
+      }
+      // 重新开始打字效果
+      startTypewriter();
+    }
+  }
+);
+</script>
+
+<style scoped lang="scss">
+.text-scroll-container {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding-right: 16px;
+  overflow: hidden;
+  background-color: var(--el-color-primary-light-9) !important;
+  border: 1px solid var(--main-color);
+  border-radius: calc(var(--custom-radius) / 2 + 2px) !important;
+
+  .left-icon,
+  .right-icon {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 100%;
+    text-align: center;
+    background-color: var(--el-color-primary-light-9) !important;
+  }
+
+  .left-icon {
+    left: 0;
+  }
+
+  .right-icon {
+    right: 0;
+    cursor: pointer;
+    background-color: transparent !important;
+  }
+
+  .scroll-wrapper {
+    flex: 1;
+    margin-left: 34px;
+    overflow: hidden;
+  }
+
+  .text-scroll-content {
+    display: flex;
+    height: 34px;
+    line-height: 34px;
+    white-space: nowrap;
+    animation: scroll linear infinite;
+    animation-duration: var(--animation-duration);
+    animation-direction: var(--animation-direction);
+    animation-play-state: var(--animation-play-state);
+
+    .scroll-item {
+      display: inline-block;
+      min-width: 100%;
+      padding: 0 10px;
+      font-size: 14px;
+      color: var(--el-color-primary-light-2) !important;
+      text-align: left;
+      text-align: center;
+
+      :deep(a) {
+        color: var(--el-color-danger) !important;
+        text-decoration: none;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+
+  @keyframes scroll {
+    0% {
+      transform: translateX(0);
+    }
+
+    100% {
+      transform: translateX(-100%);
+    }
+  }
+
+  // 添加类型样式
+  &.text-scroll--default {
+    background-color: var(--el-color-primary-light-9) !important;
+    border-color: var(--el-color-primary);
+
+    .right-icon,
+    .left-icon i {
+      color: var(--el-color-primary) !important;
+    }
+
+    .scroll-item {
+      color: var(--el-color-primary) !important;
+    }
+  }
+
+  &.text-scroll--success {
+    background-color: var(--el-color-success-light-9) !important;
+    border-color: var(--el-color-success);
+
+    .left-icon {
+      background-color: var(--el-color-success-light-9) !important;
+
+      i {
+        color: var(--el-color-success);
+      }
+    }
+
+    .scroll-item {
+      color: var(--el-color-success) !important;
+    }
+  }
+
+  &.text-scroll--warning {
+    background-color: var(--el-color-warning-light-9) !important;
+    border-color: var(--el-color-warning);
+
+    .left-icon {
+      background-color: var(--el-color-warning-light-9) !important;
+
+      i {
+        color: var(--el-color-warning);
+      }
+    }
+
+    .scroll-item {
+      color: var(--el-color-warning) !important;
+    }
+  }
+
+  &.text-scroll--danger {
+    background-color: var(--el-color-danger-light-9) !important;
+    border-color: var(--el-color-danger);
+
+    .left-icon {
+      background-color: var(--el-color-danger-light-9) !important;
+
+      i {
+        color: var(--el-color-danger);
+      }
+    }
+
+    .scroll-item {
+      color: var(--el-color-danger) !important;
+    }
+  }
+
+  &.text-scroll--info {
+    background-color: var(--el-color-info-light-9) !important;
+    border-color: var(--el-color-info);
+
+    .left-icon {
+      background-color: var(--el-color-info-light-9) !important;
+
+      i {
+        color: var(--el-color-info);
+      }
+    }
+
+    .scroll-item {
+      color: var(--el-color-info) !important;
+    }
+  }
+}
+
+// 添加打字机效果的光标样式
+.text-scroll-content .scroll-item {
+  &::after {
+    content: "";
+    opacity: 0;
+    animation: none;
+  }
+}
+
+// 仅在启用打字机效果时显示光标
+.text-scroll-container[typewriter] .text-scroll-content .scroll-item::after {
+  content: "|";
+  opacity: 0;
+  animation: cursor 1s infinite;
+}
+
+@keyframes cursor {
+  0%,
+  100% {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
+</style>
diff --git a/frontend/new-web/src/components/ThemeSwitch/index.vue b/frontend/new-web/src/components/ThemeSwitch/index.vue
new file mode 100644
index 00000000..71baf173
--- /dev/null
+++ b/frontend/new-web/src/components/ThemeSwitch/index.vue
@@ -0,0 +1,40 @@
+<template>
+  <el-dropdown trigger="click" @command="handleDarkChange">
+    <el-icon :size="20">
+      <component :is="settingsStore.theme === ThemeMode.DARK ? Moon : Sunny" />
+    </el-icon>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item
+          v-for="item in theneList"
+          :key="item.value"
+          :command="item.value"
+          :disabled="settingsStore.theme === item.value"
+        >
+          <el-icon>
+            <component :is="item.component" />
+          </el-icon>
+          {{ item.label }}
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+<script setup lang="ts">
+import { useSettingsStore } from "@/store";
+import { ThemeMode } from "@/enums";
+import { Moon, Sunny, Monitor } from "@element-plus/icons-vue";
+
+const { t } = useI18n();
+const settingsStore = useSettingsStore();
+
+const theneList = [
+  { label: t("login.light"), value: ThemeMode.LIGHT, component: Sunny },
+  { label: t("login.dark"), value: ThemeMode.DARK, component: Moon },
+  { label: t("login.auto"), value: ThemeMode.AUTO, component: Monitor },
+];
+
+const handleDarkChange = (theme: ThemeMode) => {
+  settingsStore.updateTheme(theme);
+};
+</script>
diff --git a/frontend/new-web/src/components/Upload/SingleImageUpload.vue b/frontend/new-web/src/components/Upload/SingleImageUpload.vue
new file mode 100644
index 00000000..b0aa6de1
--- /dev/null
+++ b/frontend/new-web/src/components/Upload/SingleImageUpload.vue
@@ -0,0 +1,361 @@
+<!-- 单图上传组件 -->
+<template>
+  <div class="single-image-upload">
+    <el-upload
+      v-model:file-list="internalFileList"
+      class="single-upload"
+      list-type="picture-card"
+      :show-file-list="false"
+      :accept="props.accept"
+      :before-upload="handleBeforeUpload"
+      :http-request="handleUpload"
+      :on-success="onSuccess"
+      :on-error="onError"
+      :on-remove="handleDelete"
+      :disabled="props.disabled"
+    >
+      <template #default>
+        <template v-if="internalFileList && internalFileList.length > 0 && internalFileList[0].url">
+          <el-image
+            :key="internalFileList[0].url"
+            class="single-upload__image"
+            :src="internalFileList[0].url"
+            fit="cover"
+            :preview-src-list="props.enablePreview ? [internalFileList[0].url] : []"
+            :preview-teleported="true"
+            @click.stop="handleImageClick"
+          />
+          <el-icon
+            v-if="!props.disabled"
+            class="single-upload__delete-btn"
+            @click.stop="handleDelete"
+          >
+            <CircleCloseFilled />
+          </el-icon>
+        </template>
+        <template v-else>
+          <el-icon class="single-upload__add-btn">
+            <Plus />
+          </el-icon>
+        </template>
+      </template>
+    </el-upload>
+    <div v-if="props.showTip" class="el-upload__tip">
+      {{ props.tipText || `支持 ${props.accept} 格式，文件大小不超过 ${props.maxFileSize}MB` }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { UploadRawFile, UploadRequestOptions, ElMessage, type UploadUserFile } from "element-plus";
+import ParamsAPI from "@/api/module_system/params";
+
+const props = defineProps({
+  /**
+   * 请求携带的额外参数
+   */
+  data: {
+    type: Object,
+    default: () => {
+      return {};
+    },
+  },
+  /**
+   * 上传文件的参数名
+   */
+  name: {
+    type: String,
+    default: "file",
+  },
+  /**
+   * 最大文件大小（单位：M）
+   */
+  maxFileSize: {
+    type: Number,
+    default: 10,
+  },
+
+  /**
+   * 上传图片格式，默认支持所有图片(image/*)，指定格式示例：'.png,.jpg,.jpeg,.gif,.bmp'
+   */
+  accept: {
+    type: String,
+    default: "image/*",
+  },
+
+  /**
+   * 自定义样式，用于设置组件的宽度和高度等其他样式
+   */
+  style: {
+    type: Object,
+    default: () => {
+      return {
+        width: "150px",
+        height: "150px",
+      };
+    },
+  },
+
+  /**
+   * 是否禁用
+   */
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+
+  /**
+   * 是否显示提示信息
+   */
+  showTip: {
+    type: Boolean,
+    default: false,
+  },
+
+  /**
+   * 提示文本
+   */
+  tipText: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * 是否启用图片预览功能
+   */
+  enablePreview: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+// 接收字符串类型的modelValue，保持与现有代码的兼容性
+const modelValue = defineModel<string>({
+  default: "",
+});
+
+// 内部使用的文件列表
+const internalFileList = ref<UploadUserFile[]>([]);
+
+// 监听modelValue变化，同步到internalFileList
+watch(
+  () => modelValue.value,
+  (newVal) => {
+    if (newVal) {
+      internalFileList.value = [
+        {
+          name: newVal.split("/").pop() || "image",
+          url: newVal,
+        },
+      ];
+    } else {
+      internalFileList.value = [];
+    }
+  },
+  { immediate: true }
+);
+
+// 监听internalFileList变化，同步到modelValue
+watch(
+  () => internalFileList.value,
+  (newVal) => {
+    if (newVal && newVal.length > 0 && newVal[0].url) {
+      modelValue.value = newVal[0].url;
+    } else {
+      modelValue.value = "";
+    }
+  },
+  { deep: true }
+);
+
+/**
+ * 定义组件触发的事件
+ */
+const emit = defineEmits<{
+  (e: "success", fileInfo: UploadFilePath): void;
+  (e: "error", error: any): void;
+  (e: "input", value: string): void;
+  (e: "update:modelValue", value: string): void;
+}>();
+
+/**
+ * 限制用户上传文件的格式和大小
+ */
+function handleBeforeUpload(file: UploadRawFile) {
+  // 校验文件类型：虽然 accept 属性限制了用户在文件选择器中可选的文件类型，但仍需在上传时再次校验文件实际类型，确保符合 accept 的规则
+  const acceptTypes = props.accept.split(",").map((type) => type.trim());
+
+  // 检查文件格式是否符合 accept
+  const isValidType = acceptTypes.some((type) => {
+    if (type === "image/*") {
+      // 如果是 image/*，检查 MIME 类型是否以 "image/" 开头
+      return file.type.startsWith("image/");
+    } else if (type.startsWith(".")) {
+      // 如果是扩展名 (.png, .jpg)，检查文件名是否以指定扩展名结尾
+      return file.name.toLowerCase().endsWith(type);
+    } else {
+      // 如果是具体的 MIME 类型 (image/png, image/jpeg)，检查是否完全匹配
+      return file.type === type;
+    }
+  });
+
+  if (!isValidType) {
+    ElMessage.warning(`上传文件的格式不正确，仅支持：${props.accept}`);
+    return false;
+  }
+
+  // 限制文件大小
+  if (file.size > props.maxFileSize * 1024 * 1024) {
+    ElMessage.warning(`上传图片不能大于 ${props.maxFileSize}MB`);
+    return false;
+  }
+  return true;
+}
+
+/*
+ * 上传图片
+ */
+async function handleUpload(options: UploadRequestOptions) {
+  try {
+    const file = options.file;
+    const formData = new FormData();
+
+    formData.append(props.name, file);
+
+    // 处理附加参数
+    for (const [key, value] of Object.entries(props.data)) {
+      formData.append(key, String(value));
+    }
+
+    const response = await ParamsAPI.uploadFile(formData);
+
+    if (response.data.code === 0 && response.data) {
+      const fileInfo: UploadFilePath = response.data.data;
+      // 调用成功回调
+      onSuccess(fileInfo);
+      return fileInfo;
+    } else {
+      const errorMsg = response.data.msg || "上传失败";
+      ElMessage.error(errorMsg);
+      throw new Error(errorMsg);
+    }
+  } catch (error) {
+    onError(error instanceof Error ? error : new Error(String(error)));
+    throw error;
+  }
+}
+
+/**
+ * 删除图片
+ */
+function handleDelete() {
+  // 清空模型值并通知父组件
+  internalFileList.value = [];
+}
+
+/**
+ * 图片点击处理
+ * 阻止事件冒泡到上传组件，避免触发上传
+ */
+function handleImageClick(event: Event) {
+  // 阻止事件冒泡
+  event.stopPropagation();
+
+  // 如果启用了预览功能，则触发预览
+  if (
+    props.enablePreview &&
+    internalFileList.value &&
+    internalFileList.value.length > 0 &&
+    internalFileList.value[0].url
+  ) {
+    // Element Plus的el-image组件会自动处理preview-src-list的预览功能
+    // 这里只需要阻止冒泡即可
+  }
+}
+
+/**
+ * 上传成功回调
+ *
+ * @param fileInfo 上传成功后的文件信息
+ */
+const onSuccess = (fileInfo: UploadFilePath) => {
+  // 更新绑定的值为文件URL
+  const newFileList = [
+    {
+      name: fileInfo.file_name,
+      url: fileInfo.file_url,
+    },
+  ];
+
+  internalFileList.value = newFileList;
+
+  // 触发事件
+  emit("success", fileInfo);
+  emit("input", fileInfo.file_url);
+  emit("update:modelValue", fileInfo.file_url);
+};
+
+/**
+ * 上传失败回调
+ */
+const onError = (error: any) => {
+  console.error("图片上传失败:", error);
+  ElMessage.error("图片上传失败，请重试");
+  emit("error", error);
+};
+</script>
+
+<style scoped lang="scss">
+.single-image-upload {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.single-upload {
+  &__image {
+    cursor: pointer;
+    border-radius: 6px;
+  }
+
+  &__delete-btn {
+    position: absolute;
+    top: 1px;
+    right: 1px;
+    display: none;
+    font-size: 16px;
+    color: var(--el-color-warning);
+    cursor: pointer;
+    background: var(--el-bg-color-overlay);
+    border-radius: 100%;
+
+    &:hover {
+      color: var(--el-color-danger);
+    }
+  }
+
+  &__add-btn {
+    font-size: 28px;
+    color: var(--el-text-color-placeholder);
+  }
+}
+
+:deep(.el-upload--picture-card) {
+  position: relative;
+  width: v-bind("props.style.width ?? '150px'");
+  height: v-bind("props.style.height ?? '150px'");
+
+  &:hover {
+    .single-upload__delete-btn {
+      display: block;
+    }
+  }
+}
+
+.el-upload__tip {
+  margin-top: 7px;
+  font-size: 12px;
+  color: var(--el-text-color-regular);
+}
+</style>
diff --git a/frontend/new-web/src/components/WangEditor/index.vue b/frontend/new-web/src/components/WangEditor/index.vue
new file mode 100644
index 00000000..7c461e92
--- /dev/null
+++ b/frontend/new-web/src/components/WangEditor/index.vue
@@ -0,0 +1,107 @@
+<template>
+  <div style="z-index: 999; border: 1px solid var(--el-border-color)">
+    <!-- 工具栏 -->
+    <Toolbar
+      :editor="editorRef"
+      mode="mode"
+      :default-config="toolbarConfig"
+      style="border-bottom: 1px solid var(--el-border-color)"
+    />
+    <!-- 编辑器 -->
+    <Editor
+      v-model="modelValue"
+      :style="{ minHeight: height, overflowY: 'hidden' }"
+      :default-config="editorConfig"
+      mode="mode"
+      @on-created="handleCreated"
+      @on-change="handleChange"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import "@wangeditor-next/editor/dist/css/style.css";
+import { Toolbar, Editor } from "@wangeditor-next/editor-for-vue";
+import { IToolbarConfig, IEditorConfig } from "@wangeditor-next/editor";
+import ResourceAPI from "@/api/module_monitor/resource";
+
+// 上传图片回调函数类型
+type InsertFnType = (_url: string, _alt: string, _href: string) => void;
+
+const props = defineProps({
+  height: {
+    type: String,
+    default: "200px",
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  autoFocus: {
+    type: Boolean,
+    default: true,
+  },
+  scroll: {
+    type: Boolean,
+    default: true,
+  },
+});
+// 双向绑定
+const modelValue = defineModel("modelValue", {
+  type: String,
+  required: false,
+});
+
+// 编辑器实例，必须用 shallowRef，重要！
+const editorRef = shallowRef();
+
+// 工具栏配置
+const toolbarConfig = ref<Partial<IToolbarConfig>>({});
+
+// 编辑器配置 - 根据 props 动态生成配置
+const editorConfig = ref<Partial<IEditorConfig>>({
+  placeholder: "请输入内容...",
+  readOnly: props.readonly,
+  autoFocus: props.autoFocus,
+  scroll: props.scroll,
+  MENU_CONF: {
+    uploadImage: {
+      async customUpload(file: File, insertFn: InsertFnType) {
+        const formData = new FormData();
+        formData.append("file", file);
+
+        try {
+          const res = await ResourceAPI.uploadFile(formData);
+          const data = res.data.data;
+
+          insertFn(data.file_url, data.filename, data.file_url);
+        } catch (error: any) {
+          console.error("图片上传失败:", error);
+          ElMessage.error("图片上传失败");
+        }
+      },
+    } as any,
+  },
+});
+
+// 记录 editor 实例，重要！
+const handleCreated = (editor: any) => {
+  editorRef.value = editor;
+};
+
+// 处理内容变化 - 获取纯文本而不是HTML
+const handleChange = (editor: any) => {
+  editorRef.value = editor;
+  if (editorRef.value) {
+    const text = editorRef.value.getText();
+    modelValue.value = text;
+  }
+};
+
+// 组件销毁时，也及时销毁编辑器，重要！
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor == null) return;
+  editor.destroy();
+});
+</script>
diff --git a/frontend/new-web/src/components/business/comment-widget/index.vue b/frontend/new-web/src/components/business/comment-widget/index.vue
index 72b7c35b..ad7c3ced 100644
--- a/frontend/new-web/src/components/business/comment-widget/index.vue
+++ b/frontend/new-web/src/components/business/comment-widget/index.vue
@@ -20,13 +20,13 @@
       </ElFormItem>
       <ElFormItem>
         <div class="flex justify-end w-full">
-          <ElButton type="primary" @click="addComment"> 发布 </ElButton>
+          <ElButton type="primary" @click="addComment">发布</ElButton>
         </div>
       </ElFormItem>
     </ElForm>
 
     <ul>
-      <div class="pb-5 text-lg font-medium"> 评论 {{ comments.length }} </div>
+      <div class="pb-5 text-lg font-medium">评论 {{ comments.length }}</div>
       <CommentItem
         v-for="comment in comments.slice().reverse()"
         :key="comment.id"
@@ -41,71 +41,71 @@
 </template>
 
 <script setup lang="ts">
-  import { ref } from 'vue'
-  import CommentItem from './widget/CommentItem.vue'
-  import { commentList, Comment } from '@/mock/temp/commentDetail'
-  const comments = commentList
+import { ref } from "vue";
+import CommentItem from "./widget/CommentItem.vue";
+import { commentList, Comment } from "@/mock/temp/commentDetail";
+const comments = commentList;
 
-  const newComment = ref<Partial<Comment>>({
-    author: '',
-    content: ''
-  })
+const newComment = ref<Partial<Comment>>({
+  author: "",
+  content: "",
+});
 
-  const showReplyForm = ref<number | null>(null)
+const showReplyForm = ref<number | null>(null);
 
-  const addComment = () => {
-    if (!newComment.value.author?.trim() || !newComment.value.content?.trim()) {
-      ElMessage.warning('请填写完整的评论信息')
-      return
-    }
+const addComment = () => {
+  if (!newComment.value.author?.trim() || !newComment.value.content?.trim()) {
+    ElMessage.warning("请填写完整的评论信息");
+    return;
+  }
 
-    comments.value.push({
+  comments.value.push({
+    id: Date.now(),
+    author: newComment.value.author.trim(),
+    content: newComment.value.content.trim(),
+    timestamp: new Date().toISOString(),
+    replies: [],
+  });
+
+  newComment.value.author = "";
+  newComment.value.content = "";
+  ElMessage.success("评论发布成功");
+};
+
+const addReply = (commentId: number, replyAuthor: string, replyContent: string) => {
+  if (!replyAuthor?.trim() || !replyContent?.trim()) {
+    ElMessage.warning("请填写完整的回复信息");
+    return;
+  }
+
+  const comment = findComment(comments.value, commentId);
+  if (comment) {
+    comment.replies.push({
       id: Date.now(),
-      author: newComment.value.author.trim(),
-      content: newComment.value.content.trim(),
+      author: replyAuthor.trim(),
+      content: replyContent.trim(),
       timestamp: new Date().toISOString(),
-      replies: []
-    })
-
-    newComment.value.author = ''
-    newComment.value.content = ''
-    ElMessage.success('评论发布成功')
+      replies: [],
+    });
+    showReplyForm.value = null;
+    ElMessage.success("回复发布成功");
   }
+};
 
-  const addReply = (commentId: number, replyAuthor: string, replyContent: string) => {
-    if (!replyAuthor?.trim() || !replyContent?.trim()) {
-      ElMessage.warning('请填写完整的回复信息')
-      return
+const toggleReply = (commentId: number) => {
+  showReplyForm.value = showReplyForm.value === commentId ? null : commentId;
+};
+
+const findComment = (comments: Comment[], commentId: number): Comment | undefined => {
+  for (const comment of comments) {
+    if (comment.id === commentId) {
+      return comment;
     }
-
-    const comment = findComment(comments.value, commentId)
-    if (comment) {
-      comment.replies.push({
-        id: Date.now(),
-        author: replyAuthor.trim(),
-        content: replyContent.trim(),
-        timestamp: new Date().toISOString(),
-        replies: []
-      })
-      showReplyForm.value = null
-      ElMessage.success('回复发布成功')
+    const found = findComment(comment.replies, commentId);
+    if (found) {
+      return found;
     }
   }
-
-  const toggleReply = (commentId: number) => {
-    showReplyForm.value = showReplyForm.value === commentId ? null : commentId
-  }
-
-  const findComment = (comments: Comment[], commentId: number): Comment | undefined => {
-    for (const comment of comments) {
-      if (comment.id === commentId) {
-        return comment
-      }
-      const found = findComment(comment.replies, commentId)
-      if (found) {
-        return found
-      }
-    }
-    return undefined
-  }
+  return undefined;
+};
 </script>
diff --git a/frontend/new-web/src/components/business/comment-widget/widget/CommentItem.vue b/frontend/new-web/src/components/business/comment-widget/widget/CommentItem.vue
index f28979a7..813e868d 100644
--- a/frontend/new-web/src/components/business/comment-widget/widget/CommentItem.vue
+++ b/frontend/new-web/src/components/business/comment-widget/widget/CommentItem.vue
@@ -58,64 +58,64 @@
 </template>
 
 <script setup lang="ts">
-  import AppConfig from '@/config'
-  import { ref } from 'vue'
+import AppConfig from "@/config";
+import { ref } from "vue";
 
-  interface Comment {
-    id: number
-    author: string
-    content: string
-    timestamp: string
-    replies: Comment[]
+interface Comment {
+  id: number;
+  author: string;
+  content: string;
+  timestamp: string;
+  replies: Comment[];
+}
+
+const props = defineProps<{
+  comment: Comment;
+  showReplyForm: number | null;
+}>();
+
+const emit = defineEmits<{
+  (event: "toggle-reply", commentId: number): void;
+  (event: "add-reply", commentId: number, replyAuthor: string, replyContent: string): void;
+}>();
+
+const replyAuthor = ref("");
+const replyContent = ref("");
+
+const toggleReply = (commentId: number) => {
+  emit("toggle-reply", commentId);
+};
+
+const addReply = (commentId: number, author: string, content: string) => {
+  emit("add-reply", commentId, author, content);
+  replyAuthor.value = "";
+  replyContent.value = "";
+};
+const handleSubmit = () => {
+  if (!replyAuthor.value.trim() || !replyContent.value.trim()) {
+    return;
   }
+  emit("add-reply", props.comment.id, replyAuthor.value, replyContent.value);
+  replyAuthor.value = "";
+  replyContent.value = "";
+};
 
-  const props = defineProps<{
-    comment: Comment
-    showReplyForm: number | null
-  }>()
+const formatDate = (timestamp: string) => {
+  const date = new Date(timestamp);
+  return date.toLocaleString();
+};
 
-  const emit = defineEmits<{
-    (event: 'toggle-reply', commentId: number): void
-    (event: 'add-reply', commentId: number, replyAuthor: string, replyContent: string): void
-  }>()
+let lastColor: string | null = null;
 
-  const replyAuthor = ref('')
-  const replyContent = ref('')
+const randomColor = () => {
+  let newColor: string;
 
-  const toggleReply = (commentId: number) => {
-    emit('toggle-reply', commentId)
-  }
+  do {
+    const index = Math.floor(Math.random() * AppConfig.systemMainColor.length);
+    newColor = AppConfig.systemMainColor[index];
+  } while (newColor === lastColor);
 
-  const addReply = (commentId: number, author: string, content: string) => {
-    emit('add-reply', commentId, author, content)
-    replyAuthor.value = ''
-    replyContent.value = ''
-  }
-  const handleSubmit = () => {
-    if (!replyAuthor.value.trim() || !replyContent.value.trim()) {
-      return
-    }
-    emit('add-reply', props.comment.id, replyAuthor.value, replyContent.value)
-    replyAuthor.value = ''
-    replyContent.value = ''
-  }
-
-  const formatDate = (timestamp: string) => {
-    const date = new Date(timestamp)
-    return date.toLocaleString()
-  }
-
-  let lastColor: string | null = null
-
-  const randomColor = () => {
-    let newColor: string
-
-    do {
-      const index = Math.floor(Math.random() * AppConfig.systemMainColor.length)
-      newColor = AppConfig.systemMainColor[index]
-    } while (newColor === lastColor)
-
-    lastColor = newColor
-    return newColor
-  }
+  lastColor = newColor;
+  return newColor;
+};
 </script>
diff --git a/frontend/new-web/src/components/core/banners/art-basic-banner/index.vue b/frontend/new-web/src/components/core/banners/art-basic-banner/index.vue
index 65b47e41..7003a26a 100644
--- a/frontend/new-web/src/components/core/banners/art-basic-banner/index.vue
+++ b/frontend/new-web/src/components/core/banners/art-basic-banner/index.vue
@@ -16,7 +16,7 @@
           top: '-60px',
           left: `${meteor.x}%`,
           animationDuration: `${meteor.speed}s`,
-          animationDelay: `${meteor.delay}s`
+          animationDelay: `${meteor.delay}s`,
         }"
       ></span>
     </div>
@@ -29,9 +29,9 @@
 
       <!-- subtitle slot -->
       <slot name="subtitle">
-        <p v-if="subtitle" class="basic-banner__subtitle" :style="{ color: subtitleColor }">{{
-          subtitle
-        }}</p>
+        <p v-if="subtitle" class="basic-banner__subtitle" :style="{ color: subtitleColor }">
+          {{ subtitle }}
+        </p>
       </slot>
 
       <!-- button slot -->
@@ -42,7 +42,7 @@
           :style="{
             backgroundColor: buttonColor,
             color: buttonTextColor,
-            borderRadius: buttonRadius
+            borderRadius: buttonRadius,
           }"
           @click.stop="emit('buttonClick')"
         >
@@ -67,277 +67,277 @@
 </template>
 
 <script setup lang="ts">
-  import { onMounted, ref, computed } from 'vue'
-  import { useSettingStore } from '@/store/modules/setting'
-  const settingStore = useSettingStore()
-  const { isDark } = storeToRefs(settingStore)
+import { onMounted, ref, computed } from "vue";
+import { useSettingsStore } from "@/store/modules/setting.store";
+const settingStore = useSettingsStore();
+const { isDark } = storeToRefs(settingStore);
 
-  defineOptions({ name: 'ArtBasicBanner' })
+defineOptions({ name: "ArtBasicBanner" });
 
-  // 流星对象接口定义
-  interface Meteor {
-    /** 流星的水平位置(百分比) */
-    x: number
-    /** 流星划过的速度 */
-    speed: number
-    /** 流星出现的延迟时间 */
-    delay: number
+// 流星对象接口定义
+interface Meteor {
+  /** 流星的水平位置(百分比) */
+  x: number;
+  /** 流星划过的速度 */
+  speed: number;
+  /** 流星出现的延迟时间 */
+  delay: number;
+}
+
+// 按钮配置接口定义
+interface ButtonConfig {
+  /** 是否启用按钮 */
+  show: boolean;
+  /** 按钮文本 */
+  text: string;
+  /** 按钮背景色 */
+  color?: string;
+  /** 按钮文字颜色 */
+  textColor?: string;
+  /** 按钮圆角大小 */
+  radius?: string;
+}
+
+// 流星效果配置接口定义
+interface MeteorConfig {
+  /** 是否启用流星效果 */
+  enabled: boolean;
+  /** 流星数量 */
+  count?: number;
+}
+
+// 背景图片配置接口定义
+interface ImageConfig {
+  /** 图片源地址 */
+  src: string;
+  /** 图片宽度 */
+  width?: string;
+  /** 距底部距离 */
+  bottom?: string;
+  /** 距右侧距离 */
+  right?: string; // 距右侧距离
+}
+
+// 组件属性接口定义
+interface Props {
+  /** 横幅高度 */
+  height?: string;
+  /** 标题文本 */
+  title?: string;
+  /** 副标题文本 */
+  subtitle?: string;
+  /** 盒子样式 */
+  boxStyle?: string;
+  /** 是否显示装饰效果 */
+  decoration?: boolean;
+  /** 按钮配置 */
+  buttonConfig?: ButtonConfig;
+  /** 流星配置 */
+  meteorConfig?: MeteorConfig;
+  /** 图片配置 */
+  imageConfig?: ImageConfig;
+  /** 标题颜色 */
+  titleColor?: string;
+  /** 副标题颜色 */
+  subtitleColor?: string;
+}
+
+// 组件属性默认值设置
+const props = withDefaults(defineProps<Props>(), {
+  height: "11rem",
+  titleColor: "white",
+  subtitleColor: "white",
+  boxStyle: "!bg-theme/60",
+  decoration: true,
+  buttonConfig: () => ({
+    show: true,
+    text: "查看",
+    color: "#fff",
+    textColor: "#333",
+    radius: "6px",
+  }),
+  meteorConfig: () => ({ enabled: false, count: 10 }),
+  imageConfig: () => ({ src: "", width: "12rem", bottom: "-3rem", right: "0" }),
+});
+
+// 定义组件事件
+const emit = defineEmits<{
+  (e: "click"): void; // 整体点击事件
+  (e: "buttonClick"): void; // 按钮点击事件
+}>();
+
+// 计算按钮样式属性
+const buttonColor = computed(() => props.buttonConfig?.color ?? "#fff");
+const buttonTextColor = computed(() => props.buttonConfig?.textColor ?? "#333");
+const buttonRadius = computed(() => props.buttonConfig?.radius ?? "6px");
+
+// 流星数据初始化
+const meteors = ref<Meteor[]>([]);
+onMounted(() => {
+  if (props.meteorConfig?.enabled) {
+    meteors.value = generateMeteors(props.meteorConfig?.count ?? 10);
   }
+});
 
-  // 按钮配置接口定义
-  interface ButtonConfig {
-    /** 是否启用按钮 */
-    show: boolean
-    /** 按钮文本 */
-    text: string
-    /** 按钮背景色 */
-    color?: string
-    /** 按钮文字颜色 */
-    textColor?: string
-    /** 按钮圆角大小 */
-    radius?: string
-  }
-
-  // 流星效果配置接口定义
-  interface MeteorConfig {
-    /** 是否启用流星效果 */
-    enabled: boolean
-    /** 流星数量 */
-    count?: number
-  }
-
-  // 背景图片配置接口定义
-  interface ImageConfig {
-    /** 图片源地址 */
-    src: string
-    /** 图片宽度 */
-    width?: string
-    /** 距底部距离 */
-    bottom?: string
-    /** 距右侧距离 */
-    right?: string // 距右侧距离
-  }
-
-  // 组件属性接口定义
-  interface Props {
-    /** 横幅高度 */
-    height?: string
-    /** 标题文本 */
-    title?: string
-    /** 副标题文本 */
-    subtitle?: string
-    /** 盒子样式 */
-    boxStyle?: string
-    /** 是否显示装饰效果 */
-    decoration?: boolean
-    /** 按钮配置 */
-    buttonConfig?: ButtonConfig
-    /** 流星配置 */
-    meteorConfig?: MeteorConfig
-    /** 图片配置 */
-    imageConfig?: ImageConfig
-    /** 标题颜色 */
-    titleColor?: string
-    /** 副标题颜色 */
-    subtitleColor?: string
-  }
-
-  // 组件属性默认值设置
-  const props = withDefaults(defineProps<Props>(), {
-    height: '11rem',
-    titleColor: 'white',
-    subtitleColor: 'white',
-    boxStyle: '!bg-theme/60',
-    decoration: true,
-    buttonConfig: () => ({
-      show: true,
-      text: '查看',
-      color: '#fff',
-      textColor: '#333',
-      radius: '6px'
-    }),
-    meteorConfig: () => ({ enabled: false, count: 10 }),
-    imageConfig: () => ({ src: '', width: '12rem', bottom: '-3rem', right: '0' })
-  })
-
-  // 定义组件事件
-  const emit = defineEmits<{
-    (e: 'click'): void // 整体点击事件
-    (e: 'buttonClick'): void // 按钮点击事件
-  }>()
-
-  // 计算按钮样式属性
-  const buttonColor = computed(() => props.buttonConfig?.color ?? '#fff')
-  const buttonTextColor = computed(() => props.buttonConfig?.textColor ?? '#333')
-  const buttonRadius = computed(() => props.buttonConfig?.radius ?? '6px')
-
-  // 流星数据初始化
-  const meteors = ref<Meteor[]>([])
-  onMounted(() => {
-    if (props.meteorConfig?.enabled) {
-      meteors.value = generateMeteors(props.meteorConfig?.count ?? 10)
-    }
-  })
-
-  /**
-   * 生成流星数据数组
-   * @param count 流星数量
-   * @returns 流星数据数组
-   */
-  function generateMeteors(count: number): Meteor[] {
-    // 计算每个流星的区域宽度
-    const segmentWidth = 100 / count
-    return Array.from({ length: count }, (_, index) => {
-      // 计算流星起始位置
-      const segmentStart = index * segmentWidth
-      // 在区域内随机生成x坐标
-      const x = segmentStart + Math.random() * segmentWidth
-      // 随机决定流星速度快慢
-      const isSlow = Math.random() > 0.5
-      return {
-        x,
-        speed: isSlow ? 5 + Math.random() * 3 : 2 + Math.random() * 2,
-        delay: Math.random() * 5
-      }
-    })
-  }
+/**
+ * 生成流星数据数组
+ * @param count 流星数量
+ * @returns 流星数据数组
+ */
+function generateMeteors(count: number): Meteor[] {
+  // 计算每个流星的区域宽度
+  const segmentWidth = 100 / count;
+  return Array.from({ length: count }, (_, index) => {
+    // 计算流星起始位置
+    const segmentStart = index * segmentWidth;
+    // 在区域内随机生成x坐标
+    const x = segmentStart + Math.random() * segmentWidth;
+    // 随机决定流星速度快慢
+    const isSlow = Math.random() > 0.5;
+    return {
+      x,
+      speed: isSlow ? 5 + Math.random() * 3 : 2 + Math.random() * 2,
+      delay: Math.random() * 5,
+    };
+  });
+}
 </script>
 
 <style lang="scss" scoped>
-  .basic-banner {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    padding: 0 2rem;
-    overflow: hidden;
-    color: white;
-    border-radius: calc(var(--custom-radius) + 2px) !important;
+.basic-banner {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0 2rem;
+  overflow: hidden;
+  color: white;
+  border-radius: calc(var(--custom-radius) + 2px) !important;
 
-    &__content {
-      position: relative;
-      z-index: 1;
+  &__content {
+    position: relative;
+    z-index: 1;
+  }
+
+  &__title {
+    margin: 0 0 0.5rem;
+    font-size: 1.5rem;
+    font-weight: 600;
+  }
+
+  &__subtitle {
+    position: relative;
+    z-index: 10;
+    margin: 0 0 1.5rem;
+    font-size: 0.9rem;
+    opacity: 0.9;
+  }
+
+  &__button {
+    box-sizing: border-box;
+    display: inline-block;
+    min-width: 80px;
+    height: var(--el-component-custom-height);
+    padding: 0 12px;
+    font-size: 14px;
+    line-height: var(--el-component-custom-height);
+    text-align: center;
+    cursor: pointer;
+    user-select: none;
+    transition: all 0.3s;
+
+    &:hover {
+      opacity: 0.8;
     }
+  }
+
+  &__background-image {
+    position: absolute;
+    right: 0;
+    bottom: -3rem;
+    z-index: 0;
+    width: 12rem;
+  }
+
+  &.has-decoration::after {
+    position: absolute;
+    right: -10%;
+    bottom: -20%;
+    width: 60%;
+    height: 140%;
+    content: "";
+    background: rgb(255 255 255 / 10%);
+    border-radius: 30%;
+    transform: rotate(-20deg);
+  }
+
+  &__meteors {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+
+    .meteor {
+      position: absolute;
+      width: 2px;
+      height: 60px;
+      background: linear-gradient(
+        to top,
+        rgb(255 255 255 / 40%),
+        rgb(255 255 255 / 10%),
+        transparent
+      );
+      opacity: 0;
+      transform-origin: top left;
+      animation-name: meteor-fall;
+      animation-timing-function: linear;
+      animation-iteration-count: infinite;
+
+      &::before {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        width: 2px;
+        height: 2px;
+        content: "";
+        background: rgb(255 255 255 / 50%);
+      }
+    }
+  }
+}
+
+@keyframes meteor-fall {
+  0% {
+    opacity: 1;
+    transform: translate(0, -60px) rotate(-45deg);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate(400px, 340px) rotate(-45deg);
+  }
+}
+
+@media (width <= 640px) {
+  .basic-banner {
+    box-sizing: border-box;
+    justify-content: flex-start;
+    padding: 16px;
 
     &__title {
-      margin: 0 0 0.5rem;
-      font-size: 1.5rem;
-      font-weight: 600;
-    }
-
-    &__subtitle {
-      position: relative;
-      z-index: 10;
-      margin: 0 0 1.5rem;
-      font-size: 0.9rem;
-      opacity: 0.9;
-    }
-
-    &__button {
-      box-sizing: border-box;
-      display: inline-block;
-      min-width: 80px;
-      height: var(--el-component-custom-height);
-      padding: 0 12px;
-      font-size: 14px;
-      line-height: var(--el-component-custom-height);
-      text-align: center;
-      cursor: pointer;
-      user-select: none;
-      transition: all 0.3s;
-
-      &:hover {
-        opacity: 0.8;
-      }
+      font-size: 1.4rem;
     }
 
     &__background-image {
-      position: absolute;
-      right: 0;
-      bottom: -3rem;
-      z-index: 0;
-      width: 12rem;
+      display: none;
     }
 
     &.has-decoration::after {
-      position: absolute;
-      right: -10%;
-      bottom: -20%;
-      width: 60%;
-      height: 140%;
-      content: '';
-      background: rgb(255 255 255 / 10%);
-      border-radius: 30%;
-      transform: rotate(-20deg);
-    }
-
-    &__meteors {
-      position: absolute;
-      top: 0;
-      left: 0;
-      z-index: 0;
-      width: 100%;
-      height: 100%;
-      pointer-events: none;
-
-      .meteor {
-        position: absolute;
-        width: 2px;
-        height: 60px;
-        background: linear-gradient(
-          to top,
-          rgb(255 255 255 / 40%),
-          rgb(255 255 255 / 10%),
-          transparent
-        );
-        opacity: 0;
-        transform-origin: top left;
-        animation-name: meteor-fall;
-        animation-timing-function: linear;
-        animation-iteration-count: infinite;
-
-        &::before {
-          position: absolute;
-          right: 0;
-          bottom: 0;
-          width: 2px;
-          height: 2px;
-          content: '';
-          background: rgb(255 255 255 / 50%);
-        }
-      }
-    }
-  }
-
-  @keyframes meteor-fall {
-    0% {
-      opacity: 1;
-      transform: translate(0, -60px) rotate(-45deg);
-    }
-
-    100% {
-      opacity: 0;
-      transform: translate(400px, 340px) rotate(-45deg);
-    }
-  }
-
-  @media (width <= 640px) {
-    .basic-banner {
-      box-sizing: border-box;
-      justify-content: flex-start;
-      padding: 16px;
-
-      &__title {
-        font-size: 1.4rem;
-      }
-
-      &__background-image {
-        display: none;
-      }
-
-      &.has-decoration::after {
-        display: none;
-      }
+      display: none;
     }
   }
+}
 </style>
diff --git a/frontend/new-web/src/components/core/banners/art-card-banner/index.vue b/frontend/new-web/src/components/core/banners/art-card-banner/index.vue
index 8a5f9d41..99ba8ae2 100644
--- a/frontend/new-web/src/components/core/banners/art-card-banner/index.vue
+++ b/frontend/new-web/src/components/core/banners/art-card-banner/index.vue
@@ -15,7 +15,7 @@
           class="inline-block h-9 px-3 text-sm/9 c-p select-none rounded-md border border-g-300"
           :style="{
             backgroundColor: cancelButton?.color,
-            color: cancelButton?.textColor
+            color: cancelButton?.textColor,
           }"
           @click="handleCancel"
         >
@@ -35,80 +35,80 @@
 </template>
 
 <script setup lang="ts">
-  // 导入默认图标
-  import defaultIcon from '@imgs/3d/icon1.webp'
+// 导入默认图标
+import defaultIcon from "@imgs/3d/icon1.webp";
 
-  defineOptions({ name: 'ArtCardBanner' })
+defineOptions({ name: "ArtCardBanner" });
 
-  // 定义卡片横幅组件的属性接口
-  interface CardBannerProps {
-    /** 高度 */
-    height?: string
-    /** 图片路径 */
-    image?: string
-    /** 标题文本 */
-    title: string
-    /** 描述文本 */
-    description: string
-    /** 主按钮配置 */
-    button?: {
-      /** 是否显示 */
-      show?: boolean
-      /** 按钮文本 */
-      text?: string
-      /** 背景颜色 */
-      color?: string
-      /** 文字颜色 */
-      textColor?: string
-    }
-    /** 取消按钮配置 */
-    cancelButton?: {
-      /** 是否显示 */
-      show?: boolean
-      /** 按钮文本 */
-      text?: string
-      /** 背景颜色 */
-      color?: string
-      /** 文字颜色 */
-      textColor?: string
-    }
-  }
+// 定义卡片横幅组件的属性接口
+interface CardBannerProps {
+  /** 高度 */
+  height?: string;
+  /** 图片路径 */
+  image?: string;
+  /** 标题文本 */
+  title: string;
+  /** 描述文本 */
+  description: string;
+  /** 主按钮配置 */
+  button?: {
+    /** 是否显示 */
+    show?: boolean;
+    /** 按钮文本 */
+    text?: string;
+    /** 背景颜色 */
+    color?: string;
+    /** 文字颜色 */
+    textColor?: string;
+  };
+  /** 取消按钮配置 */
+  cancelButton?: {
+    /** 是否显示 */
+    show?: boolean;
+    /** 按钮文本 */
+    text?: string;
+    /** 背景颜色 */
+    color?: string;
+    /** 文字颜色 */
+    textColor?: string;
+  };
+}
 
-  // 定义组件属性默认值
-  withDefaults(defineProps<CardBannerProps>(), {
-    height: '24rem',
-    image: defaultIcon,
-    title: '',
-    description: '',
-    // 主按钮默认配置
-    button: () => ({
-      show: true,
-      text: '查看详情',
-      color: 'var(--theme-color)',
-      textColor: '#fff'
-    }),
-    // 取消按钮默认配置
-    cancelButton: () => ({
-      show: false,
-      text: '取消',
-      color: '#f5f5f5',
-      textColor: '#666'
-    })
-  })
+// 定义组件属性默认值
+withDefaults(defineProps<CardBannerProps>(), {
+  height: "24rem",
+  image: defaultIcon,
+  title: "",
+  description: "",
+  // 主按钮默认配置
+  button: () => ({
+    show: true,
+    text: "查看详情",
+    color: "var(--theme-color)",
+    textColor: "#fff",
+  }),
+  // 取消按钮默认配置
+  cancelButton: () => ({
+    show: false,
+    text: "取消",
+    color: "#f5f5f5",
+    textColor: "#666",
+  }),
+});
 
-  // 定义组件事件
-  const emit = defineEmits<{
-    (e: 'click'): void // 主按钮点击事件
-    (e: 'cancel'): void // 取消按钮点击事件
-  }>()
+// 定义组件事件
+const emit = defineEmits<{
+  (e: "click"): void; // 主按钮点击事件
+  (e: "cancel"): void; // 取消按钮点击事件
+}>();
 
-  // 主按钮点击处理函数
-  const handleClick = () => {
-    emit('click')
-  }
+// 主按钮点击处理函数
+const handleClick = () => {
+  emit("click");
+};
 
-  // 取消按钮点击处理函数
-  const handleCancel = () => {
-    emit('cancel')
-  }
+// 取消按钮点击处理函数
+const handleCancel = () => {
+  emit("cancel");
+};
 </script>
diff --git a/frontend/new-web/src/components/core/base/art-back-to-top/index.vue b/frontend/new-web/src/components/core/base/art-back-to-top/index.vue
index 6f8da619..02fb5fad 100644
--- a/frontend/new-web/src/components/core/base/art-back-to-top/index.vue
+++ b/frontend/new-web/src/components/core/base/art-back-to-top/index.vue
@@ -19,22 +19,22 @@
 </template>
 
 <script setup lang="ts">
-  import { useCommon } from '@/hooks/core/useCommon'
+import { useCommon } from "@/hooks/core/useCommon";
 
-  defineOptions({ name: 'ArtBackToTop' })
+defineOptions({ name: "ArtBackToTop" });
 
-  const { scrollToTop } = useCommon()
+const { scrollToTop } = useCommon();
 
-  const showButton = ref(false)
-  const scrollThreshold = 300
+const showButton = ref(false);
+const scrollThreshold = 300;
 
-  onMounted(() => {
-    const scrollContainer = document.getElementById('app-main')
-    if (scrollContainer) {
-      const { y } = useScroll(scrollContainer)
-      watch(y, (newY: number) => {
-        showButton.value = newY > scrollThreshold
-      })
-    }
-  })
+onMounted(() => {
+  const scrollContainer = document.getElementById("app-main");
+  if (scrollContainer) {
+    const { y } = useScroll(scrollContainer);
+    watch(y, (newY: number) => {
+      showButton.value = newY > scrollThreshold;
+    });
+  }
+});
 </script>
diff --git a/frontend/new-web/src/components/core/base/art-logo/index.vue b/frontend/new-web/src/components/core/base/art-logo/index.vue
index 8bc83095..6f9fafb9 100644
--- a/frontend/new-web/src/components/core/base/art-logo/index.vue
+++ b/frontend/new-web/src/components/core/base/art-logo/index.vue
@@ -1,21 +1,53 @@
-<!-- 系统logo -->
+<!-- 系统 logo：优先使用接口 sys_web_logo，缺省用内置图 -->
 <template>
   <div class="flex-cc">
-    <img :style="logoStyle" src="@imgs/common/logo.webp" alt="logo" class="w-full h-full" />
+    <img
+      :style="logoStyle"
+      :src="resolvedSrc"
+      alt="logo"
+      class="h-full w-full object-contain"
+      @error="onImgError"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-  defineOptions({ name: 'ArtLogo' })
+import defaultLogoUrl from "@/assets/icons/vite.svg";
 
-  interface Props {
-    /** logo 大小 */
-    size?: number | string
+defineOptions({ name: "ArtLogo" });
+
+interface Props {
+  /** logo 大小 */
+  size?: number | string;
+  /** 自定义地址（如配置接口 sys_web_logo）；不传则用默认资源 */
+  src?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 36,
+  src: undefined,
+});
+
+const fallbackTriggered = ref(false);
+
+const resolvedSrc = computed(() => {
+  if (fallbackTriggered.value) return defaultLogoUrl;
+  const custom = props.src?.trim();
+  return custom || defaultLogoUrl;
+});
+
+function onImgError() {
+  if (!fallbackTriggered.value) {
+    fallbackTriggered.value = true;
   }
+}
 
-  const props = withDefaults(defineProps<Props>(), {
-    size: 36
-  })
+const logoStyle = computed(() => ({ width: `${props.size}px`, height: `${props.size}px` }));
 
-  const logoStyle = computed(() => ({ width: `${props.size}px` }))
+watch(
+  () => props.src,
+  () => {
+    fallbackTriggered.value = false;
+  }
+);
 </script>
diff --git a/frontend/new-web/src/components/core/base/art-svg-icon/index.vue b/frontend/new-web/src/components/core/base/art-svg-icon/index.vue
index 0bfcd0c0..fdfa7dca 100644
--- a/frontend/new-web/src/components/core/base/art-svg-icon/index.vue
+++ b/frontend/new-web/src/components/core/base/art-svg-icon/index.vue
@@ -4,21 +4,21 @@
 </template>
 
 <script setup lang="ts">
-  import { Icon } from '@iconify/vue'
+import { Icon } from "@iconify/vue";
 
-  defineOptions({ name: 'ArtSvgIcon', inheritAttrs: false })
+defineOptions({ name: "ArtSvgIcon", inheritAttrs: false });
 
-  interface Props {
-    /** Iconify icon name */
-    icon?: string
-  }
+interface Props {
+  /** Iconify icon name */
+  icon?: string;
+}
 
-  defineProps<Props>()
+defineProps<Props>();
 
-  const attrs = useAttrs()
+const attrs = useAttrs();
 
-  const bindAttrs = computed<{ class: string; style: string }>(() => ({
-    class: (attrs.class as string) || '',
-    style: (attrs.style as string) || ''
-  }))
+const bindAttrs = computed<{ class: string; style: string }>(() => ({
+  class: (attrs.class as string) || "",
+  style: (attrs.style as string) || "",
+}));
 </script>
diff --git a/frontend/new-web/src/components/core/cards/art-bar-chart-card/index.vue b/frontend/new-web/src/components/core/cards/art-bar-chart-card/index.vue
index 6815c2b6..3a284f07 100644
--- a/frontend/new-web/src/components/core/cards/art-bar-chart-card/index.vue
+++ b/frontend/new-web/src/components/core/cards/art-bar-chart-card/index.vue
@@ -12,7 +12,7 @@
         class="text-sm font-medium text-danger"
         :class="[percentage > 0 ? 'text-success' : '', isMiniChart ? 'absolute bottom-5' : '']"
       >
-        {{ percentage > 0 ? '+' : '' }}{{ percentage }}%
+        {{ percentage > 0 ? "+" : "" }}{{ percentage }}%
       </div>
       <div v-if="date" class="absolute bottom-5 right-5 text-xs text-g-600">
         {{ date }}
@@ -28,76 +28,76 @@
 </template>
 
 <script setup lang="ts">
-  import { useChartOps, useChartComponent } from '@/hooks/core/useChart'
-  import { type EChartsOption } from '@/plugins/echarts'
+import { useChartOps, useChartComponent } from "@/hooks/core/useChart";
+import { type EChartsOption } from "@/plugins/echarts";
 
-  defineOptions({ name: 'ArtBarChartCard' })
+defineOptions({ name: "ArtBarChartCard" });
 
-  interface Props {
-    /** 数值 */
-    value: number
-    /** 标签 */
-    label: string
-    /** 百分比 +（绿色）-（红色） */
-    percentage: number
-    /** 日期 */
-    date?: string
-    /** 高度 */
-    height?: number
-    /** 颜色 */
-    color?: string
-    /** 图表数据 */
-    chartData: number[]
-    /** 柱状图宽度 */
-    barWidth?: string
-    /** 是否为迷你图表 */
-    isMiniChart?: boolean
-  }
+interface Props {
+  /** 数值 */
+  value: number;
+  /** 标签 */
+  label: string;
+  /** 百分比 +（绿色）-（红色） */
+  percentage: number;
+  /** 日期 */
+  date?: string;
+  /** 高度 */
+  height?: number;
+  /** 颜色 */
+  color?: string;
+  /** 图表数据 */
+  chartData: number[];
+  /** 柱状图宽度 */
+  barWidth?: string;
+  /** 是否为迷你图表 */
+  isMiniChart?: boolean;
+}
 
-  const props = withDefaults(defineProps<Props>(), {
-    height: 11,
-    barWidth: '26%'
-  })
+const props = withDefaults(defineProps<Props>(), {
+  height: 11,
+  barWidth: "26%",
+});
 
-  // 使用新的图表组件抽象
-  const { chartRef } = useChartComponent({
-    props: {
-      height: `${props.height}rem`,
-      loading: false,
-      isEmpty: !props.chartData?.length || props.chartData.every((val) => val === 0)
-    },
-    checkEmpty: () => !props.chartData?.length || props.chartData.every((val) => val === 0),
-    watchSources: [() => props.chartData, () => props.color, () => props.barWidth],
-    generateOptions: (): EChartsOption => {
-      const computedColor = props.color || useChartOps().themeColor
+// 使用新的图表组件抽象
+const { chartRef } = useChartComponent({
+  props: {
+    height: `${props.height}rem`,
+    loading: false,
+    isEmpty: !props.chartData?.length || props.chartData.every((val) => val === 0),
+  },
+  checkEmpty: () => !props.chartData?.length || props.chartData.every((val) => val === 0),
+  watchSources: [() => props.chartData, () => props.color, () => props.barWidth],
+  generateOptions: (): EChartsOption => {
+    const computedColor = props.color || useChartOps().themeColor;
 
-      return {
-        grid: {
-          top: 0,
-          right: 0,
-          bottom: 15,
-          left: 0
+    return {
+      grid: {
+        top: 0,
+        right: 0,
+        bottom: 15,
+        left: 0,
+      },
+      xAxis: {
+        type: "category",
+        show: false,
+      },
+      yAxis: {
+        type: "value",
+        show: false,
+      },
+      series: [
+        {
+          data: props.chartData,
+          type: "bar",
+          barWidth: props.barWidth,
+          itemStyle: {
+            color: computedColor,
+            borderRadius: 2,
+          },
         },
-        xAxis: {
-          type: 'category',
-          show: false
-        },
-        yAxis: {
-          type: 'value',
-          show: false
-        },
-        series: [
-          {
-            data: props.chartData,
-            type: 'bar',
-            barWidth: props.barWidth,
-            itemStyle: {
-              color: computedColor,
-              borderRadius: 2
-            }
-          }
-        ]
-      }
-    }
-  })
+      ],
+    };
+  },
+});
 </script>
diff --git a/frontend/new-web/src/components/core/cards/art-data-list-card/index.vue b/frontend/new-web/src/components/core/cards/art-data-list-card/index.vue
index fc433238..db1f9825 100644
--- a/frontend/new-web/src/components/core/cards/art-data-list-card/index.vue
+++ b/frontend/new-web/src/components/core/cards/art-data-list-card/index.vue
@@ -22,53 +22,54 @@
       v-if="showMoreButton"
       v-ripple
       @click="handleMore"
-      >查看更多</ElButton
     >
+      查看更多
+    </ElButton>
   </div>
 </template>
 
 <script setup lang="ts">
-  defineOptions({ name: 'ArtDataListCard' })
+defineOptions({ name: "ArtDataListCard" });
 
-  interface Props {
-    /** 数据列表 */
-    list: Activity[]
-    /** 标题 */
-    title: string
-    /** 副标题 */
-    subtitle?: string
-    /** 最大显示数量 */
-    maxCount?: number
-    /** 是否显示更多按钮 */
-    showMoreButton?: boolean
-  }
+interface Props {
+  /** 数据列表 */
+  list: Activity[];
+  /** 标题 */
+  title: string;
+  /** 副标题 */
+  subtitle?: string;
+  /** 最大显示数量 */
+  maxCount?: number;
+  /** 是否显示更多按钮 */
+  showMoreButton?: boolean;
+}
 
-  interface Activity {
-    /** 标题 */
-    title: string
-    /** 状态 */
-    status: string
-    /** 时间 */
-    time: string
-    /** 样式类名 */
-    class: string
-    /** 图标 */
-    icon: string
-  }
+interface Activity {
+  /** 标题 */
+  title: string;
+  /** 状态 */
+  status: string;
+  /** 时间 */
+  time: string;
+  /** 样式类名 */
+  class: string;
+  /** 图标 */
+  icon: string;
+}
 
-  const ITEM_HEIGHT = 66
-  const DEFAULT_MAX_COUNT = 5
+const ITEM_HEIGHT = 66;
+const DEFAULT_MAX_COUNT = 5;
 
-  const props = withDefaults(defineProps<Props>(), {
-    maxCount: DEFAULT_MAX_COUNT
-  })
+const props = withDefaults(defineProps<Props>(), {
+  maxCount: DEFAULT_MAX_COUNT,
+});
 
-  const maxHeight = computed(() => `${ITEM_HEIGHT * props.maxCount}px`)
+const maxHeight = computed(() => `${ITEM_HEIGHT * props.maxCount}px`);
 
-  const emit = defineEmits<{
-    /** 点击更多按钮事件 */
-    (e: 'more'): void
-  }>()
+const emit = defineEmits<{
+  /** 点击更多按钮事件 */
+  (e: "more"): void;
+}>();
 
-  const handleMore = () => emit('more')
+const handleMore = () => emit("more");
 </script>
diff --git a/frontend/new-web/src/components/core/cards/art-donut-chart-card/index.vue b/frontend/new-web/src/components/core/cards/art-donut-chart-card/index.vue
index df2dcbbd..2875c24c 100644
--- a/frontend/new-web/src/components/core/cards/art-donut-chart-card/index.vue
+++ b/frontend/new-web/src/components/core/cards/art-donut-chart-card/index.vue
@@ -15,7 +15,7 @@
               class="mt-1.5 text-xs font-medium"
               :class="percentage > 0 ? 'text-success' : 'text-danger'"
             >
-              {{ percentage > 0 ? '+' : '' }}{{ percentage }}%
+              {{ percentage > 0 ? "+" : "" }}{{ percentage }}%
               <span v-if="percentageLabel">{{ percentageLabel }}</span>
             </div>
           </div>
@@ -39,86 +39,86 @@
 </template>
 
 <script setup lang="ts">
-  import { type EChartsOption } from '@/plugins/echarts'
-  import { useChartOps, useChartComponent } from '@/hooks/core/useChart'
+import { type EChartsOption } from "@/plugins/echarts";
+import { useChartOps, useChartComponent } from "@/hooks/core/useChart";
 
-  defineOptions({ name: 'ArtDonutChartCard' })
+defineOptions({ name: "ArtDonutChartCard" });
 
-  interface Props {
-    /** 数值 */
-    value: number
-    /** 标题 */
-    title: string
-    /** 百分比 */
-    percentage: number
-    /** 百分比标签 */
-    percentageLabel?: string
-    /** 当前年份 */
-    currentValue?: string
-    /** 去年年份 */
-    previousValue?: string
-    /** 高度 */
-    height?: number
-    /** 颜色 */
-    color?: string
-    /** 半径 */
-    radius?: [string, string]
-    /** 数据 */
-    data: [number, number]
-  }
+interface Props {
+  /** 数值 */
+  value: number;
+  /** 标题 */
+  title: string;
+  /** 百分比 */
+  percentage: number;
+  /** 百分比标签 */
+  percentageLabel?: string;
+  /** 当前年份 */
+  currentValue?: string;
+  /** 去年年份 */
+  previousValue?: string;
+  /** 高度 */
+  height?: number;
+  /** 颜色 */
+  color?: string;
+  /** 半径 */
+  radius?: [string, string];
+  /** 数据 */
+  data: [number, number];
+}
 
-  const props = withDefaults(defineProps<Props>(), {
-    height: 9,
-    radius: () => ['70%', '90%'],
-    data: () => [0, 0]
-  })
+const props = withDefaults(defineProps<Props>(), {
+  height: 9,
+  radius: () => ["70%", "90%"],
+  data: () => [0, 0],
+});
 
-  const formatNumber = (num: number) => {
-    return num.toLocaleString()
-  }
+const formatNumber = (num: number) => {
+  return num.toLocaleString();
+};
 
-  // 使用新的图表组件抽象
-  const { chartRef } = useChartComponent({
-    props: {
-      height: `${props.height}rem`,
-      loading: false,
-      isEmpty: props.data.every((val) => val === 0)
-    },
-    checkEmpty: () => props.data.every((val) => val === 0),
-    watchSources: [
-      () => props.data,
-      () => props.color,
-      () => props.radius,
-      () => props.currentValue,
-      () => props.previousValue
-    ],
-    generateOptions: (): EChartsOption => {
-      const computedColor = props.color || useChartOps().themeColor
+// 使用新的图表组件抽象
+const { chartRef } = useChartComponent({
+  props: {
+    height: `${props.height}rem`,
+    loading: false,
+    isEmpty: props.data.every((val) => val === 0),
+  },
+  checkEmpty: () => props.data.every((val) => val === 0),
+  watchSources: [
+    () => props.data,
+    () => props.color,
+    () => props.radius,
+    () => props.currentValue,
+    () => props.previousValue,
+  ],
+  generateOptions: (): EChartsOption => {
+    const computedColor = props.color || useChartOps().themeColor;
 
-      return {
-        series: [
-          {
-            type: 'pie',
-            radius: props.radius,
-            avoidLabelOverlap: false,
-            label: {
-              show: false
+    return {
+      series: [
+        {
+          type: "pie",
+          radius: props.radius,
+          avoidLabelOverlap: false,
+          label: {
+            show: false,
+          },
+          data: [
+            {
+              value: props.data[0],
+              name: props.currentValue,
+              itemStyle: { color: computedColor },
             },
-            data: [
-              {
-                value: props.data[0],
-                name: props.currentValue,
-                itemStyle: { color: computedColor }
-              },
-              {
-                value: props.data[1],
-                name: props.previousValue,
-                itemStyle: { color: '#e6e8f7' }
-              }
-            ]
-          }
-        ]
-      }
-    }
-  })
+            {
+              value: props.data[1],
+              name: props.previousValue,
+              itemStyle: { color: "#e6e8f7" },
+            },
+          ],
+        },
+      ],
+    };
+  },
+});
 </script>
diff --git a/frontend/new-web/src/components/core/cards/art-image-card/index.vue b/frontend/new-web/src/components/core/cards/art-image-card/index.vue
index d27fe009..0e3861d4 100644
--- a/frontend/new-web/src/components/core/cards/art-image-card/index.vue
+++ b/frontend/new-web/src/components/core/cards/art-image-card/index.vue
@@ -48,42 +48,42 @@
 </template>
 
 <script setup lang="ts">
-  import { Picture, View, ChatLineRound } from '@element-plus/icons-vue'
+import { Picture, View, ChatLineRound } from "@element-plus/icons-vue";
 
-  defineOptions({ name: 'ArtImageCard' })
+defineOptions({ name: "ArtImageCard" });
 
-  interface Props {
-    /** 图片地址 */
-    imageUrl: string
-    /** 标题 */
-    title: string
-    /** 分类 */
-    category?: string
-    /** 阅读时间 */
-    readTime?: string
-    /** 浏览量 */
-    views?: number
-    /** 评论数 */
-    comments?: number
-    /** 日期 */
-    date?: string
-  }
+interface Props {
+  /** 图片地址 */
+  imageUrl: string;
+  /** 标题 */
+  title: string;
+  /** 分类 */
+  category?: string;
+  /** 阅读时间 */
+  readTime?: string;
+  /** 浏览量 */
+  views?: number;
+  /** 评论数 */
+  comments?: number;
+  /** 日期 */
+  date?: string;
+}
 
-  const props = withDefaults(defineProps<Props>(), {
-    imageUrl: '',
-    title: '',
-    category: '',
-    readTime: '',
-    views: 0,
-    comments: 0,
-    date: ''
-  })
+const props = withDefaults(defineProps<Props>(), {
+  imageUrl: "",
+  title: "",
+  category: "",
+  readTime: "",
+  views: 0,
+  comments: 0,
+  date: "",
+});
 
-  const emit = defineEmits<{
-    (e: 'click', card: Props): void
-  }>()
+const emit = defineEmits<{
+  (e: "click", card: Props): void;
+}>();
 
-  const handleClick = () => {
-    emit('click', props)
-  }
+const handleClick = () => {
+  emit("click", props);
+};
 </script>
diff --git a/frontend/new-web/src/components/core/cards/art-line-chart-card/index.vue b/frontend/new-web/src/components/core/cards/art-line-chart-card/index.vue
index e58c9b28..e289561b 100644
--- a/frontend/new-web/src/components/core/cards/art-line-chart-card/index.vue
+++ b/frontend/new-web/src/components/core/cards/art-line-chart-card/index.vue
@@ -12,10 +12,10 @@
         class="text-sm font-medium"
         :class="[
           percentage > 0 ? 'text-success' : 'text-danger',
-          isMiniChart ? 'absolute bottom-5' : ''
+          isMiniChart ? 'absolute bottom-5' : '',
         ]"
       >
-        {{ percentage > 0 ? '+' : '' }}{{ percentage }}%
+        {{ percentage > 0 ? "+" : "" }}{{ percentage }}%
       </div>
       <div v-if="date" class="absolute bottom-5 right-5 text-xs text-g-500">
         {{ date }}
@@ -31,96 +31,96 @@
 </template>
 
 <script setup lang="ts">
-  import { graphic, type EChartsOption } from '@/plugins/echarts'
-  import { getCssVar, hexToRgba } from '@/utils/ui'
-  import { useChartOps, useChartComponent } from '@/hooks/core/useChart'
+import { graphic, type EChartsOption } from "@/plugins/echarts";
+import { getCssVar, hexToRgba } from "@/utils/ui";
+import { useChartOps, useChartComponent } from "@/hooks/core/useChart";
 
-  defineOptions({ name: 'ArtLineChartCard' })
+defineOptions({ name: "ArtLineChartCard" });
 
-  interface Props {
-    /** 数值 */
-    value: number
-    /** 标签 */
-    label: string
-    /** 百分比 */
-    percentage: number
-    /** 日期 */
-    date?: string
-    /** 高度 */
-    height?: number
-    /** 颜色 */
-    color?: string
-    /** 是否显示区域颜色 */
-    showAreaColor?: boolean
-    /** 图表数据 */
-    chartData: number[]
-    /** 是否为迷你图表 */
-    isMiniChart?: boolean
-  }
+interface Props {
+  /** 数值 */
+  value: number;
+  /** 标签 */
+  label: string;
+  /** 百分比 */
+  percentage: number;
+  /** 日期 */
+  date?: string;
+  /** 高度 */
+  height?: number;
+  /** 颜色 */
+  color?: string;
+  /** 是否显示区域颜色 */
+  showAreaColor?: boolean;
+  /** 图表数据 */
+  chartData: number[];
+  /** 是否为迷你图表 */
+  isMiniChart?: boolean;
+}
 
-  const props = withDefaults(defineProps<Props>(), {
-    height: 11
-  })
+const props = withDefaults(defineProps<Props>(), {
+  height: 11,
+});
 
-  // 使用新的图表组件抽象
-  const { chartRef } = useChartComponent({
-    props: {
-      height: `${props.height}rem`,
-      loading: false,
-      isEmpty: !props.chartData?.length || props.chartData.every((val) => val === 0)
-    },
-    checkEmpty: () => !props.chartData?.length || props.chartData.every((val) => val === 0),
-    watchSources: [() => props.chartData, () => props.color, () => props.showAreaColor],
-    generateOptions: (): EChartsOption => {
-      const computedColor = props.color || useChartOps().themeColor
+// 使用新的图表组件抽象
+const { chartRef } = useChartComponent({
+  props: {
+    height: `${props.height}rem`,
+    loading: false,
+    isEmpty: !props.chartData?.length || props.chartData.every((val) => val === 0),
+  },
+  checkEmpty: () => !props.chartData?.length || props.chartData.every((val) => val === 0),
+  watchSources: [() => props.chartData, () => props.color, () => props.showAreaColor],
+  generateOptions: (): EChartsOption => {
+    const computedColor = props.color || useChartOps().themeColor;
 
-      return {
-        grid: {
-          top: 0,
-          right: 0,
-          bottom: 0,
-          left: 0
+    return {
+      grid: {
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+      },
+      xAxis: {
+        type: "category",
+        show: false,
+        boundaryGap: false,
+      },
+      yAxis: {
+        type: "value",
+        show: false,
+      },
+      series: [
+        {
+          data: props.chartData,
+          type: "line",
+          smooth: true,
+          showSymbol: false,
+          lineStyle: {
+            width: 3,
+            color: computedColor,
+          },
+          areaStyle: props.showAreaColor
+            ? {
+                color: new graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: props.color
+                      ? hexToRgba(props.color, 0.2).rgba
+                      : hexToRgba(getCssVar("--el-color-primary"), 0.2).rgba,
+                  },
+                  {
+                    offset: 1,
+                    color: props.color
+                      ? hexToRgba(props.color, 0.01).rgba
+                      : hexToRgba(getCssVar("--el-color-primary"), 0.01).rgba,
+                  },
+                ]),
+              }
+            : undefined,
         },
-        xAxis: {
-          type: 'category',
-          show: false,
-          boundaryGap: false
-        },
-        yAxis: {
-          type: 'value',
-          show: false
-        },
-        series: [
-          {
-            data: props.chartData,
-            type: 'line',
-            smooth: true,
-            showSymbol: false,
-            lineStyle: {
-              width: 3,
-              color: computedColor
-            },
-            areaStyle: props.showAreaColor
-              ? {
-                  color: new graphic.LinearGradient(0, 0, 0, 1, [
-                    {
-                      offset: 0,
-                      color: props.color
-                        ? hexToRgba(props.color, 0.2).rgba
-                        : hexToRgba(getCssVar('--el-color-primary'), 0.2).rgba
-                    },
-                    {
-                      offset: 1,
-                      color: props.color
-                        ? hexToRgba(props.color, 0.01).rgba
-                        : hexToRgba(getCssVar('--el-color-primary'), 0.01).rgba
-                    }
-                  ])
-                }
-              : undefined
-          }
-        ]
-      }
-    }
-  })
+      ],
+    };
+  },
+});
 </script>
diff --git a/frontend/new-web/src/components/core/cards/art-progress-card/index.vue b/frontend/new-web/src/components/core/cards/art-progress-card/index.vue
index 048a8366..2338b9c5 100644
--- a/frontend/new-web/src/components/core/cards/art-progress-card/index.vue
+++ b/frontend/new-web/src/components/core/cards/art-progress-card/index.vue
@@ -27,60 +27,60 @@
 </template>
 
 <script setup lang="ts">
-  defineOptions({ name: 'ArtProgressCard' })
+defineOptions({ name: "ArtProgressCard" });
 
-  interface Props {
-    /** 进度百分比 */
-    percentage: number
-    /** 标题 */
-    title: string
-    /** 颜色 */
-    color?: string
-    /** 图标 */
-    icon?: string
-    /** 图标样式 */
-    iconStyle?: string
-    /** 进度条宽度 */
-    strokeWidth?: number
-  }
+interface Props {
+  /** 进度百分比 */
+  percentage: number;
+  /** 标题 */
+  title: string;
+  /** 颜色 */
+  color?: string;
+  /** 图标 */
+  icon?: string;
+  /** 图标样式 */
+  iconStyle?: string;
+  /** 进度条宽度 */
+  strokeWidth?: number;
+}
 
-  const props = withDefaults(defineProps<Props>(), {
-    strokeWidth: 5,
-    color: '#67C23A'
-  })
+const props = withDefaults(defineProps<Props>(), {
+  strokeWidth: 5,
+  color: "#67C23A",
+});
 
-  const animationDuration = 500
-  const currentPercentage = ref(0)
+const animationDuration = 500;
+const currentPercentage = ref(0);
 
-  const animateProgress = () => {
-    const startTime = Date.now()
-    const startValue = currentPercentage.value
-    const endValue = props.percentage
+const animateProgress = () => {
+  const startTime = Date.now();
+  const startValue = currentPercentage.value;
+  const endValue = props.percentage;
 
-    const animate = () => {
-      const currentTime = Date.now()
-      const elapsed = currentTime - startTime
-      const progress = Math.min(elapsed / animationDuration, 1)
+  const animate = () => {
+    const currentTime = Date.now();
+    const elapsed = currentTime - startTime;
+    const progress = Math.min(elapsed / animationDuration, 1);
 
-      currentPercentage.value = startValue + (endValue - startValue) * progress
+    currentPercentage.value = startValue + (endValue - startValue) * progress;
 
-      if (progress < 1) {
-        requestAnimationFrame(animate)
-      }
+    if (progress < 1) {
+      requestAnimationFrame(animate);
     }
+  };
 
-    requestAnimationFrame(animate)
+  requestAnimationFrame(animate);
+};
+
+onMounted(() => {
+  animateProgress();
+});
+
+// 当 percentage 属性变化时重新执行动画
+watch(
+  () => props.percentage,
+  () => {
+    animateProgress();
   }
-
-  onMounted(() => {
-    animateProgress()
-  })
-
-  // 当 percentage 属性变化时重新执行动画
-  watch(
-    () => props.percentage,
-    () => {
-      animateProgress()
-    }
-  )
+);
 </script>
diff --git a/frontend/new-web/src/components/core/cards/art-stats-card/index.vue b/frontend/new-web/src/components/core/cards/art-stats-card/index.vue
index 8e0341bc..f647c878 100644
--- a/frontend/new-web/src/components/core/cards/art-stats-card/index.vue
+++ b/frontend/new-web/src/components/core/cards/art-stats-card/index.vue
@@ -23,8 +23,9 @@
         class="mt-1 text-sm text-g-500 opacity-90"
         :style="{ color: textColor }"
         v-if="description"
-        >{{ description }}</p
       >
+        {{ description }}
+      </p>
     </div>
     <div v-if="showArrow">
       <ArtSvgIcon icon="ri:arrow-right-s-line" class="text-xl text-g-500" />
@@ -33,35 +34,35 @@
 </template>
 
 <script setup lang="ts">
-  defineOptions({ name: 'ArtStatsCard' })
+defineOptions({ name: "ArtStatsCard" });
 
-  interface StatsCardProps {
-    /** 盒子样式 */
-    boxStyle?: string
-    /** 图标 */
-    icon?: string
-    /** 图标样式 */
-    iconStyle?: string
-    /** 标题 */
-    title?: string
-    /** 数值 */
-    count?: number
-    /** 小数位 */
-    decimals?: number
-    /** 分隔符 */
-    separator?: string
-    /** 描述 */
-    description: string
-    /** 文本颜色 */
-    textColor?: string
-    /** 是否显示箭头 */
-    showArrow?: boolean
-  }
+interface StatsCardProps {
+  /** 盒子样式 */
+  boxStyle?: string;
+  /** 图标 */
+  icon?: string;
+  /** 图标样式 */
+  iconStyle?: string;
+  /** 标题 */
+  title?: string;
+  /** 数值 */
+  count?: number;
+  /** 小数位 */
+  decimals?: number;
+  /** 分隔符 */
+  separator?: string;
+  /** 描述 */
+  description: string;
+  /** 文本颜色 */
+  textColor?: string;
+  /** 是否显示箭头 */
+  showArrow?: boolean;
+}
 
-  withDefaults(defineProps<StatsCardProps>(), {
-    iconSize: 30,
-    iconBgRadius: 50,
-    decimals: 0,
-    separator: ','
-  })
+withDefaults(defineProps<StatsCardProps>(), {
+  iconSize: 30,
+  iconBgRadius: 50,
+  decimals: 0,
+  separator: ",",
+});
 </script>
diff --git a/frontend/new-web/src/components/core/cards/art-timeline-list-card/index.vue b/frontend/new-web/src/components/core/cards/art-timeline-list-card/index.vue
index fbb2c78c..e851265c 100644
--- a/frontend/new-web/src/components/core/cards/art-timeline-list-card/index.vue
+++ b/frontend/new-web/src/components/core/cards/art-timeline-list-card/index.vue
@@ -18,7 +18,7 @@
           <div class="flex-c gap-3">
             <div class="flex-c gap-2">
               <span class="text-sm">{{ item.content }}</span>
-              <span v-if="item.code" class="text-sm text-theme"> #{{ item.code }} </span>
+              <span v-if="item.code" class="text-sm text-theme">#{{ item.code }}</span>
             </div>
           </div>
         </ElTimelineItem>
@@ -28,42 +28,42 @@
 </template>
 
 <script setup lang="ts">
-  defineOptions({ name: 'ArtTimelineListCard' })
+defineOptions({ name: "ArtTimelineListCard" });
 
-  // 常量配置
-  const ITEM_HEIGHT = 65
-  const TIMELINE_PLACEMENT = 'top'
-  const DEFAULT_MAX_COUNT = 5
+// 常量配置
+const ITEM_HEIGHT = 65;
+const TIMELINE_PLACEMENT = "top";
+const DEFAULT_MAX_COUNT = 5;
 
-  interface TimelineItem {
-    /** 时间 */
-    time: string
-    /** 状态颜色 */
-    status: string
-    /** 内容 */
-    content: string
-    /** 代码标识 */
-    code?: string
-  }
+interface TimelineItem {
+  /** 时间 */
+  time: string;
+  /** 状态颜色 */
+  status: string;
+  /** 内容 */
+  content: string;
+  /** 代码标识 */
+  code?: string;
+}
 
-  interface Props {
-    /** 时间轴列表数据 */
-    list: TimelineItem[]
-    /** 标题 */
-    title: string
-    /** 副标题 */
-    subtitle?: string
-    /** 最大显示数量 */
-    maxCount?: number
-  }
+interface Props {
+  /** 时间轴列表数据 */
+  list: TimelineItem[];
+  /** 标题 */
+  title: string;
+  /** 副标题 */
+  subtitle?: string;
+  /** 最大显示数量 */
+  maxCount?: number;
+}
 
-  // Props 定义和验证
-  const props = withDefaults(defineProps<Props>(), {
-    title: '',
-    subtitle: '',
-    maxCount: DEFAULT_MAX_COUNT
-  })
+// Props 定义和验证
+const props = withDefaults(defineProps<Props>(), {
+  title: "",
+  subtitle: "",
+  maxCount: DEFAULT_MAX_COUNT,
+});
 
-  // 计算最大高度
-  const maxHeight = computed(() => `${ITEM_HEIGHT * props.maxCount}px`)
+// 计算最大高度
+const maxHeight = computed(() => `${ITEM_HEIGHT * props.maxCount}px`);
 </script>
diff --git a/frontend/new-web/src/components/core/charts/art-bar-chart/index.vue b/frontend/new-web/src/components/core/charts/art-bar-chart/index.vue
index d677196c..5c7cacac 100644
--- a/frontend/new-web/src/components/core/charts/art-bar-chart/index.vue
+++ b/frontend/new-web/src/components/core/charts/art-bar-chart/index.vue
@@ -1,203 +1,203 @@
 <!-- 柱状图 -->
 <template>
-  <div ref="chartRef" :style="{ height: props.height }" v-loading="props.loading"> </div>
+  <div ref="chartRef" :style="{ height: props.height }" v-loading="props.loading"></div>
 </template>
 
 <script setup lang="ts">
-  import { useChartOps, useChartComponent } from '@/hooks/core/useChart'
-  import { getCssVar } from '@/utils/ui'
-  import { graphic, type EChartsOption } from '@/plugins/echarts'
-  import type { BarChartProps, BarDataItem } from '@/types/component/chart'
+import { useChartOps, useChartComponent } from "@/hooks/core/useChart";
+import { getCssVar } from "@/utils/ui";
+import { graphic, type EChartsOption } from "@/plugins/echarts";
+import type { BarChartProps, BarDataItem } from "@/types/component/chart";
 
-  defineOptions({ name: 'ArtBarChart' })
+defineOptions({ name: "ArtBarChart" });
 
-  const props = withDefaults(defineProps<BarChartProps>(), {
-    // 基础配置
-    height: useChartOps().chartHeight,
-    loading: false,
-    isEmpty: false,
-    colors: () => useChartOps().colors,
-    borderRadius: 4,
+const props = withDefaults(defineProps<BarChartProps>(), {
+  // 基础配置
+  height: useChartOps().chartHeight,
+  loading: false,
+  isEmpty: false,
+  colors: () => useChartOps().colors,
+  borderRadius: 4,
 
-    // 数据配置
-    data: () => [0, 0, 0, 0, 0, 0, 0],
-    xAxisData: () => [],
-    barWidth: '40%',
-    stack: false,
+  // 数据配置
+  data: () => [0, 0, 0, 0, 0, 0, 0],
+  xAxisData: () => [],
+  barWidth: "40%",
+  stack: false,
 
-    // 轴线显示配置
-    showAxisLabel: true,
-    showAxisLine: true,
-    showSplitLine: true,
+  // 轴线显示配置
+  showAxisLabel: true,
+  showAxisLine: true,
+  showSplitLine: true,
 
-    // 交互配置
-    showTooltip: true,
-    showLegend: false,
-    legendPosition: 'bottom'
-  })
+  // 交互配置
+  showTooltip: true,
+  showLegend: false,
+  legendPosition: "bottom",
+});
 
-  // 判断是否为多数据
-  const isMultipleData = computed(() => {
-    return (
-      Array.isArray(props.data) &&
-      props.data.length > 0 &&
-      typeof props.data[0] === 'object' &&
-      'name' in props.data[0]
-    )
-  })
+// 判断是否为多数据
+const isMultipleData = computed(() => {
+  return (
+    Array.isArray(props.data) &&
+    props.data.length > 0 &&
+    typeof props.data[0] === "object" &&
+    "name" in props.data[0]
+  );
+});
 
-  // 获取颜色配置
-  const getColor = (customColor?: string, index?: number) => {
-    if (customColor) return customColor
+// 获取颜色配置
+const getColor = (customColor?: string, index?: number) => {
+  if (customColor) return customColor;
 
-    if (index !== undefined) {
-      return props.colors![index % props.colors!.length]
-    }
-
-    // 默认渐变色
-    return new graphic.LinearGradient(0, 0, 0, 1, [
-      {
-        offset: 0,
-        color: getCssVar('--el-color-primary-light-4')
-      },
-      {
-        offset: 1,
-        color: getCssVar('--el-color-primary')
-      }
-    ])
+  if (index !== undefined) {
+    return props.colors![index % props.colors!.length];
   }
 
-  // 创建渐变色
-  const createGradientColor = (color: string) => {
-    return new graphic.LinearGradient(0, 0, 0, 1, [
-      {
-        offset: 0,
-        color: color
-      },
-      {
-        offset: 1,
-        color: color
-      }
-    ])
-  }
-
-  // 获取基础样式配置
-  const getBaseItemStyle = (
-    color: string | InstanceType<typeof graphic.LinearGradient> | undefined
-  ) => ({
-    borderRadius: props.borderRadius,
-    color: typeof color === 'string' ? createGradientColor(color) : color
-  })
-
-  // 创建系列配置
-  const createSeriesItem = (config: {
-    name?: string
-    data: number[]
-    color?: string | InstanceType<typeof graphic.LinearGradient>
-    barWidth?: string | number
-    stack?: string
-  }) => {
-    const animationConfig = getAnimationConfig()
-
-    return {
-      name: config.name,
-      data: config.data,
-      type: 'bar' as const,
-      stack: config.stack,
-      itemStyle: getBaseItemStyle(config.color),
-      barWidth: config.barWidth || props.barWidth,
-      ...animationConfig
-    }
-  }
-
-  // 使用新的图表组件抽象
-  const {
-    chartRef,
-    getAxisLineStyle,
-    getAxisLabelStyle,
-    getAxisTickStyle,
-    getSplitLineStyle,
-    getAnimationConfig,
-    getTooltipStyle,
-    getLegendStyle,
-    getGridWithLegend
-  } = useChartComponent({
-    props,
-    checkEmpty: () => {
-      // 检查单数据情况
-      if (Array.isArray(props.data) && typeof props.data[0] === 'number') {
-        const singleData = props.data as number[]
-        return !singleData.length || singleData.every((val) => val === 0)
-      }
-
-      // 检查多数据情况
-      if (Array.isArray(props.data) && typeof props.data[0] === 'object') {
-        const multiData = props.data as BarDataItem[]
-        return (
-          !multiData.length ||
-          multiData.every((item) => !item.data?.length || item.data.every((val) => val === 0))
-        )
-      }
-
-      return true
+  // 默认渐变色
+  return new graphic.LinearGradient(0, 0, 0, 1, [
+    {
+      offset: 0,
+      color: getCssVar("--el-color-primary-light-4"),
     },
-    watchSources: [() => props.data, () => props.xAxisData, () => props.colors],
-    generateOptions: (): EChartsOption => {
-      const options: EChartsOption = {
-        grid: getGridWithLegend(props.showLegend && isMultipleData.value, props.legendPosition, {
-          top: 15,
-          right: 0,
-          left: 0
-        }),
-        tooltip: props.showTooltip ? getTooltipStyle() : undefined,
-        xAxis: {
-          type: 'category',
-          data: props.xAxisData,
-          axisTick: getAxisTickStyle(),
-          axisLine: getAxisLineStyle(props.showAxisLine),
-          axisLabel: getAxisLabelStyle(props.showAxisLabel)
-        },
-        yAxis: {
-          type: 'value',
-          axisLabel: getAxisLabelStyle(props.showAxisLabel),
-          axisLine: getAxisLineStyle(props.showAxisLine),
-          splitLine: getSplitLineStyle(props.showSplitLine)
-        }
-      }
+    {
+      offset: 1,
+      color: getCssVar("--el-color-primary"),
+    },
+  ]);
+};
 
-      // 添加图例配置
-      if (props.showLegend && isMultipleData.value) {
-        options.legend = getLegendStyle(props.legendPosition)
-      }
+// 创建渐变色
+const createGradientColor = (color: string) => {
+  return new graphic.LinearGradient(0, 0, 0, 1, [
+    {
+      offset: 0,
+      color,
+    },
+    {
+      offset: 1,
+      color,
+    },
+  ]);
+};
 
-      // 生成系列数据
-      if (isMultipleData.value) {
-        const multiData = props.data as BarDataItem[]
-        options.series = multiData.map((item, index) => {
-          const computedColor = getColor(props.colors[index], index)
+// 获取基础样式配置
+const getBaseItemStyle = (
+  color: string | InstanceType<typeof graphic.LinearGradient> | undefined
+) => ({
+  borderRadius: props.borderRadius,
+  color: typeof color === "string" ? createGradientColor(color) : color,
+});
 
-          return createSeriesItem({
-            name: item.name,
-            data: item.data,
-            color: computedColor,
-            barWidth: item.barWidth,
-            stack: props.stack ? item.stack || 'total' : undefined
-          })
-        })
-      } else {
-        // 单数据情况
-        const singleData = props.data as number[]
-        const computedColor = getColor()
+// 创建系列配置
+const createSeriesItem = (config: {
+  name?: string;
+  data: number[];
+  color?: string | InstanceType<typeof graphic.LinearGradient>;
+  barWidth?: string | number;
+  stack?: string;
+}) => {
+  const animationConfig = getAnimationConfig();
 
-        options.series = [
-          createSeriesItem({
-            data: singleData,
-            color: computedColor
-          })
-        ]
-      }
+  return {
+    name: config.name,
+    data: config.data,
+    type: "bar" as const,
+    stack: config.stack,
+    itemStyle: getBaseItemStyle(config.color),
+    barWidth: config.barWidth || props.barWidth,
+    ...animationConfig,
+  };
+};
 
-      return options
+// 使用新的图表组件抽象
+const {
+  chartRef,
+  getAxisLineStyle,
+  getAxisLabelStyle,
+  getAxisTickStyle,
+  getSplitLineStyle,
+  getAnimationConfig,
+  getTooltipStyle,
+  getLegendStyle,
+  getGridWithLegend,
+} = useChartComponent({
+  props,
+  checkEmpty: () => {
+    // 检查单数据情况
+    if (Array.isArray(props.data) && typeof props.data[0] === "number") {
+      const singleData = props.data as number[];
+      return !singleData.length || singleData.every((val) => val === 0);
     }
-  })
+
+    // 检查多数据情况
+    if (Array.isArray(props.data) && typeof props.data[0] === "object") {
+      const multiData = props.data as BarDataItem[];
+      return (
+        !multiData.length ||
+        multiData.every((item) => !item.data?.length || item.data.every((val) => val === 0))
+      );
+    }
+
+    return true;
+  },
+  watchSources: [() => props.data, () => props.xAxisData, () => props.colors],
+  generateOptions: (): EChartsOption => {
+    const options: EChartsOption = {
+      grid: getGridWithLegend(props.showLegend && isMultipleData.value, props.legendPosition, {
+        top: 15,
+        right: 0,
+        left: 0,
+      }),
+      tooltip: props.showTooltip ? getTooltipStyle() : undefined,
+      xAxis: {
+        type: "category",
+        data: props.xAxisData,
+        axisTick: getAxisTickStyle(),
+        axisLine: getAxisLineStyle(props.showAxisLine),
+        axisLabel: getAxisLabelStyle(props.showAxisLabel),
+      },
+      yAxis: {
+        type: "value",
+        axisLabel: getAxisLabelStyle(props.showAxisLabel),
+        axisLine: getAxisLineStyle(props.showAxisLine),
+        splitLine: getSplitLineStyle(props.showSplitLine),
+      },
+    };
+
+    // 添加图例配置
+    if (props.showLegend && isMultipleData.value) {
+      options.legend = getLegendStyle(props.legendPosition);
+    }
+
+    // 生成系列数据
+    if (isMultipleData.value) {
+      const multiData = props.data as BarDataItem[];
+      options.series = multiData.map((item, index) => {
+        const computedColor = getColor(props.colors[index], index);
+
+        return createSeriesItem({
+          name: item.name,
+          data: item.data,
+          color: computedColor,
+          barWidth: item.barWidth,
+          stack: props.stack ? item.stack || "total" : undefined,
+        });
+      });
+    } else {
+      // 单数据情况
+      const singleData = props.data as number[];
+      const computedColor = getColor();
+
+      options.series = [
+        createSeriesItem({
+          data: singleData,
+          color: computedColor,
+        }),
+      ];
+    }
+
+    return options;
+  },
+});
 </script>
diff --git a/frontend/new-web/src/components/core/charts/art-dual-bar-compare-chart/index.vue b/frontend/new-web/src/components/core/charts/art-dual-bar-compare-chart/index.vue
index 32aa60f6..446053d5 100644
--- a/frontend/new-web/src/components/core/charts/art-dual-bar-compare-chart/index.vue
+++ b/frontend/new-web/src/components/core/charts/art-dual-bar-compare-chart/index.vue
@@ -1,195 +1,194 @@
 <!-- 双向堆叠柱状图 -->
 <template>
-  <div ref="chartRef" :style="{ height: props.height }" v-loading="props.loading"> </div>
+  <div ref="chartRef" :style="{ height: props.height }" v-loading="props.loading"></div>
 </template>
 
 <script setup lang="ts">
-  import { useChartOps, useChartComponent } from '@/hooks/core/useChart'
-  import type { EChartsOption, BarSeriesOption } from '@/plugins/echarts'
-  import type { BidirectionalBarChartProps } from '@/types/component/chart'
+import { useChartOps, useChartComponent } from "@/hooks/core/useChart";
+import type { EChartsOption, BarSeriesOption } from "@/plugins/echarts";
+import type { BidirectionalBarChartProps } from "@/types/component/chart";
 
-  defineOptions({ name: 'ArtDualBarCompareChart' })
+defineOptions({ name: "ArtDualBarCompareChart" });
 
-  const props = withDefaults(defineProps<BidirectionalBarChartProps>(), {
-    // 基础配置
-    height: useChartOps().chartHeight,
-    loading: false,
-    isEmpty: false,
-    colors: () => useChartOps().colors,
+const props = withDefaults(defineProps<BidirectionalBarChartProps>(), {
+  // 基础配置
+  height: useChartOps().chartHeight,
+  loading: false,
+  isEmpty: false,
+  colors: () => useChartOps().colors,
 
-    // 数据配置
-    positiveData: () => [],
-    negativeData: () => [],
-    xAxisData: () => [],
-    positiveName: '正向数据',
-    negativeName: '负向数据',
-    barWidth: 16,
-    yAxisMin: -100,
-    yAxisMax: 100,
+  // 数据配置
+  positiveData: () => [],
+  negativeData: () => [],
+  xAxisData: () => [],
+  positiveName: "正向数据",
+  negativeName: "负向数据",
+  barWidth: 16,
+  yAxisMin: -100,
+  yAxisMax: 100,
 
-    // 样式配置
-    showDataLabel: false,
-    positiveBorderRadius: () => [10, 10, 0, 0],
-    negativeBorderRadius: () => [0, 0, 10, 10],
+  // 样式配置
+  showDataLabel: false,
+  positiveBorderRadius: () => [10, 10, 0, 0],
+  negativeBorderRadius: () => [0, 0, 10, 10],
 
-    // 轴线显示配置
-    showAxisLabel: true,
-    showAxisLine: false,
-    showSplitLine: false,
+  // 轴线显示配置
+  showAxisLabel: true,
+  showAxisLine: false,
+  showSplitLine: false,
 
-    // 交互配置
-    showTooltip: true,
-    showLegend: false,
-    legendPosition: 'bottom'
-  })
+  // 交互配置
+  showTooltip: true,
+  showLegend: false,
+  legendPosition: "bottom",
+});
 
-  // 创建系列配置的辅助函数
-  const createSeriesConfig = (config: {
-    name: string
-    data: number[]
-    borderRadius: number | number[]
-    labelPosition: 'top' | 'bottom'
-    colorIndex: number
-    formatter?: (params: unknown) => string
-  }): BarSeriesOption => {
-    const { fontColor } = useChartOps()
-    const animationConfig = getAnimationConfig()
+// 创建系列配置的辅助函数
+const createSeriesConfig = (config: {
+  name: string;
+  data: number[];
+  borderRadius: number | number[];
+  labelPosition: "top" | "bottom";
+  colorIndex: number;
+  formatter?: (params: unknown) => string;
+}): BarSeriesOption => {
+  const { fontColor } = useChartOps();
+  const animationConfig = getAnimationConfig();
 
-    return {
-      name: config.name,
-      type: 'bar',
-      stack: 'total',
-      barWidth: props.barWidth,
-      barGap: '-100%',
-      data: config.data,
-      itemStyle: {
-        borderRadius: config.borderRadius,
-        color: props.colors[config.colorIndex]
-      },
-      label: {
-        show: props.showDataLabel,
-        position: config.labelPosition,
-        formatter:
-          config.formatter ||
-          ((params: unknown) => String((params as Record<string, unknown>).value)),
-        color: fontColor,
-        fontSize: 12
-      },
-      ...animationConfig
-    }
-  }
-
-  // 使用图表组件抽象
-  const {
-    chartRef,
-    getAxisLineStyle,
-    getAxisLabelStyle,
-    getAxisTickStyle,
-    getSplitLineStyle,
-    getAnimationConfig,
-    getTooltipStyle,
-    getLegendStyle,
-    getGridWithLegend
-  } = useChartComponent({
-    props,
-    checkEmpty: () => {
-      return (
-        props.isEmpty ||
-        !props.positiveData.length ||
-        !props.negativeData.length ||
-        (props.positiveData.every((val) => val === 0) &&
-          props.negativeData.every((val) => val === 0))
-      )
+  return {
+    name: config.name,
+    type: "bar",
+    stack: "total",
+    barWidth: props.barWidth,
+    barGap: "-100%",
+    data: config.data,
+    itemStyle: {
+      borderRadius: config.borderRadius,
+      color: props.colors[config.colorIndex],
     },
-    watchSources: [
-      () => props.positiveData,
-      () => props.negativeData,
-      () => props.xAxisData,
-      () => props.colors
-    ],
-    generateOptions: (): EChartsOption => {
-      // 处理负向数据，确保为负值
-      const processedNegativeData = props.negativeData.map((val) => (val > 0 ? -val : val))
+    label: {
+      show: props.showDataLabel,
+      position: config.labelPosition,
+      formatter:
+        config.formatter ||
+        ((params: unknown) => String((params as Record<string, unknown>).value)),
+      color: fontColor,
+      fontSize: 12,
+    },
+    ...animationConfig,
+  };
+};
 
-      // 优化的Grid配置
-      const gridConfig = {
-        top: props.showLegend ? 50 : 20,
-        right: 0,
-        left: 0,
-        bottom: 0, // 增加底部间距
-        containLabel: true
-      }
+// 使用图表组件抽象
+const {
+  chartRef,
+  getAxisLineStyle,
+  getAxisLabelStyle,
+  getAxisTickStyle,
+  getSplitLineStyle,
+  getAnimationConfig,
+  getTooltipStyle,
+  getLegendStyle,
+  getGridWithLegend,
+} = useChartComponent({
+  props,
+  checkEmpty: () => {
+    return (
+      props.isEmpty ||
+      !props.positiveData.length ||
+      !props.negativeData.length ||
+      (props.positiveData.every((val) => val === 0) && props.negativeData.every((val) => val === 0))
+    );
+  },
+  watchSources: [
+    () => props.positiveData,
+    () => props.negativeData,
+    () => props.xAxisData,
+    () => props.colors,
+  ],
+  generateOptions: (): EChartsOption => {
+    // 处理负向数据，确保为负值
+    const processedNegativeData = props.negativeData.map((val) => (val > 0 ? -val : val));
 
-      const options: EChartsOption = {
-        backgroundColor: 'transparent',
-        animation: true,
-        animationDuration: 1000,
-        animationEasing: 'cubicOut',
-        grid: getGridWithLegend(props.showLegend, props.legendPosition, gridConfig),
+    // 优化的Grid配置
+    const gridConfig = {
+      top: props.showLegend ? 50 : 20,
+      right: 0,
+      left: 0,
+      bottom: 0, // 增加底部间距
+      containLabel: true,
+    };
 
-        // 优化的提示框配置
-        tooltip: props.showTooltip
-          ? {
-              ...getTooltipStyle(),
-              trigger: 'axis',
-              axisPointer: {
-                type: 'none' // 去除指示线
-              }
-            }
-          : undefined,
+    const options: EChartsOption = {
+      backgroundColor: "transparent",
+      animation: true,
+      animationDuration: 1000,
+      animationEasing: "cubicOut",
+      grid: getGridWithLegend(props.showLegend, props.legendPosition, gridConfig),
 
-        // 图例配置
-        legend: props.showLegend
-          ? {
-              ...getLegendStyle(props.legendPosition),
-              data: [props.negativeName, props.positiveName]
-            }
-          : undefined,
+      // 优化的提示框配置
+      tooltip: props.showTooltip
+        ? {
+            ...getTooltipStyle(),
+            trigger: "axis",
+            axisPointer: {
+              type: "none", // 去除指示线
+            },
+          }
+        : undefined,
 
-        // X轴配置
-        xAxis: {
-          type: 'category',
-          data: props.xAxisData,
-          axisTick: getAxisTickStyle(),
-          axisLine: getAxisLineStyle(props.showAxisLine),
-          axisLabel: getAxisLabelStyle(props.showAxisLabel),
-          boundaryGap: true
-        },
+      // 图例配置
+      legend: props.showLegend
+        ? {
+            ...getLegendStyle(props.legendPosition),
+            data: [props.negativeName, props.positiveName],
+          }
+        : undefined,
 
-        // Y轴配置
-        yAxis: {
-          type: 'value',
-          min: props.yAxisMin,
-          max: props.yAxisMax,
-          axisLabel: getAxisLabelStyle(props.showAxisLabel),
-          axisLine: getAxisLineStyle(props.showAxisLine),
-          splitLine: getSplitLineStyle(props.showSplitLine)
-        },
+      // X轴配置
+      xAxis: {
+        type: "category",
+        data: props.xAxisData,
+        axisTick: getAxisTickStyle(),
+        axisLine: getAxisLineStyle(props.showAxisLine),
+        axisLabel: getAxisLabelStyle(props.showAxisLabel),
+        boundaryGap: true,
+      },
 
-        // 系列配置
-        series: [
-          // 负向数据系列
-          createSeriesConfig({
-            name: props.negativeName,
-            data: processedNegativeData,
-            borderRadius: props.negativeBorderRadius,
-            labelPosition: 'bottom',
-            colorIndex: 1,
-            formatter: (params: unknown) =>
-              String(Math.abs((params as Record<string, unknown>).value as number))
-          }),
-          // 正向数据系列
-          createSeriesConfig({
-            name: props.positiveName,
-            data: props.positiveData,
-            borderRadius: props.positiveBorderRadius,
-            labelPosition: 'top',
-            colorIndex: 0
-          })
-        ]
-      }
+      // Y轴配置
+      yAxis: {
+        type: "value",
+        min: props.yAxisMin,
+        max: props.yAxisMax,
+        axisLabel: getAxisLabelStyle(props.showAxisLabel),
+        axisLine: getAxisLineStyle(props.showAxisLine),
+        splitLine: getSplitLineStyle(props.showSplitLine),
+      },
 
-      return options
-    }
-  })
+      // 系列配置
+      series: [
+        // 负向数据系列
+        createSeriesConfig({
+          name: props.negativeName,
+          data: processedNegativeData,
+          borderRadius: props.negativeBorderRadius,
+          labelPosition: "bottom",
+          colorIndex: 1,
+          formatter: (params: unknown) =>
+            String(Math.abs((params as Record<string, unknown>).value as number)),
+        }),
+        // 正向数据系列
+        createSeriesConfig({
+          name: props.positiveName,
+          data: props.positiveData,
+          borderRadius: props.positiveBorderRadius,
+          labelPosition: "top",
+          colorIndex: 0,
+        }),
+      ],
+    };
+
+    return options;
+  },
+});
 </script>
diff --git a/frontend/new-web/src/components/core/charts/art-h-bar-chart/index.vue b/frontend/new-web/src/components/core/charts/art-h-bar-chart/index.vue
index 2e347596..378cc276 100644
--- a/frontend/new-web/src/components/core/charts/art-h-bar-chart/index.vue
+++ b/frontend/new-web/src/components/core/charts/art-h-bar-chart/index.vue
@@ -9,200 +9,200 @@
 </template>
 
 <script setup lang="ts">
-  import { useChartOps, useChartComponent } from '@/hooks/core/useChart'
-  import { getCssVar } from '@/utils/ui'
-  import { graphic, type EChartsOption } from '@/plugins/echarts'
-  import type { BarChartProps, BarDataItem } from '@/types/component/chart'
+import { useChartOps, useChartComponent } from "@/hooks/core/useChart";
+import { getCssVar } from "@/utils/ui";
+import { graphic, type EChartsOption } from "@/plugins/echarts";
+import type { BarChartProps, BarDataItem } from "@/types/component/chart";
 
-  defineOptions({ name: 'ArtHBarChart' })
+defineOptions({ name: "ArtHBarChart" });
 
-  const props = withDefaults(defineProps<BarChartProps>(), {
-    // 基础配置
-    height: useChartOps().chartHeight,
-    loading: false,
-    isEmpty: false,
-    colors: () => useChartOps().colors,
+const props = withDefaults(defineProps<BarChartProps>(), {
+  // 基础配置
+  height: useChartOps().chartHeight,
+  loading: false,
+  isEmpty: false,
+  colors: () => useChartOps().colors,
 
-    // 数据配置
-    data: () => [0, 0, 0, 0, 0, 0, 0],
-    xAxisData: () => [],
-    barWidth: '36%',
-    stack: false,
+  // 数据配置
+  data: () => [0, 0, 0, 0, 0, 0, 0],
+  xAxisData: () => [],
+  barWidth: "36%",
+  stack: false,
 
-    // 轴线显示配置
-    showAxisLabel: true,
-    showAxisLine: true,
-    showSplitLine: true,
+  // 轴线显示配置
+  showAxisLabel: true,
+  showAxisLine: true,
+  showSplitLine: true,
 
-    // 交互配置
-    showTooltip: true,
-    showLegend: false,
-    legendPosition: 'bottom'
-  })
+  // 交互配置
+  showTooltip: true,
+  showLegend: false,
+  legendPosition: "bottom",
+});
 
-  // 判断是否为多数据
-  const isMultipleData = computed(() => {
-    return (
-      Array.isArray(props.data) &&
-      props.data.length > 0 &&
-      typeof props.data[0] === 'object' &&
-      'name' in props.data[0]
-    )
-  })
+// 判断是否为多数据
+const isMultipleData = computed(() => {
+  return (
+    Array.isArray(props.data) &&
+    props.data.length > 0 &&
+    typeof props.data[0] === "object" &&
+    "name" in props.data[0]
+  );
+});
 
-  // 获取颜色配置
-  const getColor = (customColor?: string, index?: number) => {
-    if (customColor) return customColor
+// 获取颜色配置
+const getColor = (customColor?: string, index?: number) => {
+  if (customColor) return customColor;
 
-    if (index !== undefined) {
-      return props.colors![index % props.colors!.length]
-    }
-
-    // 默认渐变色
-    return new graphic.LinearGradient(0, 0, 1, 0, [
-      {
-        offset: 0,
-        color: getCssVar('--el-color-primary')
-      },
-      {
-        offset: 1,
-        color: getCssVar('--el-color-primary-light-4')
-      }
-    ])
+  if (index !== undefined) {
+    return props.colors![index % props.colors!.length];
   }
 
-  // 创建渐变色
-  const createGradientColor = (color: string) => {
-    return new graphic.LinearGradient(0, 0, 1, 0, [
-      {
-        offset: 0,
-        color: color
-      },
-      {
-        offset: 1,
-        color: color
-      }
-    ])
-  }
-
-  // 获取基础样式配置
-  const getBaseItemStyle = (
-    color: string | InstanceType<typeof graphic.LinearGradient> | undefined
-  ) => ({
-    borderRadius: 4,
-    color: typeof color === 'string' ? createGradientColor(color) : color
-  })
-
-  // 创建系列配置
-  const createSeriesItem = (config: {
-    name?: string
-    data: number[]
-    color?: string | InstanceType<typeof graphic.LinearGradient>
-    barWidth?: string | number
-    stack?: string
-  }) => {
-    const animationConfig = getAnimationConfig()
-
-    return {
-      name: config.name,
-      data: config.data,
-      type: 'bar' as const,
-      stack: config.stack,
-      itemStyle: getBaseItemStyle(config.color),
-      barWidth: config.barWidth || props.barWidth,
-      ...animationConfig
-    }
-  }
-
-  // 使用新的图表组件抽象
-  const {
-    chartRef,
-    getAxisLineStyle,
-    getAxisLabelStyle,
-    getAxisTickStyle,
-    getSplitLineStyle,
-    getAnimationConfig,
-    getTooltipStyle,
-    getLegendStyle,
-    getGridWithLegend
-  } = useChartComponent({
-    props,
-    checkEmpty: () => {
-      // 检查单数据情况
-      if (Array.isArray(props.data) && typeof props.data[0] === 'number') {
-        const singleData = props.data as number[]
-        return !singleData.length || singleData.every((val) => val === 0)
-      }
-
-      // 检查多数据情况
-      if (Array.isArray(props.data) && typeof props.data[0] === 'object') {
-        const multiData = props.data as BarDataItem[]
-        return (
-          !multiData.length ||
-          multiData.every((item) => !item.data?.length || item.data.every((val) => val === 0))
-        )
-      }
-
-      return true
+  // 默认渐变色
+  return new graphic.LinearGradient(0, 0, 1, 0, [
+    {
+      offset: 0,
+      color: getCssVar("--el-color-primary"),
     },
-    watchSources: [() => props.data, () => props.xAxisData, () => props.colors],
-    generateOptions: (): EChartsOption => {
-      const options: EChartsOption = {
-        grid: getGridWithLegend(props.showLegend && isMultipleData.value, props.legendPosition, {
-          top: 15,
-          right: 0,
-          left: 0
-        }),
-        tooltip: props.showTooltip ? getTooltipStyle() : undefined,
-        xAxis: {
-          type: 'value',
-          axisTick: getAxisTickStyle(),
-          axisLine: getAxisLineStyle(props.showAxisLine),
-          axisLabel: getAxisLabelStyle(props.showAxisLabel),
-          splitLine: getSplitLineStyle(props.showSplitLine)
-        },
-        yAxis: {
-          type: 'category',
-          data: props.xAxisData,
-          axisTick: getAxisTickStyle(),
-          axisLabel: getAxisLabelStyle(props.showAxisLabel),
-          axisLine: getAxisLineStyle(props.showAxisLine)
-        }
-      }
+    {
+      offset: 1,
+      color: getCssVar("--el-color-primary-light-4"),
+    },
+  ]);
+};
 
-      // 添加图例配置
-      if (props.showLegend && isMultipleData.value) {
-        options.legend = getLegendStyle(props.legendPosition)
-      }
+// 创建渐变色
+const createGradientColor = (color: string) => {
+  return new graphic.LinearGradient(0, 0, 1, 0, [
+    {
+      offset: 0,
+      color,
+    },
+    {
+      offset: 1,
+      color,
+    },
+  ]);
+};
 
-      // 生成系列数据
-      if (isMultipleData.value) {
-        const multiData = props.data as BarDataItem[]
-        options.series = multiData.map((item, index) => {
-          const computedColor = getColor(props.colors[index], index)
+// 获取基础样式配置
+const getBaseItemStyle = (
+  color: string | InstanceType<typeof graphic.LinearGradient> | undefined
+) => ({
+  borderRadius: 4,
+  color: typeof color === "string" ? createGradientColor(color) : color,
+});
 
-          return createSeriesItem({
-            name: item.name,
-            data: item.data,
-            color: computedColor,
-            barWidth: item.barWidth,
-            stack: props.stack ? item.stack || 'total' : undefined
-          })
-        })
-      } else {
-        // 单数据情况
-        const singleData = props.data as number[]
-        const computedColor = getColor()
+// 创建系列配置
+const createSeriesItem = (config: {
+  name?: string;
+  data: number[];
+  color?: string | InstanceType<typeof graphic.LinearGradient>;
+  barWidth?: string | number;
+  stack?: string;
+}) => {
+  const animationConfig = getAnimationConfig();
 
-        options.series = [
-          createSeriesItem({
-            data: singleData,
-            color: computedColor
-          })
-        ]
-      }
+  return {
+    name: config.name,
+    data: config.data,
+    type: "bar" as const,
+    stack: config.stack,
+    itemStyle: getBaseItemStyle(config.color),
+    barWidth: config.barWidth || props.barWidth,
+    ...animationConfig,
+  };
+};
 
-      return options
+// 使用新的图表组件抽象
+const {
+  chartRef,
+  getAxisLineStyle,
+  getAxisLabelStyle,
+  getAxisTickStyle,
+  getSplitLineStyle,
+  getAnimationConfig,
+  getTooltipStyle,
+  getLegendStyle,
+  getGridWithLegend,
+} = useChartComponent({
+  props,
+  checkEmpty: () => {
+    // 检查单数据情况
+    if (Array.isArray(props.data) && typeof props.data[0] === "number") {
+      const singleData = props.data as number[];
+      return !singleData.length || singleData.every((val) => val === 0);
     }
-  })
+
+    // 检查多数据情况
+    if (Array.isArray(props.data) && typeof props.data[0] === "object") {
+      const multiData = props.data as BarDataItem[];
+      return (
+        !multiData.length ||
+        multiData.every((item) => !item.data?.length || item.data.every((val) => val === 0))
+      );
+    }
+
+    return true;
+  },
+  watchSources: [() => props.data, () => props.xAxisData, () => props.colors],
+  generateOptions: (): EChartsOption => {
+    const options: EChartsOption = {
+      grid: getGridWithLegend(props.showLegend && isMultipleData.value, props.legendPosition, {
+        top: 15,
+        right: 0,
+        left: 0,
+      }),
+      tooltip: props.showTooltip ? getTooltipStyle() : undefined,
+      xAxis: {
+        type: "value",
+        axisTick: getAxisTickStyle(),
+        axisLine: getAxisLineStyle(props.showAxisLine),
+        axisLabel: getAxisLabelStyle(props.showAxisLabel),
+        splitLine: getSplitLineStyle(props.showSplitLine),
+      },
+      yAxis: {
+        type: "category",
+        data: props.xAxisData,
+        axisTick: getAxisTickStyle(),
+        axisLabel: getAxisLabelStyle(props.showAxisLabel),
+        axisLine: getAxisLineStyle(props.showAxisLine),
+      },
+    };
+
+    // 添加图例配置
+    if (props.showLegend && isMultipleData.value) {
+      options.legend = getLegendStyle(props.legendPosition);
+    }
+
+    // 生成系列数据
+    if (isMultipleData.value) {
+      const multiData = props.data as BarDataItem[];
+      options.series = multiData.map((item, index) => {
+        const computedColor = getColor(props.colors[index], index);
+
+        return createSeriesItem({
+          name: item.name,
+          data: item.data,
+          color: computedColor,
+          barWidth: item.barWidth,
+          stack: props.stack ? item.stack || "total" : undefined,
+        });
+      });
+    } else {
+      // 单数据情况
+      const singleData = props.data as number[];
+      const computedColor = getColor();
+
+      options.series = [
+        createSeriesItem({
+          data: singleData,
+          color: computedColor,
+        }),
+      ];
+    }
+
+    return options;
+  },
+});
 </script>
diff --git a/frontend/new-web/src/components/core/charts/art-k-line-chart/index.vue b/frontend/new-web/src/components/core/charts/art-k-line-chart/index.vue
index 0061b51c..c37be0f5 100644
--- a/frontend/new-web/src/components/core/charts/art-k-line-chart/index.vue
+++ b/frontend/new-web/src/components/core/charts/art-k-line-chart/index.vue
@@ -9,82 +9,82 @@
 </template>
 
 <script setup lang="ts">
-  import type { EChartsOption } from '@/plugins/echarts'
-  import { useChartOps, useChartComponent } from '@/hooks/core/useChart'
-  import type { KLineChartProps } from '@/types/component/chart'
+import type { EChartsOption } from "@/plugins/echarts";
+import { useChartOps, useChartComponent } from "@/hooks/core/useChart";
+import type { KLineChartProps } from "@/types/component/chart";
 
-  defineOptions({ name: 'ArtKLineChart' })
+defineOptions({ name: "ArtKLineChart" });
 
-  const props = withDefaults(defineProps<KLineChartProps>(), {
-    // 基础配置
-    height: useChartOps().chartHeight,
-    loading: false,
-    isEmpty: false,
-    colors: () => useChartOps().colors,
+const props = withDefaults(defineProps<KLineChartProps>(), {
+  // 基础配置
+  height: useChartOps().chartHeight,
+  loading: false,
+  isEmpty: false,
+  colors: () => useChartOps().colors,
 
-    // 数据配置
-    data: () => [],
-    showDataZoom: false,
-    dataZoomStart: 0,
-    dataZoomEnd: 100
-  })
+  // 数据配置
+  data: () => [],
+  showDataZoom: false,
+  dataZoomStart: 0,
+  dataZoomEnd: 100,
+});
 
-  // 获取实际使用的颜色
-  const getActualColors = () => {
-    const defaultUpColor = '#4C87F3'
-    const defaultDownColor = '#8BD8FC'
+// 获取实际使用的颜色
+const getActualColors = () => {
+  const defaultUpColor = "#4C87F3";
+  const defaultDownColor = "#8BD8FC";
+
+  return {
+    upColor: props.colors?.[0] || defaultUpColor,
+    downColor: props.colors?.[1] || defaultDownColor,
+  };
+};
+
+// 使用新的图表组件抽象
+const {
+  chartRef,
+  getAxisLineStyle,
+  getAxisLabelStyle,
+  getAxisTickStyle,
+  getSplitLineStyle,
+  getAnimationConfig,
+  getTooltipStyle,
+} = useChartComponent({
+  props,
+  checkEmpty: () => {
+    return (
+      !props.data?.length ||
+      props.data.every(
+        (item) => item.open === 0 && item.close === 0 && item.high === 0 && item.low === 0
+      )
+    );
+  },
+  watchSources: [
+    () => props.data,
+    () => props.colors,
+    () => props.showDataZoom,
+    () => props.dataZoomStart,
+    () => props.dataZoomEnd,
+  ],
+  generateOptions: (): EChartsOption => {
+    const { upColor, downColor } = getActualColors();
 
     return {
-      upColor: props.colors?.[0] || defaultUpColor,
-      downColor: props.colors?.[1] || defaultDownColor
-    }
-  }
-
-  // 使用新的图表组件抽象
-  const {
-    chartRef,
-    getAxisLineStyle,
-    getAxisLabelStyle,
-    getAxisTickStyle,
-    getSplitLineStyle,
-    getAnimationConfig,
-    getTooltipStyle
-  } = useChartComponent({
-    props,
-    checkEmpty: () => {
-      return (
-        !props.data?.length ||
-        props.data.every(
-          (item) => item.open === 0 && item.close === 0 && item.high === 0 && item.low === 0
-        )
-      )
-    },
-    watchSources: [
-      () => props.data,
-      () => props.colors,
-      () => props.showDataZoom,
-      () => props.dataZoomStart,
-      () => props.dataZoomEnd
-    ],
-    generateOptions: (): EChartsOption => {
-      const { upColor, downColor } = getActualColors()
-
-      return {
-        grid: {
-          top: 20,
-          right: 20,
-          bottom: props.showDataZoom ? 80 : 20,
-          left: 20,
-          containLabel: true
+      grid: {
+        top: 20,
+        right: 20,
+        bottom: props.showDataZoom ? 80 : 20,
+        left: 20,
+        containLabel: true,
+      },
+      tooltip: getTooltipStyle("axis", {
+        axisPointer: {
+          type: "cross",
         },
-        tooltip: getTooltipStyle('axis', {
-          axisPointer: {
-            type: 'cross'
-          },
-          formatter: (params: Array<{ name: string; data: number[] }>) => {
-            const param = params[0]
-            const data = param.data
-            return `
+        formatter: (params: Array<{ name: string; data: number[] }>) => {
+          const param = params[0];
+          const data = param.data;
+          return `
               <div style="padding: 5px;">
                 <div><strong>时间：</strong>${param.name}</div>
                 <div><strong>开盘：</strong>${data[0]}</div>
@@ -92,61 +92,61 @@
                 <div><strong>最低：</strong>${data[2]}</div>
                 <div><strong>最高：</strong>${data[3]}</div>
               </div>
-            `
-          }
-        }),
-        xAxis: {
-          type: 'category',
-          data: props.data.map((item) => item.time),
-          axisTick: getAxisTickStyle(),
-          axisLine: getAxisLineStyle(true),
-          axisLabel: getAxisLabelStyle(true)
+            `;
         },
-        yAxis: {
-          type: 'value',
-          scale: true,
-          axisLabel: getAxisLabelStyle(true),
-          axisLine: getAxisLineStyle(true),
-          splitLine: getSplitLineStyle(true)
-        },
-        series: [
-          {
-            type: 'candlestick',
-            data: props.data.map((item) => [item.open, item.close, item.low, item.high]),
+      }),
+      xAxis: {
+        type: "category",
+        data: props.data.map((item) => item.time),
+        axisTick: getAxisTickStyle(),
+        axisLine: getAxisLineStyle(true),
+        axisLabel: getAxisLabelStyle(true),
+      },
+      yAxis: {
+        type: "value",
+        scale: true,
+        axisLabel: getAxisLabelStyle(true),
+        axisLine: getAxisLineStyle(true),
+        splitLine: getSplitLineStyle(true),
+      },
+      series: [
+        {
+          type: "candlestick",
+          data: props.data.map((item) => [item.open, item.close, item.low, item.high]),
+          itemStyle: {
+            color: upColor,
+            color0: downColor,
+            borderColor: upColor,
+            borderColor0: downColor,
+            borderWidth: 1,
+          },
+          emphasis: {
             itemStyle: {
-              color: upColor,
-              color0: downColor,
-              borderColor: upColor,
-              borderColor0: downColor,
-              borderWidth: 1
+              borderWidth: 2,
+              shadowBlur: 10,
+              shadowColor: "rgba(0, 0, 0, 0.3)",
             },
-            emphasis: {
-              itemStyle: {
-                borderWidth: 2,
-                shadowBlur: 10,
-                shadowColor: 'rgba(0, 0, 0, 0.3)'
-              }
+          },
+          ...getAnimationConfig(),
+        },
+      ],
+      dataZoom: props.showDataZoom
+        ? [
+            {
+              type: "inside",
+              start: props.dataZoomStart,
+              end: props.dataZoomEnd,
             },
-            ...getAnimationConfig()
-          }
-        ],
-        dataZoom: props.showDataZoom
-          ? [
-              {
-                type: 'inside',
-                start: props.dataZoomStart,
-                end: props.dataZoomEnd
-              },
-              {
-                show: true,
-                type: 'slider',
-                top: '90%',
-                start: props.dataZoomStart,
-                end: props.dataZoomEnd
-              }
-            ]
-          : undefined
-      }
-    }
-  })
+            {
+              show: true,
+              type: "slider",
+              top: "90%",
+              start: props.dataZoomStart,
+              end: props.dataZoomEnd,
+            },
+          ]
+        : undefined,
+    };
+  },
+});
 </script>
diff --git a/frontend/new-web/src/components/core/charts/art-line-chart/index.vue b/frontend/new-web/src/components/core/charts/art-line-chart/index.vue
index b70c2c3e..53e9ada8 100644
--- a/frontend/new-web/src/components/core/charts/art-line-chart/index.vue
+++ b/frontend/new-web/src/components/core/charts/art-line-chart/index.vue
@@ -5,367 +5,366 @@
     class="relative w-[calc(100%+10px)]"
     :style="{ height: props.height }"
     v-loading="props.loading"
-  >
-  </div>
+  ></div>
 </template>
 
 <script setup lang="ts">
-  import { graphic, type EChartsOption } from '@/plugins/echarts'
-  import { getCssVar, hexToRgba } from '@/utils/ui'
-  import { useChartOps, useChartComponent } from '@/hooks/core/useChart'
-  import type { LineChartProps, LineDataItem } from '@/types/component/chart'
+import { graphic, type EChartsOption } from "@/plugins/echarts";
+import { getCssVar, hexToRgba } from "@/utils/ui";
+import { useChartOps, useChartComponent } from "@/hooks/core/useChart";
+import type { LineChartProps, LineDataItem } from "@/types/component/chart";
 
-  defineOptions({ name: 'ArtLineChart' })
+defineOptions({ name: "ArtLineChart" });
 
-  const props = withDefaults(defineProps<LineChartProps>(), {
-    // 基础配置
-    height: useChartOps().chartHeight,
-    loading: false,
-    isEmpty: false,
-    colors: () => useChartOps().colors,
+const props = withDefaults(defineProps<LineChartProps>(), {
+  // 基础配置
+  height: useChartOps().chartHeight,
+  loading: false,
+  isEmpty: false,
+  colors: () => useChartOps().colors,
 
-    // 数据配置
-    data: () => [0, 0, 0, 0, 0, 0, 0],
-    xAxisData: () => [],
-    lineWidth: 2.5,
-    showAreaColor: false,
-    smooth: true,
-    symbol: 'none',
-    symbolSize: 6,
-    animationDelay: 200,
+  // 数据配置
+  data: () => [0, 0, 0, 0, 0, 0, 0],
+  xAxisData: () => [],
+  lineWidth: 2.5,
+  showAreaColor: false,
+  smooth: true,
+  symbol: "none",
+  symbolSize: 6,
+  animationDelay: 200,
 
-    // 轴线显示配置
-    showAxisLabel: true,
-    showAxisLine: true,
-    showSplitLine: true,
+  // 轴线显示配置
+  showAxisLabel: true,
+  showAxisLine: true,
+  showSplitLine: true,
 
-    // 交互配置
-    showTooltip: true,
-    showLegend: false,
-    legendPosition: 'bottom'
-  })
+  // 交互配置
+  showTooltip: true,
+  showLegend: false,
+  legendPosition: "bottom",
+});
 
-  // 动画状态管理
-  const isAnimating = ref(false)
-  const animationTimers = ref<number[]>([])
-  const animatedData = ref<number[] | LineDataItem[]>([])
+// 动画状态管理
+const isAnimating = ref(false);
+const animationTimers = ref<number[]>([]);
+const animatedData = ref<number[] | LineDataItem[]>([]);
 
-  // 清理所有定时器
-  const clearAnimationTimers = () => {
-    animationTimers.value.forEach((timer) => clearTimeout(timer))
-    animationTimers.value = []
+// 清理所有定时器
+const clearAnimationTimers = () => {
+  animationTimers.value.forEach((timer) => clearTimeout(timer));
+  animationTimers.value = [];
+};
+
+// 判断是否为多数据（使用 VueUse 的 computedEager 优化）
+const isMultipleData = computed(() => {
+  return (
+    Array.isArray(props.data) &&
+    props.data.length > 0 &&
+    typeof props.data[0] === "object" &&
+    "name" in props.data[0]
+  );
+});
+
+// 缓存计算的最大值，避免重复计算
+const maxValue = computed(() => {
+  if (isMultipleData.value) {
+    const multiData = props.data as LineDataItem[];
+    return multiData.reduce((max, item) => {
+      if (item.data?.length) {
+        const itemMax = Math.max(...item.data);
+        return Math.max(max, itemMax);
+      }
+      return max;
+    }, 0);
+  } else {
+    const singleData = props.data as number[];
+    return singleData?.length ? Math.max(...singleData) : 0;
   }
+});
 
-  // 判断是否为多数据（使用 VueUse 的 computedEager 优化）
-  const isMultipleData = computed(() => {
-    return (
-      Array.isArray(props.data) &&
-      props.data.length > 0 &&
-      typeof props.data[0] === 'object' &&
-      'name' in props.data[0]
-    )
-  })
-
-  // 缓存计算的最大值，避免重复计算
-  const maxValue = computed(() => {
-    if (isMultipleData.value) {
-      const multiData = props.data as LineDataItem[]
-      return multiData.reduce((max, item) => {
-        if (item.data?.length) {
-          const itemMax = Math.max(...item.data)
-          return Math.max(max, itemMax)
-        }
-        return max
-      }, 0)
-    } else {
-      const singleData = props.data as number[]
-      return singleData?.length ? Math.max(...singleData) : 0
-    }
-  })
-
-  // 初始化动画数据（优化：减少条件判断）
-  const initAnimationData = (): number[] | LineDataItem[] => {
-    if (isMultipleData.value) {
-      const multiData = props.data as LineDataItem[]
-      return multiData.map((item) => ({
-        ...item,
-        data: Array(item.data.length).fill(0)
-      }))
-    }
-    const singleData = props.data as number[]
-    return Array(singleData.length).fill(0)
+// 初始化动画数据（优化：减少条件判断）
+const initAnimationData = (): number[] | LineDataItem[] => {
+  if (isMultipleData.value) {
+    const multiData = props.data as LineDataItem[];
+    return multiData.map((item) => ({
+      ...item,
+      data: Array(item.data.length).fill(0),
+    }));
   }
+  const singleData = props.data as number[];
+  return Array(singleData.length).fill(0);
+};
 
-  // 复制真实数据（优化：使用结构化克隆）
-  const copyRealData = (): number[] | LineDataItem[] => {
-    if (isMultipleData.value) {
-      return (props.data as LineDataItem[]).map((item) => ({ ...item, data: [...item.data] }))
-    }
-    return [...(props.data as number[])]
+// 复制真实数据（优化：使用结构化克隆）
+const copyRealData = (): number[] | LineDataItem[] => {
+  if (isMultipleData.value) {
+    return (props.data as LineDataItem[]).map((item) => ({ ...item, data: [...item.data] }));
   }
+  return [...(props.data as number[])];
+};
 
-  // 获取颜色配置（优化：缓存主题色）
-  const primaryColor = computed(() => getCssVar('--el-color-primary'))
+// 获取颜色配置（优化：缓存主题色）
+const primaryColor = computed(() => getCssVar("--el-color-primary"));
 
-  const getColor = (customColor?: string, index?: number): string => {
-    if (customColor) return customColor
-    if (index !== undefined) return props.colors![index % props.colors!.length]
-    return primaryColor.value
-  }
+const getColor = (customColor?: string, index?: number): string => {
+  if (customColor) return customColor;
+  if (index !== undefined) return props.colors![index % props.colors!.length];
+  return primaryColor.value;
+};
 
-  // 生成区域样式
-  const generateAreaStyle = (item: LineDataItem, color: string) => {
-    // 如果有 areaStyle 配置，或者显式开启了区域颜色，则显示区域样式
-    if (!item.areaStyle && !item.showAreaColor && !props.showAreaColor) return undefined
+// 生成区域样式
+const generateAreaStyle = (item: LineDataItem, color: string) => {
+  // 如果有 areaStyle 配置，或者显式开启了区域颜色，则显示区域样式
+  if (!item.areaStyle && !item.showAreaColor && !props.showAreaColor) return undefined;
 
-    const areaConfig = item.areaStyle || {}
-    if (areaConfig.custom) return areaConfig.custom
+  const areaConfig = item.areaStyle || {};
+  if (areaConfig.custom) return areaConfig.custom;
 
-    return {
-      color: new graphic.LinearGradient(0, 0, 0, 1, [
-        {
-          offset: 0,
-          color: hexToRgba(color, areaConfig.startOpacity || 0.2).rgba
-        },
-        {
-          offset: 1,
-          color: hexToRgba(color, areaConfig.endOpacity || 0.02).rgba
-        }
-      ])
-    }
-  }
+  return {
+    color: new graphic.LinearGradient(0, 0, 0, 1, [
+      {
+        offset: 0,
+        color: hexToRgba(color, areaConfig.startOpacity || 0.2).rgba,
+      },
+      {
+        offset: 1,
+        color: hexToRgba(color, areaConfig.endOpacity || 0.02).rgba,
+      },
+    ]),
+  };
+};
 
-  // 生成单数据区域样式
-  const generateSingleAreaStyle = () => {
-    if (!props.showAreaColor) return undefined
+// 生成单数据区域样式
+const generateSingleAreaStyle = () => {
+  if (!props.showAreaColor) return undefined;
 
-    const color = getColor(props.colors[0])
-    return {
-      color: new graphic.LinearGradient(0, 0, 0, 1, [
-        {
-          offset: 0,
-          color: hexToRgba(color, 0.2).rgba
-        },
-        {
-          offset: 1,
-          color: hexToRgba(color, 0.02).rgba
-        }
-      ])
-    }
-  }
+  const color = getColor(props.colors[0]);
+  return {
+    color: new graphic.LinearGradient(0, 0, 0, 1, [
+      {
+        offset: 0,
+        color: hexToRgba(color, 0.2).rgba,
+      },
+      {
+        offset: 1,
+        color: hexToRgba(color, 0.02).rgba,
+      },
+    ]),
+  };
+};
 
-  // 创建系列配置
-  const createSeriesItem = (config: {
-    name?: string
-    data: number[]
-    color?: string
-    smooth?: boolean
-    symbol?: string
-    symbolSize?: number
-    lineWidth?: number
-    areaStyle?: any
-  }) => {
-    return {
-      name: config.name,
-      data: config.data,
-      type: 'line' as const,
+// 创建系列配置
+const createSeriesItem = (config: {
+  name?: string;
+  data: number[];
+  color?: string;
+  smooth?: boolean;
+  symbol?: string;
+  symbolSize?: number;
+  lineWidth?: number;
+  areaStyle?: any;
+}) => {
+  return {
+    name: config.name,
+    data: config.data,
+    type: "line" as const,
+    color: config.color,
+    smooth: config.smooth ?? props.smooth,
+    symbol: config.symbol ?? props.symbol,
+    symbolSize: config.symbolSize ?? props.symbolSize,
+    lineStyle: {
+      width: config.lineWidth ?? props.lineWidth,
       color: config.color,
-      smooth: config.smooth ?? props.smooth,
-      symbol: config.symbol ?? props.symbol,
-      symbolSize: config.symbolSize ?? props.symbolSize,
-      lineStyle: {
-        width: config.lineWidth ?? props.lineWidth,
-        color: config.color
-      },
-      areaStyle: config.areaStyle,
-      emphasis: {
-        focus: 'series' as const,
-        lineStyle: {
-          width: (config.lineWidth ?? props.lineWidth) + 1
-        }
-      }
-    }
-  }
-
-  // 生成图表配置
-  const generateChartOptions = (isInitial = false): EChartsOption => {
-    const options: EChartsOption = {
-      animation: true,
-      animationDuration: isInitial ? 0 : 1300,
-      animationDurationUpdate: isInitial ? 0 : 1300,
-      grid: getGridWithLegend(props.showLegend && isMultipleData.value, props.legendPosition, {
-        top: 15,
-        right: 15,
-        left: 0
-      }),
-      tooltip: props.showTooltip ? getTooltipStyle() : undefined,
-      xAxis: {
-        type: 'category',
-        boundaryGap: false,
-        data: props.xAxisData,
-        axisTick: getAxisTickStyle(),
-        axisLine: getAxisLineStyle(props.showAxisLine),
-        axisLabel: getAxisLabelStyle(props.showAxisLabel)
-      },
-      yAxis: {
-        type: 'value',
-        min: 0,
-        max: maxValue.value,
-        axisLabel: getAxisLabelStyle(props.showAxisLabel),
-        axisLine: getAxisLineStyle(props.showAxisLine),
-        splitLine: getSplitLineStyle(props.showSplitLine)
-      }
-    }
-
-    // 添加图例配置
-    if (props.showLegend && isMultipleData.value) {
-      options.legend = getLegendStyle(props.legendPosition)
-    }
-
-    // 生成系列数据
-    if (isMultipleData.value) {
-      const multiData = animatedData.value as LineDataItem[]
-      options.series = multiData.map((item, index) => {
-        const itemColor = getColor(props.colors[index], index)
-        const areaStyle = generateAreaStyle(item, itemColor)
-
-        return createSeriesItem({
-          name: item.name,
-          data: item.data,
-          color: itemColor,
-          smooth: item.smooth,
-          symbol: item.symbol,
-          lineWidth: item.lineWidth,
-          areaStyle
-        })
-      })
-    } else {
-      // 单数据情况
-      const singleData = animatedData.value as number[]
-      const computedColor = getColor(props.colors[0])
-      const areaStyle = generateSingleAreaStyle()
-
-      options.series = [
-        createSeriesItem({
-          data: singleData,
-          color: computedColor,
-          areaStyle
-        })
-      ]
-    }
-
-    return options
-  }
-
-  // 更新图表
-  const updateChartOptions = (options: EChartsOption) => {
-    initChart(options)
-  }
-
-  // 初始化动画函数（优化：统一定时器管理，减少内存泄漏风险）
-  const initChartWithAnimation = () => {
-    clearAnimationTimers()
-    isAnimating.value = true
-
-    // 初始化为0值数据
-    animatedData.value = initAnimationData()
-    updateChartOptions(generateChartOptions(true))
-
-    if (isMultipleData.value) {
-      // 多数据阶梯式动画
-      const multiData = props.data as LineDataItem[]
-      const currentAnimatedData = animatedData.value as LineDataItem[]
-
-      multiData.forEach((item, index) => {
-        const timer = window.setTimeout(
-          () => {
-            currentAnimatedData[index] = { ...item, data: [...item.data] }
-            animatedData.value = [...currentAnimatedData]
-            updateChartOptions(generateChartOptions(false))
-          },
-          index * props.animationDelay + 100
-        )
-
-        animationTimers.value.push(timer)
-      })
-
-      // 标记动画完成
-      const totalDelay = (multiData.length - 1) * props.animationDelay + 1500
-      const finishTimer = window.setTimeout(() => {
-        isAnimating.value = false
-      }, totalDelay)
-      animationTimers.value.push(finishTimer)
-    } else {
-      // 单数据简单动画 - 使用 nextTick 确保初始状态已渲染
-      nextTick(() => {
-        animatedData.value = copyRealData()
-        updateChartOptions(generateChartOptions(false))
-        isAnimating.value = false
-      })
-    }
-  }
-
-  // 空数据检查函数
-  const checkIsEmpty = () => {
-    // 检查单数据情况
-    if (Array.isArray(props.data) && typeof props.data[0] === 'number') {
-      const singleData = props.data as number[]
-      return !singleData.length || singleData.every((val) => val === 0)
-    }
-
-    // 检查多数据情况
-    if (Array.isArray(props.data) && typeof props.data[0] === 'object') {
-      const multiData = props.data as LineDataItem[]
-      return (
-        !multiData.length ||
-        multiData.every((item) => !item.data?.length || item.data.every((val) => val === 0))
-      )
-    }
-
-    return true
-  }
-
-  // 使用新的图表组件抽象
-  const {
-    chartRef,
-    initChart,
-    getAxisLineStyle,
-    getAxisLabelStyle,
-    getAxisTickStyle,
-    getSplitLineStyle,
-    getTooltipStyle,
-    getLegendStyle,
-    getGridWithLegend,
-    isEmpty
-  } = useChartComponent({
-    props,
-    checkEmpty: checkIsEmpty,
-    watchSources: [() => props.data, () => props.xAxisData, () => props.colors],
-    onVisible: () => {
-      // 当图表变为可见时，检查是否为空数据
-      if (!isEmpty.value) {
-        initChartWithAnimation()
-      }
     },
-    generateOptions: () => generateChartOptions(false)
-  })
+    areaStyle: config.areaStyle,
+    emphasis: {
+      focus: "series" as const,
+      lineStyle: {
+        width: (config.lineWidth ?? props.lineWidth) + 1,
+      },
+    },
+  };
+};
 
-  // 图表渲染函数（优化：防止动画期间重复触发）
-  const renderChart = () => {
-    if (!isAnimating.value && !isEmpty.value) {
-      initChartWithAnimation()
-    }
+// 生成图表配置
+const generateChartOptions = (isInitial = false): EChartsOption => {
+  const options: EChartsOption = {
+    animation: true,
+    animationDuration: isInitial ? 0 : 1300,
+    animationDurationUpdate: isInitial ? 0 : 1300,
+    grid: getGridWithLegend(props.showLegend && isMultipleData.value, props.legendPosition, {
+      top: 15,
+      right: 15,
+      left: 0,
+    }),
+    tooltip: props.showTooltip ? getTooltipStyle() : undefined,
+    xAxis: {
+      type: "category",
+      boundaryGap: false,
+      data: props.xAxisData,
+      axisTick: getAxisTickStyle(),
+      axisLine: getAxisLineStyle(props.showAxisLine),
+      axisLabel: getAxisLabelStyle(props.showAxisLabel),
+    },
+    yAxis: {
+      type: "value",
+      min: 0,
+      max: maxValue.value,
+      axisLabel: getAxisLabelStyle(props.showAxisLabel),
+      axisLine: getAxisLineStyle(props.showAxisLine),
+      splitLine: getSplitLineStyle(props.showSplitLine),
+    },
+  };
+
+  // 添加图例配置
+  if (props.showLegend && isMultipleData.value) {
+    options.legend = getLegendStyle(props.legendPosition);
   }
 
-  // 使用 VueUse 的 watchDebounced 优化数据监听（避免频繁更新）
-  watch([() => props.data, () => props.xAxisData, () => props.colors], renderChart, { deep: true })
+  // 生成系列数据
+  if (isMultipleData.value) {
+    const multiData = animatedData.value as LineDataItem[];
+    options.series = multiData.map((item, index) => {
+      const itemColor = getColor(props.colors[index], index);
+      const areaStyle = generateAreaStyle(item, itemColor);
 
-  // 生命周期
-  onMounted(() => {
-    renderChart()
-  })
+      return createSeriesItem({
+        name: item.name,
+        data: item.data,
+        color: itemColor,
+        smooth: item.smooth,
+        symbol: item.symbol,
+        lineWidth: item.lineWidth,
+        areaStyle,
+      });
+    });
+  } else {
+    // 单数据情况
+    const singleData = animatedData.value as number[];
+    const computedColor = getColor(props.colors[0]);
+    const areaStyle = generateSingleAreaStyle();
 
-  onBeforeUnmount(() => {
-    clearAnimationTimers()
-  })
+    options.series = [
+      createSeriesItem({
+        data: singleData,
+        color: computedColor,
+        areaStyle,
+      }),
+    ];
+  }
+
+  return options;
+};
+
+// 更新图表
+const updateChartOptions = (options: EChartsOption) => {
+  initChart(options);
+};
+
+// 初始化动画函数（优化：统一定时器管理，减少内存泄漏风险）
+const initChartWithAnimation = () => {
+  clearAnimationTimers();
+  isAnimating.value = true;
+
+  // 初始化为0值数据
+  animatedData.value = initAnimationData();
+  updateChartOptions(generateChartOptions(true));
+
+  if (isMultipleData.value) {
+    // 多数据阶梯式动画
+    const multiData = props.data as LineDataItem[];
+    const currentAnimatedData = animatedData.value as LineDataItem[];
+
+    multiData.forEach((item, index) => {
+      const timer = window.setTimeout(
+        () => {
+          currentAnimatedData[index] = { ...item, data: [...item.data] };
+          animatedData.value = [...currentAnimatedData];
+          updateChartOptions(generateChartOptions(false));
+        },
+        index * props.animationDelay + 100
+      );
+
+      animationTimers.value.push(timer);
+    });
+
+    // 标记动画完成
+    const totalDelay = (multiData.length - 1) * props.animationDelay + 1500;
+    const finishTimer = window.setTimeout(() => {
+      isAnimating.value = false;
+    }, totalDelay);
+    animationTimers.value.push(finishTimer);
+  } else {
+    // 单数据简单动画 - 使用 nextTick 确保初始状态已渲染
+    nextTick(() => {
+      animatedData.value = copyRealData();
+      updateChartOptions(generateChartOptions(false));
+      isAnimating.value = false;
+    });
+  }
+};
+
+// 空数据检查函数
+const checkIsEmpty = () => {
+  // 检查单数据情况
+  if (Array.isArray(props.data) && typeof props.data[0] === "number") {
+    const singleData = props.data as number[];
+    return !singleData.length || singleData.every((val) => val === 0);
+  }
+
+  // 检查多数据情况
+  if (Array.isArray(props.data) && typeof props.data[0] === "object") {
+    const multiData = props.data as LineDataItem[];
+    return (
+      !multiData.length ||
+      multiData.every((item) => !item.data?.length || item.data.every((val) => val === 0))
+    );
+  }
+
+  return true;
+};
+
+// 使用新的图表组件抽象
+const {
+  chartRef,
+  initChart,
+  getAxisLineStyle,
+  getAxisLabelStyle,
+  getAxisTickStyle,
+  getSplitLineStyle,
+  getTooltipStyle,
+  getLegendStyle,
+  getGridWithLegend,
+  isEmpty,
+} = useChartComponent({
+  props,
+  checkEmpty: checkIsEmpty,
+  watchSources: [() => props.data, () => props.xAxisData, () => props.colors],
+  onVisible: () => {
+    // 当图表变为可见时，检查是否为空数据
+    if (!isEmpty.value) {
+      initChartWithAnimation();
+    }
+  },
+  generateOptions: () => generateChartOptions(false),
+});
+
+// 图表渲染函数（优化：防止动画期间重复触发）
+const renderChart = () => {
+  if (!isAnimating.value && !isEmpty.value) {
+    initChartWithAnimation();
+  }
+};
+
+// 使用 VueUse 的 watchDebounced 优化数据监听（避免频繁更新）
+watch([() => props.data, () => props.xAxisData, () => props.colors], renderChart, { deep: true });
+
+// 生命周期
+onMounted(() => {
+  renderChart();
+});
+
+onBeforeUnmount(() => {
+  clearAnimationTimers();
+});
 </script>
diff --git a/frontend/new-web/src/components/core/charts/art-map-chart/index.vue b/frontend/new-web/src/components/core/charts/art-map-chart/index.vue
index ae1bd0b6..f4518178 100644
--- a/frontend/new-web/src/components/core/charts/art-map-chart/index.vue
+++ b/frontend/new-web/src/components/core/charts/art-map-chart/index.vue
@@ -10,282 +10,280 @@
 </template>
 
 <script setup lang="ts">
-  import { echarts } from '@/plugins/echarts'
-  import { useSettingStore } from '@/store/modules/setting'
-  import chinaMapJson from '@/mock/json/chinaMap.json'
-  import type { MapChartProps } from '@/types/component/chart'
+import { echarts } from "@/plugins/echarts";
+import { useSettingsStore } from "@/store/modules/setting.store";
+import chinaMapJson from "@/mock/json/chinaMap.json";
+import type { MapChartProps } from "@/types/component/chart";
 
-  defineOptions({ name: 'ArtMapChart' })
+defineOptions({ name: "ArtMapChart" });
 
-  const chinaMapRef = ref<HTMLElement | null>(null)
-  const chartInstance = shallowRef<echarts.ECharts | null>(null)
-  const settingStore = useSettingStore()
-  const { isDark } = storeToRefs(settingStore)
+const chinaMapRef = ref<HTMLElement | null>(null);
+const chartInstance = shallowRef<echarts.ECharts | null>(null);
+const settingStore = useSettingsStore();
+const { isDark } = storeToRefs(settingStore);
 
-  const props = withDefaults(defineProps<MapChartProps>(), {
-    mapData: () => [],
-    selectedRegion: '',
-    showLabels: true,
-    showScatter: true,
-    isEmpty: false
-  })
+const props = withDefaults(defineProps<MapChartProps>(), {
+  mapData: () => [],
+  selectedRegion: "",
+  showLabels: true,
+  showScatter: true,
+  isEmpty: false,
+});
 
-  // 定义 emit
-  const emit = defineEmits<{
-    renderComplete: []
-    regionClick: [region: { name: string; adcode: string; level: string }]
-  }>()
+// 定义 emit
+const emit = defineEmits<{
+  renderComplete: [];
+  regionClick: [region: { name: string; adcode: string; level: string }];
+}>();
 
-  // 检查是否为空数据
-  const isEmpty = computed(() => {
-    return props.isEmpty || (!props.mapData?.length && !chinaMapJson)
-  })
+// 检查是否为空数据
+const isEmpty = computed(() => {
+  return props.isEmpty || (!props.mapData?.length && !chinaMapJson);
+});
 
-  // 根据 geoJson 数据准备地图数据
-  const prepareMapData = (geoJson: {
-    features: Array<{ properties: Record<string, unknown> }>
-  }) => {
-    return geoJson.features.map((feature) => ({
-      name: feature.properties.name as string,
-      value: Math.round(Math.random() * 1000),
-      adcode: feature.properties.adcode as string,
-      level: feature.properties.level as string,
-      selected: false
-    }))
-  }
+// 根据 geoJson 数据准备地图数据
+const prepareMapData = (geoJson: { features: Array<{ properties: Record<string, unknown> }> }) => {
+  return geoJson.features.map((feature) => ({
+    name: feature.properties.name as string,
+    value: Math.round(Math.random() * 1000),
+    adcode: feature.properties.adcode as string,
+    level: feature.properties.level as string,
+    selected: false,
+  }));
+};
 
-  // 获取主题相关的样式配置
-  const getThemeStyles = () => ({
-    borderColor: isDark.value ? 'rgba(255,255,255,0.6)' : 'rgba(147,235,248,1)',
-    shadowColor: isDark.value ? 'rgba(0,0,0,0.8)' : 'rgba(128,217,248,1)',
-    labelColor: isDark.value ? '#fff' : '#333',
-    backgroundColor: isDark.value ? 'rgba(0,0,0,0.8)' : 'rgba(255,255,255,0.9)'
-  })
+// 获取主题相关的样式配置
+const getThemeStyles = () => ({
+  borderColor: isDark.value ? "rgba(255,255,255,0.6)" : "rgba(147,235,248,1)",
+  shadowColor: isDark.value ? "rgba(0,0,0,0.8)" : "rgba(128,217,248,1)",
+  labelColor: isDark.value ? "#fff" : "#333",
+  backgroundColor: isDark.value ? "rgba(0,0,0,0.8)" : "rgba(255,255,255,0.9)",
+});
 
-  // 构造 ECharts 配置项
-  const createChartOption = (mapData: Array<Record<string, unknown>>) => {
-    const themeStyles = getThemeStyles()
+// 构造 ECharts 配置项
+const createChartOption = (mapData: Array<Record<string, unknown>>) => {
+  const themeStyles = getThemeStyles();
 
-    return {
-      animation: false, // 关闭动画效果，减少鼠标移动高亮时的掉帧感
-      tooltip: {
-        show: true,
-        backgroundColor: themeStyles.backgroundColor,
-        borderColor: isDark.value ? '#333' : '#ddd',
-        borderWidth: 1,
-        textStyle: {
-          color: themeStyles.labelColor
-        },
-        formatter: ({ data }: { data?: Record<string, unknown> }) => {
-          const { name, adcode, level } = data || {}
-          return `
-            <div style="padding: 8px;">
-              <div><strong>名称:</strong> ${name || '未知区域'}</div>
-              <div><strong>代码:</strong> ${adcode || '暂无'}</div>
-              <div><strong>级别:</strong> ${level || '暂无'}</div>
-            </div>
-          `
-        }
+  return {
+    animation: false, // 关闭动画效果，减少鼠标移动高亮时的掉帧感
+    tooltip: {
+      show: true,
+      backgroundColor: themeStyles.backgroundColor,
+      borderColor: isDark.value ? "#333" : "#ddd",
+      borderWidth: 1,
+      textStyle: {
+        color: themeStyles.labelColor,
       },
-      geo: {
-        map: 'china',
-        zoom: 1,
-        show: true,
-        roam: false,
-        scaleLimit: {
-          min: 0.8,
-          max: 3
+      formatter: ({ data }: { data?: Record<string, unknown> }) => {
+        const { name, adcode, level } = data || {};
+        return `
+            <div style="padding: 8px;">
+              <div><strong>名称:</strong> ${name || "未知区域"}</div>
+              <div><strong>代码:</strong> ${adcode || "暂无"}</div>
+              <div><strong>级别:</strong> ${level || "暂无"}</div>
+            </div>
+          `;
+      },
+    },
+    geo: {
+      map: "china",
+      zoom: 1,
+      show: true,
+      roam: false,
+      scaleLimit: {
+        min: 0.8,
+        max: 3,
+      },
+      layoutSize: "100%",
+      emphasis: {
+        label: { show: props.showLabels },
+        itemStyle: {
+          areaColor: "rgba(82,180,255,0.9)",
+          borderColor: "#fff",
+          borderWidth: 3,
         },
-        layoutSize: '100%',
-        emphasis: {
-          label: { show: props.showLabels },
-          itemStyle: {
-            areaColor: 'rgba(82,180,255,0.9)',
-            borderColor: '#fff',
-            borderWidth: 3
-          }
+      },
+      itemStyle: {
+        borderColor: themeStyles.borderColor,
+        borderWidth: 2,
+        shadowColor: themeStyles.shadowColor,
+        shadowOffsetX: 2,
+        shadowOffsetY: 15,
+        shadowBlur: 15,
+      },
+    },
+    series: [
+      {
+        type: "map",
+        map: "china",
+        aspectScale: 0.75,
+        zoom: 1,
+        label: {
+          show: props.showLabels,
+          color: "#fff",
+          fontSize: 10,
         },
         itemStyle: {
-          borderColor: themeStyles.borderColor,
+          borderColor: "rgba(147,235,248,0.8)",
           borderWidth: 2,
-          shadowColor: themeStyles.shadowColor,
-          shadowOffsetX: 2,
+          areaColor: {
+            type: "linear",
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              { offset: 0, color: "rgba(147,235,248,0.3)" },
+              { offset: 1, color: "rgba(32,120,207,0.9)" },
+            ],
+          },
+          shadowColor: "rgba(32,120,207,1)",
           shadowOffsetY: 15,
-          shadowBlur: 15
-        }
-      },
-      series: [
-        {
-          type: 'map',
-          map: 'china',
-          aspectScale: 0.75,
-          zoom: 1,
+          shadowBlur: 20,
+        },
+        emphasis: {
           label: {
-            show: props.showLabels,
-            color: '#fff',
-            fontSize: 10
+            show: true,
+            color: "#fff",
+            fontSize: 12,
           },
           itemStyle: {
-            borderColor: 'rgba(147,235,248,0.8)',
-            borderWidth: 2,
-            areaColor: {
-              type: 'linear',
-              x: 0,
-              y: 0,
-              x2: 0,
-              y2: 1,
-              colorStops: [
-                { offset: 0, color: 'rgba(147,235,248,0.3)' },
-                { offset: 1, color: 'rgba(32,120,207,0.9)' }
-              ]
-            },
-            shadowColor: 'rgba(32,120,207,1)',
-            shadowOffsetY: 15,
-            shadowBlur: 20
+            areaColor: "rgba(82,180,255,0.9)",
+            borderColor: "#fff",
+            borderWidth: 3,
           },
-          emphasis: {
-            label: {
-              show: true,
-              color: '#fff',
-              fontSize: 12
-            },
-            itemStyle: {
-              areaColor: 'rgba(82,180,255,0.9)',
-              borderColor: '#fff',
-              borderWidth: 3
-            }
-          },
-          select: {
-            label: {
-              show: true,
-              color: '#fff',
-              fontWeight: 'bold'
-            },
-            itemStyle: {
-              areaColor: '#4FAEFB',
-              borderColor: '#fff',
-              borderWidth: 2
-            }
-          },
-          data: mapData
         },
-        // 散点标记配置（例如：城市标记）
-        ...(props.showScatter
-          ? [
-              {
-                name: '城市',
-                type: 'scatter',
-                coordinateSystem: 'geo',
-                symbol: 'pin',
-                symbolSize: 15,
-                label: { show: false },
-                itemStyle: {
-                  color: '#F99020',
-                  shadowBlur: 10,
-                  shadowColor: '#333'
-                },
-                data: [
-                  { name: '北京', value: [116.405285, 39.904989, 100] },
-                  { name: '上海', value: [121.472644, 31.231706, 100] },
-                  { name: '深圳', value: [114.085947, 22.547, 100] }
-                ]
-              }
-            ]
-          : [])
-      ]
-    }
+        select: {
+          label: {
+            show: true,
+            color: "#fff",
+            fontWeight: "bold",
+          },
+          itemStyle: {
+            areaColor: "#4FAEFB",
+            borderColor: "#fff",
+            borderWidth: 2,
+          },
+        },
+        data: mapData,
+      },
+      // 散点标记配置（例如：城市标记）
+      ...(props.showScatter
+        ? [
+            {
+              name: "城市",
+              type: "scatter",
+              coordinateSystem: "geo",
+              symbol: "pin",
+              symbolSize: 15,
+              label: { show: false },
+              itemStyle: {
+                color: "#F99020",
+                shadowBlur: 10,
+                shadowColor: "#333",
+              },
+              data: [
+                { name: "北京", value: [116.405285, 39.904989, 100] },
+                { name: "上海", value: [121.472644, 31.231706, 100] },
+                { name: "深圳", value: [114.085947, 22.547, 100] },
+              ],
+            },
+          ]
+        : []),
+    ],
+  };
+};
+
+// 初始化并渲染地图
+const initMap = async (): Promise<void> => {
+  if (!chinaMapRef.value) return;
+
+  chartInstance.value = echarts.init(chinaMapRef.value);
+
+  echarts.registerMap("china", chinaMapJson as any);
+  const mapData = props.mapData.length > 0 ? props.mapData : prepareMapData(chinaMapJson);
+  const option = createChartOption(mapData);
+
+  chartInstance.value.setOption(option);
+
+  // 绑定事件
+  chartInstance.value.on("click", handleMapClick);
+
+  emit("renderComplete");
+};
+
+// 处理地图点击事件
+const handleMapClick = (params: Record<string, unknown>) => {
+  if (params.componentType === "series") {
+    const data = params.data as Record<string, unknown> | undefined;
+    const regionData = {
+      name: params.name as string,
+      adcode: (data?.adcode as string) || "",
+      level: (data?.level as string) || "",
+    };
+
+    console.log(`选中区域: ${params.name}`, params);
+
+    // 高亮选中区域
+    chartInstance.value?.dispatchAction({
+      type: "select",
+      seriesIndex: 0,
+      dataIndex: params.dataIndex as number,
+    });
+
+    emit("regionClick", regionData);
   }
+};
 
-  // 初始化并渲染地图
-  const initMap = async (): Promise<void> => {
-    if (!chinaMapRef.value) return
+// 窗口 resize 时调整图表大小
+const resizeChart = () => {
+  chartInstance.value?.resize();
+};
 
-    chartInstance.value = echarts.init(chinaMapRef.value)
-
-    echarts.registerMap('china', chinaMapJson as any)
-    const mapData = props.mapData.length > 0 ? props.mapData : prepareMapData(chinaMapJson)
-    const option = createChartOption(mapData)
-
-    chartInstance.value.setOption(option)
-
-    // 绑定事件
-    chartInstance.value.on('click', handleMapClick)
-
-    emit('renderComplete')
+// 处理组件销毁
+const cleanupChart = () => {
+  if (chartInstance.value) {
+    chartInstance.value.off("click", handleMapClick);
+    chartInstance.value.dispose();
+    chartInstance.value = null;
   }
+  window.removeEventListener("resize", resizeChart);
+};
 
-  // 处理地图点击事件
-  const handleMapClick = (params: Record<string, unknown>) => {
-    if (params.componentType === 'series') {
-      const data = params.data as Record<string, unknown> | undefined
-      const regionData = {
-        name: params.name as string,
-        adcode: (data?.adcode as string) || '',
-        level: (data?.level as string) || ''
+// 生命周期钩子
+onMounted(() => {
+  if (!isEmpty.value) {
+    initMap().then(() => {
+      setTimeout(resizeChart, 100);
+    });
+  }
+  window.addEventListener("resize", resizeChart);
+});
+
+onUnmounted(cleanupChart);
+
+// 监听主题变化，重新初始化地图
+watch(isDark, (newVal, oldVal) => {
+  if (newVal !== oldVal && chartInstance.value) {
+    cleanupChart();
+    nextTick(() => {
+      if (!isEmpty.value) {
+        initMap();
       }
-
-      console.log(`选中区域: ${params.name}`, params)
-
-      // 高亮选中区域
-      chartInstance.value?.dispatchAction({
-        type: 'select',
-        seriesIndex: 0,
-        dataIndex: params.dataIndex as number
-      })
-
-      emit('regionClick', regionData)
-    }
+    });
   }
+});
 
-  // 窗口 resize 时调整图表大小
-  const resizeChart = () => {
-    chartInstance.value?.resize()
-  }
-
-  // 处理组件销毁
-  const cleanupChart = () => {
-    if (chartInstance.value) {
-      chartInstance.value.off('click', handleMapClick)
-      chartInstance.value.dispose()
-      chartInstance.value = null
+// 监听数据变化
+watch(
+  () => props.mapData,
+  () => {
+    if (chartInstance.value && !isEmpty.value) {
+      const mapData = props.mapData.length > 0 ? props.mapData : prepareMapData(chinaMapJson);
+      const option = createChartOption(mapData);
+      chartInstance.value.setOption(option);
     }
-    window.removeEventListener('resize', resizeChart)
-  }
-
-  // 生命周期钩子
-  onMounted(() => {
-    if (!isEmpty.value) {
-      initMap().then(() => {
-        setTimeout(resizeChart, 100)
-      })
-    }
-    window.addEventListener('resize', resizeChart)
-  })
-
-  onUnmounted(cleanupChart)
-
-  // 监听主题变化，重新初始化地图
-  watch(isDark, (newVal, oldVal) => {
-    if (newVal !== oldVal && chartInstance.value) {
-      cleanupChart()
-      nextTick(() => {
-        if (!isEmpty.value) {
-          initMap()
-        }
-      })
-    }
-  })
-
-  // 监听数据变化
-  watch(
-    () => props.mapData,
-    () => {
-      if (chartInstance.value && !isEmpty.value) {
-        const mapData = props.mapData.length > 0 ? props.mapData : prepareMapData(chinaMapJson)
-        const option = createChartOption(mapData)
-        chartInstance.value.setOption(option)
-      }
-    },
-    { deep: true }
-  )
+  },
+  { deep: true }
+);
 </script>
diff --git a/frontend/new-web/src/components/core/charts/art-radar-chart/index.vue b/frontend/new-web/src/components/core/charts/art-radar-chart/index.vue
index e99fff64..ac6281cc 100644
--- a/frontend/new-web/src/components/core/charts/art-radar-chart/index.vue
+++ b/frontend/new-web/src/components/core/charts/art-radar-chart/index.vue
@@ -9,97 +9,97 @@
 </template>
 
 <script setup lang="ts">
-  import type { EChartsOption } from '@/plugins/echarts'
-  import { useChartOps, useChartComponent } from '@/hooks/core/useChart'
-  import type { RadarChartProps } from '@/types/component/chart'
+import type { EChartsOption } from "@/plugins/echarts";
+import { useChartOps, useChartComponent } from "@/hooks/core/useChart";
+import type { RadarChartProps } from "@/types/component/chart";
 
-  defineOptions({ name: 'ArtRadarChart' })
+defineOptions({ name: "ArtRadarChart" });
 
-  const props = withDefaults(defineProps<RadarChartProps>(), {
-    // 基础配置
-    height: useChartOps().chartHeight,
-    loading: false,
-    isEmpty: false,
-    colors: () => useChartOps().colors,
+const props = withDefaults(defineProps<RadarChartProps>(), {
+  // 基础配置
+  height: useChartOps().chartHeight,
+  loading: false,
+  isEmpty: false,
+  colors: () => useChartOps().colors,
 
-    // 数据配置
-    indicator: () => [],
-    data: () => [],
+  // 数据配置
+  indicator: () => [],
+  data: () => [],
 
-    // 交互配置
-    showTooltip: true,
-    showLegend: false,
-    legendPosition: 'bottom'
-  })
+  // 交互配置
+  showTooltip: true,
+  showLegend: false,
+  legendPosition: "bottom",
+});
 
-  // 使用新的图表组件抽象
-  const { chartRef, isDark, getAnimationConfig, getTooltipStyle } = useChartComponent({
-    props,
-    checkEmpty: () => {
-      return !props.data?.length || props.data.every((item) => item.value.every((val) => val === 0))
-    },
-    watchSources: [() => props.data, () => props.indicator, () => props.colors],
-    generateOptions: (): EChartsOption => {
-      return {
-        tooltip: props.showTooltip ? getTooltipStyle('item') : undefined,
-        radar: {
-          indicator: props.indicator,
-          center: ['50%', '50%'],
-          radius: '70%',
-          axisName: {
-            color: isDark.value ? '#ccc' : '#666',
-            fontSize: 12
-          },
-          splitLine: {
-            lineStyle: {
-              color: isDark.value ? '#444' : '#e6e6e6'
-            }
-          },
-          axisLine: {
-            lineStyle: {
-              color: isDark.value ? '#444' : '#e6e6e6'
-            }
-          },
-          splitArea: {
-            show: true,
-            areaStyle: {
-              color: isDark.value
-                ? ['rgba(255, 255, 255, 0.02)', 'rgba(255, 255, 255, 0.05)']
-                : ['rgba(0, 0, 0, 0.02)', 'rgba(0, 0, 0, 0.05)']
-            }
-          }
+// 使用新的图表组件抽象
+const { chartRef, isDark, getAnimationConfig, getTooltipStyle } = useChartComponent({
+  props,
+  checkEmpty: () => {
+    return !props.data?.length || props.data.every((item) => item.value.every((val) => val === 0));
+  },
+  watchSources: [() => props.data, () => props.indicator, () => props.colors],
+  generateOptions: (): EChartsOption => {
+    return {
+      tooltip: props.showTooltip ? getTooltipStyle("item") : undefined,
+      radar: {
+        indicator: props.indicator,
+        center: ["50%", "50%"],
+        radius: "70%",
+        axisName: {
+          color: isDark.value ? "#ccc" : "#666",
+          fontSize: 12,
         },
-        series: [
-          {
-            type: 'radar',
-            data: props.data.map((item, index) => ({
-              name: item.name,
-              value: item.value,
-              symbolSize: 4,
-              lineStyle: {
-                width: 2,
-                color: props.colors[index % props.colors.length]
-              },
-              itemStyle: {
-                color: props.colors[index % props.colors.length]
-              },
+        splitLine: {
+          lineStyle: {
+            color: isDark.value ? "#444" : "#e6e6e6",
+          },
+        },
+        axisLine: {
+          lineStyle: {
+            color: isDark.value ? "#444" : "#e6e6e6",
+          },
+        },
+        splitArea: {
+          show: true,
+          areaStyle: {
+            color: isDark.value
+              ? ["rgba(255, 255, 255, 0.02)", "rgba(255, 255, 255, 0.05)"]
+              : ["rgba(0, 0, 0, 0.02)", "rgba(0, 0, 0, 0.05)"],
+          },
+        },
+      },
+      series: [
+        {
+          type: "radar",
+          data: props.data.map((item, index) => ({
+            name: item.name,
+            value: item.value,
+            symbolSize: 4,
+            lineStyle: {
+              width: 2,
+              color: props.colors[index % props.colors.length],
+            },
+            itemStyle: {
+              color: props.colors[index % props.colors.length],
+            },
+            areaStyle: {
+              color: props.colors[index % props.colors.length],
+              opacity: 0.1,
+            },
+            emphasis: {
               areaStyle: {
-                color: props.colors[index % props.colors.length],
-                opacity: 0.1
+                opacity: 0.25,
               },
-              emphasis: {
-                areaStyle: {
-                  opacity: 0.25
-                },
-                lineStyle: {
-                  width: 3
-                }
-              }
-            })),
-            ...getAnimationConfig(200, 1800)
-          }
-        ]
-      }
-    }
-  })
+              lineStyle: {
+                width: 3,
+              },
+            },
+          })),
+          ...getAnimationConfig(200, 1800),
+        },
+      ],
+    };
+  },
+});
 </script>
diff --git a/frontend/new-web/src/components/core/charts/art-ring-chart/index.vue b/frontend/new-web/src/components/core/charts/art-ring-chart/index.vue
index 79115f70..2af59d9d 100644
--- a/frontend/new-web/src/components/core/charts/art-ring-chart/index.vue
+++ b/frontend/new-web/src/components/core/charts/art-ring-chart/index.vue
@@ -5,129 +5,129 @@
     class="relative w-full"
     :style="{ height: props.height }"
     v-loading="props.loading"
-  >
-  </div>
+  ></div>
 </template>
 
 <script setup lang="ts">
-  import type { EChartsOption } from '@/plugins/echarts'
-  import { useChartOps, useChartComponent } from '@/hooks/core/useChart'
-  import type { RingChartProps } from '@/types/component/chart'
+import type { EChartsOption } from "@/plugins/echarts";
+import { useChartOps, useChartComponent } from "@/hooks/core/useChart";
+import type { RingChartProps } from "@/types/component/chart";
 
-  defineOptions({ name: 'ArtRingChart' })
+defineOptions({ name: "ArtRingChart" });
 
-  const props = withDefaults(defineProps<RingChartProps>(), {
-    // 基础配置
-    height: useChartOps().chartHeight,
-    loading: false,
-    isEmpty: false,
-    colors: () => useChartOps().colors,
+const props = withDefaults(defineProps<RingChartProps>(), {
+  // 基础配置
+  height: useChartOps().chartHeight,
+  loading: false,
+  isEmpty: false,
+  colors: () => useChartOps().colors,
 
-    // 数据配置
-    data: () => [],
-    radius: () => ['50%', '80%'],
-    borderRadius: 10,
-    centerText: '',
-    showLabel: false,
+  // 数据配置
+  data: () => [],
+  radius: () => ["50%", "80%"],
+  borderRadius: 10,
+  centerText: "",
+  showLabel: false,
 
-    // 交互配置
-    showTooltip: true,
-    showLegend: false,
-    legendPosition: 'right'
-  })
+  // 交互配置
+  showTooltip: true,
+  showLegend: false,
+  legendPosition: "right",
+});
 
-  // 使用新的图表组件抽象
-  const { chartRef, isDark, getAnimationConfig, getTooltipStyle, getLegendStyle } =
-    useChartComponent({
-      props,
-      checkEmpty: () => {
-        return !props.data?.length || props.data.every((item) => item.value === 0)
-      },
-      watchSources: [() => props.data, () => props.centerText],
-      generateOptions: (): EChartsOption => {
-        // 根据图例位置计算环形图中心位置
-        const getCenterPosition = (): [string, string] => {
-          if (!props.showLegend) return ['50%', '50%']
+// 使用新的图表组件抽象
+const { chartRef, isDark, getAnimationConfig, getTooltipStyle, getLegendStyle } = useChartComponent(
+  {
+    props,
+    checkEmpty: () => {
+      return !props.data?.length || props.data.every((item) => item.value === 0);
+    },
+    watchSources: [() => props.data, () => props.centerText],
+    generateOptions: (): EChartsOption => {
+      // 根据图例位置计算环形图中心位置
+      const getCenterPosition = (): [string, string] => {
+        if (!props.showLegend) return ["50%", "50%"];
 
-          switch (props.legendPosition) {
-            case 'left':
-              return ['60%', '50%']
-            case 'right':
-              return ['40%', '50%']
-            case 'top':
-              return ['50%', '60%']
-            case 'bottom':
-              return ['50%', '40%']
-            default:
-              return ['50%', '50%']
-          }
+        switch (props.legendPosition) {
+          case "left":
+            return ["60%", "50%"];
+          case "right":
+            return ["40%", "50%"];
+          case "top":
+            return ["50%", "60%"];
+          case "bottom":
+            return ["50%", "40%"];
+          default:
+            return ["50%", "50%"];
         }
+      };
 
-        const option: EChartsOption = {
-          tooltip: props.showTooltip
-            ? getTooltipStyle('item', {
-                formatter: '{b}: {c} ({d}%)'
-              })
-            : undefined,
-          legend: props.showLegend ? getLegendStyle(props.legendPosition) : undefined,
-          series: [
-            {
-              name: '数据占比',
-              type: 'pie',
-              radius: props.radius,
-              center: getCenterPosition(),
-              avoidLabelOverlap: false,
-              itemStyle: {
-                borderRadius: props.borderRadius,
-                borderColor: isDark.value ? '#2c2c2c' : '#fff',
-                borderWidth: 0
-              },
+      const option: EChartsOption = {
+        tooltip: props.showTooltip
+          ? getTooltipStyle("item", {
+              formatter: "{b}: {c} ({d}%)",
+            })
+          : undefined,
+        legend: props.showLegend ? getLegendStyle(props.legendPosition) : undefined,
+        series: [
+          {
+            name: "数据占比",
+            type: "pie",
+            radius: props.radius,
+            center: getCenterPosition(),
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: props.borderRadius,
+              borderColor: isDark.value ? "#2c2c2c" : "#fff",
+              borderWidth: 0,
+            },
+            label: {
+              show: props.showLabel,
+              formatter: "{b}\n{d}%",
+              position: "outside",
+              color: isDark.value ? "#ccc" : "#999",
+              fontSize: 12,
+            },
+            emphasis: {
               label: {
-                show: props.showLabel,
-                formatter: '{b}\n{d}%',
-                position: 'outside',
-                color: isDark.value ? '#ccc' : '#999',
-                fontSize: 12
+                show: false,
+                fontSize: 14,
+                fontWeight: "bold",
               },
-              emphasis: {
-                label: {
-                  show: false,
-                  fontSize: 14,
-                  fontWeight: 'bold'
-                }
-              },
-              labelLine: {
-                show: props.showLabel,
-                length: 15,
-                length2: 25,
-                smooth: true
-              },
-              data: props.data,
-              color: props.colors,
-              ...getAnimationConfig(),
-              animationType: 'expansion'
-            }
-          ]
-        }
+            },
+            labelLine: {
+              show: props.showLabel,
+              length: 15,
+              length2: 25,
+              smooth: true,
+            },
+            data: props.data,
+            color: props.colors,
+            ...getAnimationConfig(),
+            animationType: "expansion",
+          },
+        ],
+      };
 
-        // 添加中心文字
-        if (props.centerText) {
-          const centerPos = getCenterPosition()
-          option.title = {
-            text: props.centerText,
-            left: centerPos[0],
-            top: centerPos[1],
-            textAlign: 'center',
-            textVerticalAlign: 'middle',
-            textStyle: {
-              fontSize: 18,
-              fontWeight: 500,
-              color: isDark.value ? '#999' : '#ADB0BC'
-            }
-          }
-        }
-
-        return option
+      // 添加中心文字
+      if (props.centerText) {
+        const centerPos = getCenterPosition();
+        option.title = {
+          text: props.centerText,
+          left: centerPos[0],
+          top: centerPos[1],
+          textAlign: "center",
+          textVerticalAlign: "middle",
+          textStyle: {
+            fontSize: 18,
+            fontWeight: 500,
+            color: isDark.value ? "#999" : "#ADB0BC",
+          },
+        };
       }
-    })
+
+      return option;
+    },
+  }
+);
 </script>
diff --git a/frontend/new-web/src/components/core/charts/art-scatter-chart/index.vue b/frontend/new-web/src/components/core/charts/art-scatter-chart/index.vue
index 995b56a1..857fe782 100644
--- a/frontend/new-web/src/components/core/charts/art-scatter-chart/index.vue
+++ b/frontend/new-web/src/components/core/charts/art-scatter-chart/index.vue
@@ -5,111 +5,110 @@
     class="relative w-full"
     :style="{ height: props.height }"
     v-loading="props.loading"
-  >
-  </div>
+  ></div>
 </template>
 
 <script setup lang="ts">
-  import type { EChartsOption } from '@/plugins/echarts'
-  import { getCssVar } from '@/utils/ui'
-  import { useChartOps, useChartComponent } from '@/hooks/core/useChart'
-  import type { ScatterChartProps } from '@/types/component/chart'
+import type { EChartsOption } from "@/plugins/echarts";
+import { getCssVar } from "@/utils/ui";
+import { useChartOps, useChartComponent } from "@/hooks/core/useChart";
+import type { ScatterChartProps } from "@/types/component/chart";
 
-  defineOptions({ name: 'ArtScatterChart' })
+defineOptions({ name: "ArtScatterChart" });
 
-  const props = withDefaults(defineProps<ScatterChartProps>(), {
-    // 基础配置
-    height: useChartOps().chartHeight,
-    loading: false,
-    isEmpty: false,
-    colors: () => useChartOps().colors,
+const props = withDefaults(defineProps<ScatterChartProps>(), {
+  // 基础配置
+  height: useChartOps().chartHeight,
+  loading: false,
+  isEmpty: false,
+  colors: () => useChartOps().colors,
 
-    // 数据配置
-    data: () => [{ value: [0, 0] }, { value: [0, 0] }],
-    symbolSize: 14,
+  // 数据配置
+  data: () => [{ value: [0, 0] }, { value: [0, 0] }],
+  symbolSize: 14,
 
-    // 轴线显示配置
-    showAxisLabel: true,
-    showAxisLine: true,
-    showSplitLine: true,
+  // 轴线显示配置
+  showAxisLabel: true,
+  showAxisLine: true,
+  showSplitLine: true,
 
-    // 交互配置
-    showTooltip: true,
-    showLegend: false,
-    legendPosition: 'bottom'
-  })
+  // 交互配置
+  showTooltip: true,
+  showLegend: false,
+  legendPosition: "bottom",
+});
 
-  // 使用新的图表组件抽象
-  const {
-    chartRef,
-    isDark,
-    getAxisLineStyle,
-    getAxisLabelStyle,
-    getAxisTickStyle,
-    getSplitLineStyle,
-    getAnimationConfig,
-    getTooltipStyle
-  } = useChartComponent({
-    props,
-    checkEmpty: () => {
-      return !props.data?.length || props.data.every((item) => item.value.every((val) => val === 0))
-    },
-    watchSources: [() => props.data, () => props.colors, () => props.symbolSize],
-    generateOptions: (): EChartsOption => {
-      const computedColor = props.colors[0] || getCssVar('--el-color-primary')
+// 使用新的图表组件抽象
+const {
+  chartRef,
+  isDark,
+  getAxisLineStyle,
+  getAxisLabelStyle,
+  getAxisTickStyle,
+  getSplitLineStyle,
+  getAnimationConfig,
+  getTooltipStyle,
+} = useChartComponent({
+  props,
+  checkEmpty: () => {
+    return !props.data?.length || props.data.every((item) => item.value.every((val) => val === 0));
+  },
+  watchSources: [() => props.data, () => props.colors, () => props.symbolSize],
+  generateOptions: (): EChartsOption => {
+    const computedColor = props.colors[0] || getCssVar("--el-color-primary");
 
-      return {
-        grid: {
-          top: 20,
-          right: 20,
-          bottom: 20,
-          left: 20,
-          containLabel: true
-        },
-        tooltip: props.showTooltip
-          ? getTooltipStyle('item', {
-              formatter: (params: { value: [number, number] }) => {
-                const [x, y] = params.value
-                return `X: ${x}<br/>Y: ${y}`
-              }
-            })
-          : undefined,
-        xAxis: {
-          type: 'value',
-          axisLabel: getAxisLabelStyle(props.showAxisLabel),
-          axisLine: getAxisLineStyle(props.showAxisLine),
-          axisTick: getAxisTickStyle(),
-          splitLine: getSplitLineStyle(props.showSplitLine)
-        },
-        yAxis: {
-          type: 'value',
-          axisLabel: getAxisLabelStyle(props.showAxisLabel),
-          axisLine: getAxisLineStyle(props.showAxisLine),
-          axisTick: getAxisTickStyle(),
-          splitLine: getSplitLineStyle(props.showSplitLine)
-        },
-        series: [
-          {
-            type: 'scatter',
-            data: props.data,
-            symbolSize: props.symbolSize,
+    return {
+      grid: {
+        top: 20,
+        right: 20,
+        bottom: 20,
+        left: 20,
+        containLabel: true,
+      },
+      tooltip: props.showTooltip
+        ? getTooltipStyle("item", {
+            formatter: (params: { value: [number, number] }) => {
+              const [x, y] = params.value;
+              return `X: ${x}<br/>Y: ${y}`;
+            },
+          })
+        : undefined,
+      xAxis: {
+        type: "value",
+        axisLabel: getAxisLabelStyle(props.showAxisLabel),
+        axisLine: getAxisLineStyle(props.showAxisLine),
+        axisTick: getAxisTickStyle(),
+        splitLine: getSplitLineStyle(props.showSplitLine),
+      },
+      yAxis: {
+        type: "value",
+        axisLabel: getAxisLabelStyle(props.showAxisLabel),
+        axisLine: getAxisLineStyle(props.showAxisLine),
+        axisTick: getAxisTickStyle(),
+        splitLine: getSplitLineStyle(props.showSplitLine),
+      },
+      series: [
+        {
+          type: "scatter",
+          data: props.data,
+          symbolSize: props.symbolSize,
+          itemStyle: {
+            color: computedColor,
+            shadowBlur: 6,
+            shadowColor: isDark.value ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)",
+            shadowOffsetY: 2,
+          },
+          emphasis: {
             itemStyle: {
-              color: computedColor,
-              shadowBlur: 6,
-              shadowColor: isDark.value ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)',
-              shadowOffsetY: 2
+              shadowBlur: 12,
+              shadowColor: isDark.value ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.2)",
             },
-            emphasis: {
-              itemStyle: {
-                shadowBlur: 12,
-                shadowColor: isDark.value ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)'
-              },
-              scale: true
-            },
-            ...getAnimationConfig()
-          }
-        ]
-      }
-    }
-  })
+            scale: true,
+          },
+          ...getAnimationConfig(),
+        },
+      ],
+    };
+  },
+});
 </script>
diff --git a/frontend/new-web/src/components/core/forms/art-button-more/index.vue b/frontend/new-web/src/components/core/forms/art-button-more/index.vue
index 858d3059..e74017f9 100644
--- a/frontend/new-web/src/components/core/forms/art-button-more/index.vue
+++ b/frontend/new-web/src/components/core/forms/art-button-more/index.vue
@@ -24,48 +24,48 @@
 </template>
 
 <script setup lang="ts">
-  import { useAuth } from '@/hooks/core/useAuth'
+import { useAuth } from "@/hooks/core/useAuth";
 
-  defineOptions({ name: 'ArtButtonMore' })
+defineOptions({ name: "ArtButtonMore" });
 
-  const { hasAuth } = useAuth()
+const { hasAuth } = useAuth();
 
-  export interface ButtonMoreItem {
-    /** 按钮标识，可用于点击事件 */
-    key: string | number
-    /** 按钮文本 */
-    label: string
-    /** 是否禁用 */
-    disabled?: boolean
-    /** 权限标识 */
-    auth?: string
-    /** 图标组件 */
-    icon?: string
-    /** 文本颜色 */
-    color?: string
-    /** 图标颜色（优先级高于 color） */
-    iconColor?: string
-  }
+export interface ButtonMoreItem {
+  /** 按钮标识，可用于点击事件 */
+  key: string | number;
+  /** 按钮文本 */
+  label: string;
+  /** 是否禁用 */
+  disabled?: boolean;
+  /** 权限标识 */
+  auth?: string;
+  /** 图标组件 */
+  icon?: string;
+  /** 文本颜色 */
+  color?: string;
+  /** 图标颜色（优先级高于 color） */
+  iconColor?: string;
+}
 
-  interface Props {
-    /** 下拉项列表 */
-    list: ButtonMoreItem[]
-    /** 整体权限控制 */
-    auth?: string
-  }
+interface Props {
+  /** 下拉项列表 */
+  list: ButtonMoreItem[];
+  /** 整体权限控制 */
+  auth?: string;
+}
 
-  const props = withDefaults(defineProps<Props>(), {})
+const props = withDefaults(defineProps<Props>(), {});
 
-  // 检查是否有任何有权限的 item
-  const hasAnyAuthItem = computed(() => {
-    return props.list.some((item) => !item.auth || hasAuth(item.auth))
-  })
+// 检查是否有任何有权限的 item
+const hasAnyAuthItem = computed(() => {
+  return props.list.some((item) => !item.auth || hasAuth(item.auth));
+});
 
-  const emit = defineEmits<{
-    (e: 'click', item: ButtonMoreItem): void
-  }>()
+const emit = defineEmits<{
+  (e: "click", item: ButtonMoreItem): void;
+}>();
 
-  const handleClick = (item: ButtonMoreItem) => {
-    emit('click', item)
-  }
+const handleClick = (item: ButtonMoreItem) => {
+  emit("click", item);
+};
 </script>
diff --git a/frontend/new-web/src/components/core/forms/art-button-table/index.vue b/frontend/new-web/src/components/core/forms/art-button-table/index.vue
index c849901d..a4dbd39f 100644
--- a/frontend/new-web/src/components/core/forms/art-button-table/index.vue
+++ b/frontend/new-web/src/components/core/forms/art-button-table/index.vue
@@ -3,7 +3,7 @@
   <div
     :class="[
       'inline-flex items-center justify-center min-w-8 h-8 px-2.5 mr-2.5 text-sm c-p rounded-md align-middle',
-      buttonClass
+      buttonClass,
     ]"
     :style="{ backgroundColor: buttonBgColor, color: iconColor }"
     @click="handleClick"
@@ -13,47 +13,47 @@
 </template>
 
 <script setup lang="ts">
-  defineOptions({ name: 'ArtButtonTable' })
+defineOptions({ name: "ArtButtonTable" });
 
-  interface Props {
-    /** 按钮类型 */
-    type?: 'add' | 'edit' | 'delete' | 'more' | 'view'
-    /** 按钮图标 */
-    icon?: string
-    /** 按钮样式类 */
-    iconClass?: string
-    /** icon 颜色 */
-    iconColor?: string
-    /** 按钮背景色 */
-    buttonBgColor?: string
-  }
+interface Props {
+  /** 按钮类型 */
+  type?: "add" | "edit" | "delete" | "more" | "view";
+  /** 按钮图标 */
+  icon?: string;
+  /** 按钮样式类 */
+  iconClass?: string;
+  /** icon 颜色 */
+  iconColor?: string;
+  /** 按钮背景色 */
+  buttonBgColor?: string;
+}
 
-  const props = withDefaults(defineProps<Props>(), {})
+const props = withDefaults(defineProps<Props>(), {});
 
-  const emit = defineEmits<{
-    (e: 'click'): void
-  }>()
+const emit = defineEmits<{
+  (e: "click"): void;
+}>();
 
-  // 默认按钮配置
-  const defaultButtons = {
-    add: { icon: 'ri:add-fill', class: 'bg-theme/12 text-theme' },
-    edit: { icon: 'ri:pencil-line', class: 'bg-secondary/12 text-secondary' },
-    delete: { icon: 'ri:delete-bin-5-line', class: 'bg-error/12 text-error' },
-    view: { icon: 'ri:eye-line', class: 'bg-info/12 text-info' },
-    more: { icon: 'ri:more-2-fill', class: '' }
-  } as const
+// 默认按钮配置
+const defaultButtons = {
+  add: { icon: "ri:add-fill", class: "bg-theme/12 text-theme" },
+  edit: { icon: "ri:pencil-line", class: "bg-secondary/12 text-secondary" },
+  delete: { icon: "ri:delete-bin-5-line", class: "bg-error/12 text-error" },
+  view: { icon: "ri:eye-line", class: "bg-info/12 text-info" },
+  more: { icon: "ri:more-2-fill", class: "" },
+} as const;
 
-  // 获取图标内容
-  const iconContent = computed(() => {
-    return props.icon || (props.type ? defaultButtons[props.type]?.icon : '') || ''
-  })
+// 获取图标内容
+const iconContent = computed(() => {
+  return props.icon || (props.type ? defaultButtons[props.type]?.icon : "") || "";
+});
 
-  // 获取按钮样式类
-  const buttonClass = computed(() => {
-    return props.iconClass || (props.type ? defaultButtons[props.type]?.class : '') || ''
-  })
+// 获取按钮样式类
+const buttonClass = computed(() => {
+  return props.iconClass || (props.type ? defaultButtons[props.type]?.class : "") || "";
+});
 
-  const handleClick = () => {
-    emit('click')
-  }
+const handleClick = () => {
+  emit("click");
+};
 </script>
diff --git a/frontend/new-web/src/components/core/forms/art-drag-verify/index.vue b/frontend/new-web/src/components/core/forms/art-drag-verify/index.vue
index 5306e04e..95330054 100644
--- a/frontend/new-web/src/components/core/forms/art-drag-verify/index.vue
+++ b/frontend/new-web/src/components/core/forms/art-drag-verify/index.vue
@@ -16,8 +16,7 @@
       :class="{ goFirst2: isOk }"
       ref="progressBar"
       :style="progressBarStyle"
-    >
-    </div>
+    ></div>
 
     <!-- 提示文本 -->
     <div class="dv_text" :style="textStyle" ref="messageRef">
@@ -41,390 +40,390 @@
 </template>
 
 <script setup lang="ts">
-  defineOptions({ name: 'ArtDragVerify' })
+defineOptions({ name: "ArtDragVerify" });
 
-  // 事件定义
-  const emit = defineEmits(['handlerMove', 'update:value', 'passCallback'])
+// 事件定义
+const emit = defineEmits(["handlerMove", "update:value", "passCallback"]);
 
-  // 组件属性接口定义
-  interface PropsType {
-    /** 是否通过验证 */
-    value: boolean
-    /** 组件宽度 */
-    width?: number | string
-    /** 组件高度 */
-    height?: number
-    /** 默认提示文本 */
-    text?: string
-    /** 成功提示文本 */
-    successText?: string
-    /** 背景色 */
-    background?: string
-    /** 进度条背景色 */
-    progressBarBg?: string
-    /** 完成状态背景色 */
-    completedBg?: string
-    /** 是否圆角 */
-    circle?: boolean
-    /** 圆角大小 */
-    radius?: string
-    /** 滑块图标 */
-    handlerIcon?: string
-    /** 成功图标 */
-    successIcon?: string
-    /** 滑块背景色 */
-    handlerBg?: string
-    /** 文本大小 */
-    textSize?: string
-    /** 文本颜色 */
-    textColor?: string
+// 组件属性接口定义
+interface PropsType {
+  /** 是否通过验证 */
+  value: boolean;
+  /** 组件宽度 */
+  width?: number | string;
+  /** 组件高度 */
+  height?: number;
+  /** 默认提示文本 */
+  text?: string;
+  /** 成功提示文本 */
+  successText?: string;
+  /** 背景色 */
+  background?: string;
+  /** 进度条背景色 */
+  progressBarBg?: string;
+  /** 完成状态背景色 */
+  completedBg?: string;
+  /** 是否圆角 */
+  circle?: boolean;
+  /** 圆角大小 */
+  radius?: string;
+  /** 滑块图标 */
+  handlerIcon?: string;
+  /** 成功图标 */
+  successIcon?: string;
+  /** 滑块背景色 */
+  handlerBg?: string;
+  /** 文本大小 */
+  textSize?: string;
+  /** 文本颜色 */
+  textColor?: string;
+}
+
+// 属性默认值设置
+const props = withDefaults(defineProps<PropsType>(), {
+  value: false,
+  width: "100%",
+  height: 40,
+  text: "按住滑块拖动",
+  successText: "success",
+  background: "#eee",
+  progressBarBg: "#1385FF",
+  completedBg: "#57D187",
+  circle: false,
+  radius: "calc(var(--custom-radius) / 3 + 2px)",
+  handlerIcon: "solar:double-alt-arrow-right-linear",
+  successIcon: "ri:check-fill",
+  handlerBg: "#fff",
+  textSize: "13px",
+  textColor: "#333",
+});
+
+// 组件状态接口定义
+interface StateType {
+  isMoving: boolean; // 是否正在拖拽
+  x: number; // 拖拽起始位置
+  isOk: boolean; // 是否验证成功
+}
+
+// 响应式状态定义
+const state = reactive(<StateType>{
+  isMoving: false,
+  x: 0,
+  isOk: false,
+});
+
+// 解构响应式状态
+const { isOk } = toRefs(state);
+
+// DOM 元素引用
+const dragVerify = ref();
+const messageRef = ref();
+const handler = ref();
+const progressBar = ref();
+
+// 触摸事件变量 - 用于禁止页面滑动
+let startX: number, startY: number, moveX: number, moveY: number;
+
+/**
+ * 触摸开始事件处理
+ * @param e 触摸事件对象
+ */
+const onTouchStart = (e: any) => {
+  startX = e.targetTouches[0].pageX;
+  startY = e.targetTouches[0].pageY;
+};
+
+/**
+ * 触摸移动事件处理 - 判断是否为横向滑动，如果是则阻止默认行为
+ * @param e 触摸事件对象
+ */
+const onTouchMove = (e: any) => {
+  moveX = e.targetTouches[0].pageX;
+  moveY = e.targetTouches[0].pageY;
+
+  // 如果横向移动距离大于纵向移动距离，阻止默认行为（防止页面滑动）
+  if (Math.abs(moveX - startX) > Math.abs(moveY - startY)) {
+    e.preventDefault();
   }
+};
 
-  // 属性默认值设置
-  const props = withDefaults(defineProps<PropsType>(), {
-    value: false,
-    width: '100%',
-    height: 40,
-    text: '按住滑块拖动',
-    successText: 'success',
-    background: '#eee',
-    progressBarBg: '#1385FF',
-    completedBg: '#57D187',
-    circle: false,
-    radius: 'calc(var(--custom-radius) / 3 + 2px)',
-    handlerIcon: 'solar:double-alt-arrow-right-linear',
-    successIcon: 'ri:check-fill',
-    handlerBg: '#fff',
-    textSize: '13px',
-    textColor: '#333'
-  })
+// 全局事件监听器添加
+document.addEventListener("touchstart", onTouchStart);
+document.addEventListener("touchmove", onTouchMove, { passive: false });
 
-  // 组件状态接口定义
-  interface StateType {
-    isMoving: boolean // 是否正在拖拽
-    x: number // 拖拽起始位置
-    isOk: boolean // 是否验证成功
+// 获取数值形式的宽度
+const getNumericWidth = (): number => {
+  if (typeof props.width === "string") {
+    // 如果是字符串，尝试从DOM元素获取实际宽度
+    return dragVerify.value?.offsetWidth || 260;
   }
+  return props.width;
+};
 
-  // 响应式状态定义
-  const state = reactive(<StateType>{
-    isMoving: false,
-    x: 0,
-    isOk: false
-  })
-
-  // 解构响应式状态
-  const { isOk } = toRefs(state)
-
-  // DOM 元素引用
-  const dragVerify = ref()
-  const messageRef = ref()
-  const handler = ref()
-  const progressBar = ref()
-
-  // 触摸事件变量 - 用于禁止页面滑动
-  let startX: number, startY: number, moveX: number, moveY: number
-
-  /**
-   * 触摸开始事件处理
-   * @param e 触摸事件对象
-   */
-  const onTouchStart = (e: any) => {
-    startX = e.targetTouches[0].pageX
-    startY = e.targetTouches[0].pageY
+// 获取样式字符串形式的宽度
+const getStyleWidth = (): string => {
+  if (typeof props.width === "string") {
+    return props.width;
   }
+  return props.width + "px";
+};
 
-  /**
-   * 触摸移动事件处理 - 判断是否为横向滑动，如果是则阻止默认行为
-   * @param e 触摸事件对象
-   */
-  const onTouchMove = (e: any) => {
-    moveX = e.targetTouches[0].pageX
-    moveY = e.targetTouches[0].pageY
+// 组件挂载后的初始化
+onMounted(() => {
+  // 设置 CSS 自定义属性
+  dragVerify.value?.style.setProperty("--textColor", props.textColor);
 
-    // 如果横向移动距离大于纵向移动距离，阻止默认行为（防止页面滑动）
-    if (Math.abs(moveX - startX) > Math.abs(moveY - startY)) {
-      e.preventDefault()
+  // 等待DOM更新后设置宽度相关属性
+  nextTick(() => {
+    const numericWidth = getNumericWidth();
+    dragVerify.value?.style.setProperty("--width", Math.floor(numericWidth / 2) + "px");
+    dragVerify.value?.style.setProperty("--pwidth", -Math.floor(numericWidth / 2) + "px");
+  });
+
+  // 重复添加事件监听器（确保事件绑定）
+  document.addEventListener("touchstart", onTouchStart);
+  document.addEventListener("touchmove", onTouchMove, { passive: false });
+});
+
+// 组件卸载前清理事件监听器
+onBeforeUnmount(() => {
+  document.removeEventListener("touchstart", onTouchStart);
+  document.removeEventListener("touchmove", onTouchMove);
+});
+
+// 滑块样式计算
+const handlerStyle = {
+  left: "0",
+  width: props.height + "px",
+  height: props.height + "px",
+  background: props.handlerBg,
+};
+
+// 主容器样式计算
+const dragVerifyStyle = computed(() => ({
+  width: getStyleWidth(),
+  height: props.height + "px",
+  lineHeight: props.height + "px",
+  background: props.background,
+  borderRadius: props.circle ? props.height / 2 + "px" : props.radius,
+}));
+
+// 进度条样式计算
+const progressBarStyle = {
+  background: props.progressBarBg,
+  height: props.height + "px",
+  borderRadius: props.circle
+    ? props.height / 2 + "px 0 0 " + props.height / 2 + "px"
+    : props.radius,
+};
+
+// 文本样式计算
+const textStyle = computed(() => ({
+  fontSize: props.textSize,
+}));
+
+// 显示消息计算属性
+const message = computed(() => {
+  return props.value ? props.successText : props.text;
+});
+
+/**
+ * 拖拽开始处理函数
+ * @param e 鼠标或触摸事件对象
+ */
+const dragStart = (e: any) => {
+  if (!props.value) {
+    state.isMoving = true;
+    handler.value.style.transition = "none";
+    // 计算拖拽起始位置
+    state.x =
+      (e.pageX || e.touches[0].pageX) - parseInt(handler.value.style.left.replace("px", ""), 10);
+  }
+  emit("handlerMove");
+};
+
+/**
+ * 拖拽移动处理函数
+ * @param e 鼠标或触摸事件对象
+ */
+const dragMoving = (e: any) => {
+  if (state.isMoving && !props.value) {
+    const numericWidth = getNumericWidth();
+    // 计算当前位置
+    const _x = (e.pageX || e.touches[0].pageX) - state.x;
+
+    // 在有效范围内移动
+    if (_x > 0 && _x <= numericWidth - props.height) {
+      handler.value.style.left = _x + "px";
+      progressBar.value.style.width = _x + props.height / 2 + "px";
+    } else if (_x > numericWidth - props.height) {
+      // 拖拽到末端，触发验证成功
+      handler.value.style.left = numericWidth - props.height + "px";
+      progressBar.value.style.width = numericWidth - props.height / 2 + "px";
+      passVerify();
     }
   }
+};
 
-  // 全局事件监听器添加
-  document.addEventListener('touchstart', onTouchStart)
-  document.addEventListener('touchmove', onTouchMove, { passive: false })
+/**
+ * 拖拽结束处理函数
+ * @param e 鼠标或触摸事件对象
+ */
+const dragFinish = (e: any) => {
+  if (state.isMoving && !props.value) {
+    const numericWidth = getNumericWidth();
+    // 计算最终位置
+    const _x = (e.pageX || e.changedTouches[0].pageX) - state.x;
 
-  // 获取数值形式的宽度
-  const getNumericWidth = (): number => {
-    if (typeof props.width === 'string') {
-      // 如果是字符串，尝试从DOM元素获取实际宽度
-      return dragVerify.value?.offsetWidth || 260
+    if (_x < numericWidth - props.height) {
+      // 未拖拽到末端，重置位置
+      state.isOk = true;
+      handler.value.style.left = "0";
+      handler.value.style.transition = "all 0.2s";
+      progressBar.value.style.width = "0";
+      state.isOk = false;
+    } else {
+      // 拖拽到末端，保持验证成功状态
+      handler.value.style.transition = "none";
+      handler.value.style.left = numericWidth - props.height + "px";
+      progressBar.value.style.width = numericWidth - props.height / 2 + "px";
+      passVerify();
     }
-    return props.width
+    state.isMoving = false;
   }
+};
 
-  // 获取样式字符串形式的宽度
-  const getStyleWidth = (): string => {
-    if (typeof props.width === 'string') {
-      return props.width
-    }
-    return props.width + 'px'
-  }
+/**
+ * 验证通过处理函数
+ */
+const passVerify = () => {
+  emit("update:value", true);
+  state.isMoving = false;
+  // 更新样式为成功状态
+  progressBar.value.style.background = props.completedBg;
+  messageRef.value.style["-webkit-text-fill-color"] = "unset";
+  messageRef.value.style.animation = "slidetounlock2 2s cubic-bezier(0, 0.2, 1, 1) infinite";
+  messageRef.value.style.color = "#fff";
+  emit("passCallback");
+};
 
-  // 组件挂载后的初始化
-  onMounted(() => {
-    // 设置 CSS 自定义属性
-    dragVerify.value?.style.setProperty('--textColor', props.textColor)
+/**
+ * 重置验证状态函数
+ */
+const reset = () => {
+  // 重置滑块位置
+  handler.value.style.left = "0";
+  progressBar.value.style.width = "0";
+  progressBar.value.style.background = props.progressBarBg;
+  // 重置文本样式
+  messageRef.value.style["-webkit-text-fill-color"] = "transparent";
+  messageRef.value.style.animation = "slidetounlock 2s cubic-bezier(0, 0.2, 1, 1) infinite";
+  messageRef.value.style.color = props.background;
+  // 重置状态
+  emit("update:value", false);
+  state.isOk = false;
+  state.isMoving = false;
+  state.x = 0;
+};
 
-    // 等待DOM更新后设置宽度相关属性
-    nextTick(() => {
-      const numericWidth = getNumericWidth()
-      dragVerify.value?.style.setProperty('--width', Math.floor(numericWidth / 2) + 'px')
-      dragVerify.value?.style.setProperty('--pwidth', -Math.floor(numericWidth / 2) + 'px')
-    })
-
-    // 重复添加事件监听器（确保事件绑定）
-    document.addEventListener('touchstart', onTouchStart)
-    document.addEventListener('touchmove', onTouchMove, { passive: false })
-  })
-
-  // 组件卸载前清理事件监听器
-  onBeforeUnmount(() => {
-    document.removeEventListener('touchstart', onTouchStart)
-    document.removeEventListener('touchmove', onTouchMove)
-  })
-
-  // 滑块样式计算
-  const handlerStyle = {
-    left: '0',
-    width: props.height + 'px',
-    height: props.height + 'px',
-    background: props.handlerBg
-  }
-
-  // 主容器样式计算
-  const dragVerifyStyle = computed(() => ({
-    width: getStyleWidth(),
-    height: props.height + 'px',
-    lineHeight: props.height + 'px',
-    background: props.background,
-    borderRadius: props.circle ? props.height / 2 + 'px' : props.radius
-  }))
-
-  // 进度条样式计算
-  const progressBarStyle = {
-    background: props.progressBarBg,
-    height: props.height + 'px',
-    borderRadius: props.circle
-      ? props.height / 2 + 'px 0 0 ' + props.height / 2 + 'px'
-      : props.radius
-  }
-
-  // 文本样式计算
-  const textStyle = computed(() => ({
-    fontSize: props.textSize
-  }))
-
-  // 显示消息计算属性
-  const message = computed(() => {
-    return props.value ? props.successText : props.text
-  })
-
-  /**
-   * 拖拽开始处理函数
-   * @param e 鼠标或触摸事件对象
-   */
-  const dragStart = (e: any) => {
-    if (!props.value) {
-      state.isMoving = true
-      handler.value.style.transition = 'none'
-      // 计算拖拽起始位置
-      state.x =
-        (e.pageX || e.touches[0].pageX) - parseInt(handler.value.style.left.replace('px', ''), 10)
-    }
-    emit('handlerMove')
-  }
-
-  /**
-   * 拖拽移动处理函数
-   * @param e 鼠标或触摸事件对象
-   */
-  const dragMoving = (e: any) => {
-    if (state.isMoving && !props.value) {
-      const numericWidth = getNumericWidth()
-      // 计算当前位置
-      let _x = (e.pageX || e.touches[0].pageX) - state.x
-
-      // 在有效范围内移动
-      if (_x > 0 && _x <= numericWidth - props.height) {
-        handler.value.style.left = _x + 'px'
-        progressBar.value.style.width = _x + props.height / 2 + 'px'
-      } else if (_x > numericWidth - props.height) {
-        // 拖拽到末端，触发验证成功
-        handler.value.style.left = numericWidth - props.height + 'px'
-        progressBar.value.style.width = numericWidth - props.height / 2 + 'px'
-        passVerify()
-      }
-    }
-  }
-
-  /**
-   * 拖拽结束处理函数
-   * @param e 鼠标或触摸事件对象
-   */
-  const dragFinish = (e: any) => {
-    if (state.isMoving && !props.value) {
-      const numericWidth = getNumericWidth()
-      // 计算最终位置
-      let _x = (e.pageX || e.changedTouches[0].pageX) - state.x
-
-      if (_x < numericWidth - props.height) {
-        // 未拖拽到末端，重置位置
-        state.isOk = true
-        handler.value.style.left = '0'
-        handler.value.style.transition = 'all 0.2s'
-        progressBar.value.style.width = '0'
-        state.isOk = false
-      } else {
-        // 拖拽到末端，保持验证成功状态
-        handler.value.style.transition = 'none'
-        handler.value.style.left = numericWidth - props.height + 'px'
-        progressBar.value.style.width = numericWidth - props.height / 2 + 'px'
-        passVerify()
-      }
-      state.isMoving = false
-    }
-  }
-
-  /**
-   * 验证通过处理函数
-   */
-  const passVerify = () => {
-    emit('update:value', true)
-    state.isMoving = false
-    // 更新样式为成功状态
-    progressBar.value.style.background = props.completedBg
-    messageRef.value.style['-webkit-text-fill-color'] = 'unset'
-    messageRef.value.style.animation = 'slidetounlock2 2s cubic-bezier(0, 0.2, 1, 1) infinite'
-    messageRef.value.style.color = '#fff'
-    emit('passCallback')
-  }
-
-  /**
-   * 重置验证状态函数
-   */
-  const reset = () => {
-    // 重置滑块位置
-    handler.value.style.left = '0'
-    progressBar.value.style.width = '0'
-    progressBar.value.style.background = props.progressBarBg
-    // 重置文本样式
-    messageRef.value.style['-webkit-text-fill-color'] = 'transparent'
-    messageRef.value.style.animation = 'slidetounlock 2s cubic-bezier(0, 0.2, 1, 1) infinite'
-    messageRef.value.style.color = props.background
-    // 重置状态
-    emit('update:value', false)
-    state.isOk = false
-    state.isMoving = false
-    state.x = 0
-  }
-
-  // 暴露重置方法给父组件
-  defineExpose({
-    reset
-  })
+// 暴露重置方法给父组件
+defineExpose({
+  reset,
+});
 </script>
 
 <style lang="scss" scoped>
-  .drag_verify {
-    position: relative;
-    box-sizing: border-box;
-    overflow: hidden;
-    text-align: center;
-    border: 1px solid var(--default-border-dashed);
+.drag_verify {
+  position: relative;
+  box-sizing: border-box;
+  overflow: hidden;
+  text-align: center;
+  border: 1px solid var(--default-border-dashed);
 
-    .dv_handler {
-      position: absolute;
-      top: 0;
-      left: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      cursor: move;
+  .dv_handler {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: move;
 
-      i {
-        padding-left: 0;
-        font-size: 14px;
-        color: #999;
-      }
-
-      .el-icon-circle-check {
-        margin-top: 9px;
-        color: #6c6;
-      }
+    i {
+      padding-left: 0;
+      font-size: 14px;
+      color: #999;
     }
 
-    .dv_progress_bar {
-      position: absolute;
-      width: 0;
-      height: 34px;
-    }
-
-    .dv_text {
-      position: absolute;
-      inset: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: transparent;
-      user-select: none;
-      background: linear-gradient(
-        to right,
-        var(--textColor) 0%,
-        var(--textColor) 40%,
-        #fff 50%,
-        var(--textColor) 60%,
-        var(--textColor) 100%
-      );
-      -webkit-background-clip: text;
-      background-clip: text;
-      animation: slidetounlock 2s cubic-bezier(0, 0.2, 1, 1) infinite;
-      -webkit-text-fill-color: transparent;
-      text-size-adjust: none;
-
-      * {
-        -webkit-text-fill-color: var(--textColor);
-      }
+    .el-icon-circle-check {
+      margin-top: 9px;
+      color: #6c6;
     }
   }
 
-  .goFirst {
-    left: 0 !important;
-    transition: left 0.5s;
+  .dv_progress_bar {
+    position: absolute;
+    width: 0;
+    height: 34px;
   }
 
-  .goFirst2 {
-    width: 0 !important;
-    transition: width 0.5s;
+  .dv_text {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: transparent;
+    user-select: none;
+    background: linear-gradient(
+      to right,
+      var(--textColor) 0%,
+      var(--textColor) 40%,
+      #fff 50%,
+      var(--textColor) 60%,
+      var(--textColor) 100%
+    );
+    -webkit-background-clip: text;
+    background-clip: text;
+    animation: slidetounlock 2s cubic-bezier(0, 0.2, 1, 1) infinite;
+    -webkit-text-fill-color: transparent;
+    text-size-adjust: none;
+
+    * {
+      -webkit-text-fill-color: var(--textColor);
+    }
   }
+}
+
+.goFirst {
+  left: 0 !important;
+  transition: left 0.5s;
+}
+
+.goFirst2 {
+  width: 0 !important;
+  transition: width 0.5s;
+}
 </style>
 
 <style lang="scss">
-  @keyframes slidetounlock {
-    0% {
-      background-position: var(--pwidth) 0;
-    }
-
-    100% {
-      background-position: var(--width) 0;
-    }
+@keyframes slidetounlock {
+  0% {
+    background-position: var(--pwidth) 0;
   }
 
-  @keyframes slidetounlock2 {
-    0% {
-      background-position: var(--pwidth) 0;
-    }
-
-    100% {
-      background-position: var(--pwidth) 0;
-    }
+  100% {
+    background-position: var(--width) 0;
   }
+}
+
+@keyframes slidetounlock2 {
+  0% {
+    background-position: var(--pwidth) 0;
+  }
+
+  100% {
+    background-position: var(--pwidth) 0;
+  }
+}
 </style>
diff --git a/frontend/new-web/src/components/core/forms/art-excel-export/index.vue b/frontend/new-web/src/components/core/forms/art-excel-export/index.vue
index 08207c2c..b686b269 100644
--- a/frontend/new-web/src/components/core/forms/art-excel-export/index.vue
+++ b/frontend/new-web/src/components/core/forms/art-excel-export/index.vue
@@ -19,371 +19,371 @@
 </template>
 
 <script setup lang="ts">
-  import * as XLSX from 'xlsx'
-  import FileSaver from 'file-saver'
-  import { ref, computed, nextTick } from 'vue'
-  import { Loading } from '@element-plus/icons-vue'
-  import type { ButtonType } from 'element-plus'
-  import { useThrottleFn } from '@vueuse/core'
+import * as XLSX from "xlsx";
+import FileSaver from "file-saver";
+import { ref, computed, nextTick } from "vue";
+import { Loading } from "@element-plus/icons-vue";
+import type { ButtonType } from "element-plus";
+import { useThrottleFn } from "@vueuse/core";
 
-  defineOptions({ name: 'ArtExcelExport' })
+defineOptions({ name: "ArtExcelExport" });
 
-  /** 导出数据类型 */
-  type ExportValue = string | number | boolean | null | undefined | Date
+/** 导出数据类型 */
+type ExportValue = string | number | boolean | null | undefined | Date;
 
-  interface ExportData {
-    [key: string]: ExportValue
+interface ExportData {
+  [key: string]: ExportValue;
+}
+
+/** 列配置 */
+interface ColumnConfig {
+  /** 列标题 */
+  title: string;
+  /** 列宽度 */
+  width?: number;
+  /** 数据格式化函数 */
+  formatter?: (value: ExportValue, row: ExportData, index: number) => string;
+}
+
+/** 导出配置选项 */
+interface ExportOptions {
+  /** 数据源 */
+  data: ExportData[];
+  /** 文件名（不含扩展名） */
+  filename?: string;
+  /** 工作表名称 */
+  sheetName?: string;
+  /** 按钮类型 */
+  type?: ButtonType;
+  /** 按钮尺寸 */
+  size?: "large" | "default" | "small";
+  /** 是否禁用 */
+  disabled?: boolean;
+  /** 按钮文本 */
+  buttonText?: string;
+  /** 加载中文本 */
+  loadingText?: string;
+  /** 是否自动添加序号列 */
+  autoIndex?: boolean;
+  /** 序号列标题 */
+  indexColumnTitle?: string;
+  /** 列配置映射 */
+  columns?: Record<string, ColumnConfig>;
+  /** 表头映射（简化版本，向后兼容） */
+  headers?: Record<string, string>;
+  /** 最大导出行数 */
+  maxRows?: number;
+  /** 是否显示成功消息 */
+  showSuccessMessage?: boolean;
+  /** 是否显示错误消息 */
+  showErrorMessage?: boolean;
+  /** 工作簿配置 */
+  workbookOptions?: {
+    /** 创建者 */
+    creator?: string;
+    /** 最后修改者 */
+    lastModifiedBy?: string;
+    /** 创建时间 */
+    created?: Date;
+    /** 修改时间 */
+    modified?: Date;
+  };
+}
+
+const props = withDefaults(defineProps<ExportOptions>(), {
+  filename: () => `export_${new Date().toISOString().slice(0, 10)}`,
+  sheetName: "Sheet1",
+  type: "primary",
+  size: "default",
+  disabled: false,
+  buttonText: "导出 Excel",
+  loadingText: "导出中...",
+  autoIndex: false,
+  indexColumnTitle: "序号",
+  columns: () => ({}),
+  headers: () => ({}),
+  maxRows: 100000,
+  showSuccessMessage: true,
+  showErrorMessage: true,
+  workbookOptions: () => ({}),
+});
+
+const emit = defineEmits<{
+  "before-export": [data: ExportData[]];
+  "export-success": [filename: string, rowCount: number];
+  "export-error": [error: ExportError];
+  "export-progress": [progress: number];
+}>();
+
+/** 导出错误类型 */
+class ExportError extends Error {
+  constructor(
+    message: string,
+    public code: string,
+    public details?: any
+  ) {
+    super(message);
+    this.name = "ExportError";
+  }
+}
+
+const isExporting = ref(false);
+
+/** 是否有数据可导出 */
+const hasData = computed(() => Array.isArray(props.data) && props.data.length > 0);
+
+/** 验证导出数据 */
+const validateData = (data: ExportData[]): void => {
+  if (!Array.isArray(data)) {
+    throw new ExportError("数据必须是数组格式", "INVALID_DATA_TYPE");
   }
 
-  /** 列配置 */
-  interface ColumnConfig {
-    /** 列标题 */
-    title: string
-    /** 列宽度 */
-    width?: number
-    /** 数据格式化函数 */
-    formatter?: (value: ExportValue, row: ExportData, index: number) => string
+  if (data.length === 0) {
+    throw new ExportError("没有可导出的数据", "NO_DATA");
   }
 
-  /** 导出配置选项 */
-  interface ExportOptions {
-    /** 数据源 */
-    data: ExportData[]
-    /** 文件名（不含扩展名） */
-    filename?: string
-    /** 工作表名称 */
-    sheetName?: string
-    /** 按钮类型 */
-    type?: ButtonType
-    /** 按钮尺寸 */
-    size?: 'large' | 'default' | 'small'
-    /** 是否禁用 */
-    disabled?: boolean
-    /** 按钮文本 */
-    buttonText?: string
-    /** 加载中文本 */
-    loadingText?: string
-    /** 是否自动添加序号列 */
-    autoIndex?: boolean
-    /** 序号列标题 */
-    indexColumnTitle?: string
-    /** 列配置映射 */
-    columns?: Record<string, ColumnConfig>
-    /** 表头映射（简化版本，向后兼容） */
-    headers?: Record<string, string>
-    /** 最大导出行数 */
-    maxRows?: number
-    /** 是否显示成功消息 */
-    showSuccessMessage?: boolean
-    /** 是否显示错误消息 */
-    showErrorMessage?: boolean
-    /** 工作簿配置 */
-    workbookOptions?: {
-      /** 创建者 */
-      creator?: string
-      /** 最后修改者 */
-      lastModifiedBy?: string
-      /** 创建时间 */
-      created?: Date
-      /** 修改时间 */
-      modified?: Date
-    }
+  if (data.length > props.maxRows) {
+    throw new ExportError(`数据行数超过限制（${props.maxRows}行）`, "EXCEED_MAX_ROWS", {
+      currentRows: data.length,
+      maxRows: props.maxRows,
+    });
+  }
+};
+
+/** 格式化单元格值 */
+const formatCellValue = (
+  value: ExportValue,
+  key: string,
+  row: ExportData,
+  index: number
+): string => {
+  // 使用列配置的格式化函数
+  const column = props.columns[key];
+  if (column?.formatter) {
+    return column.formatter(value, row, index);
   }
 
-  const props = withDefaults(defineProps<ExportOptions>(), {
-    filename: () => `export_${new Date().toISOString().slice(0, 10)}`,
-    sheetName: 'Sheet1',
-    type: 'primary',
-    size: 'default',
-    disabled: false,
-    buttonText: '导出 Excel',
-    loadingText: '导出中...',
-    autoIndex: false,
-    indexColumnTitle: '序号',
-    columns: () => ({}),
-    headers: () => ({}),
-    maxRows: 100000,
-    showSuccessMessage: true,
-    showErrorMessage: true,
-    workbookOptions: () => ({})
-  })
-
-  const emit = defineEmits<{
-    'before-export': [data: ExportData[]]
-    'export-success': [filename: string, rowCount: number]
-    'export-error': [error: ExportError]
-    'export-progress': [progress: number]
-  }>()
-
-  /** 导出错误类型 */
-  class ExportError extends Error {
-    constructor(
-      message: string,
-      public code: string,
-      public details?: any
-    ) {
-      super(message)
-      this.name = 'ExportError'
-    }
+  // 处理特殊值
+  if (value === null || value === undefined) {
+    return "";
   }
 
-  const isExporting = ref(false)
-
-  /** 是否有数据可导出 */
-  const hasData = computed(() => Array.isArray(props.data) && props.data.length > 0)
-
-  /** 验证导出数据 */
-  const validateData = (data: ExportData[]): void => {
-    if (!Array.isArray(data)) {
-      throw new ExportError('数据必须是数组格式', 'INVALID_DATA_TYPE')
-    }
-
-    if (data.length === 0) {
-      throw new ExportError('没有可导出的数据', 'NO_DATA')
-    }
-
-    if (data.length > props.maxRows) {
-      throw new ExportError(`数据行数超过限制（${props.maxRows}行）`, 'EXCEED_MAX_ROWS', {
-        currentRows: data.length,
-        maxRows: props.maxRows
-      })
-    }
+  if (value instanceof Date) {
+    return value.toLocaleDateString("zh-CN");
   }
 
-  /** 格式化单元格值 */
-  const formatCellValue = (
-    value: ExportValue,
-    key: string,
-    row: ExportData,
-    index: number
-  ): string => {
-    // 使用列配置的格式化函数
-    const column = props.columns[key]
-    if (column?.formatter) {
-      return column.formatter(value, row, index)
-    }
-
-    // 处理特殊值
-    if (value === null || value === undefined) {
-      return ''
-    }
-
-    if (value instanceof Date) {
-      return value.toLocaleDateString('zh-CN')
-    }
-
-    if (typeof value === 'boolean') {
-      return value ? '是' : '否'
-    }
-
-    return String(value)
+  if (typeof value === "boolean") {
+    return value ? "是" : "否";
   }
 
-  /** 处理数据 */
-  const processData = (data: ExportData[]): Record<string, string>[] => {
-    const processedData = data.map((item, index) => {
-      const processedItem: Record<string, string> = {}
+  return String(value);
+};
 
-      // 添加序号列
-      if (props.autoIndex) {
-        processedItem[props.indexColumnTitle] = String(index + 1)
+/** 处理数据 */
+const processData = (data: ExportData[]): Record<string, string>[] => {
+  const processedData = data.map((item, index) => {
+    const processedItem: Record<string, string> = {};
+
+    // 添加序号列
+    if (props.autoIndex) {
+      processedItem[props.indexColumnTitle] = String(index + 1);
+    }
+
+    // 处理数据列
+    Object.entries(item).forEach(([key, value]) => {
+      // 获取列标题
+      let columnTitle = key;
+      if (props.columns[key]?.title) {
+        columnTitle = props.columns[key].title;
+      } else if (props.headers[key]) {
+        columnTitle = props.headers[key];
       }
 
-      // 处理数据列
-      Object.entries(item).forEach(([key, value]) => {
-        // 获取列标题
-        let columnTitle = key
-        if (props.columns[key]?.title) {
-          columnTitle = props.columns[key].title
-        } else if (props.headers[key]) {
-          columnTitle = props.headers[key]
-        }
+      // 格式化值
+      processedItem[columnTitle] = formatCellValue(value, key, item, index);
+    });
 
-        // 格式化值
-        processedItem[columnTitle] = formatCellValue(value, key, item, index)
-      })
+    return processedItem;
+  });
 
-      return processedItem
-    })
+  return processedData;
+};
 
-    return processedData
-  }
+/** 计算列宽度 */
+const calculateColumnWidths = (data: Record<string, string>[]): XLSX.ColInfo[] => {
+  if (data.length === 0) return [];
 
-  /** 计算列宽度 */
-  const calculateColumnWidths = (data: Record<string, string>[]): XLSX.ColInfo[] => {
-    if (data.length === 0) return []
+  const sampleSize = Math.min(data.length, 100); // 只取前100行计算列宽
+  const columns = Object.keys(data[0]);
 
-    const sampleSize = Math.min(data.length, 100) // 只取前100行计算列宽
-    const columns = Object.keys(data[0])
+  return columns.map((column) => {
+    // 使用配置的列宽度
+    const configWidth = Object.values(props.columns).find((col) => col.title === column)?.width;
 
-    return columns.map((column) => {
-      // 使用配置的列宽度
-      const configWidth = Object.values(props.columns).find((col) => col.title === column)?.width
-
-      if (configWidth) {
-        return { wch: configWidth }
-      }
-
-      // 自动计算列宽度
-      const maxLength = Math.max(
-        column.length, // 标题长度
-        ...data.slice(0, sampleSize).map((row) => String(row[column] || '').length)
-      )
-
-      // 限制最小和最大宽度
-      const width = Math.min(Math.max(maxLength + 2, 8), 50)
-      return { wch: width }
-    })
-  }
-
-  /** 导出到 Excel */
-  const exportToExcel = async (
-    data: ExportData[],
-    filename: string,
-    sheetName: string
-  ): Promise<void> => {
-    try {
-      emit('export-progress', 10)
-
-      // 处理数据
-      const processedData = processData(data)
-      emit('export-progress', 30)
-
-      // 创建工作簿
-      const workbook = XLSX.utils.book_new()
-
-      // 设置工作簿属性
-      if (props.workbookOptions) {
-        workbook.Props = {
-          Title: filename,
-          Subject: '数据导出',
-          Author: props.workbookOptions.creator || 'Art Design Pro',
-          Manager: props.workbookOptions.lastModifiedBy || '',
-          Company: '系统导出',
-          Category: '数据',
-          Keywords: 'excel,export,data',
-          Comments: '由系统自动生成',
-          CreatedDate: props.workbookOptions.created || new Date(),
-          ModifiedDate: props.workbookOptions.modified || new Date()
-        }
-      }
-
-      emit('export-progress', 50)
-
-      // 创建工作表
-      const worksheet = XLSX.utils.json_to_sheet(processedData)
-
-      // 设置列宽度
-      worksheet['!cols'] = calculateColumnWidths(processedData)
-
-      emit('export-progress', 70)
-
-      // 添加工作表到工作簿
-      XLSX.utils.book_append_sheet(workbook, worksheet, sheetName)
-
-      emit('export-progress', 85)
-
-      // 生成 Excel 文件
-      const excelBuffer = XLSX.write(workbook, {
-        bookType: 'xlsx',
-        type: 'array',
-        compression: true
-      })
-
-      // 创建 Blob 并下载
-      const blob = new Blob([excelBuffer], {
-        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
-      })
-
-      emit('export-progress', 95)
-
-      // 使用时间戳确保文件名唯一
-      const timestamp = new Date().toISOString().replace(/[:.]/g, '-')
-      const finalFilename = `${filename}_${timestamp}.xlsx`
-
-      FileSaver.saveAs(blob, finalFilename)
-
-      emit('export-progress', 100)
-
-      // 等待下载开始
-      await nextTick()
-
-      return Promise.resolve()
-    } catch (error) {
-      throw new ExportError(`Excel 导出失败: ${(error as Error).message}`, 'EXPORT_FAILED', error)
+    if (configWidth) {
+      return { wch: configWidth };
     }
-  }
 
-  /** 处理导出 */
-  const handleExport = useThrottleFn(async () => {
-    if (isExporting.value) return
+    // 自动计算列宽度
+    const maxLength = Math.max(
+      column.length, // 标题长度
+      ...data.slice(0, sampleSize).map((row) => String(row[column] || "").length)
+    );
 
-    isExporting.value = true
+    // 限制最小和最大宽度
+    const width = Math.min(Math.max(maxLength + 2, 8), 50);
+    return { wch: width };
+  });
+};
 
-    try {
-      // 验证数据
-      validateData(props.data)
+/** 导出到 Excel */
+const exportToExcel = async (
+  data: ExportData[],
+  filename: string,
+  sheetName: string
+): Promise<void> => {
+  try {
+    emit("export-progress", 10);
 
-      // 触发导出前事件
-      emit('before-export', props.data)
+    // 处理数据
+    const processedData = processData(data);
+    emit("export-progress", 30);
 
-      // 执行导出
-      await exportToExcel(props.data, props.filename, props.sheetName)
+    // 创建工作簿
+    const workbook = XLSX.utils.book_new();
 
-      // 触发成功事件
-      emit('export-success', props.filename, props.data.length)
-
-      // 显示成功消息
-      if (props.showSuccessMessage) {
-        ElMessage.success({
-          message: `成功导出 ${props.data.length} 条数据`,
-          duration: 3000
-        })
-      }
-    } catch (error) {
-      const exportError =
-        error instanceof ExportError
-          ? error
-          : new ExportError(`导出失败: ${(error as Error).message}`, 'UNKNOWN_ERROR', error)
-
-      // 触发错误事件
-      emit('export-error', exportError)
-
-      // 显示错误消息
-      if (props.showErrorMessage) {
-        ElMessage.error({
-          message: exportError.message,
-          duration: 5000
-        })
-      }
-
-      console.error('Excel 导出错误:', exportError)
-    } finally {
-      isExporting.value = false
-      emit('export-progress', 0)
+    // 设置工作簿属性
+    if (props.workbookOptions) {
+      workbook.Props = {
+        Title: filename,
+        Subject: "数据导出",
+        Author: props.workbookOptions.creator || "Art Design Pro",
+        Manager: props.workbookOptions.lastModifiedBy || "",
+        Company: "系统导出",
+        Category: "数据",
+        Keywords: "excel,export,data",
+        Comments: "由系统自动生成",
+        CreatedDate: props.workbookOptions.created || new Date(),
+        ModifiedDate: props.workbookOptions.modified || new Date(),
+      };
     }
-  }, 1000)
 
-  // 暴露方法供父组件调用
-  defineExpose({
-    exportData: handleExport,
-    isExporting: readonly(isExporting),
-    hasData
-  })
+    emit("export-progress", 50);
+
+    // 创建工作表
+    const worksheet = XLSX.utils.json_to_sheet(processedData);
+
+    // 设置列宽度
+    worksheet["!cols"] = calculateColumnWidths(processedData);
+
+    emit("export-progress", 70);
+
+    // 添加工作表到工作簿
+    XLSX.utils.book_append_sheet(workbook, worksheet, sheetName);
+
+    emit("export-progress", 85);
+
+    // 生成 Excel 文件
+    const excelBuffer = XLSX.write(workbook, {
+      bookType: "xlsx",
+      type: "array",
+      compression: true,
+    });
+
+    // 创建 Blob 并下载
+    const blob = new Blob([excelBuffer], {
+      type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    });
+
+    emit("export-progress", 95);
+
+    // 使用时间戳确保文件名唯一
+    const timestamp = new Date().toISOString().replace(/[:.]/g, "-");
+    const finalFilename = `${filename}_${timestamp}.xlsx`;
+
+    FileSaver.saveAs(blob, finalFilename);
+
+    emit("export-progress", 100);
+
+    // 等待下载开始
+    await nextTick();
+
+    return Promise.resolve();
+  } catch (error) {
+    throw new ExportError(`Excel 导出失败: ${(error as Error).message}`, "EXPORT_FAILED", error);
+  }
+};
+
+/** 处理导出 */
+const handleExport = useThrottleFn(async () => {
+  if (isExporting.value) return;
+
+  isExporting.value = true;
+
+  try {
+    // 验证数据
+    validateData(props.data);
+
+    // 触发导出前事件
+    emit("before-export", props.data);
+
+    // 执行导出
+    await exportToExcel(props.data, props.filename, props.sheetName);
+
+    // 触发成功事件
+    emit("export-success", props.filename, props.data.length);
+
+    // 显示成功消息
+    if (props.showSuccessMessage) {
+      ElMessage.success({
+        message: `成功导出 ${props.data.length} 条数据`,
+        duration: 3000,
+      });
+    }
+  } catch (error) {
+    const exportError =
+      error instanceof ExportError
+        ? error
+        : new ExportError(`导出失败: ${(error as Error).message}`, "UNKNOWN_ERROR", error);
+
+    // 触发错误事件
+    emit("export-error", exportError);
+
+    // 显示错误消息
+    if (props.showErrorMessage) {
+      ElMessage.error({
+        message: exportError.message,
+        duration: 5000,
+      });
+    }
+
+    console.error("Excel 导出错误:", exportError);
+  } finally {
+    isExporting.value = false;
+    emit("export-progress", 0);
+  }
+}, 1000);
+
+// 暴露方法供父组件调用
+defineExpose({
+  exportData: handleExport,
+  isExporting: readonly(isExporting),
+  hasData,
+});
 </script>
 
 <style scoped>
-  .is-loading {
-    animation: rotating 2s linear infinite;
+.is-loading {
+  animation: rotating 2s linear infinite;
+}
+
+@keyframes rotating {
+  0% {
+    transform: rotate(0deg);
   }
 
-  @keyframes rotating {
-    0% {
-      transform: rotate(0deg);
-    }
-
-    100% {
-      transform: rotate(360deg);
-    }
+  100% {
+    transform: rotate(360deg);
   }
+}
 </style>
diff --git a/frontend/new-web/src/components/core/forms/art-excel-import/index.vue b/frontend/new-web/src/components/core/forms/art-excel-import/index.vue
index 8aa82fe9..1ad3fb67 100644
--- a/frontend/new-web/src/components/core/forms/art-excel-import/index.vue
+++ b/frontend/new-web/src/components/core/forms/art-excel-import/index.vue
@@ -15,48 +15,48 @@
 </template>
 
 <script setup lang="ts">
-  import * as XLSX from 'xlsx'
-  import type { UploadFile } from 'element-plus'
+import * as XLSX from "xlsx";
+import type { UploadFile } from "element-plus";
 
-  defineOptions({ name: 'ArtExcelImport' })
+defineOptions({ name: "ArtExcelImport" });
 
-  // Excel 导入工具函数
-  async function importExcel(file: File): Promise<Array<Record<string, unknown>>> {
-    return new Promise((resolve, reject) => {
-      const reader = new FileReader()
+// Excel 导入工具函数
+async function importExcel(file: File): Promise<Array<Record<string, unknown>>> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
 
-      reader.onload = (e) => {
-        try {
-          const data = e.target?.result
-          const workbook = XLSX.read(data, { type: 'array' })
-          const firstSheetName = workbook.SheetNames[0]
-          const worksheet = workbook.Sheets[firstSheetName]
-          const results = XLSX.utils.sheet_to_json(worksheet)
-          resolve(results as Array<Record<string, unknown>>)
-        } catch (error) {
-          reject(error)
-        }
+    reader.onload = (e) => {
+      try {
+        const data = e.target?.result;
+        const workbook = XLSX.read(data, { type: "array" });
+        const firstSheetName = workbook.SheetNames[0];
+        const worksheet = workbook.Sheets[firstSheetName];
+        const results = XLSX.utils.sheet_to_json(worksheet);
+        resolve(results as Array<Record<string, unknown>>);
+      } catch (error) {
+        reject(error);
       }
+    };
 
-      reader.onerror = (error) => reject(error)
-      reader.readAsArrayBuffer(file)
-    })
-  }
+    reader.onerror = (error) => reject(error);
+    reader.readAsArrayBuffer(file);
+  });
+}
 
-  // 定义 emits
-  const emit = defineEmits<{
-    'import-success': [data: Array<Record<string, unknown>>]
-    'import-error': [error: Error]
-  }>()
+// 定义 emits
+const emit = defineEmits<{
+  "import-success": [data: Array<Record<string, unknown>>];
+  "import-error": [error: Error];
+}>();
 
-  // 处理文件导入
-  const handleFileChange = async (uploadFile: UploadFile) => {
-    try {
-      if (!uploadFile.raw) return
-      const results = await importExcel(uploadFile.raw)
-      emit('import-success', results)
-    } catch (error) {
-      emit('import-error', error as Error)
-    }
+// 处理文件导入
+const handleFileChange = async (uploadFile: UploadFile) => {
+  try {
+    if (!uploadFile.raw) return;
+    const results = await importExcel(uploadFile.raw);
+    emit("import-success", results);
+  } catch (error) {
+    emit("import-error", error as Error);
   }
+};
 </script>
diff --git a/frontend/new-web/src/components/core/forms/art-form/index.vue b/frontend/new-web/src/components/core/forms/art-form/index.vue
index 561e878a..f69c89a9 100644
--- a/frontend/new-web/src/components/core/forms/art-form/index.vue
+++ b/frontend/new-web/src/components/core/forms/art-form/index.vue
@@ -76,7 +76,7 @@
           >
             <div class="flex gap-2 md:justify-center">
               <ElButton v-if="showReset" class="reset-button" @click="handleReset" v-ripple>
-                {{ t('table.form.reset') }}
+                {{ t("table.form.reset") }}
               </ElButton>
               <ElButton
                 v-if="showSubmit"
@@ -86,7 +86,7 @@
                 v-ripple
                 :disabled="disabledSubmit"
               >
-                {{ t('table.form.submit') }}
+                {{ t("table.form.submit") }}
               </ElButton>
             </div>
           </div>
@@ -97,411 +97,411 @@
 </template>
 
 <script setup lang="ts">
-  import { useWindowSize } from '@vueuse/core'
-  import { useI18n } from 'vue-i18n'
-  import { toRaw, type Component } from 'vue'
-  import {
-    ElCascader,
-    ElCheckbox,
-    ElCheckboxGroup,
-    ElDatePicker,
-    ElInput,
-    ElInputTag,
-    ElInputNumber,
-    ElRadioGroup,
-    ElRate,
-    ElSelect,
-    ElSlider,
-    ElSwitch,
-    ElTimePicker,
-    ElTimeSelect,
-    ElTreeSelect,
-    type FormInstance
-  } from 'element-plus'
-  import { calculateResponsiveSpan, type ResponsiveBreakpoint } from '@/utils/form/responsive'
+import { useWindowSize } from "@vueuse/core";
+import { useI18n } from "vue-i18n";
+import { toRaw, type Component } from "vue";
+import {
+  ElCascader,
+  ElCheckbox,
+  ElCheckboxGroup,
+  ElDatePicker,
+  ElInput,
+  ElInputTag,
+  ElInputNumber,
+  ElRadioGroup,
+  ElRate,
+  ElSelect,
+  ElSlider,
+  ElSwitch,
+  ElTimePicker,
+  ElTimeSelect,
+  ElTreeSelect,
+  type FormInstance,
+} from "element-plus";
+import { calculateResponsiveSpan, type ResponsiveBreakpoint } from "@/utils/form/responsive";
 
-  defineOptions({ name: 'ArtForm' })
+defineOptions({ name: "ArtForm" });
 
-  const componentMap = {
-    input: ElInput, // 输入框
-    inputtag: ElInputTag, // 标签输入框
-    number: ElInputNumber, // 数字输入框
-    select: ElSelect, // 选择器
-    switch: ElSwitch, // 开关
-    checkbox: ElCheckbox, // 复选框
-    checkboxgroup: ElCheckboxGroup, // 复选框组
-    radiogroup: ElRadioGroup, // 单选框组
-    date: ElDatePicker, // 日期选择器
-    daterange: ElDatePicker, // 日期范围选择器
-    datetime: ElDatePicker, // 日期时间选择器
-    datetimerange: ElDatePicker, // 日期时间范围选择器
-    rate: ElRate, // 评分
-    slider: ElSlider, // 滑块
-    cascader: ElCascader, // 级联选择器
-    timepicker: ElTimePicker, // 时间选择器
-    timeselect: ElTimeSelect, // 时间选择
-    treeselect: ElTreeSelect // 树选择器
-  }
+const componentMap = {
+  input: ElInput, // 输入框
+  inputtag: ElInputTag, // 标签输入框
+  number: ElInputNumber, // 数字输入框
+  select: ElSelect, // 选择器
+  switch: ElSwitch, // 开关
+  checkbox: ElCheckbox, // 复选框
+  checkboxgroup: ElCheckboxGroup, // 复选框组
+  radiogroup: ElRadioGroup, // 单选框组
+  date: ElDatePicker, // 日期选择器
+  daterange: ElDatePicker, // 日期范围选择器
+  datetime: ElDatePicker, // 日期时间选择器
+  datetimerange: ElDatePicker, // 日期时间范围选择器
+  rate: ElRate, // 评分
+  slider: ElSlider, // 滑块
+  cascader: ElCascader, // 级联选择器
+  timepicker: ElTimePicker, // 时间选择器
+  timeselect: ElTimeSelect, // 时间选择
+  treeselect: ElTreeSelect, // 树选择器
+};
 
-  const { width } = useWindowSize()
-  const { t } = useI18n()
-  const isMobile = computed(() => width.value < 500)
+const { width } = useWindowSize();
+const { t } = useI18n();
+const isMobile = computed(() => width.value < 500);
 
-  const formInstance = useTemplateRef<FormInstance>('formRef')
+const formInstance = useTemplateRef<FormInstance>("formRef");
 
-  // 表单项配置
-  export interface FormItem {
-    /** 表单项的唯一标识 */
-    key: string
-    /** 表单项的标签文本或自定义渲染函数 */
-    label: string | (() => VNode) | Component
-    /** 表单项标签的宽度，会覆盖 Form 的 labelWidth */
-    labelWidth?: string | number
-    /** 表单项类型，支持预定义的组件类型 */
-    type?: keyof typeof componentMap | string
-    /** 自定义渲染函数或组件，用于渲染自定义组件（优先级高于 type） */
-    render?: (() => VNode) | Component
-    /** 是否隐藏该表单项 */
-    hidden?: boolean
-    /** 表单项占据的列宽，基于24格栅格系统 */
-    span?: number
-    /** 选项数据，用于 select、checkbox-group、radio-group 等 */
-    options?: Record<string, any>
-    /** 传递给表单项组件的属性 */
-    props?: Record<string, any>
-    /** 表单项的插槽配置 */
-    slots?: Record<string, (() => any) | undefined>
-    /** 表单项的占位符文本 */
-    placeholder?: string
-    /** 更多属性配置请参考 ElementPlus 官方文档 */
-  }
+// 表单项配置
+export interface FormItem {
+  /** 表单项的唯一标识 */
+  key: string;
+  /** 表单项的标签文本或自定义渲染函数 */
+  label: string | (() => VNode) | Component;
+  /** 表单项标签的宽度，会覆盖 Form 的 labelWidth */
+  labelWidth?: string | number;
+  /** 表单项类型，支持预定义的组件类型 */
+  type?: keyof typeof componentMap | string;
+  /** 自定义渲染函数或组件，用于渲染自定义组件（优先级高于 type） */
+  render?: (() => VNode) | Component;
+  /** 是否隐藏该表单项 */
+  hidden?: boolean;
+  /** 表单项占据的列宽，基于24格栅格系统 */
+  span?: number;
+  /** 选项数据，用于 select、checkbox-group、radio-group 等 */
+  options?: Record<string, any>;
+  /** 传递给表单项组件的属性 */
+  props?: Record<string, any>;
+  /** 表单项的插槽配置 */
+  slots?: Record<string, (() => any) | undefined>;
+  /** 表单项的占位符文本 */
+  placeholder?: string;
+  /** 更多属性配置请参考 ElementPlus 官方文档 */
+}
 
-  // 表单配置
-  interface FormProps {
-    /** 表单数据 */
-    items: FormItem[]
-    /** 每列的宽度（基于 24 格布局） */
-    span?: number
-    /** 表单控件间隙 */
-    gutter?: number
-    /** 表单域标签的位置 */
-    labelPosition?: 'left' | 'right' | 'top'
-    /** 文字宽度 */
-    labelWidth?: string | number
-    /** 按钮靠左对齐限制（表单项小于等于该值时） */
-    buttonLeftLimit?: number
-    /** 是否显示重置按钮 */
-    showReset?: boolean
-    /** 是否显示提交按钮 */
-    showSubmit?: boolean
-    /** 是否禁用提交按钮 */
-    disabledSubmit?: boolean
-    /** 提交时是否清洗空值 */
-    sanitizeOutput?: Partial<SanitizeOutputOptions>
-  }
+// 表单配置
+interface FormProps {
+  /** 表单数据 */
+  items: FormItem[];
+  /** 每列的宽度（基于 24 格布局） */
+  span?: number;
+  /** 表单控件间隙 */
+  gutter?: number;
+  /** 表单域标签的位置 */
+  labelPosition?: "left" | "right" | "top";
+  /** 文字宽度 */
+  labelWidth?: string | number;
+  /** 按钮靠左对齐限制（表单项小于等于该值时） */
+  buttonLeftLimit?: number;
+  /** 是否显示重置按钮 */
+  showReset?: boolean;
+  /** 是否显示提交按钮 */
+  showSubmit?: boolean;
+  /** 是否禁用提交按钮 */
+  disabledSubmit?: boolean;
+  /** 提交时是否清洗空值 */
+  sanitizeOutput?: Partial<SanitizeOutputOptions>;
+}
 
-  interface SanitizeOutputOptions {
-    /** 移除空字符串 */
-    removeEmptyString: boolean
-    /** 移除空数组 */
-    removeEmptyArray: boolean
-    /** 移除清洗后为空的对象 */
-    removeEmptyObject: boolean
-    /** 移除空富文本占位内容，如 <p><br></p> */
-    removeEmptyRichText: boolean
-    /** 保留数字 0 这类有效值 */
-    keepZero: boolean
-    /** 保留 false 这类有效值 */
-    keepFalse: boolean
-  }
+interface SanitizeOutputOptions {
+  /** 移除空字符串 */
+  removeEmptyString: boolean;
+  /** 移除空数组 */
+  removeEmptyArray: boolean;
+  /** 移除清洗后为空的对象 */
+  removeEmptyObject: boolean;
+  /** 移除空富文本占位内容，如 <p><br></p> */
+  removeEmptyRichText: boolean;
+  /** 保留数字 0 这类有效值 */
+  keepZero: boolean;
+  /** 保留 false 这类有效值 */
+  keepFalse: boolean;
+}
 
-  const props = withDefaults(defineProps<FormProps>(), {
-    items: () => [],
-    span: 6,
-    gutter: 12,
-    labelPosition: 'right',
-    labelWidth: '70px',
-    buttonLeftLimit: 2,
-    showReset: true,
-    showSubmit: true,
-    disabledSubmit: false,
-    sanitizeOutput: () => ({})
-  })
+const props = withDefaults(defineProps<FormProps>(), {
+  items: () => [],
+  span: 6,
+  gutter: 12,
+  labelPosition: "right",
+  labelWidth: "70px",
+  buttonLeftLimit: 2,
+  showReset: true,
+  showSubmit: true,
+  disabledSubmit: false,
+  sanitizeOutput: () => ({}),
+});
 
-  interface FormEmits {
-    reset: []
-    submit: [Record<string, any>]
-  }
+interface FormEmits {
+  reset: [];
+  submit: [Record<string, any>];
+}
 
-  const emit = defineEmits<FormEmits>()
+const emit = defineEmits<FormEmits>();
 
-  const modelValue = defineModel<Record<string, any>>({ default: {} })
-  const initialModelValue = ref<Record<string, any>>({})
+const modelValue = defineModel<Record<string, any>>({ default: {} });
+const initialModelValue = ref<Record<string, any>>({});
 
-  // 保存组件初始化时的表单快照，用于 reset 时恢复默认值。
-  const cloneModelValue = (value: Record<string, any> | undefined) => {
-    if (!value) return {}
+// 保存组件初始化时的表单快照，用于 reset 时恢复默认值。
+const cloneModelValue = (value: Record<string, any> | undefined) => {
+  if (!value) return {};
 
-    const deepClone = (source: unknown): unknown => {
-      if (Array.isArray(source)) {
-        return source.map((item) => deepClone(item))
-      }
-
-      if (source && typeof source === 'object') {
-        const rawSource = toRaw(source)
-        return Object.keys(rawSource).reduce<Record<string, unknown>>((accumulator, key) => {
-          accumulator[key] = deepClone((rawSource as Record<string, unknown>)[key])
-          return accumulator
-        }, {})
-      }
-
-      return source
+  const deepClone = (source: unknown): unknown => {
+    if (Array.isArray(source)) {
+      return source.map((item) => deepClone(item));
     }
 
-    return deepClone(toRaw(value)) as Record<string, any>
-  }
-
-  initialModelValue.value = cloneModelValue(modelValue.value)
-
-  const rootProps = ['label', 'labelWidth', 'key', 'type', 'hidden', 'span', 'slots']
-  // 输出时的清洗策略默认偏“接口友好”，但允许按业务覆盖。
-  const sanitizeOutputOptions = computed<SanitizeOutputOptions>(() => ({
-    removeEmptyString: true,
-    removeEmptyArray: true,
-    removeEmptyObject: true,
-    removeEmptyRichText: true,
-    keepZero: true,
-    keepFalse: true,
-    ...props.sanitizeOutput
-  }))
-
-  const PATH_NUMBER_RE = /^\d+$/
-
-  // 兼容 a.b、a.0.b 这类路径写法，数字段会被当作数组索引处理。
-  const parsePath = (path: string) => {
-    return path
-      .split('.')
-      .filter(Boolean)
-      .map((segment) => (PATH_NUMBER_RE.test(segment) ? Number(segment) : segment))
-  }
-
-  const getFieldValue = (path: string) => {
-    return parsePath(path).reduce<any>((currentValue, segment) => {
-      if (currentValue == null) return undefined
-      return currentValue[segment]
-    }, modelValue.value)
-  }
-
-  // 清空字段时只删除路径的最后一段，避免误删同级数据。
-  const deleteFieldValue = (path: string) => {
-    const segments = parsePath(path)
-    if (!segments.length) return
-
-    const lastSegment = segments.pop()
-    const parent = segments.reduce<any>((currentValue, segment) => {
-      if (currentValue == null) return undefined
-      return currentValue[segment]
-    }, modelValue.value)
-
-    if (parent != null && lastSegment !== undefined) {
-      delete parent[lastSegment]
-    }
-  }
-
-  // 表单清空输入时不保留空字符串，同时按路径自动补齐中间对象或数组。
-  const setFieldValue = (path: string, value: unknown) => {
-    const normalizedValue = value === '' ? undefined : value
-    const segments = parsePath(path)
-
-    if (!segments.length) return
-
-    if (normalizedValue === undefined) {
-      deleteFieldValue(path)
-      return
+    if (source && typeof source === "object") {
+      const rawSource = toRaw(source);
+      return Object.keys(rawSource).reduce<Record<string, unknown>>((accumulator, key) => {
+        accumulator[key] = deepClone((rawSource as Record<string, unknown>)[key]);
+        return accumulator;
+      }, {});
     }
 
-    let currentValue: any = modelValue.value
+    return source;
+  };
 
-    segments.forEach((segment, index) => {
-      const isLast = index === segments.length - 1
+  return deepClone(toRaw(value)) as Record<string, any>;
+};
 
-      if (isLast) {
-        currentValue[segment] = normalizedValue
-        return
-      }
+initialModelValue.value = cloneModelValue(modelValue.value);
 
-      const nextSegment = segments[index + 1]
-      const nextContainer = typeof nextSegment === 'number' ? [] : {}
+const rootProps = ["label", "labelWidth", "key", "type", "hidden", "span", "slots"];
+// 输出时的清洗策略默认偏“接口友好”，但允许按业务覆盖。
+const sanitizeOutputOptions = computed<SanitizeOutputOptions>(() => ({
+  removeEmptyString: true,
+  removeEmptyArray: true,
+  removeEmptyObject: true,
+  removeEmptyRichText: true,
+  keepZero: true,
+  keepFalse: true,
+  ...props.sanitizeOutput,
+}));
 
-      if (
-        currentValue[segment] === null ||
-        currentValue[segment] === undefined ||
-        typeof currentValue[segment] !== 'object'
-      ) {
-        currentValue[segment] = nextContainer
-      }
+const PATH_NUMBER_RE = /^\d+$/;
 
-      currentValue = currentValue[segment]
-    })
+// 兼容 a.b、a.0.b 这类路径写法，数字段会被当作数组索引处理。
+const parsePath = (path: string) => {
+  return path
+    .split(".")
+    .filter(Boolean)
+    .map((segment) => (PATH_NUMBER_RE.test(segment) ? Number(segment) : segment));
+};
+
+const getFieldValue = (path: string) => {
+  return parsePath(path).reduce<any>((currentValue, segment) => {
+    if (currentValue == null) return undefined;
+    return currentValue[segment];
+  }, modelValue.value);
+};
+
+// 清空字段时只删除路径的最后一段，避免误删同级数据。
+const deleteFieldValue = (path: string) => {
+  const segments = parsePath(path);
+  if (!segments.length) return;
+
+  const lastSegment = segments.pop();
+  const parent = segments.reduce<any>((currentValue, segment) => {
+    if (currentValue == null) return undefined;
+    return currentValue[segment];
+  }, modelValue.value);
+
+  if (parent != null && lastSegment !== undefined) {
+    delete parent[lastSegment];
+  }
+};
+
+// 表单清空输入时不保留空字符串，同时按路径自动补齐中间对象或数组。
+const setFieldValue = (path: string, value: unknown) => {
+  const normalizedValue = value === "" ? undefined : value;
+  const segments = parsePath(path);
+
+  if (!segments.length) return;
+
+  if (normalizedValue === undefined) {
+    deleteFieldValue(path);
+    return;
   }
 
-  const isRichTextEmpty = (value: string) => {
-    if (/<(img|video|audio|iframe|embed|object)\b/i.test(value)) {
-      return false
+  let currentValue: any = modelValue.value;
+
+  segments.forEach((segment, index) => {
+    const isLast = index === segments.length - 1;
+
+    if (isLast) {
+      currentValue[segment] = normalizedValue;
+      return;
     }
 
-    // 去掉编辑器常见占位标签后再判断是否还有实际内容。
-    return (
-      value
-        .replace(/&nbsp;/gi, '')
-        .replace(/<br\s*\/?>/gi, '')
-        .replace(/<[^>]*>/g, '')
-        .trim() === ''
-    )
-  }
+    const nextSegment = segments[index + 1];
+    const nextContainer = typeof nextSegment === "number" ? [] : {};
 
-  // 提交时按配置清洗空值，但保留 0 和 false 这类有效值。
-  const sanitizeOutputValue = (value: unknown): unknown => {
-    const options = sanitizeOutputOptions.value
-
-    if (Array.isArray(value)) {
-      const sanitizedArray = value
-        .map((item) => sanitizeOutputValue(item))
-        .filter((item) => item !== undefined)
-      return sanitizedArray.length === 0 && options.removeEmptyArray ? undefined : sanitizedArray
+    if (
+      currentValue[segment] === null ||
+      currentValue[segment] === undefined ||
+      typeof currentValue[segment] !== "object"
+    ) {
+      currentValue[segment] = nextContainer;
     }
 
-    if (value && typeof value === 'object') {
-      const rawValue = toRaw(value)
-      const sanitizedObject = Object.entries(rawValue).reduce<Record<string, unknown>>(
-        (accumulator, [key, item]) => {
-          const sanitizedItem = sanitizeOutputValue(item)
-          if (sanitizedItem !== undefined) {
-            accumulator[key] = sanitizedItem
-          }
-          return accumulator
-        },
-        {}
-      )
-      return Object.keys(sanitizedObject).length === 0 && options.removeEmptyObject
-        ? undefined
-        : sanitizedObject
+    currentValue = currentValue[segment];
+  });
+};
+
+const isRichTextEmpty = (value: string) => {
+  if (/<(img|video|audio|iframe|embed|object)\b/i.test(value)) {
+    return false;
+  }
+
+  // 去掉编辑器常见占位标签后再判断是否还有实际内容。
+  return (
+    value
+      .replace(/&nbsp;/gi, "")
+      .replace(/<br\s*\/?>/gi, "")
+      .replace(/<[^>]*>/g, "")
+      .trim() === ""
+  );
+};
+
+// 提交时按配置清洗空值，但保留 0 和 false 这类有效值。
+const sanitizeOutputValue = (value: unknown): unknown => {
+  const options = sanitizeOutputOptions.value;
+
+  if (Array.isArray(value)) {
+    const sanitizedArray = value
+      .map((item) => sanitizeOutputValue(item))
+      .filter((item) => item !== undefined);
+    return sanitizedArray.length === 0 && options.removeEmptyArray ? undefined : sanitizedArray;
+  }
+
+  if (value && typeof value === "object") {
+    const rawValue = toRaw(value);
+    const sanitizedObject = Object.entries(rawValue).reduce<Record<string, unknown>>(
+      (accumulator, [key, item]) => {
+        const sanitizedItem = sanitizeOutputValue(item);
+        if (sanitizedItem !== undefined) {
+          accumulator[key] = sanitizedItem;
+        }
+        return accumulator;
+      },
+      {}
+    );
+    return Object.keys(sanitizedObject).length === 0 && options.removeEmptyObject
+      ? undefined
+      : sanitizedObject;
+  }
+
+  if (typeof value === "string") {
+    if (options.removeEmptyString && value.trim() === "") {
+      return undefined;
     }
-
-    if (typeof value === 'string') {
-      if (options.removeEmptyString && value.trim() === '') {
-        return undefined
-      }
-      if (options.removeEmptyRichText && isRichTextEmpty(value)) {
-        return undefined
-      }
-      return value
+    if (options.removeEmptyRichText && isRichTextEmpty(value)) {
+      return undefined;
     }
+    return value;
+  }
 
-    if (value === 0) {
-      return options.keepZero ? value : undefined
+  if (value === 0) {
+    return options.keepZero ? value : undefined;
+  }
+
+  if (value === false) {
+    return options.keepFalse ? value : undefined;
+  }
+
+  return value ?? undefined;
+};
+
+const getSanitizedOutput = () => {
+  return (sanitizeOutputValue(cloneModelValue(modelValue.value)) || {}) as Record<string, any>;
+};
+
+const getProps = (item: FormItem) => {
+  if (item.props) return item.props;
+  const props = { ...item };
+  rootProps.forEach((key) => delete (props as Record<string, any>)[key]);
+  return props;
+};
+
+// 获取插槽
+const getSlots = (item: FormItem) => {
+  if (!item.slots) return {};
+  const validSlots: Record<string, () => any> = {};
+  Object.entries(item.slots).forEach(([key, slotFn]) => {
+    if (slotFn) {
+      validSlots[key] = slotFn;
     }
+  });
+  return validSlots;
+};
 
-    if (value === false) {
-      return options.keepFalse ? value : undefined
-    }
-
-    return value ?? undefined
+// 组件
+const getComponent = (item: FormItem) => {
+  // 优先使用 render 函数或组件渲染自定义组件
+  if (item.render) {
+    return item.render;
   }
+  // 使用 type 获取预定义组件
+  const { type } = item;
+  return componentMap[type as keyof typeof componentMap] || componentMap["input"];
+};
 
-  const getSanitizedOutput = () => {
-    return (sanitizeOutputValue(cloneModelValue(modelValue.value)) || {}) as Record<string, any>
-  }
+/**
+ * 获取列宽 span 值
+ * 根据屏幕尺寸智能降级，避免小屏幕上表单项被压缩过小
+ */
+const getColSpan = (itemSpan: number | undefined, breakpoint: ResponsiveBreakpoint): number => {
+  return calculateResponsiveSpan(itemSpan, span.value, breakpoint);
+};
 
-  const getProps = (item: FormItem) => {
-    if (item.props) return item.props
-    const props = { ...item }
-    rootProps.forEach((key) => delete (props as Record<string, any>)[key])
-    return props
-  }
+/**
+ * 可见的表单项
+ */
+const visibleFormItems = computed(() => {
+  return props.items.filter((item) => !item.hidden);
+});
 
-  // 获取插槽
-  const getSlots = (item: FormItem) => {
-    if (!item.slots) return {}
-    const validSlots: Record<string, () => any> = {}
-    Object.entries(item.slots).forEach(([key, slotFn]) => {
-      if (slotFn) {
-        validSlots[key] = slotFn
-      }
-    })
-    return validSlots
-  }
+/**
+ * 操作按钮样式
+ */
+const actionButtonsStyle = computed(() => ({
+  "justify-content": isMobile.value
+    ? "flex-end"
+    : props.items.filter((item) => !item.hidden).length <= props.buttonLeftLimit
+      ? "flex-start"
+      : "flex-end",
+}));
 
-  // 组件
-  const getComponent = (item: FormItem) => {
-    // 优先使用 render 函数或组件渲染自定义组件
-    if (item.render) {
-      return item.render
-    }
-    // 使用 type 获取预定义组件
-    const { type } = item
-    return componentMap[type as keyof typeof componentMap] || componentMap['input']
-  }
+/**
+ * 处理重置事件
+ */
+const handleReset = () => {
+  // 重置表单字段（UI 层）
+  formInstance.value?.resetFields();
 
-  /**
-   * 获取列宽 span 值
-   * 根据屏幕尺寸智能降级，避免小屏幕上表单项被压缩过小
-   */
-  const getColSpan = (itemSpan: number | undefined, breakpoint: ResponsiveBreakpoint): number => {
-    return calculateResponsiveSpan(itemSpan, span.value, breakpoint)
-  }
+  // 恢复初始表单值，保留默认值而不是简单清空。
+  Object.keys(modelValue.value).forEach((key) => {
+    delete modelValue.value[key];
+  });
+  Object.assign(modelValue.value, cloneModelValue(initialModelValue.value));
 
-  /**
-   * 可见的表单项
-   */
-  const visibleFormItems = computed(() => {
-    return props.items.filter((item) => !item.hidden)
-  })
+  // 触发 reset 事件
+  emit("reset");
+};
 
-  /**
-   * 操作按钮样式
-   */
-  const actionButtonsStyle = computed(() => ({
-    'justify-content': isMobile.value
-      ? 'flex-end'
-      : props.items.filter((item) => !item.hidden).length <= props.buttonLeftLimit
-        ? 'flex-start'
-        : 'flex-end'
-  }))
+/**
+ * 处理提交事件
+ */
+const handleSubmit = () => {
+  // 对外只抛出清洗后的结果，避免业务层重复过滤空值。
+  emit("submit", getSanitizedOutput());
+};
 
-  /**
-   * 处理重置事件
-   */
-  const handleReset = () => {
-    // 重置表单字段（UI 层）
-    formInstance.value?.resetFields()
+defineExpose({
+  ref: formInstance,
+  validate: (...args: any[]) => formInstance.value?.validate(...args),
+  reset: handleReset,
+  // 允许外部在不触发提交事件时主动获取清洗后的输出。
+  getOutput: getSanitizedOutput,
+});
 
-    // 恢复初始表单值，保留默认值而不是简单清空。
-    Object.keys(modelValue.value).forEach((key) => {
-      delete modelValue.value[key]
-    })
-    Object.assign(modelValue.value, cloneModelValue(initialModelValue.value))
-
-    // 触发 reset 事件
-    emit('reset')
-  }
-
-  /**
-   * 处理提交事件
-   */
-  const handleSubmit = () => {
-    // 对外只抛出清洗后的结果，避免业务层重复过滤空值。
-    emit('submit', getSanitizedOutput())
-  }
-
-  defineExpose({
-    ref: formInstance,
-    validate: (...args: any[]) => formInstance.value?.validate(...args),
-    reset: handleReset,
-    // 允许外部在不触发提交事件时主动获取清洗后的输出。
-    getOutput: getSanitizedOutput
-  })
-
-  // 解构 props 以便在模板中直接使用
-  const { span, gutter, labelPosition, labelWidth } = toRefs(props)
+// 解构 props 以便在模板中直接使用
+const { span, gutter, labelPosition, labelWidth } = toRefs(props);
 </script>
diff --git a/frontend/new-web/src/components/core/forms/art-search-bar/index.vue b/frontend/new-web/src/components/core/forms/art-search-bar/index.vue
index 6786dcaa..3f21e6cb 100644
--- a/frontend/new-web/src/components/core/forms/art-search-bar/index.vue
+++ b/frontend/new-web/src/components/core/forms/art-search-bar/index.vue
@@ -73,7 +73,7 @@
           <div class="action-buttons-wrapper" :style="actionButtonsStyle">
             <div class="form-buttons">
               <ElButton v-if="showReset" class="reset-button" @click="handleReset" v-ripple>
-                {{ t('table.searchBar.reset') }}
+                {{ t("table.searchBar.reset") }}
               </ElButton>
               <ElButton
                 v-if="showSearch"
@@ -83,7 +83,7 @@
                 v-ripple
                 :disabled="disabledSearch"
               >
-                {{ t('table.searchBar.search') }}
+                {{ t("table.searchBar.search") }}
               </ElButton>
             </div>
             <div v-if="shouldShowExpandToggle" class="filter-toggle" @click="toggleExpand">
@@ -103,479 +103,479 @@
 </template>
 
 <script setup lang="ts">
-  import { ArrowUpBold, ArrowDownBold } from '@element-plus/icons-vue'
-  import { useWindowSize } from '@vueuse/core'
-  import { useI18n } from 'vue-i18n'
-  import { toRaw, type Component } from 'vue'
-  import {
-    ElCascader,
-    ElCheckbox,
-    ElCheckboxGroup,
-    ElDatePicker,
-    ElInput,
-    ElInputTag,
-    ElInputNumber,
-    ElRadioGroup,
-    ElRate,
-    ElSelect,
-    ElSlider,
-    ElSwitch,
-    ElTimePicker,
-    ElTimeSelect,
-    ElTreeSelect,
-    type FormInstance
-  } from 'element-plus'
-  import { calculateResponsiveSpan, type ResponsiveBreakpoint } from '@/utils/form/responsive'
+import { ArrowUpBold, ArrowDownBold } from "@element-plus/icons-vue";
+import { useWindowSize } from "@vueuse/core";
+import { useI18n } from "vue-i18n";
+import { toRaw, type Component } from "vue";
+import {
+  ElCascader,
+  ElCheckbox,
+  ElCheckboxGroup,
+  ElDatePicker,
+  ElInput,
+  ElInputTag,
+  ElInputNumber,
+  ElRadioGroup,
+  ElRate,
+  ElSelect,
+  ElSlider,
+  ElSwitch,
+  ElTimePicker,
+  ElTimeSelect,
+  ElTreeSelect,
+  type FormInstance,
+} from "element-plus";
+import { calculateResponsiveSpan, type ResponsiveBreakpoint } from "@/utils/form/responsive";
 
-  defineOptions({ name: 'ArtSearchBar' })
+defineOptions({ name: "ArtSearchBar" });
 
-  const componentMap = {
-    input: ElInput, // 输入框
-    inputTag: ElInputTag, // 标签输入框
-    number: ElInputNumber, // 数字输入框
-    select: ElSelect, // 选择器
-    switch: ElSwitch, // 开关
-    checkbox: ElCheckbox, // 复选框
-    checkboxgroup: ElCheckboxGroup, // 复选框组
-    radiogroup: ElRadioGroup, // 单选框组
-    date: ElDatePicker, // 日期选择器
-    daterange: ElDatePicker, // 日期范围选择器
-    datetime: ElDatePicker, // 日期时间选择器
-    datetimerange: ElDatePicker, // 日期时间范围选择器
-    rate: ElRate, // 评分
-    slider: ElSlider, // 滑块
-    cascader: ElCascader, // 级联选择器
-    timepicker: ElTimePicker, // 时间选择器
-    timeselect: ElTimeSelect, // 时间选择
-    treeselect: ElTreeSelect // 树选择器
-  }
+const componentMap = {
+  input: ElInput, // 输入框
+  inputTag: ElInputTag, // 标签输入框
+  number: ElInputNumber, // 数字输入框
+  select: ElSelect, // 选择器
+  switch: ElSwitch, // 开关
+  checkbox: ElCheckbox, // 复选框
+  checkboxgroup: ElCheckboxGroup, // 复选框组
+  radiogroup: ElRadioGroup, // 单选框组
+  date: ElDatePicker, // 日期选择器
+  daterange: ElDatePicker, // 日期范围选择器
+  datetime: ElDatePicker, // 日期时间选择器
+  datetimerange: ElDatePicker, // 日期时间范围选择器
+  rate: ElRate, // 评分
+  slider: ElSlider, // 滑块
+  cascader: ElCascader, // 级联选择器
+  timepicker: ElTimePicker, // 时间选择器
+  timeselect: ElTimeSelect, // 时间选择
+  treeselect: ElTreeSelect, // 树选择器
+};
 
-  const { width } = useWindowSize()
-  const { t } = useI18n()
-  const isMobile = computed(() => width.value < 500)
+const { width } = useWindowSize();
+const { t } = useI18n();
+const isMobile = computed(() => width.value < 500);
 
-  const formInstance = useTemplateRef<FormInstance>('formRef')
+const formInstance = useTemplateRef<FormInstance>("formRef");
 
-  // 表单项配置
-  export interface SearchFormItem {
-    /** 表单项的唯一标识 */
-    key: string
-    /** 表单项的标签文本或自定义渲染函数 */
-    label: string | (() => VNode) | Component
-    /** 表单项标签的宽度，会覆盖 Form 的 labelWidth */
-    labelWidth?: string | number
-    /** 表单项类型，支持预定义的组件类型 */
-    type?: keyof typeof componentMap | string
-    /** 自定义渲染函数或组件，用于渲染自定义组件（优先级高于 type） */
-    render?: (() => VNode) | Component
-    /** 是否隐藏该表单项 */
-    hidden?: boolean
-    /** 表单项占据的列宽，基于24格栅格系统 */
-    span?: number
-    /** 选项数据，用于 select、checkbox-group、radio-group 等 */
-    options?: Record<string, any>
-    /** 传递给表单项组件的属性 */
-    props?: Record<string, any>
-    /** 表单项的插槽配置 */
-    slots?: Record<string, (() => any) | undefined>
-    /** 表单项的占位符文本 */
-    placeholder?: string
-    /** 更多属性配置请参考 ElementPlus 官方文档 */
-  }
+// 表单项配置
+export interface SearchFormItem {
+  /** 表单项的唯一标识 */
+  key: string;
+  /** 表单项的标签文本或自定义渲染函数 */
+  label: string | (() => VNode) | Component;
+  /** 表单项标签的宽度，会覆盖 Form 的 labelWidth */
+  labelWidth?: string | number;
+  /** 表单项类型，支持预定义的组件类型 */
+  type?: keyof typeof componentMap | string;
+  /** 自定义渲染函数或组件，用于渲染自定义组件（优先级高于 type） */
+  render?: (() => VNode) | Component;
+  /** 是否隐藏该表单项 */
+  hidden?: boolean;
+  /** 表单项占据的列宽，基于24格栅格系统 */
+  span?: number;
+  /** 选项数据，用于 select、checkbox-group、radio-group 等 */
+  options?: Record<string, any>;
+  /** 传递给表单项组件的属性 */
+  props?: Record<string, any>;
+  /** 表单项的插槽配置 */
+  slots?: Record<string, (() => any) | undefined>;
+  /** 表单项的占位符文本 */
+  placeholder?: string;
+  /** 更多属性配置请参考 ElementPlus 官方文档 */
+}
 
-  // 表单配置
-  interface SearchBarProps {
-    /** 表单数据 */
-    items: SearchFormItem[]
-    /** 每列的宽度（基于 24 格布局） */
-    span?: number
-    /** 表单控件间隙 */
-    gutter?: number
-    /** 展开/收起 */
-    isExpand?: boolean
-    /** 默认是否展开（仅在 showExpand 为 true 且 isExpand 为 false 时生效） */
-    defaultExpanded?: boolean
-    /** 表单域标签的位置 */
-    labelPosition?: 'left' | 'right' | 'top'
-    /** 文字宽度 */
-    labelWidth?: string | number
-    /** 是否需要展示，收起 */
-    showExpand?: boolean
-    /** 按钮靠左对齐限制（表单项小于等于该值时） */
-    buttonLeftLimit?: number
-    /** 是否显示重置按钮 */
-    showReset?: boolean
-    /** 是否显示搜索按钮 */
-    showSearch?: boolean
-    /** 是否禁用搜索按钮 */
-    disabledSearch?: boolean
-    /** 搜索时是否清洗空值 */
-    sanitizeOutput?: Partial<SanitizeOutputOptions>
-  }
+// 表单配置
+interface SearchBarProps {
+  /** 表单数据 */
+  items: SearchFormItem[];
+  /** 每列的宽度（基于 24 格布局） */
+  span?: number;
+  /** 表单控件间隙 */
+  gutter?: number;
+  /** 展开/收起 */
+  isExpand?: boolean;
+  /** 默认是否展开（仅在 showExpand 为 true 且 isExpand 为 false 时生效） */
+  defaultExpanded?: boolean;
+  /** 表单域标签的位置 */
+  labelPosition?: "left" | "right" | "top";
+  /** 文字宽度 */
+  labelWidth?: string | number;
+  /** 是否需要展示，收起 */
+  showExpand?: boolean;
+  /** 按钮靠左对齐限制（表单项小于等于该值时） */
+  buttonLeftLimit?: number;
+  /** 是否显示重置按钮 */
+  showReset?: boolean;
+  /** 是否显示搜索按钮 */
+  showSearch?: boolean;
+  /** 是否禁用搜索按钮 */
+  disabledSearch?: boolean;
+  /** 搜索时是否清洗空值 */
+  sanitizeOutput?: Partial<SanitizeOutputOptions>;
+}
 
-  interface SanitizeOutputOptions {
-    /** 移除空字符串 */
-    removeEmptyString: boolean
-    /** 移除空数组 */
-    removeEmptyArray: boolean
-    /** 移除清洗后为空的对象 */
-    removeEmptyObject: boolean
-    /** 移除空富文本占位内容，如 <p><br></p> */
-    removeEmptyRichText: boolean
-    /** 保留数字 0 这类有效筛选值 */
-    keepZero: boolean
-    /** 保留 false 这类有效筛选值 */
-    keepFalse: boolean
-  }
+interface SanitizeOutputOptions {
+  /** 移除空字符串 */
+  removeEmptyString: boolean;
+  /** 移除空数组 */
+  removeEmptyArray: boolean;
+  /** 移除清洗后为空的对象 */
+  removeEmptyObject: boolean;
+  /** 移除空富文本占位内容，如 <p><br></p> */
+  removeEmptyRichText: boolean;
+  /** 保留数字 0 这类有效筛选值 */
+  keepZero: boolean;
+  /** 保留 false 这类有效筛选值 */
+  keepFalse: boolean;
+}
 
-  const props = withDefaults(defineProps<SearchBarProps>(), {
-    items: () => [],
-    span: 6,
-    gutter: 12,
-    isExpand: false,
-    labelPosition: 'right',
-    labelWidth: '70px',
-    showExpand: true,
-    defaultExpanded: false,
-    buttonLeftLimit: 2,
-    showReset: true,
-    showSearch: true,
-    disabledSearch: false,
-    sanitizeOutput: () => ({})
-  })
+const props = withDefaults(defineProps<SearchBarProps>(), {
+  items: () => [],
+  span: 6,
+  gutter: 12,
+  isExpand: false,
+  labelPosition: "right",
+  labelWidth: "70px",
+  showExpand: true,
+  defaultExpanded: false,
+  buttonLeftLimit: 2,
+  showReset: true,
+  showSearch: true,
+  disabledSearch: false,
+  sanitizeOutput: () => ({}),
+});
 
-  interface SearchBarEmits {
-    reset: []
-    search: [Record<string, any>]
-  }
+interface SearchBarEmits {
+  reset: [];
+  search: [Record<string, any>];
+}
 
-  const emit = defineEmits<SearchBarEmits>()
+const emit = defineEmits<SearchBarEmits>();
 
-  const modelValue = defineModel<Record<string, any>>({ default: {} })
-  const initialModelValue = ref<Record<string, any>>({})
+const modelValue = defineModel<Record<string, any>>({ default: {} });
+const initialModelValue = ref<Record<string, any>>({});
 
-  // 保存组件初始化时的表单快照，用于 reset 时恢复默认筛选条件。
-  const cloneModelValue = (value: Record<string, any> | undefined) => {
-    if (!value) return {}
+// 保存组件初始化时的表单快照，用于 reset 时恢复默认筛选条件。
+const cloneModelValue = (value: Record<string, any> | undefined) => {
+  if (!value) return {};
 
-    const deepClone = (source: unknown): unknown => {
-      if (Array.isArray(source)) {
-        return source.map((item) => deepClone(item))
-      }
-
-      if (source && typeof source === 'object') {
-        const rawSource = toRaw(source)
-        return Object.keys(rawSource).reduce<Record<string, unknown>>((accumulator, key) => {
-          accumulator[key] = deepClone((rawSource as Record<string, unknown>)[key])
-          return accumulator
-        }, {})
-      }
-
-      return source
+  const deepClone = (source: unknown): unknown => {
+    if (Array.isArray(source)) {
+      return source.map((item) => deepClone(item));
     }
 
-    return deepClone(toRaw(value)) as Record<string, any>
-  }
-
-  initialModelValue.value = cloneModelValue(modelValue.value)
-
-  /**
-   * 是否展开状态
-   */
-  const isExpanded = ref(props.defaultExpanded)
-
-  const rootProps = ['label', 'labelWidth', 'key', 'type', 'hidden', 'span', 'slots']
-  // 搜索参数默认更激进地去掉空值，减少无效 query 参数。
-  const sanitizeOutputOptions = computed<SanitizeOutputOptions>(() => ({
-    removeEmptyString: true,
-    removeEmptyArray: true,
-    removeEmptyObject: true,
-    removeEmptyRichText: true,
-    keepZero: true,
-    keepFalse: true,
-    ...props.sanitizeOutput
-  }))
-
-  const getProps = (item: SearchFormItem) => {
-    if (item.props) return item.props
-    const props = { ...item }
-    rootProps.forEach((key) => delete (props as Record<string, any>)[key])
-    return props
-  }
-
-  // 获取插槽
-  const getSlots = (item: SearchFormItem) => {
-    if (!item.slots) return {}
-    const validSlots: Record<string, () => any> = {}
-    Object.entries(item.slots).forEach(([key, slotFn]) => {
-      if (slotFn) {
-        validSlots[key] = slotFn
-      }
-    })
-    return validSlots
-  }
-
-  /**
-   * 获取列宽 span 值
-   * 根据屏幕尺寸智能降级，避免小屏幕上表单项被压缩过小
-   */
-  const getColSpan = (itemSpan: number | undefined, breakpoint: ResponsiveBreakpoint): number => {
-    return calculateResponsiveSpan(itemSpan, span.value, breakpoint)
-  }
-
-  // 搜索表单清空输入时不保留空字符串，避免后续请求携带空字段。
-  const normalizeFieldValue = (value: unknown) => {
-    return value === '' ? undefined : value
-  }
-
-  const getFieldValue = (key: string) => modelValue.value[key]
-
-  const setFieldValue = (key: string, value: unknown) => {
-    const normalizedValue = normalizeFieldValue(value)
-
-    if (normalizedValue === undefined) {
-      delete modelValue.value[key]
-      return
+    if (source && typeof source === "object") {
+      const rawSource = toRaw(source);
+      return Object.keys(rawSource).reduce<Record<string, unknown>>((accumulator, key) => {
+        accumulator[key] = deepClone((rawSource as Record<string, unknown>)[key]);
+        return accumulator;
+      }, {});
     }
 
-    modelValue.value[key] = normalizedValue
+    return source;
+  };
+
+  return deepClone(toRaw(value)) as Record<string, any>;
+};
+
+initialModelValue.value = cloneModelValue(modelValue.value);
+
+/**
+ * 是否展开状态
+ */
+const isExpanded = ref(props.defaultExpanded);
+
+const rootProps = ["label", "labelWidth", "key", "type", "hidden", "span", "slots"];
+// 搜索参数默认更激进地去掉空值，减少无效 query 参数。
+const sanitizeOutputOptions = computed<SanitizeOutputOptions>(() => ({
+  removeEmptyString: true,
+  removeEmptyArray: true,
+  removeEmptyObject: true,
+  removeEmptyRichText: true,
+  keepZero: true,
+  keepFalse: true,
+  ...props.sanitizeOutput,
+}));
+
+const getProps = (item: SearchFormItem) => {
+  if (item.props) return item.props;
+  const props = { ...item };
+  rootProps.forEach((key) => delete (props as Record<string, any>)[key]);
+  return props;
+};
+
+// 获取插槽
+const getSlots = (item: SearchFormItem) => {
+  if (!item.slots) return {};
+  const validSlots: Record<string, () => any> = {};
+  Object.entries(item.slots).forEach(([key, slotFn]) => {
+    if (slotFn) {
+      validSlots[key] = slotFn;
+    }
+  });
+  return validSlots;
+};
+
+/**
+ * 获取列宽 span 值
+ * 根据屏幕尺寸智能降级，避免小屏幕上表单项被压缩过小
+ */
+const getColSpan = (itemSpan: number | undefined, breakpoint: ResponsiveBreakpoint): number => {
+  return calculateResponsiveSpan(itemSpan, span.value, breakpoint);
+};
+
+// 搜索表单清空输入时不保留空字符串，避免后续请求携带空字段。
+const normalizeFieldValue = (value: unknown) => {
+  return value === "" ? undefined : value;
+};
+
+const getFieldValue = (key: string) => modelValue.value[key];
+
+const setFieldValue = (key: string, value: unknown) => {
+  const normalizedValue = normalizeFieldValue(value);
+
+  if (normalizedValue === undefined) {
+    delete modelValue.value[key];
+    return;
   }
 
-  const isRichTextEmpty = (value: string) => {
-    if (/<(img|video|audio|iframe|embed|object)\b/i.test(value)) {
-      return false
-    }
+  modelValue.value[key] = normalizedValue;
+};
 
-    // 去掉编辑器常见占位标签后再判断是否还有实际内容。
-    return (
-      value
-        .replace(/&nbsp;/gi, '')
-        .replace(/<br\s*\/?>/gi, '')
-        .replace(/<[^>]*>/g, '')
-        .trim() === ''
-    )
+const isRichTextEmpty = (value: string) => {
+  if (/<(img|video|audio|iframe|embed|object)\b/i.test(value)) {
+    return false;
   }
 
-  // 搜索时按配置清洗空值，但保留 0 和 false 这类有效筛选条件。
-  const sanitizeOutputValue = (value: unknown): unknown => {
-    const options = sanitizeOutputOptions.value
+  // 去掉编辑器常见占位标签后再判断是否还有实际内容。
+  return (
+    value
+      .replace(/&nbsp;/gi, "")
+      .replace(/<br\s*\/?>/gi, "")
+      .replace(/<[^>]*>/g, "")
+      .trim() === ""
+  );
+};
 
-    if (Array.isArray(value)) {
-      const sanitizedArray = value
-        .map((item) => sanitizeOutputValue(item))
-        .filter((item) => item !== undefined)
-      return sanitizedArray.length === 0 && options.removeEmptyArray ? undefined : sanitizedArray
-    }
+// 搜索时按配置清洗空值，但保留 0 和 false 这类有效筛选条件。
+const sanitizeOutputValue = (value: unknown): unknown => {
+  const options = sanitizeOutputOptions.value;
 
-    if (value && typeof value === 'object') {
-      const rawValue = toRaw(value)
-      const sanitizedObject = Object.entries(rawValue).reduce<Record<string, unknown>>(
-        (accumulator, [key, item]) => {
-          const sanitizedItem = sanitizeOutputValue(item)
-          if (sanitizedItem !== undefined) {
-            accumulator[key] = sanitizedItem
-          }
-          return accumulator
-        },
-        {}
-      )
-      return Object.keys(sanitizedObject).length === 0 && options.removeEmptyObject
-        ? undefined
-        : sanitizedObject
-    }
-
-    if (typeof value === 'string') {
-      if (options.removeEmptyString && value.trim() === '') {
-        return undefined
-      }
-      if (options.removeEmptyRichText && isRichTextEmpty(value)) {
-        return undefined
-      }
-      return value
-    }
-
-    if (value === 0) {
-      return options.keepZero ? value : undefined
-    }
-
-    if (value === false) {
-      return options.keepFalse ? value : undefined
-    }
-
-    return value ?? undefined
+  if (Array.isArray(value)) {
+    const sanitizedArray = value
+      .map((item) => sanitizeOutputValue(item))
+      .filter((item) => item !== undefined);
+    return sanitizedArray.length === 0 && options.removeEmptyArray ? undefined : sanitizedArray;
   }
 
-  const getSanitizedOutput = () => {
-    return (sanitizeOutputValue(cloneModelValue(modelValue.value)) || {}) as Record<string, any>
+  if (value && typeof value === "object") {
+    const rawValue = toRaw(value);
+    const sanitizedObject = Object.entries(rawValue).reduce<Record<string, unknown>>(
+      (accumulator, [key, item]) => {
+        const sanitizedItem = sanitizeOutputValue(item);
+        if (sanitizedItem !== undefined) {
+          accumulator[key] = sanitizedItem;
+        }
+        return accumulator;
+      },
+      {}
+    );
+    return Object.keys(sanitizedObject).length === 0 && options.removeEmptyObject
+      ? undefined
+      : sanitizedObject;
   }
 
-  // 组件
-  const getComponent = (item: SearchFormItem) => {
-    // 优先使用 render 函数或组件渲染自定义组件
-    if (item.render) {
-      return item.render
+  if (typeof value === "string") {
+    if (options.removeEmptyString && value.trim() === "") {
+      return undefined;
     }
-    // 使用 type 获取预定义组件
-    const { type } = item
-    return componentMap[type as keyof typeof componentMap] || componentMap['input']
-  }
-
-  /**
-   * 可见的表单项
-   */
-  const visibleFormItems = computed(() => {
-    const filteredItems = props.items.filter((item) => !item.hidden)
-    const shouldShowLess = !props.isExpand && !isExpanded.value
-    if (shouldShowLess) {
-      const maxItemsPerRow = Math.floor(24 / props.span) - 1
-      return filteredItems.slice(0, maxItemsPerRow)
+    if (options.removeEmptyRichText && isRichTextEmpty(value)) {
+      return undefined;
     }
-    return filteredItems
-  })
-
-  /**
-   * 是否应该显示展开/收起按钮
-   */
-  const shouldShowExpandToggle = computed(() => {
-    const filteredItems = props.items.filter((item) => !item.hidden)
-    return (
-      !props.isExpand && props.showExpand && filteredItems.length > Math.floor(24 / props.span) - 1
-    )
-  })
-
-  /**
-   * 展开/收起按钮文本
-   */
-  const expandToggleText = computed(() => {
-    return isExpanded.value ? t('table.searchBar.collapse') : t('table.searchBar.expand')
-  })
-
-  /**
-   * 操作按钮样式
-   */
-  const actionButtonsStyle = computed(() => ({
-    'justify-content': isMobile.value
-      ? 'flex-end'
-      : props.items.filter((item) => !item.hidden).length <= props.buttonLeftLimit
-        ? 'flex-start'
-        : 'flex-end'
-  }))
-
-  /**
-   * 切换展开/收起状态
-   */
-  const toggleExpand = () => {
-    isExpanded.value = !isExpanded.value
+    return value;
   }
 
-  /**
-   * 处理重置事件
-   */
-  const handleReset = () => {
-    // 重置表单字段（UI 层）
-    formInstance.value?.resetFields()
-
-    // 恢复初始表单值，保留默认搜索条件而不是简单清空。
-    Object.keys(modelValue.value).forEach((key) => {
-      delete modelValue.value[key]
-    })
-    Object.assign(modelValue.value, cloneModelValue(initialModelValue.value))
-
-    // 触发 reset 事件
-    emit('reset')
+  if (value === 0) {
+    return options.keepZero ? value : undefined;
   }
 
-  /**
-   * 处理搜索事件
-   */
-  const handleSearch = () => {
-    // 对外只抛出清洗后的查询参数，避免接口收到空数组/空字符串。
-    emit('search', getSanitizedOutput())
+  if (value === false) {
+    return options.keepFalse ? value : undefined;
   }
 
-  defineExpose({
-    ref: formInstance,
-    validate: (...args: any[]) => formInstance.value?.validate(...args),
-    reset: handleReset,
-    // 允许外部在手动组装请求前直接读取清洗后的参数。
-    getOutput: getSanitizedOutput
-  })
+  return value ?? undefined;
+};
 
-  // 解构 props 以便在模板中直接使用
-  const { span, gutter, labelPosition, labelWidth } = toRefs(props)
+const getSanitizedOutput = () => {
+  return (sanitizeOutputValue(cloneModelValue(modelValue.value)) || {}) as Record<string, any>;
+};
+
+// 组件
+const getComponent = (item: SearchFormItem) => {
+  // 优先使用 render 函数或组件渲染自定义组件
+  if (item.render) {
+    return item.render;
+  }
+  // 使用 type 获取预定义组件
+  const { type } = item;
+  return componentMap[type as keyof typeof componentMap] || componentMap["input"];
+};
+
+/**
+ * 可见的表单项
+ */
+const visibleFormItems = computed(() => {
+  const filteredItems = props.items.filter((item) => !item.hidden);
+  const shouldShowLess = !props.isExpand && !isExpanded.value;
+  if (shouldShowLess) {
+    const maxItemsPerRow = Math.floor(24 / props.span) - 1;
+    return filteredItems.slice(0, maxItemsPerRow);
+  }
+  return filteredItems;
+});
+
+/**
+ * 是否应该显示展开/收起按钮
+ */
+const shouldShowExpandToggle = computed(() => {
+  const filteredItems = props.items.filter((item) => !item.hidden);
+  return (
+    !props.isExpand && props.showExpand && filteredItems.length > Math.floor(24 / props.span) - 1
+  );
+});
+
+/**
+ * 展开/收起按钮文本
+ */
+const expandToggleText = computed(() => {
+  return isExpanded.value ? t("table.searchBar.collapse") : t("table.searchBar.expand");
+});
+
+/**
+ * 操作按钮样式
+ */
+const actionButtonsStyle = computed(() => ({
+  "justify-content": isMobile.value
+    ? "flex-end"
+    : props.items.filter((item) => !item.hidden).length <= props.buttonLeftLimit
+      ? "flex-start"
+      : "flex-end",
+}));
+
+/**
+ * 切换展开/收起状态
+ */
+const toggleExpand = () => {
+  isExpanded.value = !isExpanded.value;
+};
+
+/**
+ * 处理重置事件
+ */
+const handleReset = () => {
+  // 重置表单字段（UI 层）
+  formInstance.value?.resetFields();
+
+  // 恢复初始表单值，保留默认搜索条件而不是简单清空。
+  Object.keys(modelValue.value).forEach((key) => {
+    delete modelValue.value[key];
+  });
+  Object.assign(modelValue.value, cloneModelValue(initialModelValue.value));
+
+  // 触发 reset 事件
+  emit("reset");
+};
+
+/**
+ * 处理搜索事件
+ */
+const handleSearch = () => {
+  // 对外只抛出清洗后的查询参数，避免接口收到空数组/空字符串。
+  emit("search", getSanitizedOutput());
+};
+
+defineExpose({
+  ref: formInstance,
+  validate: (...args: any[]) => formInstance.value?.validate(...args),
+  reset: handleReset,
+  // 允许外部在手动组装请求前直接读取清洗后的参数。
+  getOutput: getSanitizedOutput,
+});
+
+// 解构 props 以便在模板中直接使用
+const { span, gutter, labelPosition, labelWidth } = toRefs(props);
 </script>
 
 <style lang="scss" scoped>
+.art-search-bar {
+  padding: 15px 20px 0;
+
+  .action-column {
+    flex: 1;
+    max-width: 100%;
+
+    .action-buttons-wrapper {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: flex-end;
+      margin-bottom: 12px;
+    }
+
+    .form-buttons {
+      display: flex;
+      gap: 8px;
+    }
+
+    .filter-toggle {
+      display: flex;
+      align-items: center;
+      margin-left: 10px;
+      line-height: 32px;
+      color: var(--theme-color);
+      cursor: pointer;
+      transition: color 0.2s ease;
+
+      &:hover {
+        color: var(--ElColor-primary);
+      }
+
+      span {
+        font-size: 14px;
+        user-select: none;
+      }
+
+      .icon-wrapper {
+        display: flex;
+        align-items: center;
+        margin-left: 4px;
+        font-size: 14px;
+        transition: transform 0.2s ease;
+      }
+    }
+  }
+}
+
+// 响应式优化
+@media (width <= 768px) {
   .art-search-bar {
-    padding: 15px 20px 0;
+    padding: 16px 16px 0;
 
     .action-column {
-      flex: 1;
-      max-width: 100%;
-
       .action-buttons-wrapper {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        justify-content: flex-end;
-        margin-bottom: 12px;
-      }
-
-      .form-buttons {
-        display: flex;
+        flex-direction: column;
         gap: 8px;
-      }
+        align-items: stretch;
 
-      .filter-toggle {
-        display: flex;
-        align-items: center;
-        margin-left: 10px;
-        line-height: 32px;
-        color: var(--theme-color);
-        cursor: pointer;
-        transition: color 0.2s ease;
-
-        &:hover {
-          color: var(--ElColor-primary);
+        .form-buttons {
+          justify-content: center;
         }
 
-        span {
-          font-size: 14px;
-          user-select: none;
-        }
-
-        .icon-wrapper {
-          display: flex;
-          align-items: center;
-          margin-left: 4px;
-          font-size: 14px;
-          transition: transform 0.2s ease;
-        }
-      }
-    }
-  }
-
-  // 响应式优化
-  @media (width <= 768px) {
-    .art-search-bar {
-      padding: 16px 16px 0;
-
-      .action-column {
-        .action-buttons-wrapper {
-          flex-direction: column;
-          gap: 8px;
-          align-items: stretch;
-
-          .form-buttons {
-            justify-content: center;
-          }
-
-          .filter-toggle {
-            justify-content: center;
-            margin-left: 0;
-          }
+        .filter-toggle {
+          justify-content: center;
+          margin-left: 0;
         }
       }
     }
   }
+}
 </style>
diff --git a/frontend/new-web/src/components/core/forms/art-wang-editor/index.vue b/frontend/new-web/src/components/core/forms/art-wang-editor/index.vue
index 3a556912..bfadee07 100644
--- a/frontend/new-web/src/components/core/forms/art-wang-editor/index.vue
+++ b/frontend/new-web/src/components/core/forms/art-wang-editor/index.vue
@@ -18,240 +18,240 @@
 </template>
 
 <script setup lang="ts">
-  import '@wangeditor/editor/dist/css/style.css'
-  import { onBeforeUnmount, onMounted, shallowRef, computed } from 'vue'
-  import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
-  import { useUserStore } from '@/store/modules/user'
-  import EmojiText from '@/utils/ui/emojo'
-  import { IDomEditor, IToolbarConfig, IEditorConfig } from '@wangeditor/editor'
-  import request from '@/utils/http'
+import "@wangeditor/editor/dist/css/style.css";
+import { onBeforeUnmount, onMounted, shallowRef, computed } from "vue";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { useUserStore } from "@/store/modules/user.store";
+import EmojiText from "@/utils/ui/emojo";
+import { IDomEditor, IToolbarConfig, IEditorConfig } from "@wangeditor/editor";
+import request from "@/utils/http";
 
-  defineOptions({ name: 'ArtWangEditor' })
+defineOptions({ name: "ArtWangEditor" });
 
-  type InsertFnType = (url: string, alt: string, href: string) => void
+type InsertFnType = (url: string, alt: string, href: string) => void;
 
-  const { VITE_API_URL } = import.meta.env
+const { VITE_API_URL } = import.meta.env;
 
-  // Props 定义
-  interface Props {
-    /** 编辑器高度 */
-    height?: string
-    /** 自定义工具栏配置 */
-    toolbarKeys?: string[]
-    /** 插入新工具到指定位置 */
-    insertKeys?: { index: number; keys: string[] }
-    /** 排除的工具栏项 */
-    excludeKeys?: string[]
-    /** 编辑器模式 */
-    mode?: 'default' | 'simple'
-    /** 占位符文本 */
-    placeholder?: string
-    /** 上传配置 */
-    uploadConfig?: {
-      maxFileSize?: number
-      maxNumberOfFiles?: number
-      server?: string
-      // 是否开启自定义上传
-      isCustomUpload?: boolean
-    }
+// Props 定义
+interface Props {
+  /** 编辑器高度 */
+  height?: string;
+  /** 自定义工具栏配置 */
+  toolbarKeys?: string[];
+  /** 插入新工具到指定位置 */
+  insertKeys?: { index: number; keys: string[] };
+  /** 排除的工具栏项 */
+  excludeKeys?: string[];
+  /** 编辑器模式 */
+  mode?: "default" | "simple";
+  /** 占位符文本 */
+  placeholder?: string;
+  /** 上传配置 */
+  uploadConfig?: {
+    maxFileSize?: number;
+    maxNumberOfFiles?: number;
+    server?: string;
+    // 是否开启自定义上传
+    isCustomUpload?: boolean;
+  };
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  height: "500px",
+  mode: "default",
+  placeholder: "请输入内容...",
+  excludeKeys: () => ["fontFamily"],
+  isCustomUpload: false,
+});
+
+const modelValue = defineModel<string>({ required: true });
+
+// 编辑器实例
+const editorRef = shallowRef<IDomEditor>();
+const userStore = useUserStore();
+
+// 常量配置
+const DEFAULT_UPLOAD_CONFIG = {
+  maxFileSize: 3 * 1024 * 1024, // 3MB
+  maxNumberOfFiles: 10,
+  fieldName: "file",
+  allowedFileTypes: ["image/*"],
+} as const;
+
+// 计算属性：上传服务器地址
+const uploadServer = computed(
+  () => props.uploadConfig?.server || `${VITE_API_URL}/common/upload/wangeditor`
+);
+
+// 合并上传配置
+const mergedUploadConfig = computed(() => ({
+  ...DEFAULT_UPLOAD_CONFIG,
+  ...props.uploadConfig,
+}));
+
+// 工具栏配置
+const toolbarConfig = computed((): Partial<IToolbarConfig> => {
+  const config: Partial<IToolbarConfig> = {};
+
+  // 完全自定义工具栏
+  if (props.toolbarKeys && props.toolbarKeys.length > 0) {
+    config.toolbarKeys = props.toolbarKeys;
   }
 
-  const props = withDefaults(defineProps<Props>(), {
-    height: '500px',
-    mode: 'default',
-    placeholder: '请输入内容...',
-    excludeKeys: () => ['fontFamily'],
-    isCustomUpload: false
-  })
+  // 插入新工具
+  if (props.insertKeys) {
+    config.insertKeys = props.insertKeys;
+  }
 
-  const modelValue = defineModel<string>({ required: true })
+  // 排除工具
+  if (props.excludeKeys && props.excludeKeys.length > 0) {
+    config.excludeKeys = props.excludeKeys;
+  }
 
-  // 编辑器实例
-  const editorRef = shallowRef<IDomEditor>()
-  const userStore = useUserStore()
+  return config;
+});
 
-  // 常量配置
-  const DEFAULT_UPLOAD_CONFIG = {
-    maxFileSize: 3 * 1024 * 1024, // 3MB
-    maxNumberOfFiles: 10,
-    fieldName: 'file',
-    allowedFileTypes: ['image/*']
-  } as const
+// 编辑器配置
+const editorConfig: Partial<IEditorConfig> = {
+  placeholder: props.placeholder,
+  MENU_CONF: {
+    uploadImage: {
+      fieldName: mergedUploadConfig.value.fieldName,
+      maxFileSize: mergedUploadConfig.value.maxFileSize,
+      maxNumberOfFiles: mergedUploadConfig.value.maxNumberOfFiles,
+      allowedFileTypes: mergedUploadConfig.value.allowedFileTypes,
+      server: uploadServer.value,
+      headers: {
+        Authorization: userStore.accessToken,
+      },
+      onSuccess() {
+        ElMessage.success(`图片上传成功 ${EmojiText[200]}`);
+      },
+      onError(file: File, err: any, res: any) {
+        console.error("图片上传失败:", err, res);
+        ElMessage.error(`图片上传失败 ${EmojiText[500]}`);
+      },
+    },
+  },
+};
 
-  // 计算属性：上传服务器地址
-  const uploadServer = computed(
-    () => props.uploadConfig?.server || `${VITE_API_URL}/api/common/upload/wangeditor`
-  )
+// 自定义上传
+if (props.uploadConfig?.isCustomUpload && props.uploadConfig?.server && editorConfig.MENU_CONF) {
+  editorConfig.MENU_CONF.uploadImage.customUpload = async (file: File, insertFn: InsertFnType) => {
+    try {
+      const formData = new FormData();
+      formData.append(mergedUploadConfig.value.fieldName, file);
 
-  // 合并上传配置
-  const mergedUploadConfig = computed(() => ({
-    ...DEFAULT_UPLOAD_CONFIG,
-    ...props.uploadConfig
-  }))
-
-  // 工具栏配置
-  const toolbarConfig = computed((): Partial<IToolbarConfig> => {
-    const config: Partial<IToolbarConfig> = {}
-
-    // 完全自定义工具栏
-    if (props.toolbarKeys && props.toolbarKeys.length > 0) {
-      config.toolbarKeys = props.toolbarKeys
-    }
-
-    // 插入新工具
-    if (props.insertKeys) {
-      config.insertKeys = props.insertKeys
-    }
-
-    // 排除工具
-    if (props.excludeKeys && props.excludeKeys.length > 0) {
-      config.excludeKeys = props.excludeKeys
-    }
-
-    return config
-  })
-
-  // 编辑器配置
-  const editorConfig: Partial<IEditorConfig> = {
-    placeholder: props.placeholder,
-    MENU_CONF: {
-      uploadImage: {
-        fieldName: mergedUploadConfig.value.fieldName,
-        maxFileSize: mergedUploadConfig.value.maxFileSize,
-        maxNumberOfFiles: mergedUploadConfig.value.maxNumberOfFiles,
-        allowedFileTypes: mergedUploadConfig.value.allowedFileTypes,
-        server: uploadServer.value,
+      const response = await request.post<{ url: string; alt: string; href: string }>({
+        url: props.uploadConfig?.server,
+        data: formData,
         headers: {
-          Authorization: userStore.accessToken
+          "Content-Type": "multipart/form-data",
+          Authorization: userStore.accessToken,
         },
-        onSuccess() {
-          ElMessage.success(`图片上传成功 ${EmojiText[200]}`)
-        },
-        onError(file: File, err: any, res: any) {
-          console.error('图片上传失败:', err, res)
-          ElMessage.error(`图片上传失败 ${EmojiText[500]}`)
-        }
+      });
+
+      const { url, alt, href } = response;
+
+      if (!url) {
+        throw new Error("上传失败，请检查服务端配置");
       }
+
+      insertFn(url, alt, href);
+      ElMessage.success(`图片上传成功 ${EmojiText[200]}`);
+    } catch (error) {
+      console.error("图片上传失败:", error);
+      ElMessage.error(`图片上传失败 ${EmojiText[500]}`);
     }
-  }
+  };
+}
 
-  // 自定义上传
-  if (props.uploadConfig?.isCustomUpload && props.uploadConfig?.server && editorConfig.MENU_CONF) {
-    editorConfig.MENU_CONF.uploadImage.customUpload = async (file: File, insertFn: InsertFnType) => {
-      try {
-        const formData = new FormData()
-        formData.append(mergedUploadConfig.value.fieldName, file)
+// 编辑器创建回调
+const onCreateEditor = (editor: IDomEditor) => {
+  editorRef.value = editor;
 
-        const response = await request.post<{ url: string; alt: string; href: string }>({
-          url: props.uploadConfig?.server,
-          data: formData,
-          headers: {
-            'Content-Type':'multipart/form-data',
-            Authorization: userStore.accessToken
-          }
-        })
+  // 监听全屏事件
+  editor.on("fullScreen", () => {
+    console.log("编辑器进入全屏模式");
+  });
 
-        const { url, alt, href } = response
+  // 确保在编辑器创建后应用自定义图标
+  applyCustomIcons();
+};
 
-        if (!url) {
-          throw new Error('上传失败，请检查服务端配置')
-        }
+// 应用自定义图标（带重试机制）
+const applyCustomIcons = () => {
+  let retryCount = 0;
+  const maxRetries = 10;
+  const retryDelay = 100;
 
-        insertFn(url, alt, href)
-        ElMessage.success(`图片上传成功 ${EmojiText[200]}`)
-      } catch (error) {
-        console.error('图片上传失败:', error)
-        ElMessage.error(`图片上传失败 ${EmojiText[500]}`)
-      }
-    }
-  }
-
-  // 编辑器创建回调
-  const onCreateEditor = (editor: IDomEditor) => {
-    editorRef.value = editor
-
-    // 监听全屏事件
-    editor.on('fullScreen', () => {
-      console.log('编辑器进入全屏模式')
-    })
-
-    // 确保在编辑器创建后应用自定义图标
-    applyCustomIcons()
-  }
-
-  // 应用自定义图标（带重试机制）
-  const applyCustomIcons = () => {
-    let retryCount = 0
-    const maxRetries = 10
-    const retryDelay = 100
-
-    const tryApplyIcons = () => {
-      const editor = editorRef.value
-      if (!editor) {
-        if (retryCount < maxRetries) {
-          retryCount++
-          setTimeout(tryApplyIcons, retryDelay)
-        }
-        return
-      }
-
-      // 获取当前编辑器的工具栏容器
-      const editorContainer = editor.getEditableContainer().closest('.editor-wrapper')
-      if (!editorContainer) {
-        if (retryCount < maxRetries) {
-          retryCount++
-          setTimeout(tryApplyIcons, retryDelay)
-        }
-        return
-      }
-
-      const toolbar = editorContainer.querySelector('.w-e-toolbar')
-      const toolbarButtons = editorContainer.querySelectorAll('.w-e-bar-item button[data-menu-key]')
-
-      if (toolbar && toolbarButtons.length > 0) {
-        return
-      }
-
-      // 如果工具栏还没渲染完成，继续重试
+  const tryApplyIcons = () => {
+    const editor = editorRef.value;
+    if (!editor) {
       if (retryCount < maxRetries) {
-        retryCount++
-        setTimeout(tryApplyIcons, retryDelay)
-      } else {
-        console.warn('工具栏渲染超时，无法应用自定义图标 - 编辑器实例:', editor.id)
+        retryCount++;
+        setTimeout(tryApplyIcons, retryDelay);
       }
+      return;
     }
 
-    // 使用 requestAnimationFrame 确保在下一帧执行
-    requestAnimationFrame(tryApplyIcons)
+    // 获取当前编辑器的工具栏容器
+    const editorContainer = editor.getEditableContainer().closest(".editor-wrapper");
+    if (!editorContainer) {
+      if (retryCount < maxRetries) {
+        retryCount++;
+        setTimeout(tryApplyIcons, retryDelay);
+      }
+      return;
+    }
+
+    const toolbar = editorContainer.querySelector(".w-e-toolbar");
+    const toolbarButtons = editorContainer.querySelectorAll(".w-e-bar-item button[data-menu-key]");
+
+    if (toolbar && toolbarButtons.length > 0) {
+      return;
+    }
+
+    // 如果工具栏还没渲染完成，继续重试
+    if (retryCount < maxRetries) {
+      retryCount++;
+      setTimeout(tryApplyIcons, retryDelay);
+    } else {
+      console.warn("工具栏渲染超时，无法应用自定义图标 - 编辑器实例:", editor.id);
+    }
+  };
+
+  // 使用 requestAnimationFrame 确保在下一帧执行
+  requestAnimationFrame(tryApplyIcons);
+};
+
+// 暴露编辑器实例和方法
+defineExpose({
+  /** 获取编辑器实例 */
+  getEditor: () => editorRef.value,
+  /** 设置编辑器内容 */
+  setHtml: (html: string) => editorRef.value?.setHtml(html),
+  /** 获取编辑器内容 */
+  getHtml: () => editorRef.value?.getHtml(),
+  /** 清空编辑器 */
+  clear: () => editorRef.value?.clear(),
+  /** 聚焦编辑器 */
+  focus: () => editorRef.value?.focus(),
+});
+
+// 生命周期
+onMounted(() => {
+  // 图标替换已在 onCreateEditor 中处理
+});
+
+onBeforeUnmount(() => {
+  const editor = editorRef.value;
+  if (editor) {
+    editor.destroy();
   }
-
-  // 暴露编辑器实例和方法
-  defineExpose({
-    /** 获取编辑器实例 */
-    getEditor: () => editorRef.value,
-    /** 设置编辑器内容 */
-    setHtml: (html: string) => editorRef.value?.setHtml(html),
-    /** 获取编辑器内容 */
-    getHtml: () => editorRef.value?.getHtml(),
-    /** 清空编辑器 */
-    clear: () => editorRef.value?.clear(),
-    /** 聚焦编辑器 */
-    focus: () => editorRef.value?.focus()
-  })
-
-  // 生命周期
-  onMounted(() => {
-    // 图标替换已在 onCreateEditor 中处理
-  })
-
-  onBeforeUnmount(() => {
-    const editor = editorRef.value
-    if (editor) {
-      editor.destroy()
-    }
-  })
+});
 </script>
 
 <style lang="scss">
-  @use './style';
+@use "./style";
 </style>
diff --git a/frontend/new-web/src/components/core/layouts/art-breadcrumb/index.vue b/frontend/new-web/src/components/core/layouts/art-breadcrumb/index.vue
index 4b548598..49945140 100755
--- a/frontend/new-web/src/components/core/layouts/art-breadcrumb/index.vue
+++ b/frontend/new-web/src/components/core/layouts/art-breadcrumb/index.vue
@@ -17,8 +17,9 @@
         >
           <span
             class="block max-w-46 overflow-hidden text-ellipsis whitespace-nowrap px-1.5 text-sm text-g-600 dark:text-g-800"
-            >{{ formatMenuTitle(item.meta?.title as string) }}</span
           >
+            {{ formatMenuTitle(item.meta?.title as string) }}
+          </span>
         </div>
         <div
           v-if="!isLastItem(index) && item.meta?.title"
@@ -33,110 +34,110 @@
 </template>
 
 <script setup lang="ts">
-  import { computed } from 'vue'
-  import { useRouter, useRoute } from 'vue-router'
-  import type { RouteLocationMatched, RouteRecordRaw } from 'vue-router'
-  import { formatMenuTitle } from '@/utils/router'
+import { computed } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import type { RouteLocationMatched, RouteRecordRaw } from "vue-router";
+import { formatMenuTitle } from "@/utils/navigation/router";
 
-  defineOptions({ name: 'ArtBreadcrumb' })
+defineOptions({ name: "ArtBreadcrumb" });
 
-  export interface BreadcrumbItem {
-    path: string
-    meta: RouteRecordRaw['meta']
+export interface BreadcrumbItem {
+  path: string;
+  meta: RouteRecordRaw["meta"];
+}
+
+const route = useRoute();
+const router = useRouter();
+
+// 使用computed替代watch，提高性能
+const breadcrumbItems = computed<BreadcrumbItem[]>(() => {
+  const { matched } = route;
+  const matchedLength = matched.length;
+
+  // 处理首页情况
+  if (!matchedLength || isHomeRoute(matched[0])) {
+    return [];
   }
 
-  const route = useRoute()
-  const router = useRouter()
+  // 处理一级菜单和普通路由
+  const firstRoute = matched[0];
+  const isFirstLevel = firstRoute.meta?.isFirstLevel;
+  const lastIndex = matchedLength - 1;
+  const currentRoute = matched[lastIndex];
+  const currentRouteMeta = currentRoute.meta;
 
-  // 使用computed替代watch，提高性能
-  const breadcrumbItems = computed<BreadcrumbItem[]>(() => {
-    const { matched } = route
-    const matchedLength = matched.length
+  let items = isFirstLevel
+    ? [createBreadcrumbItem(currentRoute)]
+    : matched.map(createBreadcrumbItem);
 
-    // 处理首页情况
-    if (!matchedLength || isHomeRoute(matched[0])) {
-      return []
-    }
-
-    // 处理一级菜单和普通路由
-    const firstRoute = matched[0]
-    const isFirstLevel = firstRoute.meta?.isFirstLevel
-    const lastIndex = matchedLength - 1
-    const currentRoute = matched[lastIndex]
-    const currentRouteMeta = currentRoute.meta
-
-    let items = isFirstLevel
-      ? [createBreadcrumbItem(currentRoute)]
-      : matched.map(createBreadcrumbItem)
-
-    // 过滤包裹容器：如果有多个项目且第一个是容器路由（如 /outside），则移除它
-    if (items.length > 1 && isWrapperContainer(items[0])) {
-      items = items.slice(1)
-    }
-
-    // IFrame 页面特殊处理：如果过滤后只剩一个 iframe 页面，或者所有项都是包裹容器，则仅展示当前页
-    if (currentRouteMeta?.isIframe && (items.length === 1 || items.every(isWrapperContainer))) {
-      return [createBreadcrumbItem(currentRoute)]
-    }
-
-    return items
-  })
-
-  // 辅助函数：判断是否为包裹容器路由
-  const isWrapperContainer = (item: BreadcrumbItem): boolean =>
-    item.path === '/outside' && !!item.meta?.isIframe
-
-  // 辅助函数：创建面包屑项目
-  const createBreadcrumbItem = (route: RouteLocationMatched): BreadcrumbItem => ({
-    path: route.path,
-    meta: route.meta
-  })
-
-  // 辅助函数：判断是否为首页
-  const isHomeRoute = (route: RouteLocationMatched): boolean => route.name === '/'
-
-  // 辅助函数：判断是否为最后一项
-  const isLastItem = (index: number): boolean => {
-    const itemsLength = breadcrumbItems.value.length
-    return index === itemsLength - 1
+  // 过滤包裹容器：如果有多个项目且第一个是容器路由（如 /outside），则移除它
+  if (items.length > 1 && isWrapperContainer(items[0])) {
+    items = items.slice(1);
   }
 
-  // 辅助函数：判断是否可点击
-  const isClickable = (item: BreadcrumbItem, index: number): boolean =>
-    item.path !== '/outside' && !isLastItem(index)
-
-  // 辅助函数：查找路由的第一个有效子路由
-  const findFirstValidChild = (route: RouteRecordRaw) =>
-    route.children?.find((child) => !child.redirect && !child.meta?.isHide)
-
-  // 辅助函数：构建完整路径
-  const buildFullPath = (childPath: string): string => `/${childPath}`.replace('//', '/')
-
-  // 处理面包屑点击事件
-  async function handleBreadcrumbClick(item: BreadcrumbItem, index: number): Promise<void> {
-    // 如果是最后一项或外部链接，不处理
-    if (isLastItem(index) || item.path === '/outside') {
-      return
-    }
-
-    try {
-      // 缓存路由表查找结果
-      const routes = router.getRoutes()
-      const targetRoute = routes.find((route) => route.path === item.path)
-
-      if (!targetRoute?.children?.length) {
-        await router.push(item.path)
-        return
-      }
-
-      const firstValidChild = findFirstValidChild(targetRoute)
-      if (firstValidChild) {
-        await router.push(buildFullPath(firstValidChild.path))
-      } else {
-        await router.push(item.path)
-      }
-    } catch (error) {
-      console.error('导航失败:', error)
-    }
+  // IFrame 页面特殊处理：如果过滤后只剩一个 iframe 页面，或者所有项都是包裹容器，则仅展示当前页
+  if (currentRouteMeta?.isIframe && (items.length === 1 || items.every(isWrapperContainer))) {
+    return [createBreadcrumbItem(currentRoute)];
   }
+
+  return items;
+});
+
+// 辅助函数：判断是否为包裹容器路由
+const isWrapperContainer = (item: BreadcrumbItem): boolean =>
+  item.path === "/outside" && !!item.meta?.isIframe;
+
+// 辅助函数：创建面包屑项目
+const createBreadcrumbItem = (route: RouteLocationMatched): BreadcrumbItem => ({
+  path: route.path,
+  meta: route.meta,
+});
+
+// 辅助函数：判断是否为首页
+const isHomeRoute = (route: RouteLocationMatched): boolean => route.name === "/";
+
+// 辅助函数：判断是否为最后一项
+const isLastItem = (index: number): boolean => {
+  const itemsLength = breadcrumbItems.value.length;
+  return index === itemsLength - 1;
+};
+
+// 辅助函数：判断是否可点击
+const isClickable = (item: BreadcrumbItem, index: number): boolean =>
+  item.path !== "/outside" && !isLastItem(index);
+
+// 辅助函数：查找路由的第一个有效子路由
+const findFirstValidChild = (route: RouteRecordRaw) =>
+  route.children?.find((child) => !child.redirect && !child.meta?.isHide);
+
+// 辅助函数：构建完整路径
+const buildFullPath = (childPath: string): string => `/${childPath}`.replace("//", "/");
+
+// 处理面包屑点击事件
+async function handleBreadcrumbClick(item: BreadcrumbItem, index: number): Promise<void> {
+  // 如果是最后一项或外部链接，不处理
+  if (isLastItem(index) || item.path === "/outside") {
+    return;
+  }
+
+  try {
+    // 缓存路由表查找结果
+    const routes = router.getRoutes();
+    const targetRoute = routes.find((route) => route.path === item.path);
+
+    if (!targetRoute?.children?.length) {
+      await router.push(item.path);
+      return;
+    }
+
+    const firstValidChild = findFirstValidChild(targetRoute);
+    if (firstValidChild) {
+      await router.push(buildFullPath(firstValidChild.path));
+    } else {
+      await router.push(item.path);
+    }
+  } catch (error) {
+    console.error("导航失败:", error);
+  }
+}
 </script>
diff --git a/frontend/new-web/src/components/core/layouts/art-chat-window/index.vue b/frontend/new-web/src/components/core/layouts/art-chat-window/index.vue
index f3d94717..ae871047 100644
--- a/frontend/new-web/src/components/core/layouts/art-chat-window/index.vue
+++ b/frontend/new-web/src/components/core/layouts/art-chat-window/index.vue
@@ -10,7 +10,7 @@
               class="h-2 w-2 rounded-full"
               :class="isOnline ? 'bg-success/100' : 'bg-danger/100'"
             ></div>
-            <span class="text-xs text-g-600">{{ isOnline ? '在线' : '离线' }}</span>
+            <span class="text-xs text-g-600">{{ isOnline ? "在线" : "离线" }}</span>
           </div>
         </div>
         <div>
@@ -29,7 +29,7 @@
             <div
               :class="[
                 'mb-7.5 flex w-full items-start gap-2',
-                message.isMe ? 'flex-row-reverse' : 'flex-row'
+                message.isMe ? 'flex-row-reverse' : 'flex-row',
               ]"
             >
               <ElAvatar :size="32" :src="message.avatar" class="shrink-0" />
@@ -39,7 +39,7 @@
                 <div
                   :class="[
                     'mb-1 flex gap-2 text-xs',
-                    message.isMe ? 'flex-row-reverse' : 'flex-row'
+                    message.isMe ? 'flex-row-reverse' : 'flex-row',
                   ]"
                 >
                   <span class="font-medium">{{ message.sender }}</span>
@@ -48,10 +48,11 @@
                 <div
                   :class="[
                     'rounded-md px-3.5 py-2.5 text-sm leading-[1.4] text-g-900',
-                    message.isMe ? 'message-right bg-theme/15' : 'message-left bg-g-300/50'
+                    message.isMe ? 'message-right bg-theme/15' : 'message-left bg-g-300/50',
                   ]"
-                  >{{ message.content }}</div
                 >
+                  {{ message.content }}
+                </div>
               </div>
             </div>
           </template>
@@ -89,174 +90,174 @@
 </template>
 
 <script setup lang="ts">
-  import { Picture, Paperclip, Close } from '@element-plus/icons-vue'
-  import { mittBus } from '@/utils/sys'
-  import meAvatar from '@/assets/images/avatar/avatar5.webp'
-  import aiAvatar from '@/assets/images/avatar/avatar10.webp'
+import { Picture, Paperclip, Close } from "@element-plus/icons-vue";
+import { mittBus } from "@/utils/sys";
+import meAvatar from "@/assets/images/avatar/avatar5.webp";
+import aiAvatar from "@/assets/images/avatar/avatar10.webp";
 
-  defineOptions({ name: 'ArtChatWindow' })
+defineOptions({ name: "ArtChatWindow" });
 
-  // 类型定义
-  interface ChatMessage {
-    id: number
-    sender: string
-    content: string
-    time: string
-    isMe: boolean
-    avatar: string
-  }
+// 类型定义
+interface ChatMessage {
+  id: number;
+  sender: string;
+  content: string;
+  time: string;
+  isMe: boolean;
+  avatar: string;
+}
 
-  // 常量定义
-  const MOBILE_BREAKPOINT = 640
-  const SCROLL_DELAY = 100
-  const BOT_NAME = 'Art Bot'
-  const USER_NAME = 'Ricky'
+// 常量定义
+const MOBILE_BREAKPOINT = 640;
+const SCROLL_DELAY = 100;
+const BOT_NAME = "Art Bot";
+const USER_NAME = "Ricky";
 
-  // 响应式布局
-  const { width } = useWindowSize()
-  const isMobile = computed(() => width.value < MOBILE_BREAKPOINT)
+// 响应式布局
+const { width } = useWindowSize();
+const isMobile = computed(() => width.value < MOBILE_BREAKPOINT);
 
-  // 组件状态
-  const isDrawerVisible = ref(false)
-  const isOnline = ref(true)
+// 组件状态
+const isDrawerVisible = ref(false);
+const isOnline = ref(true);
 
-  // 消息相关状态
-  const messageText = ref('')
-  const messageId = ref(10)
-  const messageContainer = ref<HTMLElement | null>(null)
+// 消息相关状态
+const messageText = ref("");
+const messageId = ref(10);
+const messageContainer = ref<HTMLElement | null>(null);
 
-  // 初始化聊天消息数据
-  const initializeMessages = (): ChatMessage[] => [
-    {
-      id: 1,
-      sender: BOT_NAME,
-      content: '你好！我是你的AI助手，有什么我可以帮你的吗？',
-      time: '10:00',
-      isMe: false,
-      avatar: aiAvatar
-    },
-    {
-      id: 2,
-      sender: USER_NAME,
-      content: '我想了解一下系统的使用方法。',
-      time: '10:01',
-      isMe: true,
-      avatar: meAvatar
-    },
-    {
-      id: 3,
-      sender: BOT_NAME,
-      content: '好的，我来为您介绍系统的主要功能。首先，您可以通过左侧菜单访问不同的功能模块...',
-      time: '10:02',
-      isMe: false,
-      avatar: aiAvatar
-    },
-    {
-      id: 4,
-      sender: USER_NAME,
-      content: '听起来很不错，能具体讲讲数据分析部分吗？',
-      time: '10:05',
-      isMe: true,
-      avatar: meAvatar
-    },
-    {
-      id: 5,
-      sender: BOT_NAME,
-      content: '当然可以。数据分析模块可以帮助您实时监控关键指标，并生成详细的报表...',
-      time: '10:06',
-      isMe: false,
-      avatar: aiAvatar
-    },
-    {
-      id: 6,
-      sender: USER_NAME,
-      content: '太好了，那我如何开始使用呢？',
-      time: '10:08',
-      isMe: true,
-      avatar: meAvatar
-    },
-    {
-      id: 7,
-      sender: BOT_NAME,
-      content: '您可以先创建一个项目，然后在项目中添加相关的数据源，系统会自动进行分析。',
-      time: '10:09',
-      isMe: false,
-      avatar: aiAvatar
-    },
-    {
-      id: 8,
-      sender: USER_NAME,
-      content: '明白了，谢谢你的帮助！',
-      time: '10:10',
-      isMe: true,
-      avatar: meAvatar
-    },
-    {
-      id: 9,
-      sender: BOT_NAME,
-      content: '不客气，有任何问题随时联系我。',
-      time: '10:11',
-      isMe: false,
-      avatar: aiAvatar
-    }
-  ]
+// 初始化聊天消息数据
+const initializeMessages = (): ChatMessage[] => [
+  {
+    id: 1,
+    sender: BOT_NAME,
+    content: "你好！我是你的AI助手，有什么我可以帮你的吗？",
+    time: "10:00",
+    isMe: false,
+    avatar: aiAvatar,
+  },
+  {
+    id: 2,
+    sender: USER_NAME,
+    content: "我想了解一下系统的使用方法。",
+    time: "10:01",
+    isMe: true,
+    avatar: meAvatar,
+  },
+  {
+    id: 3,
+    sender: BOT_NAME,
+    content: "好的，我来为您介绍系统的主要功能。首先，您可以通过左侧菜单访问不同的功能模块...",
+    time: "10:02",
+    isMe: false,
+    avatar: aiAvatar,
+  },
+  {
+    id: 4,
+    sender: USER_NAME,
+    content: "听起来很不错，能具体讲讲数据分析部分吗？",
+    time: "10:05",
+    isMe: true,
+    avatar: meAvatar,
+  },
+  {
+    id: 5,
+    sender: BOT_NAME,
+    content: "当然可以。数据分析模块可以帮助您实时监控关键指标，并生成详细的报表...",
+    time: "10:06",
+    isMe: false,
+    avatar: aiAvatar,
+  },
+  {
+    id: 6,
+    sender: USER_NAME,
+    content: "太好了，那我如何开始使用呢？",
+    time: "10:08",
+    isMe: true,
+    avatar: meAvatar,
+  },
+  {
+    id: 7,
+    sender: BOT_NAME,
+    content: "您可以先创建一个项目，然后在项目中添加相关的数据源，系统会自动进行分析。",
+    time: "10:09",
+    isMe: false,
+    avatar: aiAvatar,
+  },
+  {
+    id: 8,
+    sender: USER_NAME,
+    content: "明白了，谢谢你的帮助！",
+    time: "10:10",
+    isMe: true,
+    avatar: meAvatar,
+  },
+  {
+    id: 9,
+    sender: BOT_NAME,
+    content: "不客气，有任何问题随时联系我。",
+    time: "10:11",
+    isMe: false,
+    avatar: aiAvatar,
+  },
+];
 
-  const messages = ref<ChatMessage[]>(initializeMessages())
+const messages = ref<ChatMessage[]>(initializeMessages());
 
-  // 工具函数
-  const formatCurrentTime = (): string => {
-    return new Date().toLocaleTimeString([], {
-      hour: '2-digit',
-      minute: '2-digit'
-    })
-  }
+// 工具函数
+const formatCurrentTime = (): string => {
+  return new Date().toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+};
 
-  const scrollToBottom = (): void => {
-    nextTick(() => {
-      setTimeout(() => {
-        if (messageContainer.value) {
-          messageContainer.value.scrollTop = messageContainer.value.scrollHeight
-        }
-      }, SCROLL_DELAY)
-    })
-  }
+const scrollToBottom = (): void => {
+  nextTick(() => {
+    setTimeout(() => {
+      if (messageContainer.value) {
+        messageContainer.value.scrollTop = messageContainer.value.scrollHeight;
+      }
+    }, SCROLL_DELAY);
+  });
+};
 
-  // 消息处理方法
-  const sendMessage = (): void => {
-    const text = messageText.value.trim()
-    if (!text) return
+// 消息处理方法
+const sendMessage = (): void => {
+  const text = messageText.value.trim();
+  if (!text) return;
 
-    const newMessage: ChatMessage = {
-      id: messageId.value++,
-      sender: USER_NAME,
-      content: text,
-      time: formatCurrentTime(),
-      isMe: true,
-      avatar: meAvatar
-    }
+  const newMessage: ChatMessage = {
+    id: messageId.value++,
+    sender: USER_NAME,
+    content: text,
+    time: formatCurrentTime(),
+    isMe: true,
+    avatar: meAvatar,
+  };
 
-    messages.value.push(newMessage)
-    messageText.value = ''
-    scrollToBottom()
-  }
+  messages.value.push(newMessage);
+  messageText.value = "";
+  scrollToBottom();
+};
 
-  // 聊天窗口控制方法
-  const openChat = (): void => {
-    isDrawerVisible.value = true
-    scrollToBottom()
-  }
+// 聊天窗口控制方法
+const openChat = (): void => {
+  isDrawerVisible.value = true;
+  scrollToBottom();
+};
 
-  const closeChat = (): void => {
-    isDrawerVisible.value = false
-  }
+const closeChat = (): void => {
+  isDrawerVisible.value = false;
+};
 
-  // 生命周期
-  onMounted(() => {
-    scrollToBottom()
-    mittBus.on('openChat', openChat)
-  })
+// 生命周期
+onMounted(() => {
+  scrollToBottom();
+  mittBus.on("openChat", openChat);
+});
 
-  onUnmounted(() => {
-    mittBus.off('openChat', openChat)
-  })
+onUnmounted(() => {
+  mittBus.off("openChat", openChat);
+});
 </script>
diff --git a/frontend/new-web/src/components/core/layouts/art-fast-enter/index.vue b/frontend/new-web/src/components/core/layouts/art-fast-enter/index.vue
index fdde2223..fa87223b 100644
--- a/frontend/new-web/src/components/core/layouts/art-fast-enter/index.vue
+++ b/frontend/new-web/src/components/core/layouts/art-fast-enter/index.vue
@@ -10,7 +10,7 @@
     popper-class="fast-enter-popover"
     :popper-style="{
       border: '1px solid var(--default-border)',
-      borderRadius: 'calc(var(--custom-radius) / 2 + 4px)'
+      borderRadius: 'calc(var(--custom-radius) / 2 + 4px)',
     }"
   >
     <template #reference>
@@ -62,52 +62,52 @@
 </template>
 
 <script setup lang="ts">
-  import { useFastEnter } from '@/hooks/core/useFastEnter'
-  import type { FastEnterApplication, FastEnterQuickLink } from '@/types/config'
+import { useFastEnter } from "@/hooks/core/useFastEnter";
+import type { FastEnterApplication, FastEnterQuickLink } from "@/types/config";
 
-  defineOptions({ name: 'ArtFastEnter' })
+defineOptions({ name: "ArtFastEnter" });
 
-  const router = useRouter()
-  const popoverRef = ref()
+const router = useRouter();
+const popoverRef = ref();
 
-  // 使用快速入口配置
-  const { enabledApplications, enabledQuickLinks } = useFastEnter()
+// 使用快速入口配置
+const { enabledApplications, enabledQuickLinks } = useFastEnter();
 
-  /**
-   * 处理导航跳转
-   * @param routeName 路由名称
-   * @param link 外部链接
-   */
-  const handleNavigate = (routeName?: string, link?: string): void => {
-    const targetPath = routeName || link
+/**
+ * 处理导航跳转
+ * @param routeName 路由名称
+ * @param link 外部链接
+ */
+const handleNavigate = (routeName?: string, link?: string): void => {
+  const targetPath = routeName || link;
 
-    if (!targetPath) {
-      console.warn('导航配置无效：缺少路由名称或链接')
-      return
-    }
-
-    if (targetPath.startsWith('http')) {
-      window.open(targetPath, '_blank')
-    } else {
-      router.push({ name: targetPath })
-    }
-
-    popoverRef.value?.hide()
+  if (!targetPath) {
+    console.warn("导航配置无效：缺少路由名称或链接");
+    return;
   }
 
-  /**
-   * 处理应用项点击
-   * @param application 应用配置对象
-   */
-  const handleApplicationClick = (application: FastEnterApplication): void => {
-    handleNavigate(application.routeName, application.link)
+  if (targetPath.startsWith("http")) {
+    window.open(targetPath, "_blank");
+  } else {
+    router.push({ name: targetPath });
   }
 
-  /**
-   * 处理快速链接点击
-   * @param quickLink 快速链接配置对象
-   */
-  const handleQuickLinkClick = (quickLink: FastEnterQuickLink): void => {
-    handleNavigate(quickLink.routeName, quickLink.link)
-  }
+  popoverRef.value?.hide();
+};
+
+/**
+ * 处理应用项点击
+ * @param application 应用配置对象
+ */
+const handleApplicationClick = (application: FastEnterApplication): void => {
+  handleNavigate(application.routeName, application.link);
+};
+
+/**
+ * 处理快速链接点击
+ * @param quickLink 快速链接配置对象
+ */
+const handleQuickLinkClick = (quickLink: FastEnterQuickLink): void => {
+  handleNavigate(quickLink.routeName, quickLink.link);
+};
 </script>
diff --git a/frontend/new-web/src/components/core/layouts/art-fireworks-effect/index.vue b/frontend/new-web/src/components/core/layouts/art-fireworks-effect/index.vue
index be852744..80806d63 100644
--- a/frontend/new-web/src/components/core/layouts/art-fireworks-effect/index.vue
+++ b/frontend/new-web/src/components/core/layouts/art-fireworks-effect/index.vue
@@ -7,627 +7,627 @@
 </template>
 
 <script setup lang="ts">
-  import { useEventListener } from '@vueuse/core'
-  import { mittBus } from '@/utils/sys'
-  import type { Handler } from 'mitt'
-  import bp from '@/assets/images/ceremony/hb.png'
-  import sd from '@/assets/images/ceremony/sd.png'
-  import yd from '@/assets/images/ceremony/yd.png'
+import { useEventListener } from "@vueuse/core";
+import { mittBus } from "@/utils/sys";
+import type { Handler } from "mitt";
+import bp from "@/assets/images/ceremony/hb.png";
+import sd from "@/assets/images/ceremony/sd.png";
+import yd from "@/assets/images/ceremony/yd.png";
 
-  defineOptions({ name: 'ArtFireworksEffect' })
+defineOptions({ name: "ArtFireworksEffect" });
 
-  /**
-   * 烟花系统配置接口
-   * 定义了烟花效果的所有可配置参数
-   */
-  interface FireworkConfig {
-    /** 对象池大小 - 预先创建的粒子对象数量 */
-    readonly POOL_SIZE: number
-    /** 每次爆炸产生的粒子数量 */
-    readonly PARTICLES_PER_BURST: number
-    /** 各种形状的尺寸配置 */
-    readonly SIZES: {
-      /** 矩形粒子的宽高 */
-      readonly RECTANGLE: { readonly WIDTH: number; readonly HEIGHT: number }
-      /** 正方形粒子的边长 */
-      readonly SQUARE: { readonly SIZE: number }
-      /** 圆形粒子的直径 */
-      readonly CIRCLE: { readonly SIZE: number }
-      /** 三角形粒子的边长 */
-      readonly TRIANGLE: { readonly SIZE: number }
-      /** 椭圆粒子的宽高 */
-      readonly OVAL: { readonly WIDTH: number; readonly HEIGHT: number }
-      /** 图片粒子的宽高 */
-      readonly IMAGE: { readonly WIDTH: number; readonly HEIGHT: number }
-    }
-    /** 旋转相关参数 */
-    readonly ROTATION: {
-      /** 基础旋转速度 */
-      readonly BASE_SPEED: number
-      /** 随机旋转速度增量 */
-      readonly RANDOM_SPEED: number
-      /** 旋转衰减系数 - 控制旋转速度递减 */
-      readonly DECAY: number
-    }
-    /** 物理效果参数 */
-    readonly PHYSICS: {
-      /** 重力加速度 */
-      readonly GRAVITY: number
-      /** 下落速度阈值 - 超过此值开始淡出 */
-      readonly VELOCITY_THRESHOLD: number
-      /** 透明度衰减速度 */
-      readonly OPACITY_DECAY: number
-    }
-    /** 烟花粒子颜色配置(带透明度) */
-    readonly COLORS: readonly string[]
-    /** 烟花粒子形状配置(矩形出现概率更高) */
-    readonly SHAPES: readonly string[]
+/**
+ * 烟花系统配置接口
+ * 定义了烟花效果的所有可配置参数
+ */
+interface FireworkConfig {
+  /** 对象池大小 - 预先创建的粒子对象数量 */
+  readonly POOL_SIZE: number;
+  /** 每次爆炸产生的粒子数量 */
+  readonly PARTICLES_PER_BURST: number;
+  /** 各种形状的尺寸配置 */
+  readonly SIZES: {
+    /** 矩形粒子的宽高 */
+    readonly RECTANGLE: { readonly WIDTH: number; readonly HEIGHT: number };
+    /** 正方形粒子的边长 */
+    readonly SQUARE: { readonly SIZE: number };
+    /** 圆形粒子的直径 */
+    readonly CIRCLE: { readonly SIZE: number };
+    /** 三角形粒子的边长 */
+    readonly TRIANGLE: { readonly SIZE: number };
+    /** 椭圆粒子的宽高 */
+    readonly OVAL: { readonly WIDTH: number; readonly HEIGHT: number };
+    /** 图片粒子的宽高 */
+    readonly IMAGE: { readonly WIDTH: number; readonly HEIGHT: number };
+  };
+  /** 旋转相关参数 */
+  readonly ROTATION: {
+    /** 基础旋转速度 */
+    readonly BASE_SPEED: number;
+    /** 随机旋转速度增量 */
+    readonly RANDOM_SPEED: number;
+    /** 旋转衰减系数 - 控制旋转速度递减 */
+    readonly DECAY: number;
+  };
+  /** 物理效果参数 */
+  readonly PHYSICS: {
+    /** 重力加速度 */
+    readonly GRAVITY: number;
+    /** 下落速度阈值 - 超过此值开始淡出 */
+    readonly VELOCITY_THRESHOLD: number;
+    /** 透明度衰减速度 */
+    readonly OPACITY_DECAY: number;
+  };
+  /** 烟花粒子颜色配置(带透明度) */
+  readonly COLORS: readonly string[];
+  /** 烟花粒子形状配置(矩形出现概率更高) */
+  readonly SHAPES: readonly string[];
+}
+
+/**
+ * 单个烟花粒子对象
+ * 包含粒子的位置、速度、外观等所有属性
+ */
+interface Firework {
+  /** X坐标位置 */
+  x: number;
+  /** Y坐标位置 */
+  y: number;
+  /** X方向速度 */
+  vx: number;
+  /** Y方向速度 */
+  vy: number;
+  /** 粒子颜色 (RGBA格式) */
+  color: string;
+  /** 当前旋转角度 */
+  rotation: number;
+  /** 旋转速度 */
+  rotationSpeed: number;
+  /** 缩放比例 */
+  scale: number;
+  /** 粒子形状类型 */
+  shape: string;
+  /** 透明度 (0-1) */
+  opacity: number;
+  /** 是否处于活动状态 */
+  active: boolean;
+  /** 图片URL (当shape为image时使用) */
+  imageUrl?: string;
+}
+
+/**
+ * 图片缓存接口
+ * 用于缓存预加载的图片资源
+ */
+interface ImageCache {
+  [url: string]: HTMLImageElement;
+}
+
+/**
+ * 烟花效果的全局配置
+ * 使用 as const 确保配置的不可变性
+ */
+const CONFIG: FireworkConfig = {
+  // 性能相关配置
+  POOL_SIZE: 600, // 对象池大小，影响同时存在的最大粒子数
+  PARTICLES_PER_BURST: 200, // 每次爆炸的粒子数量，影响视觉效果密度
+
+  // 粒子尺寸配置
+  SIZES: {
+    RECTANGLE: { WIDTH: 24, HEIGHT: 12 }, // 矩形粒子尺寸
+    SQUARE: { SIZE: 12 }, // 正方形粒子尺寸
+    CIRCLE: { SIZE: 12 }, // 圆形粒子尺寸
+    TRIANGLE: { SIZE: 10 }, // 三角形粒子尺寸
+    OVAL: { WIDTH: 24, HEIGHT: 12 }, // 椭圆粒子尺寸
+    IMAGE: { WIDTH: 30, HEIGHT: 30 }, // 图片粒子尺寸
+  },
+
+  // 旋转动画配置
+  ROTATION: {
+    BASE_SPEED: 2, // 基础旋转速度
+    RANDOM_SPEED: 3, // 额外随机旋转速度范围
+    DECAY: 0.98, // 旋转速度衰减系数 (越小衰减越快)
+  },
+
+  // 物理效果配置
+  PHYSICS: {
+    GRAVITY: 0.525, // 重力加速度，影响粒子下落速度
+    VELOCITY_THRESHOLD: 10, // 速度阈值，超过时开始透明度衰减
+    OPACITY_DECAY: 0.02, // 透明度衰减速度，影响粒子消失快慢
+  },
+
+  // 粒子颜色配置 - 使用RGBA格式支持透明度
+  COLORS: [
+    "rgba(255, 68, 68, 1)", // 红色系
+    "rgba(255, 68, 68, 0.9)",
+    "rgba(255, 68, 68, 0.8)",
+    "rgba(255, 116, 188, 1)", // 粉色系
+    "rgba(255, 116, 188, 0.9)",
+    "rgba(255, 116, 188, 0.8)",
+    "rgba(68, 68, 255, 0.8)", // 蓝色系
+    "rgba(92, 202, 56, 0.7)", // 绿色系
+    "rgba(255, 68, 255, 0.8)", // 紫色系
+    "rgba(68, 255, 255, 0.7)", // 青色系
+    "rgba(255, 136, 68, 0.7)", // 橙色系
+    "rgba(68, 136, 255, 1)", // 蓝色系
+    "rgba(250, 198, 122, 0.8)", // 金色系
+  ],
+
+  // 粒子形状配置 - 矩形出现概率更高，营造更丰富的视觉效果
+  SHAPES: [
+    "rectangle",
+    "rectangle",
+    "rectangle",
+    "rectangle",
+    "rectangle",
+    "rectangle",
+    "rectangle",
+    "circle",
+    "triangle",
+    "oval",
+  ],
+} as const;
+
+/** Canvas DOM 元素引用 */
+const canvasRef = ref<HTMLCanvasElement>();
+/** Canvas 2D 绘制上下文 */
+const ctx = ref<CanvasRenderingContext2D | null>(null);
+
+/**
+ * 烟花系统核心类
+ * 负责管理粒子生命周期、渲染和动画
+ */
+class FireworkSystem {
+  /** 粒子对象池 - 预先创建的粒子对象数组 */
+  private particlePool: Firework[] = [];
+  /** 当前活动的粒子数组 */
+  private activeParticles: Firework[] = [];
+  /** 对象池索引指针 - 用于循环分配粒子 */
+  private poolIndex = 0;
+  /** 图片资源缓存 */
+  private imageCache: ImageCache = {};
+  /** 动画帧ID - 用于取消动画 */
+  private animationId = 0;
+  /** 画布宽度缓存 */
+  private canvasWidth = 0;
+  /** 画布高度缓存 */
+  private canvasHeight = 0;
+
+  constructor() {
+    this.initializePool();
   }
 
   /**
-   * 单个烟花粒子对象
-   * 包含粒子的位置、速度、外观等所有属性
+   * 初始化对象池
+   * 预先创建指定数量的粒子对象，避免运行时频繁创建
    */
-  interface Firework {
-    /** X坐标位置 */
-    x: number
-    /** Y坐标位置 */
-    y: number
-    /** X方向速度 */
-    vx: number
-    /** Y方向速度 */
-    vy: number
-    /** 粒子颜色 (RGBA格式) */
-    color: string
-    /** 当前旋转角度 */
-    rotation: number
-    /** 旋转速度 */
-    rotationSpeed: number
-    /** 缩放比例 */
-    scale: number
-    /** 粒子形状类型 */
-    shape: string
-    /** 透明度 (0-1) */
-    opacity: number
-    /** 是否处于活动状态 */
-    active: boolean
-    /** 图片URL (当shape为image时使用) */
-    imageUrl?: string
-  }
-
-  /**
-   * 图片缓存接口
-   * 用于缓存预加载的图片资源
-   */
-  interface ImageCache {
-    [url: string]: HTMLImageElement
-  }
-
-  /**
-   * 烟花效果的全局配置
-   * 使用 as const 确保配置的不可变性
-   */
-  const CONFIG: FireworkConfig = {
-    // 性能相关配置
-    POOL_SIZE: 600, // 对象池大小，影响同时存在的最大粒子数
-    PARTICLES_PER_BURST: 200, // 每次爆炸的粒子数量，影响视觉效果密度
-
-    // 粒子尺寸配置
-    SIZES: {
-      RECTANGLE: { WIDTH: 24, HEIGHT: 12 }, // 矩形粒子尺寸
-      SQUARE: { SIZE: 12 }, // 正方形粒子尺寸
-      CIRCLE: { SIZE: 12 }, // 圆形粒子尺寸
-      TRIANGLE: { SIZE: 10 }, // 三角形粒子尺寸
-      OVAL: { WIDTH: 24, HEIGHT: 12 }, // 椭圆粒子尺寸
-      IMAGE: { WIDTH: 30, HEIGHT: 30 } // 图片粒子尺寸
-    },
-
-    // 旋转动画配置
-    ROTATION: {
-      BASE_SPEED: 2, // 基础旋转速度
-      RANDOM_SPEED: 3, // 额外随机旋转速度范围
-      DECAY: 0.98 // 旋转速度衰减系数 (越小衰减越快)
-    },
-
-    // 物理效果配置
-    PHYSICS: {
-      GRAVITY: 0.525, // 重力加速度，影响粒子下落速度
-      VELOCITY_THRESHOLD: 10, // 速度阈值，超过时开始透明度衰减
-      OPACITY_DECAY: 0.02 // 透明度衰减速度，影响粒子消失快慢
-    },
-
-    // 粒子颜色配置 - 使用RGBA格式支持透明度
-    COLORS: [
-      'rgba(255, 68, 68, 1)', // 红色系
-      'rgba(255, 68, 68, 0.9)',
-      'rgba(255, 68, 68, 0.8)',
-      'rgba(255, 116, 188, 1)', // 粉色系
-      'rgba(255, 116, 188, 0.9)',
-      'rgba(255, 116, 188, 0.8)',
-      'rgba(68, 68, 255, 0.8)', // 蓝色系
-      'rgba(92, 202, 56, 0.7)', // 绿色系
-      'rgba(255, 68, 255, 0.8)', // 紫色系
-      'rgba(68, 255, 255, 0.7)', // 青色系
-      'rgba(255, 136, 68, 0.7)', // 橙色系
-      'rgba(68, 136, 255, 1)', // 蓝色系
-      'rgba(250, 198, 122, 0.8)' // 金色系
-    ],
-
-    // 粒子形状配置 - 矩形出现概率更高，营造更丰富的视觉效果
-    SHAPES: [
-      'rectangle',
-      'rectangle',
-      'rectangle',
-      'rectangle',
-      'rectangle',
-      'rectangle',
-      'rectangle',
-      'circle',
-      'triangle',
-      'oval'
-    ]
-  } as const
-
-  /** Canvas DOM 元素引用 */
-  const canvasRef = ref<HTMLCanvasElement>()
-  /** Canvas 2D 绘制上下文 */
-  const ctx = ref<CanvasRenderingContext2D | null>(null)
-
-  /**
-   * 烟花系统核心类
-   * 负责管理粒子生命周期、渲染和动画
-   */
-  class FireworkSystem {
-    /** 粒子对象池 - 预先创建的粒子对象数组 */
-    private particlePool: Firework[] = []
-    /** 当前活动的粒子数组 */
-    private activeParticles: Firework[] = []
-    /** 对象池索引指针 - 用于循环分配粒子 */
-    private poolIndex = 0
-    /** 图片资源缓存 */
-    private imageCache: ImageCache = {}
-    /** 动画帧ID - 用于取消动画 */
-    private animationId = 0
-    /** 画布宽度缓存 */
-    private canvasWidth = 0
-    /** 画布高度缓存 */
-    private canvasHeight = 0
-
-    constructor() {
-      this.initializePool()
+  private initializePool(): void {
+    for (let i = 0; i < CONFIG.POOL_SIZE; i++) {
+      this.particlePool.push(this.createParticle());
     }
+  }
 
-    /**
-     * 初始化对象池
-     * 预先创建指定数量的粒子对象，避免运行时频繁创建
-     */
-    private initializePool(): void {
-      for (let i = 0; i < CONFIG.POOL_SIZE; i++) {
-        this.particlePool.push(this.createParticle())
+  /**
+   * 创建一个新的粒子对象
+   * 返回初始化状态的粒子
+   */
+  private createParticle(): Firework {
+    return {
+      x: 0,
+      y: 0,
+      vx: 0,
+      vy: 0,
+      color: "",
+      rotation: 0,
+      rotationSpeed: 0,
+      scale: 1,
+      shape: "circle",
+      opacity: 1,
+      active: false,
+    };
+  }
+
+  /**
+   * 从对象池获取可用粒子 (性能优化版本)
+   * 使用循环索引而非Array.find()，时间复杂度从O(n)降至O(1)
+   * @returns 可用的粒子对象或null
+   */
+  private getAvailableParticle(): Firework | null {
+    for (let i = 0; i < CONFIG.POOL_SIZE; i++) {
+      const index = (this.poolIndex + i) % CONFIG.POOL_SIZE;
+      const particle = this.particlePool[index];
+
+      if (!particle.active) {
+        this.poolIndex = (index + 1) % CONFIG.POOL_SIZE;
+        particle.active = true;
+        return particle;
       }
     }
+    return null;
+  }
 
-    /**
-     * 创建一个新的粒子对象
-     * 返回初始化状态的粒子
-     */
-    private createParticle(): Firework {
-      return {
-        x: 0,
-        y: 0,
-        vx: 0,
-        vy: 0,
-        color: '',
-        rotation: 0,
-        rotationSpeed: 0,
-        scale: 1,
-        shape: 'circle',
-        opacity: 1,
-        active: false
-      }
+  /**
+   * 预加载单个图片资源
+   * @param url 图片URL
+   * @returns Promise<HTMLImageElement>
+   */
+  async preloadImage(url: string): Promise<HTMLImageElement> {
+    // 如果已缓存，直接返回
+    if (this.imageCache[url]) {
+      return this.imageCache[url];
     }
 
-    /**
-     * 从对象池获取可用粒子 (性能优化版本)
-     * 使用循环索引而非Array.find()，时间复杂度从O(n)降至O(1)
-     * @returns 可用的粒子对象或null
-     */
-    private getAvailableParticle(): Firework | null {
-      for (let i = 0; i < CONFIG.POOL_SIZE; i++) {
-        const index = (this.poolIndex + i) % CONFIG.POOL_SIZE
-        const particle = this.particlePool[index]
+    return new Promise((resolve, reject) => {
+      const img = new Image();
+      img.crossOrigin = "anonymous"; // 处理跨域问题
+      img.onload = () => {
+        this.imageCache[url] = img;
+        resolve(img);
+      };
+      img.onerror = reject;
+      img.src = url;
+    });
+  }
 
-        if (!particle.active) {
-          this.poolIndex = (index + 1) % CONFIG.POOL_SIZE
-          particle.active = true
-          return particle
+  /**
+   * 预加载所有需要的图片资源
+   * 在组件初始化时调用，确保图片ready
+   */
+  async preloadAllImages(): Promise<void> {
+    const imageUrls = [bp, sd, yd];
+    try {
+      await Promise.all(imageUrls.map((url) => this.preloadImage(url)));
+    } catch (error) {
+      console.error("Image preloading failed:", error);
+    }
+  }
+
+  /**
+   * 创建烟花爆炸效果
+   * @param imageUrl 可选的图片URL，如果提供则使用图片粒子
+   */
+  createFirework(imageUrl?: string): void {
+    // 随机确定爆炸起始位置
+    const startX = Math.random() * this.canvasWidth;
+    const startY = this.canvasHeight;
+
+    // 根据是否有图片确定可用形状
+    const availableShapes = imageUrl && this.imageCache[imageUrl] ? ["image"] : CONFIG.SHAPES;
+
+    // 批量创建粒子数组，减少频繁的数组操作
+    const particles: Firework[] = [];
+
+    for (let i = 0; i < CONFIG.PARTICLES_PER_BURST; i++) {
+      const particle = this.getAvailableParticle();
+      if (!particle) continue;
+
+      // 计算粒子发射角度和速度 (恢复原始算法)
+      const angle = (Math.PI * i) / (CONFIG.PARTICLES_PER_BURST / 2); // 扇形分布
+      const speed = (12 + Math.random() * 6) * 1.5; // 随机速度
+      const spread = Math.random() * Math.PI * 2; // 360度随机扩散
+
+      // 直接属性赋值，避免Object.assign的性能开销
+      particle.x = startX;
+      particle.y = startY;
+      // 复杂的速度计算，模拟真实烟花爆炸轨迹
+      particle.vx = Math.cos(angle) * Math.cos(spread) * speed * (Math.random() * 0.5 + 0.5);
+      particle.vy = Math.sin(angle) * speed - 15; // 向上初始速度
+      particle.color = CONFIG.COLORS[Math.floor(Math.random() * CONFIG.COLORS.length)];
+      particle.rotation = Math.random() * 360;
+      particle.rotationSpeed =
+        (Math.random() * CONFIG.ROTATION.RANDOM_SPEED + CONFIG.ROTATION.BASE_SPEED) *
+        (Math.random() > 0.5 ? 1 : -1); // 随机旋转方向
+      particle.scale = 0.8 + Math.random() * 0.4; // 随机缩放
+      particle.shape = availableShapes[Math.floor(Math.random() * availableShapes.length)];
+      particle.opacity = 1;
+      particle.imageUrl = imageUrl && this.imageCache[imageUrl] ? imageUrl : undefined;
+
+      particles.push(particle);
+    }
+
+    // 批量添加到活动粒子数组，减少多次数组操作
+    this.activeParticles.push(...particles);
+  }
+
+  /**
+   * 更新所有粒子的物理状态 (性能优化版本)
+   * 包括位置、速度、旋转、透明度等
+   */
+  private updateParticles(): void {
+    const { GRAVITY, VELOCITY_THRESHOLD, OPACITY_DECAY } = CONFIG.PHYSICS;
+    const { DECAY } = CONFIG.ROTATION;
+
+    // 使用倒序遍历，避免删除元素时的索引混乱问题
+    for (let i = this.activeParticles.length - 1; i >= 0; i--) {
+      const particle = this.activeParticles[i];
+
+      // 更新粒子位置 (匀加速运动)
+      particle.x += particle.vx;
+      particle.y += particle.vy;
+      particle.vy += GRAVITY; // 重力影响
+
+      // 更新旋转状态
+      particle.rotation += particle.rotationSpeed;
+      particle.rotationSpeed *= DECAY; // 旋转速度衰减
+
+      // 透明度衰减逻辑 - 当粒子下落速度超过阈值时开始淡出
+      if (particle.vy > VELOCITY_THRESHOLD) {
+        particle.opacity -= OPACITY_DECAY;
+        if (particle.opacity <= 0) {
+          this.recycleParticle(i);
+          continue;
         }
       }
-      return null
-    }
 
-    /**
-     * 预加载单个图片资源
-     * @param url 图片URL
-     * @returns Promise<HTMLImageElement>
-     */
-    async preloadImage(url: string): Promise<HTMLImageElement> {
-      // 如果已缓存，直接返回
-      if (this.imageCache[url]) {
-        return this.imageCache[url]
+      // 边界检查 - 移除超出屏幕范围的粒子
+      if (this.isOutOfBounds(particle)) {
+        this.recycleParticle(i);
       }
-
-      return new Promise((resolve, reject) => {
-        const img = new Image()
-        img.crossOrigin = 'anonymous' // 处理跨域问题
-        img.onload = () => {
-          this.imageCache[url] = img
-          resolve(img)
-        }
-        img.onerror = reject
-        img.src = url
-      })
-    }
-
-    /**
-     * 预加载所有需要的图片资源
-     * 在组件初始化时调用，确保图片ready
-     */
-    async preloadAllImages(): Promise<void> {
-      const imageUrls = [bp, sd, yd]
-      try {
-        await Promise.all(imageUrls.map((url) => this.preloadImage(url)))
-      } catch (error) {
-        console.error('Image preloading failed:', error)
-      }
-    }
-
-    /**
-     * 创建烟花爆炸效果
-     * @param imageUrl 可选的图片URL，如果提供则使用图片粒子
-     */
-    createFirework(imageUrl?: string): void {
-      // 随机确定爆炸起始位置
-      const startX = Math.random() * this.canvasWidth
-      const startY = this.canvasHeight
-
-      // 根据是否有图片确定可用形状
-      const availableShapes = imageUrl && this.imageCache[imageUrl] ? ['image'] : CONFIG.SHAPES
-
-      // 批量创建粒子数组，减少频繁的数组操作
-      const particles: Firework[] = []
-
-      for (let i = 0; i < CONFIG.PARTICLES_PER_BURST; i++) {
-        const particle = this.getAvailableParticle()
-        if (!particle) continue
-
-        // 计算粒子发射角度和速度 (恢复原始算法)
-        const angle = (Math.PI * i) / (CONFIG.PARTICLES_PER_BURST / 2) // 扇形分布
-        const speed = (12 + Math.random() * 6) * 1.5 // 随机速度
-        const spread = Math.random() * Math.PI * 2 // 360度随机扩散
-
-        // 直接属性赋值，避免Object.assign的性能开销
-        particle.x = startX
-        particle.y = startY
-        // 复杂的速度计算，模拟真实烟花爆炸轨迹
-        particle.vx = Math.cos(angle) * Math.cos(spread) * speed * (Math.random() * 0.5 + 0.5)
-        particle.vy = Math.sin(angle) * speed - 15 // 向上初始速度
-        particle.color = CONFIG.COLORS[Math.floor(Math.random() * CONFIG.COLORS.length)]
-        particle.rotation = Math.random() * 360
-        particle.rotationSpeed =
-          (Math.random() * CONFIG.ROTATION.RANDOM_SPEED + CONFIG.ROTATION.BASE_SPEED) *
-          (Math.random() > 0.5 ? 1 : -1) // 随机旋转方向
-        particle.scale = 0.8 + Math.random() * 0.4 // 随机缩放
-        particle.shape = availableShapes[Math.floor(Math.random() * availableShapes.length)]
-        particle.opacity = 1
-        particle.imageUrl = imageUrl && this.imageCache[imageUrl] ? imageUrl : undefined
-
-        particles.push(particle)
-      }
-
-      // 批量添加到活动粒子数组，减少多次数组操作
-      this.activeParticles.push(...particles)
-    }
-
-    /**
-     * 更新所有粒子的物理状态 (性能优化版本)
-     * 包括位置、速度、旋转、透明度等
-     */
-    private updateParticles(): void {
-      const { GRAVITY, VELOCITY_THRESHOLD, OPACITY_DECAY } = CONFIG.PHYSICS
-      const { DECAY } = CONFIG.ROTATION
-
-      // 使用倒序遍历，避免删除元素时的索引混乱问题
-      for (let i = this.activeParticles.length - 1; i >= 0; i--) {
-        const particle = this.activeParticles[i]
-
-        // 更新粒子位置 (匀加速运动)
-        particle.x += particle.vx
-        particle.y += particle.vy
-        particle.vy += GRAVITY // 重力影响
-
-        // 更新旋转状态
-        particle.rotation += particle.rotationSpeed
-        particle.rotationSpeed *= DECAY // 旋转速度衰减
-
-        // 透明度衰减逻辑 - 当粒子下落速度超过阈值时开始淡出
-        if (particle.vy > VELOCITY_THRESHOLD) {
-          particle.opacity -= OPACITY_DECAY
-          if (particle.opacity <= 0) {
-            this.recycleParticle(i)
-            continue
-          }
-        }
-
-        // 边界检查 - 移除超出屏幕范围的粒子
-        if (this.isOutOfBounds(particle)) {
-          this.recycleParticle(i)
-        }
-      }
-    }
-
-    /**
-     * 回收粒子到对象池
-     * @param index 要回收的粒子在活动数组中的索引
-     */
-    private recycleParticle(index: number): void {
-      const particle = this.activeParticles[index]
-      particle.active = false // 标记为非活动状态
-      this.activeParticles.splice(index, 1) // 从活动数组中移除
-    }
-
-    /**
-     * 检查粒子是否超出屏幕边界
-     * @param particle 要检查的粒子
-     * @returns 是否超出边界
-     */
-    private isOutOfBounds(particle: Firework): boolean {
-      const margin = 100 // 边界缓冲区
-      return (
-        particle.x < -margin ||
-        particle.x > this.canvasWidth + margin ||
-        particle.y < -margin ||
-        particle.y > this.canvasHeight + margin
-      )
-    }
-
-    /**
-     * 绘制单个粒子
-     * @param particle 要绘制的粒子对象
-     */
-    private drawParticle(particle: Firework): void {
-      if (!ctx.value) return
-
-      // 保存当前画布状态
-      ctx.value.save()
-      ctx.value.globalAlpha = particle.opacity // 设置透明度
-      ctx.value.translate(particle.x, particle.y) // 移动到粒子位置
-      ctx.value.rotate((particle.rotation * Math.PI) / 180) // 应用旋转
-      ctx.value.scale(particle.scale, particle.scale) // 应用缩放
-
-      // 渲染粒子形状
-      this.renderShape(particle)
-
-      // 恢复画布状态
-      ctx.value.restore()
-    }
-
-    /**
-     * 根据粒子类型渲染对应的形状
-     * @param particle 要渲染的粒子
-     */
-    private renderShape(particle: Firework): void {
-      if (!ctx.value) return
-
-      const { SIZES } = CONFIG
-      ctx.value.fillStyle = particle.color
-
-      switch (particle.shape) {
-        case 'rectangle':
-          // 绘制矩形
-          ctx.value.fillRect(
-            -SIZES.RECTANGLE.WIDTH / 2,
-            -SIZES.RECTANGLE.HEIGHT / 2,
-            SIZES.RECTANGLE.WIDTH,
-            SIZES.RECTANGLE.HEIGHT
-          )
-          break
-
-        case 'square':
-          // 绘制正方形
-          ctx.value.fillRect(
-            -SIZES.SQUARE.SIZE / 2,
-            -SIZES.SQUARE.SIZE / 2,
-            SIZES.SQUARE.SIZE,
-            SIZES.SQUARE.SIZE
-          )
-          break
-
-        case 'circle':
-          // 绘制圆形
-          ctx.value.beginPath()
-          ctx.value.arc(0, 0, SIZES.CIRCLE.SIZE / 2, 0, Math.PI * 2)
-          ctx.value.fill()
-          break
-
-        case 'triangle':
-          // 绘制三角形
-          ctx.value.beginPath()
-          ctx.value.moveTo(0, -SIZES.TRIANGLE.SIZE)
-          ctx.value.lineTo(SIZES.TRIANGLE.SIZE, SIZES.TRIANGLE.SIZE)
-          ctx.value.lineTo(-SIZES.TRIANGLE.SIZE, SIZES.TRIANGLE.SIZE)
-          ctx.value.closePath()
-          ctx.value.fill()
-          break
-
-        case 'oval':
-          // 绘制椭圆
-          ctx.value.beginPath()
-          ctx.value.ellipse(0, 0, SIZES.OVAL.WIDTH / 2, SIZES.OVAL.HEIGHT / 2, 0, 0, Math.PI * 2)
-          ctx.value.fill()
-          break
-
-        case 'image':
-          // 绘制图片
-          this.renderImage(particle)
-          break
-      }
-    }
-
-    /**
-     * 渲染图片类型的粒子
-     * @param particle 包含图片URL的粒子对象
-     */
-    private renderImage(particle: Firework): void {
-      if (!ctx.value || !particle.imageUrl) return
-
-      const img = this.imageCache[particle.imageUrl]
-      if (img?.complete) {
-        const { WIDTH, HEIGHT } = CONFIG.SIZES.IMAGE
-        ctx.value.drawImage(img, -WIDTH / 2, -HEIGHT / 2, WIDTH, HEIGHT)
-      }
-    }
-
-    /**
-     * 渲染所有活动粒子到画布
-     * 清除画布并重新绘制所有粒子
-     */
-    private render(): void {
-      if (!ctx.value || !canvasRef.value) return
-
-      // 清除整个画布
-      ctx.value.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
-      // 设置混合模式为"变亮"，增强视觉效果
-      ctx.value.globalCompositeOperation = 'lighter'
-
-      // 渲染所有活动粒子
-      for (const particle of this.activeParticles) {
-        this.drawParticle(particle)
-      }
-    }
-
-    /**
-     * 动画主循环
-     * 使用箭头函数保持this绑定
-     */
-    private animate = (): void => {
-      this.updateParticles() // 更新粒子状态
-      this.render() // 渲染粒子
-      this.animationId = requestAnimationFrame(this.animate) // 请求下一帧
-    }
-
-    /**
-     * 更新画布尺寸缓存
-     * 在窗口大小改变时调用
-     * @param width 新的画布宽度
-     * @param height 新的画布高度
-     */
-    updateCanvasSize(width: number, height: number): void {
-      this.canvasWidth = width
-      this.canvasHeight = height
-    }
-
-    /**
-     * 启动动画循环
-     */
-    start(): void {
-      this.animate()
-    }
-
-    /**
-     * 停止动画循环
-     * 在组件卸载时调用，避免内存泄漏
-     */
-    stop(): void {
-      if (this.animationId) {
-        cancelAnimationFrame(this.animationId)
-        this.animationId = 0
-      }
-    }
-
-    /**
-     * 获取当前活动粒子数量
-     * 用于调试和性能监控
-     * @returns 活动粒子数量
-     */
-    getActiveParticleCount(): number {
-      return this.activeParticles.length
-    }
-  }
-
-  /** 烟花系统实例 */
-  const fireworkSystem = new FireworkSystem()
-
-  /**
-   * 处理键盘快捷键
-   * 监听 Ctrl+Shift+P 或 Cmd+Shift+P 组合键触发烟花
-   * @param event 键盘事件对象
-   */
-  const handleKeyPress = (event: KeyboardEvent): void => {
-    const isFireworkShortcut =
-      (event.ctrlKey && event.shiftKey && event.key.toLowerCase() === 'p') ||
-      (event.metaKey && event.shiftKey && event.key.toLowerCase() === 'p')
-
-    if (isFireworkShortcut) {
-      event.preventDefault()
-      fireworkSystem.createFirework()
     }
   }
 
   /**
-   * 调整Canvas画布大小
-   * 响应窗口大小变化，确保画布始终覆盖整个视口
+   * 回收粒子到对象池
+   * @param index 要回收的粒子在活动数组中的索引
    */
-  const resizeCanvas = (): void => {
-    if (!canvasRef.value) return
-
-    const { innerWidth, innerHeight } = window
-    canvasRef.value.width = innerWidth
-    canvasRef.value.height = innerHeight
-    fireworkSystem.updateCanvasSize(innerWidth, innerHeight)
+  private recycleParticle(index: number): void {
+    const particle = this.activeParticles[index];
+    particle.active = false; // 标记为非活动状态
+    this.activeParticles.splice(index, 1); // 从活动数组中移除
   }
 
   /**
-   * 处理外部触发的烟花事件
-   * 通过 mittBus 事件总线接收触发指令
-   * @param event 事件数据，可能包含图片URL
+   * 检查粒子是否超出屏幕边界
+   * @param particle 要检查的粒子
+   * @returns 是否超出边界
    */
-  const handleFireworkTrigger: Handler<unknown> = (event: unknown) => {
-    const imageUrl = event as string | undefined
-    fireworkSystem.createFirework(imageUrl)
+  private isOutOfBounds(particle: Firework): boolean {
+    const margin = 100; // 边界缓冲区
+    return (
+      particle.x < -margin ||
+      particle.x > this.canvasWidth + margin ||
+      particle.y < -margin ||
+      particle.y > this.canvasHeight + margin
+    );
   }
 
   /**
-   * 组件挂载时的初始化逻辑
+   * 绘制单个粒子
+   * @param particle 要绘制的粒子对象
    */
-  onMounted(async () => {
-    if (!canvasRef.value) return
+  private drawParticle(particle: Firework): void {
+    if (!ctx.value) return;
 
-    // 获取Canvas 2D绘制上下文
-    ctx.value = canvasRef.value.getContext('2d')
-    if (!ctx.value) return
+    // 保存当前画布状态
+    ctx.value.save();
+    ctx.value.globalAlpha = particle.opacity; // 设置透明度
+    ctx.value.translate(particle.x, particle.y); // 移动到粒子位置
+    ctx.value.rotate((particle.rotation * Math.PI) / 180); // 应用旋转
+    ctx.value.scale(particle.scale, particle.scale); // 应用缩放
 
-    // 设置初始画布大小
-    resizeCanvas()
+    // 渲染粒子形状
+    this.renderShape(particle);
 
-    // 预加载所有图片资源
-    await fireworkSystem.preloadAllImages()
-
-    // 启动动画循环
-    fireworkSystem.start()
-
-    // 注册事件监听器
-    useEventListener(window, 'keydown', handleKeyPress) // 键盘快捷键
-    useEventListener(window, 'resize', resizeCanvas) // 窗口大小变化
-    mittBus.on('triggerFireworks', handleFireworkTrigger) // 外部触发事件
-  })
+    // 恢复画布状态
+    ctx.value.restore();
+  }
 
   /**
-   * 组件卸载时的清理逻辑
-   * 停止动画循环并移除事件监听器，防止内存泄漏
+   * 根据粒子类型渲染对应的形状
+   * @param particle 要渲染的粒子
    */
-  onUnmounted(() => {
-    fireworkSystem.stop()
-    mittBus.off('triggerFireworks', handleFireworkTrigger)
-  })
+  private renderShape(particle: Firework): void {
+    if (!ctx.value) return;
+
+    const { SIZES } = CONFIG;
+    ctx.value.fillStyle = particle.color;
+
+    switch (particle.shape) {
+      case "rectangle":
+        // 绘制矩形
+        ctx.value.fillRect(
+          -SIZES.RECTANGLE.WIDTH / 2,
+          -SIZES.RECTANGLE.HEIGHT / 2,
+          SIZES.RECTANGLE.WIDTH,
+          SIZES.RECTANGLE.HEIGHT
+        );
+        break;
+
+      case "square":
+        // 绘制正方形
+        ctx.value.fillRect(
+          -SIZES.SQUARE.SIZE / 2,
+          -SIZES.SQUARE.SIZE / 2,
+          SIZES.SQUARE.SIZE,
+          SIZES.SQUARE.SIZE
+        );
+        break;
+
+      case "circle":
+        // 绘制圆形
+        ctx.value.beginPath();
+        ctx.value.arc(0, 0, SIZES.CIRCLE.SIZE / 2, 0, Math.PI * 2);
+        ctx.value.fill();
+        break;
+
+      case "triangle":
+        // 绘制三角形
+        ctx.value.beginPath();
+        ctx.value.moveTo(0, -SIZES.TRIANGLE.SIZE);
+        ctx.value.lineTo(SIZES.TRIANGLE.SIZE, SIZES.TRIANGLE.SIZE);
+        ctx.value.lineTo(-SIZES.TRIANGLE.SIZE, SIZES.TRIANGLE.SIZE);
+        ctx.value.closePath();
+        ctx.value.fill();
+        break;
+
+      case "oval":
+        // 绘制椭圆
+        ctx.value.beginPath();
+        ctx.value.ellipse(0, 0, SIZES.OVAL.WIDTH / 2, SIZES.OVAL.HEIGHT / 2, 0, 0, Math.PI * 2);
+        ctx.value.fill();
+        break;
+
+      case "image":
+        // 绘制图片
+        this.renderImage(particle);
+        break;
+    }
+  }
+
+  /**
+   * 渲染图片类型的粒子
+   * @param particle 包含图片URL的粒子对象
+   */
+  private renderImage(particle: Firework): void {
+    if (!ctx.value || !particle.imageUrl) return;
+
+    const img = this.imageCache[particle.imageUrl];
+    if (img?.complete) {
+      const { WIDTH, HEIGHT } = CONFIG.SIZES.IMAGE;
+      ctx.value.drawImage(img, -WIDTH / 2, -HEIGHT / 2, WIDTH, HEIGHT);
+    }
+  }
+
+  /**
+   * 渲染所有活动粒子到画布
+   * 清除画布并重新绘制所有粒子
+   */
+  private render(): void {
+    if (!ctx.value || !canvasRef.value) return;
+
+    // 清除整个画布
+    ctx.value.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
+    // 设置混合模式为"变亮"，增强视觉效果
+    ctx.value.globalCompositeOperation = "lighter";
+
+    // 渲染所有活动粒子
+    for (const particle of this.activeParticles) {
+      this.drawParticle(particle);
+    }
+  }
+
+  /**
+   * 动画主循环
+   * 使用箭头函数保持this绑定
+   */
+  private animate = (): void => {
+    this.updateParticles(); // 更新粒子状态
+    this.render(); // 渲染粒子
+    this.animationId = requestAnimationFrame(this.animate); // 请求下一帧
+  };
+
+  /**
+   * 更新画布尺寸缓存
+   * 在窗口大小改变时调用
+   * @param width 新的画布宽度
+   * @param height 新的画布高度
+   */
+  updateCanvasSize(width: number, height: number): void {
+    this.canvasWidth = width;
+    this.canvasHeight = height;
+  }
+
+  /**
+   * 启动动画循环
+   */
+  start(): void {
+    this.animate();
+  }
+
+  /**
+   * 停止动画循环
+   * 在组件卸载时调用，避免内存泄漏
+   */
+  stop(): void {
+    if (this.animationId) {
+      cancelAnimationFrame(this.animationId);
+      this.animationId = 0;
+    }
+  }
+
+  /**
+   * 获取当前活动粒子数量
+   * 用于调试和性能监控
+   * @returns 活动粒子数量
+   */
+  getActiveParticleCount(): number {
+    return this.activeParticles.length;
+  }
+}
+
+/** 烟花系统实例 */
+const fireworkSystem = new FireworkSystem();
+
+/**
+ * 处理键盘快捷键
+ * 监听 Ctrl+Shift+P 或 Cmd+Shift+P 组合键触发烟花
+ * @param event 键盘事件对象
+ */
+const handleKeyPress = (event: KeyboardEvent): void => {
+  const isFireworkShortcut =
+    (event.ctrlKey && event.shiftKey && event.key.toLowerCase() === "p") ||
+    (event.metaKey && event.shiftKey && event.key.toLowerCase() === "p");
+
+  if (isFireworkShortcut) {
+    event.preventDefault();
+    fireworkSystem.createFirework();
+  }
+};
+
+/**
+ * 调整Canvas画布大小
+ * 响应窗口大小变化，确保画布始终覆盖整个视口
+ */
+const resizeCanvas = (): void => {
+  if (!canvasRef.value) return;
+
+  const { innerWidth, innerHeight } = window;
+  canvasRef.value.width = innerWidth;
+  canvasRef.value.height = innerHeight;
+  fireworkSystem.updateCanvasSize(innerWidth, innerHeight);
+};
+
+/**
+ * 处理外部触发的烟花事件
+ * 通过 mittBus 事件总线接收触发指令
+ * @param event 事件数据，可能包含图片URL
+ */
+const handleFireworkTrigger: Handler<unknown> = (event: unknown) => {
+  const imageUrl = event as string | undefined;
+  fireworkSystem.createFirework(imageUrl);
+};
+
+/**
+ * 组件挂载时的初始化逻辑
+ */
+onMounted(async () => {
+  if (!canvasRef.value) return;
+
+  // 获取Canvas 2D绘制上下文
+  ctx.value = canvasRef.value.getContext("2d");
+  if (!ctx.value) return;
+
+  // 设置初始画布大小
+  resizeCanvas();
+
+  // 预加载所有图片资源
+  await fireworkSystem.preloadAllImages();
+
+  // 启动动画循环
+  fireworkSystem.start();
+
+  // 注册事件监听器
+  useEventListener(window, "keydown", handleKeyPress); // 键盘快捷键
+  useEventListener(window, "resize", resizeCanvas); // 窗口大小变化
+  mittBus.on("triggerFireworks", handleFireworkTrigger); // 外部触发事件
+});
+
+/**
+ * 组件卸载时的清理逻辑
+ * 停止动画循环并移除事件监听器，防止内存泄漏
+ */
+onUnmounted(() => {
+  fireworkSystem.stop();
+  mittBus.off("triggerFireworks", handleFireworkTrigger);
+});
 </script>
diff --git a/frontend/new-web/src/components/core/layouts/art-global-component/index.vue b/frontend/new-web/src/components/core/layouts/art-global-component/index.vue
index 6908f94f..f3fd2bd9 100644
--- a/frontend/new-web/src/components/core/layouts/art-global-component/index.vue
+++ b/frontend/new-web/src/components/core/layouts/art-global-component/index.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script setup lang="ts">
-  import { getEnabledGlobalComponents } from '@/config/modules/component'
-  defineOptions({ name: 'ArtGlobalComponent' })
-  const enabledComponents = computed(() => getEnabledGlobalComponents())
+import { getEnabledGlobalComponents } from "@/config/modules/component";
+defineOptions({ name: "ArtGlobalComponent" });
+const enabledComponents = computed(() => getEnabledGlobalComponents());
 </script>
diff --git a/frontend/new-web/src/components/core/layouts/art-global-search/index.vue b/frontend/new-web/src/components/core/layouts/art-global-search/index.vue
index f2c0b88c..9b225351 100644
--- a/frontend/new-web/src/components/core/layouts/art-global-search/index.vue
+++ b/frontend/new-web/src/components/core/layouts/art-global-search/index.vue
@@ -46,7 +46,7 @@
         </div>
 
         <div v-show="!searchVal && searchResult.length === 0 && historyResult.length > 0">
-          <p class="text-xs text-g-500">{{ $t('search.historyTitle') }}</p>
+          <p class="text-xs text-g-500">{{ $t("search.historyTitle") }}</p>
           <div class="mt-1.5 w-full">
             <div
               class="box mt-2 h-12 c-p flex-cb rounded-custom-sm bg-g-200/80 px-4 text-sm text-g-800"
@@ -76,16 +76,16 @@
         <div class="dialog-footer box-border flex-c border-t-d pt-4.5 pb-1">
           <div class="flex-cc">
             <ArtSvgIcon icon="fluent:arrow-enter-left-20-filled" class="keyboard" />
-            <span class="mr-3.5 text-xs text-g-700">{{ $t('search.selectKeydown') }}</span>
+            <span class="mr-3.5 text-xs text-g-700">{{ $t("search.selectKeydown") }}</span>
           </div>
           <div class="flex-c">
             <ArtSvgIcon icon="ri:arrow-up-wide-fill" class="keyboard" />
             <ArtSvgIcon icon="ri:arrow-down-wide-fill" class="keyboard" />
-            <span class="mr-3.5 text-xs text-g-700">{{ $t('search.switchKeydown') }}</span>
+            <span class="mr-3.5 text-xs text-g-700">{{ $t("search.switchKeydown") }}</span>
           </div>
           <div class="flex-c">
             <i class="keyboard !w-8 flex-cc"><p class="text-[10px] font-medium">ESC</p></i>
-            <span class="mr-3.5 text-xs text-g-700">{{ $t('search.exitKeydown') }}</span>
+            <span class="mr-3.5 text-xs text-g-700">{{ $t("search.exitKeydown") }}</span>
           </div>
         </div>
       </template>
@@ -94,329 +94,329 @@
 </template>
 
 <script lang="ts" setup>
-  import { useUserStore } from '@/store/modules/user'
-  import { AppRouteRecord } from '@/types/router'
-  import { Search } from '@element-plus/icons-vue'
-  import { mittBus } from '@/utils/sys'
-  import { useMenuStore } from '@/store/modules/menu'
-  import { formatMenuTitle } from '@/utils/router'
-  import { handleMenuJump } from '@/utils/navigation'
-  import { type ScrollbarInstance } from 'element-plus'
+import { useUserStore } from "@/store/modules/user.store";
+import { AppRouteRecord } from "@/types/router";
+import { Search } from "@element-plus/icons-vue";
+import { mittBus } from "@/utils/sys";
+import { useMenuStore } from "@/store/modules/menu.store";
+import { formatMenuTitle } from "@/utils/navigation/router";
+import { handleMenuJump } from "@/utils/navigation";
+import { type ScrollbarInstance } from "element-plus";
 
-  defineOptions({ name: 'ArtGlobalSearch' })
+defineOptions({ name: "ArtGlobalSearch" });
 
-  const userStore = useUserStore()
-  const { menuList } = storeToRefs(useMenuStore())
+const userStore = useUserStore();
+const { menuList } = storeToRefs(useMenuStore());
 
-  const showSearchDialog = ref(false)
-  const searchVal = ref('')
-  const searchResult = ref<AppRouteRecord[]>([])
-  const historyMaxLength = 10
+const showSearchDialog = ref(false);
+const searchVal = ref("");
+const searchResult = ref<AppRouteRecord[]>([]);
+const historyMaxLength = 10;
 
-  const { searchHistory: historyResult } = storeToRefs(userStore)
+const { searchHistory: historyResult } = storeToRefs(userStore);
 
-  const searchInput = ref<HTMLInputElement | null>(null)
-  const highlightedIndex = ref(0)
-  const historyHIndex = ref(0)
-  const searchResultScrollbar = ref<ScrollbarInstance>()
-  const isKeyboardNavigating = ref(false) // 新增状态：是否正在使用键盘导航
+const searchInput = ref<HTMLInputElement | null>(null);
+const highlightedIndex = ref(0);
+const historyHIndex = ref(0);
+const searchResultScrollbar = ref<ScrollbarInstance>();
+const isKeyboardNavigating = ref(false); // 新增状态：是否正在使用键盘导航
 
-  // 生命周期钩子
-  onMounted(() => {
-    mittBus.on('openSearchDialog', openSearchDialog)
-    document.addEventListener('keydown', handleKeydown)
-  })
+// 生命周期钩子
+onMounted(() => {
+  mittBus.on("openSearchDialog", openSearchDialog);
+  document.addEventListener("keydown", handleKeydown);
+});
 
-  onUnmounted(() => {
-    document.removeEventListener('keydown', handleKeydown)
-  })
+onUnmounted(() => {
+  document.removeEventListener("keydown", handleKeydown);
+});
 
-  // 键盘快捷键处理
-  const handleKeydown = (event: KeyboardEvent) => {
-    const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0
-    const isCommandKey = isMac ? event.metaKey : event.ctrlKey
+// 键盘快捷键处理
+const handleKeydown = (event: KeyboardEvent) => {
+  const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
+  const isCommandKey = isMac ? event.metaKey : event.ctrlKey;
 
-    if (isCommandKey && event.key.toLowerCase() === 'k') {
-      event.preventDefault()
-      showSearchDialog.value = true
-      focusInput()
-    }
+  if (isCommandKey && event.key.toLowerCase() === "k") {
+    event.preventDefault();
+    showSearchDialog.value = true;
+    focusInput();
+  }
 
-    // 当搜索对话框打开时，处理方向键和回车键
-    if (showSearchDialog.value) {
-      if (event.key === 'ArrowUp') {
-        event.preventDefault()
-        highlightPrevious()
-      } else if (event.key === 'ArrowDown') {
-        event.preventDefault()
-        highlightNext()
-      } else if (event.key === 'Enter') {
-        event.preventDefault()
-        selectHighlighted()
-      } else if (event.key === 'Escape') {
-        event.preventDefault()
-        showSearchDialog.value = false
-      }
+  // 当搜索对话框打开时，处理方向键和回车键
+  if (showSearchDialog.value) {
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      highlightPrevious();
+    } else if (event.key === "ArrowDown") {
+      event.preventDefault();
+      highlightNext();
+    } else if (event.key === "Enter") {
+      event.preventDefault();
+      selectHighlighted();
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      showSearchDialog.value = false;
     }
   }
+};
 
-  const focusInput = () => {
-    setTimeout(() => {
-      searchInput.value?.focus()
-    }, 100)
+const focusInput = () => {
+  setTimeout(() => {
+    searchInput.value?.focus();
+  }, 100);
+};
+
+// 搜索逻辑
+const search = (val: string) => {
+  if (val) {
+    searchResult.value = flattenAndFilterMenuItems(menuList.value, val);
+  } else {
+    searchResult.value = [];
   }
+};
 
-  // 搜索逻辑
-  const search = (val: string) => {
-    if (val) {
-      searchResult.value = flattenAndFilterMenuItems(menuList.value, val)
-    } else {
-      searchResult.value = []
-    }
-  }
+const flattenAndFilterMenuItems = (items: AppRouteRecord[], val: string): AppRouteRecord[] => {
+  const lowerVal = val.toLowerCase();
+  const result: AppRouteRecord[] = [];
 
-  const flattenAndFilterMenuItems = (items: AppRouteRecord[], val: string): AppRouteRecord[] => {
-    const lowerVal = val.toLowerCase()
-    const result: AppRouteRecord[] = []
+  const flattenAndMatch = (item: AppRouteRecord) => {
+    if (item.meta?.isHide) return;
 
-    const flattenAndMatch = (item: AppRouteRecord) => {
-      if (item.meta?.isHide) return
+    const lowerItemTitle = formatMenuTitle(item.meta.title).toLowerCase();
 
-      const lowerItemTitle = formatMenuTitle(item.meta.title).toLowerCase()
-
-      if (item.children && item.children.length > 0) {
-        item.children.forEach(flattenAndMatch)
-        return
-      }
-
-      if (
-        lowerItemTitle.includes(lowerVal) &&
-        ((item.path && item.path.trim()) || item.meta.link || item.meta.isIframe)
-      ) {
-        result.push({ ...item, children: undefined })
-      }
+    if (item.children && item.children.length > 0) {
+      item.children.forEach(flattenAndMatch);
+      return;
     }
 
-    items.forEach(flattenAndMatch)
-    return result
-  }
-
-  // 高亮控制并实现滚动条跟随
-  const highlightPrevious = () => {
-    isKeyboardNavigating.value = true
-    if (searchVal.value) {
-      highlightedIndex.value =
-        (highlightedIndex.value - 1 + searchResult.value.length) % searchResult.value.length
-      scrollToHighlightedItem()
-    } else {
-      historyHIndex.value =
-        (historyHIndex.value - 1 + historyResult.value.length) % historyResult.value.length
-      scrollToHighlightedHistoryItem()
+    if (
+      lowerItemTitle.includes(lowerVal) &&
+      ((item.path && item.path.trim()) || item.meta.link || item.meta.isIframe)
+    ) {
+      result.push({ ...item, children: undefined });
     }
-    // 延迟重置键盘导航状态，防止立即被 hover 覆盖
-    setTimeout(() => {
-      isKeyboardNavigating.value = false
-    }, 100)
-  }
+  };
 
-  const highlightNext = () => {
-    isKeyboardNavigating.value = true
-    if (searchVal.value) {
-      highlightedIndex.value = (highlightedIndex.value + 1) % searchResult.value.length
-      scrollToHighlightedItem()
-    } else {
-      historyHIndex.value = (historyHIndex.value + 1) % historyResult.value.length
-      scrollToHighlightedHistoryItem()
+  items.forEach(flattenAndMatch);
+  return result;
+};
+
+// 高亮控制并实现滚动条跟随
+const highlightPrevious = () => {
+  isKeyboardNavigating.value = true;
+  if (searchVal.value) {
+    highlightedIndex.value =
+      (highlightedIndex.value - 1 + searchResult.value.length) % searchResult.value.length;
+    scrollToHighlightedItem();
+  } else {
+    historyHIndex.value =
+      (historyHIndex.value - 1 + historyResult.value.length) % historyResult.value.length;
+    scrollToHighlightedHistoryItem();
+  }
+  // 延迟重置键盘导航状态，防止立即被 hover 覆盖
+  setTimeout(() => {
+    isKeyboardNavigating.value = false;
+  }, 100);
+};
+
+const highlightNext = () => {
+  isKeyboardNavigating.value = true;
+  if (searchVal.value) {
+    highlightedIndex.value = (highlightedIndex.value + 1) % searchResult.value.length;
+    scrollToHighlightedItem();
+  } else {
+    historyHIndex.value = (historyHIndex.value + 1) % historyResult.value.length;
+    scrollToHighlightedHistoryItem();
+  }
+  setTimeout(() => {
+    isKeyboardNavigating.value = false;
+  }, 100);
+};
+
+const scrollToHighlightedItem = () => {
+  nextTick(() => {
+    if (!searchResultScrollbar.value || !searchResult.value.length) return;
+
+    const scrollWrapper = searchResultScrollbar.value.wrapRef;
+    if (!scrollWrapper) return;
+
+    const highlightedElements = scrollWrapper.querySelectorAll(".result .box");
+    if (!highlightedElements[highlightedIndex.value]) return;
+
+    const highlightedElement = highlightedElements[highlightedIndex.value] as HTMLElement;
+    const itemHeight = highlightedElement.offsetHeight;
+    const scrollTop = scrollWrapper.scrollTop;
+    const containerHeight = scrollWrapper.clientHeight;
+    const itemTop = highlightedElement.offsetTop;
+    const itemBottom = itemTop + itemHeight;
+
+    if (itemTop < scrollTop) {
+      searchResultScrollbar.value.setScrollTop(itemTop);
+    } else if (itemBottom > scrollTop + containerHeight) {
+      searchResultScrollbar.value.setScrollTop(itemBottom - containerHeight);
     }
-    setTimeout(() => {
-      isKeyboardNavigating.value = false
-    }, 100)
-  }
+  });
+};
 
-  const scrollToHighlightedItem = () => {
-    nextTick(() => {
-      if (!searchResultScrollbar.value || !searchResult.value.length) return
+const scrollToHighlightedHistoryItem = () => {
+  nextTick(() => {
+    if (!searchResultScrollbar.value || !historyResult.value.length) return;
 
-      const scrollWrapper = searchResultScrollbar.value.wrapRef
-      if (!scrollWrapper) return
+    const scrollWrapper = searchResultScrollbar.value.wrapRef;
+    if (!scrollWrapper) return;
 
-      const highlightedElements = scrollWrapper.querySelectorAll('.result .box')
-      if (!highlightedElements[highlightedIndex.value]) return
+    const historyItems = scrollWrapper.querySelectorAll(".history-result .box");
+    if (!historyItems[historyHIndex.value]) return;
 
-      const highlightedElement = highlightedElements[highlightedIndex.value] as HTMLElement
-      const itemHeight = highlightedElement.offsetHeight
-      const scrollTop = scrollWrapper.scrollTop
-      const containerHeight = scrollWrapper.clientHeight
-      const itemTop = highlightedElement.offsetTop
-      const itemBottom = itemTop + itemHeight
+    const highlightedElement = historyItems[historyHIndex.value] as HTMLElement;
+    const itemHeight = highlightedElement.offsetHeight;
+    const scrollTop = scrollWrapper.scrollTop;
+    const containerHeight = scrollWrapper.clientHeight;
+    const itemTop = highlightedElement.offsetTop;
+    const itemBottom = itemTop + itemHeight;
 
-      if (itemTop < scrollTop) {
-        searchResultScrollbar.value.setScrollTop(itemTop)
-      } else if (itemBottom > scrollTop + containerHeight) {
-        searchResultScrollbar.value.setScrollTop(itemBottom - containerHeight)
-      }
-    })
-  }
-
-  const scrollToHighlightedHistoryItem = () => {
-    nextTick(() => {
-      if (!searchResultScrollbar.value || !historyResult.value.length) return
-
-      const scrollWrapper = searchResultScrollbar.value.wrapRef
-      if (!scrollWrapper) return
-
-      const historyItems = scrollWrapper.querySelectorAll('.history-result .box')
-      if (!historyItems[historyHIndex.value]) return
-
-      const highlightedElement = historyItems[historyHIndex.value] as HTMLElement
-      const itemHeight = highlightedElement.offsetHeight
-      const scrollTop = scrollWrapper.scrollTop
-      const containerHeight = scrollWrapper.clientHeight
-      const itemTop = highlightedElement.offsetTop
-      const itemBottom = itemTop + itemHeight
-
-      if (itemTop < scrollTop) {
-        searchResultScrollbar.value.setScrollTop(itemTop)
-      } else if (itemBottom > scrollTop + containerHeight) {
-        searchResultScrollbar.value.setScrollTop(itemBottom - containerHeight)
-      }
-    })
-  }
-
-  const selectHighlighted = () => {
-    if (searchVal.value && searchResult.value.length) {
-      searchGoPage(searchResult.value[highlightedIndex.value])
-    } else if (!searchVal.value && historyResult.value.length) {
-      searchGoPage(historyResult.value[historyHIndex.value])
+    if (itemTop < scrollTop) {
+      searchResultScrollbar.value.setScrollTop(itemTop);
+    } else if (itemBottom > scrollTop + containerHeight) {
+      searchResultScrollbar.value.setScrollTop(itemBottom - containerHeight);
     }
+  });
+};
+
+const selectHighlighted = () => {
+  if (searchVal.value && searchResult.value.length) {
+    searchGoPage(searchResult.value[highlightedIndex.value]);
+  } else if (!searchVal.value && historyResult.value.length) {
+    searchGoPage(historyResult.value[historyHIndex.value]);
+  }
+};
+
+const isHighlighted = (index: number) => {
+  return highlightedIndex.value === index;
+};
+
+const searchBlur = () => {
+  highlightedIndex.value = 0;
+};
+
+const searchGoPage = (item: AppRouteRecord) => {
+  showSearchDialog.value = false;
+  addHistory(item);
+  handleMenuJump(item);
+  searchVal.value = "";
+  searchResult.value = [];
+};
+
+// 历史记录管理
+const updateHistory = () => {
+  if (Array.isArray(historyResult.value)) {
+    userStore.setSearchHistory(historyResult.value);
+  }
+};
+
+const addHistory = (item: AppRouteRecord) => {
+  const itemKey = item.path || String(item.meta.link || "");
+  const hasItemIndex = historyResult.value.findIndex(
+    (historyItem: AppRouteRecord) =>
+      (historyItem.path || String(historyItem.meta.link || "")) === itemKey
+  );
+
+  if (hasItemIndex !== -1) {
+    historyResult.value.splice(hasItemIndex, 1);
+  } else if (historyResult.value.length >= historyMaxLength) {
+    historyResult.value.pop();
   }
 
-  const isHighlighted = (index: number) => {
-    return highlightedIndex.value === index
+  const cleanedItem = { ...item };
+  delete cleanedItem.children;
+  delete cleanedItem.meta.authList;
+  historyResult.value.unshift(cleanedItem);
+  updateHistory();
+};
+
+const deleteHistory = (index: number) => {
+  historyResult.value.splice(index, 1);
+  updateHistory();
+};
+
+// 对话框控制
+const openSearchDialog = () => {
+  showSearchDialog.value = true;
+  focusInput();
+};
+
+const closeSearchDialog = () => {
+  searchVal.value = "";
+  searchResult.value = [];
+  highlightedIndex.value = 0;
+  historyHIndex.value = 0;
+};
+
+// 修改 hover 高亮逻辑，只有在非键盘导航时才生效
+const highlightOnHover = (index: number) => {
+  if (!isKeyboardNavigating.value && searchVal.value) {
+    highlightedIndex.value = index;
   }
+};
 
-  const searchBlur = () => {
-    highlightedIndex.value = 0
-  }
-
-  const searchGoPage = (item: AppRouteRecord) => {
-    showSearchDialog.value = false
-    addHistory(item)
-    handleMenuJump(item)
-    searchVal.value = ''
-    searchResult.value = []
-  }
-
-  // 历史记录管理
-  const updateHistory = () => {
-    if (Array.isArray(historyResult.value)) {
-      userStore.setSearchHistory(historyResult.value)
-    }
-  }
-
-  const addHistory = (item: AppRouteRecord) => {
-    const itemKey = item.path || String(item.meta.link || '')
-    const hasItemIndex = historyResult.value.findIndex(
-      (historyItem: AppRouteRecord) =>
-        (historyItem.path || String(historyItem.meta.link || '')) === itemKey
-    )
-
-    if (hasItemIndex !== -1) {
-      historyResult.value.splice(hasItemIndex, 1)
-    } else if (historyResult.value.length >= historyMaxLength) {
-      historyResult.value.pop()
-    }
-
-    const cleanedItem = { ...item }
-    delete cleanedItem.children
-    delete cleanedItem.meta.authList
-    historyResult.value.unshift(cleanedItem)
-    updateHistory()
-  }
-
-  const deleteHistory = (index: number) => {
-    historyResult.value.splice(index, 1)
-    updateHistory()
-  }
-
-  // 对话框控制
-  const openSearchDialog = () => {
-    showSearchDialog.value = true
-    focusInput()
-  }
-
-  const closeSearchDialog = () => {
-    searchVal.value = ''
-    searchResult.value = []
-    highlightedIndex.value = 0
-    historyHIndex.value = 0
-  }
-
-  // 修改 hover 高亮逻辑，只有在非键盘导航时才生效
-  const highlightOnHover = (index: number) => {
-    if (!isKeyboardNavigating.value && searchVal.value) {
-      highlightedIndex.value = index
-    }
-  }
-
-  const highlightOnHoverHistory = (index: number) => {
-    if (!isKeyboardNavigating.value && !searchVal.value) {
-      historyHIndex.value = index
-    }
+const highlightOnHoverHistory = (index: number) => {
+  if (!isKeyboardNavigating.value && !searchVal.value) {
+    historyHIndex.value = index;
   }
+};
 </script>
 <style lang="scss" scoped>
-  .layout-search {
-    :deep(.search-modal) {
-      background-color: rgb(0 0 0 / 20%);
+.layout-search {
+  :deep(.search-modal) {
+    background-color: rgb(0 0 0 / 20%);
+  }
+
+  :deep(.el-dialog__body) {
+    padding: 5px 0 0 !important;
+  }
+
+  :deep(.el-dialog__header) {
+    padding: 0;
+  }
+
+  .el-input {
+    :deep(.el-input__wrapper) {
+      background-color: var(--art-gray-200);
+      border: 1px solid var(--default-border-dashed);
+      border-radius: calc(var(--custom-radius) / 2 + 2px) !important;
+      box-shadow: none;
     }
 
-    :deep(.el-dialog__body) {
-      padding: 5px 0 0 !important;
+    :deep(.el-input__inner) {
+      color: var(--art-gray-800) !important;
     }
+  }
+}
 
-    :deep(.el-dialog__header) {
-      padding: 0;
-    }
-
-    .el-input {
-      :deep(.el-input__wrapper) {
-        background-color: var(--art-gray-200);
-        border: 1px solid var(--default-border-dashed);
-        border-radius: calc(var(--custom-radius) / 2 + 2px) !important;
-        box-shadow: none;
-      }
-
-      :deep(.el-input__inner) {
-        color: var(--art-gray-800) !important;
-      }
+.dark .layout-search {
+  .el-input {
+    :deep(.el-input__wrapper) {
+      background-color: #333;
+      border: 1px solid #4c4d50;
     }
   }
 
-  .dark .layout-search {
-    .el-input {
-      :deep(.el-input__wrapper) {
-        background-color: #333;
-        border: 1px solid #4c4d50;
-      }
-    }
-
-    :deep(.search-modal) {
-      background-color: rgb(23 23 26 / 60%);
-      backdrop-filter: none;
-    }
-
-    :deep(.el-dialog) {
-      background-color: #252526;
-    }
+  :deep(.search-modal) {
+    background-color: rgb(23 23 26 / 60%);
+    backdrop-filter: none;
   }
+
+  :deep(.el-dialog) {
+    background-color: #252526;
+  }
+}
 </style>
 
 <style scoped>
-  @reference '@styles/core/tailwind.css';
+@reference '@styles/core/tailwind.css';
 
-  .keyboard {
-    @apply mr-2 
+.keyboard {
+  @apply mr-2 
     box-border
     h-5 
     w-5.5
@@ -427,5 +427,5 @@
     text-g-500
     shadow-[0_2px_0_var(--default-border-dashed)] 
     last-of-type:mr-1.5;
-  }
+}
 </style>
diff --git a/frontend/new-web/src/components/core/layouts/art-header-bar/index.vue b/frontend/new-web/src/components/core/layouts/art-header-bar/index.vue
index 4e3c8f9e..cdcf1d04 100755
--- a/frontend/new-web/src/components/core/layouts/art-header-bar/index.vue
+++ b/frontend/new-web/src/components/core/layouts/art-header-bar/index.vue
@@ -3,7 +3,7 @@
   <div
     class="w-full bg-[var(--default-bg-color)]"
     :class="[
-      tabStyle === 'tab-card' || tabStyle === 'tab-google' ? 'mb-5 max-sm:mb-3 !bg-box' : ''
+      tabStyle === 'tab-card' || tabStyle === 'tab-google' ? 'mb-5 max-sm:mb-3 !bg-box' : '',
     ]"
   >
     <div
@@ -11,7 +11,7 @@
       :class="[
         tabStyle === 'tab-card' || tabStyle === 'tab-google'
           ? 'border-b border-[var(--art-card-border)]'
-          : ''
+          : '',
       ]"
     >
       <div class="flex-c flex-1 min-w-0 leading-15" style="display: flex">
@@ -69,7 +69,7 @@
         >
           <div class="flex-c">
             <ArtSvgIcon icon="ri:search-line" class="text-sm text-g-500" />
-            <span class="ml-1 text-xs font-normal text-g-500">{{ $t('topBar.search.title') }}</span>
+            <span class="ml-1 text-xs font-normal text-g-500">{{ $t("topBar.search.title") }}</span>
           </div>
           <div class="flex-c h-5 px-1.5 text-g-500/80 border border-g-400 rounded">
             <ArtSvgIcon v-if="isWindows" icon="vaadin:ctrl-a" class="text-sm" />
@@ -138,11 +138,12 @@
               </div>
             </template>
             <template #default>
-              <p
-                >{{ $t('topBar.guide.title')
-                }}<span :style="{ color: systemThemeColor }"> {{ $t('topBar.guide.theme') }} </span
-                >、 <span :style="{ color: systemThemeColor }"> {{ $t('topBar.guide.menu') }} </span
-                >{{ $t('topBar.guide.description') }}
+              <p>
+                {{ $t("topBar.guide.title") }}
+                <span :style="{ color: systemThemeColor }">{{ $t("topBar.guide.theme") }}</span>
+                、
+                <span :style="{ color: systemThemeColor }">{{ $t("topBar.guide.menu") }}</span>
+                {{ $t("topBar.guide.description") }}
               </p>
             </template>
           </ElPopover>
@@ -169,317 +170,317 @@
 </template>
 
 <script setup lang="ts">
-  import { useI18n } from 'vue-i18n'
-  import { useRouter } from 'vue-router'
-  import { useFullscreen, useWindowSize } from '@vueuse/core'
-  import { LanguageEnum, MenuTypeEnum } from '@/enums/appEnum'
-  import { useSettingStore } from '@/store/modules/setting'
-  import { useUserStore } from '@/store/modules/user'
-  import { useMenuStore } from '@/store/modules/menu'
-  import AppConfig from '@/config'
-  import { languageOptions } from '@/locales'
-  import { mittBus } from '@/utils/sys'
-  import { themeAnimation } from '@/utils/ui/animation'
-  import { useCommon } from '@/hooks/core/useCommon'
-  import { useHeaderBar } from '@/hooks/core/useHeaderBar'
-  import ArtUserMenu from './widget/ArtUserMenu.vue'
+import { useI18n } from "vue-i18n";
+import { useRouter } from "vue-router";
+import { useFullscreen, useWindowSize } from "@vueuse/core";
+import { LanguageEnum, MenuTypeEnum } from "@/enums/appEnum";
+import { useSettingsStore } from "@/store/modules/setting.store";
+import { useUserStore } from "@/store/modules/user.store";
+import { useMenuStore } from "@/store/modules/menu.store";
+import AppConfig from "@/config";
+import { languageOptions } from "@/locales";
+import { mittBus } from "@/utils/sys";
+import { themeAnimation } from "@/utils/ui/animation";
+import { useCommon } from "@/hooks/core/useCommon";
+import { useHeaderBar } from "@/hooks/core/useHeaderBar";
+import ArtUserMenu from "./widget/ArtUserMenu.vue";
 
-  defineOptions({ name: 'ArtHeaderBar' })
+defineOptions({ name: "ArtHeaderBar" });
 
-  // 检测操作系统类型
-  const isWindows = navigator.userAgent.includes('Windows')
+// 检测操作系统类型
+const isWindows = navigator.userAgent.includes("Windows");
 
-  const router = useRouter()
-  const { locale } = useI18n()
-  const { width } = useWindowSize()
+const router = useRouter();
+const { locale } = useI18n();
+const { width } = useWindowSize();
 
-  const settingStore = useSettingStore()
-  const userStore = useUserStore()
-  const menuStore = useMenuStore()
+const settingStore = useSettingsStore();
+const userStore = useUserStore();
+const menuStore = useMenuStore();
 
-  // 顶部栏功能配置
-  const {
-    shouldShowMenuButton,
-    shouldShowRefreshButton,
-    shouldShowFastEnter,
-    shouldShowBreadcrumb,
-    shouldShowGlobalSearch,
-    shouldShowFullscreen,
-    shouldShowNotification,
-    shouldShowChat,
-    shouldShowLanguage,
-    shouldShowSettings,
-    shouldShowThemeToggle,
-    fastEnterMinWidth: headerBarFastEnterMinWidth
-  } = useHeaderBar()
+// 顶部栏功能配置
+const {
+  shouldShowMenuButton,
+  shouldShowRefreshButton,
+  shouldShowFastEnter,
+  shouldShowBreadcrumb,
+  shouldShowGlobalSearch,
+  shouldShowFullscreen,
+  shouldShowNotification,
+  shouldShowChat,
+  shouldShowLanguage,
+  shouldShowSettings,
+  shouldShowThemeToggle,
+  fastEnterMinWidth: headerBarFastEnterMinWidth,
+} = useHeaderBar();
 
-  const { menuOpen, systemThemeColor, showSettingGuide, menuType, isDark, tabStyle } =
-    storeToRefs(settingStore)
+const { menuOpen, systemThemeColor, showSettingGuide, menuType, isDark, tabStyle } =
+  storeToRefs(settingStore);
 
-  const { language } = storeToRefs(userStore)
-  const { menuList } = storeToRefs(menuStore)
+const { language } = storeToRefs(userStore);
+const { menuList } = storeToRefs(menuStore);
 
-  const showNotice = ref(false)
-  const notice = ref(null)
+const showNotice = ref(false);
+const notice = ref(null);
 
-  // 菜单类型判断
-  const isLeftMenu = computed(() => menuType.value === MenuTypeEnum.LEFT)
-  const isDualMenu = computed(() => menuType.value === MenuTypeEnum.DUAL_MENU)
-  const isTopMenu = computed(() => menuType.value === MenuTypeEnum.TOP)
-  const isTopLeftMenu = computed(() => menuType.value === MenuTypeEnum.TOP_LEFT)
+// 菜单类型判断
+const isLeftMenu = computed(() => menuType.value === MenuTypeEnum.LEFT);
+const isDualMenu = computed(() => menuType.value === MenuTypeEnum.DUAL_MENU);
+const isTopMenu = computed(() => menuType.value === MenuTypeEnum.TOP);
+const isTopLeftMenu = computed(() => menuType.value === MenuTypeEnum.TOP_LEFT);
 
-  const { isFullscreen, toggle: toggleFullscreen } = useFullscreen()
+const { isFullscreen, toggle: toggleFullscreen } = useFullscreen();
 
-  onMounted(() => {
-    initLanguage()
-    document.addEventListener('click', bodyCloseNotice)
-  })
+onMounted(() => {
+  initLanguage();
+  document.addEventListener("click", bodyCloseNotice);
+});
 
-  onUnmounted(() => {
-    document.removeEventListener('click', bodyCloseNotice)
-  })
+onUnmounted(() => {
+  document.removeEventListener("click", bodyCloseNotice);
+});
 
-  /**
-   * 切换全屏状态
-   */
-  const toggleFullScreen = (): void => {
-    toggleFullscreen()
+/**
+ * 切换全屏状态
+ */
+const toggleFullScreen = (): void => {
+  toggleFullscreen();
+};
+
+/**
+ * 切换菜单显示/隐藏状态
+ */
+const visibleMenu = (): void => {
+  settingStore.setMenuOpen(!menuOpen.value);
+};
+
+const { homePath } = useCommon();
+const { refresh } = useCommon();
+
+/**
+ * 跳转到首页
+ */
+const toHome = (): void => {
+  router.push(homePath.value);
+};
+
+/**
+ * 刷新页面
+ * @param {number} time - 延迟时间，默认为0毫秒
+ */
+const reload = (time: number = 0): void => {
+  setTimeout(() => {
+    refresh();
+  }, time);
+};
+
+/**
+ * 初始化语言设置
+ */
+const initLanguage = (): void => {
+  locale.value = language.value;
+};
+
+/**
+ * 切换系统语言
+ * @param {LanguageEnum} lang - 目标语言类型
+ */
+const changeLanguage = (lang: LanguageEnum): void => {
+  if (locale.value === lang) return;
+  locale.value = lang;
+  userStore.setLanguage(lang);
+  reload(50);
+};
+
+/**
+ * 打开设置面板
+ */
+const openSetting = (): void => {
+  mittBus.emit("openSetting");
+
+  // 隐藏设置引导提示
+  if (showSettingGuide.value) {
+    settingStore.hideSettingGuide();
   }
+};
 
-  /**
-   * 切换菜单显示/隐藏状态
-   */
-  const visibleMenu = (): void => {
-    settingStore.setMenuOpen(!menuOpen.value)
+/**
+ * 打开全局搜索对话框
+ */
+const openSearchDialog = (): void => {
+  mittBus.emit("openSearchDialog");
+};
+
+/**
+ * 点击页面其他区域关闭通知面板
+ * @param {Event} e - 点击事件对象
+ */
+const bodyCloseNotice = (e: any): void => {
+  if (!showNotice.value) return;
+
+  const target = e.target as HTMLElement;
+
+  // 检查是否点击了通知按钮或通知面板内部
+  const isNoticeButton = target.closest(".notice-button");
+  const isNoticePanel = target.closest(".art-notification-panel");
+
+  if (!isNoticeButton && !isNoticePanel) {
+    showNotice.value = false;
   }
+};
 
-  const { homePath } = useCommon()
-  const { refresh } = useCommon()
+/**
+ * 切换通知面板显示状态
+ */
+const visibleNotice = (): void => {
+  showNotice.value = !showNotice.value;
+};
 
-  /**
-   * 跳转到首页
-   */
-  const toHome = (): void => {
-    router.push(homePath.value)
-  }
-
-  /**
-   * 刷新页面
-   * @param {number} time - 延迟时间，默认为0毫秒
-   */
-  const reload = (time: number = 0): void => {
-    setTimeout(() => {
-      refresh()
-    }, time)
-  }
-
-  /**
-   * 初始化语言设置
-   */
-  const initLanguage = (): void => {
-    locale.value = language.value
-  }
-
-  /**
-   * 切换系统语言
-   * @param {LanguageEnum} lang - 目标语言类型
-   */
-  const changeLanguage = (lang: LanguageEnum): void => {
-    if (locale.value === lang) return
-    locale.value = lang
-    userStore.setLanguage(lang)
-    reload(50)
-  }
-
-  /**
-   * 打开设置面板
-   */
-  const openSetting = (): void => {
-    mittBus.emit('openSetting')
-
-    // 隐藏设置引导提示
-    if (showSettingGuide.value) {
-      settingStore.hideSettingGuide()
-    }
-  }
-
-  /**
-   * 打开全局搜索对话框
-   */
-  const openSearchDialog = (): void => {
-    mittBus.emit('openSearchDialog')
-  }
-
-  /**
-   * 点击页面其他区域关闭通知面板
-   * @param {Event} e - 点击事件对象
-   */
-  const bodyCloseNotice = (e: any): void => {
-    if (!showNotice.value) return
-
-    const target = e.target as HTMLElement
-
-    // 检查是否点击了通知按钮或通知面板内部
-    const isNoticeButton = target.closest('.notice-button')
-    const isNoticePanel = target.closest('.art-notification-panel')
-
-    if (!isNoticeButton && !isNoticePanel) {
-      showNotice.value = false
-    }
-  }
-
-  /**
-   * 切换通知面板显示状态
-   */
-  const visibleNotice = (): void => {
-    showNotice.value = !showNotice.value
-  }
-
-  /**
-   * 打开聊天窗口
-   */
-  const openChat = (): void => {
-    mittBus.emit('openChat')
-  }
+/**
+ * 打开聊天窗口
+ */
+const openChat = (): void => {
+  mittBus.emit("openChat");
+};
 </script>
 
 <style lang="scss" scoped>
-  /* Custom animations */
-  @keyframes rotate180 {
-    0% {
-      transform: rotate(0);
-    }
-
-    100% {
-      transform: rotate(180deg);
-    }
+/* Custom animations */
+@keyframes rotate180 {
+  0% {
+    transform: rotate(0);
   }
 
-  @keyframes shake {
-    0% {
-      transform: rotate(0);
-    }
+  100% {
+    transform: rotate(180deg);
+  }
+}
 
-    25% {
-      transform: rotate(-5deg);
-    }
-
-    50% {
-      transform: rotate(5deg);
-    }
-
-    75% {
-      transform: rotate(-5deg);
-    }
-
-    100% {
-      transform: rotate(0);
-    }
+@keyframes shake {
+  0% {
+    transform: rotate(0);
   }
 
-  @keyframes expand {
-    0% {
-      transform: scale(1);
-    }
-
-    50% {
-      transform: scale(1.1);
-    }
-
-    100% {
-      transform: scale(1);
-    }
+  25% {
+    transform: rotate(-5deg);
   }
 
-  @keyframes shrink {
-    0% {
-      transform: scale(1);
-    }
-
-    50% {
-      transform: scale(0.9);
-    }
-
-    100% {
-      transform: scale(1);
-    }
+  50% {
+    transform: rotate(5deg);
   }
 
-  @keyframes moveUp {
-    0% {
-      transform: translateY(0);
-    }
-
-    50% {
-      transform: translateY(-3px);
-    }
-
-    100% {
-      transform: translateY(0);
-    }
+  75% {
+    transform: rotate(-5deg);
   }
 
-  @keyframes breathing {
-    0% {
-      opacity: 0.4;
-      transform: scale(0.9);
-    }
+  100% {
+    transform: rotate(0);
+  }
+}
 
-    50% {
-      opacity: 1;
-      transform: scale(1.1);
-    }
-
-    100% {
-      opacity: 0.4;
-      transform: scale(0.9);
-    }
+@keyframes expand {
+  0% {
+    transform: scale(1);
   }
 
-  /* Hover animation classes */
-  .refresh-btn:hover :deep(.art-svg-icon) {
-    animation: rotate180 0.5s;
+  50% {
+    transform: scale(1.1);
   }
 
-  .language-btn:hover :deep(.art-svg-icon) {
-    animation: moveUp 0.4s;
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes shrink {
+  0% {
+    transform: scale(1);
   }
 
-  .setting-btn:hover :deep(.art-svg-icon) {
-    animation: rotate180 0.5s;
+  50% {
+    transform: scale(0.9);
   }
 
-  .full-screen-btn:hover :deep(.art-svg-icon) {
-    animation: expand 0.6s forwards;
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes moveUp {
+  0% {
+    transform: translateY(0);
   }
 
-  .exit-full-screen-btn:hover :deep(.art-svg-icon) {
-    animation: shrink 0.6s forwards;
+  50% {
+    transform: translateY(-3px);
   }
 
-  .notice-button:hover :deep(.art-svg-icon) {
-    animation: shake 0.5s ease-in-out;
+  100% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes breathing {
+  0% {
+    opacity: 0.4;
+    transform: scale(0.9);
   }
 
-  .chat-button:hover :deep(.art-svg-icon) {
-    animation: shake 0.5s ease-in-out;
+  50% {
+    opacity: 1;
+    transform: scale(1.1);
   }
 
-  /* Breathing animation for chat dot */
-  .breathing-dot {
-    animation: breathing 1.5s ease-in-out infinite;
+  100% {
+    opacity: 0.4;
+    transform: scale(0.9);
   }
+}
 
-  /* iPad breakpoint adjustments */
-  @media screen and (width <= 768px) {
-    .logo2 {
-      display: block !important;
-    }
-  }
+/* Hover animation classes */
+.refresh-btn:hover :deep(.art-svg-icon) {
+  animation: rotate180 0.5s;
+}
 
-  @media screen and (width <= 640px) {
-    .btn-box {
-      width: 40px;
-    }
+.language-btn:hover :deep(.art-svg-icon) {
+  animation: moveUp 0.4s;
+}
+
+.setting-btn:hover :deep(.art-svg-icon) {
+  animation: rotate180 0.5s;
+}
+
+.full-screen-btn:hover :deep(.art-svg-icon) {
+  animation: expand 0.6s forwards;
+}
+
+.exit-full-screen-btn:hover :deep(.art-svg-icon) {
+  animation: shrink 0.6s forwards;
+}
+
+.notice-button:hover :deep(.art-svg-icon) {
+  animation: shake 0.5s ease-in-out;
+}
+
+.chat-button:hover :deep(.art-svg-icon) {
+  animation: shake 0.5s ease-in-out;
+}
+
+/* Breathing animation for chat dot */
+.breathing-dot {
+  animation: breathing 1.5s ease-in-out infinite;
+}
+
+/* iPad breakpoint adjustments */
+@media screen and (width <= 768px) {
+  .logo2 {
+    display: block !important;
   }
+}
+
+@media screen and (width <= 640px) {
+  .btn-box {
+    width: 40px;
+  }
+}
 </style>
diff --git a/frontend/new-web/src/components/core/layouts/art-header-bar/widget/ArtUserMenu.vue b/frontend/new-web/src/components/core/layouts/art-header-bar/widget/ArtUserMenu.vue
index c8c58326..549ac4f1 100644
--- a/frontend/new-web/src/components/core/layouts/art-header-bar/widget/ArtUserMenu.vue
+++ b/frontend/new-web/src/components/core/layouts/art-header-bar/widget/ArtUserMenu.vue
@@ -26,32 +26,32 @@
             src="@imgs/user/avatar.webp"
           />
           <div class="w-[calc(100%-60px)] h-full">
-            <span class="block text-sm font-medium text-g-800 truncate">{{
-              userInfo.userName
-            }}</span>
+            <span class="block text-sm font-medium text-g-800 truncate">
+              {{ userInfo.username }}
+            </span>
             <span class="block mt-0.5 text-xs text-g-500 truncate">{{ userInfo.email }}</span>
           </div>
         </div>
         <ul class="py-4 mt-3 border-t border-g-300/80">
           <li class="btn-item" @click="goPage('/system/user-center')">
             <ArtSvgIcon icon="ri:user-3-line" />
-            <span>{{ $t('topBar.user.userCenter') }}</span>
+            <span>{{ $t("topBar.user.userCenter") }}</span>
           </li>
           <li class="btn-item" @click="toDocs()">
             <ArtSvgIcon icon="ri:book-2-line" />
-            <span>{{ $t('topBar.user.docs') }}</span>
+            <span>{{ $t("topBar.user.docs") }}</span>
           </li>
           <li class="btn-item" @click="toGithub()">
             <ArtSvgIcon icon="ri:github-line" />
-            <span>{{ $t('topBar.user.github') }}</span>
+            <span>{{ $t("topBar.user.github") }}</span>
           </li>
           <li class="btn-item" @click="lockScreen()">
             <ArtSvgIcon icon="ri:lock-line" />
-            <span>{{ $t('topBar.user.lockScreen') }}</span>
+            <span>{{ $t("topBar.user.lockScreen") }}</span>
           </li>
           <div class="w-full h-px my-2 bg-g-300/80"></div>
-          <div class="log-out c-p" @click="loginOut">
-            {{ $t('topBar.user.logout') }}
+          <div class="log-out c-p" @click="handleLogout">
+            {{ $t("topBar.user.logout") }}
           </div>
         </ul>
       </div>
@@ -60,100 +60,100 @@
 </template>
 
 <script setup lang="ts">
-  import { useI18n } from 'vue-i18n'
-  import { useRouter } from 'vue-router'
-  import { ElMessageBox } from 'element-plus'
-  import { useUserStore } from '@/store/modules/user'
-  import { WEB_LINKS } from '@/utils/constants'
-  import { mittBus } from '@/utils/sys'
+import { useI18n } from "vue-i18n";
+import { useRouter } from "vue-router";
+import { ElMessageBox } from "element-plus";
+import { useUserStore } from "@/store/modules/user.store";
+import { WEB_LINKS } from "@/utils/constants";
+import { mittBus } from "@/utils/sys";
 
-  defineOptions({ name: 'ArtUserMenu' })
+defineOptions({ name: "ArtUserMenu" });
 
-  const router = useRouter()
-  const { t } = useI18n()
-  const userStore = useUserStore()
+const router = useRouter();
+const { t } = useI18n();
+const userStore = useUserStore();
 
-  const { getUserInfo: userInfo } = storeToRefs(userStore)
-  const userMenuPopover = ref()
+const { info: userInfo } = storeToRefs(userStore);
+const userMenuPopover = ref();
 
-  /**
-   * 页面跳转
-   * @param {string} path - 目标路径
-   */
-  const goPage = (path: string): void => {
-    router.push(path)
-  }
+/**
+ * 页面跳转
+ * @param {string} path - 目标路径
+ */
+const goPage = (path: string): void => {
+  router.push(path);
+};
 
-  /**
-   * 打开文档页面
-   */
-  const toDocs = (): void => {
-    window.open(WEB_LINKS.DOCS)
-  }
+/**
+ * 打开文档页面
+ */
+const toDocs = (): void => {
+  window.open(WEB_LINKS.DOCS);
+};
 
-  /**
-   * 打开 GitHub 页面
-   */
-  const toGithub = (): void => {
-    window.open(WEB_LINKS.GITHUB)
-  }
+/**
+ * 打开 GitHub 页面
+ */
+const toGithub = (): void => {
+  window.open(WEB_LINKS.GITHUB);
+};
 
-  /**
-   * 打开锁屏功能
-   */
-  const lockScreen = (): void => {
-    mittBus.emit('openLockScreen')
-  }
+/**
+ * 打开锁屏功能
+ */
+const lockScreen = (): void => {
+  mittBus.emit("openLockScreen");
+};
 
-  /**
-   * 用户登出确认
-   */
-  const loginOut = (): void => {
-    closeUserMenu()
-    setTimeout(() => {
-      ElMessageBox.confirm(t('common.logOutTips'), t('common.tips'), {
-        confirmButtonText: t('common.confirm'),
-        cancelButtonText: t('common.cancel'),
-        customClass: 'login-out-dialog'
-      }).then(() => {
-        userStore.logOut()
-      })
-    }, 200)
-  }
+/**
+ * 用户登出确认
+ */
+const handleLogout = (): void => {
+  closeUserMenu();
+  setTimeout(() => {
+    ElMessageBox.confirm(t("common.logoutTips"), t("common.tips"), {
+      confirmButtonText: t("common.confirm"),
+      cancelButtonText: t("common.cancel"),
+      customClass: "login-out-dialog",
+    }).then(() => {
+      userStore.logout();
+    });
+  }, 200);
+};
 
-  /**
-   * 关闭用户菜单弹出层
-   */
-  const closeUserMenu = (): void => {
-    setTimeout(() => {
-      userMenuPopover.value.hide()
-    }, 100)
-  }
+/**
+ * 关闭用户菜单弹出层
+ */
+const closeUserMenu = (): void => {
+  setTimeout(() => {
+    userMenuPopover.value.hide();
+  }, 100);
+};
 </script>
 
 <style scoped>
-  @reference '@styles/core/tailwind.css';
+@reference '@styles/core/tailwind.css';
 
-  @layer components {
-    .btn-item {
-      @apply flex items-center p-2 mb-3 select-none rounded-md cursor-pointer last:mb-0;
+@layer components {
+  .btn-item {
+    @apply flex items-center p-2 mb-3 select-none rounded-md cursor-pointer last:mb-0;
 
-      span {
-        @apply text-sm;
-      }
+    span {
+      @apply text-sm;
+    }
 
-      .art-svg-icon {
-        @apply mr-2 text-base;
-      }
+    .art-svg-icon {
+      @apply mr-2 text-base;
+    }
 
-      &:hover {
-        background-color: var(--art-gray-200);
-      }
+    &:hover {
+      background-color: var(--art-gray-200);
     }
   }
+}
 
-  .log-out {
-    @apply py-1.5
+.log-out {
+  @apply py-1.5
     mt-5
     text-xs
     text-center
@@ -163,5 +163,5 @@
     transition-all
     duration-200
     hover:shadow-xl;
-  }
+}
 </style>
diff --git a/frontend/new-web/src/components/core/layouts/art-menus/art-horizontal-menu/index.vue b/frontend/new-web/src/components/core/layouts/art-menus/art-horizontal-menu/index.vue
index edd14731..71e5cd77 100644
--- a/frontend/new-web/src/components/core/layouts/art-menus/art-horizontal-menu/index.vue
+++ b/frontend/new-web/src/components/core/layouts/art-menus/art-horizontal-menu/index.vue
@@ -25,86 +25,86 @@
 </template>
 
 <script setup lang="ts">
-  import type { AppRouteRecord } from '@/types/router'
-  import HorizontalSubmenu from './widget/HorizontalSubmenu.vue'
-  import { useSettingStore } from '@/store/modules/setting'
+import type { AppRouteRecord } from "@/types/router";
+import HorizontalSubmenu from "./widget/HorizontalSubmenu.vue";
+import { useSettingsStore } from "@/store/modules/setting.store";
 
-  defineOptions({ name: 'ArtHorizontalMenu' })
+defineOptions({ name: "ArtHorizontalMenu" });
 
-  const settingStore = useSettingStore()
-  const { isDark } = storeToRefs(settingStore)
+const settingStore = useSettingsStore();
+const { isDark } = storeToRefs(settingStore);
 
-  interface Props {
-    /** 菜单列表数据 */
-    list: AppRouteRecord[]
-  }
+interface Props {
+  /** 菜单列表数据 */
+  list: AppRouteRecord[];
+}
 
-  const route = useRoute()
+const route = useRoute();
 
-  const props = withDefaults(defineProps<Props>(), {
-    list: () => []
-  })
+const props = withDefaults(defineProps<Props>(), {
+  list: () => [],
+});
 
-  /**
-   * 过滤后的菜单项列表
-   * 只显示未隐藏的菜单项
-   */
-  const filteredMenuItems = computed(() => {
-    return filterMenuItems(props.list)
-  })
+/**
+ * 过滤后的菜单项列表
+ * 只显示未隐藏的菜单项
+ */
+const filteredMenuItems = computed(() => {
+  return filterMenuItems(props.list);
+});
 
-  /**
-   * 当前激活的路由路径
-   * 用于菜单高亮显示
-   */
-  const routerPath = computed(() => String(route.meta.activePath || route.path))
+/**
+ * 当前激活的路由路径
+ * 用于菜单高亮显示
+ */
+const routerPath = computed(() => String(route.meta.activePath || route.path));
 
-  /**
-   * 递归过滤菜单项，移除隐藏的菜单
-   * 如果一个父菜单的所有子菜单都被隐藏，则父菜单也会被隐藏
-   * @param items 菜单项数组
-   * @returns 过滤后的菜单项数组
-   */
-  const filterMenuItems = (items: AppRouteRecord[]): AppRouteRecord[] => {
-    return items
-      .filter((item) => {
-        // 如果当前项被隐藏，直接过滤掉
-        if (item.meta.isHide) {
-          return false
-        }
+/**
+ * 递归过滤菜单项，移除隐藏的菜单
+ * 如果一个父菜单的所有子菜单都被隐藏，则父菜单也会被隐藏
+ * @param items 菜单项数组
+ * @returns 过滤后的菜单项数组
+ */
+const filterMenuItems = (items: AppRouteRecord[]): AppRouteRecord[] => {
+  return items
+    .filter((item) => {
+      // 如果当前项被隐藏，直接过滤掉
+      if (item.meta.isHide) {
+        return false;
+      }
 
-        // 如果有子菜单，递归过滤子菜单
-        if (item.children && item.children.length > 0) {
-          const filteredChildren = filterMenuItems(item.children)
-          // 如果所有子菜单都被过滤掉了，则隐藏父菜单
-          return filteredChildren.length > 0
-        }
+      // 如果有子菜单，递归过滤子菜单
+      if (item.children && item.children.length > 0) {
+        const filteredChildren = filterMenuItems(item.children);
+        // 如果所有子菜单都被过滤掉了，则隐藏父菜单
+        return filteredChildren.length > 0;
+      }
 
-        // 叶子节点且未被隐藏，保留
-        return true
-      })
-      .map((item) => ({
-        ...item,
-        children: item.children ? filterMenuItems(item.children) : undefined
-      }))
-  }
+      // 叶子节点且未被隐藏，保留
+      return true;
+    })
+    .map((item) => ({
+      ...item,
+      children: item.children ? filterMenuItems(item.children) : undefined,
+    }));
+};
 </script>
 
 <style scoped>
-  /* Remove el-menu bottom border */
-  :deep(.el-menu) {
-    border-bottom: none !important;
-  }
+/* Remove el-menu bottom border */
+:deep(.el-menu) {
+  border-bottom: none !important;
+}
 
-  /* Remove default styles for first-level menu items */
-  :deep(.el-menu-item[tabindex='0']) {
-    background-color: transparent !important;
-    border: none !important;
-  }
+/* Remove default styles for first-level menu items */
+:deep(.el-menu-item[tabindex="0"]) {
+  background-color: transparent !important;
+  border: none !important;
+}
 
-  /* Remove bottom border from submenu titles */
-  :deep(.el-menu--horizontal .el-sub-menu__title) {
-    padding: 0 30px 0 10px !important;
-    border: 0 !important;
-  }
+/* Remove bottom border from submenu titles */
+:deep(.el-menu--horizontal .el-sub-menu__title) {
+  padding: 0 30px 0 10px !important;
+  border: 0 !important;
+}
 </style>
diff --git a/frontend/new-web/src/components/core/layouts/art-menus/art-horizontal-menu/widget/HorizontalSubmenu.vue b/frontend/new-web/src/components/core/layouts/art-menus/art-horizontal-menu/widget/HorizontalSubmenu.vue
index 0f3a8177..2857b18b 100644
--- a/frontend/new-web/src/components/core/layouts/art-menus/art-horizontal-menu/widget/HorizontalSubmenu.vue
+++ b/frontend/new-web/src/components/core/layouts/art-menus/art-horizontal-menu/widget/HorizontalSubmenu.vue
@@ -1,7 +1,7 @@
 <template>
   <ElSubMenu v-if="hasChildren" :index="item.path || item.meta.title" class="!p-0">
     <template #title>
-      <ArtSvgIcon :icon="item.meta.icon" :color="theme?.iconColor" class="mr-1 text-lg" />
+      <MenuRouteIcon :icon="item.meta.icon" :color="theme?.iconColor" class="mr-1 text-lg" />
       <span class="text-md">{{ formatMenuTitle(item.meta.title) }}</span>
       <div v-if="item.meta.showBadge" class="art-badge art-badge-horizontal" />
       <div v-if="item.meta.showTextBadge" class="art-text-badge">
@@ -26,7 +26,7 @@
     :index="item.path || item.meta.title"
     @click="goPage(item)"
   >
-    <ArtSvgIcon
+    <MenuRouteIcon
       :icon="item.meta.icon"
       :color="theme?.iconColor"
       class="mr-1 text-lg"
@@ -45,62 +45,65 @@
 </template>
 
 <script lang="ts" setup>
-  import { computed, type PropType } from 'vue'
-  import { AppRouteRecord } from '@/types/router'
-  import { handleMenuJump } from '@/utils/navigation'
-  import { formatMenuTitle } from '@/utils/router'
+import { computed, type PropType } from "vue";
+import { AppRouteRecord } from "@/types/router";
+import { handleMenuJump } from "@/utils/navigation";
+import { formatMenuTitle } from "@/utils/navigation/router";
 
-  const props = defineProps({
-    item: {
-      type: Object as PropType<AppRouteRecord>,
-      required: true
-    },
-    theme: {
-      type: Object,
-      default: () => ({})
-    },
-    isMobile: Boolean,
-    level: {
-      type: Number,
-      default: 0
-    }
-  })
+const props = defineProps({
+  item: {
+    type: Object as PropType<AppRouteRecord>,
+    required: true,
+  },
+  theme: {
+    type: Object,
+    default: () => ({}),
+  },
+  isMobile: Boolean,
+  level: {
+    type: Number,
+    default: 0,
+  },
+});
 
-  const emit = defineEmits(['close'])
+const emit = defineEmits(["close"]);
 
-  // 过滤后的子菜单项（不包含隐藏的）
-  const filteredChildren = computed(() => {
-    return props.item.children?.filter((child) => !child.meta.isHide) || []
-  })
+// 过滤后的子菜单项（不包含隐藏的）
+const filteredChildren = computed(() => {
+  return props.item.children?.filter((child) => !child.meta.isHide) || [];
+});
 
-  // 父菜单如果本身就是页面，则即使没有可见子菜单也应该保留为菜单项。
-  const isNavigableRoute = computed(() => {
-    return !!(
-      !props.item.meta.isHide &&
-      ((props.item.path && props.item.path.trim()) ||
-        props.item.meta.link ||
-        props.item.meta.isIframe === true) &&
-      (props.item.component || props.item.meta.link || props.item.meta.isIframe === true)
-    )
-  })
+// 父菜单如果本身就是页面，则即使没有可见子菜单也应该保留为菜单项。
+const isNavigableRoute = computed(() => {
+  return !!(
+    !props.item.meta.isHide &&
+    ((props.item.path && props.item.path.trim()) ||
+      props.item.meta.link ||
+      props.item.meta.isIframe === true) &&
+    (props.item.component ||
+      props.item.meta.link ||
+      props.item.meta.isIframe === true ||
+      props.item.meta.shellRoute === true)
+  );
+});
 
-  // 计算当前项是否有可见的子菜单
-  const hasChildren = computed(() => {
-    return filteredChildren.value.length > 0
-  })
+// 计算当前项是否有可见的子菜单
+const hasChildren = computed(() => {
+  return filteredChildren.value.length > 0;
+});
 
-  const goPage = (item: AppRouteRecord) => {
-    closeMenu()
-    handleMenuJump(item)
-  }
+const goPage = (item: AppRouteRecord) => {
+  closeMenu();
+  handleMenuJump(item);
+};
 
-  const closeMenu = () => {
-    emit('close')
-  }
+const closeMenu = () => {
+  emit("close");
+};
 </script>
 
 <style scoped>
-  :deep(.el-sub-menu__title .el-sub-menu__icon-arrow) {
-    right: 10px !important;
-  }
+:deep(.el-sub-menu__title .el-sub-menu__icon-arrow) {
+  right: 10px !important;
+}
 </style>
diff --git a/frontend/new-web/src/components/core/layouts/art-menus/art-mixed-menu/index.vue b/frontend/new-web/src/components/core/layouts/art-menus/art-mixed-menu/index.vue
index 4e98246e..b4c3a365 100644
--- a/frontend/new-web/src/components/core/layouts/art-menus/art-mixed-menu/index.vue
+++ b/frontend/new-web/src/components/core/layouts/art-menus/art-mixed-menu/index.vue
@@ -22,11 +22,11 @@
             v-if="!item.meta.isHide"
             class="menu-item relative flex-shrink-0 h-10 px-3 text-sm flex-c c-p hover:text-theme"
             :class="{
-              'menu-item-active text-theme': item.isActive
+              'menu-item-active text-theme': item.isActive,
             }"
             @click="handleMenuJump(item, true)"
           >
-            <ArtSvgIcon
+            <MenuRouteIcon
               :icon="item.meta.icon"
               class="text-lg text-g-700 dark:text-g-800 mr-1"
               :class="item.isActive && '!text-theme'"
@@ -53,182 +53,182 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, computed, onMounted, nextTick } from 'vue'
-  import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
-  import { useThrottleFn } from '@vueuse/core'
-  import { formatMenuTitle } from '@/utils/router'
-  import { handleMenuJump } from '@/utils/navigation'
-  import type { AppRouteRecord } from '@/types/router'
+import { ref, computed, onMounted, nextTick } from "vue";
+import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
+import { useThrottleFn } from "@vueuse/core";
+import { formatMenuTitle } from "@/utils/navigation/router";
+import { handleMenuJump } from "@/utils/navigation";
+import type { AppRouteRecord } from "@/types/router";
 
-  defineOptions({ name: 'ArtMixedMenu' })
+defineOptions({ name: "ArtMixedMenu" });
 
-  interface Props {
-    /** 菜单列表数据 */
-    list: AppRouteRecord[]
+interface Props {
+  /** 菜单列表数据 */
+  list: AppRouteRecord[];
+}
+
+interface ProcessedMenuItem extends AppRouteRecord {
+  isActive: boolean;
+  formattedTitle: string;
+}
+
+type ScrollDirection = "left" | "right";
+
+const route = useRoute();
+
+const props = withDefaults(defineProps<Props>(), {
+  list: () => [],
+});
+
+const scrollbarRef = ref<any>();
+const showLeftArrow = ref(false);
+const showRightArrow = ref(false);
+
+/** 滚动配置 */
+const SCROLL_CONFIG = {
+  /** 点击按钮时的滚动距离 */
+  BUTTON_SCROLL_DISTANCE: 200,
+  /** 鼠标滚轮快速滚动时的步长 */
+  WHEEL_FAST_STEP: 35,
+  /** 鼠标滚轮慢速滚动时的步长 */
+  WHEEL_SLOW_STEP: 30,
+  /** 区分快慢滚动的阈值 */
+  WHEEL_FAST_THRESHOLD: 100,
+};
+
+/**
+ * 获取当前激活路径
+ * 使用computed缓存，避免重复计算
+ */
+const currentActivePath = computed(() => {
+  return String(route.meta.activePath || route.path);
+});
+
+/**
+ * 判断菜单项是否为激活状态
+ * 递归检查子菜单中是否包含当前路径
+ * @param item 菜单项数据
+ * @returns 是否为激活状态
+ */
+const isMenuItemActive = (item: AppRouteRecord): boolean => {
+  const activePath = currentActivePath.value;
+
+  // 如果有子菜单，递归检查子菜单
+  if (item.children?.length) {
+    return item.children.some((child) => {
+      if (child.children?.length) {
+        return isMenuItemActive(child);
+      }
+      return child.path === activePath;
+    });
   }
 
-  interface ProcessedMenuItem extends AppRouteRecord {
-    isActive: boolean
-    formattedTitle: string
-  }
+  // 直接比较路径
+  return item.path === activePath;
+};
 
-  type ScrollDirection = 'left' | 'right'
+/**
+ * 预处理菜单列表
+ * 缓存每个菜单项的激活状态和格式化标题
+ */
+const processedMenuList = computed<ProcessedMenuItem[]>(() => {
+  return props.list.map((item) => ({
+    ...item,
+    isActive: isMenuItemActive(item),
+    formattedTitle: formatMenuTitle(item.meta.title),
+  }));
+});
 
-  const route = useRoute()
+/**
+ * 处理滚动事件的核心逻辑
+ * 根据滚动位置显示/隐藏滚动按钮
+ */
+const handleScrollCore = (): void => {
+  if (!scrollbarRef.value?.wrapRef) return;
 
-  const props = withDefaults(defineProps<Props>(), {
-    list: () => []
-  })
+  const { scrollLeft, scrollWidth, clientWidth } = scrollbarRef.value.wrapRef;
 
-  const scrollbarRef = ref<any>()
-  const showLeftArrow = ref(false)
-  const showRightArrow = ref(false)
+  // 判断是否显示左侧滚动按钮
+  showLeftArrow.value = scrollLeft > 0;
 
-  /** 滚动配置 */
-  const SCROLL_CONFIG = {
-    /** 点击按钮时的滚动距离 */
-    BUTTON_SCROLL_DISTANCE: 200,
-    /** 鼠标滚轮快速滚动时的步长 */
-    WHEEL_FAST_STEP: 35,
-    /** 鼠标滚轮慢速滚动时的步长 */
-    WHEEL_SLOW_STEP: 30,
-    /** 区分快慢滚动的阈值 */
-    WHEEL_FAST_THRESHOLD: 100
-  }
+  // 判断是否显示右侧滚动按钮
+  showRightArrow.value = scrollLeft + clientWidth < scrollWidth;
+};
 
-  /**
-   * 获取当前激活路径
-   * 使用computed缓存，避免重复计算
-   */
-  const currentActivePath = computed(() => {
-    return String(route.meta.activePath || route.path)
-  })
+/**
+ * 节流后的滚动事件处理函数
+ * 调整节流间隔为16ms，约等于60fps
+ */
+const handleScroll = useThrottleFn(handleScrollCore, 16);
 
-  /**
-   * 判断菜单项是否为激活状态
-   * 递归检查子菜单中是否包含当前路径
-   * @param item 菜单项数据
-   * @returns 是否为激活状态
-   */
-  const isMenuItemActive = (item: AppRouteRecord): boolean => {
-    const activePath = currentActivePath.value
+/**
+ * 滚动菜单容器
+ * @param direction 滚动方向，left 或 right
+ */
+const scroll = (direction: ScrollDirection): void => {
+  if (!scrollbarRef.value?.wrapRef) return;
 
-    // 如果有子菜单，递归检查子菜单
-    if (item.children?.length) {
-      return item.children.some((child) => {
-        if (child.children?.length) {
-          return isMenuItemActive(child)
-        }
-        return child.path === activePath
-      })
-    }
+  const currentScroll = scrollbarRef.value.wrapRef.scrollLeft;
+  const targetScroll =
+    direction === "left"
+      ? currentScroll - SCROLL_CONFIG.BUTTON_SCROLL_DISTANCE
+      : currentScroll + SCROLL_CONFIG.BUTTON_SCROLL_DISTANCE;
 
-    // 直接比较路径
-    return item.path === activePath
-  }
+  // 平滑滚动到目标位置
+  scrollbarRef.value.wrapRef.scrollTo({
+    left: targetScroll,
+    behavior: "smooth",
+  });
+};
 
-  /**
-   * 预处理菜单列表
-   * 缓存每个菜单项的激活状态和格式化标题
-   */
-  const processedMenuList = computed<ProcessedMenuItem[]>(() => {
-    return props.list.map((item) => ({
-      ...item,
-      isActive: isMenuItemActive(item),
-      formattedTitle: formatMenuTitle(item.meta.title)
-    }))
-  })
+/**
+ * 处理鼠标滚轮事件
+ * 优化滚轮响应性能
+ * @param event 滚轮事件
+ */
+const handleWheel = (event: WheelEvent): void => {
+  // 立即阻止默认滚动行为和事件冒泡，避免页面滚动
+  event.preventDefault();
+  event.stopPropagation();
 
-  /**
-   * 处理滚动事件的核心逻辑
-   * 根据滚动位置显示/隐藏滚动按钮
-   */
-  const handleScrollCore = (): void => {
-    if (!scrollbarRef.value?.wrapRef) return
+  // 直接处理滚动，提升响应性
+  if (!scrollbarRef.value?.wrapRef) return;
 
-    const { scrollLeft, scrollWidth, clientWidth } = scrollbarRef.value.wrapRef
+  const { wrapRef } = scrollbarRef.value;
+  const { scrollLeft, scrollWidth, clientWidth } = wrapRef;
 
-    // 判断是否显示左侧滚动按钮
-    showLeftArrow.value = scrollLeft > 0
+  // 使用更小的滚动步长，让滚动更平滑
+  const scrollStep =
+    Math.abs(event.deltaY) > SCROLL_CONFIG.WHEEL_FAST_THRESHOLD
+      ? SCROLL_CONFIG.WHEEL_FAST_STEP
+      : SCROLL_CONFIG.WHEEL_SLOW_STEP;
+  const scrollDelta = event.deltaY > 0 ? scrollStep : -scrollStep;
+  const targetScroll = Math.max(0, Math.min(scrollLeft + scrollDelta, scrollWidth - clientWidth));
 
-    // 判断是否显示右侧滚动按钮
-    showRightArrow.value = scrollLeft + clientWidth < scrollWidth
-  }
+  // 立即滚动，无动画
+  wrapRef.scrollLeft = targetScroll;
 
-  /**
-   * 节流后的滚动事件处理函数
-   * 调整节流间隔为16ms，约等于60fps
-   */
-  const handleScroll = useThrottleFn(handleScrollCore, 16)
+  // 更新滚动按钮状态
+  handleScrollCore();
+};
 
-  /**
-   * 滚动菜单容器
-   * @param direction 滚动方向，left 或 right
-   */
-  const scroll = (direction: ScrollDirection): void => {
-    if (!scrollbarRef.value?.wrapRef) return
+/**
+ * 初始化滚动状态
+ */
+const initScrollState = (): void => {
+  nextTick(() => {
+    handleScrollCore();
+  });
+};
 
-    const currentScroll = scrollbarRef.value.wrapRef.scrollLeft
-    const targetScroll =
-      direction === 'left'
-        ? currentScroll - SCROLL_CONFIG.BUTTON_SCROLL_DISTANCE
-        : currentScroll + SCROLL_CONFIG.BUTTON_SCROLL_DISTANCE
-
-    // 平滑滚动到目标位置
-    scrollbarRef.value.wrapRef.scrollTo({
-      left: targetScroll,
-      behavior: 'smooth'
-    })
-  }
-
-  /**
-   * 处理鼠标滚轮事件
-   * 优化滚轮响应性能
-   * @param event 滚轮事件
-   */
-  const handleWheel = (event: WheelEvent): void => {
-    // 立即阻止默认滚动行为和事件冒泡，避免页面滚动
-    event.preventDefault()
-    event.stopPropagation()
-
-    // 直接处理滚动，提升响应性
-    if (!scrollbarRef.value?.wrapRef) return
-
-    const { wrapRef } = scrollbarRef.value
-    const { scrollLeft, scrollWidth, clientWidth } = wrapRef
-
-    // 使用更小的滚动步长，让滚动更平滑
-    const scrollStep =
-      Math.abs(event.deltaY) > SCROLL_CONFIG.WHEEL_FAST_THRESHOLD
-        ? SCROLL_CONFIG.WHEEL_FAST_STEP
-        : SCROLL_CONFIG.WHEEL_SLOW_STEP
-    const scrollDelta = event.deltaY > 0 ? scrollStep : -scrollStep
-    const targetScroll = Math.max(0, Math.min(scrollLeft + scrollDelta, scrollWidth - clientWidth))
-
-    // 立即滚动，无动画
-    wrapRef.scrollLeft = targetScroll
-
-    // 更新滚动按钮状态
-    handleScrollCore()
-  }
-
-  /**
-   * 初始化滚动状态
-   */
-  const initScrollState = (): void => {
-    nextTick(() => {
-      handleScrollCore()
-    })
-  }
-
-  onMounted(initScrollState)
+onMounted(initScrollState);
 </script>
 
 <style scoped>
-  @reference '@styles/core/tailwind.css';
+@reference '@styles/core/tailwind.css';
 
-  .button-arrow {
-    @apply absolute 
+.button-arrow {
+  @apply absolute 
     top-1/2
     z-2 
     flex
@@ -243,37 +243,37 @@
     -translate-y-1/2 
     hover:text-g-900 
     hover:bg-g-200;
-  }
+}
 </style>
 
 <style scoped>
-  :deep(.el-scrollbar__bar.is-horizontal) {
-    bottom: 5px;
-    display: none;
-    height: 2px;
-  }
+:deep(.el-scrollbar__bar.is-horizontal) {
+  bottom: 5px;
+  display: none;
+  height: 2px;
+}
 
+:deep(.scrollbar-wrapper) {
+  flex: 1;
+  min-width: 0;
+  margin: 0 50px 0 30px;
+}
+
+.menu-item-active::after {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 40px;
+  height: 2px;
+  margin: auto;
+  content: "";
+  background-color: var(--theme-color);
+}
+
+@media (width <= 1440px) {
   :deep(.scrollbar-wrapper) {
-    flex: 1;
-    min-width: 0;
-    margin: 0 50px 0 30px;
-  }
-
-  .menu-item-active::after {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    width: 40px;
-    height: 2px;
-    margin: auto;
-    content: '';
-    background-color: var(--theme-color);
-  }
-
-  @media (width <= 1440px) {
-    :deep(.scrollbar-wrapper) {
-      margin: 0 45px;
-    }
+    margin: 0 45px;
   }
+}
 </style>
diff --git a/frontend/new-web/src/components/core/layouts/art-menus/art-sidebar-menu/index.vue b/frontend/new-web/src/components/core/layouts/art-menus/art-sidebar-menu/index.vue
index 6bf46fec..d3c47297 100755
--- a/frontend/new-web/src/components/core/layouts/art-menus/art-sidebar-menu/index.vue
+++ b/frontend/new-web/src/components/core/layouts/art-menus/art-sidebar-menu/index.vue
@@ -29,17 +29,17 @@
                 :class="{
                   'is-active': menu.meta.isFirstLevel
                     ? menu.path === route.path
-                    : menu.path === firstLevelMenuPath
+                    : menu.path === firstLevelMenuPath,
                 }"
                 :style="{
-                  height: dualMenuShowText ? '60px' : '46px'
+                  height: dualMenuShowText ? '60px' : '46px',
                 }"
               >
-                <ArtSvgIcon
+                <MenuRouteIcon
                   class="menu-icon text-g-700 dark:text-g-800"
                   :icon="menu.meta.icon"
                   :style="{
-                    marginBottom: dualMenuShowText ? '5px' : '0'
+                    marginBottom: dualMenuShowText ? '5px' : '0',
                   }"
                 />
                 <span v-if="dualMenuShowText" class="text-md text-g-700">
@@ -71,7 +71,7 @@
         class="header"
         @click="navigateToHome"
         :style="{
-          background: getMenuTheme.background
+          background: getMenuTheme.background,
         }"
       >
         <ArtLogo v-if="!isDualMenu" class="logo" />
@@ -80,7 +80,7 @@
           :class="{ 'is-dual-menu-name': isDualMenu }"
           :style="{
             color: getMenuTheme.systemNameColor,
-            opacity: !menuOpen ? 0 : 1
+            opacity: !menuOpen ? 0 : 1,
           }"
         >
           {{ AppConfig.systemInfo.name }}
@@ -121,7 +121,7 @@
         @click="toggleMenuVisibility"
         :style="{
           opacity: !menuOpen ? 0 : 1,
-          transform: showMobileModal ? 'scale(1)' : 'scale(0)'
+          transform: showMobileModal ? 'scale(1)' : 'scale(0)',
         }"
       />
     </div>
@@ -129,226 +129,231 @@
 </template>
 
 <script setup lang="ts">
-  import AppConfig from '@/config'
-  import { useSettingStore } from '@/store/modules/setting'
-  import { MenuTypeEnum, MenuWidth } from '@/enums/appEnum'
-  import { useMenuStore } from '@/store/modules/menu'
-  import { isIframe } from '@/utils/navigation'
-  import { handleMenuJump } from '@/utils/navigation'
-  import SidebarSubmenu from './widget/SidebarSubmenu.vue'
-  import { useCommon } from '@/hooks/core/useCommon'
-  import { useWindowSize, useTimeoutFn } from '@vueuse/core'
+import AppConfig from "@/config";
+import { useSettingsStore } from "@/store/modules/setting.store";
+import { MenuTypeEnum, MenuWidth } from "@/enums/appEnum";
+import { useMenuStore } from "@/store/modules/menu.store";
+import { isIframe } from "@/utils/navigation";
+import { handleMenuJump } from "@/utils/navigation";
+import SidebarSubmenu from "./widget/SidebarSubmenu.vue";
+import { useCommon } from "@/hooks/core/useCommon";
+import { useWindowSize, useTimeoutFn } from "@vueuse/core";
 
-  defineOptions({ name: 'ArtSidebarMenu' })
+defineOptions({ name: "ArtSidebarMenu" });
 
-  const MOBILE_BREAKPOINT = 800
-  const ANIMATION_DELAY = 350
-  const MENU_CLOSE_WIDTH = MenuWidth.CLOSE
+const MOBILE_BREAKPOINT = 800;
+const ANIMATION_DELAY = 350;
+const MENU_CLOSE_WIDTH = MenuWidth.CLOSE;
 
-  const route = useRoute()
-  const router = useRouter()
-  const settingStore = useSettingStore()
+const route = useRoute();
+const router = useRouter();
+const settingStore = useSettingsStore();
 
-  const { getMenuOpenWidth, menuType, uniqueOpened, dualMenuShowText, menuOpen, getMenuTheme } =
-    storeToRefs(settingStore)
+const { getMenuOpenWidth, menuType, uniqueOpened, dualMenuShowText, menuOpen, getMenuTheme } =
+  storeToRefs(settingStore);
 
-  // 组件内部状态
-  const defaultOpenedMenus = ref<string[]>([])
-  const isMobileMode = ref(false)
-  const showMobileModal = ref(false)
+// 组件内部状态
+const defaultOpenedMenus = ref<string[]>([]);
+const isMobileMode = ref(false);
+const showMobileModal = ref(false);
 
-  // 使用 VueUse 的窗口尺寸监听
-  const { width } = useWindowSize()
+// 使用 VueUse 的窗口尺寸监听
+const { width } = useWindowSize();
 
-  // 菜单宽度相关
-  const menuopenwidth = computed(() => getMenuOpenWidth.value)
-  const menuclosewidth = computed(() => MENU_CLOSE_WIDTH)
+// 菜单宽度相关
+const menuopenwidth = computed(() => getMenuOpenWidth.value);
+const menuclosewidth = computed(() => MENU_CLOSE_WIDTH);
 
-  // 菜单类型判断
-  const isTopLeftMenu = computed(() => menuType.value === MenuTypeEnum.TOP_LEFT)
-  const showLeftMenu = computed(
-    () => menuType.value === MenuTypeEnum.LEFT || menuType.value === MenuTypeEnum.TOP_LEFT
-  )
-  const isDualMenu = computed(() => menuType.value === MenuTypeEnum.DUAL_MENU)
+// 菜单类型判断
+const isTopLeftMenu = computed(() => menuType.value === MenuTypeEnum.TOP_LEFT);
+const showLeftMenu = computed(
+  () => menuType.value === MenuTypeEnum.LEFT || menuType.value === MenuTypeEnum.TOP_LEFT
+);
+const isDualMenu = computed(() => menuType.value === MenuTypeEnum.DUAL_MENU);
 
-  // 移动端屏幕判断（使用 computed 避免重复计算）
-  const isMobileScreen = computed(() => width.value < MOBILE_BREAKPOINT)
+// 移动端屏幕判断（使用 computed 避免重复计算）
+const isMobileScreen = computed(() => width.value < MOBILE_BREAKPOINT);
 
-  // 路由相关
-  const firstLevelMenuPath = computed(() => route.matched[0]?.path)
-  const routerPath = computed(() => String(route.meta.activePath || route.path))
+// 路由相关
+const firstLevelMenuPath = computed(() => route.matched[0]?.path);
+const routerPath = computed(() => String(route.meta.activePath || route.path));
 
-  // 菜单数据
-  const firstLevelMenus = computed(() => {
-    return useMenuStore().menuList.filter((menu) => !menu.meta.isHide)
-  })
+// 菜单数据
+const firstLevelMenus = computed(() => {
+  return useMenuStore().menuList.filter((menu) => !menu.meta.isHide);
+});
 
-  const menuList = computed(() => {
-    const menuStore = useMenuStore()
-    const allMenus = menuStore.menuList
+const menuList = computed(() => {
+  const menuStore = useMenuStore();
+  const allMenus = menuStore.menuList;
 
-    // 如果不是顶部左侧菜单或双列菜单，直接返回完整菜单列表
-    if (!isTopLeftMenu.value && !isDualMenu.value) {
-      return allMenus
-    }
+  // 如果不是顶部左侧菜单或双列菜单，直接返回完整菜单列表
+  if (!isTopLeftMenu.value && !isDualMenu.value) {
+    return allMenus;
+  }
 
-    // 处理 iframe 路径
-    if (isIframe(route.path)) {
-      return findIframeMenuList(route.path, allMenus)
-    }
+  // 处理 iframe 路径
+  if (isIframe(route.path)) {
+    return findIframeMenuList(route.path, allMenus);
+  }
 
-    // 处理一级菜单
-    if (route.meta.isFirstLevel) {
-      return []
-    }
+  // 处理一级菜单
+  if (route.meta.isFirstLevel) {
+    return [];
+  }
 
-    // 返回当前顶级路径对应的子菜单
-    const currentTopPath = `/${route.path.split('/')[1]}`
-    const currentMenu = allMenus.find((menu) => menu.path === currentTopPath)
-    return currentMenu?.children ?? []
-  })
+  // 返回当前顶级路径对应的子菜单
+  const currentTopPath = `/${route.path.split("/")[1]}`;
+  let currentMenu = allMenus.find((menu) => menu.path === currentTopPath);
+  if (!currentMenu && allMenus.length > 0) {
+    // 静态工作台（如 /workbench）不在动态菜单树下，仍对齐首个可展开的顶级模块（通常为仪表盘）
+    currentMenu =
+      allMenus.find((menu) => !menu.meta?.isHide && menu.children?.length) ?? allMenus[0];
+  }
+  return currentMenu?.children ?? [];
+});
 
-  // 双列菜单收起时的滚动条样式
-  const scrollbarStyle = computed(() => {
-    const isCollapsed = isDualMenu.value && !menuOpen.value
-    return {
-      transform: isCollapsed ? 'translateY(-50px)' : 'translateY(0)',
-      height: isCollapsed ? 'calc(100% + 50px)' : 'calc(100% - 60px)',
-      transition: 'transform 0.3s ease'
-    }
-  })
+// 双列菜单收起时的滚动条样式
+const scrollbarStyle = computed(() => {
+  const isCollapsed = isDualMenu.value && !menuOpen.value;
+  return {
+    transform: isCollapsed ? "translateY(-50px)" : "translateY(0)",
+    height: isCollapsed ? "calc(100% + 50px)" : "calc(100% - 60px)",
+    transition: "transform 0.3s ease",
+  };
+});
 
-  /**
-   * 延迟隐藏移动端模态框（使用 VueUse 的 useTimeoutFn）
-   */
-  const { start: delayHideMobileModal } = useTimeoutFn(
-    () => {
-      showMobileModal.value = false
-    },
-    ANIMATION_DELAY,
-    { immediate: false }
-  )
+/**
+ * 延迟隐藏移动端模态框（使用 VueUse 的 useTimeoutFn）
+ */
+const { start: delayHideMobileModal } = useTimeoutFn(
+  () => {
+    showMobileModal.value = false;
+  },
+  ANIMATION_DELAY,
+  { immediate: false }
+);
 
-  /**
-   * 查找 iframe 对应的二级菜单列表
-   */
-  const findIframeMenuList = (currentPath: string, menuList: any[]) => {
-    // 递归查找包含当前路径的菜单项
-    const hasPath = (items: any[]): boolean => {
-      for (const item of items) {
-        if (item.path === currentPath) {
-          return true
-        }
-        if (item.children && hasPath(item.children)) {
-          return true
-        }
+/**
+ * 查找 iframe 对应的二级菜单列表
+ */
+const findIframeMenuList = (currentPath: string, menuList: any[]) => {
+  // 递归查找包含当前路径的菜单项
+  const hasPath = (items: any[]): boolean => {
+    for (const item of items) {
+      if (item.path === currentPath) {
+        return true;
       }
-      return false
-    }
-
-    // 遍历一级菜单查找匹配的子菜单
-    for (const menu of menuList) {
-      if (menu.children && hasPath(menu.children)) {
-        return menu.children
+      if (item.children && hasPath(item.children)) {
+        return true;
       }
     }
-    return []
-  }
+    return false;
+  };
 
-  const { homePath } = useCommon()
-
-  /**
-   * 导航到首页
-   */
-  const navigateToHome = (): void => {
-    router.push(homePath.value)
-  }
-
-  /**
-   * 切换菜单显示/隐藏
-   */
-  const toggleMenuVisibility = (): void => {
-    settingStore.setMenuOpen(!menuOpen.value)
-
-    // 移动端模态框控制逻辑
-    if (isMobileScreen.value) {
-      if (!menuOpen.value) {
-        // 菜单即将打开，立即显示模态框
-        showMobileModal.value = true
-      } else {
-        // 菜单即将关闭，延迟隐藏模态框确保动画完成
-        delayHideMobileModal()
-      }
+  // 遍历一级菜单查找匹配的子菜单
+  for (const menu of menuList) {
+    if (menu.children && hasPath(menu.children)) {
+      return menu.children;
     }
   }
+  return [];
+};
 
-  /**
-   * 处理菜单关闭（来自子组件）
-   */
-  const handleMenuClose = (): void => {
-    if (isMobileScreen.value) {
-      settingStore.setMenuOpen(false)
-      delayHideMobileModal()
-    }
-  }
+const { homePath } = useCommon();
 
-  /**
-   * 切换双列菜单模式
-   */
-  const toggleDualMenuMode = (): void => {
-    settingStore.setDualMenuShowText(!dualMenuShowText.value)
-  }
+/**
+ * 导航到首页
+ */
+const navigateToHome = (): void => {
+  router.push(homePath.value);
+};
 
-  /**
-   * 监听窗口尺寸变化，自动处理移动端菜单
-   */
-  watch(width, (newWidth) => {
-    if (newWidth < MOBILE_BREAKPOINT) {
-      settingStore.setMenuOpen(false)
-      if (!menuOpen.value) {
-        showMobileModal.value = false
-      }
+/**
+ * 切换菜单显示/隐藏
+ */
+const toggleMenuVisibility = (): void => {
+  settingStore.setMenuOpen(!menuOpen.value);
+
+  // 移动端模态框控制逻辑
+  if (isMobileScreen.value) {
+    if (!menuOpen.value) {
+      // 菜单即将打开，立即显示模态框
+      showMobileModal.value = true;
     } else {
-      showMobileModal.value = false
+      // 菜单即将关闭，延迟隐藏模态框确保动画完成
+      delayHideMobileModal();
     }
-  })
+  }
+};
 
-  /**
-   * 监听菜单开关状态变化
-   */
-  watch(menuOpen, (isMenuOpen: boolean) => {
-    if (!isMobileScreen.value) {
-      // 大屏幕设备上，模态框始终隐藏
-      showMobileModal.value = false
-    } else {
-      // 小屏幕设备上，根据菜单状态控制模态框
-      if (isMenuOpen) {
-        // 菜单打开时立即显示模态框
-        showMobileModal.value = true
-      } else {
-        // 菜单关闭时延迟隐藏模态框，确保动画完成
-        delayHideMobileModal()
-      }
+/**
+ * 处理菜单关闭（来自子组件）
+ */
+const handleMenuClose = (): void => {
+  if (isMobileScreen.value) {
+    settingStore.setMenuOpen(false);
+    delayHideMobileModal();
+  }
+};
+
+/**
+ * 切换双列菜单模式
+ */
+const toggleDualMenuMode = (): void => {
+  settingStore.setDualMenuShowText(!dualMenuShowText.value);
+};
+
+/**
+ * 监听窗口尺寸变化，自动处理移动端菜单
+ */
+watch(width, (newWidth) => {
+  if (newWidth < MOBILE_BREAKPOINT) {
+    settingStore.setMenuOpen(false);
+    if (!menuOpen.value) {
+      showMobileModal.value = false;
     }
-  })
+  } else {
+    showMobileModal.value = false;
+  }
+});
+
+/**
+ * 监听菜单开关状态变化
+ */
+watch(menuOpen, (isMenuOpen: boolean) => {
+  if (!isMobileScreen.value) {
+    // 大屏幕设备上，模态框始终隐藏
+    showMobileModal.value = false;
+  } else {
+    // 小屏幕设备上，根据菜单状态控制模态框
+    if (isMenuOpen) {
+      // 菜单打开时立即显示模态框
+      showMobileModal.value = true;
+    } else {
+      // 菜单关闭时延迟隐藏模态框，确保动画完成
+      delayHideMobileModal();
+    }
+  }
+});
 </script>
 
 <style lang="scss" scoped>
-  @use './style';
+@use "./style";
 </style>
 
 <style lang="scss">
-  @use './theme';
+@use "./theme";
 
-  .layout-sidebar {
-    // 展开的宽度
-    .el-menu:not(.el-menu--collapse) {
-      width: v-bind(menuopenwidth);
-    }
-
-    // 折叠后宽度
-    .el-menu--collapse {
-      width: v-bind(menuclosewidth);
-    }
+.layout-sidebar {
+  // 展开的宽度
+  .el-menu:not(.el-menu--collapse) {
+    width: v-bind(menuopenwidth);
   }
+
+  // 折叠后宽度
+  .el-menu--collapse {
+    width: v-bind(menuclosewidth);
+  }
+}
 </style>
diff --git a/frontend/new-web/src/components/core/layouts/art-menus/art-sidebar-menu/style.scss b/frontend/new-web/src/components/core/layouts/art-menus/art-sidebar-menu/style.scss
index 8cccdd96..08dec787 100755
--- a/frontend/new-web/src/components/core/layouts/art-menus/art-sidebar-menu/style.scss
+++ b/frontend/new-web/src/components/core/layouts/art-menus/art-sidebar-menu/style.scss
@@ -58,10 +58,10 @@
             display: -webkit-box;
             width: 100%;
             overflow: hidden;
-            font-size: 12px;
             text-overflow: ellipsis;
             -webkit-line-clamp: 1;
             line-clamp: 1;
+            font-size: 12px;
             -webkit-box-orient: vertical;
           }
 
@@ -117,8 +117,8 @@
       border: 1px solid var(--art-card-border);
       border-radius: 0 15px 15px 0;
       opacity: 0;
-      transition: opacity 0.2s;
       transform: translateY(-50%);
+      transition: opacity 0.2s;
 
       &:hover {
         .art-svg-icon {
@@ -172,8 +172,8 @@
     box-sizing: border-box;
     // 防止菜单内的滚动影响整个页面滚动
     overscroll-behavior: contain;
-    border-right: 0;
     scrollbar-width: none;
+    border-right: 0;
     -ms-scroll-chaining: contain;
 
     &::-webkit-scrollbar {
diff --git a/frontend/new-web/src/components/core/layouts/art-menus/art-sidebar-menu/theme.scss b/frontend/new-web/src/components/core/layouts/art-menus/art-sidebar-menu/theme.scss
index 7626c429..a6ccae5c 100644
--- a/frontend/new-web/src/components/core/layouts/art-menus/art-sidebar-menu/theme.scss
+++ b/frontend/new-web/src/components/core/layouts/art-menus/art-sidebar-menu/theme.scss
@@ -1,4 +1,4 @@
-@use '@styles/core/mixin.scss' as *;
+@use "@styles/core/mixin.scss" as *;
 
 // 菜单样式变量
 $menu-height: 42px;
@@ -195,7 +195,7 @@ $popup-menu-radius: 6px;
         left: 0;
         width: 4px;
         height: 100%;
-        content: '';
+        content: "";
         background: var(--theme-color);
       }
     }
diff --git a/frontend/new-web/src/components/core/layouts/art-menus/art-sidebar-menu/widget/SidebarSubmenu.vue b/frontend/new-web/src/components/core/layouts/art-menus/art-sidebar-menu/widget/SidebarSubmenu.vue
index 9afa2621..e7d7dc71 100755
--- a/frontend/new-web/src/components/core/layouts/art-menus/art-sidebar-menu/widget/SidebarSubmenu.vue
+++ b/frontend/new-web/src/components/core/layouts/art-menus/art-sidebar-menu/widget/SidebarSubmenu.vue
@@ -3,7 +3,7 @@
     <ElSubMenu v-if="hasChildren(item)" :index="item.path || item.meta.title" :level="level">
       <template #title>
         <div class="menu-icon flex-cc">
-          <ArtSvgIcon
+          <MenuRouteIcon
             :icon="item.meta.icon"
             :color="theme?.iconColor"
             :style="{ color: theme.iconColor }"
@@ -31,7 +31,7 @@
       @click="goPage(item)"
     >
       <div class="menu-icon flex-cc">
-        <ArtSvgIcon
+        <MenuRouteIcon
           :icon="item.meta.icon"
           :color="theme?.iconColor"
           :style="{ color: theme.iconColor }"
@@ -57,143 +57,146 @@
 </template>
 
 <script setup lang="ts">
-  import { computed } from 'vue'
-  import type { AppRouteRecord } from '@/types/router'
-  import { formatMenuTitle } from '@/utils/router'
-  import { handleMenuJump } from '@/utils/navigation'
-  import { useSettingStore } from '@/store/modules/setting'
+import { computed } from "vue";
+import type { AppRouteRecord } from "@/types/router";
+import { formatMenuTitle } from "@/utils/navigation/router";
+import { handleMenuJump } from "@/utils/navigation";
+import { useSettingsStore } from "@/store/modules/setting.store";
 
-  interface MenuTheme {
-    iconColor?: string
+interface MenuTheme {
+  iconColor?: string;
+}
+
+interface Props {
+  /** 菜单标题 */
+  title?: string;
+  /** 菜单列表 */
+  list?: AppRouteRecord[];
+  /** 主题配置 */
+  theme?: MenuTheme;
+  /** 是否为移动端模式 */
+  isMobile?: boolean;
+  /** 菜单层级 */
+  level?: number;
+}
+
+interface Emits {
+  /** 关闭菜单事件 */
+  (e: "close"): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: "",
+  list: () => [],
+  theme: () => ({}),
+  isMobile: false,
+  level: 0,
+});
+
+const emit = defineEmits<Emits>();
+
+const settingStore = useSettingsStore();
+
+const { menuOpen } = storeToRefs(settingStore);
+
+/**
+ * 过滤后的菜单项列表
+ * 只显示未隐藏的菜单项
+ */
+const filteredMenuItems = computed(() => filterRoutes(props.list));
+
+/**
+ * 跳转到指定页面
+ * @param item 菜单项数据
+ */
+const goPage = (item: AppRouteRecord): void => {
+  closeMenu();
+  handleMenuJump(item);
+};
+
+/**
+ * 关闭菜单
+ * 触发父组件的关闭事件
+ */
+const closeMenu = (): void => {
+  emit("close");
+};
+
+/**
+ * 判断菜单项本身是否可以作为可点击页面保留在菜单中
+ */
+const isNavigableRoute = (item: AppRouteRecord): boolean => {
+  return !!(
+    !item.meta.isHide &&
+    ((item.path && item.path.trim()) || item.meta.link || item.meta.isIframe === true) &&
+    (item.component ||
+      item.meta.link ||
+      item.meta.isIframe === true ||
+      item.meta.shellRoute === true)
+  );
+};
+
+/**
+ * 递归过滤菜单路由，移除隐藏的菜单项
+ * 但如果父菜单本身就是可访问页面，则即使子菜单都被隐藏也应该保留
+ * @param items 菜单项数组
+ * @returns 过滤后的菜单项数组
+ */
+const filterRoutes = (items: AppRouteRecord[]): AppRouteRecord[] => {
+  return items
+    .filter((item) => {
+      // 如果当前项被隐藏，直接过滤掉
+      if (item.meta.isHide) {
+        return false;
+      }
+
+      // 如果有子菜单，递归过滤子菜单
+      if (item.children && item.children.length > 0) {
+        const filteredChildren = filterRoutes(item.children);
+        // 目录菜单要求有可见子菜单；页面菜单则允许仅保留自身
+        return filteredChildren.length > 0 || isNavigableRoute(item);
+      }
+
+      // 叶子节点且未被隐藏，保留
+      return isNavigableRoute(item);
+    })
+    .map((item) => ({
+      ...item,
+      children: item.children ? filterRoutes(item.children) : undefined,
+    }));
+};
+
+/**
+ * 判断菜单项是否包含可见的子菜单
+ * @param item 菜单项数据
+ * @returns 是否包含可见的子菜单
+ */
+const hasChildren = (item: AppRouteRecord): boolean => {
+  if (!item.children || item.children.length === 0) {
+    return false;
   }
+  // 递归检查是否有可见的子菜单
+  const filteredChildren = filterRoutes(item.children);
+  return filteredChildren.length > 0;
+};
 
-  interface Props {
-    /** 菜单标题 */
-    title?: string
-    /** 菜单列表 */
-    list?: AppRouteRecord[]
-    /** 主题配置 */
-    theme?: MenuTheme
-    /** 是否为移动端模式 */
-    isMobile?: boolean
-    /** 菜单层级 */
-    level?: number
-  }
+/**
+ * 判断是否为外部链接
+ * @param item 菜单项数据
+ * @returns 是否为外部链接
+ */
+const isExternalLink = (item: AppRouteRecord): boolean => {
+  return !!(item.meta.link && !item.meta.isIframe);
+};
 
-  interface Emits {
-    /** 关闭菜单事件 */
-    (e: 'close'): void
-  }
-
-  const props = withDefaults(defineProps<Props>(), {
-    title: '',
-    list: () => [],
-    theme: () => ({}),
-    isMobile: false,
-    level: 0
-  })
-
-  const emit = defineEmits<Emits>()
-
-  const settingStore = useSettingStore()
-
-  const { menuOpen } = storeToRefs(settingStore)
-
-  /**
-   * 过滤后的菜单项列表
-   * 只显示未隐藏的菜单项
-   */
-  const filteredMenuItems = computed(() => filterRoutes(props.list))
-
-  /**
-   * 跳转到指定页面
-   * @param item 菜单项数据
-   */
-  const goPage = (item: AppRouteRecord): void => {
-    closeMenu()
-    handleMenuJump(item)
-  }
-
-  /**
-   * 关闭菜单
-   * 触发父组件的关闭事件
-   */
-  const closeMenu = (): void => {
-    emit('close')
-  }
-
-  /**
-   * 判断菜单项本身是否可以作为可点击页面保留在菜单中
-   */
-  const isNavigableRoute = (item: AppRouteRecord): boolean => {
-    return !!(
-      !item.meta.isHide &&
-      ((item.path && item.path.trim()) || item.meta.link || item.meta.isIframe === true) &&
-      (item.component || item.meta.link || item.meta.isIframe === true)
-    )
-  }
-
-  /**
-   * 递归过滤菜单路由，移除隐藏的菜单项
-   * 但如果父菜单本身就是可访问页面，则即使子菜单都被隐藏也应该保留
-   * @param items 菜单项数组
-   * @returns 过滤后的菜单项数组
-   */
-  const filterRoutes = (items: AppRouteRecord[]): AppRouteRecord[] => {
-    return items
-      .filter((item) => {
-        // 如果当前项被隐藏，直接过滤掉
-        if (item.meta.isHide) {
-          return false
-        }
-
-        // 如果有子菜单，递归过滤子菜单
-        if (item.children && item.children.length > 0) {
-          const filteredChildren = filterRoutes(item.children)
-          // 目录菜单要求有可见子菜单；页面菜单则允许仅保留自身
-          return filteredChildren.length > 0 || isNavigableRoute(item)
-        }
-
-        // 叶子节点且未被隐藏，保留
-        return isNavigableRoute(item)
-      })
-      .map((item) => ({
-        ...item,
-        children: item.children ? filterRoutes(item.children) : undefined
-      }))
-  }
-
-  /**
-   * 判断菜单项是否包含可见的子菜单
-   * @param item 菜单项数据
-   * @returns 是否包含可见的子菜单
-   */
-  const hasChildren = (item: AppRouteRecord): boolean => {
-    if (!item.children || item.children.length === 0) {
-      return false
-    }
-    // 递归检查是否有可见的子菜单
-    const filteredChildren = filterRoutes(item.children)
-    return filteredChildren.length > 0
-  }
-
-  /**
-   * 判断是否为外部链接
-   * @param item 菜单项数据
-   * @returns 是否为外部链接
-   */
-  const isExternalLink = (item: AppRouteRecord): boolean => {
-    return !!(item.meta.link && !item.meta.isIframe)
-  }
-
-  /**
-   * 生成唯一的 key
-   * 使用 path、title 和 index 组合确保唯一性
-   * @param item 菜单项数据
-   * @param index 索引
-   * @returns 唯一的 key
-   */
-  const getUniqueKey = (item: AppRouteRecord, index: number): string => {
-    return `${item.path || item.meta.title || 'menu'}-${props.level}-${index}`
-  }
+/**
+ * 生成唯一的 key
+ * 使用 path、title 和 index 组合确保唯一性
+ * @param item 菜单项数据
+ * @param index 索引
+ * @returns 唯一的 key
+ */
+const getUniqueKey = (item: AppRouteRecord, index: number): string => {
+  return `${item.path || item.meta.title || "menu"}-${props.level}-${index}`;
+};
 </script>
diff --git a/frontend/new-web/src/components/core/layouts/art-notification/index.vue b/frontend/new-web/src/components/core/layouts/art-notification/index.vue
index a58853ce..b5184ce3 100755
--- a/frontend/new-web/src/components/core/layouts/art-notification/index.vue
+++ b/frontend/new-web/src/components/core/layouts/art-notification/index.vue
@@ -4,15 +4,15 @@
     class="art-notification-panel art-card-sm !shadow-xl"
     :style="{
       transform: show ? 'scaleY(1)' : 'scaleY(0.9)',
-      opacity: show ? 1 : 0
+      opacity: show ? 1 : 0,
     }"
     v-show="visible"
     @click.stop
   >
     <div class="flex-cb px-3.5 mt-3.5">
-      <span class="text-base font-medium text-g-800">{{ $t('notice.title') }}</span>
+      <span class="text-base font-medium text-g-800">{{ $t("notice.title") }}</span>
       <span class="text-xs text-g-800 px-1.5 py-1 c-p select-none rounded hover:bg-g-200">
-        {{ $t('notice.btnRead') }}
+        {{ $t("notice.btnRead") }}
       </span>
     </div>
 
@@ -85,15 +85,15 @@
           class="relative top-25 h-full text-g-500 text-center !bg-transparent"
         >
           <ArtSvgIcon icon="system-uicons:inbox" class="text-5xl" />
-          <p class="mt-3.5 text-xs !bg-transparent"
-            >{{ $t('notice.text[0]') }}{{ barList[barActiveIndex].name }}</p
-          >
+          <p class="mt-3.5 text-xs !bg-transparent">
+            {{ $t("notice.text[0]") }}{{ barList[barActiveIndex].name }}
+          </p>
         </div>
       </div>
 
       <div class="relative box-border w-full px-3.5">
         <ElButton class="w-full mt-3" @click="handleViewAll" v-ripple>
-          {{ $t('notice.viewAll') }}
+          {{ $t("notice.viewAll") }}
         </ElButton>
       </div>
     </div>
@@ -103,325 +103,325 @@
 </template>
 
 <script setup lang="ts">
-  import { computed, ref, watch, type Ref, type ComputedRef } from 'vue'
-  import { useI18n } from 'vue-i18n'
+import { computed, ref, watch, type Ref, type ComputedRef } from "vue";
+import { useI18n } from "vue-i18n";
 
-  // 导入头像图片
-  import avatar1 from '@/assets/images/avatar/avatar1.webp'
-  import avatar2 from '@/assets/images/avatar/avatar2.webp'
-  import avatar3 from '@/assets/images/avatar/avatar3.webp'
-  import avatar4 from '@/assets/images/avatar/avatar4.webp'
-  import avatar5 from '@/assets/images/avatar/avatar5.webp'
-  import avatar6 from '@/assets/images/avatar/avatar6.webp'
+// 导入头像图片
+import avatar1 from "@/assets/images/avatar/avatar1.webp";
+import avatar2 from "@/assets/images/avatar/avatar2.webp";
+import avatar3 from "@/assets/images/avatar/avatar3.webp";
+import avatar4 from "@/assets/images/avatar/avatar4.webp";
+import avatar5 from "@/assets/images/avatar/avatar5.webp";
+import avatar6 from "@/assets/images/avatar/avatar6.webp";
 
-  defineOptions({ name: 'ArtNotification' })
+defineOptions({ name: "ArtNotification" });
 
-  interface NoticeItem {
-    /** 标题 */
-    title: string
-    /** 时间 */
-    time: string
-    /** 类型 */
-    type: NoticeType
-  }
+interface NoticeItem {
+  /** 标题 */
+  title: string;
+  /** 时间 */
+  time: string;
+  /** 类型 */
+  type: NoticeType;
+}
 
-  interface MessageItem {
-    /** 标题 */
-    title: string
-    /** 时间 */
-    time: string
-    /** 头像 */
-    avatar: string
-  }
+interface MessageItem {
+  /** 标题 */
+  title: string;
+  /** 时间 */
+  time: string;
+  /** 头像 */
+  avatar: string;
+}
 
-  interface PendingItem {
-    /** 标题 */
-    title: string
-    /** 时间 */
-    time: string
-  }
+interface PendingItem {
+  /** 标题 */
+  title: string;
+  /** 时间 */
+  time: string;
+}
 
-  interface BarItem {
-    /** 名称 */
-    name: ComputedRef<string>
-    /** 数量 */
-    num: number
-  }
+interface BarItem {
+  /** 名称 */
+  name: ComputedRef<string>;
+  /** 数量 */
+  num: number;
+}
 
-  interface NoticeStyle {
-    /** 图标 */
-    icon: string
-    /** icon 样式 */
-    iconClass: string
-  }
+interface NoticeStyle {
+  /** 图标 */
+  icon: string;
+  /** icon 样式 */
+  iconClass: string;
+}
 
-  type NoticeType = 'email' | 'message' | 'collection' | 'user' | 'notice'
+type NoticeType = "email" | "message" | "collection" | "user" | "notice";
 
-  const { t } = useI18n()
+const { t } = useI18n();
 
-  const props = defineProps<{
-    value: boolean
-  }>()
+const props = defineProps<{
+  value: boolean;
+}>();
 
-  const emit = defineEmits<{
-    'update:value': [value: boolean]
-  }>()
+const emit = defineEmits<{
+  "update:value": [value: boolean];
+}>();
 
-  const show = ref(false)
-  const visible = ref(false)
-  const barActiveIndex = ref(0)
+const show = ref(false);
+const visible = ref(false);
+const barActiveIndex = ref(0);
 
-  const useNotificationData = () => {
-    // 通知数据
-    const noticeList = ref<NoticeItem[]>([
-      {
-        title: '新增国际化',
-        time: '2024-6-13 0:10',
-        type: 'notice'
-      },
-      {
-        title: '冷月呆呆给你发了一条消息',
-        time: '2024-4-21 8:05',
-        type: 'message'
-      },
-      {
-        title: '小肥猪关注了你',
-        time: '2020-3-17 21:12',
-        type: 'collection'
-      },
-      {
-        title: '新增使用文档',
-        time: '2024-02-14 0:20',
-        type: 'notice'
-      },
-      {
-        title: '小肥猪给你发了一封邮件',
-        time: '2024-1-20 0:15',
-        type: 'email'
-      },
-      {
-        title: '菜单mock本地真实数据',
-        time: '2024-1-17 22:06',
-        type: 'notice'
-      }
-    ])
+const useNotificationData = () => {
+  // 通知数据
+  const noticeList = ref<NoticeItem[]>([
+    {
+      title: "新增国际化",
+      time: "2024-6-13 0:10",
+      type: "notice",
+    },
+    {
+      title: "冷月呆呆给你发了一条消息",
+      time: "2024-4-21 8:05",
+      type: "message",
+    },
+    {
+      title: "小肥猪关注了你",
+      time: "2020-3-17 21:12",
+      type: "collection",
+    },
+    {
+      title: "新增使用文档",
+      time: "2024-02-14 0:20",
+      type: "notice",
+    },
+    {
+      title: "小肥猪给你发了一封邮件",
+      time: "2024-1-20 0:15",
+      type: "email",
+    },
+    {
+      title: "菜单mock本地真实数据",
+      time: "2024-1-17 22:06",
+      type: "notice",
+    },
+  ]);
 
-    // 消息数据
-    const msgList = ref<MessageItem[]>([
-      {
-        title: '池不胖 关注了你',
-        time: '2021-2-26 23:50',
-        avatar: avatar1
-      },
-      {
-        title: '唐不苦 关注了你',
-        time: '2021-2-21 8:05',
-        avatar: avatar2
-      },
-      {
-        title: '中小鱼 关注了你',
-        time: '2020-1-17 21:12',
-        avatar: avatar3
-      },
-      {
-        title: '何小荷 关注了你',
-        time: '2021-01-14 0:20',
-        avatar: avatar4
-      },
-      {
-        title: '誶誶淰 关注了你',
-        time: '2020-12-20 0:15',
-        avatar: avatar5
-      },
-      {
-        title: '冷月呆呆 关注了你',
-        time: '2020-12-17 22:06',
-        avatar: avatar6
-      }
-    ])
+  // 消息数据
+  const msgList = ref<MessageItem[]>([
+    {
+      title: "池不胖 关注了你",
+      time: "2021-2-26 23:50",
+      avatar: avatar1,
+    },
+    {
+      title: "唐不苦 关注了你",
+      time: "2021-2-21 8:05",
+      avatar: avatar2,
+    },
+    {
+      title: "中小鱼 关注了你",
+      time: "2020-1-17 21:12",
+      avatar: avatar3,
+    },
+    {
+      title: "何小荷 关注了你",
+      time: "2021-01-14 0:20",
+      avatar: avatar4,
+    },
+    {
+      title: "誶誶淰 关注了你",
+      time: "2020-12-20 0:15",
+      avatar: avatar5,
+    },
+    {
+      title: "冷月呆呆 关注了你",
+      time: "2020-12-17 22:06",
+      avatar: avatar6,
+    },
+  ]);
 
-    // 待办数据
-    const pendingList = ref<PendingItem[]>([])
+  // 待办数据
+  const pendingList = ref<PendingItem[]>([]);
 
-    // 标签栏数据
-    const barList = computed<BarItem[]>(() => [
-      {
-        name: computed(() => t('notice.bar[0]')),
-        num: noticeList.value.length
-      },
-      {
-        name: computed(() => t('notice.bar[1]')),
-        num: msgList.value.length
-      },
-      {
-        name: computed(() => t('notice.bar[2]')),
-        num: pendingList.value.length
-      }
-    ])
+  // 标签栏数据
+  const barList = computed<BarItem[]>(() => [
+    {
+      name: computed(() => t("notice.bar[0]")),
+      num: noticeList.value.length,
+    },
+    {
+      name: computed(() => t("notice.bar[1]")),
+      num: msgList.value.length,
+    },
+    {
+      name: computed(() => t("notice.bar[2]")),
+      num: pendingList.value.length,
+    },
+  ]);
 
-    return {
-      noticeList,
-      msgList,
-      pendingList,
-      barList
-    }
-  }
-
-  // 样式管理
-  const useNotificationStyles = () => {
-    const noticeStyleMap: Record<NoticeType, NoticeStyle> = {
-      email: {
-        icon: 'ri:mail-line',
-        iconClass: 'bg-warning/12 text-warning'
-      },
-      message: {
-        icon: 'ri:volume-down-line',
-        iconClass: 'bg-success/12 text-success'
-      },
-      collection: {
-        icon: 'ri:heart-3-line',
-        iconClass: 'bg-danger/12 text-danger'
-      },
-      user: {
-        icon: 'ri:volume-down-line',
-        iconClass: 'bg-info/12 text-info'
-      },
-      notice: {
-        icon: 'ri:notification-3-line',
-        iconClass: 'bg-theme/12 text-theme'
-      }
-    }
-
-    const getNoticeStyle = (type: NoticeType): NoticeStyle => {
-      const defaultStyle: NoticeStyle = {
-        icon: 'ri:arrow-right-circle-line',
-        iconClass: 'bg-theme/12 text-theme'
-      }
-
-      return noticeStyleMap[type] || defaultStyle
-    }
-
-    return {
-      getNoticeStyle
-    }
-  }
-
-  // 动画管理
-  const useNotificationAnimation = () => {
-    const showNotice = (open: boolean) => {
-      if (open) {
-        visible.value = true
-        setTimeout(() => {
-          show.value = true
-        }, 5)
-      } else {
-        show.value = false
-        setTimeout(() => {
-          visible.value = false
-        }, 350)
-      }
-    }
-
-    return {
-      showNotice
-    }
-  }
-
-  // 标签页管理
-  const useTabManagement = (
-    noticeList: Ref<NoticeItem[]>,
-    msgList: Ref<MessageItem[]>,
-    pendingList: Ref<PendingItem[]>,
-    businessHandlers: {
-      handleNoticeAll: () => void
-      handleMsgAll: () => void
-      handlePendingAll: () => void
-    }
-  ) => {
-    const changeBar = (index: number) => {
-      barActiveIndex.value = index
-    }
-
-    // 检查当前标签页是否为空
-    const currentTabIsEmpty = computed(() => {
-      const tabDataMap = [noticeList.value, msgList.value, pendingList.value]
-
-      const currentData = tabDataMap[barActiveIndex.value]
-      return currentData && currentData.length === 0
-    })
-
-    const handleViewAll = () => {
-      // 查看全部处理器映射
-      const viewAllHandlers: Record<number, () => void> = {
-        0: businessHandlers.handleNoticeAll,
-        1: businessHandlers.handleMsgAll,
-        2: businessHandlers.handlePendingAll
-      }
-
-      const handler = viewAllHandlers[barActiveIndex.value]
-      handler?.()
-
-      // 关闭通知面板
-      emit('update:value', false)
-    }
-
-    return {
-      changeBar,
-      currentTabIsEmpty,
-      handleViewAll
-    }
-  }
-
-  // 业务逻辑处理
-  const useBusinessLogic = () => {
-    const handleNoticeAll = () => {
-      // 处理查看全部通知
-      console.log('查看全部通知')
-    }
-
-    const handleMsgAll = () => {
-      // 处理查看全部消息
-      console.log('查看全部消息')
-    }
-
-    const handlePendingAll = () => {
-      // 处理查看全部待办
-      console.log('查看全部待办')
-    }
-
-    return {
-      handleNoticeAll,
-      handleMsgAll,
-      handlePendingAll
-    }
-  }
-
-  // 组合所有逻辑
-  const { noticeList, msgList, pendingList, barList } = useNotificationData()
-  const { getNoticeStyle } = useNotificationStyles()
-  const { showNotice } = useNotificationAnimation()
-  const { handleNoticeAll, handleMsgAll, handlePendingAll } = useBusinessLogic()
-  const { changeBar, currentTabIsEmpty, handleViewAll } = useTabManagement(
+  return {
     noticeList,
     msgList,
     pendingList,
-    { handleNoticeAll, handleMsgAll, handlePendingAll }
-  )
+    barList,
+  };
+};
 
-  // 监听属性变化
-  watch(
-    () => props.value,
-    (newValue) => {
-      showNotice(newValue)
+// 样式管理
+const useNotificationStyles = () => {
+  const noticeStyleMap: Record<NoticeType, NoticeStyle> = {
+    email: {
+      icon: "ri:mail-line",
+      iconClass: "bg-warning/12 text-warning",
+    },
+    message: {
+      icon: "ri:volume-down-line",
+      iconClass: "bg-success/12 text-success",
+    },
+    collection: {
+      icon: "ri:heart-3-line",
+      iconClass: "bg-danger/12 text-danger",
+    },
+    user: {
+      icon: "ri:volume-down-line",
+      iconClass: "bg-info/12 text-info",
+    },
+    notice: {
+      icon: "ri:notification-3-line",
+      iconClass: "bg-theme/12 text-theme",
+    },
+  };
+
+  const getNoticeStyle = (type: NoticeType): NoticeStyle => {
+    const defaultStyle: NoticeStyle = {
+      icon: "ri:arrow-right-circle-line",
+      iconClass: "bg-theme/12 text-theme",
+    };
+
+    return noticeStyleMap[type] || defaultStyle;
+  };
+
+  return {
+    getNoticeStyle,
+  };
+};
+
+// 动画管理
+const useNotificationAnimation = () => {
+  const showNotice = (open: boolean) => {
+    if (open) {
+      visible.value = true;
+      setTimeout(() => {
+        show.value = true;
+      }, 5);
+    } else {
+      show.value = false;
+      setTimeout(() => {
+        visible.value = false;
+      }, 350);
     }
-  )
+  };
+
+  return {
+    showNotice,
+  };
+};
+
+// 标签页管理
+const useTabManagement = (
+  noticeList: Ref<NoticeItem[]>,
+  msgList: Ref<MessageItem[]>,
+  pendingList: Ref<PendingItem[]>,
+  businessHandlers: {
+    handleNoticeAll: () => void;
+    handleMsgAll: () => void;
+    handlePendingAll: () => void;
+  }
+) => {
+  const changeBar = (index: number) => {
+    barActiveIndex.value = index;
+  };
+
+  // 检查当前标签页是否为空
+  const currentTabIsEmpty = computed(() => {
+    const tabDataMap = [noticeList.value, msgList.value, pendingList.value];
+
+    const currentData = tabDataMap[barActiveIndex.value];
+    return currentData && currentData.length === 0;
+  });
+
+  const handleViewAll = () => {
+    // 查看全部处理器映射
+    const viewAllHandlers: Record<number, () => void> = {
+      0: businessHandlers.handleNoticeAll,
+      1: businessHandlers.handleMsgAll,
+      2: businessHandlers.handlePendingAll,
+    };
+
+    const handler = viewAllHandlers[barActiveIndex.value];
+    handler?.();
+
+    // 关闭通知面板
+    emit("update:value", false);
+  };
+
+  return {
+    changeBar,
+    currentTabIsEmpty,
+    handleViewAll,
+  };
+};
+
+// 业务逻辑处理
+const useBusinessLogic = () => {
+  const handleNoticeAll = () => {
+    // 处理查看全部通知
+    console.log("查看全部通知");
+  };
+
+  const handleMsgAll = () => {
+    // 处理查看全部消息
+    console.log("查看全部消息");
+  };
+
+  const handlePendingAll = () => {
+    // 处理查看全部待办
+    console.log("查看全部待办");
+  };
+
+  return {
+    handleNoticeAll,
+    handleMsgAll,
+    handlePendingAll,
+  };
+};
+
+// 组合所有逻辑
+const { noticeList, msgList, pendingList, barList } = useNotificationData();
+const { getNoticeStyle } = useNotificationStyles();
+const { showNotice } = useNotificationAnimation();
+const { handleNoticeAll, handleMsgAll, handlePendingAll } = useBusinessLogic();
+const { changeBar, currentTabIsEmpty, handleViewAll } = useTabManagement(
+  noticeList,
+  msgList,
+  pendingList,
+  { handleNoticeAll, handleMsgAll, handlePendingAll }
+);
+
+// 监听属性变化
+watch(
+  () => props.value,
+  (newValue) => {
+    showNotice(newValue);
+  }
+);
 </script>
 
 <style scoped>
-  @reference '@styles/core/tailwind.css';
+@reference '@styles/core/tailwind.css';
 
-  .art-notification-panel {
-    @apply absolute 
+.art-notification-panel {
+  @apply absolute 
     top-14.5 
     right-5 
     w-90 
@@ -435,22 +435,22 @@
     max-[640px]:right-0
     max-[640px]:w-full 
     max-[640px]:h-[80vh];
-  }
+}
 
-  .bar-active {
-    color: var(--theme-color) !important;
-    border-bottom: 2px solid var(--theme-color);
-  }
+.bar-active {
+  color: var(--theme-color) !important;
+  border-bottom: 2px solid var(--theme-color);
+}
 
-  .scrollbar-thin::-webkit-scrollbar {
-    width: 5px !important;
-  }
+.scrollbar-thin::-webkit-scrollbar {
+  width: 5px !important;
+}
 
-  .dark .scrollbar-thin::-webkit-scrollbar-track {
-    background-color: var(--default-box-color);
-  }
+.dark .scrollbar-thin::-webkit-scrollbar-track {
+  background-color: var(--default-box-color);
+}
 
-  .dark .scrollbar-thin::-webkit-scrollbar-thumb {
-    background-color: #222 !important;
-  }
+.dark .scrollbar-thin::-webkit-scrollbar-thumb {
+  background-color: #222 !important;
+}
 </style>
diff --git a/frontend/new-web/src/components/core/layouts/art-page-content/index.vue b/frontend/new-web/src/components/core/layouts/art-page-content/index.vue
index a862df13..77f8f5c5 100644
--- a/frontend/new-web/src/components/core/layouts/art-page-content/index.vue
+++ b/frontend/new-web/src/components/core/layouts/art-page-content/index.vue
@@ -14,15 +14,15 @@
       </div>
     </div>
 
-    <RouterView v-if="isRefresh" v-slot="{ Component, route }" :style="contentStyle">
+    <RouterView v-if="isRefresh" v-slot="{ Component, route: router }" :style="contentStyle">
       <!-- 缓存路由动画 -->
       <Transition :name="showTransitionMask ? '' : actualTransition" mode="out-in" appear>
         <KeepAlive :max="10" :exclude="keepAliveExclude">
           <component
             class="art-page-view"
             :is="Component"
-            :key="route.path"
-            v-if="route.meta.keepAlive"
+            :key="router.path"
+            v-if="router.meta.keepAlive"
           />
         </KeepAlive>
       </Transition>
@@ -32,8 +32,8 @@
         <component
           class="art-page-view"
           :is="Component"
-          :key="route.path"
-          v-if="!route.meta.keepAlive"
+          :key="router.path"
+          v-if="!router.meta.keepAlive"
         />
       </Transition>
     </RouterView>
@@ -48,89 +48,89 @@
   </div>
 </template>
 <script setup lang="ts">
-  import type { CSSProperties } from 'vue'
-  import { useRoute } from 'vue-router'
-  import { useAutoLayoutHeight } from '@/hooks/core/useLayoutHeight'
-  import { useSettingStore } from '@/store/modules/setting'
-  import { useWorktabStore } from '@/store/modules/worktab'
+import type { CSSProperties } from "vue";
+import { useRoute } from "vue-router";
+import { useAutoLayoutHeight } from "@/hooks/core/useLayoutHeight";
+import { useSettingsStore } from "@/store/modules/setting.store";
+import { useWorktabStore } from "@/store/modules/worktab.store";
 
-  defineOptions({ name: 'ArtPageContent' })
+defineOptions({ name: "ArtPageContent" });
 
-  const route = useRoute()
-  const { containerMinHeight } = useAutoLayoutHeight()
-  const { pageTransition, containerWidth, refresh } = storeToRefs(useSettingStore())
-  const { keepAliveExclude } = storeToRefs(useWorktabStore())
+const route = useRoute();
+const { containerMinHeight } = useAutoLayoutHeight();
+const { pageTransition, containerWidth, refresh } = storeToRefs(useSettingsStore());
+const { keepAliveExclude } = storeToRefs(useWorktabStore());
 
-  const isRefresh = shallowRef(true)
-  const isOpenRouteInfo = import.meta.env.VITE_OPEN_ROUTE_INFO
-  const showTransitionMask = ref(false)
+const isRefresh = shallowRef(true);
+const isOpenRouteInfo = import.meta.env.VITE_OPEN_ROUTE_INFO;
+const showTransitionMask = ref(false);
 
-  // 标记是否是首次加载（浏览器刷新）
-  const isFirstLoad = ref(true)
+// 标记是否是首次加载（浏览器刷新）
+const isFirstLoad = ref(true);
 
-  // 检查当前路由是否需要使用无基础布局模式
-  const isFullPage = computed(() => route.matched.some((r) => r.meta?.isFullPage))
-  const prevIsFullPage = ref(isFullPage.value)
+// 检查当前路由是否需要使用无基础布局模式
+const isFullPage = computed(() => route.matched.some((r) => r.meta?.isFullPage));
+const prevIsFullPage = ref(isFullPage.value);
 
-  // 切换动画名称：首次加载、从全屏返回时不使用动画
-  const actualTransition = computed(() => {
-    if (isFirstLoad.value) return ''
-    if (prevIsFullPage.value && !isFullPage.value) return ''
-    return pageTransition.value
-  })
+// 切换动画名称：首次加载、从全屏返回时不使用动画
+const actualTransition = computed(() => {
+  if (isFirstLoad.value) return "";
+  if (prevIsFullPage.value && !isFullPage.value) return "";
+  return pageTransition.value;
+});
 
-  // 监听全屏状态变化，显示过渡遮罩
-  watch(isFullPage, (val, oldVal) => {
-    if (val !== oldVal) {
-      showTransitionMask.value = true
-      // 延迟隐藏遮罩，给足时间让页面完成切换
-      setTimeout(() => {
-        showTransitionMask.value = false
-      }, 50)
-    }
-
-    nextTick(() => {
-      prevIsFullPage.value = val
-    })
-  })
-
-  const containerStyle = computed(
-    (): CSSProperties =>
-      isFullPage.value
-        ? {
-            position: 'fixed',
-            top: 0,
-            left: 0,
-            width: '100%',
-            height: '100vh',
-            zIndex: 2500,
-            background: 'var(--default-bg-color)'
-          }
-        : {
-            maxWidth: containerWidth.value
-          }
-  )
-
-  const contentStyle = computed(
-    (): CSSProperties => ({
-      minHeight: containerMinHeight.value
-    })
-  )
-
-  const reload = () => {
-    isRefresh.value = false
-    nextTick(() => {
-      isRefresh.value = true
-    })
+// 监听全屏状态变化，显示过渡遮罩
+watch(isFullPage, (val, oldVal) => {
+  if (val !== oldVal) {
+    showTransitionMask.value = true;
+    // 延迟隐藏遮罩，给足时间让页面完成切换
+    setTimeout(() => {
+      showTransitionMask.value = false;
+    }, 50);
   }
 
-  watch(refresh, reload, { flush: 'post' })
+  nextTick(() => {
+    prevIsFullPage.value = val;
+  });
+});
 
-  // 组件挂载后标记首次加载完成
-  onMounted(() => {
-    // 延迟一帧，确保首次渲染完成
-    nextTick(() => {
-      isFirstLoad.value = false
-    })
+const containerStyle = computed(
+  (): CSSProperties =>
+    isFullPage.value
+      ? {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          width: "100%",
+          height: "100vh",
+          zIndex: 2500,
+          background: "var(--default-bg-color)",
+        }
+      : {
+          maxWidth: containerWidth.value,
+        }
+);
+
+const contentStyle = computed(
+  (): CSSProperties => ({
+    minHeight: containerMinHeight.value,
   })
+);
+
+const reload = () => {
+  isRefresh.value = false;
+  nextTick(() => {
+    isRefresh.value = true;
+  });
+};
+
+watch(refresh, reload, { flush: "post" });
+
+// 组件挂载后标记首次加载完成
+onMounted(() => {
+  // 延迟一帧，确保首次渲染完成
+  nextTick(() => {
+    isFirstLoad.value = false;
+  });
+});
 </script>
diff --git a/frontend/new-web/src/components/core/layouts/art-screen-lock/index.vue b/frontend/new-web/src/components/core/layouts/art-screen-lock/index.vue
index 5bf52482..cdd2e6ef 100644
--- a/frontend/new-web/src/components/core/layouts/art-screen-lock/index.vue
+++ b/frontend/new-web/src/components/core/layouts/art-screen-lock/index.vue
@@ -10,7 +10,8 @@
         <div class="mb-7.5 text-5xl">🔒</div>
         <h1 class="m-0 mb-5 text-3xl font-semibold text-danger">系统已锁定</h1>
         <p class="max-w-125 m-0 text-lg leading-relaxed text-white">
-          检测到开发者工具已打开<br />
+          检测到开发者工具已打开
+          <br />
           为了系统安全，请关闭开发者工具后继续使用
         </p>
         <div class="mt-7.5 text-sm text-gray-400">Security Lock Activated</div>
@@ -22,7 +23,7 @@
       <ElDialog v-model="visible" :width="370" :show-close="false" @open="handleDialogOpen">
         <div class="flex-c flex-col">
           <img class="w-16 h-16 rounded-full" src="@imgs/user/avatar.webp" alt="用户头像" />
-          <div class="mt-7.5 mb-3.5 text-base font-medium">{{ userInfo.userName }}</div>
+          <div class="mt-7.5 mb-3.5 text-base font-medium">{{ userInfo.username }}</div>
           <ElForm
             ref="formRef"
             :model="formData"
@@ -49,7 +50,7 @@
               </ElInput>
             </ElFormItem>
             <ElButton type="primary" class="w-full mt-0.5" @click="handleLock" v-ripple>
-              {{ $t('lockScreen.lock.btnText') }}
+              {{ $t("lockScreen.lock.btnText") }}
             </ElButton>
           </ElForm>
         </div>
@@ -61,7 +62,7 @@
       <div class="flex-c flex-col w-80">
         <img class="w-16 h-16 mt-5 rounded-full" src="@imgs/user/avatar.webp" alt="用户头像" />
         <div class="mt-3 mb-3.5 text-base font-medium">
-          {{ userInfo.userName }}
+          {{ userInfo.username }}
         </div>
         <ElForm
           ref="unlockFormRef"
@@ -89,7 +90,7 @@
           </ElFormItem>
 
           <ElButton type="primary" class="w-full mt-2" @click="handleUnlock" v-ripple>
-            {{ $t('lockScreen.unlock.btnText') }}
+            {{ $t("lockScreen.unlock.btnText") }}
           </ElButton>
           <div class="w-full text-center">
             <ElButton
@@ -97,7 +98,7 @@
               class="mt-2.5 !text-g-600 hover:!text-theme hover:!bg-transparent"
               @click="toLogin"
             >
-              {{ $t('lockScreen.unlock.backBtnText') }}
+              {{ $t("lockScreen.unlock.backBtnText") }}
             </ElButton>
           </div>
         </ElForm>
@@ -107,413 +108,411 @@
 </template>
 
 <script setup lang="ts">
-  import { Lock, Unlock } from '@element-plus/icons-vue'
-  import type { FormInstance, FormRules } from 'element-plus'
-  import { useI18n } from 'vue-i18n'
-  import CryptoJS from 'crypto-js'
-  import { useUserStore } from '@/store/modules/user'
-  import { mittBus } from '@/utils/sys'
+import { Lock, Unlock } from "@element-plus/icons-vue";
+import type { FormInstance, FormRules } from "element-plus";
+import { useI18n } from "vue-i18n";
+import CryptoJS from "crypto-js";
+import { useUserStore } from "@/store/modules/user.store";
+import { mittBus } from "@/utils/sys";
 
-  // 国际化
-  const { t } = useI18n()
+// 国际化
+const { t } = useI18n();
 
-  // 环境变量
-  const ENCRYPT_KEY = import.meta.env.VITE_LOCK_ENCRYPT_KEY
+// 环境变量
+const ENCRYPT_KEY = import.meta.env.VITE_LOCK_ENCRYPT_KEY;
 
-  // Store
-  const userStore = useUserStore()
-  const { info: userInfo, lockPassword, isLock } = storeToRefs(userStore)
+// Store
+const userStore = useUserStore();
+const { info: userInfo, lockPassword, isLock } = storeToRefs(userStore);
 
-  // 响应式数据
-  const visible = ref<boolean>(false)
-  const lockInputRef = ref<any>(null)
-  const unlockInputRef = ref<any>(null)
-  const showDevToolsWarning = ref<boolean>(false)
+// 响应式数据
+const visible = ref<boolean>(false);
+const lockInputRef = ref<any>(null);
+const unlockInputRef = ref<any>(null);
+const showDevToolsWarning = ref<boolean>(false);
 
-  // 表单相关
-  const formRef = ref<FormInstance>()
-  const unlockFormRef = ref<FormInstance>()
+// 表单相关
+const formRef = ref<FormInstance>();
+const unlockFormRef = ref<FormInstance>();
 
-  const formData = reactive({
-    password: ''
-  })
+const formData = reactive({
+  password: "",
+});
 
-  const unlockForm = reactive({
-    password: ''
-  })
+const unlockForm = reactive({
+  password: "",
+});
 
-  // 表单验证规则
-  const rules = computed<FormRules>(() => ({
-    password: [
-      {
-        required: true,
-        message: t('lockScreen.lock.inputPlaceholder'),
-        trigger: 'blur'
-      }
-    ]
-  }))
+// 表单验证规则
+const rules = computed<FormRules>(() => ({
+  password: [
+    {
+      required: true,
+      message: t("lockScreen.lock.inputPlaceholder"),
+      trigger: "blur",
+    },
+  ],
+}));
 
-  // 检测是否为移动设备
-  const isMobile = () => {
-    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
-      navigator.userAgent
-    )
-  }
-
-  // 添加禁用控制台的函数
-  const disableDevTools = () => {
-    // 禁用右键菜单
-    const handleContextMenu = (e: Event) => {
-      if (isLock.value) {
-        e.preventDefault()
-        e.stopPropagation()
-        return false
-      }
-    }
-    document.addEventListener('contextmenu', handleContextMenu, true)
-
-    // 禁用开发者工具相关快捷键
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (!isLock.value) return
-
-      // 禁用 F12
-      if (e.key === 'F12') {
-        e.preventDefault()
-        e.stopPropagation()
-        return false
-      }
-
-      // 禁用 Ctrl+Shift+I/J/C/K (开发者工具)
-      if (e.ctrlKey && e.shiftKey) {
-        const key = e.key.toLowerCase()
-        if (['i', 'j', 'c', 'k'].includes(key)) {
-          e.preventDefault()
-          e.stopPropagation()
-          return false
-        }
-      }
-
-      // 禁用 Ctrl+U (查看源代码)
-      if (e.ctrlKey && e.key.toLowerCase() === 'u') {
-        e.preventDefault()
-        e.stopPropagation()
-        return false
-      }
-
-      // 禁用 Ctrl+S (保存页面)
-      if (e.ctrlKey && e.key.toLowerCase() === 's') {
-        e.preventDefault()
-        e.stopPropagation()
-        return false
-      }
-
-      // 禁用 Ctrl+A (全选)
-      if (e.ctrlKey && e.key.toLowerCase() === 'a') {
-        e.preventDefault()
-        e.stopPropagation()
-        return false
-      }
-
-      // 禁用 Ctrl+P (打印)
-      if (e.ctrlKey && e.key.toLowerCase() === 'p') {
-        e.preventDefault()
-        e.stopPropagation()
-        return false
-      }
-
-      // 禁用 Ctrl+F (查找)
-      if (e.ctrlKey && e.key.toLowerCase() === 'f') {
-        e.preventDefault()
-        e.stopPropagation()
-        return false
-      }
-
-      // 禁用 Alt+Tab (切换窗口)
-      if (e.altKey && e.key === 'Tab') {
-        e.preventDefault()
-        e.stopPropagation()
-        return false
-      }
-
-      // 禁用 Ctrl+Tab (切换标签页)
-      if (e.ctrlKey && e.key === 'Tab') {
-        e.preventDefault()
-        e.stopPropagation()
-        return false
-      }
-
-      // 禁用 Ctrl+W (关闭标签页)
-      if (e.ctrlKey && e.key.toLowerCase() === 'w') {
-        e.preventDefault()
-        e.stopPropagation()
-        return false
-      }
-
-      // 禁用 Ctrl+R 和 F5 (刷新页面)
-      if ((e.ctrlKey && e.key.toLowerCase() === 'r') || e.key === 'F5') {
-        e.preventDefault()
-        e.stopPropagation()
-        return false
-      }
-
-      // 禁用 Ctrl+Shift+R (强制刷新)
-      if (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === 'r') {
-        e.preventDefault()
-        e.stopPropagation()
-        return false
-      }
-    }
-    document.addEventListener('keydown', handleKeyDown, true)
-
-    // 禁用选择文本
-    const handleSelectStart = (e: Event) => {
-      if (isLock.value) {
-        e.preventDefault()
-        return false
-      }
-    }
-    document.addEventListener('selectstart', handleSelectStart, true)
-
-    // 禁用拖拽
-    const handleDragStart = (e: Event) => {
-      if (isLock.value) {
-        e.preventDefault()
-        return false
-      }
-    }
-    document.addEventListener('dragstart', handleDragStart, true)
-
-    // 监听开发者工具打开状态（仅在桌面端启用）
-    let devtools = { open: false }
-    const threshold = 160
-    let devToolsInterval: ReturnType<typeof setInterval> | null = null
-
-    const checkDevTools = () => {
-      if (!isLock.value || isMobile()) return
-
-      const isDevToolsOpen =
-        window.outerHeight - window.innerHeight > threshold ||
-        window.outerWidth - window.innerWidth > threshold
-
-      if (isDevToolsOpen && !devtools.open) {
-        devtools.open = true
-        showDevToolsWarning.value = true
-      } else if (!isDevToolsOpen && devtools.open) {
-        devtools.open = false
-        showDevToolsWarning.value = false
-      }
-    }
-
-    // 仅在桌面端启用开发者工具检测
-    if (!isMobile()) {
-      devToolsInterval = setInterval(checkDevTools, 500)
-    }
-
-    // 返回清理函数
-    return () => {
-      document.removeEventListener('contextmenu', handleContextMenu, true)
-      document.removeEventListener('keydown', handleKeyDown, true)
-      document.removeEventListener('selectstart', handleSelectStart, true)
-      document.removeEventListener('dragstart', handleDragStart, true)
-      if (devToolsInterval) {
-        clearInterval(devToolsInterval)
-      }
-    }
-  }
-
-  // 工具函数
-  const verifyPassword = (inputPassword: string, storedPassword: string): boolean => {
-    try {
-      const decryptedPassword = CryptoJS.AES.decrypt(storedPassword, ENCRYPT_KEY).toString(
-        CryptoJS.enc.Utf8
-      )
-      return inputPassword === decryptedPassword
-    } catch (error) {
-      console.error('密码解密失败:', error)
-      return false
-    }
-  }
-
-  // 事件处理函数
-  const handleKeydown = (event: KeyboardEvent) => {
-    if (event.altKey && event.key.toLowerCase() === '¬') {
-      event.preventDefault()
-      visible.value = true
-    }
-  }
-
-  const handleDialogOpen = () => {
-    setTimeout(() => {
-      lockInputRef.value?.input?.focus()
-    }, 100)
-  }
-
-  const handleLock = async () => {
-    if (!formRef.value) return
-
-    await formRef.value.validate((valid, fields) => {
-      if (valid) {
-        const encryptedPassword = CryptoJS.AES.encrypt(formData.password, ENCRYPT_KEY).toString()
-        userStore.setLockStatus(true)
-        userStore.setLockPassword(encryptedPassword)
-        visible.value = false
-        formData.password = ''
-      } else {
-        console.error('表单验证失败:', fields)
-      }
-    })
-  }
-
-  const handleUnlock = async () => {
-    if (!unlockFormRef.value) return
-
-    await unlockFormRef.value.validate((valid, fields) => {
-      if (valid) {
-        const isValid = verifyPassword(unlockForm.password, lockPassword.value)
-
-        if (isValid) {
-          try {
-            userStore.setLockStatus(false)
-            userStore.setLockPassword('')
-            unlockForm.password = ''
-            visible.value = false
-            showDevToolsWarning.value = false
-          } catch (error) {
-            console.error('更新store失败:', error)
-          }
-        } else {
-          // 触发抖动动画
-          const inputElement = unlockInputRef.value?.$el
-          if (inputElement) {
-            inputElement.classList.add('shake-animation')
-            setTimeout(() => {
-              inputElement.classList.remove('shake-animation')
-            }, 300)
-          }
-          ElMessage.error(t('lockScreen.pwdError'))
-          unlockForm.password = ''
-        }
-      } else {
-        console.error('表单验证失败:', fields)
-      }
-    })
-  }
-
-  const toLogin = () => {
-    userStore.logOut()
-  }
-
-  const openLockScreen = () => {
-    visible.value = true
-  }
-
-  // 监听锁屏状态变化
-  watch(isLock, (newValue) => {
-    if (newValue) {
-      document.body.style.overflow = 'hidden'
-      setTimeout(() => {
-        unlockInputRef.value?.input?.focus()
-      }, 100)
-    } else {
-      document.body.style.overflow = 'auto'
-      showDevToolsWarning.value = false
-    }
-  })
-
-  // 存储清理函数
-  let cleanupDevTools: (() => void) | null = null
-
-  // 生命周期钩子
-  onMounted(() => {
-    mittBus.on('openLockScreen', openLockScreen)
-    document.addEventListener('keydown', handleKeydown)
+// 检测是否为移动设备
+const isMobile = () => {
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+};
 
+// 添加禁用控制台的函数
+const disableDevTools = () => {
+  // 禁用右键菜单
+  const handleContextMenu = (e: Event) => {
     if (isLock.value) {
-      visible.value = true
-      setTimeout(() => {
-        unlockInputRef.value?.input?.focus()
-      }, 100)
+      e.preventDefault();
+      e.stopPropagation();
+      return false;
+    }
+  };
+  document.addEventListener("contextmenu", handleContextMenu, true);
+
+  // 禁用开发者工具相关快捷键
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (!isLock.value) return;
+
+    // 禁用 F12
+    if (e.key === "F12") {
+      e.preventDefault();
+      e.stopPropagation();
+      return false;
     }
 
-    // 初始化禁用开发者工具功能
-    cleanupDevTools = disableDevTools()
-  })
-
-  onUnmounted(() => {
-    document.removeEventListener('keydown', handleKeydown)
-    document.body.style.overflow = 'auto'
-    // 清理禁用开发者工具的事件监听器
-    if (cleanupDevTools) {
-      cleanupDevTools()
-      cleanupDevTools = null
+    // 禁用 Ctrl+Shift+I/J/C/K (开发者工具)
+    if (e.ctrlKey && e.shiftKey) {
+      const key = e.key.toLowerCase();
+      if (["i", "j", "c", "k"].includes(key)) {
+        e.preventDefault();
+        e.stopPropagation();
+        return false;
+      }
     }
-  })
+
+    // 禁用 Ctrl+U (查看源代码)
+    if (e.ctrlKey && e.key.toLowerCase() === "u") {
+      e.preventDefault();
+      e.stopPropagation();
+      return false;
+    }
+
+    // 禁用 Ctrl+S (保存页面)
+    if (e.ctrlKey && e.key.toLowerCase() === "s") {
+      e.preventDefault();
+      e.stopPropagation();
+      return false;
+    }
+
+    // 禁用 Ctrl+A (全选)
+    if (e.ctrlKey && e.key.toLowerCase() === "a") {
+      e.preventDefault();
+      e.stopPropagation();
+      return false;
+    }
+
+    // 禁用 Ctrl+P (打印)
+    if (e.ctrlKey && e.key.toLowerCase() === "p") {
+      e.preventDefault();
+      e.stopPropagation();
+      return false;
+    }
+
+    // 禁用 Ctrl+F (查找)
+    if (e.ctrlKey && e.key.toLowerCase() === "f") {
+      e.preventDefault();
+      e.stopPropagation();
+      return false;
+    }
+
+    // 禁用 Alt+Tab (切换窗口)
+    if (e.altKey && e.key === "Tab") {
+      e.preventDefault();
+      e.stopPropagation();
+      return false;
+    }
+
+    // 禁用 Ctrl+Tab (切换标签页)
+    if (e.ctrlKey && e.key === "Tab") {
+      e.preventDefault();
+      e.stopPropagation();
+      return false;
+    }
+
+    // 禁用 Ctrl+W (关闭标签页)
+    if (e.ctrlKey && e.key.toLowerCase() === "w") {
+      e.preventDefault();
+      e.stopPropagation();
+      return false;
+    }
+
+    // 禁用 Ctrl+R 和 F5 (刷新页面)
+    if ((e.ctrlKey && e.key.toLowerCase() === "r") || e.key === "F5") {
+      e.preventDefault();
+      e.stopPropagation();
+      return false;
+    }
+
+    // 禁用 Ctrl+Shift+R (强制刷新)
+    if (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === "r") {
+      e.preventDefault();
+      e.stopPropagation();
+      return false;
+    }
+  };
+  document.addEventListener("keydown", handleKeyDown, true);
+
+  // 禁用选择文本
+  const handleSelectStart = (e: Event) => {
+    if (isLock.value) {
+      e.preventDefault();
+      return false;
+    }
+  };
+  document.addEventListener("selectstart", handleSelectStart, true);
+
+  // 禁用拖拽
+  const handleDragStart = (e: Event) => {
+    if (isLock.value) {
+      e.preventDefault();
+      return false;
+    }
+  };
+  document.addEventListener("dragstart", handleDragStart, true);
+
+  // 监听开发者工具打开状态（仅在桌面端启用）
+  const devtools = { open: false };
+  const threshold = 160;
+  let devToolsInterval: ReturnType<typeof setInterval> | null = null;
+
+  const checkDevTools = () => {
+    if (!isLock.value || isMobile()) return;
+
+    const isDevToolsOpen =
+      window.outerHeight - window.innerHeight > threshold ||
+      window.outerWidth - window.innerWidth > threshold;
+
+    if (isDevToolsOpen && !devtools.open) {
+      devtools.open = true;
+      showDevToolsWarning.value = true;
+    } else if (!isDevToolsOpen && devtools.open) {
+      devtools.open = false;
+      showDevToolsWarning.value = false;
+    }
+  };
+
+  // 仅在桌面端启用开发者工具检测
+  if (!isMobile()) {
+    devToolsInterval = setInterval(checkDevTools, 500);
+  }
+
+  // 返回清理函数
+  return () => {
+    document.removeEventListener("contextmenu", handleContextMenu, true);
+    document.removeEventListener("keydown", handleKeyDown, true);
+    document.removeEventListener("selectstart", handleSelectStart, true);
+    document.removeEventListener("dragstart", handleDragStart, true);
+    if (devToolsInterval) {
+      clearInterval(devToolsInterval);
+    }
+  };
+};
+
+// 工具函数
+const verifyPassword = (inputPassword: string, storedPassword: string): boolean => {
+  try {
+    const decryptedPassword = CryptoJS.AES.decrypt(storedPassword, ENCRYPT_KEY).toString(
+      CryptoJS.enc.Utf8
+    );
+    return inputPassword === decryptedPassword;
+  } catch (error) {
+    console.error("密码解密失败:", error);
+    return false;
+  }
+};
+
+// 事件处理函数
+const handleKeydown = (event: KeyboardEvent) => {
+  if (event.altKey && event.key.toLowerCase() === "¬") {
+    event.preventDefault();
+    visible.value = true;
+  }
+};
+
+const handleDialogOpen = () => {
+  setTimeout(() => {
+    lockInputRef.value?.input?.focus();
+  }, 100);
+};
+
+const handleLock = async () => {
+  if (!formRef.value) return;
+
+  await formRef.value.validate((valid, fields) => {
+    if (valid) {
+      const encryptedPassword = CryptoJS.AES.encrypt(formData.password, ENCRYPT_KEY).toString();
+      userStore.setLockStatus(true);
+      userStore.setLockPassword(encryptedPassword);
+      visible.value = false;
+      formData.password = "";
+    } else {
+      console.error("表单验证失败:", fields);
+    }
+  });
+};
+
+const handleUnlock = async () => {
+  if (!unlockFormRef.value) return;
+
+  await unlockFormRef.value.validate((valid, fields) => {
+    if (valid) {
+      const isValid = verifyPassword(unlockForm.password, lockPassword.value);
+
+      if (isValid) {
+        try {
+          userStore.setLockStatus(false);
+          userStore.setLockPassword("");
+          unlockForm.password = "";
+          visible.value = false;
+          showDevToolsWarning.value = false;
+        } catch (error) {
+          console.error("更新store失败:", error);
+        }
+      } else {
+        // 触发抖动动画
+        const inputElement = unlockInputRef.value?.$el;
+        if (inputElement) {
+          inputElement.classList.add("shake-animation");
+          setTimeout(() => {
+            inputElement.classList.remove("shake-animation");
+          }, 300);
+        }
+        ElMessage.error(t("lockScreen.pwdError"));
+        unlockForm.password = "";
+      }
+    } else {
+      console.error("表单验证失败:", fields);
+    }
+  });
+};
+
+const toLogin = () => {
+  userStore.logout();
+};
+
+const openLockScreen = () => {
+  visible.value = true;
+};
+
+// 监听锁屏状态变化
+watch(isLock, (newValue) => {
+  if (newValue) {
+    document.body.style.overflow = "hidden";
+    setTimeout(() => {
+      unlockInputRef.value?.input?.focus();
+    }, 100);
+  } else {
+    document.body.style.overflow = "auto";
+    showDevToolsWarning.value = false;
+  }
+});
+
+// 存储清理函数
+let cleanupDevTools: (() => void) | null = null;
+
+// 生命周期钩子
+onMounted(() => {
+  mittBus.on("openLockScreen", openLockScreen);
+  document.addEventListener("keydown", handleKeydown);
+
+  if (isLock.value) {
+    visible.value = true;
+    setTimeout(() => {
+      unlockInputRef.value?.input?.focus();
+    }, 100);
+  }
+
+  // 初始化禁用开发者工具功能
+  cleanupDevTools = disableDevTools();
+});
+
+onUnmounted(() => {
+  document.removeEventListener("keydown", handleKeydown);
+  document.body.style.overflow = "auto";
+  // 清理禁用开发者工具的事件监听器
+  if (cleanupDevTools) {
+    cleanupDevTools();
+    cleanupDevTools = null;
+  }
+});
 </script>
 
 <style lang="scss" scoped>
-  .layout-lock-screen :deep(.el-dialog) {
-    border-radius: 10px;
-  }
+.layout-lock-screen :deep(.el-dialog) {
+  border-radius: 10px;
+}
 
+.unlock-content {
+  position: fixed;
+  inset: 0;
+  z-index: 2500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background-color: #fff;
+  background-image: url("@imgs/lock/bg_light.webp");
+  background-size: cover;
+  transition: transform 0.3s ease-in-out;
+}
+
+.dark {
   .unlock-content {
-    position: fixed;
-    inset: 0;
-    z-index: 2500;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    background-color: #fff;
-    background-image: url('@imgs/lock/bg_light.webp');
-    background-size: cover;
-    transition: transform 0.3s ease-in-out;
+    background-image: url("@imgs/lock/bg_dark.webp");
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
   }
 
-  .dark {
-    .unlock-content {
-      background-image: url('@imgs/lock/bg_dark.webp');
-    }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.animate-fade-in {
+  animation: fade-in 0.3s ease-in-out;
+}
+
+@keyframes shake {
+  0%,
+  100% {
+    transform: translateX(0);
   }
 
-  @keyframes fade-in {
-    from {
-      opacity: 0;
-      transform: scale(0.9);
-    }
-
-    to {
-      opacity: 1;
-      transform: scale(1);
-    }
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
+    transform: translateX(-10px);
   }
 
-  .animate-fade-in {
-    animation: fade-in 0.3s ease-in-out;
+  20%,
+  40%,
+  60%,
+  80% {
+    transform: translateX(10px);
   }
+}
 
-  @keyframes shake {
-    0%,
-    100% {
-      transform: translateX(0);
-    }
-
-    10%,
-    30%,
-    50%,
-    70%,
-    90% {
-      transform: translateX(-10px);
-    }
-
-    20%,
-    40%,
-    60%,
-    80% {
-      transform: translateX(10px);
-    }
-  }
-
-  .shake-animation {
-    animation: shake 0.5s ease-in-out;
-  }
+.shake-animation {
+  animation: shake 0.5s ease-in-out;
+}
 </style>
diff --git a/frontend/new-web/src/components/core/layouts/art-settings-panel/composables/useSettingsConfig.ts b/frontend/new-web/src/components/core/layouts/art-settings-panel/composables/useSettingsConfig.ts
index 35e8066e..e685bf31 100644
--- a/frontend/new-web/src/components/core/layouts/art-settings-panel/composables/useSettingsConfig.ts
+++ b/frontend/new-web/src/components/core/layouts/art-settings-panel/composables/useSettingsConfig.ts
@@ -1,91 +1,91 @@
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { ContainerWidthEnum } from '@/enums/appEnum'
-import AppConfig from '@/config'
-import { headerBarConfig } from '@/config/modules/headerBar'
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { ContainerWidthEnum } from "@/enums/appEnum";
+import AppConfig from "@/config";
+import { headerBarConfig } from "@/config/modules/headerBar";
 
 /**
  * 设置项配置选项管理
  */
 export function useSettingsConfig() {
-  const { t } = useI18n()
+  const { t } = useI18n();
 
   // 标签页风格选项
   const tabStyleOptions = computed(() => [
     {
-      value: 'tab-default',
-      label: t('setting.tabStyle.default')
+      value: "tab-default",
+      label: t("setting.tabStyle.default"),
     },
     {
-      value: 'tab-card',
-      label: t('setting.tabStyle.card')
+      value: "tab-card",
+      label: t("setting.tabStyle.card"),
     },
     {
-      value: 'tab-google',
-      label: t('setting.tabStyle.google')
-    }
-  ])
+      value: "tab-google",
+      label: t("setting.tabStyle.google"),
+    },
+  ]);
 
   // 页面切换动画选项
   const pageTransitionOptions = computed(() => [
     {
-      value: '',
-      label: t('setting.transition.list.none')
+      value: "",
+      label: t("setting.transition.list.none"),
     },
     {
-      value: 'fade',
-      label: t('setting.transition.list.fade')
+      value: "fade",
+      label: t("setting.transition.list.fade"),
     },
     {
-      value: 'slide-left',
-      label: t('setting.transition.list.slideLeft')
+      value: "slide-left",
+      label: t("setting.transition.list.slideLeft"),
     },
     {
-      value: 'slide-bottom',
-      label: t('setting.transition.list.slideBottom')
+      value: "slide-bottom",
+      label: t("setting.transition.list.slideBottom"),
     },
     {
-      value: 'slide-top',
-      label: t('setting.transition.list.slideTop')
-    }
-  ])
+      value: "slide-top",
+      label: t("setting.transition.list.slideTop"),
+    },
+  ]);
 
   // 圆角大小选项
   const customRadiusOptions = [
-    { value: '0', label: '0' },
-    { value: '0.25', label: '0.25' },
-    { value: '0.5', label: '0.5' },
-    { value: '0.75', label: '0.75' },
-    { value: '1', label: '1' }
-  ]
+    { value: "0", label: "0" },
+    { value: "0.25", label: "0.25" },
+    { value: "0.5", label: "0.5" },
+    { value: "0.75", label: "0.75" },
+    { value: "1", label: "1" },
+  ];
 
   // 容器宽度选项
   const containerWidthOptions = computed(() => [
     {
       value: ContainerWidthEnum.FULL,
-      label: t('setting.container.list[0]'),
-      icon: 'icon-park-outline:auto-width'
+      label: t("setting.container.list[0]"),
+      icon: "icon-park-outline:auto-width",
     },
     {
       value: ContainerWidthEnum.BOXED,
-      label: t('setting.container.list[1]'),
-      icon: 'ix:width'
-    }
-  ])
+      label: t("setting.container.list[1]"),
+      icon: "ix:width",
+    },
+  ]);
 
   // 盒子样式选项
   const boxStyleOptions = computed(() => [
     {
-      value: 'border-mode',
-      label: t('setting.box.list[0]'),
-      type: 'border-mode' as const
+      value: "border-mode",
+      label: t("setting.box.list[0]"),
+      type: "border-mode" as const,
     },
     {
-      value: 'shadow-mode',
-      label: t('setting.box.list[1]'),
-      type: 'shadow-mode' as const
-    }
-  ])
+      value: "shadow-mode",
+      label: t("setting.box.list[1]"),
+      type: "shadow-mode" as const,
+    },
+  ]);
 
   // 从配置文件获取的选项
   const configOptions = {
@@ -96,124 +96,124 @@ export function useSettingsConfig() {
     themeList: AppConfig.settingThemeList,
 
     // 菜单布局选项
-    menuLayoutList: AppConfig.menuLayoutList
-  }
+    menuLayoutList: AppConfig.menuLayoutList,
+  };
 
   // 基础设置项配置
   const basicSettingsConfig = computed(() => {
     // 定义所有基础设置项
     const allSettings = [
       {
-        key: 'showWorkTab',
-        label: t('setting.basics.list.multiTab'),
-        type: 'switch' as const,
-        handler: 'workTab',
-        headerBarKey: null // 不依赖headerBar配置
+        key: "showWorkTab",
+        label: t("setting.basics.list.multiTab"),
+        type: "switch" as const,
+        handler: "workTab",
+        headerBarKey: null, // 不依赖headerBar配置
       },
       {
-        key: 'uniqueOpened',
-        label: t('setting.basics.list.accordion'),
-        type: 'switch' as const,
-        handler: 'uniqueOpened',
-        headerBarKey: null // 不依赖headerBar配置
+        key: "uniqueOpened",
+        label: t("setting.basics.list.accordion"),
+        type: "switch" as const,
+        handler: "uniqueOpened",
+        headerBarKey: null, // 不依赖headerBar配置
       },
       {
-        key: 'showMenuButton',
-        label: t('setting.basics.list.collapseSidebar'),
-        type: 'switch' as const,
-        handler: 'menuButton',
-        headerBarKey: 'menuButton' as const
+        key: "showMenuButton",
+        label: t("setting.basics.list.collapseSidebar"),
+        type: "switch" as const,
+        handler: "menuButton",
+        headerBarKey: "menuButton" as const,
       },
       {
-        key: 'showFastEnter',
-        label: t('setting.basics.list.fastEnter'),
-        type: 'switch' as const,
-        handler: 'fastEnter',
-        headerBarKey: 'fastEnter' as const
+        key: "showFastEnter",
+        label: t("setting.basics.list.fastEnter"),
+        type: "switch" as const,
+        handler: "fastEnter",
+        headerBarKey: "fastEnter" as const,
       },
       {
-        key: 'showRefreshButton',
-        label: t('setting.basics.list.reloadPage'),
-        type: 'switch' as const,
-        handler: 'refreshButton',
-        headerBarKey: 'refreshButton' as const
+        key: "showRefreshButton",
+        label: t("setting.basics.list.reloadPage"),
+        type: "switch" as const,
+        handler: "refreshButton",
+        headerBarKey: "refreshButton" as const,
       },
       {
-        key: 'showCrumbs',
-        label: t('setting.basics.list.breadcrumb'),
-        type: 'switch' as const,
-        handler: 'crumbs',
+        key: "showCrumbs",
+        label: t("setting.basics.list.breadcrumb"),
+        type: "switch" as const,
+        handler: "crumbs",
         mobileHide: true,
-        headerBarKey: 'breadcrumb' as const
+        headerBarKey: "breadcrumb" as const,
       },
       {
-        key: 'showLanguage',
-        label: t('setting.basics.list.language'),
-        type: 'switch' as const,
-        handler: 'language',
-        headerBarKey: 'language' as const
+        key: "showLanguage",
+        label: t("setting.basics.list.language"),
+        type: "switch" as const,
+        handler: "language",
+        headerBarKey: "language" as const,
       },
       {
-        key: 'showNprogress',
-        label: t('setting.basics.list.progressBar'),
-        type: 'switch' as const,
-        handler: 'nprogress',
-        headerBarKey: null // 不依赖headerBar配置
+        key: "showNprogress",
+        label: t("setting.basics.list.progressBar"),
+        type: "switch" as const,
+        handler: "nprogress",
+        headerBarKey: null, // 不依赖headerBar配置
       },
       {
-        key: 'colorWeak',
-        label: t('setting.basics.list.weakMode'),
-        type: 'switch' as const,
-        handler: 'colorWeak',
-        headerBarKey: null // 不依赖headerBar配置
+        key: "colorWeak",
+        label: t("setting.basics.list.weakMode"),
+        type: "switch" as const,
+        handler: "colorWeak",
+        headerBarKey: null, // 不依赖headerBar配置
       },
       {
-        key: 'watermarkVisible',
-        label: t('setting.basics.list.watermark'),
-        type: 'switch' as const,
-        handler: 'watermark',
-        headerBarKey: null // 不依赖headerBar配置
+        key: "watermarkVisible",
+        label: t("setting.basics.list.watermark"),
+        type: "switch" as const,
+        handler: "watermark",
+        headerBarKey: null, // 不依赖headerBar配置
       },
       {
-        key: 'menuOpenWidth',
-        label: t('setting.basics.list.menuWidth'),
-        type: 'input-number' as const,
-        handler: 'menuOpenWidth',
+        key: "menuOpenWidth",
+        label: t("setting.basics.list.menuWidth"),
+        type: "input-number" as const,
+        handler: "menuOpenWidth",
         min: 180,
         max: 320,
         step: 10,
-        style: { width: '120px' },
-        controlsPosition: 'right' as const,
-        headerBarKey: null // 不依赖headerBar配置
+        style: { width: "120px" },
+        controlsPosition: "right" as const,
+        headerBarKey: null, // 不依赖headerBar配置
       },
       {
-        key: 'tabStyle',
-        label: t('setting.basics.list.tabStyle'),
-        type: 'select' as const,
-        handler: 'tabStyle',
+        key: "tabStyle",
+        label: t("setting.basics.list.tabStyle"),
+        type: "select" as const,
+        handler: "tabStyle",
         options: tabStyleOptions.value,
-        style: { width: '120px' },
-        headerBarKey: null // 不依赖headerBar配置
+        style: { width: "120px" },
+        headerBarKey: null, // 不依赖headerBar配置
       },
       {
-        key: 'pageTransition',
-        label: t('setting.basics.list.pageTransition'),
-        type: 'select' as const,
-        handler: 'pageTransition',
+        key: "pageTransition",
+        label: t("setting.basics.list.pageTransition"),
+        type: "select" as const,
+        handler: "pageTransition",
         options: pageTransitionOptions.value,
-        style: { width: '120px' },
-        headerBarKey: null // 不依赖headerBar配置
+        style: { width: "120px" },
+        headerBarKey: null, // 不依赖headerBar配置
       },
       {
-        key: 'customRadius',
-        label: t('setting.basics.list.borderRadius'),
-        type: 'select' as const,
-        handler: 'customRadius',
+        key: "customRadius",
+        label: t("setting.basics.list.borderRadius"),
+        type: "select" as const,
+        handler: "customRadius",
         options: customRadiusOptions,
-        style: { width: '120px' },
-        headerBarKey: null // 不依赖headerBar配置
-      }
-    ]
+        style: { width: "120px" },
+        headerBarKey: null, // 不依赖headerBar配置
+      },
+    ];
 
     // 根据 headerBarConfig 过滤设置项
     return (
@@ -221,17 +221,17 @@ export function useSettingsConfig() {
         .filter((setting) => {
           // 如果设置项不依赖headerBar配置，则始终显示
           if (setting.headerBarKey === null) {
-            return true
+            return true;
           }
 
           // 如果依赖headerBar配置，检查对应的功能是否启用
-          const headerBarFeature = headerBarConfig[setting.headerBarKey]
-          return headerBarFeature?.enabled !== false
+          const headerBarFeature = headerBarConfig[setting.headerBarKey];
+          return headerBarFeature?.enabled !== false;
         })
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         .map(({ headerBarKey: _headerBarKey, ...setting }) => setting)
-    )
-  })
+    );
+  });
 
   return {
     // 选项配置
@@ -243,6 +243,6 @@ export function useSettingsConfig() {
     configOptions,
 
     // 设置项配置
-    basicSettingsConfig
-  }
+    basicSettingsConfig,
+  };
 }
diff --git a/frontend/new-web/src/components/core/layouts/art-settings-panel/composables/useSettingsHandlers.ts b/frontend/new-web/src/components/core/layouts/art-settings-panel/composables/useSettingsHandlers.ts
index 392c6900..ce6ac5df 100644
--- a/frontend/new-web/src/components/core/layouts/art-settings-panel/composables/useSettingsHandlers.ts
+++ b/frontend/new-web/src/components/core/layouts/art-settings-panel/composables/useSettingsHandlers.ts
@@ -1,49 +1,49 @@
-import { useSettingStore } from '@/store/modules/setting'
-import { storeToRefs } from 'pinia'
-import type { ContainerWidthEnum } from '@/enums/appEnum'
+import { useSettingsStore } from "@/store/modules/setting.store";
+import { storeToRefs } from "pinia";
+import type { ContainerWidthEnum } from "@/enums/appEnum";
 
 /**
  * 设置项通用处理逻辑
  */
 export function useSettingsHandlers() {
-  const settingStore = useSettingStore()
+  const settingStore = useSettingsStore();
 
   // DOM 操作相关
   const domOperations = {
     // 设置HTML类名
     setHtmlClass: (className: string, add: boolean) => {
-      const el = document.getElementsByTagName('html')[0]
+      const el = document.getElementsByTagName("html")[0];
       if (add) {
-        el.classList.add(className)
+        el.classList.add(className);
       } else {
-        el.classList.remove(className)
+        el.classList.remove(className);
       }
     },
 
     // 设置根元素属性
     setRootAttribute: (attribute: string, value: string) => {
-      const el = document.documentElement
-      el.setAttribute(attribute, value)
+      const el = document.documentElement;
+      el.setAttribute(attribute, value);
     },
 
     // 设置body类名
     setBodyClass: (className: string, add: boolean) => {
-      const el = document.getElementsByTagName('body')[0]
+      const el = document.getElementsByTagName("body")[0];
       if (add) {
-        el.classList.add(className)
+        el.classList.add(className);
       } else {
-        el.classList.remove(className)
+        el.classList.remove(className);
       }
-    }
-  }
+    },
+  };
 
   // 通用切换处理器
   const createToggleHandler = (storeMethod: () => void, callback?: () => void) => {
     return () => {
-      storeMethod()
-      callback?.()
-    }
-  }
+      storeMethod();
+      callback?.();
+    };
+  };
 
   // 通用值变更处理器
   const createValueHandler = <T>(
@@ -52,11 +52,11 @@ export function useSettingsHandlers() {
   ) => {
     return (value: T) => {
       if (value !== undefined && value !== null) {
-        storeMethod(value)
-        callback?.(value)
+        storeMethod(value);
+        callback?.(value);
       }
-    }
-  }
+    };
+  };
 
   // 基础设置处理器
   const basicHandlers = {
@@ -88,7 +88,7 @@ export function useSettingsHandlers() {
     colorWeak: createToggleHandler(
       () => settingStore.setColorWeak(),
       () => {
-        domOperations.setHtmlClass('color-weak', settingStore.colorWeak)
+        domOperations.setHtmlClass("color-weak", settingStore.colorWeak);
       }
     ),
 
@@ -113,47 +113,47 @@ export function useSettingsHandlers() {
     // 圆角大小
     customRadius: createValueHandler<string>((radius: string) =>
       settingStore.setCustomRadius(radius)
-    )
-  }
+    ),
+  };
 
   // 盒子样式处理器
   const boxStyleHandlers = {
     // 设置盒子模式
-    setBoxMode: (type: 'border-mode' | 'shadow-mode') => {
-      const { boxBorderMode } = storeToRefs(settingStore)
+    setBoxMode: (type: "border-mode" | "shadow-mode") => {
+      const { boxBorderMode } = storeToRefs(settingStore);
 
       // 防止重复设置
       if (
-        (type === 'shadow-mode' && boxBorderMode.value === false) ||
-        (type === 'border-mode' && boxBorderMode.value === true)
+        (type === "shadow-mode" && boxBorderMode.value === false) ||
+        (type === "border-mode" && boxBorderMode.value === true)
       ) {
-        return
+        return;
       }
 
       setTimeout(() => {
-        domOperations.setRootAttribute('data-box-mode', type)
-        settingStore.setBorderMode()
-      }, 50)
-    }
-  }
+        domOperations.setRootAttribute("data-box-mode", type);
+        settingStore.setBorderMode();
+      }, 50);
+    },
+  };
 
   // 颜色设置处理器
   const colorHandlers = {
     // 选择主题色
     selectColor: (theme: string) => {
-      settingStore.setElementTheme(theme)
-      settingStore.reload()
-    }
-  }
+      settingStore.setElementTheme(theme);
+      settingStore.reload();
+    },
+  };
 
   // 容器设置处理器
   const containerHandlers = {
     // 设置容器宽度
     setWidth: (type: ContainerWidthEnum) => {
-      settingStore.setContainerWidth(type)
-      settingStore.reload()
-    }
-  }
+      settingStore.setContainerWidth(type);
+      settingStore.reload();
+    },
+  };
 
   return {
     domOperations,
@@ -162,6 +162,6 @@ export function useSettingsHandlers() {
     colorHandlers,
     containerHandlers,
     createToggleHandler,
-    createValueHandler
-  }
+    createValueHandler,
+  };
 }
diff --git a/frontend/new-web/src/components/core/layouts/art-settings-panel/composables/useSettingsPanel.ts b/frontend/new-web/src/components/core/layouts/art-settings-panel/composables/useSettingsPanel.ts
index f5e4e56e..df06dedf 100644
--- a/frontend/new-web/src/components/core/layouts/art-settings-panel/composables/useSettingsPanel.ts
+++ b/frontend/new-web/src/components/core/layouts/art-settings-panel/composables/useSettingsPanel.ts
@@ -1,93 +1,93 @@
-import { ref, computed, watch } from 'vue'
-import { useSettingStore } from '@/store/modules/setting'
-import { storeToRefs } from 'pinia'
-import { useBreakpoints } from '@vueuse/core'
-import AppConfig from '@/config'
-import { SystemThemeEnum, MenuTypeEnum } from '@/enums/appEnum'
-import { mittBus } from '@/utils/sys'
-import { StorageConfig } from '@/utils'
-import { useTheme } from '@/hooks/core/useTheme'
-import { useCeremony } from '@/hooks/core/useCeremony'
-import { useSettingsState } from './useSettingsState'
-import { useSettingsHandlers } from './useSettingsHandlers'
+import { ref, computed, watch } from "vue";
+import { useSettingsStore } from "@/store/modules/setting.store";
+import { storeToRefs } from "pinia";
+import { useBreakpoints } from "@vueuse/core";
+import AppConfig from "@/config";
+import { SystemThemeEnum, MenuTypeEnum } from "@/enums/appEnum";
+import { mittBus } from "@/utils/sys";
+import { StorageConfig } from "@/utils";
+import { useTheme } from "@/hooks/core/useTheme";
+import { useCeremony } from "@/hooks/core/useCeremony";
+import { useSettingsState } from "./useSettingsState";
+import { useSettingsHandlers } from "./useSettingsHandlers";
 
 /**
  * 设置面板核心逻辑管理
  */
 export function useSettingsPanel() {
-  const settingStore = useSettingStore()
-  const { systemThemeType, systemThemeMode, menuType } = storeToRefs(settingStore)
+  const settingStore = useSettingsStore();
+  const { systemThemeType, systemThemeMode, menuType } = storeToRefs(settingStore);
 
   // Composables
-  const { openFestival, cleanup } = useCeremony()
-  const { setSystemTheme, setSystemAutoTheme } = useTheme()
-  const { initColorWeak } = useSettingsState()
-  const { domOperations } = useSettingsHandlers()
+  const { openFestival, cleanup } = useCeremony();
+  const { setSystemTheme, setSystemAutoTheme } = useTheme();
+  const { initColorWeak } = useSettingsState();
+  const { domOperations } = useSettingsHandlers();
 
   // 响应式状态
-  const showDrawer = ref(false)
+  const showDrawer = ref(false);
 
   // 使用 VueUse breakpoints 优化性能
-  const breakpoints = useBreakpoints({ tablet: 1000 })
-  const isMobile = breakpoints.smaller('tablet')
+  const breakpoints = useBreakpoints({ tablet: 1000 });
+  const isMobile = breakpoints.smaller("tablet");
 
   // 记录窗口宽度变化前的菜单类型
   const getStoredDesktopMenuType = (): MenuTypeEnum | undefined => {
-    const storedMenuType = localStorage.getItem(StorageConfig.RESPONSIVE_MENU_TYPE_KEY)
+    const storedMenuType = localStorage.getItem(StorageConfig.RESPONSIVE_MENU_TYPE_KEY);
     return Object.values(MenuTypeEnum).includes(storedMenuType as MenuTypeEnum)
       ? (storedMenuType as MenuTypeEnum)
-      : undefined
-  }
+      : undefined;
+  };
 
   const setStoredDesktopMenuType = (type: MenuTypeEnum) => {
-    localStorage.setItem(StorageConfig.RESPONSIVE_MENU_TYPE_KEY, type)
-  }
+    localStorage.setItem(StorageConfig.RESPONSIVE_MENU_TYPE_KEY, type);
+  };
 
   const clearStoredDesktopMenuType = () => {
-    localStorage.removeItem(StorageConfig.RESPONSIVE_MENU_TYPE_KEY)
-  }
+    localStorage.removeItem(StorageConfig.RESPONSIVE_MENU_TYPE_KEY);
+  };
 
-  const storedDesktopMenuType = getStoredDesktopMenuType()
-  const beforeMenuType = ref<MenuTypeEnum | undefined>(storedDesktopMenuType)
-  const hasChangedMenu = ref(Boolean(storedDesktopMenuType))
+  const storedDesktopMenuType = getStoredDesktopMenuType();
+  const beforeMenuType = ref<MenuTypeEnum | undefined>(storedDesktopMenuType);
+  const hasChangedMenu = ref(Boolean(storedDesktopMenuType));
 
   // 计算属性
-  const systemThemeColor = computed(() => settingStore.systemThemeColor as string)
+  const systemThemeColor = computed(() => settingStore.systemThemeColor as string);
 
   // 主题相关处理
   const useThemeHandlers = () => {
     // 初始化系统颜色
     const initSystemColor = () => {
       if (!AppConfig.systemMainColor.includes(systemThemeColor.value)) {
-        settingStore.setElementTheme(AppConfig.systemMainColor[0])
-        settingStore.reload()
+        settingStore.setElementTheme(AppConfig.systemMainColor[0]);
+        settingStore.reload();
       }
-    }
+    };
 
     // 初始化系统主题
     const initSystemTheme = () => {
       if (systemThemeMode.value === SystemThemeEnum.AUTO) {
-        setSystemAutoTheme()
+        setSystemAutoTheme();
       } else {
-        setSystemTheme(systemThemeType.value)
+        setSystemTheme(systemThemeType.value);
       }
-    }
+    };
 
     // 监听系统主题变化
     const listenerSystemTheme = () => {
-      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
-      mediaQuery.addEventListener('change', initSystemTheme)
+      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+      mediaQuery.addEventListener("change", initSystemTheme);
       return () => {
-        mediaQuery.removeEventListener('change', initSystemTheme)
-      }
-    }
+        mediaQuery.removeEventListener("change", initSystemTheme);
+      };
+    };
 
     return {
       initSystemColor,
       initSystemTheme,
-      listenerSystemTheme
-    }
-  }
+      listenerSystemTheme,
+    };
+  };
 
   // 响应式布局处理
   const useResponsiveLayout = () => {
@@ -98,81 +98,81 @@ export function useSettingsPanel() {
         if (mobile) {
           // 切换到移动端布局
           if (!hasChangedMenu.value) {
-            beforeMenuType.value = menuType.value
+            beforeMenuType.value = menuType.value;
             if (menuType.value !== MenuTypeEnum.LEFT) {
-              setStoredDesktopMenuType(menuType.value)
-              useSettingsState().switchMenuLayouts(MenuTypeEnum.LEFT)
-              hasChangedMenu.value = true
+              setStoredDesktopMenuType(menuType.value);
+              useSettingsState().switchMenuLayouts(MenuTypeEnum.LEFT);
+              hasChangedMenu.value = true;
             }
           }
 
-          settingStore.setMenuOpen(false)
+          settingStore.setMenuOpen(false);
         } else {
           // 恢复桌面端布局
           if (hasChangedMenu.value && beforeMenuType.value) {
             if (menuType.value === MenuTypeEnum.LEFT) {
-              useSettingsState().switchMenuLayouts(beforeMenuType.value)
+              useSettingsState().switchMenuLayouts(beforeMenuType.value);
             }
 
-            clearStoredDesktopMenuType()
-            hasChangedMenu.value = false
+            clearStoredDesktopMenuType();
+            hasChangedMenu.value = false;
           }
 
-          settingStore.setMenuOpen(true)
+          settingStore.setMenuOpen(true);
         }
       },
       { immediate: true }
-    )
+    );
 
-    return { stopWatch }
-  }
+    return { stopWatch };
+  };
 
   // 抽屉控制
   const useDrawerControl = () => {
     // 用于存储 setTimeout 的 ID，以便在需要时清除
-    let themeChangeTimer: ReturnType<typeof setTimeout> | null = null
+    let themeChangeTimer: ReturnType<typeof setTimeout> | null = null;
 
     // 打开抽屉
     const handleOpen = () => {
       // 清除可能存在的旧定时器
       if (themeChangeTimer) {
-        clearTimeout(themeChangeTimer)
+        clearTimeout(themeChangeTimer);
       }
       // 延迟添加 theme-change class，避免抽屉打开动画受影响
       themeChangeTimer = setTimeout(() => {
-        domOperations.setBodyClass('theme-change', true)
-        themeChangeTimer = null
-      }, 500)
-    }
+        domOperations.setBodyClass("theme-change", true);
+        themeChangeTimer = null;
+      }, 500);
+    };
 
     // 关闭抽屉
     const handleClose = () => {
       // 清除未执行的定时器，防止关闭后才添加 class
       if (themeChangeTimer) {
-        clearTimeout(themeChangeTimer)
-        themeChangeTimer = null
+        clearTimeout(themeChangeTimer);
+        themeChangeTimer = null;
       }
       // 立即移除 theme-change class
-      domOperations.setBodyClass('theme-change', false)
-    }
+      domOperations.setBodyClass("theme-change", false);
+    };
 
     // 打开设置
     const openSetting = () => {
-      showDrawer.value = true
-    }
+      showDrawer.value = true;
+    };
 
     // 关闭设置
     const closeDrawer = () => {
-      showDrawer.value = false
-    }
+      showDrawer.value = false;
+    };
 
     return {
       handleOpen,
       handleClose,
       openSetting,
-      closeDrawer
-    }
-  }
+      closeDrawer,
+    };
+  };
 
   // Props 变化监听
   const usePropsWatcher = (props: { open?: boolean }) => {
@@ -180,44 +180,44 @@ export function useSettingsPanel() {
       () => props.open,
       (val: boolean | undefined) => {
         if (val !== undefined) {
-          showDrawer.value = val
+          showDrawer.value = val;
         }
       }
-    )
-  }
+    );
+  };
 
   // 初始化设置
   const useSettingsInitializer = () => {
-    const themeHandlers = useThemeHandlers()
-    const { openSetting } = useDrawerControl()
-    const { stopWatch } = useResponsiveLayout()
-    let themeCleanup: (() => void) | null = null
+    const themeHandlers = useThemeHandlers();
+    const { openSetting } = useDrawerControl();
+    const { stopWatch } = useResponsiveLayout();
+    let themeCleanup: (() => void) | null = null;
 
     const initializeSettings = () => {
-      mittBus.on('openSetting', openSetting)
-      themeHandlers.initSystemColor()
-      themeCleanup = themeHandlers.listenerSystemTheme()
-      initColorWeak()
+      mittBus.on("openSetting", openSetting);
+      themeHandlers.initSystemColor();
+      themeCleanup = themeHandlers.listenerSystemTheme();
+      initColorWeak();
 
       // 设置盒子模式
-      const boxMode = settingStore.boxBorderMode ? 'border-mode' : 'shadow-mode'
-      domOperations.setRootAttribute('data-box-mode', boxMode)
+      const boxMode = settingStore.boxBorderMode ? "border-mode" : "shadow-mode";
+      domOperations.setRootAttribute("data-box-mode", boxMode);
 
-      themeHandlers.initSystemTheme()
-      openFestival()
-    }
+      themeHandlers.initSystemTheme();
+      openFestival();
+    };
 
     const cleanupSettings = () => {
-      stopWatch()
-      themeCleanup?.()
-      cleanup()
-    }
+      stopWatch();
+      themeCleanup?.();
+      cleanup();
+    };
 
     return {
       initializeSettings,
-      cleanupSettings
-    }
-  }
+      cleanupSettings,
+    };
+  };
 
   return {
     // 状态
@@ -228,6 +228,6 @@ export function useSettingsPanel() {
     useResponsiveLayout,
     useDrawerControl,
     usePropsWatcher,
-    useSettingsInitializer
-  }
+    useSettingsInitializer,
+  };
 }
diff --git a/frontend/new-web/src/components/core/layouts/art-settings-panel/composables/useSettingsState.ts b/frontend/new-web/src/components/core/layouts/art-settings-panel/composables/useSettingsState.ts
index 65352d29..82aba066 100644
--- a/frontend/new-web/src/components/core/layouts/art-settings-panel/composables/useSettingsState.ts
+++ b/frontend/new-web/src/components/core/layouts/art-settings-panel/composables/useSettingsState.ts
@@ -1,37 +1,37 @@
-import { useSettingStore } from '@/store/modules/setting'
-import { MenuThemeEnum, MenuTypeEnum } from '@/enums/appEnum'
+import { useSettingsStore } from "@/store/modules/setting.store";
+import { MenuThemeEnum, MenuTypeEnum } from "@/enums/appEnum";
 
 /**
  * 设置状态管理
  */
 export function useSettingsState() {
-  const settingStore = useSettingStore()
+  const settingStore = useSettingsStore();
 
   // 色弱模式初始化
   const initColorWeak = () => {
     if (settingStore.colorWeak) {
-      const el = document.getElementsByTagName('html')[0]
+      const el = document.getElementsByTagName("html")[0];
       setTimeout(() => {
-        el.classList.add('color-weak')
-      }, 100)
+        el.classList.add("color-weak");
+      }, 100);
     }
-  }
+  };
 
   // 菜单布局切换
   const switchMenuLayouts = (type: MenuTypeEnum) => {
     if (type === MenuTypeEnum.LEFT || type === MenuTypeEnum.TOP_LEFT) {
-      settingStore.setMenuOpen(true)
+      settingStore.setMenuOpen(true);
     }
-    settingStore.switchMenuLayouts(type)
+    settingStore.switchMenuLayouts(type);
     if (type === MenuTypeEnum.DUAL_MENU) {
-      settingStore.switchMenuStyles(MenuThemeEnum.DESIGN)
-      settingStore.setMenuOpen(true)
+      settingStore.switchMenuStyles(MenuThemeEnum.DESIGN);
+      settingStore.setMenuOpen(true);
     }
-  }
+  };
 
   return {
     // 方法
     initColorWeak,
-    switchMenuLayouts
-  }
+    switchMenuLayouts,
+  };
 }
diff --git a/frontend/new-web/src/components/core/layouts/art-settings-panel/index.vue b/frontend/new-web/src/components/core/layouts/art-settings-panel/index.vue
index 0cbf3441..fd7d98bb 100755
--- a/frontend/new-web/src/components/core/layouts/art-settings-panel/index.vue
+++ b/frontend/new-web/src/components/core/layouts/art-settings-panel/index.vue
@@ -25,48 +25,48 @@
 </template>
 
 <script setup lang="ts">
-  import { useSettingsPanel } from './composables/useSettingsPanel'
+import { useSettingsPanel } from "./composables/useSettingsPanel";
 
-  import SettingDrawer from './widget/SettingDrawer.vue'
-  import SettingHeader from './widget/SettingHeader.vue'
-  import ThemeSettings from './widget/ThemeSettings.vue'
-  import MenuLayoutSettings from './widget/MenuLayoutSettings.vue'
-  import MenuStyleSettings from './widget/MenuStyleSettings.vue'
-  import ColorSettings from './widget/ColorSettings.vue'
-  import BoxStyleSettings from './widget/BoxStyleSettings.vue'
-  import ContainerSettings from './widget/ContainerSettings.vue'
-  import BasicSettings from './widget/BasicSettings.vue'
-  import SettingActions from './widget/SettingActions.vue'
+import SettingDrawer from "./widget/SettingDrawer.vue";
+import SettingHeader from "./widget/SettingHeader.vue";
+import ThemeSettings from "./widget/ThemeSettings.vue";
+import MenuLayoutSettings from "./widget/MenuLayoutSettings.vue";
+import MenuStyleSettings from "./widget/MenuStyleSettings.vue";
+import ColorSettings from "./widget/ColorSettings.vue";
+import BoxStyleSettings from "./widget/BoxStyleSettings.vue";
+import ContainerSettings from "./widget/ContainerSettings.vue";
+import BasicSettings from "./widget/BasicSettings.vue";
+import SettingActions from "./widget/SettingActions.vue";
 
-  defineOptions({ name: 'ArtSettingsPanel' })
+defineOptions({ name: "ArtSettingsPanel" });
 
-  interface Props {
-    /** 是否打开 */
-    open?: boolean
-  }
+interface Props {
+  /** 是否打开 */
+  open?: boolean;
+}
 
-  const props = defineProps<Props>()
+const props = defineProps<Props>();
 
-  // 使用设置面板逻辑
-  const settingsPanel = useSettingsPanel()
-  const { showDrawer } = settingsPanel
+// 使用设置面板逻辑
+const settingsPanel = useSettingsPanel();
+const { showDrawer } = settingsPanel;
 
-  // 获取各种处理器
-  const { handleOpen, handleClose, closeDrawer } = settingsPanel.useDrawerControl()
-  const { initializeSettings, cleanupSettings } = settingsPanel.useSettingsInitializer()
+// 获取各种处理器
+const { handleOpen, handleClose, closeDrawer } = settingsPanel.useDrawerControl();
+const { initializeSettings, cleanupSettings } = settingsPanel.useSettingsInitializer();
 
-  // 监听 props 变化
-  settingsPanel.usePropsWatcher(props)
+// 监听 props 变化
+settingsPanel.usePropsWatcher(props);
 
-  onMounted(() => {
-    initializeSettings()
-  })
+onMounted(() => {
+  initializeSettings();
+});
 
-  onUnmounted(() => {
-    cleanupSettings()
-  })
+onUnmounted(() => {
+  cleanupSettings();
+});
 </script>
 
 <style lang="scss">
-  @use './style';
+@use "./style";
 </style>
diff --git a/frontend/new-web/src/components/core/layouts/art-settings-panel/style.scss b/frontend/new-web/src/components/core/layouts/art-settings-panel/style.scss
index e8630744..0e01a3fe 100755
--- a/frontend/new-web/src/components/core/layouts/art-settings-panel/style.scss
+++ b/frontend/new-web/src/components/core/layouts/art-settings-panel/style.scss
@@ -1,4 +1,4 @@
-@use '@styles/core/mixin.scss' as *;
+@use "@styles/core/mixin.scss" as *;
 
 // 设置抽屉模态框样式
 .setting-modal {
diff --git a/frontend/new-web/src/components/core/layouts/art-settings-panel/widget/BasicSettings.vue b/frontend/new-web/src/components/core/layouts/art-settings-panel/widget/BasicSettings.vue
index b6dc9d3e..5e0c149e 100644
--- a/frontend/new-web/src/components/core/layouts/art-settings-panel/widget/BasicSettings.vue
+++ b/frontend/new-web/src/components/core/layouts/art-settings-panel/widget/BasicSettings.vue
@@ -12,66 +12,66 @@
 </template>
 
 <script setup lang="ts">
-  import SectionTitle from './SectionTitle.vue'
-  import SettingItem from './SettingItem.vue'
-  import { useSettingStore } from '@/store/modules/setting'
-  import { useSettingsConfig } from '../composables/useSettingsConfig'
-  import { useSettingsHandlers } from '../composables/useSettingsHandlers'
-  import { storeToRefs } from 'pinia'
+import SectionTitle from "./SectionTitle.vue";
+import SettingItem from "./SettingItem.vue";
+import { useSettingsStore } from "@/store/modules/setting.store";
+import { useSettingsConfig } from "../composables/useSettingsConfig";
+import { useSettingsHandlers } from "../composables/useSettingsHandlers";
+import { storeToRefs } from "pinia";
 
-  const settingStore = useSettingStore()
-  const { basicSettingsConfig } = useSettingsConfig()
-  const { basicHandlers } = useSettingsHandlers()
+const settingStore = useSettingsStore();
+const { basicSettingsConfig } = useSettingsConfig();
+const { basicHandlers } = useSettingsHandlers();
 
-  // 获取store的响应式状态
-  const {
-    uniqueOpened,
-    showMenuButton,
-    showFastEnter,
-    showRefreshButton,
-    showCrumbs,
-    showWorkTab,
-    showLanguage,
-    showNprogress,
-    colorWeak,
-    watermarkVisible,
-    menuOpenWidth,
-    tabStyle,
-    pageTransition,
-    customRadius
-  } = storeToRefs(settingStore)
+// 获取store的响应式状态
+const {
+  uniqueOpened,
+  showMenuButton,
+  showFastEnter,
+  showRefreshButton,
+  showCrumbs,
+  showWorkTab,
+  showLanguage,
+  showNprogress,
+  colorWeak,
+  watermarkVisible,
+  menuOpenWidth,
+  tabStyle,
+  pageTransition,
+  customRadius,
+} = storeToRefs(settingStore);
 
-  // 创建设置值映射
-  const settingValueMap = {
-    uniqueOpened,
-    showMenuButton,
-    showFastEnter,
-    showRefreshButton,
-    showCrumbs,
-    showWorkTab,
-    showLanguage,
-    showNprogress,
-    colorWeak,
-    watermarkVisible,
-    menuOpenWidth,
-    tabStyle,
-    pageTransition,
-    customRadius
-  }
+// 创建设置值映射
+const settingValueMap = {
+  uniqueOpened,
+  showMenuButton,
+  showFastEnter,
+  showRefreshButton,
+  showCrumbs,
+  showWorkTab,
+  showLanguage,
+  showNprogress,
+  colorWeak,
+  watermarkVisible,
+  menuOpenWidth,
+  tabStyle,
+  pageTransition,
+  customRadius,
+};
 
-  // 获取设置值的方法
-  const getSettingValue = (key: string) => {
-    const settingRef = settingValueMap[key as keyof typeof settingValueMap]
-    return settingRef?.value ?? null
-  }
+// 获取设置值的方法
+const getSettingValue = (key: string) => {
+  const settingRef = settingValueMap[key as keyof typeof settingValueMap];
+  return settingRef?.value ?? null;
+};
 
-  // 统一的设置变更处理
-  const handleSettingChange = (handlerName: string, value: any) => {
-    const handler = (basicHandlers as any)[handlerName]
-    if (typeof handler === 'function') {
-      handler(value)
-    } else {
-      console.warn(`Handler "${handlerName}" not found in basicHandlers`)
-    }
+// 统一的设置变更处理
+const handleSettingChange = (handlerName: string, value: any) => {
+  const handler = (basicHandlers as any)[handlerName];
+  if (typeof handler === "function") {
+    handler(value);
+  } else {
+    console.warn(`Handler "${handlerName}" not found in basicHandlers`);
   }
+};
 </script>
diff --git a/frontend/new-web/src/components/core/layouts/art-settings-panel/widget/BoxStyleSettings.vue b/frontend/new-web/src/components/core/layouts/art-settings-panel/widget/BoxStyleSettings.vue
index 86c7a9e7..a9d7a03d 100644
--- a/frontend/new-web/src/components/core/layouts/art-settings-panel/widget/BoxStyleSettings.vue
+++ b/frontend/new-web/src/components/core/layouts/art-settings-panel/widget/BoxStyleSettings.vue
@@ -20,19 +20,19 @@
 </template>
 
 <script setup lang="ts">
-  import SectionTitle from './SectionTitle.vue'
-  import { useSettingStore } from '@/store/modules/setting'
-  import { useSettingsConfig } from '../composables/useSettingsConfig'
-  import { useSettingsHandlers } from '../composables/useSettingsHandlers'
-  import { storeToRefs } from 'pinia'
+import SectionTitle from "./SectionTitle.vue";
+import { useSettingsStore } from "@/store/modules/setting.store";
+import { useSettingsConfig } from "../composables/useSettingsConfig";
+import { useSettingsHandlers } from "../composables/useSettingsHandlers";
+import { storeToRefs } from "pinia";
 
-  const settingStore = useSettingStore()
-  const { boxBorderMode } = storeToRefs(settingStore)
-  const { boxStyleOptions } = useSettingsConfig()
-  const { boxStyleHandlers } = useSettingsHandlers()
+const settingStore = useSettingsStore();
+const { boxBorderMode } = storeToRefs(settingStore);
+const { boxStyleOptions } = useSettingsConfig();
+const { boxStyleHandlers } = useSettingsHandlers();
 
-  // 判断当前选项是否激活
-  const isActive = (type: 'border-mode' | 'shadow-mode') => {
-    return type === 'border-mode' ? boxBorderMode.value : !boxBorderMode.value
-  }
+// 判断当前选项是否激活
+const isActive = (type: "border-mode" | "shadow-mode") => {
+  return type === "border-mode" ? boxBorderMode.value : !boxBorderMode.value;
+};
 </script>
diff --git a/frontend/new-web/src/components/core/layouts/art-settings-panel/widget/ColorSettings.vue b/frontend/new-web/src/components/core/layouts/art-settings-panel/widget/ColorSettings.vue
index 05a4b411..2fe49b91 100644
--- a/frontend/new-web/src/components/core/layouts/art-settings-panel/widget/ColorSettings.vue
+++ b/frontend/new-web/src/components/core/layouts/art-settings-panel/widget/ColorSettings.vue
@@ -22,14 +22,14 @@
 </template>
 
 <script setup lang="ts">
-  import SectionTitle from './SectionTitle.vue'
-  import { useSettingStore } from '@/store/modules/setting'
-  import { useSettingsConfig } from '../composables/useSettingsConfig'
-  import { useSettingsHandlers } from '../composables/useSettingsHandlers'
-  import { storeToRefs } from 'pinia'
+import SectionTitle from "./SectionTitle.vue";
+import { useSettingsStore } from "@/store/modules/setting.store";
+import { useSettingsConfig } from "../composables/useSettingsConfig";
+import { useSettingsHandlers } from "../composables/useSettingsHandlers";
+import { storeToRefs } from "pinia";
 
-  const settingStore = useSettingStore()
-  const { systemThemeColor } = storeToRefs(settingStore)
-  const { configOptions } = useSettingsConfig()
-  const { colorHandlers } = useSettingsHandlers()
+const settingStore = useSettingsStore();
+const { systemThemeColor } = storeToRefs(settingStore);
+const { configOptions } = useSettingsConfig();
+const { colorHandlers } = useSettingsHandlers();
 </script>
diff --git a/frontend/new-web/src/components/core/layouts/art-settings-panel/widget/ContainerSettings.vue b/frontend/new-web/src/components/core/layouts/art-settings-panel/widget/ContainerSettings.vue
index 1f5be721..57f8fc6d 100644
--- a/frontend/new-web/src/components/core/layouts/art-settings-panel/widget/ContainerSettings.vue
+++ b/frontend/new-web/src/components/core/layouts/art-settings-panel/widget/ContainerSettings.vue
@@ -8,7 +8,7 @@
         class="flex-cc flex-1 h-16 mt-5 mr-3.5 mb-3.5 cursor-pointer !border-2 rounded-lg !text-g-800 last:mr-0"
         :class="{
           'border-theme [&_i]:!text-theme': containerWidth === option.value,
-          'border-full-d': containerWidth !== option.value
+          'border-full-d': containerWidth !== option.value,
         }"
         @click="containerHandlers.setWidth(option.value)"
       >
@@ -20,14 +20,14 @@
 </template>
 
 <script setup lang="ts">
-  import SectionTitle from './SectionTitle.vue'
-  import { useSettingStore } from '@/store/modules/setting'
-  import { useSettingsConfig } from '../composables/useSettingsConfig'
-  import { useSettingsHandlers } from '../composables/useSettingsHandlers'
-  import { storeToRefs } from 'pinia'
+import SectionTitle from "./SectionTitle.vue";
+import { useSettingsStore } from "@/store/modules/setting.store";
+import { useSettingsConfig } from "../composables/useSettingsConfig";
+import { useSettingsHandlers } from "../composables/useSettingsHandlers";
+import { storeToRefs } from "pinia";
 
-  const settingStore = useSettingStore()
-  const { containerWidth } = storeToRefs(settingStore)
-  const { containerWidthOptions } = useSettingsConfig()
-  const { containerHandlers } = useSettingsHandlers()
+const settingStore = useSettingsStore();
+const { containerWidth } = storeToRefs(settingStore);
+const { containerWidthOptions } = useSettingsConfig();
+const { containerHandlers } = useSettingsHandlers();
 </script>
diff --git a/frontend/new-web/src/components/core/layouts/art-settings-panel/widget/MenuLayoutSettings.vue b/frontend/new-web/src/components/core/layouts/art-settings-panel/widget/MenuLayoutSettings.vue
index dbcae46b..2b2b7683 100644
--- a/frontend/new-web/src/components/core/layouts/art-settings-panel/widget/MenuLayoutSettings.vue
+++ b/frontend/new-web/src/components/core/layouts/art-settings-panel/widget/MenuLayoutSettings.vue
@@ -18,14 +18,14 @@
 </template>
 
 <script setup lang="ts">
-  import SectionTitle from './SectionTitle.vue'
-  import { useSettingStore } from '@/store/modules/setting'
-  import { useSettingsConfig } from '../composables/useSettingsConfig'
-  import { useSettingsState } from '../composables/useSettingsState'
+import SectionTitle from "./SectionTitle.vue";
+import { useSettingsStore } from "@/store/modules/setting.store";
+import { useSettingsConfig } from "../composables/useSettingsConfig";
+import { useSettingsState } from "../composables/useSettingsState";
 
-  const { width } = useWindowSize()
-  const settingStore = useSettingStore()
-  const { menuType } = storeToRefs(settingStore)
-  const { configOptions } = useSettingsConfig()
-  const { switchMenuLayouts } = useSettingsState()
+const { width } = useWindowSize();
+const settingStore = useSettingsStore();
+const { menuType } = storeToRefs(settingStore);
+const { configOptions } = useSettingsConfig();
+const { switchMenuLayouts } = useSettingsState();
 </script>
diff --git a/frontend/new-web/src/components/core/layouts/art-settings-panel/widget/MenuStyleSettings.vue b/frontend/new-web/src/components/core/layouts/art-settings-panel/widget/MenuStyleSettings.vue
index 61237ebb..6c3ade73 100644
--- a/frontend/new-web/src/components/core/layouts/art-settings-panel/widget/MenuStyleSettings.vue
+++ b/frontend/new-web/src/components/core/layouts/art-settings-panel/widget/MenuStyleSettings.vue
@@ -11,7 +11,7 @@
         class="box"
         :class="{ 'is-active': item.theme === menuThemeType }"
         :style="{
-          cursor: disabled ? 'no-drop' : 'pointer'
+          cursor: disabled ? 'no-drop' : 'pointer',
         }"
       >
         <img :src="item.img" />
@@ -21,24 +21,24 @@
 </template>
 
 <script setup lang="ts">
-  import AppConfig from '@/config'
-  import SectionTitle from './SectionTitle.vue'
-  import { MenuTypeEnum, type MenuThemeEnum } from '@/enums/appEnum'
-  import { useSettingStore } from '@/store/modules/setting'
+import AppConfig from "@/config";
+import SectionTitle from "./SectionTitle.vue";
+import { MenuTypeEnum, type MenuThemeEnum } from "@/enums/appEnum";
+import { useSettingsStore } from "@/store/modules/setting.store";
 
-  const menuThemeList = AppConfig.themeList
-  const settingStore = useSettingStore()
-  const { menuThemeType, menuType, isDark } = storeToRefs(settingStore)
-  const isTopMenu = computed(() => menuType.value === MenuTypeEnum.TOP)
-  const isDualMenu = computed(() => menuType.value === MenuTypeEnum.DUAL_MENU)
+const menuThemeList = AppConfig.themeList;
+const settingStore = useSettingsStore();
+const { menuThemeType, menuType, isDark } = storeToRefs(settingStore);
+const isTopMenu = computed(() => menuType.value === MenuTypeEnum.TOP);
+const isDualMenu = computed(() => menuType.value === MenuTypeEnum.DUAL_MENU);
 
-  const disabled = computed(() => isTopMenu.value || isDualMenu.value || isDark.value)
+const disabled = computed(() => isTopMenu.value || isDualMenu.value || isDark.value);
 
-  // 菜单样式切换
-  const switchMenuStyles = (theme: MenuThemeEnum) => {
-    if (isDualMenu.value || isTopMenu.value || isDark.value) {
-      return
-    }
-    settingStore.switchMenuStyles(theme)
+// 菜单样式切换
+const switchMenuStyles = (theme: MenuThemeEnum) => {
+  if (isDualMenu.value || isTopMenu.value || isDark.value) {
+    return;
   }
+  settingStore.switchMenuStyles(theme);
+};
 </script>
diff --git a/frontend/new-web/src/components/core/layouts/art-settings-panel/widget/SectionTitle.vue b/frontend/new-web/src/components/core/layouts/art-settings-panel/widget/SectionTitle.vue
index 31ef00cd..6b3d5861 100644
--- a/frontend/new-web/src/components/core/layouts/art-settings-panel/widget/SectionTitle.vue
+++ b/frontend/new-web/src/components/core/layouts/art-settings-panel/widget/SectionTitle.vue
@@ -8,10 +8,10 @@
 </template>
 
 <script setup lang="ts">
-  interface Props {
-    title: string
-    style?: Record<string, any>
-  }
+interface Props {
+  title: string;
+  style?: Record<string, any>;
+}
 
-  defineProps<Props>()
+defineProps<Props>();
 </script>
diff --git a/frontend/new-web/src/components/core/layouts/art-settings-panel/widget/SettingActions.vue b/frontend/new-web/src/components/core/layouts/art-settings-panel/widget/SettingActions.vue
index 7b47d1a1..0f6bd7d6 100644
--- a/frontend/new-web/src/components/core/layouts/art-settings-panel/widget/SettingActions.vue
+++ b/frontend/new-web/src/components/core/layouts/art-settings-panel/widget/SettingActions.vue
@@ -4,232 +4,228 @@
     class="mt-10 flex gap-8 border-t border-[var(--default-border)] bg-[var(--art-bg-color)] pt-5"
   >
     <ElButton type="primary" class="flex-1 !h-8" @click="handleCopyConfig">
-      {{ $t('setting.actions.copyConfig') }}
+      {{ $t("setting.actions.copyConfig") }}
     </ElButton>
     <ElButton type="danger" plain class="flex-1 !h-8" @click="handleResetConfig">
-      {{ $t('setting.actions.resetConfig') }}
+      {{ $t("setting.actions.resetConfig") }}
     </ElButton>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { nextTick } from 'vue'
-  import { useSettingStore } from '@/store/modules/setting'
-  import { SETTING_DEFAULT_CONFIG } from '@/config/setting'
-  import { useClipboard } from '@vueuse/core'
-  import { useI18n } from 'vue-i18n'
-  import { MenuThemeEnum } from '@/enums/appEnum'
-  import { useTheme } from '@/hooks/core/useTheme'
+import { nextTick } from "vue";
+import { useSettingsStore } from "@/store/modules/setting.store";
+import { SETTING_DEFAULT_CONFIG } from "@/config/setting";
+import { useClipboard } from "@vueuse/core";
+import { useI18n } from "vue-i18n";
+import { MenuThemeEnum } from "@/enums/appEnum";
+import { useTheme } from "@/hooks/core/useTheme";
 
-  defineOptions({ name: 'SettingActions' })
+defineOptions({ name: "SettingActions" });
 
-  const { t } = useI18n()
-  const settingStore = useSettingStore()
-  const { copy, copied } = useClipboard()
-  const { switchThemeStyles } = useTheme()
+const { t } = useI18n();
+const settingStore = useSettingsStore();
+const { copy, copied } = useClipboard();
+const { switchThemeStyles } = useTheme();
 
-  /** 枚举映射表 */
-  const ENUM_MAPS = {
-    menuType: {
-      left: 'MenuTypeEnum.LEFT',
-      top: 'MenuTypeEnum.TOP',
-      'top-left': 'MenuTypeEnum.TOP_LEFT',
-      'dual-menu': 'MenuTypeEnum.DUAL_MENU'
-    },
-    systemTheme: {
-      auto: 'SystemThemeEnum.AUTO',
-      light: 'SystemThemeEnum.LIGHT',
-      dark: 'SystemThemeEnum.DARK'
-    },
-    menuTheme: {
-      design: 'MenuThemeEnum.DESIGN',
-      light: 'MenuThemeEnum.LIGHT',
-      dark: 'MenuThemeEnum.DARK'
-    },
-    containerWidth: {
-      '100%': 'ContainerWidthEnum.FULL',
-      '1200px': 'ContainerWidthEnum.BOXED'
+/** 枚举映射表 */
+const ENUM_MAPS = {
+  menuType: {
+    left: "MenuTypeEnum.LEFT",
+    top: "MenuTypeEnum.TOP",
+    "top-left": "MenuTypeEnum.TOP_LEFT",
+    "dual-menu": "MenuTypeEnum.DUAL_MENU",
+  },
+  systemTheme: {
+    auto: "SystemThemeEnum.AUTO",
+    light: "SystemThemeEnum.LIGHT",
+    dark: "SystemThemeEnum.DARK",
+  },
+  menuTheme: {
+    design: "MenuThemeEnum.DESIGN",
+    light: "MenuThemeEnum.LIGHT",
+    dark: "MenuThemeEnum.DARK",
+  },
+  containerWidth: {
+    "100%": "ContainerWidthEnum.FULL",
+    "1200px": "ContainerWidthEnum.BOXED",
+  },
+} as const;
+
+/** 配置项定义 */
+interface ConfigItem {
+  comment: string;
+  key: keyof typeof settingStore;
+  enumMap?: Record<string, string>;
+  forceValue?: any;
+}
+
+const CONFIG_ITEMS: ConfigItem[] = [
+  { comment: "菜单类型", key: "menuType", enumMap: ENUM_MAPS.menuType },
+  { comment: "菜单展开宽度", key: "menuOpenWidth" },
+  { comment: "菜单是否展开", key: "menuOpen" },
+  { comment: "双菜单是否显示文本", key: "dualMenuShowText" },
+  { comment: "系统主题类型", key: "systemThemeType", enumMap: ENUM_MAPS.systemTheme },
+  { comment: "系统主题模式", key: "systemThemeMode", enumMap: ENUM_MAPS.systemTheme },
+  { comment: "菜单风格", key: "menuThemeType", enumMap: ENUM_MAPS.menuTheme },
+  { comment: "系统主题颜色", key: "systemThemeColor" },
+  { comment: "是否显示菜单按钮", key: "showMenuButton" },
+  { comment: "是否显示快速入口", key: "showFastEnter" },
+  { comment: "是否显示刷新按钮", key: "showRefreshButton" },
+  { comment: "是否显示面包屑", key: "showCrumbs" },
+  { comment: "是否显示工作台标签", key: "showWorkTab" },
+  { comment: "是否显示语言切换", key: "showLanguage" },
+  { comment: "是否显示进度条", key: "showNprogress" },
+  { comment: "是否显示设置引导", key: "showSettingGuide" },
+  { comment: "是否显示节日文本", key: "showFestivalText" },
+  { comment: "是否显示水印", key: "watermarkVisible" },
+  { comment: "是否自动关闭", key: "autoClose" },
+  { comment: "是否唯一展开", key: "uniqueOpened" },
+  { comment: "是否色弱模式", key: "colorWeak" },
+  { comment: "是否刷新", key: "refresh" },
+  { comment: "是否加载节日烟花", key: "holidayFireworksLoaded" },
+  { comment: "边框模式", key: "boxBorderMode" },
+  { comment: "页面过渡效果", key: "pageTransition" },
+  { comment: "标签页样式", key: "tabStyle" },
+  { comment: "自定义圆角", key: "customRadius" },
+  { comment: "容器宽度", key: "containerWidth", enumMap: ENUM_MAPS.containerWidth },
+  { comment: "节日日期", key: "festivalDate", forceValue: "" },
+];
+
+/**
+ * 将值转换为代码字符串
+ */
+const valueToCode = (value: any, enumMap?: Record<string, string>): string => {
+  if (value === null) return "null";
+  if (value === undefined) return "undefined";
+
+  // 优先查找枚举映射
+  if (enumMap && typeof value === "string" && enumMap[value]) {
+    return enumMap[value];
+  }
+
+  // 其他类型处理
+  if (typeof value === "string") return `'${value}'`;
+  if (typeof value === "boolean" || typeof value === "number") return String(value);
+
+  return JSON.stringify(value);
+};
+
+/**
+ * 生成配置代码
+ */
+const generateConfigCode = (): string => {
+  const lines = ["export const SETTING_DEFAULT_CONFIG = {"];
+
+  CONFIG_ITEMS.forEach((item) => {
+    lines.push(`  /** ${item.comment} */`);
+    const value = item.forceValue !== undefined ? item.forceValue : settingStore[item.key];
+    lines.push(`  ${String(item.key)}: ${valueToCode(value, item.enumMap)},`);
+  });
+
+  lines.push("}");
+  return lines.join("\n");
+};
+
+/**
+ * 复制配置到剪贴板
+ */
+const handleCopyConfig = async () => {
+  try {
+    const configText = generateConfigCode();
+    await copy(configText);
+
+    if (copied.value) {
+      ElMessage.success({
+        message: t("setting.actions.copySuccess"),
+        duration: 3000,
+      });
     }
-  } as const
-
-  /** 配置项定义 */
-  interface ConfigItem {
-    comment: string
-    key: keyof typeof settingStore
-    enumMap?: Record<string, string>
-    forceValue?: any
+  } catch (error) {
+    console.error("复制配置失败:", error);
+    ElMessage.error(t("setting.actions.copyFailed"));
   }
+};
 
-  const CONFIG_ITEMS: ConfigItem[] = [
-    { comment: '菜单类型', key: 'menuType', enumMap: ENUM_MAPS.menuType },
-    { comment: '菜单展开宽度', key: 'menuOpenWidth' },
-    { comment: '菜单是否展开', key: 'menuOpen' },
-    { comment: '双菜单是否显示文本', key: 'dualMenuShowText' },
-    { comment: '系统主题类型', key: 'systemThemeType', enumMap: ENUM_MAPS.systemTheme },
-    { comment: '系统主题模式', key: 'systemThemeMode', enumMap: ENUM_MAPS.systemTheme },
-    { comment: '菜单风格', key: 'menuThemeType', enumMap: ENUM_MAPS.menuTheme },
-    { comment: '系统主题颜色', key: 'systemThemeColor' },
-    { comment: '是否显示菜单按钮', key: 'showMenuButton' },
-    { comment: '是否显示快速入口', key: 'showFastEnter' },
-    { comment: '是否显示刷新按钮', key: 'showRefreshButton' },
-    { comment: '是否显示面包屑', key: 'showCrumbs' },
-    { comment: '是否显示工作台标签', key: 'showWorkTab' },
-    { comment: '是否显示语言切换', key: 'showLanguage' },
-    { comment: '是否显示进度条', key: 'showNprogress' },
-    { comment: '是否显示设置引导', key: 'showSettingGuide' },
-    { comment: '是否显示节日文本', key: 'showFestivalText' },
-    { comment: '是否显示水印', key: 'watermarkVisible' },
-    { comment: '是否自动关闭', key: 'autoClose' },
-    { comment: '是否唯一展开', key: 'uniqueOpened' },
-    { comment: '是否色弱模式', key: 'colorWeak' },
-    { comment: '是否刷新', key: 'refresh' },
-    { comment: '是否加载节日烟花', key: 'holidayFireworksLoaded' },
-    { comment: '边框模式', key: 'boxBorderMode' },
-    { comment: '页面过渡效果', key: 'pageTransition' },
-    { comment: '标签页样式', key: 'tabStyle' },
-    { comment: '自定义圆角', key: 'customRadius' },
-    { comment: '容器宽度', key: 'containerWidth', enumMap: ENUM_MAPS.containerWidth },
-    { comment: '节日日期', key: 'festivalDate', forceValue: '' }
-  ]
-
-  /**
-   * 将值转换为代码字符串
-   */
-  const valueToCode = (value: any, enumMap?: Record<string, string>): string => {
-    if (value === null) return 'null'
-    if (value === undefined) return 'undefined'
-
-    // 优先查找枚举映射
-    if (enumMap && typeof value === 'string' && enumMap[value]) {
-      return enumMap[value]
-    }
-
-    // 其他类型处理
-    if (typeof value === 'string') return `'${value}'`
-    if (typeof value === 'boolean' || typeof value === 'number') return String(value)
-
-    return JSON.stringify(value)
+/**
+ * 切换布尔值配置（如果当前值与默认值不同）
+ */
+const toggleIfDifferent = (currentValue: boolean, defaultValue: boolean, toggleFn: () => void) => {
+  if (currentValue !== defaultValue) {
+    toggleFn();
   }
+};
 
-  /**
-   * 生成配置代码
-   */
-  const generateConfigCode = (): string => {
-    const lines = ['export const SETTING_DEFAULT_CONFIG = {']
+/**
+ * 重置配置为默认值
+ */
+const handleResetConfig = async () => {
+  try {
+    const config = SETTING_DEFAULT_CONFIG;
 
-    CONFIG_ITEMS.forEach((item) => {
-      lines.push(`  /** ${item.comment} */`)
-      const value = item.forceValue !== undefined ? item.forceValue : settingStore[item.key]
-      lines.push(`  ${String(item.key)}: ${valueToCode(value, item.enumMap)},`)
-    })
+    // 菜单相关
+    settingStore.switchMenuLayouts(config.menuType);
+    settingStore.setMenuOpenWidth(config.menuOpenWidth);
+    settingStore.setMenuOpen(config.menuOpen);
+    settingStore.setDualMenuShowText(config.dualMenuShowText);
 
-    lines.push('}')
-    return lines.join('\n')
-  }
-
-  /**
-   * 复制配置到剪贴板
-   */
-  const handleCopyConfig = async () => {
-    try {
-      const configText = generateConfigCode()
-      await copy(configText)
-
-      if (copied.value) {
-        ElMessage.success({
-          message: t('setting.actions.copySuccess'),
-          duration: 3000
-        })
-      }
-    } catch (error) {
-      console.error('复制配置失败:', error)
-      ElMessage.error(t('setting.actions.copyFailed'))
-    }
-  }
-
-  /**
-   * 切换布尔值配置（如果当前值与默认值不同）
-   */
-  const toggleIfDifferent = (
-    currentValue: boolean,
-    defaultValue: boolean,
-    toggleFn: () => void
-  ) => {
-    if (currentValue !== defaultValue) {
-      toggleFn()
-    }
-  }
-
-  /**
-   * 重置配置为默认值
-   */
-  const handleResetConfig = async () => {
-    try {
-      const config = SETTING_DEFAULT_CONFIG
-
-      // 菜单相关
-      settingStore.switchMenuLayouts(config.menuType)
-      settingStore.setMenuOpenWidth(config.menuOpenWidth)
-      settingStore.setMenuOpen(config.menuOpen)
-      settingStore.setDualMenuShowText(config.dualMenuShowText)
-
-      // 主题相关 - 使用 switchThemeStyles 确保正确处理 AUTO 模式
-      switchThemeStyles(config.systemThemeMode)
-
-      // 等待主题切换完成后，根据实际应用的主题设置菜单主题
-      await nextTick()
-      const menuTheme = settingStore.isDark ? MenuThemeEnum.DARK : config.menuThemeType
-      settingStore.switchMenuStyles(menuTheme)
-
-      settingStore.setElementTheme(config.systemThemeColor)
-
-      // 界面显示（切换类方法）
-      toggleIfDifferent(settingStore.showMenuButton, config.showMenuButton, () =>
-        settingStore.setButton()
-      )
-      toggleIfDifferent(settingStore.showFastEnter, config.showFastEnter, () =>
-        settingStore.setFastEnter()
-      )
-      toggleIfDifferent(settingStore.showRefreshButton, config.showRefreshButton, () =>
-        settingStore.setShowRefreshButton()
-      )
-      toggleIfDifferent(settingStore.showCrumbs, config.showCrumbs, () => settingStore.setCrumbs())
-      toggleIfDifferent(settingStore.showLanguage, config.showLanguage, () =>
-        settingStore.setLanguage()
-      )
-      toggleIfDifferent(settingStore.showNprogress, config.showNprogress, () =>
-        settingStore.setNprogress()
-      )
-
-      // 界面显示（直接设置类方法）
-      settingStore.setWorkTab(config.showWorkTab)
-      settingStore.setShowFestivalText(config.showFestivalText)
-      settingStore.setWatermarkVisible(config.watermarkVisible)
-
-      // 功能设置
-      toggleIfDifferent(settingStore.autoClose, config.autoClose, () => settingStore.setAutoClose())
-      toggleIfDifferent(settingStore.uniqueOpened, config.uniqueOpened, () =>
-        settingStore.setUniqueOpened()
-      )
-      toggleIfDifferent(settingStore.colorWeak, config.colorWeak, () => settingStore.setColorWeak())
-
-      // 样式设置
-      toggleIfDifferent(settingStore.boxBorderMode, config.boxBorderMode, () =>
-        settingStore.setBorderMode()
-      )
-      settingStore.setPageTransition(config.pageTransition)
-      settingStore.setTabStyle(config.tabStyle)
-      settingStore.setCustomRadius(config.customRadius)
-      settingStore.setContainerWidth(config.containerWidth)
-
-      // 节日相关
-      settingStore.setFestivalDate(config.festivalDate)
-      settingStore.setholidayFireworksLoaded(config.holidayFireworksLoaded)
-
-      location.reload()
-    } catch (error) {
-      console.error('重置配置失败:', error)
-      ElMessage.error(t('setting.actions.resetFailed'))
-    }
+    // 主题相关 - 使用 switchThemeStyles 确保正确处理 AUTO 模式
+    switchThemeStyles(config.systemThemeMode);
+
+    // 等待主题切换完成后，根据实际应用的主题设置菜单主题
+    await nextTick();
+    const menuTheme = settingStore.isDark ? MenuThemeEnum.DARK : config.menuThemeType;
+    settingStore.switchMenuStyles(menuTheme);
+
+    settingStore.setElementTheme(config.systemThemeColor);
+
+    // 界面显示（切换类方法）
+    toggleIfDifferent(settingStore.showMenuButton, config.showMenuButton, () =>
+      settingStore.setButton()
+    );
+    toggleIfDifferent(settingStore.showFastEnter, config.showFastEnter, () =>
+      settingStore.setFastEnter()
+    );
+    toggleIfDifferent(settingStore.showRefreshButton, config.showRefreshButton, () =>
+      settingStore.setShowRefreshButton()
+    );
+    toggleIfDifferent(settingStore.showCrumbs, config.showCrumbs, () => settingStore.setCrumbs());
+    toggleIfDifferent(settingStore.showLanguage, config.showLanguage, () =>
+      settingStore.setLanguage()
+    );
+    toggleIfDifferent(settingStore.showNprogress, config.showNprogress, () =>
+      settingStore.setNprogress()
+    );
+
+    // 界面显示（直接设置类方法）
+    settingStore.setWorkTab(config.showWorkTab);
+    settingStore.setShowFestivalText(config.showFestivalText);
+    settingStore.setWatermarkVisible(config.watermarkVisible);
+
+    // 功能设置
+    toggleIfDifferent(settingStore.autoClose, config.autoClose, () => settingStore.setAutoClose());
+    toggleIfDifferent(settingStore.uniqueOpened, config.uniqueOpened, () =>
+      settingStore.setUniqueOpened()
+    );
+    toggleIfDifferent(settingStore.colorWeak, config.colorWeak, () => settingStore.setColorWeak());
+
+    // 样式设置
+    toggleIfDifferent(settingStore.boxBorderMode, config.boxBorderMode, () =>
+      settingStore.setBorderMode()
+    );
+    settingStore.setPageTransition(config.pageTransition);
+    settingStore.setTabStyle(config.tabStyle);
+    settingStore.setCustomRadius(config.customRadius);
+    settingStore.setContainerWidth(config.containerWidth);
+
+    // 节日相关
+    settingStore.setFestivalDate(config.festivalDate);
+    settingStore.setholidayFireworksLoaded(config.holidayFireworksLoaded);
+
+    location.reload();
+  } catch (error) {
+    console.error("重置配置失败:", error);
+    ElMessage.error(t("setting.actions.resetFailed"));
   }
+};
 </script>
diff --git a/frontend/new-web/src/components/core/layouts/art-settings-panel/widget/SettingDrawer.vue b/frontend/new-web/src/components/core/layouts/art-settings-panel/widget/SettingDrawer.vue
index 85372be8..01a1a466 100644
--- a/frontend/new-web/src/components/core/layouts/art-settings-panel/widget/SettingDrawer.vue
+++ b/frontend/new-web/src/components/core/layouts/art-settings-panel/widget/SettingDrawer.vue
@@ -19,33 +19,33 @@
 </template>
 
 <script setup lang="ts">
-  interface Props {
-    modelValue: boolean
-  }
+interface Props {
+  modelValue: boolean;
+}
 
-  interface Emits {
-    (e: 'update:modelValue', value: boolean): void
-    (e: 'open'): void
-    (e: 'close'): void
-  }
+interface Emits {
+  (e: "update:modelValue", value: boolean): void;
+  (e: "open"): void;
+  (e: "close"): void;
+}
 
-  const props = defineProps<Props>()
-  const emit = defineEmits<Emits>()
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
 
-  const visible = computed({
-    get: () => props.modelValue,
-    set: (value: boolean) => emit('update:modelValue', value)
-  })
+const visible = computed({
+  get: () => props.modelValue,
+  set: (value: boolean) => emit("update:modelValue", value),
+});
 
-  const handleOpen = () => {
-    emit('open')
-  }
+const handleOpen = () => {
+  emit("open");
+};
 
-  const handleDrawerClose = () => {
-    emit('close')
-  }
+const handleDrawerClose = () => {
+  emit("close");
+};
 
-  const handleClose = () => {
-    visible.value = false
-  }
+const handleClose = () => {
+  visible.value = false;
+};
 </script>
diff --git a/frontend/new-web/src/components/core/layouts/art-settings-panel/widget/SettingHeader.vue b/frontend/new-web/src/components/core/layouts/art-settings-panel/widget/SettingHeader.vue
index e3ead9ec..718259f4 100644
--- a/frontend/new-web/src/components/core/layouts/art-settings-panel/widget/SettingHeader.vue
+++ b/frontend/new-web/src/components/core/layouts/art-settings-panel/widget/SettingHeader.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script setup lang="ts">
-  defineEmits<{
-    close: []
-  }>()
+defineEmits<{
+  close: [];
+}>();
 </script>
diff --git a/frontend/new-web/src/components/core/layouts/art-settings-panel/widget/SettingItem.vue b/frontend/new-web/src/components/core/layouts/art-settings-panel/widget/SettingItem.vue
index 57210275..03b4b794 100644
--- a/frontend/new-web/src/components/core/layouts/art-settings-panel/widget/SettingItem.vue
+++ b/frontend/new-web/src/components/core/layouts/art-settings-panel/widget/SettingItem.vue
@@ -35,67 +35,67 @@
 </template>
 
 <script setup lang="ts">
-  import type { ComputedRef } from 'vue'
+import type { ComputedRef } from "vue";
 
-  interface SettingItemConfig {
-    key: string
-    label: string
-    type: 'switch' | 'input-number' | 'select'
-    handler: string
-    mobileHide?: boolean
-    min?: number
-    max?: number
-    step?: number
-    style?: Record<string, string>
-    controlsPosition?: '' | 'right'
-    options?:
-      | Array<{ value: any; label: string }>
-      | ComputedRef<Array<{ value: any; label: string }>>
-  }
+interface SettingItemConfig {
+  key: string;
+  label: string;
+  type: "switch" | "input-number" | "select";
+  handler: string;
+  mobileHide?: boolean;
+  min?: number;
+  max?: number;
+  step?: number;
+  style?: Record<string, string>;
+  controlsPosition?: "" | "right";
+  options?:
+    | Array<{ value: any; label: string }>
+    | ComputedRef<Array<{ value: any; label: string }>>;
+}
 
-  interface Props {
-    config: SettingItemConfig
-    modelValue: any
-  }
+interface Props {
+  config: SettingItemConfig;
+  modelValue: any;
+}
 
-  interface Emits {
-    (e: 'change', value: any): void
-  }
+interface Emits {
+  (e: "change", value: any): void;
+}
 
-  const props = defineProps<Props>()
-  const emit = defineEmits<Emits>()
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
 
-  // 标准化选项，处理computed和普通数组
-  const normalizedOptions = computed(() => {
-    if (!props.config.options) return []
+// 标准化选项，处理computed和普通数组
+const normalizedOptions = computed(() => {
+  if (!props.config.options) return [];
 
-    try {
-      // 如果是 ComputedRef，则返回其值
-      if (typeof props.config.options === 'object' && 'value' in props.config.options) {
-        return props.config.options.value || []
-      }
-
-      // 如果是普通数组，直接返回
-      return Array.isArray(props.config.options) ? props.config.options : []
-    } catch (error) {
-      console.warn('Error processing options for config:', props.config.key, error)
-      return []
+  try {
+    // 如果是 ComputedRef，则返回其值
+    if (typeof props.config.options === "object" && "value" in props.config.options) {
+      return props.config.options.value || [];
     }
-  })
 
-  const handleChange = (value: any) => {
-    try {
-      emit('change', value)
-    } catch (error) {
-      console.error('Error handling change for config:', props.config.key, error)
-    }
+    // 如果是普通数组，直接返回
+    return Array.isArray(props.config.options) ? props.config.options : [];
+  } catch (error) {
+    console.warn("Error processing options for config:", props.config.key, error);
+    return [];
   }
+});
+
+const handleChange = (value: any) => {
+  try {
+    emit("change", value);
+  } catch (error) {
+    console.error("Error handling change for config:", props.config.key, error);
+  }
+};
 </script>
 
 <style lang="scss" scoped>
-  @media screen and (width <= 768px) {
-    .mobile-hide {
-      display: none !important;
-    }
+@media screen and (width <= 768px) {
+  .mobile-hide {
+    display: none !important;
   }
+}
 </style>
diff --git a/frontend/new-web/src/components/core/layouts/art-settings-panel/widget/ThemeSettings.vue b/frontend/new-web/src/components/core/layouts/art-settings-panel/widget/ThemeSettings.vue
index 4b46fcd6..b6397e58 100644
--- a/frontend/new-web/src/components/core/layouts/art-settings-panel/widget/ThemeSettings.vue
+++ b/frontend/new-web/src/components/core/layouts/art-settings-panel/widget/ThemeSettings.vue
@@ -16,13 +16,13 @@
 </template>
 
 <script setup lang="ts">
-  import SectionTitle from './SectionTitle.vue'
-  import { useSettingStore } from '@/store/modules/setting'
-  import { useSettingsConfig } from '../composables/useSettingsConfig'
-  import { useTheme } from '@/hooks/core/useTheme'
+import SectionTitle from "./SectionTitle.vue";
+import { useSettingsStore } from "@/store/modules/setting.store";
+import { useSettingsConfig } from "../composables/useSettingsConfig";
+import { useTheme } from "@/hooks/core/useTheme";
 
-  const settingStore = useSettingStore()
-  const { systemThemeMode } = storeToRefs(settingStore)
-  const { configOptions } = useSettingsConfig()
-  const { switchThemeStyles } = useTheme()
+const settingStore = useSettingsStore();
+const { systemThemeMode } = storeToRefs(settingStore);
+const { configOptions } = useSettingsConfig();
+const { switchThemeStyles } = useTheme();
 </script>
diff --git a/frontend/new-web/src/components/core/layouts/art-work-tab/index.vue b/frontend/new-web/src/components/core/layouts/art-work-tab/index.vue
index 152ff63a..8956c979 100755
--- a/frontend/new-web/src/components/core/layouts/art-work-tab/index.vue
+++ b/frontend/new-web/src/components/core/layouts/art-work-tab/index.vue
@@ -5,7 +5,7 @@
     class="box-border flex-b w-full px-5 mb-3 select-none max-sm:px-[15px]"
     :class="[
       tabStyle === 'tab-card' ? 'py-1 border-b border-[var(--art-card-border)]' : '',
-      tabStyle === 'tab-google' ? 'pt-1 pb-0 border-b border-[var(--art-card-border)]' : ''
+      tabStyle === 'tab-google' ? 'pt-1 pb-0 border-b border-[var(--art-card-border)]' : '',
     ]"
   >
     <div class="w-full overflow-hidden" ref="scrollRef">
@@ -15,21 +15,21 @@
         ref="tabsRef"
         :style="{
           transform: `translateX(${scrollState.translateX}px)`,
-          transition: `${scrollState.transition}`
+          transition: `${scrollState.transition}`,
         }"
       >
         <li
           class="art-card-xs inline-flex flex-cc h-8 mr-1.5 text-xs c-p hover:text-theme group"
           :class="[
             item.path === activeTab ? 'activ-tab !text-theme' : 'text-g-600 dark:text-g-800',
-            tabStyle === 'tab-google' ? 'google-tab relative !h-8 !leading-8 !border-none' : ''
+            tabStyle === 'tab-google' ? 'google-tab relative !h-8 !leading-8 !border-none' : '',
           ]"
           :style="{
             padding: item.fixedTab ? '0 10px' : '0 8px 0 12px',
             borderRadius:
               tabStyle === 'tab-google'
                 ? 'calc(var(--custom-radius) / 2.5 + 4px) !important'
-                : 'calc(var(--custom-radius) / 2.5 + 2px) !important'
+                : 'calc(var(--custom-radius) / 2.5 + 2px) !important',
           }"
           v-for="(item, index) in list"
           :key="item.path"
@@ -65,7 +65,7 @@
         class="flex-cc art-card-xs relative top-0 size-8 leading-8 text-center c-p tad-200 hover:!bg-hover-color"
         :style="{
           borderRadius: 'calc(var(--custom-radius) / 2.5 + 0px)',
-          marginTop: tabStyle === 'tab-google' ? '-2px' : ''
+          marginTop: tabStyle === 'tab-google' ? '-2px' : '',
         }"
         @click="(e: MouseEvent) => showMenu(e, activeTab)"
       >
@@ -84,501 +84,500 @@
 </template>
 
 <script setup lang="ts">
-  import { computed, onMounted, ref, watch, nextTick, onUnmounted } from 'vue'
-  import { LocationQueryRaw, useRoute, useRouter } from 'vue-router'
-  import { useI18n } from 'vue-i18n'
-  import { storeToRefs } from 'pinia'
+import { computed, onMounted, ref, watch, nextTick, onUnmounted } from "vue";
+import { LocationQueryRaw, useRoute, useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
+import { storeToRefs } from "pinia";
 
-  import { useWorktabStore } from '@/store/modules/worktab'
-  import { useUserStore } from '@/store/modules/user'
-  import { formatMenuTitle } from '@/utils/router'
-  import { useSettingStore } from '@/store/modules/setting'
-  import { MenuItemType } from '../../others/art-menu-right/index.vue'
-  import { useCommon } from '@/hooks/core/useCommon'
-  import { WorkTab } from '@/types'
+import { useWorktabStore } from "@/store/modules/worktab.store";
+import { useUserStore } from "@/store/modules/user.store";
+import { formatMenuTitle } from "@/utils/navigation/router";
+import { useSettingsStore } from "@/store/modules/setting.store";
+import { MenuItemType } from "../../others/art-menu-right/index.vue";
+import { useCommon } from "@/hooks/core/useCommon";
+import { WorkTab } from "@/types";
 
-  defineOptions({ name: 'ArtWorkTab' })
+defineOptions({ name: "ArtWorkTab" });
 
-  // 类型定义
-  interface ScrollState {
-    translateX: number
-    transition: string
-  }
+// 类型定义
+interface ScrollState {
+  translateX: number;
+  transition: string;
+}
 
-  interface TouchState {
-    startX: number
-    currentX: number
-  }
+interface TouchState {
+  startX: number;
+  currentX: number;
+}
 
-  type TabCloseType = 'current' | 'left' | 'right' | 'other' | 'all'
+type TabCloseType = "current" | "left" | "right" | "other" | "all";
 
-  // 基础设置
-  const { t } = useI18n()
-  const store = useWorktabStore()
-  const userStore = useUserStore()
-  const route = useRoute()
-  const router = useRouter()
-  const { currentRoute } = router
-  const settingStore = useSettingStore()
-  const { tabStyle, showWorkTab } = storeToRefs(settingStore)
+// 基础设置
+const { t } = useI18n();
+const store = useWorktabStore();
+const userStore = useUserStore();
+const route = useRoute();
+const router = useRouter();
+const { currentRoute } = router;
+const settingStore = useSettingsStore();
+const { tabStyle, showWorkTab } = storeToRefs(settingStore);
 
-  // DOM 引用
-  const scrollRef = ref<HTMLElement | null>(null)
-  const tabsRef = ref<HTMLElement | null>(null)
-  const menuRef = ref()
+// DOM 引用
+const scrollRef = ref<HTMLElement | null>(null);
+const tabsRef = ref<HTMLElement | null>(null);
+const menuRef = ref();
 
-  // 状态管理
-  const scrollState = ref<ScrollState>({
-    translateX: 0,
-    transition: ''
-  })
+// 状态管理
+const scrollState = ref<ScrollState>({
+  translateX: 0,
+  transition: "",
+});
 
-  const touchState = ref<TouchState>({
-    startX: 0,
-    currentX: 0
-  })
+const touchState = ref<TouchState>({
+  startX: 0,
+  currentX: 0,
+});
 
-  const clickedPath = ref('')
+const clickedPath = ref("");
 
-  // 计算属性
-  const list = computed(() => store.opened)
-  const activeTab = computed(() => currentRoute.value.path)
-  const activeTabIndex = computed(() => list.value.findIndex((tab) => tab.path === activeTab.value))
+// 计算属性
+const list = computed(() => store.opened);
+const activeTab = computed(() => currentRoute.value.path);
+const activeTabIndex = computed(() => list.value.findIndex((tab) => tab.path === activeTab.value));
 
-  // 右键菜单逻辑
-  const useContextMenu = () => {
-    const getClickedTabInfo = () => {
-      const clickedIndex = list.value.findIndex((tab) => tab.path === clickedPath.value)
-      const currentTab = list.value[clickedIndex]
-
-      return {
-        clickedIndex,
-        currentTab,
-        isLastTab: clickedIndex === list.value.length - 1,
-        isOneTab: list.value.length === 1,
-        isCurrentTab: clickedPath.value === activeTab.value
-      }
-    }
-
-    // 检查标签页是否固定
-    const checkTabsFixedStatus = (clickedIndex: number) => {
-      const leftTabs = list.value.slice(0, clickedIndex)
-      const rightTabs = list.value.slice(clickedIndex + 1)
-      const otherTabs = list.value.filter((_, index) => index !== clickedIndex)
-
-      return {
-        areAllLeftTabsFixed: leftTabs.length > 0 && leftTabs.every((tab) => tab.fixedTab),
-        areAllRightTabsFixed: rightTabs.length > 0 && rightTabs.every((tab) => tab.fixedTab),
-        areAllOtherTabsFixed: otherTabs.length > 0 && otherTabs.every((tab) => tab.fixedTab),
-        areAllTabsFixed: list.value.every((tab) => tab.fixedTab)
-      }
-    }
-
-    // 右键菜单选项
-    const menuItems = computed(() => {
-      const { clickedIndex, currentTab, isLastTab, isOneTab, isCurrentTab } = getClickedTabInfo()
-      const fixedStatus = checkTabsFixedStatus(clickedIndex)
-
-      return [
-        {
-          key: 'refresh',
-          label: t('worktab.btn.refresh'),
-          icon: 'ri:refresh-line',
-          disabled: !isCurrentTab
-        },
-        {
-          key: 'fixed',
-          label: currentTab?.fixedTab ? t('worktab.btn.unfixed') : t('worktab.btn.fixed'),
-          icon: 'ri:pushpin-2-line',
-          disabled: false,
-          showLine: true
-        },
-        {
-          key: 'left',
-          label: t('worktab.btn.closeLeft'),
-          icon: 'ri:arrow-left-s-line',
-          disabled: clickedIndex === 0 || fixedStatus.areAllLeftTabsFixed
-        },
-        {
-          key: 'right',
-          label: t('worktab.btn.closeRight'),
-          icon: 'ri:arrow-right-s-line',
-          disabled: isLastTab || fixedStatus.areAllRightTabsFixed
-        },
-        {
-          key: 'other',
-          label: t('worktab.btn.closeOther'),
-          icon: 'ri:close-fill',
-          disabled: isOneTab || fixedStatus.areAllOtherTabsFixed
-        },
-        {
-          key: 'all',
-          label: t('worktab.btn.closeAll'),
-          icon: 'ri:close-circle-line',
-          disabled: isOneTab || fixedStatus.areAllTabsFixed
-        }
-      ]
-    })
-
-    return { menuItems }
-  }
-
-  // 滚动逻辑
-  const useScrolling = () => {
-    const setTransition = () => {
-      scrollState.value.transition = 'transform 0.5s cubic-bezier(0.15, 0, 0.15, 1)'
-      setTimeout(() => {
-        scrollState.value.transition = ''
-      }, 250)
-    }
-
-    const getCurrentTabElement = (): HTMLElement | null => {
-      return document.getElementById(`scroll-li-${activeTabIndex.value}`)
-    }
-
-    const calculateScrollPosition = () => {
-      if (!scrollRef.value || !tabsRef.value) return
-
-      const scrollWidth = scrollRef.value.offsetWidth
-      const ulWidth = tabsRef.value.offsetWidth
-      const curTabEl = getCurrentTabElement()
-
-      if (!curTabEl) return
-
-      const { offsetLeft, clientWidth } = curTabEl
-      const curTabRight = offsetLeft + clientWidth
-      const targetLeft = scrollWidth - curTabRight
-
-      return {
-        scrollWidth,
-        ulWidth,
-        offsetLeft,
-        clientWidth,
-        curTabRight,
-        targetLeft
-      }
-    }
-
-    const autoPositionTab = () => {
-      const positions = calculateScrollPosition()
-      if (!positions) return
-
-      const { scrollWidth, ulWidth, offsetLeft, curTabRight, targetLeft } = positions
-
-      if (
-        (offsetLeft > Math.abs(scrollState.value.translateX) && curTabRight <= scrollWidth) ||
-        (scrollState.value.translateX < targetLeft && targetLeft < 0)
-      ) {
-        return
-      }
-
-      requestAnimationFrame(() => {
-        if (curTabRight > scrollWidth) {
-          scrollState.value.translateX = Math.max(targetLeft - 6, scrollWidth - ulWidth)
-        } else if (offsetLeft < Math.abs(scrollState.value.translateX)) {
-          scrollState.value.translateX = -offsetLeft
-        }
-      })
-    }
-
-    const adjustPositionAfterClose = () => {
-      const positions = calculateScrollPosition()
-      if (!positions) return
-
-      const { scrollWidth, ulWidth, offsetLeft, clientWidth } = positions
-      const curTabLeft = offsetLeft + clientWidth
-
-      requestAnimationFrame(() => {
-        scrollState.value.translateX = curTabLeft > scrollWidth ? scrollWidth - ulWidth : 0
-      })
-    }
+// 右键菜单逻辑
+const useContextMenu = () => {
+  const getClickedTabInfo = () => {
+    const clickedIndex = list.value.findIndex((tab) => tab.path === clickedPath.value);
+    const currentTab = list.value[clickedIndex];
 
     return {
-      setTransition,
-      autoPositionTab,
-      adjustPositionAfterClose
-    }
-  }
+      clickedIndex,
+      currentTab,
+      isLastTab: clickedIndex === list.value.length - 1,
+      isOneTab: list.value.length === 1,
+      isCurrentTab: clickedPath.value === activeTab.value,
+    };
+  };
 
-  // 事件处理逻辑
-  const useEventHandlers = () => {
-    const { setTransition, adjustPositionAfterClose } = useScrolling()
-
-    const handleWheelScroll = (event: WheelEvent) => {
-      if (!scrollRef.value || !tabsRef.value) return
-
-      event.preventDefault()
-
-      if (tabsRef.value.offsetWidth <= scrollRef.value.offsetWidth) return
-
-      const xMax = 0
-      const xMin = scrollRef.value.offsetWidth - tabsRef.value.offsetWidth
-      const delta = Math.abs(event.deltaX) > Math.abs(event.deltaY) ? event.deltaX : event.deltaY
-
-      scrollState.value.translateX = Math.min(
-        Math.max(scrollState.value.translateX - delta, xMin),
-        xMax
-      )
-    }
-
-    const handleTouchStart = (event: TouchEvent) => {
-      touchState.value.startX = event.touches[0].clientX
-    }
-
-    const handleTouchMove = (event: TouchEvent) => {
-      if (!scrollRef.value || !tabsRef.value) return
-
-      touchState.value.currentX = event.touches[0].clientX
-      const deltaX = touchState.value.currentX - touchState.value.startX
-      const xMin = scrollRef.value.offsetWidth - tabsRef.value.offsetWidth
-
-      scrollState.value.translateX = Math.min(
-        Math.max(scrollState.value.translateX + deltaX, xMin),
-        0
-      )
-      touchState.value.startX = touchState.value.currentX
-    }
-
-    const handleTouchEnd = () => {
-      setTransition()
-    }
-
-    const setupEventListeners = () => {
-      if (tabsRef.value) {
-        tabsRef.value.addEventListener('wheel', handleWheelScroll, { passive: false })
-        tabsRef.value.addEventListener('touchstart', handleTouchStart, { passive: true })
-        tabsRef.value.addEventListener('touchmove', handleTouchMove, { passive: true })
-        tabsRef.value.addEventListener('touchend', handleTouchEnd, { passive: true })
-      }
-    }
-
-    const cleanupEventListeners = () => {
-      if (tabsRef.value) {
-        tabsRef.value.removeEventListener('wheel', handleWheelScroll)
-        tabsRef.value.removeEventListener('touchstart', handleTouchStart)
-        tabsRef.value.removeEventListener('touchmove', handleTouchMove)
-        tabsRef.value.removeEventListener('touchend', handleTouchEnd)
-      }
-    }
+  // 检查标签页是否固定
+  const checkTabsFixedStatus = (clickedIndex: number) => {
+    const leftTabs = list.value.slice(0, clickedIndex);
+    const rightTabs = list.value.slice(clickedIndex + 1);
+    const otherTabs = list.value.filter((_, index) => index !== clickedIndex);
 
     return {
-      setupEventListeners,
-      cleanupEventListeners,
-      adjustPositionAfterClose
-    }
-  }
+      areAllLeftTabsFixed: leftTabs.length > 0 && leftTabs.every((tab) => tab.fixedTab),
+      areAllRightTabsFixed: rightTabs.length > 0 && rightTabs.every((tab) => tab.fixedTab),
+      areAllOtherTabsFixed: otherTabs.length > 0 && otherTabs.every((tab) => tab.fixedTab),
+      areAllTabsFixed: list.value.every((tab) => tab.fixedTab),
+    };
+  };
 
-  // 标签页操作逻辑
-  const useTabOperations = (adjustPositionAfterClose: () => void) => {
-    const clickTab = (item: WorkTab) => {
-      router.push({
-        path: item.path,
-        query: item.query as LocationQueryRaw
-      })
-    }
+  // 右键菜单选项
+  const menuItems = computed(() => {
+    const { clickedIndex, currentTab, isLastTab, isOneTab, isCurrentTab } = getClickedTabInfo();
+    const fixedStatus = checkTabsFixedStatus(clickedIndex);
 
-    const closeWorktab = (type: TabCloseType, tabPath: string) => {
-      const path = typeof tabPath === 'string' ? tabPath : route.path
+    return [
+      {
+        key: "refresh",
+        label: t("worktab.btn.refresh"),
+        icon: "ri:refresh-line",
+        disabled: !isCurrentTab,
+      },
+      {
+        key: "fixed",
+        label: currentTab?.fixedTab ? t("worktab.btn.unfixed") : t("worktab.btn.fixed"),
+        icon: "ri:pushpin-2-line",
+        disabled: false,
+        showLine: true,
+      },
+      {
+        key: "left",
+        label: t("worktab.btn.closeLeft"),
+        icon: "ri:arrow-left-s-line",
+        disabled: clickedIndex === 0 || fixedStatus.areAllLeftTabsFixed,
+      },
+      {
+        key: "right",
+        label: t("worktab.btn.closeRight"),
+        icon: "ri:arrow-right-s-line",
+        disabled: isLastTab || fixedStatus.areAllRightTabsFixed,
+      },
+      {
+        key: "other",
+        label: t("worktab.btn.closeOther"),
+        icon: "ri:close-fill",
+        disabled: isOneTab || fixedStatus.areAllOtherTabsFixed,
+      },
+      {
+        key: "all",
+        label: t("worktab.btn.closeAll"),
+        icon: "ri:close-circle-line",
+        disabled: isOneTab || fixedStatus.areAllTabsFixed,
+      },
+    ];
+  });
 
-      const closeActions = {
-        current: () => store.removeTab(path),
-        left: () => store.removeLeft(path),
-        right: () => store.removeRight(path),
-        other: () => store.removeOthers(path),
-        all: () => store.removeAll()
-      }
+  return { menuItems };
+};
 
-      closeActions[type]?.()
+// 滚动逻辑
+const useScrolling = () => {
+  const setTransition = () => {
+    scrollState.value.transition = "transform 0.5s cubic-bezier(0.15, 0, 0.15, 1)";
+    setTimeout(() => {
+      scrollState.value.transition = "";
+    }, 250);
+  };
 
-      setTimeout(() => {
-        adjustPositionAfterClose()
-      }, 100)
-    }
+  const getCurrentTabElement = (): HTMLElement | null => {
+    return document.getElementById(`scroll-li-${activeTabIndex.value}`);
+  };
 
-    const showMenu = (e: MouseEvent, path?: string) => {
-      clickedPath.value = path || ''
-      menuRef.value?.show(e)
-      e.preventDefault()
-      e.stopPropagation()
-    }
+  const calculateScrollPosition = () => {
+    if (!scrollRef.value || !tabsRef.value) return;
 
-    const handleSelect = (item: MenuItemType) => {
-      const { key } = item
+    const scrollWidth = scrollRef.value.offsetWidth;
+    const ulWidth = tabsRef.value.offsetWidth;
+    const curTabEl = getCurrentTabElement();
 
-      if (key === 'refresh') {
-        useCommon().refresh()
-        return
-      }
+    if (!curTabEl) return;
 
-      if (key === 'fixed') {
-        useWorktabStore().toggleFixedTab(clickedPath.value)
-        return
-      }
-
-      const activeIndex = list.value.findIndex((tab) => tab.path === activeTab.value)
-      const clickedIndex = list.value.findIndex((tab) => tab.path === clickedPath.value)
-
-      const navigationRules = {
-        left: activeIndex < clickedIndex,
-        right: activeIndex > clickedIndex,
-        other: true
-      } as const
-
-      const shouldNavigate = navigationRules[key as keyof typeof navigationRules]
-
-      if (shouldNavigate) {
-        router.push(clickedPath.value)
-      }
-
-      closeWorktab(key as TabCloseType, clickedPath.value)
-    }
+    const { offsetLeft, clientWidth } = curTabEl;
+    const curTabRight = offsetLeft + clientWidth;
+    const targetLeft = scrollWidth - curTabRight;
 
     return {
-      clickTab,
-      closeWorktab,
-      showMenu,
-      handleSelect
+      scrollWidth,
+      ulWidth,
+      offsetLeft,
+      clientWidth,
+      curTabRight,
+      targetLeft,
+    };
+  };
+
+  const autoPositionTab = () => {
+    const positions = calculateScrollPosition();
+    if (!positions) return;
+
+    const { scrollWidth, ulWidth, offsetLeft, curTabRight, targetLeft } = positions;
+
+    if (
+      (offsetLeft > Math.abs(scrollState.value.translateX) && curTabRight <= scrollWidth) ||
+      (scrollState.value.translateX < targetLeft && targetLeft < 0)
+    ) {
+      return;
     }
+
+    requestAnimationFrame(() => {
+      if (curTabRight > scrollWidth) {
+        scrollState.value.translateX = Math.max(targetLeft - 6, scrollWidth - ulWidth);
+      } else if (offsetLeft < Math.abs(scrollState.value.translateX)) {
+        scrollState.value.translateX = -offsetLeft;
+      }
+    });
+  };
+
+  const adjustPositionAfterClose = () => {
+    const positions = calculateScrollPosition();
+    if (!positions) return;
+
+    const { scrollWidth, ulWidth, offsetLeft, clientWidth } = positions;
+    const curTabLeft = offsetLeft + clientWidth;
+
+    requestAnimationFrame(() => {
+      scrollState.value.translateX = curTabLeft > scrollWidth ? scrollWidth - ulWidth : 0;
+    });
+  };
+
+  return {
+    setTransition,
+    autoPositionTab,
+    adjustPositionAfterClose,
+  };
+};
+
+// 事件处理逻辑
+const useEventHandlers = () => {
+  const { setTransition, adjustPositionAfterClose } = useScrolling();
+
+  const handleWheelScroll = (event: WheelEvent) => {
+    if (!scrollRef.value || !tabsRef.value) return;
+
+    event.preventDefault();
+
+    if (tabsRef.value.offsetWidth <= scrollRef.value.offsetWidth) return;
+
+    const xMax = 0;
+    const xMin = scrollRef.value.offsetWidth - tabsRef.value.offsetWidth;
+    const delta = Math.abs(event.deltaX) > Math.abs(event.deltaY) ? event.deltaX : event.deltaY;
+
+    scrollState.value.translateX = Math.min(
+      Math.max(scrollState.value.translateX - delta, xMin),
+      xMax
+    );
+  };
+
+  const handleTouchStart = (event: TouchEvent) => {
+    touchState.value.startX = event.touches[0].clientX;
+  };
+
+  const handleTouchMove = (event: TouchEvent) => {
+    if (!scrollRef.value || !tabsRef.value) return;
+
+    touchState.value.currentX = event.touches[0].clientX;
+    const deltaX = touchState.value.currentX - touchState.value.startX;
+    const xMin = scrollRef.value.offsetWidth - tabsRef.value.offsetWidth;
+
+    scrollState.value.translateX = Math.min(
+      Math.max(scrollState.value.translateX + deltaX, xMin),
+      0
+    );
+    touchState.value.startX = touchState.value.currentX;
+  };
+
+  const handleTouchEnd = () => {
+    setTransition();
+  };
+
+  const setupEventListeners = () => {
+    if (tabsRef.value) {
+      tabsRef.value.addEventListener("wheel", handleWheelScroll, { passive: false });
+      tabsRef.value.addEventListener("touchstart", handleTouchStart, { passive: true });
+      tabsRef.value.addEventListener("touchmove", handleTouchMove, { passive: true });
+      tabsRef.value.addEventListener("touchend", handleTouchEnd, { passive: true });
+    }
+  };
+
+  const cleanupEventListeners = () => {
+    if (tabsRef.value) {
+      tabsRef.value.removeEventListener("wheel", handleWheelScroll);
+      tabsRef.value.removeEventListener("touchstart", handleTouchStart);
+      tabsRef.value.removeEventListener("touchmove", handleTouchMove);
+      tabsRef.value.removeEventListener("touchend", handleTouchEnd);
+    }
+  };
+
+  return {
+    setupEventListeners,
+    cleanupEventListeners,
+    adjustPositionAfterClose,
+  };
+};
+
+// 标签页操作逻辑
+const useTabOperations = (adjustPositionAfterClose: () => void) => {
+  const clickTab = (item: WorkTab) => {
+    router.push({
+      path: item.path,
+      query: item.query as LocationQueryRaw,
+    });
+  };
+
+  const closeWorktab = (type: TabCloseType, tabPath: string) => {
+    const path = typeof tabPath === "string" ? tabPath : route.path;
+
+    const closeActions = {
+      current: () => store.removeTab(path),
+      left: () => store.removeLeft(path),
+      right: () => store.removeRight(path),
+      other: () => store.removeOthers(path),
+      all: () => store.removeAll(),
+    };
+
+    closeActions[type]?.();
+
+    setTimeout(() => {
+      adjustPositionAfterClose();
+    }, 100);
+  };
+
+  const showMenu = (e: MouseEvent, path?: string) => {
+    clickedPath.value = path || "";
+    menuRef.value?.show(e);
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  const handleSelect = (item: MenuItemType) => {
+    const { key } = item;
+
+    if (key === "refresh") {
+      useCommon().refresh();
+      return;
+    }
+
+    if (key === "fixed") {
+      useWorktabStore().toggleFixedTab(clickedPath.value);
+      return;
+    }
+
+    const activeIndex = list.value.findIndex((tab) => tab.path === activeTab.value);
+    const clickedIndex = list.value.findIndex((tab) => tab.path === clickedPath.value);
+
+    const navigationRules = {
+      left: activeIndex < clickedIndex,
+      right: activeIndex > clickedIndex,
+      other: true,
+    } as const;
+
+    const shouldNavigate = navigationRules[key as keyof typeof navigationRules];
+
+    if (shouldNavigate) {
+      router.push(clickedPath.value);
+    }
+
+    closeWorktab(key as TabCloseType, clickedPath.value);
+  };
+
+  return {
+    clickTab,
+    closeWorktab,
+    showMenu,
+    handleSelect,
+  };
+};
+
+// 组合所有逻辑
+const { menuItems } = useContextMenu();
+const { setTransition, autoPositionTab } = useScrolling();
+const { setupEventListeners, cleanupEventListeners, adjustPositionAfterClose } = useEventHandlers();
+const { clickTab, closeWorktab, showMenu, handleSelect } =
+  useTabOperations(adjustPositionAfterClose);
+
+// 生命周期
+onMounted(() => {
+  setupEventListeners();
+  autoPositionTab();
+});
+
+onUnmounted(() => {
+  cleanupEventListeners();
+});
+
+// 监听器
+watch(
+  () => currentRoute.value,
+  () => {
+    setTransition();
+    autoPositionTab();
   }
+);
 
-  // 组合所有逻辑
-  const { menuItems } = useContextMenu()
-  const { setTransition, autoPositionTab } = useScrolling()
-  const { setupEventListeners, cleanupEventListeners, adjustPositionAfterClose } =
-    useEventHandlers()
-  const { clickTab, closeWorktab, showMenu, handleSelect } =
-    useTabOperations(adjustPositionAfterClose)
-
-  // 生命周期
-  onMounted(() => {
-    setupEventListeners()
-    autoPositionTab()
-  })
-
-  onUnmounted(() => {
-    cleanupEventListeners()
-  })
-
-  // 监听器
-  watch(
-    () => currentRoute.value,
-    () => {
-      setTransition()
-      autoPositionTab()
-    }
-  )
-
-  watch(
-    () => userStore.language,
-    () => {
-      scrollState.value.translateX = 0
-      nextTick(() => {
-        autoPositionTab()
-      })
-    }
-  )
+watch(
+  () => userStore.language,
+  () => {
+    scrollState.value.translateX = 0;
+    nextTick(() => {
+      autoPositionTab();
+    });
+  }
+);
 </script>
 
 <style scoped>
-  .google-tab.activ-tab {
-    color: var(--theme-color) !important;
-    background-color: var(--el-color-primary-light-9) !important;
-    border-bottom: 0 !important;
-    border-bottom-right-radius: 0 !important;
-    border-bottom-left-radius: 0 !important;
-  }
+.google-tab.activ-tab {
+  color: var(--theme-color) !important;
+  background-color: var(--el-color-primary-light-9) !important;
+  border-bottom: 0 !important;
+  border-bottom-right-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+}
 
-  .google-tab.activ-tab::before,
-  .google-tab.activ-tab::after {
-    position: absolute;
-    bottom: 0;
-    width: 20px;
-    height: 20px;
-    content: '';
-    border-radius: 50%;
-    box-shadow: 0 0 0 30px var(--el-color-primary-light-9);
-  }
+.google-tab.activ-tab::before,
+.google-tab.activ-tab::after {
+  position: absolute;
+  bottom: 0;
+  width: 20px;
+  height: 20px;
+  content: "";
+  border-radius: 50%;
+  box-shadow: 0 0 0 30px var(--el-color-primary-light-9);
+}
 
-  .google-tab.activ-tab::before {
-    left: -20px;
-    clip-path: inset(50% -10px 0 50%);
-  }
+.google-tab.activ-tab::before {
+  left: -20px;
+  clip-path: inset(50% -10px 0 50%);
+}
 
-  .google-tab.activ-tab::after {
-    right: -20px;
-    clip-path: inset(50% 50% 0 -10px);
-  }
+.google-tab.activ-tab::after {
+  right: -20px;
+  clip-path: inset(50% 50% 0 -10px);
+}
 
-  .dark .google-tab.activ-tab {
-    color: var(--art-gray-800) !important;
-    background-color: var(--art-hover-color) !important;
-  }
+.dark .google-tab.activ-tab {
+  color: var(--art-gray-800) !important;
+  background-color: var(--art-hover-color) !important;
+}
 
-  .dark .google-tab.activ-tab::before,
-  .dark .google-tab.activ-tab::after {
-    box-shadow: 0 0 0 30px var(--art-hover-color);
-  }
+.dark .google-tab.activ-tab::before,
+.dark .google-tab.activ-tab::after {
+  box-shadow: 0 0 0 30px var(--art-hover-color);
+}
 
-  .google-tab:not(.activ-tab):hover {
-    box-sizing: border-box;
-    color: var(--art-gray-600) !important;
-    background-color: var(--art-gray-200) !important;
-    border-bottom: 1px solid var(--default-box-color) !important;
-    border-radius: calc(var(--custom-radius) / 2.5 + 4px) !important;
-  }
+.google-tab:not(.activ-tab):hover {
+  box-sizing: border-box;
+  color: var(--art-gray-600) !important;
+  background-color: var(--art-gray-200) !important;
+  border-bottom: 1px solid var(--default-box-color) !important;
+  border-radius: calc(var(--custom-radius) / 2.5 + 4px) !important;
+}
 
-  .dark .google-tab:not(.activ-tab):hover {
-    background-color: var(--art-hover-color) !important;
-  }
+.dark .google-tab:not(.activ-tab):hover {
+  background-color: var(--art-hover-color) !important;
+}
 
-  .google-tab:hover .line,
-  .google-tab.activ-tab .line,
-  .google-tab:first-child .line {
-    opacity: 0;
-  }
+.google-tab:hover .line,
+.google-tab.activ-tab .line,
+.google-tab:first-child .line {
+  opacity: 0;
+}
 
-  .google-tab:hover + .google-tab .line,
-  .google-tab.activ-tab + .google-tab .line {
-    opacity: 0;
-  }
+.google-tab:hover + .google-tab .line,
+.google-tab.activ-tab + .google-tab .line {
+  opacity: 0;
+}
 
-  .google-tab::before,
-  .google-tab::after {
-    position: absolute;
-    bottom: 0;
-    width: 20px;
-    height: 20px;
-    content: '';
-    border-radius: 50%;
-    box-shadow: 0 0 0 30px transparent;
-  }
+.google-tab::before,
+.google-tab::after {
+  position: absolute;
+  bottom: 0;
+  width: 20px;
+  height: 20px;
+  content: "";
+  border-radius: 50%;
+  box-shadow: 0 0 0 30px transparent;
+}
 
-  .google-tab::before {
-    left: -20px;
-    clip-path: inset(50% -10px 0 50%);
-  }
+.google-tab::before {
+  left: -20px;
+  clip-path: inset(50% -10px 0 50%);
+}
 
-  .google-tab::after {
-    right: -20px;
-    clip-path: inset(50% 50% 0 -10px);
-  }
+.google-tab::after {
+  right: -20px;
+  clip-path: inset(50% 50% 0 -10px);
+}
 
-  .google-tab i:hover {
-    color: var(--art-gray-700);
-    background: var(--art-gray-300);
-  }
+.google-tab i:hover {
+  color: var(--art-gray-700);
+  background: var(--art-gray-300);
+}
 
-  @media only screen and (width <= 768px) {
-    .box-border.flex.justify-between {
-      padding-right: 0.625rem;
-      padding-left: 0.625rem;
-    }
+@media only screen and (width <= 768px) {
+  .box-border.flex.justify-between {
+    padding-right: 0.625rem;
+    padding-left: 0.625rem;
   }
+}
 
-  @media only screen and (width <= 640px) {
-    .box-border.flex.justify-between {
-      padding-right: 0.9375rem;
-      padding-left: 0.9375rem;
-    }
+@media only screen and (width <= 640px) {
+  .box-border.flex.justify-between {
+    padding-right: 0.9375rem;
+    padding-left: 0.9375rem;
   }
+}
 </style>
diff --git a/frontend/new-web/src/components/core/media/art-cutter-img/index.vue b/frontend/new-web/src/components/core/media/art-cutter-img/index.vue
index 191ceed0..7a2ac94b 100644
--- a/frontend/new-web/src/components/core/media/art-cutter-img/index.vue
+++ b/frontend/new-web/src/components/core/media/art-cutter-img/index.vue
@@ -32,319 +32,319 @@
         class="preview-box"
         :style="{
           width: `${cutterProps.cutWidth}px`,
-          height: `${cutterProps.cutHeight}px`
+          height: `${cutterProps.cutHeight}px`,
         }"
       >
         <img class="preview-img" :src="temImgPath" alt="预览图" v-if="temImgPath" />
       </div>
-      <ElButton class="download-btn" @click="downloadImg" :disabled="!temImgPath" v-ripple
-        >下载图片</ElButton
-      >
+      <ElButton class="download-btn" @click="downloadImg" :disabled="!temImgPath" v-ripple>
+        下载图片
+      </ElButton>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-  import ImgCutter from 'vue-img-cutter'
+import ImgCutter from "vue-img-cutter";
 
-  defineOptions({ name: 'ArtCutterImg' })
+defineOptions({ name: "ArtCutterImg" });
 
-  interface CutterProps {
-    // 基础配置
-    /** 是否模态框 */
-    isModal?: boolean
-    /** 是否显示工具栏 */
-    tool?: boolean
-    /** 工具栏背景色 */
-    toolBgc?: string
-    /** 标题 */
-    title?: string
-    /** 预览标题 */
-    previewTitle?: string
-    /** 是否显示预览 */
-    showPreview?: boolean
+interface CutterProps {
+  // 基础配置
+  /** 是否模态框 */
+  isModal?: boolean;
+  /** 是否显示工具栏 */
+  tool?: boolean;
+  /** 工具栏背景色 */
+  toolBgc?: string;
+  /** 标题 */
+  title?: string;
+  /** 预览标题 */
+  previewTitle?: string;
+  /** 是否显示预览 */
+  showPreview?: boolean;
 
-    // 尺寸相关
-    /** 容器宽度 */
-    boxWidth?: number
-    /** 容器高度 */
-    boxHeight?: number
-    /** 裁剪宽度 */
-    cutWidth?: number
-    /** 裁剪高度 */
-    cutHeight?: number
-    /** 是否允许大小调整 */
-    sizeChange?: boolean
+  // 尺寸相关
+  /** 容器宽度 */
+  boxWidth?: number;
+  /** 容器高度 */
+  boxHeight?: number;
+  /** 裁剪宽度 */
+  cutWidth?: number;
+  /** 裁剪高度 */
+  cutHeight?: number;
+  /** 是否允许大小调整 */
+  sizeChange?: boolean;
 
-    // 移动和缩放
-    /** 是否允许移动 */
-    moveAble?: boolean
-    /** 是否允许图片移动 */
-    imgMove?: boolean
-    /** 是否允许缩放 */
-    scaleAble?: boolean
+  // 移动和缩放
+  /** 是否允许移动 */
+  moveAble?: boolean;
+  /** 是否允许图片移动 */
+  imgMove?: boolean;
+  /** 是否允许缩放 */
+  scaleAble?: boolean;
 
-    // 图片相关
-    /** 是否显示原始图片 */
-    originalGraph?: boolean
-    /** 是否允许跨域 */
-    crossOrigin?: boolean
-    /** 文件类型 */
-    fileType?: 'png' | 'jpeg' | 'webp'
-    /** 质量 */
-    quality?: number
+  // 图片相关
+  /** 是否显示原始图片 */
+  originalGraph?: boolean;
+  /** 是否允许跨域 */
+  crossOrigin?: boolean;
+  /** 文件类型 */
+  fileType?: "png" | "jpeg" | "webp";
+  /** 质量 */
+  quality?: number;
 
-    // 水印
-    /** 水印文本 */
-    watermarkText?: string
-    /** 水印字体大小 */
-    watermarkFontSize?: number
-    /** 水印颜色 */
-    watermarkColor?: string
+  // 水印
+  /** 水印文本 */
+  watermarkText?: string;
+  /** 水印字体大小 */
+  watermarkFontSize?: number;
+  /** 水印颜色 */
+  watermarkColor?: string;
 
-    // 其他功能
-    /** 是否保存裁剪位置 */
-    saveCutPosition?: boolean
-    /** 是否预览模式 */
-    previewMode?: boolean
+  // 其他功能
+  /** 是否保存裁剪位置 */
+  saveCutPosition?: boolean;
+  /** 是否预览模式 */
+  previewMode?: boolean;
 
-    // 输入图片
-    imgUrl?: string
-  }
+  // 输入图片
+  imgUrl?: string;
+}
 
-  interface CutterResult {
-    fileName: string
-    file: File
-    blob: Blob
-    dataURL: string
-  }
+interface CutterResult {
+  fileName: string;
+  file: File;
+  blob: Blob;
+  dataURL: string;
+}
 
-  const props = withDefaults(defineProps<CutterProps>(), {
-    // 基础配置默认值
-    isModal: false,
-    tool: true,
-    toolBgc: '#fff',
-    title: '',
-    previewTitle: '',
-    showPreview: true,
+const props = withDefaults(defineProps<CutterProps>(), {
+  // 基础配置默认值
+  isModal: false,
+  tool: true,
+  toolBgc: "#fff",
+  title: "",
+  previewTitle: "",
+  showPreview: true,
 
-    // 尺寸相关默认值
-    boxWidth: 700,
-    boxHeight: 458,
-    cutWidth: 470,
-    cutHeight: 270,
-    sizeChange: true,
+  // 尺寸相关默认值
+  boxWidth: 700,
+  boxHeight: 458,
+  cutWidth: 470,
+  cutHeight: 270,
+  sizeChange: true,
 
-    // 移动和缩放默认值
-    moveAble: true,
-    imgMove: true,
-    scaleAble: true,
+  // 移动和缩放默认值
+  moveAble: true,
+  imgMove: true,
+  scaleAble: true,
 
-    // 图片相关默认值
-    originalGraph: true,
-    crossOrigin: true,
-    fileType: 'png',
-    quality: 0.9,
+  // 图片相关默认值
+  originalGraph: true,
+  crossOrigin: true,
+  fileType: "png",
+  quality: 0.9,
 
-    // 水印默认值
-    watermarkText: '',
-    watermarkFontSize: 20,
-    watermarkColor: '#ffffff',
+  // 水印默认值
+  watermarkText: "",
+  watermarkFontSize: 20,
+  watermarkColor: "#ffffff",
 
-    // 其他功能默认值
-    saveCutPosition: true,
-    previewMode: true
-  })
+  // 其他功能默认值
+  saveCutPosition: true,
+  previewMode: true,
+});
 
-  const emit = defineEmits(['update:imgUrl', 'error', 'imageLoadComplete', 'imageLoadError'])
+const emit = defineEmits(["update:imgUrl", "error", "imageLoadComplete", "imageLoadError"]);
 
-  const temImgPath = ref('')
-  const imgCutterModal = ref()
+const temImgPath = ref("");
+const imgCutterModal = ref();
 
-  // 计算属性：整合所有ImgCutter的props
-  const cutterProps = computed(() => ({
-    ...props,
-    WatermarkText: props.watermarkText,
-    WatermarkFontSize: props.watermarkFontSize,
-    WatermarkColor: props.watermarkColor
-  }))
+// 计算属性：整合所有ImgCutter的props
+const cutterProps = computed(() => ({
+  ...props,
+  WatermarkText: props.watermarkText,
+  WatermarkFontSize: props.watermarkFontSize,
+  WatermarkColor: props.watermarkColor,
+}));
 
-  // 图片预加载
-  function preloadImage(url: string): Promise<void> {
-    return new Promise((resolve, reject) => {
-      const img = new Image()
-      img.crossOrigin = 'anonymous'
-      img.onload = () => resolve()
-      img.onerror = reject
-      img.src = url
-    })
-  }
+// 图片预加载
+function preloadImage(url: string): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => resolve();
+    img.onerror = reject;
+    img.src = url;
+  });
+}
 
-  // 初始化裁剪器
-  async function initImgCutter() {
-    if (props.imgUrl) {
-      try {
-        await preloadImage(props.imgUrl)
-        imgCutterModal.value?.handleOpen({
-          name: '封面图片',
-          src: props.imgUrl
-        })
-      } catch (error) {
-        emit('error', error)
-        console.error('图片加载失败:', error)
-      }
+// 初始化裁剪器
+async function initImgCutter() {
+  if (props.imgUrl) {
+    try {
+      await preloadImage(props.imgUrl);
+      imgCutterModal.value?.handleOpen({
+        name: "封面图片",
+        src: props.imgUrl,
+      });
+    } catch (error) {
+      emit("error", error);
+      console.error("图片加载失败:", error);
     }
   }
+}
 
-  // 生命周期钩子
-  onMounted(() => {
-    if (props.imgUrl) {
-      temImgPath.value = props.imgUrl
-      initImgCutter()
+// 生命周期钩子
+onMounted(() => {
+  if (props.imgUrl) {
+    temImgPath.value = props.imgUrl;
+    initImgCutter();
+  }
+});
+
+// 监听图片URL变化
+watch(
+  () => props.imgUrl,
+  (newVal) => {
+    if (newVal) {
+      temImgPath.value = newVal;
+      initImgCutter();
     }
-  })
-
-  // 监听图片URL变化
-  watch(
-    () => props.imgUrl,
-    (newVal) => {
-      if (newVal) {
-        temImgPath.value = newVal
-        initImgCutter()
-      }
-    }
-  )
-
-  // 实时预览
-  function cutterPrintImg(result: { dataURL: string }) {
-    temImgPath.value = result.dataURL
   }
+);
 
-  // 裁剪完成
-  function cutDownImg(result: CutterResult) {
-    emit('update:imgUrl', result.dataURL)
-  }
+// 实时预览
+function cutterPrintImg(result: { dataURL: string }) {
+  temImgPath.value = result.dataURL;
+}
 
-  // 图片加载完成
-  function handleImageLoadComplete(result: any) {
-    emit('imageLoadComplete', result)
-  }
+// 裁剪完成
+function cutDownImg(result: CutterResult) {
+  emit("update:imgUrl", result.dataURL);
+}
 
-  // 图片加载失败
-  function handleImageLoadError(error: any) {
-    emit('error', error)
-    emit('imageLoadError', error)
-  }
+// 图片加载完成
+function handleImageLoadComplete(result: any) {
+  emit("imageLoadComplete", result);
+}
 
-  // 清除所有
-  function handleClearAll() {
-    temImgPath.value = ''
-  }
+// 图片加载失败
+function handleImageLoadError(error: any) {
+  emit("error", error);
+  emit("imageLoadError", error);
+}
 
-  // 下载图片
-  function downloadImg() {
-    console.log('下载图片')
-    const a = document.createElement('a')
-    a.href = temImgPath.value
-    a.download = 'image.png'
-    a.click()
-  }
+// 清除所有
+function handleClearAll() {
+  temImgPath.value = "";
+}
+
+// 下载图片
+function downloadImg() {
+  console.log("下载图片");
+  const a = document.createElement("a");
+  a.href = temImgPath.value;
+  a.download = "image.png";
+  a.click();
+}
 </script>
 
 <style lang="scss" scoped>
+.cutter-container {
+  display: flex;
+  flex-flow: row wrap;
+
+  .title {
+    padding-bottom: 10px;
+    font-size: 18px;
+    font-weight: 500;
+  }
+
+  .cutter-component {
+    margin-right: 30px;
+  }
+
+  .preview-container {
+    .preview-box {
+      background-color: var(--art-active-color) !important;
+
+      .preview-img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+    }
+
+    .download-btn {
+      display: block;
+      margin: 20px auto;
+    }
+  }
+
+  :deep(.toolBoxControl) {
+    z-index: 100;
+  }
+
+  :deep(.dockMain) {
+    right: 0;
+    bottom: -40px;
+    left: 0;
+    z-index: 10;
+    padding: 0;
+    background-color: transparent !important;
+    opacity: 1;
+  }
+
+  :deep(.copyright) {
+    display: none !important;
+  }
+
+  :deep(.i-dialog-footer) {
+    margin-top: 60px !important;
+  }
+
+  :deep(.dockBtn) {
+    height: 26px;
+    padding: 0 10px;
+    font-size: 12px;
+    line-height: 26px;
+    color: var(--el-color-primary) !important;
+    background-color: var(--el-color-primary-light-9) !important;
+    border: 1px solid var(--el-color-primary-light-4) !important;
+  }
+
+  :deep(.dockBtnScrollBar) {
+    margin: 0 10px 0 6px;
+    background-color: var(--el-color-primary-light-1);
+  }
+
+  :deep(.scrollBarControl) {
+    border-color: var(--el-color-primary);
+  }
+
+  :deep(.closeIcon) {
+    line-height: 15px !important;
+  }
+}
+
+.dark {
   .cutter-container {
-    display: flex;
-    flex-flow: row wrap;
-
-    .title {
-      padding-bottom: 10px;
-      font-size: 18px;
-      font-weight: 500;
+    :deep(.toolBox) {
+      border: transparent;
     }
 
-    .cutter-component {
-      margin-right: 30px;
-    }
-
-    .preview-container {
-      .preview-box {
-        background-color: var(--art-active-color) !important;
-
-        .preview-img {
-          width: 100%;
-          height: 100%;
-          object-fit: contain;
-        }
-      }
-
-      .download-btn {
-        display: block;
-        margin: 20px auto;
-      }
-    }
-
-    :deep(.toolBoxControl) {
-      z-index: 100;
-    }
-
-    :deep(.dockMain) {
-      right: 0;
-      bottom: -40px;
-      left: 0;
-      z-index: 10;
-      padding: 0;
+    :deep(.dialogMain) {
       background-color: transparent !important;
-      opacity: 1;
-    }
-
-    :deep(.copyright) {
-      display: none !important;
     }
 
     :deep(.i-dialog-footer) {
-      margin-top: 60px !important;
-    }
-
-    :deep(.dockBtn) {
-      height: 26px;
-      padding: 0 10px;
-      font-size: 12px;
-      line-height: 26px;
-      color: var(--el-color-primary) !important;
-      background-color: var(--el-color-primary-light-9) !important;
-      border: 1px solid var(--el-color-primary-light-4) !important;
-    }
-
-    :deep(.dockBtnScrollBar) {
-      margin: 0 10px 0 6px;
-      background-color: var(--el-color-primary-light-1);
-    }
-
-    :deep(.scrollBarControl) {
-      border-color: var(--el-color-primary);
-    }
-
-    :deep(.closeIcon) {
-      line-height: 15px !important;
-    }
-  }
-
-  .dark {
-    .cutter-container {
-      :deep(.toolBox) {
+      .btn {
+        background-color: var(--el-color-primary) !important;
         border: transparent;
       }
-
-      :deep(.dialogMain) {
-        background-color: transparent !important;
-      }
-
-      :deep(.i-dialog-footer) {
-        .btn {
-          background-color: var(--el-color-primary) !important;
-          border: transparent;
-        }
-      }
     }
   }
+}
 </style>
diff --git a/frontend/new-web/src/components/core/media/art-video-player/index.vue b/frontend/new-web/src/components/core/media/art-video-player/index.vue
index 4f681ea2..8baf361f 100644
--- a/frontend/new-web/src/components/core/media/art-video-player/index.vue
+++ b/frontend/new-web/src/components/core/media/art-video-player/index.vue
@@ -4,108 +4,108 @@
 </template>
 
 <script setup lang="ts">
-  import Player from 'xgplayer'
-  import 'xgplayer/dist/index.min.css'
+import Player from "xgplayer";
+import "xgplayer/dist/index.min.css";
 
-  defineOptions({ name: 'ArtVideoPlayer' })
+defineOptions({ name: "ArtVideoPlayer" });
 
-  interface Props {
-    /** 播放器容器 ID */
-    playerId: string
-    /** 视频源URL */
-    videoUrl: string
-    /** 视频封面图URL */
-    posterUrl: string
-    /** 是否自动播放 */
-    autoplay?: boolean
-    /** 音量大小(0-1) */
-    volume?: number
-    /** 可选的播放速率 */
-    playbackRates?: number[]
-    /** 是否循环播放 */
-    loop?: boolean
-    /** 是否静音 */
-    muted?: boolean
-    commonStyle?: VideoPlayerStyle
-  }
+interface Props {
+  /** 播放器容器 ID */
+  playerId: string;
+  /** 视频源URL */
+  videoUrl: string;
+  /** 视频封面图URL */
+  posterUrl: string;
+  /** 是否自动播放 */
+  autoplay?: boolean;
+  /** 音量大小(0-1) */
+  volume?: number;
+  /** 可选的播放速率 */
+  playbackRates?: number[];
+  /** 是否循环播放 */
+  loop?: boolean;
+  /** 是否静音 */
+  muted?: boolean;
+  commonStyle?: VideoPlayerStyle;
+}
 
-  const props = withDefaults(defineProps<Props>(), {
-    playerId: '',
-    videoUrl: '',
-    posterUrl: '',
-    autoplay: false,
-    volume: 1,
-    loop: false,
-    muted: false
-  })
+const props = withDefaults(defineProps<Props>(), {
+  playerId: "",
+  videoUrl: "",
+  posterUrl: "",
+  autoplay: false,
+  volume: 1,
+  loop: false,
+  muted: false,
+});
 
-  // 设置属性默认值
+// 设置属性默认值
 
-  // 播放器实例引用
-  const playerInstance = ref<Player | null>(null)
+// 播放器实例引用
+const playerInstance = ref<Player | null>(null);
 
-  // 播放器样式接口定义
-  interface VideoPlayerStyle {
-    progressColor?: string // 进度条背景色
-    playedColor?: string // 已播放部分颜色
-    cachedColor?: string // 缓存部分颜色
-    sliderBtnStyle?: Record<string, string> // 滑块按钮样式
-    volumeColor?: string // 音量控制器颜色
-  }
+// 播放器样式接口定义
+interface VideoPlayerStyle {
+  progressColor?: string; // 进度条背景色
+  playedColor?: string; // 已播放部分颜色
+  cachedColor?: string; // 缓存部分颜色
+  sliderBtnStyle?: Record<string, string>; // 滑块按钮样式
+  volumeColor?: string; // 音量控制器颜色
+}
 
-  // 默认样式配置
-  const defaultStyle: VideoPlayerStyle = {
-    progressColor: 'rgba(255, 255, 255, 0.3)',
-    playedColor: '#00AEED',
-    cachedColor: 'rgba(255, 255, 255, 0.6)',
-    sliderBtnStyle: {
-      width: '10px',
-      height: '10px',
-      backgroundColor: '#00AEED'
+// 默认样式配置
+const defaultStyle: VideoPlayerStyle = {
+  progressColor: "rgba(255, 255, 255, 0.3)",
+  playedColor: "#00AEED",
+  cachedColor: "rgba(255, 255, 255, 0.6)",
+  sliderBtnStyle: {
+    width: "10px",
+    height: "10px",
+    backgroundColor: "#00AEED",
+  },
+  volumeColor: "#00AEED",
+};
+
+// 组件挂载时初始化播放器
+onMounted(() => {
+  playerInstance.value = new Player({
+    id: props.playerId,
+    lang: "zh", // 设置界面语言为中文
+    volume: props.volume,
+    autoplay: props.autoplay,
+    screenShot: true, // 启用截图功能
+    url: props.videoUrl,
+    poster: props.posterUrl,
+    fluid: true, // 启用流式布局，自适应容器大小
+    playbackRate: props.playbackRates,
+    loop: props.loop,
+    muted: props.muted,
+    commonStyle: {
+      ...defaultStyle,
+      ...props.commonStyle,
     },
-    volumeColor: '#00AEED'
+  });
+
+  // 播放事件监听器
+  playerInstance.value.on("play", () => {
+    console.log("Video is playing");
+  });
+
+  // 暂停事件监听器
+  playerInstance.value.on("pause", () => {
+    console.log("Video is paused");
+  });
+
+  // 错误事件监听器
+  playerInstance.value.on("error", (error) => {
+    console.error("Error occurred:", error);
+  });
+});
+
+// 组件卸载前清理播放器实例
+onBeforeUnmount(() => {
+  if (playerInstance.value) {
+    playerInstance.value.destroy();
   }
-
-  // 组件挂载时初始化播放器
-  onMounted(() => {
-    playerInstance.value = new Player({
-      id: props.playerId,
-      lang: 'zh', // 设置界面语言为中文
-      volume: props.volume,
-      autoplay: props.autoplay,
-      screenShot: true, // 启用截图功能
-      url: props.videoUrl,
-      poster: props.posterUrl,
-      fluid: true, // 启用流式布局，自适应容器大小
-      playbackRate: props.playbackRates,
-      loop: props.loop,
-      muted: props.muted,
-      commonStyle: {
-        ...defaultStyle,
-        ...props.commonStyle
-      }
-    })
-
-    // 播放事件监听器
-    playerInstance.value.on('play', () => {
-      console.log('Video is playing')
-    })
-
-    // 暂停事件监听器
-    playerInstance.value.on('pause', () => {
-      console.log('Video is paused')
-    })
-
-    // 错误事件监听器
-    playerInstance.value.on('error', (error) => {
-      console.error('Error occurred:', error)
-    })
-  })
-
-  // 组件卸载前清理播放器实例
-  onBeforeUnmount(() => {
-    if (playerInstance.value) {
-      playerInstance.value.destroy()
-    }
-  })
+});
 </script>
diff --git a/frontend/new-web/src/components/core/others/art-menu-right/index.vue b/frontend/new-web/src/components/core/others/art-menu-right/index.vue
index 1cc92ab2..f2b4c161 100644
--- a/frontend/new-web/src/components/core/others/art-menu-right/index.vue
+++ b/frontend/new-web/src/components/core/others/art-menu-right/index.vue
@@ -24,8 +24,9 @@
               />
               <span
                 class="menu-label flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-g-800"
-                >{{ item.label }}</span
               >
+                {{ item.label }}
+              </span>
             </li>
 
             <!-- 子菜单 -->
@@ -42,8 +43,9 @@
                 />
                 <span
                   class="menu-label flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-g-800"
-                  >{{ item.label }}</span
                 >
+                  {{ item.label }}
+                </span>
                 <ArtSvgIcon
                   icon="ri:arrow-right-s-line"
                   class="ubmenu-arrow ml-auto mr-0 text-base text-g-500 transition-transform duration-150"
@@ -68,8 +70,9 @@
                   />
                   <span
                     class="menu-label flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-g-800"
-                    >{{ child.label }}</span
                   >
+                    {{ child.label }}
+                  </span>
                 </li>
               </ul>
             </li>
@@ -81,335 +84,335 @@
 </template>
 
 <script setup lang="ts">
-  import type { CSSProperties } from 'vue'
+import type { CSSProperties } from "vue";
 
-  defineOptions({ name: 'ArtMenuRight' })
+defineOptions({ name: "ArtMenuRight" });
 
-  export interface MenuItemType {
-    /** 菜单项唯一标识 */
-    key: string
-    /** 菜单项标签 */
-    label: string
-    /** 菜单项图标 */
-    icon?: string
-    /** 菜单项是否禁用 */
-    disabled?: boolean
-    /** 菜单项是否显示分割线 */
-    showLine?: boolean
-    /** 子菜单 */
-    children?: MenuItemType[]
-    [key: string]: any
-  }
+export interface MenuItemType {
+  /** 菜单项唯一标识 */
+  key: string;
+  /** 菜单项标签 */
+  label: string;
+  /** 菜单项图标 */
+  icon?: string;
+  /** 菜单项是否禁用 */
+  disabled?: boolean;
+  /** 菜单项是否显示分割线 */
+  showLine?: boolean;
+  /** 子菜单 */
+  children?: MenuItemType[];
+  [key: string]: any;
+}
 
-  interface Props {
-    menuItems: MenuItemType[]
-    /** 菜单宽度 */
-    menuWidth?: number
-    /** 子菜单宽度 */
-    submenuWidth?: number
-    /** 菜单项高度 */
-    itemHeight?: number
-    /** 边界距离 */
-    boundaryDistance?: number
-    /** 菜单内边距 */
-    menuPadding?: number
-    /** 菜单项水平内边距 */
-    itemPaddingX?: number
-    /** 菜单圆角 */
-    borderRadius?: number
-    /** 动画持续时间 */
-    animationDuration?: number
-  }
+interface Props {
+  menuItems: MenuItemType[];
+  /** 菜单宽度 */
+  menuWidth?: number;
+  /** 子菜单宽度 */
+  submenuWidth?: number;
+  /** 菜单项高度 */
+  itemHeight?: number;
+  /** 边界距离 */
+  boundaryDistance?: number;
+  /** 菜单内边距 */
+  menuPadding?: number;
+  /** 菜单项水平内边距 */
+  itemPaddingX?: number;
+  /** 菜单圆角 */
+  borderRadius?: number;
+  /** 动画持续时间 */
+  animationDuration?: number;
+}
 
-  const props = withDefaults(defineProps<Props>(), {
-    menuWidth: 120,
-    submenuWidth: 150,
-    itemHeight: 32,
-    boundaryDistance: 10,
-    menuPadding: 5,
-    itemPaddingX: 6,
-    borderRadius: 6,
-    animationDuration: 100
+const props = withDefaults(defineProps<Props>(), {
+  menuWidth: 120,
+  submenuWidth: 150,
+  itemHeight: 32,
+  boundaryDistance: 10,
+  menuPadding: 5,
+  itemPaddingX: 6,
+  borderRadius: 6,
+  animationDuration: 100,
+});
+
+const emit = defineEmits<{
+  (e: "select", item: MenuItemType): void;
+  (e: "show"): void;
+  (e: "hide"): void;
+}>();
+
+const visible = ref(false);
+const position = ref({ x: 0, y: 0 });
+
+// 用于清理定时器和事件监听器
+let showTimer: number | null = null;
+let eventListenersAdded = false;
+
+// 计算菜单样式
+const menuStyle = computed(
+  (): CSSProperties => ({
+    position: "fixed" as const,
+    left: `${position.value.x}px`,
+    top: `${position.value.y}px`,
+    zIndex: 2000,
+    width: `${props.menuWidth}px`,
   })
+);
 
-  const emit = defineEmits<{
-    (e: 'select', item: MenuItemType): void
-    (e: 'show'): void
-    (e: 'hide'): void
-  }>()
+// 计算菜单列表样式
+const menuListStyle = computed(
+  (): CSSProperties => ({
+    padding: `${props.menuPadding}px`,
+  })
+);
 
-  const visible = ref(false)
-  const position = ref({ x: 0, y: 0 })
+// 计算菜单项样式
+const menuItemStyle = computed(
+  (): CSSProperties => ({
+    height: `${props.itemHeight}px`,
+    padding: `0 ${props.itemPaddingX}px`,
+    borderRadius: "4px",
+  })
+);
 
-  // 用于清理定时器和事件监听器
-  let showTimer: number | null = null
-  let eventListenersAdded = false
+// 计算子菜单列表样式
+const submenuListStyle = computed(
+  (): CSSProperties => ({
+    minWidth: `${props.submenuWidth}px`,
+    padding: `${props.menuPadding}px 0`,
+    borderRadius: `${props.borderRadius}px`,
+  })
+);
 
-  // 计算菜单样式
-  const menuStyle = computed(
-    (): CSSProperties => ({
-      position: 'fixed' as const,
-      left: `${position.value.x}px`,
-      top: `${position.value.y}px`,
-      zIndex: 2000,
-      width: `${props.menuWidth}px`
-    })
-  )
+// 计算菜单高度（用于边界检测）
+const calculateMenuHeight = (): number => {
+  let totalHeight = props.menuPadding * 2; // 上下内边距
 
-  // 计算菜单列表样式
-  const menuListStyle = computed(
-    (): CSSProperties => ({
-      padding: `${props.menuPadding}px`
-    })
-  )
+  props.menuItems.forEach((item) => {
+    totalHeight += props.itemHeight;
+    if (item.showLine) {
+      totalHeight += 10; // 分割线额外高度
+    }
+  });
 
-  // 计算菜单项样式
-  const menuItemStyle = computed(
-    (): CSSProperties => ({
-      height: `${props.itemHeight}px`,
-      padding: `0 ${props.itemPaddingX}px`,
-      borderRadius: '4px'
-    })
-  )
+  return totalHeight;
+};
 
-  // 计算子菜单列表样式
-  const submenuListStyle = computed(
-    (): CSSProperties => ({
-      minWidth: `${props.submenuWidth}px`,
-      padding: `${props.menuPadding}px 0`,
-      borderRadius: `${props.borderRadius}px`
-    })
-  )
+// 优化的位置计算函数
+const calculatePosition = (e: MouseEvent) => {
+  const screenWidth = window.innerWidth;
+  const screenHeight = window.innerHeight;
+  const menuHeight = calculateMenuHeight();
 
-  // 计算菜单高度（用于边界检测）
-  const calculateMenuHeight = (): number => {
-    let totalHeight = props.menuPadding * 2 // 上下内边距
+  let x = e.clientX;
+  let y = e.clientY;
 
-    props.menuItems.forEach((item) => {
-      totalHeight += props.itemHeight
-      if (item.showLine) {
-        totalHeight += 10 // 分割线额外高度
-      }
-    })
-
-    return totalHeight
+  // 检查右边界 - 优先显示在鼠标右侧，如果空间不足则显示在左侧
+  if (x + props.menuWidth > screenWidth - props.boundaryDistance) {
+    x = Math.max(props.boundaryDistance, x - props.menuWidth);
   }
 
-  // 优化的位置计算函数
-  const calculatePosition = (e: MouseEvent) => {
-    const screenWidth = window.innerWidth
-    const screenHeight = window.innerHeight
-    const menuHeight = calculateMenuHeight()
-
-    let x = e.clientX
-    let y = e.clientY
-
-    // 检查右边界 - 优先显示在鼠标右侧，如果空间不足则显示在左侧
-    if (x + props.menuWidth > screenWidth - props.boundaryDistance) {
-      x = Math.max(props.boundaryDistance, x - props.menuWidth)
-    }
-
-    // 检查下边界 - 优先显示在鼠标下方，如果空间不足则向上调整
-    if (y + menuHeight > screenHeight - props.boundaryDistance) {
-      y = Math.max(props.boundaryDistance, screenHeight - menuHeight - props.boundaryDistance)
-    }
-
-    // 确保不会超出边界
-    x = Math.max(
-      props.boundaryDistance,
-      Math.min(x, screenWidth - props.menuWidth - props.boundaryDistance)
-    )
-    y = Math.max(
-      props.boundaryDistance,
-      Math.min(y, screenHeight - menuHeight - props.boundaryDistance)
-    )
-
-    return { x, y }
+  // 检查下边界 - 优先显示在鼠标下方，如果空间不足则向上调整
+  if (y + menuHeight > screenHeight - props.boundaryDistance) {
+    y = Math.max(props.boundaryDistance, screenHeight - menuHeight - props.boundaryDistance);
   }
 
-  // 添加事件监听器
-  const addEventListeners = () => {
-    if (eventListenersAdded) return
+  // 确保不会超出边界
+  x = Math.max(
+    props.boundaryDistance,
+    Math.min(x, screenWidth - props.menuWidth - props.boundaryDistance)
+  );
+  y = Math.max(
+    props.boundaryDistance,
+    Math.min(y, screenHeight - menuHeight - props.boundaryDistance)
+  );
 
-    document.addEventListener('click', handleDocumentClick)
-    document.addEventListener('contextmenu', handleDocumentContextmenu)
-    document.addEventListener('keydown', handleKeydown)
-    eventListenersAdded = true
+  return { x, y };
+};
+
+// 添加事件监听器
+const addEventListeners = () => {
+  if (eventListenersAdded) return;
+
+  document.addEventListener("click", handleDocumentClick);
+  document.addEventListener("contextmenu", handleDocumentContextmenu);
+  document.addEventListener("keydown", handleKeydown);
+  eventListenersAdded = true;
+};
+
+// 移除事件监听器
+const removeEventListeners = () => {
+  if (!eventListenersAdded) return;
+
+  document.removeEventListener("click", handleDocumentClick);
+  document.removeEventListener("contextmenu", handleDocumentContextmenu);
+  document.removeEventListener("keydown", handleKeydown);
+  eventListenersAdded = false;
+};
+
+// 处理文档点击事件
+const handleDocumentClick = (e: Event) => {
+  // 检查点击是否在菜单内部
+  const target = e.target as Element;
+  const menuElement = document.querySelector(".context-menu");
+  if (menuElement && menuElement.contains(target)) {
+    return;
+  }
+  hide();
+};
+
+// 处理文档右键事件
+const handleDocumentContextmenu = () => {
+  hide();
+};
+
+// 处理键盘事件
+const handleKeydown = (e: KeyboardEvent) => {
+  if (e.key === "Escape") {
+    hide();
+  }
+};
+
+const show = (e: MouseEvent) => {
+  e.preventDefault();
+  e.stopPropagation();
+
+  // 清理之前的定时器
+  if (showTimer) {
+    window.clearTimeout(showTimer);
+    showTimer = null;
+  }
+
+  // 计算位置
+  position.value = calculatePosition(e);
+  visible.value = true;
+
+  emit("show");
+
+  // 延迟添加事件监听器，避免立即触发关闭
+  showTimer = window.setTimeout(() => {
+    if (visible.value) {
+      addEventListeners();
+    }
+    showTimer = null;
+  }, 50); // 减少延迟时间，提升响应性
+};
+
+const hide = () => {
+  if (!visible.value) return;
+
+  visible.value = false;
+  emit("hide");
+
+  // 清理定时器
+  if (showTimer) {
+    window.clearTimeout(showTimer);
+    showTimer = null;
   }
 
   // 移除事件监听器
-  const removeEventListeners = () => {
-    if (!eventListenersAdded) return
+  removeEventListeners();
+};
 
-    document.removeEventListener('click', handleDocumentClick)
-    document.removeEventListener('contextmenu', handleDocumentContextmenu)
-    document.removeEventListener('keydown', handleKeydown)
-    eventListenersAdded = false
+const handleMenuClick = (item: MenuItemType) => {
+  if (item.disabled) return;
+  emit("select", item);
+  hide();
+};
+
+// 动画钩子函数
+const onBeforeEnter = (el: Element) => {
+  const element = el as HTMLElement;
+  element.style.transformOrigin = "top left";
+};
+
+const onAfterLeave = () => {
+  // 确保清理所有资源
+  removeEventListeners();
+  if (showTimer) {
+    window.clearTimeout(showTimer);
+    showTimer = null;
   }
+};
 
-  // 处理文档点击事件
-  const handleDocumentClick = (e: Event) => {
-    // 检查点击是否在菜单内部
-    const target = e.target as Element
-    const menuElement = document.querySelector('.context-menu')
-    if (menuElement && menuElement.contains(target)) {
-      return
-    }
-    hide()
+// 组件卸载时清理资源
+onUnmounted(() => {
+  removeEventListeners();
+  if (showTimer) {
+    window.clearTimeout(showTimer);
+    showTimer = null;
   }
+});
 
-  // 处理文档右键事件
-  const handleDocumentContextmenu = () => {
-    hide()
-  }
-
-  // 处理键盘事件
-  const handleKeydown = (e: KeyboardEvent) => {
-    if (e.key === 'Escape') {
-      hide()
-    }
-  }
-
-  const show = (e: MouseEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-
-    // 清理之前的定时器
-    if (showTimer) {
-      window.clearTimeout(showTimer)
-      showTimer = null
-    }
-
-    // 计算位置
-    position.value = calculatePosition(e)
-    visible.value = true
-
-    emit('show')
-
-    // 延迟添加事件监听器，避免立即触发关闭
-    showTimer = window.setTimeout(() => {
-      if (visible.value) {
-        addEventListeners()
-      }
-      showTimer = null
-    }, 50) // 减少延迟时间，提升响应性
-  }
-
-  const hide = () => {
-    if (!visible.value) return
-
-    visible.value = false
-    emit('hide')
-
-    // 清理定时器
-    if (showTimer) {
-      window.clearTimeout(showTimer)
-      showTimer = null
-    }
-
-    // 移除事件监听器
-    removeEventListeners()
-  }
-
-  const handleMenuClick = (item: MenuItemType) => {
-    if (item.disabled) return
-    emit('select', item)
-    hide()
-  }
-
-  // 动画钩子函数
-  const onBeforeEnter = (el: Element) => {
-    const element = el as HTMLElement
-    element.style.transformOrigin = 'top left'
-  }
-
-  const onAfterLeave = () => {
-    // 确保清理所有资源
-    removeEventListeners()
-    if (showTimer) {
-      window.clearTimeout(showTimer)
-      showTimer = null
-    }
-  }
-
-  // 组件卸载时清理资源
-  onUnmounted(() => {
-    removeEventListeners()
-    if (showTimer) {
-      window.clearTimeout(showTimer)
-      showTimer = null
-    }
-  })
-
-  // 导出方法供父组件调用
-  defineExpose({
-    show,
-    hide,
-    visible: computed(() => visible.value)
-  })
+// 导出方法供父组件调用
+defineExpose({
+  show,
+  hide,
+  visible: computed(() => visible.value),
+});
 </script>
 
 <style scoped>
-  .menu-right {
-    --menu-width: v-bind('props.menuWidth + "px"');
-    --border-radius: v-bind('props.borderRadius + "px"');
-  }
+.menu-right {
+  --menu-width: v-bind('props.menuWidth + "px"');
+  --border-radius: v-bind('props.borderRadius + "px"');
+}
 
-  .menu-item.has-line {
-    margin-bottom: 10px;
-  }
+.menu-item.has-line {
+  margin-bottom: 10px;
+}
 
-  .menu-item.has-line::after {
-    position: absolute;
-    right: 0;
-    bottom: -5px;
-    left: 0;
-    height: 1px;
-    content: '';
-    background-color: var(--art-gray-300);
-  }
+.menu-item.has-line::after {
+  position: absolute;
+  right: 0;
+  bottom: -5px;
+  left: 0;
+  height: 1px;
+  content: "";
+  background-color: var(--art-gray-300);
+}
 
-  .menu-item.is-disabled {
-    color: var(--el-text-color-disabled);
-    cursor: not-allowed;
-  }
+.menu-item.is-disabled {
+  color: var(--el-text-color-disabled);
+  cursor: not-allowed;
+}
 
-  .menu-item.is-disabled:hover {
-    background-color: transparent !important;
-  }
+.menu-item.is-disabled:hover {
+  background-color: transparent !important;
+}
 
-  .menu-item.is-disabled i:not(.submenu-arrow),
-  .menu-item.is-disabled :deep(.art-svg-icon) {
-    color: var(--el-text-color-disabled) !important;
-  }
+.menu-item.is-disabled i:not(.submenu-arrow),
+.menu-item.is-disabled :deep(.art-svg-icon) {
+  color: var(--el-text-color-disabled) !important;
+}
 
-  .menu-item.is-disabled .menu-label {
-    color: var(--el-text-color-disabled) !important;
-  }
+.menu-item.is-disabled .menu-label {
+  color: var(--el-text-color-disabled) !important;
+}
 
-  .menu-item.submenu:hover .submenu-list {
-    display: block;
-  }
+.menu-item.submenu:hover .submenu-list {
+  display: block;
+}
 
-  .menu-item.submenu:hover .submenu-title .submenu-arrow {
-    transform: rotate(90deg);
-  }
+.menu-item.submenu:hover .submenu-title .submenu-arrow {
+  transform: rotate(90deg);
+}
 
-  /* 动画样式 */
-  .context-menu-enter-active,
-  .context-menu-leave-active {
-    transition: all v-bind('props.animationDuration + "ms"') ease-out;
-  }
+/* 动画样式 */
+.context-menu-enter-active,
+.context-menu-leave-active {
+  transition: all v-bind('props.animationDuration + "ms"') ease-out;
+}
 
-  .context-menu-enter-from,
-  .context-menu-leave-to {
-    opacity: 0;
-    transform: scale(0.9);
-  }
+.context-menu-enter-from,
+.context-menu-leave-to {
+  opacity: 0;
+  transform: scale(0.9);
+}
 
-  .context-menu-enter-to,
-  .context-menu-leave-from {
-    opacity: 1;
-    transform: scale(1);
-  }
+.context-menu-enter-to,
+.context-menu-leave-from {
+  opacity: 1;
+  transform: scale(1);
+}
 </style>
diff --git a/frontend/new-web/src/components/core/others/art-watermark/index.vue b/frontend/new-web/src/components/core/others/art-watermark/index.vue
index 1d7f06be..b76fec65 100644
--- a/frontend/new-web/src/components/core/others/art-watermark/index.vue
+++ b/frontend/new-web/src/components/core/others/art-watermark/index.vue
@@ -18,47 +18,47 @@
 </template>
 
 <script setup lang="ts">
-  import AppConfig from '@/config'
-  import { useSettingStore } from '@/store/modules/setting'
+import AppConfig from "@/config";
+import { useSettingsStore } from "@/store/modules/setting.store";
 
-  defineOptions({ name: 'ArtWatermark' })
+defineOptions({ name: "ArtWatermark" });
 
-  const settingStore = useSettingStore()
-  const { watermarkVisible } = storeToRefs(settingStore)
+const settingStore = useSettingsStore();
+const { watermarkVisible } = storeToRefs(settingStore);
 
-  interface WatermarkProps {
-    /** 水印内容 */
-    content?: string
-    /** 水印是否可见 */
-    visible?: boolean
-    /** 水印字体大小 */
-    fontSize?: number
-    /** 水印字体颜色 */
-    fontColor?: string
-    /** 水印旋转角度 */
-    rotate?: number
-    /** 水印间距X */
-    gapX?: number
-    /** 水印间距Y */
-    gapY?: number
-    /** 水印偏移X */
-    offsetX?: number
-    /** 水印偏移Y */
-    offsetY?: number
-    /** 水印层级 */
-    zIndex?: number
-  }
+interface WatermarkProps {
+  /** 水印内容 */
+  content?: string;
+  /** 水印是否可见 */
+  visible?: boolean;
+  /** 水印字体大小 */
+  fontSize?: number;
+  /** 水印字体颜色 */
+  fontColor?: string;
+  /** 水印旋转角度 */
+  rotate?: number;
+  /** 水印间距X */
+  gapX?: number;
+  /** 水印间距Y */
+  gapY?: number;
+  /** 水印偏移X */
+  offsetX?: number;
+  /** 水印偏移Y */
+  offsetY?: number;
+  /** 水印层级 */
+  zIndex?: number;
+}
 
-  withDefaults(defineProps<WatermarkProps>(), {
-    content: AppConfig.systemInfo.name,
-    visible: false,
-    fontSize: 16,
-    fontColor: 'rgba(128, 128, 128, 0.2)',
-    rotate: -22,
-    gapX: 100,
-    gapY: 100,
-    offsetX: 50,
-    offsetY: 50,
-    zIndex: 3100
-  })
+withDefaults(defineProps<WatermarkProps>(), {
+  content: AppConfig.systemInfo.name,
+  visible: false,
+  fontSize: 16,
+  fontColor: "rgba(128, 128, 128, 0.2)",
+  rotate: -22,
+  gapX: 100,
+  gapY: 100,
+  offsetX: 50,
+  offsetY: 50,
+  zIndex: 3100,
+});
 </script>
diff --git a/frontend/new-web/src/components/core/tables/art-table-header/index.vue b/frontend/new-web/src/components/core/tables/art-table-header/index.vue
index 788c2b7e..97eddc1e 100644
--- a/frontend/new-web/src/components/core/tables/art-table-header/index.vue
+++ b/frontend/new-web/src/components/core/tables/art-table-header/index.vue
@@ -89,10 +89,9 @@
                   @update:model-value="(val) => updateColumnVisibility(item, val)"
                   :disabled="item.disabled"
                   class="flex-1 min-w-0 [&_.el-checkbox__label]:overflow-hidden [&_.el-checkbox__label]:text-ellipsis [&_.el-checkbox__label]:whitespace-nowrap"
-                  >{{
-                    item.label || (item.type === 'selection' ? t('table.selection') : '')
-                  }}</ElCheckbox
                 >
+                  {{ item.label || (item.type === "selection" ? t("table.selection") : "") }}
+                </ElCheckbox>
               </div>
             </VueDraggable>
           </ElScrollbar>
@@ -106,15 +105,15 @@
           </div>
         </template>
         <div>
-          <ElCheckbox v-if="showZebra" v-model="isZebra" :value="true">{{
-            t('table.zebra')
-          }}</ElCheckbox>
-          <ElCheckbox v-if="showBorder" v-model="isBorder" :value="true">{{
-            t('table.border')
-          }}</ElCheckbox>
-          <ElCheckbox v-if="showHeaderBackground" v-model="isHeaderBackground" :value="true">{{
-            t('table.headerBackground')
-          }}</ElCheckbox>
+          <ElCheckbox v-if="showZebra" v-model="isZebra" :value="true">
+            {{ t("table.zebra") }}
+          </ElCheckbox>
+          <ElCheckbox v-if="showBorder" v-model="isBorder" :value="true">
+            {{ t("table.border") }}
+          </ElCheckbox>
+          <ElCheckbox v-if="showHeaderBackground" v-model="isHeaderBackground" :value="true">
+            {{ t("table.headerBackground") }}
+          </ElCheckbox>
         </div>
       </ElPopover>
       <slot name="right"></slot>
@@ -123,206 +122,206 @@
 </template>
 
 <script lang="ts" setup>
-  import { computed, ref, onMounted, onUnmounted } from 'vue'
-  import { storeToRefs } from 'pinia'
-  import { TableSizeEnum } from '@/enums/formEnum'
-  import { useTableStore } from '@/store/modules/table'
-  import { VueDraggable } from 'vue-draggable-plus'
-  import { useI18n } from 'vue-i18n'
-  import type { ColumnOption } from '@/types/component'
-  import { ElScrollbar } from 'element-plus'
+import { computed, ref, onMounted, onUnmounted } from "vue";
+import { storeToRefs } from "pinia";
+import { TableSizeEnum } from "@/enums/formEnum";
+import { useTableStore } from "@/store/modules/table.store";
+import { VueDraggable } from "vue-draggable-plus";
+import { useI18n } from "vue-i18n";
+import type { ColumnOption } from "@/types/component";
+import { ElScrollbar } from "element-plus";
 
-  defineOptions({ name: 'ArtTableHeader' })
+defineOptions({ name: "ArtTableHeader" });
 
-  const { t } = useI18n()
-
-  interface Props {
-    /** 斑马纹 */
-    showZebra?: boolean
-    /** 边框 */
-    showBorder?: boolean
-    /** 表头背景 */
-    showHeaderBackground?: boolean
-    /** 全屏 class */
-    fullClass?: string
-    /** 组件布局，子组件名用逗号分隔 */
-    layout?: string
-    /** 加载中 */
-    loading?: boolean
-    /** 搜索栏显示状态 */
-    showSearchBar?: boolean
-  }
-
-  const props = withDefaults(defineProps<Props>(), {
-    showZebra: true,
-    showBorder: true,
-    showHeaderBackground: true,
-    fullClass: 'art-page-view',
-    layout: 'search,refresh,size,fullscreen,columns,settings',
-    showSearchBar: undefined
-  })
-
-  const columns = defineModel<ColumnOption[]>('columns', {
-    required: false,
-    default: () => []
-  })
-
-  const emit = defineEmits<{
-    (e: 'refresh'): void
-    (e: 'search'): void
-    (e: 'update:showSearchBar', value: boolean): void
-  }>()
-
-  /**
-   * 获取列的显示状态
-   * 优先使用 visible 字段，如果不存在则使用 checked 字段
-   */
-  const getColumnVisibility = (col: ColumnOption): boolean => {
-    if (col.visible !== undefined) {
-      return col.visible
-    }
-    return col.checked ?? true
-  }
-
-  /**
-   * 更新列的显示状态
-   * 同时更新 checked 和 visible 字段以保持兼容性
-   */
-  const updateColumnVisibility = (col: ColumnOption, value: boolean | string | number): void => {
-    const boolValue = !!value
-    col.checked = boolValue
-    col.visible = boolValue
-  }
-
-  /** 表格大小选项配置 */
-  const tableSizeOptions = [
-    { value: TableSizeEnum.SMALL, label: t('table.sizeOptions.small') },
-    { value: TableSizeEnum.DEFAULT, label: t('table.sizeOptions.default') },
-    { value: TableSizeEnum.LARGE, label: t('table.sizeOptions.large') }
-  ]
-
-  const tableStore = useTableStore()
-  const { tableSize, isZebra, isBorder, isHeaderBackground } = storeToRefs(tableStore)
-
-  /** 解析 layout 属性，转换为数组 */
-  const layoutItems = computed(() => {
-    return props.layout.split(',').map((item) => item.trim())
-  })
-
-  /**
-   * 检查组件是否应该显示
-   * @param componentName 组件名称
-   * @returns 是否显示
-   */
-  const shouldShow = (componentName: string) => {
-    return layoutItems.value.includes(componentName)
-  }
-
-  /**
-   * 拖拽移动事件处理 - 防止固定列位置改变
-   * @param evt move事件对象
-   * @returns 是否允许移动
-   */
-  const checkColumnMove = (event: any) => {
-    // 拖拽进入的目标 DOM 元素
-    const toElement = event.related as HTMLElement
-    // 如果目标位置是 fixed 列，则不允许移动
-    if (toElement && toElement.classList.contains('fixed-column')) {
-      return false
-    }
-    return true
-  }
-
-  /** 搜索事件处理 */
-  const search = () => {
-    // 切换搜索栏显示状态
-    emit('update:showSearchBar', !props.showSearchBar)
-    emit('search')
-  }
-
-  /** 刷新事件处理 */
-  const refresh = () => {
-    isManualRefresh.value = true
-    emit('refresh')
-  }
-
-  /**
-   * 表格大小变化处理
-   * @param command 表格大小枚举值
-   */
-  const handleTableSizeChange = (command: TableSizeEnum) => {
-    useTableStore().setTableSize(command)
-  }
-
-  /** 是否手动点击刷新 */
-  const isManualRefresh = ref(false)
+const { t } = useI18n();
 
+interface Props {
+  /** 斑马纹 */
+  showZebra?: boolean;
+  /** 边框 */
+  showBorder?: boolean;
+  /** 表头背景 */
+  showHeaderBackground?: boolean;
+  /** 全屏 class */
+  fullClass?: string;
+  /** 组件布局，子组件名用逗号分隔 */
+  layout?: string;
   /** 加载中 */
-  const isFullScreen = ref(false)
+  loading?: boolean;
+  /** 搜索栏显示状态 */
+  showSearchBar?: boolean;
+}
 
-  /** 保存原始的 overflow 样式，用于退出全屏时恢复 */
-  const originalOverflow = ref('')
+const props = withDefaults(defineProps<Props>(), {
+  showZebra: true,
+  showBorder: true,
+  showHeaderBackground: true,
+  fullClass: "art-page-view",
+  layout: "search,refresh,size,fullscreen,columns,settings",
+  showSearchBar: undefined,
+});
 
-  /**
-   * 切换全屏状态
-   * 进入全屏时会隐藏页面滚动条，退出时恢复原状态
-   */
-  const toggleFullScreen = () => {
-    const el = document.querySelector(`.${props.fullClass}`)
-    if (!el) return
+const columns = defineModel<ColumnOption[]>("columns", {
+  required: false,
+  default: () => [],
+});
 
-    isFullScreen.value = !isFullScreen.value
+const emit = defineEmits<{
+  (e: "refresh"): void;
+  (e: "search"): void;
+  (e: "update:showSearchBar", value: boolean): void;
+}>();
 
-    if (isFullScreen.value) {
-      // 进入全屏：保存原始样式并隐藏滚动条
-      originalOverflow.value = document.body.style.overflow
-      document.body.style.overflow = 'hidden'
-      el.classList.add('el-full-screen')
-      tableStore.setIsFullScreen(true)
-    } else {
-      // 退出全屏：恢复原始样式
-      document.body.style.overflow = originalOverflow.value
-      el.classList.remove('el-full-screen')
-      tableStore.setIsFullScreen(false)
+/**
+ * 获取列的显示状态
+ * 优先使用 visible 字段，如果不存在则使用 checked 字段
+ */
+const getColumnVisibility = (col: ColumnOption): boolean => {
+  if (col.visible !== undefined) {
+    return col.visible;
+  }
+  return col.checked ?? true;
+};
+
+/**
+ * 更新列的显示状态
+ * 同时更新 checked 和 visible 字段以保持兼容性
+ */
+const updateColumnVisibility = (col: ColumnOption, value: boolean | string | number): void => {
+  const boolValue = !!value;
+  col.checked = boolValue;
+  col.visible = boolValue;
+};
+
+/** 表格大小选项配置 */
+const tableSizeOptions = [
+  { value: TableSizeEnum.SMALL, label: t("table.sizeOptions.small") },
+  { value: TableSizeEnum.DEFAULT, label: t("table.sizeOptions.default") },
+  { value: TableSizeEnum.LARGE, label: t("table.sizeOptions.large") },
+];
+
+const tableStore = useTableStore();
+const { tableSize, isZebra, isBorder, isHeaderBackground } = storeToRefs(tableStore);
+
+/** 解析 layout 属性，转换为数组 */
+const layoutItems = computed(() => {
+  return props.layout.split(",").map((item) => item.trim());
+});
+
+/**
+ * 检查组件是否应该显示
+ * @param componentName 组件名称
+ * @returns 是否显示
+ */
+const shouldShow = (componentName: string) => {
+  return layoutItems.value.includes(componentName);
+};
+
+/**
+ * 拖拽移动事件处理 - 防止固定列位置改变
+ * @param evt move事件对象
+ * @returns 是否允许移动
+ */
+const checkColumnMove = (event: any) => {
+  // 拖拽进入的目标 DOM 元素
+  const toElement = event.related as HTMLElement;
+  // 如果目标位置是 fixed 列，则不允许移动
+  if (toElement && toElement.classList.contains("fixed-column")) {
+    return false;
+  }
+  return true;
+};
+
+/** 搜索事件处理 */
+const search = () => {
+  // 切换搜索栏显示状态
+  emit("update:showSearchBar", !props.showSearchBar);
+  emit("search");
+};
+
+/** 刷新事件处理 */
+const refresh = () => {
+  isManualRefresh.value = true;
+  emit("refresh");
+};
+
+/**
+ * 表格大小变化处理
+ * @param command 表格大小枚举值
+ */
+const handleTableSizeChange = (command: TableSizeEnum) => {
+  useTableStore().setTableSize(command);
+};
+
+/** 是否手动点击刷新 */
+const isManualRefresh = ref(false);
+
+/** 加载中 */
+const isFullScreen = ref(false);
+
+/** 保存原始的 overflow 样式，用于退出全屏时恢复 */
+const originalOverflow = ref("");
+
+/**
+ * 切换全屏状态
+ * 进入全屏时会隐藏页面滚动条，退出时恢复原状态
+ */
+const toggleFullScreen = () => {
+  const el = document.querySelector(`.${props.fullClass}`);
+  if (!el) return;
+
+  isFullScreen.value = !isFullScreen.value;
+
+  if (isFullScreen.value) {
+    // 进入全屏：保存原始样式并隐藏滚动条
+    originalOverflow.value = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    el.classList.add("el-full-screen");
+    tableStore.setIsFullScreen(true);
+  } else {
+    // 退出全屏：恢复原始样式
+    document.body.style.overflow = originalOverflow.value;
+    el.classList.remove("el-full-screen");
+    tableStore.setIsFullScreen(false);
+  }
+};
+
+/**
+ * ESC键退出全屏的事件处理器
+ * 需要保存引用以便在组件卸载时正确移除监听器
+ */
+const handleEscapeKey = (e: KeyboardEvent) => {
+  if (e.key === "Escape" && isFullScreen.value) {
+    toggleFullScreen();
+  }
+};
+
+/** 组件挂载时注册全局事件监听器 */
+onMounted(() => {
+  document.addEventListener("keydown", handleEscapeKey);
+});
+
+/** 组件卸载时清理资源 */
+onUnmounted(() => {
+  // 移除事件监听器
+  document.removeEventListener("keydown", handleEscapeKey);
+
+  // 如果组件在全屏状态下被卸载，恢复页面滚动状态
+  if (isFullScreen.value) {
+    document.body.style.overflow = originalOverflow.value;
+    const el = document.querySelector(`.${props.fullClass}`);
+    if (el) {
+      el.classList.remove("el-full-screen");
     }
   }
-
-  /**
-   * ESC键退出全屏的事件处理器
-   * 需要保存引用以便在组件卸载时正确移除监听器
-   */
-  const handleEscapeKey = (e: KeyboardEvent) => {
-    if (e.key === 'Escape' && isFullScreen.value) {
-      toggleFullScreen()
-    }
-  }
-
-  /** 组件挂载时注册全局事件监听器 */
-  onMounted(() => {
-    document.addEventListener('keydown', handleEscapeKey)
-  })
-
-  /** 组件卸载时清理资源 */
-  onUnmounted(() => {
-    // 移除事件监听器
-    document.removeEventListener('keydown', handleEscapeKey)
-
-    // 如果组件在全屏状态下被卸载，恢复页面滚动状态
-    if (isFullScreen.value) {
-      document.body.style.overflow = originalOverflow.value
-      const el = document.querySelector(`.${props.fullClass}`)
-      if (el) {
-        el.classList.remove('el-full-screen')
-      }
-    }
-  })
+});
 </script>
 
 <style scoped>
-  @reference '@styles/core/tailwind.css';
+@reference '@styles/core/tailwind.css';
 
-  .button {
-    @apply ml-2 
+.button {
+  @apply ml-2 
     size-8 
     flex 
     items-center 
@@ -335,5 +334,5 @@
     hover:bg-g-300 
     md:ml-0 
     md:mr-2.5;
-  }
+}
 </style>
diff --git a/frontend/new-web/src/components/core/tables/art-table/index.vue b/frontend/new-web/src/components/core/tables/art-table/index.vue
index be99e702..4c21445e 100644
--- a/frontend/new-web/src/components/core/tables/art-table/index.vue
+++ b/frontend/new-web/src/components/core/tables/art-table/index.vue
@@ -37,7 +37,7 @@
               v-bind="{
                 ...slotScope,
                 prop: col.prop,
-                value: col.prop ? slotScope.row[col.prop] : undefined
+                value: col.prop ? slotScope.row[col.prop] : undefined,
               }"
             />
           </template>
@@ -72,297 +72,297 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, computed, nextTick, watchEffect, getCurrentInstance, useAttrs } from 'vue'
-  import type { ElTable, TableProps } from 'element-plus'
-  import { storeToRefs } from 'pinia'
-  import { ColumnOption } from '@/types'
-  import { useTableStore } from '@/store/modules/table'
-  import { useCommon } from '@/hooks/core/useCommon'
-  import { useTableHeight } from '@/hooks/core/useTableHeight'
-  import { useResizeObserver, useWindowSize } from '@vueuse/core'
+import { ref, computed, nextTick, watchEffect, getCurrentInstance, useAttrs } from "vue";
+import type { ElTable, TableProps } from "element-plus";
+import { storeToRefs } from "pinia";
+import { ColumnOption } from "@/types";
+import { useTableStore } from "@/store/modules/table.store";
+import { useCommon } from "@/hooks/core/useCommon";
+import { useTableHeight } from "@/hooks/core/useTableHeight";
+import { useResizeObserver, useWindowSize } from "@vueuse/core";
 
-  defineOptions({ name: 'ArtTable' })
+defineOptions({ name: "ArtTable" });
 
-  const { width } = useWindowSize()
-  const elTableRef = ref<InstanceType<typeof ElTable> | null>(null)
-  const paginationRef = ref<HTMLElement>()
-  const tableHeaderRef = ref<HTMLElement>()
-  const tableStore = useTableStore()
-  const { isBorder, isZebra, tableSize, isFullScreen, isHeaderBackground } = storeToRefs(tableStore)
+const { width } = useWindowSize();
+const elTableRef = ref<InstanceType<typeof ElTable> | null>(null);
+const paginationRef = ref<HTMLElement>();
+const tableHeaderRef = ref<HTMLElement>();
+const tableStore = useTableStore();
+const { isBorder, isZebra, tableSize, isFullScreen, isHeaderBackground } = storeToRefs(tableStore);
 
-  /** 分页配置接口 */
-  interface PaginationConfig {
-    /** 当前页码 */
-    current: number
-    /** 每页显示条目个数 */
-    size: number
-    /** 总条目数 */
-    total: number
+/** 分页配置接口 */
+interface PaginationConfig {
+  /** 当前页码 */
+  current: number;
+  /** 每页显示条目个数 */
+  size: number;
+  /** 总条目数 */
+  total: number;
+}
+
+/** 分页器配置选项接口 */
+interface PaginationOptions {
+  /** 每页显示个数选择器的选项列表 */
+  pageSizes?: number[];
+  /** 分页器的对齐方式 */
+  align?: "left" | "center" | "right";
+  /** 分页器的布局 */
+  layout?: string;
+  /** 是否显示分页器背景 */
+  background?: boolean;
+  /** 只有一页时是否隐藏分页器 */
+  hideOnSinglePage?: boolean;
+  /** 分页器的大小 */
+  size?: "small" | "default" | "large";
+  /** 分页器的页码数量 */
+  pagerCount?: number;
+}
+
+/** ArtTable 组件的 Props 接口 */
+interface ArtTableProps extends TableProps<Record<string, any>> {
+  /** 加载状态 */
+  loading?: boolean;
+  /** 列渲染配置 */
+  columns?: ColumnOption[];
+  /** 分页状态 */
+  pagination?: PaginationConfig;
+  /** 分页配置 */
+  paginationOptions?: PaginationOptions;
+  /** 空数据表格高度 */
+  emptyHeight?: string;
+  /** 空数据时显示的文本 */
+  emptyText?: string;
+  /** 是否开启 ArtTableHeader，解决表格高度自适应问题 */
+  showTableHeader?: boolean;
+}
+
+const props = withDefaults(defineProps<ArtTableProps>(), {
+  columns: () => [],
+  fit: true,
+  showHeader: true,
+  stripe: undefined,
+  border: undefined,
+  size: undefined,
+  emptyHeight: "100%",
+  emptyText: "暂无数据",
+  showTableHeader: true,
+});
+const instance = getCurrentInstance();
+const attrs = useAttrs();
+
+const LAYOUT = {
+  MOBILE: "prev, pager, next, sizes, jumper, total",
+  IPAD: "prev, pager, next, jumper, total",
+  DESKTOP: "total, prev, pager, next, sizes, jumper",
+};
+
+const layout = computed(() => {
+  if (width.value < 768) {
+    return LAYOUT.MOBILE;
+  } else if (width.value < 1024) {
+    return LAYOUT.IPAD;
+  } else {
+    return LAYOUT.DESKTOP;
+  }
+});
+
+// 默认分页常量
+const DEFAULT_PAGINATION_OPTIONS: PaginationOptions = {
+  pageSizes: [10, 20, 30, 50, 100],
+  align: "center",
+  background: true,
+  layout: layout.value,
+  hideOnSinglePage: false,
+  size: "default",
+  pagerCount: width.value > 1200 ? 7 : 5,
+};
+
+// 合并分页配置
+const mergedPaginationOptions = computed(() => ({
+  ...DEFAULT_PAGINATION_OPTIONS,
+  ...props.paginationOptions,
+}));
+
+// 边框 (优先级：props > store)
+const border = computed(() => props.border ?? isBorder.value);
+// 斑马纹
+const stripe = computed(() => props.stripe ?? isZebra.value);
+// 表格尺寸
+const size = computed(() => props.size ?? tableSize.value);
+// 数据是否为空
+const isEmpty = computed(() => props.data?.length === 0);
+
+const paginationHeight = ref(0);
+const tableHeaderHeight = ref(0);
+
+// 使用 useResizeObserver 监听分页器高度变化
+useResizeObserver(paginationRef, (entries) => {
+  const entry = entries[0];
+  if (entry) {
+    // 使用 requestAnimationFrame 避免 ResizeObserver loop 警告
+    requestAnimationFrame(() => {
+      paginationHeight.value = entry.contentRect.height;
+    });
+  }
+});
+
+// 使用 useResizeObserver 监听表格头部高度变化
+useResizeObserver(tableHeaderRef, (entries) => {
+  const entry = entries[0];
+  if (entry) {
+    // 使用 requestAnimationFrame 避免 ResizeObserver loop 警告
+    requestAnimationFrame(() => {
+      tableHeaderHeight.value = entry.contentRect.height;
+    });
+  }
+});
+
+// 分页器与表格之间的间距常量（计算属性，响应 showTableHeader 变化）
+const PAGINATION_SPACING = computed(() => (props.showTableHeader ? 6 : 15));
+
+// 使用表格高度计算 Hook
+const { containerHeight } = useTableHeight({
+  showTableHeader: computed(() => props.showTableHeader),
+  paginationHeight,
+  tableHeaderHeight,
+  paginationSpacing: PAGINATION_SPACING,
+});
+
+// 表格高度逻辑
+const height = computed(() => {
+  // 全屏模式下占满全屏
+  if (isFullScreen.value) return "100%";
+  // 空数据且非加载状态时固定高度
+  if (isEmpty.value && !props.loading) return props.emptyHeight;
+  // 使用传入的高度
+  if (props.height) return props.height;
+  // 默认占满容器高度
+  return "100%";
+});
+
+// 表头背景颜色样式
+const headerCellStyle = computed(() => ({
+  background: isHeaderBackground.value
+    ? "var(--el-fill-color-lighter)"
+    : "var(--default-box-color)",
+  ...(props.headerCellStyle || {}), // 合并用户传入的样式
+}));
+
+// 只有显式传入时才覆盖 ElTable 的原生默认值，避免继承的 Boolean props 把官方默认值冲掉。
+const hasExplicitTableProp = (propName: string): boolean => {
+  const rawProps = (instance?.vnode.props || {}) as Record<string, unknown>;
+  const kebabName = propName.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+  return propName in rawProps || kebabName in rawProps;
+};
+
+const mergedTableProps = computed(() => ({
+  ...attrs,
+  ...props,
+  height: height.value,
+  stripe: stripe.value,
+  border: border.value,
+  size: size.value,
+  headerCellStyle: headerCellStyle.value,
+  // Element Plus 默认值为 true，未显式传入时不应被 ArtTable 覆盖成 false。
+  selectOnIndeterminate: hasExplicitTableProp("selectOnIndeterminate")
+    ? props.selectOnIndeterminate
+    : undefined,
+}));
+
+// 是否显示分页器
+const showPagination = computed(() => props.pagination && !isEmpty.value);
+
+// Element Plus 在部分场景会先用 $index = -1 进行预渲染。
+// 这对普通展示无影响，但会让 ElForm 错误注册出 lineList.-1.xxx 这类字段。
+const shouldRenderSlotScope = (slotScope: { $index?: number }) => {
+  return slotScope.$index === undefined || slotScope.$index >= 0;
+};
+
+// 清理列属性，移除插槽相关的自定义属性，确保它们不会被 ElTableColumn 错误解释
+const cleanColumnProps = (col: ColumnOption) => {
+  const columnProps = { ...col };
+  // 删除自定义的插槽控制属性
+  delete columnProps.useHeaderSlot;
+  delete columnProps.headerSlotName;
+  delete columnProps.useSlot;
+  delete columnProps.slotName;
+  return columnProps;
+};
+
+// 分页大小变化
+const handleSizeChange = (val: number) => {
+  emit("pagination:size-change", val);
+};
+
+// 分页当前页变化
+const handleCurrentChange = (val: number) => {
+  emit("pagination:current-change", val);
+  scrollToTop(); // 页码改变后滚动到表格顶部
+};
+
+const { scrollToTop: scrollPageToTop } = useCommon();
+
+// 滚动表格内容到顶部，并可以联动页面滚动到顶部
+const scrollToTop = () => {
+  nextTick(() => {
+    elTableRef.value?.setScrollTop(0); // 滚动 ElTable 内部滚动条到顶部
+    scrollPageToTop(); // 调用公共 composable 滚动页面到顶部
+  });
+};
+
+// 全局序号
+const getGlobalIndex = (index: number) => {
+  if (!props.pagination) return index + 1;
+  const { current, size } = props.pagination;
+  return (current - 1) * size + index + 1;
+};
+
+const emit = defineEmits<{
+  (e: "pagination:size-change", val: number): void;
+  (e: "pagination:current-change", val: number): void;
+}>();
+
+// 查找并绑定表格头部元素 - 使用 VueUse 优化
+const findTableHeader = () => {
+  if (!props.showTableHeader) {
+    tableHeaderRef.value = undefined;
+    return;
   }
 
-  /** 分页器配置选项接口 */
-  interface PaginationOptions {
-    /** 每页显示个数选择器的选项列表 */
-    pageSizes?: number[]
-    /** 分页器的对齐方式 */
-    align?: 'left' | 'center' | 'right'
-    /** 分页器的布局 */
-    layout?: string
-    /** 是否显示分页器背景 */
-    background?: boolean
-    /** 只有一页时是否隐藏分页器 */
-    hideOnSinglePage?: boolean
-    /** 分页器的大小 */
-    size?: 'small' | 'default' | 'large'
-    /** 分页器的页码数量 */
-    pagerCount?: number
+  const tableHeader = document.getElementById("art-table-header");
+  if (tableHeader) {
+    tableHeaderRef.value = tableHeader;
+  } else {
+    // 如果找不到表格头部，设置为 undefined，useElementSize 会返回 0
+    tableHeaderRef.value = undefined;
   }
+};
 
-  /** ArtTable 组件的 Props 接口 */
-  interface ArtTableProps extends TableProps<Record<string, any>> {
-    /** 加载状态 */
-    loading?: boolean
-    /** 列渲染配置 */
-    columns?: ColumnOption[]
-    /** 分页状态 */
-    pagination?: PaginationConfig
-    /** 分页配置 */
-    paginationOptions?: PaginationOptions
-    /** 空数据表格高度 */
-    emptyHeight?: string
-    /** 空数据时显示的文本 */
-    emptyText?: string
-    /** 是否开启 ArtTableHeader，解决表格高度自适应问题 */
-    showTableHeader?: boolean
-  }
+watchEffect(
+  () => {
+    // 访问响应式数据以建立依赖追踪
+    void props.data?.length; // 追踪数据变化
+    const shouldShow = props.showTableHeader;
 
-  const props = withDefaults(defineProps<ArtTableProps>(), {
-    columns: () => [],
-    fit: true,
-    showHeader: true,
-    stripe: undefined,
-    border: undefined,
-    size: undefined,
-    emptyHeight: '100%',
-    emptyText: '暂无数据',
-    showTableHeader: true
-  })
-  const instance = getCurrentInstance()
-  const attrs = useAttrs()
-
-  const LAYOUT = {
-    MOBILE: 'prev, pager, next, sizes, jumper, total',
-    IPAD: 'prev, pager, next, jumper, total',
-    DESKTOP: 'total, prev, pager, next, sizes, jumper'
-  }
-
-  const layout = computed(() => {
-    if (width.value < 768) {
-      return LAYOUT.MOBILE
-    } else if (width.value < 1024) {
-      return LAYOUT.IPAD
+    // 只有在需要显示表格头部时才查找
+    if (shouldShow) {
+      nextTick(() => {
+        findTableHeader();
+      });
     } else {
-      return LAYOUT.DESKTOP
+      // 不显示时清空引用
+      tableHeaderRef.value = undefined;
     }
-  })
+  },
+  { flush: "post" }
+);
 
-  // 默认分页常量
-  const DEFAULT_PAGINATION_OPTIONS: PaginationOptions = {
-    pageSizes: [10, 20, 30, 50, 100],
-    align: 'center',
-    background: true,
-    layout: layout.value,
-    hideOnSinglePage: false,
-    size: 'default',
-    pagerCount: width.value > 1200 ? 7 : 5
-  }
-
-  // 合并分页配置
-  const mergedPaginationOptions = computed(() => ({
-    ...DEFAULT_PAGINATION_OPTIONS,
-    ...props.paginationOptions
-  }))
-
-  // 边框 (优先级：props > store)
-  const border = computed(() => props.border ?? isBorder.value)
-  // 斑马纹
-  const stripe = computed(() => props.stripe ?? isZebra.value)
-  // 表格尺寸
-  const size = computed(() => props.size ?? tableSize.value)
-  // 数据是否为空
-  const isEmpty = computed(() => props.data?.length === 0)
-
-  const paginationHeight = ref(0)
-  const tableHeaderHeight = ref(0)
-
-  // 使用 useResizeObserver 监听分页器高度变化
-  useResizeObserver(paginationRef, (entries) => {
-    const entry = entries[0]
-    if (entry) {
-      // 使用 requestAnimationFrame 避免 ResizeObserver loop 警告
-      requestAnimationFrame(() => {
-        paginationHeight.value = entry.contentRect.height
-      })
-    }
-  })
-
-  // 使用 useResizeObserver 监听表格头部高度变化
-  useResizeObserver(tableHeaderRef, (entries) => {
-    const entry = entries[0]
-    if (entry) {
-      // 使用 requestAnimationFrame 避免 ResizeObserver loop 警告
-      requestAnimationFrame(() => {
-        tableHeaderHeight.value = entry.contentRect.height
-      })
-    }
-  })
-
-  // 分页器与表格之间的间距常量（计算属性，响应 showTableHeader 变化）
-  const PAGINATION_SPACING = computed(() => (props.showTableHeader ? 6 : 15))
-
-  // 使用表格高度计算 Hook
-  const { containerHeight } = useTableHeight({
-    showTableHeader: computed(() => props.showTableHeader),
-    paginationHeight,
-    tableHeaderHeight,
-    paginationSpacing: PAGINATION_SPACING
-  })
-
-  // 表格高度逻辑
-  const height = computed(() => {
-    // 全屏模式下占满全屏
-    if (isFullScreen.value) return '100%'
-    // 空数据且非加载状态时固定高度
-    if (isEmpty.value && !props.loading) return props.emptyHeight
-    // 使用传入的高度
-    if (props.height) return props.height
-    // 默认占满容器高度
-    return '100%'
-  })
-
-  // 表头背景颜色样式
-  const headerCellStyle = computed(() => ({
-    background: isHeaderBackground.value
-      ? 'var(--el-fill-color-lighter)'
-      : 'var(--default-box-color)',
-    ...(props.headerCellStyle || {}) // 合并用户传入的样式
-  }))
-
-  // 只有显式传入时才覆盖 ElTable 的原生默认值，避免继承的 Boolean props 把官方默认值冲掉。
-  const hasExplicitTableProp = (propName: string): boolean => {
-    const rawProps = (instance?.vnode.props || {}) as Record<string, unknown>
-    const kebabName = propName.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)
-    return propName in rawProps || kebabName in rawProps
-  }
-
-  const mergedTableProps = computed(() => ({
-    ...attrs,
-    ...props,
-    height: height.value,
-    stripe: stripe.value,
-    border: border.value,
-    size: size.value,
-    headerCellStyle: headerCellStyle.value,
-    // Element Plus 默认值为 true，未显式传入时不应被 ArtTable 覆盖成 false。
-    selectOnIndeterminate: hasExplicitTableProp('selectOnIndeterminate')
-      ? props.selectOnIndeterminate
-      : undefined
-  }))
-
-  // 是否显示分页器
-  const showPagination = computed(() => props.pagination && !isEmpty.value)
-
-  // Element Plus 在部分场景会先用 $index = -1 进行预渲染。
-  // 这对普通展示无影响，但会让 ElForm 错误注册出 lineList.-1.xxx 这类字段。
-  const shouldRenderSlotScope = (slotScope: { $index?: number }) => {
-    return slotScope.$index === undefined || slotScope.$index >= 0
-  }
-
-  // 清理列属性，移除插槽相关的自定义属性，确保它们不会被 ElTableColumn 错误解释
-  const cleanColumnProps = (col: ColumnOption) => {
-    const columnProps = { ...col }
-    // 删除自定义的插槽控制属性
-    delete columnProps.useHeaderSlot
-    delete columnProps.headerSlotName
-    delete columnProps.useSlot
-    delete columnProps.slotName
-    return columnProps
-  }
-
-  // 分页大小变化
-  const handleSizeChange = (val: number) => {
-    emit('pagination:size-change', val)
-  }
-
-  // 分页当前页变化
-  const handleCurrentChange = (val: number) => {
-    emit('pagination:current-change', val)
-    scrollToTop() // 页码改变后滚动到表格顶部
-  }
-
-  const { scrollToTop: scrollPageToTop } = useCommon()
-
-  // 滚动表格内容到顶部，并可以联动页面滚动到顶部
-  const scrollToTop = () => {
-    nextTick(() => {
-      elTableRef.value?.setScrollTop(0) // 滚动 ElTable 内部滚动条到顶部
-      scrollPageToTop() // 调用公共 composable 滚动页面到顶部
-    })
-  }
-
-  // 全局序号
-  const getGlobalIndex = (index: number) => {
-    if (!props.pagination) return index + 1
-    const { current, size } = props.pagination
-    return (current - 1) * size + index + 1
-  }
-
-  const emit = defineEmits<{
-    (e: 'pagination:size-change', val: number): void
-    (e: 'pagination:current-change', val: number): void
-  }>()
-
-  // 查找并绑定表格头部元素 - 使用 VueUse 优化
-  const findTableHeader = () => {
-    if (!props.showTableHeader) {
-      tableHeaderRef.value = undefined
-      return
-    }
-
-    const tableHeader = document.getElementById('art-table-header')
-    if (tableHeader) {
-      tableHeaderRef.value = tableHeader
-    } else {
-      // 如果找不到表格头部，设置为 undefined，useElementSize 会返回 0
-      tableHeaderRef.value = undefined
-    }
-  }
-
-  watchEffect(
-    () => {
-      // 访问响应式数据以建立依赖追踪
-      void props.data?.length // 追踪数据变化
-      const shouldShow = props.showTableHeader
-
-      // 只有在需要显示表格头部时才查找
-      if (shouldShow) {
-        nextTick(() => {
-          findTableHeader()
-        })
-      } else {
-        // 不显示时清空引用
-        tableHeaderRef.value = undefined
-      }
-    },
-    { flush: 'post' }
-  )
-
-  defineExpose({
-    scrollToTop,
-    elTableRef
-  })
+defineExpose({
+  scrollToTop,
+  elTableRef,
+});
 </script>
 
 <style lang="scss" scoped>
-  @use './style';
+@use "./style";
 </style>
diff --git a/frontend/new-web/src/components/core/text-effect/art-count-to/index.vue b/frontend/new-web/src/components/core/text-effect/art-count-to/index.vue
index 7fb104b9..a92401e8 100644
--- a/frontend/new-web/src/components/core/text-effect/art-count-to/index.vue
+++ b/frontend/new-web/src/components/core/text-effect/art-count-to/index.vue
@@ -9,302 +9,302 @@
 </template>
 
 <script setup lang="ts">
-  import { computed, watch, nextTick, onUnmounted, shallowRef } from 'vue'
-  import { useTransition, TransitionPresets } from '@vueuse/core'
+import { computed, watch, nextTick, onUnmounted, shallowRef } from "vue";
+import { useTransition, TransitionPresets } from "@vueuse/core";
 
-  // 类型定义
-  interface CountToProps {
-    /** 目标值 */
-    target: number
-    /** 动画持续时间（毫秒） */
-    duration?: number
-    /** 是否自动开始 */
-    autoStart?: boolean
-    /** 小数位数 */
-    decimals?: number
-    /** 小数点符号 */
-    decimal?: string
-    /** 千分位分隔符 */
-    separator?: string
-    /** 前缀 */
-    prefix?: string
-    /** 后缀 */
-    suffix?: string
-    /** 缓动函数 */
-    easing?: keyof typeof TransitionPresets
-    /** 是否禁用动画 */
-    disabled?: boolean
+// 类型定义
+interface CountToProps {
+  /** 目标值 */
+  target: number;
+  /** 动画持续时间（毫秒） */
+  duration?: number;
+  /** 是否自动开始 */
+  autoStart?: boolean;
+  /** 小数位数 */
+  decimals?: number;
+  /** 小数点符号 */
+  decimal?: string;
+  /** 千分位分隔符 */
+  separator?: string;
+  /** 前缀 */
+  prefix?: string;
+  /** 后缀 */
+  suffix?: string;
+  /** 缓动函数 */
+  easing?: keyof typeof TransitionPresets;
+  /** 是否禁用动画 */
+  disabled?: boolean;
+}
+
+interface CountToEmits {
+  started: [value: number];
+  finished: [value: number];
+  paused: [value: number];
+  reset: [];
+}
+
+interface CountToExpose {
+  start: (target?: number) => void;
+  pause: () => void;
+  reset: (newTarget?: number) => void;
+  stop: () => void;
+  setTarget: (target: number) => void;
+  readonly isRunning: boolean;
+  readonly isPaused: boolean;
+  readonly currentValue: number;
+  readonly targetValue: number;
+  readonly progress: number;
+}
+
+// 常量定义
+const EPSILON = Number.EPSILON;
+const MIN_DURATION = 100;
+const MAX_DURATION = 60000;
+const MAX_DECIMALS = 10;
+const DEFAULT_EASING = "easeOutExpo";
+const DEFAULT_DURATION = 2000;
+
+const props = withDefaults(defineProps<CountToProps>(), {
+  target: 0,
+  duration: DEFAULT_DURATION,
+  autoStart: true,
+  decimals: 0,
+  decimal: ".",
+  separator: "",
+  prefix: "",
+  suffix: "",
+  easing: DEFAULT_EASING,
+  disabled: false,
+});
+
+const emit = defineEmits<CountToEmits>();
+
+// 工具函数
+const validateNumber = (value: number, name: string, defaultValue: number): number => {
+  if (!Number.isFinite(value)) {
+    console.warn(`[CountTo] Invalid ${name} value:`, value);
+    return defaultValue;
+  }
+  return value;
+};
+
+const clamp = (value: number, min: number, max: number): number => {
+  return Math.max(min, Math.min(value, max));
+};
+
+const formatNumber = (
+  value: number,
+  decimals: number,
+  decimal: string,
+  separator: string
+): string => {
+  let result = decimals > 0 ? value.toFixed(decimals) : Math.floor(value).toString();
+
+  // 处理小数点符号
+  if (decimal !== "." && result.includes(".")) {
+    result = result.replace(".", decimal);
   }
 
-  interface CountToEmits {
-    started: [value: number]
-    finished: [value: number]
-    paused: [value: number]
-    reset: []
+  // 处理千分位分隔符
+  if (separator) {
+    const parts = result.split(decimal);
+    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, separator);
+    result = parts.join(decimal);
   }
 
-  interface CountToExpose {
-    start: (target?: number) => void
-    pause: () => void
-    reset: (newTarget?: number) => void
-    stop: () => void
-    setTarget: (target: number) => void
-    readonly isRunning: boolean
-    readonly isPaused: boolean
-    readonly currentValue: number
-    readonly targetValue: number
-    readonly progress: number
+  return result;
+};
+
+// 安全计算值
+const safeTarget = computed(() => validateNumber(props.target, "target", 0));
+const safeDuration = computed(() =>
+  clamp(validateNumber(props.duration, "duration", DEFAULT_DURATION), MIN_DURATION, MAX_DURATION)
+);
+const safeDecimals = computed(() =>
+  clamp(validateNumber(props.decimals, "decimals", 0), 0, MAX_DECIMALS)
+);
+const safeEasing = computed(() => {
+  const easing = props.easing;
+  if (!(easing in TransitionPresets)) {
+    console.warn("[CountTo] Invalid easing value:", easing);
+    return DEFAULT_EASING;
+  }
+  return easing;
+});
+
+// 状态管理
+const currentValue = shallowRef(0);
+const targetValue = shallowRef(safeTarget.value);
+const isRunning = shallowRef(false);
+const isPaused = shallowRef(false);
+const pausedValue = shallowRef(0);
+
+// 动画控制
+const transitionValue = useTransition(currentValue, {
+  duration: safeDuration,
+  transition: computed(() => TransitionPresets[safeEasing.value]),
+  onStarted: () => {
+    isRunning.value = true;
+    isPaused.value = false;
+    emit("started", targetValue.value);
+  },
+  onFinished: () => {
+    isRunning.value = false;
+    isPaused.value = false;
+    emit("finished", targetValue.value);
+  },
+});
+
+// 格式化显示值
+const formattedValue = computed(() => {
+  const value = isPaused.value ? pausedValue.value : transitionValue.value;
+
+  if (!Number.isFinite(value)) {
+    return `${props.prefix}0${props.suffix}`;
   }
 
-  // 常量定义
-  const EPSILON = Number.EPSILON
-  const MIN_DURATION = 100
-  const MAX_DURATION = 60000
-  const MAX_DECIMALS = 10
-  const DEFAULT_EASING = 'easeOutExpo'
-  const DEFAULT_DURATION = 2000
+  const formattedNumber = formatNumber(value, safeDecimals.value, props.decimal, props.separator);
+  return `${props.prefix}${formattedNumber}${props.suffix}`;
+});
 
-  const props = withDefaults(defineProps<CountToProps>(), {
-    target: 0,
-    duration: DEFAULT_DURATION,
-    autoStart: true,
-    decimals: 0,
-    decimal: '.',
-    separator: '',
-    prefix: '',
-    suffix: '',
-    easing: DEFAULT_EASING,
-    disabled: false
-  })
+// 私有方法
+const shouldSkipAnimation = (target: number): boolean => {
+  const current = isPaused.value ? pausedValue.value : transitionValue.value;
+  return Math.abs(current - target) < EPSILON;
+};
 
-  const emit = defineEmits<CountToEmits>()
+const resetPauseState = (): void => {
+  isPaused.value = false;
+  pausedValue.value = 0;
+};
 
-  // 工具函数
-  const validateNumber = (value: number, name: string, defaultValue: number): number => {
-    if (!Number.isFinite(value)) {
-      console.warn(`[CountTo] Invalid ${name} value:`, value)
-      return defaultValue
-    }
-    return value
+// 公共方法
+const start = (target?: number): void => {
+  if (props.disabled) {
+    console.warn("[CountTo] Animation is disabled");
+    return;
   }
 
-  const clamp = (value: number, min: number, max: number): number => {
-    return Math.max(min, Math.min(value, max))
+  const finalTarget = target !== undefined ? target : targetValue.value;
+
+  if (!Number.isFinite(finalTarget)) {
+    console.warn("[CountTo] Invalid target value for start:", finalTarget);
+    return;
   }
 
-  const formatNumber = (
-    value: number,
-    decimals: number,
-    decimal: string,
-    separator: string
-  ): string => {
-    let result = decimals > 0 ? value.toFixed(decimals) : Math.floor(value).toString()
+  targetValue.value = finalTarget;
 
-    // 处理小数点符号
-    if (decimal !== '.' && result.includes('.')) {
-      result = result.replace('.', decimal)
-    }
-
-    // 处理千分位分隔符
-    if (separator) {
-      const parts = result.split(decimal)
-      parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, separator)
-      result = parts.join(decimal)
-    }
-
-    return result
+  if (shouldSkipAnimation(finalTarget)) {
+    return;
   }
 
-  // 安全计算值
-  const safeTarget = computed(() => validateNumber(props.target, 'target', 0))
-  const safeDuration = computed(() =>
-    clamp(validateNumber(props.duration, 'duration', DEFAULT_DURATION), MIN_DURATION, MAX_DURATION)
-  )
-  const safeDecimals = computed(() =>
-    clamp(validateNumber(props.decimals, 'decimals', 0), 0, MAX_DECIMALS)
-  )
-  const safeEasing = computed(() => {
-    const easing = props.easing
-    if (!(easing in TransitionPresets)) {
-      console.warn('[CountTo] Invalid easing value:', easing)
-      return DEFAULT_EASING
-    }
-    return easing
-  })
-
-  // 状态管理
-  const currentValue = shallowRef(0)
-  const targetValue = shallowRef(safeTarget.value)
-  const isRunning = shallowRef(false)
-  const isPaused = shallowRef(false)
-  const pausedValue = shallowRef(0)
-
-  // 动画控制
-  const transitionValue = useTransition(currentValue, {
-    duration: safeDuration,
-    transition: computed(() => TransitionPresets[safeEasing.value]),
-    onStarted: () => {
-      isRunning.value = true
-      isPaused.value = false
-      emit('started', targetValue.value)
-    },
-    onFinished: () => {
-      isRunning.value = false
-      isPaused.value = false
-      emit('finished', targetValue.value)
-    }
-  })
-
-  // 格式化显示值
-  const formattedValue = computed(() => {
-    const value = isPaused.value ? pausedValue.value : transitionValue.value
-
-    if (!Number.isFinite(value)) {
-      return `${props.prefix}0${props.suffix}`
-    }
-
-    const formattedNumber = formatNumber(value, safeDecimals.value, props.decimal, props.separator)
-    return `${props.prefix}${formattedNumber}${props.suffix}`
-  })
-
-  // 私有方法
-  const shouldSkipAnimation = (target: number): boolean => {
-    const current = isPaused.value ? pausedValue.value : transitionValue.value
-    return Math.abs(current - target) < EPSILON
+  // 从暂停值开始（如果存在）
+  if (isPaused.value) {
+    currentValue.value = pausedValue.value;
+    resetPauseState();
   }
 
-  const resetPauseState = (): void => {
-    isPaused.value = false
-    pausedValue.value = 0
+  nextTick(() => {
+    currentValue.value = finalTarget;
+  });
+};
+
+const pause = (): void => {
+  if (!isRunning.value || isPaused.value) {
+    return;
   }
 
-  // 公共方法
-  const start = (target?: number): void => {
-    if (props.disabled) {
-      console.warn('[CountTo] Animation is disabled')
-      return
-    }
+  isPaused.value = true;
+  pausedValue.value = transitionValue.value;
+  currentValue.value = pausedValue.value;
 
-    const finalTarget = target !== undefined ? target : targetValue.value
+  emit("paused", pausedValue.value);
+};
 
-    if (!Number.isFinite(finalTarget)) {
-      console.warn('[CountTo] Invalid target value for start:', finalTarget)
-      return
-    }
+const reset = (newTarget = 0): void => {
+  const target = validateNumber(newTarget, "reset target", 0);
 
-    targetValue.value = finalTarget
+  currentValue.value = target;
+  targetValue.value = target;
+  resetPauseState();
 
-    if (shouldSkipAnimation(finalTarget)) {
-      return
-    }
+  emit("reset");
+};
 
-    // 从暂停值开始（如果存在）
-    if (isPaused.value) {
-      currentValue.value = pausedValue.value
-      resetPauseState()
-    }
-
-    nextTick(() => {
-      currentValue.value = finalTarget
-    })
+const setTarget = (target: number): void => {
+  if (!Number.isFinite(target)) {
+    console.warn("[CountTo] Invalid target value for setTarget:", target);
+    return;
   }
 
-  const pause = (): void => {
-    if (!isRunning.value || isPaused.value) {
-      return
-    }
+  targetValue.value = target;
 
-    isPaused.value = true
-    pausedValue.value = transitionValue.value
-    currentValue.value = pausedValue.value
-
-    emit('paused', pausedValue.value)
+  if ((isRunning.value || props.autoStart) && !props.disabled) {
+    start(target);
   }
+};
 
-  const reset = (newTarget = 0): void => {
-    const target = validateNumber(newTarget, 'reset target', 0)
-
-    currentValue.value = target
-    targetValue.value = target
-    resetPauseState()
-
-    emit('reset')
+const stop = (): void => {
+  if (isRunning.value || isPaused.value) {
+    currentValue.value = 0;
+    resetPauseState();
+    emit("paused", 0);
   }
+};
 
-  const setTarget = (target: number): void => {
-    if (!Number.isFinite(target)) {
-      console.warn('[CountTo] Invalid target value for setTarget:', target)
-      return
+// 监听器
+watch(
+  safeTarget,
+  (newTarget) => {
+    if (props.autoStart && !props.disabled) {
+      start(newTarget);
+    } else {
+      targetValue.value = newTarget;
     }
+  },
+  { immediate: props.autoStart && !props.disabled }
+);
 
-    targetValue.value = target
-
-    if ((isRunning.value || props.autoStart) && !props.disabled) {
-      start(target)
+watch(
+  () => props.disabled,
+  (disabled) => {
+    if (disabled && isRunning.value) {
+      stop();
     }
   }
+);
 
-  const stop = (): void => {
-    if (isRunning.value || isPaused.value) {
-      currentValue.value = 0
-      resetPauseState()
-      emit('paused', 0)
-    }
+// 清理
+onUnmounted(() => {
+  if (isRunning.value) {
+    stop();
   }
+});
 
-  // 监听器
-  watch(
-    safeTarget,
-    (newTarget) => {
-      if (props.autoStart && !props.disabled) {
-        start(newTarget)
-      } else {
-        targetValue.value = newTarget
-      }
-    },
-    { immediate: props.autoStart && !props.disabled }
-  )
-
-  watch(
-    () => props.disabled,
-    (disabled) => {
-      if (disabled && isRunning.value) {
-        stop()
-      }
-    }
-  )
-
-  // 清理
-  onUnmounted(() => {
-    if (isRunning.value) {
-      stop()
-    }
-  })
-
-  // 暴露 API
-  defineExpose<CountToExpose>({
-    start,
-    pause,
-    reset,
-    stop,
-    setTarget,
-    get isRunning() {
-      return isRunning.value
-    },
-    get isPaused() {
-      return isPaused.value
-    },
-    get currentValue() {
-      return isPaused.value ? pausedValue.value : transitionValue.value
-    },
-    get targetValue() {
-      return targetValue.value
-    },
-    get progress() {
-      const current = isPaused.value ? pausedValue.value : transitionValue.value
-      const target = targetValue.value
-      if (target === 0) return current === 0 ? 1 : 0
-      return Math.abs(current / target)
-    }
-  })
+// 暴露 API
+defineExpose<CountToExpose>({
+  start,
+  pause,
+  reset,
+  stop,
+  setTarget,
+  get isRunning() {
+    return isRunning.value;
+  },
+  get isPaused() {
+    return isPaused.value;
+  },
+  get currentValue() {
+    return isPaused.value ? pausedValue.value : transitionValue.value;
+  },
+  get targetValue() {
+    return targetValue.value;
+  },
+  get progress() {
+    const current = isPaused.value ? pausedValue.value : transitionValue.value;
+    const target = targetValue.value;
+    if (target === 0) return current === 0 ? 1 : 0;
+    return Math.abs(current / target);
+  },
+});
 </script>
diff --git a/frontend/new-web/src/components/core/text-effect/art-festival-text-scroll/index.vue b/frontend/new-web/src/components/core/text-effect/art-festival-text-scroll/index.vue
index 770b4576..704a61c9 100644
--- a/frontend/new-web/src/components/core/text-effect/art-festival-text-scroll/index.vue
+++ b/frontend/new-web/src/components/core/text-effect/art-festival-text-scroll/index.vue
@@ -3,7 +3,7 @@
   <div
     class="overflow-hidden transition-[height] duration-600 ease-in-out"
     :style="{
-      height: showFestivalText ? '48px' : '0'
+      height: showFestivalText ? '48px' : '0',
     }"
   >
     <ArtTextScroll
@@ -17,16 +17,16 @@
 </template>
 
 <script setup lang="ts">
-  import { useSettingStore } from '@/store/modules/setting'
-  import { useCeremony } from '@/hooks/core/useCeremony'
+import { useSettingsStore } from "@/store/modules/setting.store";
+import { useCeremony } from "@/hooks/core/useCeremony";
 
-  defineOptions({ name: 'ArtFestivalTextScroll' })
+defineOptions({ name: "ArtFestivalTextScroll" });
 
-  const settingStore = useSettingStore()
-  const { showFestivalText } = storeToRefs(settingStore)
-  const { currentFestivalData } = useCeremony()
+const settingStore = useSettingsStore();
+const { showFestivalText } = storeToRefs(settingStore);
+const { currentFestivalData } = useCeremony();
 
-  const handleClose = () => {
-    settingStore.setShowFestivalText(false)
-  }
+const handleClose = () => {
+  settingStore.setShowFestivalText(false);
+};
 </script>
diff --git a/frontend/new-web/src/components/core/text-effect/art-text-scroll/index.vue b/frontend/new-web/src/components/core/text-effect/art-text-scroll/index.vue
index 90be30f8..f533eaef 100644
--- a/frontend/new-web/src/components/core/text-effect/art-text-scroll/index.vue
+++ b/frontend/new-web/src/components/core/text-effect/art-text-scroll/index.vue
@@ -43,243 +43,243 @@
 </template>
 
 <script setup lang="ts">
-  import {
-    useElementSize,
-    useRafFn,
-    useElementHover,
-    useDebounceFn,
-    useTimeoutFn
-  } from '@vueuse/core'
-  import { useSettingStore } from '@/store/modules/setting'
+import {
+  useElementSize,
+  useRafFn,
+  useElementHover,
+  useDebounceFn,
+  useTimeoutFn,
+} from "@vueuse/core";
+import { useSettingsStore } from "@/store/modules/setting.store";
 
-  type ThemeType =
-    | 'theme'
-    | 'primary'
-    | 'secondary'
-    | 'error'
-    | 'info'
-    | 'success'
-    | 'warning'
-    | 'danger'
+type ThemeType =
+  | "theme"
+  | "primary"
+  | "secondary"
+  | "error"
+  | "info"
+  | "success"
+  | "warning"
+  | "danger";
 
-  /**
-   * 文本滚动组件属性接口
-   */
-  export interface TextScrollProps {
-    /** 滚动文本内容 */
-    text?: string
-    /** 主题类型 */
-    type?: ThemeType
-    /** 滚动方向 */
-    direction?: 'left' | 'right' | 'up' | 'down'
-    /** 滚动速度，单位：像素/秒 */
-    speed?: number
-    /** 容器宽度 */
-    width?: string
-    /** 容器高度 */
-    height?: string
-    /** 鼠标悬停时是否暂停滚动 */
-    pauseOnHover?: boolean
-    /** 是否显示关闭按钮 */
-    showClose?: boolean
-    /** 始终滚动（即使文字未溢出） */
-    alwaysScroll?: boolean
+/**
+ * 文本滚动组件属性接口
+ */
+export interface TextScrollProps {
+  /** 滚动文本内容 */
+  text?: string;
+  /** 主题类型 */
+  type?: ThemeType;
+  /** 滚动方向 */
+  direction?: "left" | "right" | "up" | "down";
+  /** 滚动速度，单位：像素/秒 */
+  speed?: number;
+  /** 容器宽度 */
+  width?: string;
+  /** 容器高度 */
+  height?: string;
+  /** 鼠标悬停时是否暂停滚动 */
+  pauseOnHover?: boolean;
+  /** 是否显示关闭按钮 */
+  showClose?: boolean;
+  /** 始终滚动（即使文字未溢出） */
+  alwaysScroll?: boolean;
+}
+
+const props = withDefaults(defineProps<TextScrollProps>(), {
+  text: "",
+  direction: "left",
+  speed: 80,
+  width: "100%",
+  height: "36px",
+  pauseOnHover: true,
+  type: "theme",
+  showClose: false,
+  alwaysScroll: true,
+});
+
+const emit = defineEmits<{
+  close: [];
+}>();
+
+const handleClose = () => {
+  emit("close");
+};
+
+const settingStore = useSettingsStore();
+const { isDark } = storeToRefs(settingStore);
+
+const containerRef = ref<HTMLElement>();
+const contentRef = ref<HTMLElement>();
+const textRef = ref<HTMLElement>();
+const isReady = ref(false);
+
+const currentPosition = ref(0);
+const textSize = ref(0);
+const containerSize = ref(0);
+const shouldClone = ref(false);
+
+const isHorizontal = computed(() => props.direction === "left" || props.direction === "right");
+const isReverse = computed(() => props.direction === "right" || props.direction === "down");
+
+// 使用 VueUse 的 useElementSize 监听容器尺寸变化
+const { width: containerWidth, height: containerHeight } = useElementSize(containerRef);
+
+// 使用 VueUse 的 useElementHover 检测鼠标悬停
+const isHovered = useElementHover(containerRef);
+
+// 计算是否应该暂停动画
+const isPaused = computed(() => {
+  // 如果未启用 alwaysScroll，且文字未超出容器，则暂停滚动
+  if (!props.alwaysScroll && textSize.value <= containerSize.value) {
+    return true;
+  }
+  return props.pauseOnHover && isHovered.value;
+});
+
+// 主题样式映射
+const themeClasses = computed(() => {
+  const themeMap: Record<ThemeType, string> = {
+    theme: "text-theme/90 !border-theme/50",
+    primary: "text-primary/90 !border-primary/50",
+    secondary: "text-secondary/90 !border-secondary/50",
+    error: "text-error/90 !border-error/50",
+    info: "text-info/90 !border-info/50",
+    success: "text-success/90 !border-success/50",
+    warning: "text-warning/90 !border-warning/50",
+    danger: "text-danger/90 !border-danger/50",
+  };
+  return themeMap[props.type] || themeMap.theme;
+});
+
+// 背景色
+const bgColor = computed(
+  () =>
+    `color-mix(in oklch, var(--color-${props.type}) ${isDark.value ? "25" : "10"}%, var(--art-color))`
+);
+
+const containerStyle = computed(() => ({
+  width: props.width,
+  height: props.height,
+  backgroundColor: bgColor.value,
+}));
+
+const contentClass = computed(() => {
+  if (!isHorizontal.value) {
+    return "flex flex-col";
+  }
+  return "";
+});
+
+const contentStyle = computed(() => {
+  const transform = isHorizontal.value
+    ? `translateX(${currentPosition.value}px)`
+    : `translateY(${currentPosition.value}px)`;
+
+  return {
+    transform,
+    willChange: "transform",
+  };
+});
+
+// 克隆元素的间距
+const cloneSpacing = computed(() => {
+  const spacing = "2em";
+  return isHorizontal.value ? { marginLeft: spacing } : { marginTop: spacing };
+});
+
+const measureSizes = () => {
+  if (!containerRef.value || !textRef.value) return;
+
+  const text = textRef.value;
+
+  if (isHorizontal.value) {
+    containerSize.value = containerWidth.value;
+    textSize.value = text.offsetWidth;
+  } else {
+    containerSize.value = containerHeight.value;
+    textSize.value = text.offsetHeight;
   }
 
-  const props = withDefaults(defineProps<TextScrollProps>(), {
-    text: '',
-    direction: 'left',
-    speed: 80,
-    width: '100%',
-    height: '36px',
-    pauseOnHover: true,
-    type: 'theme',
-    showClose: false,
-    alwaysScroll: true
-  })
+  const isOverflow = textSize.value > containerSize.value;
+  shouldClone.value = isOverflow;
 
-  const emit = defineEmits<{
-    close: []
-  }>()
+  // 居中显示
+  currentPosition.value = (containerSize.value - textSize.value) / 2;
 
-  const handleClose = () => {
-    emit('close')
+  // 测量完成后才显示内容
+  if (!isReady.value) {
+    isReady.value = true;
   }
+};
 
-  const settingStore = useSettingStore()
-  const { isDark } = storeToRefs(settingStore)
+// 使用 VueUse 的 useDebounceFn 防抖测量
+const debouncedMeasure = useDebounceFn(measureSizes, 150);
 
-  const containerRef = ref<HTMLElement>()
-  const contentRef = ref<HTMLElement>()
-  const textRef = ref<HTMLElement>()
-  const isReady = ref(false)
+let lastTimestamp = 0;
 
-  const currentPosition = ref(0)
-  const textSize = ref(0)
-  const containerSize = ref(0)
-  const shouldClone = ref(false)
+// 使用 VueUse 的 useRafFn 替代手动 requestAnimationFrame
+const { pause, resume } = useRafFn(
+  ({ timestamp }) => {
+    if (!lastTimestamp) lastTimestamp = timestamp;
 
-  const isHorizontal = computed(() => props.direction === 'left' || props.direction === 'right')
-  const isReverse = computed(() => props.direction === 'right' || props.direction === 'down')
+    if (!isPaused.value) {
+      const delta = (timestamp - lastTimestamp) / 1000;
+      const distance = props.speed * delta;
+      const spacing = textSize.value * 0.1;
 
-  // 使用 VueUse 的 useElementSize 监听容器尺寸变化
-  const { width: containerWidth, height: containerHeight } = useElementSize(containerRef)
+      currentPosition.value += isReverse.value ? distance : -distance;
 
-  // 使用 VueUse 的 useElementHover 检测鼠标悬停
-  const isHovered = useElementHover(containerRef)
-
-  // 计算是否应该暂停动画
-  const isPaused = computed(() => {
-    // 如果未启用 alwaysScroll，且文字未超出容器，则暂停滚动
-    if (!props.alwaysScroll && textSize.value <= containerSize.value) {
-      return true
-    }
-    return props.pauseOnHover && isHovered.value
-  })
-
-  // 主题样式映射
-  const themeClasses = computed(() => {
-    const themeMap: Record<ThemeType, string> = {
-      theme: 'text-theme/90 !border-theme/50',
-      primary: 'text-primary/90 !border-primary/50',
-      secondary: 'text-secondary/90 !border-secondary/50',
-      error: 'text-error/90 !border-error/50',
-      info: 'text-info/90 !border-info/50',
-      success: 'text-success/90 !border-success/50',
-      warning: 'text-warning/90 !border-warning/50',
-      danger: 'text-danger/90 !border-danger/50'
-    }
-    return themeMap[props.type] || themeMap.theme
-  })
-
-  // 背景色
-  const bgColor = computed(
-    () =>
-      `color-mix(in oklch, var(--color-${props.type}) ${isDark.value ? '25' : '10'}%, var(--art-color))`
-  )
-
-  const containerStyle = computed(() => ({
-    width: props.width,
-    height: props.height,
-    backgroundColor: bgColor.value
-  }))
-
-  const contentClass = computed(() => {
-    if (!isHorizontal.value) {
-      return 'flex flex-col'
-    }
-    return ''
-  })
-
-  const contentStyle = computed(() => {
-    const transform = isHorizontal.value
-      ? `translateX(${currentPosition.value}px)`
-      : `translateY(${currentPosition.value}px)`
-
-    return {
-      transform,
-      willChange: 'transform'
-    }
-  })
-
-  // 克隆元素的间距
-  const cloneSpacing = computed(() => {
-    const spacing = '2em'
-    return isHorizontal.value ? { marginLeft: spacing } : { marginTop: spacing }
-  })
-
-  const measureSizes = () => {
-    if (!containerRef.value || !textRef.value) return
-
-    const text = textRef.value
-
-    if (isHorizontal.value) {
-      containerSize.value = containerWidth.value
-      textSize.value = text.offsetWidth
-    } else {
-      containerSize.value = containerHeight.value
-      textSize.value = text.offsetHeight
-    }
-
-    const isOverflow = textSize.value > containerSize.value
-    shouldClone.value = isOverflow
-
-    // 居中显示
-    currentPosition.value = (containerSize.value - textSize.value) / 2
-
-    // 测量完成后才显示内容
-    if (!isReady.value) {
-      isReady.value = true
-    }
-  }
-
-  // 使用 VueUse 的 useDebounceFn 防抖测量
-  const debouncedMeasure = useDebounceFn(measureSizes, 150)
-
-  let lastTimestamp = 0
-
-  // 使用 VueUse 的 useRafFn 替代手动 requestAnimationFrame
-  const { pause, resume } = useRafFn(
-    ({ timestamp }) => {
-      if (!lastTimestamp) lastTimestamp = timestamp
-
-      if (!isPaused.value) {
-        const delta = (timestamp - lastTimestamp) / 1000
-        const distance = props.speed * delta
-        const spacing = textSize.value * 0.1
-
-        currentPosition.value += isReverse.value ? distance : -distance
-
-        // 循环边界检测
-        if (isReverse.value) {
-          if (currentPosition.value > containerSize.value) {
-            currentPosition.value = -(textSize.value + spacing)
-          }
-        } else {
-          if (currentPosition.value < -(textSize.value + spacing)) {
-            currentPosition.value = containerSize.value
-          }
+      // 循环边界检测
+      if (isReverse.value) {
+        if (currentPosition.value > containerSize.value) {
+          currentPosition.value = -(textSize.value + spacing);
+        }
+      } else {
+        if (currentPosition.value < -(textSize.value + spacing)) {
+          currentPosition.value = containerSize.value;
         }
       }
-
-      lastTimestamp = timestamp
-    },
-    { immediate: false }
-  )
-
-  const handleContentClick = (e: MouseEvent) => {
-    const target = e.target as HTMLElement
-    if (target.tagName === 'A') {
-      e.stopPropagation()
     }
+
+    lastTimestamp = timestamp;
+  },
+  { immediate: false }
+);
+
+const handleContentClick = (e: MouseEvent) => {
+  const target = e.target as HTMLElement;
+  if (target.tagName === "A") {
+    e.stopPropagation();
   }
+};
 
-  // 监听容器尺寸变化
-  watch([containerWidth, containerHeight], () => {
-    debouncedMeasure()
-  })
+// 监听容器尺寸变化
+watch([containerWidth, containerHeight], () => {
+  debouncedMeasure();
+});
 
-  // 监听属性变化
-  watch(
-    () => [props.direction, props.speed, props.text],
-    () => {
-      measureSizes()
-      lastTimestamp = 0
-    }
-  )
+// 监听属性变化
+watch(
+  () => [props.direction, props.speed, props.text],
+  () => {
+    measureSizes();
+    lastTimestamp = 0;
+  }
+);
 
-  // 使用 VueUse 的 useTimeoutFn 替代 setTimeout
-  const { start: startMeasure } = useTimeoutFn(() => {
-    measureSizes()
-    // 测量完成后立即开始动画
-    resume()
-  }, 100)
+// 使用 VueUse 的 useTimeoutFn 替代 setTimeout
+const { start: startMeasure } = useTimeoutFn(() => {
+  measureSizes();
+  // 测量完成后立即开始动画
+  resume();
+}, 100);
 
-  onMounted(() => {
-    startMeasure()
-  })
+onMounted(() => {
+  startMeasure();
+});
 
-  onBeforeUnmount(() => {
-    pause()
-  })
+onBeforeUnmount(() => {
+  pause();
+});
 </script>
diff --git a/frontend/new-web/src/components/core/theme/theme-svg/index.vue b/frontend/new-web/src/components/core/theme/theme-svg/index.vue
index 0b565a97..7c176c22 100644
--- a/frontend/new-web/src/components/core/theme/theme-svg/index.vue
+++ b/frontend/new-web/src/components/core/theme/theme-svg/index.vue
@@ -7,94 +7,91 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, computed, watchEffect } from 'vue'
+import { ref, computed, watchEffect } from "vue";
 
-  interface Props {
-    size?: string | number
-    themeColor?: string
-    src?: string
+interface Props {
+  size?: string | number;
+  themeColor?: string;
+  src?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 500,
+  themeColor: "var(--el-color-primary)",
+});
+
+const svgContent = ref("");
+
+// 计算样式
+const sizeStyle = computed(() => {
+  const sizeValue = typeof props.size === "number" ? `${props.size}px` : props.size;
+  return {
+    width: sizeValue,
+    height: sizeValue,
+  };
+});
+
+// 颜色映射配置
+const COLOR_MAPPINGS = {
+  "#C7DEFF": "var(--el-color-primary-light-6)",
+  "#071F4D": "var(--el-color-primary-dark-2)",
+  "#00E4E5": "var(--el-color-primary-light-1)",
+  "#006EFF": "var(--el-color-primary)",
+  "#fff": "var(--default-box-color)",
+  "#ffffff": "var(--default-box-color)",
+  "#DEEBFC": "var(--el-color-primary-light-7)",
+} as const;
+
+// 将主题色应用到 SVG 内容
+const applyThemeToSvg = (content: string): string => {
+  return Object.entries(COLOR_MAPPINGS).reduce((processedContent, [originalColor, themeColor]) => {
+    const fillRegex = new RegExp(`fill="${originalColor}"`, "gi");
+    const strokeRegex = new RegExp(`stroke="${originalColor}"`, "gi");
+
+    return processedContent
+      .replace(fillRegex, `fill="${themeColor}"`)
+      .replace(strokeRegex, `stroke="${themeColor}"`);
+  }, content);
+};
+
+// 加载 SVG 文件内容
+const loadSvgContent = async () => {
+  if (!props.src) {
+    svgContent.value = "";
+    return;
   }
 
-  const props = withDefaults(defineProps<Props>(), {
-    size: 500,
-    themeColor: 'var(--el-color-primary)'
-  })
-
-  const svgContent = ref('')
-
-  // 计算样式
-  const sizeStyle = computed(() => {
-    const sizeValue = typeof props.size === 'number' ? `${props.size}px` : props.size
-    return {
-      width: sizeValue,
-      height: sizeValue
+  try {
+    const response = await fetch(props.src);
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
     }
-  })
 
-  // 颜色映射配置
-  const COLOR_MAPPINGS = {
-    '#C7DEFF': 'var(--el-color-primary-light-6)',
-    '#071F4D': 'var(--el-color-primary-dark-2)',
-    '#00E4E5': 'var(--el-color-primary-light-1)',
-    '#006EFF': 'var(--el-color-primary)',
-    '#fff': 'var(--default-box-color)',
-    '#ffffff': 'var(--default-box-color)',
-    '#DEEBFC': 'var(--el-color-primary-light-7)'
-  } as const
-
-  // 将主题色应用到 SVG 内容
-  const applyThemeToSvg = (content: string): string => {
-    return Object.entries(COLOR_MAPPINGS).reduce(
-      (processedContent, [originalColor, themeColor]) => {
-        const fillRegex = new RegExp(`fill="${originalColor}"`, 'gi')
-        const strokeRegex = new RegExp(`stroke="${originalColor}"`, 'gi')
-
-        return processedContent
-          .replace(fillRegex, `fill="${themeColor}"`)
-          .replace(strokeRegex, `stroke="${themeColor}"`)
-      },
-      content
-    )
+    const content = await response.text();
+    svgContent.value = applyThemeToSvg(content);
+  } catch (error) {
+    console.error("Failed to load SVG:", error);
+    svgContent.value = "";
   }
+};
 
-  // 加载 SVG 文件内容
-  const loadSvgContent = async () => {
-    if (!props.src) {
-      svgContent.value = ''
-      return
-    }
-
-    try {
-      const response = await fetch(props.src)
-      if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`)
-      }
-
-      const content = await response.text()
-      svgContent.value = applyThemeToSvg(content)
-    } catch (error) {
-      console.error('Failed to load SVG:', error)
-      svgContent.value = ''
-    }
-  }
-
-  watchEffect(() => {
-    loadSvgContent()
-  })
+watchEffect(() => {
+  loadSvgContent();
+});
 </script>
 
 <style lang="scss" scoped>
-  .theme-svg {
-    display: inline-block;
+.theme-svg {
+  display: inline-block;
 
-    .svg-container {
+  .svg-container {
+    width: 100%;
+    height: 100%;
+
+    :deep(svg) {
       width: 100%;
       height: 100%;
-
-      :deep(svg) {
-        width: 100%;
-        height: 100%;
-      }
     }
   }
+}
 </style>
diff --git a/frontend/new-web/src/components/core/views/exception/ArtException.vue b/frontend/new-web/src/components/core/views/exception/ArtException.vue
index 4be59aee..5ba1d31a 100644
--- a/frontend/new-web/src/components/core/views/exception/ArtException.vue
+++ b/frontend/new-web/src/components/core/views/exception/ArtException.vue
@@ -4,52 +4,52 @@
       <ThemeSvg :src="data.imgUrl" size="100%" class="!w-100" />
       <div class="ml-15 w-75 max-md:mx-auto max-md:mt-10 max-md:w-full max-md:text-center">
         <p class="text-xl leading-7 text-g-600 max-md:text-lg">{{ data.desc }}</p>
-        <ElButton type="primary" size="large" @click="backHome" v-ripple class="mt-5">{{
-          data.btnText
-        }}</ElButton>
+        <ElButton type="primary" size="large" @click="backHome" v-ripple class="mt-5">
+          {{ data.btnText }}
+        </ElButton>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { useCommon } from '@/hooks/core/useCommon'
-  import { useUserStore } from '@/store/modules/user'
+import { useCommon } from "@/hooks/core/useCommon";
+import { useUserStore } from "@/store/modules/user.store";
 
-  const router = useRouter()
-  const userStore = useUserStore()
+const router = useRouter();
+const userStore = useUserStore();
 
-  interface ExceptionData {
-    /** 标题 */
-    title: string
-    /** 描述 */
-    desc: string
-    /** 按钮文本 */
-    btnText: string
-    /** 图片地址 */
-    imgUrl: string
+interface ExceptionData {
+  /** 标题 */
+  title: string;
+  /** 描述 */
+  desc: string;
+  /** 按钮文本 */
+  btnText: string;
+  /** 图片地址 */
+  imgUrl: string;
+}
+
+withDefaults(
+  defineProps<{
+    data: ExceptionData;
+  }>(),
+  {}
+);
+
+const { homePath } = useCommon();
+
+const backHome = () => {
+  const targetHomePath = homePath.value || "/";
+
+  if (!userStore.isLogin) {
+    router.push({
+      name: "Login",
+      query: { redirect: targetHomePath },
+    });
+    return;
   }
 
-  withDefaults(
-    defineProps<{
-      data: ExceptionData
-    }>(),
-    {}
-  )
-
-  const { homePath } = useCommon()
-
-  const backHome = () => {
-    const targetHomePath = homePath.value || '/'
-
-    if (!userStore.isLogin) {
-      router.push({
-        name: 'Login',
-        query: { redirect: targetHomePath }
-      })
-      return
-    }
-
-    router.push(targetHomePath)
-  }
+  router.push(targetHomePath);
+};
 </script>
diff --git a/frontend/new-web/src/components/core/views/login/AuthTopBar.vue b/frontend/new-web/src/components/core/views/login/AuthTopBar.vue
index 94552537..e709fea8 100644
--- a/frontend/new-web/src/components/core/views/login/AuthTopBar.vue
+++ b/frontend/new-web/src/components/core/views/login/AuthTopBar.vue
@@ -1,42 +1,87 @@
-<!-- 授权页右上角组件 -->
+<!-- 授权页顶栏：左上 Logo / 标题 / 版本（固定），右上操作（固定）；切换布局时仅下方主体变化 -->
 <template>
-  <div
-    class="absolute w-full flex-cb top-4.5 z-10 flex-c !justify-end max-[1180px]:!justify-between"
+  <header
+    class="auth-top-bar pointer-events-none fixed left-0 right-0 top-0 z-[100] flex items-center justify-between gap-3 bg-transparent px-5 py-[1.125rem] md:gap-4 md:px-10"
   >
-    <div class="flex-cc !hidden max-[1180px]:!flex ml-2 max-sm:ml-6">
-      <ArtLogo class="icon" size="46" />
-      <h1 class="text-xl ont-mediumf ml-2">{{ AppConfig.systemInfo.name }}</h1>
+    <div class="pointer-events-auto flex min-w-0 flex-1 items-center gap-3">
+      <ArtLogo class="icon shrink-0" size="46" :src="webLogoSrc" />
+      <div class="min-w-0 flex-1">
+        <div class="flex flex-wrap items-center gap-2">
+          <h1 class="auth-top-bar__site-title">{{ siteTitle }}</h1>
+          <div class="logo-version-badge shrink-0" :title="displayVersion">
+            <span class="logo-version-pill">{{ displayVersion }}</span>
+          </div>
+        </div>
+      </div>
     </div>
 
-    <div class="flex-cc gap-1.5 mr-2 max-sm:mr-5">
+    <div
+      class="auth-top-bar-actions-panel pointer-events-auto flex shrink-0 flex-cc gap-1.5 px-2 py-1.5 max-sm:mr-1"
+    >
       <div class="color-picker-expandable relative flex-c max-sm:!hidden">
         <div
           class="color-dots absolute right-0 rounded-full flex-c gap-2 rounded-5 px-2.5 py-2 pr-9 pl-2.5 opacity-0"
         >
           <div
-            v-for="(color, index) in mainColors"
-            :key="color"
+            v-for="(_color, index) in mainColors"
+            :key="_color"
             class="color-dot relative size-5 c-p flex-cc rounded-full opacity-0"
-            :class="{ active: color === systemThemeColor }"
-            :style="{ background: color, '--index': index }"
-            @click="changeThemeColor(color)"
+            :class="{ active: _color === systemThemeColor }"
+            :style="{ background: _color, '--index': index }"
+            @click="changeThemeColor(_color)"
           >
-            <ArtSvgIcon v-if="color === systemThemeColor" icon="ri:check-fill" class="text-white" />
+            <ArtSvgIcon
+              v-if="_color === systemThemeColor"
+              icon="ri:check-fill"
+              class="text-white"
+            />
           </div>
         </div>
-        <div class="btn palette-btn relative z-[2] h-8 w-8 c-p flex-cc tad-300">
+        <div
+          class="btn palette-btn auth-top-bar__action relative z-[2] h-8 w-8 c-p flex-cc tad-300"
+        >
+          <ArtSvgIcon icon="ri:palette-line" class="text-xl transition-colors duration-300" />
+        </div>
+      </div>
+      <ElDropdown
+        v-if="panelAlign != null"
+        @command="onPanelAlign"
+        popper-class="langDropDownStyle"
+      >
+        <div
+          class="btn layout-align-btn auth-top-bar__action h-8 w-8 c-p flex-cc tad-300"
+          :title="$t('login.panelAlign.label')"
+        >
           <ArtSvgIcon
-            icon="ri:palette-line"
+            icon="ri:layout-grid-line"
             class="text-xl text-g-800 transition-colors duration-300"
           />
         </div>
-      </div>
+        <template #dropdown>
+          <ElDropdownMenu>
+            <div v-for="opt in layoutAlignOptions" :key="opt.value" class="lang-btn-item">
+              <ElDropdownItem
+                :command="opt.value"
+                :class="{ 'is-selected': panelAlign === opt.value }"
+              >
+                <ArtSvgIcon :icon="opt.icon" class="mr-2 text-base" />
+                <span class="menu-txt">{{ $t(opt.labelKey) }}</span>
+                <ArtSvgIcon
+                  icon="ri:check-fill"
+                  class="text-base"
+                  v-if="panelAlign === opt.value"
+                />
+              </ElDropdownItem>
+            </div>
+          </ElDropdownMenu>
+        </template>
+      </ElDropdown>
       <ElDropdown
         v-if="shouldShowLanguage"
         @command="changeLanguage"
         popper-class="langDropDownStyle"
       >
-        <div class="btn language-btn h-8 w-8 c-p flex-cc tad-300">
+        <div class="btn language-btn auth-top-bar__action h-8 w-8 c-p flex-cc tad-300">
           <ArtSvgIcon
             icon="ri:translate-2"
             class="text-[19px] text-g-800 transition-colors duration-300"
@@ -58,7 +103,7 @@
       </ElDropdown>
       <div
         v-if="shouldShowThemeToggle"
-        class="btn theme-btn h-8 w-8 c-p flex-cc tad-300"
+        class="btn theme-btn auth-top-bar__action h-8 w-8 c-p flex-cc tad-300"
         @click="themeAnimation"
       >
         <ArtSvgIcon
@@ -67,83 +112,215 @@
         />
       </div>
     </div>
-  </div>
+  </header>
 </template>
 
 <script setup lang="ts">
-  import { useI18n } from 'vue-i18n'
-  import { useSettingStore } from '@/store/modules/setting'
-  import { useUserStore } from '@/store/modules/user'
-  import { useHeaderBar } from '@/hooks/core/useHeaderBar'
-  import { themeAnimation } from '@/utils/ui/animation'
-  import { languageOptions } from '@/locales'
-  import { LanguageEnum } from '@/enums/appEnum'
-  import AppConfig from '@/config'
+import { useI18n } from "vue-i18n";
+import { useSettingsStore } from "@/store/modules/setting.store";
+import { useUserStore } from "@/store/modules/user.store";
+import { useHeaderBar } from "@/hooks/core/useHeaderBar";
+import { themeAnimation } from "@/utils/ui/animation";
+import { languageOptions } from "@/locales";
+import { LanguageEnum } from "@/enums/appEnum";
+import AppConfig from "@/config";
+import { useConfigStore } from "@/store/modules/config.store";
+import type { LoginPanelAlign } from "@/views/module_system/auth/composables/useLoginPanelAlign";
 
-  defineOptions({ name: 'AuthTopBar' })
+defineOptions({ name: "AuthTopBar" });
 
-  const settingStore = useSettingStore()
-  const userStore = useUserStore()
-  const { isDark, systemThemeColor } = storeToRefs(settingStore)
-  const { shouldShowThemeToggle, shouldShowLanguage } = useHeaderBar()
-  const { locale } = useI18n()
+const DEFAULT_APP_VERSION = "2.0.0";
 
-  const mainColors = AppConfig.systemMainColor
-  const color = systemThemeColor // css v-bind 使用
+defineProps<{
+  /** 登录区表单水平对齐；未传入时不展示布局切换 */
+  panelAlign?: LoginPanelAlign | null;
+}>();
 
-  const changeLanguage = (lang: LanguageEnum) => {
-    if (locale.value === lang) return
-    locale.value = lang
-    userStore.setLanguage(lang)
+const emit = defineEmits<{
+  "update:panelAlign": [value: LoginPanelAlign];
+}>();
+
+const layoutAlignOptions: {
+  value: LoginPanelAlign;
+  icon: string;
+  labelKey: string;
+}[] = [
+  { value: "left", icon: "ri:layout-left-2-line", labelKey: "login.panelAlign.left" },
+  { value: "center", icon: "ri:layout-grid-line", labelKey: "login.panelAlign.center" },
+  { value: "right", icon: "ri:layout-right-2-line", labelKey: "login.panelAlign.right" },
+];
+
+function onPanelAlign(cmd: string) {
+  if (cmd === "left" || cmd === "center" || cmd === "right") {
+    emit("update:panelAlign", cmd);
   }
+}
 
-  const changeThemeColor = (color: string) => {
-    if (systemThemeColor.value === color) return
-    settingStore.setElementTheme(color)
-    settingStore.reload()
-  }
+const configStore = useConfigStore();
+const settingStore = useSettingsStore();
+const userStore = useUserStore();
+const { isDark, systemThemeColor } = storeToRefs(settingStore);
+const { shouldShowThemeToggle, shouldShowLanguage } = useHeaderBar();
+const { locale } = useI18n();
+
+const mainColors = AppConfig.systemMainColor;
+/** 与 Element 主题主色同步，供调色盘图标与展开态使用 */
+const themeColorForCss = computed(() => systemThemeColor.value);
+
+const webLogoSrc = computed(
+  () => configStore.configData.sys_web_logo?.config_value?.trim() || undefined
+);
+
+const siteTitle = computed(
+  () => configStore.configData.sys_web_title?.config_value?.trim() || AppConfig.systemInfo.name
+);
+
+const displayVersion = computed(() => {
+  const raw = configStore.configData.sys_web_version?.config_value?.trim();
+  const ver = raw || DEFAULT_APP_VERSION;
+  return ver.startsWith("v") || ver.startsWith("V") ? ver : `v${ver}`;
+});
+
+const changeLanguage = (lang: LanguageEnum) => {
+  if (locale.value === lang) return;
+  locale.value = lang;
+  userStore.setLanguage(lang);
+};
+
+const changeThemeColor = (color: string) => {
+  if (systemThemeColor.value === color) return;
+  settingStore.setElementTheme(color);
+  settingStore.reload();
+};
 </script>
 
 <style scoped>
-  .color-dots {
-    pointer-events: none;
-    backdrop-filter: blur(10px);
-    box-shadow: 0 2px 12px var(--art-gray-300);
-    transition:
-      opacity 0.3s ease,
-      transform 0.3s ease;
-    transform: translateX(10px);
-  }
+.auth-top-bar__site-title {
+  max-width: min(52vw, 28rem);
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: clamp(1rem, 2.2vw, 1.25rem);
+  font-weight: 600;
+  line-height: 1.35;
+  color: var(--el-text-color-primary);
+  letter-spacing: -0.02em;
+  white-space: nowrap;
+}
 
-  .color-dot {
-    box-shadow: 0 2px 4px rgb(0 0 0 / 15%);
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    transition-delay: calc(var(--index) * 0.05s);
-    transform: translateX(20px) scale(0.8);
-  }
+.logo-version-pill {
+  display: inline-block;
+  padding: 0.28rem 0.6rem;
+  font-size: 11px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.15;
+  color: var(--el-color-primary);
+  letter-spacing: 0.02em;
+  background: color-mix(in srgb, var(--el-color-primary) 11%, transparent);
+  border: 1px solid color-mix(in srgb, var(--el-color-primary) 28%, transparent);
+  border-radius: 999px;
+}
 
-  .color-dot:hover {
-    box-shadow: 0 4px 8px rgb(0 0 0 / 20%);
-    transform: translateX(0) scale(1.1);
-  }
+/* 右上角操作的整体衬底 */
+.auth-top-bar-actions-panel {
+  background-color: var(--el-fill-color-blank);
+  border: 1px solid var(--el-border-color-lighter);
 
-  .color-picker-expandable:hover .color-dots {
-    pointer-events: auto;
-    opacity: 1;
-    transform: translateX(0);
-  }
+  /* 胶囊形：左右两端为半圆弧 */
+  border-radius: 9999px;
+  box-shadow: 0 2px 12px rgb(0 0 0 / 6%);
+  backdrop-filter: blur(10px);
+}
 
-  .color-picker-expandable:hover .color-dot {
-    opacity: 1;
-    transform: translateX(0) scale(1);
-  }
+.dark .auth-top-bar-actions-panel {
+  background-color: rgb(255 255 255 / 8%);
+  border-color: rgb(255 255 255 / 12%);
+  box-shadow: 0 4px 20px rgb(0 0 0 / 35%);
+}
 
-  .dark .color-dots {
-    background-color: var(--art-gray-200);
-    box-shadow: none;
-  }
+/* 右上角三个操作按钮：悬浮抬升 + 浅底 + 图标随主色 */
+.auth-top-bar__action {
+  border-radius: 10px;
+  transition:
+    background-color 0.22s ease,
+    transform 0.22s ease,
+    box-shadow 0.22s ease;
+}
 
-  .color-picker-expandable:hover .palette-btn :deep(.art-svg-icon) {
-    color: v-bind(color);
-  }
+.auth-top-bar__action:hover {
+  background-color: var(--el-fill-color-light);
+  box-shadow: 0 4px 14px rgb(0 0 0 / 8%);
+  transform: translateY(-2px);
+}
+
+.auth-top-bar__action:hover :deep(.art-svg-icon) {
+  color: var(--el-color-primary);
+}
+
+.auth-top-bar__action:active {
+  box-shadow: 0 2px 6px rgb(0 0 0 / 6%);
+  transform: translateY(0);
+  transition-duration: 0.12s;
+}
+
+.dark .auth-top-bar__action:hover {
+  background-color: rgb(255 255 255 / 10%);
+  box-shadow: 0 4px 18px rgb(0 0 0 / 45%);
+}
+
+.color-dots {
+  pointer-events: none;
+  box-shadow: 0 2px 12px var(--art-gray-300);
+  backdrop-filter: blur(10px);
+  transform: translateX(10px);
+  transition:
+    opacity 0.3s ease,
+    transform 0.3s ease;
+}
+
+.color-dot {
+  box-shadow: 0 2px 4px rgb(0 0 0 / 15%);
+  transform: translateX(20px) scale(0.8);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition-delay: calc(var(--index) * 0.05s);
+}
+
+/* 仅展开调色条后，单颗色块悬浮：描边 + 略放大 */
+.color-picker-expandable:hover .color-dot:hover {
+  z-index: 1;
+  box-shadow:
+    0 4px 12px rgb(0 0 0 / 28%),
+    0 0 0 2px rgb(255 255 255 / 88%);
+  transform: translateX(0) scale(1.16);
+}
+
+.color-picker-expandable:hover .color-dots {
+  pointer-events: auto;
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.color-picker-expandable:hover .color-dot {
+  opacity: 1;
+  transform: translateX(0) scale(1);
+}
+
+.dark .color-dots {
+  background-color: var(--art-gray-200);
+  box-shadow: none;
+}
+
+/* 调色盘：图标颜色与当前主题主色一致（含单独悬浮、整块调色区悬浮） */
+.palette-btn :deep(.art-svg-icon) {
+  color: v-bind("themeColorForCss");
+}
+
+.auth-top-bar__action.palette-btn:hover :deep(.art-svg-icon) {
+  color: v-bind("themeColorForCss");
+}
+
+.color-picker-expandable:hover .palette-btn :deep(.art-svg-icon) {
+  color: v-bind("themeColorForCss");
+}
 </style>
diff --git a/frontend/new-web/src/components/core/views/login/LoginCenterBackdrop.vue b/frontend/new-web/src/components/core/views/login/LoginCenterBackdrop.vue
new file mode 100644
index 00000000..e3a354c3
--- /dev/null
+++ b/frontend/new-web/src/components/core/views/login/LoginCenterBackdrop.vue
@@ -0,0 +1,84 @@
+<!-- 居中布局：与左侧栏一致的浅色底 + 中部淡化插画（不参与交互） -->
+<template>
+  <div
+    class="login-center-backdrop"
+    :class="{ 'login-center-backdrop--viewport-fixed': viewportFixed }"
+    aria-hidden="true"
+  >
+    <div class="login-center-backdrop__bg" />
+    <div class="login-center-backdrop__hero-wrap">
+      <ThemeSvg :src="loginIcon" size="100%" class="login-center-backdrop__hero" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import loginIcon from "@imgs/svg/login_icon.svg";
+
+defineOptions({ name: "LoginCenterBackdrop" });
+
+withDefaults(
+  defineProps<{
+    /** 铺满视口并置于底层（与固定顶栏配合） */
+    viewportFixed?: boolean;
+  }>(),
+  { viewportFixed: false }
+);
+</script>
+
+<style scoped lang="scss">
+.login-center-backdrop {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.login-center-backdrop--viewport-fixed {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+}
+
+.login-center-backdrop__bg {
+  position: absolute;
+  inset: 0;
+  background-color: color-mix(
+    in srgb,
+    var(--el-color-primary-light-9) 100%,
+    var(--default-box-color)
+  );
+}
+
+.login-center-backdrop__hero-wrap {
+  position: absolute;
+  top: 12%;
+  left: 50%;
+  width: min(420px, 52vw);
+  height: min(340px, 38vh);
+  opacity: 0.22;
+  transform: translateX(-50%);
+}
+
+.login-center-backdrop__hero {
+  width: 100%;
+  height: 100%;
+}
+
+html.dark .login-center-backdrop__bg {
+  background-color: color-mix(in srgb, var(--el-color-primary-light-9) 60%, #070707);
+}
+
+html.dark .login-center-backdrop__hero-wrap {
+  opacity: 0.14;
+}
+
+@media only screen and (width <= 1180px) {
+  .login-center-backdrop__hero-wrap {
+    top: 10%;
+    width: min(320px, 72vw);
+    height: min(240px, 28vh);
+  }
+}
+</style>
diff --git a/frontend/new-web/src/components/core/views/login/LoginLeftView.vue b/frontend/new-web/src/components/core/views/login/LoginLeftView.vue
index af6a9042..f8a2284b 100644
--- a/frontend/new-web/src/components/core/views/login/LoginLeftView.vue
+++ b/frontend/new-web/src/components/core/views/login/LoginLeftView.vue
@@ -1,9 +1,16 @@
 <!-- 登录、注册、忘记密码左侧背景 -->
 <template>
   <div class="login-left-view">
-    <div class="logo">
-      <ArtLogo class="icon" size="46" />
-      <h1 class="title">{{ AppConfig.systemInfo.name }}</h1>
+    <div v-if="!hideTopBranding" class="logo">
+      <ArtLogo class="icon" size="46" :src="webLogoSrc" />
+      <div class="logo-title-wrap">
+        <div class="logo-title-inline">
+          <h1 class="title">{{ siteTitle }}</h1>
+          <div class="logo-version-badge" :title="displayVersion">
+            <span class="logo-version-pill">{{ displayVersion }}</span>
+          </div>
+        </div>
+      </div>
     </div>
 
     <div class="left-img">
@@ -11,8 +18,8 @@
     </div>
 
     <div class="text-wrap">
-      <h1> {{ $t('login.leftView.title') }} </h1>
-      <p> {{ $t('login.leftView.subTitle') }} </p>
+      <h1>{{ $t("login.leftView.title") }}</h1>
+      <p>{{ $t("login.leftView.subTitle") }}</p>
     </div>
 
     <!-- 几何装饰元素 -->
@@ -71,532 +78,602 @@
 </template>
 
 <script setup lang="ts">
-  import AppConfig from '@/config'
-  import loginIcon from '@imgs/svg/login_icon.svg'
-  import { themeAnimation } from '@/utils/ui/animation'
+import AppConfig from "@/config";
+import loginIcon from "@imgs/svg/login_icon.svg";
+import { useConfigStore } from "@/store/modules/config.store";
+import { themeAnimation } from "@/utils/ui/animation";
 
-  // 定义 props
-  defineProps<{
-    hideContent?: boolean // 是否隐藏内容，只显示 logo
-  }>()
+defineProps<{
+  hideContent?: boolean;
+  /** 顶栏已展示 Logo/标题/版本时隐藏左侧重复顶栏 */
+  hideTopBranding?: boolean;
+}>();
+
+const configStore = useConfigStore();
+
+/** 接口 sys_web_logo，空则 ArtLogo 内置默认图 */
+const webLogoSrc = computed(
+  () => configStore.configData.sys_web_logo?.config_value?.trim() || undefined
+);
+
+const siteTitle = computed(
+  () => configStore.configData.sys_web_title?.config_value?.trim() || AppConfig.systemInfo.name
+);
+
+const DEFAULT_APP_VERSION = "2.0.0";
+const displayVersion = computed(() => {
+  const raw = configStore.configData.sys_web_version?.config_value?.trim();
+  const ver = raw || DEFAULT_APP_VERSION;
+  return ver.startsWith("v") || ver.startsWith("V") ? ver : `v${ver}`;
+});
 </script>
 
 <style lang="scss" scoped>
-  // 颜色变量定义
-  $primary-light-7: var(--el-color-primary-light-7);
-  $primary-light-8: var(--el-color-primary-light-8);
-  $primary-light-9: var(--el-color-primary-light-9);
-  $primary-base: var(--el-color-primary);
-  $main-bg: var(--default-box-color);
+// 颜色变量定义
+$primary-light-7: var(--el-color-primary-light-7);
+$primary-light-8: var(--el-color-primary-light-8);
+$primary-light-9: var(--el-color-primary-light-9);
+$primary-base: var(--el-color-primary);
+$main-bg: var(--default-box-color);
 
-  // 混合颜色函数
-  $bg-mix-light-9: color-mix(in srgb, $primary-light-9 100%, $main-bg);
-  $bg-mix-light-8: color-mix(in srgb, $primary-light-8 80%, $main-bg);
-  $bg-mix-light-7: color-mix(in srgb, $primary-light-7 80%, $main-bg);
+// 混合颜色函数
+$bg-mix-light-9: color-mix(in srgb, $primary-light-9 100%, $main-bg);
+$bg-mix-light-8: color-mix(in srgb, $primary-light-8 80%, $main-bg);
+$bg-mix-light-7: color-mix(in srgb, $primary-light-7 80%, $main-bg);
 
-  .login-left-view {
+.login-left-view {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  padding: 15px;
+  overflow: hidden;
+  background-color: $bg-mix-light-9;
+
+  .logo {
     position: relative;
-    box-sizing: border-box;
-    width: 65vw;
-    height: 100%;
-    padding: 15px;
-    overflow: hidden;
-    background-color: $bg-mix-light-9;
+    z-index: 100;
+    display: flex;
+    align-items: center;
 
-    .logo {
-      position: relative;
-      z-index: 100;
+    .logo-title-wrap {
+      flex: 1;
+      min-width: 0;
+      margin-left: 10px;
+    }
+
+    /** 标题与版本：垂直居中对齐（上下在同一水平中线），长标题可自然换行 */
+    .logo-title-inline {
       display: flex;
+      flex-flow: row wrap;
+      gap: 0.45rem;
       align-items: center;
-
-      .title {
-        margin-left: 10px;
-        font-size: 20px;
-        font-weight: 400;
-      }
+      min-width: 0;
+      max-width: 100%;
     }
 
-    .left-img {
-      position: absolute;
-      inset: 0 0 10.5%;
-      z-index: 10;
-      width: 40%;
-      margin: auto;
-      animation: slideInLeft 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+    .title {
+      flex: 0 1 auto;
+      min-width: 0;
+      max-width: 100%;
+      margin: 0;
+      font-size: clamp(1.05rem, 1.6vw, 1.25rem);
+      font-weight: 600;
+      line-height: 1.35;
+      color: var(--el-text-color-primary);
+      letter-spacing: -0.02em;
     }
 
-    .text-wrap {
-      position: absolute;
-      bottom: 80px;
-      width: 100%;
-      text-align: center;
-      animation: slideInLeft 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
-
-      h1 {
-        font-size: 24px;
-        font-weight: 400;
-        color: var(--art-gray-900) !important;
-      }
-
-      p {
-        margin-top: 10px;
-        font-size: 14px;
-        color: var(--art-gray-600) !important;
-      }
+    .logo-version-badge {
+      flex-shrink: 0;
     }
 
-    .geometric-decorations {
-      .geo-element {
-        position: absolute;
-        opacity: 0;
-        animation-fill-mode: forwards;
-        animation-duration: 0.8s;
-        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-      }
-
-      // 动画 mixin
-      @mixin fadeAnimation($direction: '', $rotation: 0deg) {
-        from {
-          opacity: 0;
-
-          @if $direction == 'up' {
-            transform: translateY(30px) rotate($rotation);
-          } @else if $direction == 'down' {
-            transform: translateY(-30px) rotate($rotation);
-          } @else if $direction == 'left' {
-            transform: translateX(-30px) rotate($rotation);
-          } @else if $direction == 'right' {
-            transform: translateX(30px) rotate($rotation);
-          }
-        }
-
-        to {
-          opacity: 1;
-
-          @if $direction == 'up' or $direction == 'down' {
-            transform: translateY(0) rotate($rotation);
-          } @else {
-            transform: translateX(0) rotate($rotation);
-          }
-        }
-      }
-
-      // 动画定义
-      @keyframes fadeInUp {
-        @include fadeAnimation('up');
-      }
-
-      @keyframes fadeInDown {
-        @include fadeAnimation('down');
-      }
-
-      @keyframes fadeInLeft {
-        @include fadeAnimation('left');
-      }
-
-      @keyframes fadeInLeftRotated {
-        @include fadeAnimation('left', -25deg);
-      }
-
-      @keyframes fadeInRight {
-        @include fadeAnimation('right');
-      }
-
-      @keyframes fadeInRightRotated {
-        @include fadeAnimation('right', 45deg);
-      }
-
-      @keyframes fadeInLeftRotatedBlue {
-        @include fadeAnimation('left', -10deg);
-      }
-
-      @keyframes fadeInLeftRotatedPink {
-        @include fadeAnimation('left', 10deg);
-      }
-
-      @keyframes fadeInLeftNoRotation {
-        @include fadeAnimation('left');
-      }
-
-      @keyframes scaleIn {
-        from {
-          opacity: 0;
-          transform: scale(0.8);
-        }
-
-        to {
-          opacity: 1;
-          transform: scale(1);
-        }
-      }
-
-      @keyframes bounceIn {
-        0% {
-          opacity: 0;
-          transform: scale(0.3);
-        }
-
-        50% {
-          opacity: 1;
-          transform: scale(1.05);
-        }
-
-        70% {
-          transform: scale(0.9);
-        }
-
-        100% {
-          opacity: 1;
-          transform: scale(1);
-        }
-      }
-
-      @keyframes lineGrow {
-        from {
-          opacity: 0;
-        }
-
-        to {
-          opacity: 1;
-        }
-      }
-
-      @keyframes slideInLeft {
-        from {
-          opacity: 0;
-          transform: translateX(-30px);
-        }
-
-        to {
-          opacity: 1;
-          transform: translateX(0);
-        }
-      }
-
-      // 动画类
-      .animate-fade-in-up {
-        animation-name: fadeInUp;
-      }
-
-      .animate-fade-in-down {
-        animation-name: fadeInDown;
-      }
-
-      .animate-fade-in-left {
-        animation-name: fadeInLeft;
-      }
-
-      .animate-fade-in-right {
-        animation-name: fadeInRight;
-      }
-
-      .animate-scale-in {
-        animation-name: scaleIn;
-        animation-duration: 1.2s;
-      }
-
-      .animate-bounce-in {
-        animation-name: bounceIn;
-        animation-duration: 0.6s;
-      }
-
-      .animate-fade-in-left-rotated-blue {
-        animation-name: fadeInLeftRotatedBlue;
-      }
-
-      .animate-fade-in-left-rotated-pink {
-        animation-name: fadeInLeftRotatedPink;
-      }
-
-      .animate-fade-in-left-no-rotation {
-        animation-name: fadeInLeftNoRotation;
-      }
-
-      // 基础几何形状
-      .circle-outline {
-        top: 10%;
-        left: 25%;
-        width: 42px;
-        height: 42px;
-        border: 2px solid $primary-light-8;
-        border-radius: 50%;
-      }
-
-      .square-rotated {
-        top: 50%;
-        left: 16%;
-        width: 60px;
-        height: 60px;
-        background-color: $bg-mix-light-8;
-
-        &.animate-fade-in-left {
-          animation-name: fadeInLeftRotated;
-        }
-      }
-
-      .circle-small {
-        bottom: 26%;
-        left: 30%;
-        width: 18px;
-        height: 18px;
-        background-color: $primary-light-8;
-        border-radius: 50%;
-      }
-
-      // 太阳/月亮效果
-      .circle-top-right {
-        top: 3%;
-        right: 3%;
-        z-index: 100;
-        width: 50px;
-        height: 50px;
-        cursor: pointer;
-        background: $bg-mix-light-7;
-        border-radius: 50%;
-        transition: all 0.3s;
-
-        &::after {
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          width: 100%;
-          height: 100%;
-          content: '';
-          background: linear-gradient(to right, #fcbb04, #fffc00);
-          border-radius: 50%;
-          opacity: 0;
-          transition: all 0.5s;
-          transform: translate(-50%, -50%);
-        }
-
-        &:hover {
-          box-shadow: 0 0 36px #fffc00;
-
-          &::after {
-            opacity: 1;
-          }
-        }
-      }
-
-      .square-bottom-right {
-        right: 10%;
-        bottom: 10%;
-        width: 50px;
-        height: 50px;
-        background-color: $primary-light-8;
-
-        &.animate-fade-in-right {
-          animation-name: fadeInRightRotated;
-        }
-      }
-
-      // 背景泡泡
-      .bg-bubble {
-        top: -120px;
-        right: -120px;
-        width: 360px;
-        height: 360px;
-        background-color: $bg-mix-light-8;
-        border-radius: 50%;
-      }
-
-      // 装饰点
-      .dot {
-        width: 14px;
-        height: 14px;
-        background-color: $primary-light-7;
-        border-radius: 50%;
-
-        &.dot-top-left {
-          top: 140px;
-          left: 100px;
-        }
-
-        &.dot-top-right {
-          top: 140px;
-          right: 120px;
-        }
-
-        &.dot-center-right {
-          top: 46%;
-          right: 22%;
-          background-color: $primary-light-8;
-        }
-      }
-
-      // 叠加方块组
-      .squares-group {
-        position: absolute;
-        bottom: 18px;
-        left: 20px;
-        width: 140px;
-        height: 140px;
-        pointer-events: none;
-
-        .square {
-          position: absolute;
-          display: block;
-          border-radius: 8px;
-          box-shadow: 0 8px 24px rgb(64 87 167 / 12%);
-
-          &.square-blue {
-            top: 12px;
-            left: 30px;
-            z-index: 2;
-            width: 50px;
-            height: 50px;
-            background-color: rgb(from $primary-base r g b / 30%);
-          }
-
-          &.square-pink {
-            top: 30px;
-            left: 48px;
-            z-index: 1;
-            width: 70px;
-            height: 70px;
-            background-color: rgb(from $primary-base r g b / 15%);
-          }
-
-          &.square-purple {
-            top: 66px;
-            left: 86px;
-            z-index: 3;
-            width: 32px;
-            height: 32px;
-            background-color: rgb(from $primary-base r g b / 45%);
-          }
-        }
-
-        // 装饰线条
-        &::after {
-          position: absolute;
-          top: 86px;
-          left: 72px;
-          width: 80px;
-          height: 1px;
-          content: '';
-          background: linear-gradient(90deg, var(--el-color-primary-light-6), transparent);
-          opacity: 0;
-          transform: rotate(50deg);
-          animation: lineGrow 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
-          animation-delay: 1.2s;
-        }
-      }
-    }
-
-    @media only screen and (width <= 1600px) {
-      width: 60vw;
-
-      .text-wrap {
-        bottom: 40px;
-      }
-    }
-
-    @media only screen and (width <= 1180px) {
-      width: auto;
-      height: auto;
-      padding: 0;
-      // 隐藏背景和其他内容，只保留 logo
-      background: transparent;
-
-      .left-img,
-      .text-wrap,
-      .geometric-decorations {
-        display: none;
-      }
-
-      .logo {
-        display: none;
-      }
+    .logo-version-pill {
+      display: inline-block;
+      padding: 0.28rem 0.6rem;
+      font-size: 11px;
+      font-weight: 700;
+      font-variant-numeric: tabular-nums;
+      line-height: 1.15;
+      color: var(--el-color-primary);
+      letter-spacing: 0.02em;
+      background: color-mix(in srgb, var(--el-color-primary) 11%, transparent);
+      border: 1px solid color-mix(in srgb, var(--el-color-primary) 28%, transparent);
+      border-radius: 999px;
+      box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
+      transition:
+        border-color 0.2s ease,
+        background 0.2s ease;
     }
   }
 
-  // 暗色主题
-  .dark .login-left-view {
-    background-color: color-mix(in srgb, $primary-light-9 60%, #070707);
+  .left-img {
+    position: absolute;
+    inset: 0 0 10.5%;
+    z-index: 10;
+    width: 40%;
+    margin: auto;
+    animation: slideInLeft 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+  }
 
-    @media only screen and (width <= 1180px) {
-      background: transparent;
+  .text-wrap {
+    position: absolute;
+    bottom: 80px;
+    width: 100%;
+    text-align: center;
+    animation: slideInLeft 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+
+    h1 {
+      font-size: 24px;
+      font-weight: 400;
+      color: var(--art-gray-900) !important;
     }
 
-    .geometric-decorations {
-      // 月亮效果
-      .circle-top-right {
-        background-color: $bg-mix-light-8;
-        box-shadow: 0 0 25px #333 inset;
-        transition: all 0.3s ease-in-out 0.1s;
-        rotate: -48deg;
+    p {
+      margin-top: 10px;
+      font-size: 14px;
+      color: var(--art-gray-600) !important;
+    }
+  }
 
-        &::before {
-          position: absolute;
-          top: 0;
-          left: 15px;
-          width: 50px;
-          height: 50px;
-          content: '';
-          background-color: $bg-mix-light-9;
-          border-radius: 50%;
-          transition: all 0.3s ease-in-out;
+  .geometric-decorations {
+    .geo-element {
+      position: absolute;
+      opacity: 0;
+      animation-fill-mode: forwards;
+      animation-duration: 0.8s;
+      animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    }
+
+    // 动画 mixin
+    @mixin fadeAnimation($direction: "", $rotation: 0deg) {
+      from {
+        opacity: 0;
+
+        @if $direction == "up" {
+          transform: translateY(30px) rotate($rotation);
         }
 
-        &:hover {
-          background-color: transparent;
-          box-shadow: 0 40px 25px #ddd inset;
+ @else if $direction == "down" {
+          transform: translateY(-30px) rotate($rotation);
+        }
 
-          &::before {
-            left: 18px;
-          }
+ @else if $direction == "left" {
+          transform: translateX(-30px) rotate($rotation);
+        }
 
-          &::after {
-            opacity: 0;
-          }
+ @else if $direction == "right" {
+          transform: translateX(30px) rotate($rotation);
         }
       }
 
-      .bg-bubble {
-        background-color: $bg-mix-light-9;
+      to {
+        opacity: 1;
+
+        @if $direction == "up" or $direction == "down" {
+          transform: translateY(0) rotate($rotation);
+        }
+
+ @else {
+          transform: translateX(0) rotate($rotation);
+        }
+      }
+    }
+
+    // 动画定义
+    @keyframes fadeInUp {
+      @include fadeAnimation("up");
+    }
+
+    @keyframes fadeInDown {
+      @include fadeAnimation("down");
+    }
+
+    @keyframes fadeInLeft {
+      @include fadeAnimation("left");
+    }
+
+    @keyframes fadeInLeftRotated {
+      @include fadeAnimation("left", -25deg);
+    }
+
+    @keyframes fadeInRight {
+      @include fadeAnimation("right");
+    }
+
+    @keyframes fadeInRightRotated {
+      @include fadeAnimation("right", 45deg);
+    }
+
+    @keyframes fadeInLeftRotatedBlue {
+      @include fadeAnimation("left", -10deg);
+    }
+
+    @keyframes fadeInLeftRotatedPink {
+      @include fadeAnimation("left", 10deg);
+    }
+
+    @keyframes fadeInLeftNoRotation {
+      @include fadeAnimation("left");
+    }
+
+    @keyframes scaleIn {
+      from {
+        opacity: 0;
+        transform: scale(0.8);
       }
 
-      // 其他元素颜色调整
-      .square-rotated {
-        background-color: $bg-mix-light-9;
+      to {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+
+    @keyframes bounceIn {
+      0% {
+        opacity: 0;
+        transform: scale(0.3);
       }
 
-      .circle-small,
-      .dot {
-        background-color: $primary-light-8;
+      50% {
+        opacity: 1;
+        transform: scale(1.05);
       }
 
-      .square-bottom-right {
-        background-color: $primary-light-9;
+      70% {
+        transform: scale(0.9);
       }
 
-      .dot.dot-top-right {
+      100% {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+
+    @keyframes lineGrow {
+      from {
+        opacity: 0;
+      }
+
+      to {
+        opacity: 1;
+      }
+    }
+
+    @keyframes slideInLeft {
+      from {
+        opacity: 0;
+        transform: translateX(-30px);
+      }
+
+      to {
+        opacity: 1;
+        transform: translateX(0);
+      }
+    }
+
+    // 动画类
+    .animate-fade-in-up {
+      animation-name: fadeInUp;
+    }
+
+    .animate-fade-in-down {
+      animation-name: fadeInDown;
+    }
+
+    .animate-fade-in-left {
+      animation-name: fadeInLeft;
+    }
+
+    .animate-fade-in-right {
+      animation-name: fadeInRight;
+    }
+
+    .animate-scale-in {
+      animation-name: scaleIn;
+      animation-duration: 1.2s;
+    }
+
+    .animate-bounce-in {
+      animation-name: bounceIn;
+      animation-duration: 0.6s;
+    }
+
+    .animate-fade-in-left-rotated-blue {
+      animation-name: fadeInLeftRotatedBlue;
+    }
+
+    .animate-fade-in-left-rotated-pink {
+      animation-name: fadeInLeftRotatedPink;
+    }
+
+    .animate-fade-in-left-no-rotation {
+      animation-name: fadeInLeftNoRotation;
+    }
+
+    // 基础几何形状
+    .circle-outline {
+      top: 10%;
+      left: 25%;
+      width: 42px;
+      height: 42px;
+      border: 2px solid $primary-light-8;
+      border-radius: 50%;
+    }
+
+    .square-rotated {
+      top: 50%;
+      left: 16%;
+      width: 60px;
+      height: 60px;
+      background-color: $bg-mix-light-8;
+
+      &.animate-fade-in-left {
+        animation-name: fadeInLeftRotated;
+      }
+    }
+
+    .circle-small {
+      bottom: 26%;
+      left: 30%;
+      width: 18px;
+      height: 18px;
+      background-color: $primary-light-8;
+      border-radius: 50%;
+    }
+
+    // 太阳/月亮效果
+    .circle-top-right {
+      top: 3%;
+      right: 3%;
+      z-index: 100;
+      width: 50px;
+      height: 50px;
+      cursor: pointer;
+      background: $bg-mix-light-7;
+      border-radius: 50%;
+      transition: all 0.3s;
+
+      &::after {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 100%;
+        height: 100%;
+        content: "";
+        background: linear-gradient(to right, #fcbb04, #fffc00);
+        border-radius: 50%;
+        opacity: 0;
+        transform: translate(-50%, -50%);
+        transition: all 0.5s;
+      }
+
+      &:hover {
+        box-shadow: 0 0 36px #fffc00;
+
+        &::after {
+          opacity: 1;
+        }
+      }
+    }
+
+    .square-bottom-right {
+      right: 10%;
+      bottom: 10%;
+      width: 50px;
+      height: 50px;
+      background-color: $primary-light-8;
+
+      &.animate-fade-in-right {
+        animation-name: fadeInRightRotated;
+      }
+    }
+
+    // 背景泡泡
+    .bg-bubble {
+      top: -120px;
+      right: -120px;
+      width: 360px;
+      height: 360px;
+      background-color: $bg-mix-light-8;
+      border-radius: 50%;
+    }
+
+    // 装饰点
+    .dot {
+      width: 14px;
+      height: 14px;
+      background-color: $primary-light-7;
+      border-radius: 50%;
+
+      &.dot-top-left {
+        top: 140px;
+        left: 100px;
+      }
+
+      &.dot-top-right {
+        top: 140px;
+        right: 120px;
+      }
+
+      &.dot-center-right {
+        top: 46%;
+        right: 22%;
         background-color: $primary-light-8;
       }
     }
 
-    // 方块组暗色调整
+    // 叠加方块组
     .squares-group {
+      position: absolute;
+      bottom: 18px;
+      left: 20px;
+      width: 140px;
+      height: 140px;
+      pointer-events: none;
+
       .square {
-        box-shadow: none;
+        position: absolute;
+        display: block;
+        border-radius: 8px;
+        box-shadow: 0 8px 24px rgb(64 87 167 / 12%);
 
         &.square-blue {
-          background-color: rgb(from $primary-base r g b / 18%);
+          top: 12px;
+          left: 30px;
+          z-index: 2;
+          width: 50px;
+          height: 50px;
+          background-color: rgb(from $primary-base r g b / 30%);
         }
 
         &.square-pink {
-          background-color: rgb(from $primary-base r g b / 10%);
+          top: 30px;
+          left: 48px;
+          z-index: 1;
+          width: 70px;
+          height: 70px;
+          background-color: rgb(from $primary-base r g b / 15%);
         }
 
         &.square-purple {
-          background-color: rgb(from $primary-base r g b / 20%);
+          top: 66px;
+          left: 86px;
+          z-index: 3;
+          width: 32px;
+          height: 32px;
+          background-color: rgb(from $primary-base r g b / 45%);
         }
       }
 
+      // 装饰线条
       &::after {
-        background: linear-gradient(90deg, $primary-light-8, transparent);
+        position: absolute;
+        top: 86px;
+        left: 72px;
+        width: 80px;
+        height: 1px;
+        content: "";
+        background: linear-gradient(90deg, var(--el-color-primary-light-6), transparent);
+        opacity: 0;
+        transform: rotate(50deg);
+        animation: lineGrow 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+        animation-delay: 1.2s;
       }
     }
   }
+
+  @media only screen and (width <= 1600px) {
+    .text-wrap {
+      bottom: 40px;
+    }
+  }
+
+  @media only screen and (width <= 1180px) {
+    width: auto;
+    height: auto;
+    padding: 0;
+    // 隐藏背景和其他内容，只保留 logo
+    background: transparent;
+
+    .left-img,
+    .text-wrap,
+    .geometric-decorations {
+      display: none;
+    }
+
+    .logo {
+      display: none;
+    }
+  }
+}
+
+// 暗色主题
+.dark .login-left-view {
+  background-color: color-mix(in srgb, $primary-light-9 60%, #070707);
+
+  @media only screen and (width <= 1180px) {
+    background: transparent;
+  }
+
+  .geometric-decorations {
+    // 月亮效果
+    .circle-top-right {
+      background-color: $bg-mix-light-8;
+      box-shadow: 0 0 25px #333 inset;
+      rotate: -48deg;
+      transition: all 0.3s ease-in-out 0.1s;
+
+      &::before {
+        position: absolute;
+        top: 0;
+        left: 15px;
+        width: 50px;
+        height: 50px;
+        content: "";
+        background-color: $bg-mix-light-9;
+        border-radius: 50%;
+        transition: all 0.3s ease-in-out;
+      }
+
+      &:hover {
+        background-color: transparent;
+        box-shadow: 0 40px 25px #ddd inset;
+
+        &::before {
+          left: 18px;
+        }
+
+        &::after {
+          opacity: 0;
+        }
+      }
+    }
+
+    .bg-bubble {
+      background-color: $bg-mix-light-9;
+    }
+
+    // 其他元素颜色调整
+    .square-rotated {
+      background-color: $bg-mix-light-9;
+    }
+
+    .circle-small,
+    .dot {
+      background-color: $primary-light-8;
+    }
+
+    .square-bottom-right {
+      background-color: $primary-light-9;
+    }
+
+    .dot.dot-top-right {
+      background-color: $primary-light-8;
+    }
+  }
+
+  // 方块组暗色调整
+  .squares-group {
+    .square {
+      box-shadow: none;
+
+      &.square-blue {
+        background-color: rgb(from $primary-base r g b / 18%);
+      }
+
+      &.square-pink {
+        background-color: rgb(from $primary-base r g b / 10%);
+      }
+
+      &.square-purple {
+        background-color: rgb(from $primary-base r g b / 20%);
+      }
+    }
+
+    &::after {
+      background: linear-gradient(90deg, $primary-light-8, transparent);
+    }
+  }
+}
 </style>
diff --git a/frontend/new-web/src/components/core/views/result/ArtResultPage.vue b/frontend/new-web/src/components/core/views/result/ArtResultPage.vue
index b2eca480..c5a5a720 100644
--- a/frontend/new-web/src/components/core/views/result/ArtResultPage.vue
+++ b/frontend/new-web/src/components/core/views/result/ArtResultPage.vue
@@ -5,9 +5,9 @@
       :icon="iconCode"
       :class="type === 'success' ? 'bg-[#19BE6B]' : 'bg-[#ED4014]'"
     />
-    <h1 class="title mt-8 text-3xl font-medium !text-g-900 max-md:mt-2.5 max-md:text-2xl">{{
-      title
-    }}</h1>
+    <h1 class="title mt-8 text-3xl font-medium !text-g-900 max-md:mt-2.5 max-md:text-2xl">
+      {{ title }}
+    </h1>
     <p class="msg mt-5 text-base text-g-600">{{ message }}</p>
     <div
       class="res mt-7.5 rounded bg-g-200/80 dark:bg-g-300/40 px-7.5 py-5.5 text-left max-md:px-7.5 max-md:py-2.5 [&_p]:flex [&_p]:items-center [&_p]:py-2 [&_p]:text-sm [&_p]:text-[#808695] [&_p_i]:mr-1.5"
@@ -21,23 +21,23 @@
 </template>
 
 <script setup lang="ts">
-  defineOptions({ name: 'ArtResultPage' })
+defineOptions({ name: "ArtResultPage" });
 
-  interface ResultPageProps {
-    /** 成功/失败 */
-    type: 'success' | 'fail'
-    /** 标题 */
-    title: string
-    /** 消息 */
-    message: string
-    /** 图标 */
-    iconCode: string
-  }
+interface ResultPageProps {
+  /** 成功/失败 */
+  type: "success" | "fail";
+  /** 标题 */
+  title: string;
+  /** 消息 */
+  message: string;
+  /** 图标 */
+  iconCode: string;
+}
 
-  withDefaults(defineProps<ResultPageProps>(), {
-    type: 'success',
-    title: '',
-    message: '',
-    iconCode: ''
-  })
+withDefaults(defineProps<ResultPageProps>(), {
+  type: "success",
+  title: "",
+  message: "",
+  iconCode: "",
+});
 </script>
diff --git a/frontend/new-web/src/components/core/widget/art-icon-button/index.vue b/frontend/new-web/src/components/core/widget/art-icon-button/index.vue
index 760888be..2cf88887 100644
--- a/frontend/new-web/src/components/core/widget/art-icon-button/index.vue
+++ b/frontend/new-web/src/components/core/widget/art-icon-button/index.vue
@@ -10,14 +10,14 @@
 </template>
 
 <script lang="ts" setup>
-  defineOptions({ name: 'ArtIconButton' })
+defineOptions({ name: "ArtIconButton" });
 
-  interface Props {
-    /** 图标名称 */
-    icon: string
-    /** 圆角按钮 */
-    circle?: boolean
-  }
+interface Props {
+  /** 图标名称 */
+  icon: string;
+  /** 圆角按钮 */
+  circle?: boolean;
+}
 
-  withDefaults(defineProps<Props>(), {})
+withDefaults(defineProps<Props>(), {});
 </script>
diff --git a/frontend/new-web/src/config/assets/images.ts b/frontend/new-web/src/config/assets/images.ts
index f3e89dd1..f8558d3f 100644
--- a/frontend/new-web/src/config/assets/images.ts
+++ b/frontend/new-web/src/config/assets/images.ts
@@ -11,19 +11,19 @@
  * - menuStyles: 菜单风格预览图（设计/暗色/亮色）
  *
  * @module config/assets/images
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
-import lightTheme from '@imgs/settings/theme_styles/light.png'
-import darkTheme from '@imgs/settings/theme_styles/dark.png'
-import systemTheme from '@imgs/settings/theme_styles/system.png'
-import verticalLayout from '@imgs/settings/menu_layouts/vertical.png'
-import horizontalLayout from '@imgs/settings/menu_layouts/horizontal.png'
-import mixedLayout from '@imgs/settings/menu_layouts/mixed.png'
-import dualColumnLayout from '@imgs/settings/menu_layouts/dual_column.png'
-import designStyle from '@imgs/settings/menu_styles/design.png'
-import darkStyle from '@imgs/settings/menu_styles/dark.png'
-import lightStyle from '@imgs/settings/menu_styles/light.png'
+import lightTheme from "@imgs/settings/theme_styles/light.png";
+import darkTheme from "@imgs/settings/theme_styles/dark.png";
+import systemTheme from "@imgs/settings/theme_styles/system.png";
+import verticalLayout from "@imgs/settings/menu_layouts/vertical.png";
+import horizontalLayout from "@imgs/settings/menu_layouts/horizontal.png";
+import mixedLayout from "@imgs/settings/menu_layouts/mixed.png";
+import dualColumnLayout from "@imgs/settings/menu_layouts/dual_column.png";
+import designStyle from "@imgs/settings/menu_styles/design.png";
+import darkStyle from "@imgs/settings/menu_styles/dark.png";
+import lightStyle from "@imgs/settings/menu_styles/light.png";
 
 /**
  * 配置中心图片资源对象
@@ -36,7 +36,7 @@ export const configImages = {
     /** 暗色主题 */
     dark: darkTheme,
     /** 自动主题（跟随系统） */
-    system: systemTheme
+    system: systemTheme,
   },
   /** 菜单布局预览图 */
   menuLayouts: {
@@ -47,7 +47,7 @@ export const configImages = {
     /** 混合菜单 */
     mixed: mixedLayout,
     /** 双栏菜单 */
-    dualColumn: dualColumnLayout
+    dualColumn: dualColumnLayout,
   },
   /** 菜单风格预览图 */
   menuStyles: {
@@ -56,6 +56,6 @@ export const configImages = {
     /** 暗色风格 */
     dark: darkStyle,
     /** 亮色风格 */
-    light: lightStyle
-  }
-}
+    light: lightStyle,
+  },
+};
diff --git a/frontend/new-web/src/config/index.ts b/frontend/new-web/src/config/index.ts
index daa623a9..8761850d 100644
--- a/frontend/new-web/src/config/index.ts
+++ b/frontend/new-web/src/config/index.ts
@@ -26,110 +26,114 @@
  * - headerBar: 顶部栏功能配置
  *
  * @module config
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
-import { MenuThemeEnum, MenuTypeEnum, SystemThemeEnum } from '@/enums/appEnum'
-import { SystemConfig } from '@/types/config'
-import { configImages } from './assets/images'
-import fastEnterConfig from './modules/fastEnter'
-import { headerBarConfig } from './modules/headerBar'
+import { MenuThemeEnum, MenuTypeEnum, SystemThemeEnum } from "@/enums/appEnum";
+import { SystemConfig } from "@/types/config";
+import { configImages } from "./assets/images";
+import fastEnterConfig from "./modules/fastEnter";
+import { headerBarConfig } from "./modules/headerBar";
 
 const appConfig: SystemConfig = {
   // 系统信息
   systemInfo: {
-    name: 'Art Design Pro' // 系统名称
+    name: "FastapiAdmin", // 系统名称
   },
   // 系统主题
   systemThemeStyles: {
-    [SystemThemeEnum.LIGHT]: { className: '' },
-    [SystemThemeEnum.DARK]: { className: SystemThemeEnum.DARK }
+    [SystemThemeEnum.LIGHT]: { className: "" },
+    [SystemThemeEnum.DARK]: { className: SystemThemeEnum.DARK },
   },
   // 系统主题列表
   settingThemeList: [
     {
-      name: 'Light',
+      name: "Light",
       theme: SystemThemeEnum.LIGHT,
-      color: ['#fff', '#fff'],
-      leftLineColor: '#EDEEF0',
-      rightLineColor: '#EDEEF0',
-      img: configImages.themeStyles.light
+      color: ["#fff", "#fff"],
+      leftLineColor: "#EDEEF0",
+      rightLineColor: "#EDEEF0",
+      img: configImages.themeStyles.light,
     },
     {
-      name: 'Dark',
+      name: "Dark",
       theme: SystemThemeEnum.DARK,
-      color: ['#22252A'],
-      leftLineColor: '#3F4257',
-      rightLineColor: '#3F4257',
-      img: configImages.themeStyles.dark
+      color: ["#22252A"],
+      leftLineColor: "#3F4257",
+      rightLineColor: "#3F4257",
+      img: configImages.themeStyles.dark,
     },
     {
-      name: 'System',
+      name: "System",
       theme: SystemThemeEnum.AUTO,
-      color: ['#fff', '#22252A'],
-      leftLineColor: '#EDEEF0',
-      rightLineColor: '#3F4257',
-      img: configImages.themeStyles.system
-    }
+      color: ["#fff", "#22252A"],
+      leftLineColor: "#EDEEF0",
+      rightLineColor: "#3F4257",
+      img: configImages.themeStyles.system,
+    },
   ],
   // 菜单布局列表
   menuLayoutList: [
-    { name: 'Left', value: MenuTypeEnum.LEFT, img: configImages.menuLayouts.vertical },
-    { name: 'Top', value: MenuTypeEnum.TOP, img: configImages.menuLayouts.horizontal },
-    { name: 'Mixed', value: MenuTypeEnum.TOP_LEFT, img: configImages.menuLayouts.mixed },
-    { name: 'Dual Column', value: MenuTypeEnum.DUAL_MENU, img: configImages.menuLayouts.dualColumn }
+    { name: "Left", value: MenuTypeEnum.LEFT, img: configImages.menuLayouts.vertical },
+    { name: "Top", value: MenuTypeEnum.TOP, img: configImages.menuLayouts.horizontal },
+    { name: "Mixed", value: MenuTypeEnum.TOP_LEFT, img: configImages.menuLayouts.mixed },
+    {
+      name: "Dual Column",
+      value: MenuTypeEnum.DUAL_MENU,
+      img: configImages.menuLayouts.dualColumn,
+    },
   ],
   // 菜单主题列表
   themeList: [
     {
       theme: MenuThemeEnum.DESIGN,
-      background: '#FFFFFF',
-      systemNameColor: 'var(--art-gray-800)',
-      iconColor: '#6B6B6B',
-      textColor: '#29343D',
-      img: configImages.menuStyles.design
+      background: "#FFFFFF",
+      systemNameColor: "var(--art-gray-800)",
+      iconColor: "#6B6B6B",
+      textColor: "#29343D",
+      img: configImages.menuStyles.design,
     },
     {
       theme: MenuThemeEnum.DARK,
-      background: '#191A23',
-      systemNameColor: '#D9DADB',
-      iconColor: '#BABBBD',
-      textColor: '#BABBBD',
-      img: configImages.menuStyles.dark
+      background: "#191A23",
+      systemNameColor: "#D9DADB",
+      iconColor: "#BABBBD",
+      textColor: "#BABBBD",
+      img: configImages.menuStyles.dark,
     },
     {
       theme: MenuThemeEnum.LIGHT,
-      background: '#ffffff',
-      systemNameColor: 'var(--art-gray-800)',
-      iconColor: '#6B6B6B',
-      textColor: '#29343D',
-      img: configImages.menuStyles.light
-    }
+      background: "#ffffff",
+      systemNameColor: "var(--art-gray-800)",
+      iconColor: "#6B6B6B",
+      textColor: "#29343D",
+      img: configImages.menuStyles.light,
+    },
   ],
   // 暗黑模式菜单样式
   darkMenuStyles: [
     {
       theme: MenuThemeEnum.DARK,
-      background: 'var(--default-box-color)',
-      systemNameColor: '#DDDDDD',
-      iconColor: '#BABBBD',
-      textColor: 'rgba(#FFFFFF, 0.7)'
-    }
+      background: "var(--default-box-color)",
+      systemNameColor: "#DDDDDD",
+      iconColor: "#BABBBD",
+      textColor: "rgba(#FFFFFF, 0.7)",
+    },
   ],
   // 系统主色
   systemMainColor: [
-    '#5D87FF',
-    '#B48DF3',
-    '#1D84FF',
-    '#60C041',
-    '#38C0FC',
-    '#F9901F',
-    '#FF80C8'
+    "#5D87FF",
+    "#B48DF3",
+    "#1D84FF",
+    "#60C041",
+    "#38C0FC",
+    "#F9901F",
+    "#FF80C8",
   ] as const,
   // 快速入口配置
   fastEnter: fastEnterConfig,
   // 顶部栏功能配置
-  headerBar: headerBarConfig
-}
+  headerBar: headerBarConfig,
+};
 
-export default Object.freeze(appConfig)
+export default Object.freeze(appConfig);
diff --git a/frontend/new-web/src/config/modules/component.ts b/frontend/new-web/src/config/modules/component.ts
index bc709e0e..ec1e4fa4 100644
--- a/frontend/new-web/src/config/modules/component.ts
+++ b/frontend/new-web/src/config/modules/component.ts
@@ -12,79 +12,79 @@
  * - 配置查询 - 提供工具函数快速查询组件配置
  *
  * @module config/component
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
-import { defineAsyncComponent } from 'vue'
+import { defineAsyncComponent } from "vue";
 
 /**
  * 全局组件配置列表
  */
 export const globalComponentsConfig: GlobalComponentConfig[] = [
   {
-    name: '设置面板',
-    key: 'settings-panel',
+    name: "设置面板",
+    key: "settings-panel",
     component: defineAsyncComponent(
-      () => import('@/components/core/layouts/art-settings-panel/index.vue')
+      () => import("@/components/core/layouts/art-settings-panel/index.vue")
     ),
-    enabled: true
+    enabled: true,
   },
   {
-    name: '全局搜索',
-    key: 'global-search',
+    name: "全局搜索",
+    key: "global-search",
     component: defineAsyncComponent(
-      () => import('@/components/core/layouts/art-global-search/index.vue')
+      () => import("@/components/core/layouts/art-global-search/index.vue")
     ),
-    enabled: true
+    enabled: true,
   },
   {
-    name: '锁屏',
-    key: 'screen-lock',
+    name: "锁屏",
+    key: "screen-lock",
     component: defineAsyncComponent(
-      () => import('@/components/core/layouts/art-screen-lock/index.vue')
+      () => import("@/components/core/layouts/art-screen-lock/index.vue")
     ),
-    enabled: true
+    enabled: true,
   },
   {
-    name: '聊天窗口',
-    key: 'chat-window',
+    name: "聊天窗口",
+    key: "chat-window",
     component: defineAsyncComponent(
-      () => import('@/components/core/layouts/art-chat-window/index.vue')
+      () => import("@/components/core/layouts/art-chat-window/index.vue")
     ),
-    enabled: true
+    enabled: true,
   },
   {
-    name: '礼花效果',
-    key: 'fireworks-effect',
+    name: "礼花效果",
+    key: "fireworks-effect",
     component: defineAsyncComponent(
-      () => import('@/components/core/layouts/art-fireworks-effect/index.vue')
+      () => import("@/components/core/layouts/art-fireworks-effect/index.vue")
     ),
-    enabled: true
+    enabled: true,
   },
   {
-    name: '水印效果',
-    key: 'watermark',
+    name: "水印效果",
+    key: "watermark",
     component: defineAsyncComponent(
-      () => import('@/components/core/others/art-watermark/index.vue')
+      () => import("@/components/core/others/art-watermark/index.vue")
     ),
-    enabled: true
-  }
-]
+    enabled: true,
+  },
+];
 
 /**
  * 全局组件配置接口
  */
 export interface GlobalComponentConfig {
   /** 组件名称 */
-  name: string
+  name: string;
   /** 组件标识 */
-  key: string
+  key: string;
   /** 组件 */
-  component: any
+  component: any;
   /** 是否启用 */
-  enabled?: boolean
+  enabled?: boolean;
   /** 组件描述 */
-  description?: string
+  description?: string;
 }
 
 /**
@@ -92,8 +92,8 @@ export interface GlobalComponentConfig {
  * @returns 已启用的组件配置列表
  */
 export const getEnabledGlobalComponents = () => {
-  return globalComponentsConfig.filter((config) => config.enabled !== false)
-}
+  return globalComponentsConfig.filter((config) => config.enabled !== false);
+};
 
 /**
  * 根据 key 获取组件配置
@@ -101,5 +101,5 @@ export const getEnabledGlobalComponents = () => {
  * @returns 组件配置对象
  */
 export const getGlobalComponentByKey = (key: string) => {
-  return globalComponentsConfig.find((config) => config.key === key)
-}
+  return globalComponentsConfig.find((config) => config.key === key);
+};
diff --git a/frontend/new-web/src/config/modules/fastEnter.ts b/frontend/new-web/src/config/modules/fastEnter.ts
index 6b9740cb..a44bf924 100644
--- a/frontend/new-web/src/config/modules/fastEnter.ts
+++ b/frontend/new-web/src/config/modules/fastEnter.ts
@@ -2,8 +2,8 @@
  * 快速入口配置
  * 包含：应用列表、快速链接等配置
  */
-import { WEB_LINKS } from '@/utils/constants'
-import type { FastEnterConfig } from '@/types/config'
+import { WEB_LINKS } from "@/utils/constants";
+import type { FastEnterConfig } from "@/types/config";
 
 const fastEnterConfig: FastEnterConfig = {
   // 显示条件（屏幕宽度）
@@ -11,117 +11,117 @@ const fastEnterConfig: FastEnterConfig = {
   // 应用列表
   applications: [
     {
-      name: '工作台',
-      description: '系统概览与数据统计',
-      icon: 'ri:pie-chart-line',
-      iconColor: '#377dff',
+      name: "工作台",
+      description: "系统概览与数据统计",
+      icon: "ri:pie-chart-line",
+      iconColor: "#377dff",
       enabled: true,
       order: 1,
-      routeName: 'Console'
+      routeName: "DashboardDemoConsole",
     },
     {
-      name: '分析页',
-      description: '数据分析与可视化',
-      icon: 'ri:game-line',
-      iconColor: '#ff3b30',
+      name: "分析页",
+      description: "数据分析与可视化",
+      icon: "ri:game-line",
+      iconColor: "#ff3b30",
       enabled: true,
       order: 2,
-      routeName: 'Analysis'
+      routeName: "DashboardDemoAnalysis",
     },
     {
-      name: '礼花效果',
-      description: '动画特效展示',
-      icon: 'ri:loader-line',
-      iconColor: '#7A7FFF',
+      name: "礼花效果",
+      description: "动画特效展示",
+      icon: "ri:loader-line",
+      iconColor: "#7A7FFF",
       enabled: true,
       order: 3,
-      routeName: 'Fireworks'
+      routeName: "Fireworks",
     },
     {
-      name: '聊天',
-      description: '即时通讯功能',
-      icon: 'ri:user-line',
-      iconColor: '#13DEB9',
+      name: "聊天",
+      description: "即时通讯功能",
+      icon: "ri:user-line",
+      iconColor: "#13DEB9",
       enabled: true,
       order: 4,
-      routeName: 'Chat'
+      routeName: "Chat",
     },
     {
-      name: '官方文档',
-      description: '使用指南与开发文档',
-      icon: 'ri:bill-line',
-      iconColor: '#ffb100',
+      name: "官方文档",
+      description: "使用指南与开发文档",
+      icon: "ri:bill-line",
+      iconColor: "#ffb100",
       enabled: true,
       order: 5,
-      link: WEB_LINKS.DOCS
+      link: WEB_LINKS.DOCS,
     },
     {
-      name: '技术支持',
-      description: '技术支持与问题反馈',
-      icon: 'ri:user-location-line',
-      iconColor: '#ff6b6b',
+      name: "技术支持",
+      description: "技术支持与问题反馈",
+      icon: "ri:user-location-line",
+      iconColor: "#ff6b6b",
       enabled: true,
       order: 6,
-      link: WEB_LINKS.COMMUNITY
+      link: WEB_LINKS.COMMUNITY,
     },
     {
-      name: '更新日志',
-      description: '版本更新与变更记录',
-      icon: 'ri:gamepad-line',
-      iconColor: '#38C0FC',
+      name: "更新日志",
+      description: "版本更新与变更记录",
+      icon: "ri:gamepad-line",
+      iconColor: "#38C0FC",
       enabled: true,
       order: 7,
-      routeName: 'ChangeLog'
+      routeName: "ChangeLog",
     },
     {
-      name: '哔哩哔哩',
-      description: '技术分享与交流',
-      icon: 'ri:bilibili-line',
-      iconColor: '#FB7299',
+      name: "哔哩哔哩",
+      description: "技术分享与交流",
+      icon: "ri:bilibili-line",
+      iconColor: "#FB7299",
       enabled: true,
       order: 8,
-      link: WEB_LINKS.BILIBILI
-    }
+      link: WEB_LINKS.BILIBILI,
+    },
   ],
   // 快速链接
   quickLinks: [
     {
-      name: '登录',
+      name: "登录",
       enabled: true,
       order: 1,
-      routeName: 'Login'
+      routeName: "Login",
     },
     {
-      name: '注册',
+      name: "注册",
       enabled: true,
       order: 2,
-      routeName: 'Register'
+      routeName: "Login",
     },
     {
-      name: '忘记密码',
+      name: "忘记密码",
       enabled: true,
       order: 3,
-      routeName: 'ForgetPassword'
+      routeName: "Login",
     },
     {
-      name: '定价',
+      name: "定价",
       enabled: true,
       order: 4,
-      routeName: 'Pricing'
+      routeName: "Pricing",
     },
     {
-      name: '个人中心',
+      name: "个人中心",
       enabled: true,
       order: 5,
-      routeName: 'UserCenter'
+      routeName: "UserCenter",
     },
     {
-      name: '留言管理',
+      name: "留言管理",
       enabled: true,
       order: 6,
-      routeName: 'ArticleComment'
-    }
-  ]
-}
+      routeName: "ArticleComment",
+    },
+  ],
+};
 
-export default Object.freeze(fastEnterConfig)
+export default Object.freeze(fastEnterConfig);
diff --git a/frontend/new-web/src/config/modules/festival.ts b/frontend/new-web/src/config/modules/festival.ts
index 39cd790f..4bebc975 100644
--- a/frontend/new-web/src/config/modules/festival.ts
+++ b/frontend/new-web/src/config/modules/festival.ts
@@ -20,10 +20,10 @@
  * - 每个用户每天只会播放一次烟花效果
  *
  * @module config/modules/festival
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
-import { FestivalConfig } from '@/types/config'
+import { FestivalConfig } from "@/types/config";
 
 // 导入烟花图片（根据需要取消注释）
 // import sd from '@imgs/ceremony/sd.png'
@@ -48,4 +48,4 @@ export const festivalConfigList: FestivalConfig[] = [
   //   count: 3 // 可选，不设置则使用默认值 3 次
   //   scrollText: 'Merry Christmas！Art Design Pro 祝您圣诞快乐，愿节日的欢乐与祝福如雪花般纷至沓来！',
   // }
-]
+];
diff --git a/frontend/new-web/src/config/modules/headerBar.ts b/frontend/new-web/src/config/modules/headerBar.ts
index a420e82c..74c3e4b2 100644
--- a/frontend/new-web/src/config/modules/headerBar.ts
+++ b/frontend/new-web/src/config/modules/headerBar.ts
@@ -5,10 +5,10 @@
  * 通过修改此配置文件可以快速启用或禁用顶部栏的功能按钮。
  *
  * @module config/headerBar
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
-import { HeaderBarFeatureConfig } from '@/types'
+import { HeaderBarFeatureConfig } from "@/types";
 
 /**
  * 顶部栏功能配置对象
@@ -16,48 +16,48 @@ import { HeaderBarFeatureConfig } from '@/types'
 export const headerBarConfig: HeaderBarFeatureConfig = {
   menuButton: {
     enabled: true,
-    description: '控制左侧菜单的展开/收起按钮'
+    description: "控制左侧菜单的展开/收起按钮",
   },
   refreshButton: {
     enabled: true,
-    description: '页面刷新按钮'
+    description: "页面刷新按钮",
   },
   fastEnter: {
     enabled: true,
-    description: '快速入口功能，提供常用应用和链接的快速访问'
+    description: "快速入口功能，提供常用应用和链接的快速访问",
   },
   breadcrumb: {
     enabled: true,
-    description: '面包屑导航，显示当前页面路径'
+    description: "面包屑导航，显示当前页面路径",
   },
   globalSearch: {
     enabled: true,
-    description: '全局搜索功能，支持快捷键 Ctrl+K 或 Cmd+K'
+    description: "全局搜索功能，支持快捷键 Ctrl+K 或 Cmd+K",
   },
   fullscreen: {
     enabled: true,
-    description: '全屏切换功能'
+    description: "全屏切换功能",
   },
   notification: {
     enabled: true,
-    description: '通知中心，显示系统通知和消息'
+    description: "通知中心，显示系统通知和消息",
   },
   chat: {
     enabled: true,
-    description: '聊天功能，提供实时沟通'
+    description: "聊天功能，提供实时沟通",
   },
   language: {
     enabled: true,
-    description: '多语言切换功能'
+    description: "多语言切换功能",
   },
   settings: {
     enabled: true,
-    description: '系统设置面板'
+    description: "系统设置面板",
   },
   themeToggle: {
     enabled: true,
-    description: '主题切换功能（明暗主题）'
-  }
-}
+    description: "主题切换功能（明暗主题）",
+  },
+};
 
-export default headerBarConfig
+export default headerBarConfig;
diff --git a/frontend/new-web/src/config/setting.ts b/frontend/new-web/src/config/setting.ts
index 94f2d2c5..59385126 100644
--- a/frontend/new-web/src/config/setting.ts
+++ b/frontend/new-web/src/config/setting.ts
@@ -20,13 +20,71 @@
  * 3. 枚举类型的值需要与 src/enums/appEnum.ts 中的定义保持一致
  */
 
-import AppConfig from '@/config'
-import { SystemThemeEnum, MenuThemeEnum, MenuTypeEnum, ContainerWidthEnum } from '@/enums/appEnum'
+import AppConfig from "@/config";
+import { SystemThemeEnum, MenuThemeEnum, MenuTypeEnum, ContainerWidthEnum } from "@/enums/appEnum";
+import { LayoutMode, ComponentSize, SidebarColor, ThemeMode, LanguageEnum } from "@/enums";
+
+const env = import.meta.env;
+const { pkg } = __APP_INFO__;
+
+// 检查用户的操作系统是否使用深色模式
+const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
 
 /**
  * 系统设置默认值配置
  */
 export const SETTING_DEFAULT_CONFIG = {
+  /** 项目名称 */
+  name: pkg.name as string,
+  /** 系统标题 */
+  title: (env.VITE_APP_TITLE as string) || pkg.name,
+  /** 系统版本 */
+  version: pkg.version as string,
+  /** 是否显示设置按钮 */
+  showSettings: true,
+  /** 是否显示菜单搜索 */
+  showMenuSearch: true,
+  /** 是否显示全屏按钮 */
+  showFullscreen: true,
+  /** 是否显示尺寸选择 */
+  showSizeSelect: true,
+  /** 是否显示语言选择 */
+  showLangSelect: true,
+  /** 是否显示通知 */
+  showNotification: true,
+  /** 是否显示标签视图 */
+  showTagsView: true,
+  /** 是否显示应用Logo */
+  showAppLogo: true,
+  /** 布局方式 */
+  layout: LayoutMode.LEFT,
+  /** 主题模式 */
+  theme: prefersDark ? ThemeMode.DARK : ThemeMode.LIGHT,
+  /** 组件大小 */
+  size: ComponentSize.DEFAULT,
+  /** 语言 */
+  language: LanguageEnum.ZH_CN,
+  /** 主题颜色 */
+  themeColor: "#4080FF",
+  /** 是否显示水印 */
+  showWatermark: false,
+  /** 水印内容 */
+  watermarkContent: pkg.name,
+  /** 侧边栏配色方案 */
+  sidebarColorScheme: SidebarColor.CLASSIC_BLUE,
+  /** 项目引导可见性 */
+  guideVisible: false,
+  /** 是否启动引导 */
+  showGuide: true,
+  /** 是否开启AI助手 */
+  aiEnabled: false,
+  /** 是否开启灰色模式 */
+  grayMode: false,
+  /** 页面切换动画 */
+  pageSwitchingAnimation: "fade-slide",
+
+  // === 新版本原有字段 ===
+
   /** 菜单类型 */
   menuType: MenuTypeEnum.LEFT,
   /** 菜单展开宽度 */
@@ -61,7 +119,7 @@ export const SETTING_DEFAULT_CONFIG = {
   showSettingGuide: true,
   /** 是否显示节日文本 */
   showFestivalText: false,
-  /** 是否显示水印 */
+  /** 是否显示水印（新版本字段） */
   watermarkVisible: false,
   /** 是否自动关闭 */
   autoClose: false,
@@ -76,23 +134,26 @@ export const SETTING_DEFAULT_CONFIG = {
   /** 边框模式 */
   boxBorderMode: true,
   /** 页面过渡效果 */
-  pageTransition: 'slide-left',
+  pageTransition: "slide-left",
   /** 标签页样式 */
-  tabStyle: 'tab-default',
+  tabStyle: "tab-default",
   /** 自定义圆角 */
-  customRadius: '0.75',
+  customRadius: "0.75",
   /** 容器宽度 */
   containerWidth: ContainerWidthEnum.FULL,
   /** 节日日期 */
-  festivalDate: ''
-}
+  festivalDate: "",
+};
+
+/** 与 Store / App 中使用的默认设置别名（同 SETTING_DEFAULT_CONFIG） */
+export const defaultSettings = SETTING_DEFAULT_CONFIG;
 
 /**
  * 获取设置默认值
  * @returns 设置默认值对象
  */
 export function getSettingDefaults() {
-  return { ...SETTING_DEFAULT_CONFIG }
+  return { ...SETTING_DEFAULT_CONFIG };
 }
 
 /**
@@ -100,10 +161,66 @@ export function getSettingDefaults() {
  * @param currentSettings 当前设置对象
  */
 export function resetToDefaults(currentSettings: Record<string, any>) {
-  const defaults = getSettingDefaults()
+  const defaults = getSettingDefaults();
   Object.keys(defaults).forEach((key) => {
     if (key in currentSettings) {
-      currentSettings[key] = defaults[key as keyof typeof defaults]
+      currentSettings[key] = defaults[key as keyof typeof defaults];
     }
-  })
+  });
 }
+
+// 主题色预设 - 现代化配色方案
+// 注意：修改默认主题色时，需要同步修改 src/styles/variables.scss 中的 primary.base 值
+export const themeColorPresets = [
+  // === 精选常用颜色 - 多样化色系 ===
+  "#4080FF", // Arco Design 蓝 - 现代感强
+  "#52C41A", // 成功绿 - 活力清新
+  "#722ED1", // 优雅紫 - 高端大气
+  "#FA8C16", // 活力橙 - 温暖友好
+  "#13C2C2", // 青色 - 科技感
+  "#F5222D", // 警示红 - 醒目强烈
+  "#EB2F96", // 品红 - 时尚个性
+  "#EC4899", // 玫瑰粉 - 浪漫温馨
+  "#10B981", // 翠绿色 - 清新自然
+
+  // === 蓝色系 - 科技与专业 ===
+  "#409EFF", // Element Plus 蓝 - 清新自然
+  "#2F54EB", // 深蓝 - 稳重专业
+  "#1E40AF", // 深蓝色 - 商务精英
+  "#1D4ED8", // 皇家蓝 - 高端商务
+
+  // === 绿色系 - 自然与活力 ===
+  "#10B981", // 翠绿色 - 清新自然
+  "#059669", // 森林绿 - 生态环保
+  "#16A34A", // 草绿色 - 健康活力
+  "#15803D", // 深绿色 - 稳重大气
+
+  // === 紫色系 - 创意与优雅 ===
+  "#7C3AED", // 紫罗兰 - 创意无限
+  "#8B5CF6", // 浅紫色 - 时尚现代
+  "#6D28D9", // 深紫色 - 神秘高端
+  "#5B21B6", // 皇家紫 - 王者风范
+
+  // === 橙色系 - 温暖与活力 ===
+  "#F97316", // 火橙色 - 热情奔放
+  "#EA580C", // 深橙色 - 阳光活力
+  "#DC2626", // 珊瑚红 - 温暖亲切
+
+  // === 青色系 - 科技与清新 ===
+  "#0891B2", // 天蓝色 - 清新自然
+  "#0E7490", // 深青色 - 专业科技
+  "#06B6D4", // 青蓝色 - 海洋清新
+
+  // === 红色系 - 激情与警示 ===
+  "#DC2626", // 猩红色 - 激情四射
+  "#B91C1C", // 深红色 - 庄重严肃
+
+  // === 粉色系 - 温柔与时尚 ===
+  "#EC4899", // 玫瑰粉 - 浪漫温馨
+  "#F472B6", // 浅粉色 - 柔美可爱
+
+  // === 灰色系 - 简约与现代 ===
+  "#6B7280", // 经典灰 - 简约现代
+  "#4B5563", // 深灰色 - 商务专业
+  "#374151", // 石板灰 - 高端商务
+];
diff --git a/frontend/new-web/src/constants/index.ts b/frontend/new-web/src/constants/index.ts
new file mode 100644
index 00000000..d3a2dd87
--- /dev/null
+++ b/frontend/new-web/src/constants/index.ts
@@ -0,0 +1,2 @@
+// 🔗 导出所有存储键常量
+export * from "./storage-keys";
diff --git a/frontend/new-web/src/constants/storage-keys.ts b/frontend/new-web/src/constants/storage-keys.ts
new file mode 100644
index 00000000..ac388ffe
--- /dev/null
+++ b/frontend/new-web/src/constants/storage-keys.ts
@@ -0,0 +1,78 @@
+/**
+ * 存储键名常量
+ *
+ * @description
+ * 统一管理所有 localStorage/sessionStorage 的键名
+ * 命名规则：{APP_PREFIX}:{分类}:{具体名称}
+ */
+
+// 🔐 用户认证相关
+export const ACCESS_TOKEN_KEY = "access_token";
+export const REFRESH_TOKEN_KEY = "refresh_token";
+export const REMEMBER_ME_KEY = "remember_me";
+
+// 📊 数据缓存相关
+export const DICT_CACHE_KEY = "dict_cache";
+
+// 🎨 系统设置相关
+export const SHOW_TAGS_VIEW_KEY = "showTagsView";
+export const SHOW_APP_LOGO_KEY = "showAppLogo";
+export const SHOW_WATERMARK_KEY = "showWatermark";
+export const SHOW_SETTINGS_KEY = "showSettings";
+export const SHOW_MENU_SEARCH_KEY = "showMenuSearch";
+export const SHOW_FULLSCREEN_KEY = "showFullscreen";
+export const SHOW_SIZE_SELECT_KEY = "showSizeSelect";
+export const SHOW_LANG_SELECT_KEY = "showLangSelect";
+export const SHOW_NOTIFICATION_KEY = "showNotification";
+export const SHOW_GUIDE_KEY = "showGuide"; // 引导功能开关
+export const LAYOUT_KEY = "layout";
+export const SIDEBAR_COLOR_SCHEME_KEY = "sidebarColorScheme";
+export const THEME_KEY = "theme";
+export const THEME_COLOR_KEY = "themeColor";
+export const GRAY_MODE_KEY = "grayMode";
+export const AI_ENABLED_KEY = "aiEnabled";
+export const PAGE_SWITCHING_ANIMATION_KEY = "pageSwitchingAnimation";
+
+export const ROLE_ROOT = "ADMIN"; // 超级管理员角色
+
+// 🎯 功能分组的键映射对象
+
+// 认证相关键集合
+export const AUTH_KEYS = {
+  ACCESS_TOKEN: ACCESS_TOKEN_KEY,
+  REFRESH_TOKEN: REFRESH_TOKEN_KEY,
+  REMEMBER_ME: REMEMBER_ME_KEY,
+} as const;
+
+// 缓存相关键集合
+export const CACHE_KEYS = {
+  DICT_CACHE: DICT_CACHE_KEY,
+} as const;
+
+// 设置相关键集合
+export const SETTINGS_KEYS = {
+  SHOW_TAGS_VIEW: SHOW_TAGS_VIEW_KEY,
+  SHOW_APP_LOGO: SHOW_APP_LOGO_KEY,
+  SHOW_WATERMARK: SHOW_WATERMARK_KEY,
+  SHOW_SETTINGS: SHOW_SETTINGS_KEY,
+  SHOW_MENU_SEARCH: SHOW_MENU_SEARCH_KEY,
+  SHOW_FULLSCREEN: SHOW_FULLSCREEN_KEY,
+  SHOW_SIZE_SELECT: SHOW_SIZE_SELECT_KEY,
+  SHOW_LANG_SELECT: SHOW_LANG_SELECT_KEY,
+  SHOW_NOTIFICATION: SHOW_NOTIFICATION_KEY,
+  SHOW_GUIDE: SHOW_GUIDE_KEY,
+  SIDEBAR_COLOR_SCHEME: SIDEBAR_COLOR_SCHEME_KEY,
+  LAYOUT: LAYOUT_KEY,
+  THEME_COLOR: THEME_COLOR_KEY,
+  THEME: THEME_KEY,
+  GRAY_MODE: GRAY_MODE_KEY,
+  AI_ENABLED: AI_ENABLED_KEY,
+  PAGE_SWITCHING_ANIMATION: PAGE_SWITCHING_ANIMATION_KEY,
+} as const;
+
+// 📦 所有存储键的统一集合
+export const ALL_STORAGE_KEYS = {
+  ...AUTH_KEYS,
+  ...CACHE_KEYS,
+  ...SETTINGS_KEYS,
+} as const;
diff --git a/frontend/new-web/src/directives/business/highlight.ts b/frontend/new-web/src/directives/business/highlight.ts
index 07b6c1dd..4289f8aa 100644
--- a/frontend/new-web/src/directives/business/highlight.ts
+++ b/frontend/new-web/src/directives/business/highlight.ts
@@ -38,213 +38,213 @@
  * - 智能监听：只在有新代码块时才触发处理
  *
  * @module directives/highlight
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
-import { App, Directive } from 'vue'
-import hljs from 'highlight.js'
+import { App, Directive } from "vue";
+import hljs from "highlight.js";
 
-export type HighlightDirective = Directive<HTMLElement>
+export type HighlightDirective = Directive<HTMLElement>;
 
 // 高亮代码
 function highlightCode(block: HTMLElement) {
-  hljs.highlightElement(block)
+  hljs.highlightElement(block);
 }
 
 // 插入行号
 function insertLineNumbers(block: HTMLElement) {
-  const lines = block.innerHTML.split('\n')
+  const lines = block.innerHTML.split("\n");
   const numberedLines = lines
     .map((line, index) => {
-      return `<span class="line-number">${index + 1}</span> ${line}`
+      return `<span class="line-number">${index + 1}</span> ${line}`;
     })
-    .join('\n')
-  block.innerHTML = numberedLines
+    .join("\n");
+  block.innerHTML = numberedLines;
 }
 
 // 添加复制按钮：调整 DOM 结构，将代码部分包裹在 .code-wrapper 内
 function addCopyButton(block: HTMLElement) {
-  const copyButton = document.createElement('i')
-  copyButton.className = 'copy-button'
+  const copyButton = document.createElement("i");
+  copyButton.className = "copy-button";
   copyButton.innerHTML =
-    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1 1 0 0 1 3 21l.003-14c0-.552.45-1 1.006-1zM5.002 8L5 20h10V8zM9 6h8v10h2V4H9z"/></svg>'
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1 1 0 0 1 3 21l.003-14c0-.552.45-1 1.006-1zM5.002 8L5 20h10V8zM9 6h8v10h2V4H9z"/></svg>';
   copyButton.onclick = () => {
     // 过滤掉行号，只复制代码内容
-    const codeContent = block.innerText.replace(/^\d+\s+/gm, '')
+    const codeContent = block.innerText.replace(/^\d+\s+/gm, "");
     navigator.clipboard.writeText(codeContent).then(() => {
-      ElMessage.success('复制成功')
-    })
-  }
+      ElMessage.success("复制成功");
+    });
+  };
 
-  const preElement = block.parentElement
+  const preElement = block.parentElement;
   if (preElement) {
-    let codeWrapper: HTMLElement
+    let codeWrapper: HTMLElement;
     // 如果代码块还没有被包裹，则创建包裹容器
-    if (!block.parentElement.classList.contains('code-wrapper')) {
-      codeWrapper = document.createElement('div')
-      codeWrapper.className = 'code-wrapper'
-      preElement.replaceChild(codeWrapper, block)
-      codeWrapper.appendChild(block)
+    if (!block.parentElement.classList.contains("code-wrapper")) {
+      codeWrapper = document.createElement("div");
+      codeWrapper.className = "code-wrapper";
+      preElement.replaceChild(codeWrapper, block);
+      codeWrapper.appendChild(block);
     } else {
-      codeWrapper = block.parentElement
+      codeWrapper = block.parentElement;
     }
     // 将复制按钮添加到 pre 元素（而非 codeWrapper 内），这样它不会随滚动条滚动
-    preElement.appendChild(copyButton)
+    preElement.appendChild(copyButton);
   }
 }
 
 // 检查代码块是否已经被处理过
 function isBlockProcessed(block: HTMLElement): boolean {
   return (
-    block.hasAttribute('data-highlighted') ||
-    !!block.querySelector('.line-number') ||
-    !!block.parentElement?.querySelector('.copy-button')
-  )
+    block.hasAttribute("data-highlighted") ||
+    !!block.querySelector(".line-number") ||
+    !!block.parentElement?.querySelector(".copy-button")
+  );
 }
 
 // 标记代码块为已处理
 function markBlockAsProcessed(block: HTMLElement) {
-  block.setAttribute('data-highlighted', 'true')
+  block.setAttribute("data-highlighted", "true");
 }
 
 // 处理单个代码块
 function processBlock(block: HTMLElement) {
   if (isBlockProcessed(block)) {
-    return
+    return;
   }
 
   try {
-    highlightCode(block)
-    insertLineNumbers(block)
-    addCopyButton(block)
-    markBlockAsProcessed(block)
+    highlightCode(block);
+    insertLineNumbers(block);
+    addCopyButton(block);
+    markBlockAsProcessed(block);
   } catch (error) {
-    console.warn('处理代码块时出错:', error)
+    console.warn("处理代码块时出错:", error);
   }
 }
 
 // 查找并处理所有代码块
 function processAllCodeBlocks(el: HTMLElement) {
-  const blocks = Array.from(el.querySelectorAll<HTMLElement>('pre code'))
-  const unprocessedBlocks = blocks.filter((block) => !isBlockProcessed(block))
+  const blocks = Array.from(el.querySelectorAll<HTMLElement>("pre code"));
+  const unprocessedBlocks = blocks.filter((block) => !isBlockProcessed(block));
 
   if (unprocessedBlocks.length === 0) {
-    return
+    return;
   }
 
   if (unprocessedBlocks.length <= 10) {
     // 如果代码块数量少于等于10，直接处理所有代码块
-    unprocessedBlocks.forEach((block) => processBlock(block))
+    unprocessedBlocks.forEach((block) => processBlock(block));
   } else {
     // 定义每次处理的代码块数
-    const batchSize = 10
-    let currentIndex = 0
+    const batchSize = 10;
+    let currentIndex = 0;
 
     const processBatch = () => {
-      const batch = unprocessedBlocks.slice(currentIndex, currentIndex + batchSize)
+      const batch = unprocessedBlocks.slice(currentIndex, currentIndex + batchSize);
 
       batch.forEach((block) => {
-        processBlock(block)
-      })
+        processBlock(block);
+      });
 
       // 更新索引并继续处理下一批
-      currentIndex += batchSize
+      currentIndex += batchSize;
       if (currentIndex < unprocessedBlocks.length) {
         // 使用 requestAnimationFrame 确保下一帧再处理
-        requestAnimationFrame(processBatch)
+        requestAnimationFrame(processBatch);
       }
-    }
+    };
 
     // 开始处理第一批代码块
-    processBatch()
+    processBatch();
   }
 }
 
 // 重试处理函数
 function retryProcessing(el: HTMLElement, maxRetries: number = 3, delay: number = 200) {
-  let retryCount = 0
+  let retryCount = 0;
 
   const tryProcess = () => {
-    processAllCodeBlocks(el)
+    processAllCodeBlocks(el);
 
     // 检查是否还有未处理的代码块
-    const remainingBlocks = Array.from(el.querySelectorAll<HTMLElement>('pre code')).filter(
+    const remainingBlocks = Array.from(el.querySelectorAll<HTMLElement>("pre code")).filter(
       (block) => !isBlockProcessed(block)
-    )
+    );
 
     if (remainingBlocks.length > 0 && retryCount < maxRetries) {
-      retryCount++
-      setTimeout(tryProcess, delay * retryCount) // 递增延迟
+      retryCount++;
+      setTimeout(tryProcess, delay * retryCount); // 递增延迟
     }
-  }
+  };
 
-  tryProcess()
+  tryProcess();
 }
 
 // 代码高亮、插入行号、复制按钮
 const highlightDirective: HighlightDirective = {
   mounted(el: HTMLElement) {
     // 立即尝试处理一次
-    processAllCodeBlocks(el)
+    processAllCodeBlocks(el);
 
     // 延迟处理，确保 v-html 内容已经渲染
     setTimeout(() => {
-      retryProcessing(el)
-    }, 100)
+      retryProcessing(el);
+    }, 100);
 
     // 使用 MutationObserver 监听 DOM 变化
     const observer = new MutationObserver((mutations) => {
-      let hasNewCodeBlocks = false
+      let hasNewCodeBlocks = false;
 
       mutations.forEach((mutation) => {
-        if (mutation.type === 'childList') {
+        if (mutation.type === "childList") {
           mutation.addedNodes.forEach((node) => {
             if (node.nodeType === Node.ELEMENT_NODE) {
-              const element = node as HTMLElement
+              const element = node as HTMLElement;
               // 检查新添加的节点是否包含代码块
-              if (element.tagName === 'PRE' || element.querySelector('pre code')) {
-                hasNewCodeBlocks = true
+              if (element.tagName === "PRE" || element.querySelector("pre code")) {
+                hasNewCodeBlocks = true;
               }
             }
-          })
+          });
         }
-      })
+      });
 
       if (hasNewCodeBlocks) {
         // 延迟处理新添加的代码块
         setTimeout(() => {
-          processAllCodeBlocks(el)
-        }, 50)
+          processAllCodeBlocks(el);
+        }, 50);
       }
-    })
+    });
 
     // 开始观察
     observer.observe(el, {
       childList: true,
-      subtree: true
-    })
+      subtree: true,
+    });
 
     // 将 observer 存储到元素上，以便在 unmounted 时清理
-    ;(el as any)._highlightObserver = observer
+    (el as any)._highlightObserver = observer;
   },
 
   updated(el: HTMLElement) {
     // 当组件更新时，重新处理代码块
     setTimeout(() => {
-      processAllCodeBlocks(el)
-    }, 50)
+      processAllCodeBlocks(el);
+    }, 50);
   },
 
   unmounted(el: HTMLElement) {
     // 清理 MutationObserver
-    const observer = (el as any)._highlightObserver
+    const observer = (el as any)._highlightObserver;
     if (observer) {
-      observer.disconnect()
-      delete (el as any)._highlightObserver
+      observer.disconnect();
+      delete (el as any)._highlightObserver;
     }
-  }
-}
+  },
+};
 
 export function setupHighlightDirective(app: App) {
-  app.directive('highlight', highlightDirective)
+  app.directive("highlight", highlightDirective);
 }
diff --git a/frontend/new-web/src/directives/business/ripple.ts b/frontend/new-web/src/directives/business/ripple.ts
index e65470e2..e5fcb776 100644
--- a/frontend/new-web/src/directives/business/ripple.ts
+++ b/frontend/new-web/src/directives/business/ripple.ts
@@ -34,83 +34,83 @@
  * - 自定义：通过 color 参数指定任意颜色
  *
  * @module directives/ripple
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
-import type { App, Directive, DirectiveBinding } from 'vue'
+import type { App, Directive, DirectiveBinding } from "vue";
 
 export interface RippleOptions {
   /** 水波纹颜色 */
-  color?: string
+  color?: string;
 }
 
-export type RippleDirective = Directive<HTMLElement, RippleOptions>
+export type RippleDirective = Directive<HTMLElement, RippleOptions>;
 
 export const vRipple: RippleDirective = {
   mounted(el: HTMLElement, binding: DirectiveBinding) {
     // 获取指令的配置参数
-    const options: RippleOptions = binding.value || {}
+    const options: RippleOptions = binding.value || {};
 
     // 设置元素为相对定位，并隐藏溢出部分
-    el.style.position = 'relative'
-    el.style.overflow = 'hidden'
+    el.style.position = "relative";
+    el.style.overflow = "hidden";
 
     // 点击事件处理
-    el.addEventListener('mousedown', (e: MouseEvent) => {
-      const rect = el.getBoundingClientRect()
-      const left = e.clientX - rect.left
-      const top = e.clientY - rect.top
+    el.addEventListener("mousedown", (e: MouseEvent) => {
+      const rect = el.getBoundingClientRect();
+      const left = e.clientX - rect.left;
+      const top = e.clientY - rect.top;
 
       // 创建水波纹元素
-      const ripple = document.createElement('div')
-      const diameter = Math.max(el.clientWidth, el.clientHeight)
-      const radius = diameter / 2
+      const ripple = document.createElement("div");
+      const diameter = Math.max(el.clientWidth, el.clientHeight);
+      const radius = diameter / 2;
 
       // 根据直径计算动画时间（直径越大，动画时间越长）
-      const baseTime = 600 // 基础动画时间（毫秒）
-      const scaleFactor = 0.5 // 缩放因子
-      const animationDuration = baseTime + diameter * scaleFactor
+      const baseTime = 600; // 基础动画时间（毫秒）
+      const scaleFactor = 0.5; // 缩放因子
+      const animationDuration = baseTime + diameter * scaleFactor;
 
       // 设置水波纹的尺寸和位置
-      ripple.style.width = ripple.style.height = `${diameter}px`
-      ripple.style.left = `${left - radius}px`
-      ripple.style.top = `${top - radius}px`
-      ripple.style.position = 'absolute'
-      ripple.style.borderRadius = '50%'
-      ripple.style.pointerEvents = 'none'
+      ripple.style.width = ripple.style.height = `${diameter}px`;
+      ripple.style.left = `${left - radius}px`;
+      ripple.style.top = `${top - radius}px`;
+      ripple.style.position = "absolute";
+      ripple.style.borderRadius = "50%";
+      ripple.style.pointerEvents = "none";
 
       // 判断是否为有色按钮（Element Plus 按钮类型）
-      const buttonTypes = ['primary', 'info', 'warning', 'danger', 'success'].map(
+      const buttonTypes = ["primary", "info", "warning", "danger", "success"].map(
         (type) => `el-button--${type}`
-      )
-      const isColoredButton = buttonTypes.some((type) => el.classList.contains(type))
+      );
+      const isColoredButton = buttonTypes.some((type) => el.classList.contains(type));
       const defaultColor = isColoredButton
-        ? 'rgba(255, 255, 255, 0.25)' // 有色按钮使用白色水波纹
-        : 'var(--el-color-primary-light-7)' // 默认按钮使用主题色水波纹
+        ? "rgba(255, 255, 255, 0.25)" // 有色按钮使用白色水波纹
+        : "var(--el-color-primary-light-7)"; // 默认按钮使用主题色水波纹
 
       // 设置水波纹颜色、初始状态和过渡效果
-      ripple.style.backgroundColor = options.color || defaultColor
-      ripple.style.transform = 'scale(0)'
-      ripple.style.transition = `transform ${animationDuration}ms cubic-bezier(0.3, 0, 0.2, 1), opacity ${animationDuration}ms cubic-bezier(0.3, 0, 0.5, 1)`
-      ripple.style.zIndex = '1'
+      ripple.style.backgroundColor = options.color || defaultColor;
+      ripple.style.transform = "scale(0)";
+      ripple.style.transition = `transform ${animationDuration}ms cubic-bezier(0.3, 0, 0.2, 1), opacity ${animationDuration}ms cubic-bezier(0.3, 0, 0.5, 1)`;
+      ripple.style.zIndex = "1";
 
       // 添加水波纹元素到DOM中
-      el.appendChild(ripple)
+      el.appendChild(ripple);
 
       // 触发动画
       requestAnimationFrame(() => {
-        ripple.style.transform = 'scale(2)'
-        ripple.style.opacity = '0'
-      })
+        ripple.style.transform = "scale(2)";
+        ripple.style.opacity = "0";
+      });
 
       // 动画结束后移除水波纹元素
       setTimeout(() => {
-        ripple.remove()
-      }, animationDuration + 500) // 增加500ms缓冲时间
-    })
-  }
-}
+        ripple.remove();
+      }, animationDuration + 500); // 增加500ms缓冲时间
+    });
+  },
+};
 
 export function setupRippleDirective(app: App) {
-  app.directive('ripple', vRipple)
+  app.directive("ripple", vRipple);
 }
diff --git a/frontend/new-web/src/directives/core/auth.ts b/frontend/new-web/src/directives/core/auth.ts
index 3d244c7c..321a2e50 100755
--- a/frontend/new-web/src/directives/core/auth.ts
+++ b/frontend/new-web/src/directives/core/auth.ts
@@ -29,38 +29,38 @@
  * - 权限列表从当前路由的 meta.authList 中获取
  *
  * @module directives/auth
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
-import { router } from '@/router'
-import { App, Directive, DirectiveBinding } from 'vue'
+import { router } from "@/router";
+import { App, Directive, DirectiveBinding } from "vue";
 
-export type AuthDirective = Directive<HTMLElement, string>
+export type AuthDirective = Directive<HTMLElement, string>;
 
 function checkAuthPermission(el: HTMLElement, binding: DirectiveBinding<string>): void {
   // 获取当前路由的权限列表
-  const authList = (router.currentRoute.value.meta.authList as Array<{ authMark: string }>) || []
+  const authList = (router.currentRoute.value.meta.authList as Array<{ authMark: string }>) || [];
 
   // 检查是否有对应的权限标识
-  const hasPermission = authList.some((item) => item.authMark === binding.value)
+  const hasPermission = authList.some((item) => item.authMark === binding.value);
 
   // 如果没有权限，移除元素
   if (!hasPermission) {
-    removeElement(el)
+    removeElement(el);
   }
 }
 
 function removeElement(el: HTMLElement): void {
   if (el.parentNode) {
-    el.parentNode.removeChild(el)
+    el.parentNode.removeChild(el);
   }
 }
 
 const authDirective: AuthDirective = {
   mounted: checkAuthPermission,
-  updated: checkAuthPermission
-}
+  updated: checkAuthPermission,
+};
 
 export function setupAuthDirective(app: App): void {
-  app.directive('auth', authDirective)
+  app.directive("auth", authDirective);
 }
diff --git a/frontend/new-web/src/directives/core/roles.ts b/frontend/new-web/src/directives/core/roles.ts
index f1db35bb..a3651d33 100644
--- a/frontend/new-web/src/directives/core/roles.ts
+++ b/frontend/new-web/src/directives/core/roles.ts
@@ -41,47 +41,47 @@
  * - 如需基于具体操作的细粒度权限控制，请使用 v-auth 指令
  *
  * @module directives/roles
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
-import { useUserStore } from '@/store/modules/user'
-import { App, Directive, DirectiveBinding } from 'vue'
+import { useUserStore } from "@/store/modules/user.store";
+import { App, Directive, DirectiveBinding } from "vue";
 
-export type RolesDirective = Directive<HTMLElement, string | string[]>
+export type RolesDirective = Directive<HTMLElement, string | string[]>;
 
 function checkRolePermission(el: HTMLElement, binding: DirectiveBinding<string | string[]>): void {
-  const userStore = useUserStore()
-  const userRoles = userStore.getUserInfo.roles
+  const userStore = useUserStore();
+  const userRoles = userStore.info.roles;
 
   // 如果用户角色为空或未定义，移除元素
   if (!userRoles?.length) {
-    removeElement(el)
-    return
+    removeElement(el);
+    return;
   }
 
   // 确保指令值为数组格式
-  const requiredRoles = Array.isArray(binding.value) ? binding.value : [binding.value]
+  const requiredRoles = Array.isArray(binding.value) ? binding.value : [binding.value];
 
   // 检查用户是否具有所需角色之一
-  const hasPermission = requiredRoles.some((role: string) => userRoles.includes(role))
+  const hasPermission = requiredRoles.some((role: string) => userRoles.includes(role));
 
   // 如果没有权限，安全地移除元素
   if (!hasPermission) {
-    removeElement(el)
+    removeElement(el);
   }
 }
 
 function removeElement(el: HTMLElement): void {
   if (el.parentNode) {
-    el.parentNode.removeChild(el)
+    el.parentNode.removeChild(el);
   }
 }
 
 const rolesDirective: RolesDirective = {
   mounted: checkRolePermission,
-  updated: checkRolePermission
-}
+  updated: checkRolePermission,
+};
 
 export function setupRolesDirective(app: App): void {
-  app.directive('roles', rolesDirective)
+  app.directive("roles", rolesDirective);
 }
diff --git a/frontend/new-web/src/directives/index.ts b/frontend/new-web/src/directives/index.ts
index b428a2b1..f03f11e8 100755
--- a/frontend/new-web/src/directives/index.ts
+++ b/frontend/new-web/src/directives/index.ts
@@ -1,14 +1,19 @@
-import type { App } from 'vue'
-import { setupAuthDirective, type AuthDirective } from './core/auth'
-import { setupHighlightDirective, type HighlightDirective } from './business/highlight'
-import { setupRippleDirective, type RippleDirective } from './business/ripple'
-import { setupRolesDirective, type RolesDirective } from './core/roles'
+import type { App } from "vue";
+import { setupAuthDirective, type AuthDirective } from "./core/auth";
+import { setupHighlightDirective, type HighlightDirective } from "./business/highlight";
+import { setupRippleDirective, type RippleDirective } from "./business/ripple";
+import { setupRolesDirective, type RolesDirective } from "./core/roles";
+import { hasPerm } from "./permission";
 
-export function setupGlobDirectives(app: App) {
-  setupAuthDirective(app) // 权限指令
-  setupRolesDirective(app) // 角色权限指令
-  setupHighlightDirective(app) // 高亮指令
-  setupRippleDirective(app) // 水波纹指令
+// 全局注册 directive
+export function initGlobDirectives(app: App<Element>) {
+  setupAuthDirective(app); // 权限指令
+  setupRolesDirective(app); // 角色权限指令
+  setupHighlightDirective(app); // 高亮指令
+  setupRippleDirective(app); // 水波纹指令
+
+  // 使 v-hasPerm 在所有组件中都可用
+  app.directive("hasPerm", hasPerm);
 }
 
-export type { AuthDirective, HighlightDirective, RippleDirective, RolesDirective }
+export type { AuthDirective, HighlightDirective, RippleDirective, RolesDirective };
diff --git a/frontend/new-web/src/directives/permission/index.ts b/frontend/new-web/src/directives/permission/index.ts
new file mode 100644
index 00000000..4cb1a3da
--- /dev/null
+++ b/frontend/new-web/src/directives/permission/index.ts
@@ -0,0 +1,74 @@
+import type { Directive, DirectiveBinding } from "vue";
+
+import { useUserStore } from "@/store";
+import { ROLE_ROOT } from "@/constants";
+
+/**
+ * 按钮权限
+ */
+export const hasPerm: Directive = {
+  mounted(el: HTMLElement, binding: DirectiveBinding) {
+    const requiredPerms = binding.value;
+
+    // 校验传入的权限值是否合法
+    if (!requiredPerms || (typeof requiredPerms !== "string" && !Array.isArray(requiredPerms))) {
+      throw new Error(
+        "需要提供权限标识！例如：v-has-perm=\"'sys:user:add'\" 或 v-has-perm=\"['sys:user:add', 'sys:user:edit']\""
+      );
+    }
+
+    const { roles } = useUserStore().basicInfo;
+    const userPrems = useUserStore().prems;
+
+    const isWildcardBypass =
+      (Array.isArray(requiredPerms) && requiredPerms.some((p) => p === "*:*:*")) ||
+      requiredPerms === "*:*:*";
+
+    // 超级管理员；或指令显式传入 "*:*:*" 时跳过校验（勿用 includes 子串匹配，避免含 "*:*:*" 的权限被误放行）
+    if ((roles && roles.map((r) => r.code).includes(ROLE_ROOT)) || isWildcardBypass) {
+      return;
+    }
+
+    // 检查权限
+    const hasAuth = Array.isArray(requiredPerms)
+      ? requiredPerms.some((perm) => userPrems.includes(perm))
+      : userPrems.includes(requiredPerms);
+
+    // 如果没有权限，移除该元素
+    if (!hasAuth && el.parentNode) {
+      el.parentNode.removeChild(el);
+    }
+  },
+};
+
+/**
+ * 角色权限指令
+ */
+export const hasRole: Directive = {
+  mounted(el: HTMLElement, binding: DirectiveBinding) {
+    const requiredRoles = binding.value;
+
+    // 校验传入的角色值是否合法
+    if (!requiredRoles || (typeof requiredRoles !== "string" && !Array.isArray(requiredRoles))) {
+      throw new Error(
+        "需要提供角色标识！例如：v-has-role=\"'ADMIN'\" 或 v-has-role=\"['ADMIN', 'TEST']\""
+      );
+    }
+
+    const { roles } = useUserStore().basicInfo;
+
+    // 检查是否有对应角色权限
+    const hasAuth = Array.isArray(requiredRoles)
+      ? requiredRoles.some((role) =>
+          roles ? roles.map((role) => role.code).includes(role) : false
+        )
+      : roles
+        ? roles.map((role) => role.code).includes(requiredRoles)
+        : false;
+
+    // 如果没有权限，移除元素
+    if (!hasAuth && el.parentNode) {
+      el.parentNode.removeChild(el);
+    }
+  },
+};
diff --git a/frontend/new-web/src/enums/api/result.enum.ts b/frontend/new-web/src/enums/api/result.enum.ts
new file mode 100644
index 00000000..bf75dd03
--- /dev/null
+++ b/frontend/new-web/src/enums/api/result.enum.ts
@@ -0,0 +1,34 @@
+/**
+ * API 结果枚举
+ * 定义后端 API 响应状态码
+ *
+ * @module enums/api/result.enum
+ */
+
+/**
+ * 结果枚举 - 与后端 ResultEnum 对应
+ */
+export const enum ResultEnum {
+  /**
+   * 成功
+   */
+  SUCCESS = 0,
+  /**
+   * 错误
+   */
+  ERROR = 1,
+  /**
+   * 异常
+   */
+  EXCEPTION = -1,
+
+  /**
+   * 未授权访问
+   */
+  UNAUTHORIZED = 10403,
+
+  /**
+   * 令牌已过期
+   */
+  TOKEN_EXPIRED = 10401,
+}
diff --git a/frontend/new-web/src/enums/appEnum.ts b/frontend/new-web/src/enums/appEnum.ts
index a39c278a..e2ab6187 100755
--- a/frontend/new-web/src/enums/appEnum.ts
+++ b/frontend/new-web/src/enums/appEnum.ts
@@ -11,7 +11,7 @@
  * - 菜单宽度枚举（收起宽度）
  *
  * @module enums/appEnum
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
 /**
@@ -19,13 +19,13 @@
  */
 export enum MenuTypeEnum {
   /** 左侧菜单 */
-  LEFT = 'left',
+  LEFT = "left",
   /** 顶部菜单 */
-  TOP = 'top',
+  TOP = "top",
   /** 顶部+左侧菜单 */
-  TOP_LEFT = 'top-left',
+  TOP_LEFT = "top-left",
   /** 双栏菜单 */
-  DUAL_MENU = 'dual-menu'
+  DUAL_MENU = "dual-menu",
 }
 
 /**
@@ -33,11 +33,11 @@ export enum MenuTypeEnum {
  */
 export enum SystemThemeEnum {
   /** 暗色主题 */
-  DARK = 'dark',
+  DARK = "dark",
   /** 亮色主题 */
-  LIGHT = 'light',
+  LIGHT = "light",
   /** 自动主题（跟随系统） */
-  AUTO = 'auto'
+  AUTO = "auto",
 }
 
 /**
@@ -45,11 +45,11 @@ export enum SystemThemeEnum {
  */
 export enum MenuThemeEnum {
   /** 暗色主题 */
-  DARK = 'dark',
+  DARK = "dark",
   /** 亮色主题 */
-  LIGHT = 'light',
+  LIGHT = "light",
   /** 设计主题 */
-  DESIGN = 'design'
+  DESIGN = "design",
 }
 
 /**
@@ -57,7 +57,7 @@ export enum MenuThemeEnum {
  */
 export enum MenuWidth {
   /** 收起宽度 */
-  CLOSE = '64px'
+  CLOSE = "64px",
 }
 
 /**
@@ -65,9 +65,9 @@ export enum MenuWidth {
  */
 export enum LanguageEnum {
   /** 中文 */
-  ZH = 'zh',
+  ZH = "zh",
   /** 英文 */
-  EN = 'en'
+  EN = "en",
 }
 
 /**
@@ -75,7 +75,7 @@ export enum LanguageEnum {
  */
 export enum ContainerWidthEnum {
   /** 全屏宽度 */
-  FULL = '100%',
+  FULL = "100%",
   /** 固定宽度 */
-  BOXED = '1200px'
+  BOXED = "1200px",
 }
diff --git a/frontend/new-web/src/enums/codegen/form.enum.ts b/frontend/new-web/src/enums/codegen/form.enum.ts
new file mode 100644
index 00000000..96c54626
--- /dev/null
+++ b/frontend/new-web/src/enums/codegen/form.enum.ts
@@ -0,0 +1,15 @@
+/**
+ * 表单类型枚举
+ */
+export const FormTypeEnum: Record<string, OptionType> = {
+  INPUT: { value: 1, label: "输入框" },
+  SELECT: { value: 2, label: "下拉框" },
+  RADIO: { value: 3, label: "单选框" },
+  CHECK_BOX: { value: 4, label: "复选框" },
+  INPUT_NUMBER: { value: 5, label: "数字输入框" },
+  SWITCH: { value: 6, label: "开关" },
+  TEXT_AREA: { value: 7, label: "文本域" },
+  DATE: { value: 8, label: "日期框" },
+  DATE_TIME: { value: 9, label: "日期时间框" },
+  HIDDEN: { value: 10, label: "隐藏域" },
+};
diff --git a/frontend/new-web/src/enums/codegen/query.enum.ts b/frontend/new-web/src/enums/codegen/query.enum.ts
new file mode 100644
index 00000000..253efc0d
--- /dev/null
+++ b/frontend/new-web/src/enums/codegen/query.enum.ts
@@ -0,0 +1,37 @@
+/**
+ * 查询类型枚举
+ */
+export const QueryTypeEnum: Record<string, OptionType> = {
+  /** 等于 */
+  EQ: { value: 1, label: "=" },
+
+  /** 模糊匹配 */
+  LIKE: { value: 2, label: "LIKE '%s%'" },
+
+  /** 包含 */
+  IN: { value: 3, label: "IN" },
+
+  /** 范围 */
+  BETWEEN: { value: 4, label: "BETWEEN" },
+
+  /** 大于 */
+  GT: { value: 5, label: ">" },
+
+  /** 大于等于 */
+  GE: { value: 6, label: ">=" },
+
+  /** 小于 */
+  LT: { value: 7, label: "<" },
+
+  /** 小于等于 */
+  LE: { value: 8, label: "<=" },
+
+  /** 不等于 */
+  NE: { value: 9, label: "!=" },
+
+  /** 左模糊匹配 */
+  LIKE_LEFT: { value: 10, label: "LIKE '%s'" },
+
+  /** 右模糊匹配 */
+  LIKE_RIGHT: { value: 11, label: "LIKE 's%'" },
+};
diff --git a/frontend/new-web/src/enums/formEnum.ts b/frontend/new-web/src/enums/formEnum.ts
index 8e9b3b45..6c5e4324 100644
--- a/frontend/new-web/src/enums/formEnum.ts
+++ b/frontend/new-web/src/enums/formEnum.ts
@@ -7,18 +7,18 @@
  * - 表格尺寸枚举（默认、紧凑、宽松）
  *
  * @module enums/formEnum
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
 // 页面类型
 export enum PageModeEnum {
   Add, // 新增
-  Edit // 编辑
+  Edit, // 编辑
 }
 
 // 表格大小
 export enum TableSizeEnum {
-  DEFAULT = 'default',
-  SMALL = 'small',
-  LARGE = 'large'
+  DEFAULT = "default",
+  SMALL = "small",
+  LARGE = "large",
 }
diff --git a/frontend/new-web/src/enums/index.ts b/frontend/new-web/src/enums/index.ts
new file mode 100644
index 00000000..be55d257
--- /dev/null
+++ b/frontend/new-web/src/enums/index.ts
@@ -0,0 +1,12 @@
+export * from "./api/result.enum";
+
+export * from "./codegen/form.enum";
+export * from "./codegen/query.enum";
+
+export * from "./settings/layout.enum";
+export * from "./settings/theme.enum";
+export * from "./settings/locale.enum";
+export * from "./settings/device.enum";
+export * from "./settings/setting.enum";
+
+export * from "./system/menu.enum";
diff --git a/frontend/new-web/src/enums/settings/device.enum.ts b/frontend/new-web/src/enums/settings/device.enum.ts
new file mode 100644
index 00000000..709bcb3c
--- /dev/null
+++ b/frontend/new-web/src/enums/settings/device.enum.ts
@@ -0,0 +1,14 @@
+/**
+ * 设备枚举
+ */
+export const enum DeviceEnum {
+  /**
+   * 宽屏设备
+   */
+  DESKTOP = "desktop",
+
+  /**
+   * 窄屏设备
+   */
+  MOBILE = "mobile",
+}
diff --git a/frontend/new-web/src/enums/settings/layout.enum.ts b/frontend/new-web/src/enums/settings/layout.enum.ts
new file mode 100644
index 00000000..e1e4406b
--- /dev/null
+++ b/frontend/new-web/src/enums/settings/layout.enum.ts
@@ -0,0 +1,53 @@
+/**
+ * 菜单布局枚举
+ */
+export const enum LayoutMode {
+  /**
+   * 左侧菜单布局
+   */
+  LEFT = "left",
+  /**
+   * 顶部菜单布局
+   */
+  TOP = "top",
+
+  /**
+   * 混合菜单布局
+   */
+  MIX = "mix",
+}
+
+/**
+ * 侧边栏状态枚举
+ */
+export const enum SidebarStatus {
+  /**
+   * 展开
+   */
+  OPENED = "opened",
+
+  /**
+   * 关闭
+   */
+  CLOSED = "closed",
+}
+
+/**
+ * 组件尺寸枚举
+ */
+export const enum ComponentSize {
+  /**
+   * 默认
+   */
+  DEFAULT = "default",
+
+  /**
+   * 大型
+   */
+  LARGE = "large",
+
+  /**
+   * 小型
+   */
+  SMALL = "small",
+}
diff --git a/frontend/new-web/src/enums/settings/locale.enum.ts b/frontend/new-web/src/enums/settings/locale.enum.ts
new file mode 100644
index 00000000..a50b6555
--- /dev/null
+++ b/frontend/new-web/src/enums/settings/locale.enum.ts
@@ -0,0 +1,14 @@
+/**
+ * 语言枚举
+ */
+export const enum LanguageEnum {
+  /**
+   * 中文
+   */
+  ZH_CN = "zh-cn",
+
+  /**
+   * 英文
+   */
+  EN = "en",
+}
diff --git a/frontend/new-web/src/enums/settings/setting.enum.ts b/frontend/new-web/src/enums/settings/setting.enum.ts
new file mode 100644
index 00000000..0398f3e9
--- /dev/null
+++ b/frontend/new-web/src/enums/settings/setting.enum.ts
@@ -0,0 +1,47 @@
+/**
+ * 页面切换动画枚举
+ */
+export const enum PageSwitchingAnimationEnum {
+  /**
+   * 无动画
+   */
+  NONE = "none",
+  /**
+   * 淡入淡出
+   */
+  FADE = "fade",
+  /**
+   * 平滑切换
+   */
+  FADE_SLIDE = "fade-slide",
+  /**
+   * 缩放切换
+   */
+  FADE_SCALE = "fade-scale",
+  /**
+   * 左右滑动
+   */
+  SLIDE_LEFT_RIGHT = "slide-left-right",
+  /**
+   * 缩放进出
+   */
+  ZOOM_IN_OUT = "zoom-in-out",
+  /**
+   * 上下滑动
+   */
+  SLIDE_UP_DOWN = "slide-up-down",
+  /**
+   * 弹性效果
+   */
+  BOUNCE = "bounce",
+}
+export const PageSwitchingAnimationOptions: Record<string, OptionType> = {
+  none: { value: "none", label: "无动画" },
+  fade: { value: "fade", label: "淡入淡出" },
+  "fade-slide": { value: "fade-slide", label: "平滑切换" },
+  "fade-scale": { value: "fade-scale", label: "缩放切换" },
+  "slide-left-right": { value: "slide-left-right", label: "左右滑动" },
+  "zoom-in-out": { value: "zoom-in-out", label: "缩放进出" },
+  "slide-up-down": { value: "slide-up-down", label: "上下滑动" },
+  bounce: { value: "bounce", label: "弹性效果" },
+};
diff --git a/frontend/new-web/src/enums/settings/theme.enum.ts b/frontend/new-web/src/enums/settings/theme.enum.ts
new file mode 100644
index 00000000..21799c3e
--- /dev/null
+++ b/frontend/new-web/src/enums/settings/theme.enum.ts
@@ -0,0 +1,32 @@
+/**
+ * 主题枚举
+ */
+export const enum ThemeMode {
+  /**
+   * 明亮主题
+   */
+  LIGHT = "light",
+  /**
+   * 暗黑主题
+   */
+  DARK = "dark",
+
+  /**
+   * 系统自动
+   */
+  AUTO = "auto",
+}
+
+/**
+ * 侧边栏配色方案枚举
+ */
+export const enum SidebarColor {
+  /**
+   * 经典蓝
+   */
+  CLASSIC_BLUE = "classic-blue",
+  /**
+   * 极简白
+   */
+  MINIMAL_WHITE = "minimal-white",
+}
diff --git a/frontend/new-web/src/enums/system/menu.enum.ts b/frontend/new-web/src/enums/system/menu.enum.ts
new file mode 100644
index 00000000..8c30e69a
--- /dev/null
+++ b/frontend/new-web/src/enums/system/menu.enum.ts
@@ -0,0 +1,13 @@
+// 核心枚举定义
+export enum MenuTypeEnum {
+  CATALOG = 1, // 目录
+  MENU = 2, // 菜单
+  BUTTON = 3, // 按钮
+  EXTLINK = 4, // 外链
+}
+
+/** 菜单终端（与后端 sys_menu.client 一致） */
+export enum MenuClientEnum {
+  PC = "pc",
+  APP = "app",
+}
diff --git a/frontend/new-web/src/env.d.ts b/frontend/new-web/src/env.d.ts
index 4401f21f..3a2141c8 100755
--- a/frontend/new-web/src/env.d.ts
+++ b/frontend/new-web/src/env.d.ts
@@ -1,34 +1,34 @@
 /// <reference types="vite/client" />
 
-declare module 'nprogress'
+declare module "nprogress";
 
-declare module 'crypto-js'
+declare module "crypto-js";
 
-declare module 'vue-img-cutter'
+declare module "vue-img-cutter";
 
-declare module 'file-saver'
+declare module "file-saver";
 
-declare module 'qrcode.vue' {
-  export type Level = 'L' | 'M' | 'Q' | 'H'
-  export type RenderAs = 'canvas' | 'svg'
-  export type GradientType = 'linear' | 'radial'
+declare module "qrcode.vue" {
+  export type Level = "L" | "M" | "Q" | "H";
+  export type RenderAs = "canvas" | "svg";
+  export type GradientType = "linear" | "radial";
   export interface ImageSettings {
-    src: string
-    height: number
-    width: number
-    excavate: boolean
+    src: string;
+    height: number;
+    width: number;
+    excavate: boolean;
   }
   export interface QRCodeProps {
-    value: string
-    size?: number
-    level?: Level
-    background?: string
-    foreground?: string
-    renderAs?: RenderAs
+    value: string;
+    size?: number;
+    level?: Level;
+    background?: string;
+    foreground?: string;
+    renderAs?: RenderAs;
   }
-  const QrcodeVue: any
-  export default QrcodeVue
+  const QrcodeVue: any;
+  export default QrcodeVue;
 }
 
 // 全局变量声明
-declare const __APP_VERSION__: string // 版本号
+declare const __APP_VERSION__: string; // 版本号
diff --git a/frontend/new-web/src/hooks/ai/useAiAction.ts b/frontend/new-web/src/hooks/ai/useAiAction.ts
new file mode 100644
index 00000000..3e0dd374
--- /dev/null
+++ b/frontend/new-web/src/hooks/ai/useAiAction.ts
@@ -0,0 +1,217 @@
+import { useRoute } from "vue-router";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { onMounted, onBeforeUnmount, nextTick } from "vue";
+import AiChatAPI from "@/api/module_ai/chat";
+import type { UseAiActionOptions } from "@/types/ai";
+
+/**
+ * AI 操作 Composable
+ *
+ * 统一处理 AI 助手传递的操作，支持：
+ * - 自动搜索（通过 keywords + autoSearch 参数）
+ * - 执行 AI 操作（通过 aiAction 参数）
+ * - 配置化的操作处理器
+ */
+export function useAiAction(options: UseAiActionOptions = {}) {
+  const route = useRoute();
+  const { actionHandlers = {}, onRefresh, onAutoSearch } = options;
+
+  // 用于跟踪是否已卸载，防止在卸载后执行回调
+  let isUnmounted = false;
+
+  /**
+   * 执行 AI 操作（统一处理确认、执行、反馈流程）
+   */
+  async function executeAiAction(action: any) {
+    if (isUnmounted) return;
+
+    // 兼容两种入参：{ functionName, arguments } 或 { functionCall: { name, arguments } }
+    const fnCall = action.functionCall ?? {
+      name: action.functionName,
+      arguments: action.arguments,
+    };
+
+    if (!fnCall?.name) {
+      ElMessage.warning("未识别的 AI 操作");
+      return;
+    }
+
+    // 查找对应的处理器
+    const handler = actionHandlers[fnCall.name];
+    if (!handler) {
+      ElMessage.warning(`暂不支持操作: ${fnCall.name}`);
+      return;
+    }
+
+    try {
+      // 判断处理器类型（函数 or 配置对象）
+      const isSimpleFunction = typeof handler === "function";
+
+      if (isSimpleFunction) {
+        // 简单函数形式：直接执行
+        await handler(fnCall.arguments);
+      } else {
+        // 配置对象形式：统一处理确认、执行、反馈
+        const config = handler;
+
+        // 1. 确认阶段（默认需要确认）
+        if (config.needConfirm !== false) {
+          const confirmMsg =
+            typeof config.confirmMessage === "function"
+              ? config.confirmMessage(fnCall.arguments)
+              : config.confirmMessage || "确认执行此操作吗？";
+
+          await ElMessageBox.confirm(confirmMsg, "AI 助手操作确认", {
+            confirmButtonText: "确认执行",
+            cancelButtonText: "取消",
+            type: "warning",
+            dangerouslyUseHTMLString: true,
+          });
+        }
+
+        // 2. 执行阶段
+        if (config.callBackendApi) {
+          // 自动调用后端 API
+          await AiChatAPI.chat({
+            message: fnCall.arguments,
+          });
+        } else {
+          // 执行自定义函数
+          await config.execute(fnCall.arguments);
+        }
+
+        // 3. 成功反馈
+        const successMsg =
+          typeof config.successMessage === "function"
+            ? config.successMessage(fnCall.arguments)
+            : config.successMessage || "操作执行成功";
+        ElMessage.success(successMsg);
+      }
+
+      // 4. 刷新数据
+      if (onRefresh) {
+        await onRefresh();
+      }
+    } catch (error: any) {
+      // 处理取消操作
+      if (error === "cancel") {
+        ElMessage.info("已取消操作");
+        return;
+      }
+
+      console.error("AI 操作执行失败:", error);
+      ElMessage.error(error.message || "操作执行失败");
+    }
+  }
+
+  /**
+   * 执行后端命令（通用方法）
+   */
+  async function executeCommand(
+    functionName: string,
+    args: any,
+    options: {
+      originalCommand?: string;
+      confirmMode?: "auto" | "manual";
+      needConfirm?: boolean;
+      confirmMessage?: string;
+    } = {}
+  ) {
+    const { originalCommand = "", needConfirm = false, confirmMessage } = options;
+
+    // 如果需要确认，先显示确认对话框
+    if (needConfirm && confirmMessage) {
+      try {
+        await ElMessageBox.confirm(confirmMessage, "AI 助手操作确认", {
+          confirmButtonText: "确认执行",
+          cancelButtonText: "取消",
+          type: "warning",
+          dangerouslyUseHTMLString: true,
+        });
+      } catch {
+        ElMessage.info("已取消操作");
+        return;
+      }
+    }
+
+    try {
+      await AiChatAPI.chat({
+        message: originalCommand,
+      });
+
+      ElMessage.success("操作执行成功");
+    } catch (error: any) {
+      if (error !== "cancel") {
+        throw error;
+      }
+    }
+  }
+
+  /**
+   * 处理自动搜索
+   */
+  function handleAutoSearch(keywords: string) {
+    if (onAutoSearch) {
+      onAutoSearch(keywords);
+    } else {
+      ElMessage.info(`AI 助手已为您自动搜索：${keywords}`);
+    }
+  }
+
+  /**
+   * 初始化：处理 URL 参数中的 AI 操作
+   *
+   * 注意：此方法只处理 AI 相关参数，不负责页面数据的初始加载
+   * 页面数据加载应由组件的 onMounted 钩子自行处理
+   */
+  async function init() {
+    if (isUnmounted) return;
+
+    // 检查是否有 AI 助手传递的参数
+    const keywords = route.query.keywords as string;
+    const autoSearch = route.query.autoSearch as string;
+    const aiActionParam = route.query.aiAction as string;
+
+    // 如果没有任何 AI 参数，直接返回
+    if (!keywords && !autoSearch && !aiActionParam) {
+      return;
+    }
+
+    // 在 nextTick 中执行，确保页面数据已加载
+    nextTick(async () => {
+      if (isUnmounted) return;
+
+      // 1. 处理自动搜索
+      if (autoSearch === "true" && keywords) {
+        handleAutoSearch(keywords);
+      }
+
+      // 2. 处理 AI 操作
+      if (aiActionParam) {
+        try {
+          const aiAction = JSON.parse(decodeURIComponent(aiActionParam));
+          await executeAiAction(aiAction);
+        } catch (error) {
+          console.error("解析 AI 操作失败:", error);
+          ElMessage.error("AI 操作参数解析失败");
+        }
+      }
+    });
+  }
+
+  // 组件挂载时自动初始化
+  onMounted(() => {
+    init();
+  });
+
+  // 组件卸载时清理
+  onBeforeUnmount(() => {
+    isUnmounted = true;
+  });
+
+  return {
+    executeAiAction,
+    executeCommand,
+    handleAutoSearch,
+  };
+}
diff --git a/frontend/new-web/src/hooks/core/useAppMode.ts b/frontend/new-web/src/hooks/core/useAppMode.ts
index c39cd9e7..6e212881 100644
--- a/frontend/new-web/src/hooks/core/useAppMode.ts
+++ b/frontend/new-web/src/hooks/core/useAppMode.ts
@@ -2,7 +2,8 @@
  * useAppMode - 应用模式管理
  *
  * 提供应用访问模式的判断和管理功能，支持前端和后端两种权限控制模式。
- * 根据环境变量 VITE_ACCESS_MODE 自动识别当前运行模式。
+ * 根据环境变量 VITE_ACCESS_MODE 自动识别当前运行模式：
+ * frontend | backend | mixed（后端菜单 + 前端 asyncRoutes 合并展示）
  *
  * ## 主要功能
  *
@@ -12,34 +13,27 @@
  * 4. 响应式状态 - 提供响应式的模式判断，方便在组件中使用
  *
  * @module useAppMode
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
-import { computed } from 'vue'
+import { computed } from "vue";
 
 export function useAppMode() {
-  // 获取访问模式配置
-  const accessMode = import.meta.env.VITE_ACCESS_MODE
+  const accessMode = (import.meta.env.VITE_ACCESS_MODE || "").trim();
 
-  /**
-   * 是否为前端控制模式
-   * 前端模式：权限由前端路由配置控制
-   */
-  const isFrontendMode = computed(() => accessMode === 'frontend')
-  /**
-   * 是否为后端控制模式
-   * 后端模式：权限由后端接口返回的菜单数据控制
-   */
-  const isBackendMode = computed(() => accessMode === 'backend')
+  /** 仅前端 asyncRoutes */
+  const isFrontendMode = computed(() => accessMode === "frontend");
+  /** 仅后端菜单接口 */
+  const isBackendMode = computed(() => accessMode === "backend");
+  /** 后端菜单与前端路由模块合并（同名路由以前端模块注册顺序中后端为先，见 MenuProcessor） */
+  const isMixedMenuMode = computed(() => accessMode === "mixed");
 
-  /**
-   * 当前应用模式
-   */
-  const currentMode = computed(() => accessMode)
+  const currentMode = computed(() => accessMode);
 
   return {
     isFrontendMode,
     isBackendMode,
-    currentMode
-  }
+    isMixedMenuMode,
+    currentMode,
+  };
 }
diff --git a/frontend/new-web/src/hooks/core/useAuth.ts b/frontend/new-web/src/hooks/core/useAuth.ts
index 283b859e..0d06e658 100644
--- a/frontend/new-web/src/hooks/core/useAuth.ts
+++ b/frontend/new-web/src/hooks/core/useAuth.ts
@@ -27,31 +27,31 @@
  * ```
  *
  * @module useAuth
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
-import { useRoute } from 'vue-router'
-import { storeToRefs } from 'pinia'
-import { useUserStore } from '@/store/modules/user'
-import { useAppMode } from '@/hooks/core/useAppMode'
-import type { AppRouteRecord } from '@/types/router'
+import { useRoute } from "vue-router";
+import { storeToRefs } from "pinia";
+import { useUserStore } from "@/store/modules/user.store";
+import { useAppMode } from "@/hooks/core/useAppMode";
+import type { AppRouteRecord } from "@/types/router";
 
-type AuthItem = NonNullable<AppRouteRecord['meta']['authList']>[number]
+type AuthItem = NonNullable<AppRouteRecord["meta"]["authList"]>[number];
 
-const userStore = useUserStore()
+const userStore = useUserStore();
 
 export const useAuth = () => {
-  const route = useRoute()
-  const { isFrontendMode } = useAppMode()
-  const { info } = storeToRefs(userStore)
+  const route = useRoute();
+  const { isFrontendMode } = useAppMode();
+  const { info } = storeToRefs(userStore);
 
   // 前端按钮权限（例如：['add', 'edit']）
-  const frontendAuthList = info.value?.buttons ?? []
+  const frontendAuthList = info.value?.permissions ?? [];
 
   // 后端路由 meta 配置的权限列表（例如：[{ authMark: 'add' }]）
   const backendAuthList: AuthItem[] = Array.isArray(route.meta.authList)
     ? (route.meta.authList as AuthItem[])
-    : []
+    : [];
 
   /**
    * 检查是否拥有某权限标识（前后端模式通用）
@@ -61,14 +61,14 @@ export const useAuth = () => {
   const hasAuth = (auth: string): boolean => {
     // 前端模式
     if (isFrontendMode.value) {
-      return frontendAuthList.includes(auth)
+      return frontendAuthList.includes(auth);
     }
 
     // 后端模式
-    return backendAuthList.some((item) => item?.authMark === auth)
-  }
+    return backendAuthList.some((item) => item?.authMark === auth);
+  };
 
   return {
-    hasAuth
-  }
-}
+    hasAuth,
+  };
+};
diff --git a/frontend/new-web/src/hooks/core/useCeremony.ts b/frontend/new-web/src/hooks/core/useCeremony.ts
index ead26302..abeffafc 100644
--- a/frontend/new-web/src/hooks/core/useCeremony.ts
+++ b/frontend/new-web/src/hooks/core/useCeremony.ts
@@ -37,15 +37,15 @@
  * ```
  *
  * @module useCeremony
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
-import { useTimeoutFn, useIntervalFn, useDateFormat } from '@vueuse/core'
-import { storeToRefs } from 'pinia'
-import { computed } from 'vue'
-import { useSettingStore } from '@/store/modules/setting'
-import { mittBus } from '@/utils/sys'
-import { festivalConfigList } from '@/config/modules/festival'
+import { useTimeoutFn, useIntervalFn, useDateFormat } from "@vueuse/core";
+import { storeToRefs } from "pinia";
+import { computed } from "vue";
+import { useSettingsStore } from "@/store/modules/setting.store";
+import { mittBus } from "@/utils/sys";
+import { festivalConfigList } from "@/config/modules/festival";
 
 /**
  * 节日庆祝配置常量
@@ -58,18 +58,18 @@ const FESTIVAL_CONFIG = {
   /** 文本显示延迟（毫秒） */
   TEXT_DELAY: 2000,
   /** 默认烟花播放次数 */
-  DEFAULT_FIREWORKS_COUNT: 3
-} as const
+  DEFAULT_FIREWORKS_COUNT: 3,
+} as const;
 
 /**
  * 节日庆祝功能
  * 提供节日烟花效果和祝福文本展示
  */
 export function useCeremony() {
-  const settingStore = useSettingStore()
-  const { holidayFireworksLoaded, isShowFireworks } = storeToRefs(settingStore)
+  const settingStore = useSettingsStore();
+  const { holidayFireworksLoaded, isShowFireworks } = storeToRefs(settingStore);
 
-  let fireworksInterval: { pause: () => void } | null = null
+  let fireworksInterval: { pause: () => void } | null = null;
 
   /**
    * 检查日期是否在节日范围内
@@ -84,101 +84,101 @@ export function useCeremony() {
   ): boolean => {
     if (!festivalEndDate) {
       // 单日节日
-      return currentDate === festivalDate
+      return currentDate === festivalDate;
     }
 
     // 跨日期节日
-    const current = new Date(currentDate)
-    const start = new Date(festivalDate)
-    const end = new Date(festivalEndDate)
+    const current = new Date(currentDate);
+    const start = new Date(festivalDate);
+    const end = new Date(festivalEndDate);
 
-    return current >= start && current <= end
-  }
+    return current >= start && current <= end;
+  };
 
   /**
    * 获取当前日期对应的节日数据
    */
   const currentFestivalData = computed(() => {
-    const currentDate = useDateFormat(new Date(), 'YYYY-MM-DD').value
-    return festivalConfigList.find((item) => isDateInRange(currentDate, item.date, item.endDate))
-  })
+    const currentDate = useDateFormat(new Date(), "YYYY-MM-DD").value;
+    return festivalConfigList.find((item) => isDateInRange(currentDate, item.date, item.endDate));
+  });
 
   /**
    * 更新节日日期到 store
    */
   const updateFestivalDate = () => {
-    settingStore.setFestivalDate(currentFestivalData.value?.date || '')
-  }
+    settingStore.setFestivalDate(currentFestivalData.value?.date || "");
+  };
 
   /**
    * 触发烟花效果
    */
   const triggerFirework = () => {
-    mittBus.emit('triggerFireworks', currentFestivalData.value?.image)
-  }
+    mittBus.emit("triggerFireworks", currentFestivalData.value?.image);
+  };
 
   /**
    * 完成烟花效果后显示文本
    */
   const showFestivalText = () => {
-    settingStore.setholidayFireworksLoaded(true)
+    settingStore.setholidayFireworksLoaded(true);
 
     useTimeoutFn(() => {
-      settingStore.setShowFestivalText(true)
-      updateFestivalDate()
-    }, FESTIVAL_CONFIG.TEXT_DELAY)
-  }
+      settingStore.setShowFestivalText(true);
+      updateFestivalDate();
+    }, FESTIVAL_CONFIG.TEXT_DELAY);
+  };
 
   /**
    * 启动烟花循环
    */
   const startFireworksLoop = () => {
-    let playedCount = 0
+    let playedCount = 0;
     // 使用节日配置的播放次数，如果没有则使用默认值
-    const count = currentFestivalData.value?.count ?? FESTIVAL_CONFIG.DEFAULT_FIREWORKS_COUNT
+    const count = currentFestivalData.value?.count ?? FESTIVAL_CONFIG.DEFAULT_FIREWORKS_COUNT;
 
     const { pause } = useIntervalFn(() => {
-      triggerFirework()
-      playedCount++
+      triggerFirework();
+      playedCount++;
 
       if (playedCount >= count) {
-        pause()
-        showFestivalText()
+        pause();
+        showFestivalText();
       }
-    }, FESTIVAL_CONFIG.FIREWORK_INTERVAL)
+    }, FESTIVAL_CONFIG.FIREWORK_INTERVAL);
 
-    fireworksInterval = { pause }
-  }
+    fireworksInterval = { pause };
+  };
 
   /**
    * 开启节日庆祝
    */
   const openFestival = () => {
     if (!currentFestivalData.value || !isShowFireworks.value) {
-      return
+      return;
     }
 
-    const { start } = useTimeoutFn(startFireworksLoop, FESTIVAL_CONFIG.INITIAL_DELAY)
-    start()
-  }
+    const { start } = useTimeoutFn(startFireworksLoop, FESTIVAL_CONFIG.INITIAL_DELAY);
+    start();
+  };
 
   /**
    * 清理烟花效果
    */
   const cleanup = () => {
     if (fireworksInterval) {
-      fireworksInterval.pause()
-      fireworksInterval = null
+      fireworksInterval.pause();
+      fireworksInterval = null;
     }
-    settingStore.setShowFestivalText(false)
-    updateFestivalDate()
-  }
+    settingStore.setShowFestivalText(false);
+    updateFestivalDate();
+  };
 
   return {
     openFestival,
     cleanup,
     holidayFireworksLoaded,
     currentFestivalData,
-    isShowFireworks
-  }
+    isShowFireworks,
+  };
 }
diff --git a/frontend/new-web/src/hooks/core/useChart.ts b/frontend/new-web/src/hooks/core/useChart.ts
index 29ba1d10..1c75d4b1 100644
--- a/frontend/new-web/src/hooks/core/useChart.ts
+++ b/frontend/new-web/src/hooks/core/useChart.ts
@@ -46,298 +46,298 @@
  * ```
  *
  * @module useChart
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
-import { echarts, type EChartsOption } from '@/plugins/echarts'
-import { storeToRefs } from 'pinia'
-import { useSettingStore } from '@/store/modules/setting'
-import { getCssVar } from '@/utils/ui'
-import type { BaseChartProps, ChartThemeConfig, UseChartOptions } from '@/types/component/chart'
+import { echarts, type EChartsOption } from "@/plugins/echarts";
+import { storeToRefs } from "pinia";
+import { useSettingsStore } from "@/store/modules/setting.store";
+import { getCssVar } from "@/utils/ui";
+import type { BaseChartProps, ChartThemeConfig, UseChartOptions } from "@/types/component/chart";
 
 // 图表主题配置
 export const useChartOps = (): ChartThemeConfig => ({
   /** */
-  chartHeight: '16rem',
+  chartHeight: "16rem",
   /** 字体大小 */
   fontSize: 13,
   /** 字体颜色 */
-  fontColor: '#999',
+  fontColor: "#999",
   /** 主题颜色 */
-  themeColor: getCssVar('--el-color-primary-light-1'),
+  themeColor: getCssVar("--el-color-primary-light-1"),
   /** 颜色组 */
   colors: [
-    getCssVar('--el-color-primary-light-1'),
-    '#4ABEFF',
-    '#EDF2FF',
-    '#14DEBA',
-    '#FFAF20',
-    '#FA8A6C',
-    '#FFAF20'
-  ]
-})
+    getCssVar("--el-color-primary-light-1"),
+    "#4ABEFF",
+    "#EDF2FF",
+    "#14DEBA",
+    "#FFAF20",
+    "#FA8A6C",
+    "#FFAF20",
+  ],
+});
 
 // 常量定义
-const RESIZE_DELAYS = [50, 100, 200, 350] as const
-const MENU_RESIZE_DELAYS = [50, 100, 200] as const
-const RESIZE_DEBOUNCE_DELAY = 100
+const RESIZE_DELAYS = [50, 100, 200, 350] as const;
+const MENU_RESIZE_DELAYS = [50, 100, 200] as const;
+const RESIZE_DEBOUNCE_DELAY = 100;
 
 export function useChart(options: UseChartOptions = {}) {
-  const { initOptions, initDelay = 0, threshold = 0.1, autoTheme = true } = options
+  const { initOptions, initDelay = 0, threshold = 0.1, autoTheme = true } = options;
 
-  const settingStore = useSettingStore()
-  const { isDark, menuOpen, menuType } = storeToRefs(settingStore)
+  const settingStore = useSettingsStore();
+  const { isDark, menuOpen, menuType } = storeToRefs(settingStore);
 
-  const chartRef = ref<HTMLElement>()
-  let chart: echarts.ECharts | null = null
-  let intersectionObserver: IntersectionObserver | null = null
-  let pendingOptions: EChartsOption | null = null
-  let resizeTimeoutId: number | null = null
-  let resizeFrameId: number | null = null
-  let isDestroyed = false
-  let emptyStateDiv: HTMLElement | null = null
+  const chartRef = ref<HTMLElement>();
+  let chart: echarts.ECharts | null = null;
+  let intersectionObserver: IntersectionObserver | null = null;
+  let pendingOptions: EChartsOption | null = null;
+  let resizeTimeoutId: number | null = null;
+  let resizeFrameId: number | null = null;
+  let isDestroyed = false;
+  let emptyStateDiv: HTMLElement | null = null;
 
   // 清理定时器的统一方法
   const clearTimers = () => {
     if (resizeTimeoutId) {
-      clearTimeout(resizeTimeoutId)
-      resizeTimeoutId = null
+      clearTimeout(resizeTimeoutId);
+      resizeTimeoutId = null;
     }
     if (resizeFrameId) {
-      cancelAnimationFrame(resizeFrameId)
-      resizeFrameId = null
+      cancelAnimationFrame(resizeFrameId);
+      resizeFrameId = null;
     }
-  }
+  };
 
   // 使用 requestAnimationFrame 优化 resize 处理
   const requestAnimationResize = () => {
     if (resizeFrameId) {
-      cancelAnimationFrame(resizeFrameId)
+      cancelAnimationFrame(resizeFrameId);
     }
     resizeFrameId = requestAnimationFrame(() => {
-      handleResize()
-      resizeFrameId = null
-    })
-  }
+      handleResize();
+      resizeFrameId = null;
+    });
+  };
 
   // 防抖的resize处理（用于窗口resize事件）
   const debouncedResize = () => {
     if (resizeTimeoutId) {
-      clearTimeout(resizeTimeoutId)
+      clearTimeout(resizeTimeoutId);
     }
     resizeTimeoutId = window.setTimeout(() => {
-      requestAnimationResize()
-      resizeTimeoutId = null
-    }, RESIZE_DEBOUNCE_DELAY)
-  }
+      requestAnimationResize();
+      resizeTimeoutId = null;
+    }, RESIZE_DEBOUNCE_DELAY);
+  };
 
   // 多延迟resize处理 - 统一方法
   const multiDelayResize = (delays: readonly number[]) => {
     // 立即调用一次，快速响应
-    nextTick(requestAnimationResize)
+    nextTick(requestAnimationResize);
 
     // 使用延迟时间，确保图表正确适应变化
     delays.forEach((delay) => {
-      setTimeout(requestAnimationResize, delay)
-    })
-  }
+      setTimeout(requestAnimationResize, delay);
+    });
+  };
 
   // 收缩菜单时，重新计算图表大小（仅在图表存在时监听）
-  let menuOpenStopHandle: (() => void) | null = null
-  let menuTypeStopHandle: (() => void) | null = null
+  let menuOpenStopHandle: (() => void) | null = null;
+  let menuTypeStopHandle: (() => void) | null = null;
 
   const setupMenuWatchers = () => {
-    menuOpenStopHandle = watch(menuOpen, () => multiDelayResize(RESIZE_DELAYS))
+    menuOpenStopHandle = watch(menuOpen, () => multiDelayResize(RESIZE_DELAYS));
     menuTypeStopHandle = watch(menuType, () => {
-      nextTick(requestAnimationResize)
-      setTimeout(() => multiDelayResize(MENU_RESIZE_DELAYS), 0)
-    })
-  }
+      nextTick(requestAnimationResize);
+      setTimeout(() => multiDelayResize(MENU_RESIZE_DELAYS), 0);
+    });
+  };
 
   const cleanupMenuWatchers = () => {
-    menuOpenStopHandle?.()
-    menuTypeStopHandle?.()
-    menuOpenStopHandle = null
-    menuTypeStopHandle = null
-  }
+    menuOpenStopHandle?.();
+    menuTypeStopHandle?.();
+    menuOpenStopHandle = null;
+    menuTypeStopHandle = null;
+  };
 
   // 主题变化时重新设置图表选项
-  let themeStopHandle: (() => void) | null = null
+  let themeStopHandle: (() => void) | null = null;
 
   const setupThemeWatcher = () => {
     if (autoTheme) {
       themeStopHandle = watch(isDark, () => {
         // 更新空状态样式
-        emptyStateManager.updateStyle()
+        emptyStateManager.updateStyle();
 
         if (chart && !isDestroyed) {
           // 使用 requestAnimationFrame 优化主题更新
           requestAnimationFrame(() => {
             if (chart && !isDestroyed) {
-              const currentOptions = chart.getOption()
+              const currentOptions = chart.getOption();
               if (currentOptions) {
-                updateChart(currentOptions as EChartsOption)
+                updateChart(currentOptions as EChartsOption);
               }
             }
-          })
+          });
         }
-      })
+      });
     }
-  }
+  };
 
   const cleanupThemeWatcher = () => {
-    themeStopHandle?.()
-    themeStopHandle = null
-  }
+    themeStopHandle?.();
+    themeStopHandle = null;
+  };
 
   // 样式生成器 - 统一的样式配置
-  const createLineStyle = (color: string, width = 1, type?: 'solid' | 'dashed') => ({
+  const createLineStyle = (color: string, width = 1, type?: "solid" | "dashed") => ({
     color,
     width,
-    ...(type && { type })
-  })
+    ...(type && { type }),
+  });
 
   // 缓存样式配置以减少重复计算
   const styleCache = {
     axisLine: null as any,
     splitLine: null as any,
     axisLabel: null as any,
-    lastDarkValue: isDark.value
-  }
+    lastDarkValue: isDark.value,
+  };
 
   const clearStyleCache = () => {
-    styleCache.axisLine = null
-    styleCache.splitLine = null
-    styleCache.axisLabel = null
-    styleCache.lastDarkValue = isDark.value
-  }
+    styleCache.axisLine = null;
+    styleCache.splitLine = null;
+    styleCache.axisLabel = null;
+    styleCache.lastDarkValue = isDark.value;
+  };
 
   // 坐标轴线样式
   const getAxisLineStyle = (show: boolean = true) => {
     if (styleCache.lastDarkValue !== isDark.value) {
-      clearStyleCache()
+      clearStyleCache();
     }
     if (!styleCache.axisLine) {
       styleCache.axisLine = {
         show,
-        lineStyle: createLineStyle(isDark.value ? '#444' : '#EDEDED')
-      }
+        lineStyle: createLineStyle(isDark.value ? "#444" : "#EDEDED"),
+      };
     }
-    return styleCache.axisLine
-  }
+    return styleCache.axisLine;
+  };
 
   // 分割线样式
   const getSplitLineStyle = (show: boolean = true) => {
     if (styleCache.lastDarkValue !== isDark.value) {
-      clearStyleCache()
+      clearStyleCache();
     }
     if (!styleCache.splitLine) {
       styleCache.splitLine = {
         show,
-        lineStyle: createLineStyle(isDark.value ? '#444' : '#EDEDED', 1, 'dashed')
-      }
+        lineStyle: createLineStyle(isDark.value ? "#444" : "#EDEDED", 1, "dashed"),
+      };
     }
-    return styleCache.splitLine
-  }
+    return styleCache.splitLine;
+  };
 
   // 坐标轴标签样式
   const getAxisLabelStyle = (show: boolean = true) => {
     if (styleCache.lastDarkValue !== isDark.value) {
-      clearStyleCache()
+      clearStyleCache();
     }
     if (!styleCache.axisLabel) {
-      const { fontColor, fontSize } = useChartOps()
+      const { fontColor, fontSize } = useChartOps();
       styleCache.axisLabel = {
         show,
         color: fontColor,
-        fontSize
-      }
+        fontSize,
+      };
     }
-    return styleCache.axisLabel
-  }
+    return styleCache.axisLabel;
+  };
 
   // 坐标轴刻度样式（静态配置，无需缓存）
   const getAxisTickStyle = () => ({
-    show: false
-  })
+    show: false,
+  });
 
   // 获取动画配置
   const getAnimationConfig = (animationDelay: number = 50, animationDuration: number = 1500) => ({
     animationDelay: (idx: number) => idx * animationDelay + 200,
     animationDuration: (idx: number) => animationDuration - idx * 50,
-    animationEasing: 'quarticOut' as const
-  })
+    animationEasing: "quarticOut" as const,
+  });
 
   // 获取统一的 tooltip 配置
-  const getTooltipStyle = (trigger: 'item' | 'axis' = 'axis', customOptions: any = {}) => ({
+  const getTooltipStyle = (trigger: "item" | "axis" = "axis", customOptions: any = {}) => ({
     trigger,
-    backgroundColor: isDark.value ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.9)',
-    borderColor: isDark.value ? '#333' : '#ddd',
+    backgroundColor: isDark.value ? "rgba(0, 0, 0, 0.8)" : "rgba(255, 255, 255, 0.9)",
+    borderColor: isDark.value ? "#333" : "#ddd",
     borderWidth: 1,
     textStyle: {
-      color: isDark.value ? '#fff' : '#333'
+      color: isDark.value ? "#fff" : "#333",
     },
-    ...customOptions
-  })
+    ...customOptions,
+  });
 
   // 获取统一的图例配置
   const getLegendStyle = (
-    position: 'bottom' | 'top' | 'left' | 'right' = 'bottom',
+    position: "bottom" | "top" | "left" | "right" = "bottom",
     customOptions: any = {}
   ) => {
     const baseConfig = {
       textStyle: {
-        color: isDark.value ? '#fff' : '#333'
+        color: isDark.value ? "#fff" : "#333",
       },
       itemWidth: 12,
       itemHeight: 12,
       itemGap: 20,
-      ...customOptions
-    }
+      ...customOptions,
+    };
 
     // 根据位置设置不同的配置
     switch (position) {
-      case 'bottom':
+      case "bottom":
         return {
           ...baseConfig,
           bottom: 0,
-          left: 'center',
-          orient: 'horizontal',
-          icon: 'roundRect'
-        }
-      case 'top':
+          left: "center",
+          orient: "horizontal",
+          icon: "roundRect",
+        };
+      case "top":
         return {
           ...baseConfig,
           top: 0,
-          left: 'center',
-          orient: 'horizontal',
-          icon: 'roundRect'
-        }
-      case 'left':
+          left: "center",
+          orient: "horizontal",
+          icon: "roundRect",
+        };
+      case "left":
         return {
           ...baseConfig,
           left: 0,
-          top: 'center',
-          orient: 'vertical',
-          icon: 'roundRect'
-        }
-      case 'right':
+          top: "center",
+          orient: "vertical",
+          icon: "roundRect",
+        };
+      case "right":
         return {
           ...baseConfig,
           right: 0,
-          top: 'center',
-          orient: 'vertical',
-          icon: 'roundRect'
-        }
+          top: "center",
+          orient: "vertical",
+          icon: "roundRect",
+        };
       default:
-        return baseConfig
+        return baseConfig;
     }
-  }
+  };
 
   // 根据图例位置计算 grid 配置
   const getGridWithLegend = (
     showLegend: boolean,
-    legendPosition: 'bottom' | 'top' | 'left' | 'right' = 'bottom',
+    legendPosition: "bottom" | "top" | "left" | "right" = "bottom",
     baseGrid: any = {}
   ) => {
     const defaultGrid = {
@@ -346,43 +346,43 @@ export function useChart(options: UseChartOptions = {}) {
       bottom: 8,
       left: 0,
       containLabel: true,
-      ...baseGrid
-    }
+      ...baseGrid,
+    };
 
     if (!showLegend) {
-      return defaultGrid
+      return defaultGrid;
     }
 
     // 根据图例位置调整 grid
     switch (legendPosition) {
-      case 'bottom':
+      case "bottom":
         return {
           ...defaultGrid,
-          bottom: 40
-        }
-      case 'top':
+          bottom: 40,
+        };
+      case "top":
         return {
           ...defaultGrid,
-          top: 40
-        }
-      case 'left':
+          top: 40,
+        };
+      case "left":
         return {
           ...defaultGrid,
-          left: 120
-        }
-      case 'right':
+          left: 120,
+        };
+      case "right":
         return {
           ...defaultGrid,
-          right: 120
-        }
+          right: 120,
+        };
       default:
-        return defaultGrid
+        return defaultGrid;
     }
-  }
+  };
 
   // 创建IntersectionObserver
   const createIntersectionObserver = () => {
-    if (intersectionObserver || !chartRef.value) return
+    if (intersectionObserver || !chartRef.value) return;
 
     intersectionObserver = new IntersectionObserver(
       (entries) => {
@@ -394,65 +394,65 @@ export function useChart(options: UseChartOptions = {}) {
                 try {
                   // 元素变为可见，初始化图表
                   if (!chart) {
-                    chart = echarts.init(entry.target as HTMLElement)
+                    chart = echarts.init(entry.target as HTMLElement);
                   }
 
                   // 触发自定义事件，让组件处理动画逻辑
-                  const event = new CustomEvent('chartVisible', {
-                    detail: { options: pendingOptions }
-                  })
-                  entry.target.dispatchEvent(event)
+                  const event = new CustomEvent("chartVisible", {
+                    detail: { options: pendingOptions },
+                  });
+                  entry.target.dispatchEvent(event);
 
-                  pendingOptions = null
-                  cleanupIntersectionObserver()
+                  pendingOptions = null;
+                  cleanupIntersectionObserver();
                 } catch (error) {
-                  console.error('图表初始化失败:', error)
+                  console.error("图表初始化失败:", error);
                 }
               }
-            })
+            });
           }
-        })
+        });
       },
       { threshold }
-    )
+    );
 
-    intersectionObserver.observe(chartRef.value)
-  }
+    intersectionObserver.observe(chartRef.value);
+  };
 
   // 清理IntersectionObserver
   const cleanupIntersectionObserver = () => {
     if (intersectionObserver) {
-      intersectionObserver.disconnect()
-      intersectionObserver = null
+      intersectionObserver.disconnect();
+      intersectionObserver = null;
     }
-  }
+  };
 
   // 检查容器是否可见
   const isContainerVisible = (element: HTMLElement): boolean => {
-    const rect = element.getBoundingClientRect()
-    return rect.width > 0 && rect.height > 0 && rect.top < window.innerHeight && rect.bottom > 0
-  }
+    const rect = element.getBoundingClientRect();
+    return rect.width > 0 && rect.height > 0 && rect.top < window.innerHeight && rect.bottom > 0;
+  };
 
   // 图表初始化核心逻辑
   const performChartInit = (options: EChartsOption) => {
     if (!chart && chartRef.value && !isDestroyed) {
-      chart = echarts.init(chartRef.value)
+      chart = echarts.init(chartRef.value);
       // 图表创建后立即设置监听器
-      setupMenuWatchers()
-      setupThemeWatcher()
+      setupMenuWatchers();
+      setupThemeWatcher();
     }
     if (chart && !isDestroyed) {
-      chart.setOption(options)
-      pendingOptions = null
+      chart.setOption(options);
+      pendingOptions = null;
     }
-  }
+  };
 
   // 空状态管理器
   const emptyStateManager = {
     create: () => {
-      if (!chartRef.value || emptyStateDiv) return
+      if (!chartRef.value || emptyStateDiv) return;
 
-      emptyStateDiv = document.createElement('div')
+      emptyStateDiv = document.createElement("div");
       emptyStateDiv.style.cssText = `
         position: absolute;
         top: 0;
@@ -464,141 +464,141 @@ export function useChart(options: UseChartOptions = {}) {
         align-items: center;
         justify-content: center;
         font-size: 12px;
-        color: ${isDark.value ? '#555555' : '#B3B2B2'};
+        color: ${isDark.value ? "#555555" : "#B3B2B2"};
         background: transparent;
         z-index: 10;
-      `
-      emptyStateDiv.innerHTML = `<span>暂无数据</span>`
+      `;
+      emptyStateDiv.innerHTML = `<span>暂无数据</span>`;
 
       // 确保父容器有相对定位
       if (
-        chartRef.value.style.position !== 'relative' &&
-        chartRef.value.style.position !== 'absolute'
+        chartRef.value.style.position !== "relative" &&
+        chartRef.value.style.position !== "absolute"
       ) {
-        chartRef.value.style.position = 'relative'
+        chartRef.value.style.position = "relative";
       }
 
-      chartRef.value.appendChild(emptyStateDiv)
+      chartRef.value.appendChild(emptyStateDiv);
     },
 
     remove: () => {
       if (emptyStateDiv && chartRef.value) {
-        chartRef.value.removeChild(emptyStateDiv)
-        emptyStateDiv = null
+        chartRef.value.removeChild(emptyStateDiv);
+        emptyStateDiv = null;
       }
     },
 
     updateStyle: () => {
       if (emptyStateDiv) {
-        emptyStateDiv.style.color = isDark.value ? '#666' : '#999'
+        emptyStateDiv.style.color = isDark.value ? "#666" : "#999";
       }
-    }
-  }
+    },
+  };
 
   // 初始化图表
   const initChart = (options: EChartsOption = {}, isEmpty: boolean = false) => {
-    if (!chartRef.value || isDestroyed) return
+    if (!chartRef.value || isDestroyed) return;
 
-    const mergedOptions = { ...initOptions, ...options }
+    const mergedOptions = { ...initOptions, ...options };
 
     try {
       if (isEmpty) {
         // 处理空数据情况 - 显示自定义空状态div
         if (chart) {
-          chart.clear()
+          chart.clear();
         }
-        emptyStateManager.create()
-        return
+        emptyStateManager.create();
+        return;
       } else {
         // 有数据时移除空状态div
-        emptyStateManager.remove()
+        emptyStateManager.remove();
       }
 
       if (isContainerVisible(chartRef.value)) {
         // 容器可见，正常初始化
         if (initDelay > 0) {
-          setTimeout(() => performChartInit(mergedOptions), initDelay)
+          setTimeout(() => performChartInit(mergedOptions), initDelay);
         } else {
-          performChartInit(mergedOptions)
+          performChartInit(mergedOptions);
         }
       } else {
         // 容器不可见，保存选项并设置监听器
-        pendingOptions = mergedOptions
-        createIntersectionObserver()
+        pendingOptions = mergedOptions;
+        createIntersectionObserver();
       }
     } catch (error) {
-      console.error('图表初始化失败:', error)
+      console.error("图表初始化失败:", error);
     }
-  }
+  };
 
   // 更新图表
   const updateChart = (options: EChartsOption) => {
-    if (isDestroyed) return
+    if (isDestroyed) return;
 
     try {
       if (!chart) {
         // 如果图表不存在，先初始化
-        initChart(options)
-        return
+        initChart(options);
+        return;
       }
-      chart.setOption(options)
+      chart.setOption(options);
     } catch (error) {
-      console.error('图表更新失败:', error)
+      console.error("图表更新失败:", error);
     }
-  }
+  };
 
   // 处理窗口大小变化
   const handleResize = () => {
     if (chart && !isDestroyed) {
       try {
-        chart.resize()
+        chart.resize();
       } catch (error) {
-        console.error('图表resize失败:', error)
+        console.error("图表resize失败:", error);
       }
     }
-  }
+  };
 
   // 销毁图表
   const destroyChart = () => {
-    isDestroyed = true
+    isDestroyed = true;
 
     if (chart) {
       try {
-        chart.dispose()
+        chart.dispose();
       } catch (error) {
-        console.error('图表销毁失败:', error)
+        console.error("图表销毁失败:", error);
       } finally {
-        chart = null
+        chart = null;
       }
     }
 
     // 清理所有监听器和资源
-    cleanupMenuWatchers()
-    cleanupThemeWatcher()
-    emptyStateManager.remove()
-    cleanupIntersectionObserver()
-    clearTimers()
-    clearStyleCache()
-    pendingOptions = null
-  }
+    cleanupMenuWatchers();
+    cleanupThemeWatcher();
+    emptyStateManager.remove();
+    cleanupIntersectionObserver();
+    clearTimers();
+    clearStyleCache();
+    pendingOptions = null;
+  };
 
   // 获取图表实例
-  const getChartInstance = () => chart
+  const getChartInstance = () => chart;
 
   // 获取图表是否已初始化
-  const isChartInitialized = () => chart !== null
+  const isChartInitialized = () => chart !== null;
 
   onMounted(() => {
-    window.addEventListener('resize', debouncedResize)
-  })
+    window.addEventListener("resize", debouncedResize);
+  });
 
   onBeforeUnmount(() => {
-    window.removeEventListener('resize', debouncedResize)
-  })
+    window.removeEventListener("resize", debouncedResize);
+  });
 
   onUnmounted(() => {
-    destroyChart()
-  })
+    destroyChart();
+  });
 
   return {
     isDark,
@@ -618,24 +618,24 @@ export function useChart(options: UseChartOptions = {}) {
     getTooltipStyle,
     getLegendStyle,
     useChartOps,
-    getGridWithLegend
-  }
+    getGridWithLegend,
+  };
 }
 
 // 高级图表组件抽象
 interface UseChartComponentOptions<T extends BaseChartProps> {
   /** Props响应式对象 */
-  props: T
+  props: T;
   /** 图表配置生成函数 */
-  generateOptions: () => EChartsOption
+  generateOptions: () => EChartsOption;
   /** 空数据检查函数 */
-  checkEmpty?: () => boolean
+  checkEmpty?: () => boolean;
   /** 自定义监听的响应式数据 */
-  watchSources?: (() => any)[]
+  watchSources?: (() => any)[];
   /** 自定义可视事件处理 */
-  onVisible?: () => void
+  onVisible?: () => void;
   /** useChart选项 */
-  chartOptions?: UseChartOptions
+  chartOptions?: UseChartOptions;
 }
 
 export function useChartComponent<T extends BaseChartProps>(options: UseChartComponentOptions<T>) {
@@ -645,18 +645,18 @@ export function useChartComponent<T extends BaseChartProps>(options: UseChartCom
     checkEmpty,
     watchSources = [],
     onVisible,
-    chartOptions = {}
-  } = options
+    chartOptions = {},
+  } = options;
 
-  const chart = useChart(chartOptions)
-  const { chartRef, initChart, isDark, emptyStateManager } = chart
+  const chart = useChart(chartOptions);
+  const { chartRef, initChart, isDark, emptyStateManager } = chart;
 
   // 检查是否为空数据
   const isEmpty = computed(() => {
-    if (props.isEmpty) return true
-    if (checkEmpty) return checkEmpty()
-    return false
-  })
+    if (props.isEmpty) return true;
+    if (checkEmpty) return checkEmpty();
+    return false;
+  });
 
   // 更新图表
   const updateChart = () => {
@@ -664,82 +664,82 @@ export function useChartComponent<T extends BaseChartProps>(options: UseChartCom
       if (isEmpty.value) {
         // 处理空数据情况 - 显示自定义空状态div
         if (chart.getChartInstance()) {
-          chart.getChartInstance()?.clear()
+          chart.getChartInstance()?.clear();
         }
-        emptyStateManager.create()
+        emptyStateManager.create();
       } else {
         // 有数据时移除空状态div并初始化图表
-        emptyStateManager.remove()
-        initChart(generateOptions())
+        emptyStateManager.remove();
+        initChart(generateOptions());
       }
-    })
-  }
+    });
+  };
 
   // 处理图表进入可视区域时的逻辑
   const handleChartVisible = () => {
     if (onVisible) {
-      onVisible()
+      onVisible();
     } else {
-      updateChart()
+      updateChart();
     }
-  }
+  };
 
   // 存储监听器停止函数
-  const stopHandles: (() => void)[] = []
+  const stopHandles: (() => void)[] = [];
 
   // 设置数据监听
   const setupWatchers = () => {
     // 监听自定义数据源
     if (watchSources.length > 0) {
-      const stopHandle = watch(watchSources, updateChart, { deep: true })
-      stopHandles.push(stopHandle)
+      const stopHandle = watch(watchSources, updateChart, { deep: true });
+      stopHandles.push(stopHandle);
     }
 
     // 监听主题变化
     const themeStopHandle = watch(isDark, () => {
-      emptyStateManager.updateStyle()
-      updateChart()
-    })
-    stopHandles.push(themeStopHandle)
-  }
+      emptyStateManager.updateStyle();
+      updateChart();
+    });
+    stopHandles.push(themeStopHandle);
+  };
 
   // 清理所有监听器
   const cleanupWatchers = () => {
-    stopHandles.forEach((stop) => stop())
-    stopHandles.length = 0
-  }
+    stopHandles.forEach((stop) => stop());
+    stopHandles.length = 0;
+  };
 
   // 设置生命周期
   const setupLifecycle = () => {
     onMounted(() => {
-      updateChart()
+      updateChart();
 
       // 监听图表可见事件
       if (chartRef.value) {
-        chartRef.value.addEventListener('chartVisible', handleChartVisible)
+        chartRef.value.addEventListener("chartVisible", handleChartVisible);
       }
-    })
+    });
 
     onBeforeUnmount(() => {
       // 清理事件监听器
       if (chartRef.value) {
-        chartRef.value.removeEventListener('chartVisible', handleChartVisible)
+        chartRef.value.removeEventListener("chartVisible", handleChartVisible);
       }
       // 清理所有监听器
-      cleanupWatchers()
+      cleanupWatchers();
       // 清理空状态div
-      emptyStateManager.remove()
-    })
-  }
+      emptyStateManager.remove();
+    });
+  };
 
   // 初始化
-  setupWatchers()
-  setupLifecycle()
+  setupWatchers();
+  setupLifecycle();
 
   return {
     ...chart,
     isEmpty,
     updateChart,
-    handleChartVisible
-  }
+    handleChartVisible,
+  };
 }
diff --git a/frontend/new-web/src/hooks/core/useCommon.ts b/frontend/new-web/src/hooks/core/useCommon.ts
index c9368543..6f4989e9 100644
--- a/frontend/new-web/src/hooks/core/useCommon.ts
+++ b/frontend/new-web/src/hooks/core/useCommon.ts
@@ -12,55 +12,55 @@
  * 4. 平滑滚动 - 支持平滑滚动动画效果
  *
  * @module useCommon
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
-import { computed } from 'vue'
-import { useMenuStore } from '@/store/modules/menu'
-import { useSettingStore } from '@/store/modules/setting'
+import { computed } from "vue";
+import { useMenuStore } from "@/store/modules/menu.store";
+import { useSettingsStore } from "@/store/modules/setting.store";
 
 export function useCommon() {
-  const menuStore = useMenuStore()
-  const settingStore = useSettingStore()
+  const menuStore = useMenuStore();
+  const settingStore = useSettingsStore();
 
   /**
    * 首页路径
    * 从菜单 store 中获取配置的首页路径
    */
-  const homePath = computed(() => menuStore.getHomePath())
+  const homePath = computed(() => menuStore.getHomePath());
 
   /**
    * 刷新当前页面
    * 通过切换 setting store 中的 refresh 状态触发页面重新渲染
    */
   const refresh = () => {
-    settingStore.reload()
-  }
+    settingStore.reload();
+  };
 
   /**
    * 滚动到页面顶部
    * 查找主内容区域并将其滚动位置重置为顶部
    */
   const scrollToTop = () => {
-    const scrollContainer = document.getElementById('app-main')
+    const scrollContainer = document.getElementById("app-main");
     if (scrollContainer) {
-      scrollContainer.scrollTop = 0
+      scrollContainer.scrollTop = 0;
     }
-  }
+  };
 
   /**
    * 平滑滚动到页面顶部
    * 使用 smooth 行为实现平滑滚动效果
    */
   const smoothScrollToTop = () => {
-    const scrollContainer = document.getElementById('app-main')
+    const scrollContainer = document.getElementById("app-main");
     if (scrollContainer) {
       scrollContainer.scrollTo({
         top: 0,
-        behavior: 'smooth'
-      })
+        behavior: "smooth",
+      });
     }
-  }
+  };
 
   /**
    * 滚动到指定位置
@@ -68,20 +68,20 @@ export function useCommon() {
    * @param smooth 是否使用平滑滚动
    */
   const scrollTo = (top: number, smooth: boolean = false) => {
-    const scrollContainer = document.getElementById('app-main')
+    const scrollContainer = document.getElementById("app-main");
     if (scrollContainer) {
       scrollContainer.scrollTo({
         top,
-        behavior: smooth ? 'smooth' : 'auto'
-      })
+        behavior: smooth ? "smooth" : "auto",
+      });
     }
-  }
+  };
 
   return {
     homePath,
     refresh,
     scrollTo,
     scrollToTop,
-    smoothScrollToTop
-  }
+    smoothScrollToTop,
+  };
 }
diff --git a/frontend/new-web/src/hooks/core/useFastEnter.ts b/frontend/new-web/src/hooks/core/useFastEnter.ts
index 555eb658..c22438f1 100644
--- a/frontend/new-web/src/hooks/core/useFastEnter.ts
+++ b/frontend/new-web/src/hooks/core/useFastEnter.ts
@@ -12,44 +12,44 @@
  * 4. 宽度控制 - 提供最小显示宽度配置，支持响应式布局
  *
  * @module useFastEnter
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
-import { computed } from 'vue'
-import appConfig from '@/config'
-import type { FastEnterApplication, FastEnterQuickLink } from '@/types/config'
+import { computed } from "vue";
+import appConfig from "@/config";
+import type { FastEnterApplication, FastEnterQuickLink } from "@/types/config";
 
 export function useFastEnter() {
   // 获取快速入口配置
-  const fastEnterConfig = computed(() => appConfig.fastEnter)
+  const fastEnterConfig = computed(() => appConfig.fastEnter);
 
   // 获取启用的应用列表（按排序权重排序）
   const enabledApplications = computed<FastEnterApplication[]>(() => {
-    if (!fastEnterConfig.value?.applications) return []
+    if (!fastEnterConfig.value?.applications) return [];
 
     return fastEnterConfig.value.applications
       .filter((app) => app.enabled !== false)
-      .sort((a, b) => (a.order || 0) - (b.order || 0))
-  })
+      .sort((a, b) => (a.order || 0) - (b.order || 0));
+  });
 
   // 获取启用的快速链接（按排序权重排序）
   const enabledQuickLinks = computed<FastEnterQuickLink[]>(() => {
-    if (!fastEnterConfig.value?.quickLinks) return []
+    if (!fastEnterConfig.value?.quickLinks) return [];
 
     return fastEnterConfig.value.quickLinks
       .filter((link) => link.enabled !== false)
-      .sort((a, b) => (a.order || 0) - (b.order || 0))
-  })
+      .sort((a, b) => (a.order || 0) - (b.order || 0));
+  });
 
   // 获取最小显示宽度
   const minWidth = computed(() => {
-    return fastEnterConfig.value?.minWidth || 1200
-  })
+    return fastEnterConfig.value?.minWidth || 1200;
+  });
 
   return {
     fastEnterConfig,
     enabledApplications,
     enabledQuickLinks,
-    minWidth
-  }
+    minWidth,
+  };
 }
diff --git a/frontend/new-web/src/hooks/core/useHeaderBar.ts b/frontend/new-web/src/hooks/core/useHeaderBar.ts
index be107128..04e1a54d 100644
--- a/frontend/new-web/src/hooks/core/useHeaderBar.ts
+++ b/frontend/new-web/src/hooks/core/useHeaderBar.ts
@@ -12,28 +12,28 @@
  * 4. 响应式状态 - 所有状态自动响应配置和 store 变化
  *
  * @module useHeaderBar
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
-import { computed } from 'vue'
-import { storeToRefs } from 'pinia'
-import { useSettingStore } from '@/store/modules/setting'
-import { headerBarConfig } from '@/config/modules/headerBar'
-import { HeaderBarFeatureConfig } from '@/types'
+import { computed } from "vue";
+import { storeToRefs } from "pinia";
+import { useSettingsStore } from "@/store/modules/setting.store";
+import { headerBarConfig } from "@/config/modules/headerBar";
+import { HeaderBarFeatureConfig } from "@/types";
 
 /**
  * 顶部栏功能管理
  * @returns 顶部栏功能相关的状态和方法
  */
 export function useHeaderBar() {
-  const settingStore = useSettingStore()
+  const settingStore = useSettingsStore();
 
   // 获取顶部栏配置
-  const headerBarConfigRef = computed<HeaderBarFeatureConfig>(() => headerBarConfig)
+  const headerBarConfigRef = computed<HeaderBarFeatureConfig>(() => headerBarConfig);
 
   // 从store中获取相关状态
   const { showMenuButton, showFastEnter, showRefreshButton, showCrumbs, showLanguage } =
-    storeToRefs(settingStore)
+    storeToRefs(settingStore);
 
   /**
    * 检查特定功能是否启用
@@ -41,8 +41,8 @@ export function useHeaderBar() {
    * @returns 是否启用
    */
   const isFeatureEnabled = (feature: keyof HeaderBarFeatureConfig): boolean => {
-    return headerBarConfigRef.value[feature]?.enabled ?? false
-  }
+    return headerBarConfigRef.value[feature]?.enabled ?? false;
+  };
 
   /**
    * 获取功能配置信息
@@ -50,69 +50,69 @@ export function useHeaderBar() {
    * @returns 功能配置信息
    */
   const getFeatureConfig = (feature: keyof HeaderBarFeatureConfig) => {
-    return headerBarConfigRef.value[feature]
-  }
+    return headerBarConfigRef.value[feature];
+  };
 
   // 检查菜单按钮是否显示
   const shouldShowMenuButton = computed(() => {
-    return isFeatureEnabled('menuButton') && showMenuButton.value
-  })
+    return isFeatureEnabled("menuButton") && showMenuButton.value;
+  });
 
   // 检查刷新按钮是否显示
   const shouldShowRefreshButton = computed(() => {
-    return isFeatureEnabled('refreshButton') && showRefreshButton.value
-  })
+    return isFeatureEnabled("refreshButton") && showRefreshButton.value;
+  });
 
   // 检查快速入口是否显示
   const shouldShowFastEnter = computed(() => {
-    return isFeatureEnabled('fastEnter') && showFastEnter.value
-  })
+    return isFeatureEnabled("fastEnter") && showFastEnter.value;
+  });
 
   // 检查面包屑是否显示
   const shouldShowBreadcrumb = computed(() => {
-    return isFeatureEnabled('breadcrumb') && showCrumbs.value
-  })
+    return isFeatureEnabled("breadcrumb") && showCrumbs.value;
+  });
 
   // 检查全局搜索是否显示
   const shouldShowGlobalSearch = computed(() => {
-    return isFeatureEnabled('globalSearch')
-  })
+    return isFeatureEnabled("globalSearch");
+  });
 
   // 检查全屏按钮是否显示
   const shouldShowFullscreen = computed(() => {
-    return isFeatureEnabled('fullscreen')
-  })
+    return isFeatureEnabled("fullscreen");
+  });
 
   // 检查通知中心是否显示
   const shouldShowNotification = computed(() => {
-    return isFeatureEnabled('notification')
-  })
+    return isFeatureEnabled("notification");
+  });
 
   // 检查聊天功能是否显示
   const shouldShowChat = computed(() => {
-    return isFeatureEnabled('chat')
-  })
+    return isFeatureEnabled("chat");
+  });
 
   // 检查语言切换是否显示
   const shouldShowLanguage = computed(() => {
-    return isFeatureEnabled('language') && showLanguage.value
-  })
+    return isFeatureEnabled("language") && showLanguage.value;
+  });
 
   // 检查设置面板是否显示
   const shouldShowSettings = computed(() => {
-    return isFeatureEnabled('settings')
-  })
+    return isFeatureEnabled("settings");
+  });
 
   // 检查主题切换是否显示
   const shouldShowThemeToggle = computed(() => {
-    return isFeatureEnabled('themeToggle')
-  })
+    return isFeatureEnabled("themeToggle");
+  });
 
   // 获取快速入口的最小宽度
   const fastEnterMinWidth = computed(() => {
-    const config = getFeatureConfig('fastEnter')
-    return (config as any)?.minWidth || 1200
-  })
+    const config = getFeatureConfig("fastEnter");
+    return (config as any)?.minWidth || 1200;
+  });
 
   /**
    * 检查功能是否启用（别名）
@@ -120,8 +120,8 @@ export function useHeaderBar() {
    * @returns 是否启用
    */
   const isFeatureActive = (feature: keyof HeaderBarFeatureConfig): boolean => {
-    return isFeatureEnabled(feature)
-  }
+    return isFeatureEnabled(feature);
+  };
 
   /**
    * 获取功能配置（别名）
@@ -129,8 +129,8 @@ export function useHeaderBar() {
    * @returns 功能配置
    */
   const getFeatureInfo = (feature: keyof HeaderBarFeatureConfig) => {
-    return getFeatureConfig(feature)
-  }
+    return getFeatureConfig(feature);
+  };
 
   /**
    * 获取所有启用的功能列表
@@ -139,8 +139,8 @@ export function useHeaderBar() {
   const getEnabledFeatures = (): (keyof HeaderBarFeatureConfig)[] => {
     return Object.keys(headerBarConfigRef.value).filter(
       (key) => headerBarConfigRef.value[key as keyof HeaderBarFeatureConfig]?.enabled
-    ) as (keyof HeaderBarFeatureConfig)[]
-  }
+    ) as (keyof HeaderBarFeatureConfig)[];
+  };
 
   /**
    * 获取所有禁用的功能列表
@@ -149,24 +149,24 @@ export function useHeaderBar() {
   const getDisabledFeatures = (): (keyof HeaderBarFeatureConfig)[] => {
     return Object.keys(headerBarConfigRef.value).filter(
       (key) => !headerBarConfigRef.value[key as keyof HeaderBarFeatureConfig]?.enabled
-    ) as (keyof HeaderBarFeatureConfig)[]
-  }
+    ) as (keyof HeaderBarFeatureConfig)[];
+  };
 
   /**
    * 获取所有启用的功能（别名）
    * @returns 启用的功能列表
    */
   const getActiveFeatures = () => {
-    return getEnabledFeatures()
-  }
+    return getEnabledFeatures();
+  };
 
   /**
    * 获取所有禁用的功能（别名）
    * @returns 禁用的功能列表
    */
   const getInactiveFeatures = () => {
-    return getDisabledFeatures()
-  }
+    return getDisabledFeatures();
+  };
 
   return {
     // 配置
@@ -196,6 +196,6 @@ export function useHeaderBar() {
     getEnabledFeatures, // 获取所有启用的功能
     getDisabledFeatures, // 获取所有禁用的功能
     getActiveFeatures, // 获取所有启用的功能（别名）
-    getInactiveFeatures // 获取所有禁用的功能（别名）
-  }
+    getInactiveFeatures, // 获取所有禁用的功能（别名）
+  };
 }
diff --git a/frontend/new-web/src/hooks/core/useLayoutHeight.ts b/frontend/new-web/src/hooks/core/useLayoutHeight.ts
index 4b1171a4..4e7635fe 100644
--- a/frontend/new-web/src/hooks/core/useLayoutHeight.ts
+++ b/frontend/new-web/src/hooks/core/useLayoutHeight.ts
@@ -13,51 +13,51 @@
  * 5. 自动查找模式 - 提供通过 ID 自动查找元素的便捷方式
  *
  * @module useLayoutHeight
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
-import { ref, computed, watch, onMounted } from 'vue'
-import { useElementSize } from '@vueuse/core'
+import { ref, computed, watch, onMounted } from "vue";
+import { useElementSize } from "@vueuse/core";
 
 /**
  * 页面容器高度配置
  */
 interface LayoutHeightOptions {
   /** 额外的间距（默认 15px） */
-  extraSpacing?: number
+  extraSpacing?: number;
   /** 是否自动更新 CSS 变量（默认 true） */
-  updateCssVar?: boolean
+  updateCssVar?: boolean;
   /** CSS 变量名称（默认 '--art-full-height'） */
-  cssVarName?: string
+  cssVarName?: string;
 }
 
 export function useLayoutHeight(options: LayoutHeightOptions = {}) {
-  const { extraSpacing = 15, updateCssVar = true, cssVarName = '--art-full-height' } = options
+  const { extraSpacing = 15, updateCssVar = true, cssVarName = "--art-full-height" } = options;
 
   // 元素引用
-  const headerRef = ref<HTMLElement>()
-  const contentHeaderRef = ref<HTMLElement>()
+  const headerRef = ref<HTMLElement>();
+  const contentHeaderRef = ref<HTMLElement>();
 
   // 使用 VueUse 自动监听元素尺寸变化
-  const { height: headerHeight } = useElementSize(headerRef)
-  const { height: contentHeaderHeight } = useElementSize(contentHeaderRef)
+  const { height: headerHeight } = useElementSize(headerRef);
+  const { height: contentHeaderHeight } = useElementSize(contentHeaderRef);
 
   // 计算容器最小高度（响应式）
   const containerMinHeight = computed(() => {
-    const totalHeight = headerHeight.value + contentHeaderHeight.value + extraSpacing
-    return `calc(100vh - ${totalHeight}px)`
-  })
+    const totalHeight = headerHeight.value + contentHeaderHeight.value + extraSpacing;
+    return `calc(100vh - ${totalHeight}px)`;
+  });
 
   if (updateCssVar) {
     watch(
       containerMinHeight,
       (newHeight) => {
         requestAnimationFrame(() => {
-          document.documentElement.style.setProperty(cssVarName, newHeight)
-        })
+          document.documentElement.style.setProperty(cssVarName, newHeight);
+        });
       },
       { immediate: true }
-    )
+    );
   }
 
   return {
@@ -70,8 +70,8 @@ export function useLayoutHeight(options: LayoutHeightOptions = {}) {
     /** 头部高度（响应式） */
     headerHeight,
     /** 内容头部高度（响应式） */
-    contentHeaderHeight
-  }
+    contentHeaderHeight,
+  };
 }
 
 /**
@@ -84,54 +84,54 @@ export function useLayoutHeight(options: LayoutHeightOptions = {}) {
  * ```
  */
 export function useAutoLayoutHeight(
-  headerIds: string[] = ['app-header', 'app-content-header'],
+  headerIds: string[] = ["app-header", "app-content-header"],
   options: LayoutHeightOptions = {}
 ) {
-  const { extraSpacing = 15, updateCssVar = true, cssVarName = '--art-full-height' } = options
+  const { extraSpacing = 15, updateCssVar = true, cssVarName = "--art-full-height" } = options;
 
   // 创建元素引用
-  const headerRef = ref<HTMLElement>()
-  const contentHeaderRef = ref<HTMLElement>()
+  const headerRef = ref<HTMLElement>();
+  const contentHeaderRef = ref<HTMLElement>();
 
   // 使用 VueUse 自动监听元素尺寸变化
-  const { height: headerHeight } = useElementSize(headerRef)
-  const { height: contentHeaderHeight } = useElementSize(contentHeaderRef)
+  const { height: headerHeight } = useElementSize(headerRef);
+  const { height: contentHeaderHeight } = useElementSize(contentHeaderRef);
 
   // 计算容器最小高度（响应式）
   const containerMinHeight = computed(() => {
-    const totalHeight = headerHeight.value + contentHeaderHeight.value + extraSpacing
-    return `calc(100vh - ${totalHeight}px)`
-  })
+    const totalHeight = headerHeight.value + contentHeaderHeight.value + extraSpacing;
+    return `calc(100vh - ${totalHeight}px)`;
+  });
 
   if (updateCssVar) {
     watch(
       containerMinHeight,
       (newHeight) => {
         requestAnimationFrame(() => {
-          document.documentElement.style.setProperty(cssVarName, newHeight)
-        })
+          document.documentElement.style.setProperty(cssVarName, newHeight);
+        });
       },
       { immediate: true }
-    )
+    );
   }
 
   // 在 DOM 挂载后查找元素
   onMounted(() => {
-    if (typeof document !== 'undefined') {
+    if (typeof document !== "undefined") {
       // 使用 nextTick 确保 DOM 完全渲染
       requestAnimationFrame(() => {
-        const header = document.getElementById(headerIds[0])
-        const contentHeader = document.getElementById(headerIds[1])
+        const header = document.getElementById(headerIds[0]);
+        const contentHeader = document.getElementById(headerIds[1]);
 
         if (header) {
-          headerRef.value = header
+          headerRef.value = header;
         }
         if (contentHeader) {
-          contentHeaderRef.value = contentHeader
+          contentHeaderRef.value = contentHeader;
         }
-      })
+      });
     }
-  })
+  });
 
   return {
     /** 容器最小高度（响应式） */
@@ -143,6 +143,6 @@ export function useAutoLayoutHeight(
     /** 头部高度（响应式） */
     headerHeight,
     /** 内容头部高度（响应式） */
-    contentHeaderHeight
-  }
+    contentHeaderHeight,
+  };
 }
diff --git a/frontend/new-web/src/hooks/core/useTable.ts b/frontend/new-web/src/hooks/core/useTable.ts
index d9def4f9..9ebe5170 100644
--- a/frontend/new-web/src/hooks/core/useTable.ts
+++ b/frontend/new-web/src/hooks/core/useTable.ts
@@ -14,108 +14,108 @@
  * 6. 列配置管理 - 动态显示/隐藏列、列排序、配置持久化、批量操作（可选）
  *
  * @module useTable
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
-import { ref, reactive, computed, onMounted, onUnmounted, nextTick, readonly } from 'vue'
-import { useWindowSize } from '@vueuse/core'
-import { useTableColumns } from './useTableColumns'
-import type { ColumnOption } from '@/types/component'
+import { ref, reactive, computed, onMounted, onUnmounted, nextTick, readonly } from "vue";
+import { useWindowSize } from "@vueuse/core";
+import { useTableColumns } from "./useTableColumns";
+import type { ColumnOption } from "@/types/component";
 import {
   TableCache,
   CacheInvalidationStrategy,
-  type ApiResponse
-} from '../../utils/table/tableCache'
+  type ApiResponse,
+} from "../../utils/table/tableCache";
 import {
   type TableError,
   defaultResponseAdapter,
   extractTableData,
   updatePaginationFromResponse,
   createSmartDebounce,
-  createErrorHandler
-} from '../../utils/table/tableUtils'
-import { tableConfig } from '../../utils/table/tableConfig'
+  createErrorHandler,
+} from "../../utils/table/tableUtils";
+import { tableConfig } from "../../utils/table/tableConfig";
 
 // 类型推导工具类型
-type InferApiParams<T> = T extends (params: infer P) => any ? P : never
-type InferApiResponse<T> = T extends (params: any) => Promise<infer R> ? R : never
-type InferRecordType<T> = T extends Api.Common.PaginatedResponse<infer U> ? U : never
+type InferApiParams<T> = T extends (params: infer P) => any ? P : never;
+type InferApiResponse<T> = T extends (params: any) => Promise<infer R> ? R : never;
+type InferRecordType<T> = T extends PageResult<infer U> ? U : never;
 
 // 优化的配置接口 - 支持自动类型推导
 export interface UseTableConfig<
   TApiFn extends (params: any) => Promise<any> = (params: any) => Promise<any>,
   TRecord = InferRecordType<InferApiResponse<TApiFn>>,
   TParams = InferApiParams<TApiFn>,
-  TResponse = InferApiResponse<TApiFn>
+  TResponse = InferApiResponse<TApiFn>,
 > {
   // 核心配置
   core: {
     /** API 请求函数 */
-    apiFn: TApiFn
+    apiFn: TApiFn;
     /** 默认请求参数 */
-    apiParams?: Partial<TParams>
+    apiParams?: Partial<TParams>;
     /** 排除 apiParams 中的属性 */
-    excludeParams?: string[]
+    excludeParams?: string[];
     /** 是否立即加载数据 */
-    immediate?: boolean
+    immediate?: boolean;
     /** 列配置工厂函数 */
-    columnsFactory?: () => ColumnOption<TRecord>[]
+    columnsFactory?: () => ColumnOption<TRecord>[];
     /** 自定义分页字段映射 */
     paginationKey?: {
       /** 当前页码字段名，默认为 'current' */
-      current?: string
+      current?: string;
       /** 每页条数字段名，默认为 'size' */
-      size?: string
-    }
-  }
+      size?: string;
+    };
+  };
 
   // 数据处理
   transform?: {
     /** 数据转换函数 */
-    dataTransformer?: (data: TRecord[]) => TRecord[]
+    dataTransformer?: (data: TRecord[]) => TRecord[];
     /** 响应数据适配器 */
-    responseAdapter?: (response: TResponse) => ApiResponse<TRecord>
-  }
+    responseAdapter?: (response: TResponse) => ApiResponse<TRecord>;
+  };
 
   // 性能优化
   performance?: {
     /** 是否启用缓存 */
-    enableCache?: boolean
+    enableCache?: boolean;
     /** 缓存时间（毫秒） */
-    cacheTime?: number
+    cacheTime?: number;
     /** 防抖延迟时间（毫秒） */
-    debounceTime?: number
+    debounceTime?: number;
     /** 最大缓存条数限制 */
-    maxCacheSize?: number
-  }
+    maxCacheSize?: number;
+  };
 
   // 生命周期钩子
   hooks?: {
     /** 数据加载成功回调（仅网络请求成功时触发） */
-    onSuccess?: (data: TRecord[], response: ApiResponse<TRecord>) => void
+    onSuccess?: (data: TRecord[], response: ApiResponse<TRecord>) => void;
     /** 错误处理回调 */
-    onError?: (error: TableError) => void
+    onError?: (error: TableError) => void;
     /** 缓存命中回调（从缓存获取数据时触发） */
-    onCacheHit?: (data: TRecord[], response: ApiResponse<TRecord>) => void
+    onCacheHit?: (data: TRecord[], response: ApiResponse<TRecord>) => void;
     /** 加载状态变化回调 */
-    onLoading?: (loading: boolean) => void
+    onLoading?: (loading: boolean) => void;
     /** 重置表单回调函数 */
-    resetFormCallback?: () => void
-  }
+    resetFormCallback?: () => void;
+  };
 
   // 调试配置
   debug?: {
     /** 是否启用日志输出 */
-    enableLog?: boolean
+    enableLog?: boolean;
     /** 日志级别 */
-    logLevel?: 'info' | 'warn' | 'error'
-  }
+    logLevel?: "info" | "warn" | "error";
+  };
 }
 
 export function useTable<TApiFn extends (params: any) => Promise<any>>(
   config: UseTableConfig<TApiFn>
 ) {
-  return useTableImpl(config)
+  return useTableImpl(config);
 }
 
 /**
@@ -132,8 +132,8 @@ export function useTable<TApiFn extends (params: any) => Promise<any>>(
 function useTableImpl<TApiFn extends (params: any) => Promise<any>>(
   config: UseTableConfig<TApiFn>
 ) {
-  type TRecord = InferRecordType<InferApiResponse<TApiFn>>
-  type TParams = InferApiParams<TApiFn>
+  type TRecord = InferRecordType<InferApiResponse<TApiFn>>;
+  type TParams = InferApiParams<TApiFn>;
   const {
     core: {
       apiFn,
@@ -141,139 +141,138 @@ function useTableImpl<TApiFn extends (params: any) => Promise<any>>(
       excludeParams = [],
       immediate = true,
       columnsFactory,
-      paginationKey
+      paginationKey,
     },
     transform: { dataTransformer, responseAdapter = defaultResponseAdapter } = {},
     performance: {
       enableCache = false,
       cacheTime = 5 * 60 * 1000,
       debounceTime = 300,
-      maxCacheSize = 50
+      maxCacheSize = 50,
     } = {},
     hooks: { onSuccess, onError, onCacheHit, resetFormCallback } = {},
-    debug: { enableLog = false } = {}
-  } = config
+    debug: { enableLog = false } = {},
+  } = config;
 
   // 分页字段名配置：优先使用传入的配置，否则使用全局配置
-  const pageKey = paginationKey?.current || tableConfig.paginationKey.current
-  const sizeKey = paginationKey?.size || tableConfig.paginationKey.size
+  const pageKey = paginationKey?.current || tableConfig.paginationKey.current;
+  const sizeKey = paginationKey?.size || tableConfig.paginationKey.size;
 
   // 响应式触发器，用于手动更新缓存统计信息
-  const cacheUpdateTrigger = ref(0)
+  const cacheUpdateTrigger = ref(0);
 
   // 日志工具函数
   const logger = {
     log: (message: string, ...args: unknown[]) => {
       if (enableLog) {
-        console.log(`[useTable] ${message}`, ...args)
+        console.log(`[useTable] ${message}`, ...args);
       }
     },
     warn: (message: string, ...args: unknown[]) => {
       if (enableLog) {
-        console.warn(`[useTable] ${message}`, ...args)
+        console.warn(`[useTable] ${message}`, ...args);
       }
     },
     error: (message: string, ...args: unknown[]) => {
       if (enableLog) {
-        console.error(`[useTable] ${message}`, ...args)
+        console.error(`[useTable] ${message}`, ...args);
       }
-    }
-  }
+    },
+  };
 
   // 缓存实例
-  const cache = enableCache ? new TableCache<TRecord>(cacheTime, maxCacheSize, enableLog) : null
+  const cache = enableCache ? new TableCache<TRecord>(cacheTime, maxCacheSize, enableLog) : null;
 
   // 加载状态机
-  type LoadingState = 'idle' | 'loading' | 'success' | 'error'
-  const loadingState = ref<LoadingState>('idle')
-  const loading = computed(() => loadingState.value === 'loading')
+  type LoadingState = "idle" | "loading" | "success" | "error";
+  const loadingState = ref<LoadingState>("idle");
+  const loading = computed(() => loadingState.value === "loading");
 
   // 错误状态
-  const error = ref<TableError | null>(null)
+  const error = ref<TableError | null>(null);
 
   // 表格数据
-  const data = ref<TRecord[]>([])
+  const data = ref<TRecord[]>([]);
 
   // 请求取消控制器
-  let abortController: AbortController | null = null
+  let abortController: AbortController | null = null;
 
   // 缓存清理定时器
-  let cacheCleanupTimer: NodeJS.Timeout | null = null
+  let cacheCleanupTimer: NodeJS.Timeout | null = null;
 
   // 搜索参数
   const searchParams = reactive(
     Object.assign(
       {
         [pageKey]: 1,
-        [sizeKey]: 10
+        [sizeKey]: 10,
       },
       apiParams || {}
     ) as TParams
-  )
+  );
 
   // 分页配置
-  const pagination = reactive<Api.Common.PaginationParams>({
-    current: ((searchParams as Record<string, unknown>)[pageKey] as number) || 1,
-    size: ((searchParams as Record<string, unknown>)[sizeKey] as number) || 10,
-    total: 0
-  })
+  const pagination = reactive<PageQuery>({
+    page_no: ((searchParams as Record<string, unknown>)[pageKey] as number) || 1,
+    page_size: ((searchParams as Record<string, unknown>)[sizeKey] as number) || 10,
+  });
 
   // 移动端分页 (响应式)
-  const { width } = useWindowSize()
+  const { width } = useWindowSize();
   const mobilePagination = computed(() => ({
     ...pagination,
-    small: width.value < 768
-  }))
+    small: width.value < 768,
+  }));
 
   // 列配置
-  const columnConfig = columnsFactory ? useTableColumns<TRecord>(columnsFactory) : null
-  const columns = columnConfig?.columns
-  const columnChecks = columnConfig?.columnChecks
+  const columnConfig = columnsFactory ? useTableColumns<TRecord>(columnsFactory) : null;
+  const columns = columnConfig?.columns;
+  const columnChecks = columnConfig?.columnChecks;
 
   // 是否有数据
-  const hasData = computed(() => data.value.length > 0)
+  const hasData = computed(() => data.value.length > 0);
 
   // 缓存统计信息
   const cacheInfo = computed(() => {
     // 依赖触发器，确保缓存变化时重新计算
-    void cacheUpdateTrigger.value
-    if (!cache) return { total: 0, size: '0KB', hitRate: '0 avg hits' }
-    return cache.getStats()
-  })
+    void cacheUpdateTrigger.value;
+    if (!cache) return { total: 0, size: "0KB", hitRate: "0 avg hits" };
+    return cache.getStats();
+  });
 
   // 错误处理函数
-  const handleError = createErrorHandler(onError, enableLog)
+  const handleError = createErrorHandler(onError, enableLog);
 
   // 清理缓存，根据不同的业务场景选择性地清理缓存
   const clearCache = (strategy: CacheInvalidationStrategy, context?: string): void => {
-    if (!cache) return
+    if (!cache) return;
 
-    let clearedCount = 0
+    let clearedCount = 0;
 
     switch (strategy) {
       case CacheInvalidationStrategy.CLEAR_ALL:
-        cache.clear()
-        logger.log(`清空所有缓存 - ${context || ''}`)
-        break
+        cache.clear();
+        logger.log(`清空所有缓存 - ${context || ""}`);
+        break;
 
       case CacheInvalidationStrategy.CLEAR_CURRENT:
-        clearedCount = cache.clearCurrentSearch(searchParams)
-        logger.log(`清空当前搜索缓存 ${clearedCount} 条 - ${context || ''}`)
-        break
+        clearedCount = cache.clearCurrentSearch(searchParams);
+        logger.log(`清空当前搜索缓存 ${clearedCount} 条 - ${context || ""}`);
+        break;
 
       case CacheInvalidationStrategy.CLEAR_PAGINATION:
-        clearedCount = cache.clearPagination()
-        logger.log(`清空分页缓存 ${clearedCount} 条 - ${context || ''}`)
-        break
+        clearedCount = cache.clearPagination();
+        logger.log(`清空分页缓存 ${clearedCount} 条 - ${context || ""}`);
+        break;
 
       case CacheInvalidationStrategy.KEEP_ALL:
       default:
-        logger.log(`保持缓存不变 - ${context || ''}`)
-        break
+        logger.log(`保持缓存不变 - ${context || ""}`);
+        break;
     }
     // 手动触发缓存状态更新
-    cacheUpdateTrigger.value++
-  }
+    cacheUpdateTrigger.value++;
+  };
 
   // 获取数据的核心方法
   const fetchData = async (
@@ -282,16 +281,16 @@ function useTableImpl<TApiFn extends (params: any) => Promise<any>>(
   ): Promise<ApiResponse<TRecord>> => {
     // 取消上一个请求
     if (abortController) {
-      abortController.abort()
+      abortController.abort();
     }
 
     // 创建新的取消控制器
-    const currentController = new AbortController()
-    abortController = currentController
+    const currentController = new AbortController();
+    abortController = currentController;
 
     // 状态机：进入 loading 状态
-    loadingState.value = 'loading'
-    error.value = null
+    loadingState.value = "loading";
+    error.value = null;
 
     try {
       let requestParams = Object.assign(
@@ -299,363 +298,363 @@ function useTableImpl<TApiFn extends (params: any) => Promise<any>>(
         searchParams,
         {
           [pageKey]: pagination.current,
-          [sizeKey]: pagination.size
+          [sizeKey]: pagination.size,
         },
         params || {}
-      ) as TParams
+      ) as TParams;
 
       // 剔除不需要的参数
       if (excludeParams.length > 0) {
-        const filteredParams = { ...requestParams }
+        const filteredParams = { ...requestParams };
         excludeParams.forEach((key) => {
-          delete (filteredParams as Record<string, unknown>)[key]
-        })
-        requestParams = filteredParams as TParams
+          delete (filteredParams as Record<string, unknown>)[key];
+        });
+        requestParams = filteredParams as TParams;
       }
 
       // 检查缓存
       if (useCache && cache) {
-        const cachedItem = cache.get(requestParams)
+        const cachedItem = cache.get(requestParams);
         if (cachedItem) {
-          data.value = cachedItem.data
-          updatePaginationFromResponse(pagination, cachedItem.response)
+          data.value = cachedItem.data;
+          updatePaginationFromResponse(pagination, cachedItem.response);
 
           // 修复：避免重复设置相同的值，防止响应式循环更新
-          const paramsRecord = searchParams as Record<string, unknown>
+          const paramsRecord = searchParams as Record<string, unknown>;
           if (paramsRecord[pageKey] !== pagination.current) {
-            paramsRecord[pageKey] = pagination.current
+            paramsRecord[pageKey] = pagination.current;
           }
           if (paramsRecord[sizeKey] !== pagination.size) {
-            paramsRecord[sizeKey] = pagination.size
+            paramsRecord[sizeKey] = pagination.size;
           }
 
           // 状态机：缓存命中，进入 success 状态
-          loadingState.value = 'success'
+          loadingState.value = "success";
 
           // 缓存命中时触发专门的回调，而不是 onSuccess
           if (onCacheHit) {
-            onCacheHit(cachedItem.data, cachedItem.response)
+            onCacheHit(cachedItem.data, cachedItem.response);
           }
 
-          logger.log(`缓存命中`)
-          return cachedItem.response
+          logger.log(`缓存命中`);
+          return cachedItem.response;
         }
       }
 
-      const response = await apiFn(requestParams)
+      const response = await apiFn(requestParams);
 
       // 检查请求是否被取消
       if (currentController.signal.aborted) {
-        throw new Error('请求已取消')
+        throw new Error("请求已取消");
       }
 
       // 使用响应适配器转换为标准格式
-      const standardResponse = responseAdapter(response)
+      const standardResponse = responseAdapter(response);
 
       // 处理响应数据
-      let tableData = extractTableData(standardResponse)
+      let tableData = extractTableData(standardResponse);
 
       // 应用数据转换函数
       if (dataTransformer) {
-        tableData = dataTransformer(tableData)
+        tableData = dataTransformer(tableData);
       }
 
       // 更新状态
-      data.value = tableData
-      updatePaginationFromResponse(pagination, standardResponse)
+      data.value = tableData;
+      updatePaginationFromResponse(pagination, standardResponse);
 
       // 修复：避免重复设置相同的值，防止响应式循环更新
-      const paramsRecord = searchParams as Record<string, unknown>
+      const paramsRecord = searchParams as Record<string, unknown>;
       if (paramsRecord[pageKey] !== pagination.current) {
-        paramsRecord[pageKey] = pagination.current
+        paramsRecord[pageKey] = pagination.current;
       }
       if (paramsRecord[sizeKey] !== pagination.size) {
-        paramsRecord[sizeKey] = pagination.size
+        paramsRecord[sizeKey] = pagination.size;
       }
 
       // 缓存数据
       if (useCache && cache) {
-        cache.set(requestParams, tableData, standardResponse)
+        cache.set(requestParams, tableData, standardResponse);
         // 手动触发缓存状态更新
-        cacheUpdateTrigger.value++
-        logger.log(`数据已缓存`)
+        cacheUpdateTrigger.value++;
+        logger.log(`数据已缓存`);
       }
 
       // 状态机：请求成功，进入 success 状态
-      loadingState.value = 'success'
+      loadingState.value = "success";
 
       // 成功回调
       if (onSuccess) {
-        onSuccess(tableData, standardResponse)
+        onSuccess(tableData, standardResponse);
       }
 
-      return standardResponse
+      return standardResponse;
     } catch (err) {
-      if (err instanceof Error && err.message === '请求已取消') {
+      if (err instanceof Error && err.message === "请求已取消") {
         // 请求被取消，回到 idle 状态
-        loadingState.value = 'idle'
-        return { records: [], total: 0, current: 1, size: 10 }
+        loadingState.value = "idle";
+        return { records: [], total: 0, current: 1, size: 10 };
       }
 
       // 状态机：请求失败，进入 error 状态
-      loadingState.value = 'error'
-      data.value = []
-      const tableError = handleError(err, '获取表格数据失败')
-      throw tableError
+      loadingState.value = "error";
+      data.value = [];
+      const tableError = handleError(err, "获取表格数据失败");
+      throw tableError;
     } finally {
       // 只有当前控制器是活跃的才清空
       if (abortController === currentController) {
-        abortController = null
+        abortController = null;
       }
     }
-  }
+  };
 
   // 获取数据 (保持当前页)
   const getData = async (params?: Partial<TParams>): Promise<ApiResponse<TRecord> | void> => {
     try {
-      return await fetchData(params)
+      return await fetchData(params);
     } catch {
       // 错误已在 fetchData 中处理
-      return Promise.resolve()
+      return Promise.resolve();
     }
-  }
+  };
 
   // 分页获取数据 (重置到第一页) - 专门用于搜索场景
   const getDataByPage = async (params?: Partial<TParams>): Promise<ApiResponse<TRecord> | void> => {
-    pagination.current = 1
-    ;(searchParams as Record<string, unknown>)[pageKey] = 1
+    pagination.current = 1;
+    (searchParams as Record<string, unknown>)[pageKey] = 1;
 
     // 搜索时清空当前搜索条件的缓存，确保获取最新数据
-    clearCache(CacheInvalidationStrategy.CLEAR_CURRENT, '搜索数据')
+    clearCache(CacheInvalidationStrategy.CLEAR_CURRENT, "搜索数据");
 
     try {
-      return await fetchData(params, false) // 搜索时不使用缓存
+      return await fetchData(params, false); // 搜索时不使用缓存
     } catch {
       // 错误已在 fetchData 中处理
-      return Promise.resolve()
+      return Promise.resolve();
     }
-  }
+  };
 
   // 智能防抖搜索函数
-  const debouncedGetDataByPage = createSmartDebounce(getDataByPage, debounceTime)
+  const debouncedGetDataByPage = createSmartDebounce(getDataByPage, debounceTime);
 
   // 重置搜索参数
   const resetSearchParams = async (): Promise<void> => {
     // 取消防抖的搜索
-    debouncedGetDataByPage.cancel()
+    debouncedGetDataByPage.cancel();
 
     // 保存分页相关的默认值
-    const paramsRecord = searchParams as Record<string, unknown>
+    const paramsRecord = searchParams as Record<string, unknown>;
     const defaultPagination = {
       [pageKey]: 1,
-      [sizeKey]: (paramsRecord[sizeKey] as number) || 10
-    }
+      [sizeKey]: (paramsRecord[sizeKey] as number) || 10,
+    };
 
     // 清空所有搜索参数
     Object.keys(searchParams).forEach((key) => {
-      delete paramsRecord[key]
-    })
+      delete paramsRecord[key];
+    });
 
     // 重新设置默认参数
-    Object.assign(searchParams, apiParams || {}, defaultPagination)
+    Object.assign(searchParams, apiParams || {}, defaultPagination);
 
     // 重置分页
-    pagination.current = 1
-    pagination.size = defaultPagination[sizeKey] as number
+    pagination.current = 1;
+    pagination.size = defaultPagination[sizeKey] as number;
 
     // 清空错误状态
-    error.value = null
+    error.value = null;
 
     // 清空缓存
-    clearCache(CacheInvalidationStrategy.CLEAR_ALL, '重置搜索')
+    clearCache(CacheInvalidationStrategy.CLEAR_ALL, "重置搜索");
 
     // 重新获取数据
-    await getData()
+    await getData();
 
     // 执行重置回调
     if (resetFormCallback) {
-      await nextTick()
-      resetFormCallback()
+      await nextTick();
+      resetFormCallback();
     }
-  }
+  };
 
   // 替换搜索参数：适用于表单查询，避免旧字段残留
   const replaceSearchParams = (params?: Partial<TParams>): void => {
-    const paramsRecord = searchParams as Record<string, unknown>
-    const currentSize = pagination.size || ((paramsRecord[sizeKey] as number) ?? 10)
+    const paramsRecord = searchParams as Record<string, unknown>;
+    const currentSize = pagination.size || ((paramsRecord[sizeKey] as number) ?? 10);
 
     Object.keys(searchParams).forEach((key) => {
       if (key !== pageKey && key !== sizeKey) {
-        delete paramsRecord[key]
+        delete paramsRecord[key];
       }
-    })
+    });
 
     Object.assign(
       searchParams,
       {
         [pageKey]: 1,
-        [sizeKey]: currentSize
+        [sizeKey]: currentSize,
       },
       params || {}
-    )
+    );
 
-    pagination.current = 1
-    pagination.size = currentSize
-  }
+    pagination.current = 1;
+    pagination.size = currentSize;
+  };
 
   // 防重复调用的标志
-  let isCurrentChanging = false
+  let isCurrentChanging = false;
 
   // 处理分页大小变化
   const handleSizeChange = async (newSize: number): Promise<void> => {
-    if (newSize <= 0) return
+    if (newSize <= 0) return;
 
-    debouncedGetDataByPage.cancel()
+    debouncedGetDataByPage.cancel();
 
-    const paramsRecord = searchParams as Record<string, unknown>
-    pagination.size = newSize
-    pagination.current = 1
-    paramsRecord[sizeKey] = newSize
-    paramsRecord[pageKey] = 1
+    const paramsRecord = searchParams as Record<string, unknown>;
+    pagination.size = newSize;
+    pagination.current = 1;
+    paramsRecord[sizeKey] = newSize;
+    paramsRecord[pageKey] = 1;
 
-    clearCache(CacheInvalidationStrategy.CLEAR_CURRENT, '分页大小变化')
+    clearCache(CacheInvalidationStrategy.CLEAR_CURRENT, "分页大小变化");
 
-    await getData()
-  }
+    await getData();
+  };
 
   // 处理当前页变化
   const handleCurrentChange = async (newCurrent: number): Promise<void> => {
-    if (newCurrent <= 0) return
+    if (newCurrent <= 0) return;
 
     // 修复：防止重复调用
     if (isCurrentChanging) {
-      return
+      return;
     }
 
     // 修复：如果当前页没有变化，不需要重新请求
     if (pagination.current === newCurrent) {
-      logger.log('分页页码未变化，跳过请求')
-      return
+      logger.log("分页页码未变化，跳过请求");
+      return;
     }
 
     try {
-      isCurrentChanging = true
+      isCurrentChanging = true;
 
       // 修复：只更新必要的状态
-      const paramsRecord = searchParams as Record<string, unknown>
-      pagination.current = newCurrent
+      const paramsRecord = searchParams as Record<string, unknown>;
+      pagination.current = newCurrent;
       // 只有当 searchParams 的分页字段与新值不同时才更新
       if (paramsRecord[pageKey] !== newCurrent) {
-        paramsRecord[pageKey] = newCurrent
+        paramsRecord[pageKey] = newCurrent;
       }
 
-      await getData()
+      await getData();
     } finally {
-      isCurrentChanging = false
+      isCurrentChanging = false;
     }
-  }
+  };
 
   // 针对不同业务场景的刷新方法
 
   // 新增后刷新：回到第一页并清空分页缓存（适用于新增数据后）
   const refreshCreate = async (): Promise<void> => {
-    debouncedGetDataByPage.cancel()
-    pagination.current = 1
-    ;(searchParams as Record<string, unknown>)[pageKey] = 1
-    clearCache(CacheInvalidationStrategy.CLEAR_PAGINATION, '新增数据')
-    await getData()
-  }
+    debouncedGetDataByPage.cancel();
+    pagination.current = 1;
+    (searchParams as Record<string, unknown>)[pageKey] = 1;
+    clearCache(CacheInvalidationStrategy.CLEAR_PAGINATION, "新增数据");
+    await getData();
+  };
 
   // 更新后刷新：保持当前页，仅清空当前搜索缓存（适用于更新数据后）
   const refreshUpdate = async (): Promise<void> => {
-    clearCache(CacheInvalidationStrategy.CLEAR_CURRENT, '编辑数据')
-    await getData()
-  }
+    clearCache(CacheInvalidationStrategy.CLEAR_CURRENT, "编辑数据");
+    await getData();
+  };
 
   // 删除后刷新：智能处理页码，避免空页面（适用于删除数据后）
   const refreshRemove = async (): Promise<void> => {
-    const { current } = pagination
+    const { current } = pagination;
 
     // 清除缓存并获取最新数据
-    clearCache(CacheInvalidationStrategy.CLEAR_CURRENT, '删除数据')
-    await getData()
+    clearCache(CacheInvalidationStrategy.CLEAR_CURRENT, "删除数据");
+    await getData();
 
     // 如果当前页为空且不是第一页，回到上一页
     if (data.value.length === 0 && current > 1) {
-      pagination.current = current - 1
-      ;(searchParams as Record<string, unknown>)[pageKey] = current - 1
-      await getData()
+      pagination.current = current - 1;
+      (searchParams as Record<string, unknown>)[pageKey] = current - 1;
+      await getData();
     }
-  }
+  };
 
   // 全量刷新：清空所有缓存，重新获取数据（适用于手动刷新按钮）
   const refreshData = async (): Promise<void> => {
-    debouncedGetDataByPage.cancel()
-    clearCache(CacheInvalidationStrategy.CLEAR_ALL, '手动刷新')
-    await getData()
-  }
+    debouncedGetDataByPage.cancel();
+    clearCache(CacheInvalidationStrategy.CLEAR_ALL, "手动刷新");
+    await getData();
+  };
 
   // 轻量刷新：仅清空当前搜索条件的缓存，保持分页状态（适用于定时刷新）
   const refreshSoft = async (): Promise<void> => {
-    clearCache(CacheInvalidationStrategy.CLEAR_CURRENT, '软刷新')
-    await getData()
-  }
+    clearCache(CacheInvalidationStrategy.CLEAR_CURRENT, "软刷新");
+    await getData();
+  };
 
   // 取消当前请求
   const cancelRequest = (): void => {
     if (abortController) {
-      abortController.abort()
+      abortController.abort();
     }
-    debouncedGetDataByPage.cancel()
-  }
+    debouncedGetDataByPage.cancel();
+  };
 
   // 清空数据
   const clearData = (): void => {
-    data.value = []
-    error.value = null
-    clearCache(CacheInvalidationStrategy.CLEAR_ALL, '清空数据')
-  }
+    data.value = [];
+    error.value = null;
+    clearCache(CacheInvalidationStrategy.CLEAR_ALL, "清空数据");
+  };
 
   // 清理已过期的缓存条目，释放内存空间
   const clearExpiredCache = (): number => {
-    if (!cache) return 0
-    const cleanedCount = cache.cleanupExpired()
+    if (!cache) return 0;
+    const cleanedCount = cache.cleanupExpired();
     if (cleanedCount > 0) {
       // 手动触发缓存状态更新
-      cacheUpdateTrigger.value++
+      cacheUpdateTrigger.value++;
     }
-    return cleanedCount
-  }
+    return cleanedCount;
+  };
 
   // 设置定期清理过期缓存
   if (enableCache && cache) {
     cacheCleanupTimer = setInterval(() => {
-      const cleanedCount = cache.cleanupExpired()
+      const cleanedCount = cache.cleanupExpired();
       if (cleanedCount > 0) {
-        logger.log(`自动清理 ${cleanedCount} 条过期缓存`)
+        logger.log(`自动清理 ${cleanedCount} 条过期缓存`);
         // 手动触发缓存状态更新
-        cacheUpdateTrigger.value++
+        cacheUpdateTrigger.value++;
       }
-    }, cacheTime / 2) // 每半个缓存周期清理一次
+    }, cacheTime / 2); // 每半个缓存周期清理一次
   }
 
   // 挂载时自动加载数据
   if (immediate) {
     onMounted(async () => {
-      await getData()
-    })
+      await getData();
+    });
   }
 
   // 组件卸载时彻底清理
   onUnmounted(() => {
-    cancelRequest()
+    cancelRequest();
     if (cache) {
-      cache.clear()
+      cache.clear();
     }
     if (cacheCleanupTimer) {
-      clearInterval(cacheCleanupTimer)
+      clearInterval(cacheCleanupTimer);
     }
-  })
+  });
 
   // 优化的返回值结构
   return {
@@ -751,12 +750,12 @@ function useTableImpl<TApiFn extends (params: any) => Promise<any>>(
       /** 获取所有列配置 */
       getAllColumns: columnConfig.getAllColumns,
       /** 重置所有列配置到默认状态 */
-      resetColumns: columnConfig.resetColumns
-    })
-  }
+      resetColumns: columnConfig.resetColumns,
+    }),
+  };
 }
 
 // 重新导出类型和枚举，方便使用
-export { CacheInvalidationStrategy } from '../../utils/table/tableCache'
-export type { ApiResponse, CacheItem } from '../../utils/table/tableCache'
-export type { BaseRequestParams, TableError } from '../../utils/table/tableUtils'
+export { CacheInvalidationStrategy } from "../../utils/table/tableCache";
+export type { ApiResponse, CacheItem } from "../../utils/table/tableCache";
+export type { BaseRequestParams, TableError } from "../../utils/table/tableUtils";
diff --git a/frontend/new-web/src/hooks/core/useTableColumns.ts b/frontend/new-web/src/hooks/core/useTableColumns.ts
index 84b6e13a..b2c34526 100644
--- a/frontend/new-web/src/hooks/core/useTableColumns.ts
+++ b/frontend/new-web/src/hooks/core/useTableColumns.ts
@@ -29,27 +29,27 @@
  * ```
  *
  * @module useTableColumns
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
-import { ref, computed, watch } from 'vue'
-import { $t } from '@/locales'
-import type { ColumnOption } from '@/types/component'
+import { ref, computed, watch } from "vue";
+import { $t } from "@/locales";
+import type { ColumnOption } from "@/types/component";
 
 /**
  * 特殊列类型
  */
 const SPECIAL_COLUMNS: Record<string, { prop: string; label: string }> = {
-  selection: { prop: '__selection__', label: $t('table.column.selection') },
-  expand: { prop: '__expand__', label: $t('table.column.expand') },
-  index: { prop: '__index__', label: $t('table.column.index') }
-}
+  selection: { prop: "__selection__", label: $t("table.column.selection") },
+  expand: { prop: "__expand__", label: $t("table.column.expand") },
+  index: { prop: "__index__", label: $t("table.column.index") },
+};
 
 /**
  * 获取列的唯一标识
  */
 export const getColumnKey = <T>(col: ColumnOption<T>) =>
-  SPECIAL_COLUMNS[col.type as keyof typeof SPECIAL_COLUMNS]?.prop ?? (col.prop as string)
+  SPECIAL_COLUMNS[col.type as keyof typeof SPECIAL_COLUMNS]?.prop ?? (col.prop as string);
 
 /**
  * 获取列的显示状态
@@ -58,25 +58,25 @@ export const getColumnKey = <T>(col: ColumnOption<T>) =>
 export const getColumnVisibility = <T>(col: ColumnOption<T>): boolean => {
   // visible 优先级高于 checked
   if (col.visible !== undefined) {
-    return col.visible
+    return col.visible;
   }
   // 如果 visible 未定义，使用 checked，默认为 true
-  return col.checked ?? true
-}
+  return col.checked ?? true;
+};
 
 /**
  * 获取列的检查状态
  */
 export const getColumnChecks = <T>(columns: ColumnOption<T>[]) =>
   columns.map((col) => {
-    const special = col.type && SPECIAL_COLUMNS[col.type]
-    const visibility = getColumnVisibility(col)
+    const special = col.type && SPECIAL_COLUMNS[col.type];
+    const visibility = getColumnVisibility(col);
 
     if (special) {
-      return { ...col, prop: special.prop, label: special.label, checked: true, visible: true }
+      return { ...col, prop: special.prop, label: special.label, checked: true, visible: true };
     }
-    return { ...col, checked: visibility, visible: visibility }
-  })
+    return { ...col, checked: visibility, visible: visibility };
+  });
 
 /**
  * 动态列配置接口
@@ -87,18 +87,18 @@ export interface DynamicColumnConfig<T = any> {
    * @param column 列配置或列配置数组
    * @param index 可选的插入位置，默认末尾（批量时为第一个列的位置）
    */
-  addColumn: (column: ColumnOption<T> | ColumnOption<T>[], index?: number) => void
+  addColumn: (column: ColumnOption<T> | ColumnOption<T>[], index?: number) => void;
   /**
    * 删除列（支持单个或批量）
    * @param prop 列的唯一标识或标识数组
    */
-  removeColumn: (prop: string | string[]) => void
+  removeColumn: (prop: string | string[]) => void;
   /**
    * 切换列显示状态（支持单个或批量）
    * @param prop 列的唯一标识或标识数组
    * @param visible 可选的显示状态，默认取反
    */
-  toggleColumn: (prop: string | string[], visible?: boolean) => void
+  toggleColumn: (prop: string | string[], visible?: boolean) => void;
 
   /**
    * 更新列（支持单个或批量）
@@ -108,44 +108,44 @@ export interface DynamicColumnConfig<T = any> {
   updateColumn: (
     prop: string | Array<{ prop: string; updates: Partial<ColumnOption<T>> }>,
     updates?: Partial<ColumnOption<T>>
-  ) => void
+  ) => void;
   /**
    * 批量更新列（兼容旧版本，推荐使用 updateColumn 的数组模式）
    * @param updates 列更新配置
    * @deprecated 推荐使用 updateColumn 的数组模式
    */
-  batchUpdateColumns: (updates: Array<{ prop: string; updates: Partial<ColumnOption<T>> }>) => void
+  batchUpdateColumns: (updates: Array<{ prop: string; updates: Partial<ColumnOption<T>> }>) => void;
   /**
    * 重新排序列
    * @param fromIndex 源索引
    * @param toIndex 目标索引
    */
-  reorderColumns: (fromIndex: number, toIndex: number) => void
+  reorderColumns: (fromIndex: number, toIndex: number) => void;
   /**
    * 获取列配置
    * @param prop 列的唯一标识
    * @returns 列配置
    */
-  getColumnConfig: (prop: string) => ColumnOption<T> | undefined
+  getColumnConfig: (prop: string) => ColumnOption<T> | undefined;
   /**
    * 获取所有列配置
    * @returns 所有列配置
    */
-  getAllColumns: () => ColumnOption<T>[]
+  getAllColumns: () => ColumnOption<T>[];
   /**
    * 重置所有列
    */
-  resetColumns: () => void
+  resetColumns: () => void;
 }
 
 export function useTableColumns<T = any>(
   columnsFactory: () => ColumnOption<T>[]
 ): {
-  columns: any
-  columnChecks: any
+  columns: any;
+  columnChecks: any;
 } & DynamicColumnConfig<T> {
-  const dynamicColumns = ref<ColumnOption<T>[]>(columnsFactory())
-  const columnChecks = ref<ColumnOption<T>[]>(getColumnChecks(dynamicColumns.value))
+  const dynamicColumns = ref<ColumnOption<T>[]>(columnsFactory());
+  const columnChecks = ref<ColumnOption<T>[]>(getColumnChecks(dynamicColumns.value));
 
   // 当 dynamicColumns 变动时，重新生成 columnChecks 且保留已存在的显示状态
   watch(
@@ -153,36 +153,36 @@ export function useTableColumns<T = any>(
     (newCols) => {
       const visibilityMap = new Map(
         columnChecks.value.map((c) => [getColumnKey(c), getColumnVisibility(c)])
-      )
+      );
       const newChecks = getColumnChecks(newCols).map((c) => {
-        const key = getColumnKey(c)
-        const visibility = visibilityMap.has(key) ? visibilityMap.get(key) : getColumnVisibility(c)
+        const key = getColumnKey(c);
+        const visibility = visibilityMap.has(key) ? visibilityMap.get(key) : getColumnVisibility(c);
         return {
           ...c,
           checked: visibility,
-          visible: visibility
-        }
-      })
-      columnChecks.value = newChecks
+          visible: visibility,
+        };
+      });
+      columnChecks.value = newChecks;
     },
     { deep: true }
-  )
+  );
 
   // 当前显示列（基于 columnChecks 的 checked 或 visible）
   const columns = computed(() => {
-    const colMap = new Map(dynamicColumns.value.map((c) => [getColumnKey(c), c]))
+    const colMap = new Map(dynamicColumns.value.map((c) => [getColumnKey(c), c]));
     return columnChecks.value
       .filter((c) => getColumnVisibility(c))
       .map((c) => colMap.get(getColumnKey(c)))
-      .filter(Boolean) as ColumnOption<T>[]
-  })
+      .filter(Boolean) as ColumnOption<T>[];
+  });
 
   // 支持 updater 返回新数组或直接在传入数组上 mutate
   const setDynamicColumns = (updater: (cols: ColumnOption<T>[]) => void | ColumnOption<T>[]) => {
-    const copy = [...dynamicColumns.value]
-    const result = updater(copy)
-    dynamicColumns.value = Array.isArray(result) ? result : copy
-  }
+    const copy = [...dynamicColumns.value];
+    const result = updater(copy);
+    dynamicColumns.value = Array.isArray(result) ? result : copy;
+  };
 
   return {
     columns,
@@ -193,14 +193,14 @@ export function useTableColumns<T = any>(
      */
     addColumn: (column: ColumnOption<T> | ColumnOption<T>[], index?: number) =>
       setDynamicColumns((cols) => {
-        const next = [...cols]
-        const columnsToAdd = Array.isArray(column) ? column : [column]
+        const next = [...cols];
+        const columnsToAdd = Array.isArray(column) ? column : [column];
         const insertIndex =
-          typeof index === 'number' && index >= 0 && index <= next.length ? index : next.length
+          typeof index === "number" && index >= 0 && index <= next.length ? index : next.length;
 
         // 批量插入
-        next.splice(insertIndex, 0, ...columnsToAdd)
-        return next
+        next.splice(insertIndex, 0, ...columnsToAdd);
+        return next;
       }),
 
     /**
@@ -208,8 +208,8 @@ export function useTableColumns<T = any>(
      */
     removeColumn: (prop: string | string[]) =>
       setDynamicColumns((cols) => {
-        const propsToRemove = Array.isArray(prop) ? prop : [prop]
-        return cols.filter((c) => !propsToRemove.includes(getColumnKey(c)))
+        const propsToRemove = Array.isArray(prop) ? prop : [prop];
+        return cols.filter((c) => !propsToRemove.includes(getColumnKey(c)));
       }),
 
     /**
@@ -222,19 +222,19 @@ export function useTableColumns<T = any>(
       // 批量模式：prop 是数组
       if (Array.isArray(prop)) {
         setDynamicColumns((cols) => {
-          const map = new Map(prop.map((u) => [u.prop, u.updates]))
+          const map = new Map(prop.map((u) => [u.prop, u.updates]));
           return cols.map((c) => {
-            const key = getColumnKey(c)
-            const upd = map.get(key)
-            return upd ? { ...c, ...upd } : c
-          })
-        })
+            const key = getColumnKey(c);
+            const upd = map.get(key);
+            return upd ? { ...c, ...upd } : c;
+          });
+        });
       }
       // 单个模式：prop 是字符串
       else if (updates) {
         setDynamicColumns((cols) =>
           cols.map((c) => (getColumnKey(c) === prop ? { ...c, ...updates } : c))
-        )
+        );
       }
     },
 
@@ -242,27 +242,27 @@ export function useTableColumns<T = any>(
      * 切换列显示状态（支持单个或批量）
      */
     toggleColumn: (prop: string | string[], visible?: boolean) => {
-      const propsToToggle = Array.isArray(prop) ? prop : [prop]
-      const next = [...columnChecks.value]
+      const propsToToggle = Array.isArray(prop) ? prop : [prop];
+      const next = [...columnChecks.value];
 
       propsToToggle.forEach((p) => {
-        const i = next.findIndex((c) => getColumnKey(c) === p)
+        const i = next.findIndex((c) => getColumnKey(c) === p);
         if (i > -1) {
-          const currentVisibility = getColumnVisibility(next[i])
-          const newVisibility = visible ?? !currentVisibility
+          const currentVisibility = getColumnVisibility(next[i]);
+          const newVisibility = visible ?? !currentVisibility;
           // 同时更新 checked 和 visible 以保持兼容性
-          next[i] = { ...next[i], checked: newVisibility, visible: newVisibility }
+          next[i] = { ...next[i], checked: newVisibility, visible: newVisibility };
         }
-      })
+      });
 
-      columnChecks.value = next
+      columnChecks.value = next;
     },
 
     /**
      * 重置所有列
      */
     resetColumns: () => {
-      dynamicColumns.value = columnsFactory()
+      dynamicColumns.value = columnsFactory();
     },
 
     /**
@@ -271,12 +271,12 @@ export function useTableColumns<T = any>(
      */
     batchUpdateColumns: (updates) =>
       setDynamicColumns((cols) => {
-        const map = new Map(updates.map((u) => [u.prop, u.updates]))
+        const map = new Map(updates.map((u) => [u.prop, u.updates]));
         return cols.map((c) => {
-          const key = getColumnKey(c)
-          const upd = map.get(key)
-          return upd ? { ...c, ...upd } : c
-        })
+          const key = getColumnKey(c);
+          const upd = map.get(key);
+          return upd ? { ...c, ...upd } : c;
+        });
       }),
 
     /**
@@ -291,12 +291,12 @@ export function useTableColumns<T = any>(
           toIndex >= cols.length ||
           fromIndex === toIndex
         ) {
-          return cols
+          return cols;
         }
-        const next = [...cols]
-        const [moved] = next.splice(fromIndex, 1)
-        next.splice(toIndex, 0, moved)
-        return next
+        const next = [...cols];
+        const [moved] = next.splice(fromIndex, 1);
+        next.splice(toIndex, 0, moved);
+        return next;
       }),
 
     /**
@@ -307,6 +307,6 @@ export function useTableColumns<T = any>(
     /**
      * 获取所有列配置
      */
-    getAllColumns: () => [...dynamicColumns.value]
-  }
+    getAllColumns: () => [...dynamicColumns.value],
+  };
 }
diff --git a/frontend/new-web/src/hooks/core/useTableHeight.ts b/frontend/new-web/src/hooks/core/useTableHeight.ts
index 8fdf6dab..72127733 100644
--- a/frontend/new-web/src/hooks/core/useTableHeight.ts
+++ b/frontend/new-web/src/hooks/core/useTableHeight.ts
@@ -12,23 +12,23 @@
  * 4. 智能适配 - 无额外元素时自动使用 100% 高度
  *
  * @module useTableHeight
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
-import { computed, type Ref } from 'vue'
+import { computed, type Ref } from "vue";
 
 /**
  * 表格高度计算器配置接口
  */
 interface TableHeightOptions {
   /** 是否显示表格头部 */
-  showTableHeader: Ref<boolean>
+  showTableHeader: Ref<boolean>;
   /** 分页器高度 */
-  paginationHeight: Ref<number>
+  paginationHeight: Ref<number>;
   /** 表格头部高度 */
-  tableHeaderHeight: Ref<number>
+  tableHeaderHeight: Ref<number>;
   /** 分页器间距 */
-  paginationSpacing: Ref<number>
+  paginationSpacing: Ref<number>;
 }
 
 /**
@@ -36,8 +36,8 @@ interface TableHeightOptions {
  */
 class TableHeightCalculator {
   // 常量配置
-  private static readonly DEFAULT_TABLE_HEADER_HEIGHT = 44
-  private static readonly TABLE_HEADER_SPACING = 12
+  private static readonly DEFAULT_TABLE_HEADER_HEIGHT = 44;
+  private static readonly TABLE_HEADER_SPACING = 12;
 
   constructor(private options: TableHeightOptions) {}
 
@@ -45,10 +45,10 @@ class TableHeightCalculator {
    * 计算容器高度
    */
   calculate(): { height: string } {
-    const offset = this.calculateOffset()
+    const offset = this.calculateOffset();
     return {
-      height: offset === 0 ? '100%' : `calc(100% - ${offset}px)`
-    }
+      height: offset === 0 ? "100%" : `calc(100% - ${offset}px)`,
+    };
   }
 
   /**
@@ -56,28 +56,30 @@ class TableHeightCalculator {
    */
   private calculateOffset(): number {
     if (!this.options.showTableHeader.value) {
-      return this.calculatePaginationOffset()
+      return this.calculatePaginationOffset();
     }
 
-    const headerHeight = this.getHeaderHeight()
-    const paginationOffset = this.calculatePaginationOffset()
+    const headerHeight = this.getHeaderHeight();
+    const paginationOffset = this.calculatePaginationOffset();
 
-    return headerHeight + paginationOffset + TableHeightCalculator.TABLE_HEADER_SPACING
+    return headerHeight + paginationOffset + TableHeightCalculator.TABLE_HEADER_SPACING;
   }
 
   /**
    * 获取表格头部高度
    */
   private getHeaderHeight(): number {
-    return this.options.tableHeaderHeight.value || TableHeightCalculator.DEFAULT_TABLE_HEADER_HEIGHT
+    return (
+      this.options.tableHeaderHeight.value || TableHeightCalculator.DEFAULT_TABLE_HEADER_HEIGHT
+    );
   }
 
   /**
    * 计算分页器偏移量
    */
   private calculatePaginationOffset(): number {
-    const { paginationHeight, paginationSpacing } = this.options
-    return paginationHeight.value === 0 ? 0 : paginationHeight.value + paginationSpacing.value
+    const { paginationHeight, paginationSpacing } = this.options;
+    return paginationHeight.value === 0 ? 0 : paginationHeight.value + paginationSpacing.value;
   }
 }
 
@@ -94,12 +96,12 @@ class TableHeightCalculator {
  */
 export function useTableHeight(options: TableHeightOptions) {
   const containerHeight = computed(() => {
-    const calculator = new TableHeightCalculator(options)
-    return calculator.calculate()
-  })
+    const calculator = new TableHeightCalculator(options);
+    return calculator.calculate();
+  });
 
   return {
     /** 容器高度样式对象 */
-    containerHeight
-  }
+    containerHeight,
+  };
 }
diff --git a/frontend/new-web/src/hooks/core/useTheme.ts b/frontend/new-web/src/hooks/core/useTheme.ts
index 187c3e03..6efdf0da 100644
--- a/frontend/new-web/src/hooks/core/useTheme.ts
+++ b/frontend/new-web/src/hooks/core/useTheme.ts
@@ -28,135 +28,138 @@
  * ```
  *
  * @module useTheme
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
-import { useSettingStore } from '@/store/modules/setting'
-import { SystemThemeEnum } from '@/enums/appEnum'
-import AppConfig from '@/config'
-import { SystemThemeTypes } from '@/types/store'
-import { getDarkColor, getLightColor, setElementThemeColor } from '@/utils/ui'
-import { usePreferredDark } from '@vueuse/core'
-import { watch } from 'vue'
+import { useSettingsStore } from "@/store/modules/setting.store";
+import { SystemThemeEnum } from "@/enums/appEnum";
+import AppConfig from "@/config";
+import { SystemThemeTypes } from "@/types/store";
+import { getDarkColor, getLightColor, setElementThemeColor } from "@/utils/ui";
+import { usePreferredDark } from "@vueuse/core";
+import { watch } from "vue";
 
 export function useTheme() {
-  const settingStore = useSettingStore()
+  const settingStore = useSettingsStore();
 
   // 禁用过渡效果
   const disableTransitions = () => {
-    const style = document.createElement('style')
-    style.setAttribute('id', 'disable-transitions')
-    style.textContent = '* { transition: none !important; }'
-    document.head.appendChild(style)
-  }
+    const style = document.createElement("style");
+    style.setAttribute("id", "disable-transitions");
+    style.textContent = "* { transition: none !important; }";
+    document.head.appendChild(style);
+  };
 
   // 启用过渡效果
   const enableTransitions = () => {
-    const style = document.getElementById('disable-transitions')
+    const style = document.getElementById("disable-transitions");
     if (style) {
-      style.remove()
+      style.remove();
     }
-  }
+  };
 
   // 设置系统主题
   const setSystemTheme = (theme: SystemThemeEnum, themeMode?: SystemThemeEnum) => {
     // 临时禁用过渡效果
-    disableTransitions()
+    disableTransitions();
 
-    const el = document.getElementsByTagName('html')[0]
-    const isDark = theme === SystemThemeEnum.DARK
+    const el = document.getElementsByTagName("html")[0];
+    const isDark = theme === SystemThemeEnum.DARK;
 
     if (!themeMode) {
-      themeMode = theme
+      themeMode = theme;
     }
 
-    const currentTheme = AppConfig.systemThemeStyles[theme as keyof SystemThemeTypes]
+    const currentTheme = AppConfig.systemThemeStyles[theme as keyof SystemThemeTypes];
 
     if (currentTheme) {
-      el.setAttribute('class', currentTheme.className)
+      el.setAttribute("class", currentTheme.className);
     }
 
     // 设置按钮颜色加深或变浅
-    const primary = settingStore.systemThemeColor
+    const primary = settingStore.systemThemeColor;
 
     for (let i = 1; i <= 9; i++) {
       document.documentElement.style.setProperty(
         `--el-color-primary-light-${i}`,
         isDark ? `${getDarkColor(primary, i / 10)}` : `${getLightColor(primary, i / 10)}`
-      )
+      );
     }
 
     // 更新store中的主题设置
-    settingStore.setGlopTheme(theme, themeMode)
+    settingStore.setGlopTheme(theme, themeMode);
 
     // 使用 requestAnimationFrame 确保在下一帧恢复过渡效果
     requestAnimationFrame(() => {
       requestAnimationFrame(() => {
-        enableTransitions()
-      })
-    })
-  }
+        enableTransitions();
+      });
+    });
+  };
 
   // 使用 VueUse 的 usePreferredDark 检测系统主题偏好
-  const prefersDark = usePreferredDark()
+  const prefersDark = usePreferredDark();
 
   // 自动设置系统主题
   const setSystemAutoTheme = () => {
-    const theme = prefersDark.value ? SystemThemeEnum.DARK : SystemThemeEnum.LIGHT
-    setSystemTheme(theme, SystemThemeEnum.AUTO)
-  }
+    const theme = prefersDark.value ? SystemThemeEnum.DARK : SystemThemeEnum.LIGHT;
+    setSystemTheme(theme, SystemThemeEnum.AUTO);
+  };
 
   // 切换主题
   const switchThemeStyles = (theme: SystemThemeEnum) => {
     if (theme === SystemThemeEnum.AUTO) {
-      setSystemAutoTheme()
+      setSystemAutoTheme();
     } else {
-      setSystemTheme(theme)
+      setSystemTheme(theme);
     }
-  }
+  };
 
   return {
     setSystemTheme,
     setSystemAutoTheme,
     switchThemeStyles,
-    prefersDark
-  }
+    prefersDark,
+  };
 }
 
 /**
  * 初始化主题系统
  */
 export function initializeTheme() {
-  const settingStore = useSettingStore()
-  const prefersDark = usePreferredDark()
+  const settingStore = useSettingsStore();
+  const prefersDark = usePreferredDark();
 
   // 根据系统偏好应用主题
   const applyThemeByMode = () => {
-    const el = document.getElementsByTagName('html')[0]
-    let actualTheme = settingStore.systemThemeType
+    const el = document.getElementsByTagName("html")[0];
+    let actualTheme = settingStore.systemThemeType;
 
     // 如果是 AUTO 模式，检测系统偏好
     if (settingStore.systemThemeMode === SystemThemeEnum.AUTO) {
-      actualTheme = prefersDark.value ? SystemThemeEnum.DARK : SystemThemeEnum.LIGHT
+      actualTheme = prefersDark.value ? SystemThemeEnum.DARK : SystemThemeEnum.LIGHT;
       // 更新实际应用的主题类型
-      settingStore.systemThemeType = actualTheme
+      settingStore.systemThemeType = actualTheme;
     }
 
     // 设置主题 class
-    const currentTheme = AppConfig.systemThemeStyles[actualTheme as keyof SystemThemeTypes]
+    const currentTheme = AppConfig.systemThemeStyles[actualTheme as keyof SystemThemeTypes];
     if (currentTheme) {
-      el.setAttribute('class', currentTheme.className)
+      el.setAttribute("class", currentTheme.className);
     }
 
     // 设置主题颜色
-    setElementThemeColor(settingStore.systemThemeColor)
+    setElementThemeColor(settingStore.systemThemeColor);
 
     // 设置圆角
-    document.documentElement.style.setProperty('--custom-radius', `${settingStore.customRadius}rem`)
-  }
+    document.documentElement.style.setProperty(
+      "--custom-radius",
+      `${settingStore.customRadius}rem`
+    );
+  };
 
   // 应用主题
-  applyThemeByMode()
+  applyThemeByMode();
 
   // 如果是 AUTO 模式，监听系统主题变化（使用 VueUse 的响应式特性）
   if (settingStore.systemThemeMode === SystemThemeEnum.AUTO) {
@@ -165,10 +168,10 @@ export function initializeTheme() {
       () => {
         // 只有在 AUTO 模式下才响应系统主题变化
         if (settingStore.systemThemeMode === SystemThemeEnum.AUTO) {
-          applyThemeByMode()
+          applyThemeByMode();
         }
       },
       { immediate: false }
-    )
+    );
   }
 }
diff --git a/frontend/new-web/src/hooks/index.ts b/frontend/new-web/src/hooks/index.ts
index 472b09c8..61623a23 100644
--- a/frontend/new-web/src/hooks/index.ts
+++ b/frontend/new-web/src/hooks/index.ts
@@ -1,32 +1,35 @@
 // 通用功能集合
-export { useCommon } from './core/useCommon'
+export { useCommon } from "./core/useCommon";
 
 // 应用模式
-export { useAppMode } from './core/useAppMode'
+export { useAppMode } from "./core/useAppMode";
 
 // 权限控制
-export { useAuth } from './core/useAuth'
+export { useAuth } from "./core/useAuth";
 
 // 表格数据管理方案
-export { useTable } from './core/useTable'
+export { useTable } from "./core/useTable";
 
 // 表格列配置管理
-export { useTableColumns } from './core/useTableColumns'
+export { useTableColumns } from "./core/useTableColumns";
 
 // 主题相关
-export { useTheme } from './core/useTheme'
+export { useTheme } from "./core/useTheme";
 
 // 礼花+文字滚动
-export { useCeremony } from './core/useCeremony'
+export { useCeremony } from "./core/useCeremony";
 
 // 顶栏快速入口
-export { useFastEnter } from './core/useFastEnter'
+export { useFastEnter } from "./core/useFastEnter";
 
 // 顶栏功能管理
-export { useHeaderBar } from './core/useHeaderBar'
+export { useHeaderBar } from "./core/useHeaderBar";
 
 // 图表相关
-export { useChart, useChartComponent, useChartOps } from './core/useChart'
+export { useChart, useChartComponent, useChartOps } from "./core/useChart";
 
 // 布局高度
-export { useLayoutHeight, useAutoLayoutHeight } from './core/useLayoutHeight'
+export { useLayoutHeight, useAutoLayoutHeight } from "./core/useLayoutHeight";
+
+// AI 相关
+export { useAiAction } from "./ai/useAiAction";
diff --git a/frontend/new-web/src/layouts/art-breadcrumb/index.vue b/frontend/new-web/src/layouts/art-breadcrumb/index.vue
new file mode 100755
index 00000000..49945140
--- /dev/null
+++ b/frontend/new-web/src/layouts/art-breadcrumb/index.vue
@@ -0,0 +1,143 @@
+<!-- 面包屑导航 -->
+<template>
+  <nav class="ml-2.5 max-lg:!hidden" aria-label="breadcrumb">
+    <ul class="flex-c h-full">
+      <li
+        v-for="(item, index) in breadcrumbItems"
+        :key="item.path"
+        class="box-border flex-c h-7 text-sm leading-7"
+      >
+        <div
+          :class="
+            isClickable(item, index)
+              ? 'c-p py-1 rounded tad-200 hover:bg-active-color hover:[&_span]:text-g-600'
+              : ''
+          "
+          @click="handleBreadcrumbClick(item, index)"
+        >
+          <span
+            class="block max-w-46 overflow-hidden text-ellipsis whitespace-nowrap px-1.5 text-sm text-g-600 dark:text-g-800"
+          >
+            {{ formatMenuTitle(item.meta?.title as string) }}
+          </span>
+        </div>
+        <div
+          v-if="!isLastItem(index) && item.meta?.title"
+          class="mx-1 text-sm not-italic text-g-500"
+          aria-hidden="true"
+        >
+          /
+        </div>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import type { RouteLocationMatched, RouteRecordRaw } from "vue-router";
+import { formatMenuTitle } from "@/utils/navigation/router";
+
+defineOptions({ name: "ArtBreadcrumb" });
+
+export interface BreadcrumbItem {
+  path: string;
+  meta: RouteRecordRaw["meta"];
+}
+
+const route = useRoute();
+const router = useRouter();
+
+// 使用computed替代watch，提高性能
+const breadcrumbItems = computed<BreadcrumbItem[]>(() => {
+  const { matched } = route;
+  const matchedLength = matched.length;
+
+  // 处理首页情况
+  if (!matchedLength || isHomeRoute(matched[0])) {
+    return [];
+  }
+
+  // 处理一级菜单和普通路由
+  const firstRoute = matched[0];
+  const isFirstLevel = firstRoute.meta?.isFirstLevel;
+  const lastIndex = matchedLength - 1;
+  const currentRoute = matched[lastIndex];
+  const currentRouteMeta = currentRoute.meta;
+
+  let items = isFirstLevel
+    ? [createBreadcrumbItem(currentRoute)]
+    : matched.map(createBreadcrumbItem);
+
+  // 过滤包裹容器：如果有多个项目且第一个是容器路由（如 /outside），则移除它
+  if (items.length > 1 && isWrapperContainer(items[0])) {
+    items = items.slice(1);
+  }
+
+  // IFrame 页面特殊处理：如果过滤后只剩一个 iframe 页面，或者所有项都是包裹容器，则仅展示当前页
+  if (currentRouteMeta?.isIframe && (items.length === 1 || items.every(isWrapperContainer))) {
+    return [createBreadcrumbItem(currentRoute)];
+  }
+
+  return items;
+});
+
+// 辅助函数：判断是否为包裹容器路由
+const isWrapperContainer = (item: BreadcrumbItem): boolean =>
+  item.path === "/outside" && !!item.meta?.isIframe;
+
+// 辅助函数：创建面包屑项目
+const createBreadcrumbItem = (route: RouteLocationMatched): BreadcrumbItem => ({
+  path: route.path,
+  meta: route.meta,
+});
+
+// 辅助函数：判断是否为首页
+const isHomeRoute = (route: RouteLocationMatched): boolean => route.name === "/";
+
+// 辅助函数：判断是否为最后一项
+const isLastItem = (index: number): boolean => {
+  const itemsLength = breadcrumbItems.value.length;
+  return index === itemsLength - 1;
+};
+
+// 辅助函数：判断是否可点击
+const isClickable = (item: BreadcrumbItem, index: number): boolean =>
+  item.path !== "/outside" && !isLastItem(index);
+
+// 辅助函数：查找路由的第一个有效子路由
+const findFirstValidChild = (route: RouteRecordRaw) =>
+  route.children?.find((child) => !child.redirect && !child.meta?.isHide);
+
+// 辅助函数：构建完整路径
+const buildFullPath = (childPath: string): string => `/${childPath}`.replace("//", "/");
+
+// 处理面包屑点击事件
+async function handleBreadcrumbClick(item: BreadcrumbItem, index: number): Promise<void> {
+  // 如果是最后一项或外部链接，不处理
+  if (isLastItem(index) || item.path === "/outside") {
+    return;
+  }
+
+  try {
+    // 缓存路由表查找结果
+    const routes = router.getRoutes();
+    const targetRoute = routes.find((route) => route.path === item.path);
+
+    if (!targetRoute?.children?.length) {
+      await router.push(item.path);
+      return;
+    }
+
+    const firstValidChild = findFirstValidChild(targetRoute);
+    if (firstValidChild) {
+      await router.push(buildFullPath(firstValidChild.path));
+    } else {
+      await router.push(item.path);
+    }
+  } catch (error) {
+    console.error("导航失败:", error);
+  }
+}
+</script>
diff --git a/frontend/new-web/src/layouts/art-chat-window/index.vue b/frontend/new-web/src/layouts/art-chat-window/index.vue
new file mode 100644
index 00000000..ae871047
--- /dev/null
+++ b/frontend/new-web/src/layouts/art-chat-window/index.vue
@@ -0,0 +1,263 @@
+<!-- 系统聊天窗口 -->
+<template>
+  <div>
+    <ElDrawer v-model="isDrawerVisible" :size="isMobile ? '100%' : '480px'" :with-header="false">
+      <div class="mb-5 flex-cb">
+        <div>
+          <span class="text-base font-medium">Art Bot</span>
+          <div class="mt-1.5 flex-c gap-1">
+            <div
+              class="h-2 w-2 rounded-full"
+              :class="isOnline ? 'bg-success/100' : 'bg-danger/100'"
+            ></div>
+            <span class="text-xs text-g-600">{{ isOnline ? "在线" : "离线" }}</span>
+          </div>
+        </div>
+        <div>
+          <ElIcon class="c-p" :size="20" @click="closeChat">
+            <Close />
+          </ElIcon>
+        </div>
+      </div>
+      <div class="flex h-[calc(100%-70px)] flex-col">
+        <!-- 聊天消息区域 -->
+        <div
+          class="flex-1 overflow-y-auto border-t-d px-4 py-7.5 [&::-webkit-scrollbar]:!w-1"
+          ref="messageContainer"
+        >
+          <template v-for="(message, index) in messages" :key="index">
+            <div
+              :class="[
+                'mb-7.5 flex w-full items-start gap-2',
+                message.isMe ? 'flex-row-reverse' : 'flex-row',
+              ]"
+            >
+              <ElAvatar :size="32" :src="message.avatar" class="shrink-0" />
+              <div
+                :class="['flex max-w-[70%] flex-col', message.isMe ? 'items-end' : 'items-start']"
+              >
+                <div
+                  :class="[
+                    'mb-1 flex gap-2 text-xs',
+                    message.isMe ? 'flex-row-reverse' : 'flex-row',
+                  ]"
+                >
+                  <span class="font-medium">{{ message.sender }}</span>
+                  <span class="text-g-600">{{ message.time }}</span>
+                </div>
+                <div
+                  :class="[
+                    'rounded-md px-3.5 py-2.5 text-sm leading-[1.4] text-g-900',
+                    message.isMe ? 'message-right bg-theme/15' : 'message-left bg-g-300/50',
+                  ]"
+                >
+                  {{ message.content }}
+                </div>
+              </div>
+            </div>
+          </template>
+        </div>
+
+        <!-- 聊天输入区域 -->
+        <div class="px-4 pt-4">
+          <ElInput
+            v-model="messageText"
+            type="textarea"
+            :rows="3"
+            placeholder="输入消息"
+            resize="none"
+            @keyup.enter.prevent="sendMessage"
+          >
+            <template #append>
+              <div class="flex gap-2 py-2">
+                <ElButton :icon="Paperclip" circle plain />
+                <ElButton :icon="Picture" circle plain />
+                <ElButton type="primary" @click="sendMessage" v-ripple>发送</ElButton>
+              </div>
+            </template>
+          </ElInput>
+          <div class="mt-3 flex-cb">
+            <div class="flex-c">
+              <ArtSvgIcon icon="ri:image-line" class="mr-5 c-p text-g-600 text-lg" />
+              <ArtSvgIcon icon="ri:emotion-happy-line" class="mr-5 c-p text-g-600 text-lg" />
+            </div>
+            <ElButton type="primary" @click="sendMessage" v-ripple class="min-w-20">发送</ElButton>
+          </div>
+        </div>
+      </div>
+    </ElDrawer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Picture, Paperclip, Close } from "@element-plus/icons-vue";
+import { mittBus } from "@/utils/sys";
+import meAvatar from "@/assets/images/avatar/avatar5.webp";
+import aiAvatar from "@/assets/images/avatar/avatar10.webp";
+
+defineOptions({ name: "ArtChatWindow" });
+
+// 类型定义
+interface ChatMessage {
+  id: number;
+  sender: string;
+  content: string;
+  time: string;
+  isMe: boolean;
+  avatar: string;
+}
+
+// 常量定义
+const MOBILE_BREAKPOINT = 640;
+const SCROLL_DELAY = 100;
+const BOT_NAME = "Art Bot";
+const USER_NAME = "Ricky";
+
+// 响应式布局
+const { width } = useWindowSize();
+const isMobile = computed(() => width.value < MOBILE_BREAKPOINT);
+
+// 组件状态
+const isDrawerVisible = ref(false);
+const isOnline = ref(true);
+
+// 消息相关状态
+const messageText = ref("");
+const messageId = ref(10);
+const messageContainer = ref<HTMLElement | null>(null);
+
+// 初始化聊天消息数据
+const initializeMessages = (): ChatMessage[] => [
+  {
+    id: 1,
+    sender: BOT_NAME,
+    content: "你好！我是你的AI助手，有什么我可以帮你的吗？",
+    time: "10:00",
+    isMe: false,
+    avatar: aiAvatar,
+  },
+  {
+    id: 2,
+    sender: USER_NAME,
+    content: "我想了解一下系统的使用方法。",
+    time: "10:01",
+    isMe: true,
+    avatar: meAvatar,
+  },
+  {
+    id: 3,
+    sender: BOT_NAME,
+    content: "好的，我来为您介绍系统的主要功能。首先，您可以通过左侧菜单访问不同的功能模块...",
+    time: "10:02",
+    isMe: false,
+    avatar: aiAvatar,
+  },
+  {
+    id: 4,
+    sender: USER_NAME,
+    content: "听起来很不错，能具体讲讲数据分析部分吗？",
+    time: "10:05",
+    isMe: true,
+    avatar: meAvatar,
+  },
+  {
+    id: 5,
+    sender: BOT_NAME,
+    content: "当然可以。数据分析模块可以帮助您实时监控关键指标，并生成详细的报表...",
+    time: "10:06",
+    isMe: false,
+    avatar: aiAvatar,
+  },
+  {
+    id: 6,
+    sender: USER_NAME,
+    content: "太好了，那我如何开始使用呢？",
+    time: "10:08",
+    isMe: true,
+    avatar: meAvatar,
+  },
+  {
+    id: 7,
+    sender: BOT_NAME,
+    content: "您可以先创建一个项目，然后在项目中添加相关的数据源，系统会自动进行分析。",
+    time: "10:09",
+    isMe: false,
+    avatar: aiAvatar,
+  },
+  {
+    id: 8,
+    sender: USER_NAME,
+    content: "明白了，谢谢你的帮助！",
+    time: "10:10",
+    isMe: true,
+    avatar: meAvatar,
+  },
+  {
+    id: 9,
+    sender: BOT_NAME,
+    content: "不客气，有任何问题随时联系我。",
+    time: "10:11",
+    isMe: false,
+    avatar: aiAvatar,
+  },
+];
+
+const messages = ref<ChatMessage[]>(initializeMessages());
+
+// 工具函数
+const formatCurrentTime = (): string => {
+  return new Date().toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+};
+
+const scrollToBottom = (): void => {
+  nextTick(() => {
+    setTimeout(() => {
+      if (messageContainer.value) {
+        messageContainer.value.scrollTop = messageContainer.value.scrollHeight;
+      }
+    }, SCROLL_DELAY);
+  });
+};
+
+// 消息处理方法
+const sendMessage = (): void => {
+  const text = messageText.value.trim();
+  if (!text) return;
+
+  const newMessage: ChatMessage = {
+    id: messageId.value++,
+    sender: USER_NAME,
+    content: text,
+    time: formatCurrentTime(),
+    isMe: true,
+    avatar: meAvatar,
+  };
+
+  messages.value.push(newMessage);
+  messageText.value = "";
+  scrollToBottom();
+};
+
+// 聊天窗口控制方法
+const openChat = (): void => {
+  isDrawerVisible.value = true;
+  scrollToBottom();
+};
+
+const closeChat = (): void => {
+  isDrawerVisible.value = false;
+};
+
+// 生命周期
+onMounted(() => {
+  scrollToBottom();
+  mittBus.on("openChat", openChat);
+});
+
+onUnmounted(() => {
+  mittBus.off("openChat", openChat);
+});
+</script>
diff --git a/frontend/new-web/src/layouts/art-fast-enter/index.vue b/frontend/new-web/src/layouts/art-fast-enter/index.vue
new file mode 100644
index 00000000..fa87223b
--- /dev/null
+++ b/frontend/new-web/src/layouts/art-fast-enter/index.vue
@@ -0,0 +1,113 @@
+<!-- 顶部快速入口面板 -->
+<template>
+  <ElPopover
+    ref="popoverRef"
+    :width="700"
+    :offset="0"
+    :show-arrow="false"
+    trigger="hover"
+    placement="bottom-start"
+    popper-class="fast-enter-popover"
+    :popper-style="{
+      border: '1px solid var(--default-border)',
+      borderRadius: 'calc(var(--custom-radius) / 2 + 4px)',
+    }"
+  >
+    <template #reference>
+      <div class="flex-c gap-2">
+        <slot />
+      </div>
+    </template>
+
+    <div class="grid grid-cols-[2fr_0.8fr]">
+      <div>
+        <div class="grid grid-cols-2 gap-1.5">
+          <!-- 应用列表 -->
+          <div
+            v-for="application in enabledApplications"
+            :key="application.name"
+            class="mr-3 c-p flex-c gap-3 rounded-lg p-2 hover:bg-g-200/70 dark:hover:bg-g-200/90 hover:[&_.app-icon]:!bg-transparent"
+            @click="handleApplicationClick(application)"
+          >
+            <div class="app-icon size-12 flex-cc rounded-lg bg-g-200/80 dark:bg-g-300/30">
+              <ArtSvgIcon
+                class="text-xl"
+                :icon="application.icon"
+                :style="{ color: application.iconColor }"
+              />
+            </div>
+            <div>
+              <h3 class="m-0 text-sm font-medium text-g-800">{{ application.name }}</h3>
+              <p class="mt-1 text-xs text-g-600">{{ application.description }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="border-l-d pl-6 pt-2">
+        <h3 class="mb-2.5 text-base font-medium text-g-800">快速链接</h3>
+        <ul>
+          <li
+            v-for="quickLink in enabledQuickLinks"
+            :key="quickLink.name"
+            class="c-p py-2 hover:[&_span]:text-theme"
+            @click="handleQuickLinkClick(quickLink)"
+          >
+            <span class="text-g-600 no-underline">{{ quickLink.name }}</span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </ElPopover>
+</template>
+
+<script setup lang="ts">
+import { useFastEnter } from "@/hooks/core/useFastEnter";
+import type { FastEnterApplication, FastEnterQuickLink } from "@/types/config";
+
+defineOptions({ name: "ArtFastEnter" });
+
+const router = useRouter();
+const popoverRef = ref();
+
+// 使用快速入口配置
+const { enabledApplications, enabledQuickLinks } = useFastEnter();
+
+/**
+ * 处理导航跳转
+ * @param routeName 路由名称
+ * @param link 外部链接
+ */
+const handleNavigate = (routeName?: string, link?: string): void => {
+  const targetPath = routeName || link;
+
+  if (!targetPath) {
+    console.warn("导航配置无效：缺少路由名称或链接");
+    return;
+  }
+
+  if (targetPath.startsWith("http")) {
+    window.open(targetPath, "_blank");
+  } else {
+    router.push({ name: targetPath });
+  }
+
+  popoverRef.value?.hide();
+};
+
+/**
+ * 处理应用项点击
+ * @param application 应用配置对象
+ */
+const handleApplicationClick = (application: FastEnterApplication): void => {
+  handleNavigate(application.routeName, application.link);
+};
+
+/**
+ * 处理快速链接点击
+ * @param quickLink 快速链接配置对象
+ */
+const handleQuickLinkClick = (quickLink: FastEnterQuickLink): void => {
+  handleNavigate(quickLink.routeName, quickLink.link);
+};
+</script>
diff --git a/frontend/new-web/src/layouts/art-fireworks-effect/index.vue b/frontend/new-web/src/layouts/art-fireworks-effect/index.vue
new file mode 100644
index 00000000..80806d63
--- /dev/null
+++ b/frontend/new-web/src/layouts/art-fireworks-effect/index.vue
@@ -0,0 +1,633 @@
+<!-- 烟花效果 | 礼花效果 -->
+<template>
+  <canvas
+    ref="canvasRef"
+    class="fixed top-0 left-0 z-[9999] w-full h-full pointer-events-none"
+  ></canvas>
+</template>
+
+<script setup lang="ts">
+import { useEventListener } from "@vueuse/core";
+import { mittBus } from "@/utils/sys";
+import type { Handler } from "mitt";
+import bp from "@/assets/images/ceremony/hb.png";
+import sd from "@/assets/images/ceremony/sd.png";
+import yd from "@/assets/images/ceremony/yd.png";
+
+defineOptions({ name: "ArtFireworksEffect" });
+
+/**
+ * 烟花系统配置接口
+ * 定义了烟花效果的所有可配置参数
+ */
+interface FireworkConfig {
+  /** 对象池大小 - 预先创建的粒子对象数量 */
+  readonly POOL_SIZE: number;
+  /** 每次爆炸产生的粒子数量 */
+  readonly PARTICLES_PER_BURST: number;
+  /** 各种形状的尺寸配置 */
+  readonly SIZES: {
+    /** 矩形粒子的宽高 */
+    readonly RECTANGLE: { readonly WIDTH: number; readonly HEIGHT: number };
+    /** 正方形粒子的边长 */
+    readonly SQUARE: { readonly SIZE: number };
+    /** 圆形粒子的直径 */
+    readonly CIRCLE: { readonly SIZE: number };
+    /** 三角形粒子的边长 */
+    readonly TRIANGLE: { readonly SIZE: number };
+    /** 椭圆粒子的宽高 */
+    readonly OVAL: { readonly WIDTH: number; readonly HEIGHT: number };
+    /** 图片粒子的宽高 */
+    readonly IMAGE: { readonly WIDTH: number; readonly HEIGHT: number };
+  };
+  /** 旋转相关参数 */
+  readonly ROTATION: {
+    /** 基础旋转速度 */
+    readonly BASE_SPEED: number;
+    /** 随机旋转速度增量 */
+    readonly RANDOM_SPEED: number;
+    /** 旋转衰减系数 - 控制旋转速度递减 */
+    readonly DECAY: number;
+  };
+  /** 物理效果参数 */
+  readonly PHYSICS: {
+    /** 重力加速度 */
+    readonly GRAVITY: number;
+    /** 下落速度阈值 - 超过此值开始淡出 */
+    readonly VELOCITY_THRESHOLD: number;
+    /** 透明度衰减速度 */
+    readonly OPACITY_DECAY: number;
+  };
+  /** 烟花粒子颜色配置(带透明度) */
+  readonly COLORS: readonly string[];
+  /** 烟花粒子形状配置(矩形出现概率更高) */
+  readonly SHAPES: readonly string[];
+}
+
+/**
+ * 单个烟花粒子对象
+ * 包含粒子的位置、速度、外观等所有属性
+ */
+interface Firework {
+  /** X坐标位置 */
+  x: number;
+  /** Y坐标位置 */
+  y: number;
+  /** X方向速度 */
+  vx: number;
+  /** Y方向速度 */
+  vy: number;
+  /** 粒子颜色 (RGBA格式) */
+  color: string;
+  /** 当前旋转角度 */
+  rotation: number;
+  /** 旋转速度 */
+  rotationSpeed: number;
+  /** 缩放比例 */
+  scale: number;
+  /** 粒子形状类型 */
+  shape: string;
+  /** 透明度 (0-1) */
+  opacity: number;
+  /** 是否处于活动状态 */
+  active: boolean;
+  /** 图片URL (当shape为image时使用) */
+  imageUrl?: string;
+}
+
+/**
+ * 图片缓存接口
+ * 用于缓存预加载的图片资源
+ */
+interface ImageCache {
+  [url: string]: HTMLImageElement;
+}
+
+/**
+ * 烟花效果的全局配置
+ * 使用 as const 确保配置的不可变性
+ */
+const CONFIG: FireworkConfig = {
+  // 性能相关配置
+  POOL_SIZE: 600, // 对象池大小，影响同时存在的最大粒子数
+  PARTICLES_PER_BURST: 200, // 每次爆炸的粒子数量，影响视觉效果密度
+
+  // 粒子尺寸配置
+  SIZES: {
+    RECTANGLE: { WIDTH: 24, HEIGHT: 12 }, // 矩形粒子尺寸
+    SQUARE: { SIZE: 12 }, // 正方形粒子尺寸
+    CIRCLE: { SIZE: 12 }, // 圆形粒子尺寸
+    TRIANGLE: { SIZE: 10 }, // 三角形粒子尺寸
+    OVAL: { WIDTH: 24, HEIGHT: 12 }, // 椭圆粒子尺寸
+    IMAGE: { WIDTH: 30, HEIGHT: 30 }, // 图片粒子尺寸
+  },
+
+  // 旋转动画配置
+  ROTATION: {
+    BASE_SPEED: 2, // 基础旋转速度
+    RANDOM_SPEED: 3, // 额外随机旋转速度范围
+    DECAY: 0.98, // 旋转速度衰减系数 (越小衰减越快)
+  },
+
+  // 物理效果配置
+  PHYSICS: {
+    GRAVITY: 0.525, // 重力加速度，影响粒子下落速度
+    VELOCITY_THRESHOLD: 10, // 速度阈值，超过时开始透明度衰减
+    OPACITY_DECAY: 0.02, // 透明度衰减速度，影响粒子消失快慢
+  },
+
+  // 粒子颜色配置 - 使用RGBA格式支持透明度
+  COLORS: [
+    "rgba(255, 68, 68, 1)", // 红色系
+    "rgba(255, 68, 68, 0.9)",
+    "rgba(255, 68, 68, 0.8)",
+    "rgba(255, 116, 188, 1)", // 粉色系
+    "rgba(255, 116, 188, 0.9)",
+    "rgba(255, 116, 188, 0.8)",
+    "rgba(68, 68, 255, 0.8)", // 蓝色系
+    "rgba(92, 202, 56, 0.7)", // 绿色系
+    "rgba(255, 68, 255, 0.8)", // 紫色系
+    "rgba(68, 255, 255, 0.7)", // 青色系
+    "rgba(255, 136, 68, 0.7)", // 橙色系
+    "rgba(68, 136, 255, 1)", // 蓝色系
+    "rgba(250, 198, 122, 0.8)", // 金色系
+  ],
+
+  // 粒子形状配置 - 矩形出现概率更高，营造更丰富的视觉效果
+  SHAPES: [
+    "rectangle",
+    "rectangle",
+    "rectangle",
+    "rectangle",
+    "rectangle",
+    "rectangle",
+    "rectangle",
+    "circle",
+    "triangle",
+    "oval",
+  ],
+} as const;
+
+/** Canvas DOM 元素引用 */
+const canvasRef = ref<HTMLCanvasElement>();
+/** Canvas 2D 绘制上下文 */
+const ctx = ref<CanvasRenderingContext2D | null>(null);
+
+/**
+ * 烟花系统核心类
+ * 负责管理粒子生命周期、渲染和动画
+ */
+class FireworkSystem {
+  /** 粒子对象池 - 预先创建的粒子对象数组 */
+  private particlePool: Firework[] = [];
+  /** 当前活动的粒子数组 */
+  private activeParticles: Firework[] = [];
+  /** 对象池索引指针 - 用于循环分配粒子 */
+  private poolIndex = 0;
+  /** 图片资源缓存 */
+  private imageCache: ImageCache = {};
+  /** 动画帧ID - 用于取消动画 */
+  private animationId = 0;
+  /** 画布宽度缓存 */
+  private canvasWidth = 0;
+  /** 画布高度缓存 */
+  private canvasHeight = 0;
+
+  constructor() {
+    this.initializePool();
+  }
+
+  /**
+   * 初始化对象池
+   * 预先创建指定数量的粒子对象，避免运行时频繁创建
+   */
+  private initializePool(): void {
+    for (let i = 0; i < CONFIG.POOL_SIZE; i++) {
+      this.particlePool.push(this.createParticle());
+    }
+  }
+
+  /**
+   * 创建一个新的粒子对象
+   * 返回初始化状态的粒子
+   */
+  private createParticle(): Firework {
+    return {
+      x: 0,
+      y: 0,
+      vx: 0,
+      vy: 0,
+      color: "",
+      rotation: 0,
+      rotationSpeed: 0,
+      scale: 1,
+      shape: "circle",
+      opacity: 1,
+      active: false,
+    };
+  }
+
+  /**
+   * 从对象池获取可用粒子 (性能优化版本)
+   * 使用循环索引而非Array.find()，时间复杂度从O(n)降至O(1)
+   * @returns 可用的粒子对象或null
+   */
+  private getAvailableParticle(): Firework | null {
+    for (let i = 0; i < CONFIG.POOL_SIZE; i++) {
+      const index = (this.poolIndex + i) % CONFIG.POOL_SIZE;
+      const particle = this.particlePool[index];
+
+      if (!particle.active) {
+        this.poolIndex = (index + 1) % CONFIG.POOL_SIZE;
+        particle.active = true;
+        return particle;
+      }
+    }
+    return null;
+  }
+
+  /**
+   * 预加载单个图片资源
+   * @param url 图片URL
+   * @returns Promise<HTMLImageElement>
+   */
+  async preloadImage(url: string): Promise<HTMLImageElement> {
+    // 如果已缓存，直接返回
+    if (this.imageCache[url]) {
+      return this.imageCache[url];
+    }
+
+    return new Promise((resolve, reject) => {
+      const img = new Image();
+      img.crossOrigin = "anonymous"; // 处理跨域问题
+      img.onload = () => {
+        this.imageCache[url] = img;
+        resolve(img);
+      };
+      img.onerror = reject;
+      img.src = url;
+    });
+  }
+
+  /**
+   * 预加载所有需要的图片资源
+   * 在组件初始化时调用，确保图片ready
+   */
+  async preloadAllImages(): Promise<void> {
+    const imageUrls = [bp, sd, yd];
+    try {
+      await Promise.all(imageUrls.map((url) => this.preloadImage(url)));
+    } catch (error) {
+      console.error("Image preloading failed:", error);
+    }
+  }
+
+  /**
+   * 创建烟花爆炸效果
+   * @param imageUrl 可选的图片URL，如果提供则使用图片粒子
+   */
+  createFirework(imageUrl?: string): void {
+    // 随机确定爆炸起始位置
+    const startX = Math.random() * this.canvasWidth;
+    const startY = this.canvasHeight;
+
+    // 根据是否有图片确定可用形状
+    const availableShapes = imageUrl && this.imageCache[imageUrl] ? ["image"] : CONFIG.SHAPES;
+
+    // 批量创建粒子数组，减少频繁的数组操作
+    const particles: Firework[] = [];
+
+    for (let i = 0; i < CONFIG.PARTICLES_PER_BURST; i++) {
+      const particle = this.getAvailableParticle();
+      if (!particle) continue;
+
+      // 计算粒子发射角度和速度 (恢复原始算法)
+      const angle = (Math.PI * i) / (CONFIG.PARTICLES_PER_BURST / 2); // 扇形分布
+      const speed = (12 + Math.random() * 6) * 1.5; // 随机速度
+      const spread = Math.random() * Math.PI * 2; // 360度随机扩散
+
+      // 直接属性赋值，避免Object.assign的性能开销
+      particle.x = startX;
+      particle.y = startY;
+      // 复杂的速度计算，模拟真实烟花爆炸轨迹
+      particle.vx = Math.cos(angle) * Math.cos(spread) * speed * (Math.random() * 0.5 + 0.5);
+      particle.vy = Math.sin(angle) * speed - 15; // 向上初始速度
+      particle.color = CONFIG.COLORS[Math.floor(Math.random() * CONFIG.COLORS.length)];
+      particle.rotation = Math.random() * 360;
+      particle.rotationSpeed =
+        (Math.random() * CONFIG.ROTATION.RANDOM_SPEED + CONFIG.ROTATION.BASE_SPEED) *
+        (Math.random() > 0.5 ? 1 : -1); // 随机旋转方向
+      particle.scale = 0.8 + Math.random() * 0.4; // 随机缩放
+      particle.shape = availableShapes[Math.floor(Math.random() * availableShapes.length)];
+      particle.opacity = 1;
+      particle.imageUrl = imageUrl && this.imageCache[imageUrl] ? imageUrl : undefined;
+
+      particles.push(particle);
+    }
+
+    // 批量添加到活动粒子数组，减少多次数组操作
+    this.activeParticles.push(...particles);
+  }
+
+  /**
+   * 更新所有粒子的物理状态 (性能优化版本)
+   * 包括位置、速度、旋转、透明度等
+   */
+  private updateParticles(): void {
+    const { GRAVITY, VELOCITY_THRESHOLD, OPACITY_DECAY } = CONFIG.PHYSICS;
+    const { DECAY } = CONFIG.ROTATION;
+
+    // 使用倒序遍历，避免删除元素时的索引混乱问题
+    for (let i = this.activeParticles.length - 1; i >= 0; i--) {
+      const particle = this.activeParticles[i];
+
+      // 更新粒子位置 (匀加速运动)
+      particle.x += particle.vx;
+      particle.y += particle.vy;
+      particle.vy += GRAVITY; // 重力影响
+
+      // 更新旋转状态
+      particle.rotation += particle.rotationSpeed;
+      particle.rotationSpeed *= DECAY; // 旋转速度衰减
+
+      // 透明度衰减逻辑 - 当粒子下落速度超过阈值时开始淡出
+      if (particle.vy > VELOCITY_THRESHOLD) {
+        particle.opacity -= OPACITY_DECAY;
+        if (particle.opacity <= 0) {
+          this.recycleParticle(i);
+          continue;
+        }
+      }
+
+      // 边界检查 - 移除超出屏幕范围的粒子
+      if (this.isOutOfBounds(particle)) {
+        this.recycleParticle(i);
+      }
+    }
+  }
+
+  /**
+   * 回收粒子到对象池
+   * @param index 要回收的粒子在活动数组中的索引
+   */
+  private recycleParticle(index: number): void {
+    const particle = this.activeParticles[index];
+    particle.active = false; // 标记为非活动状态
+    this.activeParticles.splice(index, 1); // 从活动数组中移除
+  }
+
+  /**
+   * 检查粒子是否超出屏幕边界
+   * @param particle 要检查的粒子
+   * @returns 是否超出边界
+   */
+  private isOutOfBounds(particle: Firework): boolean {
+    const margin = 100; // 边界缓冲区
+    return (
+      particle.x < -margin ||
+      particle.x > this.canvasWidth + margin ||
+      particle.y < -margin ||
+      particle.y > this.canvasHeight + margin
+    );
+  }
+
+  /**
+   * 绘制单个粒子
+   * @param particle 要绘制的粒子对象
+   */
+  private drawParticle(particle: Firework): void {
+    if (!ctx.value) return;
+
+    // 保存当前画布状态
+    ctx.value.save();
+    ctx.value.globalAlpha = particle.opacity; // 设置透明度
+    ctx.value.translate(particle.x, particle.y); // 移动到粒子位置
+    ctx.value.rotate((particle.rotation * Math.PI) / 180); // 应用旋转
+    ctx.value.scale(particle.scale, particle.scale); // 应用缩放
+
+    // 渲染粒子形状
+    this.renderShape(particle);
+
+    // 恢复画布状态
+    ctx.value.restore();
+  }
+
+  /**
+   * 根据粒子类型渲染对应的形状
+   * @param particle 要渲染的粒子
+   */
+  private renderShape(particle: Firework): void {
+    if (!ctx.value) return;
+
+    const { SIZES } = CONFIG;
+    ctx.value.fillStyle = particle.color;
+
+    switch (particle.shape) {
+      case "rectangle":
+        // 绘制矩形
+        ctx.value.fillRect(
+          -SIZES.RECTANGLE.WIDTH / 2,
+          -SIZES.RECTANGLE.HEIGHT / 2,
+          SIZES.RECTANGLE.WIDTH,
+          SIZES.RECTANGLE.HEIGHT
+        );
+        break;
+
+      case "square":
+        // 绘制正方形
+        ctx.value.fillRect(
+          -SIZES.SQUARE.SIZE / 2,
+          -SIZES.SQUARE.SIZE / 2,
+          SIZES.SQUARE.SIZE,
+          SIZES.SQUARE.SIZE
+        );
+        break;
+
+      case "circle":
+        // 绘制圆形
+        ctx.value.beginPath();
+        ctx.value.arc(0, 0, SIZES.CIRCLE.SIZE / 2, 0, Math.PI * 2);
+        ctx.value.fill();
+        break;
+
+      case "triangle":
+        // 绘制三角形
+        ctx.value.beginPath();
+        ctx.value.moveTo(0, -SIZES.TRIANGLE.SIZE);
+        ctx.value.lineTo(SIZES.TRIANGLE.SIZE, SIZES.TRIANGLE.SIZE);
+        ctx.value.lineTo(-SIZES.TRIANGLE.SIZE, SIZES.TRIANGLE.SIZE);
+        ctx.value.closePath();
+        ctx.value.fill();
+        break;
+
+      case "oval":
+        // 绘制椭圆
+        ctx.value.beginPath();
+        ctx.value.ellipse(0, 0, SIZES.OVAL.WIDTH / 2, SIZES.OVAL.HEIGHT / 2, 0, 0, Math.PI * 2);
+        ctx.value.fill();
+        break;
+
+      case "image":
+        // 绘制图片
+        this.renderImage(particle);
+        break;
+    }
+  }
+
+  /**
+   * 渲染图片类型的粒子
+   * @param particle 包含图片URL的粒子对象
+   */
+  private renderImage(particle: Firework): void {
+    if (!ctx.value || !particle.imageUrl) return;
+
+    const img = this.imageCache[particle.imageUrl];
+    if (img?.complete) {
+      const { WIDTH, HEIGHT } = CONFIG.SIZES.IMAGE;
+      ctx.value.drawImage(img, -WIDTH / 2, -HEIGHT / 2, WIDTH, HEIGHT);
+    }
+  }
+
+  /**
+   * 渲染所有活动粒子到画布
+   * 清除画布并重新绘制所有粒子
+   */
+  private render(): void {
+    if (!ctx.value || !canvasRef.value) return;
+
+    // 清除整个画布
+    ctx.value.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
+    // 设置混合模式为"变亮"，增强视觉效果
+    ctx.value.globalCompositeOperation = "lighter";
+
+    // 渲染所有活动粒子
+    for (const particle of this.activeParticles) {
+      this.drawParticle(particle);
+    }
+  }
+
+  /**
+   * 动画主循环
+   * 使用箭头函数保持this绑定
+   */
+  private animate = (): void => {
+    this.updateParticles(); // 更新粒子状态
+    this.render(); // 渲染粒子
+    this.animationId = requestAnimationFrame(this.animate); // 请求下一帧
+  };
+
+  /**
+   * 更新画布尺寸缓存
+   * 在窗口大小改变时调用
+   * @param width 新的画布宽度
+   * @param height 新的画布高度
+   */
+  updateCanvasSize(width: number, height: number): void {
+    this.canvasWidth = width;
+    this.canvasHeight = height;
+  }
+
+  /**
+   * 启动动画循环
+   */
+  start(): void {
+    this.animate();
+  }
+
+  /**
+   * 停止动画循环
+   * 在组件卸载时调用，避免内存泄漏
+   */
+  stop(): void {
+    if (this.animationId) {
+      cancelAnimationFrame(this.animationId);
+      this.animationId = 0;
+    }
+  }
+
+  /**
+   * 获取当前活动粒子数量
+   * 用于调试和性能监控
+   * @returns 活动粒子数量
+   */
+  getActiveParticleCount(): number {
+    return this.activeParticles.length;
+  }
+}
+
+/** 烟花系统实例 */
+const fireworkSystem = new FireworkSystem();
+
+/**
+ * 处理键盘快捷键
+ * 监听 Ctrl+Shift+P 或 Cmd+Shift+P 组合键触发烟花
+ * @param event 键盘事件对象
+ */
+const handleKeyPress = (event: KeyboardEvent): void => {
+  const isFireworkShortcut =
+    (event.ctrlKey && event.shiftKey && event.key.toLowerCase() === "p") ||
+    (event.metaKey && event.shiftKey && event.key.toLowerCase() === "p");
+
+  if (isFireworkShortcut) {
+    event.preventDefault();
+    fireworkSystem.createFirework();
+  }
+};
+
+/**
+ * 调整Canvas画布大小
+ * 响应窗口大小变化，确保画布始终覆盖整个视口
+ */
+const resizeCanvas = (): void => {
+  if (!canvasRef.value) return;
+
+  const { innerWidth, innerHeight } = window;
+  canvasRef.value.width = innerWidth;
+  canvasRef.value.height = innerHeight;
+  fireworkSystem.updateCanvasSize(innerWidth, innerHeight);
+};
+
+/**
+ * 处理外部触发的烟花事件
+ * 通过 mittBus 事件总线接收触发指令
+ * @param event 事件数据，可能包含图片URL
+ */
+const handleFireworkTrigger: Handler<unknown> = (event: unknown) => {
+  const imageUrl = event as string | undefined;
+  fireworkSystem.createFirework(imageUrl);
+};
+
+/**
+ * 组件挂载时的初始化逻辑
+ */
+onMounted(async () => {
+  if (!canvasRef.value) return;
+
+  // 获取Canvas 2D绘制上下文
+  ctx.value = canvasRef.value.getContext("2d");
+  if (!ctx.value) return;
+
+  // 设置初始画布大小
+  resizeCanvas();
+
+  // 预加载所有图片资源
+  await fireworkSystem.preloadAllImages();
+
+  // 启动动画循环
+  fireworkSystem.start();
+
+  // 注册事件监听器
+  useEventListener(window, "keydown", handleKeyPress); // 键盘快捷键
+  useEventListener(window, "resize", resizeCanvas); // 窗口大小变化
+  mittBus.on("triggerFireworks", handleFireworkTrigger); // 外部触发事件
+});
+
+/**
+ * 组件卸载时的清理逻辑
+ * 停止动画循环并移除事件监听器，防止内存泄漏
+ */
+onUnmounted(() => {
+  fireworkSystem.stop();
+  mittBus.off("triggerFireworks", handleFireworkTrigger);
+});
+</script>
diff --git a/frontend/new-web/src/layouts/art-global-component/index.vue b/frontend/new-web/src/layouts/art-global-component/index.vue
new file mode 100644
index 00000000..f3fd2bd9
--- /dev/null
+++ b/frontend/new-web/src/layouts/art-global-component/index.vue
@@ -0,0 +1,14 @@
+<!-- 全局组件 -->
+<template>
+  <component
+    v-for="componentConfig in enabledComponents"
+    :key="componentConfig.key"
+    :is="componentConfig.component"
+  />
+</template>
+
+<script setup lang="ts">
+import { getEnabledGlobalComponents } from "@/config/modules/component";
+defineOptions({ name: "ArtGlobalComponent" });
+const enabledComponents = computed(() => getEnabledGlobalComponents());
+</script>
diff --git a/frontend/new-web/src/layouts/art-global-search/index.vue b/frontend/new-web/src/layouts/art-global-search/index.vue
new file mode 100644
index 00000000..9b225351
--- /dev/null
+++ b/frontend/new-web/src/layouts/art-global-search/index.vue
@@ -0,0 +1,431 @@
+<!-- 全局搜索组件 -->
+<template>
+  <div class="layout-search">
+    <ElDialog
+      v-model="showSearchDialog"
+      width="600"
+      :show-close="false"
+      :lock-scroll="false"
+      modal-class="search-modal"
+      @close="closeSearchDialog"
+    >
+      <ElInput
+        v-model.trim="searchVal"
+        :placeholder="$t('search.placeholder')"
+        @input="search"
+        @blur="searchBlur"
+        ref="searchInput"
+        :prefix-icon="Search"
+        class="h-12"
+      >
+        <template #suffix>
+          <div
+            class="h-4.5 flex-cc rounded border border-g-300 dark:!bg-g-200/50 !bg-box px-1.5 text-g-500"
+          >
+            <ArtSvgIcon icon="fluent:arrow-enter-left-20-filled" />
+          </div>
+        </template>
+      </ElInput>
+      <ElScrollbar class="mt-5" max-height="370px" ref="searchResultScrollbar" always>
+        <div class="result w-full" v-show="searchResult.length">
+          <div
+            class="box !mt-0 c-p text-base leading-none"
+            v-for="(item, index) in searchResult"
+            :key="index"
+          >
+            <div
+              class="mt-2 h-12 flex-cb rounded-custom-sm bg-g-200/80 px-4 text-sm text-g-700"
+              :class="isHighlighted(index) ? 'highlighted !bg-theme/70 !text-white' : ''"
+              @click="searchGoPage(item)"
+              @mouseenter="highlightOnHover(index)"
+            >
+              {{ formatMenuTitle(item.meta.title) }}
+              <ArtSvgIcon v-show="isHighlighted(index)" icon="fluent:arrow-enter-left-20-filled" />
+            </div>
+          </div>
+        </div>
+
+        <div v-show="!searchVal && searchResult.length === 0 && historyResult.length > 0">
+          <p class="text-xs text-g-500">{{ $t("search.historyTitle") }}</p>
+          <div class="mt-1.5 w-full">
+            <div
+              class="box mt-2 h-12 c-p flex-cb rounded-custom-sm bg-g-200/80 px-4 text-sm text-g-800"
+              v-for="(item, index) in historyResult"
+              :key="index"
+              :class="
+                historyHIndex === index
+                  ? 'highlighted !bg-theme/70 !text-white [&_.selected-icon]:!text-white'
+                  : ''
+              "
+              @click="searchGoPage(item)"
+              @mouseenter="highlightOnHoverHistory(index)"
+            >
+              {{ formatMenuTitle(item.meta.title) }}
+              <div
+                class="size-5 selected-icon select-none rounded-full text-g-500 flex-cc c-p"
+                @click.stop="deleteHistory(index)"
+              >
+                <ArtSvgIcon icon="ri:close-large-fill" class="text-xs" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </ElScrollbar>
+
+      <template #footer>
+        <div class="dialog-footer box-border flex-c border-t-d pt-4.5 pb-1">
+          <div class="flex-cc">
+            <ArtSvgIcon icon="fluent:arrow-enter-left-20-filled" class="keyboard" />
+            <span class="mr-3.5 text-xs text-g-700">{{ $t("search.selectKeydown") }}</span>
+          </div>
+          <div class="flex-c">
+            <ArtSvgIcon icon="ri:arrow-up-wide-fill" class="keyboard" />
+            <ArtSvgIcon icon="ri:arrow-down-wide-fill" class="keyboard" />
+            <span class="mr-3.5 text-xs text-g-700">{{ $t("search.switchKeydown") }}</span>
+          </div>
+          <div class="flex-c">
+            <i class="keyboard !w-8 flex-cc"><p class="text-[10px] font-medium">ESC</p></i>
+            <span class="mr-3.5 text-xs text-g-700">{{ $t("search.exitKeydown") }}</span>
+          </div>
+        </div>
+      </template>
+    </ElDialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useUserStore } from "@/store/modules/user.store";
+import { AppRouteRecord } from "@/types/router";
+import { Search } from "@element-plus/icons-vue";
+import { mittBus } from "@/utils/sys";
+import { useMenuStore } from "@/store/modules/menu.store";
+import { formatMenuTitle } from "@/utils/navigation/router";
+import { handleMenuJump } from "@/utils/navigation";
+import { type ScrollbarInstance } from "element-plus";
+
+defineOptions({ name: "ArtGlobalSearch" });
+
+const userStore = useUserStore();
+const { menuList } = storeToRefs(useMenuStore());
+
+const showSearchDialog = ref(false);
+const searchVal = ref("");
+const searchResult = ref<AppRouteRecord[]>([]);
+const historyMaxLength = 10;
+
+const { searchHistory: historyResult } = storeToRefs(userStore);
+
+const searchInput = ref<HTMLInputElement | null>(null);
+const highlightedIndex = ref(0);
+const historyHIndex = ref(0);
+const searchResultScrollbar = ref<ScrollbarInstance>();
+const isKeyboardNavigating = ref(false); // 新增状态：是否正在使用键盘导航
+
+// 生命周期钩子
+onMounted(() => {
+  mittBus.on("openSearchDialog", openSearchDialog);
+  document.addEventListener("keydown", handleKeydown);
+});
+
+onUnmounted(() => {
+  document.removeEventListener("keydown", handleKeydown);
+});
+
+// 键盘快捷键处理
+const handleKeydown = (event: KeyboardEvent) => {
+  const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
+  const isCommandKey = isMac ? event.metaKey : event.ctrlKey;
+
+  if (isCommandKey && event.key.toLowerCase() === "k") {
+    event.preventDefault();
+    showSearchDialog.value = true;
+    focusInput();
+  }
+
+  // 当搜索对话框打开时，处理方向键和回车键
+  if (showSearchDialog.value) {
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      highlightPrevious();
+    } else if (event.key === "ArrowDown") {
+      event.preventDefault();
+      highlightNext();
+    } else if (event.key === "Enter") {
+      event.preventDefault();
+      selectHighlighted();
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      showSearchDialog.value = false;
+    }
+  }
+};
+
+const focusInput = () => {
+  setTimeout(() => {
+    searchInput.value?.focus();
+  }, 100);
+};
+
+// 搜索逻辑
+const search = (val: string) => {
+  if (val) {
+    searchResult.value = flattenAndFilterMenuItems(menuList.value, val);
+  } else {
+    searchResult.value = [];
+  }
+};
+
+const flattenAndFilterMenuItems = (items: AppRouteRecord[], val: string): AppRouteRecord[] => {
+  const lowerVal = val.toLowerCase();
+  const result: AppRouteRecord[] = [];
+
+  const flattenAndMatch = (item: AppRouteRecord) => {
+    if (item.meta?.isHide) return;
+
+    const lowerItemTitle = formatMenuTitle(item.meta.title).toLowerCase();
+
+    if (item.children && item.children.length > 0) {
+      item.children.forEach(flattenAndMatch);
+      return;
+    }
+
+    if (
+      lowerItemTitle.includes(lowerVal) &&
+      ((item.path && item.path.trim()) || item.meta.link || item.meta.isIframe)
+    ) {
+      result.push({ ...item, children: undefined });
+    }
+  };
+
+  items.forEach(flattenAndMatch);
+  return result;
+};
+
+// 高亮控制并实现滚动条跟随
+const highlightPrevious = () => {
+  isKeyboardNavigating.value = true;
+  if (searchVal.value) {
+    highlightedIndex.value =
+      (highlightedIndex.value - 1 + searchResult.value.length) % searchResult.value.length;
+    scrollToHighlightedItem();
+  } else {
+    historyHIndex.value =
+      (historyHIndex.value - 1 + historyResult.value.length) % historyResult.value.length;
+    scrollToHighlightedHistoryItem();
+  }
+  // 延迟重置键盘导航状态，防止立即被 hover 覆盖
+  setTimeout(() => {
+    isKeyboardNavigating.value = false;
+  }, 100);
+};
+
+const highlightNext = () => {
+  isKeyboardNavigating.value = true;
+  if (searchVal.value) {
+    highlightedIndex.value = (highlightedIndex.value + 1) % searchResult.value.length;
+    scrollToHighlightedItem();
+  } else {
+    historyHIndex.value = (historyHIndex.value + 1) % historyResult.value.length;
+    scrollToHighlightedHistoryItem();
+  }
+  setTimeout(() => {
+    isKeyboardNavigating.value = false;
+  }, 100);
+};
+
+const scrollToHighlightedItem = () => {
+  nextTick(() => {
+    if (!searchResultScrollbar.value || !searchResult.value.length) return;
+
+    const scrollWrapper = searchResultScrollbar.value.wrapRef;
+    if (!scrollWrapper) return;
+
+    const highlightedElements = scrollWrapper.querySelectorAll(".result .box");
+    if (!highlightedElements[highlightedIndex.value]) return;
+
+    const highlightedElement = highlightedElements[highlightedIndex.value] as HTMLElement;
+    const itemHeight = highlightedElement.offsetHeight;
+    const scrollTop = scrollWrapper.scrollTop;
+    const containerHeight = scrollWrapper.clientHeight;
+    const itemTop = highlightedElement.offsetTop;
+    const itemBottom = itemTop + itemHeight;
+
+    if (itemTop < scrollTop) {
+      searchResultScrollbar.value.setScrollTop(itemTop);
+    } else if (itemBottom > scrollTop + containerHeight) {
+      searchResultScrollbar.value.setScrollTop(itemBottom - containerHeight);
+    }
+  });
+};
+
+const scrollToHighlightedHistoryItem = () => {
+  nextTick(() => {
+    if (!searchResultScrollbar.value || !historyResult.value.length) return;
+
+    const scrollWrapper = searchResultScrollbar.value.wrapRef;
+    if (!scrollWrapper) return;
+
+    const historyItems = scrollWrapper.querySelectorAll(".history-result .box");
+    if (!historyItems[historyHIndex.value]) return;
+
+    const highlightedElement = historyItems[historyHIndex.value] as HTMLElement;
+    const itemHeight = highlightedElement.offsetHeight;
+    const scrollTop = scrollWrapper.scrollTop;
+    const containerHeight = scrollWrapper.clientHeight;
+    const itemTop = highlightedElement.offsetTop;
+    const itemBottom = itemTop + itemHeight;
+
+    if (itemTop < scrollTop) {
+      searchResultScrollbar.value.setScrollTop(itemTop);
+    } else if (itemBottom > scrollTop + containerHeight) {
+      searchResultScrollbar.value.setScrollTop(itemBottom - containerHeight);
+    }
+  });
+};
+
+const selectHighlighted = () => {
+  if (searchVal.value && searchResult.value.length) {
+    searchGoPage(searchResult.value[highlightedIndex.value]);
+  } else if (!searchVal.value && historyResult.value.length) {
+    searchGoPage(historyResult.value[historyHIndex.value]);
+  }
+};
+
+const isHighlighted = (index: number) => {
+  return highlightedIndex.value === index;
+};
+
+const searchBlur = () => {
+  highlightedIndex.value = 0;
+};
+
+const searchGoPage = (item: AppRouteRecord) => {
+  showSearchDialog.value = false;
+  addHistory(item);
+  handleMenuJump(item);
+  searchVal.value = "";
+  searchResult.value = [];
+};
+
+// 历史记录管理
+const updateHistory = () => {
+  if (Array.isArray(historyResult.value)) {
+    userStore.setSearchHistory(historyResult.value);
+  }
+};
+
+const addHistory = (item: AppRouteRecord) => {
+  const itemKey = item.path || String(item.meta.link || "");
+  const hasItemIndex = historyResult.value.findIndex(
+    (historyItem: AppRouteRecord) =>
+      (historyItem.path || String(historyItem.meta.link || "")) === itemKey
+  );
+
+  if (hasItemIndex !== -1) {
+    historyResult.value.splice(hasItemIndex, 1);
+  } else if (historyResult.value.length >= historyMaxLength) {
+    historyResult.value.pop();
+  }
+
+  const cleanedItem = { ...item };
+  delete cleanedItem.children;
+  delete cleanedItem.meta.authList;
+  historyResult.value.unshift(cleanedItem);
+  updateHistory();
+};
+
+const deleteHistory = (index: number) => {
+  historyResult.value.splice(index, 1);
+  updateHistory();
+};
+
+// 对话框控制
+const openSearchDialog = () => {
+  showSearchDialog.value = true;
+  focusInput();
+};
+
+const closeSearchDialog = () => {
+  searchVal.value = "";
+  searchResult.value = [];
+  highlightedIndex.value = 0;
+  historyHIndex.value = 0;
+};
+
+// 修改 hover 高亮逻辑，只有在非键盘导航时才生效
+const highlightOnHover = (index: number) => {
+  if (!isKeyboardNavigating.value && searchVal.value) {
+    highlightedIndex.value = index;
+  }
+};
+
+const highlightOnHoverHistory = (index: number) => {
+  if (!isKeyboardNavigating.value && !searchVal.value) {
+    historyHIndex.value = index;
+  }
+};
+</script>
+<style lang="scss" scoped>
+.layout-search {
+  :deep(.search-modal) {
+    background-color: rgb(0 0 0 / 20%);
+  }
+
+  :deep(.el-dialog__body) {
+    padding: 5px 0 0 !important;
+  }
+
+  :deep(.el-dialog__header) {
+    padding: 0;
+  }
+
+  .el-input {
+    :deep(.el-input__wrapper) {
+      background-color: var(--art-gray-200);
+      border: 1px solid var(--default-border-dashed);
+      border-radius: calc(var(--custom-radius) / 2 + 2px) !important;
+      box-shadow: none;
+    }
+
+    :deep(.el-input__inner) {
+      color: var(--art-gray-800) !important;
+    }
+  }
+}
+
+.dark .layout-search {
+  .el-input {
+    :deep(.el-input__wrapper) {
+      background-color: #333;
+      border: 1px solid #4c4d50;
+    }
+  }
+
+  :deep(.search-modal) {
+    background-color: rgb(23 23 26 / 60%);
+    backdrop-filter: none;
+  }
+
+  :deep(.el-dialog) {
+    background-color: #252526;
+  }
+}
+</style>
+
+<style scoped>
+@reference '@styles/core/tailwind.css';
+
+.keyboard {
+  @apply mr-2 
+    box-border
+    h-5 
+    w-5.5
+    rounded
+    border 
+    border-g-400 
+    px-1 
+    text-g-500
+    shadow-[0_2px_0_var(--default-border-dashed)] 
+    last-of-type:mr-1.5;
+}
+</style>
diff --git a/frontend/new-web/src/layouts/art-header-bar/index.vue b/frontend/new-web/src/layouts/art-header-bar/index.vue
new file mode 100755
index 00000000..cdcf1d04
--- /dev/null
+++ b/frontend/new-web/src/layouts/art-header-bar/index.vue
@@ -0,0 +1,486 @@
+<!-- 顶部栏 -->
+<template>
+  <div
+    class="w-full bg-[var(--default-bg-color)]"
+    :class="[
+      tabStyle === 'tab-card' || tabStyle === 'tab-google' ? 'mb-5 max-sm:mb-3 !bg-box' : '',
+    ]"
+  >
+    <div
+      class="relative box-border flex-b h-15 leading-15 select-none"
+      :class="[
+        tabStyle === 'tab-card' || tabStyle === 'tab-google'
+          ? 'border-b border-[var(--art-card-border)]'
+          : '',
+      ]"
+    >
+      <div class="flex-c flex-1 min-w-0 leading-15" style="display: flex">
+        <!-- 系统信息  -->
+        <div class="flex-c c-p" @click="toHome" v-if="isTopMenu">
+          <ArtLogo class="pl-4.5" />
+          <p v-if="width >= 1400" class="my-0 mx-2 ml-2 text-lg">{{ AppConfig.systemInfo.name }}</p>
+        </div>
+
+        <ArtLogo
+          class="!hidden pl-3.5 overflow-hidden align-[-0.15em] fill-current"
+          @click="toHome"
+        />
+
+        <!-- 菜单按钮 -->
+        <ArtIconButton
+          v-if="isLeftMenu && shouldShowMenuButton"
+          icon="ri:menu-2-fill"
+          class="ml-3 max-sm:ml-[7px]"
+          @click="visibleMenu"
+        />
+
+        <!-- 刷新按钮 -->
+        <ArtIconButton
+          v-if="shouldShowRefreshButton"
+          icon="ri:refresh-line"
+          class="!ml-3 refresh-btn max-sm:!hidden"
+          :style="{ marginLeft: !isLeftMenu ? '10px' : '0' }"
+          @click="reload"
+        />
+
+        <!-- 快速入口 -->
+        <ArtFastEnter v-if="shouldShowFastEnter && width >= headerBarFastEnterMinWidth">
+          <ArtIconButton icon="ri:function-line" class="ml-3" />
+        </ArtFastEnter>
+
+        <!-- 面包屑 -->
+        <ArtBreadcrumb
+          v-if="(shouldShowBreadcrumb && isLeftMenu) || (shouldShowBreadcrumb && isDualMenu)"
+        />
+
+        <!-- 顶部菜单 -->
+        <ArtHorizontalMenu v-if="isTopMenu" :list="menuList" />
+
+        <!-- 混合菜单-顶部 -->
+        <ArtMixedMenu v-if="isTopLeftMenu" :list="menuList" />
+      </div>
+
+      <div class="flex-c gap-2.5">
+        <!-- 搜索 -->
+        <div
+          v-if="shouldShowGlobalSearch"
+          class="flex-cb w-40 h-9 px-2.5 c-p border border-g-400 rounded-custom-sm max-md:!hidden"
+          @click="openSearchDialog"
+        >
+          <div class="flex-c">
+            <ArtSvgIcon icon="ri:search-line" class="text-sm text-g-500" />
+            <span class="ml-1 text-xs font-normal text-g-500">{{ $t("topBar.search.title") }}</span>
+          </div>
+          <div class="flex-c h-5 px-1.5 text-g-500/80 border border-g-400 rounded">
+            <ArtSvgIcon v-if="isWindows" icon="vaadin:ctrl-a" class="text-sm" />
+            <ArtSvgIcon v-else icon="ri:command-fill" class="text-xs" />
+            <span class="ml-0.5 text-xs">k</span>
+          </div>
+        </div>
+
+        <!-- 全屏按钮 -->
+        <ArtIconButton
+          v-if="shouldShowFullscreen"
+          :icon="isFullscreen ? 'ri:fullscreen-exit-line' : 'ri:fullscreen-fill'"
+          :class="[!isFullscreen ? 'full-screen-btn' : 'exit-full-screen-btn', 'ml-3']"
+          class="max-md:!hidden"
+          @click="toggleFullScreen"
+        />
+
+        <!-- 国际化按钮 -->
+        <ElDropdown
+          @command="changeLanguage"
+          popper-class="langDropDownStyle"
+          v-if="shouldShowLanguage"
+        >
+          <ArtIconButton icon="ri:translate-2" class="language-btn text-[19px]" />
+          <template #dropdown>
+            <ElDropdownMenu>
+              <div v-for="item in languageOptions" :key="item.value" class="lang-btn-item">
+                <ElDropdownItem
+                  :command="item.value"
+                  :class="{ 'is-selected': locale === item.value }"
+                >
+                  <span class="menu-txt">{{ item.label }}</span>
+                  <ArtSvgIcon icon="ri:check-fill" v-if="locale === item.value" />
+                </ElDropdownItem>
+              </div>
+            </ElDropdownMenu>
+          </template>
+        </ElDropdown>
+
+        <!-- 通知按钮 -->
+        <ArtIconButton
+          v-if="shouldShowNotification"
+          icon="ri:notification-2-line"
+          class="notice-button relative"
+          @click="visibleNotice"
+        >
+          <div class="absolute top-2 right-2 size-1.5 !bg-danger rounded-full"></div>
+        </ArtIconButton>
+
+        <!-- 聊天按钮 -->
+        <ArtIconButton
+          v-if="shouldShowChat"
+          icon="ri:message-3-line"
+          class="chat-button relative"
+          @click="openChat"
+        >
+          <div class="breathing-dot absolute top-2 right-2 size-1.5 !bg-success rounded-full"></div>
+        </ArtIconButton>
+
+        <!-- 设置按钮 -->
+        <div v-if="shouldShowSettings">
+          <ElPopover :visible="showSettingGuide" placement="bottom-start" :width="190" :offset="0">
+            <template #reference>
+              <div class="flex-cc">
+                <ArtIconButton icon="ri:settings-line" class="setting-btn" @click="openSetting" />
+              </div>
+            </template>
+            <template #default>
+              <p>
+                {{ $t("topBar.guide.title") }}
+                <span :style="{ color: systemThemeColor }">{{ $t("topBar.guide.theme") }}</span>
+                、
+                <span :style="{ color: systemThemeColor }">{{ $t("topBar.guide.menu") }}</span>
+                {{ $t("topBar.guide.description") }}
+              </p>
+            </template>
+          </ElPopover>
+        </div>
+
+        <!-- 主题切换按钮 -->
+        <ArtIconButton
+          v-if="shouldShowThemeToggle"
+          @click="themeAnimation"
+          :icon="isDark ? 'ri:sun-fill' : 'ri:moon-line'"
+        />
+
+        <!-- 用户头像、菜单 -->
+        <ArtUserMenu />
+      </div>
+    </div>
+
+    <!-- 标签页 -->
+    <ArtWorkTab />
+
+    <!-- 通知 -->
+    <ArtNotification v-model:value="showNotice" ref="notice" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+import { useRouter } from "vue-router";
+import { useFullscreen, useWindowSize } from "@vueuse/core";
+import { LanguageEnum, MenuTypeEnum } from "@/enums/appEnum";
+import { useSettingsStore } from "@/store/modules/setting.store";
+import { useUserStore } from "@/store/modules/user.store";
+import { useMenuStore } from "@/store/modules/menu.store";
+import AppConfig from "@/config";
+import { languageOptions } from "@/locales";
+import { mittBus } from "@/utils/sys";
+import { themeAnimation } from "@/utils/ui/animation";
+import { useCommon } from "@/hooks/core/useCommon";
+import { useHeaderBar } from "@/hooks/core/useHeaderBar";
+import ArtUserMenu from "./widget/ArtUserMenu.vue";
+
+defineOptions({ name: "ArtHeaderBar" });
+
+// 检测操作系统类型
+const isWindows = navigator.userAgent.includes("Windows");
+
+const router = useRouter();
+const { locale } = useI18n();
+const { width } = useWindowSize();
+
+const settingStore = useSettingsStore();
+const userStore = useUserStore();
+const menuStore = useMenuStore();
+
+// 顶部栏功能配置
+const {
+  shouldShowMenuButton,
+  shouldShowRefreshButton,
+  shouldShowFastEnter,
+  shouldShowBreadcrumb,
+  shouldShowGlobalSearch,
+  shouldShowFullscreen,
+  shouldShowNotification,
+  shouldShowChat,
+  shouldShowLanguage,
+  shouldShowSettings,
+  shouldShowThemeToggle,
+  fastEnterMinWidth: headerBarFastEnterMinWidth,
+} = useHeaderBar();
+
+const { menuOpen, systemThemeColor, showSettingGuide, menuType, isDark, tabStyle } =
+  storeToRefs(settingStore);
+
+const { language } = storeToRefs(userStore);
+const { menuList } = storeToRefs(menuStore);
+
+const showNotice = ref(false);
+const notice = ref(null);
+
+// 菜单类型判断
+const isLeftMenu = computed(() => menuType.value === MenuTypeEnum.LEFT);
+const isDualMenu = computed(() => menuType.value === MenuTypeEnum.DUAL_MENU);
+const isTopMenu = computed(() => menuType.value === MenuTypeEnum.TOP);
+const isTopLeftMenu = computed(() => menuType.value === MenuTypeEnum.TOP_LEFT);
+
+const { isFullscreen, toggle: toggleFullscreen } = useFullscreen();
+
+onMounted(() => {
+  initLanguage();
+  document.addEventListener("click", bodyCloseNotice);
+});
+
+onUnmounted(() => {
+  document.removeEventListener("click", bodyCloseNotice);
+});
+
+/**
+ * 切换全屏状态
+ */
+const toggleFullScreen = (): void => {
+  toggleFullscreen();
+};
+
+/**
+ * 切换菜单显示/隐藏状态
+ */
+const visibleMenu = (): void => {
+  settingStore.setMenuOpen(!menuOpen.value);
+};
+
+const { homePath } = useCommon();
+const { refresh } = useCommon();
+
+/**
+ * 跳转到首页
+ */
+const toHome = (): void => {
+  router.push(homePath.value);
+};
+
+/**
+ * 刷新页面
+ * @param {number} time - 延迟时间，默认为0毫秒
+ */
+const reload = (time: number = 0): void => {
+  setTimeout(() => {
+    refresh();
+  }, time);
+};
+
+/**
+ * 初始化语言设置
+ */
+const initLanguage = (): void => {
+  locale.value = language.value;
+};
+
+/**
+ * 切换系统语言
+ * @param {LanguageEnum} lang - 目标语言类型
+ */
+const changeLanguage = (lang: LanguageEnum): void => {
+  if (locale.value === lang) return;
+  locale.value = lang;
+  userStore.setLanguage(lang);
+  reload(50);
+};
+
+/**
+ * 打开设置面板
+ */
+const openSetting = (): void => {
+  mittBus.emit("openSetting");
+
+  // 隐藏设置引导提示
+  if (showSettingGuide.value) {
+    settingStore.hideSettingGuide();
+  }
+};
+
+/**
+ * 打开全局搜索对话框
+ */
+const openSearchDialog = (): void => {
+  mittBus.emit("openSearchDialog");
+};
+
+/**
+ * 点击页面其他区域关闭通知面板
+ * @param {Event} e - 点击事件对象
+ */
+const bodyCloseNotice = (e: any): void => {
+  if (!showNotice.value) return;
+
+  const target = e.target as HTMLElement;
+
+  // 检查是否点击了通知按钮或通知面板内部
+  const isNoticeButton = target.closest(".notice-button");
+  const isNoticePanel = target.closest(".art-notification-panel");
+
+  if (!isNoticeButton && !isNoticePanel) {
+    showNotice.value = false;
+  }
+};
+
+/**
+ * 切换通知面板显示状态
+ */
+const visibleNotice = (): void => {
+  showNotice.value = !showNotice.value;
+};
+
+/**
+ * 打开聊天窗口
+ */
+const openChat = (): void => {
+  mittBus.emit("openChat");
+};
+</script>
+
+<style lang="scss" scoped>
+/* Custom animations */
+@keyframes rotate180 {
+  0% {
+    transform: rotate(0);
+  }
+
+  100% {
+    transform: rotate(180deg);
+  }
+}
+
+@keyframes shake {
+  0% {
+    transform: rotate(0);
+  }
+
+  25% {
+    transform: rotate(-5deg);
+  }
+
+  50% {
+    transform: rotate(5deg);
+  }
+
+  75% {
+    transform: rotate(-5deg);
+  }
+
+  100% {
+    transform: rotate(0);
+  }
+}
+
+@keyframes expand {
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.1);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes shrink {
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(0.9);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes moveUp {
+  0% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-3px);
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes breathing {
+  0% {
+    opacity: 0.4;
+    transform: scale(0.9);
+  }
+
+  50% {
+    opacity: 1;
+    transform: scale(1.1);
+  }
+
+  100% {
+    opacity: 0.4;
+    transform: scale(0.9);
+  }
+}
+
+/* Hover animation classes */
+.refresh-btn:hover :deep(.art-svg-icon) {
+  animation: rotate180 0.5s;
+}
+
+.language-btn:hover :deep(.art-svg-icon) {
+  animation: moveUp 0.4s;
+}
+
+.setting-btn:hover :deep(.art-svg-icon) {
+  animation: rotate180 0.5s;
+}
+
+.full-screen-btn:hover :deep(.art-svg-icon) {
+  animation: expand 0.6s forwards;
+}
+
+.exit-full-screen-btn:hover :deep(.art-svg-icon) {
+  animation: shrink 0.6s forwards;
+}
+
+.notice-button:hover :deep(.art-svg-icon) {
+  animation: shake 0.5s ease-in-out;
+}
+
+.chat-button:hover :deep(.art-svg-icon) {
+  animation: shake 0.5s ease-in-out;
+}
+
+/* Breathing animation for chat dot */
+.breathing-dot {
+  animation: breathing 1.5s ease-in-out infinite;
+}
+
+/* iPad breakpoint adjustments */
+@media screen and (width <= 768px) {
+  .logo2 {
+    display: block !important;
+  }
+}
+
+@media screen and (width <= 640px) {
+  .btn-box {
+    width: 40px;
+  }
+}
+</style>
diff --git a/frontend/new-web/src/layouts/art-header-bar/widget/ArtUserMenu.vue b/frontend/new-web/src/layouts/art-header-bar/widget/ArtUserMenu.vue
new file mode 100644
index 00000000..549ac4f1
--- /dev/null
+++ b/frontend/new-web/src/layouts/art-header-bar/widget/ArtUserMenu.vue
@@ -0,0 +1,167 @@
+<!-- 用户菜单 -->
+<template>
+  <ElPopover
+    ref="userMenuPopover"
+    placement="bottom-end"
+    :width="240"
+    :hide-after="0"
+    :offset="10"
+    trigger="hover"
+    :show-arrow="false"
+    popper-class="user-menu-popover"
+    popper-style="padding: 5px 16px;"
+  >
+    <template #reference>
+      <img
+        class="size-8.5 mr-5 c-p rounded-full max-sm:w-6.5 max-sm:h-6.5 max-sm:mr-[16px]"
+        src="@imgs/user/avatar.webp"
+        alt="avatar"
+      />
+    </template>
+    <template #default>
+      <div class="pt-3">
+        <div class="flex-c pb-1 px-0">
+          <img
+            class="w-10 h-10 mr-3 ml-0 overflow-hidden rounded-full float-left"
+            src="@imgs/user/avatar.webp"
+          />
+          <div class="w-[calc(100%-60px)] h-full">
+            <span class="block text-sm font-medium text-g-800 truncate">
+              {{ userInfo.username }}
+            </span>
+            <span class="block mt-0.5 text-xs text-g-500 truncate">{{ userInfo.email }}</span>
+          </div>
+        </div>
+        <ul class="py-4 mt-3 border-t border-g-300/80">
+          <li class="btn-item" @click="goPage('/system/user-center')">
+            <ArtSvgIcon icon="ri:user-3-line" />
+            <span>{{ $t("topBar.user.userCenter") }}</span>
+          </li>
+          <li class="btn-item" @click="toDocs()">
+            <ArtSvgIcon icon="ri:book-2-line" />
+            <span>{{ $t("topBar.user.docs") }}</span>
+          </li>
+          <li class="btn-item" @click="toGithub()">
+            <ArtSvgIcon icon="ri:github-line" />
+            <span>{{ $t("topBar.user.github") }}</span>
+          </li>
+          <li class="btn-item" @click="lockScreen()">
+            <ArtSvgIcon icon="ri:lock-line" />
+            <span>{{ $t("topBar.user.lockScreen") }}</span>
+          </li>
+          <div class="w-full h-px my-2 bg-g-300/80"></div>
+          <div class="log-out c-p" @click="handleLogout">
+            {{ $t("topBar.user.logout") }}
+          </div>
+        </ul>
+      </div>
+    </template>
+  </ElPopover>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+import { useRouter } from "vue-router";
+import { ElMessageBox } from "element-plus";
+import { useUserStore } from "@/store/modules/user.store";
+import { WEB_LINKS } from "@/utils/constants";
+import { mittBus } from "@/utils/sys";
+
+defineOptions({ name: "ArtUserMenu" });
+
+const router = useRouter();
+const { t } = useI18n();
+const userStore = useUserStore();
+
+const { info: userInfo } = storeToRefs(userStore);
+const userMenuPopover = ref();
+
+/**
+ * 页面跳转
+ * @param {string} path - 目标路径
+ */
+const goPage = (path: string): void => {
+  router.push(path);
+};
+
+/**
+ * 打开文档页面
+ */
+const toDocs = (): void => {
+  window.open(WEB_LINKS.DOCS);
+};
+
+/**
+ * 打开 GitHub 页面
+ */
+const toGithub = (): void => {
+  window.open(WEB_LINKS.GITHUB);
+};
+
+/**
+ * 打开锁屏功能
+ */
+const lockScreen = (): void => {
+  mittBus.emit("openLockScreen");
+};
+
+/**
+ * 用户登出确认
+ */
+const handleLogout = (): void => {
+  closeUserMenu();
+  setTimeout(() => {
+    ElMessageBox.confirm(t("common.logoutTips"), t("common.tips"), {
+      confirmButtonText: t("common.confirm"),
+      cancelButtonText: t("common.cancel"),
+      customClass: "login-out-dialog",
+    }).then(() => {
+      userStore.logout();
+    });
+  }, 200);
+};
+
+/**
+ * 关闭用户菜单弹出层
+ */
+const closeUserMenu = (): void => {
+  setTimeout(() => {
+    userMenuPopover.value.hide();
+  }, 100);
+};
+</script>
+
+<style scoped>
+@reference '@styles/core/tailwind.css';
+
+@layer components {
+  .btn-item {
+    @apply flex items-center p-2 mb-3 select-none rounded-md cursor-pointer last:mb-0;
+
+    span {
+      @apply text-sm;
+    }
+
+    .art-svg-icon {
+      @apply mr-2 text-base;
+    }
+
+    &:hover {
+      background-color: var(--art-gray-200);
+    }
+  }
+}
+
+.log-out {
+  @apply py-1.5
+    mt-5
+    text-xs
+    text-center
+    border
+    border-g-400
+    rounded-md
+    transition-all
+    duration-200
+    hover:shadow-xl;
+}
+</style>
diff --git a/frontend/new-web/src/layouts/art-menus/art-horizontal-menu/index.vue b/frontend/new-web/src/layouts/art-menus/art-horizontal-menu/index.vue
new file mode 100644
index 00000000..71e5cd77
--- /dev/null
+++ b/frontend/new-web/src/layouts/art-menus/art-horizontal-menu/index.vue
@@ -0,0 +1,110 @@
+<!-- 水平菜单 -->
+<template>
+  <div class="flex-1 overflow-hidden">
+    <ElMenu
+      :ellipsis="true"
+      mode="horizontal"
+      :default-active="routerPath"
+      :text-color="isDark ? 'var(--art-gray-800)' : 'var(--art-gray-700)'"
+      :popper-offset="-6"
+      background-color="transparent"
+      :show-timeout="50"
+      :hide-timeout="50"
+      popper-class="horizontal-menu-popper"
+      class="w-full border-none"
+    >
+      <HorizontalSubmenu
+        v-for="item in filteredMenuItems"
+        :key="item.path"
+        :item="item"
+        :isMobile="false"
+        :level="0"
+      />
+    </ElMenu>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { AppRouteRecord } from "@/types/router";
+import HorizontalSubmenu from "./widget/HorizontalSubmenu.vue";
+import { useSettingsStore } from "@/store/modules/setting.store";
+
+defineOptions({ name: "ArtHorizontalMenu" });
+
+const settingStore = useSettingsStore();
+const { isDark } = storeToRefs(settingStore);
+
+interface Props {
+  /** 菜单列表数据 */
+  list: AppRouteRecord[];
+}
+
+const route = useRoute();
+
+const props = withDefaults(defineProps<Props>(), {
+  list: () => [],
+});
+
+/**
+ * 过滤后的菜单项列表
+ * 只显示未隐藏的菜单项
+ */
+const filteredMenuItems = computed(() => {
+  return filterMenuItems(props.list);
+});
+
+/**
+ * 当前激活的路由路径
+ * 用于菜单高亮显示
+ */
+const routerPath = computed(() => String(route.meta.activePath || route.path));
+
+/**
+ * 递归过滤菜单项，移除隐藏的菜单
+ * 如果一个父菜单的所有子菜单都被隐藏，则父菜单也会被隐藏
+ * @param items 菜单项数组
+ * @returns 过滤后的菜单项数组
+ */
+const filterMenuItems = (items: AppRouteRecord[]): AppRouteRecord[] => {
+  return items
+    .filter((item) => {
+      // 如果当前项被隐藏，直接过滤掉
+      if (item.meta.isHide) {
+        return false;
+      }
+
+      // 如果有子菜单，递归过滤子菜单
+      if (item.children && item.children.length > 0) {
+        const filteredChildren = filterMenuItems(item.children);
+        // 如果所有子菜单都被过滤掉了，则隐藏父菜单
+        return filteredChildren.length > 0;
+      }
+
+      // 叶子节点且未被隐藏，保留
+      return true;
+    })
+    .map((item) => ({
+      ...item,
+      children: item.children ? filterMenuItems(item.children) : undefined,
+    }));
+};
+</script>
+
+<style scoped>
+/* Remove el-menu bottom border */
+:deep(.el-menu) {
+  border-bottom: none !important;
+}
+
+/* Remove default styles for first-level menu items */
+:deep(.el-menu-item[tabindex="0"]) {
+  background-color: transparent !important;
+  border: none !important;
+}
+
+/* Remove bottom border from submenu titles */
+:deep(.el-menu--horizontal .el-sub-menu__title) {
+  padding: 0 30px 0 10px !important;
+  border: 0 !important;
+}
+</style>
diff --git a/frontend/new-web/src/layouts/art-menus/art-horizontal-menu/widget/HorizontalSubmenu.vue b/frontend/new-web/src/layouts/art-menus/art-horizontal-menu/widget/HorizontalSubmenu.vue
new file mode 100644
index 00000000..16902dec
--- /dev/null
+++ b/frontend/new-web/src/layouts/art-menus/art-horizontal-menu/widget/HorizontalSubmenu.vue
@@ -0,0 +1,106 @@
+<template>
+  <ElSubMenu v-if="hasChildren" :index="item.path || item.meta.title" class="!p-0">
+    <template #title>
+      <MenuRouteIcon :icon="item.meta.icon" :color="theme?.iconColor" class="mr-1 text-lg" />
+      <span class="text-md">{{ formatMenuTitle(item.meta.title) }}</span>
+      <div v-if="item.meta.showBadge" class="art-badge art-badge-horizontal" />
+      <div v-if="item.meta.showTextBadge" class="art-text-badge">
+        {{ item.meta.showTextBadge }}
+      </div>
+    </template>
+
+    <!-- 递归调用自身处理子菜单 -->
+    <HorizontalSubmenu
+      v-for="child in filteredChildren"
+      :key="child.path"
+      :item="child"
+      :theme="theme"
+      :is-mobile="isMobile"
+      :level="level + 1"
+      @close="closeMenu"
+    />
+  </ElSubMenu>
+
+  <ElMenuItem
+    v-else-if="isNavigableRoute"
+    :index="item.path || item.meta.title"
+    @click="goPage(item)"
+  >
+    <MenuRouteIcon
+      :icon="item.meta.icon"
+      :color="theme?.iconColor"
+      class="mr-1 text-lg"
+      :style="{ color: theme.iconColor }"
+    />
+    <span class="text-md">{{ formatMenuTitle(item.meta.title) }}</span>
+    <div
+      v-if="item.meta.showBadge"
+      class="art-badge"
+      :style="{ right: level === 0 ? '10px' : '20px' }"
+    />
+    <div v-if="item.meta.showTextBadge && level !== 0" class="art-text-badge">
+      {{ item.meta.showTextBadge }}
+    </div>
+  </ElMenuItem>
+</template>
+
+<script lang="ts" setup>
+import { computed, type PropType } from "vue";
+import { AppRouteRecord } from "@/types/router";
+import { handleMenuJump } from "@/utils/navigation";
+import { formatMenuTitle } from "@/utils/navigation/router";
+
+const props = defineProps({
+  item: {
+    type: Object as PropType<AppRouteRecord>,
+    required: true,
+  },
+  theme: {
+    type: Object,
+    default: () => ({}),
+  },
+  isMobile: Boolean,
+  level: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const emit = defineEmits(["close"]);
+
+// 过滤后的子菜单项（不包含隐藏的）
+const filteredChildren = computed(() => {
+  return props.item.children?.filter((child) => !child.meta.isHide) || [];
+});
+
+// 父菜单如果本身就是页面，则即使没有可见子菜单也应该保留为菜单项。
+const isNavigableRoute = computed(() => {
+  return !!(
+    !props.item.meta.isHide &&
+    ((props.item.path && props.item.path.trim()) ||
+      props.item.meta.link ||
+      props.item.meta.isIframe === true) &&
+    (props.item.component || props.item.meta.link || props.item.meta.isIframe === true)
+  );
+});
+
+// 计算当前项是否有可见的子菜单
+const hasChildren = computed(() => {
+  return filteredChildren.value.length > 0;
+});
+
+const goPage = (item: AppRouteRecord) => {
+  closeMenu();
+  handleMenuJump(item);
+};
+
+const closeMenu = () => {
+  emit("close");
+};
+</script>
+
+<style scoped>
+:deep(.el-sub-menu__title .el-sub-menu__icon-arrow) {
+  right: 10px !important;
+}
+</style>
diff --git a/frontend/new-web/src/layouts/art-menus/art-mixed-menu/index.vue b/frontend/new-web/src/layouts/art-menus/art-mixed-menu/index.vue
new file mode 100644
index 00000000..b4c3a365
--- /dev/null
+++ b/frontend/new-web/src/layouts/art-menus/art-mixed-menu/index.vue
@@ -0,0 +1,279 @@
+<!-- 混合菜单 -->
+<template>
+  <div class="relative box-border flex-c w-full overflow-hidden">
+    <!-- 左侧滚动按钮 -->
+    <div v-show="showLeftArrow" class="button-arrow" @click="scroll('left')">
+      <ElIcon>
+        <ArrowLeft />
+      </ElIcon>
+    </div>
+
+    <!-- 滚动容器 -->
+    <ElScrollbar
+      ref="scrollbarRef"
+      wrap-class="scrollbar-wrapper"
+      :horizontal="true"
+      @scroll="handleScroll"
+      @wheel="handleWheel"
+    >
+      <div class="box-border flex-c flex-shrink-0 flex-nowrap h-15 whitespace-nowrap">
+        <template v-for="item in processedMenuList" :key="item.meta.title">
+          <div
+            v-if="!item.meta.isHide"
+            class="menu-item relative flex-shrink-0 h-10 px-3 text-sm flex-c c-p hover:text-theme"
+            :class="{
+              'menu-item-active text-theme': item.isActive,
+            }"
+            @click="handleMenuJump(item, true)"
+          >
+            <MenuRouteIcon
+              :icon="item.meta.icon"
+              class="text-lg text-g-700 dark:text-g-800 mr-1"
+              :class="item.isActive && '!text-theme'"
+            />
+            <span
+              class="text-md text-g-700 dark:text-g-800"
+              :class="item.isActive && '!text-theme'"
+            >
+              {{ item.formattedTitle }}
+            </span>
+            <div v-if="item.meta.showBadge" class="art-badge art-badge-mixed" />
+          </div>
+        </template>
+      </div>
+    </ElScrollbar>
+
+    <!-- 右侧滚动按钮 -->
+    <div v-show="showRightArrow" class="button-arrow right-2" @click="scroll('right')">
+      <ElIcon>
+        <ArrowRight />
+      </ElIcon>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, nextTick } from "vue";
+import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
+import { useThrottleFn } from "@vueuse/core";
+import { formatMenuTitle } from "@/utils/navigation/router";
+import { handleMenuJump } from "@/utils/navigation";
+import type { AppRouteRecord } from "@/types/router";
+
+defineOptions({ name: "ArtMixedMenu" });
+
+interface Props {
+  /** 菜单列表数据 */
+  list: AppRouteRecord[];
+}
+
+interface ProcessedMenuItem extends AppRouteRecord {
+  isActive: boolean;
+  formattedTitle: string;
+}
+
+type ScrollDirection = "left" | "right";
+
+const route = useRoute();
+
+const props = withDefaults(defineProps<Props>(), {
+  list: () => [],
+});
+
+const scrollbarRef = ref<any>();
+const showLeftArrow = ref(false);
+const showRightArrow = ref(false);
+
+/** 滚动配置 */
+const SCROLL_CONFIG = {
+  /** 点击按钮时的滚动距离 */
+  BUTTON_SCROLL_DISTANCE: 200,
+  /** 鼠标滚轮快速滚动时的步长 */
+  WHEEL_FAST_STEP: 35,
+  /** 鼠标滚轮慢速滚动时的步长 */
+  WHEEL_SLOW_STEP: 30,
+  /** 区分快慢滚动的阈值 */
+  WHEEL_FAST_THRESHOLD: 100,
+};
+
+/**
+ * 获取当前激活路径
+ * 使用computed缓存，避免重复计算
+ */
+const currentActivePath = computed(() => {
+  return String(route.meta.activePath || route.path);
+});
+
+/**
+ * 判断菜单项是否为激活状态
+ * 递归检查子菜单中是否包含当前路径
+ * @param item 菜单项数据
+ * @returns 是否为激活状态
+ */
+const isMenuItemActive = (item: AppRouteRecord): boolean => {
+  const activePath = currentActivePath.value;
+
+  // 如果有子菜单，递归检查子菜单
+  if (item.children?.length) {
+    return item.children.some((child) => {
+      if (child.children?.length) {
+        return isMenuItemActive(child);
+      }
+      return child.path === activePath;
+    });
+  }
+
+  // 直接比较路径
+  return item.path === activePath;
+};
+
+/**
+ * 预处理菜单列表
+ * 缓存每个菜单项的激活状态和格式化标题
+ */
+const processedMenuList = computed<ProcessedMenuItem[]>(() => {
+  return props.list.map((item) => ({
+    ...item,
+    isActive: isMenuItemActive(item),
+    formattedTitle: formatMenuTitle(item.meta.title),
+  }));
+});
+
+/**
+ * 处理滚动事件的核心逻辑
+ * 根据滚动位置显示/隐藏滚动按钮
+ */
+const handleScrollCore = (): void => {
+  if (!scrollbarRef.value?.wrapRef) return;
+
+  const { scrollLeft, scrollWidth, clientWidth } = scrollbarRef.value.wrapRef;
+
+  // 判断是否显示左侧滚动按钮
+  showLeftArrow.value = scrollLeft > 0;
+
+  // 判断是否显示右侧滚动按钮
+  showRightArrow.value = scrollLeft + clientWidth < scrollWidth;
+};
+
+/**
+ * 节流后的滚动事件处理函数
+ * 调整节流间隔为16ms，约等于60fps
+ */
+const handleScroll = useThrottleFn(handleScrollCore, 16);
+
+/**
+ * 滚动菜单容器
+ * @param direction 滚动方向，left 或 right
+ */
+const scroll = (direction: ScrollDirection): void => {
+  if (!scrollbarRef.value?.wrapRef) return;
+
+  const currentScroll = scrollbarRef.value.wrapRef.scrollLeft;
+  const targetScroll =
+    direction === "left"
+      ? currentScroll - SCROLL_CONFIG.BUTTON_SCROLL_DISTANCE
+      : currentScroll + SCROLL_CONFIG.BUTTON_SCROLL_DISTANCE;
+
+  // 平滑滚动到目标位置
+  scrollbarRef.value.wrapRef.scrollTo({
+    left: targetScroll,
+    behavior: "smooth",
+  });
+};
+
+/**
+ * 处理鼠标滚轮事件
+ * 优化滚轮响应性能
+ * @param event 滚轮事件
+ */
+const handleWheel = (event: WheelEvent): void => {
+  // 立即阻止默认滚动行为和事件冒泡，避免页面滚动
+  event.preventDefault();
+  event.stopPropagation();
+
+  // 直接处理滚动，提升响应性
+  if (!scrollbarRef.value?.wrapRef) return;
+
+  const { wrapRef } = scrollbarRef.value;
+  const { scrollLeft, scrollWidth, clientWidth } = wrapRef;
+
+  // 使用更小的滚动步长，让滚动更平滑
+  const scrollStep =
+    Math.abs(event.deltaY) > SCROLL_CONFIG.WHEEL_FAST_THRESHOLD
+      ? SCROLL_CONFIG.WHEEL_FAST_STEP
+      : SCROLL_CONFIG.WHEEL_SLOW_STEP;
+  const scrollDelta = event.deltaY > 0 ? scrollStep : -scrollStep;
+  const targetScroll = Math.max(0, Math.min(scrollLeft + scrollDelta, scrollWidth - clientWidth));
+
+  // 立即滚动，无动画
+  wrapRef.scrollLeft = targetScroll;
+
+  // 更新滚动按钮状态
+  handleScrollCore();
+};
+
+/**
+ * 初始化滚动状态
+ */
+const initScrollState = (): void => {
+  nextTick(() => {
+    handleScrollCore();
+  });
+};
+
+onMounted(initScrollState);
+</script>
+
+<style scoped>
+@reference '@styles/core/tailwind.css';
+
+.button-arrow {
+  @apply absolute 
+    top-1/2
+    z-2 
+    flex
+    items-center
+    justify-center
+    size-7.5
+    text-g-600 
+    cursor-pointer
+    rounded 
+    transition-all
+    duration-300
+    -translate-y-1/2 
+    hover:text-g-900 
+    hover:bg-g-200;
+}
+</style>
+
+<style scoped>
+:deep(.el-scrollbar__bar.is-horizontal) {
+  bottom: 5px;
+  display: none;
+  height: 2px;
+}
+
+:deep(.scrollbar-wrapper) {
+  flex: 1;
+  min-width: 0;
+  margin: 0 50px 0 30px;
+}
+
+.menu-item-active::after {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 40px;
+  height: 2px;
+  margin: auto;
+  content: "";
+  background-color: var(--theme-color);
+}
+
+@media (width <= 1440px) {
+  :deep(.scrollbar-wrapper) {
+    margin: 0 45px;
+  }
+}
+</style>
diff --git a/frontend/new-web/src/layouts/art-menus/art-sidebar-menu/index.vue b/frontend/new-web/src/layouts/art-menus/art-sidebar-menu/index.vue
new file mode 100755
index 00000000..d3c47297
--- /dev/null
+++ b/frontend/new-web/src/layouts/art-menus/art-sidebar-menu/index.vue
@@ -0,0 +1,359 @@
+<!-- 左侧菜单 或 双列菜单 -->
+<template>
+  <div
+    class="layout-sidebar"
+    v-if="showLeftMenu || isDualMenu"
+    :class="{ 'no-border': menuList.length === 0 }"
+  >
+    <!-- 双列菜单（左侧） -->
+    <div
+      v-if="isDualMenu"
+      class="dual-menu-left"
+      :style="{ width: dualMenuShowText ? '80px' : '64px', background: getMenuTheme.background }"
+    >
+      <ArtLogo class="logo" @click="navigateToHome" />
+
+      <ElScrollbar style="height: calc(100% - 135px)">
+        <ul>
+          <li v-for="menu in firstLevelMenus" :key="menu.path" @click="handleMenuJump(menu, true)">
+            <ElTooltip
+              class="box-item"
+              effect="dark"
+              :content="$t(menu.meta.title)"
+              placement="right"
+              :offset="15"
+              :hide-after="0"
+              :disabled="dualMenuShowText"
+            >
+              <div
+                :class="{
+                  'is-active': menu.meta.isFirstLevel
+                    ? menu.path === route.path
+                    : menu.path === firstLevelMenuPath,
+                }"
+                :style="{
+                  height: dualMenuShowText ? '60px' : '46px',
+                }"
+              >
+                <MenuRouteIcon
+                  class="menu-icon text-g-700 dark:text-g-800"
+                  :icon="menu.meta.icon"
+                  :style="{
+                    marginBottom: dualMenuShowText ? '5px' : '0',
+                  }"
+                />
+                <span v-if="dualMenuShowText" class="text-md text-g-700">
+                  {{ $t(menu.meta.title) }}
+                </span>
+                <div v-if="menu.meta.showBadge" class="art-badge art-badge-dual" />
+              </div>
+            </ElTooltip>
+          </li>
+        </ul>
+      </ElScrollbar>
+
+      <ArtIconButton
+        class="switch-btn size-10"
+        icon="ri:arrow-left-right-fill"
+        @click="toggleDualMenuMode"
+      />
+    </div>
+
+    <!-- 左侧菜单 || 双列菜单（右侧） -->
+    <div
+      v-show="menuList.length > 0"
+      class="menu-left"
+      :class="`menu-left-${getMenuTheme.theme} menu-left-${!menuOpen ? 'close' : 'open'}`"
+      :style="{ background: getMenuTheme.background }"
+    >
+      <!-- Logo、系统名称 -->
+      <div
+        class="header"
+        @click="navigateToHome"
+        :style="{
+          background: getMenuTheme.background,
+        }"
+      >
+        <ArtLogo v-if="!isDualMenu" class="logo" />
+
+        <p
+          :class="{ 'is-dual-menu-name': isDualMenu }"
+          :style="{
+            color: getMenuTheme.systemNameColor,
+            opacity: !menuOpen ? 0 : 1,
+          }"
+        >
+          {{ AppConfig.systemInfo.name }}
+        </p>
+      </div>
+      <ElScrollbar :style="scrollbarStyle">
+        <ElMenu
+          :class="'el-menu-' + getMenuTheme.theme"
+          :collapse="!menuOpen"
+          :default-active="routerPath"
+          :text-color="getMenuTheme.textColor"
+          :unique-opened="uniqueOpened"
+          :background-color="getMenuTheme.background"
+          :default-openeds="defaultOpenedMenus"
+          :popper-class="`menu-left-popper menu-left-${getMenuTheme.theme}-popper`"
+          :show-timeout="50"
+          :hide-timeout="50"
+        >
+          <SidebarSubmenu
+            :list="menuList"
+            :isMobile="isMobileMode"
+            :theme="getMenuTheme"
+            @close="handleMenuClose"
+          />
+        </ElMenu>
+      </ElScrollbar>
+
+      <!-- 双列菜单右侧折叠按钮 -->
+      <div class="dual-menu-collapse-btn" v-if="isDualMenu" @click="toggleMenuVisibility">
+        <ArtSvgIcon
+          class="text-g-500/70"
+          :icon="menuOpen ? 'ri:arrow-left-wide-fill' : 'ri:arrow-right-wide-fill'"
+        />
+      </div>
+
+      <div
+        class="menu-model"
+        @click="toggleMenuVisibility"
+        :style="{
+          opacity: !menuOpen ? 0 : 1,
+          transform: showMobileModal ? 'scale(1)' : 'scale(0)',
+        }"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import AppConfig from "@/config";
+import { useSettingsStore } from "@/store/modules/setting.store";
+import { MenuTypeEnum, MenuWidth } from "@/enums/appEnum";
+import { useMenuStore } from "@/store/modules/menu.store";
+import { isIframe } from "@/utils/navigation";
+import { handleMenuJump } from "@/utils/navigation";
+import SidebarSubmenu from "./widget/SidebarSubmenu.vue";
+import { useCommon } from "@/hooks/core/useCommon";
+import { useWindowSize, useTimeoutFn } from "@vueuse/core";
+
+defineOptions({ name: "ArtSidebarMenu" });
+
+const MOBILE_BREAKPOINT = 800;
+const ANIMATION_DELAY = 350;
+const MENU_CLOSE_WIDTH = MenuWidth.CLOSE;
+
+const route = useRoute();
+const router = useRouter();
+const settingStore = useSettingsStore();
+
+const { getMenuOpenWidth, menuType, uniqueOpened, dualMenuShowText, menuOpen, getMenuTheme } =
+  storeToRefs(settingStore);
+
+// 组件内部状态
+const defaultOpenedMenus = ref<string[]>([]);
+const isMobileMode = ref(false);
+const showMobileModal = ref(false);
+
+// 使用 VueUse 的窗口尺寸监听
+const { width } = useWindowSize();
+
+// 菜单宽度相关
+const menuopenwidth = computed(() => getMenuOpenWidth.value);
+const menuclosewidth = computed(() => MENU_CLOSE_WIDTH);
+
+// 菜单类型判断
+const isTopLeftMenu = computed(() => menuType.value === MenuTypeEnum.TOP_LEFT);
+const showLeftMenu = computed(
+  () => menuType.value === MenuTypeEnum.LEFT || menuType.value === MenuTypeEnum.TOP_LEFT
+);
+const isDualMenu = computed(() => menuType.value === MenuTypeEnum.DUAL_MENU);
+
+// 移动端屏幕判断（使用 computed 避免重复计算）
+const isMobileScreen = computed(() => width.value < MOBILE_BREAKPOINT);
+
+// 路由相关
+const firstLevelMenuPath = computed(() => route.matched[0]?.path);
+const routerPath = computed(() => String(route.meta.activePath || route.path));
+
+// 菜单数据
+const firstLevelMenus = computed(() => {
+  return useMenuStore().menuList.filter((menu) => !menu.meta.isHide);
+});
+
+const menuList = computed(() => {
+  const menuStore = useMenuStore();
+  const allMenus = menuStore.menuList;
+
+  // 如果不是顶部左侧菜单或双列菜单，直接返回完整菜单列表
+  if (!isTopLeftMenu.value && !isDualMenu.value) {
+    return allMenus;
+  }
+
+  // 处理 iframe 路径
+  if (isIframe(route.path)) {
+    return findIframeMenuList(route.path, allMenus);
+  }
+
+  // 处理一级菜单
+  if (route.meta.isFirstLevel) {
+    return [];
+  }
+
+  // 返回当前顶级路径对应的子菜单
+  const currentTopPath = `/${route.path.split("/")[1]}`;
+  let currentMenu = allMenus.find((menu) => menu.path === currentTopPath);
+  if (!currentMenu && allMenus.length > 0) {
+    // 静态工作台（如 /workbench）不在动态菜单树下，仍对齐首个可展开的顶级模块（通常为仪表盘）
+    currentMenu =
+      allMenus.find((menu) => !menu.meta?.isHide && menu.children?.length) ?? allMenus[0];
+  }
+  return currentMenu?.children ?? [];
+});
+
+// 双列菜单收起时的滚动条样式
+const scrollbarStyle = computed(() => {
+  const isCollapsed = isDualMenu.value && !menuOpen.value;
+  return {
+    transform: isCollapsed ? "translateY(-50px)" : "translateY(0)",
+    height: isCollapsed ? "calc(100% + 50px)" : "calc(100% - 60px)",
+    transition: "transform 0.3s ease",
+  };
+});
+
+/**
+ * 延迟隐藏移动端模态框（使用 VueUse 的 useTimeoutFn）
+ */
+const { start: delayHideMobileModal } = useTimeoutFn(
+  () => {
+    showMobileModal.value = false;
+  },
+  ANIMATION_DELAY,
+  { immediate: false }
+);
+
+/**
+ * 查找 iframe 对应的二级菜单列表
+ */
+const findIframeMenuList = (currentPath: string, menuList: any[]) => {
+  // 递归查找包含当前路径的菜单项
+  const hasPath = (items: any[]): boolean => {
+    for (const item of items) {
+      if (item.path === currentPath) {
+        return true;
+      }
+      if (item.children && hasPath(item.children)) {
+        return true;
+      }
+    }
+    return false;
+  };
+
+  // 遍历一级菜单查找匹配的子菜单
+  for (const menu of menuList) {
+    if (menu.children && hasPath(menu.children)) {
+      return menu.children;
+    }
+  }
+  return [];
+};
+
+const { homePath } = useCommon();
+
+/**
+ * 导航到首页
+ */
+const navigateToHome = (): void => {
+  router.push(homePath.value);
+};
+
+/**
+ * 切换菜单显示/隐藏
+ */
+const toggleMenuVisibility = (): void => {
+  settingStore.setMenuOpen(!menuOpen.value);
+
+  // 移动端模态框控制逻辑
+  if (isMobileScreen.value) {
+    if (!menuOpen.value) {
+      // 菜单即将打开，立即显示模态框
+      showMobileModal.value = true;
+    } else {
+      // 菜单即将关闭，延迟隐藏模态框确保动画完成
+      delayHideMobileModal();
+    }
+  }
+};
+
+/**
+ * 处理菜单关闭（来自子组件）
+ */
+const handleMenuClose = (): void => {
+  if (isMobileScreen.value) {
+    settingStore.setMenuOpen(false);
+    delayHideMobileModal();
+  }
+};
+
+/**
+ * 切换双列菜单模式
+ */
+const toggleDualMenuMode = (): void => {
+  settingStore.setDualMenuShowText(!dualMenuShowText.value);
+};
+
+/**
+ * 监听窗口尺寸变化，自动处理移动端菜单
+ */
+watch(width, (newWidth) => {
+  if (newWidth < MOBILE_BREAKPOINT) {
+    settingStore.setMenuOpen(false);
+    if (!menuOpen.value) {
+      showMobileModal.value = false;
+    }
+  } else {
+    showMobileModal.value = false;
+  }
+});
+
+/**
+ * 监听菜单开关状态变化
+ */
+watch(menuOpen, (isMenuOpen: boolean) => {
+  if (!isMobileScreen.value) {
+    // 大屏幕设备上，模态框始终隐藏
+    showMobileModal.value = false;
+  } else {
+    // 小屏幕设备上，根据菜单状态控制模态框
+    if (isMenuOpen) {
+      // 菜单打开时立即显示模态框
+      showMobileModal.value = true;
+    } else {
+      // 菜单关闭时延迟隐藏模态框，确保动画完成
+      delayHideMobileModal();
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@use "./style";
+</style>
+
+<style lang="scss">
+@use "./theme";
+
+.layout-sidebar {
+  // 展开的宽度
+  .el-menu:not(.el-menu--collapse) {
+    width: v-bind(menuopenwidth);
+  }
+
+  // 折叠后宽度
+  .el-menu--collapse {
+    width: v-bind(menuclosewidth);
+  }
+}
+</style>
diff --git a/frontend/new-web/src/layouts/art-menus/art-sidebar-menu/style.scss b/frontend/new-web/src/layouts/art-menus/art-sidebar-menu/style.scss
new file mode 100755
index 00000000..08dec787
--- /dev/null
+++ b/frontend/new-web/src/layouts/art-menus/art-sidebar-menu/style.scss
@@ -0,0 +1,251 @@
+.layout-sidebar {
+  display: flex;
+  height: 100vh;
+  user-select: none;
+  scrollbar-width: none;
+  border-right: 1px solid var(--art-card-border);
+
+  &.no-border {
+    border-right: none !important;
+  }
+
+  // 自定义滚动条宽度
+  :deep(.el-scrollbar__bar.is-vertical) {
+    width: 4px;
+  }
+
+  :deep(.el-scrollbar__thumb) {
+    right: -2px;
+    background-color: #ccc;
+    border-radius: 2px;
+  }
+
+  .dual-menu-left {
+    position: relative;
+    width: 80px;
+    height: 100%;
+    border-right: 1px solid var(--art-card-border) !important;
+    transition: width 0.25s;
+
+    .logo {
+      margin: auto;
+      margin-top: 12px;
+      margin-bottom: 3px;
+      cursor: pointer;
+    }
+
+    ul {
+      li {
+        > div {
+          position: relative;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          margin: 8px;
+          overflow: hidden;
+          text-align: center;
+          cursor: pointer;
+          border-radius: 5px;
+
+          .art-svg-icon {
+            display: block;
+            margin: 0 auto;
+            font-size: 20px;
+          }
+
+          span {
+            display: -webkit-box;
+            width: 100%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            -webkit-line-clamp: 1;
+            line-clamp: 1;
+            font-size: 12px;
+            -webkit-box-orient: vertical;
+          }
+
+          &.is-active {
+            background: var(--el-color-primary-light-9);
+
+            .art-svg-icon,
+            span {
+              color: var(--theme-color) !important;
+            }
+          }
+        }
+      }
+    }
+
+    .switch-btn {
+      position: absolute;
+      right: 0;
+      bottom: 15px;
+      left: 0;
+      margin: auto;
+    }
+  }
+
+  .menu-left {
+    position: relative;
+    box-sizing: border-box;
+    height: 100vh;
+
+    @media only screen and (width <= 640px) {
+      height: 100dvh;
+    }
+
+    .el-menu {
+      height: 100%;
+    }
+
+    &:hover {
+      .dual-menu-collapse-btn {
+        opacity: 1 !important;
+      }
+    }
+
+    .dual-menu-collapse-btn {
+      position: absolute;
+      top: 50%;
+      right: -11px;
+      z-index: 10;
+      width: 11px;
+      height: 50px;
+      cursor: pointer;
+      background-color: var(--default-box-color);
+      border: 1px solid var(--art-card-border);
+      border-radius: 0 15px 15px 0;
+      opacity: 0;
+      transform: translateY(-50%);
+      transition: opacity 0.2s;
+
+      &:hover {
+        .art-svg-icon {
+          color: var(--art-gray-800) !important;
+        }
+      }
+
+      .art-svg-icon {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: -4px;
+        margin: auto;
+        transition: all 0.3s;
+      }
+    }
+  }
+
+  .header {
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 60px;
+    overflow: hidden;
+    line-height: 60px;
+    cursor: pointer;
+
+    .logo {
+      margin-left: 22px;
+    }
+
+    p {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 58px;
+      box-sizing: border-box;
+      margin-left: 10px;
+      font-size: 18px;
+
+      &.is-dual-menu-name {
+        left: 25px;
+        margin: auto;
+      }
+    }
+  }
+
+  .el-menu {
+    box-sizing: border-box;
+    // 防止菜单内的滚动影响整个页面滚动
+    overscroll-behavior: contain;
+    scrollbar-width: none;
+    border-right: 0;
+    -ms-scroll-chaining: contain;
+
+    &::-webkit-scrollbar {
+      width: 0 !important;
+    }
+  }
+
+  .menu-model {
+    display: none;
+  }
+}
+
+@media only screen and (width <= 800px) {
+  .layout-sidebar {
+    width: 0;
+
+    .header {
+      height: 50px;
+      line-height: 50px;
+    }
+
+    .el-menu {
+      height: calc(100vh - 60px);
+    }
+
+    .el-menu--collapse {
+      width: 0;
+    }
+
+    // 折叠状态下的header样式
+    .menu-left-close .header {
+      .logo {
+        display: none;
+      }
+
+      p {
+        left: 16px;
+        font-size: 0;
+        opacity: 0 !important;
+      }
+    }
+
+    .menu-model {
+      position: fixed;
+      top: 0;
+      left: 0;
+      z-index: -1;
+      display: block;
+      width: 100%;
+      height: 100vh;
+      background: rgba($color: #000, $alpha: 50%);
+      transition: opacity 0.2s ease-in-out;
+    }
+  }
+}
+
+@media only screen and (width <= 640px) {
+  .layout-sidebar {
+    border-right: 0 !important;
+  }
+}
+
+.dark {
+  .layout-sidebar {
+    border-right: 1px solid rgb(255 255 255 / 13%);
+
+    :deep(.el-scrollbar__thumb) {
+      background-color: #777;
+    }
+
+    .dual-menu-left {
+      border-right: 1px solid rgb(255 255 255 / 9%) !important;
+    }
+  }
+}
diff --git a/frontend/new-web/src/layouts/art-menus/art-sidebar-menu/theme.scss b/frontend/new-web/src/layouts/art-menus/art-sidebar-menu/theme.scss
new file mode 100644
index 00000000..a6ccae5c
--- /dev/null
+++ b/frontend/new-web/src/layouts/art-menus/art-sidebar-menu/theme.scss
@@ -0,0 +1,258 @@
+@use "@styles/core/mixin.scss" as *;
+
+// 菜单样式变量
+$menu-height: 42px;
+$menu-icon-size: 20px;
+$menu-font-size: 14px;
+$hover-bg-color: var(--art-gray-200);
+$popup-menu-height: 40px;
+$popup-menu-padding: 8px;
+$popup-menu-margin: 5px;
+$popup-menu-radius: 6px;
+
+// 通用菜单项样式
+@mixin menu-item-base {
+  width: calc(100% - 16px);
+  margin-left: 8px;
+  border-radius: 6px;
+
+  .menu-icon {
+    margin-left: -7px;
+  }
+}
+
+// 通用 hover 样式
+@mixin menu-hover($bg-color) {
+  .el-sub-menu__title:hover,
+  .el-menu-item:not(.is-active):hover {
+    background: $bg-color !important;
+  }
+}
+
+// 通用选中样式
+@mixin menu-active($color, $bg-color, $icon-color: var(--theme-color)) {
+  .el-menu-item.is-active {
+    color: $color !important;
+    background-color: $bg-color;
+
+    .menu-icon {
+      .art-svg-icon {
+        color: $icon-color !important;
+      }
+    }
+  }
+}
+
+// 弹窗菜单项样式
+@mixin popup-menu-item {
+  height: $popup-menu-height;
+  margin-bottom: $popup-menu-margin;
+  border-radius: $popup-menu-radius;
+
+  .menu-icon {
+    margin-right: 5px;
+  }
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+}
+
+// 主题菜单通用样式（合并 design 和 dark 主题的共同逻辑）
+@mixin theme-menu-base {
+  .el-sub-menu__title,
+  .el-menu-item {
+    @include menu-item-base;
+  }
+}
+
+// 弹窗菜单通用样式
+@mixin popup-menu-base($hover-bg, $active-color, $active-bg) {
+  .el-menu--popup {
+    padding: $popup-menu-padding;
+
+    .el-sub-menu__title:hover,
+    .el-menu-item:hover {
+      background-color: $hover-bg !important;
+      border-radius: $popup-menu-radius;
+    }
+
+    .el-menu-item {
+      @include popup-menu-item;
+
+      &.is-active {
+        color: $active-color !important;
+        background-color: $active-bg !important;
+      }
+    }
+
+    .el-sub-menu {
+      @include popup-menu-item;
+
+      height: $popup-menu-height !important;
+
+      .el-sub-menu__title {
+        height: $popup-menu-height !important;
+        border-radius: $popup-menu-radius;
+      }
+    }
+  }
+}
+
+.layout-sidebar {
+  // ---------------------- Modify default style ----------------------
+
+  // 菜单折叠样式
+  .menu-left-close {
+    .header {
+      .logo {
+        margin: 0 auto;
+      }
+    }
+  }
+
+  // 菜单图标
+  .menu-icon {
+    margin-right: 8px;
+    font-size: $menu-icon-size;
+  }
+
+  // 菜单高度
+  .el-sub-menu__title,
+  .el-menu-item {
+    height: $menu-height !important;
+    margin-bottom: 4px;
+    line-height: $menu-height !important;
+
+    span {
+      font-size: $menu-font-size !important;
+
+      @include ellipsis();
+    }
+  }
+
+  // 右侧箭头
+  .el-sub-menu__icon-arrow {
+    width: 13px !important;
+    font-size: 13px !important;
+  }
+
+  // 菜单折叠
+  .el-menu--collapse {
+    .el-sub-menu.is-active {
+      .el-sub-menu__title {
+        .menu-icon {
+          .art-svg-icon {
+            // 选中菜单图标颜色
+            color: var(--theme-color) !important;
+          }
+        }
+      }
+    }
+  }
+
+  // ---------------------- Design theme menu ----------------------
+  .el-menu-design {
+    @include theme-menu-base;
+    @include menu-active(var(--theme-color), var(--el-color-primary-light-9));
+    @include menu-hover($hover-bg-color);
+
+    .el-sub-menu__icon-arrow {
+      color: var(--art-gray-600);
+    }
+  }
+
+  // ---------------------- Dark theme menu ----------------------
+  .el-menu-dark {
+    @include theme-menu-base;
+    @include menu-active(#fff, #27282d, #fff);
+    @include menu-hover(#0f1015);
+
+    .el-sub-menu__icon-arrow {
+      color: var(--art-gray-400);
+    }
+  }
+
+  // ---------------------- Light theme menu ----------------------
+  .el-menu-light {
+    .el-sub-menu__title,
+    .el-menu-item {
+      .menu-icon {
+        margin-left: 1px;
+      }
+    }
+
+    .el-menu-item.is-active {
+      background-color: var(--el-color-primary-light-9);
+
+      .art-svg-icon {
+        color: var(--theme-color) !important;
+      }
+
+      &::before {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 4px;
+        height: 100%;
+        content: "";
+        background: var(--theme-color);
+      }
+    }
+
+    @include menu-hover($hover-bg-color);
+
+    .el-sub-menu__icon-arrow {
+      color: var(--art-gray-600);
+    }
+  }
+}
+
+@media only screen and (width <= 640px) {
+  .layout-sidebar {
+    .el-menu-design {
+      > .el-sub-menu {
+        margin-left: 0;
+      }
+
+      .el-sub-menu {
+        width: 100% !important;
+      }
+    }
+  }
+}
+
+// 菜单折叠 hover 弹窗样式（浅色主题）
+.el-menu--vertical,
+.el-menu--popup-container {
+  @include popup-menu-base(var(--art-gray-200), var(--art-gray-900), var(--art-gray-200));
+}
+
+// 暗黑模式菜单样式
+.dark {
+  .el-menu--vertical,
+  .el-menu--popup-container {
+    @include popup-menu-base(var(--art-gray-200), var(--art-gray-900), #292a2e);
+  }
+
+  .layout-sidebar {
+    // 图标颜色、文字颜色
+    .menu-icon .art-svg-icon,
+    .menu-name {
+      color: var(--art-gray-800) !important;
+    }
+
+    // 选中的文字颜色跟图标颜色
+    .el-menu-item.is-active {
+      span,
+      .menu-icon .art-svg-icon {
+        color: var(--theme-color) !important;
+      }
+    }
+
+    // 右侧箭头颜色
+    .el-sub-menu__icon-arrow {
+      color: #fff;
+    }
+  }
+}
diff --git a/frontend/new-web/src/layouts/art-menus/art-sidebar-menu/widget/SidebarSubmenu.vue b/frontend/new-web/src/layouts/art-menus/art-sidebar-menu/widget/SidebarSubmenu.vue
new file mode 100755
index 00000000..4d557e37
--- /dev/null
+++ b/frontend/new-web/src/layouts/art-menus/art-sidebar-menu/widget/SidebarSubmenu.vue
@@ -0,0 +1,199 @@
+<template>
+  <template v-for="(item, index) in filteredMenuItems" :key="getUniqueKey(item, index)">
+    <ElSubMenu v-if="hasChildren(item)" :index="item.path || item.meta.title" :level="level">
+      <template #title>
+        <div class="menu-icon flex-cc">
+          <MenuRouteIcon
+            :icon="item.meta.icon"
+            :color="theme?.iconColor"
+            :style="{ color: theme.iconColor }"
+          />
+        </div>
+        <span class="menu-name">
+          {{ formatMenuTitle(item.meta.title) }}
+        </span>
+        <div v-if="item.meta.showBadge" class="art-badge" style="right: 10px" />
+      </template>
+
+      <SidebarSubmenu
+        :list="item.children"
+        :is-mobile="isMobile"
+        :level="level + 1"
+        :theme="theme"
+        @close="closeMenu"
+      />
+    </ElSubMenu>
+
+    <ElMenuItem
+      v-else
+      :index="isExternalLink(item) ? undefined : item.path || item.meta.title"
+      :level-item="level + 1"
+      @click="goPage(item)"
+    >
+      <div class="menu-icon flex-cc">
+        <MenuRouteIcon
+          :icon="item.meta.icon"
+          :color="theme?.iconColor"
+          :style="{ color: theme.iconColor }"
+        />
+      </div>
+      <div
+        v-show="item.meta.showBadge && level === 0 && !menuOpen"
+        class="art-badge"
+        style="right: 5px"
+      />
+
+      <template #title>
+        <span class="menu-name">
+          {{ formatMenuTitle(item.meta.title) }}
+        </span>
+        <div v-if="item.meta.showBadge" class="art-badge" />
+        <div v-if="item.meta.showTextBadge && (level > 0 || menuOpen)" class="art-text-badge">
+          {{ item.meta.showTextBadge }}
+        </div>
+      </template>
+    </ElMenuItem>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import type { AppRouteRecord } from "@/types/router";
+import { formatMenuTitle } from "@/utils/navigation/router";
+import { handleMenuJump } from "@/utils/navigation";
+import { useSettingsStore } from "@/store/modules/setting.store";
+
+interface MenuTheme {
+  iconColor?: string;
+}
+
+interface Props {
+  /** 菜单标题 */
+  title?: string;
+  /** 菜单列表 */
+  list?: AppRouteRecord[];
+  /** 主题配置 */
+  theme?: MenuTheme;
+  /** 是否为移动端模式 */
+  isMobile?: boolean;
+  /** 菜单层级 */
+  level?: number;
+}
+
+interface Emits {
+  /** 关闭菜单事件 */
+  (e: "close"): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: "",
+  list: () => [],
+  theme: () => ({}),
+  isMobile: false,
+  level: 0,
+});
+
+const emit = defineEmits<Emits>();
+
+const settingStore = useSettingsStore();
+
+const { menuOpen } = storeToRefs(settingStore);
+
+/**
+ * 过滤后的菜单项列表
+ * 只显示未隐藏的菜单项
+ */
+const filteredMenuItems = computed(() => filterRoutes(props.list));
+
+/**
+ * 跳转到指定页面
+ * @param item 菜单项数据
+ */
+const goPage = (item: AppRouteRecord): void => {
+  closeMenu();
+  handleMenuJump(item);
+};
+
+/**
+ * 关闭菜单
+ * 触发父组件的关闭事件
+ */
+const closeMenu = (): void => {
+  emit("close");
+};
+
+/**
+ * 判断菜单项本身是否可以作为可点击页面保留在菜单中
+ */
+const isNavigableRoute = (item: AppRouteRecord): boolean => {
+  return !!(
+    !item.meta.isHide &&
+    ((item.path && item.path.trim()) || item.meta.link || item.meta.isIframe === true) &&
+    (item.component || item.meta.link || item.meta.isIframe === true)
+  );
+};
+
+/**
+ * 递归过滤菜单路由，移除隐藏的菜单项
+ * 但如果父菜单本身就是可访问页面，则即使子菜单都被隐藏也应该保留
+ * @param items 菜单项数组
+ * @returns 过滤后的菜单项数组
+ */
+const filterRoutes = (items: AppRouteRecord[]): AppRouteRecord[] => {
+  return items
+    .filter((item) => {
+      // 如果当前项被隐藏，直接过滤掉
+      if (item.meta.isHide) {
+        return false;
+      }
+
+      // 如果有子菜单，递归过滤子菜单
+      if (item.children && item.children.length > 0) {
+        const filteredChildren = filterRoutes(item.children);
+        // 目录菜单要求有可见子菜单；页面菜单则允许仅保留自身
+        return filteredChildren.length > 0 || isNavigableRoute(item);
+      }
+
+      // 叶子节点且未被隐藏，保留
+      return isNavigableRoute(item);
+    })
+    .map((item) => ({
+      ...item,
+      children: item.children ? filterRoutes(item.children) : undefined,
+    }));
+};
+
+/**
+ * 判断菜单项是否包含可见的子菜单
+ * @param item 菜单项数据
+ * @returns 是否包含可见的子菜单
+ */
+const hasChildren = (item: AppRouteRecord): boolean => {
+  if (!item.children || item.children.length === 0) {
+    return false;
+  }
+  // 递归检查是否有可见的子菜单
+  const filteredChildren = filterRoutes(item.children);
+  return filteredChildren.length > 0;
+};
+
+/**
+ * 判断是否为外部链接
+ * @param item 菜单项数据
+ * @returns 是否为外部链接
+ */
+const isExternalLink = (item: AppRouteRecord): boolean => {
+  return !!(item.meta.link && !item.meta.isIframe);
+};
+
+/**
+ * 生成唯一的 key
+ * 使用 path、title 和 index 组合确保唯一性
+ * @param item 菜单项数据
+ * @param index 索引
+ * @returns 唯一的 key
+ */
+const getUniqueKey = (item: AppRouteRecord, index: number): string => {
+  return `${item.path || item.meta.title || "menu"}-${props.level}-${index}`;
+};
+</script>
diff --git a/frontend/new-web/src/layouts/art-notification/index.vue b/frontend/new-web/src/layouts/art-notification/index.vue
new file mode 100755
index 00000000..b5184ce3
--- /dev/null
+++ b/frontend/new-web/src/layouts/art-notification/index.vue
@@ -0,0 +1,456 @@
+<!-- 通知组件 -->
+<template>
+  <div
+    class="art-notification-panel art-card-sm !shadow-xl"
+    :style="{
+      transform: show ? 'scaleY(1)' : 'scaleY(0.9)',
+      opacity: show ? 1 : 0,
+    }"
+    v-show="visible"
+    @click.stop
+  >
+    <div class="flex-cb px-3.5 mt-3.5">
+      <span class="text-base font-medium text-g-800">{{ $t("notice.title") }}</span>
+      <span class="text-xs text-g-800 px-1.5 py-1 c-p select-none rounded hover:bg-g-200">
+        {{ $t("notice.btnRead") }}
+      </span>
+    </div>
+
+    <ul class="box-border flex items-end w-full h-12.5 px-3.5 border-b-d">
+      <li
+        v-for="(item, index) in barList"
+        :key="index"
+        class="h-12 leading-12 mr-5 overflow-hidden text-[13px] text-g-700 c-p select-none"
+        :class="{ 'bar-active': barActiveIndex === index }"
+        @click="changeBar(index)"
+      >
+        {{ item.name }} ({{ item.num }})
+      </li>
+    </ul>
+
+    <div class="w-full h-[calc(100%-95px)]">
+      <div class="h-[calc(100%-60px)] overflow-y-scroll scrollbar-thin">
+        <!-- 通知 -->
+        <ul v-show="barActiveIndex === 0">
+          <li
+            v-for="(item, index) in noticeList"
+            :key="index"
+            class="box-border flex-c px-3.5 py-3.5 c-p last:border-b-0 hover:bg-g-200/60"
+          >
+            <div
+              class="size-9 leading-9 text-center rounded-lg flex-cc"
+              :class="[getNoticeStyle(item.type).iconClass]"
+            >
+              <ArtSvgIcon class="text-lg !bg-transparent" :icon="getNoticeStyle(item.type).icon" />
+            </div>
+            <div class="w-[calc(100%-45px)] ml-3.5">
+              <h4 class="text-sm font-normal leading-5.5 text-g-900">{{ item.title }}</h4>
+              <p class="mt-1.5 text-xs text-g-500">{{ item.time }}</p>
+            </div>
+          </li>
+        </ul>
+
+        <!-- 消息 -->
+        <ul v-show="barActiveIndex === 1">
+          <li
+            v-for="(item, index) in msgList"
+            :key="index"
+            class="box-border flex-c px-3.5 py-3.5 c-p last:border-b-0 hover:bg-g-200/60"
+          >
+            <div class="w-9 h-9">
+              <img :src="item.avatar" class="w-full h-full rounded-lg" />
+            </div>
+            <div class="w-[calc(100%-45px)] ml-3.5">
+              <h4 class="text-xs font-normal leading-5.5">{{ item.title }}</h4>
+              <p class="mt-1.5 text-xs text-g-500">{{ item.time }}</p>
+            </div>
+          </li>
+        </ul>
+
+        <!-- 待办 -->
+        <ul v-show="barActiveIndex === 2">
+          <li
+            v-for="(item, index) in pendingList"
+            :key="index"
+            class="box-border px-5 py-3.5 last:border-b-0"
+          >
+            <h4>{{ item.title }}</h4>
+            <p class="text-xs text-g-500">{{ item.time }}</p>
+          </li>
+        </ul>
+
+        <!-- 空状态 -->
+        <div
+          v-show="currentTabIsEmpty"
+          class="relative top-25 h-full text-g-500 text-center !bg-transparent"
+        >
+          <ArtSvgIcon icon="system-uicons:inbox" class="text-5xl" />
+          <p class="mt-3.5 text-xs !bg-transparent">
+            {{ $t("notice.text[0]") }}{{ barList[barActiveIndex].name }}
+          </p>
+        </div>
+      </div>
+
+      <div class="relative box-border w-full px-3.5">
+        <ElButton class="w-full mt-3" @click="handleViewAll" v-ripple>
+          {{ $t("notice.viewAll") }}
+        </ElButton>
+      </div>
+    </div>
+
+    <div class="h-25"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch, type Ref, type ComputedRef } from "vue";
+import { useI18n } from "vue-i18n";
+
+// 导入头像图片
+import avatar1 from "@/assets/images/avatar/avatar1.webp";
+import avatar2 from "@/assets/images/avatar/avatar2.webp";
+import avatar3 from "@/assets/images/avatar/avatar3.webp";
+import avatar4 from "@/assets/images/avatar/avatar4.webp";
+import avatar5 from "@/assets/images/avatar/avatar5.webp";
+import avatar6 from "@/assets/images/avatar/avatar6.webp";
+
+defineOptions({ name: "ArtNotification" });
+
+interface NoticeItem {
+  /** 标题 */
+  title: string;
+  /** 时间 */
+  time: string;
+  /** 类型 */
+  type: NoticeType;
+}
+
+interface MessageItem {
+  /** 标题 */
+  title: string;
+  /** 时间 */
+  time: string;
+  /** 头像 */
+  avatar: string;
+}
+
+interface PendingItem {
+  /** 标题 */
+  title: string;
+  /** 时间 */
+  time: string;
+}
+
+interface BarItem {
+  /** 名称 */
+  name: ComputedRef<string>;
+  /** 数量 */
+  num: number;
+}
+
+interface NoticeStyle {
+  /** 图标 */
+  icon: string;
+  /** icon 样式 */
+  iconClass: string;
+}
+
+type NoticeType = "email" | "message" | "collection" | "user" | "notice";
+
+const { t } = useI18n();
+
+const props = defineProps<{
+  value: boolean;
+}>();
+
+const emit = defineEmits<{
+  "update:value": [value: boolean];
+}>();
+
+const show = ref(false);
+const visible = ref(false);
+const barActiveIndex = ref(0);
+
+const useNotificationData = () => {
+  // 通知数据
+  const noticeList = ref<NoticeItem[]>([
+    {
+      title: "新增国际化",
+      time: "2024-6-13 0:10",
+      type: "notice",
+    },
+    {
+      title: "冷月呆呆给你发了一条消息",
+      time: "2024-4-21 8:05",
+      type: "message",
+    },
+    {
+      title: "小肥猪关注了你",
+      time: "2020-3-17 21:12",
+      type: "collection",
+    },
+    {
+      title: "新增使用文档",
+      time: "2024-02-14 0:20",
+      type: "notice",
+    },
+    {
+      title: "小肥猪给你发了一封邮件",
+      time: "2024-1-20 0:15",
+      type: "email",
+    },
+    {
+      title: "菜单mock本地真实数据",
+      time: "2024-1-17 22:06",
+      type: "notice",
+    },
+  ]);
+
+  // 消息数据
+  const msgList = ref<MessageItem[]>([
+    {
+      title: "池不胖 关注了你",
+      time: "2021-2-26 23:50",
+      avatar: avatar1,
+    },
+    {
+      title: "唐不苦 关注了你",
+      time: "2021-2-21 8:05",
+      avatar: avatar2,
+    },
+    {
+      title: "中小鱼 关注了你",
+      time: "2020-1-17 21:12",
+      avatar: avatar3,
+    },
+    {
+      title: "何小荷 关注了你",
+      time: "2021-01-14 0:20",
+      avatar: avatar4,
+    },
+    {
+      title: "誶誶淰 关注了你",
+      time: "2020-12-20 0:15",
+      avatar: avatar5,
+    },
+    {
+      title: "冷月呆呆 关注了你",
+      time: "2020-12-17 22:06",
+      avatar: avatar6,
+    },
+  ]);
+
+  // 待办数据
+  const pendingList = ref<PendingItem[]>([]);
+
+  // 标签栏数据
+  const barList = computed<BarItem[]>(() => [
+    {
+      name: computed(() => t("notice.bar[0]")),
+      num: noticeList.value.length,
+    },
+    {
+      name: computed(() => t("notice.bar[1]")),
+      num: msgList.value.length,
+    },
+    {
+      name: computed(() => t("notice.bar[2]")),
+      num: pendingList.value.length,
+    },
+  ]);
+
+  return {
+    noticeList,
+    msgList,
+    pendingList,
+    barList,
+  };
+};
+
+// 样式管理
+const useNotificationStyles = () => {
+  const noticeStyleMap: Record<NoticeType, NoticeStyle> = {
+    email: {
+      icon: "ri:mail-line",
+      iconClass: "bg-warning/12 text-warning",
+    },
+    message: {
+      icon: "ri:volume-down-line",
+      iconClass: "bg-success/12 text-success",
+    },
+    collection: {
+      icon: "ri:heart-3-line",
+      iconClass: "bg-danger/12 text-danger",
+    },
+    user: {
+      icon: "ri:volume-down-line",
+      iconClass: "bg-info/12 text-info",
+    },
+    notice: {
+      icon: "ri:notification-3-line",
+      iconClass: "bg-theme/12 text-theme",
+    },
+  };
+
+  const getNoticeStyle = (type: NoticeType): NoticeStyle => {
+    const defaultStyle: NoticeStyle = {
+      icon: "ri:arrow-right-circle-line",
+      iconClass: "bg-theme/12 text-theme",
+    };
+
+    return noticeStyleMap[type] || defaultStyle;
+  };
+
+  return {
+    getNoticeStyle,
+  };
+};
+
+// 动画管理
+const useNotificationAnimation = () => {
+  const showNotice = (open: boolean) => {
+    if (open) {
+      visible.value = true;
+      setTimeout(() => {
+        show.value = true;
+      }, 5);
+    } else {
+      show.value = false;
+      setTimeout(() => {
+        visible.value = false;
+      }, 350);
+    }
+  };
+
+  return {
+    showNotice,
+  };
+};
+
+// 标签页管理
+const useTabManagement = (
+  noticeList: Ref<NoticeItem[]>,
+  msgList: Ref<MessageItem[]>,
+  pendingList: Ref<PendingItem[]>,
+  businessHandlers: {
+    handleNoticeAll: () => void;
+    handleMsgAll: () => void;
+    handlePendingAll: () => void;
+  }
+) => {
+  const changeBar = (index: number) => {
+    barActiveIndex.value = index;
+  };
+
+  // 检查当前标签页是否为空
+  const currentTabIsEmpty = computed(() => {
+    const tabDataMap = [noticeList.value, msgList.value, pendingList.value];
+
+    const currentData = tabDataMap[barActiveIndex.value];
+    return currentData && currentData.length === 0;
+  });
+
+  const handleViewAll = () => {
+    // 查看全部处理器映射
+    const viewAllHandlers: Record<number, () => void> = {
+      0: businessHandlers.handleNoticeAll,
+      1: businessHandlers.handleMsgAll,
+      2: businessHandlers.handlePendingAll,
+    };
+
+    const handler = viewAllHandlers[barActiveIndex.value];
+    handler?.();
+
+    // 关闭通知面板
+    emit("update:value", false);
+  };
+
+  return {
+    changeBar,
+    currentTabIsEmpty,
+    handleViewAll,
+  };
+};
+
+// 业务逻辑处理
+const useBusinessLogic = () => {
+  const handleNoticeAll = () => {
+    // 处理查看全部通知
+    console.log("查看全部通知");
+  };
+
+  const handleMsgAll = () => {
+    // 处理查看全部消息
+    console.log("查看全部消息");
+  };
+
+  const handlePendingAll = () => {
+    // 处理查看全部待办
+    console.log("查看全部待办");
+  };
+
+  return {
+    handleNoticeAll,
+    handleMsgAll,
+    handlePendingAll,
+  };
+};
+
+// 组合所有逻辑
+const { noticeList, msgList, pendingList, barList } = useNotificationData();
+const { getNoticeStyle } = useNotificationStyles();
+const { showNotice } = useNotificationAnimation();
+const { handleNoticeAll, handleMsgAll, handlePendingAll } = useBusinessLogic();
+const { changeBar, currentTabIsEmpty, handleViewAll } = useTabManagement(
+  noticeList,
+  msgList,
+  pendingList,
+  { handleNoticeAll, handleMsgAll, handlePendingAll }
+);
+
+// 监听属性变化
+watch(
+  () => props.value,
+  (newValue) => {
+    showNotice(newValue);
+  }
+);
+</script>
+
+<style scoped>
+@reference '@styles/core/tailwind.css';
+
+.art-notification-panel {
+  @apply absolute 
+    top-14.5 
+    right-5 
+    w-90 
+    h-125 
+    overflow-hidden 
+    transition-all 
+    duration-300
+    origin-top 
+    will-change-[top,left] 
+    max-[640px]:top-[65px]
+    max-[640px]:right-0
+    max-[640px]:w-full 
+    max-[640px]:h-[80vh];
+}
+
+.bar-active {
+  color: var(--theme-color) !important;
+  border-bottom: 2px solid var(--theme-color);
+}
+
+.scrollbar-thin::-webkit-scrollbar {
+  width: 5px !important;
+}
+
+.dark .scrollbar-thin::-webkit-scrollbar-track {
+  background-color: var(--default-box-color);
+}
+
+.dark .scrollbar-thin::-webkit-scrollbar-thumb {
+  background-color: #222 !important;
+}
+</style>
diff --git a/frontend/new-web/src/layouts/art-page-content/index.vue b/frontend/new-web/src/layouts/art-page-content/index.vue
new file mode 100644
index 00000000..77f8f5c5
--- /dev/null
+++ b/frontend/new-web/src/layouts/art-page-content/index.vue
@@ -0,0 +1,136 @@
+<!-- 布局内容 -->
+<template>
+  <div class="layout-content" :class="{ 'overflow-auto': isFullPage }" :style="containerStyle">
+    <div id="app-content-header">
+      <!-- 节日滚动 -->
+      <ArtFestivalTextScroll v-if="!isFullPage" />
+
+      <!-- 路由信息调试 -->
+      <div
+        v-if="isOpenRouteInfo === 'true'"
+        class="px-2 py-1.5 mb-3 text-sm text-g-500 bg-g-200 border-full-d rounded-md"
+      >
+        router meta：{{ route.meta }}
+      </div>
+    </div>
+
+    <RouterView v-if="isRefresh" v-slot="{ Component, route: router }" :style="contentStyle">
+      <!-- 缓存路由动画 -->
+      <Transition :name="showTransitionMask ? '' : actualTransition" mode="out-in" appear>
+        <KeepAlive :max="10" :exclude="keepAliveExclude">
+          <component
+            class="art-page-view"
+            :is="Component"
+            :key="router.path"
+            v-if="router.meta.keepAlive"
+          />
+        </KeepAlive>
+      </Transition>
+
+      <!-- 非缓存路由动画 -->
+      <Transition :name="showTransitionMask ? '' : actualTransition" mode="out-in" appear>
+        <component
+          class="art-page-view"
+          :is="Component"
+          :key="router.path"
+          v-if="!router.meta.keepAlive"
+        />
+      </Transition>
+    </RouterView>
+
+    <!-- 全屏页面切换过渡遮罩（用于提升页面切换视觉体验） -->
+    <Teleport to="body">
+      <div
+        v-show="showTransitionMask"
+        class="fixed top-0 left-0 z-[2000] w-screen h-screen pointer-events-none bg-box"
+      />
+    </Teleport>
+  </div>
+</template>
+<script setup lang="ts">
+import type { CSSProperties } from "vue";
+import { useRoute } from "vue-router";
+import { useAutoLayoutHeight } from "@/hooks/core/useLayoutHeight";
+import { useSettingsStore } from "@/store/modules/setting.store";
+import { useWorktabStore } from "@/store/modules/worktab.store";
+
+defineOptions({ name: "ArtPageContent" });
+
+const route = useRoute();
+const { containerMinHeight } = useAutoLayoutHeight();
+const { pageTransition, containerWidth, refresh } = storeToRefs(useSettingsStore());
+const { keepAliveExclude } = storeToRefs(useWorktabStore());
+
+const isRefresh = shallowRef(true);
+const isOpenRouteInfo = import.meta.env.VITE_OPEN_ROUTE_INFO;
+const showTransitionMask = ref(false);
+
+// 标记是否是首次加载（浏览器刷新）
+const isFirstLoad = ref(true);
+
+// 检查当前路由是否需要使用无基础布局模式
+const isFullPage = computed(() => route.matched.some((r) => r.meta?.isFullPage));
+const prevIsFullPage = ref(isFullPage.value);
+
+// 切换动画名称：首次加载、从全屏返回时不使用动画
+const actualTransition = computed(() => {
+  if (isFirstLoad.value) return "";
+  if (prevIsFullPage.value && !isFullPage.value) return "";
+  return pageTransition.value;
+});
+
+// 监听全屏状态变化，显示过渡遮罩
+watch(isFullPage, (val, oldVal) => {
+  if (val !== oldVal) {
+    showTransitionMask.value = true;
+    // 延迟隐藏遮罩，给足时间让页面完成切换
+    setTimeout(() => {
+      showTransitionMask.value = false;
+    }, 50);
+  }
+
+  nextTick(() => {
+    prevIsFullPage.value = val;
+  });
+});
+
+const containerStyle = computed(
+  (): CSSProperties =>
+    isFullPage.value
+      ? {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          width: "100%",
+          height: "100vh",
+          zIndex: 2500,
+          background: "var(--default-bg-color)",
+        }
+      : {
+          maxWidth: containerWidth.value,
+        }
+);
+
+const contentStyle = computed(
+  (): CSSProperties => ({
+    minHeight: containerMinHeight.value,
+  })
+);
+
+const reload = () => {
+  isRefresh.value = false;
+  nextTick(() => {
+    isRefresh.value = true;
+  });
+};
+
+watch(refresh, reload, { flush: "post" });
+
+// 组件挂载后标记首次加载完成
+onMounted(() => {
+  // 延迟一帧，确保首次渲染完成
+  nextTick(() => {
+    isFirstLoad.value = false;
+  });
+});
+</script>
diff --git a/frontend/new-web/src/layouts/art-screen-lock/index.vue b/frontend/new-web/src/layouts/art-screen-lock/index.vue
new file mode 100644
index 00000000..cdd2e6ef
--- /dev/null
+++ b/frontend/new-web/src/layouts/art-screen-lock/index.vue
@@ -0,0 +1,518 @@
+<!-- 锁屏 -->
+<template>
+  <div class="layout-lock-screen">
+    <!-- 开发者工具警告覆盖层 -->
+    <div
+      v-if="showDevToolsWarning"
+      class="fixed top-0 left-0 z-[999999] flex-cc w-full h-full text-white bg-gradient-to-br from-[#1e1e1e] to-black animate-fade-in"
+    >
+      <div class="p-5 text-center select-none">
+        <div class="mb-7.5 text-5xl">🔒</div>
+        <h1 class="m-0 mb-5 text-3xl font-semibold text-danger">系统已锁定</h1>
+        <p class="max-w-125 m-0 text-lg leading-relaxed text-white">
+          检测到开发者工具已打开
+          <br />
+          为了系统安全，请关闭开发者工具后继续使用
+        </p>
+        <div class="mt-7.5 text-sm text-gray-400">Security Lock Activated</div>
+      </div>
+    </div>
+
+    <!-- 锁屏弹窗 -->
+    <div v-if="!isLock">
+      <ElDialog v-model="visible" :width="370" :show-close="false" @open="handleDialogOpen">
+        <div class="flex-c flex-col">
+          <img class="w-16 h-16 rounded-full" src="@imgs/user/avatar.webp" alt="用户头像" />
+          <div class="mt-7.5 mb-3.5 text-base font-medium">{{ userInfo.username }}</div>
+          <ElForm
+            ref="formRef"
+            :model="formData"
+            :rules="rules"
+            class="w-[90%]"
+            @submit.prevent="handleLock"
+          >
+            <ElFormItem prop="password">
+              <ElInput
+                v-model="formData.password"
+                type="password"
+                :placeholder="$t('lockScreen.lock.inputPlaceholder')"
+                :show-password="true"
+                autocomplete="new-password"
+                ref="lockInputRef"
+                class="w-full mt-9"
+                @keyup.enter="handleLock"
+              >
+                <template #suffix>
+                  <ElIcon class="c-p" @click="handleLock">
+                    <Lock />
+                  </ElIcon>
+                </template>
+              </ElInput>
+            </ElFormItem>
+            <ElButton type="primary" class="w-full mt-0.5" @click="handleLock" v-ripple>
+              {{ $t("lockScreen.lock.btnText") }}
+            </ElButton>
+          </ElForm>
+        </div>
+      </ElDialog>
+    </div>
+
+    <!-- 解锁界面 -->
+    <div v-else class="unlock-content">
+      <div class="flex-c flex-col w-80">
+        <img class="w-16 h-16 mt-5 rounded-full" src="@imgs/user/avatar.webp" alt="用户头像" />
+        <div class="mt-3 mb-3.5 text-base font-medium">
+          {{ userInfo.username }}
+        </div>
+        <ElForm
+          ref="unlockFormRef"
+          :model="unlockForm"
+          :rules="rules"
+          class="w-full !px-2.5"
+          @submit.prevent="handleUnlock"
+        >
+          <ElFormItem prop="password">
+            <ElInput
+              v-model="unlockForm.password"
+              type="password"
+              :placeholder="$t('lockScreen.unlock.inputPlaceholder')"
+              :show-password="true"
+              autocomplete="new-password"
+              ref="unlockInputRef"
+              class="mt-5"
+            >
+              <template #suffix>
+                <ElIcon class="c-p" @click="handleUnlock">
+                  <Unlock />
+                </ElIcon>
+              </template>
+            </ElInput>
+          </ElFormItem>
+
+          <ElButton type="primary" class="w-full mt-2" @click="handleUnlock" v-ripple>
+            {{ $t("lockScreen.unlock.btnText") }}
+          </ElButton>
+          <div class="w-full text-center">
+            <ElButton
+              text
+              class="mt-2.5 !text-g-600 hover:!text-theme hover:!bg-transparent"
+              @click="toLogin"
+            >
+              {{ $t("lockScreen.unlock.backBtnText") }}
+            </ElButton>
+          </div>
+        </ElForm>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Lock, Unlock } from "@element-plus/icons-vue";
+import type { FormInstance, FormRules } from "element-plus";
+import { useI18n } from "vue-i18n";
+import CryptoJS from "crypto-js";
+import { useUserStore } from "@/store/modules/user.store";
+import { mittBus } from "@/utils/sys";
+
+// 国际化
+const { t } = useI18n();
+
+// 环境变量
+const ENCRYPT_KEY = import.meta.env.VITE_LOCK_ENCRYPT_KEY;
+
+// Store
+const userStore = useUserStore();
+const { info: userInfo, lockPassword, isLock } = storeToRefs(userStore);
+
+// 响应式数据
+const visible = ref<boolean>(false);
+const lockInputRef = ref<any>(null);
+const unlockInputRef = ref<any>(null);
+const showDevToolsWarning = ref<boolean>(false);
+
+// 表单相关
+const formRef = ref<FormInstance>();
+const unlockFormRef = ref<FormInstance>();
+
+const formData = reactive({
+  password: "",
+});
+
+const unlockForm = reactive({
+  password: "",
+});
+
+// 表单验证规则
+const rules = computed<FormRules>(() => ({
+  password: [
+    {
+      required: true,
+      message: t("lockScreen.lock.inputPlaceholder"),
+      trigger: "blur",
+    },
+  ],
+}));
+
+// 检测是否为移动设备
+const isMobile = () => {
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+};
+
+// 添加禁用控制台的函数
+const disableDevTools = () => {
+  // 禁用右键菜单
+  const handleContextMenu = (e: Event) => {
+    if (isLock.value) {
+      e.preventDefault();
+      e.stopPropagation();
+      return false;
+    }
+  };
+  document.addEventListener("contextmenu", handleContextMenu, true);
+
+  // 禁用开发者工具相关快捷键
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (!isLock.value) return;
+
+    // 禁用 F12
+    if (e.key === "F12") {
+      e.preventDefault();
+      e.stopPropagation();
+      return false;
+    }
+
+    // 禁用 Ctrl+Shift+I/J/C/K (开发者工具)
+    if (e.ctrlKey && e.shiftKey) {
+      const key = e.key.toLowerCase();
+      if (["i", "j", "c", "k"].includes(key)) {
+        e.preventDefault();
+        e.stopPropagation();
+        return false;
+      }
+    }
+
+    // 禁用 Ctrl+U (查看源代码)
+    if (e.ctrlKey && e.key.toLowerCase() === "u") {
+      e.preventDefault();
+      e.stopPropagation();
+      return false;
+    }
+
+    // 禁用 Ctrl+S (保存页面)
+    if (e.ctrlKey && e.key.toLowerCase() === "s") {
+      e.preventDefault();
+      e.stopPropagation();
+      return false;
+    }
+
+    // 禁用 Ctrl+A (全选)
+    if (e.ctrlKey && e.key.toLowerCase() === "a") {
+      e.preventDefault();
+      e.stopPropagation();
+      return false;
+    }
+
+    // 禁用 Ctrl+P (打印)
+    if (e.ctrlKey && e.key.toLowerCase() === "p") {
+      e.preventDefault();
+      e.stopPropagation();
+      return false;
+    }
+
+    // 禁用 Ctrl+F (查找)
+    if (e.ctrlKey && e.key.toLowerCase() === "f") {
+      e.preventDefault();
+      e.stopPropagation();
+      return false;
+    }
+
+    // 禁用 Alt+Tab (切换窗口)
+    if (e.altKey && e.key === "Tab") {
+      e.preventDefault();
+      e.stopPropagation();
+      return false;
+    }
+
+    // 禁用 Ctrl+Tab (切换标签页)
+    if (e.ctrlKey && e.key === "Tab") {
+      e.preventDefault();
+      e.stopPropagation();
+      return false;
+    }
+
+    // 禁用 Ctrl+W (关闭标签页)
+    if (e.ctrlKey && e.key.toLowerCase() === "w") {
+      e.preventDefault();
+      e.stopPropagation();
+      return false;
+    }
+
+    // 禁用 Ctrl+R 和 F5 (刷新页面)
+    if ((e.ctrlKey && e.key.toLowerCase() === "r") || e.key === "F5") {
+      e.preventDefault();
+      e.stopPropagation();
+      return false;
+    }
+
+    // 禁用 Ctrl+Shift+R (强制刷新)
+    if (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === "r") {
+      e.preventDefault();
+      e.stopPropagation();
+      return false;
+    }
+  };
+  document.addEventListener("keydown", handleKeyDown, true);
+
+  // 禁用选择文本
+  const handleSelectStart = (e: Event) => {
+    if (isLock.value) {
+      e.preventDefault();
+      return false;
+    }
+  };
+  document.addEventListener("selectstart", handleSelectStart, true);
+
+  // 禁用拖拽
+  const handleDragStart = (e: Event) => {
+    if (isLock.value) {
+      e.preventDefault();
+      return false;
+    }
+  };
+  document.addEventListener("dragstart", handleDragStart, true);
+
+  // 监听开发者工具打开状态（仅在桌面端启用）
+  const devtools = { open: false };
+  const threshold = 160;
+  let devToolsInterval: ReturnType<typeof setInterval> | null = null;
+
+  const checkDevTools = () => {
+    if (!isLock.value || isMobile()) return;
+
+    const isDevToolsOpen =
+      window.outerHeight - window.innerHeight > threshold ||
+      window.outerWidth - window.innerWidth > threshold;
+
+    if (isDevToolsOpen && !devtools.open) {
+      devtools.open = true;
+      showDevToolsWarning.value = true;
+    } else if (!isDevToolsOpen && devtools.open) {
+      devtools.open = false;
+      showDevToolsWarning.value = false;
+    }
+  };
+
+  // 仅在桌面端启用开发者工具检测
+  if (!isMobile()) {
+    devToolsInterval = setInterval(checkDevTools, 500);
+  }
+
+  // 返回清理函数
+  return () => {
+    document.removeEventListener("contextmenu", handleContextMenu, true);
+    document.removeEventListener("keydown", handleKeyDown, true);
+    document.removeEventListener("selectstart", handleSelectStart, true);
+    document.removeEventListener("dragstart", handleDragStart, true);
+    if (devToolsInterval) {
+      clearInterval(devToolsInterval);
+    }
+  };
+};
+
+// 工具函数
+const verifyPassword = (inputPassword: string, storedPassword: string): boolean => {
+  try {
+    const decryptedPassword = CryptoJS.AES.decrypt(storedPassword, ENCRYPT_KEY).toString(
+      CryptoJS.enc.Utf8
+    );
+    return inputPassword === decryptedPassword;
+  } catch (error) {
+    console.error("密码解密失败:", error);
+    return false;
+  }
+};
+
+// 事件处理函数
+const handleKeydown = (event: KeyboardEvent) => {
+  if (event.altKey && event.key.toLowerCase() === "¬") {
+    event.preventDefault();
+    visible.value = true;
+  }
+};
+
+const handleDialogOpen = () => {
+  setTimeout(() => {
+    lockInputRef.value?.input?.focus();
+  }, 100);
+};
+
+const handleLock = async () => {
+  if (!formRef.value) return;
+
+  await formRef.value.validate((valid, fields) => {
+    if (valid) {
+      const encryptedPassword = CryptoJS.AES.encrypt(formData.password, ENCRYPT_KEY).toString();
+      userStore.setLockStatus(true);
+      userStore.setLockPassword(encryptedPassword);
+      visible.value = false;
+      formData.password = "";
+    } else {
+      console.error("表单验证失败:", fields);
+    }
+  });
+};
+
+const handleUnlock = async () => {
+  if (!unlockFormRef.value) return;
+
+  await unlockFormRef.value.validate((valid, fields) => {
+    if (valid) {
+      const isValid = verifyPassword(unlockForm.password, lockPassword.value);
+
+      if (isValid) {
+        try {
+          userStore.setLockStatus(false);
+          userStore.setLockPassword("");
+          unlockForm.password = "";
+          visible.value = false;
+          showDevToolsWarning.value = false;
+        } catch (error) {
+          console.error("更新store失败:", error);
+        }
+      } else {
+        // 触发抖动动画
+        const inputElement = unlockInputRef.value?.$el;
+        if (inputElement) {
+          inputElement.classList.add("shake-animation");
+          setTimeout(() => {
+            inputElement.classList.remove("shake-animation");
+          }, 300);
+        }
+        ElMessage.error(t("lockScreen.pwdError"));
+        unlockForm.password = "";
+      }
+    } else {
+      console.error("表单验证失败:", fields);
+    }
+  });
+};
+
+const toLogin = () => {
+  userStore.logout();
+};
+
+const openLockScreen = () => {
+  visible.value = true;
+};
+
+// 监听锁屏状态变化
+watch(isLock, (newValue) => {
+  if (newValue) {
+    document.body.style.overflow = "hidden";
+    setTimeout(() => {
+      unlockInputRef.value?.input?.focus();
+    }, 100);
+  } else {
+    document.body.style.overflow = "auto";
+    showDevToolsWarning.value = false;
+  }
+});
+
+// 存储清理函数
+let cleanupDevTools: (() => void) | null = null;
+
+// 生命周期钩子
+onMounted(() => {
+  mittBus.on("openLockScreen", openLockScreen);
+  document.addEventListener("keydown", handleKeydown);
+
+  if (isLock.value) {
+    visible.value = true;
+    setTimeout(() => {
+      unlockInputRef.value?.input?.focus();
+    }, 100);
+  }
+
+  // 初始化禁用开发者工具功能
+  cleanupDevTools = disableDevTools();
+});
+
+onUnmounted(() => {
+  document.removeEventListener("keydown", handleKeydown);
+  document.body.style.overflow = "auto";
+  // 清理禁用开发者工具的事件监听器
+  if (cleanupDevTools) {
+    cleanupDevTools();
+    cleanupDevTools = null;
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.layout-lock-screen :deep(.el-dialog) {
+  border-radius: 10px;
+}
+
+.unlock-content {
+  position: fixed;
+  inset: 0;
+  z-index: 2500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background-color: #fff;
+  background-image: url("@imgs/lock/bg_light.webp");
+  background-size: cover;
+  transition: transform 0.3s ease-in-out;
+}
+
+.dark {
+  .unlock-content {
+    background-image: url("@imgs/lock/bg_dark.webp");
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.animate-fade-in {
+  animation: fade-in 0.3s ease-in-out;
+}
+
+@keyframes shake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
+    transform: translateX(-10px);
+  }
+
+  20%,
+  40%,
+  60%,
+  80% {
+    transform: translateX(10px);
+  }
+}
+
+.shake-animation {
+  animation: shake 0.5s ease-in-out;
+}
+</style>
diff --git a/frontend/new-web/src/layouts/art-settings-panel/composables/useSettingsConfig.ts b/frontend/new-web/src/layouts/art-settings-panel/composables/useSettingsConfig.ts
new file mode 100644
index 00000000..e685bf31
--- /dev/null
+++ b/frontend/new-web/src/layouts/art-settings-panel/composables/useSettingsConfig.ts
@@ -0,0 +1,248 @@
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { ContainerWidthEnum } from "@/enums/appEnum";
+import AppConfig from "@/config";
+import { headerBarConfig } from "@/config/modules/headerBar";
+
+/**
+ * 设置项配置选项管理
+ */
+export function useSettingsConfig() {
+  const { t } = useI18n();
+
+  // 标签页风格选项
+  const tabStyleOptions = computed(() => [
+    {
+      value: "tab-default",
+      label: t("setting.tabStyle.default"),
+    },
+    {
+      value: "tab-card",
+      label: t("setting.tabStyle.card"),
+    },
+    {
+      value: "tab-google",
+      label: t("setting.tabStyle.google"),
+    },
+  ]);
+
+  // 页面切换动画选项
+  const pageTransitionOptions = computed(() => [
+    {
+      value: "",
+      label: t("setting.transition.list.none"),
+    },
+    {
+      value: "fade",
+      label: t("setting.transition.list.fade"),
+    },
+    {
+      value: "slide-left",
+      label: t("setting.transition.list.slideLeft"),
+    },
+    {
+      value: "slide-bottom",
+      label: t("setting.transition.list.slideBottom"),
+    },
+    {
+      value: "slide-top",
+      label: t("setting.transition.list.slideTop"),
+    },
+  ]);
+
+  // 圆角大小选项
+  const customRadiusOptions = [
+    { value: "0", label: "0" },
+    { value: "0.25", label: "0.25" },
+    { value: "0.5", label: "0.5" },
+    { value: "0.75", label: "0.75" },
+    { value: "1", label: "1" },
+  ];
+
+  // 容器宽度选项
+  const containerWidthOptions = computed(() => [
+    {
+      value: ContainerWidthEnum.FULL,
+      label: t("setting.container.list[0]"),
+      icon: "icon-park-outline:auto-width",
+    },
+    {
+      value: ContainerWidthEnum.BOXED,
+      label: t("setting.container.list[1]"),
+      icon: "ix:width",
+    },
+  ]);
+
+  // 盒子样式选项
+  const boxStyleOptions = computed(() => [
+    {
+      value: "border-mode",
+      label: t("setting.box.list[0]"),
+      type: "border-mode" as const,
+    },
+    {
+      value: "shadow-mode",
+      label: t("setting.box.list[1]"),
+      type: "shadow-mode" as const,
+    },
+  ]);
+
+  // 从配置文件获取的选项
+  const configOptions = {
+    // 主题色彩选项
+    mainColors: AppConfig.systemMainColor,
+
+    // 主题风格选项
+    themeList: AppConfig.settingThemeList,
+
+    // 菜单布局选项
+    menuLayoutList: AppConfig.menuLayoutList,
+  };
+
+  // 基础设置项配置
+  const basicSettingsConfig = computed(() => {
+    // 定义所有基础设置项
+    const allSettings = [
+      {
+        key: "showWorkTab",
+        label: t("setting.basics.list.multiTab"),
+        type: "switch" as const,
+        handler: "workTab",
+        headerBarKey: null, // 不依赖headerBar配置
+      },
+      {
+        key: "uniqueOpened",
+        label: t("setting.basics.list.accordion"),
+        type: "switch" as const,
+        handler: "uniqueOpened",
+        headerBarKey: null, // 不依赖headerBar配置
+      },
+      {
+        key: "showMenuButton",
+        label: t("setting.basics.list.collapseSidebar"),
+        type: "switch" as const,
+        handler: "menuButton",
+        headerBarKey: "menuButton" as const,
+      },
+      {
+        key: "showFastEnter",
+        label: t("setting.basics.list.fastEnter"),
+        type: "switch" as const,
+        handler: "fastEnter",
+        headerBarKey: "fastEnter" as const,
+      },
+      {
+        key: "showRefreshButton",
+        label: t("setting.basics.list.reloadPage"),
+        type: "switch" as const,
+        handler: "refreshButton",
+        headerBarKey: "refreshButton" as const,
+      },
+      {
+        key: "showCrumbs",
+        label: t("setting.basics.list.breadcrumb"),
+        type: "switch" as const,
+        handler: "crumbs",
+        mobileHide: true,
+        headerBarKey: "breadcrumb" as const,
+      },
+      {
+        key: "showLanguage",
+        label: t("setting.basics.list.language"),
+        type: "switch" as const,
+        handler: "language",
+        headerBarKey: "language" as const,
+      },
+      {
+        key: "showNprogress",
+        label: t("setting.basics.list.progressBar"),
+        type: "switch" as const,
+        handler: "nprogress",
+        headerBarKey: null, // 不依赖headerBar配置
+      },
+      {
+        key: "colorWeak",
+        label: t("setting.basics.list.weakMode"),
+        type: "switch" as const,
+        handler: "colorWeak",
+        headerBarKey: null, // 不依赖headerBar配置
+      },
+      {
+        key: "watermarkVisible",
+        label: t("setting.basics.list.watermark"),
+        type: "switch" as const,
+        handler: "watermark",
+        headerBarKey: null, // 不依赖headerBar配置
+      },
+      {
+        key: "menuOpenWidth",
+        label: t("setting.basics.list.menuWidth"),
+        type: "input-number" as const,
+        handler: "menuOpenWidth",
+        min: 180,
+        max: 320,
+        step: 10,
+        style: { width: "120px" },
+        controlsPosition: "right" as const,
+        headerBarKey: null, // 不依赖headerBar配置
+      },
+      {
+        key: "tabStyle",
+        label: t("setting.basics.list.tabStyle"),
+        type: "select" as const,
+        handler: "tabStyle",
+        options: tabStyleOptions.value,
+        style: { width: "120px" },
+        headerBarKey: null, // 不依赖headerBar配置
+      },
+      {
+        key: "pageTransition",
+        label: t("setting.basics.list.pageTransition"),
+        type: "select" as const,
+        handler: "pageTransition",
+        options: pageTransitionOptions.value,
+        style: { width: "120px" },
+        headerBarKey: null, // 不依赖headerBar配置
+      },
+      {
+        key: "customRadius",
+        label: t("setting.basics.list.borderRadius"),
+        type: "select" as const,
+        handler: "customRadius",
+        options: customRadiusOptions,
+        style: { width: "120px" },
+        headerBarKey: null, // 不依赖headerBar配置
+      },
+    ];
+
+    // 根据 headerBarConfig 过滤设置项
+    return (
+      allSettings
+        .filter((setting) => {
+          // 如果设置项不依赖headerBar配置，则始终显示
+          if (setting.headerBarKey === null) {
+            return true;
+          }
+
+          // 如果依赖headerBar配置，检查对应的功能是否启用
+          const headerBarFeature = headerBarConfig[setting.headerBarKey];
+          return headerBarFeature?.enabled !== false;
+        })
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        .map(({ headerBarKey: _headerBarKey, ...setting }) => setting)
+    );
+  });
+
+  return {
+    // 选项配置
+    tabStyleOptions,
+    pageTransitionOptions,
+    customRadiusOptions,
+    containerWidthOptions,
+    boxStyleOptions,
+    configOptions,
+
+    // 设置项配置
+    basicSettingsConfig,
+  };
+}
diff --git a/frontend/new-web/src/layouts/art-settings-panel/composables/useSettingsHandlers.ts b/frontend/new-web/src/layouts/art-settings-panel/composables/useSettingsHandlers.ts
new file mode 100644
index 00000000..ce6ac5df
--- /dev/null
+++ b/frontend/new-web/src/layouts/art-settings-panel/composables/useSettingsHandlers.ts
@@ -0,0 +1,167 @@
+import { useSettingsStore } from "@/store/modules/setting.store";
+import { storeToRefs } from "pinia";
+import type { ContainerWidthEnum } from "@/enums/appEnum";
+
+/**
+ * 设置项通用处理逻辑
+ */
+export function useSettingsHandlers() {
+  const settingStore = useSettingsStore();
+
+  // DOM 操作相关
+  const domOperations = {
+    // 设置HTML类名
+    setHtmlClass: (className: string, add: boolean) => {
+      const el = document.getElementsByTagName("html")[0];
+      if (add) {
+        el.classList.add(className);
+      } else {
+        el.classList.remove(className);
+      }
+    },
+
+    // 设置根元素属性
+    setRootAttribute: (attribute: string, value: string) => {
+      const el = document.documentElement;
+      el.setAttribute(attribute, value);
+    },
+
+    // 设置body类名
+    setBodyClass: (className: string, add: boolean) => {
+      const el = document.getElementsByTagName("body")[0];
+      if (add) {
+        el.classList.add(className);
+      } else {
+        el.classList.remove(className);
+      }
+    },
+  };
+
+  // 通用切换处理器
+  const createToggleHandler = (storeMethod: () => void, callback?: () => void) => {
+    return () => {
+      storeMethod();
+      callback?.();
+    };
+  };
+
+  // 通用值变更处理器
+  const createValueHandler = <T>(
+    storeMethod: (value: T) => void,
+    callback?: (value: T) => void
+  ) => {
+    return (value: T) => {
+      if (value !== undefined && value !== null) {
+        storeMethod(value);
+        callback?.(value);
+      }
+    };
+  };
+
+  // 基础设置处理器
+  const basicHandlers = {
+    // 工作台标签页
+    workTab: createToggleHandler(() => settingStore.setWorkTab(!settingStore.showWorkTab)),
+
+    // 菜单手风琴
+    uniqueOpened: createToggleHandler(() => settingStore.setUniqueOpened()),
+
+    // 显示菜单按钮
+    menuButton: createToggleHandler(() => settingStore.setButton()),
+
+    // 显示快速入口
+    fastEnter: createToggleHandler(() => settingStore.setFastEnter()),
+
+    // 显示刷新按钮
+    refreshButton: createToggleHandler(() => settingStore.setShowRefreshButton()),
+
+    // 显示面包屑
+    crumbs: createToggleHandler(() => settingStore.setCrumbs()),
+
+    // 显示语言切换
+    language: createToggleHandler(() => settingStore.setLanguage()),
+
+    // 显示进度条
+    nprogress: createToggleHandler(() => settingStore.setNprogress()),
+
+    // 色弱模式
+    colorWeak: createToggleHandler(
+      () => settingStore.setColorWeak(),
+      () => {
+        domOperations.setHtmlClass("color-weak", settingStore.colorWeak);
+      }
+    ),
+
+    // 水印显示
+    watermark: createToggleHandler(() =>
+      settingStore.setWatermarkVisible(!settingStore.watermarkVisible)
+    ),
+
+    // 菜单展开宽度
+    menuOpenWidth: createValueHandler<number>((width: number) =>
+      settingStore.setMenuOpenWidth(width)
+    ),
+
+    // 标签页风格
+    tabStyle: createValueHandler<string>((style: string) => settingStore.setTabStyle(style)),
+
+    // 页面切换动画
+    pageTransition: createValueHandler<string>((transition: string) =>
+      settingStore.setPageTransition(transition)
+    ),
+
+    // 圆角大小
+    customRadius: createValueHandler<string>((radius: string) =>
+      settingStore.setCustomRadius(radius)
+    ),
+  };
+
+  // 盒子样式处理器
+  const boxStyleHandlers = {
+    // 设置盒子模式
+    setBoxMode: (type: "border-mode" | "shadow-mode") => {
+      const { boxBorderMode } = storeToRefs(settingStore);
+
+      // 防止重复设置
+      if (
+        (type === "shadow-mode" && boxBorderMode.value === false) ||
+        (type === "border-mode" && boxBorderMode.value === true)
+      ) {
+        return;
+      }
+
+      setTimeout(() => {
+        domOperations.setRootAttribute("data-box-mode", type);
+        settingStore.setBorderMode();
+      }, 50);
+    },
+  };
+
+  // 颜色设置处理器
+  const colorHandlers = {
+    // 选择主题色
+    selectColor: (theme: string) => {
+      settingStore.setElementTheme(theme);
+      settingStore.reload();
+    },
+  };
+
+  // 容器设置处理器
+  const containerHandlers = {
+    // 设置容器宽度
+    setWidth: (type: ContainerWidthEnum) => {
+      settingStore.setContainerWidth(type);
+      settingStore.reload();
+    },
+  };
+
+  return {
+    domOperations,
+    basicHandlers,
+    boxStyleHandlers,
+    colorHandlers,
+    containerHandlers,
+    createToggleHandler,
+    createValueHandler,
+  };
+}
diff --git a/frontend/new-web/src/layouts/art-settings-panel/composables/useSettingsPanel.ts b/frontend/new-web/src/layouts/art-settings-panel/composables/useSettingsPanel.ts
new file mode 100644
index 00000000..df06dedf
--- /dev/null
+++ b/frontend/new-web/src/layouts/art-settings-panel/composables/useSettingsPanel.ts
@@ -0,0 +1,233 @@
+import { ref, computed, watch } from "vue";
+import { useSettingsStore } from "@/store/modules/setting.store";
+import { storeToRefs } from "pinia";
+import { useBreakpoints } from "@vueuse/core";
+import AppConfig from "@/config";
+import { SystemThemeEnum, MenuTypeEnum } from "@/enums/appEnum";
+import { mittBus } from "@/utils/sys";
+import { StorageConfig } from "@/utils";
+import { useTheme } from "@/hooks/core/useTheme";
+import { useCeremony } from "@/hooks/core/useCeremony";
+import { useSettingsState } from "./useSettingsState";
+import { useSettingsHandlers } from "./useSettingsHandlers";
+
+/**
+ * 设置面板核心逻辑管理
+ */
+export function useSettingsPanel() {
+  const settingStore = useSettingsStore();
+  const { systemThemeType, systemThemeMode, menuType } = storeToRefs(settingStore);
+
+  // Composables
+  const { openFestival, cleanup } = useCeremony();
+  const { setSystemTheme, setSystemAutoTheme } = useTheme();
+  const { initColorWeak } = useSettingsState();
+  const { domOperations } = useSettingsHandlers();
+
+  // 响应式状态
+  const showDrawer = ref(false);
+
+  // 使用 VueUse breakpoints 优化性能
+  const breakpoints = useBreakpoints({ tablet: 1000 });
+  const isMobile = breakpoints.smaller("tablet");
+
+  // 记录窗口宽度变化前的菜单类型
+  const getStoredDesktopMenuType = (): MenuTypeEnum | undefined => {
+    const storedMenuType = localStorage.getItem(StorageConfig.RESPONSIVE_MENU_TYPE_KEY);
+    return Object.values(MenuTypeEnum).includes(storedMenuType as MenuTypeEnum)
+      ? (storedMenuType as MenuTypeEnum)
+      : undefined;
+  };
+
+  const setStoredDesktopMenuType = (type: MenuTypeEnum) => {
+    localStorage.setItem(StorageConfig.RESPONSIVE_MENU_TYPE_KEY, type);
+  };
+
+  const clearStoredDesktopMenuType = () => {
+    localStorage.removeItem(StorageConfig.RESPONSIVE_MENU_TYPE_KEY);
+  };
+
+  const storedDesktopMenuType = getStoredDesktopMenuType();
+  const beforeMenuType = ref<MenuTypeEnum | undefined>(storedDesktopMenuType);
+  const hasChangedMenu = ref(Boolean(storedDesktopMenuType));
+
+  // 计算属性
+  const systemThemeColor = computed(() => settingStore.systemThemeColor as string);
+
+  // 主题相关处理
+  const useThemeHandlers = () => {
+    // 初始化系统颜色
+    const initSystemColor = () => {
+      if (!AppConfig.systemMainColor.includes(systemThemeColor.value)) {
+        settingStore.setElementTheme(AppConfig.systemMainColor[0]);
+        settingStore.reload();
+      }
+    };
+
+    // 初始化系统主题
+    const initSystemTheme = () => {
+      if (systemThemeMode.value === SystemThemeEnum.AUTO) {
+        setSystemAutoTheme();
+      } else {
+        setSystemTheme(systemThemeType.value);
+      }
+    };
+
+    // 监听系统主题变化
+    const listenerSystemTheme = () => {
+      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+      mediaQuery.addEventListener("change", initSystemTheme);
+      return () => {
+        mediaQuery.removeEventListener("change", initSystemTheme);
+      };
+    };
+
+    return {
+      initSystemColor,
+      initSystemTheme,
+      listenerSystemTheme,
+    };
+  };
+
+  // 响应式布局处理
+  const useResponsiveLayout = () => {
+    // 使用 watch 监听断点变化，性能更优
+    const stopWatch = watch(
+      isMobile,
+      (mobile: boolean) => {
+        if (mobile) {
+          // 切换到移动端布局
+          if (!hasChangedMenu.value) {
+            beforeMenuType.value = menuType.value;
+            if (menuType.value !== MenuTypeEnum.LEFT) {
+              setStoredDesktopMenuType(menuType.value);
+              useSettingsState().switchMenuLayouts(MenuTypeEnum.LEFT);
+              hasChangedMenu.value = true;
+            }
+          }
+
+          settingStore.setMenuOpen(false);
+        } else {
+          // 恢复桌面端布局
+          if (hasChangedMenu.value && beforeMenuType.value) {
+            if (menuType.value === MenuTypeEnum.LEFT) {
+              useSettingsState().switchMenuLayouts(beforeMenuType.value);
+            }
+
+            clearStoredDesktopMenuType();
+            hasChangedMenu.value = false;
+          }
+
+          settingStore.setMenuOpen(true);
+        }
+      },
+      { immediate: true }
+    );
+
+    return { stopWatch };
+  };
+
+  // 抽屉控制
+  const useDrawerControl = () => {
+    // 用于存储 setTimeout 的 ID，以便在需要时清除
+    let themeChangeTimer: ReturnType<typeof setTimeout> | null = null;
+
+    // 打开抽屉
+    const handleOpen = () => {
+      // 清除可能存在的旧定时器
+      if (themeChangeTimer) {
+        clearTimeout(themeChangeTimer);
+      }
+      // 延迟添加 theme-change class，避免抽屉打开动画受影响
+      themeChangeTimer = setTimeout(() => {
+        domOperations.setBodyClass("theme-change", true);
+        themeChangeTimer = null;
+      }, 500);
+    };
+
+    // 关闭抽屉
+    const handleClose = () => {
+      // 清除未执行的定时器，防止关闭后才添加 class
+      if (themeChangeTimer) {
+        clearTimeout(themeChangeTimer);
+        themeChangeTimer = null;
+      }
+      // 立即移除 theme-change class
+      domOperations.setBodyClass("theme-change", false);
+    };
+
+    // 打开设置
+    const openSetting = () => {
+      showDrawer.value = true;
+    };
+
+    // 关闭设置
+    const closeDrawer = () => {
+      showDrawer.value = false;
+    };
+
+    return {
+      handleOpen,
+      handleClose,
+      openSetting,
+      closeDrawer,
+    };
+  };
+
+  // Props 变化监听
+  const usePropsWatcher = (props: { open?: boolean }) => {
+    watch(
+      () => props.open,
+      (val: boolean | undefined) => {
+        if (val !== undefined) {
+          showDrawer.value = val;
+        }
+      }
+    );
+  };
+
+  // 初始化设置
+  const useSettingsInitializer = () => {
+    const themeHandlers = useThemeHandlers();
+    const { openSetting } = useDrawerControl();
+    const { stopWatch } = useResponsiveLayout();
+    let themeCleanup: (() => void) | null = null;
+
+    const initializeSettings = () => {
+      mittBus.on("openSetting", openSetting);
+      themeHandlers.initSystemColor();
+      themeCleanup = themeHandlers.listenerSystemTheme();
+      initColorWeak();
+
+      // 设置盒子模式
+      const boxMode = settingStore.boxBorderMode ? "border-mode" : "shadow-mode";
+      domOperations.setRootAttribute("data-box-mode", boxMode);
+
+      themeHandlers.initSystemTheme();
+      openFestival();
+    };
+
+    const cleanupSettings = () => {
+      stopWatch();
+      themeCleanup?.();
+      cleanup();
+    };
+
+    return {
+      initializeSettings,
+      cleanupSettings,
+    };
+  };
+
+  return {
+    // 状态
+    showDrawer,
+
+    // 方法组合
+    useThemeHandlers,
+    useResponsiveLayout,
+    useDrawerControl,
+    usePropsWatcher,
+    useSettingsInitializer,
+  };
+}
diff --git a/frontend/new-web/src/layouts/art-settings-panel/composables/useSettingsState.ts b/frontend/new-web/src/layouts/art-settings-panel/composables/useSettingsState.ts
new file mode 100644
index 00000000..82aba066
--- /dev/null
+++ b/frontend/new-web/src/layouts/art-settings-panel/composables/useSettingsState.ts
@@ -0,0 +1,37 @@
+import { useSettingsStore } from "@/store/modules/setting.store";
+import { MenuThemeEnum, MenuTypeEnum } from "@/enums/appEnum";
+
+/**
+ * 设置状态管理
+ */
+export function useSettingsState() {
+  const settingStore = useSettingsStore();
+
+  // 色弱模式初始化
+  const initColorWeak = () => {
+    if (settingStore.colorWeak) {
+      const el = document.getElementsByTagName("html")[0];
+      setTimeout(() => {
+        el.classList.add("color-weak");
+      }, 100);
+    }
+  };
+
+  // 菜单布局切换
+  const switchMenuLayouts = (type: MenuTypeEnum) => {
+    if (type === MenuTypeEnum.LEFT || type === MenuTypeEnum.TOP_LEFT) {
+      settingStore.setMenuOpen(true);
+    }
+    settingStore.switchMenuLayouts(type);
+    if (type === MenuTypeEnum.DUAL_MENU) {
+      settingStore.switchMenuStyles(MenuThemeEnum.DESIGN);
+      settingStore.setMenuOpen(true);
+    }
+  };
+
+  return {
+    // 方法
+    initColorWeak,
+    switchMenuLayouts,
+  };
+}
diff --git a/frontend/new-web/src/layouts/art-settings-panel/index.vue b/frontend/new-web/src/layouts/art-settings-panel/index.vue
new file mode 100755
index 00000000..fd7d98bb
--- /dev/null
+++ b/frontend/new-web/src/layouts/art-settings-panel/index.vue
@@ -0,0 +1,72 @@
+<!-- 设置面板 -->
+<template>
+  <div class="layout-settings">
+    <SettingDrawer v-model="showDrawer" @open="handleOpen" @close="handleClose">
+      <!-- 头部关闭按钮 -->
+      <SettingHeader @close="closeDrawer" />
+      <!-- 主题风格 -->
+      <ThemeSettings />
+      <!-- 菜单布局 -->
+      <MenuLayoutSettings />
+      <!-- 菜单风格 -->
+      <MenuStyleSettings />
+      <!-- 系统主题色 -->
+      <ColorSettings />
+      <!-- 盒子样式 -->
+      <BoxStyleSettings />
+      <!-- 容器宽度 -->
+      <ContainerSettings />
+      <!-- 基础配置 -->
+      <BasicSettings />
+      <!-- 操作按钮 -->
+      <SettingActions />
+    </SettingDrawer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useSettingsPanel } from "./composables/useSettingsPanel";
+
+import SettingDrawer from "./widget/SettingDrawer.vue";
+import SettingHeader from "./widget/SettingHeader.vue";
+import ThemeSettings from "./widget/ThemeSettings.vue";
+import MenuLayoutSettings from "./widget/MenuLayoutSettings.vue";
+import MenuStyleSettings from "./widget/MenuStyleSettings.vue";
+import ColorSettings from "./widget/ColorSettings.vue";
+import BoxStyleSettings from "./widget/BoxStyleSettings.vue";
+import ContainerSettings from "./widget/ContainerSettings.vue";
+import BasicSettings from "./widget/BasicSettings.vue";
+import SettingActions from "./widget/SettingActions.vue";
+
+defineOptions({ name: "ArtSettingsPanel" });
+
+interface Props {
+  /** 是否打开 */
+  open?: boolean;
+}
+
+const props = defineProps<Props>();
+
+// 使用设置面板逻辑
+const settingsPanel = useSettingsPanel();
+const { showDrawer } = settingsPanel;
+
+// 获取各种处理器
+const { handleOpen, handleClose, closeDrawer } = settingsPanel.useDrawerControl();
+const { initializeSettings, cleanupSettings } = settingsPanel.useSettingsInitializer();
+
+// 监听 props 变化
+settingsPanel.usePropsWatcher(props);
+
+onMounted(() => {
+  initializeSettings();
+});
+
+onUnmounted(() => {
+  cleanupSettings();
+});
+</script>
+
+<style lang="scss">
+@use "./style";
+</style>
diff --git a/frontend/new-web/src/layouts/art-settings-panel/style.scss b/frontend/new-web/src/layouts/art-settings-panel/style.scss
new file mode 100755
index 00000000..0e01a3fe
--- /dev/null
+++ b/frontend/new-web/src/layouts/art-settings-panel/style.scss
@@ -0,0 +1,92 @@
+@use "@styles/core/mixin.scss" as *;
+
+// 设置抽屉模态框样式
+.setting-modal {
+  background: transparent !important;
+
+  .el-drawer {
+    // 背景滤镜效果
+    background: rgba($color: #fff, $alpha: 50%) !important;
+    box-shadow: 0 0 30px rgb(0 0 0 / 10%) !important;
+
+    @include backdropBlur();
+
+    .setting-box-wrap {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      width: calc(100% + 15px);
+      margin-bottom: 10px;
+
+      .setting-item {
+        box-sizing: border-box;
+        width: calc(33.333% - 15px);
+        margin-right: 15px;
+        text-align: center;
+
+        .box {
+          position: relative;
+          box-sizing: border-box;
+          display: flex;
+          height: 52px;
+          overflow: hidden;
+          cursor: pointer;
+          border: 2px solid var(--default-border);
+          border-radius: 8px;
+          box-shadow: 0 0 8px 0 rgb(0 0 0 / 10%);
+          transition: box-shadow 0.1s;
+
+          &.mt-16 {
+            margin-top: 16px;
+          }
+
+          &.is-active {
+            border: 2px solid var(--theme-color);
+          }
+
+          img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+
+        .name {
+          margin-top: 6px;
+          font-size: 14px;
+          text-align: center;
+        }
+      }
+    }
+  }
+
+  // 去除滚动条
+  .el-drawer__body::-webkit-scrollbar {
+    width: 0 !important;
+  }
+}
+
+.dark {
+  .setting-modal {
+    .el-drawer {
+      background: rgba($color: #000, $alpha: 50%) !important;
+
+      .setting-item {
+        .box {
+          border: 2px solid transparent;
+        }
+      }
+    }
+  }
+}
+
+// 去除火狐浏览器滚动条
+:deep(.el-drawer__body) {
+  scrollbar-width: none;
+}
+
+// 移动端隐藏
+@media screen and (width <= 800px) {
+  .mobile-hide {
+    display: none !important;
+  }
+}
diff --git a/frontend/new-web/src/layouts/art-settings-panel/widget/BasicSettings.vue b/frontend/new-web/src/layouts/art-settings-panel/widget/BasicSettings.vue
new file mode 100644
index 00000000..5e0c149e
--- /dev/null
+++ b/frontend/new-web/src/layouts/art-settings-panel/widget/BasicSettings.vue
@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <SectionTitle :title="$t('setting.basics.title')" class="mt-10" />
+    <SettingItem
+      v-for="config in basicSettingsConfig"
+      :key="config.key"
+      :config="config"
+      :model-value="getSettingValue(config.key)"
+      @change="handleSettingChange(config.handler, $event)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import SectionTitle from "./SectionTitle.vue";
+import SettingItem from "./SettingItem.vue";
+import { useSettingsStore } from "@/store/modules/setting.store";
+import { useSettingsConfig } from "../composables/useSettingsConfig";
+import { useSettingsHandlers } from "../composables/useSettingsHandlers";
+import { storeToRefs } from "pinia";
+
+const settingStore = useSettingsStore();
+const { basicSettingsConfig } = useSettingsConfig();
+const { basicHandlers } = useSettingsHandlers();
+
+// 获取store的响应式状态
+const {
+  uniqueOpened,
+  showMenuButton,
+  showFastEnter,
+  showRefreshButton,
+  showCrumbs,
+  showWorkTab,
+  showLanguage,
+  showNprogress,
+  colorWeak,
+  watermarkVisible,
+  menuOpenWidth,
+  tabStyle,
+  pageTransition,
+  customRadius,
+} = storeToRefs(settingStore);
+
+// 创建设置值映射
+const settingValueMap = {
+  uniqueOpened,
+  showMenuButton,
+  showFastEnter,
+  showRefreshButton,
+  showCrumbs,
+  showWorkTab,
+  showLanguage,
+  showNprogress,
+  colorWeak,
+  watermarkVisible,
+  menuOpenWidth,
+  tabStyle,
+  pageTransition,
+  customRadius,
+};
+
+// 获取设置值的方法
+const getSettingValue = (key: string) => {
+  const settingRef = settingValueMap[key as keyof typeof settingValueMap];
+  return settingRef?.value ?? null;
+};
+
+// 统一的设置变更处理
+const handleSettingChange = (handlerName: string, value: any) => {
+  const handler = (basicHandlers as any)[handlerName];
+  if (typeof handler === "function") {
+    handler(value);
+  } else {
+    console.warn(`Handler "${handlerName}" not found in basicHandlers`);
+  }
+};
+</script>
diff --git a/frontend/new-web/src/layouts/art-settings-panel/widget/BoxStyleSettings.vue b/frontend/new-web/src/layouts/art-settings-panel/widget/BoxStyleSettings.vue
new file mode 100644
index 00000000..a9d7a03d
--- /dev/null
+++ b/frontend/new-web/src/layouts/art-settings-panel/widget/BoxStyleSettings.vue
@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <SectionTitle :title="$t('setting.box.title')" class="mt-10" />
+    <div class="box-border flex-cb p-1 mt-5 rounded-lg bg-g-200">
+      <div
+        v-for="option in boxStyleOptions"
+        :key="option.value"
+        class="w-[calc(50%-3px)] h-8.5 leading-8.5 text-sm text-center c-p select-none rounded-md transition-all duration-200"
+        :class="
+          isActive(option.type)
+            ? 'text-g-800 bg-[var(--default-box-color)] dark:!text-white dark:bg-g-300'
+            : 'hover:text-g-800 hover:bg-black/[0.04] dark:hover:bg-black/20'
+        "
+        @click="boxStyleHandlers.setBoxMode(option.type)"
+      >
+        {{ option.label }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import SectionTitle from "./SectionTitle.vue";
+import { useSettingsStore } from "@/store/modules/setting.store";
+import { useSettingsConfig } from "../composables/useSettingsConfig";
+import { useSettingsHandlers } from "../composables/useSettingsHandlers";
+import { storeToRefs } from "pinia";
+
+const settingStore = useSettingsStore();
+const { boxBorderMode } = storeToRefs(settingStore);
+const { boxStyleOptions } = useSettingsConfig();
+const { boxStyleHandlers } = useSettingsHandlers();
+
+// 判断当前选项是否激活
+const isActive = (type: "border-mode" | "shadow-mode") => {
+  return type === "border-mode" ? boxBorderMode.value : !boxBorderMode.value;
+};
+</script>
diff --git a/frontend/new-web/src/layouts/art-settings-panel/widget/ColorSettings.vue b/frontend/new-web/src/layouts/art-settings-panel/widget/ColorSettings.vue
new file mode 100644
index 00000000..2fe49b91
--- /dev/null
+++ b/frontend/new-web/src/layouts/art-settings-panel/widget/ColorSettings.vue
@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <SectionTitle :title="$t('setting.color.title')" class="mt-10" />
+    <div class="-mr-4">
+      <div class="flex flex-wrap">
+        <div
+          v-for="color in configOptions.mainColors"
+          :key="color"
+          class="flex items-center justify-center size-[23px] mr-4 mb-2.5 cursor-pointer rounded-full transition-all duration-200 hover:opacity-85"
+          :style="{ background: `${color} !important` }"
+          @click="colorHandlers.selectColor(color)"
+        >
+          <ArtSvgIcon
+            icon="ri:check-fill"
+            class="text-base !text-white"
+            v-show="color === systemThemeColor"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import SectionTitle from "./SectionTitle.vue";
+import { useSettingsStore } from "@/store/modules/setting.store";
+import { useSettingsConfig } from "../composables/useSettingsConfig";
+import { useSettingsHandlers } from "../composables/useSettingsHandlers";
+import { storeToRefs } from "pinia";
+
+const settingStore = useSettingsStore();
+const { systemThemeColor } = storeToRefs(settingStore);
+const { configOptions } = useSettingsConfig();
+const { colorHandlers } = useSettingsHandlers();
+</script>
diff --git a/frontend/new-web/src/layouts/art-settings-panel/widget/ContainerSettings.vue b/frontend/new-web/src/layouts/art-settings-panel/widget/ContainerSettings.vue
new file mode 100644
index 00000000..57f8fc6d
--- /dev/null
+++ b/frontend/new-web/src/layouts/art-settings-panel/widget/ContainerSettings.vue
@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <SectionTitle :title="$t('setting.container.title')" class="mt-12.5" />
+    <div class="flex">
+      <div
+        v-for="option in containerWidthOptions"
+        :key="option.value"
+        class="flex-cc flex-1 h-16 mt-5 mr-3.5 mb-3.5 cursor-pointer !border-2 rounded-lg !text-g-800 last:mr-0"
+        :class="{
+          'border-theme [&_i]:!text-theme': containerWidth === option.value,
+          'border-full-d': containerWidth !== option.value,
+        }"
+        @click="containerHandlers.setWidth(option.value)"
+      >
+        <ArtSvgIcon :icon="option.icon" class="mr-2 text-lg" />
+        <span class="text-sm">{{ option.label }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import SectionTitle from "./SectionTitle.vue";
+import { useSettingsStore } from "@/store/modules/setting.store";
+import { useSettingsConfig } from "../composables/useSettingsConfig";
+import { useSettingsHandlers } from "../composables/useSettingsHandlers";
+import { storeToRefs } from "pinia";
+
+const settingStore = useSettingsStore();
+const { containerWidth } = storeToRefs(settingStore);
+const { containerWidthOptions } = useSettingsConfig();
+const { containerHandlers } = useSettingsHandlers();
+</script>
diff --git a/frontend/new-web/src/layouts/art-settings-panel/widget/MenuLayoutSettings.vue b/frontend/new-web/src/layouts/art-settings-panel/widget/MenuLayoutSettings.vue
new file mode 100644
index 00000000..2b2b7683
--- /dev/null
+++ b/frontend/new-web/src/layouts/art-settings-panel/widget/MenuLayoutSettings.vue
@@ -0,0 +1,31 @@
+<template>
+  <div v-if="width > 1000">
+    <SectionTitle :title="$t('setting.menuType.title')" />
+    <div class="setting-box-wrap">
+      <div
+        class="setting-item"
+        v-for="(item, index) in configOptions.menuLayoutList"
+        :key="item.value"
+        @click="switchMenuLayouts(item.value)"
+      >
+        <div class="box" :class="{ 'is-active': item.value === menuType, 'mt-16': index > 2 }">
+          <img :src="item.img" />
+        </div>
+        <p class="name">{{ $t(`setting.menuType.list[${index}]`) }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import SectionTitle from "./SectionTitle.vue";
+import { useSettingsStore } from "@/store/modules/setting.store";
+import { useSettingsConfig } from "../composables/useSettingsConfig";
+import { useSettingsState } from "../composables/useSettingsState";
+
+const { width } = useWindowSize();
+const settingStore = useSettingsStore();
+const { menuType } = storeToRefs(settingStore);
+const { configOptions } = useSettingsConfig();
+const { switchMenuLayouts } = useSettingsState();
+</script>
diff --git a/frontend/new-web/src/layouts/art-settings-panel/widget/MenuStyleSettings.vue b/frontend/new-web/src/layouts/art-settings-panel/widget/MenuStyleSettings.vue
new file mode 100644
index 00000000..6c3ade73
--- /dev/null
+++ b/frontend/new-web/src/layouts/art-settings-panel/widget/MenuStyleSettings.vue
@@ -0,0 +1,44 @@
+<template>
+  <SectionTitle :title="$t('setting.menu.title')" />
+  <div class="setting-box-wrap">
+    <div
+      class="setting-item"
+      v-for="item in menuThemeList"
+      :key="item.theme"
+      @click="switchMenuStyles(item.theme)"
+    >
+      <div
+        class="box"
+        :class="{ 'is-active': item.theme === menuThemeType }"
+        :style="{
+          cursor: disabled ? 'no-drop' : 'pointer',
+        }"
+      >
+        <img :src="item.img" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import AppConfig from "@/config";
+import SectionTitle from "./SectionTitle.vue";
+import { MenuTypeEnum, type MenuThemeEnum } from "@/enums/appEnum";
+import { useSettingsStore } from "@/store/modules/setting.store";
+
+const menuThemeList = AppConfig.themeList;
+const settingStore = useSettingsStore();
+const { menuThemeType, menuType, isDark } = storeToRefs(settingStore);
+const isTopMenu = computed(() => menuType.value === MenuTypeEnum.TOP);
+const isDualMenu = computed(() => menuType.value === MenuTypeEnum.DUAL_MENU);
+
+const disabled = computed(() => isTopMenu.value || isDualMenu.value || isDark.value);
+
+// 菜单样式切换
+const switchMenuStyles = (theme: MenuThemeEnum) => {
+  if (isDualMenu.value || isTopMenu.value || isDark.value) {
+    return;
+  }
+  settingStore.switchMenuStyles(theme);
+};
+</script>
diff --git a/frontend/new-web/src/layouts/art-settings-panel/widget/SectionTitle.vue b/frontend/new-web/src/layouts/art-settings-panel/widget/SectionTitle.vue
new file mode 100644
index 00000000..6b3d5861
--- /dev/null
+++ b/frontend/new-web/src/layouts/art-settings-panel/widget/SectionTitle.vue
@@ -0,0 +1,17 @@
+<template>
+  <p
+    class="relative mt-7.5 mb-5.5 text-sm text-center text-g-800 before:absolute before:top-[10px] before:left-0 before:w-[50px] before:m-auto before:content-[''] before:border-b before:border-[var(--art-gray-300)] after:absolute after:top-[10px] after:right-0 after:w-[50px] after:m-auto after:content-[''] after:border-b after:border-g-300"
+    :style="style"
+  >
+    {{ title }}
+  </p>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  title: string;
+  style?: Record<string, any>;
+}
+
+defineProps<Props>();
+</script>
diff --git a/frontend/new-web/src/layouts/art-settings-panel/widget/SettingActions.vue b/frontend/new-web/src/layouts/art-settings-panel/widget/SettingActions.vue
new file mode 100644
index 00000000..0f6bd7d6
--- /dev/null
+++ b/frontend/new-web/src/layouts/art-settings-panel/widget/SettingActions.vue
@@ -0,0 +1,231 @@
+<!-- 设置操作按钮 -->
+<template>
+  <div
+    class="mt-10 flex gap-8 border-t border-[var(--default-border)] bg-[var(--art-bg-color)] pt-5"
+  >
+    <ElButton type="primary" class="flex-1 !h-8" @click="handleCopyConfig">
+      {{ $t("setting.actions.copyConfig") }}
+    </ElButton>
+    <ElButton type="danger" plain class="flex-1 !h-8" @click="handleResetConfig">
+      {{ $t("setting.actions.resetConfig") }}
+    </ElButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { nextTick } from "vue";
+import { useSettingsStore } from "@/store/modules/setting.store";
+import { SETTING_DEFAULT_CONFIG } from "@/config/setting";
+import { useClipboard } from "@vueuse/core";
+import { useI18n } from "vue-i18n";
+import { MenuThemeEnum } from "@/enums/appEnum";
+import { useTheme } from "@/hooks/core/useTheme";
+
+defineOptions({ name: "SettingActions" });
+
+const { t } = useI18n();
+const settingStore = useSettingsStore();
+const { copy, copied } = useClipboard();
+const { switchThemeStyles } = useTheme();
+
+/** 枚举映射表 */
+const ENUM_MAPS = {
+  menuType: {
+    left: "MenuTypeEnum.LEFT",
+    top: "MenuTypeEnum.TOP",
+    "top-left": "MenuTypeEnum.TOP_LEFT",
+    "dual-menu": "MenuTypeEnum.DUAL_MENU",
+  },
+  systemTheme: {
+    auto: "SystemThemeEnum.AUTO",
+    light: "SystemThemeEnum.LIGHT",
+    dark: "SystemThemeEnum.DARK",
+  },
+  menuTheme: {
+    design: "MenuThemeEnum.DESIGN",
+    light: "MenuThemeEnum.LIGHT",
+    dark: "MenuThemeEnum.DARK",
+  },
+  containerWidth: {
+    "100%": "ContainerWidthEnum.FULL",
+    "1200px": "ContainerWidthEnum.BOXED",
+  },
+} as const;
+
+/** 配置项定义 */
+interface ConfigItem {
+  comment: string;
+  key: keyof typeof settingStore;
+  enumMap?: Record<string, string>;
+  forceValue?: any;
+}
+
+const CONFIG_ITEMS: ConfigItem[] = [
+  { comment: "菜单类型", key: "menuType", enumMap: ENUM_MAPS.menuType },
+  { comment: "菜单展开宽度", key: "menuOpenWidth" },
+  { comment: "菜单是否展开", key: "menuOpen" },
+  { comment: "双菜单是否显示文本", key: "dualMenuShowText" },
+  { comment: "系统主题类型", key: "systemThemeType", enumMap: ENUM_MAPS.systemTheme },
+  { comment: "系统主题模式", key: "systemThemeMode", enumMap: ENUM_MAPS.systemTheme },
+  { comment: "菜单风格", key: "menuThemeType", enumMap: ENUM_MAPS.menuTheme },
+  { comment: "系统主题颜色", key: "systemThemeColor" },
+  { comment: "是否显示菜单按钮", key: "showMenuButton" },
+  { comment: "是否显示快速入口", key: "showFastEnter" },
+  { comment: "是否显示刷新按钮", key: "showRefreshButton" },
+  { comment: "是否显示面包屑", key: "showCrumbs" },
+  { comment: "是否显示工作台标签", key: "showWorkTab" },
+  { comment: "是否显示语言切换", key: "showLanguage" },
+  { comment: "是否显示进度条", key: "showNprogress" },
+  { comment: "是否显示设置引导", key: "showSettingGuide" },
+  { comment: "是否显示节日文本", key: "showFestivalText" },
+  { comment: "是否显示水印", key: "watermarkVisible" },
+  { comment: "是否自动关闭", key: "autoClose" },
+  { comment: "是否唯一展开", key: "uniqueOpened" },
+  { comment: "是否色弱模式", key: "colorWeak" },
+  { comment: "是否刷新", key: "refresh" },
+  { comment: "是否加载节日烟花", key: "holidayFireworksLoaded" },
+  { comment: "边框模式", key: "boxBorderMode" },
+  { comment: "页面过渡效果", key: "pageTransition" },
+  { comment: "标签页样式", key: "tabStyle" },
+  { comment: "自定义圆角", key: "customRadius" },
+  { comment: "容器宽度", key: "containerWidth", enumMap: ENUM_MAPS.containerWidth },
+  { comment: "节日日期", key: "festivalDate", forceValue: "" },
+];
+
+/**
+ * 将值转换为代码字符串
+ */
+const valueToCode = (value: any, enumMap?: Record<string, string>): string => {
+  if (value === null) return "null";
+  if (value === undefined) return "undefined";
+
+  // 优先查找枚举映射
+  if (enumMap && typeof value === "string" && enumMap[value]) {
+    return enumMap[value];
+  }
+
+  // 其他类型处理
+  if (typeof value === "string") return `'${value}'`;
+  if (typeof value === "boolean" || typeof value === "number") return String(value);
+
+  return JSON.stringify(value);
+};
+
+/**
+ * 生成配置代码
+ */
+const generateConfigCode = (): string => {
+  const lines = ["export const SETTING_DEFAULT_CONFIG = {"];
+
+  CONFIG_ITEMS.forEach((item) => {
+    lines.push(`  /** ${item.comment} */`);
+    const value = item.forceValue !== undefined ? item.forceValue : settingStore[item.key];
+    lines.push(`  ${String(item.key)}: ${valueToCode(value, item.enumMap)},`);
+  });
+
+  lines.push("}");
+  return lines.join("\n");
+};
+
+/**
+ * 复制配置到剪贴板
+ */
+const handleCopyConfig = async () => {
+  try {
+    const configText = generateConfigCode();
+    await copy(configText);
+
+    if (copied.value) {
+      ElMessage.success({
+        message: t("setting.actions.copySuccess"),
+        duration: 3000,
+      });
+    }
+  } catch (error) {
+    console.error("复制配置失败:", error);
+    ElMessage.error(t("setting.actions.copyFailed"));
+  }
+};
+
+/**
+ * 切换布尔值配置（如果当前值与默认值不同）
+ */
+const toggleIfDifferent = (currentValue: boolean, defaultValue: boolean, toggleFn: () => void) => {
+  if (currentValue !== defaultValue) {
+    toggleFn();
+  }
+};
+
+/**
+ * 重置配置为默认值
+ */
+const handleResetConfig = async () => {
+  try {
+    const config = SETTING_DEFAULT_CONFIG;
+
+    // 菜单相关
+    settingStore.switchMenuLayouts(config.menuType);
+    settingStore.setMenuOpenWidth(config.menuOpenWidth);
+    settingStore.setMenuOpen(config.menuOpen);
+    settingStore.setDualMenuShowText(config.dualMenuShowText);
+
+    // 主题相关 - 使用 switchThemeStyles 确保正确处理 AUTO 模式
+    switchThemeStyles(config.systemThemeMode);
+
+    // 等待主题切换完成后，根据实际应用的主题设置菜单主题
+    await nextTick();
+    const menuTheme = settingStore.isDark ? MenuThemeEnum.DARK : config.menuThemeType;
+    settingStore.switchMenuStyles(menuTheme);
+
+    settingStore.setElementTheme(config.systemThemeColor);
+
+    // 界面显示（切换类方法）
+    toggleIfDifferent(settingStore.showMenuButton, config.showMenuButton, () =>
+      settingStore.setButton()
+    );
+    toggleIfDifferent(settingStore.showFastEnter, config.showFastEnter, () =>
+      settingStore.setFastEnter()
+    );
+    toggleIfDifferent(settingStore.showRefreshButton, config.showRefreshButton, () =>
+      settingStore.setShowRefreshButton()
+    );
+    toggleIfDifferent(settingStore.showCrumbs, config.showCrumbs, () => settingStore.setCrumbs());
+    toggleIfDifferent(settingStore.showLanguage, config.showLanguage, () =>
+      settingStore.setLanguage()
+    );
+    toggleIfDifferent(settingStore.showNprogress, config.showNprogress, () =>
+      settingStore.setNprogress()
+    );
+
+    // 界面显示（直接设置类方法）
+    settingStore.setWorkTab(config.showWorkTab);
+    settingStore.setShowFestivalText(config.showFestivalText);
+    settingStore.setWatermarkVisible(config.watermarkVisible);
+
+    // 功能设置
+    toggleIfDifferent(settingStore.autoClose, config.autoClose, () => settingStore.setAutoClose());
+    toggleIfDifferent(settingStore.uniqueOpened, config.uniqueOpened, () =>
+      settingStore.setUniqueOpened()
+    );
+    toggleIfDifferent(settingStore.colorWeak, config.colorWeak, () => settingStore.setColorWeak());
+
+    // 样式设置
+    toggleIfDifferent(settingStore.boxBorderMode, config.boxBorderMode, () =>
+      settingStore.setBorderMode()
+    );
+    settingStore.setPageTransition(config.pageTransition);
+    settingStore.setTabStyle(config.tabStyle);
+    settingStore.setCustomRadius(config.customRadius);
+    settingStore.setContainerWidth(config.containerWidth);
+
+    // 节日相关
+    settingStore.setFestivalDate(config.festivalDate);
+    settingStore.setholidayFireworksLoaded(config.holidayFireworksLoaded);
+
+    location.reload();
+  } catch (error) {
+    console.error("重置配置失败:", error);
+    ElMessage.error(t("setting.actions.resetFailed"));
+  }
+};
+</script>
diff --git a/frontend/new-web/src/layouts/art-settings-panel/widget/SettingDrawer.vue b/frontend/new-web/src/layouts/art-settings-panel/widget/SettingDrawer.vue
new file mode 100644
index 00000000..01a1a466
--- /dev/null
+++ b/frontend/new-web/src/layouts/art-settings-panel/widget/SettingDrawer.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="setting-drawer">
+    <ElDrawer
+      size="300px"
+      v-model="visible"
+      :lock-scroll="true"
+      :with-header="false"
+      :before-close="handleClose"
+      :destroy-on-close="false"
+      modal-class="setting-modal"
+      @open="handleOpen"
+      @close="handleDrawerClose"
+    >
+      <div class="drawer-con">
+        <slot />
+      </div>
+    </ElDrawer>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  modelValue: boolean;
+}
+
+interface Emits {
+  (e: "update:modelValue", value: boolean): void;
+  (e: "open"): void;
+  (e: "close"): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (value: boolean) => emit("update:modelValue", value),
+});
+
+const handleOpen = () => {
+  emit("open");
+};
+
+const handleDrawerClose = () => {
+  emit("close");
+};
+
+const handleClose = () => {
+  visible.value = false;
+};
+</script>
diff --git a/frontend/new-web/src/layouts/art-settings-panel/widget/SettingHeader.vue b/frontend/new-web/src/layouts/art-settings-panel/widget/SettingHeader.vue
new file mode 100644
index 00000000..718259f4
--- /dev/null
+++ b/frontend/new-web/src/layouts/art-settings-panel/widget/SettingHeader.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <div class="flex justify-end">
+      <div
+        @click="$emit('close')"
+        class="flex-cc c-p size-7.5 !transition-all duration-200 rounded hover:bg-g-300/80"
+      >
+        <ArtSvgIcon icon="ri:close-fill" class="block text-xl text-g-600" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineEmits<{
+  close: [];
+}>();
+</script>
diff --git a/frontend/new-web/src/layouts/art-settings-panel/widget/SettingItem.vue b/frontend/new-web/src/layouts/art-settings-panel/widget/SettingItem.vue
new file mode 100644
index 00000000..03b4b794
--- /dev/null
+++ b/frontend/new-web/src/layouts/art-settings-panel/widget/SettingItem.vue
@@ -0,0 +1,101 @@
+<template>
+  <div class="flex-cb mb-4 last:mb-2" :class="{ 'mobile-hide': config.mobileHide }">
+    <span class="text-sm">{{ config.label }}</span>
+
+    <!-- 开关类型 -->
+    <ElSwitch v-if="config.type === 'switch'" :model-value="modelValue" @change="handleChange" />
+
+    <!-- 数字输入类型 -->
+    <ElInputNumber
+      v-else-if="config.type === 'input-number'"
+      :model-value="modelValue"
+      :min="config.min"
+      :max="config.max"
+      :step="config.step"
+      :style="config.style"
+      :controls-position="config.controlsPosition"
+      @change="handleChange"
+    />
+
+    <!-- 选择器类型 -->
+    <ElSelect
+      v-else-if="config.type === 'select'"
+      :model-value="modelValue"
+      :style="config.style"
+      @change="handleChange"
+    >
+      <ElOption
+        v-for="option in normalizedOptions"
+        :key="option.value"
+        :label="option.label"
+        :value="option.value"
+      />
+    </ElSelect>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ComputedRef } from "vue";
+
+interface SettingItemConfig {
+  key: string;
+  label: string;
+  type: "switch" | "input-number" | "select";
+  handler: string;
+  mobileHide?: boolean;
+  min?: number;
+  max?: number;
+  step?: number;
+  style?: Record<string, string>;
+  controlsPosition?: "" | "right";
+  options?:
+    | Array<{ value: any; label: string }>
+    | ComputedRef<Array<{ value: any; label: string }>>;
+}
+
+interface Props {
+  config: SettingItemConfig;
+  modelValue: any;
+}
+
+interface Emits {
+  (e: "change", value: any): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+// 标准化选项，处理computed和普通数组
+const normalizedOptions = computed(() => {
+  if (!props.config.options) return [];
+
+  try {
+    // 如果是 ComputedRef，则返回其值
+    if (typeof props.config.options === "object" && "value" in props.config.options) {
+      return props.config.options.value || [];
+    }
+
+    // 如果是普通数组，直接返回
+    return Array.isArray(props.config.options) ? props.config.options : [];
+  } catch (error) {
+    console.warn("Error processing options for config:", props.config.key, error);
+    return [];
+  }
+});
+
+const handleChange = (value: any) => {
+  try {
+    emit("change", value);
+  } catch (error) {
+    console.error("Error handling change for config:", props.config.key, error);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@media screen and (width <= 768px) {
+  .mobile-hide {
+    display: none !important;
+  }
+}
+</style>
diff --git a/frontend/new-web/src/layouts/art-settings-panel/widget/ThemeSettings.vue b/frontend/new-web/src/layouts/art-settings-panel/widget/ThemeSettings.vue
new file mode 100644
index 00000000..b6397e58
--- /dev/null
+++ b/frontend/new-web/src/layouts/art-settings-panel/widget/ThemeSettings.vue
@@ -0,0 +1,28 @@
+<template>
+  <SectionTitle :title="$t('setting.theme.title')" />
+  <div class="setting-box-wrap">
+    <div
+      class="setting-item"
+      v-for="(item, index) in configOptions.themeList"
+      :key="item.theme"
+      @click="switchThemeStyles(item.theme)"
+    >
+      <div class="box" :class="{ 'is-active': item.theme === systemThemeMode }">
+        <img :src="item.img" />
+      </div>
+      <p class="name">{{ $t(`setting.theme.list[${index}]`) }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import SectionTitle from "./SectionTitle.vue";
+import { useSettingsStore } from "@/store/modules/setting.store";
+import { useSettingsConfig } from "../composables/useSettingsConfig";
+import { useTheme } from "@/hooks/core/useTheme";
+
+const settingStore = useSettingsStore();
+const { systemThemeMode } = storeToRefs(settingStore);
+const { configOptions } = useSettingsConfig();
+const { switchThemeStyles } = useTheme();
+</script>
diff --git a/frontend/new-web/src/layouts/art-work-tab/index.vue b/frontend/new-web/src/layouts/art-work-tab/index.vue
new file mode 100755
index 00000000..8956c979
--- /dev/null
+++ b/frontend/new-web/src/layouts/art-work-tab/index.vue
@@ -0,0 +1,583 @@
+<!-- 标签页 -->
+<template>
+  <div
+    v-if="showWorkTab"
+    class="box-border flex-b w-full px-5 mb-3 select-none max-sm:px-[15px]"
+    :class="[
+      tabStyle === 'tab-card' ? 'py-1 border-b border-[var(--art-card-border)]' : '',
+      tabStyle === 'tab-google' ? 'pt-1 pb-0 border-b border-[var(--art-card-border)]' : '',
+    ]"
+  >
+    <div class="w-full overflow-hidden" ref="scrollRef">
+      <ul
+        class="float-left whitespace-nowrap !bg-transparent flex"
+        :class="[tabStyle === 'tab-google' ? 'pl-1' : '']"
+        ref="tabsRef"
+        :style="{
+          transform: `translateX(${scrollState.translateX}px)`,
+          transition: `${scrollState.transition}`,
+        }"
+      >
+        <li
+          class="art-card-xs inline-flex flex-cc h-8 mr-1.5 text-xs c-p hover:text-theme group"
+          :class="[
+            item.path === activeTab ? 'activ-tab !text-theme' : 'text-g-600 dark:text-g-800',
+            tabStyle === 'tab-google' ? 'google-tab relative !h-8 !leading-8 !border-none' : '',
+          ]"
+          :style="{
+            padding: item.fixedTab ? '0 10px' : '0 8px 0 12px',
+            borderRadius:
+              tabStyle === 'tab-google'
+                ? 'calc(var(--custom-radius) / 2.5 + 4px) !important'
+                : 'calc(var(--custom-radius) / 2.5 + 2px) !important',
+          }"
+          v-for="(item, index) in list"
+          :key="item.path"
+          :ref="item.path"
+          :id="`scroll-li-${index}`"
+          @click="clickTab(item)"
+          @contextmenu.prevent="(e: MouseEvent) => showMenu(e, item.path)"
+        >
+          <ArtSvgIcon
+            v-show="item.icon"
+            :icon="item.icon"
+            class="text-base mr-1 group-hover:text-theme"
+            :class="item.path === activeTab ? 'text-theme' : 'text-g-600'"
+          />
+          {{ item.customTitle || formatMenuTitle(item.title) }}
+          <span
+            v-if="list.length > 1 && !item.fixedTab"
+            class="inline-flex flex-cc relative ml-0.5 p-1 rounded-full tad-200 hover:bg-g-200"
+            @click.stop="closeWorktab('current', item.path)"
+          >
+            <ArtSvgIcon icon="ri:close-large-fill" class="text-[10px] text-g-600" />
+          </span>
+          <div
+            v-if="tabStyle === 'tab-google'"
+            class="line absolute top-0 bottom-0 left-0 w-px h-4 my-auto bg-g-400 transition-opacity duration-150"
+          />
+        </li>
+      </ul>
+    </div>
+
+    <div class="flex">
+      <div
+        class="flex-cc art-card-xs relative top-0 size-8 leading-8 text-center c-p tad-200 hover:!bg-hover-color"
+        :style="{
+          borderRadius: 'calc(var(--custom-radius) / 2.5 + 0px)',
+          marginTop: tabStyle === 'tab-google' ? '-2px' : '',
+        }"
+        @click="(e: MouseEvent) => showMenu(e, activeTab)"
+      >
+        <ArtSvgIcon icon="iconamoon:arrow-down-2-thin" class="text-2xl text-g-700" />
+      </div>
+    </div>
+
+    <ArtMenuRight
+      ref="menuRef"
+      :menu-items="menuItems"
+      :menu-width="140"
+      :border-radius="10"
+      @select="handleSelect"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch, nextTick, onUnmounted } from "vue";
+import { LocationQueryRaw, useRoute, useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
+import { storeToRefs } from "pinia";
+
+import { useWorktabStore } from "@/store/modules/worktab.store";
+import { useUserStore } from "@/store/modules/user.store";
+import { formatMenuTitle } from "@/utils/navigation/router";
+import { useSettingsStore } from "@/store/modules/setting.store";
+import { MenuItemType } from "../../others/art-menu-right/index.vue";
+import { useCommon } from "@/hooks/core/useCommon";
+import { WorkTab } from "@/types";
+
+defineOptions({ name: "ArtWorkTab" });
+
+// 类型定义
+interface ScrollState {
+  translateX: number;
+  transition: string;
+}
+
+interface TouchState {
+  startX: number;
+  currentX: number;
+}
+
+type TabCloseType = "current" | "left" | "right" | "other" | "all";
+
+// 基础设置
+const { t } = useI18n();
+const store = useWorktabStore();
+const userStore = useUserStore();
+const route = useRoute();
+const router = useRouter();
+const { currentRoute } = router;
+const settingStore = useSettingsStore();
+const { tabStyle, showWorkTab } = storeToRefs(settingStore);
+
+// DOM 引用
+const scrollRef = ref<HTMLElement | null>(null);
+const tabsRef = ref<HTMLElement | null>(null);
+const menuRef = ref();
+
+// 状态管理
+const scrollState = ref<ScrollState>({
+  translateX: 0,
+  transition: "",
+});
+
+const touchState = ref<TouchState>({
+  startX: 0,
+  currentX: 0,
+});
+
+const clickedPath = ref("");
+
+// 计算属性
+const list = computed(() => store.opened);
+const activeTab = computed(() => currentRoute.value.path);
+const activeTabIndex = computed(() => list.value.findIndex((tab) => tab.path === activeTab.value));
+
+// 右键菜单逻辑
+const useContextMenu = () => {
+  const getClickedTabInfo = () => {
+    const clickedIndex = list.value.findIndex((tab) => tab.path === clickedPath.value);
+    const currentTab = list.value[clickedIndex];
+
+    return {
+      clickedIndex,
+      currentTab,
+      isLastTab: clickedIndex === list.value.length - 1,
+      isOneTab: list.value.length === 1,
+      isCurrentTab: clickedPath.value === activeTab.value,
+    };
+  };
+
+  // 检查标签页是否固定
+  const checkTabsFixedStatus = (clickedIndex: number) => {
+    const leftTabs = list.value.slice(0, clickedIndex);
+    const rightTabs = list.value.slice(clickedIndex + 1);
+    const otherTabs = list.value.filter((_, index) => index !== clickedIndex);
+
+    return {
+      areAllLeftTabsFixed: leftTabs.length > 0 && leftTabs.every((tab) => tab.fixedTab),
+      areAllRightTabsFixed: rightTabs.length > 0 && rightTabs.every((tab) => tab.fixedTab),
+      areAllOtherTabsFixed: otherTabs.length > 0 && otherTabs.every((tab) => tab.fixedTab),
+      areAllTabsFixed: list.value.every((tab) => tab.fixedTab),
+    };
+  };
+
+  // 右键菜单选项
+  const menuItems = computed(() => {
+    const { clickedIndex, currentTab, isLastTab, isOneTab, isCurrentTab } = getClickedTabInfo();
+    const fixedStatus = checkTabsFixedStatus(clickedIndex);
+
+    return [
+      {
+        key: "refresh",
+        label: t("worktab.btn.refresh"),
+        icon: "ri:refresh-line",
+        disabled: !isCurrentTab,
+      },
+      {
+        key: "fixed",
+        label: currentTab?.fixedTab ? t("worktab.btn.unfixed") : t("worktab.btn.fixed"),
+        icon: "ri:pushpin-2-line",
+        disabled: false,
+        showLine: true,
+      },
+      {
+        key: "left",
+        label: t("worktab.btn.closeLeft"),
+        icon: "ri:arrow-left-s-line",
+        disabled: clickedIndex === 0 || fixedStatus.areAllLeftTabsFixed,
+      },
+      {
+        key: "right",
+        label: t("worktab.btn.closeRight"),
+        icon: "ri:arrow-right-s-line",
+        disabled: isLastTab || fixedStatus.areAllRightTabsFixed,
+      },
+      {
+        key: "other",
+        label: t("worktab.btn.closeOther"),
+        icon: "ri:close-fill",
+        disabled: isOneTab || fixedStatus.areAllOtherTabsFixed,
+      },
+      {
+        key: "all",
+        label: t("worktab.btn.closeAll"),
+        icon: "ri:close-circle-line",
+        disabled: isOneTab || fixedStatus.areAllTabsFixed,
+      },
+    ];
+  });
+
+  return { menuItems };
+};
+
+// 滚动逻辑
+const useScrolling = () => {
+  const setTransition = () => {
+    scrollState.value.transition = "transform 0.5s cubic-bezier(0.15, 0, 0.15, 1)";
+    setTimeout(() => {
+      scrollState.value.transition = "";
+    }, 250);
+  };
+
+  const getCurrentTabElement = (): HTMLElement | null => {
+    return document.getElementById(`scroll-li-${activeTabIndex.value}`);
+  };
+
+  const calculateScrollPosition = () => {
+    if (!scrollRef.value || !tabsRef.value) return;
+
+    const scrollWidth = scrollRef.value.offsetWidth;
+    const ulWidth = tabsRef.value.offsetWidth;
+    const curTabEl = getCurrentTabElement();
+
+    if (!curTabEl) return;
+
+    const { offsetLeft, clientWidth } = curTabEl;
+    const curTabRight = offsetLeft + clientWidth;
+    const targetLeft = scrollWidth - curTabRight;
+
+    return {
+      scrollWidth,
+      ulWidth,
+      offsetLeft,
+      clientWidth,
+      curTabRight,
+      targetLeft,
+    };
+  };
+
+  const autoPositionTab = () => {
+    const positions = calculateScrollPosition();
+    if (!positions) return;
+
+    const { scrollWidth, ulWidth, offsetLeft, curTabRight, targetLeft } = positions;
+
+    if (
+      (offsetLeft > Math.abs(scrollState.value.translateX) && curTabRight <= scrollWidth) ||
+      (scrollState.value.translateX < targetLeft && targetLeft < 0)
+    ) {
+      return;
+    }
+
+    requestAnimationFrame(() => {
+      if (curTabRight > scrollWidth) {
+        scrollState.value.translateX = Math.max(targetLeft - 6, scrollWidth - ulWidth);
+      } else if (offsetLeft < Math.abs(scrollState.value.translateX)) {
+        scrollState.value.translateX = -offsetLeft;
+      }
+    });
+  };
+
+  const adjustPositionAfterClose = () => {
+    const positions = calculateScrollPosition();
+    if (!positions) return;
+
+    const { scrollWidth, ulWidth, offsetLeft, clientWidth } = positions;
+    const curTabLeft = offsetLeft + clientWidth;
+
+    requestAnimationFrame(() => {
+      scrollState.value.translateX = curTabLeft > scrollWidth ? scrollWidth - ulWidth : 0;
+    });
+  };
+
+  return {
+    setTransition,
+    autoPositionTab,
+    adjustPositionAfterClose,
+  };
+};
+
+// 事件处理逻辑
+const useEventHandlers = () => {
+  const { setTransition, adjustPositionAfterClose } = useScrolling();
+
+  const handleWheelScroll = (event: WheelEvent) => {
+    if (!scrollRef.value || !tabsRef.value) return;
+
+    event.preventDefault();
+
+    if (tabsRef.value.offsetWidth <= scrollRef.value.offsetWidth) return;
+
+    const xMax = 0;
+    const xMin = scrollRef.value.offsetWidth - tabsRef.value.offsetWidth;
+    const delta = Math.abs(event.deltaX) > Math.abs(event.deltaY) ? event.deltaX : event.deltaY;
+
+    scrollState.value.translateX = Math.min(
+      Math.max(scrollState.value.translateX - delta, xMin),
+      xMax
+    );
+  };
+
+  const handleTouchStart = (event: TouchEvent) => {
+    touchState.value.startX = event.touches[0].clientX;
+  };
+
+  const handleTouchMove = (event: TouchEvent) => {
+    if (!scrollRef.value || !tabsRef.value) return;
+
+    touchState.value.currentX = event.touches[0].clientX;
+    const deltaX = touchState.value.currentX - touchState.value.startX;
+    const xMin = scrollRef.value.offsetWidth - tabsRef.value.offsetWidth;
+
+    scrollState.value.translateX = Math.min(
+      Math.max(scrollState.value.translateX + deltaX, xMin),
+      0
+    );
+    touchState.value.startX = touchState.value.currentX;
+  };
+
+  const handleTouchEnd = () => {
+    setTransition();
+  };
+
+  const setupEventListeners = () => {
+    if (tabsRef.value) {
+      tabsRef.value.addEventListener("wheel", handleWheelScroll, { passive: false });
+      tabsRef.value.addEventListener("touchstart", handleTouchStart, { passive: true });
+      tabsRef.value.addEventListener("touchmove", handleTouchMove, { passive: true });
+      tabsRef.value.addEventListener("touchend", handleTouchEnd, { passive: true });
+    }
+  };
+
+  const cleanupEventListeners = () => {
+    if (tabsRef.value) {
+      tabsRef.value.removeEventListener("wheel", handleWheelScroll);
+      tabsRef.value.removeEventListener("touchstart", handleTouchStart);
+      tabsRef.value.removeEventListener("touchmove", handleTouchMove);
+      tabsRef.value.removeEventListener("touchend", handleTouchEnd);
+    }
+  };
+
+  return {
+    setupEventListeners,
+    cleanupEventListeners,
+    adjustPositionAfterClose,
+  };
+};
+
+// 标签页操作逻辑
+const useTabOperations = (adjustPositionAfterClose: () => void) => {
+  const clickTab = (item: WorkTab) => {
+    router.push({
+      path: item.path,
+      query: item.query as LocationQueryRaw,
+    });
+  };
+
+  const closeWorktab = (type: TabCloseType, tabPath: string) => {
+    const path = typeof tabPath === "string" ? tabPath : route.path;
+
+    const closeActions = {
+      current: () => store.removeTab(path),
+      left: () => store.removeLeft(path),
+      right: () => store.removeRight(path),
+      other: () => store.removeOthers(path),
+      all: () => store.removeAll(),
+    };
+
+    closeActions[type]?.();
+
+    setTimeout(() => {
+      adjustPositionAfterClose();
+    }, 100);
+  };
+
+  const showMenu = (e: MouseEvent, path?: string) => {
+    clickedPath.value = path || "";
+    menuRef.value?.show(e);
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  const handleSelect = (item: MenuItemType) => {
+    const { key } = item;
+
+    if (key === "refresh") {
+      useCommon().refresh();
+      return;
+    }
+
+    if (key === "fixed") {
+      useWorktabStore().toggleFixedTab(clickedPath.value);
+      return;
+    }
+
+    const activeIndex = list.value.findIndex((tab) => tab.path === activeTab.value);
+    const clickedIndex = list.value.findIndex((tab) => tab.path === clickedPath.value);
+
+    const navigationRules = {
+      left: activeIndex < clickedIndex,
+      right: activeIndex > clickedIndex,
+      other: true,
+    } as const;
+
+    const shouldNavigate = navigationRules[key as keyof typeof navigationRules];
+
+    if (shouldNavigate) {
+      router.push(clickedPath.value);
+    }
+
+    closeWorktab(key as TabCloseType, clickedPath.value);
+  };
+
+  return {
+    clickTab,
+    closeWorktab,
+    showMenu,
+    handleSelect,
+  };
+};
+
+// 组合所有逻辑
+const { menuItems } = useContextMenu();
+const { setTransition, autoPositionTab } = useScrolling();
+const { setupEventListeners, cleanupEventListeners, adjustPositionAfterClose } = useEventHandlers();
+const { clickTab, closeWorktab, showMenu, handleSelect } =
+  useTabOperations(adjustPositionAfterClose);
+
+// 生命周期
+onMounted(() => {
+  setupEventListeners();
+  autoPositionTab();
+});
+
+onUnmounted(() => {
+  cleanupEventListeners();
+});
+
+// 监听器
+watch(
+  () => currentRoute.value,
+  () => {
+    setTransition();
+    autoPositionTab();
+  }
+);
+
+watch(
+  () => userStore.language,
+  () => {
+    scrollState.value.translateX = 0;
+    nextTick(() => {
+      autoPositionTab();
+    });
+  }
+);
+</script>
+
+<style scoped>
+.google-tab.activ-tab {
+  color: var(--theme-color) !important;
+  background-color: var(--el-color-primary-light-9) !important;
+  border-bottom: 0 !important;
+  border-bottom-right-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+}
+
+.google-tab.activ-tab::before,
+.google-tab.activ-tab::after {
+  position: absolute;
+  bottom: 0;
+  width: 20px;
+  height: 20px;
+  content: "";
+  border-radius: 50%;
+  box-shadow: 0 0 0 30px var(--el-color-primary-light-9);
+}
+
+.google-tab.activ-tab::before {
+  left: -20px;
+  clip-path: inset(50% -10px 0 50%);
+}
+
+.google-tab.activ-tab::after {
+  right: -20px;
+  clip-path: inset(50% 50% 0 -10px);
+}
+
+.dark .google-tab.activ-tab {
+  color: var(--art-gray-800) !important;
+  background-color: var(--art-hover-color) !important;
+}
+
+.dark .google-tab.activ-tab::before,
+.dark .google-tab.activ-tab::after {
+  box-shadow: 0 0 0 30px var(--art-hover-color);
+}
+
+.google-tab:not(.activ-tab):hover {
+  box-sizing: border-box;
+  color: var(--art-gray-600) !important;
+  background-color: var(--art-gray-200) !important;
+  border-bottom: 1px solid var(--default-box-color) !important;
+  border-radius: calc(var(--custom-radius) / 2.5 + 4px) !important;
+}
+
+.dark .google-tab:not(.activ-tab):hover {
+  background-color: var(--art-hover-color) !important;
+}
+
+.google-tab:hover .line,
+.google-tab.activ-tab .line,
+.google-tab:first-child .line {
+  opacity: 0;
+}
+
+.google-tab:hover + .google-tab .line,
+.google-tab.activ-tab + .google-tab .line {
+  opacity: 0;
+}
+
+.google-tab::before,
+.google-tab::after {
+  position: absolute;
+  bottom: 0;
+  width: 20px;
+  height: 20px;
+  content: "";
+  border-radius: 50%;
+  box-shadow: 0 0 0 30px transparent;
+}
+
+.google-tab::before {
+  left: -20px;
+  clip-path: inset(50% -10px 0 50%);
+}
+
+.google-tab::after {
+  right: -20px;
+  clip-path: inset(50% 50% 0 -10px);
+}
+
+.google-tab i:hover {
+  color: var(--art-gray-700);
+  background: var(--art-gray-300);
+}
+
+@media only screen and (width <= 768px) {
+  .box-border.flex.justify-between {
+    padding-right: 0.625rem;
+    padding-left: 0.625rem;
+  }
+}
+
+@media only screen and (width <= 640px) {
+  .box-border.flex.justify-between {
+    padding-right: 0.9375rem;
+    padding-left: 0.9375rem;
+  }
+}
+</style>
diff --git a/frontend/new-web/src/views/index/index.vue b/frontend/new-web/src/layouts/index.vue
similarity index 88%
rename from frontend/new-web/src/views/index/index.vue
rename to frontend/new-web/src/layouts/index.vue
index 415a4361..a5289ec2 100755
--- a/frontend/new-web/src/views/index/index.vue
+++ b/frontend/new-web/src/layouts/index.vue
@@ -21,9 +21,9 @@
 </template>
 
 <script setup lang="ts">
-  defineOptions({ name: 'AppLayout' })
+defineOptions({ name: "AppLayout" });
 </script>
 
 <style lang="scss" scoped>
-  @use './style';
+@use "./style";
 </style>
diff --git a/frontend/new-web/src/layouts/old/components/AppLogo/index.vue b/frontend/new-web/src/layouts/old/components/AppLogo/index.vue
new file mode 100644
index 00000000..edde8ea9
--- /dev/null
+++ b/frontend/new-web/src/layouts/old/components/AppLogo/index.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="logo">
+    <transition enter-active-class="animate__animated animate__fadeInLeft">
+      <router-link :key="+collapse" class="wh-full flex-center" to="/">
+        <img
+          :src="configStore.configData.sys_web_logo?.config_value || ''"
+          class="w50px h50px"
+          alt=""
+        />
+        <span v-if="!collapse" class="title">
+          {{ configStore.configData.sys_web_title?.config_value || "" }}
+        </span>
+      </router-link>
+    </transition>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useConfigStore } from "@/store";
+const configStore = useConfigStore();
+
+defineProps({
+  collapse: {
+    type: Boolean,
+    required: true,
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.logo {
+  width: 100%;
+  height: $navbar-height;
+  background-color: var(--layout-logo-bg);
+
+  .title {
+    max-width: 100px;
+    margin-left: 10px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 14px;
+    font-weight: bold;
+    color: $sidebar-logo-text-color;
+    white-space: nowrap;
+  }
+}
+</style>
+
+<style lang="scss">
+// 顶部布局和混合布局的特殊处理
+.layout-top,
+.layout-mix {
+  .logo {
+    background-color: transparent !important;
+
+    .title {
+      color: var(--menu-text);
+    }
+  }
+}
+
+// 宽屏时：openSidebar 状态下显示完整Logo+文字
+.openSidebar {
+  &.layout-top .layout__header-left .logo,
+  &.layout-mix .layout__header-logo .logo {
+    width: $sidebar-width; // 210px，显示logo+文字
+  }
+}
+
+// 窄屏时：hideSidebar 状态下只显示Logo图标
+.hideSidebar {
+  &.layout-top .layout__header-left .logo,
+  &.layout-mix .layout__header-logo .logo {
+    width: $sidebar-width-collapsed; // 54px，只显示logo
+  }
+
+  // 隐藏文字，只显示图标
+  .logo .title {
+    display: none;
+  }
+}
+</style>
diff --git a/frontend/new-web/src/layouts/old/components/AppMain/index.vue b/frontend/new-web/src/layouts/old/components/AppMain/index.vue
new file mode 100644
index 00000000..71957ff4
--- /dev/null
+++ b/frontend/new-web/src/layouts/old/components/AppMain/index.vue
@@ -0,0 +1,158 @@
+<template>
+  <section class="app-main" :style="{ height: appMainHeight }">
+    <router-view>
+      <template #default="{ Component, route }">
+        <transition :name="transitionName" mode="out-in">
+          <keep-alive :include="cachedViews">
+            <component :is="Component" :key="route.path" />
+          </keep-alive>
+        </transition>
+      </template>
+    </router-view>
+
+    <!-- 返回顶部按钮 -->
+    <el-backtop target=".app-main">
+      <div class="i-svg:backtop w-6 h-6" />
+    </el-backtop>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { useSettingsStore, useTagsViewStore } from "@/store";
+import variables from "@/styles/variables.module.scss";
+import { computed } from "vue";
+
+const settingsStore = useSettingsStore();
+// 页面切换动画名称
+const transitionName = computed(() => {
+  return settingsStore.pageSwitchingAnimation ?? "";
+});
+// 缓存页面集合
+const cachedViews = computed(() => useTagsViewStore().cachedViews);
+const appMainHeight = computed(() => {
+  if (settingsStore.showTagsView) {
+    return `calc(100vh - ${variables["navbar-height"]} - ${variables["tags-view-height"]})`;
+  } else {
+    return `calc(100vh - ${variables["navbar-height"]})`;
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.app-main {
+  position: relative;
+  overflow-y: auto;
+  background-color: var(--el-bg-color-page);
+
+  /* 布局切换动画优化 */
+
+  /* fade */
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 0.3s ease-in-out;
+  }
+
+  .fade-enter-from,
+  .fade-leave-to {
+    opacity: 0;
+  }
+
+  /* fade-slide - 优化后的平滑切换，增大位移 */
+  .fade-slide-leave-active,
+  .fade-slide-enter-active {
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .fade-slide-enter-from {
+    opacity: 0;
+    transform: translateX(-60px);
+  }
+
+  .fade-slide-leave-to {
+    opacity: 0;
+    transform: translateX(60px);
+  }
+
+  /* fade-scale */
+  .fade-scale-leave-active,
+  .fade-scale-enter-active {
+    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .fade-scale-enter-from {
+    opacity: 0;
+    transform: scale(1.2);
+  }
+
+  .fade-scale-leave-to {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+
+  /* slide-left-right - 左右滑动切换 */
+  .slide-left-right-leave-active,
+  .slide-left-right-enter-active {
+    position: absolute;
+    width: 100%;
+    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .slide-left-right-enter-from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+
+  .slide-left-right-leave-to {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+
+  /* zoom-in-out - 缩放进出 */
+  .zoom-in-out-leave-active,
+  .zoom-in-out-enter-active {
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .zoom-in-out-enter-from {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+
+  .zoom-in-out-leave-to {
+    opacity: 0;
+    transform: scale(1.2);
+  }
+
+  /* slide-up-down - 上下滑动 */
+  .slide-up-down-leave-active,
+  .slide-up-down-enter-active {
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .slide-up-down-enter-from {
+    opacity: 0;
+    transform: translateY(40px);
+  }
+
+  .slide-up-down-leave-to {
+    opacity: 0;
+    transform: translateY(-40px);
+  }
+
+  /* bounce - 弹性效果 */
+  .bounce-leave-active,
+  .bounce-enter-active {
+    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  }
+
+  .bounce-enter-from {
+    opacity: 0;
+    transform: scale(0.3);
+  }
+
+  .bounce-leave-to {
+    opacity: 0;
+    transform: scale(0.3);
+  }
+}
+</style>
diff --git a/frontend/new-web/src/layouts/old/components/Menu/BasicMenu.vue b/frontend/new-web/src/layouts/old/components/Menu/BasicMenu.vue
new file mode 100644
index 00000000..70f2eae0
--- /dev/null
+++ b/frontend/new-web/src/layouts/old/components/Menu/BasicMenu.vue
@@ -0,0 +1,120 @@
+<!-- 菜单组件 -->
+<template>
+  <el-menu
+    ref="menuRef"
+    :default-active="activeMenuPath"
+    :collapse="!appStore.sidebar.opened"
+    :background-color="menuThemeProps.backgroundColor"
+    :text-color="menuThemeProps.textColor"
+    :active-text-color="menuThemeProps.activeTextColor"
+    :popper-effect="theme"
+    :unique-opened="false"
+    :collapse-transition="false"
+    :mode="menuMode"
+  >
+    <!-- 菜单项 -->
+    <MenuItem
+      v-for="route in data"
+      :key="route.path"
+      :item="route"
+      :base-path="menuParentBasePath"
+    />
+  </el-menu>
+</template>
+
+<script lang="ts" setup>
+import { computed, nextTick, PropType, ref, watch } from "vue";
+import type { MenuInstance } from "element-plus";
+import { useRoute } from "vue-router";
+import type { RouteRecordRaw } from "vue-router";
+import { SidebarColor } from "@/enums/settings/theme.enum";
+import { useSettingsStore, useAppStore } from "@/store";
+import MenuItem from "./components/MenuItem.vue";
+import variables from "@/styles/variables.module.scss";
+
+const props = defineProps({
+  data: {
+    type: Array as PropType<RouteRecordRaw[]>,
+    default: () => [],
+  },
+  basePath: {
+    type: String,
+    required: true,
+    example: "/system",
+  },
+  menuMode: {
+    type: String as PropType<"vertical" | "horizontal">,
+    default: "vertical",
+    validator: (value: string) => ["vertical", "horizontal"].includes(value),
+  },
+});
+
+const settingsStore = useSettingsStore();
+const appStore = useAppStore();
+const currentRoute = useRoute();
+const menuRef = ref<MenuInstance | null>(null);
+
+// 获取主题
+const theme = computed(() => settingsStore.theme);
+
+// 获取浅色主题下的侧边栏配色方案
+const sidebarColorScheme = computed(() => settingsStore.sidebarColorScheme);
+
+// 菜单主题属性
+const menuThemeProps = computed(() => {
+  const isDarkOrClassicBlue =
+    theme.value === "dark" || sidebarColorScheme.value === SidebarColor.CLASSIC_BLUE;
+
+  return {
+    backgroundColor: isDarkOrClassicBlue ? variables["menu-background"] : undefined,
+    textColor: isDarkOrClassicBlue ? variables["menu-text"] : undefined,
+    activeTextColor: isDarkOrClassicBlue ? variables["menu-active-text"] : undefined,
+  };
+});
+
+function normalizeMenuPath(p: string): string {
+  if (!p) return "";
+  if (/^https?:\/\//i.test(p) || p.startsWith("//")) return p;
+  const s = p.trim();
+  if (s === "/") return "/";
+  return s.replace(/\/+$/, "") || "/";
+}
+
+/**
+ * 与 MenuItem 叶子项 index 一致：叶子用 router.resolve 得到 path，与 route.path 相同；
+ * default-active 用当前 route.path（及 meta.activeMenu）即可对齐。
+ */
+const activeMenuPath = computed((): string => {
+  const r = currentRoute;
+  if (r.meta?.activeMenu && typeof r.meta.activeMenu === "string") {
+    return normalizeMenuPath(r.meta.activeMenu);
+  }
+  return normalizeMenuPath(r.path);
+});
+
+/**
+ * 侧栏树根前缀：左侧布局 base-path 为空时规范为 "/"，再与每项 path 拼接。
+ * 勿用 resolveFullPath(route.path) 作为根 MenuItem 的 base-path，否则会与 item.path 再拼一次导致错位。
+ */
+const menuParentBasePath = computed(() => {
+  const b = props.basePath;
+  if (b === undefined || b === null || b === "") return "/";
+  const t = b.replace(/\/+$/, "");
+  return t || "/";
+});
+
+function syncMenuActive(val: string) {
+  menuRef.value?.updateActiveIndex(val);
+}
+
+// 仅 nextTick 一次同步；若侧栏 default-active 偶发与路由不同步，可恢复为多次 syncMenuActive（见本文件 git 历史）
+watch(
+  activeMenuPath,
+  (val) => {
+    nextTick(() => syncMenuActive(val));
+  },
+  { immediate: true, flush: "post" }
+);
+
+// 父级激活样式由 Element Plus 在子项激活时为 el-sub-menu 添加 .is-active，MenuItem 内样式已覆盖标题颜色
+</script>
diff --git a/frontend/new-web/src/layouts/old/components/Menu/MixTopMenu.vue b/frontend/new-web/src/layouts/old/components/Menu/MixTopMenu.vue
new file mode 100644
index 00000000..ecde4050
--- /dev/null
+++ b/frontend/new-web/src/layouts/old/components/Menu/MixTopMenu.vue
@@ -0,0 +1,207 @@
+<!-- 混合布局顶部菜单 -->
+<template>
+  <el-menu
+    mode="horizontal"
+    :default-active="activeTopMenuPath"
+    :background-color="
+      theme === 'dark' || sidebarColorScheme === SidebarColor.CLASSIC_BLUE
+        ? variables['menu-background']
+        : undefined
+    "
+    :text-color="
+      theme === 'dark' || sidebarColorScheme === SidebarColor.CLASSIC_BLUE
+        ? variables['menu-text']
+        : undefined
+    "
+    :active-text-color="
+      theme === 'dark' || sidebarColorScheme === SidebarColor.CLASSIC_BLUE
+        ? variables['menu-active-text']
+        : undefined
+    "
+    @select="handleTopMenuSelect"
+  >
+    <el-menu-item v-for="item in topMenuItems" :key="item.path" :index="item.path">
+      <MenuItemContent v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
+    </el-menu-item>
+  </el-menu>
+</template>
+
+<script lang="ts" setup>
+import { computed, nextTick, watch } from "vue";
+import MenuItemContent from "./components/MenuItemContent.vue";
+
+defineOptions({
+  name: "MixTopMenu",
+});
+
+import { LocationQueryRaw, RouteRecordRaw, useRouter } from "vue-router";
+import { usePermissionStore, useAppStore, useSettingsStore } from "@/store";
+import variables from "@/styles/variables.module.scss";
+import { SidebarColor } from "@/enums/settings/theme.enum";
+
+const router = useRouter();
+const appStore = useAppStore();
+const permissionStore = usePermissionStore();
+const settingsStore = useSettingsStore();
+
+/**
+ * 根据当前完整路径解析混合布局的「顶级」菜单 path。
+ * 不能仅用第一段路径（如 /app 会误匹配 /application），应按最长前缀匹配顶级路由（BUG #7）。
+ */
+function resolveMixTopMenuPath(fullPath: string): string {
+  const path = (fullPath.split("?")[0] || "").replace(/\/$/, "") || "/";
+  const tops = permissionStore.routes.filter(
+    (r) => r.path && r.path !== "/" && !(r.meta as { hidden?: boolean } | undefined)?.hidden
+  );
+  const sorted = [...tops].sort((a, b) => (b.path?.length || 0) - (a.path?.length || 0));
+  for (const r of sorted) {
+    const p = r.path || "";
+    if (!p) continue;
+    if (path === p || path.startsWith(`${p}/`)) return p;
+  }
+  const first = path.match(/^\/[^/]+/)?.[0];
+  return first || "/";
+}
+
+/** 水平菜单点击后焦点留在 el-menu-item 上，:focus 样式像「悬浮背景」；仅在 @select 后 blur 一次即可 */
+function blurTopMenuFocus() {
+  nextTick(() => {
+    requestAnimationFrame(() => {
+      const ae = document.activeElement;
+      if (ae instanceof HTMLElement && ae.closest?.(".layout__header-menu .el-menu")) {
+        ae.blur();
+      }
+    });
+  });
+}
+
+// 获取主题
+const theme = computed(() => settingsStore.theme);
+
+// 获取浅色主题下的侧边栏配色方案
+const sidebarColorScheme = computed(() => settingsStore.sidebarColorScheme);
+
+// 处理后的顶部菜单列表 - 智能显示唯一子菜单的标题
+const topMenuItems = computed(() => {
+  const topMenus = permissionStore.routes.filter((item) => !item.meta || !item.meta.hidden);
+  return topMenus.map((route) => {
+    // 如果路由设置了 alwaysShow=true，或者没有子菜单，直接返回原路由
+    if (route.meta?.alwaysShow || !route.children || route.children.length === 0) {
+      return route;
+    }
+
+    // 过滤出非隐藏的子菜单
+    const visibleChildren = route.children.filter((child) => !child.meta?.hidden);
+
+    // 如果只有一个非隐藏的子菜单，显示子菜单的信息
+    if (visibleChildren.length === 1) {
+      const onlyChild = visibleChildren[0];
+      return {
+        ...route,
+        meta: {
+          ...route.meta,
+          title: onlyChild.meta?.title || route.meta?.title,
+          icon: onlyChild.meta?.icon || route.meta?.icon,
+        },
+      };
+    }
+
+    // 其他情况返回原路由
+    return route;
+  });
+});
+
+/**
+ * 处理菜单点击事件，切换顶部菜单并加载对应的左侧菜单
+ * @param routePath 点击的菜单路径
+ */
+const handleTopMenuSelect = (routePath: string) => {
+  updateMenuState(routePath);
+  blurTopMenuFocus();
+};
+
+/**
+ * 更新菜单状态 - 同时处理点击和路由变化情况
+ * @param topMenuPath 顶级菜单路径
+ * @param skipNavigation 是否跳过导航（路由变化时为true，点击菜单时为false）
+ */
+const updateMenuState = (topMenuPath: string, skipNavigation = false) => {
+  let hasStateChanged = false;
+
+  // 确保路径有效才更新
+  if (topMenuPath) {
+    // 顶部激活路径
+    if (appStore.activeTopMenuPath !== topMenuPath) {
+      appStore.activeTopMenu(topMenuPath);
+      hasStateChanged = true;
+    }
+
+    // 混合布局左侧菜单跟随顶部菜单
+    permissionStore.setMixLayoutSideMenus(topMenuPath);
+  }
+
+  // 仅在点击顶部菜单且状态发生变化时，才跳转到左侧第一个菜单
+  if (!skipNavigation && hasStateChanged) {
+    navigateToFirstLeftMenu(permissionStore.mixLayoutSideMenus); // 跳转到左侧第一个菜单
+  }
+};
+
+/**
+ * 跳转到左侧第一个可访问的菜单
+ * @param menus 左侧菜单列表
+ */
+const navigateToFirstLeftMenu = (menus: RouteRecordRaw[]) => {
+  if (menus.length === 0) return;
+
+  const [firstMenu] = menus;
+
+  // 如果第一个菜单有子菜单，递归跳转到第一个子菜单
+  if (firstMenu.children && firstMenu.children.length > 0) {
+    navigateToFirstLeftMenu(firstMenu.children as RouteRecordRaw[]);
+  } else if (firstMenu.name) {
+    router.push({
+      name: firstMenu.name,
+      query:
+        typeof firstMenu.meta?.params === "object"
+          ? (firstMenu.meta.params as LocationQueryRaw)
+          : undefined,
+    });
+  }
+};
+
+// 获取当前路由路径的顶部菜单路径
+const activeTopMenuPath = computed(() => appStore.activeTopMenuPath);
+
+// 监听路由变化，同步更新顶部菜单和左侧菜单的激活状态
+watch(
+  () => router.currentRoute.value.path,
+  (newPath) => {
+    if (newPath) {
+      updateMenuState(resolveMixTopMenuPath(newPath), true);
+    }
+  },
+  { immediate: true }
+);
+</script>
+
+<style lang="scss" scoped>
+.el-menu {
+  width: 100%;
+  height: 100%;
+
+  &--horizontal {
+    height: $navbar-height !important;
+
+    // 确保菜单项垂直居中
+    :deep(.el-menu-item) {
+      height: 100%;
+      line-height: $navbar-height;
+    }
+
+    // 移除默认的底部边框
+    &::after {
+      display: none;
+    }
+  }
+}
+</style>
diff --git a/frontend/new-web/src/layouts/old/components/Menu/components/MenuItem.vue b/frontend/new-web/src/layouts/old/components/Menu/components/MenuItem.vue
new file mode 100644
index 00000000..cb427cf4
--- /dev/null
+++ b/frontend/new-web/src/layouts/old/components/Menu/components/MenuItem.vue
@@ -0,0 +1,268 @@
+<template>
+  <div v-if="!item.meta || !item.meta.hidden">
+    <!--【叶子节点】显示叶子节点或唯一子节点且父节点未配置始终显示 -->
+    <template
+      v-if="
+        // 未配置始终显示，使用唯一子节点替换父节点显示为叶子节点
+        (hasOneShowingChild(item.children, item) &&
+          !item.meta?.alwaysShow &&
+          (!onlyOneChild.children || onlyOneChild.noShowingChildren)) ||
+        // 即使配置了始终显示，但无子节点，也显示为叶子节点
+        (item.meta?.alwaysShow && !item.children)
+      "
+    >
+      <AppLink
+        v-if="onlyOneChild.meta"
+        :to="
+          onlyOneChild.name
+            ? { name: onlyOneChild.name, query: onlyOneChild.meta.params }
+            : { path: resolvePath(onlyOneChild.path || ''), query: onlyOneChild.meta.params }
+        "
+      >
+        <el-menu-item
+          :index="menuItemIndex(onlyOneChild, resolvePath(onlyOneChild.path || ''))"
+          :class="{ 'submenu-title-noDropdown': !isNest }"
+        >
+          <MenuItemContent
+            v-if="onlyOneChild.meta"
+            :icon="onlyOneChild.meta.icon || item.meta?.icon"
+            :title="onlyOneChild.meta.title"
+          />
+        </el-menu-item>
+      </AppLink>
+    </template>
+
+    <!--【非叶子节点】显示含多个子节点的父菜单，或始终显示的单子节点 -->
+    <el-sub-menu
+      v-else
+      :index="menuItemIndex(item, resolvePath(item.path || ''))"
+      :data-path="resolvePath(item.path || '')"
+    >
+      <template #title>
+        <span class="menu-title-wrapper" :data-path="resolvePath(item.path || '')">
+          <MenuItemContent v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
+        </span>
+      </template>
+
+      <MenuItem
+        v-for="child in item.children"
+        :key="String(child.name ?? child.path)"
+        :is-nest="true"
+        :item="child"
+        :base-path="resolvePath(item.path || '')"
+      />
+    </el-sub-menu>
+  </div>
+</template>
+
+<script setup lang="ts">
+import MenuItemContent from "./MenuItemContent.vue";
+
+defineOptions({
+  name: "MenuItem",
+  inheritAttrs: false,
+});
+
+import path from "path-browserify";
+import { RouteRecordRaw } from "vue-router";
+import { useRouter } from "vue-router";
+
+import { isExternal } from "@/utils";
+import { PropType, ref } from "vue";
+
+const router = useRouter();
+
+const props = defineProps({
+  /**
+   * 当前路由对象
+   */
+  item: {
+    type: Object as PropType<RouteRecordRaw>,
+    required: true,
+  },
+
+  /**
+   * 父级完整路径
+   */
+  basePath: {
+    type: String,
+    required: true,
+  },
+
+  /**
+   * 是否为嵌套路由
+   */
+  isNest: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+// 可见的唯一子节点
+const onlyOneChild = ref();
+
+/**
+ * 检查是否仅有一个可见子节点
+ *
+ * @param children 子路由数组
+ * @param parent 父级路由
+ * @returns 是否仅有一个可见子节点
+ */
+function hasOneShowingChild(children: RouteRecordRaw[] = [], parent: RouteRecordRaw) {
+  // 过滤出可见子节点
+  const showingChildren = children.filter((route: RouteRecordRaw) => {
+    if (!route.meta?.hidden) {
+      onlyOneChild.value = route;
+      return true;
+    }
+    return false;
+  });
+
+  // 仅有一个节点
+  if (showingChildren.length === 1) {
+    return true;
+  }
+
+  // 无子节点时
+  if (showingChildren.length === 0) {
+    // 父节点设置为唯一显示节点，并标记为无子节点
+    onlyOneChild.value = { ...parent, path: "", noShowingChildren: true };
+    return true;
+  }
+  return false;
+}
+
+/**
+ * 获取完整路径，适配外部链接
+ *
+ * @param routePath 路由路径
+ * @returns 绝对路径
+ */
+function resolvePath(routePath: string) {
+  if (isExternal(routePath)) return routePath;
+  if (isExternal(props.basePath)) return props.basePath;
+
+  const base = props.basePath && props.basePath !== "" ? props.basePath : "/";
+  return path.resolve(base, routePath);
+}
+
+/** 与 BasicMenu.default-active（route.path）对齐 */
+function normalizeMenuPath(p: string): string {
+  if (!p) return "";
+  if (/^https?:\/\//i.test(p) || p.startsWith("//")) return p;
+  const s = p.trim();
+  if (s === "/") return "/";
+  return s.replace(/\/+$/, "") || "/";
+}
+
+function hasVisibleChildren(node: RouteRecordRaw): boolean {
+  return !!node.children?.some((c) => !c.meta?.hidden);
+}
+
+/**
+ * el-menu 的 index 必须与 default-active 字符串完全一致。
+ * - 目录（有可见子节点）：只用菜单树 path.resolve 结果，禁止 router.resolve(name)（常变成父级 /task，导致兄弟目录误亮）。
+ * - 叶子：用 router.resolve(name).path，与当前页 route.path 同源，避免纯拼路径与路由表不一致。
+ */
+function menuItemIndex(item: RouteRecordRaw, resolvedFromTree: string): string {
+  const treePath = normalizeMenuPath(resolvedFromTree);
+
+  if (hasVisibleChildren(item)) {
+    if (treePath) return treePath;
+    if (item.name != null && item.name !== "") return String(item.name);
+    return "";
+  }
+
+  if (item.name) {
+    try {
+      return normalizeMenuPath(router.resolve({ name: item.name as string }).path);
+    } catch {
+      /* fallthrough */
+    }
+  }
+  return treePath;
+}
+</script>
+
+<style lang="scss">
+.hideSidebar {
+  .submenu-title-noDropdown {
+    position: relative;
+
+    & > span {
+      display: inline-block;
+      visibility: hidden;
+      width: 0;
+      height: 0;
+      overflow: hidden;
+    }
+  }
+
+  .el-sub-menu {
+    overflow: hidden;
+
+    & > .el-sub-menu__title {
+      .sub-el-icon {
+        margin-left: 19px;
+      }
+
+      .el-sub-menu__icon-arrow {
+        display: none;
+      }
+    }
+  }
+
+  .el-menu--collapse {
+    width: $sidebar-width-collapsed;
+
+    .el-sub-menu {
+      & > .el-sub-menu__title > span {
+        display: inline-block;
+        visibility: hidden;
+        width: 0;
+        height: 0;
+        overflow: hidden;
+      }
+    }
+  }
+}
+
+// 父菜单激活状态样式 - 当子菜单激活时，父菜单显示激活状态
+.el-sub-menu {
+  .menu-title-wrapper {
+    display: inline-flex;
+    align-items: center;
+    height: 100%;
+    line-height: 1;
+  }
+
+  // 子项激活时 Element Plus 会给父级 el-sub-menu 加 .is-active
+  &.is-active > .el-sub-menu__title {
+    color: var(--el-color-primary) !important;
+
+    .menu-icon {
+      color: var(--el-color-primary) !important;
+    }
+  }
+
+  html.dark & {
+    &.is-active > .el-sub-menu__title {
+      color: var(--el-color-primary-light-3) !important;
+
+      .menu-icon {
+        color: var(--el-color-primary-light-3) !important;
+      }
+    }
+  }
+
+  html.sidebar-color-blue & {
+    &.is-active > .el-sub-menu__title {
+      color: var(--el-color-primary-light-3) !important;
+
+      .menu-icon {
+        color: var(--el-color-primary-light-3) !important;
+      }
+    }
+  }
+}
+</style>
diff --git a/frontend/new-web/src/layouts/old/components/Menu/components/MenuItemContent.vue b/frontend/new-web/src/layouts/old/components/Menu/components/MenuItemContent.vue
new file mode 100644
index 00000000..5231a246
--- /dev/null
+++ b/frontend/new-web/src/layouts/old/components/Menu/components/MenuItemContent.vue
@@ -0,0 +1,69 @@
+<template>
+  <!-- 菜单图标 -->
+  <template v-if="icon">
+    <el-icon v-if="isElIcon" class="menu-icon">
+      <component :is="iconComponent" />
+    </el-icon>
+    <img
+      v-else-if="localSvgAssetUrl"
+      :src="localSvgAssetUrl"
+      alt=""
+      class="menu-icon menu-icon--asset"
+      draggable="false"
+    />
+    <div v-else :class="`i-svg:${icon}`" class="menu-icon" />
+  </template>
+  <template v-else>
+    <img
+      v-if="defaultMenuSvgUrl"
+      :src="defaultMenuSvgUrl"
+      alt=""
+      class="menu-icon menu-icon--asset"
+      draggable="false"
+    />
+    <div v-else class="i-svg:menu menu-icon" />
+  </template>
+  <!-- 菜单标题 -->
+  <span v-if="title" class="menu-title ml-1">{{ translateRouteTitle(title) }}</span>
+</template>
+
+<script setup lang="ts">
+import { translateRouteTitle } from "@/utils/i18n";
+import { computed } from "vue";
+import { resolveMenuLocalSvgUrl } from "@/utils/menuLocalSvg";
+
+const props = defineProps<{
+  icon?: string;
+  title?: string;
+}>();
+
+const isElIcon = computed(() => props.icon?.startsWith("el-icon"));
+const iconComponent = computed(() => props.icon?.replace("el-icon-", ""));
+
+/** 动态 `i-svg:*` 可能未被 Tailwind 打出样式，优先用 assets 直链 */
+const localSvgAssetUrl = computed(() => {
+  const ic = props.icon?.trim();
+  if (!ic || ic.startsWith("el-icon") || ic.includes(":")) return undefined;
+  return resolveMenuLocalSvgUrl(ic);
+});
+
+const defaultMenuSvgUrl = computed(() => resolveMenuLocalSvgUrl("menu"));
+</script>
+
+<style lang="scss" scoped>
+.menu-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  margin-right: 5px;
+  font-size: 18px;
+  color: currentcolor;
+}
+
+.menu-icon--asset {
+  object-fit: contain;
+}
+</style>
diff --git a/frontend/new-web/src/layouts/old/components/NavBar/components/LockDialog.vue b/frontend/new-web/src/layouts/old/components/NavBar/components/LockDialog.vue
new file mode 100644
index 00000000..2100388b
--- /dev/null
+++ b/frontend/new-web/src/layouts/old/components/NavBar/components/LockDialog.vue
@@ -0,0 +1,112 @@
+<template>
+  <EnhancedDialog
+    v-model="dialogVisible"
+    width="500px"
+    max-height="170px"
+    :title="dialogTitle"
+    class="v-lock-dialog"
+  >
+    <div class="lock-dialog-content">
+      <!-- 头像 -->
+      <img :src="userStore.basicInfo.avatar" alt="" class="lock-dialog-avatar" />
+      <!-- 用户名 -->
+      <!-- <span class="lock-dialog-name">{{ t('navbar.lock') }}</span> -->
+      <span class="lock-dialog-name">{{ userStore.basicInfo.name }}</span>
+    </div>
+    <el-form ref="lockFormRef" :model="form" :rules="rules">
+      <el-form-item :label="t('lockScreen.lockPassword')" prop="password">
+        <el-input
+          v-model="form.password"
+          type="password"
+          show-password
+          clearable
+          :placeholder="t('lock.placeholder')"
+          @keydown.enter="handleLock"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button type="primary" @click="handleLock">{{ t("navbar.lock") }}</el-button>
+    </template>
+  </EnhancedDialog>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed } from "vue";
+import { useLockStore } from "@/store";
+import { useI18n } from "vue-i18n";
+import type { FormInstance, FormRules } from "element-plus";
+
+import { useUserStore } from "@/store/modules/user.store";
+const userStore = useUserStore();
+
+const { t } = useI18n();
+const lockStore = useLockStore();
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const dialogVisible = computed({
+  get: () => props.modelValue,
+  set: (val) => {
+    emit("update:modelValue", val);
+  },
+});
+
+const dialogTitle = ref(t("lock.lockScreen"));
+const lockFormRef = ref<FormInstance>();
+const form = reactive({
+  password: "",
+});
+
+const rules: FormRules = {
+  password: [{ required: true, message: t("lock.required"), trigger: "blur" }],
+};
+
+// 优化后的锁定逻辑
+const handleLock = async () => {
+  try {
+    await lockFormRef.value?.validate();
+    dialogVisible.value = false;
+    lockStore.setLockInfo({
+      isLock: true,
+      password: form.password,
+    });
+  } catch {
+    // 验证失败时不执行任何操作
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.v-lock-dialog {
+  @media (width <=767px) {
+    max-width: calc(100vw - 16px);
+  }
+
+  .lock-dialog {
+    &-content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    &-avatar {
+      width: 70px;
+      height: 70px;
+      border-radius: 50%;
+    }
+
+    &-name {
+      margin: 10px 0;
+      font-size: 14px;
+      color: var(--top-header-text-color);
+    }
+  }
+}
+</style>
diff --git a/frontend/new-web/src/layouts/old/components/NavBar/components/LockPage.vue b/frontend/new-web/src/layouts/old/components/NavBar/components/LockPage.vue
new file mode 100644
index 00000000..19bc7764
--- /dev/null
+++ b/frontend/new-web/src/layouts/old/components/NavBar/components/LockPage.vue
@@ -0,0 +1,321 @@
+<template>
+  <div class="lockpage">
+    <div v-show="showDate" class="unlock-container" @click="handleShowForm(false)">
+      <el-icon><Lock /></el-icon>
+      <span>{{ t("lock.unlock") }}</span>
+    </div>
+
+    <div class="time-container w-screen h-screen">
+      <div class="hour-container mr-5 md:mr-20 w-2/5 h-2/5 md:h-4/5">
+        <span>{{ hour }}</span>
+        <span v-show="showDate" class="meridiem absolute left-5 top-5 text-md xl:text-xl">
+          {{ meridiem }}
+        </span>
+      </div>
+      <div class="minute-container w-2/5 h-2/5 md:h-4/5">
+        <span>{{ minute }}</span>
+      </div>
+    </div>
+
+    <transition name="fade-slide">
+      <div v-show="!showDate" class="entry-wrapper">
+        <div class="entry-content">
+          <div class="avatar-container">
+            <img :src="userStore.basicInfo.avatar" alt="" class="avatar" />
+            <span class="username">{{ userStore.basicInfo.name }}</span>
+          </div>
+          <ElInput
+            ref="passwordInputRef"
+            v-model="password"
+            :placeholder="t('lock.placeholder')"
+            class="password-input"
+            show-password
+            clearable
+            @keydown.enter="unLock"
+          />
+          <span v-if="errMsg" class="error-message">
+            {{ t("lock.message") }}
+          </span>
+          <div class="button-group">
+            <el-button
+              type="primary"
+              size="small"
+              class="back-button"
+              link
+              :disabled="loading"
+              @click="handleShowForm(true)"
+            >
+              {{ t("common.back") }}
+            </el-button>
+            <el-button
+              type="primary"
+              size="small"
+              class="login-button"
+              link
+              :disabled="loading"
+              @click="goLogin"
+            >
+              {{ t("lock.backToLogin") }}
+            </el-button>
+            <el-button
+              type="primary"
+              class="entry-button"
+              size="small"
+              link
+              :disabled="loading"
+              @click="unLock()"
+            >
+              {{ t("lock.entrySystem") }}
+            </el-button>
+          </div>
+        </div>
+      </div>
+    </transition>
+
+    <div class="date-container">
+      <div v-show="!showDate" class="time-display">
+        {{ hour }}:{{ minute }}
+        <span class="meridiem-display">{{ meridiem }}</span>
+      </div>
+      <div class="full-date">{{ year }}/{{ month }}/{{ day }} {{ week }}</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useUserStore, useLockStore } from "@/store";
+import { ElInput } from "element-plus";
+import { useNow } from "@/utils/common/dateUtil";
+import { useI18n } from "vue-i18n";
+
+const route = useRoute();
+const router = useRouter();
+const userStore = useUserStore();
+
+const password = ref("");
+const loading = ref(false);
+const errMsg = ref(false);
+const showDate = ref(true);
+
+const lockStore = useLockStore();
+
+const { hour, month, minute, meridiem, year, day, week } = useNow(true);
+
+const { t } = useI18n();
+
+// 解锁
+async function unLock() {
+  if (!password.value) {
+    return;
+  }
+  const pwd = password.value;
+  try {
+    loading.value = true;
+    const res = await lockStore.unLock(pwd);
+    errMsg.value = !res;
+  } finally {
+    loading.value = false;
+  }
+}
+
+// 返回登录（logout 内统一 reset；navigate:false 后由本页 replace，并保留锁屏 store 清理）
+async function goLogin() {
+  await userStore.logout({ navigate: false }).catch(() => {});
+  lockStore.resetLockInfo();
+  await router.replace(`/login?redirect=${encodeURIComponent(route.fullPath)}`);
+}
+
+const passwordInputRef = ref<InstanceType<typeof ElInput>>();
+
+function handleShowForm(show = false) {
+  showDate.value = show;
+  if (!show) {
+    requestAnimationFrame(() => {
+      passwordInputRef.value?.focus();
+    });
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.lockpage {
+  position: fixed;
+  inset: 0;
+  top: 0;
+  left: 0;
+  z-index: 3000;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: var(--el-color-white);
+  background-color: rgb(0 0 0 / 90%);
+  backdrop-filter: blur(8px);
+
+  .unlock-container {
+    position: absolute;
+    top: 0.5rem;
+    left: 50%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 4rem;
+    padding: 0.5rem 1rem;
+    padding-top: 1.25rem;
+    color: inherit;
+    cursor: pointer;
+    border-radius: 12px;
+    transform: translateX(-50%);
+
+    @media (width >= 640px) {
+      font-size: 0.875rem;
+    }
+
+    @media (width >= 1280px) {
+      font-size: 1.25rem;
+    }
+  }
+
+  .time-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .hour-container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 1rem;
+      margin-bottom: 2rem;
+      font-size: 220px;
+      font-weight: 700;
+      color: var(--el-text-color-primary);
+      background-color: var(--el-bg-color-overlay);
+      border-radius: 16px;
+      backdrop-filter: blur(8px);
+    }
+
+    .minute-container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 1rem;
+      margin-bottom: 2rem;
+      font-size: 220px;
+      font-weight: 700;
+      color: var(--el-text-color-primary);
+      background-color: var(--el-bg-color-overlay);
+      border-radius: 16px;
+      backdrop-filter: blur(8px);
+    }
+  }
+
+  .meridiem {
+    position: absolute;
+    top: 1.25rem;
+    left: 1.25rem;
+    font-size: 1.25rem;
+  }
+
+  .entry-wrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    background-color: rgb(0 0 0 / 50%);
+    backdrop-filter: blur(8px);
+  }
+
+  .entry-content {
+    width: 260px;
+    color: var(--el-text-color-regular);
+    text-align: center;
+  }
+
+  .avatar-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .avatar {
+    width: 70px;
+    height: 70px;
+    border-radius: 50%;
+  }
+
+  .username {
+    margin: 0.625rem 0;
+    font-size: 0.875rem;
+    color: var(--el-text-color-primary);
+  }
+
+  .password-input {
+    margin-top: 1rem;
+  }
+
+  .error-message {
+    display: inline-block;
+    margin-top: 0.625rem;
+    font-size: 0.875rem;
+    color: var(--el-color-danger);
+  }
+
+  .button-group {
+    display: flex;
+    align-items: center;
+    justify-content: space-between; // 左右对齐
+    margin-top: 0.5rem;
+
+    .back-button,
+    .login-button,
+    .entry-button {
+      min-width: auto;
+      padding: 0;
+    }
+
+    .login-button {
+      flex: 1;
+      text-align: center;
+    }
+  }
+
+  .date-container {
+    position: absolute;
+    bottom: 1.25rem;
+    width: 100%;
+    color: inherit;
+    text-align: center;
+
+    @media (width >= 1280px) {
+      font-size: 1.25rem;
+    }
+
+    @media (width >= 1536px) {
+      font-size: 1.875rem;
+    }
+  }
+
+  .time-display {
+    margin-bottom: 1rem;
+    font-size: 3rem;
+
+    .meridiem-display {
+      font-size: 1.875rem;
+    }
+  }
+
+  .full-date {
+    font-size: 1.5rem;
+  }
+}
+</style>
diff --git a/frontend/new-web/src/layouts/old/components/NavBar/components/NavbarActions.vue b/frontend/new-web/src/layouts/old/components/NavBar/components/NavbarActions.vue
new file mode 100644
index 00000000..11351782
--- /dev/null
+++ b/frontend/new-web/src/layouts/old/components/NavBar/components/NavbarActions.vue
@@ -0,0 +1,477 @@
+<template>
+  <div ref="navbar-actions" :class="['navbar-actions', navbarActionsClass]">
+    <!-- 桌面端工具项 -->
+    <template v-if="isDesktop">
+      <!-- 搜索 -->
+      <div v-if="settingStore.showMenuSearch" class="navbar-actions__item">
+        <MenuSearch />
+      </div>
+
+      <!-- 全屏 -->
+      <div v-if="settingStore.showFullscreen" class="navbar-actions__item">
+        <Fullscreen />
+      </div>
+
+      <!-- 布局大小 -->
+      <div v-if="settingStore.showSizeSelect" class="navbar-actions__item">
+        <SizeSelect />
+      </div>
+
+      <!-- 语言选择 -->
+      <div v-if="settingStore.showLangSelect" class="navbar-actions__item">
+        <LangSelect />
+      </div>
+
+      <!-- 通知 -->
+      <div v-if="settingStore.showNotification" class="navbar-actions__item">
+        <Notification />
+      </div>
+
+      <!-- 系统设置按钮 -->
+      <div
+        v-if="settingStore.showSettings"
+        class="navbar-actions__item"
+        @click="handleSettingsClick"
+      >
+        <div class="i-svg:setting" />
+      </div>
+    </template>
+
+    <!-- 用户菜单,不管桌面还是移动端都显示 -->
+    <div class="navbar-actions__item">
+      <el-dropdown trigger="click">
+        <div class="user-profile">
+          <div class="user-profile__avatar-wrapper">
+            <template v-if="userStore.basicInfo.avatar">
+              <el-avatar :size="30" :src="userStore.basicInfo.avatar" />
+            </template>
+            <template v-else>
+              <el-avatar :size="30" icon="UserFilled" />
+            </template>
+            <span class="user-profile__online-indicator"></span>
+          </div>
+          <span class="user-profile__name">{{ userStore.basicInfo.name }}</span>
+        </div>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item @click="handleProfileClick">
+              <el-icon><User /></el-icon>
+              {{ t("navbar.profile") }}
+            </el-dropdown-item>
+            <el-dropdown-item @click="handleConfigClick">
+              <el-icon><Setting /></el-icon>
+              {{ t("navbar.config") }}
+            </el-dropdown-item>
+            <el-dropdown-item @click="handleDocumentClick">
+              <el-icon><Document /></el-icon>
+              {{ t("navbar.document") }}
+            </el-dropdown-item>
+            <el-dropdown-item @click="handleGiteeClick">
+              <el-icon><Reading /></el-icon>
+              {{ t("navbar.gitee") }}
+            </el-dropdown-item>
+            <el-dropdown-item @click="handleTourClick">
+              <el-icon><Position /></el-icon>
+              {{ t("navbar.tour") }}
+            </el-dropdown-item>
+            <el-dropdown-item divided @click="handlelockScreen">
+              <el-icon><Lock /></el-icon>
+              {{ t("navbar.lock") }}
+            </el-dropdown-item>
+            <el-dropdown-item @click="handleLogout">
+              <el-icon><SwitchButton /></el-icon>
+              {{ t("navbar.logout") }}
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </div>
+  </div>
+
+  <!-- 引导 -->
+  <Guide v-if="guideVisible" v-model="guideVisible" @skip="handleGuideExit" />
+
+  <!-- 锁屏弹窗 -->
+  <LockDialog v-if="dialogVisible" v-model="dialogVisible" />
+  <teleport to="body">
+    <transition name="fade-bottom" mode="out-in">
+      <LockPage v-if="getIsLock" />
+    </transition>
+  </teleport>
+
+  <!-- 配置中心抽屉 -->
+  <ConfigInfoDrawer v-model="drawerVisible" />
+</template>
+
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+import { useRouter } from "vue-router";
+
+import { DeviceEnum } from "@/enums/settings/device.enum";
+import { useAppStore, useSettingsStore, useUserStore, useLockStore } from "@/store";
+import { SidebarColor, ThemeMode } from "@/enums/settings/theme.enum";
+import { LayoutMode } from "@/enums";
+
+// 导入子组件
+import MenuSearch from "@/components/MenuSearch/index.vue";
+import Fullscreen from "@/components/Fullscreen/index.vue";
+import SizeSelect from "@/components/SizeSelect/index.vue";
+import LangSelect from "@/components/LangSelect/index.vue";
+import Notification from "@/components/Notification/index.vue";
+import LockDialog from "./LockDialog.vue";
+import LockPage from "./LockPage.vue";
+import Guide from "@/components/Guide/index.vue";
+import ConfigInfoDrawer from "@/views/module_system/param/components/ConfigInfoDrawer.vue";
+import { computed, ref, watch } from "vue";
+import { ElMessageBox } from "element-plus";
+import {
+  Document,
+  Lock,
+  Position,
+  Reading,
+  Setting,
+  SwitchButton,
+  User,
+} from "@element-plus/icons-vue";
+
+const { t } = useI18n();
+const appStore = useAppStore();
+const settingStore = useSettingsStore();
+const userStore = useUserStore();
+
+const router = useRouter();
+
+// 是否为桌面设备
+const isDesktop = computed(() => appStore.device === DeviceEnum.DESKTOP);
+
+/**
+ * 打开个人中心页面
+ */
+function handleProfileClick() {
+  router.push({ name: "Profile" });
+}
+
+const drawerVisible = ref(false);
+/**
+ * 打开配置中心页面
+ */
+function handleConfigClick() {
+  drawerVisible.value = true;
+}
+
+/**
+ * 项目文档
+ */
+function handleDocumentClick() {
+  window.open("https://service.fastapiadmin.com", "_blank");
+}
+
+/**
+ * 打开系统设置页面
+ */
+function handleSettingsClick() {
+  settingStore.settingsVisible = true;
+}
+
+/**
+ * Gitee 项目地址
+ */
+function handleGiteeClick() {
+  window.open("https://gitee.com/fastapiadmin/FastapiAdmin");
+}
+
+/**
+ * 项目引导
+ */
+// 使用ref而不是computed，以便可以修改引导可见性
+// 使用 computed 实现双向绑定，减少 watch 的使用
+const guideVisible = computed({
+  get: () => appStore.guideVisible,
+  set: (newValue) => appStore.showGuide(newValue),
+});
+
+function handleTourClick() {
+  // 如果是移动端，直接跳转到引导页面
+  if (appStore.device === DeviceEnum.MOBILE) {
+    router.push({ name: "Guide" });
+  } else {
+    guideVisible.value = true;
+  }
+}
+
+// 引导结束（点击跳过或最后一步完成关闭）后，自动关闭下次登录的自动展示
+function handleGuideExit() {
+  // 关闭自动展示开关，确保下次登录不再自动开启
+  settingStore.updateSetting("showGuide", false);
+}
+
+// 监听引导关闭（从 true -> false），也同步关闭自动展示开关
+watch(
+  () => guideVisible.value,
+  (val, oldVal) => {
+    if (oldVal && !val) {
+      settingStore.updateSetting("showGuide", false);
+    }
+  }
+);
+
+/**
+ * 锁屏
+ */
+const lockStore = useLockStore();
+const getIsLock = computed(() => lockStore.isLock ?? false);
+const dialogVisible = ref<boolean>(false);
+// 锁定屏幕
+const handlelockScreen = () => {
+  dialogVisible.value = true;
+};
+
+// 根据主题和侧边栏配色方案选择样式类
+const navbarActionsClass = computed(() => {
+  const { theme, sidebarColorScheme, layout } = settingStore;
+
+  // 暗黑主题下，所有布局都使用白色文字
+  if (theme === ThemeMode.DARK) {
+    return "navbar-actions--white-text";
+  }
+
+  // 明亮主题下
+  if (theme === ThemeMode.LIGHT) {
+    // 顶部布局和混合布局的顶部区域：
+    // - 如果侧边栏是经典蓝色，使用白色文字
+    // - 如果侧边栏是极简白色，使用深色文字
+    if (layout === LayoutMode.TOP || layout === LayoutMode.MIX) {
+      if (sidebarColorScheme === SidebarColor.CLASSIC_BLUE) {
+        return "navbar-actions--white-text";
+      } else {
+        return "navbar-actions--dark-text";
+      }
+    }
+  }
+
+  return "navbar-actions--dark-text";
+});
+
+/**
+ * 退出登录（确认后调用 store.logout）
+ */
+function handleLogout() {
+  ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+    lockScroll: false,
+  })
+    .then(() => {
+      userStore.logout();
+    })
+    .catch(() => {
+      ElMessageBox.close();
+    });
+}
+</script>
+
+<style lang="scss" scoped>
+.navbar-actions {
+  display: flex;
+  align-items: center;
+  height: 100%;
+
+  &__item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 44px; /* 增加最小点击区域到44px，符合人机交互标准 */
+    height: 44px;
+    padding: 0 8px;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.3s;
+
+    // 确保子元素居中
+    > * {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    // 确保 Element Plus 组件可以正常工作
+    :deep(.el-dropdown),
+    :deep(.el-tooltip) {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+    }
+
+    :deep(.i-svg\:language) {
+      flex-shrink: 0;
+      width: 18px;
+      height: 18px;
+      font-size: 18px;
+      line-height: 18px;
+      background-size: 18px 18px;
+    }
+
+    // 图标样式
+    :deep([class^="i-svg:"]) {
+      font-size: 18px;
+      line-height: 1;
+      color: var(--el-text-color-regular);
+      transition: color 0.3s;
+    }
+
+    // Element Plus 图标（如 el-icon）样式
+    :deep(.el-icon) {
+      color: var(--el-text-color-regular);
+      transition: color 0.3s;
+    }
+
+    &:hover {
+      background: transparent;
+
+      :deep([class^="i-svg:"]) {
+        color: var(--el-color-primary);
+      }
+
+      :deep(.el-icon) {
+        color: var(--el-color-primary);
+      }
+
+      // 搜索触发器：确保 hover 时是图标变色，而不是只出现边框变化
+      :deep(.command-palette-trigger) {
+        border-color: var(--el-border-color-lighter) !important;
+      }
+
+      :deep(.command-palette-trigger__left [class^="i-svg:"]) {
+        color: var(--el-color-primary) !important;
+      }
+    }
+  }
+
+  .user-profile {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 44px;
+    padding: 0 8px;
+
+    &__avatar-wrapper {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      // 给实际渲染的 el-avatar 增加边框
+      :deep(.el-avatar) {
+        border: 1px solid var(--el-color-primary);
+      }
+    }
+
+    &__avatar {
+      flex-shrink: 0;
+      width: 28px;
+      height: 28px;
+      border: 1px solid var(--el-color-success);
+      border-radius: 50%;
+    }
+
+    &__online-indicator {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: 8px;
+      height: 8px;
+      background-color: var(--el-color-success);
+      border-radius: 50%;
+      box-shadow: 0 0 2px rgb(0 0 0 / 20%);
+    }
+
+    &__name {
+      margin-left: 8px;
+      color: var(--el-text-color-regular);
+      white-space: nowrap;
+      transition: color 0.3s;
+    }
+  }
+}
+
+// 白色文字样式（用于深色背景：暗黑主题、顶部布局、混合布局）
+.navbar-actions--white-text {
+  .navbar-actions__item {
+    :deep([class^="i-svg:"]) {
+      color: color-mix(in srgb, var(--el-color-white) 85%, transparent);
+    }
+
+    :deep(.el-icon) {
+      color: color-mix(in srgb, var(--el-color-white) 85%, transparent);
+    }
+
+    &:hover {
+      background: transparent;
+
+      :deep([class^="i-svg:"]) {
+        color: var(--el-color-primary);
+      }
+
+      :deep(.el-icon) {
+        color: var(--el-color-primary);
+      }
+
+      :deep(.command-palette-trigger) {
+        border-color: color-mix(in srgb, var(--el-color-white) 35%, transparent) !important;
+      }
+
+      :deep(.command-palette-trigger__left [class^="i-svg:"]) {
+        color: var(--el-color-primary) !important;
+      }
+    }
+  }
+
+  .user-profile__name {
+    color: color-mix(in srgb, var(--el-color-white) 85%, transparent);
+  }
+}
+
+// 深色文字样式（用于浅色背景：明亮主题下的左侧布局）
+.navbar-actions--dark-text {
+  .navbar-actions__item {
+    :deep([class^="i-svg:"]) {
+      color: var(--el-text-color-regular) !important;
+    }
+
+    &:hover {
+      background: transparent;
+
+      :deep([class^="i-svg:"]) {
+        color: var(--el-color-primary) !important;
+      }
+
+      :deep(.command-palette-trigger) {
+        border-color: var(--el-border-color-lighter) !important;
+      }
+
+      :deep(.command-palette-trigger__left [class^="i-svg:"]) {
+        color: var(--el-color-primary) !important;
+      }
+    }
+  }
+
+  .user-profile__name {
+    color: var(--el-text-color-regular) !important;
+  }
+}
+
+// 确保下拉菜单中的图标不受影响
+:deep(.el-dropdown-menu) {
+  [class^="i-svg:"] {
+    color: var(--el-text-color-regular) !important;
+
+    &:hover {
+      color: var(--el-color-primary) !important;
+    }
+  }
+}
+</style>
diff --git a/frontend/new-web/src/layouts/old/components/NavBar/index.vue b/frontend/new-web/src/layouts/old/components/NavBar/index.vue
new file mode 100644
index 00000000..40ad050b
--- /dev/null
+++ b/frontend/new-web/src/layouts/old/components/NavBar/index.vue
@@ -0,0 +1,47 @@
+<template>
+  <div ref="navbar" class="navbar">
+    <div class="flex-y-center">
+      <!-- 菜单折叠按钮 -->
+      <Hamburger :is-active="isSidebarOpened" @toggle-click="toggleSideBar" />
+      <!-- 面包屑导航 -->
+      <Breadcrumb />
+    </div>
+    <!-- 导航栏操作区域 -->
+    <div class="navbar__actions">
+      <NavbarActions />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useAppStore } from "@/store";
+import Hamburger from "@/components/Hamburger/index.vue";
+import Breadcrumb from "@/components/Breadcrumb/index.vue";
+import NavbarActions from "./components/NavbarActions.vue";
+import { computed } from "vue";
+
+const appStore = useAppStore();
+
+// 侧边栏展开状态
+const isSidebarOpened = computed(() => appStore.sidebar.opened);
+
+// 切换侧边栏展开/折叠状态
+function toggleSideBar() {
+  appStore.toggleSidebar();
+}
+</script>
+
+<style lang="scss" scoped>
+.navbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: $navbar-height;
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    height: 100%;
+  }
+}
+</style>
diff --git a/frontend/new-web/src/layouts/old/components/Settings/index.vue b/frontend/new-web/src/layouts/old/components/Settings/index.vue
new file mode 100644
index 00000000..699454ae
--- /dev/null
+++ b/frontend/new-web/src/layouts/old/components/Settings/index.vue
@@ -0,0 +1,822 @@
+<template>
+  <el-drawer
+    v-model="drawerVisible"
+    :size="drawerSize"
+    :title="t('settings.project')"
+    :before-close="handleCloseDrawer"
+    class="settings-drawer"
+  >
+    <div class="settings-content">
+      <!-- 主题设置 -->
+      <section class="config-section">
+        <el-divider>{{ t("settings.themeSetting") }}</el-divider>
+
+        <div class="flex-center">
+          <el-switch
+            v-model="isDark"
+            active-action-icon="Moon"
+            inactive-action-icon="Sunny"
+            @change="handleThemeChange"
+          />
+        </div>
+      </section>
+
+      <!-- 布局设置 -->
+      <section class="config-section">
+        <el-divider>{{ t("settings.layoutSetting") }}</el-divider>
+
+        <!-- 整合的布局选择器 -->
+        <div class="layout-select">
+          <div class="layout-grid">
+            <el-tooltip
+              v-for="item in layoutOptions"
+              :key="item.value"
+              :content="item.label"
+              placement="bottom"
+            >
+              <div
+                role="button"
+                tabindex="0"
+                :class="[
+                  'layout-item',
+                  item.className,
+                  {
+                    'is-active': settingsStore.layout === item.value,
+                  },
+                ]"
+                @click="handleLayoutChange(item.value)"
+                @keydown.enter.space="handleLayoutChange(item.value)"
+              >
+                <!-- 布局预览图标 -->
+                <div class="layout-preview">
+                  <div v-if="item.value !== LayoutMode.LEFT" class="layout-header"></div>
+                  <div v-if="item.value !== LayoutMode.TOP" class="layout-sidebar"></div>
+                  <div class="layout-main"></div>
+                </div>
+                <!-- 布局名称 -->
+                <div class="layout-name">{{ item.label }}</div>
+                <!-- 选中状态指示器 -->
+                <div v-if="settingsStore.layout === item.value" class="layout-check">
+                  <el-icon><Check /></el-icon>
+                </div>
+              </div>
+            </el-tooltip>
+          </div>
+        </div>
+      </section>
+
+      <!-- 系统主题 -->
+      <section class="config-section">
+        <el-divider>{{ t("settings.systemTheme") }}</el-divider>
+        <div class="config-item">
+          <!-- <div class="flex-x-between mb-3">
+            <span class="text-xs">{{ t("settings.themeColor") }}</span>
+          </div> -->
+          <!-- 自定义主题颜色选择器 -->
+          <div class="theme-color-selector">
+            <div class="color-label">
+              <span class="text-xs">{{ t("settings.themeColor") }}</span>
+            </div>
+            <div class="color-options">
+              <!-- 预设颜色选项 -->
+              <div
+                v-for="color in displayColorPresets"
+                :key="color"
+                :class="['color-option', { 'is-active': selectedThemeColor === color }]"
+                :style="{ backgroundColor: color }"
+                @click="handleColorSelect(color)"
+              >
+                <div v-if="selectedThemeColor === color" class="color-check">
+                  <el-icon><Check /></el-icon>
+                </div>
+              </div>
+              <!-- 自定义颜色选择器 -->
+              <div class="color-picker-wrapper">
+                <el-color-picker
+                  v-model="selectedThemeColor"
+                  :predefine="allColorPresets"
+                  show-alpha
+                  size="small"
+                  class="custom-color-picker"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- 导航主题 -->
+      <section v-if="!isDark" class="config-section">
+        <el-divider>{{ t("settings.navigation") }}</el-divider>
+        <div class="config-item flex-x-between">
+          <span class="text-xs">{{ t("settings.sidebarColorScheme") }}</span>
+          <el-radio-group v-model="sidebarColor" @change="changeSidebarColor">
+            <el-radio :value="SidebarColor.CLASSIC_BLUE">
+              {{ t("settings.classicBlue") }}
+            </el-radio>
+            <el-radio :value="SidebarColor.MINIMAL_WHITE">
+              {{ t("settings.minimalWhite") }}
+            </el-radio>
+          </el-radio-group>
+        </div>
+      </section>
+
+      <!-- 界面设置 -->
+      <section class="config-section">
+        <el-divider>{{ t("settings.interface") }}</el-divider>
+
+        <div class="flex-x-between">
+          <span class="text-xs">{{ t("settings.showTagsView") }}</span>
+          <el-switch v-model="settingsStore.showTagsView" />
+        </div>
+
+        <div class="flex-x-between">
+          <span class="text-xs">{{ t("settings.showAppLogo") }}</span>
+          <el-switch v-model="settingsStore.showAppLogo" />
+        </div>
+
+        <div class="flex-x-between">
+          <span class="text-xs">{{ t("settings.showWatermark") }}</span>
+          <el-switch v-model="settingsStore.showWatermark" />
+        </div>
+
+        <div class="flex-x-between">
+          <span class="text-xs">{{ t("settings.grayMode") }}</span>
+          <el-switch v-model="settingsStore.grayMode" />
+        </div>
+
+        <div class="flex-x-between">
+          <span class="text-xs">{{ t("settings.userEnableAi") }}</span>
+          <el-switch v-model="settingsStore.userEnableAi" />
+        </div>
+
+        <div class="flex-x-between">
+          <span class="text-xs">{{ t("settings.pageSwitchingAnimation") }}</span>
+          <el-select v-model="settingsStore.pageSwitchingAnimation" style="width: 150px">
+            <el-option
+              v-for="(item, key) in pageSwitchingAnimationOptions"
+              :key
+              :label="t(`settings.${item.value}`)"
+              :value="item.value"
+            />
+          </el-select>
+        </div>
+
+        <!-- 工具控制 -->
+        <el-divider>{{ t("settings.showDesktopTools") }}</el-divider>
+
+        <div class="flex-x-between">
+          <span class="text-xs">{{ t("settings.showMenuSearch") }}</span>
+          <el-switch v-model="settingsStore.showMenuSearch" />
+        </div>
+
+        <div class="flex-x-between">
+          <span class="text-xs">{{ t("settings.showFullscreen") }}</span>
+          <el-switch v-model="settingsStore.showFullscreen" />
+        </div>
+
+        <div class="flex-x-between">
+          <span class="text-xs">{{ t("settings.showSizeSelect") }}</span>
+          <el-switch v-model="settingsStore.showSizeSelect" />
+        </div>
+
+        <div class="flex-x-between">
+          <span class="text-xs">{{ t("settings.showLangSelect") }}</span>
+          <el-switch v-model="settingsStore.showLangSelect" />
+        </div>
+
+        <div class="flex-x-between">
+          <span class="text-xs">{{ t("settings.showNotification") }}</span>
+          <el-switch v-model="settingsStore.showNotification" />
+        </div>
+
+        <!-- 修改此部分为引导开关，关闭以后登录以后不再启动引导 -->
+        <div class="flex-x-between">
+          <span class="text-xs">{{ t("settings.showGuide") }}</span>
+          <el-switch v-model="settingsStore.showGuide" />
+        </div>
+      </section>
+    </div>
+
+    <!-- 操作按钮区域 - 固定到底部 -->
+    <div class="action-footer">
+      <div class="action-card">
+        <div class="action-buttons">
+          <el-tooltip
+            content="复制配置将生成当前设置的代码，覆盖 src/config/setting.ts 中的 defaultSettings"
+            placement="top"
+          >
+            <el-button
+              type="primary"
+              size="default"
+              :icon="copyIcon"
+              :loading="copyLoading"
+              class="action-btn"
+              @click="handleCopySettings"
+            >
+              {{ copyLoading ? "复制中..." : t("settings.actions.copyConfig") }}
+            </el-button>
+          </el-tooltip>
+          <el-tooltip content="重置将恢复所有设置为默认值" placement="top">
+            <el-button
+              type="warning"
+              size="default"
+              :icon="resetIcon"
+              :loading="resetLoading"
+              class="action-btn"
+              @click="handleResetSettings"
+            >
+              {{ resetLoading ? "重置中..." : t("settings.actions.resetConfig") }}
+            </el-button>
+          </el-tooltip>
+        </div>
+      </div>
+    </div>
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+import { DocumentCopy, RefreshLeft, Check } from "@element-plus/icons-vue";
+
+const { t } = useI18n();
+import {
+  LayoutMode,
+  SidebarColor,
+  ThemeMode,
+  DeviceEnum,
+  PageSwitchingAnimationOptions,
+} from "@/enums";
+import { useSettingsStore, useAppStore } from "@/store";
+import { themeColorPresets } from "@/config/setting";
+import { useI18n } from "vue-i18n";
+import { computed, ref } from "vue";
+import { ElMessage } from "element-plus";
+
+const appStore = useAppStore();
+const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? "400px" : "90%"));
+
+// 页面切换动画选项
+const pageSwitchingAnimationOptions: Record<string, OptionType> = PageSwitchingAnimationOptions;
+// 按钮图标
+const copyIcon = ref(DocumentCopy);
+const resetIcon = ref(RefreshLeft);
+
+// 加载状态
+const copyLoading = ref(false);
+const resetLoading = ref(false);
+
+// 布局选项配置
+interface LayoutOption {
+  value: LayoutMode;
+  label: string;
+  className: string;
+}
+
+const layoutOptions: LayoutOption[] = [
+  { value: LayoutMode.LEFT, label: t("settings.leftLayout"), className: "left" },
+  { value: LayoutMode.TOP, label: t("settings.topLayout"), className: "top" },
+  { value: LayoutMode.MIX, label: t("settings.mixLayout"), className: "mix" },
+];
+
+// 使用统一的颜色预设配置
+const settingsStore = useSettingsStore();
+
+// 主题颜色选择器相关
+const displayColorPresets = computed(() => themeColorPresets.slice(0, 7)); // 只显示前9个预设颜色
+const allColorPresets = themeColorPresets; // 所有颜色预设，用于自定义颜色选择器
+
+const isDark = ref<boolean>(settingsStore.theme === ThemeMode.DARK);
+const sidebarColor = ref(settingsStore.sidebarColorScheme);
+
+const selectedThemeColor = computed({
+  get: () => settingsStore.themeColor,
+  set: (value) => settingsStore.updateThemeColor(value),
+});
+
+const drawerVisible = computed({
+  get: () => settingsStore.settingsVisible,
+  set: (value) => (settingsStore.settingsVisible = value),
+});
+
+/**
+ * 处理主题切换
+ *
+ * @param isDark 是否启用暗黑模式
+ */
+const handleThemeChange = (isDark: string | number | boolean) => {
+  settingsStore.updateTheme(isDark ? ThemeMode.DARK : ThemeMode.LIGHT);
+};
+
+/**
+ * 更改侧边栏颜色
+ *
+ * @param val 颜色方案名称
+ */
+const changeSidebarColor = (val: any) => {
+  settingsStore.updateSidebarColorScheme(val);
+};
+
+/**
+ * 切换布局
+ *
+ * @param layout - 布局模式
+ */
+const handleLayoutChange = (layout: LayoutMode) => {
+  if (settingsStore.layout === layout) return;
+
+  settingsStore.updateLayout(layout);
+};
+
+/**
+ * 处理颜色选择
+ *
+ * @param color - 选中的颜色
+ */
+const handleColorSelect = (color: string) => {
+  selectedThemeColor.value = color;
+};
+
+/**
+ * 复制当前配置
+ */
+const handleCopySettings = async () => {
+  try {
+    copyLoading.value = true;
+
+    // 生成配置代码
+    const configCode = generateSettingsCode();
+
+    // 复制到剪贴板
+    await navigator.clipboard.writeText(configCode);
+
+    // 显示成功消息
+    ElMessage.success({
+      message: t("settings.copySuccess"),
+      duration: 3000,
+    });
+  } catch {
+    ElMessage.error("复制配置失败");
+  } finally {
+    copyLoading.value = false;
+  }
+};
+
+/**
+ * 重置为默认配置
+ */
+const handleResetSettings = async () => {
+  resetLoading.value = true;
+
+  try {
+    settingsStore.resetSettings();
+
+    // 同步更新本地状态
+    isDark.value = settingsStore.theme === ThemeMode.DARK;
+    sidebarColor.value = settingsStore.sidebarColorScheme;
+
+    ElMessage.success(t("settings.resetSuccess"));
+  } catch {
+    ElMessage.error("重置配置失败");
+  } finally {
+    resetLoading.value = false;
+  }
+};
+
+/**
+ * 生成配置代码字符串
+ */
+const generateSettingsCode = (): string => {
+  const settings = {
+    title: "pkg.name",
+    version: "pkg.version",
+    showSettings: true,
+    showTagsView: settingsStore.showTagsView,
+    showAppLogo: settingsStore.showAppLogo,
+    showMenuSearch: settingsStore.showMenuSearch,
+    showFullscreen: settingsStore.showFullscreen,
+    showSizeSelect: settingsStore.showSizeSelect,
+    showLangSelect: settingsStore.showLangSelect,
+    showNotification: settingsStore.showNotification,
+    layout: `LayoutMode.${settingsStore.layout.toUpperCase()}`,
+    theme: `ThemeMode.${settingsStore.theme.toUpperCase()}`,
+    size: "ComponentSize.DEFAULT",
+    language: "LanguageEnum.ZH_CN",
+    themeColor: `"${settingsStore.themeColor}"`,
+    showWatermark: settingsStore.showWatermark,
+    watermarkContent: "pkg.name",
+    sidebarColorScheme: `SidebarColor.${settingsStore.sidebarColorScheme.toUpperCase().replace("-", "_")}`,
+    grayMode: settingsStore.grayMode,
+    userEnableAi: settingsStore.userEnableAi,
+  };
+
+  return `const defaultSettings: AppSettings = {
+  title: ${settings.title},
+  version: ${settings.version},
+  showSettings: ${settings.showSettings},
+  showTagsView: ${settings.showTagsView},
+  showAppLogo: ${settings.showAppLogo},
+  showMenuSearch: ${settings.showMenuSearch},
+  showFullscreen: ${settings.showFullscreen},
+  showSizeSelect: ${settings.showSizeSelect},
+  showLangSelect: ${settings.showLangSelect},
+  showNotification: ${settings.showNotification},
+  layout: ${settings.layout},
+  theme: ${settings.theme},
+  size: ${settings.size},
+  language: ${settings.language},
+  themeColor: ${settings.themeColor},
+  showWatermark: ${settings.showWatermark},
+  watermarkContent: ${settings.watermarkContent},
+  sidebarColorScheme: ${settings.sidebarColorScheme},
+  grayMode: ${settings.grayMode},
+  userEnableAi: ${settings.userEnableAi},
+};`;
+};
+
+/**
+ * 关闭抽屉前的回调
+ */
+const handleCloseDrawer = () => {
+  settingsStore.settingsVisible = false;
+};
+</script>
+
+<style lang="scss" scoped>
+/* 设置抽屉样式 */
+.settings-drawer {
+  :deep(.el-drawer__body) {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: 0;
+    overflow: hidden;
+  }
+}
+
+/* 设置内容区域 */
+.settings-content {
+  flex: 1 1 auto;
+  padding: 20px;
+  overflow-y: auto;
+}
+
+/* 底部操作区域样式 */
+.action-footer {
+  flex-shrink: 0;
+  padding: 16px 20px;
+  border-top: 1px solid var(--el-border-color-light);
+
+  .action-card {
+    margin: 0;
+    border: none;
+    border-radius: 0;
+
+    .action-buttons {
+      display: flex;
+
+      & > .el-button {
+        flex: 1;
+        font-size: 14px;
+        border-radius: 8px;
+      }
+    }
+  }
+}
+
+/* 主题切换器优化 */
+.theme-switch {
+  transform: scale(1.2);
+  transition: all 0.3s ease;
+
+  &:hover {
+    transform: scale(1.25);
+  }
+}
+
+.config-section {
+  margin-bottom: 24px;
+
+  .config-item {
+    padding: 12px 0;
+    border-bottom: 1px solid var(--el-border-color-light);
+    transition: all 0.3s ease;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &:hover {
+      padding-right: 8px;
+      padding-left: 8px;
+      margin: 0 -8px;
+      background-color: var(--el-fill-color-light);
+      border-radius: 6px;
+    }
+  }
+}
+
+/* 布局选择器样式优化 */
+.layout-select {
+  padding: 16px 8px;
+
+  .layout-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 12px;
+    justify-items: center;
+  }
+}
+
+.layout-item {
+  position: relative;
+  width: 70px;
+  height: 80px;
+  overflow: hidden;
+  cursor: pointer;
+  background: var(--el-bg-color);
+  border: 2px solid var(--el-border-color-light);
+  border-radius: 12px;
+  box-shadow: var(--el-box-shadow-light);
+  transition: all 0.3s var(--el-transition-duration);
+
+  &:hover {
+    background: var(--el-color-primary-light-9);
+    border-color: var(--el-color-primary-light-3);
+    transform: translateY(-4px) scale(1.05);
+  }
+
+  &:active {
+    transform: translateY(-2px) scale(1.02);
+  }
+
+  .layout-preview {
+    position: relative;
+    width: 100%;
+    height: 50px;
+    margin: 8px 0 4px;
+  }
+
+  .layout-header {
+    position: absolute;
+    top: 0;
+    right: 4px;
+    left: 4px;
+    height: 8px;
+    background: var(--el-color-primary);
+    border-radius: 2px;
+  }
+
+  .layout-sidebar {
+    position: absolute;
+    left: 4px;
+    width: 12px;
+    background: linear-gradient(
+      180deg,
+      var(--el-color-primary-dark-2) 0%,
+      var(--el-color-primary) 100%
+    );
+    border-radius: 2px;
+  }
+
+  .layout-main {
+    position: absolute;
+    background: var(--el-fill-color-light);
+    border: 1px solid var(--el-border-color-lighter);
+    border-radius: 2px;
+  }
+
+  .layout-name {
+    position: absolute;
+    right: 0;
+    bottom: 6px;
+    left: 0;
+    font-size: 10px;
+    font-weight: 500;
+    color: var(--el-text-color-regular);
+    text-align: center;
+    transition: color 0.3s ease;
+  }
+
+  .layout-check {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    font-size: 10px;
+    color: var(--el-color-white);
+    background: var(--el-color-success);
+    border-radius: 50%;
+  }
+
+  // 左侧布局
+  &.left {
+    .layout-sidebar {
+      top: 4px;
+      bottom: 4px;
+    }
+
+    .layout-main {
+      inset: 4px 4px 4px 20px;
+    }
+  }
+
+  // 顶部布局
+  &.top {
+    .layout-header {
+      height: 12px;
+    }
+
+    .layout-main {
+      inset: 16px 4px 4px;
+    }
+  }
+
+  // 混合布局
+  &.mix {
+    .layout-header {
+      height: 10px;
+    }
+
+    .layout-sidebar {
+      top: 14px;
+      bottom: 4px;
+    }
+
+    .layout-main {
+      inset: 14px 4px 4px 20px;
+    }
+  }
+
+  &.is-active {
+    background: linear-gradient(
+      145deg,
+      var(--el-color-primary-light-9) 0%,
+      var(--el-color-primary-light-8) 100%
+    );
+    border-color: var(--el-color-primary);
+    transform: translateY(-2px) scale(1.08);
+
+    .layout-name {
+      font-weight: 600;
+      color: var(--el-color-primary);
+    }
+  }
+}
+
+/* 主题颜色选择器样式 */
+.theme-color-selector {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+
+  .color-label {
+    flex-shrink: 0;
+    min-width: 60px;
+  }
+
+  .color-options {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: center;
+  }
+
+  .color-option {
+    position: relative;
+    width: 22px;
+    height: 22px;
+    cursor: pointer;
+    border: 2px solid var(--el-border-color-light);
+    border-radius: 6px;
+    box-shadow: var(--el-box-shadow-light);
+    transition: all 0.3s var(--el-transition-duration);
+
+    &:hover {
+      border-color: var(--el-color-primary-light-3);
+      box-shadow: var(--el-box-shadow);
+      transform: translateY(-2px) scale(1.05);
+    }
+
+    &.is-active {
+      border-color: var(--el-color-primary);
+      box-shadow: var(--el-box-shadow-dark);
+      transform: translateY(-1px) scale(1.08);
+    }
+
+    .color-check {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 16px;
+      height: 16px;
+      font-size: 10px;
+      color: var(--el-color-white);
+      background: var(--el-overlay-color-lighter);
+      border-radius: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  .color-picker-wrapper {
+    .custom-color-picker {
+      :deep(.el-color-picker__trigger) {
+        width: 22px;
+        height: 22px;
+        border: 2px solid var(--el-border-color-light);
+        border-radius: 6px;
+        box-shadow: var(--el-box-shadow-light);
+        transition: all 0.3s var(--el-transition-duration);
+
+        &:hover {
+          border-color: var(--el-color-primary-light-3);
+          box-shadow: var(--el-box-shadow);
+          transform: translateY(-2px) scale(1.05);
+        }
+      }
+
+      :deep(.el-color-picker__color) {
+        border: none;
+        border-radius: 3px;
+      }
+
+      :deep(.el-color-picker__color-inner) {
+        border-radius: 3px;
+      }
+
+      :deep(.el-color-picker__icon) {
+        font-size: 10px;
+      }
+    }
+  }
+
+  /* 深色模式适配 */
+  .dark & {
+    .color-option {
+      border-color: var(--el-border-color);
+      box-shadow: var(--el-box-shadow-light);
+
+      &:hover {
+        border-color: var(--el-color-primary-light-3);
+        box-shadow: var(--el-box-shadow);
+      }
+    }
+
+    .color-picker-wrapper {
+      .custom-color-picker {
+        :deep(.el-color-picker__trigger) {
+          border-color: var(--el-border-color);
+          box-shadow: var(--el-box-shadow-light);
+
+          &:hover {
+            border-color: var(--el-color-primary-light-3);
+            box-shadow: var(--el-box-shadow);
+          }
+        }
+      }
+    }
+  }
+}
+
+/* 深色模式适配 */
+.dark {
+  .action-footer {
+    border-top-color: var(--el-border-color);
+  }
+
+  .action-card {
+    background: var(--el-fill-color-extra-light);
+  }
+
+  .layout-item {
+    background: var(--el-bg-color);
+    border-color: var(--el-border-color);
+
+    &:hover {
+      background: var(--el-color-primary-light-9);
+    }
+
+    &.is-active {
+      background: var(--el-color-primary-light-9);
+    }
+
+    .layout-main {
+      background: var(--el-fill-color);
+    }
+  }
+}
+
+/* 复制配置对话框样式 */
+:deep(.copy-config-dialog) {
+  .el-message-box__content {
+    max-height: 400px;
+    overflow-y: auto;
+  }
+}
+</style>
diff --git a/frontend/new-web/src/layouts/old/components/TagsView/index.vue b/frontend/new-web/src/layouts/old/components/TagsView/index.vue
new file mode 100644
index 00000000..5c4b31f0
--- /dev/null
+++ b/frontend/new-web/src/layouts/old/components/TagsView/index.vue
@@ -0,0 +1,975 @@
+<template>
+  <div ref="tags-container" class="tags-container">
+    <!-- 向左移动按钮 -->
+    <el-icon class="btn" @click="scrollLeft">
+      <DArrowLeft />
+    </el-icon>
+
+    <!-- 标签导航容器 -->
+    <nav role="navigation" class="scroll-wrapper">
+      <el-scrollbar ref="scrollbarRef" class="scroll-container" @wheel="handleScroll">
+        <VueDraggable v-model="visitedViews" :animation="150">
+          <router-link
+            v-for="tag in displayedViews"
+            :key="tag.fullPath"
+            :class="['tags-item', { active: tagsViewStore.isActive(tag) }]"
+            :to="{ path: tag.path, query: tag.query }"
+            @click="tagSwitchSource = 'tab'"
+            @click.middle="handleMiddleClick(tag)"
+          >
+            <!-- 为所有标签添加右键菜单 -->
+            <el-dropdown
+              trigger="contextmenu"
+              @visible-change="(visible) => onContextMenuVisibleChange(visible, tag)"
+              @click.stop
+            >
+              <span class="tag-main">
+                <button
+                  type="button"
+                  class="tag-bookmark-btn"
+                  :class="{ 'is-bookmarked': isQuickLinkExists(tag) }"
+                  :title="isQuickLinkExists(tag) ? '取消收藏' : '加入收藏'"
+                  :aria-label="isQuickLinkExists(tag) ? '取消收藏' : '加入收藏'"
+                  @click.prevent.stop="toggleQuickStart(tag)"
+                >
+                  <el-icon :size="14">
+                    <StarFilled v-if="isQuickLinkExists(tag)" />
+                    <Star v-else />
+                  </el-icon>
+                </button>
+                <span class="tag-text">{{ translateRouteTitle(tag.title) }}</span>
+              </span>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item @click="refreshSelectedTag(tag)">
+                    <el-icon>
+                      <Refresh />
+                    </el-icon>
+                    {{ t("navbar.refresh") }}
+                  </el-dropdown-item>
+
+                  <el-dropdown-item
+                    :disabled="tag.affix || visitedViews.length <= 1"
+                    @click="closeSelectedTag(tag)"
+                  >
+                    <el-icon>
+                      <Close />
+                    </el-icon>
+                    {{ t("navbar.close") }}
+                  </el-dropdown-item>
+
+                  <el-dropdown-item :disabled="isFirstView(tag)" @click="closeLeftTags(tag)">
+                    <el-icon>
+                      <Back />
+                    </el-icon>
+                    {{ t("navbar.closeLeft") }}
+                  </el-dropdown-item>
+
+                  <el-dropdown-item :disabled="isLastView(tag)" @click="closeRightTags(tag)">
+                    <el-icon>
+                      <Right />
+                    </el-icon>
+                    {{ t("navbar.closeRight") }}
+                  </el-dropdown-item>
+
+                  <el-dropdown-item
+                    :disabled="visitedViews.length <= 1"
+                    @click="closeOtherTags(tag)"
+                  >
+                    <el-icon>
+                      <Remove />
+                    </el-icon>
+                    {{ t("navbar.closeOther") }}
+                  </el-dropdown-item>
+
+                  <el-dropdown-item :disabled="visitedViews.length <= 1" @click="closeAllTags(tag)">
+                    <el-icon>
+                      <Minus />
+                    </el-icon>
+                    {{ t("navbar.closeAll") }}
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+
+            <span
+              v-if="!tag.affix"
+              class="tag-close-btn"
+              @click.prevent.stop="closeSelectedTag(tag)"
+            >
+              <el-icon>
+                <Close />
+              </el-icon>
+            </span>
+          </router-link>
+        </VueDraggable>
+      </el-scrollbar>
+    </nav>
+
+    <!-- 向右移动按钮 -->
+    <el-icon class="btn" @click="scrollRight">
+      <DArrowRight />
+    </el-icon>
+
+    <!-- 刷新按钮 -->
+    <el-icon class="btn" @click="handleAction('refreshCache')">
+      <RefreshRight />
+    </el-icon>
+
+    <!-- 设置按钮 -->
+    <el-dropdown class="btn" trigger="click">
+      <el-icon>
+        <Setting />
+      </el-icon>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item @click="handleAction('refresh')">
+            <el-icon>
+              <Refresh />
+            </el-icon>
+            {{ t("navbar.refresh") }}
+          </el-dropdown-item>
+
+          <el-dropdown-item v-if="!selectedTag?.affix" @click="handleAction('close')">
+            <el-icon>
+              <Close />
+            </el-icon>
+            {{ t("navbar.close") }}
+          </el-dropdown-item>
+
+          <el-dropdown-item
+            :disabled="isFirstView(routePathMap.get(route.path))"
+            @click="handleAction('closeLeft')"
+          >
+            <el-icon>
+              <Back />
+            </el-icon>
+            {{ t("navbar.closeLeft") }}
+          </el-dropdown-item>
+
+          <el-dropdown-item
+            :disabled="isLastView(routePathMap.get(route.path))"
+            @click="handleAction('closeRight')"
+          >
+            <el-icon>
+              <Right />
+            </el-icon>
+            {{ t("navbar.closeRight") }}
+          </el-dropdown-item>
+
+          <el-dropdown-item
+            :disabled="visitedViews.length <= 1"
+            @click="handleAction('closeOther')"
+          >
+            <el-icon>
+              <Remove />
+            </el-icon>
+            {{ t("navbar.closeOther") }}
+          </el-dropdown-item>
+
+          <el-dropdown-item @click="handleAction('closeAll')">
+            <el-icon>
+              <Minus />
+            </el-icon>
+            {{ t("navbar.closeAll") }}
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRoute, useRouter, type RouteRecordRaw } from "vue-router";
+import { resolve } from "path-browserify";
+import { translateRouteTitle } from "@/utils/i18n";
+import { refreshAppCaches, usePermissionStore, useTagsViewStore } from "@/store";
+import { VueDraggable } from "vue-draggable-plus";
+import { quickStartManager } from "@/utils/common/quickStartManager";
+import { ElMessage } from "element-plus";
+import { useI18n } from "vue-i18n";
+import { storeToRefs } from "pinia";
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
+import {
+  Back,
+  Close,
+  DArrowLeft,
+  DArrowRight,
+  Minus,
+  Refresh,
+  RefreshRight,
+  Remove,
+  Right,
+  Setting,
+  Star,
+  StarFilled,
+} from "@element-plus/icons-vue";
+
+const { t } = useI18n();
+
+const router = useRouter();
+const route = useRoute();
+
+// 状态管理
+const permissionStore = usePermissionStore();
+const tagsViewStore = useTagsViewStore();
+
+const { visitedViews } = storeToRefs(tagsViewStore);
+
+// 简单的标签显示逻辑
+const displayedViews = computed(() => {
+  return visitedViews.value;
+});
+
+// 当前选中的标签
+const selectedTag = ref<TagView | null>(null);
+
+// 滚动条引用
+const scrollbarRef = ref();
+
+// 标签切换来源跟踪
+const tagSwitchSource = ref<"menu" | "tab" | null>(null);
+
+/** 收藏列表变更时递增，使星标与 localStorage 同步（否则取消收藏后 UI 不更新） */
+const quickLinksRevision = ref(0);
+
+const onQuickLinksChanged = () => {
+  quickLinksRevision.value++;
+};
+
+// 路由映射缓存，提升查找性能
+const routePathMap = new Map<string, TagView>();
+
+// 更新路由映射缓存
+const updateRoutePathMap = () => {
+  routePathMap.clear();
+  visitedViews.value.forEach((tag) => {
+    routePathMap.set(tag.path, tag);
+  });
+};
+
+// 判断是否为第一个标签
+const isFirstView = (tag?: TagView) => {
+  if (tag) {
+    // 传入特定标签时使用传入的标签
+    return tag.path === "/" || tag.fullPath === visitedViews.value[1]?.fullPath;
+  } else {
+    // 未传入标签时使用当前激活标签（向后兼容）
+    const currentTag = routePathMap.get(route.path);
+    if (!currentTag) return false;
+    return currentTag.path === "/" || currentTag.fullPath === visitedViews.value[1]?.fullPath;
+  }
+};
+
+// 判断是否为最后一个标签
+const isLastView = (tag?: TagView) => {
+  if (tag) {
+    // 传入特定标签时使用传入的标签
+    return tag.fullPath === visitedViews.value[visitedViews.value.length - 1]?.fullPath;
+  } else {
+    // 未传入标签时使用当前激活标签（向后兼容）
+    const currentTag = routePathMap.get(route.path);
+    if (!currentTag) return false;
+    return currentTag.fullPath === visitedViews.value[visitedViews.value.length - 1]?.fullPath;
+  }
+};
+
+/**
+ * 递归提取固定标签
+ */
+const extractAffixTags = (routes: RouteRecordRaw[], basePath = "/"): TagView[] => {
+  const affixTags: TagView[] = [];
+
+  const traverse = (routeList: RouteRecordRaw[], currentBasePath: string) => {
+    routeList.forEach((route) => {
+      const fullPath = resolve(currentBasePath, route.path);
+
+      // 如果是固定标签，添加到列表
+      if (route.meta?.affix) {
+        affixTags.push({
+          path: fullPath,
+          fullPath,
+          name: String(route.name || ""),
+          title: route.meta.title || "no-name",
+          affix: true,
+          keepAlive: route.meta.keepAlive || false,
+        });
+      }
+
+      // 递归处理子路由
+      if (route.children?.length) {
+        traverse(route.children, fullPath);
+      }
+    });
+  };
+
+  traverse(routes, basePath);
+  return affixTags;
+};
+
+/**
+ * 初始化固定标签
+ */
+const initAffixTags = () => {
+  const affixTags = extractAffixTags(permissionStore.routes);
+
+  affixTags.forEach((tag) => {
+    if (tag.name) {
+      tagsViewStore.addVisitedView(tag);
+    }
+  });
+};
+
+/**
+ * 添加当前路由标签
+ */
+const addCurrentTag = () => {
+  if (!route.meta?.title) return;
+
+  // 检查标签是否已存在
+  const existingTag = visitedViews.value.find((tag) => tag.path === route.path);
+
+  if (existingTag) {
+    // 如果标签已存在，根据来源决定是否移动位置
+    if (!existingTag.affix) {
+      if (tagSwitchSource.value === "menu") {
+        // 通过菜单点击：移动到最新位置
+        const index = visitedViews.value.findIndex((tag) => tag.path === route.path);
+        if (index !== -1) {
+          const tag = visitedViews.value.splice(index, 1)[0];
+          visitedViews.value.push(tag);
+        }
+      }
+      // 通过标签容器点击：不移动位置，只激活
+    }
+  } else {
+    // 添加新标签
+    tagsViewStore.addView({
+      name: route.name as string,
+      title: route.meta.title,
+      path: route.path,
+      fullPath: route.fullPath,
+      icon: (route as any).icon || route.meta?.icon,
+      affix: route.meta.affix || false,
+      keepAlive: route.meta.keepAlive || false,
+      query: route.query,
+    });
+  }
+
+  // 根据来源决定是否滚动
+  if (tagSwitchSource.value === "menu") {
+    // 通过菜单点击：滚动到最新标签
+    nextTick(() => {
+      autoScrollToLatestTag();
+    });
+  }
+  // 通过标签容器点击：不滚动，保持当前位置
+
+  // 重置来源状态
+  tagSwitchSource.value = null;
+};
+
+/**
+ * 更新当前标签
+ */
+const updateCurrentTag = () => {
+  nextTick(() => {
+    const currentTag = routePathMap.get(route.path);
+
+    if (currentTag && currentTag.fullPath !== route.fullPath) {
+      tagsViewStore.updateVisitedView({
+        name: route.name as string,
+        title: route.meta?.title || "",
+        path: route.path,
+        fullPath: route.fullPath,
+        icon: (route as any).icon || route.meta?.icon,
+        affix: route.meta?.affix || false,
+        keepAlive: route.meta?.keepAlive || false,
+        query: route.query,
+      });
+    }
+  });
+};
+
+/**
+ * 处理中键点击
+ */
+const handleMiddleClick = (tag: TagView) => {
+  if (!tag.affix) {
+    closeSelectedTag(tag);
+  }
+};
+
+/**
+ * 处理滚轮事件（优化后）
+ */
+const handleScroll = (event: WheelEvent) => {
+  const scrollWrapper = scrollbarRef.value?.wrapRef;
+  if (!scrollWrapper) return;
+
+  // 检查是否有水平或垂直滚动
+  const hasHorizontalScroll = scrollWrapper.scrollWidth > scrollWrapper.clientWidth;
+  const hasVerticalScroll = scrollWrapper.scrollHeight > scrollWrapper.clientHeight;
+
+  if (!hasHorizontalScroll && !hasVerticalScroll) return;
+
+  const deltaY = event.deltaY || -(event as any).wheelDelta || 0;
+  const deltaX = event.deltaX || 0;
+
+  // 计算新的滚动位置
+  const newScrollLeft = Math.max(
+    0,
+    Math.min(
+      scrollWrapper.scrollWidth - scrollWrapper.clientWidth,
+      scrollWrapper.scrollLeft + deltaX
+    )
+  );
+  const newScrollTop = Math.max(
+    0,
+    Math.min(
+      scrollWrapper.scrollHeight - scrollWrapper.clientHeight,
+      scrollWrapper.scrollTop + deltaY
+    )
+  );
+
+  scrollbarRef.value.setScrollLeft(newScrollLeft);
+  scrollbarRef.value.setScrollTop(newScrollTop); // 新增垂直滚动支持
+};
+
+/**
+ * 刷新标签
+ */
+const refreshSelectedTag = (tag: TagView | null) => {
+  if (!tag) return;
+  // 总是使用当前路由对应的标签
+  // const currentTag = routePathMap.value.get(route.path);
+  // if (!currentTag) return;
+
+  tagsViewStore.delCachedView(tag);
+  nextTick(() => {
+    router.replace("/redirect" + tag.fullPath);
+  });
+};
+
+/**
+ * 关闭标签
+ */
+const closeSelectedTag = (tag: TagView | null) => {
+  // 如果传入了具体的标签，使用传入的标签；否则使用当前路由对应的标签
+  const targetTag = tag || routePathMap.get(route.path);
+  if (!targetTag) return;
+
+  tagsViewStore.delView(targetTag).then((result: any) => {
+    if (tagsViewStore.isActive(targetTag)) {
+      tagsViewStore.toLastView(result.visitedViews, targetTag);
+    }
+    // 关闭标签后重置滚动状态，以便下次可以重新判断是否需要滚动
+    nextTick(() => {
+      resetScrollState();
+    });
+  });
+};
+
+/**
+ * 关闭左侧标签
+ */
+const closeLeftTags = (tag?: TagView) => {
+  const targetTag = tag || selectedTag.value || routePathMap.get(route.path);
+  if (!targetTag) return;
+
+  tagsViewStore.delLeftViews(targetTag).then((result: any) => {
+    const hasCurrentRoute = result.visitedViews.some((item: TagView) => item.path === route.path);
+
+    if (!hasCurrentRoute) {
+      tagsViewStore.toLastView(result.visitedViews);
+    }
+    // 关闭标签后重置滚动状态
+    nextTick(() => {
+      resetScrollState();
+    });
+  });
+};
+
+/**
+ * 关闭右侧标签
+ */
+const closeRightTags = (tag?: TagView) => {
+  const targetTag = tag || selectedTag.value || routePathMap.get(route.path);
+  if (!targetTag) return;
+
+  tagsViewStore.delRightViews(targetTag).then((result: any) => {
+    const hasCurrentRoute = result.visitedViews.some((item: TagView) => item.path === route.path);
+
+    if (!hasCurrentRoute) {
+      tagsViewStore.toLastView(result.visitedViews);
+    }
+    // 关闭标签后重置滚动状态
+    nextTick(() => {
+      resetScrollState();
+    });
+  });
+};
+
+/**
+ * 关闭其他标签
+ */
+const closeOtherTags = (tag?: TagView) => {
+  const targetTag = tag || selectedTag.value || routePathMap.get(route.path);
+  if (!targetTag) return;
+
+  router.push(targetTag);
+  tagsViewStore.delOtherViews(targetTag).then(() => {
+    updateCurrentTag();
+    // 关闭标签后重置滚动状态
+    nextTick(() => {
+      resetScrollState();
+    });
+  });
+};
+
+/**
+ * 关闭所有标签
+ */
+const closeAllTags = (tag?: TagView) => {
+  tagsViewStore.delAllViews().then((result: any) => {
+    tagsViewStore.toLastView(result.visitedViews, tag || undefined);
+    // 关闭所有标签后重置滚动状态
+    nextTick(() => {
+      resetScrollState();
+    });
+  });
+};
+
+/**
+ * 统一处理标签操作
+ */
+const handleAction = async (action: string) => {
+  // 总是使用当前路由对应的标签
+  const currentTag = routePathMap.get(route.path);
+  if (!currentTag) return;
+
+  switch (action) {
+    case "refresh":
+      refreshSelectedTag(currentTag);
+      break;
+    case "close":
+      closeSelectedTag(currentTag);
+      break;
+    case "closeRight":
+      closeRightTags();
+      break;
+    case "closeLeft":
+      closeLeftTags();
+      break;
+    case "closeOther":
+      closeOtherTags();
+      break;
+    case "closeAll":
+      closeAllTags(currentTag);
+      break;
+    case "refreshCache":
+      try {
+        // 1) 刷新服务端缓存（用户/权限/配置/公告/按需字典）并重建路由
+        await refreshAppCaches();
+        // 2) 软刷新当前页面，重新加载组件
+        refreshSelectedTag(currentTag);
+        // 3) 提示成功
+        ElMessage.success(t("navbar.refreshCache") + "完成");
+      } catch (error) {
+        console.error("刷新缓存失败:", error);
+        ElMessage.error("刷新失败");
+      }
+      break;
+    default:
+      console.warn(`Unknown action: ${action}`);
+  }
+};
+
+/**
+ * 右键菜单显示状态变化处理函数
+ */
+const onContextMenuVisibleChange = (visible: boolean, tag?: TagView) => {
+  if (visible) {
+    // 设置当前右键点击的标签
+    selectedTag.value = tag || routePathMap.get(route.path) || null;
+  } else {
+    // 关闭菜单时清空选择
+    selectedTag.value = null;
+  }
+};
+
+/**
+ * 切换快速开始收藏状态
+ */
+const toggleQuickStart = (tag: TagView) => {
+  try {
+    const href = tag.fullPath || tag.path;
+    const isExists = quickStartManager.isLinkExists(href);
+
+    if (isExists) {
+      const links = quickStartManager.getQuickLinks();
+      const targetLink = links.find((link) => link.href === href);
+      if (targetLink?.id) {
+        quickStartManager.removeQuickLink(targetLink.id);
+      } else if (href) {
+        quickStartManager.removeQuickLinkByHref(href);
+      }
+      ElMessage.success(`已取消收藏：${tag.title}`);
+    } else {
+      const quickLink = quickStartManager.createQuickLinkFromRoute(tag);
+      if (quickStartManager.addQuickLink(quickLink)) {
+        ElMessage.success(`已收藏：${tag.title}`);
+      }
+    }
+  } catch (error) {
+    console.error("Failed to toggle quick start:", error);
+    ElMessage.error("操作失败");
+  }
+};
+
+/**
+ * 检查快速链接是否已存在（依赖 quickLinksRevision，以便收藏增删后星标立即刷新）
+ */
+const isQuickLinkExists = (tag: TagView): boolean => {
+  void quickLinksRevision.value;
+  return quickStartManager.isLinkExists(tag.fullPath || tag.path);
+};
+
+/**
+ * 向左滚动标签页
+ */
+const scrollLeft = () => {
+  const scrollWrapper = scrollbarRef.value?.wrapRef;
+  if (!scrollWrapper) return;
+
+  const newScrollLeft = Math.max(0, scrollWrapper.scrollLeft - 200);
+  scrollbarRef.value.setScrollLeft(newScrollLeft);
+};
+
+/**
+ * 向右滚动标签页
+ */
+const scrollRight = () => {
+  const scrollWrapper = scrollbarRef.value?.wrapRef;
+  if (!scrollWrapper) return;
+
+  const maxScrollLeft = scrollWrapper.scrollWidth - scrollWrapper.clientWidth;
+  const newScrollLeft = Math.min(maxScrollLeft, scrollWrapper.scrollLeft + 200);
+  scrollbarRef.value.setScrollLeft(newScrollLeft);
+
+  // 如果滚动到最右边，重置滚动状态以允许下次自动滚动
+  if (newScrollLeft >= maxScrollLeft - 1) {
+    scrollState.value.hasScrolledToLatest = false;
+  }
+};
+
+/**
+ * 重置滚动状态
+ */
+const resetScrollState = () => {
+  scrollState.value.hasScrolledToLatest = false;
+  scrollState.value.isContainerFull = false;
+};
+
+// 滚动状态跟踪
+const scrollState = ref({
+  hasScrolledToLatest: false, // 是否已经滚动到最新标签
+  isContainerFull: false, // 容器是否已满
+});
+
+/**
+ * 自动滚动到最新标签或确保当前激活标签可见
+ */
+const autoScrollToLatestTag = () => {
+  const scrollWrapper = scrollbarRef.value?.wrapRef;
+  if (!scrollWrapper) return;
+
+  // 获取容器宽度和内容宽度
+  const containerWidth = scrollWrapper.clientWidth;
+  const contentWidth = scrollWrapper.scrollWidth;
+
+  // 判断容器是否已满（内容宽度是否超过容器宽度）
+  const isContainerFull = contentWidth > containerWidth;
+
+  // 查找当前激活的标签元素
+  const activeTagElement = document.querySelector(".tags-item.active");
+
+  if (activeTagElement) {
+    // 将Element类型断言为HTMLElement类型以访问offsetWidth属性
+    const activeHtmlElement = activeTagElement as HTMLElement;
+    // 计算激活标签的位置信息
+    const activeTagRect = activeHtmlElement.getBoundingClientRect();
+    const containerRect = scrollWrapper.getBoundingClientRect();
+
+    // 计算标签相对于容器的位置
+    const tagLeft = activeTagRect.left - containerRect.left + scrollWrapper.scrollLeft;
+    const tagRight = tagLeft + activeHtmlElement.offsetWidth;
+
+    // 检查标签是否完全在可见区域内
+    if (
+      tagLeft < scrollWrapper.scrollLeft ||
+      tagRight > scrollWrapper.scrollLeft + containerWidth
+    ) {
+      // 如果标签不在可见区域内，滚动到使标签居中的位置
+      const targetScrollLeft = tagLeft - (containerWidth - activeHtmlElement.offsetWidth) / 2;
+      const maxScrollLeft = contentWidth - containerWidth;
+      const minScrollLeft = 0;
+      const clampedScrollLeft = Math.max(minScrollLeft, Math.min(maxScrollLeft, targetScrollLeft));
+
+      scrollbarRef.value.setScrollLeft(clampedScrollLeft);
+      scrollState.value.hasScrolledToLatest = true;
+      scrollState.value.isContainerFull = isContainerFull;
+      return;
+    }
+  }
+
+  // 如果没有找到激活标签或激活标签已经在可见区域内，则使用原来的逻辑
+  if (isContainerFull && !scrollState.value.hasScrolledToLatest) {
+    // 计算需要滚动到的位置，确保最新标签在右侧可见
+    const maxScrollLeft = contentWidth - containerWidth;
+    scrollbarRef.value.setScrollLeft(maxScrollLeft);
+    scrollState.value.hasScrolledToLatest = true;
+    scrollState.value.isContainerFull = true;
+  } else if (!isContainerFull) {
+    // 如果内容宽度不超过容器宽度，滚动到最左边
+    scrollbarRef.value.setScrollLeft(0);
+    // 重置滚动状态
+    scrollState.value.hasScrolledToLatest = false;
+    scrollState.value.isContainerFull = false;
+  }
+};
+
+// 监听路由变化
+watch(
+  route,
+  () => {
+    // 如果没有设置来源，则默认为菜单点击
+    if (tagSwitchSource.value === null) {
+      tagSwitchSource.value = "menu";
+    }
+    addCurrentTag();
+    updateCurrentTag();
+    updateRoutePathMap();
+  },
+  { immediate: true }
+);
+
+// 监听容器大小变化
+let resizeObserver: ResizeObserver | null = null;
+
+// 监听标签数量变化，自动滚动到最新标签（新标签添加时）
+watch(
+  () => visitedViews.value.length,
+  () => {
+    // 更新路由映射缓存
+    updateRoutePathMap();
+
+    // 只有在通过菜单添加新标签时才滚动
+    if (tagSwitchSource.value === "menu") {
+      nextTick(() => {
+        autoScrollToLatestTag();
+      });
+    }
+  }
+);
+
+// 监听当前路由变化，确保路由切换时自动滚动到当前标签
+watch(
+  () => route.path,
+  () => {
+    nextTick(() => {
+      autoScrollToLatestTag();
+    });
+  }
+);
+
+// 初始化
+onMounted(() => {
+  initAffixTags();
+
+  quickStartManager.addListener(onQuickLinksChanged);
+
+  // 初始化路由映射缓存
+  updateRoutePathMap();
+
+  // 监听容器大小变化
+  const tagsContainer = document.querySelector(".tags-container");
+  if (tagsContainer && window.ResizeObserver) {
+    resizeObserver = new ResizeObserver(() => {
+      // 强制重新计算 displayedViews
+      nextTick(() => {
+        autoScrollToLatestTag();
+      });
+    });
+    resizeObserver.observe(tagsContainer);
+  }
+});
+
+// 清理
+onUnmounted(() => {
+  quickStartManager.removeListener(onQuickLinksChanged);
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.tags-container {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: $tags-view-height;
+  background-color: var(--el-bg-color-overlay);
+  border-top: 1px solid var(--el-border-color-light);
+  border-bottom: 1px solid var(--el-border-color-light);
+  // box-shadow: var(--el-box-shadow-light);
+
+  .btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: $tags-view-height;
+    height: $tags-view-height;
+    color: var(--el-text-color-regular);
+    cursor: pointer;
+    border: none;
+    // border: 1px solid var(--el-border-color-light);
+
+    &:hover {
+      color: var(--el-color-primary);
+    }
+  }
+
+  .scroll-wrapper {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .scroll-container {
+    white-space: nowrap;
+  }
+
+  .tags-item {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    height: 26px;
+    padding: 0 9px;
+    margin-left: 6px;
+    font-size: 12px;
+    line-height: 1;
+    vertical-align: middle;
+    color: var(--el-text-color-regular);
+    background: var(--el-fill-color-light);
+    border: 1px solid var(--el-border-color-lighter);
+    border-radius: 6px;
+
+    &:first-of-type {
+      margin-left: 5px;
+    }
+
+    &:last-of-type {
+      margin-right: 5px;
+    }
+
+    &:hover:not(.active) {
+      background-color: var(--el-fill-color);
+      border-color: var(--el-border-color);
+    }
+
+    :deep(.el-dropdown) {
+      display: inline-flex;
+      align-items: center;
+      max-width: 100%;
+      line-height: 1;
+    }
+
+    .tag-main {
+      display: inline-flex;
+      gap: 4px;
+      align-items: center;
+      min-width: 0;
+    }
+
+    .tag-bookmark-btn {
+      display: inline-flex;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+      margin: 0;
+      line-height: 1;
+      color: var(--el-text-color-placeholder);
+      cursor: pointer;
+      outline: none;
+      background: transparent;
+      border: none;
+      border-radius: 4px;
+
+      &:hover {
+        color: var(--el-color-primary);
+      }
+
+      &:focus-visible {
+        box-shadow: 0 0 0 2px var(--el-color-primary-light-7);
+      }
+
+      &.is-bookmarked {
+        color: var(--el-color-primary);
+      }
+    }
+
+    .tag-text {
+      min-width: 0;
+      line-height: 1.25;
+    }
+
+    .tag-close-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 16px;
+      height: 16px;
+      margin-left: 5px;
+      font-size: 12px;
+      font-weight: bold;
+      color: var(--el-text-color-secondary);
+      cursor: pointer;
+      border-radius: 50%;
+
+      &:hover {
+        color: var(--el-color-danger);
+        background-color: var(--el-fill-color-light);
+      }
+    }
+
+    &.active {
+      color: var(--el-color-primary);
+      background: var(--el-color-primary-light-9);
+      border-color: var(--el-color-primary-light-7);
+
+      .tag-text {
+        font-weight: 500;
+        color: var(--el-color-primary);
+      }
+
+      .tag-bookmark-btn:not(.is-bookmarked) {
+        color: var(--el-text-color-secondary);
+
+        &:hover {
+          color: var(--el-color-primary);
+        }
+      }
+
+      .tag-close-btn {
+        color: var(--el-color-primary);
+
+        &:hover {
+          color: var(--el-color-danger);
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/frontend/new-web/src/layouts/old/composables/useLayout.ts b/frontend/new-web/src/layouts/old/composables/useLayout.ts
new file mode 100644
index 00000000..ecfb0724
--- /dev/null
+++ b/frontend/new-web/src/layouts/old/composables/useLayout.ts
@@ -0,0 +1,64 @@
+import { useAppStore, useSettingsStore } from "@/store";
+import { defaultSettings } from "@/config/setting";
+import { DeviceEnum } from "@/enums";
+import { computed } from "vue";
+
+/**
+ * 布局相关的通用逻辑
+ */
+export function useLayout() {
+  const appStore = useAppStore();
+  const settingsStore = useSettingsStore();
+
+  // 计算当前布局模式
+  const currentLayout = computed(() => settingsStore.layout);
+
+  // 侧边栏展开状态
+  const isSidebarOpen = computed(() => appStore.sidebar.opened);
+
+  // 是否显示标签视图
+  const isShowTagsView = computed(() => settingsStore.showTagsView);
+
+  // 是否显示设置面板
+  const isShowSettings = computed(() => defaultSettings.showSettings);
+
+  // 是否显示Logo
+  const isShowLogo = computed(() => settingsStore.showAppLogo);
+
+  // 是否移动设备
+  const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE);
+
+  // 布局CSS类
+  const layoutClass = computed(() => ({
+    hideSidebar: !appStore.sidebar.opened,
+    openSidebar: appStore.sidebar.opened,
+    mobile: appStore.device === DeviceEnum.MOBILE,
+    [`layout-${settingsStore.layout}`]: true,
+  }));
+
+  /**
+   * 处理切换侧边栏的展开/收起状态
+   */
+  function toggleSidebar() {
+    appStore.toggleSidebar();
+  }
+
+  /**
+   * 关闭侧边栏（移动端）
+   */
+  function closeSidebar() {
+    appStore.closeSideBar();
+  }
+
+  return {
+    currentLayout,
+    isSidebarOpen,
+    isShowTagsView,
+    isShowSettings,
+    isShowLogo,
+    isMobile,
+    layoutClass,
+    toggleSidebar,
+    closeSidebar,
+  };
+}
diff --git a/frontend/new-web/src/layouts/old/composables/useLayoutMenu.ts b/frontend/new-web/src/layouts/old/composables/useLayoutMenu.ts
new file mode 100644
index 00000000..f63c031f
--- /dev/null
+++ b/frontend/new-web/src/layouts/old/composables/useLayoutMenu.ts
@@ -0,0 +1,40 @@
+import { useRoute } from "vue-router";
+import { useAppStore, usePermissionStore } from "@/store";
+import { computed } from "vue";
+
+/**
+ * 布局菜单处理逻辑
+ */
+export function useLayoutMenu() {
+  const route = useRoute();
+  const appStore = useAppStore();
+  const permissionStore = usePermissionStore();
+
+  // 顶部菜单激活路径
+  const activeTopMenuPath = computed(() => appStore.activeTopMenuPath);
+
+  // 常规路由（左侧菜单或顶部菜单）
+  const routes = computed(() => permissionStore.routes);
+
+  // 混合布局左侧菜单路由
+  const sideMenuRoutes = computed(() => permissionStore.mixLayoutSideMenus);
+
+  // 当前激活的菜单
+  const activeMenu = computed(() => {
+    const { meta, path } = route;
+
+    // 如果设置了activeMenu，则使用
+    if (meta?.activeMenu) {
+      return meta.activeMenu;
+    }
+
+    return path;
+  });
+
+  return {
+    routes,
+    sideMenuRoutes,
+    activeMenu,
+    activeTopMenuPath,
+  };
+}
diff --git a/frontend/new-web/src/layouts/old/composables/useLayoutResponsive.ts b/frontend/new-web/src/layouts/old/composables/useLayoutResponsive.ts
new file mode 100644
index 00000000..e9f1e9b1
--- /dev/null
+++ b/frontend/new-web/src/layouts/old/composables/useLayoutResponsive.ts
@@ -0,0 +1,40 @@
+import { watchEffect, computed } from "vue";
+import { useWindowSize } from "@vueuse/core";
+import { useAppStore } from "@/store";
+import { DeviceEnum } from "@/enums/settings/device.enum";
+
+/**
+ * 设备检测和响应式处理
+ * 监听屏幕尺寸变化，自动调整设备类型和侧边栏状态
+ */
+export function useLayoutResponsive() {
+  const appStore = useAppStore();
+  const { width } = useWindowSize();
+
+  // 定义响应式断点
+  const WIDTH_DESKTOP = 992; // 桌面设备断点 (>=992px)
+
+  // 计算设备类型
+  const isDesktop = computed(() => width.value >= WIDTH_DESKTOP);
+  const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE);
+
+  // 设置当前设备类型并调整侧边栏状态
+  watchEffect(() => {
+    const deviceType = isDesktop.value ? DeviceEnum.DESKTOP : DeviceEnum.MOBILE;
+
+    // 更新设备类型
+    appStore.toggleDevice(deviceType);
+
+    // 根据设备类型调整侧边栏状态
+    if (isDesktop.value) {
+      appStore.openSideBar();
+    } else {
+      appStore.closeSideBar();
+    }
+  });
+
+  return {
+    isDesktop,
+    isMobile,
+  };
+}
diff --git a/frontend/new-web/src/layouts/old/index.vue b/frontend/new-web/src/layouts/old/index.vue
new file mode 100644
index 00000000..951c76d4
--- /dev/null
+++ b/frontend/new-web/src/layouts/old/index.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="layout-wrapper">
+    <component :is="currentLayoutComponent" />
+
+    <!-- 设置面板 - 独立于布局组件 -->
+    <Settings v-if="isShowSettings" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useLayout } from "./composables/useLayout";
+import LeftLayout from "./views/LeftLayout.vue";
+import TopLayout from "./views/TopLayout.vue";
+import MixLayout from "./views/MixLayout.vue";
+import Settings from "./components/Settings/index.vue";
+import { LayoutMode } from "@/enums/settings/layout.enum";
+
+const { currentLayout, isShowSettings } = useLayout();
+
+// 根据当前布局模式选择对应的组件
+const currentLayoutComponent = computed(() => {
+  switch (currentLayout.value) {
+    case LayoutMode.TOP:
+      return TopLayout;
+    case LayoutMode.MIX:
+      return MixLayout;
+    case LayoutMode.LEFT:
+    default:
+      return LeftLayout;
+  }
+});
+</script>
+<style lang="scss" scoped>
+.layout-wrapper {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/frontend/new-web/src/layouts/old/views/BaseLayout.vue b/frontend/new-web/src/layouts/old/views/BaseLayout.vue
new file mode 100644
index 00000000..2310585f
--- /dev/null
+++ b/frontend/new-web/src/layouts/old/views/BaseLayout.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="layout" :class="layoutClass">
+    <!-- 移动端遮罩层 -->
+    <div v-if="isMobile && isSidebarOpen" class="layout__overlay" @click="closeSidebar" />
+
+    <!-- 布局内容插槽 -->
+    <slot></slot>
+
+    <!-- 返回顶部按钮 -->
+    <el-backtop target=".app-main">
+      <div class="i-svg:backtop w-6 h-6" />
+    </el-backtop>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useLayout } from "../composables/useLayout";
+import { useLayoutResponsive } from "../composables/useLayoutResponsive";
+
+// 布局相关
+const { layoutClass, isSidebarOpen, closeSidebar } = useLayout();
+
+// 响应式处理
+const { isMobile } = useLayoutResponsive();
+</script>
+
+<style lang="scss" scoped>
+.layout {
+  width: 100%;
+  height: 100%;
+
+  &__overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 999;
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>
diff --git a/frontend/new-web/src/layouts/old/views/LeftLayout.vue b/frontend/new-web/src/layouts/old/views/LeftLayout.vue
new file mode 100644
index 00000000..3e30a1af
--- /dev/null
+++ b/frontend/new-web/src/layouts/old/views/LeftLayout.vue
@@ -0,0 +1,135 @@
+<template>
+  <BaseLayout>
+    <!-- 左侧菜单栏 -->
+    <div class="layout__sidebar" :class="{ 'layout__sidebar--collapsed': !isSidebarOpen }">
+      <div :class="{ 'has-logo': isShowLogo }" class="layout-sidebar">
+        <!-- Logo -->
+        <AppLogo v-if="isShowLogo" :collapse="!isSidebarOpen" />
+        <!-- 主菜单内容 -->
+        <el-scrollbar>
+          <BasicMenu :data="routes" base-path="" />
+        </el-scrollbar>
+      </div>
+    </div>
+
+    <!-- 主内容区 -->
+    <div
+      :class="{
+        hasTagsView: isShowTagsView,
+        'layout__main--collapsed': !isSidebarOpen,
+      }"
+      class="layout__main"
+    >
+      <div class="fixed-header">
+        <NavBar />
+        <TagsView v-if="isShowTagsView" />
+      </div>
+      <AppMain />
+    </div>
+  </BaseLayout>
+</template>
+
+<script setup lang="ts">
+import { useLayout } from "../composables/useLayout";
+import { useLayoutMenu } from "../composables/useLayoutMenu";
+import BaseLayout from "./BaseLayout.vue";
+import AppLogo from "../components/AppLogo/index.vue";
+import NavBar from "../components/NavBar/index.vue";
+import TagsView from "../components/TagsView/index.vue";
+import AppMain from "../components/AppMain/index.vue";
+import BasicMenu from "../components/Menu/BasicMenu.vue";
+
+// 布局相关参数
+const { isShowTagsView, isShowLogo, isSidebarOpen } = useLayout();
+
+// 菜单相关
+const { routes } = useLayoutMenu();
+</script>
+
+<style lang="scss" scoped>
+.layout {
+  &__sidebar {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 999;
+    width: $sidebar-width;
+    background-color: var(--menu-background);
+    transition: width 0.28s;
+
+    &--collapsed {
+      width: $sidebar-width-collapsed;
+    }
+
+    .layout-sidebar {
+      position: relative;
+      height: 100%;
+      background-color: var(--menu-background);
+      transition: width 0.28s;
+
+      &.has-logo {
+        .el-scrollbar {
+          height: calc(100vh - $navbar-height);
+        }
+      }
+
+      :deep(.el-menu) {
+        border: none;
+      }
+    }
+  }
+
+  &__main {
+    position: relative;
+    height: 100%;
+    margin-left: $sidebar-width;
+    overflow-y: auto;
+    transition: margin-left 0.28s;
+
+    &--collapsed {
+      margin-left: $sidebar-width-collapsed;
+    }
+
+    .fixed-header {
+      position: sticky;
+      top: 0;
+      z-index: 9;
+      background-color: var(--layout-header-bg, var(--el-bg-color-overlay));
+      transition: width 0.28s;
+    }
+  }
+}
+
+/* 移动端样式 */
+.mobile {
+  .layout__sidebar {
+    width: $sidebar-width !important;
+    transition:
+      transform 0.28s,
+      width 0s;
+  }
+
+  &.hideSidebar {
+    .layout__sidebar {
+      transform: translateX(-$sidebar-width);
+    }
+  }
+
+  &.openSidebar {
+    .layout__sidebar {
+      transform: translateX(0);
+    }
+  }
+
+  .layout__main {
+    margin-left: 0 !important;
+  }
+}
+
+.hasTagsView {
+  :deep(.app-main) {
+    height: calc(100vh - $navbar-height - $tags-view-height) !important;
+  }
+}
+</style>
diff --git a/frontend/new-web/src/layouts/old/views/MixLayout.vue b/frontend/new-web/src/layouts/old/views/MixLayout.vue
new file mode 100644
index 00000000..e282dedc
--- /dev/null
+++ b/frontend/new-web/src/layouts/old/views/MixLayout.vue
@@ -0,0 +1,221 @@
+<template>
+  <BaseLayout>
+    <!-- 顶部菜单栏 -->
+    <div class="layout__header" :class="{ 'layout__header--with-tags': isShowTagsView }">
+      <div class="layout__header-content">
+        <!-- Logo区域 -->
+        <div v-if="isShowLogo" class="layout__header-logo">
+          <AppLogo :collapse="isLogoCollapsed" />
+        </div>
+
+        <!-- 顶部菜单区域 -->
+        <div class="layout__header-menu">
+          <MixTopMenu />
+        </div>
+
+        <!-- 右侧操作区域 -->
+        <div class="layout__header-actions">
+          <NavbarActions />
+        </div>
+      </div>
+    </div>
+
+    <!-- 主内容区容器 -->
+    <div class="layout__container">
+      <!-- 左侧菜单栏 -->
+      <div class="layout__sidebar--left" :class="{ 'layout__sidebar--collapsed': !isSidebarOpen }">
+        <el-scrollbar>
+          <!-- 仅切换顶级模块时重建侧栏，避免 :key=route.path 导致每次路由变化整表重建、展开态丢失 -->
+          <BasicMenu :key="mixSideMenuKey" :data="sideMenuRoutes" :base-path="leftMenuBasePath" />
+        </el-scrollbar>
+        <!-- 侧边栏切换按钮 -->
+        <div class="layout__sidebar-toggle">
+          <Hamburger :is-active="isSidebarOpen" @toggle-click="toggleSidebar" />
+        </div>
+      </div>
+
+      <!-- 主内容区 -->
+      <div :class="{ hasTagsView: isShowTagsView }" class="layout__main">
+        <TagsView v-if="isShowTagsView" />
+        <AppMain />
+      </div>
+    </div>
+  </BaseLayout>
+</template>
+
+<script setup lang="ts">
+import { useRoute } from "vue-router";
+import { useWindowSize } from "@vueuse/core";
+import { useLayout } from "../composables/useLayout";
+import { useLayoutMenu } from "../composables/useLayoutMenu";
+import BaseLayout from "./BaseLayout.vue";
+import AppLogo from "../components/AppLogo/index.vue";
+import MixTopMenu from "../components/Menu/MixTopMenu.vue";
+import NavbarActions from "../components/NavBar/components/NavbarActions.vue";
+import TagsView from "../components/TagsView/index.vue";
+import AppMain from "../components/AppMain/index.vue";
+import BasicMenu from "../components/Menu/BasicMenu.vue";
+import Hamburger from "@/components/Hamburger/index.vue";
+import { computed } from "vue";
+
+const route = useRoute();
+
+// 布局相关参数
+const { isShowTagsView, isShowLogo, isSidebarOpen, toggleSidebar } = useLayout();
+
+// 菜单相关
+const { sideMenuRoutes, activeTopMenuPath } = useLayoutMenu();
+
+// 响应式窗口尺寸
+const { width } = useWindowSize();
+
+// 只有在小屏设备（移动设备）时才折叠Logo（只显示图标，隐藏文字）
+const isLogoCollapsed = computed(() => width.value < 768);
+
+// 混合布局左侧菜单 basePath 兜底，避免初始化时 activeTopMenuPath 为空导致路径拼接异常
+const leftMenuBasePath = computed(() => {
+  if (activeTopMenuPath.value) return activeTopMenuPath.value;
+  return route.path.match(/^\/[^/]+/)?.[0] || "/";
+});
+
+/** 与顶部一级模块一致，同模块内路由切换不重建侧栏（保留展开）；切换模块时重建 */
+const mixSideMenuKey = computed(() => activeTopMenuPath.value || leftMenuBasePath.value);
+</script>
+
+<style lang="scss" scoped>
+.layout {
+  &__header {
+    position: sticky;
+    top: 0;
+    z-index: 999;
+    width: 100%;
+    height: $navbar-height;
+    color: var(--menu-text);
+    background-color: var(--layout-header-bg, var(--menu-background));
+    border-bottom: 1px solid var(--el-border-color-light);
+
+    &--with-tags {
+      border-bottom: none;
+    }
+
+    &-content {
+      display: flex;
+      align-items: center;
+      height: 100%;
+      padding: 0;
+    }
+
+    &-logo {
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+    }
+
+    &-menu {
+      display: flex;
+      flex: 1;
+      align-items: center;
+      min-width: 0;
+      height: 100%;
+      overflow: hidden;
+
+      :deep(.el-menu) {
+        height: 100%;
+        background-color: transparent;
+        border: none;
+      }
+
+      :deep(.el-menu--horizontal) {
+        display: flex;
+        align-items: center;
+        height: 100%;
+      }
+    }
+
+    &-actions {
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      height: 100%;
+    }
+  }
+
+  &__container {
+    display: flex;
+    height: calc(100vh - $navbar-height);
+    padding-top: 0;
+
+    .layout__sidebar--left {
+      position: relative;
+      width: $sidebar-width;
+      height: 100%;
+      background-color: var(--menu-background);
+      transition: width 0.28s;
+
+      &.layout__sidebar--collapsed {
+        width: $sidebar-width-collapsed !important;
+      }
+
+      :deep(.el-scrollbar) {
+        height: calc(100vh - $navbar-height - 50px);
+      }
+
+      :deep(.el-menu) {
+        height: 100%;
+        border: none;
+      }
+
+      .layout__sidebar-toggle {
+        position: absolute;
+        bottom: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 50px;
+        line-height: 50px;
+        background-color: var(--menu-background);
+        box-shadow: var(--el-box-shadow-light);
+      }
+    }
+
+    .layout__main {
+      flex: 1;
+      min-width: 0;
+      height: 100%;
+      margin-left: 0;
+      overflow-y: auto;
+      background-color: var(--el-bg-color-page);
+    }
+  }
+}
+
+/* 移动端样式 */
+:deep(.mobile) {
+  .layout__container {
+    .layout__sidebar--left {
+      position: fixed;
+      top: $navbar-height;
+      bottom: 0;
+      left: 0;
+      z-index: 1000;
+      transition: transform 0.28s;
+    }
+  }
+
+  &.hideSidebar {
+    .layout__sidebar--left {
+      width: $sidebar-width !important;
+      transform: translateX(-$sidebar-width);
+    }
+  }
+}
+
+:deep(.hasTagsView) {
+  .app-main {
+    height: calc(100vh - $navbar-height - $tags-view-height) !important;
+  }
+}
+</style>
diff --git a/frontend/new-web/src/layouts/old/views/TopLayout.vue b/frontend/new-web/src/layouts/old/views/TopLayout.vue
new file mode 100644
index 00000000..0489442c
--- /dev/null
+++ b/frontend/new-web/src/layouts/old/views/TopLayout.vue
@@ -0,0 +1,164 @@
+<template>
+  <BaseLayout>
+    <!-- 顶部菜单栏 -->
+    <div class="layout__header">
+      <div class="layout__header-left">
+        <!-- Logo区域 -->
+        <div v-if="isShowLogo" class="layout__header-logo">
+          <AppLogo :collapse="isLogoCollapsed" />
+        </div>
+
+        <!-- 顶部菜单区域 -->
+        <div class="layout__header-menu">
+          <BasicMenu :data="topMenuItems" menu-mode="horizontal" base-path="" />
+        </div>
+
+        <!-- 右侧操作区域 -->
+        <div class="layout__header-right">
+          <NavbarActions />
+        </div>
+      </div>
+    </div>
+
+    <!-- 主内容区 -->
+    <div :class="{ hasTagsView: isShowTagsView }" class="layout__main">
+      <TagsView v-if="isShowTagsView" />
+      <AppMain />
+    </div>
+  </BaseLayout>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useWindowSize } from "@vueuse/core";
+import { useLayout } from "../composables/useLayout";
+import { usePermissionStore } from "@/store";
+import BaseLayout from "./BaseLayout.vue";
+import AppLogo from "../components/AppLogo/index.vue";
+import BasicMenu from "../components/Menu/BasicMenu.vue";
+import NavbarActions from "../components/NavBar/components/NavbarActions.vue";
+import TagsView from "../components/TagsView/index.vue";
+import AppMain from "../components/AppMain/index.vue";
+
+// 布局相关参数
+const { isShowTagsView, isShowLogo } = useLayout();
+
+// 菜单相关
+const permissionStore = usePermissionStore();
+const topMenuItems = computed(() => {
+  return permissionStore.routes.filter((item) => !item.meta?.hidden);
+});
+
+// 响应式窗口尺寸
+const { width } = useWindowSize();
+
+// 只有在小屏设备（移动设备）时才折叠Logo（只显示图标，隐藏文字）
+const isLogoCollapsed = computed(() => width.value < 768);
+</script>
+
+<style lang="scss" scoped>
+.layout {
+  &__header {
+    position: sticky;
+    top: 0;
+    z-index: 999;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: $navbar-height;
+    background-color: var(--layout-header-bg, var(--menu-background));
+
+    &-left {
+      display: flex;
+      flex: 1;
+      align-items: center;
+      min-width: 0;
+      height: 100%;
+    }
+
+    &-logo {
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      height: 100%;
+
+      :deep(.logo) {
+        height: $navbar-height;
+      }
+    }
+
+    &-menu {
+      display: flex;
+      flex: 1;
+      align-items: center;
+      min-width: 0;
+      height: 100%;
+      overflow: hidden;
+
+      :deep(.el-menu) {
+        height: 100%;
+        background-color: transparent;
+        border: none;
+      }
+
+      :deep(.el-menu--horizontal) {
+        flex: 1;
+        min-width: 0;
+        height: $navbar-height;
+        overflow: hidden;
+        line-height: $navbar-height;
+        background-color: transparent;
+        border: none;
+
+        .el-menu-item {
+          height: $navbar-height;
+          line-height: $navbar-height;
+        }
+
+        .el-sub-menu {
+          .el-sub-menu__title {
+            height: $navbar-height;
+            line-height: $navbar-height;
+          }
+
+          &.has-active-child {
+            .el-sub-menu__title {
+              color: var(--el-color-primary) !important;
+              border-bottom: 2px solid var(--el-color-primary) !important;
+
+              .menu-icon {
+                color: var(--el-color-primary) !important;
+              }
+            }
+          }
+        }
+
+        .el-menu--popup {
+          min-width: 160px;
+        }
+      }
+    }
+
+    &-right {
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      height: 100%;
+      padding-left: 12px;
+    }
+  }
+
+  &__main {
+    height: calc(100vh - $navbar-height);
+    overflow-y: auto;
+  }
+}
+
+// 当存在TagsView时的样式调整
+.hasTagsView {
+  :deep(.app-main) {
+    height: calc(100vh - $navbar-height - $tags-view-height) !important;
+  }
+}
+</style>
diff --git a/frontend/new-web/src/views/index/style.scss b/frontend/new-web/src/layouts/style.scss
similarity index 100%
rename from frontend/new-web/src/views/index/style.scss
rename to frontend/new-web/src/layouts/style.scss
diff --git a/frontend/new-web/src/locales/index.ts b/frontend/new-web/src/locales/index.ts
index 36c26489..5f390d05 100644
--- a/frontend/new-web/src/locales/index.ts
+++ b/frontend/new-web/src/locales/index.ts
@@ -18,40 +18,40 @@
  * - en: English
  *
  * @module locales
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
-import { createI18n } from 'vue-i18n'
-import type { I18n, I18nOptions } from 'vue-i18n'
-import { LanguageEnum } from '@/enums/appEnum'
-import { getSystemStorage } from '@/utils/storage'
-import { StorageKeyManager } from '@/utils/storage/storage-key-manager'
+import { createI18n } from "vue-i18n";
+import type { I18n, I18nOptions } from "vue-i18n";
+import { LanguageEnum } from "@/enums/appEnum";
+import { getSystemStorage } from "@/utils/storage";
+import { StorageKeyManager } from "@/utils/storage/storage-key-manager";
 
 // 同步导入语言文件
-import enMessages from './langs/en.json'
-import zhMessages from './langs/zh.json'
+import enMessages from "./langs/en.json";
+import zhMessages from "./langs/zh.json";
 
 /**
  * 存储键管理器实例
  */
-const storageKeyManager = new StorageKeyManager()
+const storageKeyManager = new StorageKeyManager();
 
 /**
  * 语言消息对象
  */
 const messages = {
   [LanguageEnum.EN]: enMessages,
-  [LanguageEnum.ZH]: zhMessages
-}
+  [LanguageEnum.ZH]: zhMessages,
+};
 
 /**
  * 语言选项列表
  * 用于语言切换下拉框
  */
 export const languageOptions = [
-  { value: LanguageEnum.ZH, label: '简体中文' },
-  { value: LanguageEnum.EN, label: 'English' }
-]
+  { value: LanguageEnum.ZH, label: "简体中文" },
+  { value: LanguageEnum.EN, label: "English" },
+];
 
 /**
  * 从存储中获取语言设置
@@ -60,36 +60,36 @@ export const languageOptions = [
 const getDefaultLanguage = (): LanguageEnum => {
   // 尝试从版本化的存储中获取语言设置
   try {
-    const storageKey = storageKeyManager.getStorageKey('user')
-    const userStore = localStorage.getItem(storageKey)
+    const storageKey = storageKeyManager.getStorageKey("user");
+    const userStore = localStorage.getItem(storageKey);
 
     if (userStore) {
-      const { language } = JSON.parse(userStore)
+      const { language } = JSON.parse(userStore);
       if (language && Object.values(LanguageEnum).includes(language)) {
-        return language
+        return language;
       }
     }
   } catch (error) {
-    console.warn('[i18n] 从版本化存储获取语言设置失败:', error)
+    console.warn("[i18n] 从版本化存储获取语言设置失败:", error);
   }
 
   // 尝试从系统存储中获取语言设置
   try {
-    const sys = getSystemStorage()
+    const sys = getSystemStorage();
     if (sys) {
-      const { user } = JSON.parse(sys)
+      const { user } = JSON.parse(sys);
       if (user?.language && Object.values(LanguageEnum).includes(user.language)) {
-        return user.language
+        return user.language;
       }
     }
   } catch (error) {
-    console.warn('[i18n] 从系统存储获取语言设置失败:', error)
+    console.warn("[i18n] 从系统存储获取语言设置失败:", error);
   }
 
   // 返回默认语言
-  console.debug('[i18n] 使用默认语言:', LanguageEnum.ZH)
-  return LanguageEnum.ZH
-}
+  console.debug("[i18n] 使用默认语言:", LanguageEnum.ZH);
+  return LanguageEnum.ZH;
+};
 
 /**
  * i18n 配置选项
@@ -99,25 +99,25 @@ const i18nOptions: I18nOptions = {
   legacy: false,
   globalInjection: true,
   fallbackLocale: LanguageEnum.ZH,
-  messages
-}
+  messages,
+};
 
 /**
  * i18n 实例
  */
-const i18n: I18n = createI18n(i18nOptions)
+const i18n: I18n = createI18n(i18nOptions);
 
 /**
  * 翻译函数类型
  */
 interface Translation {
-  (key: string): string
+  (key: string): string;
 }
 
 /**
  * 全局翻译函数
  * 可在任何地方使用，无需导入 useI18n
  */
-export const $t = i18n.global.t as Translation
+export const $t = i18n.global.t as Translation;
 
-export default i18n
+export default i18n;
diff --git a/frontend/new-web/src/locales/langs/en.json b/frontend/new-web/src/locales/langs/en.json
index 712f0163..16cb119a 100644
--- a/frontend/new-web/src/locales/langs/en.json
+++ b/frontend/new-web/src/locales/langs/en.json
@@ -36,7 +36,67 @@
     "tips": "Prompt",
     "cancel": "Cancel",
     "confirm": "Confirm",
-    "logOutTips": "Do you want to log out?"
+    "logoutTips": "Do you want to log out?",
+    "reset": "Reset",
+    "save": "Save",
+    "edit": "Edit",
+    "delete": "Delete",
+    "add": "Add",
+    "clear": "Clear",
+    "export": "Export",
+    "import": "Import",
+    "query": "Query",
+    "resetQuery": "Reset Query",
+    "back": "Back",
+    "close": "Close",
+    "refresh": "Refresh",
+    "inputText": "Please enter",
+    "selectText": "Please select",
+    "startTimeText": "Start Time",
+    "endTimeText": "End Time",
+    "login": "Login",
+    "required": "This field is required",
+    "loginOut": "Logout",
+    "document": "Project Documentation",
+    "reminder": "Reminder",
+    "loginOutMessage": "Are you sure you want to log out?",
+    "ok": "OK",
+    "reload": "Reload",
+    "closeTab": "Close Tab",
+    "closeTheLeftTab": "Close Left Tabs",
+    "closeTheRightTab": "Close Right Tabs",
+    "closeOther": "Close Other Tabs",
+    "closeAll": "Close All Tabs",
+    "prevLabel": "Previous",
+    "nextLabel": "Next",
+    "skipLabel": "Skip",
+    "doneLabel": "Done",
+    "menu": "Menu",
+    "menuDes": "Menu rendered based on route structure",
+    "collapse": "Collapse/Expand",
+    "collapseDes": "Expand and collapse the menu bar",
+    "tagsView": "Tags View",
+    "tagsViewDes": "Used to record route history",
+    "tool": "Tool",
+    "toolDes": "Used to customize system settings",
+    "shrink": "Collapse",
+    "expand": "Expand",
+    "delMessage": "Delete selected data?",
+    "delWarning": "Warning",
+    "delOk": "OK",
+    "delCancel": "Cancel",
+    "delNoData": "Please select data to delete",
+    "delSuccess": "Deleted successfully",
+    "fullscreen": "Fullscreen",
+    "size": "Size",
+    "columnSetting": "Column Settings",
+    "lengthRange": "Length must be between {min} and {max} characters",
+    "notSpace": "Cannot contain spaces",
+    "notSpecialCharacters": "Cannot contain special characters",
+    "isEqual": "The two inputs are inconsistent",
+    "setting": "Settings",
+    "copySuccess": "Copy successfully",
+    "copyFailed": "Copy failed"
   },
   "search": {
     "placeholder": "Search page",
@@ -109,6 +169,113 @@
       "resetFailed": "Reset failed, please refresh the page and try again"
     }
   },
+  "settings": {
+    "menuType": {
+      "title": "Menu Layout",
+      "list": ["Vertical", "Horizontal", "Mixed", "Dual"]
+    },
+    "theme": {
+      "title": "Theme Style",
+      "list": ["Light", "Dark", "System"]
+    },
+    "menu": {
+      "title": "Menu Style"
+    },
+    "color": {
+      "title": "Theme Color"
+    },
+    "box": {
+      "title": "Box Style",
+      "list": ["Border", "Shadow"]
+    },
+    "container": {
+      "title": "Container Width",
+      "list": ["Full", "Boxed"]
+    },
+    "basics": {
+      "title": "Basic Config",
+      "list": {
+        "multiTab": "Show work tab",
+        "accordion": "Sidebar opens accordion",
+        "collapseSidebar": "Show sidebar button",
+        "reloadPage": "Show reload page button",
+        "fastEnter": "Show fast enter",
+        "breadcrumb": "Show crumb navigation",
+        "language": "Show multilingual selection",
+        "progressBar": "Show top progress bar",
+        "weakMode": "Color Weakness Mode",
+        "watermark": "Global watermark",
+        "menuWidth": "Menu width",
+        "tabStyle": "Tab style",
+        "pageTransition": "Page animation",
+        "borderRadius": "Custom radius"
+      }
+    },
+    "tabStyle": {
+      "default": "Default",
+      "card": "Card",
+      "google": "Chrome"
+    },
+    "transition": {
+      "list": {
+        "none": "None",
+        "fade": "Fade",
+        "slideLeft": "Slide Left",
+        "slideBottom": "Slide Bottom",
+        "slideTop": "Slide Top"
+      }
+    },
+    "actions": {
+      "resetConfig": "Reset Config",
+      "copyConfig": "Copy Config",
+      "copySuccess": "Configuration copied to clipboard, paste it into src/config/setting.ts file",
+      "copyFailed": "Copy failed, please try again",
+      "resetFailed": "Reset failed, please refresh the page and try again"
+    },
+    "project": "Project Settings",
+    "themeSetting": "Theme Settings",
+    "themeColor": "Theme Color",
+    "themeColorTip": "Theme Color",
+    "customColor": "Custom Color",
+    "darkMode": "Dark Mode",
+    "layoutSetting": "Layout Settings",
+    "sidebarColorScheme": "Sidebar Color Scheme",
+    "showTagsView": "Show Tags View",
+    "showAppLogo": "Show App Logo",
+    "showWatermark": "Show Watermark",
+    "grayMode": "Gray Mode",
+    "userEnableAi": "Enable AI Assistant",
+    "pageSwitchingAnimation": "Page Switching Animation",
+    "showDesktopTools": "Tools Settings",
+    "showMenuSearch": "Show Menu Search",
+    "showFullscreen": "Show Fullscreen Toggle",
+    "showSizeSelect": "Show Layout Size",
+    "showLangSelect": "Show Language Select",
+    "showNotification": "Show Notification",
+    "classicBlue": "Classic Blue",
+    "minimalWhite": "Minimal White",
+    "leftLayout": "Left Mode",
+    "topLayout": "Top Mode",
+    "mixLayout": "Mix Mode",
+    "configManagement": "Config Management",
+    "copyConfigDescription": "Generate current settings code and copy to clipboard, then merge into src/config/setting.ts",
+    "resetConfigDescription": "Restore all settings to system default values",
+    "systemTheme": "System Theme",
+    "showGuide": "Show Guide",
+    "showSettings": "Show Settings",
+    "interface": "Interface",
+    "navigation": "Navigation",
+    "copySuccess": "Copy Success",
+    "resetSuccess": "Reset Success",
+    "none": "None",
+    "fade": "Fade",
+    "fade-slide": "Fade Slide",
+    "fade-scale": "Fade Scale",
+    "slide-left-right": "Slide Left Right",
+    "zoom-in-out": "Zoom In Out",
+    "slide-up-down": "Slide Up Down",
+    "bounce": "Bounce"
+  },
   "notice": {
     "title": "Notice",
     "btnRead": "Mark as read",
@@ -130,18 +297,38 @@
   "login": {
     "leftView": {
       "title": "A backend system of beauty and efficiency",
-      "subTitle": "A sleek and practical interface for a great user experience"
+      "subTitle": "Provide secure, efficient, and scalable management solutions to help enterprises digitalize and grow their businesses."
     },
-    "title": "Welcome back",
-    "subTitle": "Please enter your account and password to login",
+    "title": "Welcome back 👋",
+    "subTitle": "Enter your account details to start managing your project",
+    "versionLabel": "Version",
+    "quickSelectAccount": "Quick select account",
+    "mobileLogin": "Mobile login",
+    "mobileLoginSubTitle": "Enter your mobile number to start managing your projects",
+    "mobilePhonePlaceholder": "Mobile number",
+    "getSmsCode": "Get code",
+    "smsCodeSentMock": "Verification code sent (demo only)",
+    "smsCodeRequired": "Enter the 6-digit SMS code",
+    "mobileLoginPending": "Mobile login API is not connected yet — UI preview only",
+    "backToAccountLogin": "Back",
+    "qrLogin": "QR code login",
+    "qrLoginTitle": "Welcome back 📱",
+    "qrLoginSubTitle": "Scan the QR code with your phone to sign in",
+    "qrLoginHint": "After scanning, tap Confirm on your phone to finish signing in",
+    "oauthNoticeTitle": "Notice",
+    "oauthLoginSuccess": "Signed in with your social account",
+    "oauthLoginFailed": "Social sign-in failed. Try username and password.",
+    "comingSoon": "Coming soon",
+    "accountLoginTab": "Account",
+    "quickLoginTab": "Quick login",
     "roles": {
       "super": "Super Admin",
       "admin": "Admin",
       "user": "User"
     },
     "placeholder": {
-      "username": "Please enter your account",
-      "password": "Please enter your password",
+      "username": "Please enter username",
+      "password": "Please enter password",
       "slider": "Please slide to verify"
     },
     "sliderText": "Please slide to verify",
@@ -149,16 +336,84 @@
     "rememberPwd": "Remember password",
     "forgetPwd": "Forgot password",
     "btnText": "Login",
+    "backLoginBtnText": "Back to Login",
     "noAccount": "No account yet?",
     "register": "Register",
     "success": {
       "title": "Login successful",
       "message": "Welcome back"
+    },
+    "themeToggle": "Theme Switch",
+    "languageToggle": "Language Switch",
+    "dark": "Dark",
+    "light": "Light",
+    "auto": "Auto",
+    "newPassword": "Please enter new Password",
+    "captchaCode": "Please enter Verify Code",
+    "captchaClickHint": "Click to refresh captcha",
+    "capsLock": "Caps Lock is On",
+    "message": {
+      "username": {
+        "required": "Please enter Username"
+      },
+      "password": {
+        "required": "Please enter Password",
+        "min": "The password cannot be less than 6 characters",
+        "confirm": "Please confirm the password again",
+        "inconformity": "The two password entries are inconsistent"
+      },
+      "captchaCode": {
+        "required": "Please enter Verify Code"
+      },
+      "mobile": {
+        "required": "Please enter mobile number",
+        "invalid": "Invalid mobile number format",
+        "exist": "Mobile number already exists"
+      },
+      "email": {
+        "required": "Please enter email",
+        "invalid": "Invalid email format",
+        "exist": "Email already exists"
+      },
+      "name": {
+        "required": "Please enter account",
+        "invalid": "Invalid account format",
+        "min": "Account cannot be less than 2 characters"
+      },
+      "agree": {
+        "required": "Please agree to the User Agreement"
+      }
+    },
+    "oauthTooltip": {
+      "wechat": "WeChat",
+      "qq": "QQ",
+      "github": "GitHub",
+      "gitee": "Gitee"
+    },
+    "otherLoginMethods": "Other",
+    "resetPassword": "Reset password",
+    "thinkOfPasswd": "Remember your password?",
+    "agree": "I have read and agree to the",
+    "userAgreement": "User Agreement",
+    "haveAccount": "Already have an account?",
+    "noAccountText": "Don't have an account?",
+    "quickFill": "Quick fill",
+    "quickLoginTip": "Click user avatar to login quickly",
+    "selectUser": "Select a user",
+    "reg": "Register",
+    "panelAlign": {
+      "label": "Column layout",
+      "left": "Wide illustration",
+      "center": "Balanced",
+      "right": "Wide form"
     }
   },
+  "loginForm": {
+    "remember": "Remember me"
+  },
   "forgetPassword": {
     "title": "Forgot password?",
-    "subTitle": "Enter your email to reset your password",
+    "subTitle": "Enter your username and set a new password",
     "placeholder": "Please enter your email",
     "submitBtnText": "Submit",
     "backBtnText": "Back"
@@ -167,16 +422,16 @@
     "title": "Create account",
     "subTitle": "Welcome to join us, please fill in the following information to complete the registration",
     "placeholder": {
-      "username": "Please enter your account",
-      "password": "Please enter your password",
-      "confirmPassword": "Please enter your password again"
+      "username": "Please enter account",
+      "password": "Please enter password",
+      "confirmPassword": "Please enter password again"
     },
     "rule": {
       "confirmPasswordRequired": "Please enter your password again",
       "passwordMismatch": "The two passwords are inconsistent!",
-      "usernameLength": "The length is 3 to 20 characters",
-      "passwordLength": "The password length cannot be less than 6 digits",
-      "agreementRequired": "Please agree to the privacy policy"
+      "usernameLength": "Length is 3 to 20 characters",
+      "passwordLength": "Password length cannot be less than 6 digits",
+      "agreementRequired": "Please agree to privacy policy"
     },
     "agreeText": "I agree",
     "privacyPolicy": "Privacy policy",
@@ -184,6 +439,15 @@
     "hasAccount": "Already have an account?",
     "toLogin": "To login"
   },
+  "lock": {
+    "unlock": "Click to unlock",
+    "placeholder": "Please enter lock screen password",
+    "message": "Password error",
+    "backToLogin": "Back to login",
+    "entrySystem": "Enter system",
+    "lockScreen": "Lock screen",
+    "required": "Please enter password"
+  },
   "lockScreen": {
     "pwdError": "Password error",
     "lock": {
@@ -194,7 +458,15 @@
       "inputPlaceholder": "Please input unlock password",
       "btnText": "Unlock",
       "backBtnText": "Back to login"
-    }
+    },
+    "lockScreen": "Lock screen",
+    "lockPassword": "Lock screen password",
+    "unlockText": "Click to unlock",
+    "backToLogin": "Back to login",
+    "entrySystem": "Entry the system",
+    "placeholder": "Please enter the lock screen password",
+    "required": "Please enter the lock screen password",
+    "message": "Lock screen password error"
   },
   "greeting": {
     "dawn": "Good morning!",
@@ -206,7 +478,11 @@
     "gohome": "Go Home",
     "403": "Sorry, you do not have permission to access this page",
     "404": "Sorry, the page you are trying to access does not exist",
-    "500": "Sorry, there was an error on the server"
+    "500": "Sorry, there was an error on the server",
+    "noPermission": "Sorry, you don't have permission to access this page.",
+    "pageError": "Sorry, the page you visited does not exist.",
+    "networkError": "Sorry, the server reported an error.",
+    "returnToHome": "Return to home"
   },
   "menus": {
     "login": {
@@ -221,8 +497,15 @@
     "outside": {
       "title": "Outside"
     },
+    "workbench": {
+      "title": "Workbench"
+    },
+    "portal": {
+      "title": "Data Portal"
+    },
     "dashboard": {
       "title": "Dashboard",
+      "demoTitle": "Template dashboard",
       "console": "Console",
       "analysis": "Analysis",
       "ecommerce": "Ecommerce"
@@ -344,5 +627,47 @@
     "zebra": "Zebra",
     "border": "Border",
     "headerBackground": "Header BG"
+  },
+  "navbar": {
+    "dashboard": "Dashboard",
+    "logout": "Logout",
+    "document": "Document",
+    "gitee": "Gitee",
+    "lock": "Lock",
+    "unlock": "Unlock",
+    "profile": "User Profile",
+    "config": "Config Center",
+    "tour": "Project Tour",
+    "refresh": "Refresh",
+    "close": "Close",
+    "closeLeft": "Close Left",
+    "closeRight": "Close Right",
+    "closeOther": "Close Other",
+    "closeAll": "Close All",
+    "refreshCache": "Refresh Cache"
+  },
+  "route": {
+    "dashboard": "Dashboard",
+    "document": "Document"
+  },
+  "sizeSelect": {
+    "tooltip": "Layout Size",
+    "default": "Default",
+    "large": "Large",
+    "small": "Small",
+    "message": {
+      "success": "Switch Layout Size Successful!"
+    }
+  },
+  "langSelect": {
+    "message": {
+      "success": "Switch Language Successful!"
+    }
+  },
+  "error": {
+    "noPermission": "Sorry, you don't have permission to access this page.",
+    "pageError": "Sorry, the page you visited does not exist.",
+    "networkError": "Sorry, the server reported an error.",
+    "returnToHome": "Return to home"
   }
 }
diff --git a/frontend/new-web/src/locales/langs/zh.json b/frontend/new-web/src/locales/langs/zh.json
index 39421c5a..419aebe7 100644
--- a/frontend/new-web/src/locales/langs/zh.json
+++ b/frontend/new-web/src/locales/langs/zh.json
@@ -36,7 +36,67 @@
     "tips": "提示",
     "cancel": "取消",
     "confirm": "确定",
-    "logOutTips": "您是否要退出登录?"
+    "logoutTips": "您是否要退出登录?",
+    "reset": "重置",
+    "save": "保存",
+    "edit": "编辑",
+    "delete": "删除",
+    "add": "添加",
+    "clear": "清除",
+    "export": "导出",
+    "import": "导入",
+    "query": "查询",
+    "resetQuery": "重置查询",
+    "back": "返回",
+    "close": "关闭",
+    "refresh": "刷新",
+    "inputText": "请输入",
+    "selectText": "请选择",
+    "startTimeText": "开始时间",
+    "endTimeText": "结束时间",
+    "login": "登录",
+    "required": "该项为必填项",
+    "loginOut": "退出系统",
+    "document": "项目文档",
+    "reminder": "温馨提示",
+    "loginOutMessage": "是否退出本系统？",
+    "ok": "确定",
+    "reload": "重新加载",
+    "closeTab": "关闭标签页",
+    "closeTheLeftTab": "关闭左侧标签页",
+    "closeTheRightTab": "关闭右侧标签页",
+    "closeOther": "关闭其它标签页",
+    "closeAll": "关闭全部标签页",
+    "prevLabel": "上一步",
+    "nextLabel": "下一步",
+    "skipLabel": "跳过",
+    "doneLabel": "结束",
+    "menu": "菜单",
+    "menuDes": "以路由的结构渲染的菜单栏",
+    "collapse": "展开缩收",
+    "collapseDes": "展开和缩放菜单栏",
+    "tagsView": "标签页",
+    "tagsViewDes": "用于记录路由历史记录",
+    "tool": "工具",
+    "toolDes": "用于设置定制系统",
+    "shrink": "收起",
+    "expand": "展开",
+    "delMessage": "是否删除所选中数据？",
+    "delWarning": "提示",
+    "delOk": "确定",
+    "delCancel": "取消",
+    "delNoData": "请选择需要删除的数据",
+    "delSuccess": "删除成功",
+    "fullscreen": "全屏",
+    "size": "尺寸",
+    "columnSetting": "列设置",
+    "lengthRange": "长度在 {min} 到 {max} 个字符",
+    "notSpace": "不能包含空格",
+    "notSpecialCharacters": "不能包含特殊字符",
+    "isEqual": "两次输入不一致",
+    "setting": "设置",
+    "copySuccess": "复制成功",
+    "copyFailed": "复制失败"
   },
   "search": {
     "placeholder": "搜索页面",
@@ -74,8 +134,8 @@
         "multiTab": "开启多标签栏",
         "accordion": "侧边栏开启手风琴模式",
         "collapseSidebar": "显示折叠侧边栏按钮",
-        "fastEnter": "显示快速入口",
         "reloadPage": "显示重载页面按钮",
+        "fastEnter": "显示快速入口",
         "breadcrumb": "显示全局面包屑导航",
         "language": "显示多语言选择",
         "progressBar": "显示顶部进度条",
@@ -109,6 +169,113 @@
       "resetFailed": "重置失败，请刷新页面后重试"
     }
   },
+  "settings": {
+    "menuType": {
+      "title": "菜单布局",
+      "list": ["垂直", "水平", "混合", "双列"]
+    },
+    "theme": {
+      "title": "主题风格",
+      "list": ["浅色", "深色", "系统"]
+    },
+    "menu": {
+      "title": "菜单风格"
+    },
+    "color": {
+      "title": "系统主题色"
+    },
+    "box": {
+      "title": "盒子样式",
+      "list": ["边框", "阴影"]
+    },
+    "container": {
+      "title": "容器宽度",
+      "list": ["铺满", "定宽"]
+    },
+    "basics": {
+      "title": "基础配置",
+      "list": {
+        "multiTab": "开启多标签栏",
+        "accordion": "侧边栏开启手风琴模式",
+        "collapseSidebar": "显示折叠侧边栏按钮",
+        "reloadPage": "显示重载页面按钮",
+        "fastEnter": "显示快速入口",
+        "breadcrumb": "显示全局面包屑导航",
+        "language": "显示多语言选择",
+        "progressBar": "显示顶部进度条",
+        "weakMode": "色弱模式",
+        "watermark": "全局水印",
+        "menuWidth": "菜单宽度",
+        "tabStyle": "标签页风格",
+        "pageTransition": "页面切换动画",
+        "borderRadius": "自定义圆角"
+      }
+    },
+    "tabStyle": {
+      "default": "默认",
+      "card": "卡片",
+      "google": "谷歌"
+    },
+    "transition": {
+      "list": {
+        "none": "无动画",
+        "fade": "淡入淡出",
+        "slideLeft": "左侧滑入",
+        "slideBottom": "下方滑入",
+        "slideTop": "上方滑入"
+      }
+    },
+    "actions": {
+      "resetConfig": "重置配置",
+      "copyConfig": "复制配置",
+      "copySuccess": "配置已复制到剪贴板，可粘贴到 src/config/setting.ts 文件中",
+      "copyFailed": "复制失败，请重试",
+      "resetFailed": "重置失败，请刷新页面后重试"
+    },
+    "project": "项目配置",
+    "themeSetting": "主题设置",
+    "themeColor": "主题颜色",
+    "themeColorTip": "主题颜色",
+    "customColor": "自定义颜色",
+    "darkMode": "暗黑模式",
+    "layoutSetting": "布局设置",
+    "sidebarColorScheme": "侧边栏配色",
+    "showTagsView": "显示页签",
+    "showAppLogo": "显示Logo",
+    "showWatermark": "显示水印",
+    "grayMode": "灰色模式",
+    "userEnableAi": "AI 助手",
+    "pageSwitchingAnimation": "切换动画",
+    "showDesktopTools": "工具设置",
+    "showMenuSearch": "显示菜单搜索",
+    "showFullscreen": "显示全屏切换",
+    "showSizeSelect": "显示布局大小",
+    "showLangSelect": "显示语言选择",
+    "showNotification": "显示通知",
+    "classicBlue": "经典蓝",
+    "minimalWhite": "极简白",
+    "leftLayout": "左侧模式",
+    "topLayout": "顶部模式",
+    "mixLayout": "混合模式",
+    "configManagement": "配置管理",
+    "copyConfigDescription": "生成当前设置的代码并复制到剪贴板，然后覆盖 src/config/setting.ts 中相应配置",
+    "resetConfigDescription": "恢复所有设置为系统默认值",
+    "systemTheme": "系统主题",
+    "showGuide": "启动引导",
+    "showSettings": "显示设置",
+    "interface": "界面设置",
+    "navigation": "导航主题",
+    "copySuccess": "复制成功",
+    "resetSuccess": "重置成功",
+    "none": "无动画",
+    "fade": "淡入淡出",
+    "fade-slide": "平滑切换",
+    "fade-scale": "缩放切换",
+    "slide-left-right": "左右滑动",
+    "zoom-in-out": "缩放进出",
+    "slide-up-down": "上下滑动",
+    "bounce": "弹性效果"
+  },
   "notice": {
     "title": "通知",
     "btnRead": "标为已读",
@@ -130,17 +297,37 @@
   "login": {
     "leftView": {
       "title": "一款兼具设计美学与高效开发的后台系统",
-      "subTitle": "美观实用的界面，经过视觉优化，确保卓越的用户体验"
+      "subTitle": "提供安全、高效、可扩展的管理解决方案，助力企业数字化转型与业务增长。"
     },
-    "title": "欢迎回来",
-    "subTitle": "输入您的账号和密码登录",
+    "title": "欢迎回来 👋",
+    "subTitle": "请输入您的账户信息以开始管理您的项目",
+    "versionLabel": "版本",
+    "quickSelectAccount": "快速选择账号",
+    "mobileLogin": "手机号登录",
+    "mobileLoginSubTitle": "请输入您的手机号码以开始管理您的项目",
+    "mobilePhonePlaceholder": "手机号码",
+    "getSmsCode": "获取验证码",
+    "smsCodeSentMock": "验证码已发送（演示环境）",
+    "smsCodeRequired": "请输入 6 位短信验证码",
+    "mobileLoginPending": "手机号登录接口暂未接入，仅供界面演示",
+    "backToAccountLogin": "返回",
+    "qrLogin": "扫码登录",
+    "qrLoginTitle": "欢迎回来 📱",
+    "qrLoginSubTitle": "请用手机扫描二维码登录",
+    "qrLoginHint": "扫码后点击「确认」，即可完成登录",
+    "oauthNoticeTitle": "通知",
+    "oauthLoginSuccess": "第三方账号登录成功",
+    "oauthLoginFailed": "第三方登录失败，请尝试账号密码登录",
+    "comingSoon": "功能开发中，敬请期待",
+    "accountLoginTab": "账号登录",
+    "quickLoginTab": "快速登录",
     "roles": {
       "super": "超级管理员",
       "admin": "管理员",
       "user": "普通用户"
     },
     "placeholder": {
-      "username": "请输入账号",
+      "username": "请输入用户名",
       "password": "请输入密码",
       "slider": "请拖动滑块完成验证"
     },
@@ -149,16 +336,84 @@
     "rememberPwd": "记住密码",
     "forgetPwd": "忘记密码",
     "btnText": "登录",
+    "backLoginBtnText": "去登录",
     "noAccount": "还没有账号？",
     "register": "注册",
     "success": {
       "title": "登录成功",
       "message": "欢迎回来"
+    },
+    "themeToggle": "主题切换",
+    "languageToggle": "语言切换",
+    "dark": "暗黑",
+    "light": "明亮",
+    "auto": "自动",
+    "newPassword": "请输入新密码",
+    "captchaCode": "请输入验证码",
+    "captchaClickHint": "点击刷新验证码",
+    "capsLock": "大写锁定已打开",
+    "message": {
+      "username": {
+        "required": "请输入账号"
+      },
+      "password": {
+        "required": "请输入密码",
+        "min": "密码不能少于6位",
+        "confirm": "请再次确认密码",
+        "inconformity": "两次密码输入不一致"
+      },
+      "captchaCode": {
+        "required": "请输入验证码"
+      },
+      "mobile": {
+        "required": "请输入手机号",
+        "invalid": "手机号格式不正确",
+        "exist": "手机号已存在"
+      },
+      "email": {
+        "required": "请输入邮箱",
+        "invalid": "邮箱格式不正确",
+        "exist": "邮箱已存在"
+      },
+      "name": {
+        "required": "请输入名称",
+        "invalid": "名称格式不正确",
+        "min": "名称不能少于2位"
+      },
+      "agree": {
+        "required": "请先勾选同意用户协议"
+      }
+    },
+    "oauthTooltip": {
+      "wechat": "微信",
+      "qq": "QQ",
+      "github": "GitHub",
+      "gitee": "Gitee"
+    },
+    "otherLoginMethods": "其他登录方式",
+    "resetPassword": "重置密码",
+    "thinkOfPasswd": "想起密码？",
+    "agree": "我已同意并阅读",
+    "userAgreement": "用户协议",
+    "haveAccount": "已有账号？",
+    "noAccountText": "您没有账号？",
+    "quickFill": "快速填写",
+    "quickLoginTip": "点击用户头像快速登录",
+    "selectUser": "请选择用户",
+    "reg": "注 册",
+    "panelAlign": {
+      "label": "分栏布局",
+      "left": "居左",
+      "center": "居中",
+      "right": "居右"
     }
   },
+  "loginForm": {
+    "remember": "记住我"
+  },
   "forgetPassword": {
     "title": "忘记密码？",
-    "subTitle": "输入您的电子邮件来重置您的密码",
+    "subTitle": "请输入账号并设置新密码",
     "placeholder": "请输入您的电子邮件",
     "submitBtnText": "提交",
     "backBtnText": "返回"
@@ -184,6 +439,15 @@
     "hasAccount": "已有账号？",
     "toLogin": "去登录"
   },
+  "lock": {
+    "unlock": "点击解锁",
+    "placeholder": "请输入锁屏密码",
+    "message": "密码错误",
+    "backToLogin": "返回登录",
+    "entrySystem": "进入系统",
+    "lockScreen": "锁定屏幕",
+    "required": "请输入密码"
+  },
   "lockScreen": {
     "pwdError": "密码错误",
     "lock": {
@@ -194,7 +458,15 @@
       "inputPlaceholder": "请输入解锁密码",
       "btnText": "解锁",
       "backBtnText": "返回登录"
-    }
+    },
+    "lockScreen": "锁定屏幕",
+    "lockPassword": "锁屏密码",
+    "unlockText": "点击解锁",
+    "backToLogin": "返回登录",
+    "entrySystem": "进入系统",
+    "placeholder": "请输入锁屏密码",
+    "required": "请输入必填项",
+    "message": "锁屏密码错误"
   },
   "greeting": {
     "dawn": "凌晨了！",
@@ -206,7 +478,11 @@
     "gohome": "返回首页",
     "403": "抱歉，您无权访问该页面",
     "404": "抱歉，您访问的页面不存在",
-    "500": "抱歉，服务器出错了"
+    "500": "抱歉，服务器出错了",
+    "noPermission": "抱歉，您无权访问此页面。",
+    "pageError": "抱歉，您访问的页面不存在。",
+    "networkError": "抱歉，服务器报告错误。",
+    "returnToHome": "返回首页"
   },
   "menus": {
     "login": {
@@ -221,9 +497,16 @@
     "outside": {
       "title": "内嵌页面"
     },
+    "workbench": {
+      "title": "工作台"
+    },
+    "portal": {
+      "title": "数据门户"
+    },
     "dashboard": {
       "title": "仪表盘",
-      "console": "工作台",
+      "demoTitle": "模版仪表盘",
+      "console": "控制台",
       "analysis": "分析页",
       "ecommerce": "电子商务"
     },
@@ -344,5 +627,47 @@
     "zebra": "斑马纹",
     "border": "边框",
     "headerBackground": "表头背景"
+  },
+  "navbar": {
+    "dashboard": "首页",
+    "logout": "退出登录",
+    "document": "项目文档",
+    "gitee": "项目地址",
+    "lock": "锁定屏幕",
+    "unlock": "解锁屏幕",
+    "profile": "个人中心",
+    "config": "配置中心",
+    "tour": "项目引导",
+    "refresh": "刷新",
+    "close": "关闭",
+    "closeLeft": "关闭左侧",
+    "closeRight": "关闭右侧",
+    "closeOther": "关闭其他",
+    "closeAll": "关闭所有",
+    "refreshCache": "刷新缓存"
+  },
+  "route": {
+    "dashboard": "首页",
+    "document": "项目文档"
+  },
+  "sizeSelect": {
+    "tooltip": "布局大小",
+    "default": "默认",
+    "large": "大型",
+    "small": "小型",
+    "message": {
+      "success": "切换布局大小成功！"
+    }
+  },
+  "langSelect": {
+    "message": {
+      "success": "切换语言成功！"
+    }
+  },
+  "error": {
+    "noPermission": "抱歉，您无权访问此页面。",
+    "pageError": "抱歉，您访问的页面不存在。",
+    "networkError": "抱歉，服务器报告错误。",
+    "returnToHome": "返回首页"
   }
 }
diff --git a/frontend/new-web/src/main.ts b/frontend/new-web/src/main.ts
index 7df948a4..13d23824 100755
--- a/frontend/new-web/src/main.ts
+++ b/frontend/new-web/src/main.ts
@@ -1,25 +1,64 @@
-import App from './App.vue'
-import { createApp } from 'vue'
-import { initStore } from './store'                 // Store
-import { initRouter } from './router'               // Router
-import language from './locales'                    // 国际化
-import '@styles/core/tailwind.css'                  // tailwind
-import '@styles/index.scss'                         // 样式
-import '@utils/sys/console.ts'                      // 控制台输出内容
-import { setupGlobDirectives } from './directives'
-import { setupErrorHandle } from './utils/sys/error-handle'
+import App from "./App.vue";
+import { createApp } from "vue";
+import { initStore } from "./store"; // Store
+import { initRouter } from "./router"; // Router
+import language from "./locales"; // 国际化
+import "@styles/core/tailwind.css"; // tailwind
+import "@styles/index.scss"; // 样式
+import "@utils/sys/console.ts"; // 控制台输出内容
+import { initGlobDirectives } from "./directives";
+import { setupErrorHandle } from "./utils/sys/error-handle";
 
-document.addEventListener(
-  'touchstart',
-  function () {},
-  { passive: false }
-)
+// 暗黑主题样式
+import "element-plus/theme-chalk/dark/css-vars.css";
 
-const app = createApp(App)
-initStore(app)
-initRouter(app)
-setupGlobDirectives(app)
-setupErrorHandle(app)
+// 过渡动画
+import "animate.css";
 
-app.use(language)
-app.mount('#app')
\ No newline at end of file
+// 引入 vue-web-terminal
+import { createTerminal } from "vue-web-terminal";
+
+document.addEventListener("touchstart", function () {}, { passive: false });
+
+const app = createApp(App);
+initStore(app);
+initRouter(app);
+initGlobDirectives(app);
+setupErrorHandle(app);
+
+// 注册终端组件
+app.use(createTerminal());
+
+app.use(language);
+app.mount("#app");
+
+// 封装设置 title 和 favicon 的函数
+import { useConfigStore } from "./store/modules/config.store";
+
+const setTitleAndFavicon = async () => {
+  try {
+    const configStore = useConfigStore();
+    // 强制从服务器获取最新配置
+    await configStore.getConfig(true);
+
+    const webTitle = configStore.configData.sys_web_title?.config_value;
+    const webFavicon = configStore.configData.sys_web_favicon?.config_value;
+
+    if (webTitle) {
+      document.title = webTitle;
+    }
+
+    if (webFavicon) {
+      document.querySelectorAll('link[rel="icon"], link[rel="shortcut icon"]').forEach((node) => {
+        if (node instanceof HTMLLinkElement) {
+          node.href = webFavicon;
+        }
+      });
+    }
+  } catch (error) {
+    console.error("获取配置数据失败:", error);
+  }
+};
+
+// 在应用挂载后执行设置逻辑
+setTitleAndFavicon();
diff --git a/frontend/new-web/src/mock/temp/articleList.ts b/frontend/new-web/src/mock/temp/articleList.ts
index fbc2a2fb..7d1abb41 100644
--- a/frontend/new-web/src/mock/temp/articleList.ts
+++ b/frontend/new-web/src/mock/temp/articleList.ts
@@ -1,193 +1,193 @@
-import cover1 from '@imgs/cover/img1.webp'
-import cover2 from '@imgs/cover/img2.webp'
-import cover3 from '@imgs/cover/img3.webp'
-import cover4 from '@imgs/cover/img4.webp'
-import cover5 from '@imgs/cover/img5.webp'
-import cover6 from '@imgs/cover/img6.webp'
-import cover7 from '@imgs/cover/img7.webp'
-import cover8 from '@imgs/cover/img8.webp'
-import cover9 from '@imgs/cover/img9.webp'
-import cover10 from '@imgs/cover/img10.webp'
+import cover1 from "@imgs/cover/img1.webp";
+import cover2 from "@imgs/cover/img2.webp";
+import cover3 from "@imgs/cover/img3.webp";
+import cover4 from "@imgs/cover/img4.webp";
+import cover5 from "@imgs/cover/img5.webp";
+import cover6 from "@imgs/cover/img6.webp";
+import cover7 from "@imgs/cover/img7.webp";
+import cover8 from "@imgs/cover/img8.webp";
+import cover9 from "@imgs/cover/img9.webp";
+import cover10 from "@imgs/cover/img10.webp";
 
 export const ArticleList = [
   {
     id: 452,
-    blog_class: '42',
-    title: 'Node.js + Docker自动化部署',
+    blog_class: "42",
+    title: "Node.js + Docker自动化部署",
     count: 56,
-    create_time: '2024-08-26T00:00:00.000Z',
+    create_time: "2024-08-26T00:00:00.000Z",
     home_img: cover1,
     brief:
-      '本章将介绍 Node.js 使用 Docker 、Webhook 自动化部署、蓝绿部署、项目到服务器。1、Mac os 安装 Docker 客户端 OrbStack我这里使用的是第三方客户端，相比于官方的，较轻量，启动速度快OrbStack 是一种快速、轻便且简单的运行 Docker 容器和 Linux 的方法。使用我们的 Docker Desktop 替代方案以光速进行开发。下载地址： http',
-    type_name: 'Node.js',
-    html_content: ''
+      "本章将介绍 Node.js 使用 Docker 、Webhook 自动化部署、蓝绿部署、项目到服务器。1、Mac os 安装 Docker 客户端 OrbStack我这里使用的是第三方客户端，相比于官方的，较轻量，启动速度快OrbStack 是一种快速、轻便且简单的运行 Docker 容器和 Linux 的方法。使用我们的 Docker Desktop 替代方案以光速进行开发。下载地址： http",
+    type_name: "Node.js",
+    html_content: "",
   },
   {
     id: 451,
-    blog_class: '36',
-    title: 'HTTP 协议',
+    blog_class: "36",
+    title: "HTTP 协议",
     count: 109,
-    create_time: '2024-02-22T00:00:00.000Z',
+    create_time: "2024-02-22T00:00:00.000Z",
     home_img: cover2,
     brief:
-      '概念HTTP（hypertext transport protocol）协议；中文叫超文本传输协议是一种基于TCP/IP的应用层通信协议这个协议详细规定了 浏览器 和万维网 服务器 之间互相通信的规则。协议中主要规定了两个方面的内容客户端：用来向服务器发送数据，可以被称之为请求报文服务端：向客户端返回数据，可以被称之为响应报文报文：可以简单理解为就是一堆字符串请求报文的组成请求行请求头空行请求体H',
-    type_name: '浏览器',
-    html_content: ''
+      "概念HTTP（hypertext transport protocol）协议；中文叫超文本传输协议是一种基于TCP/IP的应用层通信协议这个协议详细规定了 浏览器 和万维网 服务器 之间互相通信的规则。协议中主要规定了两个方面的内容客户端：用来向服务器发送数据，可以被称之为请求报文服务端：向客户端返回数据，可以被称之为响应报文报文：可以简单理解为就是一堆字符串请求报文的组成请求行请求头空行请求体H",
+    type_name: "浏览器",
+    html_content: "",
   },
   {
     id: 450,
-    blog_class: '40',
-    title: 'MongoDB 数据库基本操作',
+    blog_class: "40",
+    title: "MongoDB 数据库基本操作",
     count: 66,
-    create_time: '2023-11-30T00:00:00.000Z',
+    create_time: "2023-11-30T00:00:00.000Z",
     home_img: cover3,
     brief:
-      '简介Mongodb 是什么MongoDB 是一个基于分布式文件存储的数据库，官方地址 https://www.mongodb.com/ 数据库是什么数据库（DataBase）是按照数据结构来组织、存储和管理数据的 应用程序数据库的作用数据库的主要作用就是 管理数据 ，对数据进行 增（c）、删（d）、改（u）、查（r）数据库管理数据的特点相比于纯文件管理数据，数据库管理数据有如下特点：1. 速度更快',
-    type_name: 'MongoDB',
-    html_content: ''
+      "简介Mongodb 是什么MongoDB 是一个基于分布式文件存储的数据库，官方地址 https://www.mongodb.com/ 数据库是什么数据库（DataBase）是按照数据结构来组织、存储和管理数据的 应用程序数据库的作用数据库的主要作用就是 管理数据 ，对数据进行 增（c）、删（d）、改（u）、查（r）数据库管理数据的特点相比于纯文件管理数据，数据库管理数据有如下特点：1. 速度更快",
+    type_name: "MongoDB",
+    html_content: "",
   },
   {
     id: 449,
-    blog_class: '40',
-    title: 'Mac os 安装 MongoDB',
+    blog_class: "40",
+    title: "Mac os 安装 MongoDB",
     count: 59,
-    create_time: '2023-11-15T00:00:00.000Z',
+    create_time: "2023-11-15T00:00:00.000Z",
     home_img: cover4,
     brief:
-      '下载MongoDB安装包官网下载地址：https://www.mongodb.com/try/download/community?tck=docs_server安装MongoDB# 将压缩包解压到 /usr/local/目录下\nsudo tar -zxvf mongodb-macos-x86_64-5.0.24.tgz -C /usr/local\n\n# 重命名\nsudo mv mongodb-o',
-    type_name: 'MongoDB',
-    html_content: ''
+      "下载MongoDB安装包官网下载地址：https://www.mongodb.com/try/download/community?tck=docs_server安装MongoDB# 将压缩包解压到 /usr/local/目录下\nsudo tar -zxvf mongodb-macos-x86_64-5.0.24.tgz -C /usr/local\n\n# 重命名\nsudo mv mongodb-o",
+    type_name: "MongoDB",
+    html_content: "",
   },
   {
     id: 448,
-    blog_class: '42',
-    title: 'npm、yarn、nrm 常用命令',
+    blog_class: "42",
+    title: "npm、yarn、nrm 常用命令",
     count: 91,
-    create_time: '2023-11-07T00:00:00.000Z',
+    create_time: "2023-11-07T00:00:00.000Z",
     home_img: cover5,
     brief:
-      '设置镜像源#1,淘宝镜像源\nnpm config set registry https://registry.npmmirror.com\nnpm config set registry https://registry.npm.taobao.org\n\n#2,腾讯云镜像源\nnpm config set registry http://mirrors.cloud.tencent.com/npm/\n\n#',
-    type_name: 'Node.js',
-    html_content: ''
+      "设置镜像源#1,淘宝镜像源\nnpm config set registry https://registry.npmmirror.com\nnpm config set registry https://registry.npm.taobao.org\n\n#2,腾讯云镜像源\nnpm config set registry http://mirrors.cloud.tencent.com/npm/\n\n#",
+    type_name: "Node.js",
+    html_content: "",
   },
   {
     id: 447,
-    blog_class: '42',
-    title: 'Node.js 包管理工具',
+    blog_class: "42",
+    title: "Node.js 包管理工具",
     count: 53,
-    create_time: '2023-10-31T00:00:00.000Z',
+    create_time: "2023-10-31T00:00:00.000Z",
     home_img: cover6,
     brief:
-      '介绍包是什么『包』英文单词是 package ，代表了一组特定功能的源码集合包管理工具管理『包』的应用软件，可以对「包」进行 下载安装 ， 更新 ， 删除 ， 上传 等操作借助包管理工具，可以快速开发项目，提升开发效率包管理工具是一个通用的概念，很多编程语言都有包管理工具，所以 掌握好包管理工具非常重要常用的包管理工具下面列举了前端常用的包管理工具npmyarncnpmnpmnpm 全称 Node',
-    type_name: 'Node.js',
-    html_content: ''
+      "介绍包是什么『包』英文单词是 package ，代表了一组特定功能的源码集合包管理工具管理『包』的应用软件，可以对「包」进行 下载安装 ， 更新 ， 删除 ， 上传 等操作借助包管理工具，可以快速开发项目，提升开发效率包管理工具是一个通用的概念，很多编程语言都有包管理工具，所以 掌握好包管理工具非常重要常用的包管理工具下面列举了前端常用的包管理工具npmyarncnpmnpmnpm 全称 Node",
+    type_name: "Node.js",
+    html_content: "",
   },
   {
     id: 446,
-    blog_class: '42',
-    title: 'Node.js 模块化',
+    blog_class: "42",
+    title: "Node.js 模块化",
     count: 40,
-    create_time: '2023-10-25T00:00:00.000Z',
+    create_time: "2023-10-25T00:00:00.000Z",
     home_img: cover7,
     brief:
-      '介绍什么是模块化与模块 ?将一个复杂的程序文件依据一定规则（规范）拆分成多个文件的过程称之为其中拆分出的 每个文件就是一个模块 ，模块的内部数据是私有的，不过模块可以暴露内部数据以便其他模块使用什么是模块化项目 ?编码时是按照模块一个一个编码的， 整个项目就是一个模块化的项目模块化好处下面是模块化的一些好处：1.防止命名冲突2.高复用性3.高维护性模块暴露数据模块初体验可以通过下面的操作步骤，快速',
-    type_name: 'Node.js',
-    html_content: ''
+      "介绍什么是模块化与模块 ?将一个复杂的程序文件依据一定规则（规范）拆分成多个文件的过程称之为其中拆分出的 每个文件就是一个模块 ，模块的内部数据是私有的，不过模块可以暴露内部数据以便其他模块使用什么是模块化项目 ?编码时是按照模块一个一个编码的， 整个项目就是一个模块化的项目模块化好处下面是模块化的一些好处：1.防止命名冲突2.高复用性3.高维护性模块暴露数据模块初体验可以通过下面的操作步骤，快速",
+    type_name: "Node.js",
+    html_content: "",
   },
   {
     id: 445,
-    blog_class: '42',
-    title: 'Node.js学习笔记',
+    blog_class: "42",
+    title: "Node.js学习笔记",
     count: 198,
-    create_time: '2023-10-15T00:00:00.000Z',
+    create_time: "2023-10-15T00:00:00.000Z",
     home_img: cover8,
     brief:
-      'fs 模块fs 全称为 file system ，称之为 文件系统 ，是 Node.js 中的 内置模块 ，可以对计算机中的磁盘进行操作。例如文件的创建、删除、修改移动，文件内容的写入、读取，以及文件夹的相关操作// 1 ------------------------------------------------------\n/**\n * 需求\n * 新建一个文件，写入内容\n */\n\n// 1',
-    type_name: 'Node.js',
-    html_content: ''
+      "fs 模块fs 全称为 file system ，称之为 文件系统 ，是 Node.js 中的 内置模块 ，可以对计算机中的磁盘进行操作。例如文件的创建、删除、修改移动，文件内容的写入、读取，以及文件夹的相关操作// 1 ------------------------------------------------------\n/**\n * 需求\n * 新建一个文件，写入内容\n */\n\n// 1",
+    type_name: "Node.js",
+    html_content: "",
   },
   {
     id: 444,
-    blog_class: '41',
-    title: '最好用的ChatGPT应用',
+    blog_class: "41",
+    title: "最好用的ChatGPT应用",
     count: 78,
-    create_time: '2023-05-22T00:00:00.000Z',
+    create_time: "2023-05-22T00:00:00.000Z",
     home_img: cover9,
     brief:
-      '目前为止最好用的ChatGPT网站，支持6种AI模型和每日一次GPT4的使用机会，有网页版和ios应用程序，可以使用邮箱和手机号等方式注册，中国大陆可放心使用（需要科学上网），下面就介绍一下如何使用吧。网站地址：https://poe.com/进去之后可以选择邮箱或手机号等其他方式注册。除了网页版，你还可以到AppStore搜索poe下载ios客户端',
-    type_name: 'GPT',
-    html_content: ''
+      "目前为止最好用的ChatGPT网站，支持6种AI模型和每日一次GPT4的使用机会，有网页版和ios应用程序，可以使用邮箱和手机号等方式注册，中国大陆可放心使用（需要科学上网），下面就介绍一下如何使用吧。网站地址：https://poe.com/进去之后可以选择邮箱或手机号等其他方式注册。除了网页版，你还可以到AppStore搜索poe下载ios客户端",
+    type_name: "GPT",
+    html_content: "",
   },
   {
     id: 443,
-    blog_class: '35',
-    title: 'Nuxt 百度收录 robots 和 sitemap',
+    blog_class: "35",
+    title: "Nuxt 百度收录 robots 和 sitemap",
     count: 109,
-    create_time: '2023-04-07T00:00:00.000Z',
+    create_time: "2023-04-07T00:00:00.000Z",
     home_img: cover10,
     brief:
-      '前言robots 和 sitemap 文件，前者的作用是减少百度蜘蛛在站内的无谓爬取，后者增加百度蜘蛛在站内的有效爬取，对百度收录和自己网站的SEO推广都十分重要。robots只有一个：robot.txt，这是一个文本文件，主要利用Allow（允许）和DisAllow（禁止）两个命令，（这两个重要的是禁止），禁止百度蜘蛛爬取一些无谓的文件和文件夹，增加百度搜录速度。具体原理和写法网上去搜，制作简单',
-    type_name: 'Nuxt',
-    html_content: ''
+      "前言robots 和 sitemap 文件，前者的作用是减少百度蜘蛛在站内的无谓爬取，后者增加百度蜘蛛在站内的有效爬取，对百度收录和自己网站的SEO推广都十分重要。robots只有一个：robot.txt，这是一个文本文件，主要利用Allow（允许）和DisAllow（禁止）两个命令，（这两个重要的是禁止），禁止百度蜘蛛爬取一些无谓的文件和文件夹，增加百度搜录速度。具体原理和写法网上去搜，制作简单",
+    type_name: "Nuxt",
+    html_content: "",
   },
   {
     id: 442,
-    blog_class: '12',
-    title: 'Vue3+TS+Vite 项目搭建笔记（更新中）',
+    blog_class: "12",
+    title: "Vue3+TS+Vite 项目搭建笔记（更新中）",
     count: 516,
-    create_time: '2023-04-03T00:00:00.000Z',
+    create_time: "2023-04-03T00:00:00.000Z",
     home_img: cover4,
     brief:
-      '介绍本章会教你在真实项目中如何搭建 VueRouter、Vuex、pinia、axios、主题切换等，你会见证一个后台管理系统的详细搭建过程。效果图：功能：后台管理系统常用模块登录加密多标签页全局面包屑国际化异常处理Utils工具包可配置的菜单栏徽标亮色 / 暗色 侧边栏浅色主题 / 暗黑主题丰富的个性化配置可折叠侧边栏支持内嵌页面重载当前页面动态路由支持自动重载支持多级路由嵌套及菜单栏嵌套分离路',
-    type_name: 'Vue',
-    html_content: ''
+      "介绍本章会教你在真实项目中如何搭建 VueRouter、Vuex、pinia、axios、主题切换等，你会见证一个后台管理系统的详细搭建过程。效果图：功能：后台管理系统常用模块登录加密多标签页全局面包屑国际化异常处理Utils工具包可配置的菜单栏徽标亮色 / 暗色 侧边栏浅色主题 / 暗黑主题丰富的个性化配置可折叠侧边栏支持内嵌页面重载当前页面动态路由支持自动重载支持多级路由嵌套及菜单栏嵌套分离路",
+    type_name: "Vue",
+    html_content: "",
   },
   {
     id: 441,
-    blog_class: '9',
-    title: 'CSS 根据系统自动切换主题方案',
+    blog_class: "9",
+    title: "CSS 根据系统自动切换主题方案",
     count: 184,
-    create_time: '2023-04-01T00:00:00.000Z',
+    create_time: "2023-04-01T00:00:00.000Z",
     home_img: cover8,
     brief:
-      '原理是改变 css 变量 + window.matchMedia 来监听系统主题变，从而实现点击改变主题和监听系统主题变化1、首先定义 css 全局变量创建 variables.scss 文件light color（浅色模式）定义浅色模式下 css 主题变量dark color（深色模式）定义深色模式下 css 主题变量// css全局变量\n:root {\n  // 文字大小\n  --art-fo',
-    type_name: 'CSS',
-    html_content: ''
+      "原理是改变 css 变量 + window.matchMedia 来监听系统主题变，从而实现点击改变主题和监听系统主题变化1、首先定义 css 全局变量创建 variables.scss 文件light color（浅色模式）定义浅色模式下 css 主题变量dark color（深色模式）定义深色模式下 css 主题变量// css全局变量\n:root {\n  // 文字大小\n  --art-fo",
+    type_name: "CSS",
+    html_content: "",
   },
   {
     id: 440,
-    blog_class: '36',
-    title: '浏览器-安全',
+    blog_class: "36",
+    title: "浏览器-安全",
     count: 116,
-    create_time: '2023-03-28T00:00:00.000Z',
+    create_time: "2023-03-28T00:00:00.000Z",
     home_img: cover2,
     brief:
-      '通过这篇文章你可以了解到同源策略、跨站脚本攻击（xss）、跨域请求伪造（CSRF）以及安全沙箱相关知识；以下是本文的思维导图：（手机端可能看不清）获取高清 PDF，请在微信公众号【小狮子前端】回复【浏览器安全】同源策略什么是同源策略如果两个 URL 的协议、域名和端口都相同，我们就称这两个 URL 同源。两个不同的源之间若想要相互访问资源或者操作 DOM，那么会有一套基础的安全策略的制约，我们把这',
-    type_name: '浏览器',
-    html_content: ''
+      "通过这篇文章你可以了解到同源策略、跨站脚本攻击（xss）、跨域请求伪造（CSRF）以及安全沙箱相关知识；以下是本文的思维导图：（手机端可能看不清）获取高清 PDF，请在微信公众号【小狮子前端】回复【浏览器安全】同源策略什么是同源策略如果两个 URL 的协议、域名和端口都相同，我们就称这两个 URL 同源。两个不同的源之间若想要相互访问资源或者操作 DOM，那么会有一套基础的安全策略的制约，我们把这",
+    type_name: "浏览器",
+    html_content: "",
   },
   {
     id: 439,
-    blog_class: '12',
-    title: 'Vue-Router4',
+    blog_class: "12",
+    title: "Vue-Router4",
     count: 135,
-    create_time: '2023-02-08T00:00:00.000Z',
+    create_time: "2023-02-08T00:00:00.000Z",
     home_img: cover3,
     brief:
       "路由模式构建 router.tsimport { createRouter, createWebHistory, createWebHashHistory, createMemoryHistory, createRouterMatcher } from 'vue-router'\nimport Home from '../views/home/index.vue'\nimport Login from",
-    type_name: 'Vue',
-    html_content: ''
+    type_name: "Vue",
+    html_content: "",
   },
   {
     id: 438,
-    blog_class: '10',
-    title: 'Event Loop（事件循环）',
+    blog_class: "10",
+    title: "Event Loop（事件循环）",
     count: 161,
-    create_time: '2023-01-03T00:00:00.000Z',
+    create_time: "2023-01-03T00:00:00.000Z",
     home_img: cover1,
     brief:
-      'js是单线程的，一次只能执行一段代码。单线程会导致很多任务需要排队，一个个去执行，如果此时某个任务执行时间太长，就会出现阻塞，为了解决这个问题，js引入了事件循环机制。为什么要区分宏任务和微任务？js是单线程的，但是分同步异步微任务和宏任务皆为异步任务，它们都属于一个队列宏任务：script（整体代码）、setTimeout、setInterval、I/O、UI、 renderingsetImme',
-    type_name: 'JavaScript',
-    html_content: ''
-  }
-]
+      "js是单线程的，一次只能执行一段代码。单线程会导致很多任务需要排队，一个个去执行，如果此时某个任务执行时间太长，就会出现阻塞，为了解决这个问题，js引入了事件循环机制。为什么要区分宏任务和微任务？js是单线程的，但是分同步异步微任务和宏任务皆为异步任务，它们都属于一个队列宏任务：script（整体代码）、setTimeout、setInterval、I/O、UI、 renderingsetImme",
+    type_name: "JavaScript",
+    html_content: "",
+  },
+];
diff --git a/frontend/new-web/src/mock/temp/commentDetail.ts b/frontend/new-web/src/mock/temp/commentDetail.ts
index 9eabc237..9fb009cc 100644
--- a/frontend/new-web/src/mock/temp/commentDetail.ts
+++ b/frontend/new-web/src/mock/temp/commentDetail.ts
@@ -1,79 +1,79 @@
 export interface Comment {
-  id: number
-  author: string
-  content: string
-  timestamp: string
-  replies: Comment[]
+  id: number;
+  author: string;
+  content: string;
+  timestamp: string;
+  replies: Comment[];
 }
 
 export const commentList = ref<Comment[]>([
   {
     id: 1,
-    author: '白夜',
-    content: '黑神话悟空的打斗场面真的燃爆了！期待上线！',
-    timestamp: '2024-09-04 09:00',
+    author: "白夜",
+    content: "黑神话悟空的打斗场面真的燃爆了！期待上线！",
+    timestamp: "2024-09-04 09:00",
     replies: [
       {
         id: 101,
-        author: '星河',
-        content: '是啊，特别是那些技能特效，简直帅炸！',
-        timestamp: '2024-09-04 09:15',
+        author: "星河",
+        content: "是啊，特别是那些技能特效，简直帅炸！",
+        timestamp: "2024-09-04 09:15",
         replies: [
           {
             id: 201,
-            author: '光芒',
-            content: '希望优化能跟上，不然这么好的画面如果卡顿就可惜了。',
-            timestamp: '2024-09-04 09:30',
-            replies: []
-          }
-        ]
-      }
-    ]
+            author: "光芒",
+            content: "希望优化能跟上，不然这么好的画面如果卡顿就可惜了。",
+            timestamp: "2024-09-04 09:30",
+            replies: [],
+          },
+        ],
+      },
+    ],
   },
   {
     id: 2,
-    author: '浮生',
-    content: '据说黑神话悟空需要很高的配置，不知道我的电脑能不能跑起来。',
-    timestamp: '2024-09-04 10:00',
+    author: "浮生",
+    content: "据说黑神话悟空需要很高的配置，不知道我的电脑能不能跑起来。",
+    timestamp: "2024-09-04 10:00",
     replies: [
       {
         id: 102,
-        author: '晨曦',
-        content: '同担心啊，听说需要至少RTX 3070才能高效运行。',
-        timestamp: '2024-09-04 10:20',
+        author: "晨曦",
+        content: "同担心啊，听说需要至少RTX 3070才能高效运行。",
+        timestamp: "2024-09-04 10:20",
         replies: [
           {
             id: 202,
-            author: '流光',
-            content: '我是打算升级配置，等这款游戏就是了。',
-            timestamp: '2024-09-04 10:40',
-            replies: []
-          }
-        ]
-      }
-    ]
+            author: "流光",
+            content: "我是打算升级配置，等这款游戏就是了。",
+            timestamp: "2024-09-04 10:40",
+            replies: [],
+          },
+        ],
+      },
+    ],
   },
   {
     id: 3,
-    author: '风铃',
-    content: '130GB的存储要求有点夸张啊，不过画质这么好，也情有可原。',
-    timestamp: '2024-09-04 11:00',
+    author: "风铃",
+    content: "130GB的存储要求有点夸张啊，不过画质这么好，也情有可原。",
+    timestamp: "2024-09-04 11:00",
     replies: [
       {
         id: 103,
-        author: '云端',
-        content: '确实有点高，不过为了这种品质的游戏，值得。',
-        timestamp: '2024-09-04 11:15',
+        author: "云端",
+        content: "确实有点高，不过为了这种品质的游戏，值得。",
+        timestamp: "2024-09-04 11:15",
         replies: [
           {
             id: 203,
-            author: '梦境',
-            content: '希望发售后能优化一下安装包体积。',
-            timestamp: '2024-09-04 11:30',
-            replies: []
-          }
-        ]
-      }
-    ]
-  }
-])
+            author: "梦境",
+            content: "希望发售后能优化一下安装包体积。",
+            timestamp: "2024-09-04 11:30",
+            replies: [],
+          },
+        ],
+      },
+    ],
+  },
+]);
diff --git a/frontend/new-web/src/mock/temp/commentList.ts b/frontend/new-web/src/mock/temp/commentList.ts
index 7a6370fd..f1a0e01c 100644
--- a/frontend/new-web/src/mock/temp/commentList.ts
+++ b/frontend/new-web/src/mock/temp/commentList.ts
@@ -1,242 +1,242 @@
 export const commentList = reactive([
   {
     id: 1,
-    date: '2024-9-3',
-    content: '发现了一个超级好用的工具，开心',
+    date: "2024-9-3",
+    content: "发现了一个超级好用的工具，开心",
     collection: 5,
     comment: 8,
-    userName: '匿名'
+    userName: "匿名",
   },
   {
     id: 2,
-    date: '2024-9-3',
-    content: '今天的代码写得很顺利！',
+    date: "2024-9-3",
+    content: "今天的代码写得很顺利！",
     collection: 3,
     comment: 2,
-    userName: 'Coder123'
+    userName: "Coder123",
   },
   {
     id: 3,
-    date: '2024-9-4',
-    content: '遇到个bug，调试了一整天',
+    date: "2024-9-4",
+    content: "遇到个bug，调试了一整天",
     collection: 7,
     comment: 10,
-    userName: 'DebugMaster'
+    userName: "DebugMaster",
   },
   {
     id: 4,
-    date: '2024-9-4',
-    content: '学Node真的是一件很有趣的事',
+    date: "2024-9-4",
+    content: "学Node真的是一件很有趣的事",
     collection: 9,
     comment: 4,
-    userName: 'NodeLover'
+    userName: "NodeLover",
   },
   {
     id: 5,
-    date: '2024-9-5',
-    content: '今天的进度有点慢，需要加把劲了',
+    date: "2024-9-5",
+    content: "今天的进度有点慢，需要加把劲了",
     collection: 2,
     comment: 3,
-    userName: '努力中的小白'
+    userName: "努力中的小白",
   },
   {
     id: 6,
-    date: '2024-9-5',
-    content: '太好了，终于解决了一个难题！',
+    date: "2024-9-5",
+    content: "太好了，终于解决了一个难题！",
     collection: 11,
     comment: 5,
-    userName: '匿名'
+    userName: "匿名",
   },
   {
     id: 7,
-    date: '2024-9-6',
-    content: '学会了新的Node技巧，开心！',
+    date: "2024-9-6",
+    content: "学会了新的Node技巧，开心！",
     collection: 4,
     comment: 7,
-    userName: '开心每一天'
+    userName: "开心每一天",
   },
   {
     id: 8,
-    date: '2024-9-6',
-    content: '代码优化真的是一个细致活',
+    date: "2024-9-6",
+    content: "代码优化真的是一个细致活",
     collection: 6,
     comment: 4,
-    userName: '精益求精'
+    userName: "精益求精",
   },
   {
     id: 9,
-    date: '2024-9-7',
-    content: '今天的工作太顺利了，完美！',
+    date: "2024-9-7",
+    content: "今天的工作太顺利了，完美！",
     collection: 10,
     comment: 9,
-    userName: '完美主义者'
+    userName: "完美主义者",
   },
   {
     id: 10,
-    date: '2024-9-7',
-    content: '需要多练习，才能掌握更多技能',
+    date: "2024-9-7",
+    content: "需要多练习，才能掌握更多技能",
     collection: 5,
     comment: 6,
-    userName: '匿名'
+    userName: "匿名",
   },
   {
     id: 11,
-    date: '2024-9-8',
-    content: '每天进步一点点，终会成功',
+    date: "2024-9-8",
+    content: "每天进步一点点，终会成功",
     collection: 8,
     comment: 7,
-    userName: '逐梦者'
+    userName: "逐梦者",
   },
   {
     id: 12,
-    date: '2024-9-8',
-    content: '与其抱怨，不如努力改变',
+    date: "2024-9-8",
+    content: "与其抱怨，不如努力改变",
     collection: 12,
     comment: 10,
-    userName: '改变命运'
+    userName: "改变命运",
   },
   {
     id: 13,
-    date: '2024-9-9',
-    content: '今天尝试了新的库，感觉不错',
+    date: "2024-9-9",
+    content: "今天尝试了新的库，感觉不错",
     collection: 9,
     comment: 8,
-    userName: '新手尝试'
+    userName: "新手尝试",
   },
   {
     id: 14,
-    date: '2024-9-9',
-    content: '写代码也需要灵感，今天灵感不错',
+    date: "2024-9-9",
+    content: "写代码也需要灵感，今天灵感不错",
     collection: 6,
     comment: 5,
-    userName: '灵感源泉'
+    userName: "灵感源泉",
   },
   {
     id: 15,
-    date: '2024-9-10',
-    content: '感谢社区的帮助，让我解决了问题',
+    date: "2024-9-10",
+    content: "感谢社区的帮助，让我解决了问题",
     collection: 7,
     comment: 4,
-    userName: '受益匪浅'
+    userName: "受益匪浅",
   },
   {
     id: 16,
-    date: '2024-9-10',
-    content: '学习的路上要保持耐心和恒心',
+    date: "2024-9-10",
+    content: "学习的路上要保持耐心和恒心",
     collection: 3,
     comment: 2,
-    userName: '匿名'
+    userName: "匿名",
   },
   {
     id: 17,
-    date: '2024-9-11',
-    content: '今天学习了异步编程的知识，受益匪浅',
+    date: "2024-9-11",
+    content: "今天学习了异步编程的知识，受益匪浅",
     collection: 10,
     comment: 9,
-    userName: '异步学习者'
+    userName: "异步学习者",
   },
   {
     id: 18,
-    date: '2024-9-11',
-    content: '今天的代码质量提升了不少',
+    date: "2024-9-11",
+    content: "今天的代码质量提升了不少",
     collection: 11,
     comment: 6,
-    userName: '代码匠人'
+    userName: "代码匠人",
   },
   {
     id: 19,
-    date: '2024-9-12',
-    content: '感觉学习编程真的很有成就感',
+    date: "2024-9-12",
+    content: "感觉学习编程真的很有成就感",
     collection: 8,
     comment: 7,
-    userName: '成就感满满'
+    userName: "成就感满满",
   },
   {
     id: 20,
-    date: '2024-9-12',
-    content: '要加倍努力，才能超越昨天的自己',
+    date: "2024-9-12",
+    content: "要加倍努力，才能超越昨天的自己",
     collection: 5,
     comment: 4,
-    userName: '努力超越'
+    userName: "努力超越",
   },
   {
     id: 21,
-    date: '2024-9-13',
-    content: '今天的代码写得很顺手，继续保持',
+    date: "2024-9-13",
+    content: "今天的代码写得很顺手，继续保持",
     collection: 9,
     comment: 8,
-    userName: '顺风顺水'
+    userName: "顺风顺水",
   },
   {
     id: 22,
-    date: '2024-9-13',
-    content: '写代码也需要创意，今天很有创意',
+    date: "2024-9-13",
+    content: "写代码也需要创意，今天很有创意",
     collection: 7,
     comment: 5,
-    userName: '创意无限'
+    userName: "创意无限",
   },
   {
     id: 23,
-    date: '2024-9-14',
-    content: '遇到的难题解决了，感觉很有成就感',
+    date: "2024-9-14",
+    content: "遇到的难题解决了，感觉很有成就感",
     collection: 10,
     comment: 9,
-    userName: '匿名'
+    userName: "匿名",
   },
   {
     id: 24,
-    date: '2024-9-14',
-    content: '今天的编程练习很有收获',
+    date: "2024-9-14",
+    content: "今天的编程练习很有收获",
     collection: 8,
     comment: 7,
-    userName: '收获满满'
+    userName: "收获满满",
   },
   {
     id: 25,
-    date: '2024-9-15',
-    content: '学习编程的路上，有苦有甜',
+    date: "2024-9-15",
+    content: "学习编程的路上，有苦有甜",
     collection: 6,
     comment: 4,
-    userName: '苦乐编程'
+    userName: "苦乐编程",
   },
   {
     id: 26,
-    date: '2024-9-15',
-    content: '今天的代码写得特别流畅，开心！',
+    date: "2024-9-15",
+    content: "今天的代码写得特别流畅，开心！",
     collection: 11,
     comment: 6,
-    userName: '流畅编程'
+    userName: "流畅编程",
   },
   {
     id: 27,
-    date: '2024-9-16',
-    content: '今天的编程练习让我更有信心',
+    date: "2024-9-16",
+    content: "今天的编程练习让我更有信心",
     collection: 9,
     comment: 8,
-    userName: '信心满满'
+    userName: "信心满满",
   },
   {
     id: 28,
-    date: '2024-9-16',
-    content: '今天的编程学习让我收获很多',
+    date: "2024-9-16",
+    content: "今天的编程学习让我收获很多",
     collection: 7,
     comment: 5,
-    userName: '匿名'
+    userName: "匿名",
   },
   {
     id: 29,
-    date: '2024-9-17',
-    content: '编程是一门艺术，今天体会到了',
+    date: "2024-9-17",
+    content: "编程是一门艺术，今天体会到了",
     collection: 12,
     comment: 10,
-    userName: '编程艺术家'
+    userName: "编程艺术家",
   },
   {
     id: 30,
-    date: '2024-9-17',
-    content: '今天的代码写得很顺利，继续加油！',
+    date: "2024-9-17",
+    content: "今天的代码写得很顺利，继续加油！",
     collection: 10,
     comment: 9,
-    userName: '匿名'
-  }
-])
+    userName: "匿名",
+  },
+]);
diff --git a/frontend/new-web/src/mock/temp/formData.ts b/frontend/new-web/src/mock/temp/formData.ts
index 8aa7ae58..42a91ad2 100755
--- a/frontend/new-web/src/mock/temp/formData.ts
+++ b/frontend/new-web/src/mock/temp/formData.ts
@@ -1,273 +1,273 @@
-import avatar1 from '@/assets/images/avatar/avatar1.webp'
-import avatar2 from '@/assets/images/avatar/avatar2.webp'
-import avatar3 from '@/assets/images/avatar/avatar3.webp'
-import avatar4 from '@/assets/images/avatar/avatar4.webp'
-import avatar5 from '@/assets/images/avatar/avatar5.webp'
-import avatar6 from '@/assets/images/avatar/avatar6.webp'
-import avatar7 from '@/assets/images/avatar/avatar7.webp'
-import avatar8 from '@/assets/images/avatar/avatar8.webp'
-import avatar9 from '@/assets/images/avatar/avatar9.webp'
-import avatar10 from '@/assets/images/avatar/avatar10.webp'
+import avatar1 from "@/assets/images/avatar/avatar1.webp";
+import avatar2 from "@/assets/images/avatar/avatar2.webp";
+import avatar3 from "@/assets/images/avatar/avatar3.webp";
+import avatar4 from "@/assets/images/avatar/avatar4.webp";
+import avatar5 from "@/assets/images/avatar/avatar5.webp";
+import avatar6 from "@/assets/images/avatar/avatar6.webp";
+import avatar7 from "@/assets/images/avatar/avatar7.webp";
+import avatar8 from "@/assets/images/avatar/avatar8.webp";
+import avatar9 from "@/assets/images/avatar/avatar9.webp";
+import avatar10 from "@/assets/images/avatar/avatar10.webp";
 
 export interface User {
-  id: number
-  username: string
-  gender: 1 | 0
-  mobile: string
-  email: string
-  dep: string
-  status: string
-  create_time: string
-  avatar: string
+  id: number;
+  username: string;
+  gender: 1 | 0;
+  mobile: string;
+  email: string;
+  dep: string;
+  status: string;
+  create_time: string;
+  avatar: string;
 }
 
 // 用户列表
 export const ACCOUNT_TABLE_DATA: User[] = [
   {
     id: 1,
-    username: 'alexmorgan',
+    username: "alexmorgan",
     gender: 1,
-    mobile: '18670001591',
-    email: 'alexmorgan@company.com',
-    dep: '研发部',
-    status: '1',
-    create_time: '2020-09-09 10:01:10',
-    avatar: avatar1
+    mobile: "18670001591",
+    email: "alexmorgan@company.com",
+    dep: "研发部",
+    status: "1",
+    create_time: "2020-09-09 10:01:10",
+    avatar: avatar1,
   },
   {
     id: 2,
-    username: 'sophiabaker',
+    username: "sophiabaker",
     gender: 1,
-    mobile: '17766664444',
-    email: 'sophiabaker@company.com',
-    dep: '电商部',
-    status: '1',
-    create_time: '2020-10-10 13:01:12',
-    avatar: avatar2
+    mobile: "17766664444",
+    email: "sophiabaker@company.com",
+    dep: "电商部",
+    status: "1",
+    create_time: "2020-10-10 13:01:12",
+    avatar: avatar2,
   },
   {
     id: 3,
-    username: 'liampark',
+    username: "liampark",
     gender: 1,
-    mobile: '18670001597',
-    email: 'liampark@company.com',
-    dep: '人事部',
-    status: '1',
-    create_time: '2020-11-14 12:01:45',
-    avatar: avatar3
+    mobile: "18670001597",
+    email: "liampark@company.com",
+    dep: "人事部",
+    status: "1",
+    create_time: "2020-11-14 12:01:45",
+    avatar: avatar3,
   },
   {
     id: 4,
-    username: 'oliviagrant',
+    username: "oliviagrant",
     gender: 0,
-    mobile: '18670001596',
-    email: 'oliviagrant@company.com',
-    dep: '产品部',
-    status: '1',
-    create_time: '2020-11-14 09:01:20',
-    avatar: avatar4
+    mobile: "18670001596",
+    email: "oliviagrant@company.com",
+    dep: "产品部",
+    status: "1",
+    create_time: "2020-11-14 09:01:20",
+    avatar: avatar4,
   },
   {
     id: 5,
-    username: 'emmawilson',
+    username: "emmawilson",
     gender: 0,
-    mobile: '18670001595',
-    email: 'emmawilson@company.com',
-    dep: '财务部',
-    status: '1',
-    create_time: '2020-11-13 11:01:05',
-    avatar: avatar5
+    mobile: "18670001595",
+    email: "emmawilson@company.com",
+    dep: "财务部",
+    status: "1",
+    create_time: "2020-11-13 11:01:05",
+    avatar: avatar5,
   },
   {
     id: 6,
-    username: 'noahevan',
+    username: "noahevan",
     gender: 1,
-    mobile: '18670001594',
-    email: 'noahevan@company.com',
-    dep: '运营部',
-    status: '1',
-    create_time: '2020-10-11 13:10:26',
-    avatar: avatar6
+    mobile: "18670001594",
+    email: "noahevan@company.com",
+    dep: "运营部",
+    status: "1",
+    create_time: "2020-10-11 13:10:26",
+    avatar: avatar6,
   },
   {
     id: 7,
-    username: 'avamartin',
+    username: "avamartin",
     gender: 1,
-    mobile: '18123820191',
-    email: 'avamartin@company.com',
-    dep: '客服部',
-    status: '2',
-    create_time: '2020-05-14 12:05:10',
-    avatar: avatar7
+    mobile: "18123820191",
+    email: "avamartin@company.com",
+    dep: "客服部",
+    status: "2",
+    create_time: "2020-05-14 12:05:10",
+    avatar: avatar7,
   },
   {
     id: 8,
-    username: 'jacoblee',
+    username: "jacoblee",
     gender: 1,
-    mobile: '18670001592',
-    email: 'jacoblee@company.com',
-    dep: '总经办',
-    status: '3',
-    create_time: '2020-11-12 07:22:25',
-    avatar: avatar8
+    mobile: "18670001592",
+    email: "jacoblee@company.com",
+    dep: "总经办",
+    status: "3",
+    create_time: "2020-11-12 07:22:25",
+    avatar: avatar8,
   },
   {
     id: 9,
-    username: 'miaclark',
+    username: "miaclark",
     gender: 0,
-    mobile: '18670001581',
-    email: 'miaclark@company.com',
-    dep: '研发部',
-    status: '4',
-    create_time: '2020-06-12 05:04:20',
-    avatar: avatar9
+    mobile: "18670001581",
+    email: "miaclark@company.com",
+    dep: "研发部",
+    status: "4",
+    create_time: "2020-06-12 05:04:20",
+    avatar: avatar9,
   },
   {
     id: 10,
-    username: 'ethanharris',
+    username: "ethanharris",
     gender: 1,
-    mobile: '13755554444',
-    email: 'ethanharris@company.com',
-    dep: '研发部',
-    status: '1',
-    create_time: '2020-11-12 16:01:10',
-    avatar: avatar10
+    mobile: "13755554444",
+    email: "ethanharris@company.com",
+    dep: "研发部",
+    status: "1",
+    create_time: "2020-11-12 16:01:10",
+    avatar: avatar10,
   },
   {
     id: 11,
-    username: 'isabellamoore',
+    username: "isabellamoore",
     gender: 1,
-    mobile: '13766660000',
-    email: 'isabellamoore@company.com',
-    dep: '研发部',
-    status: '1',
-    create_time: '2020-11-14 12:01:20',
-    avatar: avatar6
+    mobile: "13766660000",
+    email: "isabellamoore@company.com",
+    dep: "研发部",
+    status: "1",
+    create_time: "2020-11-14 12:01:20",
+    avatar: avatar6,
   },
   {
     id: 12,
-    username: 'masonwhite',
+    username: "masonwhite",
     gender: 1,
-    mobile: '18670001502',
-    email: 'masonwhite@company.com',
-    dep: '研发部',
-    status: '1',
-    create_time: '2020-11-14 12:01:20',
-    avatar: avatar7
+    mobile: "18670001502",
+    email: "masonwhite@company.com",
+    dep: "研发部",
+    status: "1",
+    create_time: "2020-11-14 12:01:20",
+    avatar: avatar7,
   },
   {
     id: 13,
-    username: 'charlottehall',
+    username: "charlottehall",
     gender: 1,
-    mobile: '13006644977',
-    email: 'charlottehall@company.com',
-    dep: '研发部',
-    status: '1',
-    create_time: '2020-11-14 12:01:20',
-    avatar: avatar8
+    mobile: "13006644977",
+    email: "charlottehall@company.com",
+    dep: "研发部",
+    status: "1",
+    create_time: "2020-11-14 12:01:20",
+    avatar: avatar8,
   },
   {
     id: 14,
-    username: 'benjaminscott',
+    username: "benjaminscott",
     gender: 0,
-    mobile: '13599998888',
-    email: 'benjaminscott@company.com',
-    dep: '研发部',
-    status: '1',
-    create_time: '2020-11-14 12:01:20',
-    avatar: avatar9
+    mobile: "13599998888",
+    email: "benjaminscott@company.com",
+    dep: "研发部",
+    status: "1",
+    create_time: "2020-11-14 12:01:20",
+    avatar: avatar9,
   },
   {
     id: 15,
-    username: 'ameliaking',
+    username: "ameliaking",
     gender: 1,
-    mobile: '13799998888',
-    email: 'ameliaking@company.com',
-    dep: '研发部',
-    status: '1',
-    create_time: '2020-11-14 12:01:20',
-    avatar: avatar10
-  }
-]
+    mobile: "13799998888",
+    email: "ameliaking@company.com",
+    dep: "研发部",
+    status: "1",
+    create_time: "2020-11-14 12:01:20",
+    avatar: avatar10,
+  },
+];
 
 export interface Role {
-  roleName: string
-  roleCode: string
-  des: string
-  date: string
-  enable: boolean
+  roleName: string;
+  roleCode: string;
+  des: string;
+  date: string;
+  enable: boolean;
 }
 
 // 角色列表
 export const ROLE_LIST_DATA: Role[] = [
   {
-    roleName: '超级管理员',
-    roleCode: 'R_SUPER',
-    des: '拥有系统全部权限',
-    date: '2025-05-15 12:30:45',
-    enable: true
+    roleName: "超级管理员",
+    roleCode: "R_SUPER",
+    des: "拥有系统全部权限",
+    date: "2025-05-15 12:30:45",
+    enable: true,
   },
   {
-    roleName: '管理员',
-    roleCode: 'R_ADMIN',
-    des: '拥有系统管理权限',
-    date: '2025-05-15 12:30:45',
-    enable: true
+    roleName: "管理员",
+    roleCode: "R_ADMIN",
+    des: "拥有系统管理权限",
+    date: "2025-05-15 12:30:45",
+    enable: true,
   },
   {
-    roleName: '普通用户',
-    roleCode: 'R_USER',
-    des: '拥有系统普通权限',
-    date: '2025-05-15 12:30:45',
-    enable: true
+    roleName: "普通用户",
+    roleCode: "R_USER",
+    des: "拥有系统普通权限",
+    date: "2025-05-15 12:30:45",
+    enable: true,
   },
   {
-    roleName: '财务管理员',
-    roleCode: 'R_FINANCE',
-    des: '管理财务相关权限',
-    date: '2025-05-16 09:15:30',
-    enable: true
+    roleName: "财务管理员",
+    roleCode: "R_FINANCE",
+    des: "管理财务相关权限",
+    date: "2025-05-16 09:15:30",
+    enable: true,
   },
   {
-    roleName: '数据分析师',
-    roleCode: 'R_ANALYST',
-    des: '拥有数据分析权限',
-    date: '2025-05-16 11:45:00',
-    enable: false
+    roleName: "数据分析师",
+    roleCode: "R_ANALYST",
+    des: "拥有数据分析权限",
+    date: "2025-05-16 11:45:00",
+    enable: false,
   },
   {
-    roleName: '客服专员',
-    roleCode: 'R_SUPPORT',
-    des: '处理客户支持请求',
-    date: '2025-05-17 14:30:22',
-    enable: true
+    roleName: "客服专员",
+    roleCode: "R_SUPPORT",
+    des: "处理客户支持请求",
+    date: "2025-05-17 14:30:22",
+    enable: true,
   },
   {
-    roleName: '营销经理',
-    roleCode: 'R_MARKETING',
-    des: '管理营销活动权限',
-    date: '2025-05-17 15:10:50',
-    enable: true
+    roleName: "营销经理",
+    roleCode: "R_MARKETING",
+    des: "管理营销活动权限",
+    date: "2025-05-17 15:10:50",
+    enable: true,
   },
   {
-    roleName: '访客用户',
-    roleCode: 'R_GUEST',
-    des: '仅限浏览权限',
-    date: '2025-05-18 08:25:40',
-    enable: false
+    roleName: "访客用户",
+    roleCode: "R_GUEST",
+    des: "仅限浏览权限",
+    date: "2025-05-18 08:25:40",
+    enable: false,
   },
   {
-    roleName: '系统维护员',
-    roleCode: 'R_MAINTAINER',
-    des: '负责系统维护和更新',
-    date: '2025-05-18 09:50:12',
-    enable: true
+    roleName: "系统维护员",
+    roleCode: "R_MAINTAINER",
+    des: "负责系统维护和更新",
+    date: "2025-05-18 09:50:12",
+    enable: true,
   },
   {
-    roleName: '项目经理',
-    roleCode: 'R_PM',
-    des: '管理项目相关权限',
-    date: '2025-05-19 13:40:35',
-    enable: true
-  }
-]
+    roleName: "项目经理",
+    roleCode: "R_PM",
+    des: "管理项目相关权限",
+    date: "2025-05-19 13:40:35",
+    enable: true,
+  },
+];
diff --git a/frontend/new-web/src/mock/upgrade/changeLog.ts b/frontend/new-web/src/mock/upgrade/changeLog.ts
index a7743cfc..3c7b7656 100644
--- a/frontend/new-web/src/mock/upgrade/changeLog.ts
+++ b/frontend/new-web/src/mock/upgrade/changeLog.ts
@@ -1,449 +1,449 @@
 interface UpgradeLog {
-  version: string // 版本号
-  title: string // 更新标题
-  date: string // 更新日期
-  detail?: string[] // 更新内容
-  requireReLogin?: boolean // 是否需要重新登录
-  remark?: string // 备注
+  version: string; // 版本号
+  title: string; // 更新标题
+  date: string; // 更新日期
+  detail?: string[]; // 更新内容
+  requireReLogin?: boolean; // 是否需要重新登录
+  remark?: string; // 备注
 }
 
 export const upgradeLogList = ref<UpgradeLog[]>([
   {
-    version: 'v3.0.2',
-    title: '问题修复、表单与路由体验优化',
-    date: '2026-03-15',
+    version: "v3.0.2",
+    title: "问题修复、表单与路由体验优化",
+    date: "2026-03-15",
     detail: [
-      '修复：富文本编辑器样式异常问题',
-      '修复：菜单区域无法滚动的问题',
-      '修复：特殊路由打开后显示空白页面的问题',
-      '修复：WebSocket 重连异常问题',
-      '修复：特殊动态路由参数处理异常问题',
-      '优化：ArtForm、ArtSearchBar 表单提交前增加数据清洗，避免无效字段提交到后端',
-      '修复：ArtTable 与 ElForm 组合使用时动态表单校验错误的问题',
-      '修复：隐藏子菜单时父级菜单被一并隐藏的问题',
-      '修复：静态路由刷新后跳回首页的问题',
-      '修复：art-table 属性继承异常问题',
-      '修复：PC 端切换到移动端后再切回 PC 端，菜单无法恢复原桌面布局的问题'
-    ]
+      "修复：富文本编辑器样式异常问题",
+      "修复：菜单区域无法滚动的问题",
+      "修复：特殊路由打开后显示空白页面的问题",
+      "修复：WebSocket 重连异常问题",
+      "修复：特殊动态路由参数处理异常问题",
+      "优化：ArtForm、ArtSearchBar 表单提交前增加数据清洗，避免无效字段提交到后端",
+      "修复：ArtTable 与 ElForm 组合使用时动态表单校验错误的问题",
+      "修复：隐藏子菜单时父级菜单被一并隐藏的问题",
+      "修复：静态路由刷新后跳回首页的问题",
+      "修复：art-table 属性继承异常问题",
+      "修复：PC 端切换到移动端后再切回 PC 端，菜单无法恢复原桌面布局的问题",
+    ],
   },
   {
-    version: 'v3.0.1',
-    title: 'bug修复、新增功能',
-    date: '2025-11-15',
+    version: "v3.0.1",
+    title: "bug修复、新增功能",
+    date: "2025-11-15",
     detail: [
-      '修复：路由注册时不存在接口的重复请求问题',
-      '修复：一键精简脚本打包失败的问题',
-      '优化：完善路由配置验证机制，自动检测并提示非一级菜单的路径配置错误',
-      '优化：顶部进度条残影',
-      '优化：vite 预构建优化',
-      '优化：圆角、边框统一',
-      '优化：锁屏页面重新设计',
-      '优化：退出登录菜单提前消失造成的视觉体验不好问题',
-      '新增：ArtForm 和 ArtSearchBar 组件的 label 支持自定义渲染函数，可实现带 tooltip 等复杂标签',
-      '新增：菜单管理表单关键字段新增 Tooltip 提示，降低用户配置门槛',
-      '新增：iconify 新增离线图标加载模式',
-      '新增：退出登录新增 redirect 属性，用于重新登录后跳转到对应页面',
-      '新增：退出登录重新进入系统保留用户标签页，根据 userId 进行身份识别',
-      '新增：双列菜单新增折叠按钮',
-      '新增：菜单图标完善',
-      '新增：多标签页增加图标',
-      '新增：WebSocket 连接'
-    ]
+      "修复：路由注册时不存在接口的重复请求问题",
+      "修复：一键精简脚本打包失败的问题",
+      "优化：完善路由配置验证机制，自动检测并提示非一级菜单的路径配置错误",
+      "优化：顶部进度条残影",
+      "优化：vite 预构建优化",
+      "优化：圆角、边框统一",
+      "优化：锁屏页面重新设计",
+      "优化：退出登录菜单提前消失造成的视觉体验不好问题",
+      "新增：ArtForm 和 ArtSearchBar 组件的 label 支持自定义渲染函数，可实现带 tooltip 等复杂标签",
+      "新增：菜单管理表单关键字段新增 Tooltip 提示，降低用户配置门槛",
+      "新增：iconify 新增离线图标加载模式",
+      "新增：退出登录新增 redirect 属性，用于重新登录后跳转到对应页面",
+      "新增：退出登录重新进入系统保留用户标签页，根据 userId 进行身份识别",
+      "新增：双列菜单新增折叠按钮",
+      "新增：菜单图标完善",
+      "新增：多标签页增加图标",
+      "新增：WebSocket 连接",
+    ],
   },
   {
-    version: 'v3.0.0',
-    title: 'Sass 重构为 Tailwind CSS，Iconfont 替换为 Iconify，性能，目录结构，文件注释全方位优化',
-    date: '2025-11-9',
+    version: "v3.0.0",
+    title: "Sass 重构为 Tailwind CSS，Iconfont 替换为 Iconify，性能，目录结构，文件注释全方位优化",
+    date: "2025-11-9",
     requireReLogin: true,
     detail: [
-      '样式系统重构：Sass 全面迁移至 Tailwind CSS，提升开发效率与样式一致性',
-      '图标方案升级：Iconfont 替换为 Iconify，支持更丰富的图标库与按需加载',
-      '构建优化：完整包体积减少 1.3 MB，显著提升加载性能',
-      '路由注册重构：全面重构路由注册系统，引入面向对象设计，提高代码的可维护性、可测试性和扩展能力',
-      '架构优化：优化目录结构，职责划分更清晰，降低用户学习成本与上手难度',
-      '注释优化：统一模块注释规范，完善每一个组件介绍、功能说明与使用示例，降低用户理解成本与上手难度',
-      '性能提升：优化核心代码逻辑，提升系统运行效率',
-      '设计系统：重构颜色体系，统一 UI 视觉规范，提升界面一致性',
-      '菜单优化：细化菜单样式，优化交互体验与视觉呈现',
-      '组件重构：重构 ArtTextScroll 组件，提升性能与可维护性',
-      '问题修复：修复 ArtForm、ArtSearchBar 自定义组件渲染异常',
-      '功能增强：ArtForm、ArtSearchBar 新增 render 属性，支持自定义组件渲染',
-      '功能增强：useTable hooks 新增 visible 属性，用于控制列默认是否显示',
-      '响应式优化：优化 ArtForm、ArtSearchBar 栅格布局，适配多种屏幕尺寸',
-      '节日功能增强：礼花配置支持跨日期范围设置与自定义播放次数',
-      '依赖更新：升级核心依赖至最新稳定版本',
-      '配置管理优化：新增 setting.ts 配置文件，支持一键复制与重置系统默认设置'
+      "样式系统重构：Sass 全面迁移至 Tailwind CSS，提升开发效率与样式一致性",
+      "图标方案升级：Iconfont 替换为 Iconify，支持更丰富的图标库与按需加载",
+      "构建优化：完整包体积减少 1.3 MB，显著提升加载性能",
+      "路由注册重构：全面重构路由注册系统，引入面向对象设计，提高代码的可维护性、可测试性和扩展能力",
+      "架构优化：优化目录结构，职责划分更清晰，降低用户学习成本与上手难度",
+      "注释优化：统一模块注释规范，完善每一个组件介绍、功能说明与使用示例，降低用户理解成本与上手难度",
+      "性能提升：优化核心代码逻辑，提升系统运行效率",
+      "设计系统：重构颜色体系，统一 UI 视觉规范，提升界面一致性",
+      "菜单优化：细化菜单样式，优化交互体验与视觉呈现",
+      "组件重构：重构 ArtTextScroll 组件，提升性能与可维护性",
+      "问题修复：修复 ArtForm、ArtSearchBar 自定义组件渲染异常",
+      "功能增强：ArtForm、ArtSearchBar 新增 render 属性，支持自定义组件渲染",
+      "功能增强：useTable hooks 新增 visible 属性，用于控制列默认是否显示",
+      "响应式优化：优化 ArtForm、ArtSearchBar 栅格布局，适配多种屏幕尺寸",
+      "节日功能增强：礼花配置支持跨日期范围设置与自定义播放次数",
+      "依赖更新：升级核心依赖至最新稳定版本",
+      "配置管理优化：新增 setting.ts 配置文件，支持一键复制与重置系统默认设置",
     ],
     remark:
-      '重要提示：本次升级涉及样式系统（Sass → Tailwind CSS）与图标库（Iconfont → Iconify）的底层重构，属于破坏性更新。建议新项目直接使用 v3.0，旧版本项目不建议升级。'
+      "重要提示：本次升级涉及样式系统（Sass → Tailwind CSS）与图标库（Iconfont → Iconify）的底层重构，属于破坏性更新。建议新项目直接使用 v3.0，旧版本项目不建议升级。",
   },
   {
-    version: 'v2.6.1',
-    title: 'bug修复、授权页增加主题色切换功能',
-    date: '2025-10-19',
+    version: "v2.6.1",
+    title: "bug修复、授权页增加主题色切换功能",
+    date: "2025-10-19",
     detail: [
-      '修复获取用户信息、获取菜单接口访问无效地址重复调用问题',
-      '升级部分依赖兼容 tailwindcss',
-      '修复 ElButton circle 模式样式',
-      '修复 ElSlect 无法通过键盘选择问题',
-      '修复带参数静态路由跳转登录页面问题',
-      '优化外部链接菜单点击选中状态',
-      '授权页增加主题色切换功能'
-    ]
-  },
-  {
-    version: 'v2.6.0',
-    title: '代码优化、bug修复',
-    date: '2025-10-16',
-    detail: [
-      '优化精简版本菜单数据结构，提升数据一致性',
-      '优化本地开发环境网络请求代理配置',
-      '优化 ElTree 组件默认样式',
-      '新增 VsCode 推荐插件相关配置',
-      '优化 ElDropdown 组件点击触发模式下的交互样式',
-      '扩展注册、密码重置页面顶部组件支持',
-      '优化菜单过滤逻辑',
-      '优化页面切换动画，提升加载速度',
-      '优化暗黑模式文字颜色',
-      '修复静态路由自定义首页路径首次访问跳转登录页问题',
-      '修复退出登录时短暂跳转至 500 页的问题',
-      '修复 v2.5.9 版本首页路由跳转配置失效问题',
-      '修复 v2.5.9 自动导包机制导致的构建异常'
+      "修复获取用户信息、获取菜单接口访问无效地址重复调用问题",
+      "升级部分依赖兼容 tailwindcss",
+      "修复 ElButton circle 模式样式",
+      "修复 ElSlect 无法通过键盘选择问题",
+      "修复带参数静态路由跳转登录页面问题",
+      "优化外部链接菜单点击选中状态",
+      "授权页增加主题色切换功能",
     ],
-    requireReLogin: true
   },
   {
-    version: 'v2.5.9',
-    title: '代码优化',
-    date: '2025-10-12',
+    version: "v2.6.0",
+    title: "代码优化、bug修复",
+    date: "2025-10-16",
     detail: [
-      'views 文件目录、文件名、代码优化',
-      'useTable 分页请求字段增加全局配置 tableConfig.ts',
-      '优化路由配置为模块化结构',
-      '获取菜单接口使用 apifox mock 数据（需在 .env 中 将 VITE_ACCESS_MODE 设为 backend 模式）'
-    ]
-  },
-  {
-    version: 'v2.5.8',
-    title: '依赖升级、bug修复',
-    date: '2025-09-29',
-    detail: [
-      'vue、vite、element-plus 等核心库升级',
-      '修复富文本编辑器全屏顶栏层级问题',
-      '修复表格列排序组件文字益处问题',
-      '修复统计卡片条件判断',
-      '优化 el-tag 样式',
-      '优化顶部进度条颜色',
-      '优化自定义主题配置',
-      '优化 ElementPlus 自定义主题问题',
-      '修复根路径 / 与 HOME_PAGE_PATH 同为 / 时出现的无限重定向'
+      "优化精简版本菜单数据结构，提升数据一致性",
+      "优化本地开发环境网络请求代理配置",
+      "优化 ElTree 组件默认样式",
+      "新增 VsCode 推荐插件相关配置",
+      "优化 ElDropdown 组件点击触发模式下的交互样式",
+      "扩展注册、密码重置页面顶部组件支持",
+      "优化菜单过滤逻辑",
+      "优化页面切换动画，提升加载速度",
+      "优化暗黑模式文字颜色",
+      "修复静态路由自定义首页路径首次访问跳转登录页问题",
+      "修复退出登录时短暂跳转至 500 页的问题",
+      "修复 v2.5.9 版本首页路由跳转配置失效问题",
+      "修复 v2.5.9 自动导包机制导致的构建异常",
     ],
-    remark: '由于项目依赖升级，node 版本需要升级到 v20.19.0 或以上'
+    requireReLogin: true,
   },
   {
-    version: 'v2.5.7',
-    title: '新增表单组件',
-    date: '2025-09-14',
+    version: "v2.5.9",
+    title: "代码优化",
+    date: "2025-10-12",
     detail: [
-      '新增 ArtForm 组件',
-      '修复新版本谷歌浏览器切换主题闪烁问题',
-      '优化表单 label 高度没有对齐问题',
-      '首屏启动性能优化'
-    ]
-  },
-  {
-    version: 'v2.5.6',
-    title: '优化用户体验、bug修复',
-    date: '2025-09-06',
-    detail: [
-      'useTable 类型推导优化，不需要手动传递类型即可实现类型提示',
-      'useTable removeColumn 支持多数据删除',
-      'useTable 自动识别响应体支持自定义配置 (src/utils/table/tableConfig.ts)',
-      'useTable 空数据浏览器警告优化',
-      'api 接口请求代码优化、api.d.ts 类型优化',
-      '优化 ArtTable 顶部按钮换行无法自适应问题（示例：功能示例 / 左右布局表格）',
-      'ArtTable 分页组件选中样式优化',
-      'ArtTable 空状态高度默认撑满',
-      'ArtButtonMore 组件新增图标、颜色配置',
-      'ArtTableHeader 新增搜索按钮，用于控制顶部搜索栏的显示与隐藏',
-      'ArtSearchBar label 为空时不占空间',
-      '表格操作栏拖拽禁止固定列拖拽',
-      '角色管理页面接口对接、代码优化',
-      '菜单管理页面优化',
-      '优化设置中心滚动页面跟随滚动问题',
-      '一级路由是外链时，component 校验逻辑优化',
-      '优化地图右下角拖动问题',
-      '优化暗黑模式刷新页面白色背景问题',
-      '优化左侧菜单折叠按钮间距问题',
-      '移动端显示左侧菜单 logo',
-      '网络请求新增 showSuccessMessage，用于配置是否显示成功消息',
-      '添加全局错误处理基础框架',
-      '修复批量删除整页数据没有返回上一页的bug',
-      '修复动态路由参数导致的问题',
-      '修复动态路由配置 一级路由是 iframe 页面时，全屏问题',
-      '新增权限演示示例',
-      '全局组件采用异步加载策略，提升首屏加载性能'
-    ]
-  },
-  {
-    version: 'v2.5.5',
-    title: 'bug修复、优化用户体验',
-    date: '2025-08-17',
-    detail: [
-      '重构 ArtSearchBar 组件，支持更多组件、表单校验等能力',
-      'useTable 列配置：支持动态更新能力',
-      '修复多个富文本编辑器图标不统一问题',
-      '优化颜色选择器圆角',
-      'el-radio、el-checkbox 统一大小',
-      'art-stats-card 新增小数位、分隔符配置',
-      '路由配置示例优化',
-      '高级表格新增自定义获取数据示例（等待其他请求完成后执行 useTable 数据获取）',
-      'useTable 新增 excludeParams，用于排除某些参数不参与请求',
-      '优化路径别名类型问题',
-      '本地开发跨域配置优化',
-      '修复 useTable 删除最后一整页数据没有返回上一页的问题',
-      '修复 echarts 图表数据初始化、更新数据浏览器报错',
-      '删除 art-chart-empty 组件',
-      '新增 ArtSearchBar 组件示例',
-      '网络请求支持 http 状态码为 401 时退出登录',
-      '优化网络请求退出登录多次提示问题',
-      'useTable 属性、方法命名优化',
-      '登录页UI升级',
-      '403、404、500 页面UI升级'
-    ]
-  },
-  {
-    version: 'v2.5.4',
-    title: 'bug修复、优化用户体验',
-    date: '2025-07-27',
-    detail: [
-      '修复获取用户信息接口时序问题导致路由注册菜单渲染错误bug',
-      '修复动态路由校验问题导致的 iframe 不显示bug',
-      '修复 reset 文件语法错误',
-      '修复 ArtTable 数据类型错误',
-      '路由注册新增 component 校验',
-      '修复地图滚轮滚动放大问题',
-      '网络请求 headers 支持自定义配置',
-      '展开行支持 formatter 渲染'
-    ]
-  },
-  {
-    version: 'v2.5.3',
-    title: 'bug修复、优化用户体验',
-    date: '2025-07-20',
-    detail: [
-      'ArtTable 组件重构',
-      'Element Plus 升级到 v2.10.2',
-      '优化 useTable 分页参数问题',
-      '修复 ArtTable 切换分页大小时执行两次请求bug',
-      '优化网络请求示例：初始化参数、分页携带参数问题',
-      '优化搜索日期范围参数处理',
-      '优化 el-date-picker 组件圆角问题',
-      '优化 el-select 组件 hover 样式',
-      '新增表格左右布局示例',
-      '搜索组件、分页组件高度降低',
-      '优化登录页面滑块动画间隔时长',
-      '优化菜单没有子菜单显示的问题'
-    ]
-  },
-  {
-    version: 'v2.5.2',
-    title: 'bug修复、优化用户体验',
-    date: '2025-07-13',
-    detail: [
-      '新增一键精简脚本，快速准备开发环境',
-      '优化表格无数据时表头不显示问题',
-      'useTable hooks 支持分页字段名自定义映射',
-      '修复 v2.5.0 顶部进度条不显示问题',
-      '修复左侧菜单遮罩异常显示问题',
-      '修复隐藏所有子菜单时仍显示父级菜单的问题',
-      '水平菜单、混合菜单、双列菜单支持徽章显示',
-      '修复 stylelint 导致的登录页滑块样式异常',
-      '修复老旧移动端设备 loading 定位问题',
-      '快速入口支持配置文件模式',
-      '顶栏功能支持配置文件模式',
-      '全局事件总线 mittBus 类型安全优化',
-      '支持自定义首页路径',
-      '优化移动端设置中容器宽度样式',
-      '优化登录页验证滑块文字居中效果',
-      '路由支持配置 redirect 等属性'
-    ]
-  },
-  {
-    version: 'v2.5.1',
-    title: 'bug修复、优化用户体验',
-    date: '2025-07-08',
-    detail: [
-      '修复首次登录系统时 loading 提前关闭bug',
-      'el-card、el-table 背景色跟系统保持一致',
-      '修复 v2.5.0 版本引起的全屏页样式层级过低bug',
-      '修复 v2.5.0 版本引起的表格展开行折叠bug'
-    ]
-  },
-  {
-    version: 'v2.5.0',
-    title: '新增 useTable hooks 表格封装、组件重构',
-    date: '2025-07-06',
-    remark: '建议升级，带来更高效、更智能的表格开发体验',
-    detail: [
-      '重构 ArtTable、ArtTableHeader、ArtNotification 组件',
-      '新增 useTable hooks 表格封装，支持数据获取、转换、响应适配、智能缓存（基于 LRU 算法）、错误处理、列配置与插槽、分页控制、刷新策略等核心功能，全面提升开发效率与用户体验',
-      '修复菜单管理搜索直接修改 pinia 数据的问题',
-      '移除 CountTo 插件，替换为 ArtCountTo 组件',
-      'Echarts 版本升级到 5.6.0',
-      '修复路由守卫 loading 闪烁问题'
-    ]
-  },
-  {
-    version: 'v2.4.2.9',
-    title: '代码重构、修复bug、优化用户体验',
-    date: '2025-07-02',
-    detail: [
-      '菜单布局、顶部导航代码重构',
-      '修复移动端锁屏页部分浏览器无法解锁bug',
-      '优化移动端菜单滚动用户体验',
-      '优化顶部菜单样式问题',
-      '顶部菜单宽度自适应，可显示更多内容，混合菜单支持鼠标滚动',
-      'asyncRoutes 路由配置 auth_mark 字段改为 authMark',
-      '去除重复的 components.d.ts 文件，components.d.ts、auto-imports.d.ts 忽略提交',
-      '优化国际化语言文件加载方式，异步改成同步模式',
-      '优化 el-pagination 大小不一致问题'
-    ]
-  },
-  {
-    version: 'v2.4.2.8',
-    title: '修复 v2.4.2.7 版本访问 / 路径时显示 404 的问题',
-    date: '2025-06-26'
-  },
-  {
-    version: 'v2.4.2.7',
-    title: 'bug修复、优化用户体验',
-    date: '2025-06-25',
-    detail: [
-      '路由支持配置全屏模式',
-      '路由支持自动跳转到菜单的第一个有效路由',
-      '动态路由新增 removeAllDynamicRoutes 方法，可用于彻底清除所有动态路由',
-      '权限自定义指令优化、新增角色权限指令 v-roles、可用于控制元素的显示与隐藏',
-      '修复登录页面拖拽组件 ArtDragVerify 宽度、颜色异常bug',
-      '修复 iframe 页面混合模式、双列模式异常bug',
-      '优化锁屏页面被 el-loading 穿透bug',
-      '跨域请求携带 cookie 配置从环境变量中获取，默认关闭',
-      '针对SEO、可访问性做一些优化',
-      '新增标签页操作示例'
-    ]
-  },
-  {
-    version: 'v2.4.2.6',
-    title: '组件重构与性能优化',
-    date: '2025-06-23',
-    detail: [
-      '重构 components/core/forms 文件夹下的表单相关组件，提升可维护性与一致性',
-      '重构 ArtBreadcrumb 面包屑导航组件，优化逻辑结构与样式',
-      '优化 ArtChatWindow 与 ArtFastEnter 组件代码，提升可读性与性能',
-      '重构 ArtFireworksEffect 烟花效果组件，显著提升渲染性能与动画流畅度',
-      'README 文档新增官方网站链接，便于用户查看项目文档'
-    ]
-  },
-  {
-    version: 'v2.4.2.5',
-    title: '图表组件重构',
-    date: '2025-06-22',
-    detail: [
-      '重构图表组件，优化代码结构与可维护性',
-      '精细调整图表动画与主题配色方案，提升视觉一致性'
-    ]
-  },
-  {
-    version: 'v2.4.2.4',
-    title: '组件重构、代码优化',
-    date: '2025-06-18',
-    detail: [
-      'ArtMenuRight 组件重构',
-      'ArtWatermark 增加类型注释',
-      'components/core/cards 下面的组件重构，代码优化'
-    ]
-  },
-  {
-    version: 'v2.4.2.3',
-    title: '组件重构、代码优化',
-    date: '2025-06-18',
-    detail: [
-      'ArtResultPage 组件重构',
-      'ArtTextScroll 组件代码优化',
-      'ArtException 组件增加类型提示',
-      'ArtCutterImg 组件样式优化、增加类型定义',
-      'ArtVideoPlayer 组件增加类型定义'
-    ]
-  },
-  {
-    version: 'v2.4.2.2',
-    title: '组件重构',
-    date: '2025-06-16',
-    detail: ['返回顶部组件重构', '图标选择器组件重构', '系统Logo组件属性变更']
-  },
-  {
-    version: 'v2.4.2.1',
-    title: '横幅组件重构、Bug修复',
-    date: '2025-06-16',
-    detail: ['横幅组件重构以及优化', '修复混合菜单下第一个菜单是嵌套菜单跳转bug']
-  },
-  {
-    version: 'v2.4.2',
-    title: 'Bug修复与体验优化',
-    date: '2025-06-14',
-    detail: [
-      '重构网络请求模块，增强错误处理、类型安全与多语言支持',
-      '修复移动端搜索栏无法滚动、iPad端页面滚动异常问题',
-      '修复 el-dialog 启用 draggable 属性后，自定义动画失效的问题',
-      '修复 2.3.0 版本本地存储重构后，导致登录、注册等页面多语言设置无法持久化的问题',
-      '引导、列设置多语言完善',
-      '修复表格固定列不起作用bug',
-      '路由配置新增 activePath 激活菜单路径属性',
-      '去除用户列表、菜单管理页面无效代码',
-      '更新技术支持链接'
+      "views 文件目录、文件名、代码优化",
+      "useTable 分页请求字段增加全局配置 tableConfig.ts",
+      "优化路由配置为模块化结构",
+      "获取菜单接口使用 apifox mock 数据（需在 .env 中 将 VITE_ACCESS_MODE 设为 backend 模式）",
     ],
-    requireReLogin: true
   },
   {
-    version: 'v2.4.1.1',
-    title: 'Bug修复与体验优化',
-    date: '2025-06-07',
+    version: "v2.5.8",
+    title: "依赖升级、bug修复",
+    date: "2025-09-29",
     detail: [
-      '修复菜单管理折叠 bug',
-      '优化角色管理页面代码',
-      '修复表格数据为空高度无限变大bug',
-      'el-dialog视觉效果优化，支持配置线条',
-      '系统主题模式从Light改成跟随系统模式'
-    ]
-  },
-  {
-    version: 'v2.4.1',
-    title: '优化菜单交互体验、Echarts 图表性能优化',
-    date: '2025-06-07',
-    detail: [
-      '提升菜单操作跟手感',
-      '页面入场动画时间减少0.04s',
-      '修复 Echarts 图表组件在弹窗中不显示的 bug',
-      'Echarts 图表性能优化，新增可视区域初始化、内存泄漏防护、防抖处理',
-      '锁屏状下禁止使用开发者工具破解锁屏'
-    ]
-  },
-  {
-    version: 'v2.4.0',
-    title: '代码重构与资源优化',
-    date: '2025-06-06',
-    detail: [
-      '全局 TypeScript 类型体系重构，提升类型准确性与可维护性',
-      '重构 utils 工具包，统一工具方法结构，增强可读性与复用性',
-      'utils 新增表单验证与 Cookie 操作相关工具函数',
-      '删除未使用的工具模块与无效资源，精简项目体积',
-      '优化 views 页面结构，移除冗余页面文件',
-      '页面组件增加 defineOptions，明确组件命名',
-      '异常页面多语言支持, 提升国际化体验',
-      '图片资源统一转换为 webp 格式，整体资源体积减少约 50%',
-      '打包产物减少约 1MB，提高加载效率',
-      'HTTP 请求增加 token 过期自动处理逻辑，提升安全性与用户体验'
+      "vue、vite、element-plus 等核心库升级",
+      "修复富文本编辑器全屏顶栏层级问题",
+      "修复表格列排序组件文字益处问题",
+      "修复统计卡片条件判断",
+      "优化 el-tag 样式",
+      "优化顶部进度条颜色",
+      "优化自定义主题配置",
+      "优化 ElementPlus 自定义主题问题",
+      "修复根路径 / 与 HOME_PAGE_PATH 同为 / 时出现的无限重定向",
     ],
-    requireReLogin: true
-  }
-])
+    remark: "由于项目依赖升级，node 版本需要升级到 v20.19.0 或以上",
+  },
+  {
+    version: "v2.5.7",
+    title: "新增表单组件",
+    date: "2025-09-14",
+    detail: [
+      "新增 ArtForm 组件",
+      "修复新版本谷歌浏览器切换主题闪烁问题",
+      "优化表单 label 高度没有对齐问题",
+      "首屏启动性能优化",
+    ],
+  },
+  {
+    version: "v2.5.6",
+    title: "优化用户体验、bug修复",
+    date: "2025-09-06",
+    detail: [
+      "useTable 类型推导优化，不需要手动传递类型即可实现类型提示",
+      "useTable removeColumn 支持多数据删除",
+      "useTable 自动识别响应体支持自定义配置 (src/utils/table/tableConfig.ts)",
+      "useTable 空数据浏览器警告优化",
+      "api 接口请求代码优化、api.d.ts 类型优化",
+      "优化 ArtTable 顶部按钮换行无法自适应问题（示例：功能示例 / 左右布局表格）",
+      "ArtTable 分页组件选中样式优化",
+      "ArtTable 空状态高度默认撑满",
+      "ArtButtonMore 组件新增图标、颜色配置",
+      "ArtTableHeader 新增搜索按钮，用于控制顶部搜索栏的显示与隐藏",
+      "ArtSearchBar label 为空时不占空间",
+      "表格操作栏拖拽禁止固定列拖拽",
+      "角色管理页面接口对接、代码优化",
+      "菜单管理页面优化",
+      "优化设置中心滚动页面跟随滚动问题",
+      "一级路由是外链时，component 校验逻辑优化",
+      "优化地图右下角拖动问题",
+      "优化暗黑模式刷新页面白色背景问题",
+      "优化左侧菜单折叠按钮间距问题",
+      "移动端显示左侧菜单 logo",
+      "网络请求新增 showSuccessMessage，用于配置是否显示成功消息",
+      "添加全局错误处理基础框架",
+      "修复批量删除整页数据没有返回上一页的bug",
+      "修复动态路由参数导致的问题",
+      "修复动态路由配置 一级路由是 iframe 页面时，全屏问题",
+      "新增权限演示示例",
+      "全局组件采用异步加载策略，提升首屏加载性能",
+    ],
+  },
+  {
+    version: "v2.5.5",
+    title: "bug修复、优化用户体验",
+    date: "2025-08-17",
+    detail: [
+      "重构 ArtSearchBar 组件，支持更多组件、表单校验等能力",
+      "useTable 列配置：支持动态更新能力",
+      "修复多个富文本编辑器图标不统一问题",
+      "优化颜色选择器圆角",
+      "el-radio、el-checkbox 统一大小",
+      "art-stats-card 新增小数位、分隔符配置",
+      "路由配置示例优化",
+      "高级表格新增自定义获取数据示例（等待其他请求完成后执行 useTable 数据获取）",
+      "useTable 新增 excludeParams，用于排除某些参数不参与请求",
+      "优化路径别名类型问题",
+      "本地开发跨域配置优化",
+      "修复 useTable 删除最后一整页数据没有返回上一页的问题",
+      "修复 echarts 图表数据初始化、更新数据浏览器报错",
+      "删除 art-chart-empty 组件",
+      "新增 ArtSearchBar 组件示例",
+      "网络请求支持 http 状态码为 401 时退出登录",
+      "优化网络请求退出登录多次提示问题",
+      "useTable 属性、方法命名优化",
+      "登录页UI升级",
+      "403、404、500 页面UI升级",
+    ],
+  },
+  {
+    version: "v2.5.4",
+    title: "bug修复、优化用户体验",
+    date: "2025-07-27",
+    detail: [
+      "修复获取用户信息接口时序问题导致路由注册菜单渲染错误bug",
+      "修复动态路由校验问题导致的 iframe 不显示bug",
+      "修复 reset 文件语法错误",
+      "修复 ArtTable 数据类型错误",
+      "路由注册新增 component 校验",
+      "修复地图滚轮滚动放大问题",
+      "网络请求 headers 支持自定义配置",
+      "展开行支持 formatter 渲染",
+    ],
+  },
+  {
+    version: "v2.5.3",
+    title: "bug修复、优化用户体验",
+    date: "2025-07-20",
+    detail: [
+      "ArtTable 组件重构",
+      "Element Plus 升级到 v2.10.2",
+      "优化 useTable 分页参数问题",
+      "修复 ArtTable 切换分页大小时执行两次请求bug",
+      "优化网络请求示例：初始化参数、分页携带参数问题",
+      "优化搜索日期范围参数处理",
+      "优化 el-date-picker 组件圆角问题",
+      "优化 el-select 组件 hover 样式",
+      "新增表格左右布局示例",
+      "搜索组件、分页组件高度降低",
+      "优化登录页面滑块动画间隔时长",
+      "优化菜单没有子菜单显示的问题",
+    ],
+  },
+  {
+    version: "v2.5.2",
+    title: "bug修复、优化用户体验",
+    date: "2025-07-13",
+    detail: [
+      "新增一键精简脚本，快速准备开发环境",
+      "优化表格无数据时表头不显示问题",
+      "useTable hooks 支持分页字段名自定义映射",
+      "修复 v2.5.0 顶部进度条不显示问题",
+      "修复左侧菜单遮罩异常显示问题",
+      "修复隐藏所有子菜单时仍显示父级菜单的问题",
+      "水平菜单、混合菜单、双列菜单支持徽章显示",
+      "修复 stylelint 导致的登录页滑块样式异常",
+      "修复老旧移动端设备 loading 定位问题",
+      "快速入口支持配置文件模式",
+      "顶栏功能支持配置文件模式",
+      "全局事件总线 mittBus 类型安全优化",
+      "支持自定义首页路径",
+      "优化移动端设置中容器宽度样式",
+      "优化登录页验证滑块文字居中效果",
+      "路由支持配置 redirect 等属性",
+    ],
+  },
+  {
+    version: "v2.5.1",
+    title: "bug修复、优化用户体验",
+    date: "2025-07-08",
+    detail: [
+      "修复首次登录系统时 loading 提前关闭bug",
+      "el-card、el-table 背景色跟系统保持一致",
+      "修复 v2.5.0 版本引起的全屏页样式层级过低bug",
+      "修复 v2.5.0 版本引起的表格展开行折叠bug",
+    ],
+  },
+  {
+    version: "v2.5.0",
+    title: "新增 useTable hooks 表格封装、组件重构",
+    date: "2025-07-06",
+    remark: "建议升级，带来更高效、更智能的表格开发体验",
+    detail: [
+      "重构 ArtTable、ArtTableHeader、ArtNotification 组件",
+      "新增 useTable hooks 表格封装，支持数据获取、转换、响应适配、智能缓存（基于 LRU 算法）、错误处理、列配置与插槽、分页控制、刷新策略等核心功能，全面提升开发效率与用户体验",
+      "修复菜单管理搜索直接修改 pinia 数据的问题",
+      "移除 CountTo 插件，替换为 ArtCountTo 组件",
+      "Echarts 版本升级到 5.6.0",
+      "修复路由守卫 loading 闪烁问题",
+    ],
+  },
+  {
+    version: "v2.4.2.9",
+    title: "代码重构、修复bug、优化用户体验",
+    date: "2025-07-02",
+    detail: [
+      "菜单布局、顶部导航代码重构",
+      "修复移动端锁屏页部分浏览器无法解锁bug",
+      "优化移动端菜单滚动用户体验",
+      "优化顶部菜单样式问题",
+      "顶部菜单宽度自适应，可显示更多内容，混合菜单支持鼠标滚动",
+      "asyncRoutes 路由配置 auth_mark 字段改为 authMark",
+      "去除重复的 components.d.ts 文件，components.d.ts、auto-imports.d.ts 忽略提交",
+      "优化国际化语言文件加载方式，异步改成同步模式",
+      "优化 el-pagination 大小不一致问题",
+    ],
+  },
+  {
+    version: "v2.4.2.8",
+    title: "修复 v2.4.2.7 版本访问 / 路径时显示 404 的问题",
+    date: "2025-06-26",
+  },
+  {
+    version: "v2.4.2.7",
+    title: "bug修复、优化用户体验",
+    date: "2025-06-25",
+    detail: [
+      "路由支持配置全屏模式",
+      "路由支持自动跳转到菜单的第一个有效路由",
+      "动态路由新增 removeAllDynamicRoutes 方法，可用于彻底清除所有动态路由",
+      "权限自定义指令优化、新增角色权限指令 v-roles、可用于控制元素的显示与隐藏",
+      "修复登录页面拖拽组件 ArtDragVerify 宽度、颜色异常bug",
+      "修复 iframe 页面混合模式、双列模式异常bug",
+      "优化锁屏页面被 el-loading 穿透bug",
+      "跨域请求携带 cookie 配置从环境变量中获取，默认关闭",
+      "针对SEO、可访问性做一些优化",
+      "新增标签页操作示例",
+    ],
+  },
+  {
+    version: "v2.4.2.6",
+    title: "组件重构与性能优化",
+    date: "2025-06-23",
+    detail: [
+      "重构 components/core/forms 文件夹下的表单相关组件，提升可维护性与一致性",
+      "重构 ArtBreadcrumb 面包屑导航组件，优化逻辑结构与样式",
+      "优化 ArtChatWindow 与 ArtFastEnter 组件代码，提升可读性与性能",
+      "重构 ArtFireworksEffect 烟花效果组件，显著提升渲染性能与动画流畅度",
+      "README 文档新增官方网站链接，便于用户查看项目文档",
+    ],
+  },
+  {
+    version: "v2.4.2.5",
+    title: "图表组件重构",
+    date: "2025-06-22",
+    detail: [
+      "重构图表组件，优化代码结构与可维护性",
+      "精细调整图表动画与主题配色方案，提升视觉一致性",
+    ],
+  },
+  {
+    version: "v2.4.2.4",
+    title: "组件重构、代码优化",
+    date: "2025-06-18",
+    detail: [
+      "ArtMenuRight 组件重构",
+      "ArtWatermark 增加类型注释",
+      "components/core/cards 下面的组件重构，代码优化",
+    ],
+  },
+  {
+    version: "v2.4.2.3",
+    title: "组件重构、代码优化",
+    date: "2025-06-18",
+    detail: [
+      "ArtResultPage 组件重构",
+      "ArtTextScroll 组件代码优化",
+      "ArtException 组件增加类型提示",
+      "ArtCutterImg 组件样式优化、增加类型定义",
+      "ArtVideoPlayer 组件增加类型定义",
+    ],
+  },
+  {
+    version: "v2.4.2.2",
+    title: "组件重构",
+    date: "2025-06-16",
+    detail: ["返回顶部组件重构", "图标选择器组件重构", "系统Logo组件属性变更"],
+  },
+  {
+    version: "v2.4.2.1",
+    title: "横幅组件重构、Bug修复",
+    date: "2025-06-16",
+    detail: ["横幅组件重构以及优化", "修复混合菜单下第一个菜单是嵌套菜单跳转bug"],
+  },
+  {
+    version: "v2.4.2",
+    title: "Bug修复与体验优化",
+    date: "2025-06-14",
+    detail: [
+      "重构网络请求模块，增强错误处理、类型安全与多语言支持",
+      "修复移动端搜索栏无法滚动、iPad端页面滚动异常问题",
+      "修复 el-dialog 启用 draggable 属性后，自定义动画失效的问题",
+      "修复 2.3.0 版本本地存储重构后，导致登录、注册等页面多语言设置无法持久化的问题",
+      "引导、列设置多语言完善",
+      "修复表格固定列不起作用bug",
+      "路由配置新增 activePath 激活菜单路径属性",
+      "去除用户列表、菜单管理页面无效代码",
+      "更新技术支持链接",
+    ],
+    requireReLogin: true,
+  },
+  {
+    version: "v2.4.1.1",
+    title: "Bug修复与体验优化",
+    date: "2025-06-07",
+    detail: [
+      "修复菜单管理折叠 bug",
+      "优化角色管理页面代码",
+      "修复表格数据为空高度无限变大bug",
+      "el-dialog视觉效果优化，支持配置线条",
+      "系统主题模式从Light改成跟随系统模式",
+    ],
+  },
+  {
+    version: "v2.4.1",
+    title: "优化菜单交互体验、Echarts 图表性能优化",
+    date: "2025-06-07",
+    detail: [
+      "提升菜单操作跟手感",
+      "页面入场动画时间减少0.04s",
+      "修复 Echarts 图表组件在弹窗中不显示的 bug",
+      "Echarts 图表性能优化，新增可视区域初始化、内存泄漏防护、防抖处理",
+      "锁屏状下禁止使用开发者工具破解锁屏",
+    ],
+  },
+  {
+    version: "v2.4.0",
+    title: "代码重构与资源优化",
+    date: "2025-06-06",
+    detail: [
+      "全局 TypeScript 类型体系重构，提升类型准确性与可维护性",
+      "重构 utils 工具包，统一工具方法结构，增强可读性与复用性",
+      "utils 新增表单验证与 Cookie 操作相关工具函数",
+      "删除未使用的工具模块与无效资源，精简项目体积",
+      "优化 views 页面结构，移除冗余页面文件",
+      "页面组件增加 defineOptions，明确组件命名",
+      "异常页面多语言支持, 提升国际化体验",
+      "图片资源统一转换为 webp 格式，整体资源体积减少约 50%",
+      "打包产物减少约 1MB，提高加载效率",
+      "HTTP 请求增加 token 过期自动处理逻辑，提升安全性与用户体验",
+    ],
+    requireReLogin: true,
+  },
+]);
diff --git a/frontend/new-web/src/plugins/download.ts b/frontend/new-web/src/plugins/download.ts
new file mode 100644
index 00000000..f0a3b103
--- /dev/null
+++ b/frontend/new-web/src/plugins/download.ts
@@ -0,0 +1,98 @@
+import axios, { AxiosResponse } from "axios";
+import { ElLoading, ElMessage } from "element-plus";
+import { saveAs as fileSaverSaveAs } from "file-saver";
+import { Auth } from "@/utils/auth";
+import errorCode from "@/utils/errorCode";
+import { blobValidate } from "@/utils/common";
+
+const baseURL = import.meta.env.VITE_APP_BASE_API;
+let downloadLoadingInstance: any;
+
+interface DownloadUtil {
+  name(name: string, isDelete?: boolean): void;
+  resource(resource: string): void;
+  zip(url: string, name: string): void;
+  saveAs(text: Blob | string, name: string, opts?: any): void;
+  printErrMsg(data: Blob): Promise<void>;
+}
+
+const download: DownloadUtil = {
+  name(name: string, isDelete: boolean = true): void {
+    const url =
+      baseURL + "/common/download?fileName=" + encodeURIComponent(name) + "&delete=" + isDelete;
+    axios({
+      method: "get",
+      url,
+      responseType: "blob",
+      headers: { Authorization: "Bearer " + Auth.getAccessToken() },
+    }).then((res: AxiosResponse<Blob>) => {
+      const isBlob = blobValidate(res.data);
+      if (isBlob) {
+        const blob = new Blob([res.data]);
+        download.saveAs(blob, decodeURIComponent(res.headers["download-filename"]));
+      } else {
+        download.printErrMsg(res.data);
+      }
+    });
+  },
+
+  resource(resource: string): void {
+    const url = baseURL + "/common/download/resource?resource=" + encodeURIComponent(resource);
+    axios({
+      method: "get",
+      url,
+      responseType: "blob",
+      headers: { Authorization: "Bearer " + Auth.getAccessToken() },
+    }).then((res: AxiosResponse<Blob>) => {
+      const isBlob = blobValidate(res.data);
+      if (isBlob) {
+        const blob = new Blob([res.data]);
+        download.saveAs(blob, decodeURIComponent(res.headers["download-filename"]));
+      } else {
+        download.printErrMsg(res.data);
+      }
+    });
+  },
+
+  zip(url: string, name: string): void {
+    const fullUrl = baseURL + url;
+    downloadLoadingInstance = ElLoading.service({
+      text: "正在下载数据，请稍候",
+      background: "rgba(0, 0, 0, 0.7)",
+    });
+    axios({
+      method: "get",
+      url: fullUrl,
+      responseType: "blob",
+      headers: { Authorization: "Bearer " + Auth.getAccessToken() },
+    })
+      .then((res: AxiosResponse<Blob>) => {
+        const isBlob = blobValidate(res.data);
+        if (isBlob) {
+          const blob = new Blob([res.data], { type: "application/zip" });
+          download.saveAs(blob, name);
+        } else {
+          download.printErrMsg(res.data);
+        }
+        downloadLoadingInstance.close();
+      })
+      .catch((r: any) => {
+        console.error(r);
+        ElMessage.error("下载文件出现错误，请联系管理员！");
+        downloadLoadingInstance.close();
+      });
+  },
+
+  saveAs(text: Blob | string, name: string, opts?: any): void {
+    fileSaverSaveAs(text, name, opts);
+  },
+
+  async printErrMsg(data: Blob): Promise<void> {
+    const resText = await data.text();
+    const rspObj = JSON.parse(resText);
+    const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode["default"];
+    ElMessage.error(errMsg);
+  },
+};
+
+export default download;
diff --git a/frontend/new-web/src/plugins/echarts.ts b/frontend/new-web/src/plugins/echarts.ts
index 4f56d89f..4bc4e857 100644
--- a/frontend/new-web/src/plugins/echarts.ts
+++ b/frontend/new-web/src/plugins/echarts.ts
@@ -5,11 +5,11 @@
  * 只注册项目中实际使用的图表类型和组件。
  *
  * @module plugins/echarts
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
 // ECharts 按需导入配置
-import * as echarts from 'echarts/core'
+import * as echarts from "echarts/core";
 
 // 导入图表类型
 import {
@@ -19,8 +19,8 @@ import {
   ScatterChart,
   RadarChart,
   MapChart,
-  CandlestickChart
-} from 'echarts/charts'
+  CandlestickChart,
+} from "echarts/charts";
 
 // 导入组件
 import {
@@ -34,11 +34,11 @@ import {
   ToolboxComponent,
   BrushComponent,
   GeoComponent,
-  VisualMapComponent
-} from 'echarts/components'
+  VisualMapComponent,
+} from "echarts/components";
 
 // 导入渲染器
-import { CanvasRenderer } from 'echarts/renderers'
+import { CanvasRenderer } from "echarts/renderers";
 
 // 注册必要的组件
 echarts.use([
@@ -65,12 +65,12 @@ echarts.use([
   VisualMapComponent,
 
   // 渲染器
-  CanvasRenderer
-])
+  CanvasRenderer,
+]);
 
 // 导出 echarts 实例和类型
-export { echarts }
-export type { EChartsOption, BarSeriesOption } from 'echarts'
+export { echarts };
+export type { EChartsOption, BarSeriesOption } from "echarts";
 
 // 导出常用的图形工具
-export const graphic = echarts.graphic
+export const graphic = echarts.graphic;
diff --git a/frontend/new-web/src/plugins/icons.ts b/frontend/new-web/src/plugins/icons.ts
new file mode 100644
index 00000000..dd7b517c
--- /dev/null
+++ b/frontend/new-web/src/plugins/icons.ts
@@ -0,0 +1,9 @@
+import type { App } from "vue";
+import * as ElementPlusIconsVue from "@element-plus/icons-vue";
+
+// 注册所有图标
+export function initElIcons(app: App<Element>) {
+  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component);
+  }
+}
diff --git a/frontend/new-web/src/plugins/index.ts b/frontend/new-web/src/plugins/index.ts
index 4536a860..deb3c782 100644
--- a/frontend/new-web/src/plugins/index.ts
+++ b/frontend/new-web/src/plugins/index.ts
@@ -3,4 +3,36 @@
  * 集中管理第三方库的封装和配置
  */
 
-export * from './echarts'
+export * from "./echarts";
+
+import type { App } from "vue";
+
+import { initGlobDirectives } from "@/directives";
+import { initI18n } from "@/locales";
+import { initRouter } from "@/router";
+import { initStore } from "@/store";
+import { initElIcons } from "./icons";
+import { initPermission } from "./permission";
+import { InstallCodeMirror } from "codemirror-editor-vue3";
+import ElementPlus from "element-plus";
+
+export default {
+  install(app: App<Element>) {
+    // 自定义指令(directive)
+    initGlobDirectives(app);
+    // 路由(router)
+    initRouter(app);
+    // 状态管理(store)
+    initStore(app);
+    // 国际化
+    initI18n(app);
+    // Element-plus图标
+    initElIcons(app);
+    // 路由守卫
+    initPermission(app);
+    // 注册 CodeMirror
+    app.use(InstallCodeMirror);
+    // 注册 ElementPlus
+    app.use(ElementPlus);
+  },
+};
diff --git a/frontend/new-web/src/plugins/permission.ts b/frontend/new-web/src/plugins/permission.ts
new file mode 100644
index 00000000..3a83da8c
--- /dev/null
+++ b/frontend/new-web/src/plugins/permission.ts
@@ -0,0 +1,101 @@
+import type { NavigationGuardNext, RouteLocationNormalized, RouteRecordRaw } from "vue-router";
+import NProgress from "@/utils/ui/nprogress";
+import { Auth } from "@/utils/auth";
+import { router } from "@/router";
+import { usePermissionStore, useUserStore } from "@/store";
+
+export function initPermission() {
+  // 白名单路由
+  const whiteList = ["/login"];
+
+  router.beforeEach(async (to, from, next) => {
+    NProgress.start();
+
+    try {
+      const isLoggedIn = Auth.isLoggedIn();
+
+      if (isLoggedIn) {
+        // 如果已登录但访问登录页，重定向到首页
+        if (to.path === "/login") {
+          next({ path: "/" });
+          return;
+        }
+
+        // 处理已登录用户的路由访问
+        await handleAuthenticatedUser(to, from, next);
+      } else {
+        // 未登录用户的处理
+        if (whiteList.includes(to.path)) {
+          next();
+        } else {
+          next(`/login?redirect=${encodeURIComponent(to.fullPath)}`);
+          NProgress.done();
+        }
+      }
+    } catch (error) {
+      // 错误处理：重置状态并跳转登录（保留 redirect 与未登录分支一致）
+      console.error("Route guard error:", error);
+      await useUserStore().resetAllState();
+      next(`/login?redirect=${encodeURIComponent(to.fullPath)}`);
+      NProgress.done();
+    }
+  });
+
+  // 后置守卫，确保进度条关闭
+  router.afterEach(() => {
+    NProgress.done();
+  });
+}
+
+/**
+ * 处理已登录用户的路由访问
+ */
+async function handleAuthenticatedUser(
+  to: RouteLocationNormalized,
+  from: RouteLocationNormalized,
+  next: NavigationGuardNext
+) {
+  const permissionStore = usePermissionStore();
+  const userStore = useUserStore();
+
+  try {
+    // 检查路由是否已生成
+    if (!permissionStore.isRouteGenerated) {
+      if (!userStore.basicInfo?.roles?.length) {
+        await userStore.getUserInfo();
+      }
+
+      const dynamicRoutes = await permissionStore.generateRoutes();
+      // 添加路由到路由器
+      dynamicRoutes.forEach((route: RouteRecordRaw) => {
+        router.addRoute(route);
+      });
+
+      // 路由生成完成后，重新导航到目标路由
+      next({ ...to, replace: true });
+      return;
+    }
+
+    // 路由已加载，检查路由是否存在
+    if (to.matched.length === 0) {
+      next("/404");
+      return;
+    }
+
+    // 动态设置页面标题（仅做简单净化，避免 query 注入标签/过长字符串影响标签栏展示）
+    const rawTitle = (to.params.title as string) || (to.query.title as string);
+    if (rawTitle && typeof rawTitle === "string") {
+      const safe = rawTitle.replace(/[<>]/g, "").trim().slice(0, 64);
+      if (safe) {
+        to.meta.title = safe;
+      }
+    }
+
+    next();
+  } catch (error) {
+    console.error("❌ Route guard error:", error);
+    await useUserStore().resetAllState();
+    next(`/login?redirect=${encodeURIComponent(to.fullPath)}`);
+    NProgress.done();
+  }
+}
diff --git a/frontend/new-web/src/router/core/ComponentLoader.ts b/frontend/new-web/src/router/core/ComponentLoader.ts
index 8af3ce3b..b8fd0476 100644
--- a/frontend/new-web/src/router/core/ComponentLoader.ts
+++ b/frontend/new-web/src/router/core/ComponentLoader.ts
@@ -4,17 +4,18 @@
  * 负责动态加载 Vue 组件
  *
  * @module router/core/ComponentLoader
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
-import { h } from 'vue'
+import { h } from "vue";
+import { RoutesAlias } from "@/router/routesAlias";
 
 export class ComponentLoader {
-  private modules: Record<string, () => Promise<any>>
+  private modules: Record<string, () => Promise<any>>;
 
   constructor() {
     // 动态导入 views 目录下所有 .vue 组件
-    this.modules = import.meta.glob('../../views/**/*.vue')
+    this.modules = import.meta.glob("../../views/**/*.vue");
   }
 
   /**
@@ -22,38 +23,47 @@ export class ComponentLoader {
    */
   load(componentPath: string): () => Promise<any> {
     if (!componentPath) {
-      return this.createEmptyComponent()
+      return this.createEmptyComponent();
     }
 
-    // 构建可能的路径
-    const fullPath = `../../views${componentPath}.vue`
-    const fullPathWithIndex = `../../views${componentPath}/index.vue`
+    /** 布局别名指向 `@/layouts/index.vue`（勿写成 `/layouts/index`，会在 views 下误解析） */
+    if (componentPath === RoutesAlias.Layout || componentPath === "/layouts/index") {
+      return this.loadLayout();
+    }
+
+    const normalized = componentPath.startsWith("/")
+      ? componentPath
+      : `/${componentPath.replace(/^\/+/, "")}`;
+
+    // 构建可能的路径（后端常为 dashboard/workplace，需补前导 /）
+    const fullPath = `../../views${normalized}.vue`;
+    const fullPathWithIndex = `../../views${normalized}/index.vue`;
 
     // 先尝试直接路径，再尝试添加/index的路径
-    const module = this.modules[fullPath] || this.modules[fullPathWithIndex]
+    const module = this.modules[fullPath] || this.modules[fullPathWithIndex];
 
     if (!module) {
       console.error(
         `[ComponentLoader] 未找到组件: ${componentPath}，尝试过的路径: ${fullPath} 和 ${fullPathWithIndex}`
-      )
-      return this.createErrorComponent(componentPath)
+      );
+      return this.createErrorComponent(componentPath);
     }
 
-    return module
+    return module;
   }
 
   /**
    * 加载布局组件
    */
   loadLayout(): () => Promise<any> {
-    return () => import('@/views/index/index.vue')
+    return () => import("@/layouts/index.vue");
   }
 
   /**
    * 加载 iframe 组件
    */
   loadIframe(): () => Promise<any> {
-    return () => import('@/views/outside/Iframe.vue')
+    return () => import("@/views/outside/Iframe.vue");
   }
 
   /**
@@ -63,9 +73,9 @@ export class ComponentLoader {
     return () =>
       Promise.resolve({
         render() {
-          return h('div', {})
-        }
-      })
+          return h("div", {});
+        },
+      });
   }
 
   /**
@@ -75,8 +85,8 @@ export class ComponentLoader {
     return () =>
       Promise.resolve({
         render() {
-          return h('div', { class: 'route-error' }, `组件未找到: ${componentPath}`)
-        }
-      })
+          return h("div", { class: "route-error" }, `组件未找到: ${componentPath}`);
+        },
+      });
   }
 }
diff --git a/frontend/new-web/src/router/core/IframeRouteManager.ts b/frontend/new-web/src/router/core/IframeRouteManager.ts
index c054ca19..ddd183cb 100644
--- a/frontend/new-web/src/router/core/IframeRouteManager.ts
+++ b/frontend/new-web/src/router/core/IframeRouteManager.ts
@@ -4,22 +4,22 @@
  * 负责管理 iframe 类型的路由
  *
  * @module router/core/IframeRouteManager
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
-import type { AppRouteRecord } from '@/types/router'
+import type { AppRouteRecord } from "@/types/router";
 
 export class IframeRouteManager {
-  private static instance: IframeRouteManager
-  private iframeRoutes: AppRouteRecord[] = []
+  private static instance: IframeRouteManager;
+  private iframeRoutes: AppRouteRecord[] = [];
 
   private constructor() {}
 
   static getInstance(): IframeRouteManager {
     if (!IframeRouteManager.instance) {
-      IframeRouteManager.instance = new IframeRouteManager()
+      IframeRouteManager.instance = new IframeRouteManager();
     }
-    return IframeRouteManager.instance
+    return IframeRouteManager.instance;
   }
 
   /**
@@ -27,7 +27,7 @@ export class IframeRouteManager {
    */
   add(route: AppRouteRecord): void {
     if (!this.iframeRoutes.find((r) => r.path === route.path)) {
-      this.iframeRoutes.push(route)
+      this.iframeRoutes.push(route);
     }
   }
 
@@ -35,21 +35,21 @@ export class IframeRouteManager {
    * 获取所有 iframe 路由
    */
   getAll(): AppRouteRecord[] {
-    return this.iframeRoutes
+    return this.iframeRoutes;
   }
 
   /**
    * 根据路径查找 iframe 路由
    */
   findByPath(path: string): AppRouteRecord | undefined {
-    return this.iframeRoutes.find((route) => route.path === path)
+    return this.iframeRoutes.find((route) => route.path === path);
   }
 
   /**
    * 清空所有 iframe 路由
    */
   clear(): void {
-    this.iframeRoutes = []
+    this.iframeRoutes = [];
   }
 
   /**
@@ -57,7 +57,7 @@ export class IframeRouteManager {
    */
   save(): void {
     if (this.iframeRoutes.length > 0) {
-      sessionStorage.setItem('iframeRoutes', JSON.stringify(this.iframeRoutes))
+      sessionStorage.setItem("iframeRoutes", JSON.stringify(this.iframeRoutes));
     }
   }
 
@@ -66,13 +66,13 @@ export class IframeRouteManager {
    */
   load(): void {
     try {
-      const data = sessionStorage.getItem('iframeRoutes')
+      const data = sessionStorage.getItem("iframeRoutes");
       if (data) {
-        this.iframeRoutes = JSON.parse(data)
+        this.iframeRoutes = JSON.parse(data);
       }
     } catch (error) {
-      console.error('[IframeRouteManager] 加载 iframe 路由失败:', error)
-      this.iframeRoutes = []
+      console.error("[IframeRouteManager] 加载 iframe 路由失败:", error);
+      this.iframeRoutes = [];
     }
   }
 }
diff --git a/frontend/new-web/src/router/core/MenuProcessor.ts b/frontend/new-web/src/router/core/MenuProcessor.ts
index 3f822d5a..4777fbdd 100644
--- a/frontend/new-web/src/router/core/MenuProcessor.ts
+++ b/frontend/new-web/src/router/core/MenuProcessor.ts
@@ -4,81 +4,107 @@
  * 负责菜单数据的获取、过滤和处理
  *
  * @module router/core/MenuProcessor
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
-import type { AppRouteRecord } from '@/types/router'
-import { useUserStore } from '@/store/modules/user'
-import { useAppMode } from '@/hooks/core/useAppMode'
-import { fetchGetMenuList } from '@/api/system-manage'
-import { asyncRoutes } from '../routes/asyncRoutes'
-import { RoutesAlias } from '../routesAlias'
-import { formatMenuTitle } from '@/utils'
+import type { AppRouteRecord } from "@/types/router";
+import { useUserStore } from "@/store/modules/user.store";
+import { useAppMode } from "@/hooks/core/useAppMode";
+import MenuAPI from "@/api/module_system/menu";
+import { asyncRoutes } from "../routes/asyncRoutes";
+import { RoutesAlias } from "../routesAlias";
+import { backendMenusToAppRoutes } from "../utils/backendMenuTransform";
+import { mergeAppRouteRecords } from "../utils/mergeAppRouteRecords";
+import { formatMenuTitle } from "@/utils";
 
 export class MenuProcessor {
   /**
    * 获取菜单数据
    */
   async getMenuList(): Promise<AppRouteRecord[]> {
-    const { isFrontendMode } = useAppMode()
+    const { isFrontendMode, isMixedMenuMode } = useAppMode();
 
-    let menuList: AppRouteRecord[]
-    if (isFrontendMode.value) {
-      menuList = await this.processFrontendMenu()
+    let menuList: AppRouteRecord[];
+    if (isMixedMenuMode.value) {
+      menuList = await this.processMixedMenu();
+    } else if (isFrontendMode.value) {
+      menuList = await this.processFrontendMenu();
     } else {
-      menuList = await this.processBackendMenu()
+      menuList = await this.processBackendMenu();
     }
 
     // 在规范化路径之前，验证原始路径配置
-    this.validateMenuPaths(menuList)
+    this.validateMenuPaths(menuList);
 
     // 规范化路径（将相对路径转换为完整路径）
-    return this.normalizeMenuPaths(menuList)
+    return this.normalizeMenuPaths(menuList);
   }
 
   /**
    * 处理前端控制模式的菜单
    */
   private async processFrontendMenu(): Promise<AppRouteRecord[]> {
-    const userStore = useUserStore()
-    const roles = userStore.info?.roles
+    const userStore = useUserStore();
+    const roles = userStore.info?.roles;
 
-    let menuList = [...asyncRoutes]
+    let menuList = [...asyncRoutes];
 
-    // 根据角色过滤菜单
+    // 根据角色过滤菜单（仅当能解析出角色 code 时才过滤；否则勿用空数组误杀全部 meta.roles）
     if (roles && roles.length > 0) {
-      menuList = this.filterMenuByRoles(menuList, roles)
+      const roleCodes = roles
+        .map((role) => (role as any).code)
+        .filter((code): code is string => !!code);
+      if (roleCodes.length > 0) {
+        menuList = this.filterMenuByRoles(menuList, roleCodes);
+      }
     }
 
-    return this.filterEmptyMenus(menuList)
+    return this.filterEmptyMenus(menuList);
+  }
+
+  /**
+   * 混合模式：后端菜单 + 前端 asyncRoutes（按路由 name 去重，后端优先）
+   */
+  private async processMixedMenu(): Promise<AppRouteRecord[]> {
+    let backend: AppRouteRecord[] = [];
+    try {
+      backend = await this.processBackendMenu();
+    } catch (e) {
+      console.warn("[MenuProcessor] mixed：后端菜单获取失败，本次仅挂载前端路由", e);
+    }
+    const frontend = await this.processFrontendMenu();
+    const merged = mergeAppRouteRecords(backend, frontend);
+    return this.filterEmptyMenus(merged);
   }
 
   /**
    * 处理后端控制模式的菜单
    */
   private async processBackendMenu(): Promise<AppRouteRecord[]> {
-    const list = await fetchGetMenuList()
-    return this.filterEmptyMenus(list)
+    const response = await MenuAPI.listMenu({ menu_client: "pc" });
+    const list = response.data.data || [];
+    const routes = backendMenusToAppRoutes(list);
+    return this.filterEmptyMenus(routes);
   }
 
   /**
    * 根据角色过滤菜单
    */
-  private filterMenuByRoles(menu: AppRouteRecord[], roles: string[]): AppRouteRecord[] {
+  private filterMenuByRoles(menu: AppRouteRecord[], roleCodes: string[]): AppRouteRecord[] {
     return menu.reduce((acc: AppRouteRecord[], item) => {
-      const itemRoles = item.meta?.roles
-      const hasPermission = !itemRoles || itemRoles.some((role) => roles?.includes(role))
+      const itemRoles = item.meta?.roles;
+      const hasPermission = !itemRoles || itemRoles.some((role) => roleCodes?.includes(role));
 
       if (hasPermission) {
-        const filteredItem = { ...item }
+        const filteredItem = { ...item };
         if (filteredItem.children?.length) {
-          filteredItem.children = this.filterMenuByRoles(filteredItem.children, roles)
+          filteredItem.children = this.filterMenuByRoles(filteredItem.children, roleCodes);
         }
-        acc.push(filteredItem)
+        acc.push(filteredItem);
       }
 
-      return acc
-    }, [])
+      return acc;
+    }, []);
   }
 
   /**
@@ -89,65 +115,65 @@ export class MenuProcessor {
       .map((item) => {
         // 如果有子菜单，先递归过滤子菜单
         if (item.children && item.children.length > 0) {
-          const filteredChildren = this.filterEmptyMenus(item.children)
+          const filteredChildren = this.filterEmptyMenus(item.children);
           return {
             ...item,
-            children: filteredChildren
-          }
+            children: filteredChildren,
+          };
         }
-        return item
+        return item;
       })
       .filter((item) => {
         // 如果定义了 children 属性（即使是空数组），说明这是一个目录菜单，应该保留
-        if ('children' in item) {
-          return true
+        if ("children" in item) {
+          return true;
         }
 
         // 如果有外链或 iframe，保留
         if (item.meta?.isIframe === true || item.meta?.link) {
-          return true
+          return true;
         }
 
         // 如果有有效的 component，保留
-        if (item.component && item.component !== '' && item.component !== RoutesAlias.Layout) {
-          return true
+        if (item.component && item.component !== "" && item.component !== RoutesAlias.Layout) {
+          return true;
         }
 
         // 其他情况过滤掉
-        return false
-      })
+        return false;
+      });
   }
 
   /**
    * 验证菜单列表是否有效
    */
   validateMenuList(menuList: AppRouteRecord[]): boolean {
-    return Array.isArray(menuList) && menuList.length > 0
+    return Array.isArray(menuList) && menuList.length > 0;
   }
 
   /**
    * 规范化菜单路径
    * 将相对路径转换为完整路径，确保菜单跳转正确
    */
-  private normalizeMenuPaths(menuList: AppRouteRecord[], parentPath = ''): AppRouteRecord[] {
+  private normalizeMenuPaths(menuList: AppRouteRecord[], parentPath = ""): AppRouteRecord[] {
     return menuList.map((item) => {
       // 构建完整路径
-      const fullPath = this.buildFullPath(item.path || '', parentPath)
+      const fullPath = this.buildFullPath(item.path || "", parentPath);
 
       // 递归处理子菜单
       const children = item.children?.length
         ? this.normalizeMenuPaths(item.children, fullPath)
-        : item.children
+        : item.children;
 
-      const redirect = item.redirect || this.resolveDefaultRedirect(children)
+      const redirect = item.redirect || this.resolveDefaultRedirect(children);
 
       return {
         ...item,
         path: fullPath,
         redirect,
-        children
-      }
-    })
+        children,
+      };
+    });
   }
 
   /**
@@ -155,21 +181,21 @@ export class MenuProcessor {
    */
   private resolveDefaultRedirect(children?: AppRouteRecord[]): string | undefined {
     if (!children?.length) {
-      return undefined
+      return undefined;
     }
 
     for (const child of children) {
       if (this.isNavigableRoute(child)) {
-        return child.path
+        return child.path;
       }
 
-      const nestedRedirect = this.resolveDefaultRedirect(child.children)
+      const nestedRedirect = this.resolveDefaultRedirect(child.children);
       if (nestedRedirect) {
-        return nestedRedirect
+        return nestedRedirect;
       }
     }
 
-    return undefined
+    return undefined;
   }
 
   /**
@@ -178,12 +204,12 @@ export class MenuProcessor {
   private isNavigableRoute(route: AppRouteRecord): boolean {
     return Boolean(
       route.path &&
-        route.path !== '/' &&
+        route.path !== "/" &&
         !route.meta?.link &&
         route.meta?.isIframe !== true &&
         route.component &&
-        route.component !== ''
-    )
+        route.component !== ""
+    );
   }
 
   /**
@@ -196,25 +222,25 @@ export class MenuProcessor {
    */
   private validateMenuPaths(menuList: AppRouteRecord[], level = 1): void {
     menuList.forEach((route) => {
-      if (!route.children?.length) return
+      if (!route.children?.length) return;
 
-      const parentName = String(route.name || route.path || '未知路由')
+      const parentName = String(route.name || route.path || "未知路由");
 
       route.children.forEach((child) => {
-        const childPath = child.path || ''
+        const childPath = child.path || "";
 
         // 跳过合法的绝对路径：外部链接和 iframe 路由
-        if (this.isValidAbsolutePath(childPath)) return
+        if (this.isValidAbsolutePath(childPath)) return;
 
         // 检测非法的绝对路径
-        if (childPath.startsWith('/')) {
-          this.logPathError(child, childPath, parentName, level)
+        if (childPath.startsWith("/")) {
+          this.logPathError(child, childPath, parentName, level);
         }
-      })
+      });
 
       // 递归检查更深层级的子路由
-      this.validateMenuPaths(route.children, level + 1)
-    })
+      this.validateMenuPaths(route.children, level + 1);
+    });
   }
 
   /**
@@ -222,10 +248,10 @@ export class MenuProcessor {
    */
   private isValidAbsolutePath(path: string): boolean {
     return (
-      path.startsWith('http://') ||
-      path.startsWith('https://') ||
-      path.startsWith('/outside/iframe/')
-    )
+      path.startsWith("http://") ||
+      path.startsWith("https://") ||
+      path.startsWith("/outside/iframe/")
+    );
   }
 
   /**
@@ -237,9 +263,9 @@ export class MenuProcessor {
     parentName: string,
     level: number
   ): void {
-    const routeName = String(route.name || path || '未知路由')
-    const menuTitle = route.meta?.title || routeName
-    const suggestedPath = path.split('/').pop() || path.slice(1)
+    const routeName = String(route.name || path || "未知路由");
+    const menuTitle = route.meta?.title || routeName;
+    const suggestedPath = path.split("/").pop() || path.slice(1);
 
     console.error(
       `[路由配置错误] 菜单 "${formatMenuTitle(menuTitle)}" (name: ${routeName}, path: ${path}) 配置错误\n` +
@@ -247,34 +273,34 @@ export class MenuProcessor {
         `  问题: ${level + 1}级菜单的 path 不能以 / 开头\n` +
         `  当前配置: path: '${path}'\n` +
         `  应该改为: path: '${suggestedPath}'`
-    )
+    );
   }
 
   /**
    * 构建完整路径
    */
   private buildFullPath(path: string, parentPath: string): string {
-    if (!path) return ''
+    if (!path) return "";
 
     // 外部链接直接返回
-    if (path.startsWith('http://') || path.startsWith('https://')) {
-      return path
+    if (path.startsWith("http://") || path.startsWith("https://")) {
+      return path;
     }
 
     // 如果已经是绝对路径，直接返回
-    if (path.startsWith('/')) {
-      return path
+    if (path.startsWith("/")) {
+      return path;
     }
 
     // 拼接父路径和当前路径
     if (parentPath) {
       // 移除父路径末尾的斜杠，移除子路径开头的斜杠，然后拼接
-      const cleanParent = parentPath.replace(/\/$/, '')
-      const cleanChild = path.replace(/^\//, '')
-      return `${cleanParent}/${cleanChild}`
+      const cleanParent = parentPath.replace(/\/$/, "");
+      const cleanChild = path.replace(/^\//, "");
+      return `${cleanParent}/${cleanChild}`;
     }
 
     // 没有父路径，添加前导斜杠
-    return `/${path}`
+    return `/${path}`;
   }
 }
diff --git a/frontend/new-web/src/router/core/RoutePermissionValidator.ts b/frontend/new-web/src/router/core/RoutePermissionValidator.ts
index 1e607e08..c1b1193f 100644
--- a/frontend/new-web/src/router/core/RoutePermissionValidator.ts
+++ b/frontend/new-web/src/router/core/RoutePermissionValidator.ts
@@ -17,10 +17,10 @@
  * - 防止用户访问无权限的页面
  *
  * @module router/core/RoutePermissionValidator
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
-import type { AppRouteRecord } from '@/types/router'
+import type { AppRouteRecord } from "@/types/router";
 
 /**
  * 路由权限验证器
@@ -34,11 +34,11 @@ export class RoutePermissionValidator {
    */
   static hasPermission(targetPath: string, menuList: AppRouteRecord[]): boolean {
     // 根路径始终允许访问
-    if (targetPath === '/') {
-      return true
+    if (targetPath === "/") {
+      return true;
     }
 
-    return this.matchRoute(targetPath, menuList)
+    return this.matchRoute(targetPath, menuList);
   }
 
   /**
@@ -52,25 +52,25 @@ export class RoutePermissionValidator {
     pathSet: Set<string> = new Set()
   ): Set<string> {
     if (!Array.isArray(menuList) || menuList.length === 0) {
-      return pathSet
+      return pathSet;
     }
 
     for (const menuItem of menuList) {
       if (!menuItem.path) {
-        continue
+        continue;
       }
 
       // 标准化路径并添加到集合
-      const menuPath = menuItem.path.startsWith('/') ? menuItem.path : `/${menuItem.path}`
-      pathSet.add(menuPath)
+      const menuPath = menuItem.path.startsWith("/") ? menuItem.path : `/${menuItem.path}`;
+      pathSet.add(menuPath);
 
       // 递归处理子菜单
       if (menuItem.children?.length) {
-        this.buildMenuPathSet(menuItem.children, pathSet)
+        this.buildMenuPathSet(menuItem.children, pathSet);
       }
     }
 
-    return pathSet
+    return pathSet;
   }
 
   /**
@@ -84,10 +84,10 @@ export class RoutePermissionValidator {
     // 遍历路径集合，检查是否有前缀匹配
     for (const menuPath of pathSet) {
       if (targetPath.startsWith(`${menuPath}/`)) {
-        return true
+        return true;
       }
     }
-    return false
+    return false;
   }
 
   /**
@@ -95,46 +95,46 @@ export class RoutePermissionValidator {
    */
   static matchRoute(targetPath: string, routes: AppRouteRecord[]): boolean {
     if (!Array.isArray(routes) || routes.length === 0) {
-      return false
+      return false;
     }
 
     for (const route of routes) {
       if (!route.path) {
-        continue
+        continue;
       }
 
-      const routePath = route.path.startsWith('/') ? route.path : `/${route.path}`
+      const routePath = route.path.startsWith("/") ? route.path : `/${route.path}`;
 
       if (
         routePath === targetPath ||
         this.isDynamicRouteMatch(targetPath, routePath) ||
         targetPath.startsWith(`${routePath}/`)
       ) {
-        return true
+        return true;
       }
 
       if (route.children?.length && this.matchRoute(targetPath, route.children)) {
-        return true
+        return true;
       }
     }
 
-    return false
+    return false;
   }
 
   /**
    * 检查目标路径是否匹配动态参数路由，如 /demo/123 匹配 /demo/:id
    */
   static isDynamicRouteMatch(targetPath: string, routePath: string): boolean {
-    if (!routePath.includes(':')) {
-      return false
+    if (!routePath.includes(":")) {
+      return false;
     }
 
     const pattern = routePath
-      .replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
-      .replace(/:([^/]+)/g, '[^/]+')
-      .replace(/\\\*/g, '.*')
+      .replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
+      .replace(/:([^/]+)/g, "[^/]+")
+      .replace(/\\\*/g, ".*");
 
-    return new RegExp(`^${pattern}$`).test(targetPath)
+    return new RegExp(`^${pattern}$`).test(targetPath);
   }
 
   /**
@@ -148,14 +148,14 @@ export class RoutePermissionValidator {
   static validatePath(
     targetPath: string,
     menuList: AppRouteRecord[],
-    homePath: string = '/'
+    homePath: string = "/"
   ): { path: string; hasPermission: boolean } {
-    const hasPermission = this.hasPermission(targetPath, menuList)
+    const hasPermission = this.hasPermission(targetPath, menuList);
 
     if (hasPermission) {
-      return { path: targetPath, hasPermission: true }
+      return { path: targetPath, hasPermission: true };
     }
 
-    return { path: homePath, hasPermission: false }
+    return { path: homePath, hasPermission: false };
   }
 }
diff --git a/frontend/new-web/src/router/core/RouteRegistry.ts b/frontend/new-web/src/router/core/RouteRegistry.ts
index e1acb9e1..fa92d436 100644
--- a/frontend/new-web/src/router/core/RouteRegistry.ts
+++ b/frontend/new-web/src/router/core/RouteRegistry.ts
@@ -4,28 +4,28 @@
  * 负责动态路由的注册、验证和管理
  *
  * @module router/core/RouteRegistry
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
-import type { Router, RouteRecordRaw } from 'vue-router'
-import type { AppRouteRecord } from '@/types/router'
-import { ComponentLoader } from './ComponentLoader'
-import { RouteValidator } from './RouteValidator'
-import { RouteTransformer } from './RouteTransformer'
+import type { Router, RouteRecordRaw } from "vue-router";
+import type { AppRouteRecord } from "@/types/router";
+import { ComponentLoader } from "./ComponentLoader";
+import { RouteValidator } from "./RouteValidator";
+import { RouteTransformer } from "./RouteTransformer";
 
 export class RouteRegistry {
-  private router: Router
-  private componentLoader: ComponentLoader
-  private validator: RouteValidator
-  private transformer: RouteTransformer
-  private removeRouteFns: (() => void)[] = []
-  private registered = false
+  private router: Router;
+  private componentLoader: ComponentLoader;
+  private validator: RouteValidator;
+  private transformer: RouteTransformer;
+  private removeRouteFns: (() => void)[] = [];
+  private registered = false;
 
   constructor(router: Router) {
-    this.router = router
-    this.componentLoader = new ComponentLoader()
-    this.validator = new RouteValidator()
-    this.transformer = new RouteTransformer(this.componentLoader)
+    this.router = router;
+    this.componentLoader = new ComponentLoader();
+    this.validator = new RouteValidator();
+    this.transformer = new RouteTransformer(this.componentLoader);
   }
 
   /**
@@ -33,58 +33,58 @@ export class RouteRegistry {
    */
   register(menuList: AppRouteRecord[]): void {
     if (this.registered) {
-      console.warn('[RouteRegistry] 路由已注册，跳过重复注册')
-      return
+      console.warn("[RouteRegistry] 路由已注册，跳过重复注册");
+      return;
     }
 
     // 验证路由配置
-    const validationResult = this.validator.validate(menuList)
+    const validationResult = this.validator.validate(menuList);
     if (!validationResult.valid) {
-      throw new Error(`路由配置验证失败: ${validationResult.errors.join(', ')}`)
+      throw new Error(`路由配置验证失败: ${validationResult.errors.join(", ")}`);
     }
 
     // 转换并注册路由
-    const removeRouteFns: (() => void)[] = []
+    const removeRouteFns: (() => void)[] = [];
 
     menuList.forEach((route) => {
       if (route.name && !this.router.hasRoute(route.name)) {
-        const routeConfig = this.transformer.transform(route)
-        const removeRouteFn = this.router.addRoute(routeConfig as RouteRecordRaw)
-        removeRouteFns.push(removeRouteFn)
+        const routeConfig = this.transformer.transform(route);
+        const removeRouteFn = this.router.addRoute(routeConfig as RouteRecordRaw);
+        removeRouteFns.push(removeRouteFn);
       }
-    })
+    });
 
-    this.removeRouteFns = removeRouteFns
-    this.registered = true
+    this.removeRouteFns = removeRouteFns;
+    this.registered = true;
   }
 
   /**
    * 移除所有动态路由
    */
   unregister(): void {
-    this.removeRouteFns.forEach((fn) => fn())
-    this.removeRouteFns = []
-    this.registered = false
+    this.removeRouteFns.forEach((fn) => fn());
+    this.removeRouteFns = [];
+    this.registered = false;
   }
 
   /**
    * 检查是否已注册
    */
   isRegistered(): boolean {
-    return this.registered
+    return this.registered;
   }
 
   /**
    * 获取移除函数列表（用于 store 管理）
    */
   getRemoveRouteFns(): (() => void)[] {
-    return this.removeRouteFns
+    return this.removeRouteFns;
   }
 
   /**
    * 标记为已注册（用于错误处理场景，避免重复请求）
    */
   markAsRegistered(): void {
-    this.registered = true
+    this.registered = true;
   }
 }
diff --git a/frontend/new-web/src/router/core/RouteTransformer.ts b/frontend/new-web/src/router/core/RouteTransformer.ts
index 0f6900c5..89a4038f 100644
--- a/frontend/new-web/src/router/core/RouteTransformer.ts
+++ b/frontend/new-web/src/router/core/RouteTransformer.ts
@@ -4,63 +4,63 @@
  * 负责将菜单数据转换为 Vue Router 路由配置
  *
  * @module router/core/RouteTransformer
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
-import type { RouteRecordRaw } from 'vue-router'
-import type { AppRouteRecord } from '@/types/router'
-import { ComponentLoader } from './ComponentLoader'
-import { IframeRouteManager } from './IframeRouteManager'
+import type { RouteRecordRaw } from "vue-router";
+import type { AppRouteRecord } from "@/types/router";
+import { ComponentLoader } from "./ComponentLoader";
+import { IframeRouteManager } from "./IframeRouteManager";
 
-interface ConvertedRoute extends Omit<RouteRecordRaw, 'children'> {
-  id?: number
-  children?: ConvertedRoute[]
-  component?: RouteRecordRaw['component'] | (() => Promise<any>)
+interface ConvertedRoute extends Omit<RouteRecordRaw, "children"> {
+  id?: number;
+  children?: ConvertedRoute[];
+  component?: RouteRecordRaw["component"] | (() => Promise<any>);
 }
 
 export class RouteTransformer {
-  private componentLoader: ComponentLoader
-  private iframeManager: IframeRouteManager
+  private componentLoader: ComponentLoader;
+  private iframeManager: IframeRouteManager;
 
   constructor(componentLoader: ComponentLoader) {
-    this.componentLoader = componentLoader
-    this.iframeManager = IframeRouteManager.getInstance()
+    this.componentLoader = componentLoader;
+    this.iframeManager = IframeRouteManager.getInstance();
   }
 
   /**
    * 转换路由配置
    */
   transform(route: AppRouteRecord, depth = 0): ConvertedRoute {
-    const { component, children, ...routeConfig } = route
+    const { component, children, ...routeConfig } = route;
 
     // 基础路由配置
     const converted: ConvertedRoute = {
       ...routeConfig,
-      component: undefined
-    }
+      component: undefined,
+    };
 
     // 处理不同类型的路由
     if (route.meta.isIframe) {
-      this.handleIframeRoute(converted, route, depth)
+      this.handleIframeRoute(converted, route, depth);
     } else if (this.isFirstLevelRoute(route, depth)) {
-      this.handleFirstLevelRoute(converted, route, component as string)
+      this.handleFirstLevelRoute(converted, route, component as string);
     } else {
-      this.handleNormalRoute(converted, component as string)
+      this.handleNormalRoute(converted, component as string);
     }
 
     // 递归处理子路由
     if (children?.length) {
-      converted.children = children.map((child) => this.transform(child, depth + 1))
+      converted.children = children.map((child) => this.transform(child, depth + 1));
     }
 
-    return converted
+    return converted;
   }
 
   /**
    * 判断是否为一级路由（需要 Layout 包裹）
    */
   private isFirstLevelRoute(route: AppRouteRecord, depth: number): boolean {
-    return depth === 0 && (!route.children || route.children.length === 0)
+    return depth === 0 && (!route.children || route.children.length === 0);
   }
 
   /**
@@ -73,23 +73,23 @@ export class RouteTransformer {
   ): void {
     if (depth === 0) {
       // 顶级 iframe：用 Layout 包裹
-      targetRoute.component = this.componentLoader.loadLayout()
-      targetRoute.path = this.extractFirstSegment(sourceRoute.path || '')
-      targetRoute.name = ''
+      targetRoute.component = this.componentLoader.loadLayout();
+      targetRoute.path = this.extractFirstSegment(sourceRoute.path || "");
+      targetRoute.name = "";
 
       targetRoute.children = [
         {
           ...sourceRoute,
-          component: this.componentLoader.loadIframe()
-        } as ConvertedRoute
-      ]
+          component: this.componentLoader.loadIframe(),
+        } as ConvertedRoute,
+      ];
     } else {
       // 非顶级（嵌套）iframe：直接使用 Iframe.vue
-      targetRoute.component = this.componentLoader.loadIframe()
+      targetRoute.component = this.componentLoader.loadIframe();
     }
 
     // 记录 iframe 路由
-    this.iframeManager.add(sourceRoute)
+    this.iframeManager.add(sourceRoute);
   }
 
   /**
@@ -100,17 +100,17 @@ export class RouteTransformer {
     route: AppRouteRecord,
     component: string | undefined
   ): void {
-    converted.component = this.componentLoader.loadLayout()
-    converted.path = this.extractFirstSegment(route.path || '')
-    converted.name = ''
-    route.meta.isFirstLevel = true
+    converted.component = this.componentLoader.loadLayout();
+    converted.path = this.extractFirstSegment(route.path || "");
+    converted.name = "";
+    route.meta.isFirstLevel = true;
 
     converted.children = [
       {
         ...route,
-        component: component ? this.componentLoader.load(component) : undefined
-      } as ConvertedRoute
-    ]
+        component: component ? this.componentLoader.load(component) : undefined,
+      } as ConvertedRoute,
+    ];
   }
 
   /**
@@ -118,7 +118,7 @@ export class RouteTransformer {
    */
   private handleNormalRoute(converted: ConvertedRoute, component: string | undefined): void {
     if (component) {
-      converted.component = this.componentLoader.load(component)
+      converted.component = this.componentLoader.load(component);
     }
   }
 
@@ -126,7 +126,7 @@ export class RouteTransformer {
    * 提取路径的第一段
    */
   private extractFirstSegment(path: string): string {
-    const segments = path.split('/').filter(Boolean)
-    return segments.length > 0 ? `/${segments[0]}` : '/'
+    const segments = path.split("/").filter(Boolean);
+    return segments.length > 0 ? `/${segments[0]}` : "/";
   }
 }
diff --git a/frontend/new-web/src/router/core/RouteValidator.ts b/frontend/new-web/src/router/core/RouteValidator.ts
index f8e58fc7..20e67848 100644
--- a/frontend/new-web/src/router/core/RouteValidator.ts
+++ b/frontend/new-web/src/router/core/RouteValidator.ts
@@ -4,43 +4,43 @@
  * 负责验证路由配置的合法性
  *
  * @module router/core/RouteValidator
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
-import type { AppRouteRecord } from '@/types/router'
-import { RoutesAlias } from '../routesAlias'
+import type { AppRouteRecord } from "@/types/router";
+import { RoutesAlias } from "../routesAlias";
 
 export interface ValidationResult {
-  valid: boolean
-  errors: string[]
-  warnings: string[]
+  valid: boolean;
+  errors: string[];
+  warnings: string[];
 }
 
 export class RouteValidator {
   // 用于记录已经提示过的路由，避免重复提示
-  private warnedRoutes = new Set<string>()
+  private warnedRoutes = new Set<string>();
 
   /**
    * 验证路由配置
    */
   validate(routes: AppRouteRecord[]): ValidationResult {
-    const errors: string[] = []
-    const warnings: string[] = []
+    const errors: string[] = [];
+    const warnings: string[] = [];
 
     // 检测重复路由
-    this.checkDuplicates(routes, errors, warnings)
+    this.checkDuplicates(routes, errors, warnings);
 
     // 检测组件配置
-    this.checkComponents(routes, errors, warnings)
+    this.checkComponents(routes, errors, warnings);
 
     // 检测嵌套菜单的 /index/index 配置
-    this.checkNestedIndexComponent(routes)
+    this.checkNestedIndexComponent(routes);
 
     return {
       valid: errors.length === 0,
       errors,
-      warnings
-    }
+      warnings,
+    };
   }
 
   /**
@@ -50,47 +50,47 @@ export class RouteValidator {
     routes: AppRouteRecord[],
     errors: string[],
     warnings: string[],
-    parentPath = ''
+    parentPath = ""
   ): void {
-    const routeNameMap = new Map<string, string>()
-    const componentPathMap = new Map<string, string>()
+    const routeNameMap = new Map<string, string>();
+    const componentPathMap = new Map<string, string>();
 
-    const checkRoutes = (routes: AppRouteRecord[], parentPath = '') => {
+    const checkRoutes = (routes: AppRouteRecord[], parentPath = "") => {
       routes.forEach((route) => {
-        const currentPath = route.path || ''
-        const fullPath = this.resolvePath(parentPath, currentPath)
+        const currentPath = route.path || "";
+        const fullPath = this.resolvePath(parentPath, currentPath);
 
         // 名称重复检测
         if (route.name) {
-          const routeName = String(route.name)
+          const routeName = String(route.name);
           if (routeNameMap.has(routeName)) {
-            warnings.push(`路由名称重复: "${routeName}" (${fullPath})`)
+            warnings.push(`路由名称重复: "${routeName}" (${fullPath})`);
           } else {
-            routeNameMap.set(routeName, fullPath)
+            routeNameMap.set(routeName, fullPath);
           }
         }
 
         // 组件路径重复检测
-        if (route.component && typeof route.component === 'string') {
-          const componentPath = route.component
+        if (route.component && typeof route.component === "string") {
+          const componentPath = route.component;
           if (componentPath !== RoutesAlias.Layout) {
-            const componentKey = `${parentPath}:${componentPath}`
+            const componentKey = `${parentPath}:${componentPath}`;
             if (componentPathMap.has(componentKey)) {
-              warnings.push(`组件路径重复: "${componentPath}" (${fullPath})`)
+              warnings.push(`组件路径重复: "${componentPath}" (${fullPath})`);
             } else {
-              componentPathMap.set(componentKey, fullPath)
+              componentPathMap.set(componentKey, fullPath);
             }
           }
         }
 
         // 递归处理子路由
         if (route.children?.length) {
-          checkRoutes(route.children, fullPath)
+          checkRoutes(route.children, fullPath);
         }
-      })
-    }
+      });
+    };
 
-    checkRoutes(routes, parentPath)
+    checkRoutes(routes, parentPath);
   }
 
   /**
@@ -100,41 +100,41 @@ export class RouteValidator {
     routes: AppRouteRecord[],
     errors: string[],
     warnings: string[],
-    parentPath = ''
+    parentPath = ""
   ): void {
     routes.forEach((route) => {
-      const hasExternalLink = !!route.meta?.link?.trim()
-      const hasChildren = Array.isArray(route.children) && route.children.length > 0
-      const routePath = route.path || '[未定义路径]'
-      const isIframe = route.meta?.isIframe
+      const hasExternalLink = !!route.meta?.link?.trim();
+      const hasChildren = Array.isArray(route.children) && route.children.length > 0;
+      const routePath = route.path || "[未定义路径]";
+      const isIframe = route.meta?.isIframe;
 
       // 如果配置了 component，则无需校验
       if (route.component) {
         // 递归检查子路由
         if (route.children?.length) {
-          const fullPath = this.resolvePath(parentPath, route.path || '')
-          this.checkComponents(route.children, errors, warnings, fullPath)
+          const fullPath = this.resolvePath(parentPath, route.path || "");
+          this.checkComponents(route.children, errors, warnings, fullPath);
         }
-        return
+        return;
       }
 
       // 一级菜单：必须指定 Layout，除非是外链或 iframe
-      if (parentPath === '' && !hasExternalLink && !isIframe) {
-        errors.push(`一级菜单(${routePath}) 缺少 component，必须指向 ${RoutesAlias.Layout}`)
-        return
+      if (parentPath === "" && !hasExternalLink && !isIframe) {
+        errors.push(`一级菜单(${routePath}) 缺少 component，必须指向 ${RoutesAlias.Layout}`);
+        return;
       }
 
       // 非一级菜单：如果既不是外链、iframe，也没有子路由，则必须配置 component
       if (!hasExternalLink && !isIframe && !hasChildren) {
-        errors.push(`路由(${routePath}) 缺少 component 配置`)
+        errors.push(`路由(${routePath}) 缺少 component 配置`);
       }
 
       // 递归检查子路由
       if (route.children?.length) {
-        const fullPath = this.resolvePath(parentPath, route.path || '')
-        this.checkComponents(route.children, errors, warnings, fullPath)
+        const fullPath = this.resolvePath(parentPath, route.path || "");
+        this.checkComponents(route.children, errors, warnings, fullPath);
       }
-    })
+    });
   }
 
   /**
@@ -145,29 +145,29 @@ export class RouteValidator {
     routes.forEach((route) => {
       // 检查二级及以下菜单是否错误使用了 Layout
       if (level > 1 && route.component === RoutesAlias.Layout) {
-        this.logLayoutError(route, level)
+        this.logLayoutError(route, level);
       }
 
       // 递归检查子路由
       if (route.children?.length) {
-        this.checkNestedIndexComponent(route.children, level + 1)
+        this.checkNestedIndexComponent(route.children, level + 1);
       }
-    })
+    });
   }
 
   /**
    * 输出 Layout 组件配置错误日志
    */
   private logLayoutError(route: AppRouteRecord, level: number): void {
-    const routeName = String(route.name || route.path || '未知路由')
-    const routeKey = `${routeName}_${route.path}`
+    const routeName = String(route.name || route.path || "未知路由");
+    const routeKey = `${routeName}_${route.path}`;
 
     // 避免重复提示
-    if (this.warnedRoutes.has(routeKey)) return
-    this.warnedRoutes.add(routeKey)
+    if (this.warnedRoutes.has(routeKey)) return;
+    this.warnedRoutes.add(routeKey);
 
-    const menuTitle = route.meta?.title || routeName
-    const routePath = route.path || '/'
+    const menuTitle = route.meta?.title || routeName;
+    const routePath = route.path || "/";
 
     console.error(
       `[路由配置错误] 菜单 "${menuTitle}" (name: ${routeName}, path: ${routePath}) 配置错误\n` +
@@ -175,13 +175,13 @@ export class RouteValidator {
         `  说明: 只有一级菜单才能使用 ${RoutesAlias.Layout}，二级及以下菜单应该指向具体的组件路径\n` +
         `  当前配置: component: '${RoutesAlias.Layout}'\n` +
         `  应该改为: component: '/your/component/path' 或留空 ''（如果是目录菜单）`
-    )
+    );
   }
 
   /**
    * 路径解析
    */
   private resolvePath(parent: string, child: string): string {
-    return [parent.replace(/\/$/, ''), child.replace(/^\//, '')].filter(Boolean).join('/')
+    return [parent.replace(/\/$/, ""), child.replace(/^\//, "")].filter(Boolean).join("/");
   }
 }
diff --git a/frontend/new-web/src/router/core/index.ts b/frontend/new-web/src/router/core/index.ts
index fcfecfc8..f97dfcc3 100644
--- a/frontend/new-web/src/router/core/index.ts
+++ b/frontend/new-web/src/router/core/index.ts
@@ -2,13 +2,13 @@
  * 路由核心模块导出
  *
  * @module router/core
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
-export { RouteRegistry } from './RouteRegistry'
-export { ComponentLoader } from './ComponentLoader'
-export { RouteValidator } from './RouteValidator'
-export { RouteTransformer } from './RouteTransformer'
-export { IframeRouteManager } from './IframeRouteManager'
-export { MenuProcessor } from './MenuProcessor'
-export { RoutePermissionValidator } from './RoutePermissionValidator'
+export { RouteRegistry } from "./RouteRegistry";
+export { ComponentLoader } from "./ComponentLoader";
+export { RouteValidator } from "./RouteValidator";
+export { RouteTransformer } from "./RouteTransformer";
+export { IframeRouteManager } from "./IframeRouteManager";
+export { MenuProcessor } from "./MenuProcessor";
+export { RoutePermissionValidator } from "./RoutePermissionValidator";
diff --git a/frontend/new-web/src/router/guards/afterEach.ts b/frontend/new-web/src/router/guards/afterEach.ts
index d60572da..d74f8d5c 100644
--- a/frontend/new-web/src/router/guards/afterEach.ts
+++ b/frontend/new-web/src/router/guards/afterEach.ts
@@ -1,34 +1,34 @@
-import { nextTick } from 'vue'
-import { useSettingStore } from '@/store/modules/setting'
-import { Router } from 'vue-router'
-import NProgress from 'nprogress'
-import { useCommon } from '@/hooks/core/useCommon'
-import { loadingService } from '@/utils/ui'
-import { getPendingLoading, resetPendingLoading } from './beforeEach'
+import { nextTick } from "vue";
+import { useSettingsStore } from "@/store/modules/setting.store";
+import { Router } from "vue-router";
+import NProgress from "nprogress";
+import { useCommon } from "@/hooks/core/useCommon";
+import { loadingService } from "@/utils/ui";
+import { getPendingLoading, resetPendingLoading } from "./beforeEach";
 
 /** 路由全局后置守卫 */
 export function setupAfterEachGuard(router: Router) {
-  const { scrollToTop } = useCommon()
+  const { scrollToTop } = useCommon();
 
   router.afterEach(() => {
-    scrollToTop()
+    scrollToTop();
 
     // 关闭进度条
-    const settingStore = useSettingStore()
+    const settingStore = useSettingsStore();
     if (settingStore.showNprogress) {
-      NProgress.done()
+      NProgress.done();
       // 确保进度条完全移除，避免残影
       setTimeout(() => {
-        NProgress.remove()
-      }, 600)
+        NProgress.remove();
+      }, 600);
     }
 
     // 关闭 loading 效果
     if (getPendingLoading()) {
       nextTick(() => {
-        loadingService.hideLoading()
-        resetPendingLoading()
-      })
+        loadingService.hideLoading();
+        resetPendingLoading();
+      });
     }
-  })
+  });
 }
diff --git a/frontend/new-web/src/router/guards/beforeEach.ts b/frontend/new-web/src/router/guards/beforeEach.ts
index bc97e090..42bac801 100644
--- a/frontend/new-web/src/router/guards/beforeEach.ts
+++ b/frontend/new-web/src/router/guards/beforeEach.ts
@@ -33,69 +33,74 @@
  * 6. 未匹配路由跳转到 404 页面
  *
  * @module router/guards/beforeEach
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
-import type { Router, RouteLocationNormalized, NavigationGuardNext } from 'vue-router'
-import { nextTick } from 'vue'
-import NProgress from 'nprogress'
-import { useSettingStore } from '@/store/modules/setting'
-import { useUserStore } from '@/store/modules/user'
-import { useMenuStore } from '@/store/modules/menu'
-import { setWorktab } from '@/utils/navigation'
-import { setPageTitle } from '@/utils/router'
-import { RoutesAlias } from '../routesAlias'
-import { staticRoutes } from '../routes/staticRoutes'
-import { loadingService } from '@/utils/ui'
-import { useCommon } from '@/hooks/core/useCommon'
-import { useWorktabStore } from '@/store/modules/worktab'
-import { fetchGetUserInfo } from '@/api/auth'
-import { ApiStatus } from '@/utils/http/status'
-import { isHttpError } from '@/utils/http/error'
-import { RouteRegistry, MenuProcessor, IframeRouteManager, RoutePermissionValidator } from '../core'
+import type { Router, RouteLocationNormalized, NavigationGuardNext } from "vue-router";
+import { nextTick } from "vue";
+import NProgress from "nprogress";
+import { useSettingsStore } from "@/store/modules/setting.store";
+import { useUserStore } from "@/store/modules/user.store";
+import { useMenuStore } from "@/store/modules/menu.store";
+import { setWorktab } from "@/utils/navigation";
+import { setPageTitle } from "@/utils/navigation/router";
+import { RoutesAlias } from "../routesAlias";
+import { staticRoutes } from "../routes/staticRoutes";
+import { loadingService } from "@/utils/ui";
+import { useCommon } from "@/hooks/core/useCommon";
+import { useWorktabStore } from "@/store/modules/worktab.store";
+import { UserAPI } from "@/api/module_system/user";
+import { ApiStatus } from "@/utils/http/status";
+import { isHttpError } from "@/utils/http/error";
+import {
+  RouteRegistry,
+  MenuProcessor,
+  IframeRouteManager,
+  RoutePermissionValidator,
+} from "../core";
 
 // 路由注册器实例
-let routeRegistry: RouteRegistry | null = null
+let routeRegistry: RouteRegistry | null = null;
 
 // 菜单处理器实例
-const menuProcessor = new MenuProcessor()
+const menuProcessor = new MenuProcessor();
 
 // 跟踪是否需要关闭 loading
-let pendingLoading = false
+let pendingLoading = false;
 
 // 路由初始化失败标记，防止死循环
 // 一旦设置为 true，只有刷新页面或重新登录才能重置
-let routeInitFailed = false
+let routeInitFailed = false;
 
 // 路由初始化进行中标记，防止并发请求
-let routeInitInProgress = false
+let routeInitInProgress = false;
 
 /**
  * 获取 pendingLoading 状态
  */
 export function getPendingLoading(): boolean {
-  return pendingLoading
+  return pendingLoading;
 }
 
 /**
  * 重置 pendingLoading 状态
  */
 export function resetPendingLoading(): void {
-  pendingLoading = false
+  pendingLoading = false;
 }
 
 /**
  * 获取路由初始化失败状态
  */
 export function getRouteInitFailed(): boolean {
-  return routeInitFailed
+  return routeInitFailed;
 }
 
 /**
  * 重置路由初始化状态（用于重新登录场景）
  */
 export function resetRouteInitState(): void {
-  routeInitFailed = false
-  routeInitInProgress = false
+  routeInitFailed = false;
+  routeInitInProgress = false;
 }
 
 /**
@@ -103,7 +108,7 @@ export function resetRouteInitState(): void {
  */
 export function setupBeforeEachGuard(router: Router): void {
   // 初始化路由注册器
-  routeRegistry = new RouteRegistry(router)
+  routeRegistry = new RouteRegistry(router);
 
   router.beforeEach(
     async (
@@ -112,14 +117,14 @@ export function setupBeforeEachGuard(router: Router): void {
       next: NavigationGuardNext
     ) => {
       try {
-        await handleRouteGuard(to, from, next, router)
+        await handleRouteGuard(to, from, next, router);
       } catch (error) {
-        console.error('[RouteGuard] 路由守卫处理失败:', error)
-        closeLoading()
-        next({ name: 'Exception500' })
+        console.error("[RouteGuard] 路由守卫处理失败:", error);
+        closeLoading();
+        next({ name: "Exception500" });
       }
     }
-  )
+  );
 }
 
 /**
@@ -128,9 +133,9 @@ export function setupBeforeEachGuard(router: Router): void {
 function closeLoading(): void {
   if (pendingLoading) {
     nextTick(() => {
-      loadingService.hideLoading()
-      pendingLoading = false
-    })
+      loadingService.hideLoading();
+      pendingLoading = false;
+    });
   }
 }
 
@@ -143,29 +148,29 @@ async function handleRouteGuard(
   next: NavigationGuardNext,
   router: Router
 ): Promise<void> {
-  const settingStore = useSettingStore()
-  const userStore = useUserStore()
+  const settingStore = useSettingsStore();
+  const userStore = useUserStore();
 
   // 启动进度条
   if (settingStore.showNprogress) {
-    NProgress.start()
+    NProgress.start();
   }
 
   // 1. 检查登录状态
   if (!handleLoginStatus(to, userStore, next)) {
-    return
+    return;
   }
 
   // 2. 检查路由初始化是否已失败（防止死循环）
   if (routeInitFailed) {
     // 已经失败过，直接放行到错误页面，不再重试
     if (to.matched.length > 0) {
-      next()
+      next();
     } else {
       // 未匹配到路由，跳转到 500 页面
-      next({ name: 'Exception500', replace: true })
+      next({ name: "Exception500", replace: true });
     }
-    return
+    return;
   }
 
   // 3. 处理动态路由注册
@@ -173,28 +178,28 @@ async function handleRouteGuard(
     // 防止并发请求（快速连续导航场景）
     if (routeInitInProgress) {
       // 正在初始化中，等待完成后重新导航
-      next(false)
-      return
+      next(false);
+      return;
     }
-    await handleDynamicRoutes(to, next, router)
-    return
+    await handleDynamicRoutes(to, next, router);
+    return;
   }
 
   // 4. 处理根路径重定向
   if (handleRootPathRedirect(to, next)) {
-    return
+    return;
   }
 
   // 5. 处理已匹配的路由
   if (to.matched.length > 0) {
-    setWorktab(to)
-    setPageTitle(to)
-    next()
-    return
+    setWorktab(to);
+    setPageTitle(to);
+    next();
+    return;
   }
 
   // 6. 未匹配到路由，跳转到 404
-  next({ name: 'Exception404' })
+  next({ name: "Exception404" });
 }
 
 /**
@@ -206,48 +211,77 @@ function handleLoginStatus(
   userStore: ReturnType<typeof useUserStore>,
   next: NavigationGuardNext
 ): boolean {
-  // 已登录或访问登录页或静态路由，直接放行
-  if (userStore.isLogin || to.path === RoutesAlias.Login || isStaticRoute(to.path)) {
-    return true
+  // 已登录 / 登录相关路由 / 明确配置的匿名白名单，放行。
+  // 注意：不能使用「整条 staticRoutes 都算静态」——否则 `/`、`/` 重定向到的业务页也会被当成免登录，
+  // 未登录用户会先被放过再跳首页（见 issue：打开站点先进首页而非登录页）。
+  if (userStore.isLogin || isLoginRoute(to) || isAnonymousPublicPath(to.path)) {
+    return true;
   }
 
   // 未登录且访问需要权限的页面，跳转到登录页并携带 redirect 参数
-  userStore.logOut()
+  userStore.resetAllState();
   next({
-    name: 'Login',
-    query: { redirect: to.fullPath }
-  })
-  return false
+    name: "Login",
+    query: { redirect: to.fullPath },
+  });
+  return false;
+}
+
+/** 登录页（项目里同时存在 `/login` 与 `/auth/login` 等多套入口） */
+function isLoginRoute(to: RouteLocationNormalized): boolean {
+  return to.path === "/login" || to.path === RoutesAlias.Login || to.name === "Login";
+}
+
+/**
+ * 无需登录即可访问的路径（登录页由 isLoginRoute 处理，此处为错误页、重定向等）。
+ * 勿将挂载 Layout 的业务路由（`/`, `/workbench`, `/portal`, `/profile`…）列入此处。
+ */
+function isAnonymousPublicPath(path: string): boolean {
+  if (path.startsWith("/redirect")) return true;
+  const allow = new Set(["/401", "/404", "/500", "/403"]);
+  return allow.has(path);
+}
+
+/** 将父级绝对路径与相对子 path 拼成完整路径（用于识别如 `/` + `workbench` → `/workbench`） */
+function resolveStaticChildFullPath(parentFullPath: string, segment: string): string {
+  const seg = segment.replace(/^\/+/, "");
+  if (!parentFullPath || parentFullPath === "/") {
+    return `/${seg}`;
+  }
+  return `${parentFullPath.replace(/\/$/, "")}/${seg}`;
 }
 
 /**
  * 检查路由是否为静态路由
  */
 function isStaticRoute(path: string): boolean {
-  const checkRoute = (routes: any[], targetPath: string): boolean => {
+  const checkRoute = (routes: any[], targetPath: string, parentFullPath = ""): boolean => {
     return routes.some((route) => {
       // 404 catch-all 路由不应视为可匿名访问的静态页，
       // 否则未登录时手动输入任意地址会直接落到 404，无法跳转登录页。
-      if (route.name === 'Exception404') {
-        return false
+      if (route.name === "Exception404") {
+        return false;
       }
 
-      // 处理动态路由参数匹配
-      const routePath = route.path
-      const pattern = routePath.replace(/:[^/]+/g, '[^/]+').replace(/\*/g, '.*')
-      const regex = new RegExp(`^${pattern}$`)
+      const routePath = route.path ?? "";
+      const fullPath = routePath.startsWith("/")
+        ? routePath
+        : resolveStaticChildFullPath(parentFullPath, routePath);
+
+      const pattern = fullPath.replace(/:[^/]+/g, "[^/]+").replace(/\*/g, ".*");
+      const regex = new RegExp(`^${pattern}$`);
 
       if (regex.test(targetPath)) {
-        return true
+        return true;
       }
       if (route.children && route.children.length > 0) {
-        return checkRoute(route.children, targetPath)
+        return checkRoute(route.children, targetPath, fullPath);
       }
-      return false
-    })
-  }
+      return false;
+    });
+  };
 
-  return checkRoute(staticRoutes, path)
+  return checkRoute(staticRoutes, path);
 }
 
 /**
@@ -259,108 +293,108 @@ async function handleDynamicRoutes(
   router: Router
 ): Promise<void> {
   // 标记初始化进行中
-  routeInitInProgress = true
+  routeInitInProgress = true;
 
   // 显示 loading
-  pendingLoading = true
-  loadingService.showLoading()
+  pendingLoading = true;
+  loadingService.showLoading();
 
   try {
     // 1. 获取用户信息
-    await fetchUserInfo()
+    await fetchUserInfo();
 
     // 2. 获取菜单数据
-    const menuList = await menuProcessor.getMenuList()
+    const menuList = await menuProcessor.getMenuList();
 
     // 3. 验证菜单数据
     if (!menuProcessor.validateMenuList(menuList)) {
-      throw new Error('获取菜单列表失败，请重新登录')
+      throw new Error("获取菜单列表失败，请重新登录");
     }
 
     // 4. 注册动态路由
-    routeRegistry?.register(menuList)
+    routeRegistry?.register(menuList);
 
     // 5. 保存菜单数据到 store
-    const menuStore = useMenuStore()
-    menuStore.setMenuList(menuList)
-    menuStore.addRemoveRouteFns(routeRegistry?.getRemoveRouteFns() || [])
+    const menuStore = useMenuStore();
+    menuStore.setMenuList(menuList);
+    menuStore.addRemoveRouteFns(routeRegistry?.getRemoveRouteFns() || []);
 
     // 6. 保存 iframe 路由
-    IframeRouteManager.getInstance().save()
+    IframeRouteManager.getInstance().save();
 
     // 7. 验证工作标签页
-    useWorktabStore().validateWorktabs(router)
+    useWorktabStore().validateWorktabs(router);
 
     // 8. 静态路由不依赖菜单权限，初始化后直接恢复目标地址。
     if (isStaticRoute(to.path)) {
-      routeInitInProgress = false
+      routeInitInProgress = false;
       next({
         path: to.path,
         query: to.query,
         hash: to.hash,
-        replace: true
-      })
-      return
+        replace: true,
+      });
+      return;
     }
 
     // 8. 验证目标路径权限
-    const { homePath } = useCommon()
+    const { homePath } = useCommon();
     const { path: validatedPath, hasPermission } = RoutePermissionValidator.validatePath(
       to.path,
       menuList,
-      homePath.value || '/'
-    )
+      homePath.value || "/"
+    );
 
     // 初始化成功，重置进行中标记
-    routeInitInProgress = false
+    routeInitInProgress = false;
 
     // 9. 重新导航到目标路由
     if (!hasPermission) {
       // 无权限访问，跳转到首页
-      closeLoading()
+      closeLoading();
 
       // 输出警告信息
-      console.warn(`[RouteGuard] 用户无权限访问路径: ${to.path}，已跳转到首页`)
+      console.warn(`[RouteGuard] 用户无权限访问路径: ${to.path}，已跳转到首页`);
 
       // 直接跳转到首页
       next({
         path: validatedPath,
-        replace: true
-      })
+        replace: true,
+      });
     } else {
       // 有权限，正常导航
       next({
         path: to.path,
         query: to.query,
         hash: to.hash,
-        replace: true
-      })
+        replace: true,
+      });
     }
   } catch (error) {
-    console.error('[RouteGuard] 动态路由注册失败:', error)
+    console.error("[RouteGuard] 动态路由注册失败:", error);
 
     // 关闭 loading
-    closeLoading()
+    closeLoading();
 
     // 401 错误：axios 拦截器已处理退出登录，取消当前导航
     if (isUnauthorizedError(error)) {
       // 重置状态，允许重新登录后再次初始化
-      routeInitInProgress = false
-      next(false)
-      return
+      routeInitInProgress = false;
+      next(false);
+      return;
     }
 
     // 标记初始化失败，防止死循环
-    routeInitFailed = true
-    routeInitInProgress = false
+    routeInitFailed = true;
+    routeInitInProgress = false;
 
     // 输出详细错误信息，便于排查
     if (isHttpError(error)) {
-      console.error(`[RouteGuard] 错误码: ${error.code}, 消息: ${error.message}`)
+      console.error(`[RouteGuard] 错误码: ${error.code}, 消息: ${error.message}`);
     }
 
     // 跳转到 500 页面，使用 replace 避免产生历史记录
-    next({ name: 'Exception500', replace: true })
+    next({ name: "Exception500", replace: true });
   }
 }
 
@@ -368,11 +402,12 @@ async function handleDynamicRoutes(
  * 获取用户信息
  */
 async function fetchUserInfo(): Promise<void> {
-  const userStore = useUserStore()
-  const data = await fetchGetUserInfo()
-  userStore.setUserInfo(data)
+  const userStore = useUserStore();
+  const response = await UserAPI.getCurrentUserInfo();
+  const data = response.data.data;
+  userStore.setUserInfo(data);
   // 检查并清理工作台标签页（如果是不同用户登录）
-  userStore.checkAndClearWorktabs()
+  userStore.checkAndClearWorktabs();
 }
 
 /**
@@ -380,16 +415,16 @@ async function fetchUserInfo(): Promise<void> {
  */
 export function resetRouterState(delay: number): void {
   setTimeout(() => {
-    routeRegistry?.unregister()
-    IframeRouteManager.getInstance().clear()
+    routeRegistry?.unregister();
+    IframeRouteManager.getInstance().clear();
 
-    const menuStore = useMenuStore()
-    menuStore.removeAllDynamicRoutes()
-    menuStore.setMenuList([])
+    const menuStore = useMenuStore();
+    menuStore.removeAllDynamicRoutes();
+    menuStore.setMenuList([]);
 
     // 重置路由初始化状态，允许重新登录后再次初始化
-    resetRouteInitState()
-  }, delay)
+    resetRouteInitState();
+  }, delay);
 }
 
 /**
@@ -397,22 +432,22 @@ export function resetRouterState(delay: number): void {
  * @returns true 表示已处理跳转，false 表示无需跳转
  */
 function handleRootPathRedirect(to: RouteLocationNormalized, next: NavigationGuardNext): boolean {
-  if (to.path !== '/') {
-    return false
+  if (to.path !== "/") {
+    return false;
   }
 
-  const { homePath } = useCommon()
-  if (homePath.value && homePath.value !== '/') {
-    next({ path: homePath.value, replace: true })
-    return true
+  const { homePath } = useCommon();
+  if (homePath.value && homePath.value !== "/") {
+    next({ path: homePath.value, replace: true });
+    return true;
   }
 
-  return false
+  return false;
 }
 
 /**
  * 判断是否为未授权错误（401）
  */
 function isUnauthorizedError(error: unknown): boolean {
-  return isHttpError(error) && error.code === ApiStatus.unauthorized
+  return isHttpError(error) && error.code === ApiStatus.unauthorized;
 }
diff --git a/frontend/new-web/src/router/index.ts b/frontend/new-web/src/router/index.ts
index 286ae582..4e7cced1 100755
--- a/frontend/new-web/src/router/index.ts
+++ b/frontend/new-web/src/router/index.ts
@@ -1,23 +1,25 @@
-import type { App } from 'vue'
-import { createRouter, createWebHashHistory } from 'vue-router'
-import { staticRoutes } from './routes/staticRoutes'
-import { configureNProgress } from '@/utils/router'
-import { setupBeforeEachGuard } from './guards/beforeEach'
-import { setupAfterEachGuard } from './guards/afterEach'
+import type { App } from "vue";
+import { createRouter, createWebHashHistory } from "vue-router";
+import { staticRoutes } from "./routes/staticRoutes";
+import { configureNProgress } from "@/utils/navigation/router";
+import { setupBeforeEachGuard } from "./guards/beforeEach";
+import { setupAfterEachGuard } from "./guards/afterEach";
 
 // 创建路由实例
 export const router = createRouter({
   history: createWebHashHistory(),
-  routes: staticRoutes // 静态路由
-})
+  routes: staticRoutes, // 静态路由
+  // 刷新时，滚动条位置还原
+  scrollBehavior: () => ({ left: 0, top: 0 }),
+});
 
 // 初始化路由
 export function initRouter(app: App<Element>): void {
-  configureNProgress() // 顶部进度条
-  setupBeforeEachGuard(router) // 路由前置守卫
-  setupAfterEachGuard(router) // 路由后置守卫
-  app.use(router)
+  configureNProgress(); // 顶部进度条
+  setupBeforeEachGuard(router); // 路由前置守卫
+  setupAfterEachGuard(router); // 路由后置守卫
+  app.use(router);
 }
 
-// 主页路径，默认使用菜单第一个有效路径，配置后使用此路径
-export const HOME_PAGE_PATH = ''
+// 主页路径；配置后 Logo「回首页」优先到此（静态工作台）
+export const HOME_PAGE_PATH = "/workbench";
diff --git a/frontend/new-web/src/router/modules/article.ts b/frontend/new-web/src/router/modules/article.ts
index fd4ef7ab..c12e9035 100644
--- a/frontend/new-web/src/router/modules/article.ts
+++ b/frontend/new-web/src/router/modules/article.ts
@@ -1,60 +1,60 @@
-import { AppRouteRecord } from '@/types/router'
+import { AppRouteRecord } from "@/types/router";
 
 export const articleRoutes: AppRouteRecord = {
-  path: '/article',
-  name: 'Article',
-  component: '/index/index',
+  path: "/article",
+  name: "Article",
+  component: "/index/index",
   meta: {
-    title: 'menus.article.title',
-    icon: 'ri:book-2-line',
-    roles: ['R_SUPER', 'R_ADMIN']
+    title: "menus.article.title",
+    icon: "ri:book-2-line",
+    roles: ["R_SUPER", "R_ADMIN"],
   },
   children: [
     {
-      path: 'article-list',
-      name: 'ArticleList',
-      component: '/article/list',
+      path: "article-list",
+      name: "ArticleList",
+      component: "/article/list",
       meta: {
-        title: 'menus.article.articleList',
-        icon: 'ri:article-line',
+        title: "menus.article.articleList",
+        icon: "ri:article-line",
         keepAlive: true,
         authList: [
-          { title: '新增', authMark: 'add' },
-          { title: '编辑', authMark: 'edit' }
-        ]
-      }
+          { title: "新增", authMark: "add" },
+          { title: "编辑", authMark: "edit" },
+        ],
+      },
     },
     {
-      path: 'detail/:id',
-      name: 'ArticleDetail',
-      component: '/article/detail',
+      path: "detail/:id",
+      name: "ArticleDetail",
+      component: "/article/detail",
       meta: {
-        title: 'menus.article.articleDetail',
+        title: "menus.article.articleDetail",
         isHide: true,
         keepAlive: true,
-        activePath: '/article/article-list'
-      }
+        activePath: "/article/article-list",
+      },
     },
     {
-      path: 'comment',
-      name: 'ArticleComment',
-      component: '/article/comment',
+      path: "comment",
+      name: "ArticleComment",
+      component: "/article/comment",
       meta: {
-        title: 'menus.article.comment',
-        icon: 'ri:mail-line',
-        keepAlive: true
-      }
-    },
-    {
-      path: 'publish',
-      name: 'ArticlePublish',
-      component: '/article/publish',
-      meta: {
-        title: 'menus.article.articlePublish',
-        icon: 'ri:telegram-2-line',
+        title: "menus.article.comment",
+        icon: "ri:mail-line",
         keepAlive: true,
-        authList: [{ title: '发布', authMark: 'add' }]
-      }
-    }
-  ]
-}
+      },
+    },
+    {
+      path: "publish",
+      name: "ArticlePublish",
+      component: "/article/publish",
+      meta: {
+        title: "menus.article.articlePublish",
+        icon: "ri:telegram-2-line",
+        keepAlive: true,
+        authList: [{ title: "发布", authMark: "add" }],
+      },
+    },
+  ],
+};
diff --git a/frontend/new-web/src/router/modules/dashboard.ts b/frontend/new-web/src/router/modules/dashboard.ts
index b29a8aa3..43c4937c 100644
--- a/frontend/new-web/src/router/modules/dashboard.ts
+++ b/frontend/new-web/src/router/modules/dashboard.ts
@@ -1,45 +1,50 @@
-import { AppRouteRecord } from '@/types/router'
+import { RoutesAlias } from "@/router/routesAlias";
+import { AppRouteRecord } from "@/types/router";
 
+/**
+ * 模版仪表盘（演示 console / analysis / ecommerce）
+ * 与后端 sys_menu 的「仪表盘」区分：独立 name / path，混合模式下才不会被去重掉
+ */
 export const dashboardRoutes: AppRouteRecord = {
-  name: 'Dashboard',
-  path: '/dashboard',
-  component: '/index/index',
+  name: "DashboardDemo",
+  path: "/dashboard-demo",
+  component: RoutesAlias.Layout,
+  redirect: "/dashboard-demo/console",
   meta: {
-    title: 'menus.dashboard.title',
-    icon: 'ri:pie-chart-line',
-    roles: ['R_SUPER', 'R_ADMIN']
+    title: "menus.dashboard.demoTitle",
+    icon: "ri:pie-chart-line",
   },
   children: [
     {
-      path: 'console',
-      name: 'Console',
-      component: '/dashboard/console',
+      path: "console",
+      name: "DashboardDemoConsole",
+      component: "/dashboard/console",
       meta: {
-        title: 'menus.dashboard.console',
-        icon: 'ri:home-smile-2-line',
+        title: "menus.dashboard.console",
+        icon: "ri:home-smile-2-line",
         keepAlive: false,
-        fixedTab: true
-      }
+        fixedTab: true,
+      },
     },
     {
-      path: 'analysis',
-      name: 'Analysis',
-      component: '/dashboard/analysis',
+      path: "analysis",
+      name: "DashboardDemoAnalysis",
+      component: "/dashboard/analysis",
       meta: {
-        title: 'menus.dashboard.analysis',
-        icon: 'ri:align-item-bottom-line',
-        keepAlive: false
-      }
+        title: "menus.dashboard.analysis",
+        icon: "ri:align-item-bottom-line",
+        keepAlive: false,
+      },
     },
     {
-      path: 'ecommerce',
-      name: 'Ecommerce',
-      component: '/dashboard/ecommerce',
+      path: "ecommerce",
+      name: "DashboardDemoEcommerce",
+      component: "/dashboard/ecommerce",
       meta: {
-        title: 'menus.dashboard.ecommerce',
-        icon: 'ri:bar-chart-box-line',
-        keepAlive: false
-      }
-    }
-  ]
-}
+        title: "menus.dashboard.ecommerce",
+        icon: "ri:bar-chart-box-line",
+        keepAlive: false,
+      },
+    },
+  ],
+};
diff --git a/frontend/new-web/src/router/modules/examples.ts b/frontend/new-web/src/router/modules/examples.ts
index db7b651d..76738dd8 100644
--- a/frontend/new-web/src/router/modules/examples.ts
+++ b/frontend/new-web/src/router/modules/examples.ts
@@ -1,134 +1,134 @@
-import { AppRouteRecord } from '@/types/router'
+import { AppRouteRecord } from "@/types/router";
 
 export const examplesRoutes: AppRouteRecord = {
-  path: '/examples',
-  name: 'Examples',
-  component: '/index/index',
+  path: "/examples",
+  name: "Examples",
+  component: "/index/index",
   meta: {
-    title: 'menus.examples.title',
-    icon: 'ri:sparkling-line'
+    title: "menus.examples.title",
+    icon: "ri:sparkling-line",
   },
   children: [
     {
-      path: 'permission',
-      name: 'Permission',
-      component: '',
+      path: "permission",
+      name: "Permission",
+      component: "",
       meta: {
-        title: 'menus.examples.permission.title',
-        icon: 'ri:fingerprint-line'
+        title: "menus.examples.permission.title",
+        icon: "ri:fingerprint-line",
       },
       children: [
         {
-          path: 'switch-role',
-          name: 'PermissionSwitchRole',
-          component: '/examples/permission/switch-role',
+          path: "switch-role",
+          name: "PermissionSwitchRole",
+          component: "/examples/permission/switch-role",
           meta: {
-            title: 'menus.examples.permission.switchRole',
-            icon: 'ri:contacts-line',
-            keepAlive: true
-          }
+            title: "menus.examples.permission.switchRole",
+            icon: "ri:contacts-line",
+            keepAlive: true,
+          },
         },
         {
-          path: 'button-auth',
-          name: 'PermissionButtonAuth',
-          component: '/examples/permission/button-auth',
+          path: "button-auth",
+          name: "PermissionButtonAuth",
+          component: "/examples/permission/button-auth",
           meta: {
-            title: 'menus.examples.permission.buttonAuth',
-            icon: 'ri:mouse-line',
+            title: "menus.examples.permission.buttonAuth",
+            icon: "ri:mouse-line",
             keepAlive: true,
             authList: [
-              { title: '新增', authMark: 'add' },
-              { title: '编辑', authMark: 'edit' },
-              { title: '删除', authMark: 'delete' },
-              { title: '导出', authMark: 'export' },
-              { title: '查看', authMark: 'view' },
-              { title: '发布', authMark: 'publish' },
-              { title: '配置', authMark: 'config' },
-              { title: '管理', authMark: 'manage' }
-            ]
-          }
+              { title: "新增", authMark: "add" },
+              { title: "编辑", authMark: "edit" },
+              { title: "删除", authMark: "delete" },
+              { title: "导出", authMark: "export" },
+              { title: "查看", authMark: "view" },
+              { title: "发布", authMark: "publish" },
+              { title: "配置", authMark: "config" },
+              { title: "管理", authMark: "manage" },
+            ],
+          },
         },
         {
-          path: 'page-visibility',
-          name: 'PermissionPageVisibility',
-          component: '/examples/permission/page-visibility',
+          path: "page-visibility",
+          name: "PermissionPageVisibility",
+          component: "/examples/permission/page-visibility",
           meta: {
-            title: 'menus.examples.permission.pageVisibility',
-            icon: 'ri:user-3-line',
+            title: "menus.examples.permission.pageVisibility",
+            icon: "ri:user-3-line",
             keepAlive: true,
-            roles: ['R_SUPER']
-          }
-        }
-      ]
+            roles: ["R_SUPER"],
+          },
+        },
+      ],
     },
     {
-      path: 'tabs',
-      name: 'Tabs',
-      component: '/examples/tabs',
+      path: "tabs",
+      name: "Tabs",
+      component: "/examples/tabs",
       meta: {
-        title: 'menus.examples.tabs',
-        icon: 'ri:price-tag-line'
-      }
+        title: "menus.examples.tabs",
+        icon: "ri:price-tag-line",
+      },
     },
     {
-      path: 'tables/basic',
-      name: 'TablesBasic',
-      component: '/examples/tables/basic',
+      path: "tables/basic",
+      name: "TablesBasic",
+      component: "/examples/tables/basic",
       meta: {
-        title: 'menus.examples.tablesBasic',
-        icon: 'ri:layout-grid-line',
-        keepAlive: true
-      }
+        title: "menus.examples.tablesBasic",
+        icon: "ri:layout-grid-line",
+        keepAlive: true,
+      },
     },
     {
-      path: 'tables',
-      name: 'Tables',
-      component: '/examples/tables',
+      path: "tables",
+      name: "Tables",
+      component: "/examples/tables",
       meta: {
-        title: 'menus.examples.tables',
-        icon: 'ri:table-3',
-        keepAlive: true
-      }
+        title: "menus.examples.tables",
+        icon: "ri:table-3",
+        keepAlive: true,
+      },
     },
     {
-      path: 'forms',
-      name: 'Forms',
-      component: '/examples/forms',
+      path: "forms",
+      name: "Forms",
+      component: "/examples/forms",
       meta: {
-        title: 'menus.examples.forms',
-        icon: 'ri:table-view',
-        keepAlive: true
-      }
+        title: "menus.examples.forms",
+        icon: "ri:table-view",
+        keepAlive: true,
+      },
     },
     {
-      path: 'form/search-bar',
-      name: 'SearchBar',
-      component: '/examples/forms/search-bar',
+      path: "form/search-bar",
+      name: "SearchBar",
+      component: "/examples/forms/search-bar",
       meta: {
-        title: 'menus.examples.searchBar',
-        icon: 'ri:table-line',
-        keepAlive: true
-      }
+        title: "menus.examples.searchBar",
+        icon: "ri:table-line",
+        keepAlive: true,
+      },
     },
     {
-      path: 'tables/tree',
-      name: 'TablesTree',
-      component: '/examples/tables/tree',
+      path: "tables/tree",
+      name: "TablesTree",
+      component: "/examples/tables/tree",
       meta: {
-        title: 'menus.examples.tablesTree',
-        icon: 'ri:layout-2-line',
-        keepAlive: true
-      }
+        title: "menus.examples.tablesTree",
+        icon: "ri:layout-2-line",
+        keepAlive: true,
+      },
     },
     {
-      path: 'socket-chat',
-      name: 'SocketChat',
-      component: '/examples/socket-chat',
+      path: "socket-chat",
+      name: "SocketChat",
+      component: "/examples/socket-chat",
       meta: {
-        title: 'menus.examples.socketChat',
-        icon: 'ri:shake-hands-line',
-        keepAlive: true
-      }
-    }
-  ]
-}
+        title: "menus.examples.socketChat",
+        icon: "ri:shake-hands-line",
+        keepAlive: true,
+      },
+    },
+  ],
+};
diff --git a/frontend/new-web/src/router/modules/exception.ts b/frontend/new-web/src/router/modules/exception.ts
index 07c56047..1dab98af 100644
--- a/frontend/new-web/src/router/modules/exception.ts
+++ b/frontend/new-web/src/router/modules/exception.ts
@@ -1,46 +1,46 @@
-import { AppRouteRecord } from '@/types/router'
+import { AppRouteRecord } from "@/types/router";
 
 export const exceptionRoutes: AppRouteRecord = {
-  path: '/exception',
-  name: 'Exception',
-  component: '/index/index',
+  path: "/exception",
+  name: "Exception",
+  component: "/index/index",
   meta: {
-    title: 'menus.exception.title',
-    icon: 'ri:error-warning-line'
+    title: "menus.exception.title",
+    icon: "ri:error-warning-line",
   },
   children: [
     {
-      path: '403',
-      name: 'Exception403',
-      component: '/exception/403',
+      path: "403",
+      name: "Exception403",
+      component: "/exception/403",
       meta: {
-        title: 'menus.exception.forbidden',
+        title: "menus.exception.forbidden",
         keepAlive: true,
         isHideTab: true,
-        isFullPage: true
-      }
+        isFullPage: true,
+      },
     },
     {
-      path: '404',
-      name: 'Exception404',
-      component: '/exception/404',
+      path: "404",
+      name: "Exception404",
+      component: "/exception/404",
       meta: {
-        title: 'menus.exception.notFound',
+        title: "menus.exception.notFound",
         keepAlive: true,
         isHideTab: true,
-        isFullPage: true
-      }
+        isFullPage: true,
+      },
     },
     {
-      path: '500',
-      name: 'Exception500',
-      component: '/exception/500',
+      path: "500",
+      name: "Exception500",
+      component: "/exception/500",
       meta: {
-        title: 'menus.exception.serverError',
+        title: "menus.exception.serverError",
         keepAlive: true,
         isHideTab: true,
-        isFullPage: true
-      }
-    }
-  ]
-}
+        isFullPage: true,
+      },
+    },
+  ],
+};
diff --git a/frontend/new-web/src/router/modules/help.ts b/frontend/new-web/src/router/modules/help.ts
deleted file mode 100644
index b3127f9f..00000000
--- a/frontend/new-web/src/router/modules/help.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { AppRouteRecord } from '@/types/router'
-import { WEB_LINKS } from '@/utils/constants'
-
-export const helpRoutes: AppRouteRecord[] = [
-  {
-    name: 'Document',
-    path: '',
-    component: '',
-    meta: {
-      title: 'menus.help.document',
-      icon: 'ri:bill-line',
-      link: WEB_LINKS.DOCS,
-      isIframe: false,
-      keepAlive: false
-    }
-  },
-  {
-    name: 'LiteVersion',
-    path: '',
-    component: '',
-    meta: {
-      title: 'menus.help.liteVersion',
-      icon: 'ri:bus-2-line',
-      link: WEB_LINKS.LiteVersion,
-      isIframe: false,
-      keepAlive: false
-    }
-  },
-  {
-    name: 'OldVersion',
-    path: '',
-    component: '',
-    meta: {
-      title: 'menus.help.oldVersion',
-      icon: 'ri:subway-line',
-      link: WEB_LINKS.OldVersion,
-      isIframe: false,
-      keepAlive: false
-    }
-  },
-  {
-    name: 'ChangeLog',
-    path: '/change/log',
-    component: '/change/log',
-    meta: {
-      title: 'menus.plan.log',
-      showTextBadge: `v${__APP_VERSION__}`,
-      icon: 'ri:gamepad-line',
-      keepAlive: false
-    }
-  }
-]
diff --git a/frontend/new-web/src/router/modules/index.ts b/frontend/new-web/src/router/modules/index.ts
index 18f6a065..b598549f 100644
--- a/frontend/new-web/src/router/modules/index.ts
+++ b/frontend/new-web/src/router/modules/index.ts
@@ -1,14 +1,12 @@
-import { AppRouteRecord } from '@/types/router'
-import { dashboardRoutes } from './dashboard'
-import { templateRoutes } from './template'
-import { widgetsRoutes } from './widgets'
-import { examplesRoutes } from './examples'
-import { systemRoutes } from './system'
-import { articleRoutes } from './article'
-import { resultRoutes } from './result'
-import { exceptionRoutes } from './exception'
-import { safeguardRoutes } from './safeguard'
-import { helpRoutes } from './help'
+import { AppRouteRecord } from "@/types/router";
+import { dashboardRoutes } from "./dashboard";
+import { templateRoutes } from "./template";
+import { widgetsRoutes } from "./widgets";
+import { examplesRoutes } from "./examples";
+import { systemRoutes } from "./system";
+import { articleRoutes } from "./article";
+import { resultRoutes } from "./result";
+import { exceptionRoutes } from "./exception";
 
 /**
  * 导出所有模块化路由
@@ -22,6 +20,4 @@ export const routeModules: AppRouteRecord[] = [
   articleRoutes,
   resultRoutes,
   exceptionRoutes,
-  safeguardRoutes,
-  ...helpRoutes
-]
+];
diff --git a/frontend/new-web/src/router/modules/result.ts b/frontend/new-web/src/router/modules/result.ts
index 575a2f7f..98b6c8a5 100644
--- a/frontend/new-web/src/router/modules/result.ts
+++ b/frontend/new-web/src/router/modules/result.ts
@@ -1,33 +1,33 @@
-import { AppRouteRecord } from '@/types/router'
+import { AppRouteRecord } from "@/types/router";
 
 export const resultRoutes: AppRouteRecord = {
-  path: '/result',
-  name: 'Result',
-  component: '/index/index',
+  path: "/result",
+  name: "Result",
+  component: "/index/index",
   meta: {
-    title: 'menus.result.title',
-    icon: 'ri:checkbox-circle-line'
+    title: "menus.result.title",
+    icon: "ri:checkbox-circle-line",
   },
   children: [
     {
-      path: 'success',
-      name: 'ResultSuccess',
-      component: '/result/success',
+      path: "success",
+      name: "ResultSuccess",
+      component: "/result/success",
       meta: {
-        title: 'menus.result.success',
-        icon: 'ri:checkbox-circle-line',
-        keepAlive: true
-      }
+        title: "menus.result.success",
+        icon: "ri:checkbox-circle-line",
+        keepAlive: true,
+      },
     },
     {
-      path: 'fail',
-      name: 'ResultFail',
-      component: '/result/fail',
+      path: "fail",
+      name: "ResultFail",
+      component: "/result/fail",
       meta: {
-        title: 'menus.result.fail',
-        icon: 'ri:close-circle-line',
-        keepAlive: true
-      }
-    }
-  ]
-}
+        title: "menus.result.fail",
+        icon: "ri:close-circle-line",
+        keepAlive: true,
+      },
+    },
+  ],
+};
diff --git a/frontend/new-web/src/router/modules/safeguard.ts b/frontend/new-web/src/router/modules/safeguard.ts
deleted file mode 100644
index 7678e64c..00000000
--- a/frontend/new-web/src/router/modules/safeguard.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { AppRouteRecord } from '@/types/router'
-
-export const safeguardRoutes: AppRouteRecord = {
-  path: '/safeguard',
-  name: 'Safeguard',
-  component: '/index/index',
-  meta: {
-    title: 'menus.safeguard.title',
-    icon: 'ri:shield-check-line',
-    keepAlive: false
-  },
-  children: [
-    {
-      path: 'server',
-      name: 'SafeguardServer',
-      component: '/safeguard/server',
-      meta: {
-        title: 'menus.safeguard.server',
-        icon: 'ri:hard-drive-3-line',
-        keepAlive: true
-      }
-    }
-  ]
-}
diff --git a/frontend/new-web/src/router/modules/system.ts b/frontend/new-web/src/router/modules/system.ts
index df910dd7..0999a867 100644
--- a/frontend/new-web/src/router/modules/system.ts
+++ b/frontend/new-web/src/router/modules/system.ts
@@ -1,149 +1,149 @@
-import { AppRouteRecord } from '@/types/router'
+import { AppRouteRecord } from "@/types/router";
 
 export const systemRoutes: AppRouteRecord = {
-  path: '/system',
-  name: 'System',
-  component: '/index/index',
+  path: "/system",
+  name: "System",
+  component: "/index/index",
   meta: {
-    title: 'menus.system.title',
-    icon: 'ri:user-3-line',
-    roles: ['R_SUPER', 'R_ADMIN']
+    title: "menus.system.title",
+    icon: "ri:user-3-line",
+    roles: ["R_SUPER", "R_ADMIN"],
   },
   children: [
     {
-      path: 'user',
-      name: 'User',
-      component: '/system/user',
+      path: "user",
+      name: "User",
+      component: "/system/user",
       meta: {
-        title: 'menus.system.user',
-        icon: 'ri:user-line',
+        title: "menus.system.user",
+        icon: "ri:user-line",
         keepAlive: true,
-        roles: ['R_SUPER', 'R_ADMIN']
-      }
+        roles: ["R_SUPER", "R_ADMIN"],
+      },
     },
     {
-      path: 'role',
-      name: 'Role',
-      component: '/system/role',
+      path: "role",
+      name: "Role",
+      component: "/system/role",
       meta: {
-        title: 'menus.system.role',
-        icon: 'ri:user-settings-line',
+        title: "menus.system.role",
+        icon: "ri:user-settings-line",
         keepAlive: true,
-        roles: ['R_SUPER']
-      }
+        roles: ["R_SUPER"],
+      },
     },
     {
-      path: 'user-center',
-      name: 'UserCenter',
-      component: '/system/user-center',
+      path: "user-center",
+      name: "UserCenter",
+      component: "/system/user-center",
       meta: {
-        title: 'menus.system.userCenter',
-        icon: 'ri:user-line',
+        title: "menus.system.userCenter",
+        icon: "ri:user-line",
         isHide: true,
         keepAlive: true,
-        isHideTab: true
-      }
+        isHideTab: true,
+      },
     },
     {
-      path: 'menu',
-      name: 'Menus',
-      component: '/system/menu',
+      path: "menu",
+      name: "Menus",
+      component: "/system/menu",
       meta: {
-        title: 'menus.system.menu',
-        icon: 'ri:menu-line',
+        title: "menus.system.menu",
+        icon: "ri:menu-line",
         keepAlive: true,
-        roles: ['R_SUPER'],
+        roles: ["R_SUPER"],
         authList: [
-          { title: '新增', authMark: 'add' },
-          { title: '编辑', authMark: 'edit' },
-          { title: '删除', authMark: 'delete' }
-        ]
-      }
+          { title: "新增", authMark: "add" },
+          { title: "编辑", authMark: "edit" },
+          { title: "删除", authMark: "delete" },
+        ],
+      },
     },
     {
-      path: 'nested',
-      name: 'Nested',
-      component: '',
+      path: "nested",
+      name: "Nested",
+      component: "",
       meta: {
-        title: 'menus.system.nested',
-        icon: 'ri:menu-unfold-3-line',
-        keepAlive: true
+        title: "menus.system.nested",
+        icon: "ri:menu-unfold-3-line",
+        keepAlive: true,
       },
       children: [
         {
-          path: 'menu1',
-          name: 'NestedMenu1',
-          component: '/system/nested/menu1',
+          path: "menu1",
+          name: "NestedMenu1",
+          component: "/system/nested/menu1",
           meta: {
-            title: 'menus.system.menu1',
-            icon: 'ri:align-justify',
-            keepAlive: true
-          }
+            title: "menus.system.menu1",
+            icon: "ri:align-justify",
+            keepAlive: true,
+          },
         },
         {
-          path: 'menu2',
-          name: 'NestedMenu2',
-          component: '',
+          path: "menu2",
+          name: "NestedMenu2",
+          component: "",
           meta: {
-            title: 'menus.system.menu2',
-            icon: 'ri:align-justify',
-            keepAlive: true
+            title: "menus.system.menu2",
+            icon: "ri:align-justify",
+            keepAlive: true,
           },
           children: [
             {
-              path: 'menu2-1',
-              name: 'NestedMenu2-1',
-              component: '/system/nested/menu2',
+              path: "menu2-1",
+              name: "NestedMenu2-1",
+              component: "/system/nested/menu2",
               meta: {
-                title: 'menus.system.menu21',
-                icon: 'ri:align-justify',
-                keepAlive: true
-              }
-            }
-          ]
+                title: "menus.system.menu21",
+                icon: "ri:align-justify",
+                keepAlive: true,
+              },
+            },
+          ],
         },
         {
-          path: 'menu3',
-          name: 'NestedMenu3',
-          component: '',
+          path: "menu3",
+          name: "NestedMenu3",
+          component: "",
           meta: {
-            title: 'menus.system.menu3',
-            icon: 'ri:align-justify',
-            keepAlive: true
+            title: "menus.system.menu3",
+            icon: "ri:align-justify",
+            keepAlive: true,
           },
           children: [
             {
-              path: 'menu3-1',
-              name: 'NestedMenu3-1',
-              component: '/system/nested/menu3',
+              path: "menu3-1",
+              name: "NestedMenu3-1",
+              component: "/system/nested/menu3",
               meta: {
-                title: 'menus.system.menu31',
-                keepAlive: true
-              }
+                title: "menus.system.menu31",
+                keepAlive: true,
+              },
             },
             {
-              path: 'menu3-2',
-              name: 'NestedMenu3-2',
-              component: '',
+              path: "menu3-2",
+              name: "NestedMenu3-2",
+              component: "",
               meta: {
-                title: 'menus.system.menu32',
-                keepAlive: true
+                title: "menus.system.menu32",
+                keepAlive: true,
               },
               children: [
                 {
-                  path: 'menu3-2-1',
-                  name: 'NestedMenu3-2-1',
-                  component: '/system/nested/menu3/menu3-2',
+                  path: "menu3-2-1",
+                  name: "NestedMenu3-2-1",
+                  component: "/system/nested/menu3/menu3-2",
                   meta: {
-                    title: 'menus.system.menu321',
-                    keepAlive: true
-                  }
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}
+                    title: "menus.system.menu321",
+                    keepAlive: true,
+                  },
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
diff --git a/frontend/new-web/src/router/modules/template.ts b/frontend/new-web/src/router/modules/template.ts
index 0192f859..91db8b2a 100644
--- a/frontend/new-web/src/router/modules/template.ts
+++ b/frontend/new-web/src/router/modules/template.ts
@@ -1,84 +1,84 @@
-import { AppRouteRecord } from '@/types/router'
+import { AppRouteRecord } from "@/types/router";
 
 export const templateRoutes: AppRouteRecord = {
-  path: '/template',
-  name: 'Template',
-  component: '/index/index',
+  path: "/template",
+  name: "Template",
+  component: "/index/index",
   meta: {
-    title: 'menus.template.title',
-    icon: 'ri:apps-2-line'
+    title: "menus.template.title",
+    icon: "ri:apps-2-line",
   },
   children: [
     {
-      path: 'cards',
-      name: 'Cards',
-      component: '/template/cards',
+      path: "cards",
+      name: "Cards",
+      component: "/template/cards",
       meta: {
-        title: 'menus.template.cards',
-        icon: 'ri:wallet-line',
-        keepAlive: false
-      }
+        title: "menus.template.cards",
+        icon: "ri:wallet-line",
+        keepAlive: false,
+      },
     },
     {
-      path: 'banners',
-      name: 'Banners',
-      component: '/template/banners',
+      path: "banners",
+      name: "Banners",
+      component: "/template/banners",
       meta: {
-        title: 'menus.template.banners',
-        icon: 'ri:rectangle-line',
-        keepAlive: false
-      }
+        title: "menus.template.banners",
+        icon: "ri:rectangle-line",
+        keepAlive: false,
+      },
     },
     {
-      path: 'charts',
-      name: 'Charts',
-      component: '/template/charts',
+      path: "charts",
+      name: "Charts",
+      component: "/template/charts",
       meta: {
-        title: 'menus.template.charts',
-        icon: 'ri:bar-chart-box-line',
-        keepAlive: false
-      }
+        title: "menus.template.charts",
+        icon: "ri:bar-chart-box-line",
+        keepAlive: false,
+      },
     },
     {
-      path: 'map',
-      name: 'Map',
-      component: '/template/map',
+      path: "map",
+      name: "Map",
+      component: "/template/map",
       meta: {
-        title: 'menus.template.map',
-        icon: 'ri:map-pin-line',
-        keepAlive: true
-      }
-    },
-    {
-      path: 'chat',
-      name: 'Chat',
-      component: '/template/chat',
-      meta: {
-        title: 'menus.template.chat',
-        icon: 'ri:message-3-line',
-        keepAlive: true
-      }
-    },
-    {
-      path: 'calendar',
-      name: 'Calendar',
-      component: '/template/calendar',
-      meta: {
-        title: 'menus.template.calendar',
-        icon: 'ri:calendar-2-line',
-        keepAlive: true
-      }
-    },
-    {
-      path: 'pricing',
-      name: 'Pricing',
-      component: '/template/pricing',
-      meta: {
-        title: 'menus.template.pricing',
-        icon: 'ri:money-cny-box-line',
+        title: "menus.template.map",
+        icon: "ri:map-pin-line",
         keepAlive: true,
-        isFullPage: true
-      }
-    }
-  ]
-}
+      },
+    },
+    {
+      path: "chat",
+      name: "Chat",
+      component: "/template/chat",
+      meta: {
+        title: "menus.template.chat",
+        icon: "ri:message-3-line",
+        keepAlive: true,
+      },
+    },
+    {
+      path: "calendar",
+      name: "Calendar",
+      component: "/template/calendar",
+      meta: {
+        title: "menus.template.calendar",
+        icon: "ri:calendar-2-line",
+        keepAlive: true,
+      },
+    },
+    {
+      path: "pricing",
+      name: "Pricing",
+      component: "/template/pricing",
+      meta: {
+        title: "menus.template.pricing",
+        icon: "ri:money-cny-box-line",
+        keepAlive: true,
+        isFullPage: true,
+      },
+    },
+  ],
+};
diff --git a/frontend/new-web/src/router/modules/widgets.ts b/frontend/new-web/src/router/modules/widgets.ts
index 5602b524..8e0c3d6a 100644
--- a/frontend/new-web/src/router/modules/widgets.ts
+++ b/frontend/new-web/src/router/modules/widgets.ts
@@ -1,146 +1,146 @@
-import { AppRouteRecord } from '@/types/router'
+import { AppRouteRecord } from "@/types/router";
 
 export const widgetsRoutes: AppRouteRecord = {
-  path: '/widgets',
-  name: 'Widgets',
-  component: '/index/index',
+  path: "/widgets",
+  name: "Widgets",
+  component: "/index/index",
   meta: {
-    title: 'menus.widgets.title',
-    icon: 'ri:apps-2-add-line'
+    title: "menus.widgets.title",
+    icon: "ri:apps-2-add-line",
   },
   children: [
     {
-      path: 'icon',
-      name: 'Icon',
-      component: '/widgets/icon',
+      path: "icon",
+      name: "Icon",
+      component: "/widgets/icon",
       meta: {
-        title: 'menus.widgets.icon',
-        icon: 'ri:palette-line',
-        keepAlive: true
-      }
-    },
-    {
-      path: 'image-crop',
-      name: 'ImageCrop',
-      component: '/widgets/image-crop',
-      meta: {
-        title: 'menus.widgets.imageCrop',
-        icon: 'ri:screenshot-line',
-        keepAlive: true
-      }
-    },
-    {
-      path: 'excel',
-      name: 'Excel',
-      component: '/widgets/excel',
-      meta: {
-        title: 'menus.widgets.excel',
-        icon: 'ri:download-2-line',
-        keepAlive: true
-      }
-    },
-    {
-      path: 'video',
-      name: 'Video',
-      component: '/widgets/video',
-      meta: {
-        title: 'menus.widgets.video',
-        icon: 'ri:vidicon-line',
-        keepAlive: true
-      }
-    },
-    {
-      path: 'count-to',
-      name: 'CountTo',
-      component: '/widgets/count-to',
-      meta: {
-        title: 'menus.widgets.countTo',
-        icon: 'ri:anthropic-line',
-        keepAlive: false
-      }
-    },
-    {
-      path: 'wang-editor',
-      name: 'WangEditor',
-      component: '/widgets/wang-editor',
-      meta: {
-        title: 'menus.widgets.wangEditor',
-        icon: 'ri:t-box-line',
-        keepAlive: true
-      }
-    },
-    {
-      path: 'watermark',
-      name: 'Watermark',
-      component: '/widgets/watermark',
-      meta: {
-        title: 'menus.widgets.watermark',
-        icon: 'ri:water-flash-line',
-        keepAlive: true
-      }
-    },
-    {
-      path: 'context-menu',
-      name: 'ContextMenu',
-      component: '/widgets/context-menu',
-      meta: {
-        title: 'menus.widgets.contextMenu',
-        icon: 'ri:menu-2-line',
-        keepAlive: true
-      }
-    },
-    {
-      path: 'qrcode',
-      name: 'Qrcode',
-      component: '/widgets/qrcode',
-      meta: {
-        title: 'menus.widgets.qrcode',
-        icon: 'ri:qr-code-line',
-        keepAlive: true
-      }
-    },
-    {
-      path: 'drag',
-      name: 'Drag',
-      component: '/widgets/drag',
-      meta: {
-        title: 'menus.widgets.drag',
-        icon: 'ri:drag-move-fill',
-        keepAlive: true
-      }
-    },
-    {
-      path: 'text-scroll',
-      name: 'TextScroll',
-      component: '/widgets/text-scroll',
-      meta: {
-        title: 'menus.widgets.textScroll',
-        icon: 'ri:input-method-line',
-        keepAlive: true
-      }
-    },
-    {
-      path: 'fireworks',
-      name: 'Fireworks',
-      component: '/widgets/fireworks',
-      meta: {
-        title: 'menus.widgets.fireworks',
-        icon: 'ri:magic-line',
+        title: "menus.widgets.icon",
+        icon: "ri:palette-line",
         keepAlive: true,
-        showTextBadge: 'Hot'
-      }
+      },
     },
     {
-      path: '/outside/iframe/elementui',
-      name: 'ElementUI',
-      component: '',
+      path: "image-crop",
+      name: "ImageCrop",
+      component: "/widgets/image-crop",
       meta: {
-        title: 'menus.widgets.elementUI',
-        icon: 'ri:apps-2-line',
+        title: "menus.widgets.imageCrop",
+        icon: "ri:screenshot-line",
+        keepAlive: true,
+      },
+    },
+    {
+      path: "excel",
+      name: "Excel",
+      component: "/widgets/excel",
+      meta: {
+        title: "menus.widgets.excel",
+        icon: "ri:download-2-line",
+        keepAlive: true,
+      },
+    },
+    {
+      path: "video",
+      name: "Video",
+      component: "/widgets/video",
+      meta: {
+        title: "menus.widgets.video",
+        icon: "ri:vidicon-line",
+        keepAlive: true,
+      },
+    },
+    {
+      path: "count-to",
+      name: "CountTo",
+      component: "/widgets/count-to",
+      meta: {
+        title: "menus.widgets.countTo",
+        icon: "ri:anthropic-line",
         keepAlive: false,
-        link: 'https://element-plus.org/zh-CN/component/overview.html',
-        isIframe: true
-      }
-    }
-  ]
-}
+      },
+    },
+    {
+      path: "wang-editor",
+      name: "WangEditor",
+      component: "/widgets/wang-editor",
+      meta: {
+        title: "menus.widgets.wangEditor",
+        icon: "ri:t-box-line",
+        keepAlive: true,
+      },
+    },
+    {
+      path: "watermark",
+      name: "Watermark",
+      component: "/widgets/watermark",
+      meta: {
+        title: "menus.widgets.watermark",
+        icon: "ri:water-flash-line",
+        keepAlive: true,
+      },
+    },
+    {
+      path: "context-menu",
+      name: "ContextMenu",
+      component: "/widgets/context-menu",
+      meta: {
+        title: "menus.widgets.contextMenu",
+        icon: "ri:menu-2-line",
+        keepAlive: true,
+      },
+    },
+    {
+      path: "qrcode",
+      name: "Qrcode",
+      component: "/widgets/qrcode",
+      meta: {
+        title: "menus.widgets.qrcode",
+        icon: "ri:qr-code-line",
+        keepAlive: true,
+      },
+    },
+    {
+      path: "drag",
+      name: "Drag",
+      component: "/widgets/drag",
+      meta: {
+        title: "menus.widgets.drag",
+        icon: "ri:drag-move-fill",
+        keepAlive: true,
+      },
+    },
+    {
+      path: "text-scroll",
+      name: "TextScroll",
+      component: "/widgets/text-scroll",
+      meta: {
+        title: "menus.widgets.textScroll",
+        icon: "ri:input-method-line",
+        keepAlive: true,
+      },
+    },
+    {
+      path: "fireworks",
+      name: "Fireworks",
+      component: "/widgets/fireworks",
+      meta: {
+        title: "menus.widgets.fireworks",
+        icon: "ri:magic-line",
+        keepAlive: true,
+        showTextBadge: "Hot",
+      },
+    },
+    {
+      path: "/outside/iframe/elementui",
+      name: "ElementUI",
+      component: "",
+      meta: {
+        title: "menus.widgets.elementUI",
+        icon: "ri:apps-2-line",
+        keepAlive: false,
+        link: "https://element-plus.org/zh-CN/component/overview.html",
+        isIframe: true,
+      },
+    },
+  ],
+};
diff --git a/frontend/new-web/src/router/routes/asyncRoutes.ts b/frontend/new-web/src/router/routes/asyncRoutes.ts
index ccf1201c..17dbb584 100644
--- a/frontend/new-web/src/router/routes/asyncRoutes.ts
+++ b/frontend/new-web/src/router/routes/asyncRoutes.ts
@@ -1,9 +1,9 @@
 // 权限文档：https://www.artd.pro/docs/zh/guide/in-depth/permission.html
-import { AppRouteRecord } from '@/types/router'
-import { routeModules } from '../modules'
+import { AppRouteRecord } from "@/types/router";
+import { routeModules } from "../modules";
 
 /**
  * 动态路由（需要权限才能访问的路由）
  * 用于渲染菜单以及根据菜单权限动态加载路由，如果没有权限无法访问
  */
-export const asyncRoutes: AppRouteRecord[] = routeModules
+export const asyncRoutes: AppRouteRecord[] = routeModules;
diff --git a/frontend/new-web/src/router/routes/staticRoutes.ts b/frontend/new-web/src/router/routes/staticRoutes.ts
index 334d0c20..9fda2ee8 100644
--- a/frontend/new-web/src/router/routes/staticRoutes.ts
+++ b/frontend/new-web/src/router/routes/staticRoutes.ts
@@ -1,4 +1,10 @@
-import { AppRouteRecordRaw } from '@/utils/router'
+import type { AppRouteRecordRaw } from "@/utils/navigation/router";
+
+/**
+ * 主框架布局：新版 art 体系（`src/layouts/index.vue` + `src/components/core/layouts/*`）。
+ * 旧版 Left/Top/Mix 壳子仍在 `@/layouts/index.vue`，路由不再默认使用。
+ */
+export const Layout = () => import("@/layouts/index.vue");
 
 /**
  * 静态路由配置（不需要权限就能访问的路由）
@@ -11,62 +17,114 @@ import { AppRouteRecordRaw } from '@/utils/router'
  * 2、静态路由不管是否登录都可以访问
  */
 export const staticRoutes: AppRouteRecordRaw[] = [
-  // 不需要登录就能访问的路由示例
-  // {
-  //   path: '/welcome',
-  //   name: 'WelcomeStatic',
-  //   component: () => import('@views/dashboard/console/index.vue'),
-  //   meta: { title: 'menus.dashboard.title' }
-  // },
   {
-    path: '/auth/login',
-    name: 'Login',
-    component: () => import('@views/auth/login/index.vue'),
-    meta: { title: 'menus.login.title', isHideTab: true }
+    path: "/welcome",
+    name: "WelcomeStatic",
+    component: () => import("@views/dashboard/console/index.vue"),
+    meta: { title: "menus.dashboard.title" },
   },
   {
-    path: '/auth/register',
-    name: 'Register',
-    component: () => import('@views/auth/register/index.vue'),
-    meta: { title: 'menus.register.title', isHideTab: true }
-  },
-  {
-    path: '/auth/forget-password',
-    name: 'ForgetPassword',
-    component: () => import('@views/auth/forget-password/index.vue'),
-    meta: { title: 'menus.forgetPassword.title', isHideTab: true }
-  },
-  {
-    path: '/403',
-    name: 'Exception403',
-    component: () => import('@views/exception/403/index.vue'),
-    meta: { title: '403', isHideTab: true }
-  },
-  {
-    path: '/:pathMatch(.*)*',
-    name: 'Exception404',
-    component: () => import('@views/exception/404/index.vue'),
-    meta: { title: '404', isHideTab: true }
-  },
-  {
-    path: '/500',
-    name: 'Exception500',
-    component: () => import('@views/exception/500/index.vue'),
-    meta: { title: '500', isHideTab: true }
-  },
-  {
-    path: '/outside',
-    component: () => import('@views/index/index.vue'),
-    name: 'Outside',
-    meta: { title: 'menus.outside.title' },
+    path: "/redirect",
+    meta: { hidden: true },
+    component: Layout,
     children: [
-      // iframe 内嵌页面
       {
-        path: '/outside/iframe/:path',
-        name: 'Iframe',
-        component: () => import('@/views/outside/Iframe.vue'),
-        meta: { title: 'iframe' }
-      }
-    ]
-  }
-]
+        path: "/redirect/:path(.*)",
+        component: () => import("@/views/redirect/index.vue"),
+      },
+    ],
+  },
+  {
+    path: "/login",
+    name: "Login",
+    meta: { hidden: true, title: "menus.login.title" },
+    component: () => import("@views/module_system/auth/login/index.vue"),
+  },
+  {
+    path: "/401",
+    name: "401",
+    meta: { hidden: true, title: "401" },
+    component: () => import("@/views/error/401.vue"),
+  },
+  {
+    path: "/404",
+    name: "404",
+    meta: { hidden: true, title: "404" },
+    component: () => import("@/views/error/404.vue"),
+  },
+  {
+    path: "/500",
+    name: "500",
+    meta: { hidden: true, title: "500" },
+    component: () => import("@/views/error/500.vue"),
+  },
+  {
+    path: "/",
+    name: "/",
+    redirect: "/workbench",
+    component: Layout,
+    children: [
+      /** 业务工作台（自建 workplace.vue） */
+      {
+        path: "workbench",
+        name: "Workbench",
+        component: () => import("@/views/dashboard/workplace.vue"),
+        meta: {
+          title: "menus.workbench.title",
+          icon: "ri:layout-grid-line",
+          affix: true,
+          keepAlive: true,
+        },
+      },
+      /** 数据门户（自建 index.vue，与模版 /dashboard/* 子页区分） */
+      {
+        path: "portal",
+        name: "PortalHome",
+        component: () => import("@/views/dashboard/index.vue"),
+        meta: {
+          title: "menus.portal.title",
+          icon: "ri:presentation-line",
+          keepAlive: true,
+        },
+      },
+      /** 旧链接 /#/home 兼容，进入工作台 */
+      {
+        path: "home",
+        redirect: "/workbench",
+      },
+      {
+        path: "profile",
+        name: "Profile",
+        meta: { title: "个人中心", icon: "user", hidden: true },
+        component: () => import("@/views/current/profile.vue"),
+      },
+    ],
+  },
+  {
+    path: "/403",
+    name: "Exception403",
+    component: () => import("@views/exception/403/index.vue"),
+    meta: { title: "403", isHideTab: true },
+  },
+  {
+    path: "/outside",
+    component: () => import("@/layouts/index.vue"),
+    name: "Outside",
+    meta: { title: "menus.outside.title" },
+    children: [
+      {
+        path: "/outside/iframe/:path",
+        name: "Iframe",
+        component: () => import("@/views/outside/Iframe.vue"),
+        meta: { title: "iframe" },
+      },
+    ],
+  },
+  // 通配 404 必须置于静态路由最后
+  {
+    path: "/:pathMatch(.*)*",
+    name: "Exception404",
+    component: () => import("@views/exception/404/index.vue"),
+    meta: { title: "404", isHideTab: true },
+  },
+];
diff --git a/frontend/new-web/src/router/routesAlias.ts b/frontend/new-web/src/router/routesAlias.ts
index 73ac6310..6f1d3c52 100644
--- a/frontend/new-web/src/router/routesAlias.ts
+++ b/frontend/new-web/src/router/routesAlias.ts
@@ -3,6 +3,8 @@
  * 存放系统级公共路由路径，如布局容器、登录页等
  */
 export enum RoutesAlias {
-  Layout = '/index/index', // 布局容器
-  Login = '/auth/login' // 登录页
+  Layout = "/index/index", // 布局容器
+  /** 嵌套目录父级：仅渲染子路由，避免二层及以下重复使用完整 Layout */
+  NestedRouterParent = "/nested/router-view-parent",
+  Login = "/auth/login", // 登录页
 }
diff --git a/frontend/new-web/src/router/utils/backendMenuTransform.ts b/frontend/new-web/src/router/utils/backendMenuTransform.ts
new file mode 100644
index 00000000..e2a3977d
--- /dev/null
+++ b/frontend/new-web/src/router/utils/backendMenuTransform.ts
@@ -0,0 +1,151 @@
+/**
+ * 将后端 `/system/menu/tree` 返回的 MenuTable 转为前端动态路由 AppRouteRecord。
+ * 字段对照：route_path→path、route_name→name、component_path→component、目录补 Layout。
+ */
+import type { MenuTable } from "@/api/module_system/menu";
+import type { AppRouteRecord, RouteMeta } from "@/types/router";
+import { RoutesAlias } from "@/router/routesAlias";
+
+/**
+ * 后端常把「模块目录」与「其下功能菜单」写成同一绝对 route_path。
+ * Vue Router 嵌套子路由应使用空 path 挂到父 path 下。
+ */
+export function normalizeMenuNestedPaths(
+  items: MenuTable[],
+  parentAbsolutePath?: string
+): MenuTable[] {
+  return items.map((node) => {
+    const raw = (node.route_path ?? "").trim();
+    let routePath: string | null | undefined = node.route_path;
+    if (parentAbsolutePath && raw && raw === parentAbsolutePath) {
+      routePath = "";
+    }
+    const canonical = raw.startsWith("/") ? raw : parentAbsolutePath;
+    const children = node.children?.length
+      ? normalizeMenuNestedPaths(node.children, canonical)
+      : undefined;
+    return { ...node, route_path: routePath, children };
+  });
+}
+
+function joinAbsolutePath(parentAbs: string, segmentPath: string): string {
+  const seg = segmentPath.replace(/^\/+/, "");
+  const base = parentAbs.replace(/\/$/, "");
+  if (!seg) return base;
+  return `${base}/${seg}`;
+}
+
+/**
+ * 后端常把子菜单 path 存成完整绝对路径（如 `/system/menu`）。
+ * Vue Router 嵌套子路由必须为相对段（如 `menu`），否则 validateMenuPaths 会报错。
+ */
+export function normalizeAppRouteChildPaths(
+  routes: AppRouteRecord[],
+  parentAbsolutePath = ""
+): AppRouteRecord[] {
+  return routes.map((route) => {
+    let path = (route.path ?? "").trim();
+
+    if (/^https?:\/\//i.test(path)) {
+      return {
+        ...route,
+        children: route.children?.length
+          ? normalizeAppRouteChildPaths(route.children, parentAbsolutePath)
+          : route.children,
+      };
+    }
+
+    if (parentAbsolutePath && path.startsWith("/")) {
+      const p = parentAbsolutePath.replace(/\/$/, "");
+      if (path.startsWith(`${p}/`)) {
+        path = path.slice(p.length + 1);
+      } else if (path === p) {
+        path = "";
+      }
+    }
+
+    // 父子 route_path 分叉时（如父 `/task/workflow-mgr` 与子 `/task/workflow/definition`）无法用父前缀裁剪；
+    // 取末段作为嵌套相对 path，与 validateMenuPaths 建议一致。
+    if (
+      parentAbsolutePath &&
+      path.startsWith("/") &&
+      !/^https?:\/\//i.test(path) &&
+      !path.startsWith("/outside/iframe/")
+    ) {
+      const segments = path.split("/").filter(Boolean);
+      if (segments.length) path = segments[segments.length - 1]!;
+    }
+
+    const currentAbs = !parentAbsolutePath
+      ? path.startsWith("/")
+        ? path
+        : path
+          ? `/${path.replace(/^\/+/, "")}`
+          : ""
+      : joinAbsolutePath(parentAbsolutePath, path);
+
+    const children = route.children?.length
+      ? normalizeAppRouteChildPaths(route.children, currentAbs)
+      : route.children;
+
+    return { ...route, path, children };
+  });
+}
+
+function toComponentImportPath(componentPath: string): string {
+  const t = componentPath.trim().replace(/^\/+/, "");
+  return t ? `/${t}` : "";
+}
+
+function mapMenuNode(item: MenuTable, depth = 0): AppRouteRecord {
+  const childrenRaw = item.children?.filter((c) => c.type !== 3) ?? [];
+  const children = childrenRaw.length
+    ? childrenRaw.map((c) => mapMenuNode(c, depth + 1))
+    : undefined;
+
+  const path = (item.route_path ?? "").trim();
+  const name = item.route_name || undefined;
+  const redirect = item.redirect?.trim() || undefined;
+
+  const hasKids = !!(children && children.length > 0);
+  const isDirectory = item.type === 1;
+
+  let component: string | undefined;
+  if (isDirectory || (hasKids && !(item.component_path ?? "").trim())) {
+    component = depth === 0 ? RoutesAlias.Layout : RoutesAlias.NestedRouterParent;
+  } else if ((item.component_path ?? "").trim()) {
+    component = toComponentImportPath(item.component_path!);
+  }
+
+  const meta: RouteMeta = {
+    title: item.title ?? "",
+    /** 与 IconSelect / MenuRouteIcon 约定一致，不做字符串改写 */
+    icon: item.icon || undefined,
+    hidden: !!item.hidden,
+    keepAlive: item.keep_alive ?? true,
+    affix: !!item.affix,
+    fixedTab: !!item.affix,
+    alwaysShow: !!item.always_show,
+    isHide: !!item.hidden,
+    client: item.client,
+  };
+
+  return {
+    path,
+    name,
+    component,
+    redirect,
+    meta,
+    children,
+  };
+}
+
+/**
+ * 过滤按钮(type=3)，再递归映射为 AppRouteRecord
+ */
+export function backendMenusToAppRoutes(menus: MenuTable[]): AppRouteRecord[] {
+  const roots = menus.filter((m) => m.type !== 3);
+  const normalized = normalizeMenuNestedPaths(roots);
+  const mapped = normalized.map((m) => mapMenuNode(m, 0));
+  return normalizeAppRouteChildPaths(mapped);
+}
diff --git a/frontend/new-web/src/router/utils/mergeAppRouteRecords.ts b/frontend/new-web/src/router/utils/mergeAppRouteRecords.ts
new file mode 100644
index 00000000..1acea448
--- /dev/null
+++ b/frontend/new-web/src/router/utils/mergeAppRouteRecords.ts
@@ -0,0 +1,37 @@
+import type { AppRouteRecord } from "@/types/router";
+
+/**
+ * 合并两组路由菜单：先保留 primary（通常为后端菜单），再追加 secondary 中「路由 name 未出现过」的项。
+ * Vue Router 要求 name 唯一，同名以前序为准。
+ */
+export function mergeAppRouteRecords(
+  primary: AppRouteRecord[],
+  secondary: AppRouteRecord[]
+): AppRouteRecord[] {
+  const usedNames = new Set<string>();
+
+  const collectNames = (routes: AppRouteRecord[]) => {
+    for (const r of routes) {
+      if (r.name) usedNames.add(String(r.name));
+      if (r.children?.length) collectNames(r.children);
+    }
+  };
+  collectNames(primary);
+
+  const pickFresh = (routes: AppRouteRecord[]): AppRouteRecord[] => {
+    const out: AppRouteRecord[] = [];
+    for (const r of routes) {
+      const n = r.name ? String(r.name) : "";
+      if (n && usedNames.has(n)) continue;
+      const next: AppRouteRecord = { ...r };
+      if (r.children?.length) {
+        next.children = pickFresh(r.children);
+      }
+      if (n) usedNames.add(n);
+      out.push(next);
+    }
+    return out;
+  };
+
+  return [...primary, ...pickFresh(secondary)];
+}
diff --git a/frontend/new-web/src/router/utils/mergeShellMenus.ts b/frontend/new-web/src/router/utils/mergeShellMenus.ts
new file mode 100644
index 00000000..03f822d1
--- /dev/null
+++ b/frontend/new-web/src/router/utils/mergeShellMenus.ts
@@ -0,0 +1,62 @@
+import type { AppRouteRecord } from "@/types/router";
+
+function normalizeMenuPath(path?: string): string {
+  if (!path || !path.trim()) return "";
+  const p = path.trim();
+  return p.startsWith("/") ? p : `/${p}`;
+}
+
+function collectPathsAndNames(items: AppRouteRecord[], paths: Set<string>, names: Set<string>) {
+  for (const r of items) {
+    const np = normalizeMenuPath(r.path as string);
+    if (np) paths.add(np);
+    if (r.name) names.add(String(r.name));
+    if (r.children?.length) collectPathsAndNames(r.children, paths, names);
+  }
+}
+
+/**
+ * 与 `staticRoutes` 里挂在 Layout 下的壳子页一致（路由已在 vue-router 注册，仅补侧边栏入口）。
+ * meta.shellRoute 表示无动态 component 字段，由 SidebarSubmenu 放行可点击。
+ */
+const STATIC_SHELL_MENU_ENTRIES: AppRouteRecord[] = [
+  {
+    path: "/workbench",
+    name: "Workbench",
+    meta: {
+      title: "menus.workbench.title",
+      icon: "ri:layout-grid-line",
+      affix: true,
+      keepAlive: true,
+      shellRoute: true,
+    },
+  },
+  {
+    path: "/portal",
+    name: "PortalHome",
+    meta: {
+      title: "menus.portal.title",
+      icon: "ri:presentation-line",
+      keepAlive: true,
+      shellRoute: true,
+    },
+  },
+];
+
+/**
+ * 将静态壳层菜单合并进后端菜单树（避免动态菜单里缺少工作台 / 数据门户入口）。
+ */
+export function mergeShellRoutesIntoMenu(menuList: AppRouteRecord[]): AppRouteRecord[] {
+  const paths = new Set<string>();
+  const names = new Set<string>();
+  collectPathsAndNames(menuList, paths, names);
+
+  const additions = STATIC_SHELL_MENU_ENTRIES.filter((shell) => {
+    const p = normalizeMenuPath(shell.path as string);
+    const n = shell.name ? String(shell.name) : "";
+    return p && !paths.has(p) && (!n || !names.has(n));
+  });
+
+  if (additions.length === 0) return menuList;
+  return [...additions, ...menuList];
+}
diff --git a/frontend/new-web/src/store/index.ts b/frontend/new-web/src/store/index.ts
index b485999a..f74c7d4e 100755
--- a/frontend/new-web/src/store/index.ts
+++ b/frontend/new-web/src/store/index.ts
@@ -1,52 +1,100 @@
-/**
- * Pinia Store 配置模块
- *
- * 提供全局状态管理的初始化和配置
- *
- * ## 主要功能
- *
- * - Pinia Store 实例创建
- * - 持久化插件配置（pinia-plugin-persistedstate）
- * - 版本化存储键管理
- * - 自动数据迁移（跨版本）
- * - LocalStorage 序列化配置
- * - Store 初始化函数
- *
- * ## 持久化策略
- *
- * - 使用 StorageKeyManager 生成版本化的存储键
- * - 格式：sys-v{version}-{storeId}
- * - 自动迁移旧版本数据到当前版本
- * - 使用 localStorage 作为存储介质
- *
- * @module store/index
- * @author Art Design Pro Team
- */
-import type { App } from 'vue'
-import { createPinia } from 'pinia'
-import { createPersistedState } from 'pinia-plugin-persistedstate'
-import { StorageKeyManager } from '@/utils/storage/storage-key-manager'
+import type { App } from "vue";
+import { createPinia } from "pinia";
+import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
+import type { RouteRecordRaw } from "vue-router";
 
-export const store = createPinia()
+import { router } from "@/router";
+import { useUserStore } from "./modules/user.store";
+import { usePermissionStore } from "./modules/permission.store";
+import { useDictStore } from "./modules/dict.store";
+import { useNoticeStore } from "./modules/notice.store";
+import { useConfigStore } from "./modules/config.store";
+import { useTagsViewStore } from "./modules/tags-view.store";
 
-// 创建存储键管理器实例
-const storageKeyManager = new StorageKeyManager()
+const store = createPinia();
 
-// 配置持久化插件
-store.use(
-  createPersistedState({
-    key: (storeId: string) => storageKeyManager.getStorageKey(storeId),
-    storage: localStorage,
-    serializer: {
-      serialize: JSON.stringify,
-      deserialize: JSON.parse
-    }
-  })
-)
+store.use(piniaPluginPersistedstate);
 
-/**
- * 初始化 Store
- */
-export function initStore(app: App<Element>): void {
-  app.use(store)
+export function initStore(app: App<Element>) {
+  app.use(store);
+}
+
+export * from "./modules/app.store";
+export * from "./modules/config.store";
+export * from "./modules/dict.store";
+export * from "./modules/lock.store";
+export * from "./modules/menu.store";
+export * from "./modules/notice.store";
+export * from "./modules/permission.store";
+export * from "./modules/setting.store";
+export * from "./modules/table.store";
+export * from "./modules/tags-view.store";
+export * from "./modules/user.store";
+export * from "./modules/worktab.store";
+
+export { store };
+export {
+  useUserStore,
+  usePermissionStore,
+  useDictStore,
+  useNoticeStore,
+  useConfigStore,
+  useTagsViewStore,
+};
+
+export interface RefreshCacheOptions {
+  dictTypes?: string[];
+  refreshUser?: boolean;
+  refreshRoutes?: boolean;
+  refreshConfig?: boolean;
+  refreshNotice?: boolean;
+  clearTags?: boolean;
+  clearDictBefore?: boolean;
+}
+
+export async function refreshAppCaches(opts: RefreshCacheOptions = {}) {
+  const {
+    dictTypes,
+    refreshUser = true,
+    refreshRoutes = true,
+    refreshConfig = true,
+    refreshNotice = true,
+    clearTags = false,
+    clearDictBefore = false,
+  } = opts;
+
+  const userStore = useUserStore(store);
+  const permStore = usePermissionStore(store);
+  const dictStore = useDictStore(store);
+  const noticeStore = useNoticeStore(store);
+  const configStore = useConfigStore(store);
+  const tagsViewStore = useTagsViewStore(store);
+
+  const tasks: Promise<any>[] = [];
+
+  if (refreshUser) {
+    tasks.push(userStore.getUserInfo());
+  }
+  if (refreshConfig) {
+    tasks.push(configStore.getConfig(true));
+  }
+  if (refreshNotice) {
+    tasks.push(noticeStore.getNotice());
+  }
+  if (dictTypes && dictTypes.length > 0) {
+    if (clearDictBefore) dictStore.clearDictData();
+    tasks.push(dictStore.getDict(dictTypes));
+  }
+
+  await Promise.allSettled(tasks);
+
+  if (refreshRoutes) {
+    permStore.resetRouter();
+    const dynamicRoutes = await permStore.generateRoutes();
+    dynamicRoutes.forEach((route: RouteRecordRaw) => router.addRoute(route));
+  }
+
+  if (clearTags) {
+    await tagsViewStore.delAllViews();
+  }
 }
diff --git a/frontend/new-web/src/store/modules/app.store.ts b/frontend/new-web/src/store/modules/app.store.ts
new file mode 100644
index 00000000..7181295d
--- /dev/null
+++ b/frontend/new-web/src/store/modules/app.store.ts
@@ -0,0 +1,122 @@
+/**
+ * 应用状态管理模块（兼容 web 项目）
+ *
+ * 提供应用相关的状态管理
+ *
+ * ## 主要功能
+ *
+ * - 设备类型管理（桌面/平板/移动端）
+ * - 布局大小管理（默认/紧凑/宽松）
+ * - 语言管理（中文/英文）
+ * - 侧边栏状态管理（展开/收起）
+ * - 顶部菜单激活路径管理
+ * - 引导功能可见性管理
+ *
+ * ## 使用场景
+ *
+ * - 响应式布局适配
+ * - 多语言切换
+ * - 侧边栏折叠展开
+ * - 顶部菜单导航
+ * - 新手引导展示
+ *
+ * @module store/modules/app.store
+ * @author FastapiAdmin Team
+ */
+import { defineStore } from "pinia";
+import { ref, computed } from "vue";
+import { DeviceEnum } from "@/enums/settings/device.enum";
+import zhCn from "element-plus/es/locale/lang/zh-cn";
+import en from "element-plus/es/locale/lang/en";
+
+export const useAppStore = defineStore(
+  "appStore",
+  () => {
+    /** 设备类型 */
+    const device = ref<string>(DeviceEnum.DESKTOP);
+
+    /** 布局大小 */
+    const size = ref<string>("default");
+
+    /** 语言 */
+    const language = ref<string>("zh");
+
+    /** 侧边栏状态 */
+    const sidebar = ref({
+      opened: true,
+      withoutAnimation: false,
+    });
+
+    /** 顶部菜单激活路径 */
+    const activeTopMenuPath = ref<string>("");
+
+    /** 引导可见性 */
+    const guideVisible = ref<boolean>(false);
+
+    /** 语言区域 */
+    const locale = computed(() => {
+      return language.value === "en" ? en : zhCn;
+    });
+
+    /** 切换侧边栏 */
+    function toggleSidebar() {
+      sidebar.value.opened = !sidebar.value.opened;
+    }
+
+    /** 关闭侧边栏 */
+    function closeSideBar() {
+      sidebar.value.opened = false;
+    }
+
+    /** 打开侧边栏 */
+    function openSideBar() {
+      sidebar.value.opened = true;
+    }
+
+    /** 切换设备 */
+    function toggleDevice(val: string) {
+      device.value = val;
+    }
+
+    /** 改变布局大小 */
+    function changeSize(val: string) {
+      size.value = val;
+    }
+
+    /** 改变语言 */
+    function changeLanguage(val: string) {
+      language.value = val;
+    }
+
+    /** 顶部菜单切换 */
+    function activeTopMenu(val: string) {
+      activeTopMenuPath.value = val;
+    }
+
+    /** 显示或隐藏引导 */
+    function showGuide(val: boolean) {
+      guideVisible.value = val;
+    }
+
+    return {
+      device,
+      sidebar,
+      language,
+      locale,
+      size,
+      activeTopMenu,
+      toggleDevice,
+      showGuide,
+      changeSize,
+      changeLanguage,
+      toggleSidebar,
+      closeSideBar,
+      openSideBar,
+      activeTopMenuPath,
+      guideVisible,
+    };
+  },
+  {
+    persist: true,
+  }
+);
diff --git a/frontend/new-web/src/store/modules/config.store.ts b/frontend/new-web/src/store/modules/config.store.ts
new file mode 100644
index 00000000..8d0d324f
--- /dev/null
+++ b/frontend/new-web/src/store/modules/config.store.ts
@@ -0,0 +1,86 @@
+/**
+ * 系统配置状态管理模块
+ *
+ * 提供系统配置参数的状态管理
+ *
+ * ## 主要功能
+ *
+ * - 网站基础信息管理（标题、版本、描述）
+ * - 网站图标配置（登录背景、favicon、Logo）
+ * - 安全隐私配置（服务条款、版权、隐私政策）
+ * - 接口安全配置（白名单、黑名单）
+ * - 演示环境配置
+ *
+ * ## 使用场景
+ *
+ * - 系统初始化配置加载
+ * - 登录页背景和Logo显示
+ * - 底部版权信息展示
+ * - 接口安全控制
+ *
+ * ## 持久化
+ *
+ * - 使用 localStorage 存储
+ * - 自动缓存已加载的配置
+ * - 支持强制刷新配置
+ *
+ * @module store/modules/config.store
+ * @author FastapiAdmin Team
+ */
+import { store } from "@/store";
+import ParamsAPI, { ConfigTable } from "@/api/module_system/params";
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useConfigStore = defineStore(
+  "configStore",
+  () => {
+    // 配置数据
+    const configData = ref<Record<string, ConfigTable>>({});
+    // 是否已加载配置
+    const isConfigLoaded = ref(false);
+    // 是否正在加载配置
+    const configLoading = ref(false);
+
+    /**
+     * 获取系统配置
+     * @param force 是否强制刷新配置
+     */
+    async function getConfig(force = false) {
+      if ((isConfigLoaded.value && !force) || configLoading.value) {
+        return;
+      }
+      configLoading.value = true;
+      try {
+        const response = await ParamsAPI.getInitConfig();
+        const list = response?.data?.data;
+        if (!Array.isArray(list)) {
+          console.warn("[configStore] getInitConfig: 响应 data 非数组", response?.data);
+          return;
+        }
+        list.forEach((item: ConfigTable) => {
+          if (item.config_value !== undefined && item.config_key) {
+            configData.value[item.config_key] = item;
+          }
+        });
+        isConfigLoaded.value = true;
+      } finally {
+        configLoading.value = false;
+      }
+    }
+
+    return {
+      configData,
+      isConfigLoaded,
+      configLoading,
+      getConfig,
+    };
+  },
+  {
+    persist: true,
+  }
+);
+
+export function useConfigStoreHook() {
+  return useConfigStore(store);
+}
diff --git a/frontend/new-web/src/store/modules/dict.store.ts b/frontend/new-web/src/store/modules/dict.store.ts
new file mode 100644
index 00000000..d07b6166
--- /dev/null
+++ b/frontend/new-web/src/store/modules/dict.store.ts
@@ -0,0 +1,151 @@
+/**
+ * 字典状态管理模块
+ *
+ * 提供数据字典的状态管理和缓存机制
+ *
+ * ## 主要功能
+ *
+ * - 字典数据缓存和管理
+ * - 批量获取字典数据
+ * - 字典标签查找
+ * - 字典数据清空
+ *
+ * ## 使用场景
+ *
+ * - 表单下拉选择框数据填充
+ * - 表格列数据格式化显示
+ * - 状态字段标签转换
+ * - 动态表单配置
+ *
+ * ## 核心特性
+ *
+ * - 自动去重缓存
+ * - 按需加载字典
+ * - 统一的数据格式
+ * - 支持批量获取
+ *
+ * ## 持久化
+ *
+ * - 使用 localStorage 存储
+ * - 缓存已加载的字典数据
+ * - 减少重复请求
+ *
+ * @module store/modules/dict.store
+ * @author FastapiAdmin Team
+ */
+import { store } from "@/store";
+import DictAPI, { DictDataTable } from "@/api/module_system/dict";
+import { defineStore } from "pinia";
+import { ref, computed } from "vue";
+
+export const useDictStore = defineStore(
+  "dictStore",
+  () => {
+    // 字典数据
+    const dictData = ref<Record<string, DictDataTable[]>>({});
+    // 是否已加载
+    const isLoaded = ref(false);
+
+    /**
+     * 获取所有字典数据
+     */
+    const getDictData = computed(() => dictData.value);
+
+    /**
+     * 获取指定类型的字典数据，确保返回数组
+     */
+    const getDictArray = (type: string): Array<{ dict_value: string; dict_label: string }> => {
+      return (dictData.value[type] || [])
+        .filter((item) => item.dict_value !== undefined && item.dict_label !== undefined)
+        .map((item) => ({
+          dict_value: item.dict_value!,
+          dict_label: item.dict_label!,
+        }));
+    };
+
+    /**
+     * 批量获取字典数据
+     * @param types 字典类型数组
+     * @returns 指定类型的字典数据
+     */
+    async function getDict(types: string[]): Promise<Record<string, DictDataTable[]>> {
+      try {
+        for (const type of types) {
+          if (!dictData.value[type]) {
+            const response = await DictAPI.getInitDict(type);
+            // 确保数据格式正确
+            dictData.value[type] = ((response.data.data as DictDataTable[]) || []).filter(
+              (item) => item.dict_value !== undefined && item.dict_label !== undefined
+            );
+            isLoaded.value = true;
+          }
+        }
+        // 返回请求的字典数据
+        return types.reduce(
+          (result, type) => {
+            result[type] = getDictArray(type);
+            return result;
+          },
+          {} as Record<string, DictDataTable[]>
+        );
+      } catch (error) {
+        console.error("获取字典数据失败", error);
+        return {};
+      }
+    }
+
+    /**
+     * 根据类型和值获取字典标签
+     * @param type 字典类型
+     * @param value 字典值
+     * @returns 字典标签对象或原值
+     */
+    function getDictLabel(type: string, value: string) {
+      const result = dictData.value[type]?.find((item) => item.dict_value === value);
+      if (!result) {
+        return value;
+      }
+      const dict_data = {
+        id: result.id,
+        dict_value: result.dict_value,
+        dict_label: result.dict_label,
+        dict_type: result.dict_type,
+        css_class: result.css_class,
+        list_class: result.list_class,
+        is_default: result.is_default,
+        dict_sort: result.dict_sort,
+        dict_type_id: result.dict_type_id,
+        uuid: result.uuid,
+        status: result.status,
+        description: result.description,
+        created_time: result.created_time,
+        updated_time: result.updated_time,
+      };
+      return dict_data;
+    }
+
+    /**
+     * 清空字典数据
+     */
+    function clearDictData() {
+      dictData.value = {};
+    }
+
+    return {
+      dictData,
+      isLoaded,
+      getDictData,
+      getDictArray,
+      getDict,
+      getDictLabel,
+      clearDictData,
+    };
+  },
+  {
+    persist: true,
+  }
+);
+
+export function useDictStoreHook() {
+  return useDictStore(store);
+}
diff --git a/frontend/new-web/src/store/modules/lock.store.ts b/frontend/new-web/src/store/modules/lock.store.ts
new file mode 100644
index 00000000..cfc660e3
--- /dev/null
+++ b/frontend/new-web/src/store/modules/lock.store.ts
@@ -0,0 +1,93 @@
+/**
+ * 锁屏状态管理模块
+ *
+ * 提供锁屏功能的状态管理
+ *
+ * ## 主要功能
+ *
+ * - 锁屏状态管理
+ * - 锁屏密码验证
+ * - 锁屏信息存储
+ * - 解锁功能
+ *
+ * ## 使用场景
+ *
+ * - 用户离开时锁定屏幕
+ * - 保护敏感操作
+ * - 临时离开保护
+ *
+ * ## 持久化
+ *
+ * - 使用 localStorage 存储
+ * - 锁屏状态跨页面保持
+ *
+ * @module store/modules/lock.store
+ * @author FastapiAdmin Team
+ */
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useLockStore = defineStore(
+  "lockStore",
+  () => {
+    // 是否锁定屏幕
+    const isLock = ref(false);
+    // 锁屏密码
+    const password = ref("");
+
+    /**
+     * 获取锁屏信息
+     */
+    const getLockInfo = () => ({
+      isLock: isLock.value,
+      password: password.value,
+    });
+
+    /**
+     * 设置锁屏信息
+     * @param lockInfo 锁屏信息对象
+     */
+    const setLockInfo = (lockInfo: { isLock?: boolean; password?: string }) => {
+      if (lockInfo.isLock !== undefined) {
+        isLock.value = lockInfo.isLock;
+      }
+      if (lockInfo.password !== undefined) {
+        password.value = lockInfo.password;
+      }
+    };
+
+    /**
+     * 重置锁屏信息
+     */
+    const resetLockInfo = () => {
+      isLock.value = false;
+      password.value = "";
+    };
+
+    /**
+     * 解锁屏幕
+     * @param inputPassword 输入的解锁密码
+     * @returns 是否解锁成功
+     */
+    const unLock = (inputPassword: string) => {
+      if (password.value === inputPassword) {
+        resetLockInfo();
+        return true;
+      } else {
+        return false;
+      }
+    };
+
+    return {
+      isLock,
+      password,
+      getLockInfo,
+      setLockInfo,
+      resetLockInfo,
+      unLock,
+    };
+  },
+  {
+    persist: true,
+  }
+);
diff --git a/frontend/new-web/src/store/modules/menu.store.ts b/frontend/new-web/src/store/modules/menu.store.ts
new file mode 100755
index 00000000..b5a3d739
--- /dev/null
+++ b/frontend/new-web/src/store/modules/menu.store.ts
@@ -0,0 +1,117 @@
+/**
+ * 菜单状态管理模块
+ *
+ * 提供菜单数据和动态路由的状态管理
+ *
+ * ## 主要功能
+ *
+ * - 菜单列表存储和管理
+ * - 首页路径配置
+ * - 动态路由注册和移除
+ * - 路由移除函数管理
+ * - 菜单宽度配置
+ *
+ * ## 使用场景
+ *
+ * - 动态菜单加载和渲染
+ * - 路由权限控制
+ * - 首页路径动态设置
+ * - 登出时清理动态路由
+ *
+ * ## 工作流程
+ *
+ * 1. 获取菜单数据（前端/后端模式）
+ * 2. 设置菜单列表和首页路径
+ * 3. 注册动态路由并保存移除函数
+ * 4. 登出时调用移除函数清理路由
+ *
+ * @module store/modules/menu.store
+ * @author FastapiAdmin Team
+ */
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { AppRouteRecord } from "@/types/router";
+import { getFirstMenuPath } from "@/utils";
+import { HOME_PAGE_PATH } from "@/router";
+import { mergeShellRoutesIntoMenu } from "@/router/utils/mergeShellMenus";
+
+/**
+ * 菜单状态管理
+ * 管理应用的菜单列表、首页路径、菜单宽度和动态路由移除函数
+ */
+export const useMenuStore = defineStore(
+  "menuStore",
+  () => {
+    /** 首页路径 */
+    const homePath = ref(HOME_PAGE_PATH);
+    /** 菜单列表 */
+    const menuList = ref<AppRouteRecord[]>([]);
+    /** 菜单宽度 */
+    const menuWidth = ref("");
+    /** 存储路由移除函数的数组 */
+    const removeRouteFns = ref<(() => void)[]>([]);
+
+    /**
+     * 设置菜单列表
+     * @param list 菜单路由记录数组
+     */
+    const setMenuList = (list: AppRouteRecord[]) => {
+      const merged = mergeShellRoutesIntoMenu(list);
+      menuList.value = merged;
+      setHomePath(HOME_PAGE_PATH || getFirstMenuPath(merged));
+    };
+
+    /**
+     * 获取首页路径
+     * @returns 首页路径字符串
+     */
+    const getHomePath = () => homePath.value;
+
+    /**
+     * 设置主页路径
+     * @param path 主页路径
+     */
+    const setHomePath = (path: string) => {
+      homePath.value = path;
+    };
+
+    /**
+     * 添加路由移除函数
+     * @param fns 要添加的路由移除函数数组
+     */
+    const addRemoveRouteFns = (fns: (() => void)[]) => {
+      removeRouteFns.value.push(...fns);
+    };
+
+    /**
+     * 移除所有动态路由
+     * 执行所有存储的路由移除函数并清空数组
+     */
+    const removeAllDynamicRoutes = () => {
+      removeRouteFns.value.forEach((fn) => fn());
+      removeRouteFns.value = [];
+    };
+
+    /**
+     * 清空路由移除函数数组
+     */
+    const clearRemoveRouteFns = () => {
+      removeRouteFns.value = [];
+    };
+
+    return {
+      menuList,
+      menuWidth,
+      removeRouteFns,
+      setMenuList,
+      getHomePath,
+      setHomePath,
+      addRemoveRouteFns,
+      removeAllDynamicRoutes,
+      clearRemoveRouteFns,
+    };
+  },
+  {
+    persist: true,
+  }
+);
diff --git a/frontend/new-web/src/store/modules/menu.ts b/frontend/new-web/src/store/modules/menu.ts
deleted file mode 100755
index 85d13da1..00000000
--- a/frontend/new-web/src/store/modules/menu.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-/**
- * 菜单状态管理模块
- *
- * 提供菜单数据和动态路由的状态管理
- *
- * ## 主要功能
- *
- * - 菜单列表存储和管理
- * - 首页路径配置
- * - 动态路由注册和移除
- * - 路由移除函数管理
- * - 菜单宽度配置
- *
- * ## 使用场景
- *
- * - 动态菜单加载和渲染
- * - 路由权限控制
- * - 首页路径动态设置
- * - 登出时清理动态路由
- *
- * ## 工作流程
- *
- * 1. 获取菜单数据（前端/后端模式）
- * 2. 设置菜单列表和首页路径
- * 3. 注册动态路由并保存移除函数
- * 4. 登出时调用移除函数清理路由
- *
- * @module store/modules/menu
- * @author Art Design Pro Team
- */
-import { defineStore } from 'pinia'
-import { ref } from 'vue'
-import { AppRouteRecord } from '@/types/router'
-import { getFirstMenuPath } from '@/utils'
-import { HOME_PAGE_PATH } from '@/router'
-
-/**
- * 菜单状态管理
- * 管理应用的菜单列表、首页路径、菜单宽度和动态路由移除函数
- */
-export const useMenuStore = defineStore('menuStore', () => {
-  /** 首页路径 */
-  const homePath = ref(HOME_PAGE_PATH)
-  /** 菜单列表 */
-  const menuList = ref<AppRouteRecord[]>([])
-  /** 菜单宽度 */
-  const menuWidth = ref('')
-  /** 存储路由移除函数的数组 */
-  const removeRouteFns = ref<(() => void)[]>([])
-
-  /**
-   * 设置菜单列表
-   * @param list 菜单路由记录数组
-   */
-  const setMenuList = (list: AppRouteRecord[]) => {
-    menuList.value = list
-    setHomePath(HOME_PAGE_PATH || getFirstMenuPath(list))
-  }
-
-  /**
-   * 获取首页路径
-   * @returns 首页路径字符串
-   */
-  const getHomePath = () => homePath.value
-
-  /**
-   * 设置主页路径
-   * @param path 主页路径
-   */
-  const setHomePath = (path: string) => {
-    homePath.value = path
-  }
-
-  /**
-   * 添加路由移除函数
-   * @param fns 要添加的路由移除函数数组
-   */
-  const addRemoveRouteFns = (fns: (() => void)[]) => {
-    removeRouteFns.value.push(...fns)
-  }
-
-  /**
-   * 移除所有动态路由
-   * 执行所有存储的路由移除函数并清空数组
-   */
-  const removeAllDynamicRoutes = () => {
-    removeRouteFns.value.forEach((fn) => fn())
-    removeRouteFns.value = []
-  }
-
-  /**
-   * 清空路由移除函数数组
-   */
-  const clearRemoveRouteFns = () => {
-    removeRouteFns.value = []
-  }
-
-  return {
-    menuList,
-    menuWidth,
-    removeRouteFns,
-    setMenuList,
-    getHomePath,
-    setHomePath,
-    addRemoveRouteFns,
-    removeAllDynamicRoutes,
-    clearRemoveRouteFns
-  }
-})
diff --git a/frontend/new-web/src/store/modules/notice.store.ts b/frontend/new-web/src/store/modules/notice.store.ts
new file mode 100644
index 00000000..8a27a1fa
--- /dev/null
+++ b/frontend/new-web/src/store/modules/notice.store.ts
@@ -0,0 +1,124 @@
+/**
+ * 通知状态管理模块
+ *
+ * 提供系统通知的状态管理和持久化
+ *
+ * ## 主要功能
+ *
+ * - 通知列表获取和管理
+ * - 已读通知标记
+ * - 批量标记已读
+ * - 通知数量统计
+ * - 已读状态持久化
+ *
+ * ## 使用场景
+ *
+ * - 通知中心展示
+ * - 未读通知提醒
+ * - 通知阅读状态跟踪
+ * - 登录后的通知加载
+ *
+ * ## 持久化
+ *
+ * - 使用 localStorage 存储
+ * - 已读通知ID集合持久化
+ * - 刷新页面后保留已读状态
+ *
+ * @module store/modules/notice.store
+ * @author FastapiAdmin Team
+ */
+import { store } from "@/store";
+import NoticeAPI, { NoticeTable } from "@/api/module_system/notice";
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useNoticeStore = defineStore(
+  "noticeStore",
+  () => {
+    // 通知列表
+    const noticeList = ref<NoticeTable[]>([]);
+    // 通知总数
+    const total = ref(0);
+    // 是否已加载通知
+    const isNoticeLoaded = ref(false);
+    // 已读通知ID集合（前端持久化，避免刷新后重复展示）
+    const readIds = ref<number[]>([]);
+
+    /**
+     * 获取通知列表
+     */
+    async function getNotice() {
+      const response = await NoticeAPI.listNoticeAvailable();
+      const items = response.data.data.items || [];
+      // 过滤掉已读的通知
+      const readSet = new Set(readIds.value);
+      const filtered = items.filter(
+        (item: NoticeTable) => item.id !== undefined && !readSet.has(item.id as number)
+      );
+      noticeList.value = filtered;
+      total.value = filtered.length;
+      isNoticeLoaded.value = true;
+    }
+
+    /**
+     * 标记单条通知为已读
+     * @param id 通知ID
+     */
+    const markAsRead = (id?: number) => {
+      if (id === undefined) return;
+      if (!readIds.value.includes(id)) {
+        readIds.value.push(id);
+      }
+      // 同步过滤当前列表
+      noticeList.value = noticeList.value.filter((item) => item.id !== id);
+      total.value = noticeList.value.length;
+    };
+
+    /**
+     * 标记当前列表全部为已读
+     * @param ids 指定的通知ID数组，不传则标记所有
+     */
+    const markAllAsRead = (ids: number[] = []) => {
+      const targets = ids.length
+        ? ids
+        : noticeList.value.map((item) => item.id!).filter((id): id is number => id !== undefined);
+      const readSet = new Set(readIds.value);
+      targets.forEach((id) => {
+        if (!readSet.has(id)) readIds.value.push(id);
+      });
+      // 同步过滤当前列表
+      noticeList.value = noticeList.value.filter(
+        (item) => item.id !== undefined && !readIds.value.includes(item.id as number)
+      );
+      total.value = noticeList.value.length;
+    };
+
+    /**
+     * 清空用户通知信息（用于登出）
+     */
+    const clearUserInfo = () => {
+      noticeList.value = [];
+      total.value = 0;
+      isNoticeLoaded.value = false;
+      readIds.value = [];
+    };
+
+    return {
+      noticeList,
+      total,
+      isNoticeLoaded,
+      readIds,
+      getNotice,
+      markAsRead,
+      markAllAsRead,
+      clearUserInfo,
+    };
+  },
+  {
+    persist: true,
+  }
+);
+
+export function useNoticeStoreHook() {
+  return useNoticeStore(store);
+}
diff --git a/frontend/new-web/src/store/modules/permission.store.ts b/frontend/new-web/src/store/modules/permission.store.ts
new file mode 100644
index 00000000..bbd97ea0
--- /dev/null
+++ b/frontend/new-web/src/store/modules/permission.store.ts
@@ -0,0 +1,261 @@
+/**
+ * 权限路由状态管理模块
+ *
+ * 提供动态路由生成和权限控制的状态管理
+ *
+ * ## 主要功能
+ *
+ * - 动态路由生成
+ * - 路由权限控制
+ * - 混合布局侧边菜单管理
+ * - 路由重置和清理
+ * - 后端菜单数据转换
+ * - 嵌套路由路径规范化
+ *
+ * ## 使用场景
+ *
+ * - 用户登录后的动态路由注册
+ * - 权限验证和路由拦截
+ * - 混合布局的侧边菜单切换
+ * - 登出时的路由清理
+ * - 多级菜单嵌套处理
+ *
+ * ## 工作流程
+ *
+ * 1. 获取用户路由列表
+ * 2. 规范化嵌套路由路径
+ * 3. 生成Vue Router配置
+ * 4. 注册动态路由到路由器
+ * 5. 登出时移除所有动态路由
+ *
+ * @module store/modules/permission.store
+ * @author FastapiAdmin Team
+ */
+import type { RouteRecordRaw } from "vue-router";
+import { router } from "@/router";
+import { store, useUserStore } from "@/store";
+import { Layout, staticRoutes } from "@/router/routes/staticRoutes";
+import { RoutesAlias } from "@/router/routesAlias";
+import type { AppRouteRecord } from "@/types/router";
+import { MenuTable } from "@/api/module_system/menu";
+import {
+  normalizeAppRouteChildPaths,
+  normalizeMenuNestedPaths,
+} from "@/router/utils/backendMenuTransform";
+import { defineStore } from "pinia";
+import { Component, ref } from "vue";
+
+const modules = import.meta.glob("../../views/**/**.vue");
+
+export interface Meta {
+  /** 【目录】只有一个子路由是否始终显示 */
+  alwaysShow?: boolean;
+  /** 是否隐藏(true-是 false-否) */
+  hidden?: boolean;
+  /** 菜单终端（后端 sys_menu.client，PC 动态路由仅下发 pc） */
+  client?: string;
+  /** ICON */
+  icon?: string;
+  /** 【菜单】是否开启页面缓存 */
+  keepAlive?: boolean;
+  /** 路由title */
+  title?: string;
+  /** 排序 */
+  order?: number;
+  /** 参数 */
+  params?: { key: string; value: string }[];
+  /** 是否固定路由 */
+  affix?: boolean;
+}
+
+// 修改 component 类型，使其能接受动态导入函数
+export interface RouteVO {
+  /** 子路由列表 */
+  children: RouteVO[];
+  /** 组件路径或组件导入函数 */
+  component?: string | (() => Promise<Component>);
+  /** 路由属性 */
+  meta?: Meta;
+  /** 路由名称 */
+  name?: string;
+  /** 路由路径 */
+  path?: string;
+  /** 跳转链接 */
+  redirect?: string;
+}
+
+export const generator = (routers: MenuTable[]): RouteVO[] => {
+  return routers
+    .filter((item) => item.type !== 3)
+    .map((item) => {
+      const rawKids = item.children?.filter((c) => c.type !== 3) ?? [];
+      const hasKids = rawKids.length > 0;
+      const isDir = item.type === 1;
+
+      let component: string | undefined;
+      if (isDir || (hasKids && !(item.component_path ?? "").trim())) {
+        component = RoutesAlias.Layout;
+      } else if ((item.component_path ?? "").trim()) {
+        const cp = item.component_path!.trim().replace(/^\/+/, "");
+        component = `/${cp}`;
+      }
+
+      const currentRouter: RouteVO = {
+        children: [],
+        path: item.route_path,
+        name: item.route_name,
+        component,
+        redirect: item.redirect,
+        meta: {
+          title: item.title,
+          icon: item.icon || undefined,
+          client: item.client,
+          keepAlive: item.keep_alive,
+          hidden: item.hidden,
+          order: item.order,
+          alwaysShow: item.always_show,
+          params: item.params,
+          affix: item.affix,
+        },
+      };
+      if (hasKids) {
+        currentRouter.children = generator(rawKids);
+      }
+      return currentRouter;
+    });
+};
+
+export const usePermissionStore = defineStore(
+  "permissionStore",
+  () => {
+    // 存储所有路由，包括静态路由和动态路由
+    const routes = ref<RouteRecordRaw[]>([]);
+    // 混合模式左侧菜单路由
+    const mixLayoutSideMenus = ref<RouteRecordRaw[]>([]);
+    // 路由是否加载完成
+    const isRouteGenerated = ref(false);
+
+    /**
+     * 获取后台动态路由数据，解析并注册到全局路由
+     *
+     * @returns Promise<RouteRecordRaw[]> 解析后的动态路由列表
+     */
+    async function generateRoutes(): Promise<RouteRecordRaw[]> {
+      try {
+        const userStore = useUserStore();
+        // 确保获取用户信息和路由列表
+        if (!userStore.hasGetRoute) {
+          await userStore.getUserInfo();
+        }
+
+        const data = normalizeAppRouteChildPaths(
+          generator(normalizeMenuNestedPaths(userStore.routeList)) as AppRouteRecord[]
+        ) as RouteVO[];
+
+        // 解析动态路由
+        const dynamicRoutes = transformRoutes(data);
+
+        routes.value = [...staticRoutes, ...dynamicRoutes];
+
+        isRouteGenerated.value = true;
+
+        return dynamicRoutes;
+      } catch (error: any) {
+        // 即使失败也要设置状态，避免无限重试
+        isRouteGenerated.value = false;
+        throw error;
+      }
+    }
+
+    /**
+     * 根据父菜单路径设置侧边菜单
+     *
+     * @param parentPath 父菜单的路径，用于查找对应的菜单项
+     */
+    const setMixLayoutSideMenus = (parentPath: string) => {
+      const parentMenu = routes.value.find((item) => item.path === parentPath);
+      mixLayoutSideMenus.value = parentMenu?.children || [];
+    };
+
+    /**
+     * 重置路由
+     */
+    const resetRouter = () => {
+      // 创建常量路由名称集合，用于O(1)时间复杂度的查找
+      const constantRouteNames = new Set(staticRoutes.map((route) => route.name).filter(Boolean));
+
+      // 从 router 实例中移除动态路由
+      routes.value.forEach((route) => {
+        if (route.name && !constantRouteNames.has(route.name)) {
+          router.removeRoute(route.name);
+        }
+      });
+
+      // 重置所有状态
+      routes.value = [...staticRoutes];
+      mixLayoutSideMenus.value = [];
+      isRouteGenerated.value = false;
+    };
+
+    return {
+      routes,
+      mixLayoutSideMenus,
+      isRouteGenerated,
+      generateRoutes,
+      setMixLayoutSideMenus,
+      resetRouter,
+    };
+  },
+  {
+    persist: true,
+  }
+);
+
+export function usePermissionStoreHook() {
+  return usePermissionStore(store);
+}
+
+/**
+ * 转换后端路由数据为Vue Router配置
+ * 处理组件路径映射和Layout层级嵌套
+ */
+const transformRoutes = (routes: RouteVO[], isTopLevel: boolean = true): RouteRecordRaw[] => {
+  return routes.map((route) => {
+    // 创建路由对象，保留所有路由属性
+    const normalizedRoute = { ...route } as RouteRecordRaw;
+
+    // 处理组件路径映射
+    // normalizedRoute.component = !normalizedRoute.component
+    //   ? Layout
+    //   : modules[`../../views/${normalizedRoute.component}.vue`] ||
+    //     modules["../../views/error/404.vue"];
+
+    // 关键优化：
+    // 1. 顶级路由（一级目录）使用Layout组件，确保菜单和navbar能正常显示
+    // 2. 二级及以上的父路由不使用Layout组件，只作为路由容器，避免Layout嵌套
+    // 3. 叶子路由使用实际组件
+    // 4. 递归处理子路由，实现无限层级菜单
+    if (normalizedRoute.children && normalizedRoute.children.length > 0) {
+      // normalizedRoute.children = transformRoutes(route.children);
+
+      // 非叶子路由
+      if (isTopLevel) {
+        // 顶级路由（一级目录），使用Layout组件
+        normalizedRoute.component = Layout;
+      } else {
+        // 二级及以上的父路由，不使用Layout组件，只作为路由容器
+        normalizedRoute.component = undefined;
+      }
+      // 递归处理子路由，标记为非顶级路由
+      normalizedRoute.children = transformRoutes(route.children, false);
+    } else {
+      // 叶子路由，使用实际组件
+      normalizedRoute.component = normalizedRoute.component
+        ? modules[`../../views/${normalizedRoute.component}.vue`] ||
+          modules["../../views/error/404.vue"]
+        : modules["../../views/error/404.vue"];
+    }
+
+    return normalizedRoute;
+  });
+};
diff --git a/frontend/new-web/src/store/modules/setting.store.ts b/frontend/new-web/src/store/modules/setting.store.ts
new file mode 100644
index 00000000..ba48782f
--- /dev/null
+++ b/frontend/new-web/src/store/modules/setting.store.ts
@@ -0,0 +1,580 @@
+/**
+ * 系统设置状态管理模块
+ *
+ * 提供完整的系统设置状态管理
+ *
+ * ## 主要功能
+ *
+ * - 菜单布局配置（左侧、顶部、混合、双栏）
+ * - 主题管理（亮色、暗色、自动）
+ * - 菜单主题样式配置
+ * - 界面显示开关（面包屑、标签页、语言切换等）
+ * - 功能开关（手风琴模式、色弱模式、水印等）
+ * - 样式配置（边框、圆角、容器宽度、页面过渡）
+ * - 节日功能配置
+ * - Element Plus 主题色动态设置
+ *
+ * ## 使用场景
+ *
+ * - 设置面板配置管理
+ * - 主题切换和样式定制
+ * - 界面功能开关控制
+ * - 用户偏好设置持久化
+ *
+ * ## 持久化
+ *
+ * - 使用 localStorage 存储
+ * - 存储键：sys-v{version}-setting
+ * - 支持跨版本数据迁移
+ *
+ * @module store/modules/setting.store
+ * @author FastapiAdmin Team
+ */
+import { defineStore } from "pinia";
+import { ref, computed, watch } from "vue";
+import { MenuThemeType } from "@/types/store";
+import AppConfig from "@/config";
+import { SystemThemeEnum, MenuThemeEnum, MenuTypeEnum, ContainerWidthEnum } from "@/enums/appEnum";
+import { setElementThemeColor } from "@/utils/ui";
+import { useCeremony } from "@/hooks/core/useCeremony";
+import { StorageConfig } from "@/utils/storage/storage-config";
+import { SETTING_DEFAULT_CONFIG } from "@/config/setting";
+import {
+  applyTheme,
+  generateThemeColors,
+  toggleDarkMode,
+  toggleSidebarColor,
+} from "@/utils/ui/theme";
+import { SETTINGS_KEYS } from "@/constants";
+import { useStorage } from "@vueuse/core";
+import { defaultSettings } from "@/config/setting";
+import { SidebarColor, ThemeMode } from "@/enums/settings/theme.enum";
+import type { LayoutMode } from "@/enums/settings/layout.enum";
+import type { Ref } from "vue";
+
+/**
+ * 系统设置状态管理
+ * 管理应用的菜单、主题、界面显示等各项设置
+ */
+export const useSettingsStore = defineStore(
+  "settingStore",
+  () => {
+    // ==============================================
+    // 从 setting.ts 整合的功能
+    // ==============================================
+
+    // 菜单相关设置
+    const menuType = ref(SETTING_DEFAULT_CONFIG.menuType);
+    const menuOpenWidth = ref(SETTING_DEFAULT_CONFIG.menuOpenWidth);
+    const menuOpen = ref(SETTING_DEFAULT_CONFIG.menuOpen);
+    const dualMenuShowText = ref(SETTING_DEFAULT_CONFIG.dualMenuShowText);
+
+    // 主题相关设置
+    const systemThemeType = ref(SETTING_DEFAULT_CONFIG.systemThemeType);
+    const systemThemeMode = ref(SETTING_DEFAULT_CONFIG.systemThemeMode);
+    const menuThemeType = ref(SETTING_DEFAULT_CONFIG.menuThemeType);
+    const systemThemeColor = ref(SETTING_DEFAULT_CONFIG.systemThemeColor);
+
+    // 界面显示设置
+    const showMenuButton = ref(SETTING_DEFAULT_CONFIG.showMenuButton);
+    const showFastEnter = ref(SETTING_DEFAULT_CONFIG.showFastEnter);
+    const showRefreshButton = ref(SETTING_DEFAULT_CONFIG.showRefreshButton);
+    const showCrumbs = ref(SETTING_DEFAULT_CONFIG.showCrumbs);
+    const showWorkTab = ref(SETTING_DEFAULT_CONFIG.showWorkTab);
+    const showLanguage = ref(SETTING_DEFAULT_CONFIG.showLanguage);
+    const showNprogress = ref(SETTING_DEFAULT_CONFIG.showNprogress);
+    const showSettingGuide = ref(SETTING_DEFAULT_CONFIG.showSettingGuide);
+    const showFestivalText = ref(SETTING_DEFAULT_CONFIG.showFestivalText);
+    const watermarkVisible = ref(SETTING_DEFAULT_CONFIG.watermarkVisible);
+
+    // 功能设置
+    const autoClose = ref(SETTING_DEFAULT_CONFIG.autoClose);
+    const uniqueOpened = ref(SETTING_DEFAULT_CONFIG.uniqueOpened);
+    const colorWeak = ref(SETTING_DEFAULT_CONFIG.colorWeak);
+    const refresh = ref(SETTING_DEFAULT_CONFIG.refresh);
+    const holidayFireworksLoaded = ref(SETTING_DEFAULT_CONFIG.holidayFireworksLoaded);
+
+    // 样式设置
+    const boxBorderMode = ref(SETTING_DEFAULT_CONFIG.boxBorderMode);
+    const pageTransition = ref(SETTING_DEFAULT_CONFIG.pageTransition);
+    const tabStyle = ref(SETTING_DEFAULT_CONFIG.tabStyle);
+    const customRadius = ref(SETTING_DEFAULT_CONFIG.customRadius);
+    const containerWidth = ref(SETTING_DEFAULT_CONFIG.containerWidth);
+
+    // 节日相关
+    const festivalDate = ref("");
+
+    // ==============================================
+    // 从 settings.store.ts 整合的功能（持久化）
+    // ==============================================
+
+    // 基础设置 - 非持久化
+    const settingsVisible = ref<boolean>(false);
+
+    // 界面显示设置 - 持久化
+    const showTagsView = useStorage<boolean>(
+      SETTINGS_KEYS.SHOW_TAGS_VIEW,
+      defaultSettings.showTagsView
+    );
+    const showAppLogo = useStorage<boolean>(
+      SETTINGS_KEYS.SHOW_APP_LOGO,
+      defaultSettings.showAppLogo
+    );
+    const showWatermark = useStorage<boolean>(
+      SETTINGS_KEYS.SHOW_WATERMARK,
+      defaultSettings.showWatermark
+    );
+    const showSettings = useStorage<boolean>(
+      SETTINGS_KEYS.SHOW_SETTINGS,
+      defaultSettings.showSettings
+    );
+    const showGuide = useStorage<boolean>(SETTINGS_KEYS.SHOW_GUIDE, defaultSettings.showGuide);
+
+    // 桌面端工具设置 - 持久化
+    const showMenuSearch = useStorage<boolean>(
+      SETTINGS_KEYS.SHOW_MENU_SEARCH,
+      defaultSettings.showMenuSearch
+    );
+    const showFullscreen = useStorage<boolean>(
+      SETTINGS_KEYS.SHOW_FULLSCREEN,
+      defaultSettings.showFullscreen
+    );
+    const showSizeSelect = useStorage<boolean>(
+      SETTINGS_KEYS.SHOW_SIZE_SELECT,
+      defaultSettings.showSizeSelect
+    );
+    const showLangSelect = useStorage<boolean>(
+      SETTINGS_KEYS.SHOW_LANG_SELECT,
+      defaultSettings.showLangSelect
+    );
+    const showNotification = useStorage<boolean>(
+      SETTINGS_KEYS.SHOW_NOTIFICATION,
+      defaultSettings.showNotification
+    );
+
+    // 布局和主题设置 - 持久化
+    const sidebarColorScheme = useStorage<string>(
+      SETTINGS_KEYS.SIDEBAR_COLOR_SCHEME,
+      defaultSettings.sidebarColorScheme
+    );
+    const layout = useStorage<LayoutMode>(
+      SETTINGS_KEYS.LAYOUT,
+      defaultSettings.layout as LayoutMode
+    );
+    const themeColor = useStorage<string>(SETTINGS_KEYS.THEME_COLOR, defaultSettings.themeColor);
+    const theme = useStorage<ThemeMode>(SETTINGS_KEYS.THEME, defaultSettings.theme);
+
+    // 系统设置 - 持久化
+    const grayMode = useStorage<boolean>(SETTINGS_KEYS.GRAY_MODE, defaultSettings.grayMode);
+    const userEnableAi = useStorage<boolean>(SETTINGS_KEYS.AI_ENABLED, defaultSettings.aiEnabled);
+    const pageSwitchingAnimation = useStorage<string>(
+      SETTINGS_KEYS.PAGE_SWITCHING_ANIMATION,
+      defaultSettings.pageSwitchingAnimation
+    );
+
+    // ==============================================
+    // 从 config/setting.ts 整合的功能
+    // ==============================================
+    // 已通过持久化设置覆盖
+
+    // ==============================================
+    // 计算属性（来自 setting.ts）
+    // ==============================================
+
+    const getMenuTheme = computed((): MenuThemeType => {
+      const list = AppConfig.themeList.filter((item) => item.theme === menuThemeType.value);
+      if (isDark.value) {
+        return AppConfig.darkMenuStyles[0];
+      } else {
+        return list[0];
+      }
+    });
+
+    const isDark = computed((): boolean => {
+      return systemThemeType.value === SystemThemeEnum.DARK;
+    });
+
+    const getMenuOpenWidth = computed((): string => {
+      return menuOpenWidth.value + "px" || SETTING_DEFAULT_CONFIG.menuOpenWidth + "px";
+    });
+
+    const getCustomRadius = computed((): string => {
+      return customRadius.value + "rem" || SETTING_DEFAULT_CONFIG.customRadius + "rem";
+    });
+
+    const isShowFireworks = computed((): boolean => {
+      return festivalDate.value === useCeremony().currentFestivalData.value?.date ? false : true;
+    });
+
+    // ==============================================
+    // 设置项映射（来自 settings.store.ts）
+    // ==============================================
+
+    const settingsMap = {
+      showTagsView,
+      showAppLogo,
+      showWatermark,
+      showSettings,
+      showGuide,
+      showMenuSearch,
+      showFullscreen,
+      showSizeSelect,
+      showLangSelect,
+      showNotification,
+      sidebarColorScheme,
+      layout,
+      grayMode,
+      userEnableAi,
+    } as const;
+
+    // ==============================================
+    // 监听器（来自 settings.store.ts）
+    // ==============================================
+
+    watch(
+      [theme, themeColor],
+      ([newTheme, newThemeColor]) => {
+        toggleDarkMode(newTheme === ThemeMode.DARK);
+        const colors = generateThemeColors(newThemeColor, newTheme);
+        applyTheme(colors);
+      },
+      { immediate: true }
+    );
+
+    watch(
+      [sidebarColorScheme],
+      ([newSidebarColorScheme]) => {
+        toggleSidebarColor(newSidebarColorScheme === SidebarColor.CLASSIC_BLUE);
+      },
+      { immediate: true }
+    );
+
+    watch(
+      grayMode,
+      (v) => {
+        document.documentElement.style.filter = v ? "grayscale(100%)" : "";
+      },
+      { immediate: true }
+    );
+
+    // ==============================================
+    // 方法（来自 setting.ts）
+    // ==============================================
+
+    const switchMenuLayouts = (type: MenuTypeEnum) => {
+      menuType.value = type;
+    };
+
+    const setMenuOpenWidth = (width: number) => {
+      menuOpenWidth.value = width;
+    };
+
+    const setGlopTheme = (theme: SystemThemeEnum, themeMode: SystemThemeEnum) => {
+      systemThemeType.value = theme;
+      systemThemeMode.value = themeMode;
+      localStorage.setItem(StorageConfig.THEME_KEY, theme);
+    };
+
+    const switchMenuStyles = (theme: MenuThemeEnum) => {
+      menuThemeType.value = theme;
+    };
+
+    const setElementTheme = (theme: string) => {
+      systemThemeColor.value = theme;
+      setElementThemeColor(theme);
+    };
+
+    const setBorderMode = () => {
+      boxBorderMode.value = !boxBorderMode.value;
+    };
+
+    const setContainerWidth = (width: ContainerWidthEnum) => {
+      containerWidth.value = width;
+    };
+
+    const setUniqueOpened = () => {
+      uniqueOpened.value = !uniqueOpened.value;
+    };
+
+    const setButton = () => {
+      showMenuButton.value = !showMenuButton.value;
+    };
+
+    const setFastEnter = () => {
+      showFastEnter.value = !showFastEnter.value;
+    };
+
+    const setAutoClose = () => {
+      autoClose.value = !autoClose.value;
+    };
+
+    const setShowRefreshButton = () => {
+      showRefreshButton.value = !showRefreshButton.value;
+    };
+
+    const setCrumbs = () => {
+      showCrumbs.value = !showCrumbs.value;
+    };
+
+    const setWorkTab = (show: boolean) => {
+      showWorkTab.value = show;
+    };
+
+    const setLanguage = () => {
+      showLanguage.value = !showLanguage.value;
+    };
+
+    const setNprogress = () => {
+      showNprogress.value = !showNprogress.value;
+    };
+
+    const setColorWeak = () => {
+      colorWeak.value = !colorWeak.value;
+    };
+
+    const hideSettingGuide = () => {
+      showSettingGuide.value = false;
+    };
+
+    const openSettingGuide = () => {
+      showSettingGuide.value = true;
+    };
+
+    const setPageTransition = (transition: string) => {
+      pageTransition.value = transition;
+    };
+
+    const setTabStyle = (style: string) => {
+      tabStyle.value = style;
+    };
+
+    const setMenuOpen = (open: boolean) => {
+      menuOpen.value = open;
+    };
+
+    const reload = () => {
+      refresh.value = !refresh.value;
+    };
+
+    const setWatermarkVisible = (visible: boolean) => {
+      watermarkVisible.value = visible;
+    };
+
+    const setCustomRadius = (radius: string) => {
+      customRadius.value = radius;
+      document.documentElement.style.setProperty("--custom-radius", `${radius}rem`);
+    };
+
+    const setholidayFireworksLoaded = (isLoad: boolean) => {
+      holidayFireworksLoaded.value = isLoad;
+    };
+
+    const setShowFestivalText = (show: boolean) => {
+      showFestivalText.value = show;
+    };
+
+    const setFestivalDate = (date: string) => {
+      festivalDate.value = date;
+    };
+
+    const setDualMenuShowText = (show: boolean) => {
+      dualMenuShowText.value = show;
+    };
+
+    // ==============================================
+    // 方法（来自 settings.store.ts）
+    // ==============================================
+
+    function updateSetting<K extends keyof typeof settingsMap>(
+      key: K,
+      value: boolean | string
+    ): void {
+      const setting = settingsMap[key];
+      if (setting) {
+        (setting as Ref<any>).value = value;
+      }
+    }
+
+    function updateTheme(newTheme: ThemeMode): void {
+      theme.value = newTheme;
+    }
+
+    function updateThemeColor(newColor: string): void {
+      themeColor.value = newColor;
+    }
+
+    function updateSidebarColorScheme(newScheme: string): void {
+      sidebarColorScheme.value = newScheme;
+    }
+
+    function updateLayout(newLayout: LayoutMode): void {
+      layout.value = newLayout;
+    }
+
+    function toggleSettingsPanel(): void {
+      settingsVisible.value = !settingsVisible.value;
+    }
+
+    function showSettingsPanel(): void {
+      settingsVisible.value = true;
+    }
+
+    function hideSettingsPanel(): void {
+      settingsVisible.value = false;
+    }
+
+    function updateUserEnableAi(newValue: boolean): void {
+      userEnableAi.value = newValue;
+    }
+
+    function updateGrayMode(newValue: boolean): void {
+      grayMode.value = newValue;
+    }
+
+    function updatePageSwitchingAnimation(newValue: string): void {
+      pageSwitchingAnimation.value = newValue;
+    }
+
+    function resetSettings(): void {
+      // 界面显示设置
+      showTagsView.value = defaultSettings.showTagsView;
+      showAppLogo.value = defaultSettings.showAppLogo;
+      showWatermark.value = defaultSettings.showWatermark;
+      showSettings.value = defaultSettings.showSettings;
+      showGuide.value = defaultSettings.showGuide;
+
+      // 桌面端工具设置
+      showMenuSearch.value = defaultSettings.showMenuSearch;
+      showFullscreen.value = defaultSettings.showFullscreen;
+      showSizeSelect.value = defaultSettings.showSizeSelect;
+      showLangSelect.value = defaultSettings.showLangSelect;
+      showNotification.value = defaultSettings.showNotification;
+
+      // 布局和主题设置
+      sidebarColorScheme.value = defaultSettings.sidebarColorScheme;
+      layout.value = defaultSettings.layout as LayoutMode;
+      themeColor.value = defaultSettings.themeColor;
+      theme.value = defaultSettings.theme;
+
+      // 系统设置
+      grayMode.value = defaultSettings.grayMode;
+      userEnableAi.value = defaultSettings.aiEnabled;
+      pageSwitchingAnimation.value = defaultSettings.pageSwitchingAnimation;
+    }
+
+    // ==============================================
+    // 返回所有状态和方法
+    // ==============================================
+
+    return {
+      // 从 setting.ts 来的状态
+      menuType,
+      menuOpenWidth,
+      menuOpen,
+      dualMenuShowText,
+      systemThemeType,
+      systemThemeMode,
+      menuThemeType,
+      systemThemeColor,
+      showMenuButton,
+      showFastEnter,
+      showRefreshButton,
+      showCrumbs,
+      showWorkTab,
+      showLanguage,
+      showNprogress,
+      showSettingGuide,
+      showFestivalText,
+      watermarkVisible,
+      autoClose,
+      uniqueOpened,
+      colorWeak,
+      refresh,
+      holidayFireworksLoaded,
+      boxBorderMode,
+      pageTransition,
+      tabStyle,
+      customRadius,
+      containerWidth,
+      festivalDate,
+
+      // 从 settings.store.ts 来的状态
+      settingsVisible,
+      showTagsView,
+      showAppLogo,
+      showWatermark,
+      showSettings,
+      showGuide,
+      showMenuSearch,
+      showFullscreen,
+      showSizeSelect,
+      showLangSelect,
+      showNotification,
+      sidebarColorScheme,
+      layout,
+      themeColor,
+      theme,
+      grayMode,
+      userEnableAi,
+      pageSwitchingAnimation,
+
+      // 计算属性
+      getMenuTheme,
+      isDark,
+      getMenuOpenWidth,
+      getCustomRadius,
+      isShowFireworks,
+
+      // 从 setting.ts 来的方法
+      switchMenuLayouts,
+      setMenuOpenWidth,
+      setGlopTheme,
+      switchMenuStyles,
+      setElementTheme,
+      setBorderMode,
+      setContainerWidth,
+      setUniqueOpened,
+      setButton,
+      setFastEnter,
+      setAutoClose,
+      setShowRefreshButton,
+      setCrumbs,
+      setWorkTab,
+      setLanguage,
+      setNprogress,
+      setColorWeak,
+      hideSettingGuide,
+      openSettingGuide,
+      setPageTransition,
+      setTabStyle,
+      setMenuOpen,
+      reload,
+      setWatermarkVisible,
+      setCustomRadius,
+      setholidayFireworksLoaded,
+      setShowFestivalText,
+      setFestivalDate,
+      setDualMenuShowText,
+
+      // 从 settings.store.ts 来的方法
+      updateSetting,
+      updateTheme,
+      updateThemeColor,
+      updateSidebarColorScheme,
+      updateLayout,
+      toggleSettingsPanel,
+      showSettingsPanel,
+      hideSettingsPanel,
+      updateUserEnableAi,
+      updateGrayMode,
+      updatePageSwitchingAnimation,
+      resetSettings,
+    };
+  },
+  {
+    persist: {
+      key: "setting",
+      storage: localStorage,
+    },
+  }
+);
diff --git a/frontend/new-web/src/store/modules/setting.ts b/frontend/new-web/src/store/modules/setting.ts
deleted file mode 100755
index 28782597..00000000
--- a/frontend/new-web/src/store/modules/setting.ts
+++ /dev/null
@@ -1,450 +0,0 @@
-/**
- * 系统设置状态管理模块
- *
- * 提供完整的系统设置状态管理
- *
- * ## 主要功能
- *
- * - 菜单布局配置（左侧、顶部、混合、双栏）
- * - 主题管理（亮色、暗色、自动）
- * - 菜单主题样式配置
- * - 界面显示开关（面包屑、标签页、语言切换等）
- * - 功能开关（手风琴模式、色弱模式、水印等）
- * - 样式配置（边框、圆角、容器宽度、页面过渡）
- * - 节日功能配置
- * - Element Plus 主题色动态设置
- *
- * ## 使用场景
- *
- * - 设置面板配置管理
- * - 主题切换和样式定制
- * - 界面功能开关控制
- * - 用户偏好设置持久化
- *
- * ## 持久化
- *
- * - 使用 localStorage 存储
- * - 存储键：sys-v{version}-setting
- * - 支持跨版本数据迁移
- *
- * @module store/modules/setting
- * @author Art Design Pro Team
- */
-import { defineStore } from 'pinia'
-import { ref, computed } from 'vue'
-import { MenuThemeType } from '@/types/store'
-import AppConfig from '@/config'
-import { SystemThemeEnum, MenuThemeEnum, MenuTypeEnum, ContainerWidthEnum } from '@/enums/appEnum'
-import { setElementThemeColor } from '@/utils/ui'
-import { useCeremony } from '@/hooks/core/useCeremony'
-import { StorageConfig } from '@/utils'
-import { SETTING_DEFAULT_CONFIG } from '@/config/setting'
-
-/**
- * 系统设置状态管理
- * 管理应用的菜单、主题、界面显示等各项设置
- */
-export const useSettingStore = defineStore(
-  'settingStore',
-  () => {
-    // 菜单相关设置
-    /** 菜单类型 */
-    const menuType = ref(SETTING_DEFAULT_CONFIG.menuType)
-    /** 菜单展开宽度 */
-    const menuOpenWidth = ref(SETTING_DEFAULT_CONFIG.menuOpenWidth)
-    /** 菜单是否展开 */
-    const menuOpen = ref(SETTING_DEFAULT_CONFIG.menuOpen)
-    /** 双菜单是否显示文本 */
-    const dualMenuShowText = ref(SETTING_DEFAULT_CONFIG.dualMenuShowText)
-
-    // 主题相关设置
-    /** 系统主题类型 */
-    const systemThemeType = ref(SETTING_DEFAULT_CONFIG.systemThemeType)
-    /** 系统主题模式 */
-    const systemThemeMode = ref(SETTING_DEFAULT_CONFIG.systemThemeMode)
-    /** 菜单主题类型 */
-    const menuThemeType = ref(SETTING_DEFAULT_CONFIG.menuThemeType)
-    /** 系统主题颜色 */
-    const systemThemeColor = ref(SETTING_DEFAULT_CONFIG.systemThemeColor)
-
-    // 界面显示设置
-    /** 是否显示菜单按钮 */
-    const showMenuButton = ref(SETTING_DEFAULT_CONFIG.showMenuButton)
-    /** 是否显示快速入口 */
-    const showFastEnter = ref(SETTING_DEFAULT_CONFIG.showFastEnter)
-    /** 是否显示刷新按钮 */
-    const showRefreshButton = ref(SETTING_DEFAULT_CONFIG.showRefreshButton)
-    /** 是否显示面包屑 */
-    const showCrumbs = ref(SETTING_DEFAULT_CONFIG.showCrumbs)
-    /** 是否显示工作台标签 */
-    const showWorkTab = ref(SETTING_DEFAULT_CONFIG.showWorkTab)
-    /** 是否显示语言切换 */
-    const showLanguage = ref(SETTING_DEFAULT_CONFIG.showLanguage)
-    /** 是否显示进度条 */
-    const showNprogress = ref(SETTING_DEFAULT_CONFIG.showNprogress)
-    /** 是否显示设置引导 */
-    const showSettingGuide = ref(SETTING_DEFAULT_CONFIG.showSettingGuide)
-    /** 是否显示节日文本 */
-    const showFestivalText = ref(SETTING_DEFAULT_CONFIG.showFestivalText)
-    /** 是否显示水印 */
-    const watermarkVisible = ref(SETTING_DEFAULT_CONFIG.watermarkVisible)
-
-    // 功能设置
-    /** 是否自动关闭 */
-    const autoClose = ref(SETTING_DEFAULT_CONFIG.autoClose)
-    /** 是否唯一展开 */
-    const uniqueOpened = ref(SETTING_DEFAULT_CONFIG.uniqueOpened)
-    /** 是否色弱模式 */
-    const colorWeak = ref(SETTING_DEFAULT_CONFIG.colorWeak)
-    /** 是否刷新 */
-    const refresh = ref(SETTING_DEFAULT_CONFIG.refresh)
-    /** 是否加载节日烟花 */
-    const holidayFireworksLoaded = ref(SETTING_DEFAULT_CONFIG.holidayFireworksLoaded)
-
-    // 样式设置
-    /** 边框模式 */
-    const boxBorderMode = ref(SETTING_DEFAULT_CONFIG.boxBorderMode)
-    /** 页面过渡效果 */
-    const pageTransition = ref(SETTING_DEFAULT_CONFIG.pageTransition)
-    /** 标签页样式 */
-    const tabStyle = ref(SETTING_DEFAULT_CONFIG.tabStyle)
-    /** 自定义圆角 */
-    const customRadius = ref(SETTING_DEFAULT_CONFIG.customRadius)
-    /** 容器宽度 */
-    const containerWidth = ref(SETTING_DEFAULT_CONFIG.containerWidth)
-
-    // 节日相关
-    /** 节日日期 */
-    const festivalDate = ref('')
-
-    /**
-     * 获取菜单主题
-     * 根据当前主题类型和暗色模式返回对应的主题配置
-     */
-    const getMenuTheme = computed((): MenuThemeType => {
-      const list = AppConfig.themeList.filter((item) => item.theme === menuThemeType.value)
-      if (isDark.value) {
-        return AppConfig.darkMenuStyles[0]
-      } else {
-        return list[0]
-      }
-    })
-
-    /**
-     * 判断是否为暗色模式
-     */
-    const isDark = computed((): boolean => {
-      return systemThemeType.value === SystemThemeEnum.DARK
-    })
-
-    /**
-     * 获取菜单展开宽度
-     */
-    const getMenuOpenWidth = computed((): string => {
-      return menuOpenWidth.value + 'px' || SETTING_DEFAULT_CONFIG.menuOpenWidth + 'px'
-    })
-
-    /**
-     * 获取自定义圆角
-     */
-    const getCustomRadius = computed((): string => {
-      return customRadius.value + 'rem' || SETTING_DEFAULT_CONFIG.customRadius + 'rem'
-    })
-
-    /**
-     * 是否显示烟花
-     * 根据当前日期和节日日期判断是否显示烟花效果
-     */
-    const isShowFireworks = computed((): boolean => {
-      return festivalDate.value === useCeremony().currentFestivalData.value?.date ? false : true
-    })
-
-    /**
-     * 切换菜单布局
-     * @param type 菜单类型
-     */
-    const switchMenuLayouts = (type: MenuTypeEnum) => {
-      menuType.value = type
-    }
-
-    /**
-     * 设置菜单展开宽度
-     * @param width 宽度值
-     */
-    const setMenuOpenWidth = (width: number) => {
-      menuOpenWidth.value = width
-    }
-
-    /**
-     * 设置全局主题
-     * @param theme 主题类型
-     * @param themeMode 主题模式
-     */
-    const setGlopTheme = (theme: SystemThemeEnum, themeMode: SystemThemeEnum) => {
-      systemThemeType.value = theme
-      systemThemeMode.value = themeMode
-      localStorage.setItem(StorageConfig.THEME_KEY, theme)
-    }
-
-    /**
-     * 切换菜单样式
-     * @param theme 菜单主题
-     */
-    const switchMenuStyles = (theme: MenuThemeEnum) => {
-      menuThemeType.value = theme
-    }
-
-    /**
-     * 设置Element Plus主题颜色
-     * @param theme 主题颜色
-     */
-    const setElementTheme = (theme: string) => {
-      systemThemeColor.value = theme
-      setElementThemeColor(theme)
-    }
-
-    /**
-     * 切换边框模式
-     */
-    const setBorderMode = () => {
-      boxBorderMode.value = !boxBorderMode.value
-    }
-
-    /**
-     * 设置容器宽度
-     * @param width 容器宽度枚举值
-     */
-    const setContainerWidth = (width: ContainerWidthEnum) => {
-      containerWidth.value = width
-    }
-
-    /**
-     * 切换唯一展开模式
-     */
-    const setUniqueOpened = () => {
-      uniqueOpened.value = !uniqueOpened.value
-    }
-
-    /**
-     * 切换菜单按钮显示
-     */
-    const setButton = () => {
-      showMenuButton.value = !showMenuButton.value
-    }
-
-    /**
-     * 切换快速入口显示
-     */
-    const setFastEnter = () => {
-      showFastEnter.value = !showFastEnter.value
-    }
-
-    /**
-     * 切换自动关闭
-     */
-    const setAutoClose = () => {
-      autoClose.value = !autoClose.value
-    }
-
-    /**
-     * 切换刷新按钮显示
-     */
-    const setShowRefreshButton = () => {
-      showRefreshButton.value = !showRefreshButton.value
-    }
-
-    /**
-     * 切换面包屑显示
-     */
-    const setCrumbs = () => {
-      showCrumbs.value = !showCrumbs.value
-    }
-
-    /**
-     * 设置工作台标签显示
-     * @param show 是否显示
-     */
-    const setWorkTab = (show: boolean) => {
-      showWorkTab.value = show
-    }
-
-    /**
-     * 切换语言切换显示
-     */
-    const setLanguage = () => {
-      showLanguage.value = !showLanguage.value
-    }
-
-    /**
-     * 切换进度条显示
-     */
-    const setNprogress = () => {
-      showNprogress.value = !showNprogress.value
-    }
-
-    /**
-     * 切换色弱模式
-     */
-    const setColorWeak = () => {
-      colorWeak.value = !colorWeak.value
-    }
-
-    /**
-     * 隐藏设置引导
-     */
-    const hideSettingGuide = () => {
-      showSettingGuide.value = false
-    }
-
-    /**
-     * 显示设置引导
-     */
-    const openSettingGuide = () => {
-      showSettingGuide.value = true
-    }
-
-    /**
-     * 设置页面过渡效果
-     * @param transition 过渡效果名称
-     */
-    const setPageTransition = (transition: string) => {
-      pageTransition.value = transition
-    }
-
-    /**
-     * 设置标签页样式
-     * @param style 样式名称
-     */
-    const setTabStyle = (style: string) => {
-      tabStyle.value = style
-    }
-
-    /**
-     * 设置菜单展开状态
-     * @param open 是否展开
-     */
-    const setMenuOpen = (open: boolean) => {
-      menuOpen.value = open
-    }
-
-    /**
-     * 刷新页面
-     */
-    const reload = () => {
-      refresh.value = !refresh.value
-    }
-
-    /**
-     * 设置水印显示
-     * @param visible 是否显示
-     */
-    const setWatermarkVisible = (visible: boolean) => {
-      watermarkVisible.value = visible
-    }
-
-    /**
-     * 设置自定义圆角
-     * @param radius 圆角值
-     */
-    const setCustomRadius = (radius: string) => {
-      customRadius.value = radius
-      document.documentElement.style.setProperty('--custom-radius', `${radius}rem`)
-    }
-
-    /**
-     * 设置节日烟花加载状态
-     * @param isLoad 是否已加载
-     */
-    const setholidayFireworksLoaded = (isLoad: boolean) => {
-      holidayFireworksLoaded.value = isLoad
-    }
-
-    /**
-     * 设置节日文本显示
-     * @param show 是否显示
-     */
-    const setShowFestivalText = (show: boolean) => {
-      showFestivalText.value = show
-    }
-
-    const setFestivalDate = (date: string) => {
-      festivalDate.value = date
-    }
-
-    const setDualMenuShowText = (show: boolean) => {
-      dualMenuShowText.value = show
-    }
-
-    return {
-      menuType,
-      menuOpenWidth,
-      systemThemeType,
-      systemThemeMode,
-      menuThemeType,
-      systemThemeColor,
-      boxBorderMode,
-      uniqueOpened,
-      showMenuButton,
-      showFastEnter,
-      showRefreshButton,
-      showCrumbs,
-      autoClose,
-      showWorkTab,
-      showLanguage,
-      showNprogress,
-      colorWeak,
-      showSettingGuide,
-      pageTransition,
-      tabStyle,
-      menuOpen,
-      refresh,
-      watermarkVisible,
-      customRadius,
-      holidayFireworksLoaded,
-      showFestivalText,
-      festivalDate,
-      dualMenuShowText,
-      containerWidth,
-      getMenuTheme,
-      isDark,
-      getMenuOpenWidth,
-      getCustomRadius,
-      isShowFireworks,
-      switchMenuLayouts,
-      setMenuOpenWidth,
-      setGlopTheme,
-      switchMenuStyles,
-      setElementTheme,
-      setBorderMode,
-      setContainerWidth,
-      setUniqueOpened,
-      setButton,
-      setFastEnter,
-      setAutoClose,
-      setShowRefreshButton,
-      setCrumbs,
-      setWorkTab,
-      setLanguage,
-      setNprogress,
-      setColorWeak,
-      hideSettingGuide,
-      openSettingGuide,
-      setPageTransition,
-      setTabStyle,
-      setMenuOpen,
-      reload,
-      setWatermarkVisible,
-      setCustomRadius,
-      setholidayFireworksLoaded,
-      setShowFestivalText,
-      setFestivalDate,
-      setDualMenuShowText
-    }
-  },
-  {
-    persist: {
-      key: 'setting',
-      storage: localStorage
-    }
-  }
-)
diff --git a/frontend/new-web/src/store/modules/table.ts b/frontend/new-web/src/store/modules/table.store.ts
similarity index 75%
rename from frontend/new-web/src/store/modules/table.ts
rename to frontend/new-web/src/store/modules/table.store.ts
index 094c3100..decc09b9 100644
--- a/frontend/new-web/src/store/modules/table.ts
+++ b/frontend/new-web/src/store/modules/table.store.ts
@@ -22,58 +22,58 @@
  * - 存储键：sys-v{version}-table
  * - 用户配置跨页面保持
  *
- * @module store/modules/table
- * @author Art Design Pro Team
+ * @module store/modules/table.store
+ * @author FastapiAdmin Team
  */
-import { defineStore } from 'pinia'
-import { ref } from 'vue'
-import { TableSizeEnum } from '@/enums/formEnum'
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { TableSizeEnum } from "@/enums/formEnum";
 
 // 表格
 export const useTableStore = defineStore(
-  'tableStore',
+  "tableStore",
   () => {
     // 表格大小
-    const tableSize = ref(TableSizeEnum.DEFAULT)
+    const tableSize = ref(TableSizeEnum.DEFAULT);
     // 斑马纹
-    const isZebra = ref(false)
+    const isZebra = ref(false);
     // 边框
-    const isBorder = ref(false)
+    const isBorder = ref(false);
     // 表头背景
-    const isHeaderBackground = ref(false)
+    const isHeaderBackground = ref(false);
 
     // 是否全屏
-    const isFullScreen = ref(false)
+    const isFullScreen = ref(false);
 
     /**
      * 设置表格大小
      * @param size 表格大小枚举值
      */
-    const setTableSize = (size: TableSizeEnum) => (tableSize.value = size)
+    const setTableSize = (size: TableSizeEnum) => (tableSize.value = size);
 
     /**
      * 设置斑马纹显示状态
      * @param value 是否显示斑马纹
      */
-    const setIsZebra = (value: boolean) => (isZebra.value = value)
+    const setIsZebra = (value: boolean) => (isZebra.value = value);
 
     /**
      * 设置表格边框显示状态
      * @param value 是否显示边框
      */
-    const setIsBorder = (value: boolean) => (isBorder.value = value)
+    const setIsBorder = (value: boolean) => (isBorder.value = value);
 
     /**
      * 设置表头背景显示状态
      * @param value 是否显示表头背景
      */
-    const setIsHeaderBackground = (value: boolean) => (isHeaderBackground.value = value)
+    const setIsHeaderBackground = (value: boolean) => (isHeaderBackground.value = value);
 
     /**
      * 设置是否全屏
      * @param value 是否全屏
      */
-    const setIsFullScreen = (value: boolean) => (isFullScreen.value = value)
+    const setIsFullScreen = (value: boolean) => (isFullScreen.value = value);
 
     return {
       tableSize,
@@ -85,13 +85,13 @@ export const useTableStore = defineStore(
       setIsBorder,
       setIsHeaderBackground,
       isFullScreen,
-      setIsFullScreen
-    }
+      setIsFullScreen,
+    };
   },
   {
     persist: {
-      key: 'table',
-      storage: localStorage
-    }
+      key: "table",
+      storage: localStorage,
+    },
   }
-)
+);
diff --git a/frontend/new-web/src/store/modules/tags-view.store.ts b/frontend/new-web/src/store/modules/tags-view.store.ts
new file mode 100644
index 00000000..0fd6c639
--- /dev/null
+++ b/frontend/new-web/src/store/modules/tags-view.store.ts
@@ -0,0 +1,303 @@
+/**
+ * 标签页状态管理模块
+ *
+ * 提供标签页的状态管理和缓存机制
+ *
+ * ## 主要功能
+ *
+ * - 已访问视图列表管理
+ * - 缓存视图列表管理
+ * - 添加、删除、更新标签页
+ * - 关闭当前标签页并跳转
+ * - 关闭其他标签页/关闭左侧/关闭右侧
+ * - 固定标签页支持
+ *
+ * ## 使用场景
+ *
+ * - 多标签页导航
+ * - 页面缓存管理
+ * - 标签页右键菜单操作
+ * - 路由切换时的标签状态同步
+ *
+ * ## 核心特性
+ *
+ * - 支持固定标签（affix）
+ * - 支持keepAlive缓存
+ * - 关闭标签时自动跳转上一个标签
+ * - 区分已访问视图和缓存视图
+ *
+ * @module store/modules/tags-view.store
+ * @author FastapiAdmin Team
+ */
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { store } from "@/store";
+
+export const useTagsViewStore = defineStore(
+  "tagsViewStore",
+  () => {
+    const visitedViews = ref<TagView[]>([]);
+    const cachedViews = ref<string[]>([]);
+    const router = useRouter();
+    const route = useRoute();
+
+    /**
+     * 添加已访问视图到已访问视图列表中
+     */
+    function addVisitedView(view: TagView) {
+      // 如果已经存在于已访问的视图列表中或者是重定向地址，则不再添加
+      if (view.path.startsWith("/redirect")) {
+        return;
+      }
+      if (visitedViews.value.some((v) => v.name === view.name)) {
+        return;
+      }
+      // 如果视图是固定的（affix），则在已访问的视图列表的开头添加
+      if (view.affix) {
+        visitedViews.value.unshift(view);
+      } else {
+        // 如果视图不是固定的，则在已访问的视图列表的末尾添加
+        visitedViews.value.push(view);
+      }
+    }
+
+    /**
+     * 添加缓存视图到缓存视图列表中
+     */
+    function addCachedView(view: TagView) {
+      const viewName = view.name;
+      // 如果缓存视图名称已经存在于缓存视图列表中，则不再添加
+      if (cachedViews.value.includes(viewName)) {
+        return;
+      }
+
+      // 如果视图需要缓存（keepAlive），则将其路由名称添加到缓存视图列表中
+      if (view.keepAlive) {
+        cachedViews.value.push(viewName);
+      }
+    }
+
+    /**
+     * 从已访问视图列表中删除指定的视图
+     */
+    function delVisitedView(view: TagView) {
+      return new Promise((resolve) => {
+        for (const [i, v] of visitedViews.value.entries()) {
+          // 找到与指定视图路径匹配的视图，在已访问视图列表中删除该视图
+          if (v.path === view.path) {
+            visitedViews.value.splice(i, 1);
+            break;
+          }
+        }
+        resolve([...visitedViews.value]);
+      });
+    }
+
+    function delCachedView(view: TagView) {
+      const viewName = view.name;
+      return new Promise((resolve) => {
+        const index = cachedViews.value.indexOf(viewName);
+        if (index > -1) {
+          cachedViews.value.splice(index, 1);
+        }
+        resolve([...cachedViews.value]);
+      });
+    }
+    function delOtherVisitedViews(view: TagView) {
+      return new Promise((resolve) => {
+        visitedViews.value = visitedViews.value.filter((v) => {
+          return v?.affix || v.path === view.path;
+        });
+        resolve([...visitedViews.value]);
+      });
+    }
+
+    function delOtherCachedViews(view: TagView) {
+      const viewName = view.name as string;
+      return new Promise((resolve) => {
+        const index = cachedViews.value.indexOf(viewName);
+        if (index > -1) {
+          cachedViews.value = cachedViews.value.slice(index, index + 1);
+        } else {
+          // if index = -1, there is no cached tags
+          cachedViews.value = [];
+        }
+        resolve([...cachedViews.value]);
+      });
+    }
+
+    function updateVisitedView(view: TagView) {
+      for (let v of visitedViews.value) {
+        if (v.path === view.path) {
+          v = Object.assign(v, view);
+          break;
+        }
+      }
+    }
+
+    function addView(view: TagView) {
+      addVisitedView(view);
+      addCachedView(view);
+    }
+
+    function delView(view: TagView) {
+      return new Promise((resolve) => {
+        delVisitedView(view);
+        delCachedView(view);
+        resolve({
+          visitedViews: [...visitedViews.value],
+          cachedViews: [...cachedViews.value],
+        });
+      });
+    }
+
+    function delOtherViews(view: TagView) {
+      return new Promise((resolve) => {
+        delOtherVisitedViews(view);
+        delOtherCachedViews(view);
+        resolve({
+          visitedViews: [...visitedViews.value],
+          cachedViews: [...cachedViews.value],
+        });
+      });
+    }
+
+    function delLeftViews(view: TagView) {
+      return new Promise((resolve) => {
+        const currIndex = visitedViews.value.findIndex((v) => v.path === view.path);
+        if (currIndex === -1) {
+          return;
+        }
+        visitedViews.value = visitedViews.value.filter((item, index) => {
+          if (index >= currIndex || item?.affix) {
+            return true;
+          }
+
+          const cacheIndex = cachedViews.value.indexOf(item.name);
+          if (cacheIndex > -1) {
+            cachedViews.value.splice(cacheIndex, 1);
+          }
+          return false;
+        });
+        resolve({
+          visitedViews: [...visitedViews.value],
+        });
+      });
+    }
+
+    function delRightViews(view: TagView) {
+      return new Promise((resolve) => {
+        const currIndex = visitedViews.value.findIndex((v) => v.path === view.path);
+        if (currIndex === -1) {
+          return;
+        }
+        visitedViews.value = visitedViews.value.filter((item, index) => {
+          if (index <= currIndex || item?.affix) {
+            return true;
+          }
+        });
+        resolve({
+          visitedViews: [...visitedViews.value],
+        });
+      });
+    }
+
+    function delAllViews() {
+      return new Promise((resolve) => {
+        const affixTags = visitedViews.value.filter((tag) => tag?.affix);
+        visitedViews.value = affixTags;
+        cachedViews.value = [];
+        resolve({
+          visitedViews: [...visitedViews.value],
+          cachedViews: [...cachedViews.value],
+        });
+      });
+    }
+
+    function delAllVisitedViews() {
+      return new Promise((resolve) => {
+        const affixTags = visitedViews.value.filter((tag) => tag?.affix);
+        visitedViews.value = affixTags;
+        resolve([...visitedViews.value]);
+      });
+    }
+
+    function delAllCachedViews() {
+      return new Promise((resolve) => {
+        cachedViews.value = [];
+        resolve([...cachedViews.value]);
+      });
+    }
+
+    /**
+     * 关闭当前tagView
+     */
+    function closeCurrentView() {
+      const tags: TagView = {
+        name: route.name as string,
+        title: route.meta.title as string,
+        path: route.path,
+        fullPath: route.fullPath,
+        affix: route.meta?.affix,
+        keepAlive: route.meta?.keepAlive,
+        query: route.query,
+      };
+      delView(tags).then((res: any) => {
+        if (isActive(tags)) {
+          toLastView(res.visitedViews, tags);
+        }
+      });
+    }
+
+    function isActive(tag: TagView) {
+      return tag.path === route.path;
+    }
+
+    function toLastView(visitedViews: TagView[], view?: TagView) {
+      const latestView = visitedViews.slice(-1)[0];
+      if (latestView && latestView.fullPath) {
+        router.push(latestView.fullPath);
+      } else {
+        // now the default is to redirect to the home page if there is no tags-view,
+        // you can adjust it according to your needs.
+        if (view?.name === "Dashboard" || view?.name === "DashboardDemo") {
+          // to reload home page
+          router.replace("/redirect" + view.fullPath);
+        } else {
+          router.push("/");
+        }
+      }
+    }
+
+    return {
+      visitedViews,
+      cachedViews,
+      addVisitedView,
+      addCachedView,
+      delVisitedView,
+      delCachedView,
+      delOtherVisitedViews,
+      delOtherCachedViews,
+      updateVisitedView,
+      addView,
+      delView,
+      delOtherViews,
+      delLeftViews,
+      delRightViews,
+      delAllViews,
+      delAllVisitedViews,
+      delAllCachedViews,
+      closeCurrentView,
+      isActive,
+      toLastView,
+    };
+  },
+  {
+    persist: true,
+  }
+);
+
+export function useTagsViewStoreHook() {
+  return useTagsViewStore(store);
+}
diff --git a/frontend/new-web/src/store/modules/user.store.ts b/frontend/new-web/src/store/modules/user.store.ts
new file mode 100755
index 00000000..a8184432
--- /dev/null
+++ b/frontend/new-web/src/store/modules/user.store.ts
@@ -0,0 +1,450 @@
+/**
+ * 用户状态管理模块
+ *
+ * 提供用户相关的状态管理
+ *
+ * ## 主要功能
+ *
+ * - 用户登录状态管理
+ * - 用户信息存储
+ * - 访问令牌和刷新令牌管理
+ * - 语言设置
+ * - 搜索历史记录
+ * - 锁屏状态和密码管理
+ * - 登出清理逻辑
+ * - Token刷新
+ * - 记住我功能
+ *
+ * ## 使用场景
+ *
+ * - 用户登录和认证
+ * - 权限验证
+ * - 个人信息展示
+ * - 多语言切换
+ * - 锁屏功能
+ * - 搜索历史管理
+ * - 路由权限控制
+ *
+ * ## 持久化
+ *
+ * - 使用 localStorage 存储
+ * - 存储键：sys-v{version}-user
+ * - 登出时自动清理
+ *
+ * @module store/modules/user.store
+ * @author FastapiAdmin Team
+ */
+import { defineStore } from "pinia";
+import { ref, computed } from "vue";
+import { LanguageEnum } from "@/enums/appEnum";
+import { router } from "@/router";
+import { useSettingsStore } from "./setting.store";
+import { useWorktabStore } from "./worktab.store";
+import { useMenuStore } from "./menu.store";
+import { AppRouteRecord } from "@/types/router";
+import { setPageTitle } from "@/utils/navigation/router";
+import { resetRouterState } from "@/router/guards/beforeEach";
+import { StorageConfig } from "@/utils/storage/storage-config";
+import AuthAPI from "@/api/module_system/auth";
+import UserAPI from "@/api/module_system/user";
+import type { MenuTable } from "@/api/module_system/menu";
+import { Auth } from "@/utils/auth";
+import { ResultEnum } from "@/enums/api/result.enum";
+import { ElNotification } from "element-plus";
+import { store, useTagsViewStore, usePermissionStore, useDictStore } from "@/store";
+import type { UserInfo } from "@/api/module_system/user";
+
+/** {@link useUserStore} 的 `logout` 可选参数 */
+export interface LogoutOptions {
+  /**
+   * 为 false 时仅清理状态，不跳转登录（由调用方自行 next/router，如锁屏页 replace）
+   * @default true
+   */
+  navigate?: boolean;
+}
+
+/**
+ * 用户状态管理
+ * 管理用户登录状态、个人信息、语言设置、搜索历史、锁屏状态等
+ */
+export const useUserStore = defineStore(
+  "userStore",
+  () => {
+    // 语言设置
+    const language = ref(LanguageEnum.ZH);
+    // 登录状态
+    const isLogin = ref(false);
+    // 锁屏状态
+    const isLock = ref(false);
+    // 锁屏密码
+    const lockPassword = ref("");
+    // 用户信息
+    const info = ref<Partial<UserInfo>>({});
+    // 搜索历史记录
+    const searchHistory = ref<AppRouteRecord[]>([]);
+    // 访问令牌
+    const accessToken = ref("");
+    // 刷新令牌
+    const refreshToken = ref("");
+    // 路由列表
+    const routeList = ref<MenuTable[]>([]);
+    // 权限列表
+    const prems = ref<string[]>([]);
+    // 是否已获取路由
+    const hasGetRoute = ref(false);
+    // 记住我状态
+    const rememberMe = ref(Auth.getRememberMe());
+    // 计算属性：基础用户信息（兼容 web 原有结构）
+    const basicInfo = computed(() => info.value as any);
+    // 计算属性：获取设置状态
+    const getSettingState = computed(() => useSettingsStore().$state);
+    // 计算属性：获取工作台状态
+    const getWorktabState = computed(() => useWorktabStore().$state);
+    // 计算属性：获取基础信息（兼容 web 项目）
+    const getBasicInfo = computed(() => info.value as any);
+    // 计算属性：获取路由列表
+    const getRouteList = computed(() => routeList.value);
+    // 计算属性：获取权限列表
+    const getPerms = computed(() => prems.value);
+    // 计算属性：是否已获取路由
+    const getHasGetRoute = computed(() => hasGetRoute.value);
+
+    /**
+     * 设置用户信息
+     * @param newInfo 新的用户信息
+     */
+    const setUserInfo = (newInfo: UserInfo | UserInfo) => {
+      info.value = newInfo;
+      // 设置用户信息后自动更新权限
+      setPermissions([]);
+    };
+
+    /**
+     * 设置登录状态
+     * @param status 登录状态
+     */
+    const setLoginStatus = (status: boolean) => {
+      isLogin.value = status;
+    };
+
+    /**
+     * 设置语言
+     * @param lang 语言枚举值
+     */
+    const setLanguage = (lang: LanguageEnum) => {
+      setPageTitle(router.currentRoute.value);
+      language.value = lang;
+    };
+
+    /**
+     * 设置搜索历史
+     * @param list 搜索历史列表
+     */
+    const setSearchHistory = (list: AppRouteRecord[]) => {
+      searchHistory.value = list;
+    };
+
+    /**
+     * 设置锁屏状态
+     * @param status 锁屏状态
+     */
+    const setLockStatus = (status: boolean) => {
+      isLock.value = status;
+    };
+
+    /**
+     * 设置锁屏密码
+     * @param password 锁屏密码
+     */
+    const setLockPassword = (password: string) => {
+      lockPassword.value = password;
+    };
+
+    /**
+     * 设置令牌
+     * @param newAccessToken 访问令牌
+     * @param newRefreshToken 刷新令牌（可选）
+     */
+    const setToken = (newAccessToken: string, newRefreshToken?: string) => {
+      accessToken.value = newAccessToken;
+      if (newRefreshToken) {
+        refreshToken.value = newRefreshToken;
+      }
+    };
+
+    /**
+     * 检查并清理工作台标签页
+     * 如果不是同一用户登录，清空工作台标签页
+     * 应在登录成功后调用
+     */
+    const checkAndClearWorktabs = () => {
+      const lastUserId = localStorage.getItem(StorageConfig.LAST_USER_ID_KEY);
+      const currentUserId = (info.value as any).id || (info.value as any).user_id;
+
+      // 无法获取当前用户 ID，跳过检查
+      if (!currentUserId) return;
+
+      // 首次登录或缓存已清除，保留现有标签页
+      if (!lastUserId) {
+        return;
+      }
+
+      // 不同用户登录，清空工作台标签页
+      if (String(currentUserId) !== lastUserId) {
+        const worktabStore = useWorktabStore();
+        worktabStore.opened = [];
+        worktabStore.keepAliveExclude = [];
+      }
+
+      // 清除临时存储
+      localStorage.removeItem(StorageConfig.LAST_USER_ID_KEY);
+    };
+
+    /**
+     * 获取用户信息
+     */
+    async function getUserInfo() {
+      try {
+        const response = await UserAPI.getCurrentUserInfo();
+        const data = response.data.data;
+        const menus: MenuTable[] = data?.menus || [];
+        delete data?.menus;
+        info.value = { ...info.value, ...data } as Partial<UserInfo>;
+        setRoute(menus);
+      } catch (error) {
+        console.error("获取用户信息失败:", error);
+        throw error;
+      }
+    }
+
+    /**
+     * 设置头像
+     */
+    function setAvatar(avatar: string) {
+      info.value = { ...info.value, avatar };
+    }
+
+    /**
+     * 设置路由
+     */
+    function setRoute(routers: MenuTable[]) {
+      routeList.value = routers;
+      hasGetRoute.value = true;
+      setPermissions(routers);
+    }
+
+    /**
+     * 设置权限
+     */
+    function setPermissions(menus: MenuTable[]) {
+      prems.value = [];
+      if (!info.value.roles) return;
+
+      const roleMenus = info.value.roles
+        .filter((role) => role.menus && role.menus.length > 0)
+        .flatMap((role) => role.menus)
+        .filter((menu): menu is MenuTable => menu !== undefined);
+
+      const allMenus = [...menus, ...roleMenus];
+
+      const permissionSet = new Set<string>();
+      const collect = (items: MenuTable[]) => {
+        items.forEach((item) => {
+          if (item.permission) {
+            permissionSet.add(item.permission);
+          }
+          if (item.children && item.children.length > 0) {
+            collect(item.children.filter((child): child is MenuTable => child !== undefined));
+          }
+        });
+      };
+
+      collect(allMenus);
+      prems.value = Array.from(permissionSet);
+    }
+
+    /**
+     * 登录
+     */
+    async function login(loginForm: any) {
+      const response = await AuthAPI.login(loginForm);
+      const data = response.data.data;
+      if (response.data.code === ResultEnum.SUCCESS) {
+        ElNotification({
+          title: "通知",
+          message: response.data.msg,
+          type: "success",
+        });
+      }
+      rememberMe.value = loginForm.remember;
+      Auth.setTokens(data.access_token, data.refresh_token, rememberMe.value);
+      setToken(data.access_token, data.refresh_token);
+      setLoginStatus(true);
+      await getUserInfo();
+    }
+
+    /**
+     * 登出：有 token 时请求后端；统一清理状态；默认跳转登录页并带 redirect
+     */
+    async function logout(options?: LogoutOptions) {
+      const shouldNavigate = options?.navigate !== false;
+
+      const currentUserId = (info.value as any).id || (info.value as any).user_id;
+      if (currentUserId) {
+        localStorage.setItem(StorageConfig.LAST_USER_ID_KEY, String(currentUserId));
+      }
+
+      let apiError: unknown;
+      const token = Auth.getAccessToken();
+      if (token) {
+        try {
+          const response = await AuthAPI.logout({ token });
+          if (response.data.code === ResultEnum.SUCCESS) {
+            ElNotification({
+              title: "通知",
+              message: response.data.msg,
+              type: "success",
+            });
+          }
+        } catch (e) {
+          apiError = e;
+        }
+      }
+
+      resetAllState();
+      sessionStorage.removeItem("iframeRoutes");
+      useMenuStore().setHomePath("");
+      resetRouterState(500);
+
+      if (shouldNavigate) {
+        const currentRoute = router.currentRoute.value;
+        const redirect = currentRoute.path !== "/login" ? currentRoute.fullPath : undefined;
+        await router.push({
+          name: "Login",
+          query: redirect ? { redirect } : undefined,
+        });
+      }
+
+      if (apiError) {
+        throw apiError;
+      }
+    }
+
+    /**
+     * 重置所有状态
+     */
+    function resetAllState() {
+      Auth.clearAuth();
+      info.value = {};
+      routeList.value = [];
+      hasGetRoute.value = false;
+      isLogin.value = false;
+      isLock.value = false;
+      lockPassword.value = "";
+      accessToken.value = "";
+      refreshToken.value = "";
+      prems.value = [];
+    }
+
+    /**
+     * 清空用户信息
+     */
+    function clearUserInfo() {
+      info.value = {};
+      routeList.value = [];
+      hasGetRoute.value = false;
+    }
+
+    /**
+     * 刷新token
+     */
+    function refreshTokenFn() {
+      const currentRefreshToken = Auth.getRefreshToken();
+
+      if (!currentRefreshToken) {
+        return Promise.reject(new Error("没有有效的刷新令牌"));
+      }
+
+      return new Promise<void>((resolve, reject) => {
+        AuthAPI.refreshToken({ refresh_token: currentRefreshToken })
+          .then((response: any) => {
+            const data = response.data.data;
+            // 更新令牌，保持当前记住我状态
+            Auth.setTokens(data.access_token, data.refresh_token, Auth.getRememberMe());
+            setToken(data.access_token, data.refresh_token);
+            resolve();
+          })
+          .catch((error: any) => {
+            reject(error);
+          });
+      });
+    }
+
+    /**
+     * 完全重置所有状态（包括路由、标签页、字典等）
+     */
+    function fullResetAllState() {
+      // 重置用户状态
+      Auth.clearAuth();
+      // 重置用户信息
+      clearUserInfo();
+      // 重置路由
+      usePermissionStore(store).resetRouter();
+      // 清除标签视图
+      useTagsViewStore().delAllViews();
+      // 重置字典
+      useDictStore(store).clearDictData();
+
+      return Promise.resolve();
+    }
+
+    return {
+      language,
+      isLogin,
+      isLock,
+      lockPassword,
+      info,
+      searchHistory,
+      accessToken,
+      routeList,
+      prems,
+      hasGetRoute,
+      rememberMe,
+      getUserInfo,
+      getSettingState,
+      getWorktabState,
+      basicInfo,
+      getBasicInfo,
+      getRouteList,
+      getPerms,
+      getHasGetRoute,
+      setUserInfo,
+      setLoginStatus,
+      setLanguage,
+      setSearchHistory,
+      setLockStatus,
+      setLockPassword,
+      setToken,
+      setAvatar,
+      setRoute,
+      setPermissions,
+      login,
+      logout,
+      checkAndClearWorktabs,
+      clearUserInfo,
+      refreshTokenFn,
+      resetAllState,
+      fullResetAllState,
+    };
+  },
+  {
+    persist: {
+      key: "user",
+      storage: localStorage,
+    },
+  }
+);
+
+export function useUserStoreHook() {
+  return useUserStore(store);
+}
diff --git a/frontend/new-web/src/store/modules/user.ts b/frontend/new-web/src/store/modules/user.ts
deleted file mode 100755
index 08f7684c..00000000
--- a/frontend/new-web/src/store/modules/user.ts
+++ /dev/null
@@ -1,235 +0,0 @@
-/**
- * 用户状态管理模块
- *
- * 提供用户相关的状态管理
- *
- * ## 主要功能
- *
- * - 用户登录状态管理
- * - 用户信息存储
- * - 访问令牌和刷新令牌管理
- * - 语言设置
- * - 搜索历史记录
- * - 锁屏状态和密码管理
- * - 登出清理逻辑
- *
- * ## 使用场景
- *
- * - 用户登录和认证
- * - 权限验证
- * - 个人信息展示
- * - 多语言切换
- * - 锁屏功能
- * - 搜索历史管理
- *
- * ## 持久化
- *
- * - 使用 localStorage 存储
- * - 存储键：sys-v{version}-user
- * - 登出时自动清理
- *
- * @module store/modules/user
- * @author Art Design Pro Team
- */
-import { defineStore } from 'pinia'
-import { ref, computed } from 'vue'
-import { LanguageEnum } from '@/enums/appEnum'
-import { router } from '@/router'
-import { useSettingStore } from './setting'
-import { useWorktabStore } from './worktab'
-import { AppRouteRecord } from '@/types/router'
-import { setPageTitle } from '@/utils/router'
-import { resetRouterState } from '@/router/guards/beforeEach'
-import { useMenuStore } from './menu'
-import { StorageConfig } from '@/utils/storage/storage-config'
-
-/**
- * 用户状态管理
- * 管理用户登录状态、个人信息、语言设置、搜索历史、锁屏状态等
- */
-export const useUserStore = defineStore(
-  'userStore',
-  () => {
-    // 语言设置
-    const language = ref(LanguageEnum.ZH)
-    // 登录状态
-    const isLogin = ref(false)
-    // 锁屏状态
-    const isLock = ref(false)
-    // 锁屏密码
-    const lockPassword = ref('')
-    // 用户信息
-    const info = ref<Partial<Api.Auth.UserInfo>>({})
-    // 搜索历史记录
-    const searchHistory = ref<AppRouteRecord[]>([])
-    // 访问令牌
-    const accessToken = ref('')
-    // 刷新令牌
-    const refreshToken = ref('')
-
-    // 计算属性：获取用户信息
-    const getUserInfo = computed(() => info.value)
-    // 计算属性：获取设置状态
-    const getSettingState = computed(() => useSettingStore().$state)
-    // 计算属性：获取工作台状态
-    const getWorktabState = computed(() => useWorktabStore().$state)
-
-    /**
-     * 设置用户信息
-     * @param newInfo 新的用户信息
-     */
-    const setUserInfo = (newInfo: Api.Auth.UserInfo) => {
-      info.value = newInfo
-    }
-
-    /**
-     * 设置登录状态
-     * @param status 登录状态
-     */
-    const setLoginStatus = (status: boolean) => {
-      isLogin.value = status
-    }
-
-    /**
-     * 设置语言
-     * @param lang 语言枚举值
-     */
-    const setLanguage = (lang: LanguageEnum) => {
-      setPageTitle(router.currentRoute.value)
-      language.value = lang
-    }
-
-    /**
-     * 设置搜索历史
-     * @param list 搜索历史列表
-     */
-    const setSearchHistory = (list: AppRouteRecord[]) => {
-      searchHistory.value = list
-    }
-
-    /**
-     * 设置锁屏状态
-     * @param status 锁屏状态
-     */
-    const setLockStatus = (status: boolean) => {
-      isLock.value = status
-    }
-
-    /**
-     * 设置锁屏密码
-     * @param password 锁屏密码
-     */
-    const setLockPassword = (password: string) => {
-      lockPassword.value = password
-    }
-
-    /**
-     * 设置令牌
-     * @param newAccessToken 访问令牌
-     * @param newRefreshToken 刷新令牌（可选）
-     */
-    const setToken = (newAccessToken: string, newRefreshToken?: string) => {
-      accessToken.value = newAccessToken
-      if (newRefreshToken) {
-        refreshToken.value = newRefreshToken
-      }
-    }
-
-    /**
-     * 退出登录
-     * 清空所有用户相关状态并跳转到登录页
-     * 如果是同一账号重新登录，保留工作台标签页
-     */
-    const logOut = () => {
-      // 保存当前用户 ID，用于下次登录时判断是否为同一用户
-      const currentUserId = info.value.userId
-      if (currentUserId) {
-        localStorage.setItem(StorageConfig.LAST_USER_ID_KEY, String(currentUserId))
-      }
-
-      // 清空用户信息
-      info.value = {}
-      // 重置登录状态
-      isLogin.value = false
-      // 重置锁屏状态
-      isLock.value = false
-      // 清空锁屏密码
-      lockPassword.value = ''
-      // 清空访问令牌
-      accessToken.value = ''
-      // 清空刷新令牌
-      refreshToken.value = ''
-      // 注意：不清空工作台标签页，等下次登录时根据用户判断
-      // 移除iframe路由缓存
-      sessionStorage.removeItem('iframeRoutes')
-      // 清空主页路径
-      useMenuStore().setHomePath('')
-      // 重置路由状态
-      resetRouterState(500)
-      // 跳转到登录页，携带当前路由作为 redirect 参数
-      const currentRoute = router.currentRoute.value
-      const redirect = currentRoute.path !== '/login' ? currentRoute.fullPath : undefined
-      router.push({
-        name: 'Login',
-        query: redirect ? { redirect } : undefined
-      })
-    }
-
-    /**
-     * 检查并清理工作台标签页
-     * 如果不是同一用户登录，清空工作台标签页
-     * 应在登录成功后调用
-     */
-    const checkAndClearWorktabs = () => {
-      const lastUserId = localStorage.getItem(StorageConfig.LAST_USER_ID_KEY)
-      const currentUserId = info.value.userId
-
-      // 无法获取当前用户 ID，跳过检查
-      if (!currentUserId) return
-
-      // 首次登录或缓存已清除，保留现有标签页
-      if (!lastUserId) {
-        return
-      }
-
-      // 不同用户登录，清空工作台标签页
-      if (String(currentUserId) !== lastUserId) {
-        const worktabStore = useWorktabStore()
-        worktabStore.opened = []
-        worktabStore.keepAliveExclude = []
-      }
-
-      // 清除临时存储
-      localStorage.removeItem(StorageConfig.LAST_USER_ID_KEY)
-    }
-
-    return {
-      language,
-      isLogin,
-      isLock,
-      lockPassword,
-      info,
-      searchHistory,
-      accessToken,
-      refreshToken,
-      getUserInfo,
-      getSettingState,
-      getWorktabState,
-      setUserInfo,
-      setLoginStatus,
-      setLanguage,
-      setSearchHistory,
-      setLockStatus,
-      setLockPassword,
-      setToken,
-      logOut,
-      checkAndClearWorktabs
-    }
-  },
-  {
-    persist: {
-      key: 'user',
-      storage: localStorage
-    }
-  }
-)
diff --git a/frontend/new-web/src/store/modules/worktab.ts b/frontend/new-web/src/store/modules/worktab.store.ts
similarity index 64%
rename from frontend/new-web/src/store/modules/worktab.ts
rename to frontend/new-web/src/store/modules/worktab.store.ts
index caa0d90c..10130f05 100755
--- a/frontend/new-web/src/store/modules/worktab.ts
+++ b/frontend/new-web/src/store/modules/worktab.store.ts
@@ -34,118 +34,118 @@
  * - 存储键：sys-v{version}-worktab
  * - 刷新页面保持标签状态
  *
- * @module store/modules/worktab
- * @author Art Design Pro Team
+ * @module store/modules/worktab.store
+ * @author FastapiAdmin Team
  */
-import { defineStore } from 'pinia'
-import { ref, computed } from 'vue'
-import { router } from '@/router'
-import { LocationQueryRaw, Router } from 'vue-router'
-import { WorkTab } from '@/types'
-import { useCommon } from '@/hooks/core/useCommon'
+import { defineStore } from "pinia";
+import { ref, computed } from "vue";
+import { router } from "@/router";
+import { LocationQueryRaw, Router } from "vue-router";
+import { WorkTab } from "@/types";
+import { useCommon } from "@/hooks/core/useCommon";
 
 interface WorktabState {
-  current: Partial<WorkTab>
-  opened: WorkTab[]
-  keepAliveExclude: string[]
+  current: Partial<WorkTab>;
+  opened: WorkTab[];
+  keepAliveExclude: string[];
 }
 
 /**
  * 工作台标签页管理 Store
  */
 export const useWorktabStore = defineStore(
-  'worktabStore',
+  "worktabStore",
   () => {
     // 状态定义
-    const current = ref<Partial<WorkTab>>({})
-    const opened = ref<WorkTab[]>([])
-    const keepAliveExclude = ref<string[]>([])
+    const current = ref<Partial<WorkTab>>({});
+    const opened = ref<WorkTab[]>([]);
+    const keepAliveExclude = ref<string[]>([]);
 
     // 计算属性
-    const hasOpenedTabs = computed(() => opened.value.length > 0)
-    const hasMultipleTabs = computed(() => opened.value.length > 1)
+    const hasOpenedTabs = computed(() => opened.value.length > 0);
+    const hasMultipleTabs = computed(() => opened.value.length > 1);
     const currentTabIndex = computed(() =>
       current.value.path ? opened.value.findIndex((tab) => tab.path === current.value.path) : -1
-    )
+    );
 
     /**
      * 查找标签页索引
      */
     const findTabIndex = (path: string): number => {
-      return opened.value.findIndex((tab) => tab.path === path)
-    }
+      return opened.value.findIndex((tab) => tab.path === path);
+    };
 
     /**
      * 获取标签页
      */
     const getTab = (path: string): WorkTab | undefined => {
-      return opened.value.find((tab) => tab.path === path)
-    }
+      return opened.value.find((tab) => tab.path === path);
+    };
 
     /**
      * 检查标签页是否可关闭
      */
     const isTabClosable = (tab: WorkTab): boolean => {
-      return !tab.fixedTab
-    }
+      return !tab.fixedTab;
+    };
 
     /**
      * 安全的路由跳转
      */
     const safeRouterPush = (tab: Partial<WorkTab>): void => {
       if (!tab.path) {
-        console.warn('尝试跳转到无效路径的标签页')
-        return
+        console.warn("尝试跳转到无效路径的标签页");
+        return;
       }
 
       try {
         router.push({
           path: tab.path,
-          query: tab.query as LocationQueryRaw
-        })
+          query: tab.query as LocationQueryRaw,
+        });
       } catch (error) {
-        console.error('路由跳转失败:', error)
+        console.error("路由跳转失败:", error);
       }
-    }
+    };
 
     /**
      * 打开或激活一个选项卡
      */
     const openTab = (tab: WorkTab): void => {
       if (!tab.path) {
-        console.warn('尝试打开无效的标签页')
-        return
+        console.warn("尝试打开无效的标签页");
+        return;
       }
 
       // 从 keepAlive 排除列表中移除
       if (tab.name) {
-        removeKeepAliveExclude(tab.name)
+        removeKeepAliveExclude(tab.name);
       }
 
       // 先根据路由名称查找（应对动态路由参数导致的多开问题），找不到再根据路径查找
-      let existingIndex = -1
+      let existingIndex = -1;
       if (tab.name) {
-        existingIndex = opened.value.findIndex((t) => t.name === tab.name)
+        existingIndex = opened.value.findIndex((t) => t.name === tab.name);
       }
       if (existingIndex === -1) {
-        existingIndex = findTabIndex(tab.path)
+        existingIndex = findTabIndex(tab.path);
       }
 
       if (existingIndex === -1) {
         // 新增标签页
-        const insertIndex = tab.fixedTab ? findFixedTabInsertIndex() : opened.value.length
-        const newTab = { ...tab }
+        const insertIndex = tab.fixedTab ? findFixedTabInsertIndex() : opened.value.length;
+        const newTab = { ...tab };
 
         if (tab.fixedTab) {
-          opened.value.splice(insertIndex, 0, newTab)
+          opened.value.splice(insertIndex, 0, newTab);
         } else {
-          opened.value.push(newTab)
+          opened.value.push(newTab);
         }
 
-        current.value = newTab
+        current.value = newTab;
       } else {
         // 更新现有标签页（当动态路由参数或查询变更时，复用同一标签）
-        const existingTab = opened.value[existingIndex]
+        const existingTab = opened.value[existingIndex];
 
         opened.value[existingIndex] = {
           ...existingTab,
@@ -156,233 +156,233 @@ export const useWorktabStore = defineStore(
           fixedTab: tab.fixedTab ?? existingTab.fixedTab,
           keepAlive: tab.keepAlive ?? existingTab.keepAlive,
           name: tab.name || existingTab.name,
-          icon: tab.icon || existingTab.icon
-        }
+          icon: tab.icon || existingTab.icon,
+        };
 
-        current.value = opened.value[existingIndex]
+        current.value = opened.value[existingIndex];
       }
-    }
+    };
 
     /**
      * 查找固定标签页的插入位置
      */
     const findFixedTabInsertIndex = (): number => {
-      let insertIndex = 0
+      let insertIndex = 0;
       for (let i = 0; i < opened.value.length; i++) {
         if (opened.value[i].fixedTab) {
-          insertIndex = i + 1
+          insertIndex = i + 1;
         } else {
-          break
+          break;
         }
       }
-      return insertIndex
-    }
+      return insertIndex;
+    };
 
     /**
      * 关闭指定的选项卡
      */
     const removeTab = (path: string): void => {
-      const targetTab = getTab(path)
-      const targetIndex = findTabIndex(path)
+      const targetTab = getTab(path);
+      const targetIndex = findTabIndex(path);
 
       if (targetIndex === -1) {
-        console.warn(`尝试关闭不存在的标签页: ${path}`)
-        return
+        console.warn(`尝试关闭不存在的标签页: ${path}`);
+        return;
       }
 
       if (targetTab && !isTabClosable(targetTab)) {
-        console.warn(`尝试关闭固定标签页: ${path}`)
-        return
+        console.warn(`尝试关闭固定标签页: ${path}`);
+        return;
       }
 
       // 从标签页列表中移除
-      opened.value.splice(targetIndex, 1)
+      opened.value.splice(targetIndex, 1);
 
       // 处理缓存排除
       if (targetTab?.name) {
-        addKeepAliveExclude(targetTab)
+        addKeepAliveExclude(targetTab);
       }
 
-      const { homePath } = useCommon()
+      const { homePath } = useCommon();
 
       // 如果关闭后无标签页，跳转首页
       if (!hasOpenedTabs.value) {
         if (path !== homePath.value) {
-          current.value = {}
-          safeRouterPush({ path: homePath.value })
+          current.value = {};
+          safeRouterPush({ path: homePath.value });
         }
-        return
+        return;
       }
 
       // 如果关闭的是当前激活标签，需要激活其他标签
       if (current.value.path === path) {
-        const newIndex = targetIndex >= opened.value.length ? opened.value.length - 1 : targetIndex
-        current.value = opened.value[newIndex]
-        safeRouterPush(current.value)
+        const newIndex = targetIndex >= opened.value.length ? opened.value.length - 1 : targetIndex;
+        current.value = opened.value[newIndex];
+        safeRouterPush(current.value);
       }
-    }
+    };
 
     /**
      * 关闭左侧选项卡
      */
     const removeLeft = (path: string): void => {
-      const targetIndex = findTabIndex(path)
+      const targetIndex = findTabIndex(path);
 
       if (targetIndex === -1) {
-        console.warn(`尝试关闭左侧标签页，但目标标签页不存在: ${path}`)
-        return
+        console.warn(`尝试关闭左侧标签页，但目标标签页不存在: ${path}`);
+        return;
       }
 
       // 获取左侧可关闭的标签页
-      const leftTabs = opened.value.slice(0, targetIndex)
-      const closableLeftTabs = leftTabs.filter(isTabClosable)
+      const leftTabs = opened.value.slice(0, targetIndex);
+      const closableLeftTabs = leftTabs.filter(isTabClosable);
 
       if (closableLeftTabs.length === 0) {
-        console.warn('左侧没有可关闭的标签页')
-        return
+        console.warn("左侧没有可关闭的标签页");
+        return;
       }
 
       // 标记为缓存排除
-      markTabsToRemove(closableLeftTabs)
+      markTabsToRemove(closableLeftTabs);
 
       // 移除左侧可关闭的标签页
       opened.value = opened.value.filter(
         (tab, index) => index >= targetIndex || !isTabClosable(tab)
-      )
+      );
 
       // 确保当前标签是激活状态
-      const targetTab = getTab(path)
+      const targetTab = getTab(path);
       if (targetTab) {
-        current.value = targetTab
+        current.value = targetTab;
       }
-    }
+    };
 
     /**
      * 关闭右侧选项卡
      */
     const removeRight = (path: string): void => {
-      const targetIndex = findTabIndex(path)
+      const targetIndex = findTabIndex(path);
 
       if (targetIndex === -1) {
-        console.warn(`尝试关闭右侧标签页，但目标标签页不存在: ${path}`)
-        return
+        console.warn(`尝试关闭右侧标签页，但目标标签页不存在: ${path}`);
+        return;
       }
 
       // 获取右侧可关闭的标签页
-      const rightTabs = opened.value.slice(targetIndex + 1)
-      const closableRightTabs = rightTabs.filter(isTabClosable)
+      const rightTabs = opened.value.slice(targetIndex + 1);
+      const closableRightTabs = rightTabs.filter(isTabClosable);
 
       if (closableRightTabs.length === 0) {
-        console.warn('右侧没有可关闭的标签页')
-        return
+        console.warn("右侧没有可关闭的标签页");
+        return;
       }
 
       // 标记为缓存排除
-      markTabsToRemove(closableRightTabs)
+      markTabsToRemove(closableRightTabs);
 
       // 移除右侧可关闭的标签页
       opened.value = opened.value.filter(
         (tab, index) => index <= targetIndex || !isTabClosable(tab)
-      )
+      );
 
       // 确保当前标签是激活状态
-      const targetTab = getTab(path)
+      const targetTab = getTab(path);
       if (targetTab) {
-        current.value = targetTab
+        current.value = targetTab;
       }
-    }
+    };
 
     /**
      * 关闭其他选项卡
      */
     const removeOthers = (path: string): void => {
-      const targetTab = getTab(path)
+      const targetTab = getTab(path);
 
       if (!targetTab) {
-        console.warn(`尝试关闭其他标签页，但目标标签页不存在: ${path}`)
-        return
+        console.warn(`尝试关闭其他标签页，但目标标签页不存在: ${path}`);
+        return;
       }
 
       // 获取其他可关闭的标签页
-      const otherTabs = opened.value.filter((tab) => tab.path !== path)
-      const closableTabs = otherTabs.filter(isTabClosable)
+      const otherTabs = opened.value.filter((tab) => tab.path !== path);
+      const closableTabs = otherTabs.filter(isTabClosable);
 
       if (closableTabs.length === 0) {
-        console.warn('没有其他可关闭的标签页')
-        return
+        console.warn("没有其他可关闭的标签页");
+        return;
       }
 
       // 标记为缓存排除
-      markTabsToRemove(closableTabs)
+      markTabsToRemove(closableTabs);
 
       // 只保留当前标签和固定标签
-      opened.value = opened.value.filter((tab) => tab.path === path || !isTabClosable(tab))
+      opened.value = opened.value.filter((tab) => tab.path === path || !isTabClosable(tab));
 
       // 确保当前标签是激活状态
-      current.value = targetTab
-    }
+      current.value = targetTab;
+    };
 
     /**
      * 关闭所有可关闭的标签页
      */
     const removeAll = (): void => {
-      const { homePath } = useCommon()
-      const hasFixedTabs = opened.value.some((tab) => tab.fixedTab)
+      const { homePath } = useCommon();
+      const hasFixedTabs = opened.value.some((tab) => tab.fixedTab);
 
       // 获取可关闭的标签页
       const closableTabs = opened.value.filter((tab) => {
-        if (!isTabClosable(tab)) return false
+        if (!isTabClosable(tab)) return false;
         // 如果有固定标签，则所有可关闭的都可以关闭；否则保留首页
-        return hasFixedTabs || tab.path !== homePath.value
-      })
+        return hasFixedTabs || tab.path !== homePath.value;
+      });
 
       if (closableTabs.length === 0) {
-        console.warn('没有可关闭的标签页')
-        return
+        console.warn("没有可关闭的标签页");
+        return;
       }
 
       // 标记为缓存排除
-      markTabsToRemove(closableTabs)
+      markTabsToRemove(closableTabs);
 
       // 保留不可关闭的标签页和首页（当没有固定标签时）
       opened.value = opened.value.filter((tab) => {
-        return !isTabClosable(tab) || (!hasFixedTabs && tab.path === homePath.value)
-      })
+        return !isTabClosable(tab) || (!hasFixedTabs && tab.path === homePath.value);
+      });
 
       // 处理激活状态
       if (!hasOpenedTabs.value) {
-        current.value = {}
-        safeRouterPush({ path: homePath.value })
-        return
+        current.value = {};
+        safeRouterPush({ path: homePath.value });
+        return;
       }
 
       // 选择激活的标签页：优先首页，其次第一个可用标签
-      const homeTab = opened.value.find((tab) => tab.path === homePath.value)
-      const targetTab = homeTab || opened.value[0]
+      const homeTab = opened.value.find((tab) => tab.path === homePath.value);
+      const targetTab = homeTab || opened.value[0];
 
-      current.value = targetTab
-      safeRouterPush(targetTab)
-    }
+      current.value = targetTab;
+      safeRouterPush(targetTab);
+    };
 
     /**
      * 将指定选项卡添加到 keepAlive 排除列表中
      */
     const addKeepAliveExclude = (tab: WorkTab): void => {
-      if (!tab.keepAlive || !tab.name) return
+      if (!tab.keepAlive || !tab.name) return;
 
       if (!keepAliveExclude.value.includes(tab.name)) {
-        keepAliveExclude.value.push(tab.name)
+        keepAliveExclude.value.push(tab.name);
       }
-    }
+    };
 
     /**
      * 从 keepAlive 排除列表中移除指定组件名称
      */
     const removeKeepAliveExclude = (name: string): void => {
-      if (!name) return
+      if (!name) return;
 
-      keepAliveExclude.value = keepAliveExclude.value.filter((item) => item !== name)
-    }
+      keepAliveExclude.value = keepAliveExclude.value.filter((item) => item !== name);
+    };
 
     /**
      * 将传入的一组选项卡的组件名称标记为排除缓存
@@ -390,44 +390,44 @@ export const useWorktabStore = defineStore(
     const markTabsToRemove = (tabs: WorkTab[]): void => {
       tabs.forEach((tab) => {
         if (tab.name) {
-          addKeepAliveExclude(tab)
+          addKeepAliveExclude(tab);
         }
-      })
-    }
+      });
+    };
 
     /**
      * 切换指定标签页的固定状态
      */
     const toggleFixedTab = (path: string): void => {
-      const targetIndex = findTabIndex(path)
+      const targetIndex = findTabIndex(path);
 
       if (targetIndex === -1) {
-        console.warn(`尝试切换不存在标签页的固定状态: ${path}`)
-        return
+        console.warn(`尝试切换不存在标签页的固定状态: ${path}`);
+        return;
       }
 
-      const tab = { ...opened.value[targetIndex] }
-      tab.fixedTab = !tab.fixedTab
+      const tab = { ...opened.value[targetIndex] };
+      tab.fixedTab = !tab.fixedTab;
 
       // 移除原位置
-      opened.value.splice(targetIndex, 1)
+      opened.value.splice(targetIndex, 1);
 
       if (tab.fixedTab) {
         // 固定标签插入到所有固定标签的末尾
-        const firstNonFixedIndex = opened.value.findIndex((t) => !t.fixedTab)
-        const insertIndex = firstNonFixedIndex === -1 ? opened.value.length : firstNonFixedIndex
-        opened.value.splice(insertIndex, 0, tab)
+        const firstNonFixedIndex = opened.value.findIndex((t) => !t.fixedTab);
+        const insertIndex = firstNonFixedIndex === -1 ? opened.value.length : firstNonFixedIndex;
+        opened.value.splice(insertIndex, 0, tab);
       } else {
         // 非固定标签插入到所有固定标签后
-        const fixedCount = opened.value.filter((t) => t.fixedTab).length
-        opened.value.splice(fixedCount, 0, tab)
+        const fixedCount = opened.value.filter((t) => t.fixedTab).length;
+        opened.value.splice(fixedCount, 0, tab);
       }
 
       // 更新当前标签引用
       if (current.value.path === path) {
-        current.value = tab
+        current.value = tab;
       }
-    }
+    };
 
     /**
      * 验证工作台标签页的路由有效性
@@ -438,52 +438,52 @@ export const useWorktabStore = defineStore(
         const isTabRouteValid = (tab: Partial<WorkTab>): boolean => {
           try {
             if (tab.name) {
-              const routes = routerInstance.getRoutes()
-              if (routes.some((r) => r.name === tab.name)) return true
+              const routes = routerInstance.getRoutes();
+              if (routes.some((r) => r.name === tab.name)) return true;
             }
             if (tab.path) {
               const resolved = routerInstance.resolve({
                 path: tab.path,
-                query: (tab.query as LocationQueryRaw) || undefined
-              })
-              return resolved.matched.length > 0
+                query: (tab.query as LocationQueryRaw) || undefined,
+              });
+              return resolved.matched.length > 0;
             }
-            return false
+            return false;
           } catch {
-            return false
+            return false;
           }
-        }
+        };
 
         // 过滤出有效的标签页
-        const validTabs = opened.value.filter((tab) => isTabRouteValid(tab))
+        const validTabs = opened.value.filter((tab) => isTabRouteValid(tab));
 
         if (validTabs.length !== opened.value.length) {
-          console.warn('发现无效的标签页路由，已自动清理')
-          opened.value = validTabs
+          console.warn("发现无效的标签页路由，已自动清理");
+          opened.value = validTabs;
         }
 
         // 验证当前激活标签的有效性
-        const isCurrentValid = current.value && isTabRouteValid(current.value)
+        const isCurrentValid = current.value && isTabRouteValid(current.value);
 
         if (!isCurrentValid && validTabs.length > 0) {
-          console.warn('当前激活标签无效，已自动切换')
-          current.value = validTabs[0]
+          console.warn("当前激活标签无效，已自动切换");
+          current.value = validTabs[0];
         } else if (!isCurrentValid) {
-          current.value = {}
+          current.value = {};
         }
       } catch (error) {
-        console.error('验证工作台标签页失败:', error)
+        console.error("验证工作台标签页失败:", error);
       }
-    }
+    };
 
     /**
      * 清空所有状态（用于登出等场景）
      */
     const clearAll = (): void => {
-      current.value = {}
-      opened.value = []
-      keepAliveExclude.value = []
-    }
+      current.value = {};
+      opened.value = [];
+      keepAliveExclude.value = [];
+    };
 
     /**
      * 获取状态快照（用于持久化存储）
@@ -492,37 +492,37 @@ export const useWorktabStore = defineStore(
       return {
         current: { ...current.value },
         opened: [...opened.value],
-        keepAliveExclude: [...keepAliveExclude.value]
-      }
-    }
+        keepAliveExclude: [...keepAliveExclude.value],
+      };
+    };
 
     /**
      * 获取标签页标题
      */
     const getTabTitle = (path: string): WorkTab | undefined => {
-      const tab = getTab(path)
-      return tab
-    }
+      const tab = getTab(path);
+      return tab;
+    };
 
     /**
      * 更新标签页标题
      */
     const updateTabTitle = (path: string, title: string): void => {
-      const tab = getTab(path)
+      const tab = getTab(path);
       if (tab) {
-        tab.customTitle = title
+        tab.customTitle = title;
       }
-    }
+    };
 
     /**
      * 重置标签页标题
      */
     const resetTabTitle = (path: string): void => {
-      const tab = getTab(path)
+      const tab = getTab(path);
       if (tab) {
-        tab.customTitle = ''
+        tab.customTitle = "";
       }
-    }
+    };
 
     return {
       // 状态
@@ -556,13 +556,13 @@ export const useWorktabStore = defineStore(
       markTabsToRemove,
       getTabTitle,
       updateTabTitle,
-      resetTabTitle
-    }
+      resetTabTitle,
+    };
   },
   {
     persist: {
-      key: 'worktab',
-      storage: localStorage
-    }
+      key: "worktab",
+      storage: localStorage,
+    },
   }
-)
+);
diff --git a/frontend/new-web/src/styles/dark/css-vars.css b/frontend/new-web/src/styles/dark/css-vars.css
new file mode 100644
index 00000000..bce42559
--- /dev/null
+++ b/frontend/new-web/src/styles/dark/css-vars.css
@@ -0,0 +1,335 @@
+/* 暗黑模式通过 CSS 自定义变量，官方链接：https://element-plus.org/zh-CN/guide/dark-mode.html#%E9%80%9A%E8%BF%87-css */
+
+/**
+ * Element Plus 主题最小回退变量（合并版）
+ *
+ * === 配色层级（同一主色：哪里深、哪里浅）===
+ * L0 页面画布：--el-bg-color / --el-bg-color-page（大面积）
+ * L1 内容区块：--el-bg-color-overlay（卡片/表格等）
+ * L2 卡片/表格容器面：--el-bg-color-overlay（抬升中性面）
+ * L3 表头/侧栏条：使用 fill 层级（不再做混色）
+ * L4 浮层（下拉/弹窗）：面板底 = overlay，不用整板灌主色；强调在选项/按钮/focus
+ * L5 再嵌套浅填充：--el-fill-color-light（hover 槽、禁用底等）
+ * 标签栏 TagsView：使用 Element Plus fill/bg token
+ * 主色强度：点线控件（按钮、focus、选中字）用实色 primary；面状 hover/范围/斑马用 fill 层级
+ *
+ * === 本文区块 ===
+ * :root 亮色 / html.dark 暗色 / 运行时 theme.ts 覆盖
+ * 弹层、浮层 Popper、Select 选项、DatePicker 范围、级联、表格见对应注释
+ * 其余排期：Message、图表取 CSS 变量、登录全屏页；Tabs border-card 顶条 / Steps simple / Progress 轨道见下文
+ */
+
+:root,
+html :root {
+  /* 基础中性色（画布/浅分割线轻混主色，随 --el-color-primary 略偏主题，保持淡淡层次） */
+  --el-bg-color: color-mix(in srgb, var(--el-color-primary, #4080ff) 5%, #f8fafc 95%);
+  --el-bg-color-page: var(--el-bg-color);
+  --el-bg-color-overlay: #fff;
+  --el-fill-color: #e2e8f0;
+  --el-fill-color-light: color-mix(in srgb, var(--el-color-primary, #4080ff) 3%, #f1f5f9 93%);
+
+  /* 亮色：分割线偏淡（主色比例略降、灰底偏浅） */
+  --el-border-color: color-mix(in srgb, var(--el-color-primary, #4080ff) 6%, #e2e8f0 94%);
+  --el-border-color-light: color-mix(in srgb, var(--el-color-primary, #4080ff) 7.5%, #eef2f7 92.5%);
+  --el-border-color-lighter: color-mix(in srgb, var(--el-color-primary, #4080ff) 15%, #f1f5f9 92%);
+  --el-border-color-extra-light: color-mix(
+    in srgb,
+    var(--el-color-primary, #4080ff) 5.5%,
+    #f4f6f8 94.5%
+  );
+  --el-text-color-primary: #0f172a;
+  --el-text-color-regular: #475569;
+  --el-text-color-secondary: #64748b;
+  --el-text-color-placeholder: #94a3b8;
+
+  /* 阴影/遮罩 */
+  --el-box-shadow: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px 0 rgb(0 0 0 / 6%);
+  --el-box-shadow-light: 0 1px 2px 0 rgb(0 0 0 / 5%);
+  --el-overlay-color: rgb(15 23 42 / 50%);
+  --el-overlay-color-light: rgb(15 23 42 / 30%);
+  --el-overlay-color-lighter: rgb(15 23 42 / 15%);
+
+  /* 菜单 hover 兼容 */
+  --el-menu-hover-bg-color: color-mix(in srgb, var(--el-color-primary, #4080ff) 8%, #f3f6fb 92%);
+
+  /* 全局原生滚动条：轨道浅底 + 滑块混主色（随 theme.ts / --el-color-primary 变） */
+  --app-scrollbar-track: color-mix(in srgb, var(--el-color-primary, #4080ff) 5%, #eef2f7 95%);
+  --app-scrollbar-thumb: color-mix(in srgb, var(--el-color-primary, #4080ff) 35%, #bcc8d4 65%);
+  --app-scrollbar-thumb-hover: color-mix(
+    in srgb,
+    var(--el-color-primary, #4080ff) 48%,
+    #94a3b8 52%
+  );
+
+  /*
+   * 表格：表头 / 斑马 / 行悬停 — 同一主色，深浅分层（亮底；整体偏浅、主色占比低）
+   * 表头略深 → 悬停中等 → 斑马最浅
+   */
+  --el-table-theme-header-bg: color-mix(in srgb, var(--el-color-primary, #4080ff) 8%, #f4f6f9 92%);
+  --el-table-theme-hover-bg: color-mix(
+    in srgb,
+    var(--el-color-primary, #4080ff) 5.5%,
+    var(--el-bg-color-overlay) 94.5%
+  );
+  --el-table-theme-stripe-bg: color-mix(
+    in srgb,
+    var(--el-color-primary, #4080ff) 4%,
+    var(--el-bg-color-overlay) 97%
+  );
+
+  /*
+   * 表格线：浅灰为主、主色极淡，避免格线抢眼（接近分割线「若有若无」）
+   */
+  --el-table-theme-border-color: color-mix(
+    in srgb,
+    var(--el-color-primary, #4080ff) 15.5%,
+    #eef2f7 95.5%
+  );
+
+  /* 画布/分割线交给 Element Plus：不再维护 layout-* 混色变量 */
+
+  /* Select / TreeSelect 选项行（EP 默认 hover=fill-light、选中无底，与主题脱节） */
+  --el-select-option-hover-bg: var(--el-fill-color-light);
+  --el-select-option-selected-bg: var(--el-color-primary-light-9);
+
+  /* DatePicker 区间内底（EP 默认 inrange≈极浅灰，与主题脱节） */
+  --el-datepicker-range-bg: var(--el-color-primary-light-9);
+  --el-datepicker-range-hover-bg: var(--el-color-primary-light-8);
+
+  /*
+   * 弹层
+   * - 遮罩：--el-overlay-color
+   * - 面板底：纯中性 overlay（不要混主色）；主题色交给内部 primary 按钮、表单 focus、链接等
+   * - Drawer 继承 --el-dialog-bg-color；Dialog 见下方 html .el-dialog（压过 EP 的 var(--el-bg-color)）
+   */
+  --el-dialog-bg-color: var(--el-bg-color-overlay);
+  --el-popover-bg-color: var(--el-dialog-bg-color);
+  --el-popup-modal-bg-color: var(--el-overlay-color);
+  --el-popup-modal-opacity: 1;
+}
+
+html.dark {
+  /*
+   * 布局分区（仅暗色）：侧栏主色略高 → 顶栏次之 → 主内容最淡（大面积阅读区）→ 卡片 overlay 略亮
+   */
+  --layout-nav-bg: color-mix(in srgb, var(--el-color-primary, #4080ff) 6.5%, #101828 93.5%);
+  --layout-header-bg: color-mix(in srgb, var(--el-color-primary, #4080ff) 5%, #121a2a 95%);
+  --layout-content-bg: color-mix(in srgb, var(--el-color-primary, #4080ff) 4%, #0f172a 96%);
+
+  /* Logo 区与侧栏同一底（左侧布局下与 .layout__sidebar / --menu-background 一致，避免色差条） */
+  --layout-sidebar-logo-bg: var(--layout-nav-bg);
+
+  /* 卡片/表格面板：比主内容略「抬」一点 */
+  --el-bg-color-overlay: color-mix(in srgb, var(--el-color-primary, #4080ff) 6%, #1e293b 94%);
+
+  /* 基础中性色（画布 = 主内容区） */
+  --el-bg-color: var(--layout-content-bg);
+  --el-bg-color-page: var(--layout-content-bg);
+  --el-fill-color: #1e293b;
+  --el-fill-color-light: color-mix(in srgb, var(--el-color-primary, #4080ff) 8%, #334155 92%);
+
+  /* 暗色：缝隙/分割线略深一层，区划更清晰 */
+  --el-border-color: color-mix(in srgb, var(--el-color-primary, #4080ff) 14%, #334155 86%);
+  --el-border-color-light: color-mix(in srgb, var(--el-color-primary, #4080ff) 12%, #475569 88%);
+  --el-border-color-lighter: color-mix(in srgb, var(--el-color-primary, #4080ff) 13%, #3d4f69 87%);
+  --el-border-color-extra-light: color-mix(
+    in srgb,
+    var(--el-color-primary, #4080ff) 11%,
+    #334155 89%
+  );
+  --el-text-color-primary: #f8fafc;
+  --el-text-color-regular: #e2e8f0;
+  --el-text-color-secondary: #94a3b8;
+  --el-text-color-placeholder: #64748b;
+
+  /* 阴影/遮罩 */
+  --el-box-shadow: 0 1px 3px 0 rgb(0 0 0 / 40%), 0 1px 2px 0 rgb(0 0 0 / 24%);
+  --el-box-shadow-light: 0 1px 2px 0 rgb(0 0 0 / 20%);
+  --el-overlay-color: rgb(0 0 0 / 70%);
+  --el-overlay-color-light: rgb(0 0 0 / 50%);
+  --el-overlay-color-lighter: rgb(0 0 0 / 30%);
+
+  /*
+   * 菜单 hover / 激活：真正颜色在 --_menu-*，再赋给 --el-menu-hover-bg-color。
+   * EP 在 el-menu 根上内联 --el-menu-hover-bg-color = TinyColor(bg).shade(20)，会盖掉仅在 html 上的定义；
+   * 用下面 html.dark .el-menu { ... !important } 把同一套色压回组件根，子项即可用 EP 默认 hover。
+   */
+  --_menu-hover-bg: color-mix(
+    in srgb,
+    var(--el-color-primary, #4080ff) 14%,
+    var(--layout-nav-bg) 86%
+  );
+  --_menu-active-bg: color-mix(
+    in srgb,
+    var(--el-color-primary, #4080ff) 21%,
+    var(--layout-nav-bg) 79%
+  );
+  --el-menu-hover-bg-color: var(--_menu-hover-bg);
+  --el-menu-active-bg-color: var(--_menu-active-bg);
+
+  /* 暗色全局滚动条：与主内容区协调，滑块略柔 */
+  --app-scrollbar-track: color-mix(in srgb, var(--el-color-primary, #4080ff) 7.5%, #0f172a 92.5%);
+  --app-scrollbar-thumb: color-mix(in srgb, var(--el-color-primary, #4080ff) 33%, #475569 67%);
+  --app-scrollbar-thumb-hover: color-mix(
+    in srgb,
+    var(--el-color-primary, #4080ff) 46%,
+    #64748b 54%
+  );
+
+  /*
+   * 表格：暗底整体偏浅一档，主色占比降低，更接近面板底 --el-bg-color-overlay
+   */
+  --el-table-theme-header-bg: color-mix(in srgb, var(--el-color-primary, #4080ff) 11%, #243044 89%);
+  --el-table-theme-hover-bg: color-mix(
+    in srgb,
+    var(--el-color-primary, #4080ff) 7.5%,
+    var(--el-bg-color-overlay) 92.5%
+  );
+  --el-table-theme-stripe-bg: color-mix(
+    in srgb,
+    var(--el-color-primary, #4080ff) 4%,
+    var(--el-bg-color-overlay) 96%
+  );
+
+  /* 表格线：暗色下偏柔，与 overlay 接近、略亮一线即可辨认 */
+  --el-table-theme-border-color: color-mix(
+    in srgb,
+    var(--el-color-primary, #4080ff) 9%,
+    #3d4f63 91%
+  );
+
+  /* 画布/分割线/Tags hover 不再维护 layout-* 混色变量 */
+
+  --el-select-option-hover-bg: var(--el-fill-color-light);
+  --el-select-option-selected-bg: var(--el-color-primary-light-9);
+  --el-datepicker-range-bg: var(--el-color-primary-light-9);
+  --el-datepicker-range-hover-bg: var(--el-color-primary-light-8);
+  --el-dialog-bg-color: var(--el-bg-color-overlay);
+  --el-popover-bg-color: var(--el-dialog-bg-color);
+  --el-popup-modal-bg-color: var(--el-overlay-color);
+  --el-popup-modal-opacity: 1;
+}
+
+/* 压过 EP 内联的 shade(20)，使子项 hover 读到与 html 一致的主题混色 */
+html.dark .el-menu {
+  --el-menu-hover-bg-color: var(--_menu-hover-bg) !important;
+}
+
+/* Dialog：EP 在 .el-dialog 上写死 --el-dialog-bg-color: var(--el-bg-color)，改为抬升中性底 */
+html .el-dialog {
+  --el-dialog-bg-color: var(--el-bg-color-overlay);
+}
+
+/*
+ * 浮层 Popper（与弹窗同一 token：--el-dialog-bg-color，现为中性 overlay）
+ * EP 部分组件写死 --el-bg-color-overlay；显式统一到 --el-dialog-bg-color 便于后续改一处全局同步。
+ */
+html .el-cascader {
+  --el-cascader-menu-fill: var(--el-dialog-bg-color);
+}
+
+html .el-mention {
+  --el-mention-bg-color: var(--el-dialog-bg-color);
+}
+
+html .el-select__popper.el-popper,
+html .el-tree-select__popper.el-popper,
+html .el-dropdown__popper.el-popper,
+html .el-autocomplete__popper.el-popper,
+html .el-mention__popper.el-popper,
+html .el-picker__popper.el-popper {
+  background: var(--el-dialog-bg-color);
+}
+
+html .el-select__popper.el-popper .el-popper__arrow::before,
+html .el-tree-select__popper.el-popper .el-popper__arrow::before,
+html .el-dropdown__popper.el-popper .el-popper__arrow::before,
+html .el-autocomplete__popper.el-popper .el-popper__arrow::before,
+html .el-mention__popper.el-popper .el-popper__arrow::before,
+html .el-picker__popper.el-popper .el-popper__arrow::before {
+  background: var(--el-dialog-bg-color);
+}
+
+html .el-picker-panel {
+  background: var(--el-dialog-bg-color);
+
+  --el-datepicker-inrange-bg-color: var(--el-datepicker-range-bg);
+  --el-datepicker-inrange-hover-bg-color: var(--el-datepicker-range-hover-bg);
+}
+
+html .el-dropdown-menu {
+  background-color: var(--el-dialog-bg-color);
+}
+
+html .el-color-picker-panel {
+  background: var(--el-dialog-bg-color);
+}
+
+html .el-transfer-panel {
+  background: var(--el-dialog-bg-color);
+}
+
+/* Select / TreeSelect：选项 hover、选中背景随主色（浮层底仍为 overlay） */
+html .el-select__popper .el-select-dropdown__item.is-hovering,
+html .el-tree-select__popper .el-select-dropdown__item.is-hovering {
+  background-color: var(--el-select-option-hover-bg);
+}
+
+html .el-select__popper .el-select-dropdown__item.is-selected,
+html .el-tree-select__popper .el-select-dropdown__item.is-selected {
+  background-color: var(--el-select-option-selected-bg);
+}
+
+/* 级联面板节点 hover 与 Select 一致（面板内自带 --el-cascader-node-background-hover） */
+html .el-cascader-panel {
+  --el-cascader-node-background-hover: var(--el-select-option-hover-bg);
+}
+
+/* Skeleton 动画条：跟随中性 fill */
+html .el-skeleton {
+  --el-skeleton-to-color: var(--el-fill-color);
+}
+
+/* Tabs border-card：使用中性 fill，避免混色 */
+html .el-tabs--border-card > .el-tabs__header,
+html.dark .el-tabs--border-card > .el-tabs__header {
+  background: var(--el-fill-color-light);
+}
+
+/* Steps 简约模式底条 */
+html .el-steps--simple,
+html.dark .el-steps--simple {
+  background: var(--el-fill-color-light);
+}
+
+/* Progress：轨道使用中性 fill */
+html .el-progress-bar__outer,
+html.dark .el-progress-bar__outer {
+  background-color: var(--el-fill-color-light);
+}
+
+/* ---------- Element Plus 表格（随 :root / html.dark 与 theme.ts 主色变） ---------- */
+html .el-table {
+  --el-table-bg-color: var(--el-bg-color-overlay);
+  --el-table-tr-bg-color: var(--el-bg-color-overlay);
+  --el-table-header-bg-color: var(--el-table-theme-header-bg);
+  --el-table-striped-row-bg: var(--el-table-theme-stripe-bg);
+  --el-table-row-hover-bg-color: var(--el-table-theme-hover-bg);
+  --el-table-border-color: var(--el-table-theme-border-color);
+  --el-table-border: 1px solid var(--el-table-border-color);
+}
+
+html .el-table.el-table--striped {
+  --el-fill-color-lighter: var(--el-table-theme-stripe-bg);
+}
+
+/*
+ * Element Plus 自绘滚动条（el-scrollbar）：侧栏菜单、表格 body、TagsView、分页等
+ * EP 默认 --el-scrollbar-bg-color 为 text-secondary + 低透明度，与主题无关；此处与上方「全局原生滚动条」同色
+ */
+html .el-scrollbar {
+  --el-scrollbar-bg-color: var(--app-scrollbar-thumb);
+  --el-scrollbar-hover-bg-color: var(--app-scrollbar-thumb-hover);
+  --el-scrollbar-opacity: 1;
+  --el-scrollbar-hover-opacity: 1;
+}
diff --git a/frontend/new-web/src/styles/element-plus.scss b/frontend/new-web/src/styles/element-plus.scss
new file mode 100644
index 00000000..ca8b1c05
--- /dev/null
+++ b/frontend/new-web/src/styles/element-plus.scss
@@ -0,0 +1,68 @@
+$border: 1px solid var(--el-border-color-light);
+
+/* el-dialog */
+.el-dialog {
+  .el-dialog__header {
+    padding: 15px 20px;
+    margin: 0;
+    border-bottom: $border;
+  }
+
+  .el-dialog__body {
+    padding: 20px;
+  }
+
+  .el-dialog__footer {
+    padding: 15px;
+    border-top: $border;
+  }
+}
+
+/** el-drawer */
+.el-drawer {
+  .el-drawer__header {
+    padding: 15px 20px;
+    margin: 0;
+    color: inherit;
+    border-bottom: $border;
+  }
+
+  .el-drawer__body {
+    padding: 20px;
+  }
+
+  .el-drawer__footer {
+    padding: 15px;
+    border-top: $border;
+  }
+}
+
+// 抽屉和对话框底部按钮区域
+.dialog-footer {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+// 列表
+.el-card {
+  .el-card__body {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    overflow: hidden;
+  }
+}
+
+// 表格内操作列：单元格 .cell 默认 overflow:hidden，会裁切 el-button 的 :focus-visible outline（常见为底边缺失）。
+// 仅对「含 el-button」的单元格放开裁剪，避免整表 .cell 全改为 visible 破坏省略号与长文本布局。
+.el-table .el-table__cell .cell:has(.el-button) {
+  overflow: visible;
+}
+
+// 不支持 :has() 的环境：将 outline 略向内收，减轻裁切（效果弱于上一段）。
+@supports not selector(:has(*)) {
+  .el-table .el-button:focus-visible {
+    outline-offset: -1px;
+  }
+}
diff --git a/frontend/new-web/src/styles/index.scss b/frontend/new-web/src/styles/index.scss
new file mode 100644
index 00000000..3eaac759
--- /dev/null
+++ b/frontend/new-web/src/styles/index.scss
@@ -0,0 +1,259 @@
+// ==================== 主题变量导入 ====================
+// 1. 项目自定义变量（侧边栏、布局等）
+@use "./variables";
+
+// 2. 暗黑模式变量（合并）
+@use "./dark/css-vars";
+
+// ==================== 基础样式 ====================
+@use "./reset";
+@use "./element-plus";
+
+// ==================== layout内容样式 ====================
+.app-container {
+  display: flex;
+  flex-direction: column;
+
+  /* 不用 gap：否则 ExportModal/抽屉 等块级兄弟会与 PageContent 之间多出一道 16px，表格用 100vh 时高度也不对 */
+  gap: 0;
+  height: 100%;
+  padding: 16px;
+  overflow: auto;
+  border-radius: 4px;
+}
+
+/* 与搜索区纵向间距（替代原 gap）；主表格占满剩余高度，便于 el-table height:100% */
+.app-container > .el-card.data-table {
+  flex: 1;
+  min-height: 0;
+  margin-top: 16px;
+}
+
+.app-container > .el-card.data-table:first-child {
+  margin-top: 0;
+}
+
+/* 用户管理等：首行是 el-row 时占满高度 */
+.app-container > .el-row {
+  flex: 1;
+  min-height: 0;
+}
+
+/* 块级弹窗宿主不参与纵向 flex 分配，避免挤压主表格 */
+.app-container > .curd-export-modal-host,
+.app-container > .curd-import-modal-host {
+  flex: 0 0 auto;
+}
+
+// ==================== 搜索区域样式 ====================
+.search-container {
+  border: 1px solid var(--el-border-color-light);
+}
+
+// ==================== 表格区域样式 ====================
+.data-table {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  /* 嵌套在 el-row/el-col 等内部时，与上方搜索区留白 */
+  margin-top: 16px;
+
+  // 表格工具栏区域（与 PageSearch+PageContent 各业务页 #toolbar 插槽一致：flex 换行，避免 el-row 挤压右侧）
+  &__toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px 12px;
+    align-items: flex-start;
+    justify-content: space-between;
+    margin-bottom: 16px;
+
+    &--left,
+    &--right {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      align-items: center;
+
+      @media (width >= 768px) {
+        gap: 12px;
+      }
+
+      .el-button {
+        margin-right: 0 !important;
+        margin-left: 0 !important;
+      }
+    }
+
+    &--right {
+      flex-shrink: 0;
+      justify-content: flex-end;
+    }
+  }
+
+  // 表格内容区域
+  &__content {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    height: 100%;
+    margin: 0;
+    overflow: hidden;
+    transition:
+      height 0.3s ease,
+      flex 0.3s ease;
+  }
+
+  // 分页区域
+  .el-pagination {
+    justify-content: flex-end;
+  }
+}
+
+/* 主表格 margin-top 见上；此处保留嵌套在非直接子级时的默认 .data-table margin-top */
+
+// 进度条颜色
+#nprogress .bar {
+  background-color: var(--el-color-primary);
+}
+
+// ==================== 全局原生滚动条（与主题主色混色，Firefox + WebKit） ====================
+* {
+  scrollbar-color: var(--app-scrollbar-thumb) var(--app-scrollbar-track);
+  scrollbar-width: thin;
+}
+
+*::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+*::-webkit-scrollbar-track {
+  background: var(--app-scrollbar-track);
+  border-radius: 4px;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: var(--app-scrollbar-thumb);
+  border-radius: 4px;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: var(--app-scrollbar-thumb-hover);
+}
+
+*::-webkit-scrollbar-corner {
+  background: var(--app-scrollbar-track);
+}
+
+// ==================== 菜单选中态（子菜单） ====================
+// 给左侧/混合左侧以及顶部弹层子菜单的选中项增加背景色，增强可见性
+.el-menu--vertical .el-menu-item.is-active,
+.el-menu--popup .el-menu-item.is-active {
+  background-color: var(--el-color-primary-light-9) !important;
+}
+
+// ==================== 侧边栏激活项「右侧竖杠」指示条 ====================
+// 仅作用于左侧布局、混合布局左侧侧栏（避免影响顶部菜单与弹层菜单）
+.layout__sidebar,
+.layout__sidebar--left {
+  .el-menu--vertical {
+    .el-menu-item.is-active {
+      box-shadow: inset -3px 0 0 0 var(--menu-active-indicator, var(--el-color-primary));
+    }
+  }
+}
+
+// 经典蓝：激活项背景不使用偏白色，改为蓝系轻色差背景
+html.sidebar-color-blue {
+  .el-menu--vertical .el-menu-item.is-active,
+  .el-menu--popup .el-menu-item.is-active {
+    background-color: var(--menu-hover) !important;
+  }
+}
+
+// 混合布局左侧菜单 hover 不单独覆盖：
+// 统一交给 Element Plus 的 --el-menu-hover-bg-color 与 MenuItem.vue 的通用规则，
+// 确保 Mix-left 与 Left 侧边布局保持一致。
+
+// 暗色：hover 由 EP + css-vars 中 html.dark .el-menu 覆写 --el-menu-hover-bg-color 生效；仅激活项需压过 primary-light-9
+html.dark .el-menu--vertical .el-menu-item.is-active,
+html.dark .el-menu--popup .el-menu-item.is-active {
+  background-color: var(--el-menu-active-bg-color) !important;
+}
+
+// 亮色 + 经典蓝：悬浮背景使用经典蓝体系（比底色略深），避免发白
+html.sidebar-color-blue .el-menu {
+  .el-menu-item:hover,
+  .el-sub-menu__title:hover {
+    background-color: var(--menu-hover) !important;
+  }
+}
+
+html.sidebar-color-blue .el-menu--popup {
+  .el-menu-item:hover {
+    background-color: var(--menu-hover) !important;
+  }
+}
+
+// ==================== 窄屏时隐藏菜单文字，只显示图标 ====================
+// 窄屏时隐藏菜单文字，只显示图标
+.hideSidebar {
+  // Top布局和Mix布局的水平菜单
+  &.layout-top .layout__header .el-menu--horizontal,
+  &.layout-mix .layout__header .el-menu--horizontal {
+    .el-menu-item,
+    .el-sub-menu__title {
+      .menu-title,
+      span:not([class*="i-svg"], .el-icon) {
+        display: none !important;
+      }
+    }
+  }
+
+  // Mix布局的左侧菜单
+  &.layout-mix .layout__sidebar--left .el-menu {
+    .el-menu-item,
+    .el-sub-menu__title {
+      .menu-title,
+      span:not([class*="i-svg"], .el-icon) {
+        display: none !important;
+      }
+    }
+  }
+}
+
+// 代码生成：写入本地确认 — 随内容变宽（不超过视口），路径单行、列表区内横向滚动
+.el-message-box.gencode-write-confirm-box {
+  --gencode-write-confirm-max: min(1100px, calc(100vw - 32px));
+  --el-messagebox-width: var(--gencode-write-confirm-max);
+
+  box-sizing: border-box;
+  width: fit-content !important;
+  min-width: min(360px, calc(100vw - 32px));
+  max-width: var(--gencode-write-confirm-max) !important;
+  padding-bottom: 8px;
+
+  .el-message-box__message {
+    box-sizing: border-box;
+    max-width: 100%;
+    padding-top: 4px;
+  }
+
+  .gencode-write-confirm-body {
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .gencode-write-path-list-wrap {
+    max-height: 44vh;
+    overflow: auto;
+    border: 1px solid var(--el-border-color-lighter);
+    border-radius: 8px;
+    box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
+  }
+
+  .gencode-write-path-row:last-child {
+    border-bottom: none !important;
+  }
+}
diff --git a/frontend/new-web/src/styles/reset.scss b/frontend/new-web/src/styles/reset.scss
new file mode 100644
index 00000000..b3b43c7a
--- /dev/null
+++ b/frontend/new-web/src/styles/reset.scss
@@ -0,0 +1,77 @@
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  border-color: currentcolor;
+  border-style: solid;
+  border-width: 0;
+}
+
+#app {
+  width: 100%;
+  height: 100%;
+}
+
+html {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  line-height: 1.5;
+  tab-size: 4;
+  text-size-adjust: 100%;
+}
+
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  font-family:
+    "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑",
+    Arial, sans-serif;
+  line-height: inherit;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizelegibility;
+}
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+img,
+svg {
+  display: inline-block;
+}
+
+svg {
+  // 因icon大小被设置为和字体大小一致，而span等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效果
+  vertical-align: -0.15em;
+}
+
+ul,
+li {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+a,
+a:focus,
+a:hover {
+  color: inherit;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+a:focus,
+a:active,
+div:focus {
+  outline: none;
+}
diff --git a/frontend/new-web/src/styles/variables.module.scss b/frontend/new-web/src/styles/variables.module.scss
new file mode 100644
index 00000000..20a624d7
--- /dev/null
+++ b/frontend/new-web/src/styles/variables.module.scss
@@ -0,0 +1,11 @@
+/* stylelint-disable property-no-unknown */
+:export {
+  sidebar-width: $sidebar-width;
+  navbar-height: $navbar-height;
+  tags-view-height: $tags-view-height;
+  menu-background: $menu-background;
+  menu-text: $menu-text;
+  menu-active-text: $menu-active-text;
+  menu-hover: $menu-hover;
+}
+/* stylelint-enable property-no-unknown */
diff --git a/frontend/new-web/src/styles/variables.scss b/frontend/new-web/src/styles/variables.scss
new file mode 100644
index 00000000..fe52b050
--- /dev/null
+++ b/frontend/new-web/src/styles/variables.scss
@@ -0,0 +1,102 @@
+@forward "element-plus/theme-chalk/src/common/var.scss" with (
+  $colors: (
+    "primary": (
+      // 默认主题色 - 修改此值时需同步修改 src/config/setting.ts 中的 themeColor
+      "base": #4080ff,
+    ),
+    "success": (
+      "base": #23c343,
+    ),
+    "warning": (
+      "base": #ff9a2e,
+    ),
+    "danger": (
+      "base": #f76560,
+    ),
+    "info": (
+      "base": #a9aeb8,
+    ),
+    "default": (
+      "base": #f5f5f5,
+    ),
+  ),
+
+  $bg-color: (
+    "page": #f5f8fd,
+  )
+);
+
+/** 全局SCSS变量 */
+
+:root {
+  --menu-background: #fff; // 菜单背景色
+
+  /* Logo 与侧栏导航同一底（亮色；暗色见 html.dark 与 css-vars --layout-nav-bg） */
+  --sidebar-logo-background: var(--menu-background);
+  --layout-logo-bg: var(--menu-background);
+  --menu-text: #212121; // 菜单文字颜色 浅色主题-白色侧边栏配色下仅占位，实际颜色由 el-menu-item 组件决定
+  --menu-active-text: var(
+    --el-menu-active-color
+  ); // 菜单激活文字颜色 浅色主题-白色侧边栏配色下仅占位，实际颜色由 el-menu-item 组件决定
+
+  --menu-hover: #e6f4ff; // 菜单悬停背景色 浅色主题-白色侧边栏配色下仅占位，实际颜色由 el-menu-item 组件决定
+  --sidebar-logo-text-color: #333; // 侧边栏 Logo 文字颜色
+}
+
+/** 浅色主题-深蓝色侧边栏配色 */
+html.sidebar-color-blue {
+  --menu-background: #304156; // 菜单背景色
+  --menu-text: #bfcbd9; // 菜单文字颜色
+  --menu-active-text: var(--el-menu-active-color); // 菜单激活文字颜色
+  --menu-hover: #263445; // 菜单悬停背景色
+  --el-menu-hover-bg-color: var(--menu-hover); // 顶部/侧边菜单 hover 统一
+  --sidebar-logo-text-color: #fff; // 侧边栏 Logo 文字颜色
+}
+
+/** 暗黑主题 */
+html.dark {
+  /* 侧栏底：与主内容区分区，见 src/styles/dark/css-vars.css --layout-nav-bg */
+  --menu-background: var(--layout-nav-bg);
+  --menu-text: #fff;
+  --menu-active-text: var(--el-menu-active-color);
+  --menu-hover: var(--el-menu-hover-bg-color);
+  --sidebar-logo-background: var(--layout-sidebar-logo-bg);
+  --layout-logo-bg: var(--layout-sidebar-logo-bg);
+  --sidebar-logo-text-color: #fff;
+
+  /** WangEditor Dark */
+
+  /* Textarea - css vars */
+  --w-e-textarea-bg-color: var(--el-bg-color); /* 深色背景 */
+  --w-e-textarea-color: var(--el-text-color-primary); /* 浅色文字 */
+  --w-e-textarea-border-color: var(--el-border-color); /* 较深的边框颜色 */
+  --w-e-textarea-slight-border-color: var(--el-border-color-lighter); /* 更淡一些的边框颜色 */
+  --w-e-textarea-slight-color: var(--el-text-color-secondary); /* 浅灰色，用于不那么重要的元素 */
+  --w-e-textarea-slight-bg-color: var(--el-bg-color-overlay); /* 稍微亮一点的背景色 */
+  --w-e-textarea-selected-border-color: var(--el-color-info-light-5); /* 选中元素时的高亮边框 */
+  --w-e-textarea-handler-bg-color: var(--el-color-primary); /* 工具按钮或交互元素的背景色 */
+
+  /* Toolbar - css vars */
+  --w-e-toolbar-color: var(--el-text-color-regular); /* 工具栏文字颜色 */
+  --w-e-toolbar-bg-color: var(--el-bg-color); /* 工具栏背景颜色 */
+  --w-e-toolbar-active-color: var(--el-text-color-primary); /* 当前激活项的文字颜色 */
+  --w-e-toolbar-active-bg-color: var(--el-fill-color-light); /* 当前激活项的背景颜色 */
+  --w-e-toolbar-disabled-color: var(--el-text-color-secondary); /* 禁用项的颜色 */
+  --w-e-toolbar-border-color: var(--el-border-color-base); /* 工具栏边框颜色 */
+
+  /*  Modal - css vars */
+  --w-e-modal-button-bg-color: var(--el-bg-color-light-3); /* 弹出框按钮背景色 */
+  --w-e-modal-button-border-color: var(--el-border-color-light); /* 弹出框按钮边框颜色 */
+}
+
+$menu-background: var(--menu-background); // 菜单背景色
+$menu-text: var(--menu-text); // 菜单文字颜色
+$menu-active-text: var(--menu-active-text); // 菜单激活文字颜色
+$menu-hover: var(--menu-hover); // 菜单悬停背景色
+$sidebar-logo-background: var(--sidebar-logo-background); // 侧边栏 Logo 背景色
+$sidebar-logo-text-color: var(--sidebar-logo-text-color); // 侧边栏 Logo 文字颜色
+
+$sidebar-width: 210px; // 侧边栏宽度
+$sidebar-width-collapsed: 54px; // 侧边栏收缩宽度
+$navbar-height: 50px; // 导航栏高度
+$tags-view-height: 34px; // TagsView 高度
diff --git a/frontend/new-web/src/types/ai/index.ts b/frontend/new-web/src/types/ai/index.ts
new file mode 100644
index 00000000..a3ef3bfb
--- /dev/null
+++ b/frontend/new-web/src/types/ai/index.ts
@@ -0,0 +1,54 @@
+/**
+ * AI 相关类型定义模块
+ *
+ * 提供 AI 助手相关的类型定义
+ *
+ * ## 主要功能
+ *
+ * - AI 操作处理器类型
+ * - AI 操作配置类型
+ * - AI 命令执行相关类型
+ *
+ * ## 使用场景
+ *
+ * - AI 助手功能开发
+ * - AI 操作处理逻辑
+ * - AI 命令执行流程
+ *
+ * @module types/ai/index
+ * @author FastapiAdmin Team
+ */
+
+/**
+ * AI 操作处理器（简化版）
+ *
+ * 可以是简单函数，也可以是配置对象
+ */
+export type AiActionHandler<T = any> =
+  | ((args: T) => Promise<void> | void)
+  | {
+      /** 执行函数 */
+      execute: (args: T) => Promise<void> | void;
+      /** 是否需要确认（默认 true） */
+      needConfirm?: boolean;
+      /** 确认消息（支持函数或字符串） */
+      confirmMessage?: string | ((args: T) => string);
+      /** 成功消息（支持函数或字符串） */
+      successMessage?: string | ((args: T) => string);
+      /** 是否调用后端 API（默认 false，如果为 true 则自动调用 executeCommand） */
+      callBackendApi?: boolean;
+    };
+
+/**
+ * AI 操作配置
+ */
+export interface UseAiActionOptions {
+  /** 操作映射表：函数名 -> 处理器 */
+  actionHandlers?: Record<string, AiActionHandler>;
+  /** 数据刷新函数（操作完成后调用） */
+  onRefresh?: () => Promise<void> | void;
+  /** 自动搜索处理函数 */
+  onAutoSearch?: (keywords: string) => void;
+  /** 当前路由路径（用于执行命令时传递） */
+  currentRoute?: string;
+}
diff --git a/frontend/new-web/src/types/api/api.d.ts b/frontend/new-web/src/types/api/api.d.ts
deleted file mode 100644
index ad09c30f..00000000
--- a/frontend/new-web/src/types/api/api.d.ts
+++ /dev/null
@@ -1,138 +0,0 @@
-/**
- * API 接口类型定义模块
- *
- * 提供所有后端接口的类型定义
- *
- * ## 主要功能
- *
- * - 通用类型（分页参数、响应结构等）
- * - 认证类型（登录、用户信息等）
- * - 系统管理类型（用户、角色等）
- * - 全局命名空间声明
- *
- * ## 使用场景
- *
- * - API 请求参数类型约束
- * - API 响应数据类型定义
- * - 接口文档类型同步
- *
- * ## 注意事项
- *
- * - 在 .vue 文件使用需要在 eslint.config.mjs 中配置 globals: { Api: 'readonly' }
- * - 使用全局命名空间，无需导入即可使用
- *
- * ## 使用方式
- *
- * ```typescript
- * const params: Api.Auth.LoginParams = { userName: 'admin', password: '123456' }
- * const response: Api.Auth.UserInfo = await fetchUserInfo()
- * ```
- *
- * @module types/api/api
- * @author Art Design Pro Team
- */
-
-declare namespace Api {
-  /** 通用类型 */
-  namespace Common {
-    /** 分页参数 */
-    interface PaginationParams {
-      /** 当前页码 */
-      current: number
-      /** 每页条数 */
-      size: number
-      /** 总条数 */
-      total: number
-    }
-
-    /** 通用搜索参数 */
-    type CommonSearchParams = Pick<PaginationParams, 'current' | 'size'>
-
-    /** 分页响应基础结构 */
-    interface PaginatedResponse<T = any> {
-      records: T[]
-      current: number
-      size: number
-      total: number
-    }
-
-    /** 启用状态 */
-    type EnableStatus = '1' | '2'
-  }
-
-  /** 认证类型 */
-  namespace Auth {
-    /** 登录参数 */
-    interface LoginParams {
-      userName: string
-      password: string
-    }
-
-    /** 登录响应 */
-    interface LoginResponse {
-      token: string
-      refreshToken: string
-    }
-
-    /** 用户信息 */
-    interface UserInfo {
-      buttons: string[]
-      roles: string[]
-      userId: number
-      userName: string
-      email: string
-      avatar?: string
-    }
-  }
-
-  /** 系统管理类型 */
-  namespace SystemManage {
-    /** 用户列表 */
-    type UserList = Api.Common.PaginatedResponse<UserListItem>
-
-    /** 用户列表项 */
-    interface UserListItem {
-      id: number
-      avatar: string
-      status: string
-      userName: string
-      userGender: string
-      nickName: string
-      userPhone: string
-      userEmail: string
-      userRoles: string[]
-      createBy: string
-      createTime: string
-      updateBy: string
-      updateTime: string
-    }
-
-    /** 用户搜索参数 */
-    type UserSearchParams = Partial<
-      Pick<UserListItem, 'id' | 'userName' | 'userGender' | 'userPhone' | 'userEmail' | 'status'> &
-        Api.Common.CommonSearchParams
-    >
-
-    /** 角色列表 */
-    type RoleList = Api.Common.PaginatedResponse<RoleListItem>
-
-    /** 角色列表项 */
-    interface RoleListItem {
-      roleId: number
-      roleName: string
-      roleCode: string
-      description: string
-      enabled: boolean
-      createTime: string
-    }
-
-    /** 角色搜索参数 */
-    type RoleSearchParams = Partial<
-      Pick<RoleListItem, 'roleId' | 'roleName' | 'roleCode' | 'description' | 'enabled'> &
-        Api.Common.CommonSearchParams & {
-          startTime: string | null
-          endTime: string | null
-        }
-    >
-  }
-}
diff --git a/frontend/new-web/src/types/common/index.ts b/frontend/new-web/src/types/common/index.ts
index 7e751d16..741a01de 100644
--- a/frontend/new-web/src/types/common/index.ts
+++ b/frontend/new-web/src/types/common/index.ts
@@ -24,72 +24,77 @@
  * - 减少重复类型定义
  *
  * @module types/common/index
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
-// 导出响应类型
-export * from './response'
-
 // 状态类型
-export type Status = 0 | 1 // 0: 禁用, 1: 启用
+export type Status = 0 | 1; // 0: 禁用, 1: 启用
 
 // 性别类型
-export type Gender = 'male' | 'female' | 'unknown'
+export type Gender = "male" | "female" | "unknown";
 
 // 排序方向
-export type SortOrder = 'ascending' | 'descending'
+export type SortOrder = "ascending" | "descending";
 
 // 操作类型
-export type ActionType = 'create' | 'update' | 'delete' | 'view'
+export type ActionType =
+  | "create"
+  | "update"
+  | "delete"
+  | "view"
+  | "export"
+  | "import"
+  | "patch"
+  | "download";
 
 // 可选的记录类型
-export type Recordable<T = any> = Record<string, T>
+export type Recordable<T = any> = Record<string, T>;
 
 // 键值对类型
 export type KeyValue<T = any> = {
-  key: string
-  value: T
-  label?: string
-}
+  key: string;
+  value: T;
+  label?: string;
+};
 
 // 时间范围类型
 export interface TimeRange {
-  startTime: string
-  endTime: string
+  startTime: string;
+  endTime: string;
 }
 
 // 文件类型
 export interface FileInfo {
-  name: string
-  url: string
-  size: number
-  type: string
-  lastModified?: number
+  name: string;
+  url: string;
+  size: number;
+  type: string;
+  lastModified?: number;
 }
 
 // 坐标类型
 export interface Position {
-  x: number
-  y: number
+  x: number;
+  y: number;
 }
 
 // 尺寸类型
 export interface Size {
-  width: number
-  height: number
+  width: number;
+  height: number;
 }
 
 // 响应式断点类型
-export type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+export type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl";
 
 // 主题类型
-export type ThemeMode = 'light' | 'dark' | 'auto'
+export type ThemeMode = "light" | "dark" | "auto";
 
 // 语言类型
-export type Language = 'zh-CN' | 'en-US'
+export type Language = "zh-CN" | "en-US";
 
 // 环境类型
-export type Environment = 'development' | 'production' | 'test'
+export type Environment = "development" | "production" | "test";
 
 // 弹窗类型
-export type DialogType = 'add' | 'edit'
+export type DialogType = "add" | "edit";
diff --git a/frontend/new-web/src/types/common/response.ts b/frontend/new-web/src/types/common/response.ts
deleted file mode 100644
index 4a5fdabf..00000000
--- a/frontend/new-web/src/types/common/response.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * API 响应类型定义模块
- *
- * 提供统一的 API 响应结构类型定义
- *
- * ## 主要功能
- *
- * - 基础响应结构定义
- * - 泛型支持（适配不同数据类型）
- * - 统一的响应格式约束
- *
- * ## 使用场景
- *
- * - API 请求响应类型约束
- * - 接口数据类型定义
- * - 响应数据解析
- *
- * @module types/common/response
- * @author Art Design Pro Team
- */
-
-/** 基础 API 响应结构 */
-export interface BaseResponse<T = unknown> {
-  /** 状态码 */
-  code: number
-  /** 消息 */
-  msg: string
-  /** 数据 */
-  data: T
-}
diff --git a/frontend/new-web/src/types/component/chart.ts b/frontend/new-web/src/types/component/chart.ts
index c3225c90..e6c2e3e3 100644
--- a/frontend/new-web/src/types/component/chart.ts
+++ b/frontend/new-web/src/types/component/chart.ts
@@ -25,257 +25,257 @@
  * - 图表事件处理
  *
  * @module types/component/chart
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
-import type { EChartsOption } from '@/plugins/echarts'
+import type { EChartsOption } from "@/plugins/echarts";
 
 // 图例位置类型
-export type LegendPosition = 'bottom' | 'top' | 'left' | 'right'
+export type LegendPosition = "bottom" | "top" | "left" | "right";
 
 export type SymbolType =
-  | 'circle'
-  | 'rect'
-  | 'roundRect'
-  | 'triangle'
-  | 'diamond'
-  | 'pin'
-  | 'arrow'
-  | 'none'
+  | "circle"
+  | "rect"
+  | "roundRect"
+  | "triangle"
+  | "diamond"
+  | "pin"
+  | "arrow"
+  | "none";
 
 // 图表主题配置
 export interface ChartThemeConfig {
   /** 图表高度 */
-  chartHeight: string
+  chartHeight: string;
   /** 字体大小 */
-  fontSize: number
+  fontSize: number;
   /** 字体颜色 */
-  fontColor: string
+  fontColor: string;
   /** 主题颜色 */
-  themeColor: string
+  themeColor: string;
   /** 颜色组 */
-  colors: string[]
+  colors: string[];
 }
 
 // 图表初始化选项
 export interface UseChartOptions {
   /** 初始化选项 */
-  initOptions?: EChartsOption
+  initOptions?: EChartsOption;
   /** 延迟初始化时间(ms) */
-  initDelay?: number
+  initDelay?: number;
   /** IntersectionObserver阈值 */
-  threshold?: number
+  threshold?: number;
   /** 是否自动响应主题变化 */
-  autoTheme?: boolean
+  autoTheme?: boolean;
 }
 
 // 基础图表 Props 接口 - 统一所有图表的基础属性
 export interface BaseChartProps {
   /** 图表高度 */
-  height?: string
+  height?: string;
   /** 是否加载中 */
-  loading?: boolean
-  isEmpty?: boolean
+  loading?: boolean;
+  isEmpty?: boolean;
   /** 颜色配置 */
-  colors?: string[]
+  colors?: string[];
 }
 
 // 轴线显示控制接口 - 统一轴线相关配置
 export interface AxisDisplayProps {
   /** 是否显示坐标轴标签 */
-  showAxisLabel?: boolean
+  showAxisLabel?: boolean;
   /** 是否显示坐标轴线 */
-  showAxisLine?: boolean
+  showAxisLine?: boolean;
   /** 是否显示分割线 */
-  showSplitLine?: boolean
+  showSplitLine?: boolean;
 }
 
 // 交互显示控制接口 - 统一交互相关配置
 export interface InteractionProps {
   /** 是否显示提示框 */
-  showTooltip?: boolean
+  showTooltip?: boolean;
   /** 是否显示图例 */
-  showLegend?: boolean
+  showLegend?: boolean;
   /** 图例位置 */
-  legendPosition?: LegendPosition
+  legendPosition?: LegendPosition;
 }
 
 // 柱状图数据项接口
 export interface BarDataItem {
   /** 系列名称 */
-  name: string
+  name: string;
   /** 数据值 */
-  data: number[]
+  data: number[];
   /** 柱状图宽度 */
-  barWidth?: string | number
+  barWidth?: string | number;
   /** 堆叠分组名称 */
-  stack?: string
+  stack?: string;
 }
 
 // 柱状图 Props 接口 - 统一柱状图配置
 export interface BarChartProps extends BaseChartProps, AxisDisplayProps, InteractionProps {
   /** 图表数据 - 支持单组数据或多组数据 */
-  data: number[] | BarDataItem[]
+  data: number[] | BarDataItem[];
   /** X轴标签数据 */
-  xAxisData?: string[]
+  xAxisData?: string[];
   /** 柱状图宽度 */
-  barWidth?: string | number
+  barWidth?: string | number;
   /** 是否堆叠显示 */
-  stack?: boolean
+  stack?: boolean;
   /** 圆角 */
-  borderRadius?: number | number[]
+  borderRadius?: number | number[];
 }
 
 // 折线图数据项接口
 export interface LineDataItem {
   /** 系列名称 */
-  name: string
+  name: string;
   /** 数据值 */
-  data: number[]
+  data: number[];
   /** 线条宽度 */
-  lineWidth?: number
+  lineWidth?: number;
   /** 是否显示区域填充 */
-  showAreaColor?: boolean
+  showAreaColor?: boolean;
   /** 区域样式配置 */
   areaStyle?: {
     /** 渐变开始透明度 */
-    startOpacity?: number
+    startOpacity?: number;
     /** 渐变结束透明度 */
-    endOpacity?: number
+    endOpacity?: number;
     /** 自定义 ECharts areaStyle 配置 */
-    custom?: any
-  }
+    custom?: any;
+  };
   /** 是否平滑曲线 */
-  smooth?: boolean
+  smooth?: boolean;
   /** 数据点符号 */
-  symbol?: SymbolType
+  symbol?: SymbolType;
   /** 数据点大小 */
-  symbolSize?: number
+  symbolSize?: number;
 }
 
 // 折线图 Props 接口 - 统一折线图配置
 export interface LineChartProps extends BaseChartProps, AxisDisplayProps, InteractionProps {
   /** 图表数据 - 支持单组数据或多组数据 */
-  data: number[] | LineDataItem[]
+  data: number[] | LineDataItem[];
   /** X轴标签数据 */
-  xAxisData?: string[]
+  xAxisData?: string[];
   /** 线条宽度 */
-  lineWidth?: number
+  lineWidth?: number;
   /** 是否显示区域填充 */
-  showAreaColor?: boolean
+  showAreaColor?: boolean;
   /** 是否平滑曲线 */
-  smooth?: boolean
+  smooth?: boolean;
   /** 数据点符号 */
-  symbol?: SymbolType
+  symbol?: SymbolType;
   /** 数据点大小 */
-  symbolSize?: number
+  symbolSize?: number;
   /** 多数据动画延迟间隔（毫秒） */
-  animationDelay?: number
+  animationDelay?: number;
 }
 
 // 雷达图数据项接口
 export interface RadarDataItem {
   /** 系列名称 */
-  name: string
+  name: string;
   /** 数据值 */
-  value: number[]
+  value: number[];
 }
 
 // 雷达图 Props 接口 - 统一雷达图配置
 export interface RadarChartProps extends BaseChartProps, InteractionProps {
   /** 雷达图指标配置 */
-  indicator?: Array<{ name: string; max: number }>
+  indicator?: Array<{ name: string; max: number }>;
   /** 图表数据 */
-  data?: RadarDataItem[]
+  data?: RadarDataItem[];
 }
 
 // 饼图/环形图数据项接口
 export interface PieDataItem {
   /** 数据值 */
-  value: number
+  value: number;
   /** 数据名称 */
-  name: string
+  name: string;
 }
 
 // 环形图 Props 接口 - 统一环形图配置
 export interface RingChartProps extends BaseChartProps, InteractionProps {
   /** 图表数据 */
-  data: PieDataItem[]
+  data: PieDataItem[];
   /** 内外半径 */
-  radius?: string[]
+  radius?: string[];
   /** 边框圆角 */
-  borderRadius?: number
+  borderRadius?: number;
   /** 中心文本 */
-  centerText?: string
+  centerText?: string;
   /** 是否显示标签 */
-  showLabel?: boolean
+  showLabel?: boolean;
 }
 
 // K线图数据项接口
 export interface KLineDataItem {
   /** 时间标签 */
-  time: string
+  time: string;
   /** 开盘价 */
-  open: number
+  open: number;
   /** 收盘价 */
-  close: number
+  close: number;
   /** 最高价 */
-  high: number
+  high: number;
   /** 最低价 */
-  low: number
+  low: number;
 }
 
 // K线图 Props 接口 - 统一K线图配置
 export interface KLineChartProps extends BaseChartProps {
   /** 图表数据 */
-  data?: KLineDataItem[]
+  data?: KLineDataItem[];
   /** 是否显示数据缩放控件 */
-  showDataZoom?: boolean
+  showDataZoom?: boolean;
   /** 数据缩放初始开始位置 */
-  dataZoomStart?: number
+  dataZoomStart?: number;
   /** 数据缩放初始结束位置 */
-  dataZoomEnd?: number
+  dataZoomEnd?: number;
 }
 
 // 散点图数据项接口
 export interface ScatterDataItem {
   /** 坐标值 [x, y] */
-  value: number[]
+  value: number[];
 }
 
 // 散点图 Props 接口 - 统一散点图配置
 export interface ScatterChartProps extends BaseChartProps, AxisDisplayProps, InteractionProps {
   /** 图表数据 */
-  data?: ScatterDataItem[]
+  data?: ScatterDataItem[];
   /** 散点大小 */
-  symbolSize?: number
+  symbolSize?: number;
 }
 
 // 双柱对比图 Props 接口 - 统一双柱对比图配置
 export interface DualBarCompareChartProps extends BaseChartProps {
   /** 上方数据 */
-  topData: number[]
+  topData: number[];
   /** 下方数据 */
-  bottomData: number[]
+  bottomData: number[];
   /** X轴标签数据 */
-  xAxisData: string[]
+  xAxisData: string[];
   /** 上方柱子颜色 */
-  topColor?: string
+  topColor?: string;
   /** 下方柱子颜色 */
-  bottomColor?: string
+  bottomColor?: string;
   /** 柱状图宽度 */
-  barWidth?: number
+  barWidth?: number;
 }
 
 // 地图图表 Props 接口 - 统一地图图表配置
 export interface MapChartProps extends BaseChartProps {
   /** 地图数据 */
-  mapData?: any[]
+  mapData?: any[];
   /** 选中区域 */
-  selectedRegion?: string
+  selectedRegion?: string;
   /** 是否显示标签 */
-  showLabels?: boolean
+  showLabels?: boolean;
   /** 是否显示散点 */
-  showScatter?: boolean
+  showScatter?: boolean;
 }
 
 // 双向堆叠柱状图 Props 接口（人口金字塔样式）
@@ -284,41 +284,41 @@ export interface BidirectionalBarChartProps
     AxisDisplayProps,
     InteractionProps {
   /** 正向数据（向上显示） */
-  positiveData: number[]
+  positiveData: number[];
   /** 负向数据（向下显示） */
-  negativeData: number[]
+  negativeData: number[];
   /** X轴标签数据 */
-  xAxisData?: string[]
+  xAxisData?: string[];
   /** 正向数据名称 */
-  positiveName?: string
+  positiveName?: string;
   /** 负向数据名称 */
-  negativeName?: string
+  negativeName?: string;
   /** 柱状图宽度 */
-  barWidth?: string | number
+  barWidth?: string | number;
   /** Y轴最小值 */
-  yAxisMin?: number
+  yAxisMin?: number;
   /** Y轴最大值 */
-  yAxisMax?: number
+  yAxisMax?: number;
   /** 是否显示数据标签 */
-  showDataLabel?: boolean
+  showDataLabel?: boolean;
   /** 正向数据圆角配置 */
-  positiveBorderRadius?: number | number[]
+  positiveBorderRadius?: number | number[];
   /** 负向数据圆角配置 */
-  negativeBorderRadius?: number | number[]
+  negativeBorderRadius?: number | number[];
 }
 
 // 图表配置生成器函数类型
-export type ChartOptionGenerator = () => EChartsOption
+export type ChartOptionGenerator = () => EChartsOption;
 
 // 图表事件回调类型
-export type ChartEventCallback = (params: any) => void
+export type ChartEventCallback = (params: any) => void;
 
 // 图表错误信息接口
 export interface ChartError {
   /** 错误码 */
-  code: string
+  code: string;
   /** 错误信息 */
-  message: string
+  message: string;
   /** 错误详情 */
-  details?: any
+  details?: any;
 }
diff --git a/frontend/new-web/src/types/component/index.ts b/frontend/new-web/src/types/component/index.ts
index b9e90c6a..c4169967 100644
--- a/frontend/new-web/src/types/component/index.ts
+++ b/frontend/new-web/src/types/component/index.ts
@@ -18,128 +18,128 @@
  * - 组件事件参数类型
  *
  * @module types/component/index
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
 // 搜索组件类型
 export type SearchComponentType =
-  | 'input'
-  | 'select'
-  | 'radio'
-  | 'checkbox'
-  | 'date'
-  | 'datetime'
-  | 'daterange'
-  | 'datetimerange'
-  | 'month'
-  | 'monthrange'
-  | 'year'
-  | 'yearrange'
-  | 'week'
-  | 'time'
-  | 'timerange'
+  | "input"
+  | "select"
+  | "radio"
+  | "checkbox"
+  | "date"
+  | "datetime"
+  | "daterange"
+  | "datetimerange"
+  | "month"
+  | "monthrange"
+  | "year"
+  | "yearrange"
+  | "week"
+  | "time"
+  | "timerange";
 
 // 搜索框值变化参数
 export interface SearchChangeParams {
-  prop: string
-  val: unknown
+  prop: string;
+  val: unknown;
 }
 
 // 表格列配置接口
 export interface ColumnOption<T = any> {
   // 列类型
-  type?: 'selection' | 'expand' | 'index' | 'globalIndex'
+  type?: "selection" | "expand" | "index" | "globalIndex";
   // 列属性名
-  prop?: string
+  prop?: string;
   // 列标题
-  label?: string
+  label?: string;
   // 列宽度
-  width?: string | number
+  width?: string | number;
   // 最小列宽度
-  minWidth?: string | number
+  minWidth?: string | number;
   // 固定列
-  fixed?: boolean | 'left' | 'right'
+  fixed?: boolean | "left" | "right";
   // 是否可排序
-  sortable?: boolean | 'custom'
+  sortable?: boolean | "custom";
   // 过滤器选项
-  filters?: any[]
+  filters?: any[];
   // 过滤方法
-  filterMethod?: (value: any, row: any) => boolean
+  filterMethod?: (value: any, row: any) => boolean;
   // 过滤器位置
-  filterPlacement?: string
+  filterPlacement?: string;
   // 是否禁用
-  disabled?: boolean
+  disabled?: boolean;
   // 是否显示列
-  visible?: boolean
+  visible?: boolean;
   // 是否选中显示
-  checked?: boolean
+  checked?: boolean;
   // 自定义渲染函数
-  formatter?: (row: T) => any
+  formatter?: (row: T) => any;
   // 插槽相关配置
   // 是否使用插槽渲染内容
-  useSlot?: boolean
+  useSlot?: boolean;
   // 插槽名称（默认为 prop 值）
-  slotName?: string
+  slotName?: string;
   // 是否使用表头插槽
-  useHeaderSlot?: boolean
+  useHeaderSlot?: boolean;
   // 表头插槽名称（默认为 `${prop}-header`）
-  headerSlotName?: string
+  headerSlotName?: string;
   // 其他属性
-  [key: string]: any
+  [key: string]: any;
 }
 
 // 分页配置
 export interface PaginationConfig {
   // 当前页
-  currentPage: number
+  currentPage: number;
   // 每页条数
-  pageSize: number
+  pageSize: number;
   // 总条数
-  total: number
+  total: number;
   // 每页显示个数选择器的选项
-  pageSizes?: number[]
+  pageSizes?: number[];
   // 组件布局
-  layout?: string
+  layout?: string;
   // 是否为小型分页
-  small?: boolean
+  small?: boolean;
 }
 
 // 表单规则
 export interface FormRule {
   // 是否必填
-  required?: boolean
+  required?: boolean;
   // 错误提示信息
-  message?: string
+  message?: string;
   // 触发方式
-  trigger?: string | string[]
+  trigger?: string | string[];
   // 最小长度
-  min?: number
+  min?: number;
   // 最大长度
-  max?: number
+  max?: number;
   // 正则表达式
-  pattern?: RegExp
+  pattern?: RegExp;
   // 自定义验证函数
-  validator?: (rule: any, value: any, callback: any) => void
+  validator?: (rule: any, value: any, callback: any) => void;
 }
 
 // 对话框配置
 export interface DialogConfig {
   // 标题
-  title: string
+  title: string;
   // 是否显示
-  visible: boolean
+  visible: boolean;
   // 宽度
-  width?: string | number
+  width?: string | number;
   // 是否可以通过点击 modal 关闭
-  closeOnClickModal?: boolean
+  closeOnClickModal?: boolean;
   // 是否可以通过按下 ESC 关闭
-  closeOnPressEscape?: boolean
+  closeOnPressEscape?: boolean;
   // 是否显示关闭按钮
-  showClose?: boolean
+  showClose?: boolean;
   // 是否在 Dialog 出现时将 body 滚动锁定
-  lockScroll?: boolean
+  lockScroll?: boolean;
   // 是否显示遮罩层
-  modal?: boolean
+  modal?: boolean;
   // 自定义类名
-  customClass?: string
+  customClass?: string;
 }
diff --git a/frontend/new-web/src/types/config/index.ts b/frontend/new-web/src/types/config/index.ts
index dd144dea..f1a89529 100644
--- a/frontend/new-web/src/types/config/index.ts
+++ b/frontend/new-web/src/types/config/index.ts
@@ -21,191 +21,191 @@
  * - 配置数据验证
  *
  * @module types/config/index
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
-import { MenuTypeEnum, SystemThemeEnum } from '@/enums/appEnum'
-import { MenuThemeType, SystemThemeTypes } from '@/types/store'
+import { MenuTypeEnum, SystemThemeEnum } from "@/enums/appEnum";
+import { MenuThemeType, SystemThemeTypes } from "@/types/store";
 
 // 主题设置
 export interface ThemeSetting {
   /** 主题名称 */
-  name: string
+  name: string;
   /** 系统主题类型 */
-  theme: SystemThemeEnum
+  theme: SystemThemeEnum;
   /** 主题颜色数组 */
-  color: string[]
+  color: string[];
   /** 左侧线条颜色 */
-  leftLineColor: string
+  leftLineColor: string;
   /** 右侧线条颜色 */
-  rightLineColor: string
+  rightLineColor: string;
   /** 主题图片 */
-  img: string
+  img: string;
 }
 
 // 菜单布局
 export interface MenuLayout {
   /** 布局名称 */
-  name: string
+  name: string;
   /** 菜单类型值 */
-  value: MenuTypeEnum
+  value: MenuTypeEnum;
   /** 布局预览图 */
-  img: string
+  img: string;
   /** 布局描述 */
-  description?: string
+  description?: string;
 }
 
 // 节日配置
 export interface FestivalConfig {
   /** 节日日期（单日）或开始日期（日期范围） */
-  date: string
+  date: string;
   /** 节日结束日期（可选，用于跨日期节日） */
-  endDate?: string
+  endDate?: string;
   /** 节日名称 */
-  name: string
+  name: string;
   /** 烟花图片 */
-  image: string
+  image: string;
   /** 滚动文本 */
-  scrollText: string
+  scrollText: string;
   /** 是否激活 */
-  isActive?: boolean
+  isActive?: boolean;
   /** 烟花播放次数（可选，默认为 3 次） */
-  count?: number
+  count?: number;
 }
 
 // 系统基础配置
 export interface SystemBasicConfig {
   // 系统名称
-  name: string
+  name: string;
   // 系统描述
-  description?: string
+  description?: string;
   // 系统logo
-  logo?: string
+  logo?: string;
   // 系统favicon
-  favicon?: string
+  favicon?: string;
   // 版权信息
-  copyright?: string
+  copyright?: string;
 }
 
 // 快速入口基础项
 export interface FastEnterBaseItem {
   /** 名称 */
-  name: string
+  name: string;
   /** 是否启用 */
-  enabled?: boolean
+  enabled?: boolean;
   /** 排序权重 */
-  order?: number
+  order?: number;
   /** 路由名称 */
-  routeName?: string
+  routeName?: string;
   /** 外部链接 */
-  link?: string
+  link?: string;
 }
 
 // 快速入口应用项
 export interface FastEnterApplication extends FastEnterBaseItem {
   /** 应用描述 */
-  description: string
+  description: string;
   /** 图标代码 */
-  icon: string
+  icon: string;
   /** 图标颜色 */
-  iconColor: string
+  iconColor: string;
 }
 
 // 快速链接项
-export type FastEnterQuickLink = FastEnterBaseItem
+export type FastEnterQuickLink = FastEnterBaseItem;
 
 // 快速入口配置
 export interface FastEnterConfig {
   /** 应用列表 */
-  applications: FastEnterApplication[]
+  applications: FastEnterApplication[];
   /** 快速链接 */
-  quickLinks: FastEnterQuickLink[]
+  quickLinks: FastEnterQuickLink[];
   /** 显示条件（屏幕宽度） */
-  minWidth?: number
+  minWidth?: number;
 }
 
 // 系统配置
 export interface SystemConfig {
   // 系统基础信息
-  systemInfo: SystemBasicConfig
+  systemInfo: SystemBasicConfig;
   // 系统主题样式
-  systemThemeStyles: SystemThemeTypes
+  systemThemeStyles: SystemThemeTypes;
   // 设置主题列表
-  settingThemeList: ThemeSetting[]
+  settingThemeList: ThemeSetting[];
   // 菜单布局列表
-  menuLayoutList: MenuLayout[]
+  menuLayoutList: MenuLayout[];
   // 主题列表
-  themeList: MenuThemeType[]
+  themeList: MenuThemeType[];
   // 暗色菜单样式
-  darkMenuStyles: MenuThemeType[]
+  darkMenuStyles: MenuThemeType[];
   // 系统主色调
-  systemMainColor: readonly string[]
+  systemMainColor: readonly string[];
   // 快速入口配置
-  fastEnter?: FastEnterConfig
+  fastEnter?: FastEnterConfig;
   // 顶部栏功能配置
-  headerBar?: HeaderBarFeatureConfig
+  headerBar?: HeaderBarFeatureConfig;
 }
 
 // 环境配置
 export interface EnvConfig {
   // 环境名称
-  NODE_ENV: string
+  NODE_ENV: string;
   // 应用版本
-  VITE_VERSION: string
+  VITE_VERSION: string;
   // 应用端口
-  VITE_PORT: string
+  VITE_PORT: string;
   // 应用基础路径
-  VITE_BASE_URL: string
+  VITE_BASE_URL: string;
   // API 地址
-  VITE_API_URL: string
+  VITE_API_URL: string;
   // 是否开启 Mock
-  VITE_USE_MOCK?: string
+  VITE_USE_MOCK?: string;
   // 是否开启压缩
-  VITE_USE_GZIP?: string
+  VITE_USE_GZIP?: string;
   // 是否开启 CDN
-  VITE_USE_CDN?: string
+  VITE_USE_CDN?: string;
 }
 
 // 应用配置
 export interface AppConfig extends SystemConfig {
   // 环境配置
-  env: EnvConfig
+  env: EnvConfig;
   // 开发模式
-  isDev: boolean
+  isDev: boolean;
   // 生产模式
-  isProd: boolean
+  isProd: boolean;
   // 测试模式
-  isTest: boolean
+  isTest: boolean;
 }
 
 // 功能配置项基础接口
 export interface FeatureConfigItem {
-  enabled: boolean
-  description: string
+  enabled: boolean;
+  description: string;
 }
 
 // 顶部栏功能配置接口
 export interface HeaderBarFeatureConfig {
   /** 菜单按钮 */
-  menuButton: FeatureConfigItem
+  menuButton: FeatureConfigItem;
   /** 刷新按钮 */
-  refreshButton: FeatureConfigItem
+  refreshButton: FeatureConfigItem;
   /** 快速入口 */
-  fastEnter: FeatureConfigItem
+  fastEnter: FeatureConfigItem;
   /** 面包屑导航 */
-  breadcrumb: FeatureConfigItem
+  breadcrumb: FeatureConfigItem;
   /** 全局搜索 */
-  globalSearch: FeatureConfigItem
+  globalSearch: FeatureConfigItem;
   /** 全屏功能 */
-  fullscreen: FeatureConfigItem
+  fullscreen: FeatureConfigItem;
   /** 通知功能 */
-  notification: FeatureConfigItem
+  notification: FeatureConfigItem;
   /** 聊天功能 */
-  chat: FeatureConfigItem
+  chat: FeatureConfigItem;
   /** 多语言切换 */
-  language: FeatureConfigItem
+  language: FeatureConfigItem;
   /** 设置面板 */
-  settings: FeatureConfigItem
+  settings: FeatureConfigItem;
   /** 主题切换 */
-  themeToggle: FeatureConfigItem
+  themeToggle: FeatureConfigItem;
 }
diff --git a/frontend/new-web/src/types/directive/directive.d.ts b/frontend/new-web/src/types/directive/directive.d.ts
deleted file mode 100644
index eb0154e7..00000000
--- a/frontend/new-web/src/types/directive/directive.d.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import type {
-  AuthDirective,
-  RolesDirective,
-  RippleDirective,
-  HighlightDirective
-} from '@/directives'
-
-declare module 'vue' {
-  export interface GlobalDirectives {
-    vAuth: AuthDirective
-    vRoles: RolesDirective
-    vRipple: RippleDirective
-    vHighlight: HighlightDirective
-  }
-}
diff --git a/frontend/new-web/src/types/directive/index.ts b/frontend/new-web/src/types/directive/index.ts
new file mode 100644
index 00000000..06588d71
--- /dev/null
+++ b/frontend/new-web/src/types/directive/index.ts
@@ -0,0 +1,15 @@
+import type {
+  AuthDirective,
+  RolesDirective,
+  RippleDirective,
+  HighlightDirective,
+} from "@/directives";
+
+declare module "vue" {
+  export interface GlobalDirectives {
+    vAuth: AuthDirective;
+    vRoles: RolesDirective;
+    vRipple: RippleDirective;
+    vHighlight: HighlightDirective;
+  }
+}
diff --git a/frontend/new-web/src/types/env.d.ts b/frontend/new-web/src/types/env.d.ts
new file mode 100644
index 00000000..c00b336d
--- /dev/null
+++ b/frontend/new-web/src/types/env.d.ts
@@ -0,0 +1,72 @@
+// https://cn.vitejs.dev/guide/env-and-mode
+
+/// <reference types="vite/client" />
+/// <reference types="element-plus/global" />
+
+// TypeScript 类型提示都为 string： https://github.com/vitejs/vite/issues/6930
+interface ImportMetaEnv {
+  /** 环境标识 */
+  VITE_APP_ENV: string;
+
+  /** 项目名称 */
+  VITE_APP_TITLE: string;
+
+  /** API 请求基础路径 */
+  VITE_API_URL: string;
+
+  /** 开发环境代理目标地址 */
+  VITE_API_BASE_URL: string;
+
+  /** 代理前缀 */
+  VITE_APP_BASE_API: string;
+
+  /** 开发服务器端口 */
+  VITE_PORT: number;
+
+  /** 网络请求超时时间（毫秒） */
+  VITE_API_TIMEOUT: number;
+
+  /** WebSocket 端点 */
+  VITE_APP_WS_ENDPOINT: string;
+
+  /** 应用部署基础路径 */
+  VITE_BASE_URL: string;
+
+  /** 权限模式 */
+  VITE_ACCESS_MODE: string;
+
+  /** 跨域请求是否携带 Cookie */
+  VITE_WITH_CREDENTIALS: string;
+
+  /** 是否在控制台输出路由信息 */
+  VITE_OPEN_ROUTE_INFO: string;
+
+  /** 锁屏加密密钥 */
+  VITE_LOCK_ENCRYPT_KEY: string;
+
+  /** 是否删除控制台输出 */
+  VITE_DROP_CONSOLE: string;
+
+  /** 应用版本号 */
+  VITE_VERSION: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
+
+/**
+ * 平台的名称、版本、运行所需的`node`版本、依赖、构建时间的类型提示
+ */
+declare const __APP_INFO__: {
+  pkg: {
+    name: string;
+    version: string;
+    engines: {
+      node: string;
+    };
+    dependencies: Record<string, string>;
+    devDependencies: Record<string, string>;
+  };
+  buildTimestamp: number;
+};
diff --git a/frontend/new-web/src/types/global.d.ts b/frontend/new-web/src/types/global.d.ts
new file mode 100644
index 00000000..d34e7c9e
--- /dev/null
+++ b/frontend/new-web/src/types/global.d.ts
@@ -0,0 +1,323 @@
+declare global {
+  /**
+   * 页签对象
+   */
+  interface TagView {
+    /** 页签名称 */
+    name: string;
+    /** 页签标题 */
+    title: string;
+    /** 页签路由路径 */
+    path: string;
+    /** 页签路由完整路径 */
+    fullPath: string;
+    /** 页签图标 */
+    icon?: string;
+    /** 是否固定页签 */
+    affix?: boolean;
+    /** 是否开启缓存 */
+    keepAlive?: boolean;
+    /** 路由查询参数 */
+    query?: any;
+  }
+
+  /**
+   * 系统设置
+   */
+  interface AppSettings {
+    /** 系统名称 */
+    name: string;
+    /** 系统标题 */
+    title: string;
+    /** 系统版本 */
+    version: string;
+    /** 是否显示设置按钮 */
+    showSettings: boolean;
+    /** 是否显示菜单搜索 */
+    showMenuSearch: boolean;
+    /** 是否显示全屏切换 */
+    showFullscreen: boolean;
+    /** 是否显示布局大小 */
+    showSizeSelect: boolean;
+    /** 是否显示语言选择 */
+    showLangSelect: boolean;
+    /** 是否显示通知 */
+    showNotification: boolean;
+    /** 是否显示多标签导航 */
+    showTagsView: boolean;
+    /** 是否显示应用Logo */
+    showAppLogo: boolean;
+    /** 导航栏布局(left|top|mix) */
+    layout: "left" | "top" | "mix";
+    /** 主题颜色 */
+    themeColor: string;
+    /** 主题模式(dark|light) */
+    theme: import("@/enums/settings/theme.enum").ThemeMode;
+    /** 布局大小(default |large |small) */
+    size: string;
+    /** 语言( zh-cn| en) */
+    language: string;
+    /** 是否显示水印 */
+    showWatermark: boolean;
+    /** 水印内容 */
+    watermarkContent: string;
+    /** 侧边栏配色方案 */
+    sidebarColorScheme: "classic-blue" | "minimal-white";
+    /** 项目引导 */
+    guideVisible: boolean;
+    /** 是否启动引导 */
+    showGuide: boolean;
+    /** 是否开启AI助手 */
+    aiEnabled: boolean;
+    /** 是否开启灰色模式 */
+    grayMode: boolean;
+    /** 页面切换动画 */
+    pageSwitchingAnimation: string;
+  }
+
+  /**
+   * 下拉选项数据类型
+   */
+  interface OptionType {
+    /** 值 */
+    value: string | number;
+    /** 文本 */
+    label: string;
+    /** 子列表  */
+    children?: OptionType[];
+  }
+
+  /**
+   * 导入结果
+   */
+  interface ExcelResult {
+    /** 状态码 */
+    code: string;
+    /** 无效数据条数 */
+    invalidCount: number;
+    /** 有效数据条数 */
+    validCount: number;
+    /** 错误信息 */
+    messageList: Array<string>;
+  }
+
+  /**
+   * 基础响应结构
+   */
+  interface ApiResponse<T = any> {
+    code: number;
+    data: T;
+    msg: string;
+    status_code: number;
+    success: boolean;
+  }
+
+  /**
+   * 分页查询参数
+   */
+  interface PageQuery {
+    page_no: number;
+    page_size: number;
+  }
+
+  /**
+   * 分页响应对象
+   */
+  interface PageResult<T = any> {
+    items: T[];
+    total: number;
+    page_no: number;
+    page_size: number;
+    has_next: boolean;
+  }
+
+  /**
+   * 创建人
+   */
+  interface CommonType {
+    id?: number;
+    name?: string;
+  }
+
+  /**
+   * 租户
+   */
+  interface TenantType {
+    id?: number;
+    name?: string;
+  }
+
+  /**
+   * 基础类型
+   */
+  interface BaseType {
+    index?: number;
+    id?: number;
+    uuid?: string;
+    status?: string;
+    description?: string;
+    created_time?: string;
+    updated_time?: string;
+    deleted_time?: string;
+    deleted_id?: number;
+  }
+
+  /**
+   * 基础表单类型
+   */
+  interface BaseFormType {
+    id?: number;
+    status?: string;
+    description?: string;
+    remark?: string;
+    order?: number;
+  }
+
+  /**
+   * 批量操作类型
+   */
+  interface BatchType {
+    ids: number[];
+    status: string;
+  }
+
+  /**
+   * 上传文件路径
+   */
+  interface UploadFilePath {
+    file_path: string;
+    file_name: string;
+    origin_name: string;
+    file_url: string;
+  }
+
+  /**
+   * 通用搜索参数
+   */
+  type CommonSearchParams = Pick<PageQuery, "page_no" | "page_size">;
+
+  /**
+   * 启用状态
+   */
+  type EnableStatus = "0" | "1";
+
+  /**
+   * 登录参数
+   */
+  interface LoginParams {
+    username: string;
+    password: string;
+    captcha_key?: string;
+    captcha?: string;
+    remember?: boolean;
+    login_type?: string;
+  }
+
+  /**
+   * 登录响应
+   */
+  interface LoginResponse {
+    access_token: string;
+    refresh_token: string;
+    token_type: string;
+    expires_in: number;
+  }
+
+  /**
+   * 用户信息
+   */
+  interface UserInfo {
+    user_id: number;
+    username: string;
+    nickname?: string;
+    email?: string;
+    avatar?: string;
+    phone?: string;
+    roles?: RoleInfo[];
+    permissions?: string[];
+    menus?: MenuTable[];
+    created_at?: string;
+    updated_at?: string;
+  }
+
+  /**
+   * 角色信息
+   */
+  interface RoleInfo {
+    id?: number;
+    name?: string;
+    code?: string;
+    menus?: any[];
+  }
+
+  /**
+   * 验证码信息
+   */
+  interface CaptchaInfo {
+    enable: boolean;
+    key: string;
+    img_base: string;
+  }
+
+  /**
+   * 用户列表
+   */
+  type UserList = PageResult<UserListItem>;
+
+  /**
+   * 用户列表项
+   */
+  interface UserListItem {
+    id: number;
+    avatar: string;
+    status: string;
+    userName: string;
+    userGender: string;
+    nickName: string;
+    userPhone: string;
+    userEmail: string;
+    userRoles: string[];
+    createBy: string;
+    createTime: string;
+    updateBy: string;
+    updateTime: string;
+  }
+
+  /**
+   * 用户搜索参数
+   */
+  type UserSearchParams = Partial<
+    Pick<UserListItem, "id" | "userName" | "userGender" | "userPhone" | "userEmail" | "status"> &
+      CommonSearchParams
+  >;
+
+  /**
+   * 角色列表
+   */
+  type RoleList = PaginatedResponse<RoleListItem>;
+
+  /**
+   * 角色列表项
+   */
+  interface RoleListItem {
+    roleId: number;
+    roleName: string;
+    roleCode: string;
+    description: string;
+    enabled: boolean;
+    createTime: string;
+  }
+
+  /**
+   * 角色搜索参数
+   */
+  type RoleSearchParams = Partial<
+    Pick<RoleListItem, "roleId" | "roleName" | "roleCode" | "description" | "enabled"> &
+      CommonSearchParams & {
+        startTime: string | null;
+        endTime: string | null;
+      }
+  >;
+}
+
+export {};
diff --git a/frontend/new-web/src/types/index.ts b/frontend/new-web/src/types/index.ts
index 9032fd27..3cecb500 100644
--- a/frontend/new-web/src/types/index.ts
+++ b/frontend/new-web/src/types/index.ts
@@ -3,20 +3,26 @@
  * 提供全局类型定义的统一导出入口
  *
  * @module types/index
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
+/** AI 相关类型定义 */
+export * from "./ai";
+
 /** 通用类型定义（基础类型、工具类型等） */
-export * from './common'
+export * from "./common";
 
 /** 组件相关类型定义 */
-export * from './component'
+export * from "./component";
 
-/** 状态管理相关类型定义 */
-export * from './store'
+/** 系统配置类型定义 */
+export * from "./config";
+
+/** 指令相关类型定义 */
+export * from "./directive";
 
 /** 路由相关类型定义 */
-export * from './router'
+export * from "./router";
 
-/** 配置相关类型定义 */
-export * from './config'
+/** 状态管理相关类型定义 */
+export * from "./store";
diff --git a/frontend/new-web/src/types/router/index.ts b/frontend/new-web/src/types/router/index.ts
index d9ef0126..0835dbba 100644
--- a/frontend/new-web/src/types/router/index.ts
+++ b/frontend/new-web/src/types/router/index.ts
@@ -17,10 +17,69 @@
  * - 权限控制
  *
  * @module types/router/index
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
-import { RouteRecordRaw } from 'vue-router'
+import { RouteRecordRaw } from "vue-router";
+import "vue-router";
+
+declare module "vue-router" {
+  // https://router.vuejs.org/zh/guide/advanced/meta.html#typescript
+  // 可以通过扩展 RouteMeta 接口来输入 meta 字段
+  interface RouteMeta {
+    /**
+     * 菜单名称
+     * @example 'Dashboard'
+     */
+    title?: string;
+
+    /**
+     * 菜单图标
+     * @example 'el-icon-edit'
+     */
+    icon?: string;
+
+    /**
+     * 是否隐藏菜单
+     * true 隐藏, false 显示
+     * @default false
+     */
+    hidden?: boolean;
+
+    /**
+     * 始终显示父级菜单，即使只有一个子菜单
+     * true 显示父级菜单, false 隐藏父级菜单，显示唯一子节点
+     * @default false
+     */
+    alwaysShow?: boolean;
+
+    /**
+     * 是否固定在页签上
+     * true 固定, false 不固定
+     * @default false
+     */
+    affix?: boolean;
+
+    /**
+     * 是否缓存页面
+     * true 缓存, false 不缓存
+     * @default false
+     */
+    keepAlive?: boolean;
+
+    /**
+     * 静态壳层路由（路由已在 router 注册，菜单项仅用于跳转，无 component 字段）
+     */
+    shellRoute?: boolean;
+
+    /**
+     * 是否在面包屑导航中隐藏
+     * true 隐藏, false 显示
+     * @default false
+     */
+    breadcrumb?: boolean;
+  }
+}
 
 /**
  * 路由元数据接口
@@ -28,53 +87,55 @@ import { RouteRecordRaw } from 'vue-router'
  */
 export interface RouteMeta extends Record<string | number | symbol, unknown> {
   /** 路由标题 */
-  title: string
+  title: string;
   /** 路由图标 */
-  icon?: string
+  icon?: string;
   /** 是否显示徽章 */
-  showBadge?: boolean
+  showBadge?: boolean;
   /** 文本徽章 */
-  showTextBadge?: string
+  showTextBadge?: string;
   /** 是否在菜单中隐藏 */
-  isHide?: boolean
+  isHide?: boolean;
   /** 是否在标签页中隐藏 */
-  isHideTab?: boolean
+  isHideTab?: boolean;
   /** 外部链接 */
-  link?: string
+  link?: string;
   /** 是否为iframe */
-  isIframe?: boolean
+  isIframe?: boolean;
   /** 是否缓存 */
-  keepAlive?: boolean
+  keepAlive?: boolean;
   /** 操作权限 */
   authList?: Array<{
-    title: string
-    authMark: string
-  }>
+    title: string;
+    authMark: string;
+  }>;
   /** 是否为一级菜单 */
-  isFirstLevel?: boolean
+  isFirstLevel?: boolean;
   /** 角色权限 */
-  roles?: string[]
+  roles?: string[];
   /** 是否固定标签页 */
-  fixedTab?: boolean
+  fixedTab?: boolean;
   /** 激活菜单路径 */
-  activePath?: string
+  activePath?: string;
   /** 是否为全屏页面 */
-  isFullPage?: boolean
+  isFullPage?: boolean;
   /** 是否为权限按钮行 */
-  isAuthButton?: boolean
+  isAuthButton?: boolean;
   /** 权限标识 */
-  authMark?: string
+  authMark?: string;
   /** 父级路径 */
-  parentPath?: string
+  parentPath?: string;
+  /** 静态壳层菜单（侧边栏可点，组件由静态路由提供） */
+  shellRoute?: boolean;
 }
 
 /**
  * 应用路由记录接口
  * 扩展 Vue Router 的路由记录类型
  */
-export interface AppRouteRecord extends Omit<RouteRecordRaw, 'meta' | 'children' | 'component'> {
-  id?: number
-  meta: RouteMeta
-  children?: AppRouteRecord[]
-  component?: string | (() => Promise<any>)
+export interface AppRouteRecord extends Omit<RouteRecordRaw, "meta" | "children" | "component"> {
+  id?: number;
+  meta: RouteMeta;
+  children?: AppRouteRecord[];
+  component?: string | (() => Promise<any>);
 }
diff --git a/frontend/new-web/src/types/shims-vue.d.ts b/frontend/new-web/src/types/shims-vue.d.ts
new file mode 100644
index 00000000..d77b62be
--- /dev/null
+++ b/frontend/new-web/src/types/shims-vue.d.ts
@@ -0,0 +1,5 @@
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
diff --git a/frontend/new-web/src/types/store/index.ts b/frontend/new-web/src/types/store/index.ts
index 019801ef..7e72f2d4 100644
--- a/frontend/new-web/src/types/store/index.ts
+++ b/frontend/new-web/src/types/store/index.ts
@@ -20,138 +20,138 @@
  * - 类型提示和自动补全
  *
  * @module types/store/index
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
-import { MenuThemeEnum, SystemThemeEnum } from '@/enums/appEnum'
-import { LocationQueryRaw } from 'vue-router'
+import { MenuThemeEnum, SystemThemeEnum } from "@/enums/appEnum";
+import { LocationQueryRaw } from "vue-router";
 
 // 系统主题样式（light | dark）
 export interface SystemThemeType {
   /** 主题类名 */
-  className: string
+  className: string;
 }
 
 // 定义包含多个主题的类型
 export type SystemThemeTypes = {
-  [key in Exclude<SystemThemeEnum, SystemThemeEnum.AUTO>]: SystemThemeType
-}
+  [key in Exclude<SystemThemeEnum, SystemThemeEnum.AUTO>]: SystemThemeType;
+};
 
 // 菜单主题样式
 export interface MenuThemeType {
   /** 主题类型 */
-  theme: MenuThemeEnum
+  theme: MenuThemeEnum;
   /** 背景颜色 */
-  background: string
+  background: string;
   /** 系统名称颜色 */
-  systemNameColor: string
+  systemNameColor: string;
   /** 文本颜色 */
-  textColor: string
+  textColor: string;
   /** 图标颜色 */
-  iconColor: string
+  iconColor: string;
   /** 背景图片 */
-  img?: string
+  img?: string;
 }
 
 // 设置中心
 export interface SettingState {
   /** 主题 */
-  theme: string
+  theme: string;
   /** 是否只保持一个子菜单的展开 */
-  uniqueOpened: boolean
+  uniqueOpened: boolean;
   /** 是否显示菜单按钮 */
-  menuButton: boolean
+  menuButton: boolean;
   /** 是否显示刷新按钮 */
-  showRefreshButton: boolean
+  showRefreshButton: boolean;
   /** 是否显示面包屑 */
-  showCrumbs: boolean
+  showCrumbs: boolean;
   /** 是否自动关闭 */
-  autoClose: boolean
+  autoClose: boolean;
   /** 是否显示工作标签页 */
-  showWorkTab: boolean
+  showWorkTab: boolean;
   /** 是否显示语言切换 */
-  showLanguage: boolean
+  showLanguage: boolean;
   /** 是否显示进度条 */
-  showNprogress: boolean
+  showNprogress: boolean;
   /** 主题模式 */
-  themeModel: string
+  themeModel: string;
 }
 
 // 多标签
 export interface WorkTab {
   /** 标签标题 */
-  title: string
+  title: string;
   /** 自定义标题 */
-  customTitle?: string
+  customTitle?: string;
   /** 路由路径 */
-  path: string
+  path: string;
   /** 路由名称 */
-  name: string
+  name: string;
   /** 是否缓存 */
-  keepAlive: boolean
+  keepAlive: boolean;
   /** 是否固定标签 */
-  fixedTab?: boolean
+  fixedTab?: boolean;
   /** 路由参数 */
-  params?: object
+  params?: object;
   /** 路由查询参数 */
-  query?: LocationQueryRaw
+  query?: LocationQueryRaw;
   /** 图标 */
-  icon?: string
+  icon?: string;
   /** 是否激活 */
-  isActive?: boolean
+  isActive?: boolean;
 }
 
 // 用户Store状态
 export interface UserState {
   /** 用户信息 */
-  userInfo: Api.Auth.UserInfo | null
+  userInfo: Api.Auth.UserInfo | null;
   /** 认证令牌 */
-  token: string | null
+  token: string | null;
   /** 用户角色列表 */
-  roles: string[]
+  roles: string[];
   /** 用户权限列表 */
-  permissions: string[]
+  permissions: string[];
 }
 
 // 设置Store状态
 export interface SettingStoreState extends SettingState {
   // 额外的设置状态
   /** 菜单是否折叠 */
-  collapsed: boolean
+  collapsed: boolean;
   /** 设备类型 */
-  device: 'desktop' | 'mobile'
+  device: "desktop" | "mobile";
   /** 当前语言 */
-  language: string
+  language: string;
 }
 
 // 工作标签页Store状态
 export interface WorkTabState {
   /** 标签页列表 */
-  tabs: WorkTab[]
+  tabs: WorkTab[];
   /** 当前激活的标签页 */
-  activeTab: string
+  activeTab: string;
   /** 缓存的标签页列表 */
-  cachedTabs: string[]
+  cachedTabs: string[];
 }
 
 // 菜单Store状态
 export interface MenuState {
   /** 菜单列表 */
-  menuList: any[]
+  menuList: any[];
   /** 菜单是否已加载 */
-  isLoaded: boolean
+  isLoaded: boolean;
   /** 菜单是否折叠 */
-  collapsed: boolean
+  collapsed: boolean;
 }
 
 // 根Store状态类型
 export interface RootState {
   /** 用户状态 */
-  user: UserState
+  user: UserState;
   /** 设置状态 */
-  setting: SettingStoreState
+  setting: SettingStoreState;
   /** 工作标签页状态 */
-  workTab: WorkTabState
+  workTab: WorkTabState;
   /** 菜单状态 */
-  menu: MenuState
+  menu: MenuState;
 }
diff --git a/frontend/new-web/src/types/vue3-cron-plus.d.ts b/frontend/new-web/src/types/vue3-cron-plus.d.ts
new file mode 100644
index 00000000..d0f1f7c4
--- /dev/null
+++ b/frontend/new-web/src/types/vue3-cron-plus.d.ts
@@ -0,0 +1,12 @@
+declare module "vue3-cron-plus" {
+  import { DefineComponent } from "vue";
+
+  export const vue3CronPlus: DefineComponent<{}, {}, any>;
+
+  export default vue3CronPlus;
+}
+
+declare module "vue3-cron-plus/dist/index.css" {
+  const content: any;
+  export default content;
+}
diff --git a/frontend/new-web/src/utils/auth/auth.ts b/frontend/new-web/src/utils/auth/auth.ts
new file mode 100644
index 00000000..264fe590
--- /dev/null
+++ b/frontend/new-web/src/utils/auth/auth.ts
@@ -0,0 +1,162 @@
+/**
+ * 身份验证工具类
+ *
+ * 集中管理所有与认证相关的功能，包括：
+ * - 登录状态判断
+ * - Token 的存取（支持记住我功能）
+ * - 会话状态清理
+ *
+ * ## 存储策略
+ *
+ * 根据「记住我」状态选择存储位置：
+ * - `rememberMe = true`: Token 存储在 localStorage，持久化保存
+ * - `rememberMe = false`: Token 存储在 sessionStorage，会话结束后自动清除
+ *
+ * @module utils/auth
+ */
+
+/** 认证相关存储键名常量 */
+const AUTH_KEYS = {
+  ACCESS_TOKEN: "access_token",
+  REFRESH_TOKEN: "refresh_token",
+  REMEMBER_ME: "remember_me",
+} as const;
+
+/**
+ * 身份验证工具类
+ * 提供静态方法管理 Token 和记住我状态
+ */
+export class Auth {
+  /**
+   * 判断用户是否已登录
+   *
+   * 通过检查是否存在有效的访问令牌来判断登录状态
+   *
+   * @returns {boolean} 是否已登录
+   *
+   * @example
+   * ```typescript
+   * if (Auth.isLoggedIn()) {
+   *   console.log('用户已登录');
+   * } else {
+   *   console.log('用户未登录');
+   * }
+   * ```
+   */
+  static isLoggedIn(): boolean {
+    return !!Auth.getAccessToken();
+  }
+
+  /**
+   * 获取当前有效的访问令牌
+   *
+   * 根据「记住我」状态从适当的存储位置获取 Token
+   *
+   * @returns {string} 当前有效的访问令牌，若不存在则返回空字符串
+   *
+   * @example
+   * ```typescript
+   * const token = Auth.getAccessToken();
+   * if (token) {
+   *   // 使用 token 进行 API 请求
+   * }
+   * ```
+   */
+  static getAccessToken(): string {
+    const isRememberMe = Auth.getRememberMe();
+    return isRememberMe
+      ? localStorage.getItem(AUTH_KEYS.ACCESS_TOKEN) || ""
+      : sessionStorage.getItem(AUTH_KEYS.ACCESS_TOKEN) || "";
+  }
+
+  /**
+   * 获取刷新令牌
+   *
+   * 根据「记住我」状态从适当的存储位置获取刷新令牌
+   *
+   * @returns {string} 当前有效的刷新令牌，若不存在则返回空字符串
+   *
+   * @example
+   * ```typescript
+   * const refreshToken = Auth.getRefreshToken();
+   * if (refreshToken) {
+   *   // 使用 refreshToken 刷新访问令牌
+   * }
+   * ```
+   */
+  static getRefreshToken(): string {
+    const isRememberMe = Auth.getRememberMe();
+    return isRememberMe
+      ? localStorage.getItem(AUTH_KEYS.REFRESH_TOKEN) || ""
+      : sessionStorage.getItem(AUTH_KEYS.REFRESH_TOKEN) || "";
+  }
+
+  /**
+   * 设置访问令牌和刷新令牌
+   *
+   * 根据「记住我」状态决定存储位置，并同步清理另一存储位置的旧 Token
+   *
+   * @param {string} accessToken - 访问令牌
+   * @param {string} refreshToken - 刷新令牌
+   * @param {boolean} rememberMe - 是否记住我
+   *
+   * @example
+   * ```typescript
+   * // 用户选择记住登录状态
+   * Auth.setTokens('access_token_value', 'refresh_token_value', true);
+   *
+   * // 用户不希望记住登录状态
+   * Auth.setTokens('access_token_value', 'refresh_token_value', false);
+   * ```
+   */
+  static setTokens(accessToken: string, refreshToken: string, rememberMe: boolean): void {
+    localStorage.setItem(AUTH_KEYS.REMEMBER_ME, String(rememberMe));
+
+    if (rememberMe) {
+      localStorage.setItem(AUTH_KEYS.ACCESS_TOKEN, accessToken);
+      localStorage.setItem(AUTH_KEYS.REFRESH_TOKEN, refreshToken);
+    } else {
+      sessionStorage.setItem(AUTH_KEYS.ACCESS_TOKEN, accessToken);
+      sessionStorage.setItem(AUTH_KEYS.REFRESH_TOKEN, refreshToken);
+      localStorage.removeItem(AUTH_KEYS.ACCESS_TOKEN);
+      localStorage.removeItem(AUTH_KEYS.REFRESH_TOKEN);
+    }
+  }
+
+  /**
+   * 清除所有身份验证相关的数据
+   *
+   * 同时清除 localStorage 和 sessionStorage 中的 Token
+   *
+   * @example
+   * ```typescript
+   * // 用户退出登录时调用
+   * Auth.clearAuth();
+   * ```
+   */
+  static clearAuth(): void {
+    localStorage.removeItem(AUTH_KEYS.ACCESS_TOKEN);
+    localStorage.removeItem(AUTH_KEYS.REFRESH_TOKEN);
+    sessionStorage.removeItem(AUTH_KEYS.ACCESS_TOKEN);
+    sessionStorage.removeItem(AUTH_KEYS.REFRESH_TOKEN);
+  }
+
+  /**
+   * 获取「记住我」状态
+   *
+   * 从 localStorage 中读取记住我设置
+   *
+   * @returns {boolean} 是否记住我
+   *
+   * @example
+   * ```typescript
+   * const rememberMe = Auth.getRememberMe();
+   * console.log(`记住我状态: ${rememberMe}`);
+   * ```
+   */
+  static getRememberMe(): boolean {
+    return localStorage.getItem(AUTH_KEYS.REMEMBER_ME) === "true";
+  }
+}
+
+export { AUTH_KEYS };
diff --git a/frontend/new-web/src/utils/auth/authRedirect.ts b/frontend/new-web/src/utils/auth/authRedirect.ts
new file mode 100644
index 00000000..75843cb9
--- /dev/null
+++ b/frontend/new-web/src/utils/auth/authRedirect.ts
@@ -0,0 +1,77 @@
+/**
+ * 认证重定向工具模块
+ *
+ * 提供认证失效时的统一重定向处理功能
+ *
+ * ## 主要功能
+ *
+ * - 登录页跳转（自动带上 redirect 参数）
+ * - 并发请求合并，避免重复跳转
+ * - 会话状态清理
+ *
+ * @module utils/authRedirect
+ */
+
+import { router } from "@/router";
+import { useUserStore } from "@/store/modules/user.store";
+import { ElMessage, ElNotification } from "element-plus";
+
+/**
+ * 登录页跳转进行中标志
+ *
+ * 用于合并并发的登录跳转请求，避免重复通知与重复路由跳转
+ */
+let redirectToLoginInFlight: Promise<void> | null = null;
+
+/**
+ * 认证失效或需重新登录时跳转登录页
+ *
+ * 清空本地会话并带上 redirect 参数，支持并发调用合并
+ *
+ * @param {string} [message="请重新登录"] - 提示消息
+ * @returns {Promise<void>} 跳转完成的 Promise
+ *
+ * @example
+ * ```typescript
+ * import { redirectToLogin } from '@/utils/authRedirect';
+ *
+ * // 在需要登录的地方调用
+ * redirectToLogin('登录已过期，请重新登录');
+ * ```
+ */
+export async function redirectToLogin(message: string = "请重新登录"): Promise<void> {
+  // 如果已有跳转请求进行中，直接返回该请求的 Promise
+  if (redirectToLoginInFlight) {
+    return redirectToLoginInFlight;
+  }
+
+  // 创建新的跳转请求
+  redirectToLoginInFlight = (async () => {
+    try {
+      // 显示提示通知
+      ElNotification({
+        title: "提示",
+        message,
+        type: "warning",
+        duration: 3000,
+      });
+
+      // 重置用户状态
+      await useUserStore().resetAllState();
+
+      // 获取当前路径作为 redirect 参数
+      const currentPath = router.currentRoute.value.fullPath;
+
+      // 跳转到登录页
+      await router.push(`/login?redirect=${encodeURIComponent(currentPath)}`);
+    } catch (error: any) {
+      // 处理跳转过程中的错误
+      ElMessage.error(error?.message ?? String(error));
+    } finally {
+      // 重置跳转进行中标志
+      redirectToLoginInFlight = null;
+    }
+  })();
+
+  return redirectToLoginInFlight;
+}
diff --git a/frontend/new-web/src/utils/auth/index.ts b/frontend/new-web/src/utils/auth/index.ts
new file mode 100644
index 00000000..c1710026
--- /dev/null
+++ b/frontend/new-web/src/utils/auth/index.ts
@@ -0,0 +1,8 @@
+/**
+ * 认证相关工具函数统一导出
+ *
+ * @module utils/auth
+ */
+
+export * from "./auth";
+export * from "./authRedirect";
diff --git a/frontend/new-web/src/utils/common/common.ts b/frontend/new-web/src/utils/common/common.ts
new file mode 100644
index 00000000..af0e0d5f
--- /dev/null
+++ b/frontend/new-web/src/utils/common/common.ts
@@ -0,0 +1,274 @@
+/**
+ * 通用工具函数模块
+ *
+ * 提供项目中常用的通用工具函数，包括：
+ * - 问候语生成
+ * - 日期范围处理
+ * - 树形结构转换
+ * - 对象深拷贝
+ * - 空值判断
+ * - Blob 格式验证
+ *
+ * @module utils/common
+ */
+
+/**
+ * 根据当前时间生成问候语
+ *
+ * 根据当前小时返回不同的问候语，支持中文问候和特殊时段的温馨提示
+ *
+ * @returns {string} 问候语字符串
+ *
+ * @example
+ * ```typescript
+ * const greeting = greetings();
+ * console.log(greeting); // 输出："上午好！" 或其他时段的问候语
+ * ```
+ */
+export function greetings(): string {
+  const currentDate = new Date();
+  const hours = currentDate.getHours();
+
+  if (hours >= 6 && hours < 8) {
+    return "晨起披衣出草堂，轩窗已自喜微凉🌅！";
+  } else if (hours >= 8 && hours < 12) {
+    return "上午好！";
+  } else if (hours >= 12 && hours < 14) {
+    return "中午好！";
+  } else if (hours >= 14 && hours < 18) {
+    return "下午好！";
+  } else if (hours >= 18 && hours < 24) {
+    return "晚上好！";
+  } else {
+    return "偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！";
+  }
+}
+
+/**
+ * 获取日期范围内的所有日期
+ *
+ * 根据起始日期和结束日期，生成期间所有日期的字符串数组
+ * 支持跨月份和跨年度的日期范围
+ *
+ * @param {string | number | Date} startDate - 起始日期
+ * @param {string | number | Date} endDate - 结束日期
+ * @returns {string[]} 日期字符串数组，格式为 YYYY-MM-DD
+ *
+ * @example
+ * ```typescript
+ * const dates = getRangeDate('2024-01-30', '2024-02-02');
+ * // 输出：['2024-01-30', '2024-01-31', '2024-02-01', '2024-02-02']
+ * ```
+ */
+export function getRangeDate(
+  startDate: string | number | Date,
+  endDate: string | number | Date
+): string[] {
+  const targetArr: string[] = [];
+  const start = new Date(startDate);
+  const end = new Date(endDate);
+
+  const startDateInfo = {
+    year: start.getFullYear(),
+    month: start.getMonth() + 1,
+    day: start.getDate(),
+  };
+
+  const endDateInfo = {
+    year: end.getFullYear(),
+    month: end.getMonth() + 1,
+    day: end.getDate(),
+  };
+
+  if (startDateInfo.year === endDateInfo.year) {
+    if (startDateInfo.month !== endDateInfo.month) {
+      // 同年不同月
+      const startMax = new Date(startDateInfo.year, startDateInfo.month, 0).getDate();
+      const endNum = startMax - startDateInfo.day + endDateInfo.day;
+
+      for (let i = startDateInfo.day; i <= startDateInfo.day + endNum; i++) {
+        if (i > startMax) {
+          targetArr.push(
+            `${endDateInfo.year}-${
+              endDateInfo.month < 10 ? "0" + endDateInfo.month : endDateInfo.month
+            }-${i - startMax < 10 ? "0" + (i - startMax) : i - startMax}`
+          );
+        } else {
+          targetArr.push(
+            `${startDateInfo.year}-${
+              startDateInfo.month < 10 ? "0" + startDateInfo.month : startDateInfo.month
+            }-${i < 10 ? "0" + i : i}`
+          );
+        }
+      }
+    } else {
+      // 同年同月
+      for (let i = startDateInfo.day; i <= endDateInfo.day; i++) {
+        targetArr.push(
+          `${startDateInfo.year}-${
+            startDateInfo.month < 10 ? "0" + startDateInfo.month : startDateInfo.month
+          }-${i < 10 ? "0" + i : i}`
+        );
+      }
+    }
+  } else {
+    // 不同年
+    const startMax = new Date(startDateInfo.year, startDateInfo.month, 0).getDate();
+    const endNum = startMax - startDateInfo.day + endDateInfo.day;
+
+    for (let i = startDateInfo.day; i <= startDateInfo.day + endNum; i++) {
+      if (i > startMax) {
+        targetArr.push(
+          `${endDateInfo.year}-${
+            endDateInfo.month < 10 ? "0" + endDateInfo.month : endDateInfo.month
+          }-${i - startMax < 10 ? "0" + (i - startMax) : i - startMax}`
+        );
+      } else {
+        targetArr.push(
+          `${startDateInfo.year}-${
+            startDateInfo.month < 10 ? "0" + startDateInfo.month : startDateInfo.month
+          }-${i < 10 ? "0" + i : i}`
+        );
+      }
+    }
+  }
+
+  return targetArr;
+}
+
+/**
+ * 将扁平列表转换为树形结构
+ *
+ * 通过 parent_id 字段将扁平数组转换为嵌套的树形结构
+ * 保留原始数据的所有字段
+ *
+ * @param {any[]} list - 扁平列表数据，每个项必须包含 id 和 parent_id 字段
+ * @returns {any[]} 树形结构数组
+ *
+ * @example
+ * ```typescript
+ * const list = [
+ *   { id: 1, name: '节点1', parent_id: null },
+ *   { id: 2, name: '节点2', parent_id: 1 },
+ * ];
+ * const tree = listToTree(list);
+ * // 输出：[{ id: 1, name: '节点1', parent_id: null, children: [{ id: 2, name: '节点2', parent_id: 1 }] }]
+ * ```
+ */
+export function listToTree(list: any[]): any[] {
+  const map: { [key: string | number]: any } = {};
+
+  // 创建映射表，保留每个节点的 parent_id 等原始字段
+  list.forEach((item) => {
+    map[item.id] = { ...item };
+  });
+
+  const tree: any[] = [];
+
+  list.forEach((item) => {
+    const parentId = item.parent_id;
+
+    if (parentId && map[parentId]) {
+      // 将当前节点加入其父节点的 children 数组中
+      if (!map[parentId].children) {
+        map[parentId].children = [];
+      }
+      map[parentId].children.push(map[item.id]);
+    } else if (parentId === null || parentId === undefined) {
+      // 根节点
+      tree.push(map[item.id]);
+    }
+  });
+
+  return tree;
+}
+
+/**
+ * 格式化树形结构为级联选择器格式
+ *
+ * 将树形数据转换为适合 Element Plus Cascader 组件使用的格式
+ * 包含 value、label、disabled 和 children 字段
+ *
+ * @param {any[]} nodes - 树形结构数据
+ * @returns {any[]} 格式化后的树形结构
+ *
+ * @example
+ * ```typescript
+ * const nodes = [{ id: 1, name: '部门1', status: true, children: [...] }];
+ * const formatted = formatTree(nodes);
+ * // 输出：[{ value: 1, label: '部门1', disabled: false, children: [...] }]
+ * ```
+ */
+export function formatTree(nodes: any[]): any[] {
+  return nodes.map((node) => {
+    const formattedNode: any = {
+      value: node.id,
+      label: node.name,
+      disabled: node.status === false || String(node.status) === "false",
+    };
+
+    if (node.children && node.children.length > 0) {
+      formattedNode.children = formatTree(node.children);
+    }
+
+    return formattedNode;
+  });
+}
+
+/**
+ * 深拷贝对象
+ *
+ * 使用 JSON 序列化和反序列化实现对象的深拷贝
+ * 注意：此方法不支持函数、Symbol、循环引用等特殊类型
+ *
+ * @param {any} obj - 需要拷贝的对象
+ * @returns {any} 拷贝后的新对象
+ *
+ * @example
+ * ```typescript
+ * const original = { a: 1, b: { c: 2 } };
+ * const copy = cloneDeep(original);
+ * copy.b.c = 3; // 不影响原对象
+ * ```
+ */
+export function cloneDeep(obj: any): any {
+  return JSON.parse(JSON.stringify(obj));
+}
+
+/**
+ * 判断字符串是否为空
+ *
+ * 检查字符串是否为 undefined、null 或空字符串
+ *
+ * @param {string | null | undefined} obj - 需要检查的字符串
+ * @returns {boolean} 是否为空
+ *
+ * @example
+ * ```typescript
+ * isEmpty('');      // true
+ * isEmpty(null);    // true
+ * isEmpty(undefined); // true
+ * isEmpty('hello'); // false
+ * ```
+ */
+export function isEmpty(obj: string | null | undefined): boolean {
+  return obj === undefined || obj === null || obj === "";
+}
+
+/**
+ * 验证数据是否为 Blob 格式
+ *
+ * 通过检查 Content-Type 是否为 application/json 来判断
+ *
+ * @param {Blob} data - 需要验证的数据
+ * @returns {boolean} 是否为 Blob 格式
+ *
+ * @example
+ * ```typescript
+ * const blob = new Blob(['test'], { type: 'text/plain' });
+ * blobValidate(blob); // true
+ * ```
+ */
+export function blobValidate(data: Blob): boolean {
+  return data.type !== "application/json";
+}
diff --git a/frontend/new-web/src/utils/common/dateUtil.ts b/frontend/new-web/src/utils/common/dateUtil.ts
new file mode 100644
index 00000000..97e37e58
--- /dev/null
+++ b/frontend/new-web/src/utils/common/dateUtil.ts
@@ -0,0 +1,169 @@
+/**
+ * 日期工具函数模块
+ *
+ * 提供日期格式化和实时时间获取功能，基于 dayjs 库封装
+ *
+ * ## 主要功能
+ *
+ * - 日期时间格式化
+ * - 日期格式化
+ * - 时间格式化
+ * - 实时时间响应式获取
+ *
+ * @module utils/dateUtil
+ */
+
+import { reactive, toRefs } from "vue";
+import { tryOnMounted, tryOnUnmounted } from "@vueuse/core";
+import dayjs from "dayjs";
+
+/** 默认日期时间格式 */
+const DATE_TIME_FORMAT = "YYYY-MM-DD HH:mm:ss";
+
+/** 默认日期格式 */
+const DATE_FORMAT = "YYYY-MM-DD";
+
+/**
+ * 格式化日期时间
+ *
+ * 将日期对象转换为指定格式的字符串
+ *
+ * @param {dayjs.ConfigType} [date] - 日期对象，可以是字符串、数字或 Date 对象
+ * @param {string} [format=DATE_TIME_FORMAT] - 格式化字符串，默认为 'YYYY-MM-DD HH:mm:ss'
+ * @returns {string} 格式化后的日期时间字符串
+ *
+ * @example
+ * ```typescript
+ * formatToDateTime(new Date()); // "2024-01-15 10:30:45"
+ * formatToDateTime('2024-01-15', 'YYYY/MM/DD'); // "2024/01/15"
+ * ```
+ */
+export function formatToDateTime(
+  date?: dayjs.ConfigType,
+  format: string = DATE_TIME_FORMAT
+): string {
+  return dayjs(date).format(format);
+}
+
+/**
+ * 格式化日期
+ *
+ * 将日期对象转换为仅包含日期部分的字符串
+ *
+ * @param {dayjs.ConfigType} [date] - 日期对象，可以是字符串、数字或 Date 对象
+ * @param {string} [format=DATE_FORMAT] - 格式化字符串，默认为 'YYYY-MM-DD'
+ * @returns {string} 格式化后的日期字符串
+ *
+ * @example
+ * ```typescript
+ * formatToDate(new Date()); // "2024-01-15"
+ * formatToDate('2024-01-15', 'YYYY年MM月DD日'); // "2024年01月15日"
+ * ```
+ */
+export function formatToDate(date?: dayjs.ConfigType, format: string = DATE_FORMAT): string {
+  return dayjs(date).format(format);
+}
+
+/**
+ * 格式化时间
+ *
+ * 将日期对象转换为仅包含时间部分的字符串
+ *
+ * @param {dayjs.ConfigType} [time] - 时间对象，可以是字符串、数字或 Date 对象
+ * @param {string} [format='HH:mm:ss'] - 格式化字符串，默认为 'HH:mm:ss'
+ * @returns {string} 格式化后的时间字符串
+ *
+ * @example
+ * ```typescript
+ * formatToTime(new Date()); // "10:30:45"
+ * formatToTime('2024-01-15 10:30:45', 'HH:mm'); // "10:30"
+ * ```
+ */
+export function formatToTime(time?: dayjs.ConfigType, format: string = "HH:mm:ss"): string {
+  return dayjs(time).format(format);
+}
+
+/**
+ * 响应式实时时间 Hook
+ *
+ * 获取实时更新的时间信息，每秒自动更新
+ *
+ * @param {boolean} [immediate=true] - 是否在组件挂载时立即开始更新
+ * @returns {object} 包含时间信息的响应式对象和控制方法
+ *
+ * @example
+ * ```typescript
+ * const { year, month, day, hour, minute, second, week, start, stop } = useNow();
+ * console.log(year.value); // 当前年份
+ * console.log(week.value); // 当前星期
+ * ```
+ */
+export const useNow = (immediate: boolean = true) => {
+  let timer: ReturnType<typeof setInterval>;
+
+  /** 时间状态对象 */
+  const state = reactive({
+    year: 0,
+    month: 0,
+    week: "",
+    day: 0,
+    hour: "",
+    minute: "",
+    second: 0,
+    meridiem: "",
+  });
+
+  /**
+   * 更新时间状态
+   */
+  const update = () => {
+    const now = dayjs();
+
+    const h = now.format("HH");
+    const m = now.format("mm");
+    const s = now.get("s");
+
+    state.year = now.get("y");
+    state.month = now.get("M") + 1;
+    state.week = "星期" + ["日", "一", "二", "三", "四", "五", "六"][now.day()];
+    state.day = now.get("date");
+    state.hour = h;
+    state.minute = m;
+    state.second = s;
+    state.meridiem = now.format("A");
+  };
+
+  /**
+   * 开始更新时间
+   */
+  function start(): void {
+    update();
+    clearInterval(timer);
+    timer = setInterval(() => update(), 1000);
+  }
+
+  /**
+   * 停止更新时间
+   */
+  function stop(): void {
+    clearInterval(timer);
+  }
+
+  // 组件挂载时自动开始
+  tryOnMounted(() => {
+    if (immediate) {
+      start();
+    }
+  });
+
+  // 组件卸载时自动停止
+  tryOnUnmounted(() => {
+    stop();
+  });
+
+  return {
+    ...toRefs(state),
+    start,
+    stop,
+  };
+};
diff --git a/frontend/new-web/src/utils/common/fetchAllPages.ts b/frontend/new-web/src/utils/common/fetchAllPages.ts
new file mode 100644
index 00000000..3994cb53
--- /dev/null
+++ b/frontend/new-web/src/utils/common/fetchAllPages.ts
@@ -0,0 +1,80 @@
+/**
+ * 分页数据全量获取工具
+ *
+ * 用于需要获取全量数据的场景，如数据导出、批量操作等
+ * 自动处理分页逻辑，将多页数据合并为一个完整的数组
+ *
+ * @module utils/fetchAllPages
+ */
+
+/**
+ * fetchAllPages 函数的配置选项类型
+ */
+export interface FetchAllPagesOptions<T> {
+  /** 每页条数，默认 1000 */
+  pageSize?: number;
+  /** 初始查询条件（会被拷贝后写入 page_no / page_size） */
+  initialQuery: Record<string, unknown>;
+  /** 页码字段名，默认 'page_no' */
+  pageNoKey?: string;
+  /** 每页条数字段名，默认 'page_size' */
+  pageSizeKey?: string;
+  /**
+   * 拉取单页数据的函数
+   * @param query - 查询参数，包含分页信息
+   * @returns Promise<{ total: number; list: T[] }> - 包含总数和当前页数据
+   */
+  fetchPage: (query: Record<string, unknown>) => Promise<{ total: number; list: T[] }>;
+}
+
+/**
+ * 按分页拉取全量列表
+ *
+ * 自动遍历所有分页，将数据合并为一个完整的数组返回
+ * 适用于数据导出等需要全量数据的场景
+ *
+ * @template T - 数据项类型
+ * @param {FetchAllPagesOptions<T>} options - 配置选项
+ * @returns {Promise<T[]>} 合并后的全量数据数组
+ *
+ * @example
+ * ```typescript
+ * import { fetchAllPages } from '@/utils/fetchAllPages';
+ *
+ * // 获取所有用户数据
+ * const allUsers = await fetchAllPages<User>({
+ *   pageSize: 500,
+ *   initialQuery: { status: 'active' },
+ *   fetchPage: async (query) => {
+ *     const response = await api.get({ url: '/users', params: query });
+ *     return {
+ *       total: response.data.total,
+ *       list: response.data.list,
+ *     };
+ *   },
+ * });
+ * ```
+ */
+export async function fetchAllPages<T>(options: FetchAllPagesOptions<T>): Promise<T[]> {
+  const pageSize = options.pageSize ?? 1000;
+  const pageNoKey = options.pageNoKey ?? "page_no";
+  const pageSizeKey = options.pageSizeKey ?? "page_size";
+  const query = { ...options.initialQuery };
+  query[pageNoKey] = 1;
+  query[pageSizeKey] = pageSize;
+  const all: T[] = [];
+
+  while (true) {
+    const { total, list } = await options.fetchPage(query);
+    all.push(...list);
+
+    // 当已获取的数据达到总数或当前页为空时停止
+    if (all.length >= total || list.length === 0) {
+      break;
+    }
+
+    query[pageNoKey] = (query[pageNoKey] as number) + 1;
+  }
+
+  return all;
+}
diff --git a/frontend/new-web/src/utils/common/helper.ts b/frontend/new-web/src/utils/common/helper.ts
new file mode 100644
index 00000000..29297ece
--- /dev/null
+++ b/frontend/new-web/src/utils/common/helper.ts
@@ -0,0 +1,226 @@
+/**
+ * 通用工具函数模块
+ *
+ * 提供 DOM 操作、字符串处理、数字格式化等通用工具函数
+ *
+ * @module utils/common/helper
+ */
+
+/**
+ * 判断 DOM 元素是否包含指定的 CSS 类名
+ *
+ * @param {HTMLElement} ele - 目标 DOM 元素
+ * @param {string} cls - 要检查的类名
+ * @returns {boolean} 是否包含该类名
+ *
+ * @example
+ * ```typescript
+ * const element = document.getElementById('myDiv');
+ * const hasClass = hasClass(element, 'active');
+ * ```
+ */
+export function hasClass(ele: HTMLElement, cls: string): boolean {
+  return !!ele.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
+}
+
+/**
+ * 为 DOM 元素添加 CSS 类名
+ *
+ * 如果元素已包含该类名，则不会重复添加
+ *
+ * @param {HTMLElement} ele - 目标 DOM 元素
+ * @param {string} cls - 要添加的类名
+ *
+ * @example
+ * ```typescript
+ * const element = document.getElementById('myDiv');
+ * addClass(element, 'active');
+ * ```
+ */
+export function addClass(ele: HTMLElement, cls: string): void {
+  if (!hasClass(ele, cls)) {
+    ele.className += " " + cls;
+  }
+}
+
+/**
+ * 从 DOM 元素移除 CSS 类名
+ *
+ * @param {HTMLElement} ele - 目标 DOM 元素
+ * @param {string} cls - 要移除的类名
+ *
+ * @example
+ * ```typescript
+ * const element = document.getElementById('myDiv');
+ * removeClass(element, 'active');
+ * ```
+ */
+export function removeClass(ele: HTMLElement, cls: string): void {
+  if (hasClass(ele, cls)) {
+    const reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
+    ele.className = ele.className.replace(reg, " ");
+  }
+}
+
+/**
+ * 判断是否是外部链接
+ *
+ * 通过检查 URL 是否以 http://、https://、mailto: 或 tel: 开头来判断
+ *
+ * @param {string} path - 要检查的路径或 URL
+ * @returns {boolean} 是否为外部链接
+ *
+ * @example
+ * ```typescript
+ * isExternal('https://example.com'); // true
+ * isExternal('/dashboard'); // false
+ * isExternal('mailto:info@example.com'); // true
+ * ```
+ */
+export function isExternal(path: string): boolean {
+  return /^(https?:|http?:|mailto:|tel:)/.test(path);
+}
+
+/**
+ * 格式化增长率
+ *
+ * 将增长率转换为百分比格式，保留两位小数并去掉末尾的零，取绝对值
+ *
+ * @param {number} growthRate - 增长率（小数形式）
+ * @returns {string} 格式化后的增长率字符串
+ *
+ * @example
+ * ```typescript
+ * formatGrowthRate(0.1234); // '12.34%'
+ * formatGrowthRate(-0.05); // '5%'
+ * formatGrowthRate(0); // '-'
+ * ```
+ */
+export function formatGrowthRate(growthRate: number): string {
+  if (growthRate === 0) {
+    return "-";
+  }
+
+  const formattedRate = Math.abs(growthRate * 100)
+    .toFixed(2)
+    .replace(/\.?0+$/, "");
+  return formattedRate + "%";
+}
+
+/**
+ * 判断字符串是否为有效数字格式
+ *
+ * 支持整数、小数、正负号
+ *
+ * @param {string} str - 要检查的字符串
+ * @returns {boolean} 是否为有效数字格式
+ *
+ * @example
+ * ```typescript
+ * isNumberStr('123'); // true
+ * isNumberStr('-123.45'); // true
+ * isNumberStr('abc'); // false
+ * ```
+ */
+export function isNumberStr(str: string): boolean {
+  return /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g.test(str);
+}
+
+/**
+ * 将字符串转换为标题格式
+ *
+ * 在每个大写字母前添加空格，并将首字母转为大写
+ *
+ * @param {string} str - 要转换的字符串
+ * @returns {string} 标题格式的字符串
+ *
+ * @example
+ * ```typescript
+ * titleCase('helloWorld'); // 'Hello World'
+ * titleCase('myNameIsJohn'); // 'My Name Is John'
+ * ```
+ */
+export function titleCase(str: string): string {
+  return str.replace(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase());
+}
+
+/**
+ * 创建一个映射函数
+ *
+ * 将逗号分隔的字符串转换为一个查找函数，用于快速判断值是否在列表中
+ *
+ * @param {string} str - 逗号分隔的字符串列表
+ * @param {boolean} [expectsLowerCase] - 是否将输入值转为小写后再比较
+ * @returns {(val: string) => boolean} 映射函数
+ *
+ * @example
+ * ```typescript
+ * const isEventTag = makeMap('click,focus,blur');
+ * isEventTag('click'); // true
+ * isEventTag('mouseover'); // false
+ * ```
+ */
+export function makeMap(str: string, expectsLowerCase?: boolean): (val: string) => boolean {
+  const map: Record<string, boolean> = Object.create(null);
+  const list = str.split(",");
+  for (let i = 0; i < list.length; i++) {
+    map[list[i]] = true;
+  }
+  return expectsLowerCase
+    ? (val: string) => Boolean(map[val.toLowerCase()])
+    : (val: string) => Boolean(map[val]);
+}
+
+/**
+ * 代码美化器配置
+ *
+ * 包含 HTML 和 JavaScript 代码的格式化配置
+ *
+ * @example
+ * ```typescript
+ * import { beautifierConf } from '@/utils/common/helper';
+ * // 使用 beautifierConf.html 或 beautifierConf.js 配置代码格式化
+ * ```
+ */
+export const beautifierConf = {
+  /** HTML 代码美化配置 */
+  html: {
+    indent_size: "2",
+    indent_char: " ",
+    max_preserve_newlines: "-1",
+    preserve_newlines: false,
+    keep_array_indentation: false,
+    break_chained_methods: false,
+    indent_scripts: "separate",
+    brace_style: "end-expand",
+    space_before_conditional: true,
+    unescape_strings: false,
+    jslint_happy: false,
+    end_with_newline: true,
+    wrap_line_length: "110",
+    indent_inner_html: true,
+    comma_first: false,
+    e4x: true,
+    indent_empty_lines: true,
+  },
+  /** JavaScript 代码美化配置 */
+  js: {
+    indent_size: "2",
+    indent_char: " ",
+    max_preserve_newlines: "-1",
+    preserve_newlines: false,
+    keep_array_indentation: false,
+    break_chained_methods: false,
+    indent_scripts: "normal",
+    brace_style: "end-expand",
+    space_before_conditional: true,
+    unescape_strings: false,
+    jslint_happy: true,
+    end_with_newline: true,
+    wrap_line_length: "110",
+    indent_inner_html: true,
+    comma_first: false,
+    e4x: true,
+    indent_empty_lines: true,
+  },
+};
diff --git a/frontend/new-web/src/utils/common/index.ts b/frontend/new-web/src/utils/common/index.ts
new file mode 100644
index 00000000..8596f993
--- /dev/null
+++ b/frontend/new-web/src/utils/common/index.ts
@@ -0,0 +1,11 @@
+/**
+ * 通用工具函数统一导出
+ *
+ * @module utils/common
+ */
+
+export * from "./common";
+export * from "./dateUtil";
+export * from "./fetchAllPages";
+export * from "./helper";
+export * from "./quickStartManager";
diff --git a/frontend/new-web/src/utils/common/quickStartManager.ts b/frontend/new-web/src/utils/common/quickStartManager.ts
new file mode 100644
index 00000000..bf686310
--- /dev/null
+++ b/frontend/new-web/src/utils/common/quickStartManager.ts
@@ -0,0 +1,290 @@
+/**
+ * 快速开始链接管理器
+ *
+ * 管理工作台「我的收藏」功能，支持添加、删除、更新和监听快速链接
+ *
+ * ## 功能特性
+ *
+ * - 支持收藏数量上限（默认 15 个）
+ * - 自动持久化到 localStorage
+ * - 支持观察者模式，数据变化时通知监听者
+ * - 支持从路由信息自动创建链接
+ *
+ * @module utils/quickStartManager
+ */
+
+import { ElMessage } from "element-plus";
+
+/** 收藏数量上限（工作台「我的收藏」为 3 列 × 最多 5 排，共 15 个） */
+export const QUICK_LINK_MAX = 15;
+
+/**
+ * 快速链接数据类型
+ */
+export interface QuickLink {
+  /** 链接标题 */
+  title: string;
+  /** 图标名称 */
+  icon: string;
+  /** 跳转路径 */
+  href: string;
+  /** 唯一标识（可选） */
+  id?: string;
+}
+
+/**
+ * 快速开始管理器类
+ *
+ * 提供快速链接的增删改查功能，并支持观察者模式
+ */
+class QuickStartManager {
+  /** 本地存储键名 */
+  private storageKey = "quick-start-links";
+
+  /** 监听器列表 */
+  private listeners: Array<(links: QuickLink[]) => void> = [];
+
+  /**
+   * 获取所有快速链接
+   *
+   * @returns {QuickLink[]} 快速链接数组
+   *
+   * @example
+   * ```typescript
+   * const links = quickStartManager.getQuickLinks();
+   * console.log(links);
+   * ```
+   */
+  getQuickLinks(): QuickLink[] {
+    try {
+      const stored = localStorage.getItem(this.storageKey);
+      return stored ? JSON.parse(stored) : this.getDefaultLinks();
+    } catch (error) {
+      console.error("Failed to load quick links:", error);
+      return this.getDefaultLinks();
+    }
+  }
+
+  /**
+   * 获取默认链接（空数组）
+   *
+   * @returns {QuickLink[]} 默认链接数组
+   */
+  private getDefaultLinks(): QuickLink[] {
+    return [];
+  }
+
+  /**
+   * 保存快速链接到本地存储
+   *
+   * @param {QuickLink[]} links - 要保存的快速链接数组
+   */
+  saveQuickLinks(links: QuickLink[]): void {
+    try {
+      localStorage.setItem(this.storageKey, JSON.stringify(links));
+      this.notifyListeners(links);
+    } catch (error) {
+      console.error("Failed to save quick links:", error);
+    }
+  }
+
+  /**
+   * 添加或更新快速链接
+   *
+   * 如果链接已存在（通过 href 判断），则更新该链接；否则添加新链接
+   * 如果收藏数量已达上限，则提示并返回 false
+   *
+   * @param {QuickLink} link - 要添加或更新的快速链接
+   * @returns {boolean} 是否已保存成功
+   *
+   * @example
+   * ```typescript
+   * const success = quickStartManager.addQuickLink({
+   *   title: '仪表盘',
+   *   icon: 'dashboard',
+   *   href: '/dashboard',
+   * });
+   * ```
+   */
+  addQuickLink(link: QuickLink): boolean {
+    const links = this.getQuickLinks();
+
+    // 检查是否已存在相同 href 的链接
+    const existingIndex = links.findIndex((l) => l.href === link.href);
+    if (existingIndex !== -1) {
+      // 更新现有链接
+      links[existingIndex] = { ...links[existingIndex], ...link };
+      ElMessage.success(`已更新快速链接：${link.title}`);
+      this.saveQuickLinks(links);
+      return true;
+    }
+
+    // 检查是否达到收藏上限
+    if (links.length >= QUICK_LINK_MAX) {
+      ElMessage.warning(`收藏已满（最多 ${QUICK_LINK_MAX} 个），请先移除后再添加`);
+      return false;
+    }
+
+    // 添加新链接
+    links.push(link);
+    this.saveQuickLinks(links);
+    return true;
+  }
+
+  /**
+   * 根据 id 删除快速链接
+   *
+   * @param {string} id - 要删除的链接 id
+   *
+   * @example
+   * ```typescript
+   * quickStartManager.removeQuickLink('link-123');
+   * ```
+   */
+  removeQuickLink(id: string): void {
+    const links = this.getQuickLinks();
+    const filteredLinks = links.filter((link) => link.id !== id);
+
+    if (filteredLinks.length < links.length) {
+      this.saveQuickLinks(filteredLinks);
+    }
+  }
+
+  /**
+   * 根据路由路径删除快速链接
+   *
+   * 用于兼容没有 id 的旧数据
+   *
+   * @param {string} href - 要删除的链接路径
+   *
+   * @example
+   * ```typescript
+   * quickStartManager.removeQuickLinkByHref('/dashboard');
+   * ```
+   */
+  removeQuickLinkByHref(href: string): void {
+    const links = this.getQuickLinks();
+    const filteredLinks = links.filter((link) => link.href !== href);
+    if (filteredLinks.length < links.length) {
+      this.saveQuickLinks(filteredLinks);
+    }
+  }
+
+  /**
+   * 清空所有快速链接
+   *
+   * @example
+   * ```typescript
+   * quickStartManager.clearQuickLinks();
+   * ```
+   */
+  clearQuickLinks(): void {
+    this.saveQuickLinks([]);
+  }
+
+  /**
+   * 从路由或菜单信息创建快速链接
+   *
+   * @param {any} route - 路由或菜单对象
+   * @param {string} [customTitle] - 自定义标题（可选）
+   * @returns {QuickLink} 创建的快速链接对象
+   *
+   * @example
+   * ```typescript
+   * const link = quickStartManager.createQuickLinkFromRoute(route);
+   * quickStartManager.addQuickLink(link);
+   * ```
+   */
+  createQuickLinkFromRoute(route: any, customTitle?: string): QuickLink {
+    // 确定最终使用的标题 - 优先使用 customTitle
+    const finalTitle = customTitle || route.title || route.name || "未命名页面";
+
+    return {
+      title: finalTitle,
+      icon: route.icon,
+      href: route.fullPath || route.path,
+      id: `route-${route.path.replace(/\//g, "-")}-${Date.now()}`,
+    };
+  }
+
+  /**
+   * 添加数据变化监听器
+   *
+   * @param {(links: QuickLink[]) => void} callback - 回调函数，当数据变化时触发
+   *
+   * @example
+   * ```typescript
+   * const callback = (links) => {
+   *   console.log('链接列表已更新:', links);
+   * };
+   * quickStartManager.addListener(callback);
+   * ```
+   */
+  addListener(callback: (links: QuickLink[]) => void): void {
+    this.listeners.push(callback);
+  }
+
+  /**
+   * 移除数据变化监听器
+   *
+   * @param {(links: QuickLink[]) => void} callback - 要移除的回调函数
+   *
+   * @example
+   * ```typescript
+   * quickStartManager.removeListener(callback);
+   * ```
+   */
+  removeListener(callback: (links: QuickLink[]) => void): void {
+    const index = this.listeners.indexOf(callback);
+    if (index > -1) {
+      this.listeners.splice(index, 1);
+    }
+  }
+
+  /**
+   * 通知所有监听器数据已变化
+   *
+   * @param {QuickLink[]} links - 当前的快速链接数组
+   */
+  private notifyListeners(links: QuickLink[]): void {
+    this.listeners.forEach((callback) => {
+      try {
+        callback(links);
+      } catch (error) {
+        console.error("Error in quick start listener:", error);
+      }
+    });
+  }
+
+  /**
+   * 检查链接是否已存在
+   *
+   * @param {string} href - 要检查的链接路径
+   * @returns {boolean} 是否存在
+   *
+   * @example
+   * ```typescript
+   * const exists = quickStartManager.isLinkExists('/dashboard');
+   * ```
+   */
+  isLinkExists(href: string): boolean {
+    const links = this.getQuickLinks();
+    return links.some((link) => link.href === href);
+  }
+}
+
+/**
+ * 快速开始管理器全局实例
+ *
+ * @example
+ * ```typescript
+ * import { quickStartManager } from '@/utils/common/quickStartManager';
+ *
+ * // 获取所有链接
+ * const links = quickStartManager.getQuickLinks();
+ *
+ * // 添加新链接
+ * quickStartManager.addQuickLink({ title: '设置', icon: 'settings', href: '/settings' });
+ * ```
+ */
+export const quickStartManager = new QuickStartManager();
diff --git a/frontend/new-web/src/utils/constants/index.ts b/frontend/new-web/src/utils/constants/index.ts
index 831be296..b235fb9a 100644
--- a/frontend/new-web/src/utils/constants/index.ts
+++ b/frontend/new-web/src/utils/constants/index.ts
@@ -2,7 +2,7 @@
  * 常量定义相关工具函数统一导出
  *
  * @module utils/constants/index
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
-export * from './links'
+export * from "./links";
diff --git a/frontend/new-web/src/utils/constants/links.ts b/frontend/new-web/src/utils/constants/links.ts
index 06d297e6..554c6814 100644
--- a/frontend/new-web/src/utils/constants/links.ts
+++ b/frontend/new-web/src/utils/constants/links.ts
@@ -3,33 +3,33 @@
  * 集中管理便于维护和更新链接地址
  *
  * @module utils/constants/links
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 export const WEB_LINKS = {
   // Github 主页
-  GITHUB_HOME: 'https://github.com/Daymychen/art-design-pro',
+  GITHUB_HOME: "https://github.com/Daymychen/art-design-pro",
 
   // 项目 Github 主页
-  GITHUB: 'https://github.com/Daymychen/art-design-pro',
+  GITHUB: "https://github.com/Daymychen/art-design-pro",
 
   // 个人博客
-  BLOG: 'https://www.artd.pro',
+  BLOG: "https://www.artd.pro",
 
   // 项目文档
-  DOCS: 'https://www.artd.pro/docs/zh/',
+  DOCS: "https://www.artd.pro/docs/zh/",
 
   // 精简版本
-  LiteVersion: 'https://www.artd.pro/docs/zh/guide/lite-version.html',
+  LiteVersion: "https://www.artd.pro/docs/zh/guide/lite-version.html",
 
   // v2.6.1版本
-  OldVersion: 'https://www.artd.pro/v2/',
+  OldVersion: "https://www.artd.pro/v2/",
 
   // 项目社区
-  COMMUNITY: 'https://www.artd.pro/docs/zh/community/communicate.html',
+  COMMUNITY: "https://www.artd.pro/docs/zh/community/communicate.html",
 
   // 个人 Bilibili 主页
-  BILIBILI: 'https://space.bilibili.com/425500936?spm_id_from=333.1007.0.0',
+  BILIBILI: "https://space.bilibili.com/425500936?spm_id_from=333.1007.0.0",
 
   // 项目介绍
-  INTRODUCE: 'https://www.artd.pro/docs/zh/guide/introduce.html'
-}
+  INTRODUCE: "https://www.artd.pro/docs/zh/guide/introduce.html",
+};
diff --git a/frontend/new-web/src/utils/fetchAllPages.ts b/frontend/new-web/src/utils/fetchAllPages.ts
new file mode 100644
index 00000000..2e97a0c8
--- /dev/null
+++ b/frontend/new-web/src/utils/fetchAllPages.ts
@@ -0,0 +1 @@
+export * from "./common/fetchAllPages";
diff --git a/frontend/new-web/src/utils/form/index.ts b/frontend/new-web/src/utils/form/index.ts
index ed23a462..2b949f66 100644
--- a/frontend/new-web/src/utils/form/index.ts
+++ b/frontend/new-web/src/utils/form/index.ts
@@ -2,11 +2,11 @@
  * 表单工具函数统一导出
  *
  * @module utils/form
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
 // 表单验证器
-export * from './validator'
+export * from "./validator";
 
 // 响应式布局
-export * from './responsive'
+export * from "./responsive";
diff --git a/frontend/new-web/src/utils/form/responsive.ts b/frontend/new-web/src/utils/form/responsive.ts
index c11df924..dcac740a 100644
--- a/frontend/new-web/src/utils/form/responsive.ts
+++ b/frontend/new-web/src/utils/form/responsive.ts
@@ -31,22 +31,22 @@
  * - createResponsiveSpanCalculator: 创建 span 计算器（柯里化）
  *
  * @module utils/form/responsive
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
 /**
  * 响应式断点类型
  */
-export type ResponsiveBreakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+export type ResponsiveBreakpoint = "xs" | "sm" | "md" | "lg" | "xl";
 
 /**
  * 断点配置映射
  */
 interface BreakpointConfig {
   /** 最小 span 阈值 */
-  threshold: number
+  threshold: number;
   /** 降级后的 span 值 */
-  fallback: number
+  fallback: number;
 }
 
 /**
@@ -57,8 +57,8 @@ const BREAKPOINT_CONFIG: Record<ResponsiveBreakpoint, BreakpointConfig | null> =
   sm: { threshold: 12, fallback: 12 }, // 平板：小于 12 时使用半宽
   md: { threshold: 8, fallback: 8 }, // 中等屏幕：小于 8 时使用三分之一宽
   lg: null, // 大屏幕：直接使用设置的 span
-  xl: null // 超大屏幕：直接使用设置的 span
-}
+  xl: null, // 超大屏幕：直接使用设置的 span
+};
 
 /**
  * 计算响应式列宽
@@ -87,16 +87,16 @@ export function calculateResponsiveSpan(
   defaultSpan: number,
   breakpoint: ResponsiveBreakpoint
 ): number {
-  const finalSpan = itemSpan ?? defaultSpan
-  const config = BREAKPOINT_CONFIG[breakpoint]
+  const finalSpan = itemSpan ?? defaultSpan;
+  const config = BREAKPOINT_CONFIG[breakpoint];
 
   // 如果没有配置（lg/xl），直接返回原始 span
   if (!config) {
-    return finalSpan
+    return finalSpan;
   }
 
   // 如果 span 小于阈值，使用降级值
-  return finalSpan >= config.threshold ? finalSpan : config.fallback
+  return finalSpan >= config.threshold ? finalSpan : config.fallback;
 }
 
 /**
@@ -117,6 +117,6 @@ export function calculateResponsiveSpan(
  */
 export function createResponsiveSpanCalculator(defaultSpan: number) {
   return (itemSpan: number | undefined, breakpoint: ResponsiveBreakpoint): number => {
-    return calculateResponsiveSpan(itemSpan, defaultSpan, breakpoint)
-  }
+    return calculateResponsiveSpan(itemSpan, defaultSpan, breakpoint);
+  };
 }
diff --git a/frontend/new-web/src/utils/form/validator.ts b/frontend/new-web/src/utils/form/validator.ts
index 36707636..983c2380 100644
--- a/frontend/new-web/src/utils/form/validator.ts
+++ b/frontend/new-web/src/utils/form/validator.ts
@@ -27,16 +27,16 @@
  * - 银行卡：13-19位，通过 Luhn 算法验证
  *
  * @module utils/validation/formValidator
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
 /**
  * 密码强度级别枚举
  */
 export enum PasswordStrength {
-  WEAK = '弱',
-  MEDIUM = '中',
-  STRONG = '强'
+  WEAK = "弱",
+  MEDIUM = "中",
+  STRONG = "强",
 }
 
 /**
@@ -45,10 +45,10 @@ export enum PasswordStrength {
  * @returns 返回去除首尾空格后的字符串
  */
 export function trimSpaces(value: string): string {
-  if (typeof value !== 'string') {
-    return ''
+  if (typeof value !== "string") {
+    return "";
   }
-  return value.trim()
+  return value.trim();
 }
 
 /**
@@ -57,13 +57,13 @@ export function trimSpaces(value: string): string {
  * @returns 返回验证结果，true表示格式正确
  */
 export function validatePhone(value: string): boolean {
-  if (!value || typeof value !== 'string') {
-    return false
+  if (!value || typeof value !== "string") {
+    return false;
   }
 
   // 中国大陆手机号码：1开头，第二位为3-9，共11位数字
-  const phoneRegex = /^1[3-9]\d{9}$/
-  return phoneRegex.test(value.trim())
+  const phoneRegex = /^1[3-9]\d{9}$/;
+  return phoneRegex.test(value.trim());
 }
 
 /**
@@ -72,13 +72,13 @@ export function validatePhone(value: string): boolean {
  * @returns 返回验证结果，true表示格式正确
  */
 export function validateTelPhone(value: string): boolean {
-  if (!value || typeof value !== 'string') {
-    return false
+  if (!value || typeof value !== "string") {
+    return false;
   }
 
   // 支持格式：区号-号码，如：010-12345678、0755-1234567
-  const telRegex = /^0\d{2,3}-?\d{7,8}$/
-  return telRegex.test(value.trim().replace(/\s+/g, ''))
+  const telRegex = /^0\d{2,3}-?\d{7,8}$/;
+  return telRegex.test(value.trim().replace(/\s+/g, ""));
 }
 
 /**
@@ -88,13 +88,13 @@ export function validateTelPhone(value: string): boolean {
  * @description 规则：字母开头，5-20位，支持字母、数字、下划线
  */
 export function validateAccount(value: string): boolean {
-  if (!value || typeof value !== 'string') {
-    return false
+  if (!value || typeof value !== "string") {
+    return false;
   }
 
   // 字母开头，5-20位，支持字母、数字、下划线
-  const accountRegex = /^[a-zA-Z][a-zA-Z0-9_]{4,19}$/
-  return accountRegex.test(value.trim())
+  const accountRegex = /^[a-zA-Z][a-zA-Z0-9_]{4,19}$/;
+  return accountRegex.test(value.trim());
 }
 
 /**
@@ -104,22 +104,22 @@ export function validateAccount(value: string): boolean {
  * @description 规则：6-20位，必须包含字母和数字
  */
 export function validatePassword(value: string): boolean {
-  if (!value || typeof value !== 'string') {
-    return false
+  if (!value || typeof value !== "string") {
+    return false;
   }
 
-  const trimmedValue = value.trim()
+  const trimmedValue = value.trim();
 
   // 长度检查
   if (trimmedValue.length < 6 || trimmedValue.length > 20) {
-    return false
+    return false;
   }
 
   // 必须包含字母和数字
-  const hasLetter = /[a-zA-Z]/.test(trimmedValue)
-  const hasNumber = /\d/.test(trimmedValue)
+  const hasLetter = /[a-zA-Z]/.test(trimmedValue);
+  const hasNumber = /\d/.test(trimmedValue);
 
-  return hasLetter && hasNumber
+  return hasLetter && hasNumber;
 }
 
 /**
@@ -129,24 +129,24 @@ export function validatePassword(value: string): boolean {
  * @description 规则：8-20位，必须包含大写字母、小写字母、数字和特殊字符
  */
 export function validateStrongPassword(value: string): boolean {
-  if (!value || typeof value !== 'string') {
-    return false
+  if (!value || typeof value !== "string") {
+    return false;
   }
 
-  const trimmedValue = value.trim()
+  const trimmedValue = value.trim();
 
   // 长度检查
   if (trimmedValue.length < 8 || trimmedValue.length > 20) {
-    return false
+    return false;
   }
 
   // 必须包含：大写字母、小写字母、数字、特殊字符
-  const hasUpperCase = /[A-Z]/.test(trimmedValue)
-  const hasLowerCase = /[a-z]/.test(trimmedValue)
-  const hasNumber = /\d/.test(trimmedValue)
-  const hasSpecialChar = /[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/.test(trimmedValue)
+  const hasUpperCase = /[A-Z]/.test(trimmedValue);
+  const hasLowerCase = /[a-z]/.test(trimmedValue);
+  const hasNumber = /\d/.test(trimmedValue);
+  const hasSpecialChar = /[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/.test(trimmedValue);
 
-  return hasUpperCase && hasLowerCase && hasNumber && hasSpecialChar
+  return hasUpperCase && hasLowerCase && hasNumber && hasSpecialChar;
 }
 
 /**
@@ -156,29 +156,29 @@ export function validateStrongPassword(value: string): boolean {
  * @description 弱：纯数字/纯字母/纯特殊字符；中：两种组合；强：三种或以上组合
  */
 export function getPasswordStrength(value: string): PasswordStrength {
-  if (!value || typeof value !== 'string') {
-    return PasswordStrength.WEAK
+  if (!value || typeof value !== "string") {
+    return PasswordStrength.WEAK;
   }
 
-  const trimmedValue = value.trim()
+  const trimmedValue = value.trim();
 
   if (trimmedValue.length < 6) {
-    return PasswordStrength.WEAK
+    return PasswordStrength.WEAK;
   }
 
-  const hasUpperCase = /[A-Z]/.test(trimmedValue)
-  const hasLowerCase = /[a-z]/.test(trimmedValue)
-  const hasNumber = /\d/.test(trimmedValue)
-  const hasSpecialChar = /[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/.test(trimmedValue)
+  const hasUpperCase = /[A-Z]/.test(trimmedValue);
+  const hasLowerCase = /[a-z]/.test(trimmedValue);
+  const hasNumber = /\d/.test(trimmedValue);
+  const hasSpecialChar = /[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?]/.test(trimmedValue);
 
-  const typeCount = [hasUpperCase, hasLowerCase, hasNumber, hasSpecialChar].filter(Boolean).length
+  const typeCount = [hasUpperCase, hasLowerCase, hasNumber, hasSpecialChar].filter(Boolean).length;
 
   if (typeCount >= 3) {
-    return PasswordStrength.STRONG
+    return PasswordStrength.STRONG;
   } else if (typeCount >= 2) {
-    return PasswordStrength.MEDIUM
+    return PasswordStrength.MEDIUM;
   } else {
-    return PasswordStrength.WEAK
+    return PasswordStrength.WEAK;
   }
 }
 
@@ -188,23 +188,23 @@ export function getPasswordStrength(value: string): PasswordStrength {
  * @returns 返回验证结果，true表示格式正确
  */
 export function validateIPv4Address(value: string): boolean {
-  if (!value || typeof value !== 'string') {
-    return false
+  if (!value || typeof value !== "string") {
+    return false;
   }
 
-  const trimmedValue = value.trim()
-  const ipRegex = /^((25[0-5]|2[0-4]\d|[01]?\d{1,2})\.){3}(25[0-5]|2[0-4]\d|[01]?\d{1,2})$/
+  const trimmedValue = value.trim();
+  const ipRegex = /^((25[0-5]|2[0-4]\d|[01]?\d{1,2})\.){3}(25[0-5]|2[0-4]\d|[01]?\d{1,2})$/;
 
   if (!ipRegex.test(trimmedValue)) {
-    return false
+    return false;
   }
 
   // 额外检查每个段是否在有效范围内
-  const segments = trimmedValue.split('.')
+  const segments = trimmedValue.split(".");
   return segments.every((segment) => {
-    const num = parseInt(segment, 10)
-    return num >= 0 && num <= 255
-  })
+    const num = parseInt(segment, 10);
+    return num >= 0 && num <= 255;
+  });
 }
 
 /**
@@ -213,17 +213,17 @@ export function validateIPv4Address(value: string): boolean {
  * @returns 返回验证结果，true表示格式正确
  */
 export function validateEmail(value: string): boolean {
-  if (!value || typeof value !== 'string') {
-    return false
+  if (!value || typeof value !== "string") {
+    return false;
   }
 
-  const trimmedValue = value.trim()
+  const trimmedValue = value.trim();
 
   // RFC 5322 标准的简化版邮箱正则
   const emailRegex =
-    /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
+    /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
 
-  return emailRegex.test(trimmedValue) && trimmedValue.length <= 254
+  return emailRegex.test(trimmedValue) && trimmedValue.length <= 254;
 }
 
 /**
@@ -232,15 +232,15 @@ export function validateEmail(value: string): boolean {
  * @returns 返回验证结果，true表示格式正确
  */
 export function validateURL(value: string): boolean {
-  if (!value || typeof value !== 'string') {
-    return false
+  if (!value || typeof value !== "string") {
+    return false;
   }
 
   try {
-    new URL(value.trim())
-    return true
+    new URL(value.trim());
+    return true;
   } catch {
-    return false
+    return false;
   }
 }
 
@@ -250,31 +250,31 @@ export function validateURL(value: string): boolean {
  * @returns 返回验证结果，true表示格式正确
  */
 export function validateChineseIDCard(value: string): boolean {
-  if (!value || typeof value !== 'string') {
-    return false
+  if (!value || typeof value !== "string") {
+    return false;
   }
 
-  const trimmedValue = value.trim()
+  const trimmedValue = value.trim();
 
   // 18位身份证号码正则
   const idCardRegex =
-    /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
+    /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
 
   if (!idCardRegex.test(trimmedValue)) {
-    return false
+    return false;
   }
 
   // 验证校验码
-  const weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
-  const checkCodes = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2']
+  const weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
+  const checkCodes = ["1", "0", "X", "9", "8", "7", "6", "5", "4", "3", "2"];
 
-  let sum = 0
+  let sum = 0;
   for (let i = 0; i < 17; i++) {
-    sum += parseInt(trimmedValue[i]) * weights[i]
+    sum += parseInt(trimmedValue[i]) * weights[i];
   }
 
-  const checkCode = checkCodes[sum % 11]
-  return trimmedValue[17].toUpperCase() === checkCode
+  const checkCode = checkCodes[sum % 11];
+  return trimmedValue[17].toUpperCase() === checkCode;
 }
 
 /**
@@ -283,34 +283,34 @@ export function validateChineseIDCard(value: string): boolean {
  * @returns 返回验证结果，true表示格式正确
  */
 export function validateBankCard(value: string): boolean {
-  if (!value || typeof value !== 'string') {
-    return false
+  if (!value || typeof value !== "string") {
+    return false;
   }
 
-  const trimmedValue = value.trim().replace(/\s+/g, '')
+  const trimmedValue = value.trim().replace(/\s+/g, "");
 
   // 银行卡号通常为13-19位数字
   if (!/^\d{13,19}$/.test(trimmedValue)) {
-    return false
+    return false;
   }
 
   // Luhn算法验证
-  let sum = 0
-  let shouldDouble = false
+  let sum = 0;
+  let shouldDouble = false;
 
   for (let i = trimmedValue.length - 1; i >= 0; i--) {
-    let digit = parseInt(trimmedValue[i])
+    let digit = parseInt(trimmedValue[i]);
 
     if (shouldDouble) {
-      digit *= 2
+      digit *= 2;
       if (digit > 9) {
-        digit = (digit % 10) + 1
+        digit = (digit % 10) + 1;
       }
     }
 
-    sum += digit
-    shouldDouble = !shouldDouble
+    sum += digit;
+    shouldDouble = !shouldDouble;
   }
 
-  return sum % 10 === 0
+  return sum % 10 === 0;
 }
diff --git a/frontend/new-web/src/utils/http/config.ts b/frontend/new-web/src/utils/http/config.ts
new file mode 100644
index 00000000..90203457
--- /dev/null
+++ b/frontend/new-web/src/utils/http/config.ts
@@ -0,0 +1,42 @@
+/**
+ * HTTP 请求配置模块
+ *
+ * 集中管理 HTTP 请求的配置参数
+ *
+ * @module utils/http/config
+ */
+
+import { type AxiosRequestConfig } from "axios";
+import * as qs from "qs";
+
+/**
+ * 默认请求配置
+ */
+export const defaultConfig: AxiosRequestConfig = {
+  baseURL: import.meta.env.VITE_APP_BASE_API,
+  timeout: Number(import.meta.env.VITE_TIMEOUT) || 15000,
+  headers: { "Content-Type": "application/json;charset=utf-8" },
+  paramsSerializer: (params) => qs.stringify(params, { indices: false }),
+};
+
+/**
+ * 跳过鉴权的标识
+ */
+export const NO_AUTH_FLAG = "no-auth";
+
+/**
+ * 请求方法类型
+ */
+export type HttpMethod = "GET" | "POST" | "PUT" | "DELETE" | "PATCH" | "HEAD" | "OPTIONS";
+
+/**
+ * 扩展的请求配置
+ */
+export interface ExtendedRequestConfig extends AxiosRequestConfig {
+  /** 是否跳过鉴权 */
+  skipAuth?: boolean;
+  /** 是否显示成功消息 */
+  showSuccessMessage?: boolean;
+  /** 是否显示错误消息 */
+  showErrorMessage?: boolean;
+}
diff --git a/frontend/new-web/src/utils/http/error.ts b/frontend/new-web/src/utils/http/error.ts
index 0f2c1ae9..3f48171c 100644
--- a/frontend/new-web/src/utils/http/error.ts
+++ b/frontend/new-web/src/utils/http/error.ts
@@ -3,80 +3,55 @@
  *
  * 提供统一的 HTTP 请求错误处理机制
  *
- * ## 主要功能
- *
- * - 自定义 HttpError 错误类，封装错误信息、状态码、时间戳等
- * - 错误拦截和转换，将 Axios 错误转换为标准的 HttpError
- * - 错误消息国际化处理，根据状态码返回对应的多语言错误提示
- * - 错误日志记录，便于问题追踪和调试
- * - 错误和成功消息的统一展示
- * - 类型守卫函数，用于判断错误类型
- *
- * ## 使用场景
- *
- * - HTTP 请求拦截器中统一处理错误
- * - 业务代码中捕获和处理特定错误
- * - 错误日志收集和上报
- *
  * @module utils/http/error
- * @author Art Design Pro Team
  */
-import { AxiosError } from 'axios'
-import { ApiStatus } from './status'
-import { $t } from '@/locales'
 
-// 错误响应接口
-export interface ErrorResponse {
-  /** 错误状态码 */
-  code: number
-  /** 错误消息 */
-  msg: string
-  /** 错误附加数据 */
-  data?: unknown
-}
+import { AxiosError } from "axios";
+import { ApiStatus } from "./status";
+import { $t } from "@/locales";
 
 // 错误日志数据接口
 export interface ErrorLogData {
   /** 错误状态码 */
-  code: number
+  code: number;
   /** 错误消息 */
-  message: string
+  message: string;
   /** 错误附加数据 */
-  data?: unknown
+  data?: unknown;
   /** 错误发生时间戳 */
-  timestamp: string
+  timestamp: string;
   /** 请求 URL */
-  url?: string
+  url?: string;
   /** 请求方法 */
-  method?: string
+  method?: string;
   /** 错误堆栈信息 */
-  stack?: string
+  stack?: string;
 }
 
 // 自定义 HttpError 类
 export class HttpError extends Error {
-  public readonly code: number
-  public readonly data?: unknown
-  public readonly timestamp: string
-  public readonly url?: string
-  public readonly method?: string
+  public readonly code: number;
+  public readonly data?: unknown;
+  public readonly timestamp: string;
+  public readonly url?: string;
+  public readonly method?: string;
 
   constructor(
     message: string,
     code: number,
     options?: {
-      data?: unknown
-      url?: string
-      method?: string
+      data?: unknown;
+      url?: string;
+      method?: string;
     }
   ) {
-    super(message)
-    this.name = 'HttpError'
-    this.code = code
-    this.data = options?.data
-    this.timestamp = new Date().toISOString()
-    this.url = options?.url
-    this.method = options?.method
+    super(message);
+    this.name = "HttpError";
+    this.code = code;
+    this.data = options?.data;
+    this.timestamp = new Date().toISOString();
+    this.url = options?.url;
+    this.method = options?.method;
   }
 
   public toLogData(): ErrorLogData {
@@ -87,8 +62,8 @@ export class HttpError extends Error {
       timestamp: this.timestamp,
       url: this.url,
       method: this.method,
-      stack: this.stack
-    }
+      stack: this.stack,
+    };
   }
 }
 
@@ -99,53 +74,53 @@ export class HttpError extends Error {
  */
 const getErrorMessage = (status: number): string => {
   const errorMap: Record<number, string> = {
-    [ApiStatus.unauthorized]: 'httpMsg.unauthorized',
-    [ApiStatus.forbidden]: 'httpMsg.forbidden',
-    [ApiStatus.notFound]: 'httpMsg.notFound',
-    [ApiStatus.methodNotAllowed]: 'httpMsg.methodNotAllowed',
-    [ApiStatus.requestTimeout]: 'httpMsg.requestTimeout',
-    [ApiStatus.internalServerError]: 'httpMsg.internalServerError',
-    [ApiStatus.badGateway]: 'httpMsg.badGateway',
-    [ApiStatus.serviceUnavailable]: 'httpMsg.serviceUnavailable',
-    [ApiStatus.gatewayTimeout]: 'httpMsg.gatewayTimeout'
-  }
+    [ApiStatus.unauthorized]: "httpMsg.unauthorized",
+    [ApiStatus.forbidden]: "httpMsg.forbidden",
+    [ApiStatus.notFound]: "httpMsg.notFound",
+    [ApiStatus.methodNotAllowed]: "httpMsg.methodNotAllowed",
+    [ApiStatus.requestTimeout]: "httpMsg.requestTimeout",
+    [ApiStatus.internalServerError]: "httpMsg.internalServerError",
+    [ApiStatus.badGateway]: "httpMsg.badGateway",
+    [ApiStatus.serviceUnavailable]: "httpMsg.serviceUnavailable",
+    [ApiStatus.gatewayTimeout]: "httpMsg.gatewayTimeout",
+  };
 
-  return $t(errorMap[status] || 'httpMsg.internalServerError')
-}
+  return $t(errorMap[status] || "httpMsg.internalServerError");
+};
 
 /**
  * 处理错误
  * @param error 错误对象
  * @returns 错误对象
  */
-export function handleError(error: AxiosError<ErrorResponse>): never {
+export function handleError(error: AxiosError<ApiResponse>): never {
   // 处理取消的请求
-  if (error.code === 'ERR_CANCELED') {
-    console.warn('Request cancelled:', error.message)
-    throw new HttpError($t('httpMsg.requestCancelled'), ApiStatus.error)
+  if (error.code === "ERR_CANCELED") {
+    console.warn("Request cancelled:", error.message);
+    throw new HttpError($t("httpMsg.requestCancelled"), ApiStatus.error);
   }
 
-  const statusCode = error.response?.status
-  const errorMessage = error.response?.data?.msg || error.message
-  const requestConfig = error.config
+  const statusCode = error.response?.status;
+  const errorMessage = error.response?.data?.msg || error.message;
+  const requestConfig = error.config;
 
   // 处理网络错误
   if (!error.response) {
-    throw new HttpError($t('httpMsg.networkError'), ApiStatus.error, {
+    throw new HttpError($t("httpMsg.networkError"), ApiStatus.error, {
       url: requestConfig?.url,
-      method: requestConfig?.method?.toUpperCase()
-    })
+      method: requestConfig?.method?.toUpperCase(),
+    });
   }
 
   // 处理 HTTP 状态码错误
   const message = statusCode
     ? getErrorMessage(statusCode)
-    : errorMessage || $t('httpMsg.requestFailed')
+    : errorMessage || $t("httpMsg.requestFailed");
   throw new HttpError(message, statusCode || ApiStatus.error, {
     data: error.response.data,
     url: requestConfig?.url,
-    method: requestConfig?.method?.toUpperCase()
-  })
+    method: requestConfig?.method?.toUpperCase(),
+  });
 }
 
 /**
@@ -154,11 +129,14 @@ export function handleError(error: AxiosError<ErrorResponse>): never {
  * @param showMessage 是否显示错误消息
  */
 export function showError(error: HttpError, showMessage: boolean = true): void {
-  if (showMessage) {
-    ElMessage.error(error.message)
-  }
+  // 动态导入 ElMessage，避免循环依赖
+  import("element-plus").then(({ ElMessage }) => {
+    if (showMessage) {
+      ElMessage.error(error.message);
+    }
+  });
   // 记录错误日志
-  console.error('[HTTP Error]', error.toLogData())
+  console.error("[HTTP Error]", error.toLogData());
 }
 
 /**
@@ -167,9 +145,12 @@ export function showError(error: HttpError, showMessage: boolean = true): void {
  * @param showMessage 是否显示消息
  */
 export function showSuccess(message: string, showMessage: boolean = true): void {
-  if (showMessage) {
-    ElMessage.success(message)
-  }
+  // 动态导入 ElMessage，避免循环依赖
+  import("element-plus").then(({ ElMessage }) => {
+    if (showMessage) {
+      ElMessage.success(message);
+    }
+  });
 }
 
 /**
@@ -178,5 +159,5 @@ export function showSuccess(message: string, showMessage: boolean = true): void
  * @returns 是否为 HttpError 类型
  */
 export const isHttpError = (error: unknown): error is HttpError => {
-  return error instanceof HttpError
-}
+  return error instanceof HttpError;
+};
diff --git a/frontend/new-web/src/utils/http/errorCode.ts b/frontend/new-web/src/utils/http/errorCode.ts
new file mode 100644
index 00000000..3d572f0c
--- /dev/null
+++ b/frontend/new-web/src/utils/http/errorCode.ts
@@ -0,0 +1,32 @@
+/**
+ * 错误码映射模块
+ *
+ * 定义 HTTP 状态码对应的错误提示信息
+ *
+ * @module utils/errorCode
+ */
+
+/** 错误码映射类型 */
+interface ErrorCodeMap {
+  [key: string]: string;
+}
+
+/**
+ * HTTP 状态码与错误信息的映射表
+ *
+ * 包含常见的 HTTP 错误状态码及其对应的中文提示信息
+ *
+ * @example
+ * ```typescript
+ * import errorCode from '@/utils/errorCode';
+ * console.log(errorCode['401']); // "认证失败，无法访问系统资源"
+ * ```
+ */
+const errorCode: ErrorCodeMap = {
+  "401": "认证失败，无法访问系统资源",
+  "403": "当前操作没有权限",
+  "404": "访问资源不存在",
+  default: "系统未知错误，请反馈给管理员",
+};
+
+export default errorCode;
diff --git a/frontend/new-web/src/utils/http/handler.ts b/frontend/new-web/src/utils/http/handler.ts
new file mode 100644
index 00000000..959beae4
--- /dev/null
+++ b/frontend/new-web/src/utils/http/handler.ts
@@ -0,0 +1,181 @@
+/**
+ * HTTP 请求处理器模块
+ *
+ * 提供请求拦截器和响应拦截器的处理逻辑
+ *
+ * @module utils/http/handler
+ */
+
+import {
+  type InternalAxiosRequestConfig,
+  type AxiosResponse,
+  type AxiosError,
+  type AxiosHeaders,
+} from "axios";
+import { ElMessage } from "element-plus";
+import { ResultEnum } from "@/enums/api/result.enum";
+import { Auth } from "@/utils/auth";
+import { redirectToLogin } from "@/utils/auth/authRedirect";
+import { NO_AUTH_FLAG } from "./config";
+
+/**
+ * 请求拦截器处理函数
+ */
+export function handleRequest(config: InternalAxiosRequestConfig): InternalAxiosRequestConfig {
+  const accessToken = Auth.getAccessToken();
+  const auth = config.headers?.Authorization;
+
+  // 显式跳过鉴权
+  if (auth === NO_AUTH_FLAG) {
+    delete config.headers?.Authorization;
+    return config;
+  }
+
+  // 未手动设置 Authorization 时自动附加 Bearer
+  if (!auth && accessToken) {
+    if (!config.headers) {
+      config.headers = {} as AxiosHeaders;
+    }
+    config.headers.Authorization = `Bearer ${accessToken}`;
+  }
+
+  return config;
+}
+
+/**
+ * 请求错误处理函数
+ */
+export function handleRequestError(error: unknown): Promise<never> {
+  const msg = error instanceof Error ? error.message : String(error);
+  ElMessage.error(msg);
+  return Promise.reject(error);
+}
+
+/**
+ * 响应拦截器处理函数
+ */
+export function handleResponse(response: AxiosResponse<ApiResponse>): AxiosResponse<ApiResponse> {
+  // 如果响应是二进制流，则直接返回（用于文件下载、Excel 导出等）
+  if (response.config.responseType === "blob") {
+    return response;
+  }
+
+  const { data } = response;
+
+  // 检查请求是否失败
+  if (data.code !== ResultEnum.SUCCESS) {
+    ElMessage.error(data.msg);
+    throw response;
+  }
+
+  // 如果请求不是 GET 请求，且不是登录或退出登录接口，请求成功时显示成功提示
+  if (
+    response.config.method?.toUpperCase() !== "GET" &&
+    !response.config.url?.includes("login") &&
+    !response.config.url?.includes("logout")
+  ) {
+    ElMessage.success(data.msg);
+  }
+
+  return response;
+}
+
+/**
+ * 响应错误处理函数
+ */
+export async function handleResponseError(error: AxiosError<ApiResponse>): Promise<never> {
+  // 处理网络错误（连接拒绝、超时等）
+  if (!error.response) {
+    const errorMessage = getNetworkErrorMessage(error);
+    console.error("网络请求失败:", error);
+    ElMessage.error(errorMessage);
+    throw new Error(errorMessage);
+  }
+
+  const { data } = error.response;
+
+  // 处理blob类型的错误响应
+  if (error.response?.config.responseType === "blob" && error.response.data instanceof Blob) {
+    throw await handleBlobError(error.response.data);
+  }
+
+  const status = error.response.status;
+
+  /** 是否为后端约定的 JSON 业务码结构 */
+  const hasApiCode =
+    data !== undefined &&
+    data !== null &&
+    typeof data === "object" &&
+    "code" in data &&
+    typeof (data as ApiResponse).code === "number";
+
+  // HTTP 401 且无约定 body：按登录失效处理
+  if (status === 401 && !hasApiCode) {
+    await redirectToLogin("登录已失效，请重新登录");
+    throw new Error("Unauthorized");
+  }
+
+  // 根据业务码处理错误
+  throw await handleBusinessError(data);
+}
+
+/**
+ * 获取网络错误消息
+ */
+function getNetworkErrorMessage(error: AxiosError): string {
+  if (error.message?.includes("ECONNREFUSED")) {
+    return "服务器连接失败，请检查后端服务是否正常运行";
+  } else if (error.message?.includes("timeout")) {
+    return "请求超时，请稍后重试";
+  } else if (error.message?.includes("Network Error")) {
+    return "网络连接错误，请检查您的网络设置";
+  }
+  return "网络连接异常";
+}
+
+/**
+ * 处理 Blob 类型的错误响应
+ */
+async function handleBlobError(blobData: Blob): Promise<Error> {
+  try {
+    const text = await new Response(blobData).text();
+    const jsonData: ApiResponse = JSON.parse(text);
+
+    if (jsonData.code === ResultEnum.ERROR) {
+      ElMessage.error(jsonData.msg || "请求错误");
+      return new Error(jsonData.msg || "请求错误");
+    } else if (jsonData.code === ResultEnum.EXCEPTION) {
+      ElMessage.error(jsonData.msg || "服务异常");
+      return new Error(jsonData.msg || "服务异常");
+    }
+  } catch (e) {
+    console.error("请求异常:", e);
+    ElMessage.error("数据解析失败");
+    return new Error("数据解析失败");
+  }
+
+  ElMessage.error("请求处理失败，请稍后重试");
+  return new Error("请求处理失败");
+}
+
+/**
+ * 处理业务错误码
+ */
+async function handleBusinessError(data: ApiResponse | undefined): Promise<Error> {
+  if (data?.code === ResultEnum.TOKEN_EXPIRED) {
+    await redirectToLogin("登录已过期，请重新登录");
+    return new Error(data.msg);
+  } else if (data?.code === ResultEnum.ERROR) {
+    ElMessage.error(data.msg || "请求错误");
+    return new Error(data.msg || "请求错误");
+  } else if (data?.code === ResultEnum.UNAUTHORIZED) {
+    ElMessage.error(data.msg || "暂无权限");
+    return new Error(data.msg || "请求错误");
+  } else if (data?.code === ResultEnum.EXCEPTION) {
+    ElMessage.error(data.msg || "服务异常");
+    return new Error(data.msg || "服务异常");
+  } else {
+    ElMessage.error("请求处理失败，请稍后重试");
+    return new Error("请求处理失败");
+  }
+}
diff --git a/frontend/new-web/src/utils/http/index.ts b/frontend/new-web/src/utils/http/index.ts
index 0e0002ab..646d4564 100755
--- a/frontend/new-web/src/utils/http/index.ts
+++ b/frontend/new-web/src/utils/http/index.ts
@@ -5,210 +5,52 @@
  * ## 主要功能
  *
  * - 请求/响应拦截器（自动添加 Token、统一错误处理）
- * - 401 未授权自动登出（带防抖机制）
- * - 请求失败自动重试（可配置）
+ * - 支持跳过鉴权（headers.Authorization = "no-auth"）
+ * - 401 未授权自动重定向到登录页
  * - 统一的成功/错误消息提示
- * - 支持 GET/POST/PUT/DELETE 等常用方法
+ * - 支持文件下载（blob 响应类型）
+ *
+ * ## 使用方式
+ *
+ * ```typescript
+ * import httpRequest from '@/utils/http';
+ *
+ * // GET 请求
+ * const response = await httpRequest.get('/api/users');
+ *
+ * // POST 请求
+ * const response = await httpRequest.post('/api/users', { data: userData });
+ *
+ * // 跳过鉴权
+ * const response = await httpRequest.get('/api/public', {
+ *   headers: { Authorization: 'no-auth' }
+ * });
+ * ```
  *
  * @module utils/http
- * @author Art Design Pro Team
  */
 
-import axios, { AxiosRequestConfig, AxiosResponse, InternalAxiosRequestConfig } from 'axios'
-import { useUserStore } from '@/store/modules/user'
-import { ApiStatus } from './status'
-import { HttpError, handleError, showError, showSuccess } from './error'
-import { $t } from '@/locales'
-import { BaseResponse } from '@/types'
+import axios, { type AxiosInstance } from "axios";
+import { defaultConfig } from "./config";
+import { handleRequest, handleRequestError, handleResponse, handleResponseError } from "./handler";
 
-/** 请求配置常量 */
-const REQUEST_TIMEOUT = 15000
-const LOGOUT_DELAY = 500
-const MAX_RETRIES = 0
-const RETRY_DELAY = 1000
-const UNAUTHORIZED_DEBOUNCE_TIME = 3000
+/**
+ * 创建 HTTP 请求实例
+ */
+const httpRequest: AxiosInstance = axios.create(defaultConfig);
 
-/** 401防抖状态 */
-let isUnauthorizedErrorShown = false
-let unauthorizedTimer: NodeJS.Timeout | null = null
+/**
+ * 请求拦截器
+ */
+httpRequest.interceptors.request.use(handleRequest, handleRequestError);
 
-/** 扩展 AxiosRequestConfig */
-interface ExtendedAxiosRequestConfig extends AxiosRequestConfig {
-  showErrorMessage?: boolean
-  showSuccessMessage?: boolean
-}
+/**
+ * 响应拦截器
+ */
+httpRequest.interceptors.response.use(handleResponse, handleResponseError);
 
-const { VITE_API_URL, VITE_WITH_CREDENTIALS } = import.meta.env
+export default httpRequest;
 
-/** Axios实例 */
-const axiosInstance = axios.create({
-  timeout: REQUEST_TIMEOUT,
-  baseURL: VITE_API_URL,
-  withCredentials: VITE_WITH_CREDENTIALS === 'true',
-  validateStatus: (status) => status >= 200 && status < 300,
-  transformResponse: [
-    (data, headers) => {
-      const contentType = headers['content-type']
-      if (contentType?.includes('application/json')) {
-        try {
-          return JSON.parse(data)
-        } catch {
-          return data
-        }
-      }
-      return data
-    }
-  ]
-})
-
-/** 请求拦截器 */
-axiosInstance.interceptors.request.use(
-  (request: InternalAxiosRequestConfig) => {
-    const { accessToken } = useUserStore()
-    if (accessToken) request.headers.set('Authorization', accessToken)
-
-    if (request.data && !(request.data instanceof FormData) && !request.headers['Content-Type']) {
-      request.headers.set('Content-Type', 'application/json')
-      request.data = JSON.stringify(request.data)
-    }
-
-    return request
-  },
-  (error) => {
-    showError(createHttpError($t('httpMsg.requestConfigError'), ApiStatus.error))
-    return Promise.reject(error)
-  }
-)
-
-/** 响应拦截器 */
-axiosInstance.interceptors.response.use(
-  (response: AxiosResponse<BaseResponse>) => {
-    const { code, msg } = response.data
-    if (code === ApiStatus.success) return response
-    if (code === ApiStatus.unauthorized) handleUnauthorizedError(msg)
-    throw createHttpError(msg || $t('httpMsg.requestFailed'), code)
-  },
-  (error) => {
-    if (error.response?.status === ApiStatus.unauthorized) handleUnauthorizedError()
-    return Promise.reject(handleError(error))
-  }
-)
-
-/** 统一创建HttpError */
-function createHttpError(message: string, code: number) {
-  return new HttpError(message, code)
-}
-
-/** 处理401错误（带防抖） */
-function handleUnauthorizedError(message?: string): never {
-  const error = createHttpError(message || $t('httpMsg.unauthorized'), ApiStatus.unauthorized)
-
-  if (!isUnauthorizedErrorShown) {
-    isUnauthorizedErrorShown = true
-    logOut()
-
-    unauthorizedTimer = setTimeout(resetUnauthorizedError, UNAUTHORIZED_DEBOUNCE_TIME)
-
-    showError(error, true)
-    throw error
-  }
-
-  throw error
-}
-
-/** 重置401防抖状态 */
-function resetUnauthorizedError() {
-  isUnauthorizedErrorShown = false
-  if (unauthorizedTimer) clearTimeout(unauthorizedTimer)
-  unauthorizedTimer = null
-}
-
-/** 退出登录函数 */
-function logOut() {
-  setTimeout(() => {
-    useUserStore().logOut()
-  }, LOGOUT_DELAY)
-}
-
-/** 是否需要重试 */
-function shouldRetry(statusCode: number) {
-  return [
-    ApiStatus.requestTimeout,
-    ApiStatus.internalServerError,
-    ApiStatus.badGateway,
-    ApiStatus.serviceUnavailable,
-    ApiStatus.gatewayTimeout
-  ].includes(statusCode)
-}
-
-/** 请求重试逻辑 */
-async function retryRequest<T>(
-  config: ExtendedAxiosRequestConfig,
-  retries: number = MAX_RETRIES
-): Promise<T> {
-  try {
-    return await request<T>(config)
-  } catch (error) {
-    if (retries > 0 && error instanceof HttpError && shouldRetry(error.code)) {
-      await delay(RETRY_DELAY)
-      return retryRequest<T>(config, retries - 1)
-    }
-    throw error
-  }
-}
-
-/** 延迟函数 */
-function delay(ms: number) {
-  return new Promise((resolve) => setTimeout(resolve, ms))
-}
-
-/** 请求函数 */
-async function request<T = any>(config: ExtendedAxiosRequestConfig): Promise<T> {
-  // POST | PUT 参数自动填充
-  if (
-    ['POST', 'PUT'].includes(config.method?.toUpperCase() || '') &&
-    config.params &&
-    !config.data
-  ) {
-    config.data = config.params
-    config.params = undefined
-  }
-
-  try {
-    const res = await axiosInstance.request<BaseResponse<T>>(config)
-
-    // 显示成功消息
-    if (config.showSuccessMessage && res.data.msg) {
-      showSuccess(res.data.msg)
-    }
-
-    return res.data.data as T
-  } catch (error) {
-    if (error instanceof HttpError && error.code !== ApiStatus.unauthorized) {
-      const showMsg = config.showErrorMessage !== false
-      showError(error, showMsg)
-    }
-    return Promise.reject(error)
-  }
-}
-
-/** API方法集合 */
-const api = {
-  get<T>(config: ExtendedAxiosRequestConfig) {
-    return retryRequest<T>({ ...config, method: 'GET' })
-  },
-  post<T>(config: ExtendedAxiosRequestConfig) {
-    return retryRequest<T>({ ...config, method: 'POST' })
-  },
-  put<T>(config: ExtendedAxiosRequestConfig) {
-    return retryRequest<T>({ ...config, method: 'PUT' })
-  },
-  del<T>(config: ExtendedAxiosRequestConfig) {
-    return retryRequest<T>({ ...config, method: 'DELETE' })
-  },
-  request<T>(config: ExtendedAxiosRequestConfig) {
-    return retryRequest<T>(config)
-  }
-}
-
-export default api
+// 导出配置和类型供外部使用
+export * from "./config";
+export type { AxiosInstance };
diff --git a/frontend/new-web/src/utils/http/status.ts b/frontend/new-web/src/utils/http/status.ts
index 989bb375..0906bfa3 100755
--- a/frontend/new-web/src/utils/http/status.ts
+++ b/frontend/new-web/src/utils/http/status.ts
@@ -14,5 +14,5 @@ export enum ApiStatus {
   badGateway = 502, // 网关错误
   serviceUnavailable = 503, // 服务不可用
   gatewayTimeout = 504, // 网关超时
-  httpVersionNotSupported = 505 // HTTP版本不支持
+  httpVersionNotSupported = 505, // HTTP版本不支持
 }
diff --git a/frontend/new-web/src/utils/i18n/i18n.ts b/frontend/new-web/src/utils/i18n/i18n.ts
new file mode 100644
index 00000000..1dbfa34f
--- /dev/null
+++ b/frontend/new-web/src/utils/i18n/i18n.ts
@@ -0,0 +1,45 @@
+/**
+ * 国际化工具函数模块
+ *
+ * 提供路由标题翻译等国际化相关工具函数
+ *
+ * @module utils/i18n
+ */
+
+import i18n from "@/locales/index";
+
+/**
+ * 翻译路由标题
+ *
+ * 根据路由元信息中的 title 字段进行国际化翻译
+ * 主要用于面包屑导航、侧边栏菜单和标签页的标题显示
+ *
+ * @param {any} title - 路由标题，可以是字符串或其他类型
+ * @returns {string} 翻译后的标题，如果没有找到翻译则返回原始标题
+ *
+ * @example
+ * ```typescript
+ * import { translateRouteTitle } from '@/utils/i18n';
+ *
+ * // 在路由守卫中使用
+ * const title = translateRouteTitle(route.meta.title);
+ * document.title = title;
+ * ```
+ */
+export function translateRouteTitle(title: any): string {
+  // 如果 title 不是字符串，直接返回原始值
+  if (typeof title !== "string") {
+    return String(title);
+  }
+
+  // 判断是否存在国际化配置，如果没有则返回原始标题
+  const hasKey = i18n.global.te("route." + title);
+  if (hasKey) {
+    // 使用类型断言解决类型兼容性问题
+    const translateFn = i18n.global.t as (key: string) => string;
+    const translatedTitle = translateFn("route." + title);
+    return translatedTitle;
+  }
+
+  return title;
+}
diff --git a/frontend/new-web/src/utils/i18n/index.ts b/frontend/new-web/src/utils/i18n/index.ts
new file mode 100644
index 00000000..2dc80c93
--- /dev/null
+++ b/frontend/new-web/src/utils/i18n/index.ts
@@ -0,0 +1,7 @@
+/**
+ * 国际化工具函数统一导出
+ *
+ * @module utils/i18n
+ */
+
+export * from "./i18n";
diff --git a/frontend/new-web/src/utils/index.ts b/frontend/new-web/src/utils/index.ts
index f1e1b77b..127fed36 100644
--- a/frontend/new-web/src/utils/index.ts
+++ b/frontend/new-web/src/utils/index.ts
@@ -1,34 +1,42 @@
 /**
- * Utils 工具函数统一导出
- * 提供向后兼容性和便捷导入
+ * 工具函数统一导出入口
  *
  * @module utils/index
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
+// 认证相关
+export * from "./auth";
+
+// 通用工具
+export * from "./common";
+
+// 常量定义
+export * from "./constants";
+
+// 表单处理
+export * from "./form";
+
+// HTTP 请求
+export * from "./http";
+
+// 国际化
+export * from "./i18n";
+
+// 导航路由
+export * from "./navigation";
+
+// Socket 通信
+export * from "./socket";
+
+// 存储操作
+export * from "./storage";
+
+// 系统管理
+export * from "./sys";
+
+// 表格处理
+export * from "./table";
+
 // UI 相关
-export * from './ui'
-
-// 路由相关
-export * from './router'
-
-// 路由导航相关
-export * from './navigation'
-
-// 系统管理相关
-export * from './sys'
-
-// 常量定义相关
-export * from './constants'
-
-// 存储相关
-export * from './storage'
-
-// HTTP 相关
-export * from './http'
-
-// 表单相关
-export * from './form'
-
-// socket 相关
-export * from './socket'
+export * from "./ui";
diff --git a/frontend/new-web/src/utils/menuIcon.ts b/frontend/new-web/src/utils/menuIcon.ts
new file mode 100644
index 00000000..87629dd3
--- /dev/null
+++ b/frontend/new-web/src/utils/menuIcon.ts
@@ -0,0 +1,79 @@
+import type { Component } from "vue";
+import * as ElementPlusIconsVue from "@element-plus/icons-vue";
+
+/**
+ * 菜单 / IconSelect 共用的图标存值约定（与 `components/IconSelect` 一致）：
+ * - Element Plus：`el-icon-{组件名}`，或与 `@element-plus/icons-vue` 导出键一致的裸名（如 `PieChart`，兼容旧库手写）
+ * - 自定义 SVG：`assets/icons/*.svg` 的文件名（小写/短横线等），且不与 EP 导出键冲突时走 `i-svg:`
+ * - Iconify：`collection:name`（含冒号，如 `ri:home-line`）
+ */
+
+export function isElementPlusStoredIcon(icon?: string | null): boolean {
+  const s = icon?.trim();
+  return !!s && s.startsWith("el-icon");
+}
+
+/** 与历史 `MenuSearch` 中 `resolveEpMenuIcon` 一致：`pie-chart` → `PieChart` */
+function kebabSnakeBodyToPascalKey(body: string): string {
+  return body
+    .split(/[-_]/)
+    .filter(Boolean)
+    .map((seg) => seg.charAt(0).toUpperCase() + seg.slice(1).toLowerCase())
+    .join("");
+}
+
+/**
+ * 解析为 Element Plus 图标组件；否则 null（再走 Iconify / i-svg）。
+ * 对齐旧版 `layouts/old/components/Menu/components/MenuItemContent.vue`（el-icon / i-svg 二选一）
+ * 及 `MenuSearch` 里对 `el-icon-*` 主体的 Pascal 推导。
+ */
+export function resolveElementPlusIconComponent(icon?: string | null): Component | null {
+  const ic = icon?.trim();
+  if (!ic) return null;
+
+  const body = isElementPlusStoredIcon(ic) ? ic.replace(/^el-icon-?/i, "").trim() : ic;
+
+  if (!body) return null;
+
+  const mod = ElementPlusIconsVue as Record<string, Component | undefined>;
+
+  let comp = mod[body];
+  if (comp) return comp;
+
+  if (/[-_]/.test(body)) {
+    const pascal = kebabSnakeBodyToPascalKey(body);
+    comp = mod[pascal];
+    if (comp) return comp;
+  }
+
+  return null;
+}
+
+/** Iconify 完整 id（侧栏 ArtSvgIcon 使用） */
+export function isIconifyStoredIcon(icon?: string | null): boolean {
+  const s = icon?.trim();
+  return !!s && s.includes(":");
+}
+
+function pascalOrPlainToKebab(name: string): string {
+  const trimmed = name.trim();
+  if (!trimmed) return "";
+
+  if (!/[A-Z]/.test(trimmed)) {
+    return trimmed.replace(/_/g, "-").toLowerCase();
+  }
+
+  return trimmed
+    .replace(/([a-z\d])([A-Z])/g, "$1-$2")
+    .replace(/([A-Z]+)([A-Z][a-z])/g, "$1-$2")
+    .toLowerCase();
+}
+
+/**
+ * `el-icon-Xxx` 无法映射到 EP 组件时的兜底，转为 Iconify `ep:`（与 Element Plus 图标集对应）
+ */
+export function elementMenuIconToEpIconify(icon: string): string {
+  const name = icon.replace(/^el-icon-/i, "").trim();
+  const kebab = pascalOrPlainToKebab(name);
+  return kebab ? `ep:${kebab}` : "ep:menu";
+}
diff --git a/frontend/new-web/src/utils/menuLocalSvg.ts b/frontend/new-web/src/utils/menuLocalSvg.ts
new file mode 100644
index 00000000..7316c638
--- /dev/null
+++ b/frontend/new-web/src/utils/menuLocalSvg.ts
@@ -0,0 +1,36 @@
+/**
+ * 本地 SVG：`assets/icons/*.svg` 文件名 → Vite 静态 URL。
+ * 菜单等处若仅依赖 Tailwind 动态类 `` `i-svg:${name}` ``，构建时往往扫描不到类名，导致样式缺失；
+ * 运行时通过 glob + ?url 保证一定能加载到资源。
+ */
+const raw = import.meta.glob("../assets/icons/*.svg", {
+  eager: true,
+  query: "?url",
+  import: "default",
+}) as Record<string, string>;
+
+const urlByExactName = new Map<string, string>();
+
+for (const [fullPath, url] of Object.entries(raw)) {
+  const m = fullPath.match(/\/([^/]+)\.svg$/);
+  if (m) {
+    urlByExactName.set(m[1], url);
+  }
+}
+
+export function resolveMenuLocalSvgUrl(iconBasename: string): string | undefined {
+  const key = iconBasename.trim();
+  if (!key) return undefined;
+
+  const direct = urlByExactName.get(key);
+  if (direct) return direct;
+
+  const lower = key.toLowerCase();
+  for (const [fileBase, url] of urlByExactName.entries()) {
+    if (fileBase.toLowerCase() === lower) {
+      return url;
+    }
+  }
+
+  return undefined;
+}
diff --git a/frontend/new-web/src/utils/navigation/index.ts b/frontend/new-web/src/utils/navigation/index.ts
index 0b84e78e..1cf28c18 100644
--- a/frontend/new-web/src/utils/navigation/index.ts
+++ b/frontend/new-web/src/utils/navigation/index.ts
@@ -2,9 +2,10 @@
  * 路由和导航相关工具函数统一导出
  *
  * @module utils/navigation/index
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
-export * from './jump'
-export * from './worktab'
-export * from './route'
+export * from "./jump";
+export * from "./worktab";
+export * from "./route";
+export * from "./router";
diff --git a/frontend/new-web/src/utils/navigation/jump.ts b/frontend/new-web/src/utils/navigation/jump.ts
index 320edb57..203e3113 100644
--- a/frontend/new-web/src/utils/navigation/jump.ts
+++ b/frontend/new-web/src/utils/navigation/jump.ts
@@ -12,16 +12,16 @@
  * - 智能判断跳转目标类型（外部链接/内部路由）
  *
  * @module utils/navigation/jump
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
-import { AppRouteRecord } from '@/types/router'
-import { router } from '@/router'
-import { isNavigableMenuItem } from './route'
+import { AppRouteRecord } from "@/types/router";
+import { router } from "@/router";
+import { isNavigableMenuItem } from "./route";
 
 // 打开外部链接
 export const openExternalLink = (link: string) => {
-  window.open(link, '_blank')
-}
+  window.open(link, "_blank");
+};
 
 /**
  * 菜单跳转
@@ -31,38 +31,38 @@ export const openExternalLink = (link: string) => {
  */
 export const handleMenuJump = (item: AppRouteRecord, jumpToFirst: boolean = false) => {
   // 处理外部链接
-  const { link, isIframe } = item.meta
+  const { link, isIframe } = item.meta;
   if (link && !isIframe) {
-    return openExternalLink(link)
+    return openExternalLink(link);
   }
 
   // 如果不需要跳转到第一个子菜单，或者没有子菜单，直接跳转当前路径
   if (!jumpToFirst || !item.children?.length) {
-    return router.push(item.path)
+    return router.push(item.path);
   }
 
   // 递归查找第一个可导航的叶子节点菜单
   const findFirstLeafMenu = (items: AppRouteRecord[]): AppRouteRecord | undefined => {
     for (const child of items) {
       if (isNavigableMenuItem(child)) {
-        return child.children?.length ? findFirstLeafMenu(child.children) || child : child
+        return child.children?.length ? findFirstLeafMenu(child.children) || child : child;
       }
     }
-    return undefined
-  }
+    return undefined;
+  };
 
-  const firstChild = findFirstLeafMenu(item.children)
+  const firstChild = findFirstLeafMenu(item.children);
 
   // 如果子菜单都不可见，则回退到父级页面自身。
   if (!firstChild) {
-    return router.push(item.path)
+    return router.push(item.path);
   }
 
   // 如果第一个子菜单是外部链接则打开新窗口
   if (firstChild.meta?.link) {
-    return openExternalLink(firstChild.meta.link)
+    return openExternalLink(firstChild.meta.link);
   }
 
   // 跳转到子菜单路径
-  router.push(firstChild.path)
-}
+  router.push(firstChild.path);
+};
diff --git a/frontend/new-web/src/utils/navigation/route.ts b/frontend/new-web/src/utils/navigation/route.ts
index 518bcb96..8f5f4c97 100644
--- a/frontend/new-web/src/utils/navigation/route.ts
+++ b/frontend/new-web/src/utils/navigation/route.ts
@@ -19,14 +19,14 @@
  * - iframe 页面特殊处理
  *
  * @module utils/navigation/route
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
-import { AppRouteRecord } from '@/types'
+import { AppRouteRecord } from "@/types";
 
 // 检查是否为 iframe 路由
 export function isIframe(url: string): boolean {
-  return url.startsWith('/outside/iframe/')
+  return url.startsWith("/outside/iframe/");
 }
 
 /**
@@ -35,15 +35,15 @@ export function isIframe(url: string): boolean {
  */
 export const isNavigableMenuItem = (menuItem: AppRouteRecord): boolean => {
   if (!menuItem.path || !menuItem.path.trim()) {
-    return false
+    return false;
   }
 
   if (!menuItem.meta?.isHide) {
-    return true
+    return true;
   }
 
-  return menuItem.meta?.isFullPage === true
-}
+  return menuItem.meta?.isFullPage === true;
+};
 
 /**
  * 标准化路径格式
@@ -51,8 +51,8 @@ export const isNavigableMenuItem = (menuItem: AppRouteRecord): boolean => {
  * @returns 标准化后的路径
  */
 const normalizePath = (path: string): string => {
-  return path.startsWith('/') ? path : `/${path}`
-}
+  return path.startsWith("/") ? path : `/${path}`;
+};
 
 /**
  * 递归获取菜单的第一个有效路径
@@ -61,25 +61,25 @@ const normalizePath = (path: string): string => {
  */
 export const getFirstMenuPath = (menuList: AppRouteRecord[]): string => {
   if (!Array.isArray(menuList) || menuList.length === 0) {
-    return ''
+    return "";
   }
 
   for (const menuItem of menuList) {
     if (!isNavigableMenuItem(menuItem)) {
-      continue
+      continue;
     }
 
     // 如果有子菜单，优先查找子菜单
     if (menuItem.children?.length) {
-      const childPath = getFirstMenuPath(menuItem.children)
+      const childPath = getFirstMenuPath(menuItem.children);
       if (childPath) {
-        return childPath
+        return childPath;
       }
     }
 
     // 返回当前菜单项的标准化路径
-    return normalizePath(menuItem.path!)
+    return normalizePath(menuItem.path!);
   }
 
-  return ''
-}
+  return "";
+};
diff --git a/frontend/new-web/src/utils/router.ts b/frontend/new-web/src/utils/navigation/router.ts
similarity index 65%
rename from frontend/new-web/src/utils/router.ts
rename to frontend/new-web/src/utils/navigation/router.ts
index 8c838fff..524600ca 100644
--- a/frontend/new-web/src/utils/router.ts
+++ b/frontend/new-web/src/utils/navigation/router.ts
@@ -3,41 +3,41 @@
  *
  * 提供路由相关的工具函数
  *
- * @module utils/router
+ * @module utils/navigation/router
  */
-import { RouteLocationNormalized, RouteRecordRaw } from 'vue-router'
-import AppConfig from '@/config'
-import NProgress from 'nprogress'
-import 'nprogress/nprogress.css'
-import i18n, { $t } from '@/locales'
+import { RouteLocationNormalized, RouteRecordRaw } from "vue-router";
+import AppConfig from "@/config";
+import NProgress from "nprogress";
+import "nprogress/nprogress.css";
+import i18n, { $t } from "@/locales";
 
 /** 扩展的路由配置类型 */
 export type AppRouteRecordRaw = RouteRecordRaw & {
-  hidden?: boolean
-}
+  hidden?: boolean;
+};
 
 /** 顶部进度条配置 */
 export const configureNProgress = () => {
   NProgress.configure({
-    easing: 'ease',
+    easing: "ease",
     speed: 600,
     showSpinner: false,
-    parent: 'body'
-  })
-}
+    parent: "body",
+  });
+};
 
 /**
  * 设置页面标题，根据路由元信息和系统信息拼接标题
  * @param to 当前路由对象
  */
 export const setPageTitle = (to: RouteLocationNormalized): void => {
-  const { title } = to.meta
+  const { title } = to.meta;
   if (title) {
     setTimeout(() => {
-      document.title = `${formatMenuTitle(String(title))} - ${AppConfig.systemInfo.name}`
-    }, 150)
+      document.title = `${formatMenuTitle(String(title))} - ${AppConfig.systemInfo.name}`;
+    }, 150);
   }
-}
+};
 
 /**
  * 格式化菜单标题
@@ -46,16 +46,16 @@ export const setPageTitle = (to: RouteLocationNormalized): void => {
  */
 export const formatMenuTitle = (title: string): string => {
   if (title) {
-    if (title.startsWith('menus.')) {
+    if (title.startsWith("menus.")) {
       // 使用 te() 方法检查翻译键值是否存在，避免控制台警告
       if (i18n.global.te(title)) {
-        return $t(title)
+        return $t(title);
       } else {
         // 如果翻译不存在，返回键值的最后部分作为fallback
-        return title.split('.').pop() || title
+        return title.split(".").pop() || title;
       }
     }
-    return title
+    return title;
   }
-  return ''
-}
+  return "";
+};
diff --git a/frontend/new-web/src/utils/navigation/worktab.ts b/frontend/new-web/src/utils/navigation/worktab.ts
index 6db6a77f..59d88d98 100644
--- a/frontend/new-web/src/utils/navigation/worktab.ts
+++ b/frontend/new-web/src/utils/navigation/worktab.ts
@@ -19,26 +19,26 @@
  * - 多标签页导航系统
  *
  * @module utils/navigation/worktab
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
-import { useWorktabStore } from '@/store/modules/worktab'
-import { RouteLocationNormalized } from 'vue-router'
-import { isIframe } from './route'
-import { useSettingStore } from '@/store/modules/setting'
-import { IframeRouteManager } from '@/router/core'
-import { useCommon } from '@/hooks/core/useCommon'
+import { useWorktabStore } from "@/store/modules/worktab.store";
+import { RouteLocationNormalized } from "vue-router";
+import { isIframe } from "./route";
+import { useSettingsStore } from "@/store/modules/setting.store";
+import { IframeRouteManager } from "@/router/core";
+import { useCommon } from "@/hooks/core/useCommon";
 
 /**
  * 根据当前路由信息设置工作标签页（worktab）
  * @param to 当前路由对象
  */
 export const setWorktab = (to: RouteLocationNormalized): void => {
-  const worktabStore = useWorktabStore()
-  const { meta, path, name, params, query } = to
+  const worktabStore = useWorktabStore();
+  const { meta, path, name, params, query } = to;
   if (!meta.isHideTab) {
     // 如果是 iframe 页面，则特殊处理工作标签页
     if (isIframe(path)) {
-      const iframeRoute = IframeRouteManager.getInstance().findByPath(to.path)
+      const iframeRoute = IframeRouteManager.getInstance().findByPath(to.path);
 
       if (iframeRoute?.meta) {
         worktabStore.openTab({
@@ -48,10 +48,10 @@ export const setWorktab = (to: RouteLocationNormalized): void => {
           name: name as string,
           keepAlive: meta.keepAlive as boolean,
           params,
-          query
-        })
+          query,
+        });
       }
-    } else if (useSettingStore().showWorkTab || path === useCommon().homePath.value) {
+    } else if (useSettingsStore().showWorkTab || path === useCommon().homePath.value) {
       worktabStore.openTab({
         title: meta.title as string,
         icon: meta.icon as string,
@@ -60,8 +60,8 @@ export const setWorktab = (to: RouteLocationNormalized): void => {
         keepAlive: meta.keepAlive as boolean,
         params,
         query,
-        fixedTab: meta.fixedTab as boolean
-      })
+        fixedTab: meta.fixedTab as boolean,
+      });
     }
   }
-}
+};
diff --git a/frontend/new-web/src/utils/oauth/startOAuthLogin.ts b/frontend/new-web/src/utils/oauth/startOAuthLogin.ts
new file mode 100644
index 00000000..593845a3
--- /dev/null
+++ b/frontend/new-web/src/utils/oauth/startOAuthLogin.ts
@@ -0,0 +1,11 @@
+import type { OAuthProvider } from "@/api/module_system/auth";
+
+/**
+ * 跳转浏览器至后端 OAuth 入口，授权完成后回到 `redirect_uri`（通常为当前站点 /login）。
+ */
+export function startOAuthLogin(provider: OAuthProvider): void {
+  const base = (import.meta.env.VITE_APP_BASE_API || "/api/v1").replace(/\/$/, "");
+  const redirectUri = `${window.location.origin}/login`;
+  const url = `${base}/system/auth/oauth/${provider}/login?redirect_uri=${encodeURIComponent(redirectUri)}`;
+  window.location.href = url;
+}
diff --git a/frontend/new-web/src/utils/socket/index.ts b/frontend/new-web/src/utils/socket/index.ts
index ac80da1c..75fb96a2 100644
--- a/frontend/new-web/src/utils/socket/index.ts
+++ b/frontend/new-web/src/utils/socket/index.ts
@@ -1,187 +1,195 @@
+/**
+ * WebSocket 客户端类
+ *
+ * 提供 WebSocket 连接管理功能，支持自动重连、心跳检测和消息队列
+ *
+ * @module utils/socket
+ */
+
 interface WebSocketOptions {
-  url?: string
-  messageHandler: (event: MessageEvent) => void
-  reconnectInterval?: number // 重连间隔(ms)
-  heartbeatInterval?: number // 心跳检测间隔(ms)
-  pingInterval?: number // 发送ping间隔(ms)
-  reconnectTimeout?: number // 重连超时时间(ms)
-  maxReconnectAttempts?: number // 最大重连次数
-  connectionTimeout?: number // 连接建立超时时间(ms)
+  url?: string;
+  messageHandler: (event: MessageEvent) => void;
+  reconnectInterval?: number; // 重连间隔(ms)
+  heartbeatInterval?: number; // 心跳检测间隔(ms)
+  pingInterval?: number; // 发送ping间隔(ms)
+  reconnectTimeout?: number; // 重连超时时间(ms)
+  maxReconnectAttempts?: number; // 最大重连次数
+  connectionTimeout?: number; // 连接建立超时时间(ms)
 }
 
 export default class WebSocketClient {
-  private static instance: WebSocketClient | null = null
-  private ws: WebSocket | null = null
-  private url: string
-  private messageHandler: (event: MessageEvent) => void
-  private reconnectInterval: number
-  private heartbeatInterval: number
-  private pingInterval: number
-  private reconnectTimeout: number
-  private maxReconnectAttempts: number
-  private connectionTimeout: number
-  private reconnectAttempts: number = 0 // 当前重连次数
+  private static instance: WebSocketClient | null = null;
+  private ws: WebSocket | null = null;
+  private url: string;
+  private messageHandler: (event: MessageEvent) => void;
+  private reconnectInterval: number;
+  private heartbeatInterval: number;
+  private pingInterval: number;
+  private reconnectTimeout: number;
+  private maxReconnectAttempts: number;
+  private connectionTimeout: number;
+  private reconnectAttempts: number = 0; // 当前重连次数
 
   // 消息队列 - 缓存连接建立前的消息
-  private messageQueue: Array<string | ArrayBufferLike | Blob | ArrayBufferView> = []
+  private messageQueue: Array<string | ArrayBufferLike | Blob | ArrayBufferView> = [];
 
   // 定时器
-  private detectionTimer: NodeJS.Timeout | null = null
-  private timeoutTimer: NodeJS.Timeout | null = null
-  private reconnectTimer: NodeJS.Timeout | null = null
-  private pingTimer: NodeJS.Timeout | null = null
-  private connectionTimer: NodeJS.Timeout | null = null // 连接超时定时器
+  private detectionTimer: NodeJS.Timeout | null = null;
+  private timeoutTimer: NodeJS.Timeout | null = null;
+  private reconnectTimer: NodeJS.Timeout | null = null;
+  private pingTimer: NodeJS.Timeout | null = null;
+  private connectionTimer: NodeJS.Timeout | null = null; // 连接超时定时器
 
   // 状态标识
-  private isConnected: boolean = false
-  private isConnecting: boolean = false // 是否正在连接中
-  private stopReconnect: boolean = false
-  private isReconnecting: boolean = false
+  private isConnected: boolean = false;
+  private isConnecting: boolean = false; // 是否正在连接中
+  private stopReconnect: boolean = false;
+  private isReconnecting: boolean = false;
 
   private constructor(options: WebSocketOptions) {
-    this.url = options.url || (process.env.VUE_APP_LOGIN_WEBSOCKET as string)
-    this.messageHandler = options.messageHandler
-    this.reconnectInterval = options.reconnectInterval ?? 20 * 1000 // 默认20秒
-    this.heartbeatInterval = options.heartbeatInterval ?? 5 * 1000 // 默认5秒
-    this.pingInterval = options.pingInterval ?? 10 * 1000 // 默认10秒
-    this.reconnectTimeout = options.reconnectTimeout ?? 30 * 1000 // 默认30秒
-    this.maxReconnectAttempts = options.maxReconnectAttempts ?? 10 // 默认最多重连10次
-    this.connectionTimeout = options.connectionTimeout ?? 10 * 1000 // 连接超时10秒
+    this.url = options.url || (process.env.VUE_APP_LOGIN_WEBSOCKET as string);
+    this.messageHandler = options.messageHandler;
+    this.reconnectInterval = options.reconnectInterval ?? 20 * 1000; // 默认20秒
+    this.heartbeatInterval = options.heartbeatInterval ?? 5 * 1000; // 默认5秒
+    this.pingInterval = options.pingInterval ?? 10 * 1000; // 默认10秒
+    this.reconnectTimeout = options.reconnectTimeout ?? 30 * 1000; // 默认30秒
+    this.maxReconnectAttempts = options.maxReconnectAttempts ?? 10; // 默认最多重连10次
+    this.connectionTimeout = options.connectionTimeout ?? 10 * 1000; // 连接超时10秒
   }
 
   // 单例模式获取实例
   static getInstance(options: WebSocketOptions): WebSocketClient {
     if (!WebSocketClient.instance) {
-      WebSocketClient.instance = new WebSocketClient(options)
+      WebSocketClient.instance = new WebSocketClient(options);
     } else {
       // 更新消息处理器
-      WebSocketClient.instance.messageHandler = options.messageHandler
+      WebSocketClient.instance.messageHandler = options.messageHandler;
       // 如果提供了新的URL，则更新并重新连接
       if (options.url && WebSocketClient.instance.url !== options.url) {
-        WebSocketClient.instance.url = options.url
-        WebSocketClient.instance.reconnectAttempts = 0
-        WebSocketClient.instance.init()
+        WebSocketClient.instance.url = options.url;
+        WebSocketClient.instance.reconnectAttempts = 0;
+        WebSocketClient.instance.init();
       }
     }
-    return WebSocketClient.instance
+    return WebSocketClient.instance;
   }
 
   // 初始化连接
   init(): void {
-    this.connect(true)
+    this.connect(true);
   }
 
   private connect(resetReconnectAttempts: boolean = false): void {
     // 如果正在连接中，不重复连接
     if (this.isConnecting) {
-      console.log('正在建立WebSocket连接中...')
-      return
+      console.log("正在建立WebSocket连接中...");
+      return;
     }
 
     // 如果已连接，不重复连接
     if (this.ws?.readyState === WebSocket.OPEN) {
-      console.warn('WebSocket连接已存在')
-      this.flushMessageQueue() // 确保队列中的消息被发送
-      return
+      console.warn("WebSocket连接已存在");
+      this.flushMessageQueue(); // 确保队列中的消息被发送
+      return;
     }
 
     try {
-      this.isConnecting = true
-      this.stopReconnect = false
+      this.isConnecting = true;
+      this.stopReconnect = false;
       if (resetReconnectAttempts) {
-        this.reconnectAttempts = 0
-        this.isReconnecting = false
-        this.clearTimer('reconnectTimer')
+        this.reconnectAttempts = 0;
+        this.isReconnecting = false;
+        this.clearTimer("reconnectTimer");
       }
-      this.ws = new WebSocket(this.url)
+      this.ws = new WebSocket(this.url);
 
       // 设置连接超时检测
-      this.clearTimer('connectionTimer')
+      this.clearTimer("connectionTimer");
       this.connectionTimer = setTimeout(() => {
-        console.error(`WebSocket连接超时 (${this.connectionTimeout}ms)：${this.url}`)
-        this.handleConnectionTimeout()
-      }, this.connectionTimeout)
+        console.error(`WebSocket连接超时 (${this.connectionTimeout}ms)：${this.url}`);
+        this.handleConnectionTimeout();
+      }, this.connectionTimeout);
 
-      this.ws.onopen = (event) => this.handleOpen(event)
-      this.ws.onmessage = (event) => this.handleMessage(event)
-      this.ws.onclose = (event) => this.handleClose(event)
-      this.ws.onerror = (event) => this.handleError(event)
+      this.ws.onopen = (event) => this.handleOpen(event);
+      this.ws.onmessage = (event) => this.handleMessage(event);
+      this.ws.onclose = (event) => this.handleClose(event);
+      this.ws.onerror = (event) => this.handleError(event);
     } catch (error) {
-      console.error('WebSocket初始化失败:', error)
-      this.isConnecting = false
-      this.reconnect()
+      console.error("WebSocket初始化失败:", error);
+      this.isConnecting = false;
+      this.reconnect();
     }
   }
 
   // 处理连接超时
   private handleConnectionTimeout(): void {
     if (this.ws?.readyState !== WebSocket.OPEN) {
-      console.error('WebSocket连接超时，强制关闭连接')
-      this.ws?.close(1000, 'Connection timeout')
-      this.isConnecting = false
-      this.reconnect()
+      console.error("WebSocket连接超时，强制关闭连接");
+      this.ws?.close(1000, "Connection timeout");
+      this.isConnecting = false;
+      this.reconnect();
     }
   }
 
   // 关闭连接
   close(force?: boolean): void {
-    this.clearAllTimers()
-    this.stopReconnect = true
-    this.isReconnecting = false
-    this.isConnecting = false
+    this.clearAllTimers();
+    this.stopReconnect = true;
+    this.isReconnecting = false;
+    this.isConnecting = false;
 
     if (this.ws) {
       // 1000 表示正常关闭
-      this.ws.close(force ? 1001 : 1000, force ? 'Force closed' : 'Normal close')
-      this.ws = null
+      this.ws.close(force ? 1001 : 1000, force ? "Force closed" : "Normal close");
+      this.ws = null;
     }
 
-    this.isConnected = false
+    this.isConnected = false;
   }
 
   // 发送消息 - 增加消息队列
   send(data: string | ArrayBufferLike | Blob | ArrayBufferView, immediate: boolean = false): void {
     // 如果要求立即发送且未连接，则直接报错
     if (immediate && (!this.ws || this.ws.readyState !== WebSocket.OPEN)) {
-      console.error('WebSocket未连接，无法立即发送消息')
-      return
+      console.error("WebSocket未连接，无法立即发送消息");
+      return;
     }
 
     // 如果未连接且不要求立即发送，则加入消息队列
     if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
-      console.log('WebSocket未连接，消息已加入队列等待发送')
-      this.messageQueue.push(data)
+      console.log("WebSocket未连接，消息已加入队列等待发送");
+      this.messageQueue.push(data);
       // 如果未在重连中，则尝试重连
       if (!this.isConnecting && !this.stopReconnect) {
-        this.init()
+        this.init();
       }
-      return
+      return;
     }
 
     try {
-      this.ws.send(data)
+      this.ws.send(data);
     } catch (error) {
-      console.error('WebSocket发送消息失败:', error)
+      console.error("WebSocket发送消息失败:", error);
       // 发送失败时将消息加入队列，等待重连后重试
-      this.messageQueue.push(data)
-      this.reconnect()
+      this.messageQueue.push(data);
+      this.reconnect();
     }
   }
 
   // 发送队列中的消息
   private flushMessageQueue(): void {
     if (this.messageQueue.length > 0 && this.ws?.readyState === WebSocket.OPEN) {
-      console.log(`发送队列中的${this.messageQueue.length}条消息`)
+      console.log(`发送队列中的${this.messageQueue.length}条消息`);
       while (this.messageQueue.length > 0) {
-        const data = this.messageQueue.shift()
+        const data = this.messageQueue.shift();
         if (data) {
           try {
-            this.ws?.send(data)
+            this.ws?.send(data);
           } catch (error) {
-            console.error('发送队列消息失败:', error)
+            console.error("发送队列消息失败:", error);
             // 如果发送失败，将消息放回队列头部
-            if (data) this.messageQueue.unshift(data)
-            break
+            if (data) this.messageQueue.unshift(data);
+            break;
           }
         }
       }
@@ -190,78 +198,78 @@ export default class WebSocketClient {
 
   // 处理连接打开
   private handleOpen(event: Event): void {
-    console.log('WebSocket连接成功', event)
-    this.clearTimer('connectionTimer') // 清除连接超时定时器
-    this.isConnected = true
-    this.isConnecting = false
-    this.isReconnecting = false
-    this.stopReconnect = false
-    this.reconnectAttempts = 0 // 重置重连次数
-    this.startHeartbeat()
-    this.startPing()
-    this.flushMessageQueue() // 发送队列中的消息
+    console.log("WebSocket连接成功", event);
+    this.clearTimer("connectionTimer"); // 清除连接超时定时器
+    this.isConnected = true;
+    this.isConnecting = false;
+    this.isReconnecting = false;
+    this.stopReconnect = false;
+    this.reconnectAttempts = 0; // 重置重连次数
+    this.startHeartbeat();
+    this.startPing();
+    this.flushMessageQueue(); // 发送队列中的消息
   }
 
   // 处理收到的消息
   private handleMessage(event: MessageEvent): void {
-    console.log('收到WebSocket消息:', event)
-    this.resetHeartbeat()
-    this.messageHandler(event)
+    console.log("收到WebSocket消息:", event);
+    this.resetHeartbeat();
+    this.messageHandler(event);
   }
 
   // 处理连接关闭
   private handleClose(event: CloseEvent): void {
     console.log(
       `WebSocket断开: 代码=${event.code}, 原因=${event.reason}, 干净关闭=${event.wasClean}`
-    )
+    );
 
     // 1000 是正常关闭代码
-    const isNormalClose = event.code === 1000
+    const isNormalClose = event.code === 1000;
 
-    this.isConnected = false
-    this.isConnecting = false
-    this.clearConnectionTimers()
-    this.ws = null
+    this.isConnected = false;
+    this.isConnecting = false;
+    this.clearConnectionTimers();
+    this.ws = null;
 
     if (!this.stopReconnect && !isNormalClose) {
-      this.reconnect()
+      this.reconnect();
     }
   }
 
   // 处理错误 - 增加详细错误信息
   private handleError(event: Event): void {
-    console.error('WebSocket连接错误:')
-    console.error('错误事件:', event)
+    console.error("WebSocket连接错误:");
+    console.error("错误事件:", event);
     console.error(
-      '当前连接状态:',
-      this.ws?.readyState ? this.getReadyStateText(this.ws.readyState) : '未初始化'
-    )
+      "当前连接状态:",
+      this.ws?.readyState ? this.getReadyStateText(this.ws.readyState) : "未初始化"
+    );
 
-    this.isConnected = false
-    this.isConnecting = false
+    this.isConnected = false;
+    this.isConnecting = false;
 
     // 只有在未停止重连的情况下才尝试重连
     if (!this.stopReconnect) {
-      this.reconnect()
+      this.reconnect();
     }
   }
 
   private closeCurrentSocketForReconnect(): void {
-    this.clearConnectionTimers()
-    this.isConnected = false
-    this.isConnecting = false
+    this.clearConnectionTimers();
+    this.isConnected = false;
+    this.isConnecting = false;
 
     if (this.ws) {
-      this.ws.onopen = null
-      this.ws.onmessage = null
-      this.ws.onclose = null
-      this.ws.onerror = null
+      this.ws.onopen = null;
+      this.ws.onmessage = null;
+      this.ws.onclose = null;
+      this.ws.onerror = null;
 
       if (this.ws.readyState === WebSocket.OPEN || this.ws.readyState === WebSocket.CONNECTING) {
-        this.ws.close(1001, 'Reconnect')
+        this.ws.close(1001, "Reconnect");
       }
 
-      this.ws = null
+      this.ws = null;
     }
   }
 
@@ -269,155 +277,158 @@ export default class WebSocketClient {
   private getReadyStateText(state: number): string {
     switch (state) {
       case WebSocket.CONNECTING:
-        return 'CONNECTING (0) - 正在连接'
+        return "CONNECTING (0) - 正在连接";
       case WebSocket.OPEN:
-        return 'OPEN (1) - 已连接'
+        return "OPEN (1) - 已连接";
       case WebSocket.CLOSING:
-        return 'CLOSING (2) - 正在关闭'
+        return "CLOSING (2) - 正在关闭";
       case WebSocket.CLOSED:
-        return 'CLOSED (3) - 已关闭'
+        return "CLOSED (3) - 已关闭";
       default:
-        return `未知状态 (${state})`
+        return `未知状态 (${state})`;
     }
   }
 
   // 开始心跳检测
   private startHeartbeat(): void {
-    this.clearTimer('detectionTimer')
-    this.clearTimer('timeoutTimer')
+    this.clearTimer("detectionTimer");
+    this.clearTimer("timeoutTimer");
 
     this.detectionTimer = setTimeout(() => {
-      this.isConnected = this.ws?.readyState === WebSocket.OPEN
+      this.isConnected = this.ws?.readyState === WebSocket.OPEN;
 
       if (!this.isConnected) {
-        console.warn('WebSocket心跳检测失败，尝试重连')
-        this.reconnect()
+        console.warn("WebSocket心跳检测失败，尝试重连");
+        this.reconnect();
 
         this.timeoutTimer = setTimeout(() => {
-          console.warn('WebSocket重连超时')
-          this.close()
-        }, this.reconnectTimeout)
+          console.warn("WebSocket重连超时");
+          this.close();
+        }, this.reconnectTimeout);
       }
-    }, this.heartbeatInterval)
+    }, this.heartbeatInterval);
   }
 
   // 重置心跳检测
   private resetHeartbeat(): void {
-    this.clearTimer('detectionTimer')
-    this.clearTimer('timeoutTimer')
-    this.startHeartbeat()
+    this.clearTimer("detectionTimer");
+    this.clearTimer("timeoutTimer");
+    this.startHeartbeat();
   }
 
   // 开始发送ping消息
   private startPing(): void {
-    this.clearTimer('pingTimer')
+    this.clearTimer("pingTimer");
 
     this.pingTimer = setInterval(() => {
       if (this.ws?.readyState !== WebSocket.OPEN) {
-        console.warn('WebSocket未连接，停止发送ping')
-        this.clearTimer('pingTimer')
-        this.reconnect()
-        return
+        console.warn("WebSocket未连接，停止发送ping");
+        this.clearTimer("pingTimer");
+        this.reconnect();
+        return;
       }
 
       try {
-        this.ws.send('ping')
-        console.log('发送ping消息')
+        this.ws.send("ping");
+        console.log("发送ping消息");
       } catch (error) {
-        console.error('发送ping消息失败:', error)
-        this.clearTimer('pingTimer')
-        this.reconnect()
+        console.error("发送ping消息失败:", error);
+        this.clearTimer("pingTimer");
+        this.reconnect();
       }
-    }, this.pingInterval)
+    }, this.pingInterval);
   }
 
   // 重连 - 增加重连次数限制
   private reconnect(): void {
     if (this.stopReconnect || this.isConnecting || this.reconnectInterval <= 0) {
-      return
+      return;
     }
 
     // 检查是否超过最大重连次数
     if (this.reconnectAttempts >= this.maxReconnectAttempts) {
-      console.error(`已达到最大重连次数(${this.maxReconnectAttempts})，停止重连`)
-      this.close(true)
-      return
+      console.error(`已达到最大重连次数(${this.maxReconnectAttempts})，停止重连`);
+      this.close(true);
+      return;
     }
 
-    this.reconnectAttempts++
-    this.isReconnecting = true
-    this.closeCurrentSocketForReconnect()
+    this.reconnectAttempts++;
+    this.isReconnecting = true;
+    this.closeCurrentSocketForReconnect();
 
-    const delay = this.calculateReconnectDelay()
+    const delay = this.calculateReconnectDelay();
     console.log(
       `将在${delay / 1000}秒后尝试重新连接（第${this.reconnectAttempts}/${this.maxReconnectAttempts}次）`
-    )
+    );
 
-    this.clearTimer('reconnectTimer')
+    this.clearTimer("reconnectTimer");
     this.reconnectTimer = setTimeout(() => {
-      console.log(`尝试重新连接WebSocket（第${this.reconnectAttempts}次）`)
-      this.connect(false)
-    }, delay)
+      console.log(`尝试重新连接WebSocket（第${this.reconnectAttempts}次）`);
+      this.connect(false);
+    }, delay);
   }
 
   // 计算重连延迟 - 指数退避策略
   private calculateReconnectDelay(): number {
     // 基础延迟 + 随机值，避免多个客户端同时重连
-    const jitter = Math.random() * 1000 // 0-1秒的随机延迟
+    const jitter = Math.random() * 1000; // 0-1秒的随机延迟
     const baseDelay = Math.min(
       this.reconnectInterval * Math.pow(1.5, this.reconnectAttempts - 1),
       this.reconnectInterval * 5
-    )
-    return baseDelay + jitter
+    );
+    return baseDelay + jitter;
   }
 
   // 清除指定定时器
   private clearTimer(
     timerName:
-      | 'detectionTimer'
-      | 'timeoutTimer'
-      | 'reconnectTimer'
-      | 'pingTimer'
-      | 'connectionTimer'
+      | "detectionTimer"
+      | "timeoutTimer"
+      | "reconnectTimer"
+      | "pingTimer"
+      | "connectionTimer"
   ): void {
     if (this[timerName]) {
-      clearTimeout(this[timerName] as NodeJS.Timeout)
-      this[timerName] = null
+      clearTimeout(this[timerName] as NodeJS.Timeout);
+      this[timerName] = null;
     }
   }
 
   // 清除所有定时器
   private clearAllTimers(): void {
-    this.clearConnectionTimers()
-    this.clearTimer('reconnectTimer')
+    this.clearConnectionTimers();
+    this.clearTimer("reconnectTimer");
   }
 
   private clearConnectionTimers(): void {
-    this.clearTimer('detectionTimer')
-    this.clearTimer('timeoutTimer')
-    this.clearTimer('pingTimer')
-    this.clearTimer('connectionTimer')
+    this.clearTimer("detectionTimer");
+    this.clearTimer("timeoutTimer");
+    this.clearTimer("pingTimer");
+    this.clearTimer("connectionTimer");
   }
 
   // 获取当前连接状态
   get isWebSocketConnected(): boolean {
-    return this.isConnected
+    return this.isConnected;
   }
 
   // 获取当前连接状态文本
   get connectionStatusText(): string {
-    if (this.isConnecting) return '正在连接'
-    if (this.isConnected) return '已连接'
+    if (this.isConnecting) return "正在连接";
+    if (this.isConnected) return "已连接";
     if (this.isReconnecting && this.reconnectAttempts > 0)
-      return `重连中（${this.reconnectAttempts}/${this.maxReconnectAttempts}）`
-    return '已断开'
+      return `重连中（${this.reconnectAttempts}/${this.maxReconnectAttempts}）`;
+    return "已断开";
   }
 
   // 销毁实例
   static destroyInstance(): void {
     if (WebSocketClient.instance) {
-      WebSocketClient.instance.close()
-      WebSocketClient.instance = null
+      WebSocketClient.instance.close();
+      WebSocketClient.instance = null;
     }
   }
 }
+
+// 导出 websocket.ts 中的函数
+export * from "./websocket";
diff --git a/frontend/new-web/src/utils/socket/websocket.ts b/frontend/new-web/src/utils/socket/websocket.ts
new file mode 100644
index 00000000..4da730e5
--- /dev/null
+++ b/frontend/new-web/src/utils/socket/websocket.ts
@@ -0,0 +1,109 @@
+/**
+ * WebSocket 服务管理
+ *
+ * @description
+ * 统一管理应用中的所有 WebSocket 连接
+ * - 字典同步 WebSocket
+ * - 在线用户计数 WebSocket
+ * - 其他业务 WebSocket
+ *
+ * @author fastapiadmin
+ */
+
+import { Auth } from "@/utils/auth";
+
+/**
+ * WebSocket 服务实例约定接口
+ */
+type WebSocketService = {
+  disconnect?: () => void;
+  closeWebSocket?: () => void;
+  cleanup?: () => void;
+  [key: string]: any;
+};
+
+/**
+ * 全局 WebSocket 实例管理
+ */
+const websocketInstances = new Map<string, WebSocketService>();
+
+/**
+ * 防止重复初始化的状态标记
+ */
+let isInitialized = false;
+
+/**
+ * 注册 WebSocket 实例
+ */
+export function registerWebSocketInstance(key: string, instance: WebSocketService) {
+  websocketInstances.set(key, instance);
+}
+
+/**
+ * 获取 WebSocket 实例
+ */
+export function getWebSocketInstance(key: string) {
+  return websocketInstances.get(key);
+}
+
+/**
+ * 初始化 WebSocket 服务
+ */
+export function setupWebSocket() {
+  if (isInitialized) {
+    console.warn("[WebSocket] 已初始化，跳过重复初始化");
+    return;
+  }
+
+  if (!Auth.getAccessToken()) {
+    console.warn("[WebSocket] 未登录，跳过 WebSocket 初始化");
+    return;
+  }
+
+  try {
+    isInitialized = true;
+    console.log("[WebSocket] 初始化成功");
+  } catch (error) {
+    console.error("[WebSocket] 初始化失败:", error);
+  }
+}
+
+/**
+ * 清理所有 WebSocket 连接
+ */
+export function cleanupWebSocket() {
+  console.log("[WebSocket] 开始清理连接...");
+
+  websocketInstances.forEach((instance, key) => {
+    try {
+      if (instance.disconnect) {
+        instance.disconnect();
+      } else if (instance.closeWebSocket) {
+        instance.closeWebSocket();
+      } else if (instance.cleanup) {
+        instance.cleanup();
+      }
+      console.log(`[WebSocket] ${key} 已断开`);
+    } catch (error) {
+      console.error(`[WebSocket] ${key} 清理失败:`, error);
+    }
+  });
+
+  websocketInstances.clear();
+  isInitialized = false;
+  console.log("[WebSocket] 清理完成");
+}
+
+/**
+ * 重新初始化 WebSocket
+ */
+export function reinitializeWebSocket() {
+  cleanupWebSocket();
+  setupWebSocket();
+}
+
+if (typeof window !== "undefined") {
+  window.addEventListener("beforeunload", () => {
+    cleanupWebSocket();
+  });
+}
diff --git a/frontend/new-web/src/utils/storage/index.ts b/frontend/new-web/src/utils/storage/index.ts
index a4366f07..f7fa7bc6 100644
--- a/frontend/new-web/src/utils/storage/index.ts
+++ b/frontend/new-web/src/utils/storage/index.ts
@@ -1,7 +1,9 @@
 /**
  * 存储相关工具函数统一导出
+ *
+ * @module utils/storage
  */
 
-export * from './storage'
-export * from './storage-config'
-export * from './storage-key-manager'
+export * from "./storage";
+export * from "./storage-config";
+export * from "./storage-key-manager";
diff --git a/frontend/new-web/src/utils/storage/storage-config.ts b/frontend/new-web/src/utils/storage/storage-config.ts
index c53b4891..30e1bd79 100644
--- a/frontend/new-web/src/utils/storage/storage-config.ts
+++ b/frontend/new-web/src/utils/storage/storage-config.ts
@@ -24,35 +24,35 @@
  * 例如：sys-v1.0.0-user, sys-v1.0.0-setting
  *
  * @module utils/storage/storage-config
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 export class StorageConfig {
   /** 当前应用版本 */
-  static readonly CURRENT_VERSION = __APP_VERSION__
+  static readonly CURRENT_VERSION = __APP_VERSION__;
 
   /** 存储键前缀 */
-  static readonly STORAGE_PREFIX = 'sys-v'
+  static readonly STORAGE_PREFIX = "sys-v";
 
   /** 版本键名 */
-  static readonly VERSION_KEY = 'sys-version'
+  static readonly VERSION_KEY = "sys-version";
 
   /** 主题键名（index.html中使用了，如果修改，需要同步修改） */
-  static readonly THEME_KEY = 'sys-theme'
+  static readonly THEME_KEY = "sys-theme";
 
   /** 上次登录用户ID键名（用于判断是否为同一用户登录） */
-  static readonly LAST_USER_ID_KEY = 'sys-last-user-id'
+  static readonly LAST_USER_ID_KEY = "sys-last-user-id";
 
   /** 响应式布局切换时暂存桌面端菜单类型 */
-  static readonly RESPONSIVE_MENU_TYPE_KEY = 'sys-responsive-menu-type'
+  static readonly RESPONSIVE_MENU_TYPE_KEY = "sys-responsive-menu-type";
 
   /** 跳过升级检查的版本 */
-  static readonly SKIP_UPGRADE_VERSION = '1.0.0'
+  static readonly SKIP_UPGRADE_VERSION = "1.0.0";
 
   /** 升级处理延迟时间（毫秒） */
-  static readonly UPGRADE_DELAY = 1000
+  static readonly UPGRADE_DELAY = 1000;
 
   /** 登出延迟时间（毫秒） */
-  static readonly LOGOUT_DELAY = 1000
+  static readonly LOGOUT_DELAY = 1000;
 
   /**
    * 生成版本化的存储键名
@@ -60,7 +60,7 @@ export class StorageConfig {
    * @param version 版本号，默认使用当前版本
    */
   static generateStorageKey(storeId: string, version: string = this.CURRENT_VERSION): string {
-    return `${this.STORAGE_PREFIX}${version}-${storeId}`
+    return `${this.STORAGE_PREFIX}${version}-${storeId}`;
   }
 
   /**
@@ -68,7 +68,7 @@ export class StorageConfig {
    * @param version 版本号，默认使用当前版本
    */
   static generateLegacyKey(version: string = this.CURRENT_VERSION): string {
-    return `${this.STORAGE_PREFIX}${version}`
+    return `${this.STORAGE_PREFIX}${version}`;
   }
 
   /**
@@ -76,50 +76,50 @@ export class StorageConfig {
    * @param storeId 存储ID
    */
   static createKeyPattern(storeId: string): RegExp {
-    return new RegExp(`^${this.STORAGE_PREFIX}[^-]+-${storeId}$`)
+    return new RegExp(`^${this.STORAGE_PREFIX}[^-]+-${storeId}$`);
   }
 
   /**
    * 创建当前版本存储键匹配的正则表达式
    */
   static createCurrentVersionPattern(): RegExp {
-    return new RegExp(`^${this.STORAGE_PREFIX}${this.CURRENT_VERSION}-`)
+    return new RegExp(`^${this.STORAGE_PREFIX}${this.CURRENT_VERSION}-`);
   }
 
   /**
    * 创建任意版本存储键匹配的正则表达式
    */
   static createVersionPattern(): RegExp {
-    return new RegExp(`^${this.STORAGE_PREFIX}`)
+    return new RegExp(`^${this.STORAGE_PREFIX}`);
   }
 
   /**
    * 检查是否为当前版本的键
    */
   static isCurrentVersionKey(key: string): boolean {
-    return key.startsWith(`${this.STORAGE_PREFIX}${this.CURRENT_VERSION}`)
+    return key.startsWith(`${this.STORAGE_PREFIX}${this.CURRENT_VERSION}`);
   }
 
   /**
    * 检查是否为版本化的键
    */
   static isVersionedKey(key: string): boolean {
-    return key.startsWith(this.STORAGE_PREFIX)
+    return key.startsWith(this.STORAGE_PREFIX);
   }
 
   /**
    * 从存储键中提取版本号
    */
   static extractVersionFromKey(key: string): string | null {
-    const match = key.match(new RegExp(`^${this.STORAGE_PREFIX}([^-]+)`))
-    return match ? match[1] : null
+    const match = key.match(new RegExp(`^${this.STORAGE_PREFIX}([^-]+)`));
+    return match ? match[1] : null;
   }
 
   /**
    * 从存储键中提取存储ID
    */
   static extractStoreIdFromKey(key: string): string | null {
-    const match = key.match(new RegExp(`^${this.STORAGE_PREFIX}[^-]+-(.+)$`))
-    return match ? match[1] : null
+    const match = key.match(new RegExp(`^${this.STORAGE_PREFIX}[^-]+-(.+)$`));
+    return match ? match[1] : null;
   }
 }
diff --git a/frontend/new-web/src/utils/storage/storage-key-manager.ts b/frontend/new-web/src/utils/storage/storage-key-manager.ts
index ba14f65d..8fc8b7a4 100644
--- a/frontend/new-web/src/utils/storage/storage-key-manager.ts
+++ b/frontend/new-web/src/utils/storage/storage-key-manager.ts
@@ -27,9 +27,9 @@
  * 4. 返回当前版本的存储键供使用
  *
  * @module utils/storage/storage-key-manager
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
-import { StorageConfig } from '@/utils/storage'
+import { StorageConfig } from "@/utils/storage";
 
 /**
  * 存储键名管理器
@@ -40,24 +40,24 @@ export class StorageKeyManager {
    * 获取当前版本的存储键名
    */
   private getCurrentVersionKey(storeId: string): string {
-    return StorageConfig.generateStorageKey(storeId)
+    return StorageConfig.generateStorageKey(storeId);
   }
 
   /**
    * 检查当前版本的数据是否存在
    */
   private hasCurrentVersionData(key: string): boolean {
-    return localStorage.getItem(key) !== null
+    return localStorage.getItem(key) !== null;
   }
 
   /**
    * 查找其他版本的同名存储键
    */
   private findExistingKey(storeId: string): string | null {
-    const storageKeys = Object.keys(localStorage)
-    const pattern = StorageConfig.createKeyPattern(storeId)
+    const storageKeys = Object.keys(localStorage);
+    const pattern = StorageConfig.createKeyPattern(storeId);
 
-    return storageKeys.find((key) => pattern.test(key) && localStorage.getItem(key)) || null
+    return storageKeys.find((key) => pattern.test(key) && localStorage.getItem(key)) || null;
   }
 
   /**
@@ -65,13 +65,13 @@ export class StorageKeyManager {
    */
   private migrateData(fromKey: string, toKey: string): void {
     try {
-      const existingData = localStorage.getItem(fromKey)
+      const existingData = localStorage.getItem(fromKey);
       if (existingData) {
-        localStorage.setItem(toKey, existingData)
-        console.info(`[Storage] 已迁移数据: ${fromKey} → ${toKey}`)
+        localStorage.setItem(toKey, existingData);
+        console.info(`[Storage] 已迁移数据: ${fromKey} → ${toKey}`);
       }
     } catch (error) {
-      console.warn(`[Storage] 数据迁移失败: ${fromKey}`, error)
+      console.warn(`[Storage] 数据迁移失败: ${fromKey}`, error);
     }
   }
 
@@ -79,19 +79,19 @@ export class StorageKeyManager {
    * 获取持久化存储的键名（支持自动数据迁移）
    */
   getStorageKey(storeId: string): string {
-    const currentKey = this.getCurrentVersionKey(storeId)
+    const currentKey = this.getCurrentVersionKey(storeId);
 
     // 优先使用当前版本的数据
     if (this.hasCurrentVersionData(currentKey)) {
-      return currentKey
+      return currentKey;
     }
 
     // 查找并迁移其他版本的数据
-    const existingKey = this.findExistingKey(storeId)
+    const existingKey = this.findExistingKey(storeId);
     if (existingKey) {
-      this.migrateData(existingKey, currentKey)
+      this.migrateData(existingKey, currentKey);
     }
 
-    return currentKey
+    return currentKey;
   }
 }
diff --git a/frontend/new-web/src/utils/storage/storage.ts b/frontend/new-web/src/utils/storage/storage.ts
index 67b9e9ed..7d51a61d 100644
--- a/frontend/new-web/src/utils/storage/storage.ts
+++ b/frontend/new-web/src/utils/storage/storage.ts
@@ -30,11 +30,11 @@
  * 5. 异常时提示用户并执行登出
  *
  * @module utils/storage/storage
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
-import { router } from '@/router'
-import { useUserStore } from '@/store/modules/user'
-import { StorageConfig } from '@/utils/storage/storage-config'
+import { router } from "@/router";
+import { useUserStore } from "@/store/modules/user.store";
+import { StorageConfig } from "@/utils/storage/storage-config";
 
 /**
  * 存储兼容性管理器
@@ -45,39 +45,41 @@ class StorageCompatibilityManager {
    * 获取系统版本号
    */
   getSystemVersion(): string | null {
-    return localStorage.getItem(StorageConfig.VERSION_KEY)
+    return localStorage.getItem(StorageConfig.VERSION_KEY);
   }
 
   /**
    * 获取系统存储数据（兼容旧格式）
    */
   getSystemStorage(): any {
-    const version = this.getSystemVersion() || StorageConfig.CURRENT_VERSION
-    const legacyKey = StorageConfig.generateLegacyKey(version)
-    const data = localStorage.getItem(legacyKey)
-    return data ? JSON.parse(data) : null
+    const version = this.getSystemVersion() || StorageConfig.CURRENT_VERSION;
+    const legacyKey = StorageConfig.generateLegacyKey(version);
+    const data = localStorage.getItem(legacyKey);
+    return data ? JSON.parse(data) : null;
   }
 
   /**
    * 检查当前版本是否有存储数据
    */
   private hasCurrentVersionStorage(): boolean {
-    const storageKeys = Object.keys(localStorage)
-    const currentVersionPattern = StorageConfig.createCurrentVersionPattern()
+    const storageKeys = Object.keys(localStorage);
+    const currentVersionPattern = StorageConfig.createCurrentVersionPattern();
 
     return storageKeys.some(
       (key) => currentVersionPattern.test(key) && localStorage.getItem(key) !== null
-    )
+    );
   }
 
   /**
    * 检查是否存在任何版本的存储数据
    */
   private hasAnyVersionStorage(): boolean {
-    const storageKeys = Object.keys(localStorage)
-    const versionPattern = StorageConfig.createVersionPattern()
+    const storageKeys = Object.keys(localStorage);
+    const versionPattern = StorageConfig.createVersionPattern();
 
-    return storageKeys.some((key) => versionPattern.test(key) && localStorage.getItem(key) !== null)
+    return storageKeys.some(
+      (key) => versionPattern.test(key) && localStorage.getItem(key) !== null
+    );
   }
 
   /**
@@ -85,11 +87,11 @@ class StorageCompatibilityManager {
    */
   private getLegacyStorageData(): Record<string, any> {
     try {
-      const systemStorage = this.getSystemStorage()
-      return systemStorage || {}
+      const systemStorage = this.getSystemStorage();
+      return systemStorage || {};
     } catch (error) {
-      console.warn('[Storage] 解析旧格式存储数据失败:', error)
-      return {}
+      console.warn("[Storage] 解析旧格式存储数据失败:", error);
+      return {};
     }
   }
 
@@ -98,11 +100,11 @@ class StorageCompatibilityManager {
    */
   private showStorageError(): void {
     ElMessage({
-      type: 'error',
+      type: "error",
       offset: 40,
       duration: 5000,
-      message: '系统检测到本地数据异常，请重新登录系统恢复使用！'
-    })
+      message: "系统检测到本地数据异常，请重新登录系统恢复使用！",
+    });
   }
 
   /**
@@ -111,22 +113,22 @@ class StorageCompatibilityManager {
   private performSystemLogout(): void {
     setTimeout(() => {
       try {
-        localStorage.clear()
-        useUserStore().logOut()
-        router.push({ name: 'Login' })
-        console.info('[Storage] 已执行系统登出')
+        localStorage.clear();
+        useUserStore().logout();
+        router.push({ name: "Login" });
+        console.info("[Storage] 已执行系统登出");
       } catch (error) {
-        console.error('[Storage] 系统登出失败:', error)
+        console.error("[Storage] 系统登出失败:", error);
       }
-    }, StorageConfig.LOGOUT_DELAY)
+    }, StorageConfig.LOGOUT_DELAY);
   }
 
   /**
    * 处理存储异常
    */
   private handleStorageError(): void {
-    this.showStorageError()
-    this.performSystemLogout()
+    this.showStorageError();
+    this.performSystemLogout();
   }
 
   /**
@@ -138,39 +140,39 @@ class StorageCompatibilityManager {
       // 优先检查新版本存储结构
       if (this.hasCurrentVersionStorage()) {
         // console.debug('[Storage] 发现当前版本存储数据')
-        return true
+        return true;
       }
 
       // 检查是否有任何版本的存储数据
       if (this.hasAnyVersionStorage()) {
         // console.debug('[Storage] 发现其他版本存储数据，可能需要迁移')
-        return true
+        return true;
       }
 
       // 检查旧版本存储结构
-      const legacyData = this.getLegacyStorageData()
+      const legacyData = this.getLegacyStorageData();
       if (Object.keys(legacyData).length === 0) {
         // 只有在需要验证登录状态时才执行登出操作
         if (requireAuth) {
-          console.warn('[Storage] 未发现任何存储数据，需要重新登录')
-          this.performSystemLogout()
-          return false
+          console.warn("[Storage] 未发现任何存储数据，需要重新登录");
+          this.performSystemLogout();
+          return false;
         }
         // 首次访问或访问静态路由，不需要登出
         // console.debug('[Storage] 未发现存储数据，首次访问或访问静态路由')
-        return true
+        return true;
       }
 
-      console.debug('[Storage] 发现旧版本存储数据')
-      return true
+      console.debug("[Storage] 发现旧版本存储数据");
+      return true;
     } catch (error) {
-      console.error('[Storage] 存储数据验证失败:', error)
+      console.error("[Storage] 存储数据验证失败:", error);
       // 只有在需要验证登录状态时才处理错误
       if (requireAuth) {
-        this.handleStorageError()
-        return false
+        this.handleStorageError();
+        return false;
       }
-      return true
+      return true;
     }
   }
 
@@ -180,17 +182,17 @@ class StorageCompatibilityManager {
   isStorageEmpty(): boolean {
     // 检查新版本存储结构
     if (this.hasCurrentVersionStorage()) {
-      return false
+      return false;
     }
 
     // 检查是否有任何版本的存储数据
     if (this.hasAnyVersionStorage()) {
-      return false
+      return false;
     }
 
     // 检查旧版本存储结构
-    const legacyData = this.getLegacyStorageData()
-    return Object.keys(legacyData).length === 0
+    const legacyData = this.getLegacyStorageData();
+    return Object.keys(legacyData).length === 0;
   }
 
   /**
@@ -199,38 +201,38 @@ class StorageCompatibilityManager {
    */
   checkCompatibility(requireAuth: boolean = false): boolean {
     try {
-      const isValid = this.validateStorageData(requireAuth)
-      const isEmpty = this.isStorageEmpty()
+      const isValid = this.validateStorageData(requireAuth);
+      const isEmpty = this.isStorageEmpty();
 
       if (isValid || isEmpty) {
         // console.debug('[Storage] 存储兼容性检查通过')
-        return true
+        return true;
       }
 
-      console.warn('[Storage] 存储兼容性检查失败')
-      return false
+      console.warn("[Storage] 存储兼容性检查失败");
+      return false;
     } catch (error) {
-      console.error('[Storage] 兼容性检查异常:', error)
-      return false
+      console.error("[Storage] 兼容性检查异常:", error);
+      return false;
     }
   }
 }
 
 // 创建存储兼容性管理器实例
-const storageManager = new StorageCompatibilityManager()
+const storageManager = new StorageCompatibilityManager();
 
 /**
  * 获取系统存储数据
  */
 export function getSystemStorage(): any {
-  return storageManager.getSystemStorage()
+  return storageManager.getSystemStorage();
 }
 
 /**
  * 获取系统版本号
  */
 export function getSysVersion(): string | null {
-  return storageManager.getSystemVersion()
+  return storageManager.getSystemVersion();
 }
 
 /**
@@ -238,7 +240,7 @@ export function getSysVersion(): string | null {
  * @param requireAuth 是否需要验证登录状态（默认 false）
  */
 export function validateStorageData(requireAuth: boolean = false): boolean {
-  return storageManager.validateStorageData(requireAuth)
+  return storageManager.validateStorageData(requireAuth);
 }
 
 /**
@@ -246,5 +248,155 @@ export function validateStorageData(requireAuth: boolean = false): boolean {
  * @param requireAuth 是否需要验证登录状态（默认 false）
  */
 export function checkStorageCompatibility(requireAuth: boolean = false): boolean {
-  return storageManager.checkCompatibility(requireAuth)
+  return storageManager.checkCompatibility(requireAuth);
+}
+
+export class Storage {
+  /**
+   * localStorage 存储数据
+   *
+   * 将数据序列化为 JSON 字符串后存储到 localStorage
+   *
+   * @param {string} key - 存储键名
+   * @param {any} value - 要存储的数据
+   *
+   * @example
+   * ```typescript
+   * Storage.set('user', { name: 'John', age: 25 });
+   * ```
+   */
+  static set(key: string, value: any): void {
+    localStorage.setItem(key, JSON.stringify(value));
+  }
+
+  /**
+   * localStorage 读取数据
+   *
+   * 从 localStorage 读取数据并反序列化为指定类型
+   * 如果解析失败，返回原始字符串
+   *
+   * @param {string} key - 存储键名
+   * @param {T} [defaultValue] - 默认值，当键不存在时返回
+   * @returns {T} 解析后的数据或默认值
+   *
+   * @example
+   * ```typescript
+   * const user = Storage.get<User>('user', { name: '', age: 0 });
+   * ```
+   */
+  static get<T>(key: string, defaultValue?: T): T {
+    const value = localStorage.getItem(key);
+    if (!value) return defaultValue as T;
+
+    try {
+      return JSON.parse(value);
+    } catch {
+      // 如果解析失败，返回原始字符串
+      return value as unknown as T;
+    }
+  }
+
+  /**
+   * localStorage 删除数据
+   *
+   * 从 localStorage 中删除指定键的数据
+   *
+   * @param {string} key - 要删除的键名
+   *
+   * @example
+   * ```typescript
+   * Storage.remove('user');
+   * ```
+   */
+  static remove(key: string): void {
+    localStorage.removeItem(key);
+  }
+
+  /**
+   * localStorage 清空所有数据
+   *
+   * 清除 localStorage 中的所有数据
+   *
+   * @example
+   * ```typescript
+   * Storage.clear();
+   * ```
+   */
+  static clear(): void {
+    localStorage.clear();
+  }
+
+  /**
+   * sessionStorage 存储数据
+   *
+   * 将数据序列化为 JSON 字符串后存储到 sessionStorage
+   *
+   * @param {string} key - 存储键名
+   * @param {any} value - 要存储的数据
+   *
+   * @example
+   * ```typescript
+   * Storage.sessionSet('temp', { token: 'abc123' });
+   * ```
+   */
+  static sessionSet(key: string, value: any): void {
+    sessionStorage.setItem(key, JSON.stringify(value));
+  }
+
+  /**
+   * sessionStorage 读取数据
+   *
+   * 从 sessionStorage 读取数据并反序列化为指定类型
+   * 如果解析失败，返回原始字符串
+   *
+   * @param {string} key - 存储键名
+   * @param {T} [defaultValue] - 默认值，当键不存在时返回
+   * @returns {T} 解析后的数据或默认值
+   *
+   * @example
+   * ```typescript
+   * const temp = Storage.sessionGet<string>('temp', '');
+   * ```
+   */
+  static sessionGet<T>(key: string, defaultValue?: T): T {
+    const value = sessionStorage.getItem(key);
+    if (!value) return defaultValue as T;
+
+    try {
+      return JSON.parse(value);
+    } catch {
+      // 如果解析失败，返回原始字符串
+      return value as unknown as T;
+    }
+  }
+
+  /**
+   * sessionStorage 删除数据
+   *
+   * 从 sessionStorage 中删除指定键的数据
+   *
+   * @param {string} key - 要删除的键名
+   *
+   * @example
+   * ```typescript
+   * Storage.sessionRemove('temp');
+   * ```
+   */
+  static sessionRemove(key: string): void {
+    sessionStorage.removeItem(key);
+  }
+
+  /**
+   * sessionStorage 清空所有数据
+   *
+   * 清除 sessionStorage 中的所有数据
+   *
+   * @example
+   * ```typescript
+   * Storage.sessionClear();
+   * ```
+   */
+  static sessionClear(): void {
+    sessionStorage.clear();
+  }
 }
diff --git a/frontend/new-web/src/utils/sys/console.ts b/frontend/new-web/src/utils/sys/console.ts
index d631087d..23048ab7 100644
--- a/frontend/new-web/src/utils/sys/console.ts
+++ b/frontend/new-web/src/utils/sys/console.ts
@@ -1,13 +1,13 @@
 // ANSI 转义码生成网站  https://patorjk.com/software/taag/#p=display&f=Big&t=ABB%0A
 const asciiArt = `
-\x1b[32m欢迎使用 Art Design Pro！
+\x1b[32m欢迎使用 Fastapi Admin！
 \x1b[0m
 \x1b[36m哇！你居然在用我的项目～ 好用的话别忘了去 GitHub 点个 ★Star 呀，你的支持就是我更新的超强动力！祝使用体验满分💯
 \x1b[0m
-\x1b[33mGitHub: https://github.com/Daymychen/art-design-pro
+\x1b[33mGitHub: https://github.com/fastapiadmin/FastapiAdmin
 \x1b[0m
-\x1b[31m技术支持（QQ群）: 1038930070，和开发者一起交流～ 群里有小伙伴实时答疑，遇到问题不用慌！
+\x1b[31m技术支持（微信）: 948080782，和开发者一起交流～ 群里有小伙伴实时答疑，遇到问题不用慌！
 \x1b[0m
-`
+`;
 
-console.log(asciiArt)
+console.log(asciiArt);
diff --git a/frontend/new-web/src/utils/sys/error-handle.ts b/frontend/new-web/src/utils/sys/error-handle.ts
index bc966c9f..ba0e6139 100644
--- a/frontend/new-web/src/utils/sys/error-handle.ts
+++ b/frontend/new-web/src/utils/sys/error-handle.ts
@@ -27,52 +27,52 @@
  * - ResourceError: 静态资源加载失败
  *
  * @module utils/sys/error-handle
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
-import type { App } from 'vue'
+import type { App } from "vue";
 
 const IGNORABLE_SCRIPT_ERRORS = [
-  'ResizeObserver loop completed with undelivered notifications.',
-  'ResizeObserver loop limit exceeded'
-]
+  "ResizeObserver loop completed with undelivered notifications.",
+  "ResizeObserver loop limit exceeded",
+];
 
 function normalizeErrorMessage(message: Event | string): string {
-  if (typeof message === 'string') {
-    return message
+  if (typeof message === "string") {
+    return message;
   }
 
-  if ('message' in message && typeof message.message === 'string') {
-    return message.message
+  if ("message" in message && typeof message.message === "string") {
+    return message.message;
   }
 
-  return ''
+  return "";
 }
 
 function isIgnorableScriptError(message: Event | string, source?: string): boolean {
-  const normalizedMessage = normalizeErrorMessage(message)
+  const normalizedMessage = normalizeErrorMessage(message);
 
   if (!normalizedMessage) {
-    return false
+    return false;
   }
 
   if (IGNORABLE_SCRIPT_ERRORS.some((item) => normalizedMessage.includes(item))) {
     // 浏览器/扩展在布局抖动时常见的 ResizeObserver 噪声，不作为真实异常处理
-    return true
+    return true;
   }
 
   // 浏览器扩展注入脚本偶发的跨域 Script error 也没有排查价值
-  if (normalizedMessage === 'Script error.' && source === '') {
-    return true
+  if (normalizedMessage === "Script error." && source === "") {
+    return true;
   }
 
-  return false
+  return false;
 }
 
 /**
  * Vue 运行时错误处理
  */
 export function vueErrorHandler(err: unknown, instance: any, info: string) {
-  console.error('[VueError]', err, info, instance)
+  console.error("[VueError]", err, info, instance);
   // 这里可以上报到服务端，比如：
   // reportError({ type: 'vue', err, info })
 }
@@ -88,22 +88,22 @@ export function scriptErrorHandler(
   error?: Error
 ): boolean {
   if (isIgnorableScriptError(message, source)) {
-    return true
+    return true;
   }
 
-  console.error('[ScriptError]', { message, source, lineno, colno, error })
+  console.error("[ScriptError]", { message, source, lineno, colno, error });
   // reportError({ type: 'script', message, source, lineno, colno, error })
-  return true // 阻止默认控制台报错，可根据需求改
+  return true; // 阻止默认控制台报错，可根据需求改
 }
 
 /**
  * Promise 未捕获错误处理
  */
 export function registerPromiseErrorHandler() {
-  window.addEventListener('unhandledrejection', (event) => {
-    console.error('[PromiseError]', event.reason)
+  window.addEventListener("unhandledrejection", (event) => {
+    console.error("[PromiseError]", event.reason);
     // reportError({ type: 'promise', reason: event.reason })
-  })
+  });
 }
 
 /**
@@ -111,33 +111,33 @@ export function registerPromiseErrorHandler() {
  */
 export function registerResourceErrorHandler() {
   window.addEventListener(
-    'error',
+    "error",
     (event: Event) => {
-      const target = event.target as HTMLElement
+      const target = event.target as HTMLElement;
       if (
         target &&
-        (target.tagName === 'IMG' || target.tagName === 'SCRIPT' || target.tagName === 'LINK')
+        (target.tagName === "IMG" || target.tagName === "SCRIPT" || target.tagName === "LINK")
       ) {
-        console.error('[ResourceError]', {
+        console.error("[ResourceError]", {
           tagName: target.tagName,
           src:
             (target as HTMLImageElement).src ||
             (target as HTMLScriptElement).src ||
-            (target as HTMLLinkElement).href
-        })
+            (target as HTMLLinkElement).href,
+        });
         // reportError({ type: 'resource', target })
       }
     },
     true // 捕获阶段才能监听到资源错误
-  )
+  );
 }
 
 /**
  * 安装统一错误处理
  */
 export function setupErrorHandle(app: App) {
-  app.config.errorHandler = vueErrorHandler
-  window.onerror = scriptErrorHandler
-  registerPromiseErrorHandler()
-  registerResourceErrorHandler()
+  app.config.errorHandler = vueErrorHandler;
+  window.onerror = scriptErrorHandler;
+  registerPromiseErrorHandler();
+  registerResourceErrorHandler();
 }
diff --git a/frontend/new-web/src/utils/sys/index.ts b/frontend/new-web/src/utils/sys/index.ts
index a2e0729d..bdf4cae2 100644
--- a/frontend/new-web/src/utils/sys/index.ts
+++ b/frontend/new-web/src/utils/sys/index.ts
@@ -2,5 +2,5 @@
  * 系统管理相关工具函数统一导出
  */
 
-export * from './upgrade'
-export { default as mittBus } from './mittBus'
+export * from "./upgrade";
+export { default as mittBus } from "./mittBus";
diff --git a/frontend/new-web/src/utils/sys/mittBus.ts b/frontend/new-web/src/utils/sys/mittBus.ts
index 22f0108c..f92ee0f2 100644
--- a/frontend/new-web/src/utils/sys/mittBus.ts
+++ b/frontend/new-web/src/utils/sys/mittBus.ts
@@ -39,25 +39,25 @@
  * - openLockScreen: 打开锁屏
  *
  * @module utils/sys/mittBus
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
-import mitt, { type Emitter } from 'mitt'
+import mitt, { type Emitter } from "mitt";
 
 // 定义事件类型映射
 type Events = {
   // 烟花效果事件 - 可选的图片URL参数
-  triggerFireworks: string | undefined
+  triggerFireworks: string | undefined;
   // 打开设置面板事件 - 无参数
-  openSetting: void
+  openSetting: void;
   // 打开搜索对话框事件 - 无参数
-  openSearchDialog: void
+  openSearchDialog: void;
   // 打开聊天窗口事件 - 无参数
-  openChat: void
+  openChat: void;
   // 打开锁屏事件 - 无参数
-  openLockScreen: void
-}
+  openLockScreen: void;
+};
 
 // 创建类型安全的事件总线实例
-const mittBus: Emitter<Events> = mitt<Events>()
+const mittBus: Emitter<Events> = mitt<Events>();
 
-export default mittBus
+export default mittBus;
diff --git a/frontend/new-web/src/utils/sys/upgrade.ts b/frontend/new-web/src/utils/sys/upgrade.ts
index 53d34654..e2f73181 100644
--- a/frontend/new-web/src/utils/sys/upgrade.ts
+++ b/frontend/new-web/src/utils/sys/upgrade.ts
@@ -32,12 +32,12 @@
  * 6. 更新本地版本号
  *
  * @module utils/sys/upgrade
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
-import { upgradeLogList } from '@/mock/upgrade/changeLog'
-import { ElNotification } from 'element-plus'
-import { useUserStore } from '@/store/modules/user'
-import { StorageConfig } from '@/utils/storage/storage-config'
+import { upgradeLogList } from "@/mock/upgrade/changeLog";
+import { ElNotification } from "element-plus";
+import { useUserStore } from "@/store/modules/user.store";
+import { StorageConfig } from "@/utils/storage/storage-config";
 
 /**
  * 版本管理器
@@ -48,104 +48,104 @@ class VersionManager {
    * 规范化版本号字符串，移除前缀 'v'
    */
   private normalizeVersion(version: string): string {
-    return version.replace(/^v/, '')
+    return version.replace(/^v/, "");
   }
 
   /**
    * 获取存储的版本号
    */
   private getStoredVersion(): string | null {
-    return localStorage.getItem(StorageConfig.VERSION_KEY)
+    return localStorage.getItem(StorageConfig.VERSION_KEY);
   }
 
   /**
    * 设置版本号到存储
    */
   private setStoredVersion(version: string): void {
-    localStorage.setItem(StorageConfig.VERSION_KEY, version)
+    localStorage.setItem(StorageConfig.VERSION_KEY, version);
   }
 
   /**
    * 检查是否应该跳过升级处理
    */
   private shouldSkipUpgrade(): boolean {
-    return StorageConfig.CURRENT_VERSION === StorageConfig.SKIP_UPGRADE_VERSION
+    return StorageConfig.CURRENT_VERSION === StorageConfig.SKIP_UPGRADE_VERSION;
   }
 
   /**
    * 检查是否为首次访问
    */
   private isFirstVisit(storedVersion: string | null): boolean {
-    return !storedVersion
+    return !storedVersion;
   }
 
   /**
    * 检查版本是否相同
    */
   private isSameVersion(storedVersion: string): boolean {
-    return storedVersion === StorageConfig.CURRENT_VERSION
+    return storedVersion === StorageConfig.CURRENT_VERSION;
   }
 
   /**
    * 查找旧的存储结构
    */
   private findLegacyStorage(): { oldSysKey: string | null; oldVersionKeys: string[] } {
-    const storageKeys = Object.keys(localStorage)
-    const currentVersionPrefix = StorageConfig.generateStorageKey('').slice(0, -1) // 移除末尾的 '-'
+    const storageKeys = Object.keys(localStorage);
+    const currentVersionPrefix = StorageConfig.generateStorageKey("").slice(0, -1); // 移除末尾的 '-'
 
     // 查找旧的单一存储结构
     const oldSysKey =
       storageKeys.find(
         (key) =>
-          StorageConfig.isVersionedKey(key) && key !== currentVersionPrefix && !key.includes('-')
-      ) || null
+          StorageConfig.isVersionedKey(key) && key !== currentVersionPrefix && !key.includes("-")
+      ) || null;
 
     // 查找旧版本的分离存储键
     const oldVersionKeys = storageKeys.filter(
       (key) =>
         StorageConfig.isVersionedKey(key) &&
         !StorageConfig.isCurrentVersionKey(key) &&
-        key.includes('-')
-    )
+        key.includes("-")
+    );
 
-    return { oldSysKey, oldVersionKeys }
+    return { oldSysKey, oldVersionKeys };
   }
 
   /**
    * 检查是否需要重新登录
    */
   private shouldRequireReLogin(storedVersion: string): boolean {
-    const normalizedCurrent = this.normalizeVersion(StorageConfig.CURRENT_VERSION)
-    const normalizedStored = this.normalizeVersion(storedVersion)
+    const normalizedCurrent = this.normalizeVersion(StorageConfig.CURRENT_VERSION);
+    const normalizedStored = this.normalizeVersion(storedVersion);
 
     return upgradeLogList.value.some((item) => {
-      const itemVersion = this.normalizeVersion(item.version)
+      const itemVersion = this.normalizeVersion(item.version);
       return (
         item.requireReLogin && itemVersion > normalizedStored && itemVersion <= normalizedCurrent
-      )
-    })
+      );
+    });
   }
 
   /**
    * 构建升级通知消息
    */
   private buildUpgradeMessage(requireReLogin: boolean): string {
-    const { title: content } = upgradeLogList.value[0]
+    const { title: content } = upgradeLogList.value[0];
 
     const messageParts = [
       `<p style="color: var(--art-gray-800) !important; padding-bottom: 5px;">`,
       `系统已升级到 ${StorageConfig.CURRENT_VERSION} 版本，此次更新带来了以下改进：`,
       `</p>`,
-      content
-    ]
+      content,
+    ];
 
     if (requireReLogin) {
       messageParts.push(
         `<p style="color: var(--theme-color); padding-top: 5px;">升级完成，请重新登录后继续使用。</p>`
-      )
+      );
     }
 
-    return messageParts.join('')
+    return messageParts.join("");
   }
 
   /**
@@ -153,12 +153,12 @@ class VersionManager {
    */
   private showUpgradeNotification(message: string): void {
     ElNotification({
-      title: '系统升级公告',
+      title: "系统升级公告",
       message,
       duration: 0,
-      type: 'success',
-      dangerouslyUseHTMLString: true
-    })
+      type: "success",
+      dangerouslyUseHTMLString: true,
+    });
   }
 
   /**
@@ -167,15 +167,15 @@ class VersionManager {
   private cleanupLegacyData(oldSysKey: string | null, oldVersionKeys: string[]): void {
     // 清理旧的单一存储结构
     if (oldSysKey) {
-      localStorage.removeItem(oldSysKey)
-      console.info(`[Upgrade] 已清理旧存储: ${oldSysKey}`)
+      localStorage.removeItem(oldSysKey);
+      console.info(`[Upgrade] 已清理旧存储: ${oldSysKey}`);
     }
 
     // 清理旧版本的分离存储
     oldVersionKeys.forEach((key) => {
-      localStorage.removeItem(key)
-      console.info(`[Upgrade] 已清理旧存储: ${key}`)
-    })
+      localStorage.removeItem(key);
+      console.info(`[Upgrade] 已清理旧存储: ${key}`);
+    });
   }
 
   /**
@@ -183,10 +183,10 @@ class VersionManager {
    */
   private performLogout(): void {
     try {
-      useUserStore().logOut()
-      console.info('[Upgrade] 已执行升级后登出')
+      useUserStore().logout();
+      console.info("[Upgrade] 已执行升级后登出");
     } catch (error) {
-      console.error('[Upgrade] 升级后登出失败:', error)
+      console.error("[Upgrade] 升级后登出失败:", error);
     }
   }
 
@@ -199,30 +199,30 @@ class VersionManager {
   ): Promise<void> {
     try {
       if (!upgradeLogList.value.length) {
-        console.warn('[Upgrade] 升级日志列表为空')
-        return
+        console.warn("[Upgrade] 升级日志列表为空");
+        return;
       }
 
-      const requireReLogin = this.shouldRequireReLogin(storedVersion)
-      const message = this.buildUpgradeMessage(requireReLogin)
+      const requireReLogin = this.shouldRequireReLogin(storedVersion);
+      const message = this.buildUpgradeMessage(requireReLogin);
 
       // 显示升级通知
-      this.showUpgradeNotification(message)
+      this.showUpgradeNotification(message);
 
       // 更新版本号
-      this.setStoredVersion(StorageConfig.CURRENT_VERSION)
+      this.setStoredVersion(StorageConfig.CURRENT_VERSION);
 
       // 清理旧数据
-      this.cleanupLegacyData(legacyStorage.oldSysKey, legacyStorage.oldVersionKeys)
+      this.cleanupLegacyData(legacyStorage.oldSysKey, legacyStorage.oldVersionKeys);
 
       // 执行登出（如果需要）
       if (requireReLogin) {
-        this.performLogout()
+        this.performLogout();
       }
 
-      console.info(`[Upgrade] 升级完成: ${storedVersion} → ${StorageConfig.CURRENT_VERSION}`)
+      console.info(`[Upgrade] 升级完成: ${storedVersion} → ${StorageConfig.CURRENT_VERSION}`);
     } catch (error) {
-      console.error('[Upgrade] 系统升级处理失败:', error)
+      console.error("[Upgrade] 系统升级处理失败:", error);
     }
   }
 
@@ -232,46 +232,46 @@ class VersionManager {
   async processUpgrade(): Promise<void> {
     // 跳过特定版本
     if (this.shouldSkipUpgrade()) {
-      console.debug('[Upgrade] 跳过版本升级检查')
-      return
+      console.debug("[Upgrade] 跳过版本升级检查");
+      return;
     }
 
-    const storedVersion = this.getStoredVersion()
+    const storedVersion = this.getStoredVersion();
 
     // 首次访问处理
     if (this.isFirstVisit(storedVersion)) {
-      this.setStoredVersion(StorageConfig.CURRENT_VERSION)
+      this.setStoredVersion(StorageConfig.CURRENT_VERSION);
       // console.info('[Upgrade] 首次访问，已设置当前版本')
-      return
+      return;
     }
 
     // 版本相同，无需升级
     if (this.isSameVersion(storedVersion!)) {
       // console.debug('[Upgrade] 版本相同，无需升级')
-      return
+      return;
     }
 
     // 检查是否有需要升级的旧数据
-    const legacyStorage = this.findLegacyStorage()
+    const legacyStorage = this.findLegacyStorage();
     if (!legacyStorage.oldSysKey && legacyStorage.oldVersionKeys.length === 0) {
-      this.setStoredVersion(StorageConfig.CURRENT_VERSION)
-      console.info('[Upgrade] 无旧数据，已更新版本号')
-      return
+      this.setStoredVersion(StorageConfig.CURRENT_VERSION);
+      console.info("[Upgrade] 无旧数据，已更新版本号");
+      return;
     }
 
     // 延迟执行升级流程，确保应用已完全加载
     setTimeout(() => {
-      this.executeUpgrade(storedVersion!, legacyStorage)
-    }, StorageConfig.UPGRADE_DELAY)
+      this.executeUpgrade(storedVersion!, legacyStorage);
+    }, StorageConfig.UPGRADE_DELAY);
   }
 }
 
 // 创建版本管理器实例
-const versionManager = new VersionManager()
+const versionManager = new VersionManager();
 
 /**
  * 系统升级处理入口函数
  */
 export async function systemUpgrade(): Promise<void> {
-  await versionManager.processUpgrade()
+  await versionManager.processUpgrade();
 }
diff --git a/frontend/new-web/src/utils/table/index.ts b/frontend/new-web/src/utils/table/index.ts
new file mode 100644
index 00000000..8f6d5665
--- /dev/null
+++ b/frontend/new-web/src/utils/table/index.ts
@@ -0,0 +1,11 @@
+/**
+ * 表格相关工具函数统一导出
+ *
+ * @module utils/table
+ */
+
+export * from "./tableCache";
+
+export * from "./tableConfig";
+
+export * from "./tableUtils";
diff --git a/frontend/new-web/src/utils/table/tableCache.ts b/frontend/new-web/src/utils/table/tableCache.ts
index 045a7ce9..42d28919 100644
--- a/frontend/new-web/src/utils/table/tableCache.ts
+++ b/frontend/new-web/src/utils/table/tableCache.ts
@@ -30,134 +30,134 @@
  * - KEEP_ALL: 不清除缓存（适用于只读操作）
  *
  * @module utils/table/tableCache
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
-import { hash } from 'ohash'
+import { hash } from "ohash";
 
 // 缓存失效策略枚举
 export enum CacheInvalidationStrategy {
   /** 清空所有缓存 */
-  CLEAR_ALL = 'clear_all',
+  CLEAR_ALL = "clear_all",
   /** 仅清空当前查询条件的缓存 */
-  CLEAR_CURRENT = 'clear_current',
+  CLEAR_CURRENT = "clear_current",
   /** 清空所有分页缓存（保留不同搜索条件的缓存） */
-  CLEAR_PAGINATION = 'clear_pagination',
+  CLEAR_PAGINATION = "clear_pagination",
   /** 不清除缓存 */
-  KEEP_ALL = 'keep_all'
+  KEEP_ALL = "keep_all",
 }
 
 // 通用 API 响应接口（兼容不同的后端响应格式）
 export interface ApiResponse<T = unknown> {
-  records?: T[]
-  data?: T[]
-  total?: number
-  current?: number
-  size?: number
-  [key: string]: unknown
+  records?: T[];
+  data?: T[];
+  total?: number;
+  current?: number;
+  size?: number;
+  [key: string]: unknown;
 }
 
 // 缓存存储接口
 export interface CacheItem<T> {
-  data: T[]
-  response: ApiResponse<T>
-  timestamp: number
-  params: string
+  data: T[];
+  response: ApiResponse<T>;
+  timestamp: number;
+  params: string;
   // 缓存标签，用于分组管理
-  tags: Set<string>
+  tags: Set<string>;
   // 访问次数（用于 LRU 算法）
-  accessCount: number
+  accessCount: number;
   // 最后访问时间
-  lastAccessTime: number
+  lastAccessTime: number;
 }
 
 // 增强的缓存管理类
 export class TableCache<T> {
-  private cache = new Map<string, CacheItem<T>>()
-  private cacheTime: number
-  private maxSize: number
-  private enableLog: boolean
+  private cache = new Map<string, CacheItem<T>>();
+  private cacheTime: number;
+  private maxSize: number;
+  private enableLog: boolean;
 
   constructor(cacheTime = 5 * 60 * 1000, maxSize = 50, enableLog = false) {
     // 默认5分钟，最多50条缓存
-    this.cacheTime = cacheTime
-    this.maxSize = maxSize
-    this.enableLog = enableLog
+    this.cacheTime = cacheTime;
+    this.maxSize = maxSize;
+    this.enableLog = enableLog;
   }
 
   // 内部日志工具
   private log(message: string, ...args: any[]) {
     if (this.enableLog) {
-      console.log(`[TableCache] ${message}`, ...args)
+      console.log(`[TableCache] ${message}`, ...args);
     }
   }
 
   // 生成稳定的缓存键
   private generateKey(params: unknown): string {
-    return hash(params)
+    return hash(params);
   }
 
   // 🔧 优化：增强类型安全性
   private generateTags(params: Record<string, unknown>): Set<string> {
-    const tags = new Set<string>()
+    const tags = new Set<string>();
 
     // 添加搜索条件标签
     const searchKeys = Object.keys(params).filter(
       (key) =>
-        !['current', 'size', 'total'].includes(key) &&
+        !["current", "size", "total"].includes(key) &&
         params[key] !== undefined &&
-        params[key] !== '' &&
+        params[key] !== "" &&
         params[key] !== null
-    )
+    );
 
     if (searchKeys.length > 0) {
-      const searchTag = searchKeys.map((key) => `${key}:${String(params[key])}`).join('|')
-      tags.add(`search:${searchTag}`)
+      const searchTag = searchKeys.map((key) => `${key}:${String(params[key])}`).join("|");
+      tags.add(`search:${searchTag}`);
     } else {
-      tags.add('search:default')
+      tags.add("search:default");
     }
 
     // 添加分页标签
-    tags.add(`pagination:${params.size || 10}`)
+    tags.add(`pagination:${params.size || 10}`);
     // 添加通用分页标签，用于清理所有分页缓存
-    tags.add('pagination')
+    tags.add("pagination");
 
-    return tags
+    return tags;
   }
 
   // 🔧 优化：LRU 缓存清理
   private evictLRU(): void {
-    if (this.cache.size <= this.maxSize) return
+    if (this.cache.size <= this.maxSize) return;
 
     // 找到最少使用的缓存项
-    let lruKey = ''
-    let minAccessCount = Infinity
-    let oldestTime = Infinity
+    let lruKey = "";
+    let minAccessCount = Infinity;
+    let oldestTime = Infinity;
 
     for (const [key, item] of this.cache.entries()) {
       if (
         item.accessCount < minAccessCount ||
         (item.accessCount === minAccessCount && item.lastAccessTime < oldestTime)
       ) {
-        lruKey = key
-        minAccessCount = item.accessCount
-        oldestTime = item.lastAccessTime
+        lruKey = key;
+        minAccessCount = item.accessCount;
+        oldestTime = item.lastAccessTime;
       }
     }
 
     if (lruKey) {
-      this.cache.delete(lruKey)
-      this.log(`LRU 清理缓存: ${lruKey}`)
+      this.cache.delete(lruKey);
+      this.log(`LRU 清理缓存: ${lruKey}`);
     }
   }
 
   // 设置缓存
   set(params: unknown, data: T[], response: ApiResponse<T>): void {
-    const key = this.generateKey(params)
-    const tags = this.generateTags(params as Record<string, unknown>)
-    const now = Date.now()
+    const key = this.generateKey(params);
+    const tags = this.generateTags(params as Record<string, unknown>);
+    const now = Date.now();
 
     // 检查是否需要清理
-    this.evictLRU()
+    this.evictLRU();
 
     this.cache.set(key, {
       data,
@@ -166,101 +166,101 @@ export class TableCache<T> {
       params: key,
       tags,
       accessCount: 1,
-      lastAccessTime: now
-    })
+      lastAccessTime: now,
+    });
   }
 
   // 获取缓存
   get(params: unknown): CacheItem<T> | null {
-    const key = this.generateKey(params)
-    const item = this.cache.get(key)
+    const key = this.generateKey(params);
+    const item = this.cache.get(key);
 
-    if (!item) return null
+    if (!item) return null;
 
     // 检查是否过期
     if (Date.now() - item.timestamp > this.cacheTime) {
-      this.cache.delete(key)
-      return null
+      this.cache.delete(key);
+      return null;
     }
 
     // 更新访问统计
-    item.accessCount++
-    item.lastAccessTime = Date.now()
+    item.accessCount++;
+    item.lastAccessTime = Date.now();
 
-    return item
+    return item;
   }
 
   // 根据标签清除缓存
   clearByTags(tags: string[]): number {
-    let clearedCount = 0
+    let clearedCount = 0;
 
     for (const [key, item] of this.cache.entries()) {
       // 检查是否包含任意一个标签
       const hasMatchingTag = tags.some((tag) =>
         Array.from(item.tags).some((itemTag) => itemTag.includes(tag))
-      )
+      );
 
       if (hasMatchingTag) {
-        this.cache.delete(key)
-        clearedCount++
+        this.cache.delete(key);
+        clearedCount++;
       }
     }
 
-    return clearedCount
+    return clearedCount;
   }
 
   // 清除当前搜索条件的缓存
   clearCurrentSearch(params: unknown): number {
-    const key = this.generateKey(params)
-    const deleted = this.cache.delete(key)
-    return deleted ? 1 : 0
+    const key = this.generateKey(params);
+    const deleted = this.cache.delete(key);
+    return deleted ? 1 : 0;
   }
 
   // 清除分页缓存
   clearPagination(): number {
-    return this.clearByTags(['pagination'])
+    return this.clearByTags(["pagination"]);
   }
 
   // 清空所有缓存
   clear(): void {
-    this.cache.clear()
+    this.cache.clear();
   }
 
   // 获取缓存统计信息
   getStats(): { total: number; size: string; hitRate: string } {
-    const total = this.cache.size
-    let totalSize = 0
-    let totalAccess = 0
+    const total = this.cache.size;
+    let totalSize = 0;
+    let totalAccess = 0;
 
     for (const item of this.cache.values()) {
       // 粗略估算大小（JSON字符串长度）
-      totalSize += JSON.stringify(item.data).length
-      totalAccess += item.accessCount
+      totalSize += JSON.stringify(item.data).length;
+      totalAccess += item.accessCount;
     }
 
     // 转换为人类可读的大小
-    const sizeInKB = (totalSize / 1024).toFixed(2)
-    const avgHits = total > 0 ? (totalAccess / total).toFixed(1) : '0'
+    const sizeInKB = (totalSize / 1024).toFixed(2);
+    const avgHits = total > 0 ? (totalAccess / total).toFixed(1) : "0";
 
     return {
       total,
       size: `${sizeInKB}KB`,
-      hitRate: `${avgHits} avg hits`
-    }
+      hitRate: `${avgHits} avg hits`,
+    };
   }
 
   // 清理过期缓存
   cleanupExpired(): number {
-    let cleanedCount = 0
-    const now = Date.now()
+    let cleanedCount = 0;
+    const now = Date.now();
 
     for (const [key, item] of this.cache.entries()) {
       if (now - item.timestamp > this.cacheTime) {
-        this.cache.delete(key)
-        cleanedCount++
+        this.cache.delete(key);
+        cleanedCount++;
       }
     }
 
-    return cleanedCount
+    return cleanedCount;
   }
 }
diff --git a/frontend/new-web/src/utils/table/tableConfig.ts b/frontend/new-web/src/utils/table/tableConfig.ts
index e464c891..f5f92100 100644
--- a/frontend/new-web/src/utils/table/tableConfig.ts
+++ b/frontend/new-web/src/utils/table/tableConfig.ts
@@ -31,25 +31,25 @@
  * 例如：recordFields: ['list', 'data', 'records', 'items', 'yourCustomField']
  *
  * @module utils/table/tableConfig
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 export const tableConfig = {
   // 响应数据字段映射配置，系统会从接口返回数据中按顺序查找这些字段
   // 列表数据
-  recordFields: ['list', 'data', 'records', 'items', 'result', 'rows'],
+  recordFields: ["list", "data", "records", "items", "result", "rows"],
   // 总条数
-  totalFields: ['total', 'count'],
+  totalFields: ["total", "count"],
   // 当前页码
-  currentFields: ['current', 'page', 'pageNum'],
+  currentFields: ["current", "page", "pageNum"],
   // 每页大小
-  sizeFields: ['size', 'pageSize', 'limit'],
+  sizeFields: ["size", "pageSize", "limit"],
 
   // 请求参数映射配置，前端发送请求时使用的分页参数名
   // useTable 组合式函数传递分页参数的时候 用 current 跟 size
   paginationKey: {
     // 当前页码
-    current: 'current',
+    current: "current",
     // 每页大小
-    size: 'size'
-  }
-}
+    size: "size",
+  },
+};
diff --git a/frontend/new-web/src/utils/table/tableUtils.ts b/frontend/new-web/src/utils/table/tableUtils.ts
index 3ca9db1a..e268151b 100644
--- a/frontend/new-web/src/utils/table/tableUtils.ts
+++ b/frontend/new-web/src/utils/table/tableUtils.ts
@@ -36,76 +36,76 @@
  * - createErrorHandler: 生成错误处理器
  *
  * @module utils/table/tableUtils
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
-import type { ApiResponse } from './tableCache'
-import { tableConfig } from './tableConfig'
+import type { ApiResponse } from "./tableCache";
+import { tableConfig } from "./tableConfig";
 
 // 请求参数基础接口，扩展分页参数
-export interface BaseRequestParams extends Api.Common.PaginationParams {
-  [key: string]: unknown
+export interface BaseRequestParams extends PageQuery {
+  [key: string]: unknown;
 }
 
 // 错误处理接口
 export interface TableError {
-  code: string
-  message: string
-  details?: unknown
+  code: string;
+  message: string;
+  details?: unknown;
 }
 
 // 辅助函数：从对象中提取记录数组
 function extractRecords<T>(obj: Record<string, unknown>, fields: string[]): T[] {
   for (const field of fields) {
     if (field in obj && Array.isArray(obj[field])) {
-      return obj[field] as T[]
+      return obj[field] as T[];
     }
   }
-  return []
+  return [];
 }
 
 // 辅助函数：从对象中提取总数
 function extractTotal(obj: Record<string, unknown>, records: unknown[], fields: string[]): number {
   for (const field of fields) {
-    if (field in obj && typeof obj[field] === 'number') {
-      return obj[field] as number
+    if (field in obj && typeof obj[field] === "number") {
+      return obj[field] as number;
     }
   }
-  return records.length
+  return records.length;
 }
 
 // 辅助函数：提取分页参数
 function extractPagination(
   obj: Record<string, unknown>,
   data?: Record<string, unknown>
-): Pick<ApiResponse<unknown>, 'current' | 'size'> | undefined {
-  const result: Partial<Pick<ApiResponse<unknown>, 'current' | 'size'>> = {}
-  const sources = [obj, data ?? {}]
+): Pick<ApiResponse<unknown>, "current" | "size"> | undefined {
+  const result: Partial<Pick<ApiResponse<unknown>, "current" | "size">> = {};
+  const sources = [obj, data ?? {}];
 
-  const currentFields = tableConfig.currentFields
+  const currentFields = tableConfig.currentFields;
   for (const src of sources) {
     for (const field of currentFields) {
-      if (field in src && typeof src[field] === 'number') {
-        result.current = src[field] as number
-        break
+      if (field in src && typeof src[field] === "number") {
+        result.current = src[field] as number;
+        break;
       }
     }
-    if (result.current !== undefined) break
+    if (result.current !== undefined) break;
   }
 
-  const sizeFields = tableConfig.sizeFields
+  const sizeFields = tableConfig.sizeFields;
   for (const src of sources) {
     for (const field of sizeFields) {
-      if (field in src && typeof src[field] === 'number') {
-        result.size = src[field] as number
-        break
+      if (field in src && typeof src[field] === "number") {
+        result.size = src[field] as number;
+        break;
       }
     }
-    if (result.size !== undefined) break
+    if (result.size !== undefined) break;
   }
 
-  if (result.current === undefined && result.size === undefined) return undefined
-  return result
+  if (result.current === undefined && result.size === undefined) return undefined;
+  return result;
 }
 
 /**
@@ -113,88 +113,79 @@ function extractPagination(
  */
 export const defaultResponseAdapter = <T>(response: unknown): ApiResponse<T> => {
   // 定义支持的字段
-  const recordFields = tableConfig.recordFields
+  const recordFields = tableConfig.recordFields;
 
   if (!response) {
-    return { records: [], total: 0 }
+    return { records: [], total: 0 };
   }
 
   if (Array.isArray(response)) {
-    return { records: response, total: response.length }
+    return { records: response, total: response.length };
   }
 
-  if (typeof response !== 'object') {
+  if (typeof response !== "object") {
     console.warn(
-      '[tableUtils] 无法识别的响应格式，支持的格式包括: 数组、包含' +
-        recordFields.join('/') +
-        '字段的对象、嵌套data对象。当前格式:',
+      "[tableUtils] 无法识别的响应格式，支持的格式包括: 数组、包含" +
+        recordFields.join("/") +
+        "字段的对象、嵌套data对象。当前格式:",
       response
-    )
-    return { records: [], total: 0 }
+    );
+    return { records: [], total: 0 };
   }
 
-  const res = response as Record<string, unknown>
-  let records: T[] = []
-  let total = 0
-  let pagination: Pick<ApiResponse<unknown>, 'current' | 'size'> | undefined
+  const res = response as Record<string, unknown>;
+  let records: T[] = [];
+  let total = 0;
+  let pagination: Pick<ApiResponse<unknown>, "current" | "size"> | undefined;
 
   // 处理标准格式或直接列表
-  records = extractRecords(res, recordFields)
-  total = extractTotal(res, records, tableConfig.totalFields)
-  pagination = extractPagination(res)
+  records = extractRecords(res, recordFields);
+  total = extractTotal(res, records, tableConfig.totalFields);
+  pagination = extractPagination(res);
 
   // 如果没有找到，检查嵌套data
-  if (records.length === 0 && 'data' in res && typeof res.data === 'object') {
-    const data = res.data as Record<string, unknown>
-    records = extractRecords(data, ['list', 'records', 'items'])
-    total = extractTotal(data, records, tableConfig.totalFields)
-    pagination = extractPagination(res, data)
+  if (records.length === 0 && "data" in res && typeof res.data === "object") {
+    const data = res.data as Record<string, unknown>;
+    records = extractRecords(data, ["list", "records", "items"]);
+    total = extractTotal(data, records, tableConfig.totalFields);
+    pagination = extractPagination(res, data);
 
     if (Array.isArray(res.data)) {
-      records = res.data as T[]
-      total = records.length
+      records = res.data as T[];
+      total = records.length;
     }
   }
 
   if (!recordFields.some((field) => field in res) && records.length === 0) {
-    console.warn('[tableUtils] 无法识别的响应格式')
-    console.warn('支持的字段包括: ' + recordFields.join('、'), response)
-    console.warn('扩展字段请到 utils/table/tableConfig 文件配置')
+    console.warn("[tableUtils] 无法识别的响应格式");
+    console.warn("支持的字段包括: " + recordFields.join("、"), response);
+    console.warn("扩展字段请到 utils/table/tableConfig 文件配置");
   }
 
-  const result: ApiResponse<T> = { records, total }
+  const result: ApiResponse<T> = { records, total };
   if (pagination) {
-    Object.assign(result, pagination)
+    Object.assign(result, pagination);
   }
-  return result
-}
+  return result;
+};
 
 /**
  * 从标准化的API响应中提取表格数据
  */
 export const extractTableData = <T>(response: ApiResponse<T>): T[] => {
-  const data = response.records || response.data || []
-  return Array.isArray(data) ? data : []
-}
+  const data = response.records || response.data || [];
+  return Array.isArray(data) ? data : [];
+};
 
 /**
  * 根据API响应更新分页信息
  */
 export const updatePaginationFromResponse = <T>(
-  pagination: Api.Common.PaginationParams,
+  pagination: PageQuery,
   response: ApiResponse<T>
 ): void => {
-  pagination.total = response.total ?? pagination.total ?? 0
-
-  if (response.current !== undefined) {
-    pagination.current = response.current
-  }
-
-  const maxPage = Math.max(1, Math.ceil(pagination.total / (pagination.size || 1)))
-  if (pagination.current > maxPage) {
-    pagination.current = maxPage
-  }
-}
+  pagination.page_size = response.total ?? pagination.page_size ?? 10;
+};
 
 /**
  * 创建智能防抖函数 - 支持取消和立即执行
@@ -203,65 +194,65 @@ export const createSmartDebounce = <T extends (...args: any[]) => Promise<any>>(
   fn: T,
   delay: number
 ): T & { cancel: () => void; flush: () => Promise<any> } => {
-  let timeoutId: NodeJS.Timeout | null = null
-  let lastArgs: Parameters<T> | null = null
-  let lastResolve: ((value: any) => void) | null = null
-  let lastReject: ((reason: any) => void) | null = null
+  let timeoutId: NodeJS.Timeout | null = null;
+  let lastArgs: Parameters<T> | null = null;
+  let lastResolve: ((value: any) => void) | null = null;
+  let lastReject: ((reason: any) => void) | null = null;
 
   const debouncedFn = (...args: Parameters<T>): Promise<any> => {
     return new Promise((resolve, reject) => {
-      if (timeoutId) clearTimeout(timeoutId)
-      lastArgs = args
-      lastResolve = resolve
-      lastReject = reject
+      if (timeoutId) clearTimeout(timeoutId);
+      lastArgs = args;
+      lastResolve = resolve;
+      lastReject = reject;
       timeoutId = setTimeout(async () => {
         try {
-          const result = await fn(...args)
-          resolve(result)
+          const result = await fn(...args);
+          resolve(result);
         } catch (error) {
-          reject(error)
+          reject(error);
         } finally {
-          timeoutId = null
-          lastArgs = null
-          lastResolve = null
-          lastReject = null
+          timeoutId = null;
+          lastArgs = null;
+          lastResolve = null;
+          lastReject = null;
         }
-      }, delay)
-    })
-  }
+      }, delay);
+    });
+  };
 
   debouncedFn.cancel = () => {
-    if (timeoutId) clearTimeout(timeoutId)
-    timeoutId = null
-    lastArgs = null
-    lastResolve = null
-    lastReject = null
-  }
+    if (timeoutId) clearTimeout(timeoutId);
+    timeoutId = null;
+    lastArgs = null;
+    lastResolve = null;
+    lastReject = null;
+  };
 
   debouncedFn.flush = async () => {
     if (timeoutId && lastArgs && lastResolve && lastReject) {
-      clearTimeout(timeoutId)
-      timeoutId = null
-      const args = lastArgs
-      const resolve = lastResolve
-      const reject = lastReject
-      lastArgs = null
-      lastResolve = null
-      lastReject = null
+      clearTimeout(timeoutId);
+      timeoutId = null;
+      const args = lastArgs;
+      const resolve = lastResolve;
+      const reject = lastReject;
+      lastArgs = null;
+      lastResolve = null;
+      lastReject = null;
       try {
-        const result = await fn(...args)
-        resolve(result)
-        return result
+        const result = await fn(...args);
+        resolve(result);
+        return result;
       } catch (error) {
-        reject(error)
-        throw error
+        reject(error);
+        throw error;
       }
     }
-    return Promise.resolve()
-  }
+    return Promise.resolve();
+  };
 
-  return debouncedFn as any
-}
+  return debouncedFn as any;
+};
 
 /**
  * 生成错误处理函数
@@ -272,26 +263,26 @@ export const createErrorHandler = (
 ) => {
   const logger = {
     error: (message: string, ...args: any[]) => {
-      if (enableLog) console.error(`[useTable] ${message}`, ...args)
-    }
-  }
+      if (enableLog) console.error(`[useTable] ${message}`, ...args);
+    },
+  };
 
   return (err: unknown, context: string): TableError => {
     const tableError: TableError = {
-      code: 'UNKNOWN_ERROR',
-      message: '未知错误',
-      details: err
-    }
+      code: "UNKNOWN_ERROR",
+      message: "未知错误",
+      details: err,
+    };
 
     if (err instanceof Error) {
-      tableError.message = err.message
-      tableError.code = err.name
-    } else if (typeof err === 'string') {
-      tableError.message = err
+      tableError.message = err.message;
+      tableError.code = err.name;
+    } else if (typeof err === "string") {
+      tableError.message = err;
     }
 
-    logger.error(`${context}:`, err)
-    onError?.(tableError)
-    return tableError
-  }
-}
+    logger.error(`${context}:`, err);
+    onError?.(tableError);
+    return tableError;
+  };
+};
diff --git a/frontend/new-web/src/utils/ui/animation.ts b/frontend/new-web/src/utils/ui/animation.ts
index 5efd02a8..99ee6fbe 100644
--- a/frontend/new-web/src/utils/ui/animation.ts
+++ b/frontend/new-web/src/utils/ui/animation.ts
@@ -25,56 +25,56 @@
  * - 自动计算最大扩散半径
  *
  * @module utils/theme/animation
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
-import { useCommon } from '@/hooks/core/useCommon'
-import { useTheme } from '@/hooks/core/useTheme'
-import { SystemThemeEnum } from '@/enums/appEnum'
-import { useSettingStore } from '@/store/modules/setting'
-const { LIGHT, DARK } = SystemThemeEnum
+import { useCommon } from "@/hooks/core/useCommon";
+import { useTheme } from "@/hooks/core/useTheme";
+import { SystemThemeEnum } from "@/enums/appEnum";
+import { useSettingsStore } from "@/store/modules/setting.store";
+const { LIGHT, DARK } = SystemThemeEnum;
 
 /**
  * 主题切换动画
  * @param e 鼠标点击事件
  */
 export const themeAnimation = (e: any) => {
-  const x = e.clientX
-  const y = e.clientY
+  const x = e.clientX;
+  const y = e.clientY;
   // 计算鼠标点击位置距离视窗的最大圆半径
-  const endRadius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y))
+  const endRadius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y));
 
   // 设置CSS变量
-  document.documentElement.style.setProperty('--x', x + 'px')
-  document.documentElement.style.setProperty('--y', y + 'px')
-  document.documentElement.style.setProperty('--r', endRadius + 'px')
+  document.documentElement.style.setProperty("--x", x + "px");
+  document.documentElement.style.setProperty("--y", y + "px");
+  document.documentElement.style.setProperty("--r", endRadius + "px");
 
   if (document.startViewTransition) {
-    document.startViewTransition(() => toggleTheme())
+    document.startViewTransition(() => toggleTheme());
   } else {
-    toggleTheme()
+    toggleTheme();
   }
-}
+};
 
 /**
  * 切换主题
  */
 const toggleTheme = () => {
-  useTheme().switchThemeStyles(useSettingStore().systemThemeType === LIGHT ? DARK : LIGHT)
-  useCommon().refresh()
-}
+  useTheme().switchThemeStyles(useSettingsStore().systemThemeType === LIGHT ? DARK : LIGHT);
+  useCommon().refresh();
+};
 
 /**
  * 切换主题过渡效果
  * @param enable 是否启用过渡效果
  */
 export const toggleTransition = (enable: boolean) => {
-  const body = document.body
+  const body = document.body;
 
   if (enable) {
-    body.classList.add('theme-change')
+    body.classList.add("theme-change");
   } else {
     setTimeout(() => {
-      body.classList.remove('theme-change')
-    }, 300)
+      body.classList.remove("theme-change");
+    }, 300);
   }
-}
+};
diff --git a/frontend/new-web/src/utils/ui/colors.ts b/frontend/new-web/src/utils/ui/colors.ts
index b4f6b77e..cc1b0c9a 100755
--- a/frontend/new-web/src/utils/ui/colors.ts
+++ b/frontend/new-web/src/utils/ui/colors.ts
@@ -39,18 +39,18 @@
  * - RGBA: rgba(255, 255, 255, 0.5)
  *
  * @module utils/ui/colors
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
-import { useSettingStore } from '@/store/modules/setting'
+import { useSettingsStore } from "@/store/modules/setting.store";
 
 /**
  * 颜色转换结果接口
  */
 interface RgbaResult {
-  red: number
-  green: number
-  blue: number
-  rgba: string
+  red: number;
+  green: number;
+  blue: number;
+  rgba: string;
 }
 
 /**
@@ -59,7 +59,7 @@ interface RgbaResult {
  * @returns CSS变量值
  */
 export function getCssVar(name: string): string {
-  return getComputedStyle(document.documentElement).getPropertyValue(name)
+  return getComputedStyle(document.documentElement).getPropertyValue(name);
 }
 
 /**
@@ -68,8 +68,8 @@ export function getCssVar(name: string): string {
  * @returns 是否为有效的hex颜色
  */
 function isValidHexColor(hex: string): boolean {
-  const cleanHex = hex.trim().replace(/^#/, '')
-  return /^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$/.test(cleanHex)
+  const cleanHex = hex.trim().replace(/^#/, "");
+  return /^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$/.test(cleanHex);
 }
 
 /**
@@ -80,8 +80,8 @@ function isValidHexColor(hex: string): boolean {
  * @returns 是否为有效的RGB值
  */
 function isValidRgbValue(r: number, g: number, b: number): boolean {
-  const isValid = (value: number) => Number.isInteger(value) && value >= 0 && value <= 255
-  return isValid(r) && isValid(g) && isValid(b)
+  const isValid = (value: number) => Number.isInteger(value) && value >= 0 && value <= 255;
+  return isValid(r) && isValid(g) && isValid(b);
 }
 
 /**
@@ -92,30 +92,30 @@ function isValidRgbValue(r: number, g: number, b: number): boolean {
  */
 export function hexToRgba(hex: string, opacity: number): RgbaResult {
   if (!isValidHexColor(hex)) {
-    throw new Error('Invalid hex color format')
+    throw new Error("Invalid hex color format");
   }
 
   // 移除可能存在的 # 前缀并转换为大写
-  let cleanHex = hex.trim().replace(/^#/, '').toUpperCase()
+  let cleanHex = hex.trim().replace(/^#/, "").toUpperCase();
 
   // 如果是缩写形式（如 FFF），转换为完整形式
   if (cleanHex.length === 3) {
     cleanHex = cleanHex
-      .split('')
+      .split("")
       .map((char) => char.repeat(2))
-      .join('')
+      .join("");
   }
 
   // 解析 RGB 值
-  const [red, green, blue] = cleanHex.match(/\w\w/g)!.map((x) => parseInt(x, 16))
+  const [red, green, blue] = cleanHex.match(/\w\w/g)!.map((x) => parseInt(x, 16));
 
   // 确保 opacity 在有效范围内
-  const validOpacity = Math.max(0, Math.min(1, opacity))
+  const validOpacity = Math.max(0, Math.min(1, opacity));
 
   // 构建 RGBA 字符串
-  const rgba = `rgba(${red}, ${green}, ${blue}, ${validOpacity.toFixed(2)})`
+  const rgba = `rgba(${red}, ${green}, ${blue}, ${validOpacity.toFixed(2)})`;
 
-  return { red, green, blue, rgba }
+  return { red, green, blue, rgba };
 }
 
 /**
@@ -125,27 +125,27 @@ export function hexToRgba(hex: string, opacity: number): RgbaResult {
  */
 export function hexToRgb(hexColor: string): number[] {
   if (!isValidHexColor(hexColor)) {
-    ElMessage.warning('输入错误的hex颜色值')
-    throw new Error('Invalid hex color format')
+    ElMessage.warning("输入错误的hex颜色值");
+    throw new Error("Invalid hex color format");
   }
 
-  const cleanHex = hexColor.replace(/^#/, '')
-  let hex = cleanHex
+  const cleanHex = hexColor.replace(/^#/, "");
+  let hex = cleanHex;
 
   // 处理缩写形式
   if (hex.length === 3) {
     hex = hex
-      .split('')
+      .split("")
       .map((char) => char.repeat(2))
-      .join('')
+      .join("");
   }
 
-  const hexPairs = hex.match(/../g)
+  const hexPairs = hex.match(/../g);
   if (!hexPairs) {
-    throw new Error('Invalid hex color format')
+    throw new Error("Invalid hex color format");
   }
 
-  return hexPairs.map((hexPair) => parseInt(hexPair, 16))
+  return hexPairs.map((hexPair) => parseInt(hexPair, 16));
 }
 
 /**
@@ -157,16 +157,16 @@ export function hexToRgb(hexColor: string): number[] {
  */
 export function rgbToHex(r: number, g: number, b: number): string {
   if (!isValidRgbValue(r, g, b)) {
-    ElMessage.warning('输入错误的RGB颜色值')
-    throw new Error('Invalid RGB color values')
+    ElMessage.warning("输入错误的RGB颜色值");
+    throw new Error("Invalid RGB color values");
   }
 
   const toHex = (value: number) => {
-    const hex = value.toString(16)
-    return hex.length === 1 ? `0${hex}` : hex
-  }
+    const hex = value.toString(16);
+    return hex.length === 1 ? `0${hex}` : hex;
+  };
 
-  return `#${toHex(r)}${toHex(g)}${toHex(b)}`
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
 }
 
 /**
@@ -177,17 +177,17 @@ export function rgbToHex(r: number, g: number, b: number): string {
  * @returns 混合后的颜色
  */
 export function colourBlend(color1: string, color2: string, ratio: number): string {
-  const validRatio = Math.max(0, Math.min(1, Number(ratio)))
+  const validRatio = Math.max(0, Math.min(1, Number(ratio)));
 
-  const rgb1 = hexToRgb(color1)
-  const rgb2 = hexToRgb(color2)
+  const rgb1 = hexToRgb(color1);
+  const rgb2 = hexToRgb(color2);
 
   const blendedRgb = rgb1.map((value1, index) => {
-    const value2 = rgb2[index]
-    return Math.round(value1 * (1 - validRatio) + value2 * validRatio)
-  })
+    const value2 = rgb2[index];
+    return Math.round(value1 * (1 - validRatio) + value2 * validRatio);
+  });
 
-  return rgbToHex(blendedRgb[0], blendedRgb[1], blendedRgb[2])
+  return rgbToHex(blendedRgb[0], blendedRgb[1], blendedRgb[2]);
 }
 
 /**
@@ -199,18 +199,18 @@ export function colourBlend(color1: string, color2: string, ratio: number): stri
  */
 export function getLightColor(color: string, level: number, isDark: boolean = false): string {
   if (!isValidHexColor(color)) {
-    ElMessage.warning('输入错误的hex颜色值')
-    throw new Error('Invalid hex color format')
+    ElMessage.warning("输入错误的hex颜色值");
+    throw new Error("Invalid hex color format");
   }
 
   if (isDark) {
-    return getDarkColor(color, level)
+    return getDarkColor(color, level);
   }
 
-  const rgb = hexToRgb(color)
-  const lightRgb = rgb.map((value) => Math.floor((255 - value) * level + value))
+  const rgb = hexToRgb(color);
+  const lightRgb = rgb.map((value) => Math.floor((255 - value) * level + value));
 
-  return rgbToHex(lightRgb[0], lightRgb[1], lightRgb[2])
+  return rgbToHex(lightRgb[0], lightRgb[1], lightRgb[2]);
 }
 
 /**
@@ -221,14 +221,14 @@ export function getLightColor(color: string, level: number, isDark: boolean = fa
  */
 export function getDarkColor(color: string, level: number): string {
   if (!isValidHexColor(color)) {
-    ElMessage.warning('输入错误的hex颜色值')
-    throw new Error('Invalid hex color format')
+    ElMessage.warning("输入错误的hex颜色值");
+    throw new Error("Invalid hex color format");
   }
 
-  const rgb = hexToRgb(color)
-  const darkRgb = rgb.map((value) => Math.floor(value * (1 - level)))
+  const rgb = hexToRgb(color);
+  const darkRgb = rgb.map((value) => Math.floor(value * (1 - level)));
 
-  return rgbToHex(darkRgb[0], darkRgb[1], darkRgb[2])
+  return rgbToHex(darkRgb[0], darkRgb[1], darkRgb[2]);
 }
 
 /**
@@ -237,20 +237,20 @@ export function getDarkColor(color: string, level: number): string {
  * @param isDark 是否为暗色主题
  */
 export function handleElementThemeColor(theme: string, isDark: boolean = false): void {
-  document.documentElement.style.setProperty('--el-color-primary', theme)
+  document.documentElement.style.setProperty("--el-color-primary", theme);
 
   for (let i = 1; i <= 9; i++) {
     document.documentElement.style.setProperty(
       `--el-color-primary-light-${i}`,
       getLightColor(theme, i / 10, isDark)
-    )
+    );
   }
 
   for (let i = 1; i <= 9; i++) {
     document.documentElement.style.setProperty(
       `--el-color-primary-dark-${i}`,
       getDarkColor(theme, i / 10)
-    )
+    );
   }
 }
 
@@ -259,15 +259,15 @@ export function handleElementThemeColor(theme: string, isDark: boolean = false):
  * @param color 主题颜色
  */
 export function setElementThemeColor(color: string): void {
-  const mixColor = '#ffffff'
-  const elStyle = document.documentElement.style
+  const mixColor = "#ffffff";
+  const elStyle = document.documentElement.style;
 
-  elStyle.setProperty('--el-color-primary', color)
-  handleElementThemeColor(color, useSettingStore().isDark)
+  elStyle.setProperty("--el-color-primary", color);
+  handleElementThemeColor(color, useSettingsStore().isDark);
 
   // 生成更淡一点的颜色
   for (let i = 1; i < 16; i++) {
-    const itemColor = colourBlend(color, mixColor, i / 16)
-    elStyle.setProperty(`--el-color-primary-custom-${i}`, itemColor)
+    const itemColor = colourBlend(color, mixColor, i / 16);
+    elStyle.setProperty(`--el-color-primary-custom-${i}`, itemColor);
   }
 }
diff --git a/frontend/new-web/src/utils/ui/emojo.ts b/frontend/new-web/src/utils/ui/emojo.ts
index cabad7dd..5ac668c3 100644
--- a/frontend/new-web/src/utils/ui/emojo.ts
+++ b/frontend/new-web/src/utils/ui/emojo.ts
@@ -8,17 +8,17 @@
  * ElMessage.error(`${EmojiText[500]} 图片上传失败`)
  *
  * @module utils/ui/emojo
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
 // macos 用户 按 shift + 6 可以唤出更多表情……
 const EmojiText: { [key: string]: string } = {
-  '0': 'O_O', // 空
-  '200': '^_^', // 成功
-  '400': 'T_T', // 错误请求
-  '500': 'X_X' // 服务器内部错误，无法完成请求
-}
+  "0": "O_O", // 空
+  "200": "^_^", // 成功
+  "400": "T_T", // 错误请求
+  "500": "X_X", // 服务器内部错误，无法完成请求
+};
 
 // const EmojiIcon = ['🟢', '🔴', '🟡 ', '🚀', '✨', '💡', '🛠️', '🔥', '🎉', '🌟', '🌈']
 
-export default EmojiText
+export default EmojiText;
diff --git a/frontend/new-web/src/utils/ui/iconify-loader.ts b/frontend/new-web/src/utils/ui/iconify-loader.ts
index 035de16c..e25657e0 100644
--- a/frontend/new-web/src/utils/ui/iconify-loader.ts
+++ b/frontend/new-web/src/utils/ui/iconify-loader.ts
@@ -10,7 +10,7 @@
  * 3. 在组件中使用：<ArtSvgIcon icon="ri:home-line" />
  *
  * @module utils/ui/iconify-loader
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
 // import { addCollection } from '@iconify/vue'
diff --git a/frontend/new-web/src/utils/ui/index.ts b/frontend/new-web/src/utils/ui/index.ts
index 9ca1049e..071345ca 100644
--- a/frontend/new-web/src/utils/ui/index.ts
+++ b/frontend/new-web/src/utils/ui/index.ts
@@ -2,10 +2,12 @@
  * UI 相关工具函数统一导出
  *
  * @module utils/ui/index
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 
-export * from './colors'
-export * from './loading'
-export * from './tabs'
-export * from './emojo'
+export * from "./colors";
+export * from "./loading";
+export * from "./tabs";
+export * from "./emojo";
+export * from "./theme";
+export { default as NProgress } from "./nprogress";
diff --git a/frontend/new-web/src/utils/ui/loading.ts b/frontend/new-web/src/utils/ui/loading.ts
index 6580e023..ee0f9340 100644
--- a/frontend/new-web/src/utils/ui/loading.ts
+++ b/frontend/new-web/src/utils/ui/loading.ts
@@ -26,34 +26,34 @@
  * - 提供便捷的显示/隐藏方法
  *
  * @module utils/ui/loading
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
-import { fourDotsSpinnerSvg } from '@/assets/svg/loading'
+import { fourDotsSpinnerSvg } from "@/assets/svg/loading";
 
 /**
  * 获取当前主题对应的loading背景色
  * @returns 背景色字符串
  */
 const getLoadingBackground = (): string => {
-  const isDark = document.documentElement.classList.contains('dark')
-  return isDark ? 'rgba(7, 7, 7, 0.85)' : '#fff'
-}
+  const isDark = document.documentElement.classList.contains("dark");
+  return isDark ? "rgba(7, 7, 7, 0.85)" : "#fff";
+};
 
 const DEFAULT_LOADING_CONFIG = {
   lock: true,
   get background() {
-    return getLoadingBackground()
+    return getLoadingBackground();
   },
   svg: fourDotsSpinnerSvg,
-  svgViewBox: '0 0 40 40',
-  customClass: 'art-loading-fix'
-} as const
+  svgViewBox: "0 0 40 40",
+  customClass: "art-loading-fix",
+} as const;
 
 interface LoadingInstance {
-  close: () => void
+  close: () => void;
 }
 
-let loadingInstance: LoadingInstance | null = null
+let loadingInstance: LoadingInstance | null = null;
 
 export const loadingService = {
   /**
@@ -65,11 +65,11 @@ export const loadingService = {
       // 每次显示时获取最新的配置，确保背景色与当前主题同步
       const config = {
         ...DEFAULT_LOADING_CONFIG,
-        background: getLoadingBackground()
-      }
-      loadingInstance = ElLoading.service(config)
+        background: getLoadingBackground(),
+      };
+      loadingInstance = ElLoading.service(config);
     }
-    return () => this.hideLoading()
+    return () => this.hideLoading();
   },
 
   /**
@@ -77,8 +77,8 @@ export const loadingService = {
    */
   hideLoading(): void {
     if (loadingInstance) {
-      loadingInstance.close()
-      loadingInstance = null
+      loadingInstance.close();
+      loadingInstance = null;
     }
-  }
-}
+  },
+};
diff --git a/frontend/new-web/src/utils/ui/nprogress.ts b/frontend/new-web/src/utils/ui/nprogress.ts
new file mode 100644
index 00000000..be6be23c
--- /dev/null
+++ b/frontend/new-web/src/utils/ui/nprogress.ts
@@ -0,0 +1,54 @@
+/**
+ * NProgress 进度条配置模块
+ *
+ * 配置并导出 NProgress 进度条实例，用于页面加载时显示顶部进度条
+ *
+ * ## 配置说明
+ *
+ * | 配置项 | 类型 | 默认值 | 说明 |
+ * |--------|------|--------|------|
+ * | easing | string | 'ease' | 动画缓动方式 |
+ * | speed | number | 500 | 进度条递增速度（毫秒） |
+ * | showSpinner | boolean | false | 是否显示旋转加载图标 |
+ * | trickleSpeed | number | 200 | 自动递增间隔（毫秒） |
+ * | minimum | number | 0.3 | 初始化时的最小百分比（0-1） |
+ *
+ * @module utils/nprogress
+ */
+
+import NProgress from "nprogress";
+import "nprogress/nprogress.css";
+
+/**
+ * 配置 NProgress 进度条
+ *
+ * 自定义进度条的动画效果和行为
+ */
+NProgress.configure({
+  /** 动画缓动方式 */
+  easing: "ease",
+  /** 进度条递增速度（毫秒） */
+  speed: 500,
+  /** 是否显示旋转加载图标 */
+  showSpinner: false,
+  /** 自动递增间隔（毫秒） */
+  trickleSpeed: 200,
+  /** 初始化时的最小百分比 */
+  minimum: 0.3,
+});
+
+/**
+ * NProgress 实例导出
+ *
+ * @example
+ * ```typescript
+ * import NProgress from '@/utils/nprogress';
+ *
+ * // 路由跳转开始时显示进度条
+ * NProgress.start();
+ *
+ * // 路由跳转完成时隐藏进度条
+ * NProgress.done();
+ * ```
+ */
+export default NProgress;
diff --git a/frontend/new-web/src/utils/ui/tabs.ts b/frontend/new-web/src/utils/ui/tabs.ts
index 5f53ea5f..c960c18b 100644
--- a/frontend/new-web/src/utils/ui/tabs.ts
+++ b/frontend/new-web/src/utils/ui/tabs.ts
@@ -31,30 +31,30 @@
  * - tab-google: 谷歌浏览器风格标签页
  *
  * @module utils/ui/tabs
- * @author Art Design Pro Team
+ * @author FastapiAdmin Team
  */
 export const TAB_CONFIG = {
-  'tab-default': {
+  "tab-default": {
     openTop: 106,
     closeTop: 60,
     openHeight: 121,
-    closeHeight: 75
+    closeHeight: 75,
   },
-  'tab-card': {
+  "tab-card": {
     openTop: 122,
     closeTop: 78,
     openHeight: 139,
-    closeHeight: 95
+    closeHeight: 95,
   },
-  'tab-google': {
+  "tab-google": {
     openTop: 122,
     closeTop: 78,
     openHeight: 139,
-    closeHeight: 95
-  }
-}
+    closeHeight: 95,
+  },
+};
 
 // 获取当前 tab 样式配置，设置默认值
 export const getTabConfig = (style: string) => {
-  return TAB_CONFIG[style as keyof typeof TAB_CONFIG] || TAB_CONFIG['tab-card'] // 默认使用 tab-card 配置
-}
+  return TAB_CONFIG[style as keyof typeof TAB_CONFIG] || TAB_CONFIG["tab-card"]; // 默认使用 tab-card 配置
+};
diff --git a/frontend/new-web/src/utils/ui/theme.ts b/frontend/new-web/src/utils/ui/theme.ts
new file mode 100644
index 00000000..d05e1061
--- /dev/null
+++ b/frontend/new-web/src/utils/ui/theme.ts
@@ -0,0 +1,121 @@
+/**
+ * 主题工具函数模块
+ *
+ * 提供主题相关的工具函数，包括颜色处理和主题切换功能
+ *
+ * ## 主要功能
+ *
+ * - 主题色生成
+ * - CSS 变量应用
+ * - 暗黑模式切换
+ * - 侧边栏颜色方案切换
+ *
+ * @module utils/theme
+ */
+
+import { ThemeMode } from "@/enums";
+import { getDarkColor, getLightColor } from "./colors";
+
+/**
+ * 生成主题色变体
+ *
+ * 根据主题色和主题模式生成一系列颜色变体，用于 CSS 变量
+ *
+ * @param {string} primary - 主题色，十六进制格式
+ * @param {ThemeMode} theme - 主题模式，LIGHT 或 DARK
+ * @returns {Record<string, string>} 颜色映射对象
+ *
+ * @example
+ * ```typescript
+ * const colors = generateThemeColors('#1890ff', ThemeMode.LIGHT);
+ * // colors.primary -> '#1890ff'
+ * // colors['primary-light-1'] -> 变浅10%的颜色
+ * ```
+ */
+export function generateThemeColors(primary: string, theme: ThemeMode): Record<string, string> {
+  const colors: Record<string, string> = {
+    primary,
+  };
+
+  // 生成浅色变体 (primary-light-1 到 primary-light-9)
+  for (let i = 1; i <= 9; i++) {
+    colors[`primary-light-${i}`] =
+      theme === ThemeMode.LIGHT
+        ? `${getLightColor(primary, i / 10)}`
+        : `${getDarkColor(primary, i / 10)}`;
+  }
+
+  // 生成深色变体
+  colors["primary-dark-2"] =
+    theme === ThemeMode.LIGHT ? `${getLightColor(primary, 0.2)}` : `${getDarkColor(primary, 0.3)}`;
+
+  return colors;
+}
+
+/**
+ * 将颜色应用到 DOM
+ *
+ * 将颜色对象中的所有颜色设置为 CSS 变量
+ *
+ * @param {Record<string, string>} colors - 颜色映射对象
+ *
+ * @example
+ * ```typescript
+ * applyTheme({ primary: '#1890ff', 'primary-light-1': '#40a9ff' });
+ * // 会设置 --el-color-primary 和 --el-color-primary-light-1 等 CSS 变量
+ * ```
+ */
+export function applyTheme(colors: Record<string, string>): void {
+  const el = document.documentElement;
+
+  Object.entries(colors).forEach(([key, value]) => {
+    el.style.setProperty(`--el-color-${key}`, value);
+  });
+
+  // 确保主题色立即生效，强制重新渲染
+  requestAnimationFrame(() => {
+    el.style.setProperty("--theme-update-trigger", Date.now().toString());
+  });
+}
+
+/**
+ * 切换暗黑模式
+ *
+ * 通过添加或移除 CSS 类来切换暗黑模式
+ *
+ * @param {boolean} isDark - 是否启用暗黑模式
+ *
+ * @example
+ * ```typescript
+ * toggleDarkMode(true);  // 启用暗黑模式
+ * toggleDarkMode(false); // 禁用暗黑模式
+ * ```
+ */
+export function toggleDarkMode(isDark: boolean): void {
+  if (isDark) {
+    document.documentElement.classList.add(ThemeMode.DARK);
+  } else {
+    document.documentElement.classList.remove(ThemeMode.DARK);
+  }
+}
+
+/**
+ * 切换侧边栏颜色方案
+ *
+ * 通过添加或移除 CSS 类来切换侧边栏的深蓝色颜色方案
+ *
+ * @param {boolean} isBlueSidebar - 是否启用深蓝色侧边栏
+ *
+ * @example
+ * ```typescript
+ * toggleSidebarColor(true);  // 启用深蓝色侧边栏
+ * toggleSidebarColor(false); // 禁用深蓝色侧边栏
+ * ```
+ */
+export function toggleSidebarColor(isBlueSidebar: boolean): void {
+  if (isBlueSidebar) {
+    document.documentElement.classList.add("sidebar-color-blue");
+  } else {
+    document.documentElement.classList.remove("sidebar-color-blue");
+  }
+}
diff --git a/frontend/new-web/src/views/article/comment/index.vue b/frontend/new-web/src/views/article/comment/index.vue
index ca6e7a12..8b46ab10 100644
--- a/frontend/new-web/src/views/article/comment/index.vue
+++ b/frontend/new-web/src/views/article/comment/index.vue
@@ -73,60 +73,60 @@
 </template>
 
 <script setup lang="ts">
-  import { commentList } from '@/mock/temp/commentList'
+import { commentList } from "@/mock/temp/commentList";
 
-  defineOptions({ name: 'ArticleComment' })
+defineOptions({ name: "ArticleComment" });
 
-  interface CommentItem {
-    id: number
-    date: string
-    content: string
-    collection: number
-    comment: number
-    userName: string
-    color?: string
-  }
+interface CommentItem {
+  id: number;
+  date: string;
+  content: string;
+  collection: number;
+  comment: number;
+  userName: string;
+  color?: string;
+}
 
-  const COLOR_LIST = ['#D8F8FF', '#FDDFD9', '#FCE6F0', '#D3F8F0', '#FFEABC', '#F5E1FF', '#E1E6FE']
+const COLOR_LIST = ["#D8F8FF", "#FDDFD9", "#FCE6F0", "#D3F8F0", "#FFEABC", "#F5E1FF", "#E1E6FE"];
 
-  const showDrawer = ref(false)
-  const clickItem = ref<CommentItem>({
-    id: 1,
-    date: '2024-9-3',
-    content: '加油！学好Node 自己写个小Demo',
-    collection: 5,
-    comment: 8,
-    userName: '匿名',
-    color: COLOR_LIST[0]
-  })
+const showDrawer = ref(false);
+const clickItem = ref<CommentItem>({
+  id: 1,
+  date: "2024-9-3",
+  content: "加油！学好Node 自己写个小Demo",
+  collection: 5,
+  comment: 8,
+  userName: "匿名",
+  color: COLOR_LIST[0],
+});
 
-  /**
-   * 为评论列表分配随机颜色
-   */
-  const commentsWithColors = computed(() => {
-    let lastColorIndex = -1
+/**
+ * 为评论列表分配随机颜色
+ */
+const commentsWithColors = computed(() => {
+  let lastColorIndex = -1;
 
-    return commentList.map((item) => {
-      let newIndex: number
+  return commentList.map((item) => {
+    let newIndex: number;
 
-      do {
-        newIndex = Math.floor(Math.random() * COLOR_LIST.length)
-      } while (newIndex === lastColorIndex && COLOR_LIST.length > 1)
+    do {
+      newIndex = Math.floor(Math.random() * COLOR_LIST.length);
+    } while (newIndex === lastColorIndex && COLOR_LIST.length > 1);
 
-      lastColorIndex = newIndex
+    lastColorIndex = newIndex;
 
-      return {
-        ...item,
-        color: COLOR_LIST[newIndex]
-      }
-    })
-  })
+    return {
+      ...item,
+      color: COLOR_LIST[newIndex],
+    };
+  });
+});
 
-  /**
-   * 打开评论详情抽屉
-   */
-  const openDrawer = (item: CommentItem) => {
-    showDrawer.value = true
-    clickItem.value = item
-  }
+/**
+ * 打开评论详情抽屉
+ */
+const openDrawer = (item: CommentItem) => {
+  showDrawer.value = true;
+  clickItem.value = item;
+};
 </script>
diff --git a/frontend/new-web/src/views/article/detail/index.vue b/frontend/new-web/src/views/article/detail/index.vue
index 226712b9..be8ef90b 100644
--- a/frontend/new-web/src/views/article/detail/index.vue
+++ b/frontend/new-web/src/views/article/detail/index.vue
@@ -10,127 +10,127 @@
 </template>
 
 <script setup lang="ts">
-  import '@/assets/styles/core/md.scss'
-  import '@/assets/styles/custom/one-dark-pro.scss'
-  import { useCommon } from '@/hooks/core/useCommon'
-  import axios from 'axios'
+import "@/assets/styles/core/md.scss";
+import "@/assets/styles/custom/one-dark-pro.scss";
+import { useCommon } from "@/hooks/core/useCommon";
+import axios from "axios";
 
-  defineOptions({ name: 'ArticleDetail' })
+defineOptions({ name: "ArticleDetail" });
 
-  interface ArticleResponse {
-    code: number
-    data: {
-      title: string
-      html_content: string
+interface ArticleResponse {
+  code: number;
+  data: {
+    title: string;
+    html_content: string;
+  };
+}
+
+const route = useRoute();
+const articleId = computed(() => Number(route.params.id));
+const articleTitle = ref("");
+const articleHtml = shallowRef("");
+const loading = ref(false);
+const error = ref<string | null>(null);
+
+const getArticleDetail = async () => {
+  if (!articleId.value) return;
+
+  loading.value = true;
+  error.value = null;
+
+  try {
+    const { data } = await axios.get<ArticleResponse>(
+      "https://www.qiniu.lingchen.kim/blog_detail.json"
+    );
+
+    if (data.code === 200) {
+      articleTitle.value = data.data.title;
+      articleHtml.value = data.data.html_content;
     }
+  } catch (err) {
+    error.value = "文章加载失败";
+    console.error("获取文章详情失败:", err);
+  } finally {
+    loading.value = false;
   }
+};
 
-  const route = useRoute()
-  const articleId = computed(() => Number(route.params.id))
-  const articleTitle = ref('')
-  const articleHtml = shallowRef('')
-  const loading = ref(false)
-  const error = ref<string | null>(null)
+const { scrollToTop } = useCommon();
 
-  const getArticleDetail = async () => {
-    if (!articleId.value) return
-
-    loading.value = true
-    error.value = null
-
-    try {
-      const { data } = await axios.get<ArticleResponse>(
-        'https://www.qiniu.lingchen.kim/blog_detail.json'
-      )
-
-      if (data.code === 200) {
-        articleTitle.value = data.data.title
-        articleHtml.value = data.data.html_content
-      }
-    } catch (err) {
-      error.value = '文章加载失败'
-      console.error('获取文章详情失败:', err)
-    } finally {
-      loading.value = false
-    }
-  }
-
-  const { scrollToTop } = useCommon()
-
-  onMounted(() => {
-    scrollToTop()
-    getArticleDetail()
-  })
+onMounted(() => {
+  scrollToTop();
+  getArticleDetail();
+});
 </script>
 
 <style lang="scss" scoped>
-  .article-detail {
-    :deep(.markdown-body) {
-      margin-top: 60px;
+.article-detail {
+  :deep(.markdown-body) {
+    margin-top: 60px;
 
-      img {
-        width: 100%;
-        border: 1px solid var(--art-gray-200);
-      }
+    img {
+      width: 100%;
+      border: 1px solid var(--art-gray-200);
+    }
 
-      pre {
-        position: relative;
+    pre {
+      position: relative;
 
-        &:hover {
-          .copy-button {
-            opacity: 1;
-          }
-        }
-
-        &::before {
-          position: absolute;
-          top: 0;
-          left: 50px;
-          width: 1px;
-          height: 100%;
-          content: '';
-          background: #0a0a0e;
+      &:hover {
+        .copy-button {
+          opacity: 1;
         }
       }
 
-      .code-wrapper {
-        overflow-x: auto;
-      }
-
-      .line-number {
-        position: sticky;
-        left: 0;
-        z-index: 2;
-        box-sizing: border-box;
-        display: inline-block;
-        width: 50px;
-        margin-right: 10px;
-        font-size: 14px;
-        color: #9e9e9e;
-        text-align: center;
-      }
-
-      .copy-button {
+      &::before {
         position: absolute;
-        top: 6px;
-        right: 6px;
-        z-index: 1;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 40px;
-        height: 40px;
-        font-size: 20px;
-        line-height: 40px;
-        color: #999;
-        text-align: center;
-        cursor: pointer;
-        background-color: #000;
-        border: none;
-        border-radius: 8px;
-        opacity: 0;
-        transition: all 0.2s;
+        top: 0;
+        left: 50px;
+        width: 1px;
+        height: 100%;
+        content: "";
+        background: #0a0a0e;
       }
     }
+
+    .code-wrapper {
+      overflow-x: auto;
+    }
+
+    .line-number {
+      position: sticky;
+      left: 0;
+      z-index: 2;
+      box-sizing: border-box;
+      display: inline-block;
+      width: 50px;
+      margin-right: 10px;
+      font-size: 14px;
+      color: #9e9e9e;
+      text-align: center;
+    }
+
+    .copy-button {
+      position: absolute;
+      top: 6px;
+      right: 6px;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 40px;
+      height: 40px;
+      font-size: 20px;
+      line-height: 40px;
+      color: #999;
+      text-align: center;
+      cursor: pointer;
+      background-color: #000;
+      border: none;
+      border-radius: 8px;
+      opacity: 0;
+      transition: all 0.2s;
+    }
   }
+}
 </style>
diff --git a/frontend/new-web/src/views/article/list/index.vue b/frontend/new-web/src/views/article/list/index.vue
index ffd65dba..faf43537 100644
--- a/frontend/new-web/src/views/article/list/index.vue
+++ b/frontend/new-web/src/views/article/list/index.vue
@@ -37,20 +37,18 @@
               :src="item.home_img"
               lazy
               fit="cover"
-            >
-            </ElImage>
+            ></ElImage>
 
-            <span
-              class="absolute top-1 right-1 bg-black/50 rounded text-xs px-1 py-0.5 text-white"
-              >{{ item.type_name }}</span
-            >
+            <span class="absolute top-1 right-1 bg-black/50 rounded text-xs px-1 py-0.5 text-white">
+              {{ item.type_name }}
+            </span>
           </div>
           <div class="px-2 py-1">
             <h2 class="text-base text-g-800 font-medium">{{ item.title }}</h2>
             <div class="flex-b w-full h-6 mt-1">
               <div class="flex-c text-g-500">
                 <ArtSvgIcon icon="ri:time-line" class="mr-1 text-sm" />
-                <span class="text-sm">{{ useDateFormat(item.create_time, 'YYYY-MM-DD') }}</span>
+                <span class="text-sm">{{ useDateFormat(item.create_time, "YYYY-MM-DD") }}</span>
                 <div class="w-px h-3 bg-g-400 mx-3.5"></div>
                 <ArtSvgIcon icon="ri:eye-line" class="mr-1 text-sm" />
                 <span class="text-sm">{{ item.count }}</span>
@@ -60,8 +58,9 @@
                 v-auth="'edit'"
                 size="small"
                 @click.stop="toEdit(item)"
-                >编辑</ElButton
               >
+                编辑
+              </ElButton>
             </div>
           </div>
         </div>
@@ -89,107 +88,107 @@
 </template>
 
 <script setup lang="ts">
-  import { Search } from '@element-plus/icons-vue'
-  import { router } from '@/router'
-  import { useDateFormat } from '@vueuse/core'
-  import EmojiText from '@/utils/ui/emojo'
-  import { ArticleList } from '@/mock/temp/articleList'
-  import { useCommon } from '@/hooks/core/useCommon'
+import { Search } from "@element-plus/icons-vue";
+import { router } from "@/router";
+import { useDateFormat } from "@vueuse/core";
+import EmojiText from "@/utils/ui/emojo";
+import { ArticleList } from "@/mock/temp/articleList";
+import { useCommon } from "@/hooks/core/useCommon";
 
-  defineOptions({ name: 'ArticleList' })
+defineOptions({ name: "ArticleList" });
 
-  interface Article {
-    id: number
-    home_img: string
-    type_name: string
-    title: string
-    create_time: string
-    count: number
-  }
+interface Article {
+  id: number;
+  home_img: string;
+  type_name: string;
+  title: string;
+  create_time: string;
+  count: number;
+}
 
-  interface GetArticleListOptions {
-    backTop?: boolean
-  }
+interface GetArticleListOptions {
+  backTop?: boolean;
+}
 
-  const YEAR_OPTIONS = ['All', '2024', '2023', '2022', '2021', '2020', '2019']
-  const PAGE_SIZE = 40
+const YEAR_OPTIONS = ["All", "2024", "2023", "2022", "2021", "2020", "2019"];
+const PAGE_SIZE = 40;
 
-  const yearVal = ref('All')
-  const searchVal = ref('')
-  const articleList = ref<Article[]>([])
-  const currentPage = ref(1)
-  const pageSize = ref(PAGE_SIZE)
-  const total = ref(0)
-  const isLoading = ref(true)
+const yearVal = ref("All");
+const searchVal = ref("");
+const articleList = ref<Article[]>([]);
+const currentPage = ref(1);
+const pageSize = ref(PAGE_SIZE);
+const total = ref(0);
+const isLoading = ref(true);
 
-  const showEmpty = computed(() => articleList.value.length === 0 && !isLoading.value)
+const showEmpty = computed(() => articleList.value.length === 0 && !isLoading.value);
 
-  const getArticleList = async ({ backTop = false }: GetArticleListOptions = {}) => {
-    isLoading.value = true
+const getArticleList = async ({ backTop = false }: GetArticleListOptions = {}) => {
+  isLoading.value = true;
 
-    try {
-      if (searchVal.value) {
-        yearVal.value = 'All'
-      }
-
-      // TODO: 替换为真实 API 调用
-      // const params = {
-      //   page: currentPage.value,
-      //   size: pageSize.value,
-      //   searchVal: searchVal.value,
-      //   year: yearVal.value === 'All' ? '' : yearVal.value
-      // }
-      // const res = await ArticleService.getArticleList(params)
-
-      articleList.value = ArticleList as Article[]
-
-      if (backTop) {
-        useCommon().scrollToTop()
-      }
-    } catch (error) {
-      console.error('获取文章列表失败:', error)
-    } finally {
-      isLoading.value = false
+  try {
+    if (searchVal.value) {
+      yearVal.value = "All";
     }
-  }
 
-  const searchArticle = () => {
-    currentPage.value = 1
-    getArticleList({ backTop: true })
-  }
+    // TODO: 替换为真实 API 调用
+    // const params = {
+    //   page: currentPage.value,
+    //   size: pageSize.value,
+    //   searchVal: searchVal.value,
+    //   year: yearVal.value === 'All' ? '' : yearVal.value
+    // }
+    // const res = await ArticleService.getArticleList(params)
 
-  const searchArticleByYear = () => {
-    currentPage.value = 1
-    getArticleList({ backTop: true })
-  }
+    articleList.value = ArticleList as Article[];
 
-  const handleCurrentChange = (val: number) => {
-    currentPage.value = val
-    getArticleList({ backTop: true })
+    if (backTop) {
+      useCommon().scrollToTop();
+    }
+  } catch (error) {
+    console.error("获取文章列表失败:", error);
+  } finally {
+    isLoading.value = false;
   }
+};
 
-  const toDetail = (item: Article) => {
-    router.push({ name: 'ArticleDetail', params: { id: item.id } })
-  }
+const searchArticle = () => {
+  currentPage.value = 1;
+  getArticleList({ backTop: true });
+};
 
-  const toEdit = (item: Article) => {
-    router.push({ name: 'ArticlePublish', query: { id: item.id } })
-  }
+const searchArticleByYear = () => {
+  currentPage.value = 1;
+  getArticleList({ backTop: true });
+};
 
-  const toAddArticle = () => {
-    router.push({ name: 'ArticlePublish' })
-  }
+const handleCurrentChange = (val: number) => {
+  currentPage.value = val;
+  getArticleList({ backTop: true });
+};
 
-  onMounted(() => {
-    getArticleList()
-  })
+const toDetail = (item: Article) => {
+  router.push({ name: "ArticleDetail", params: { id: item.id } });
+};
+
+const toEdit = (item: Article) => {
+  router.push({ name: "ArticlePublish", query: { id: item.id } });
+};
+
+const toAddArticle = () => {
+  router.push({ name: "ArticlePublish" });
+};
+
+onMounted(() => {
+  getArticleList();
+});
 </script>
 
 <style lang="scss">
-  .custom-segmented .el-segmented {
-    height: 40px;
-    padding: 6px;
+.custom-segmented .el-segmented {
+  height: 40px;
+  padding: 6px;
 
-    --el-border-radius-base: 8px;
-  }
+  --el-border-radius-base: 8px;
+}
 </style>
diff --git a/frontend/new-web/src/views/article/publish/index.vue b/frontend/new-web/src/views/article/publish/index.vue
index 50968a8a..bf505572 100755
--- a/frontend/new-web/src/views/article/publish/index.vue
+++ b/frontend/new-web/src/views/article/publish/index.vue
@@ -60,7 +60,7 @@
 
           <div class="flex justify-end">
             <ElButton type="primary" @click="submit" class="w-25">
-              {{ pageMode === PageModeEnum.Edit ? '保存' : '发布' }}
+              {{ pageMode === PageModeEnum.Edit ? "保存" : "发布" }}
             </ElButton>
           </div>
         </div>
@@ -76,264 +76,264 @@
 </template>
 
 <script setup lang="ts">
-  import { Plus } from '@element-plus/icons-vue'
-  import { ApiStatus } from '@/utils/http/status'
-  import { useUserStore } from '@/store/modules/user'
-  import EmojiText from '@/utils/ui/emojo'
-  import { PageModeEnum } from '@/enums/formEnum'
-  import axios from 'axios'
-  import { useCommon } from '@/hooks/core/useCommon'
+import { Plus } from "@element-plus/icons-vue";
+import { ApiStatus } from "@/utils/http/status";
+import { useUserStore } from "@/store/modules/user.store";
+import EmojiText from "@/utils/ui/emojo";
+import { PageModeEnum } from "@/enums/formEnum";
+import axios from "axios";
+import { useCommon } from "@/hooks/core/useCommon";
 
-  defineOptions({ name: 'ArticlePublish' })
+defineOptions({ name: "ArticlePublish" });
 
-  interface ArticleType {
-    id: number
-    name: string
+interface ArticleType {
+  id: number;
+  name: string;
+}
+
+interface UploadResponse {
+  data: {
+    url: string;
+  };
+}
+
+interface ArticleDetailResponse {
+  code: number;
+  data: {
+    title: string;
+    blog_class: string;
+    html_content: string;
+  };
+}
+
+const MAX_IMAGE_SIZE = 2; // MB
+const EMPTY_EDITOR_CONTENT = "<p><br></p>";
+
+const route = useRoute();
+const userStore = useUserStore();
+const { accessToken } = userStore;
+
+const uploadImageUrl = `${import.meta.env.VITE_API_URL}/api/common/upload`;
+const uploadHeaders = { Authorization: accessToken };
+
+const pageMode = ref<PageModeEnum>(PageModeEnum.Add);
+const articleName = ref("");
+const articleType = ref<number>();
+const articleTypes = ref<ArticleType[]>([]);
+const editorHtml = ref("");
+const createDate = ref("");
+const cover = ref("");
+const visible = ref(true);
+
+/**
+ * 初始化页面模式（新增或编辑）
+ */
+const initPageMode = () => {
+  const { id } = route.query;
+  pageMode.value = id ? PageModeEnum.Edit : PageModeEnum.Add;
+
+  if (pageMode.value === PageModeEnum.Edit) {
+    getArticleDetail();
+  } else {
+    createDate.value = formatDate(useNow().value);
+  }
+};
+
+/**
+ * 获取文章分类列表
+ */
+const getArticleTypes = async () => {
+  try {
+    const { data } = await axios.get("https://www.qiniu.lingchen.kim/classify.json");
+    if (data.code === 200) {
+      articleTypes.value = data.data;
+    }
+  } catch (error) {
+    console.error("获取文章分类失败:", error);
+    ElMessage.error("获取文章分类失败");
   }
 
-  interface UploadResponse {
-    data: {
-      url: string
+  // TODO: 替换为真实 API 调用
+  // const res = await ArticleService.getArticleTypes({})
+  // if (res.code === ApiStatus.success) {
+  //   articleTypes.value = res.data
+  // }
+};
+
+/**
+ * 获取文章详情（编辑模式）
+ */
+const getArticleDetail = async () => {
+  try {
+    const { data } = await axios.get<ArticleDetailResponse>(
+      "https://www.qiniu.lingchen.kim/blog_list.json"
+    );
+
+    if (data.code === ApiStatus.success) {
+      const { title, blog_class, html_content } = data.data;
+      articleName.value = title;
+      articleType.value = Number(blog_class);
+      editorHtml.value = html_content;
     }
+  } catch (error) {
+    console.error("获取文章详情失败:", error);
+    ElMessage.error("获取文章详情失败");
+  }
+};
+
+/**
+ * 格式化日期为 YYYY-MM-DD 格式
+ */
+const formatDate = (date: string | Date): string => {
+  return useDateFormat(date, "YYYY-MM-DD").value;
+};
+
+/**
+ * 验证文章表单数据
+ */
+const validateArticle = (): boolean => {
+  if (!articleName.value.trim()) {
+    ElMessage.error("请输入文章标题");
+    return false;
   }
 
-  interface ArticleDetailResponse {
-    code: number
-    data: {
-      title: string
-      blog_class: string
-      html_content: string
-    }
+  if (!articleType.value) {
+    ElMessage.error("请选择文章类型");
+    return false;
   }
 
-  const MAX_IMAGE_SIZE = 2 // MB
-  const EMPTY_EDITOR_CONTENT = '<p><br></p>'
-
-  const route = useRoute()
-  const userStore = useUserStore()
-  const { accessToken } = userStore
-
-  const uploadImageUrl = `${import.meta.env.VITE_API_URL}/api/common/upload`
-  const uploadHeaders = { Authorization: accessToken }
-
-  const pageMode = ref<PageModeEnum>(PageModeEnum.Add)
-  const articleName = ref('')
-  const articleType = ref<number>()
-  const articleTypes = ref<ArticleType[]>([])
-  const editorHtml = ref('')
-  const createDate = ref('')
-  const cover = ref('')
-  const visible = ref(true)
-
-  /**
-   * 初始化页面模式（新增或编辑）
-   */
-  const initPageMode = () => {
-    const { id } = route.query
-    pageMode.value = id ? PageModeEnum.Edit : PageModeEnum.Add
-
-    if (pageMode.value === PageModeEnum.Edit) {
-      getArticleDetail()
-    } else {
-      createDate.value = formatDate(useNow().value)
-    }
+  if (!editorHtml.value || editorHtml.value === EMPTY_EDITOR_CONTENT) {
+    ElMessage.error("请输入文章内容");
+    return false;
   }
 
-  /**
-   * 获取文章分类列表
-   */
-  const getArticleTypes = async () => {
-    try {
-      const { data } = await axios.get('https://www.qiniu.lingchen.kim/classify.json')
-      if (data.code === 200) {
-        articleTypes.value = data.data
-      }
-    } catch (error) {
-      console.error('获取文章分类失败:', error)
-      ElMessage.error('获取文章分类失败')
-    }
+  if (!cover.value) {
+    ElMessage.error("请上传封面图片");
+    return false;
+  }
+
+  return true;
+};
+
+/**
+ * 清理代码块中的多余空格
+ */
+const cleanCodeContent = (content: string): string => {
+  return content.replace(/(\s*)<\/code>/g, "</code>");
+};
+
+/**
+ * 新增文章
+ */
+const addArticle = async () => {
+  if (!validateArticle()) return;
+
+  try {
+    const cleanedContent = cleanCodeContent(editorHtml.value);
 
     // TODO: 替换为真实 API 调用
-    // const res = await ArticleService.getArticleTypes({})
-    // if (res.code === ApiStatus.success) {
-    //   articleTypes.value = res.data
+    // const params = {
+    //   title: articleName.value,
+    //   type: articleType.value,
+    //   content: cleanedContent,
+    //   cover: cover.value,
+    //   visible: visible.value
     // }
+    // const res = await ArticleService.addArticle(params)
+    // if (res.code === ApiStatus.success) {
+    //   ElMessage.success('文章发布成功')
+    //   router.push({ name: 'ArticleList' })
+    // }
+
+    console.log("新增文章:", { cleanedContent });
+  } catch (error) {
+    console.error("发布文章失败:", error);
+    ElMessage.error("发布文章失败");
+  }
+};
+
+/**
+ * 编辑文章
+ */
+const editArticle = async () => {
+  if (!validateArticle()) return;
+
+  try {
+    const cleanedContent = cleanCodeContent(editorHtml.value);
+
+    // TODO: 替换为真实 API 调用
+    // const params = {
+    //   id: route.query.id,
+    //   title: articleName.value,
+    //   type: articleType.value,
+    //   content: cleanedContent,
+    //   cover: cover.value,
+    //   visible: visible.value
+    // }
+    // const res = await ArticleService.editArticle(params)
+    // if (res.code === ApiStatus.success) {
+    //   ElMessage.success('文章保存成功')
+    //   router.push({ name: 'ArticleList' })
+    // }
+
+    console.log("编辑文章:", { cleanedContent });
+  } catch (error) {
+    console.error("保存文章失败:", error);
+    ElMessage.error("保存文章失败");
+  }
+};
+
+/**
+ * 提交表单（新增或编辑）
+ */
+const submit = () => {
+  if (pageMode.value === PageModeEnum.Edit) {
+    editArticle();
+  } else {
+    addArticle();
+  }
+};
+
+/**
+ * 图片上传成功回调
+ */
+const onSuccess = (response: UploadResponse) => {
+  cover.value = response.data.url;
+  ElMessage.success(`图片上传成功 ${EmojiText[200]}`);
+};
+
+/**
+ * 图片上传失败回调
+ */
+const onError = () => {
+  ElMessage.error(`图片上传失败 ${EmojiText[500]}`);
+};
+
+/**
+ * 上传前的文件校验
+ */
+const beforeUpload = (file: File): boolean => {
+  const isImage = file.type.startsWith("image/");
+  const isLt2M = file.size / 1024 / 1024 < MAX_IMAGE_SIZE;
+
+  if (!isImage) {
+    ElMessage.error("只能上传图片文件");
+    return false;
   }
 
-  /**
-   * 获取文章详情（编辑模式）
-   */
-  const getArticleDetail = async () => {
-    try {
-      const { data } = await axios.get<ArticleDetailResponse>(
-        'https://www.qiniu.lingchen.kim/blog_list.json'
-      )
-
-      if (data.code === ApiStatus.success) {
-        const { title, blog_class, html_content } = data.data
-        articleName.value = title
-        articleType.value = Number(blog_class)
-        editorHtml.value = html_content
-      }
-    } catch (error) {
-      console.error('获取文章详情失败:', error)
-      ElMessage.error('获取文章详情失败')
-    }
+  if (!isLt2M) {
+    ElMessage.error(`图片大小不能超过 ${MAX_IMAGE_SIZE}MB`);
+    return false;
   }
 
-  /**
-   * 格式化日期为 YYYY-MM-DD 格式
-   */
-  const formatDate = (date: string | Date): string => {
-    return useDateFormat(date, 'YYYY-MM-DD').value
-  }
+  return true;
+};
 
-  /**
-   * 验证文章表单数据
-   */
-  const validateArticle = (): boolean => {
-    if (!articleName.value.trim()) {
-      ElMessage.error('请输入文章标题')
-      return false
-    }
+const { scrollToTop } = useCommon();
 
-    if (!articleType.value) {
-      ElMessage.error('请选择文章类型')
-      return false
-    }
-
-    if (!editorHtml.value || editorHtml.value === EMPTY_EDITOR_CONTENT) {
-      ElMessage.error('请输入文章内容')
-      return false
-    }
-
-    if (!cover.value) {
-      ElMessage.error('请上传封面图片')
-      return false
-    }
-
-    return true
-  }
-
-  /**
-   * 清理代码块中的多余空格
-   */
-  const cleanCodeContent = (content: string): string => {
-    return content.replace(/(\s*)<\/code>/g, '</code>')
-  }
-
-  /**
-   * 新增文章
-   */
-  const addArticle = async () => {
-    if (!validateArticle()) return
-
-    try {
-      const cleanedContent = cleanCodeContent(editorHtml.value)
-
-      // TODO: 替换为真实 API 调用
-      // const params = {
-      //   title: articleName.value,
-      //   type: articleType.value,
-      //   content: cleanedContent,
-      //   cover: cover.value,
-      //   visible: visible.value
-      // }
-      // const res = await ArticleService.addArticle(params)
-      // if (res.code === ApiStatus.success) {
-      //   ElMessage.success('文章发布成功')
-      //   router.push({ name: 'ArticleList' })
-      // }
-
-      console.log('新增文章:', { cleanedContent })
-    } catch (error) {
-      console.error('发布文章失败:', error)
-      ElMessage.error('发布文章失败')
-    }
-  }
-
-  /**
-   * 编辑文章
-   */
-  const editArticle = async () => {
-    if (!validateArticle()) return
-
-    try {
-      const cleanedContent = cleanCodeContent(editorHtml.value)
-
-      // TODO: 替换为真实 API 调用
-      // const params = {
-      //   id: route.query.id,
-      //   title: articleName.value,
-      //   type: articleType.value,
-      //   content: cleanedContent,
-      //   cover: cover.value,
-      //   visible: visible.value
-      // }
-      // const res = await ArticleService.editArticle(params)
-      // if (res.code === ApiStatus.success) {
-      //   ElMessage.success('文章保存成功')
-      //   router.push({ name: 'ArticleList' })
-      // }
-
-      console.log('编辑文章:', { cleanedContent })
-    } catch (error) {
-      console.error('保存文章失败:', error)
-      ElMessage.error('保存文章失败')
-    }
-  }
-
-  /**
-   * 提交表单（新增或编辑）
-   */
-  const submit = () => {
-    if (pageMode.value === PageModeEnum.Edit) {
-      editArticle()
-    } else {
-      addArticle()
-    }
-  }
-
-  /**
-   * 图片上传成功回调
-   */
-  const onSuccess = (response: UploadResponse) => {
-    cover.value = response.data.url
-    ElMessage.success(`图片上传成功 ${EmojiText[200]}`)
-  }
-
-  /**
-   * 图片上传失败回调
-   */
-  const onError = () => {
-    ElMessage.error(`图片上传失败 ${EmojiText[500]}`)
-  }
-
-  /**
-   * 上传前的文件校验
-   */
-  const beforeUpload = (file: File): boolean => {
-    const isImage = file.type.startsWith('image/')
-    const isLt2M = file.size / 1024 / 1024 < MAX_IMAGE_SIZE
-
-    if (!isImage) {
-      ElMessage.error('只能上传图片文件')
-      return false
-    }
-
-    if (!isLt2M) {
-      ElMessage.error(`图片大小不能超过 ${MAX_IMAGE_SIZE}MB`)
-      return false
-    }
-
-    return true
-  }
-
-  const { scrollToTop } = useCommon()
-
-  onMounted(() => {
-    scrollToTop()
-    getArticleTypes()
-    initPageMode()
-  })
+onMounted(() => {
+  scrollToTop();
+  getArticleTypes();
+  initPageMode();
+});
 </script>
diff --git a/frontend/new-web/src/views/auth/forget-password/index.vue b/frontend/new-web/src/views/auth/forget-password/index.vue
deleted file mode 100644
index 147259eb..00000000
--- a/frontend/new-web/src/views/auth/forget-password/index.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<template>
-  <div class="flex w-full h-screen">
-    <LoginLeftView />
-
-    <div class="relative flex-1">
-      <AuthTopBar />
-
-      <div class="auth-right-wrap">
-        <div class="form">
-          <h3 class="title">{{ $t('forgetPassword.title') }}</h3>
-          <p class="sub-title">{{ $t('forgetPassword.subTitle') }}</p>
-          <div class="mt-5">
-            <span class="input-label" v-if="showInputLabel">账号</span>
-            <ElInput
-              class="custom-height"
-              :placeholder="$t('forgetPassword.placeholder')"
-              v-model.trim="username"
-            />
-          </div>
-
-          <div style="margin-top: 15px">
-            <ElButton
-              class="w-full custom-height"
-              type="primary"
-              @click="register"
-              :loading="loading"
-              v-ripple
-            >
-              {{ $t('forgetPassword.submitBtnText') }}
-            </ElButton>
-          </div>
-
-          <div style="margin-top: 15px">
-            <ElButton class="w-full custom-height" plain @click="toLogin">
-              {{ $t('forgetPassword.backBtnText') }}
-            </ElButton>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-  defineOptions({ name: 'ForgetPassword' })
-
-  const router = useRouter()
-  const showInputLabel = ref(false)
-
-  const username = ref('')
-  const loading = ref(false)
-
-  const register = async () => {}
-
-  const toLogin = () => {
-    router.push({ name: 'Login' })
-  }
-</script>
-
-<style scoped>
-  @import '../login/style.css';
-</style>
diff --git a/frontend/new-web/src/views/auth/login/index.vue b/frontend/new-web/src/views/auth/login/index.vue
deleted file mode 100755
index 2a857d7f..00000000
--- a/frontend/new-web/src/views/auth/login/index.vue
+++ /dev/null
@@ -1,284 +0,0 @@
-<!-- 登录页面 -->
-<template>
-  <div class="flex w-full h-screen">
-    <LoginLeftView />
-
-    <div class="relative flex-1">
-      <AuthTopBar />
-
-      <div class="auth-right-wrap">
-        <div class="form">
-          <h3 class="title">{{ $t('login.title') }}</h3>
-          <p class="sub-title">{{ $t('login.subTitle') }}</p>
-          <ElForm
-            ref="formRef"
-            :model="formData"
-            :rules="rules"
-            :key="formKey"
-            @keyup.enter="handleSubmit"
-            style="margin-top: 25px"
-          >
-            <ElFormItem prop="account">
-              <ElSelect v-model="formData.account" @change="setupAccount">
-                <ElOption
-                  v-for="account in accounts"
-                  :key="account.key"
-                  :label="account.label"
-                  :value="account.key"
-                >
-                  <span>{{ account.label }}</span>
-                </ElOption>
-              </ElSelect>
-            </ElFormItem>
-            <ElFormItem prop="username">
-              <ElInput
-                class="custom-height"
-                :placeholder="$t('login.placeholder.username')"
-                v-model.trim="formData.username"
-              />
-            </ElFormItem>
-            <ElFormItem prop="password">
-              <ElInput
-                class="custom-height"
-                :placeholder="$t('login.placeholder.password')"
-                v-model.trim="formData.password"
-                type="password"
-                autocomplete="off"
-                show-password
-              />
-            </ElFormItem>
-
-            <!-- 推拽验证 -->
-            <div class="relative pb-5 mt-6">
-              <div
-                class="relative z-[2] overflow-hidden select-none rounded-lg border border-transparent tad-300"
-                :class="{ '!border-[#FF4E4F]': !isPassing && isClickPass }"
-              >
-                <ArtDragVerify
-                  ref="dragVerify"
-                  v-model:value="isPassing"
-                  :text="$t('login.sliderText')"
-                  textColor="var(--art-gray-700)"
-                  :successText="$t('login.sliderSuccessText')"
-                  progressBarBg="var(--main-color)"
-                  :background="isDark ? '#26272F' : '#F1F1F4'"
-                  handlerBg="var(--default-box-color)"
-                />
-              </div>
-              <p
-                class="absolute top-0 z-[1] px-px mt-2 text-xs text-[#f56c6c] tad-300"
-                :class="{ 'translate-y-10': !isPassing && isClickPass }"
-              >
-                {{ $t('login.placeholder.slider') }}
-              </p>
-            </div>
-
-            <div class="flex-cb mt-2 text-sm">
-              <ElCheckbox v-model="formData.rememberPassword">{{
-                $t('login.rememberPwd')
-              }}</ElCheckbox>
-              <RouterLink class="text-theme" :to="{ name: 'ForgetPassword' }">{{
-                $t('login.forgetPwd')
-              }}</RouterLink>
-            </div>
-
-            <div style="margin-top: 30px">
-              <ElButton
-                class="w-full custom-height"
-                type="primary"
-                @click="handleSubmit"
-                :loading="loading"
-                v-ripple
-              >
-                {{ $t('login.btnText') }}
-              </ElButton>
-            </div>
-
-            <div class="mt-5 text-sm text-gray-600">
-              <span>{{ $t('login.noAccount') }}</span>
-              <RouterLink class="text-theme" :to="{ name: 'Register' }">{{
-                $t('login.register')
-              }}</RouterLink>
-            </div>
-          </ElForm>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import AppConfig from '@/config'
-  import { useUserStore } from '@/store/modules/user'
-  import { useI18n } from 'vue-i18n'
-  import { HttpError } from '@/utils/http/error'
-  import { fetchLogin } from '@/api/auth'
-  import { ElNotification, type FormInstance, type FormRules } from 'element-plus'
-  import { useSettingStore } from '@/store/modules/setting'
-
-  defineOptions({ name: 'Login' })
-
-  const settingStore = useSettingStore()
-  const { isDark } = storeToRefs(settingStore)
-  const { t, locale } = useI18n()
-  const formKey = ref(0)
-
-  // 监听语言切换，重置表单
-  watch(locale, () => {
-    formKey.value++
-  })
-
-  type AccountKey = 'super' | 'admin' | 'user'
-
-  export interface Account {
-    key: AccountKey
-    label: string
-    userName: string
-    password: string
-    roles: string[]
-  }
-
-  const accounts = computed<Account[]>(() => [
-    {
-      key: 'super',
-      label: t('login.roles.super'),
-      userName: 'Super',
-      password: '123456',
-      roles: ['R_SUPER']
-    },
-    {
-      key: 'admin',
-      label: t('login.roles.admin'),
-      userName: 'Admin',
-      password: '123456',
-      roles: ['R_ADMIN']
-    },
-    {
-      key: 'user',
-      label: t('login.roles.user'),
-      userName: 'User',
-      password: '123456',
-      roles: ['R_USER']
-    }
-  ])
-
-  const dragVerify = ref()
-
-  const userStore = useUserStore()
-  const router = useRouter()
-  const route = useRoute()
-  const isPassing = ref(false)
-  const isClickPass = ref(false)
-
-  const systemName = AppConfig.systemInfo.name
-  const formRef = ref<FormInstance>()
-
-  const formData = reactive({
-    account: '',
-    username: '',
-    password: '',
-    rememberPassword: true
-  })
-
-  const rules = computed<FormRules>(() => ({
-    username: [{ required: true, message: t('login.placeholder.username'), trigger: 'blur' }],
-    password: [{ required: true, message: t('login.placeholder.password'), trigger: 'blur' }]
-  }))
-
-  const loading = ref(false)
-
-  onMounted(() => {
-    setupAccount('super')
-  })
-
-  // 设置账号
-  const setupAccount = (key: AccountKey) => {
-    const selectedAccount = accounts.value.find((account: Account) => account.key === key)
-    formData.account = key
-    formData.username = selectedAccount?.userName ?? ''
-    formData.password = selectedAccount?.password ?? ''
-  }
-
-  // 登录
-  const handleSubmit = async () => {
-    if (!formRef.value) return
-
-    try {
-      // 表单验证
-      const valid = await formRef.value.validate()
-      if (!valid) return
-
-      // 拖拽验证
-      if (!isPassing.value) {
-        isClickPass.value = true
-        return
-      }
-
-      loading.value = true
-
-      // 登录请求
-      const { username, password } = formData
-
-      const { token, refreshToken } = await fetchLogin({
-        userName: username,
-        password
-      })
-
-      // 验证token
-      if (!token) {
-        throw new Error('Login failed - no token received')
-      }
-
-      // 存储 token 和登录状态
-      userStore.setToken(token, refreshToken)
-      userStore.setLoginStatus(true)
-
-      // 登录成功处理
-      showLoginSuccessNotice()
-
-      // 获取 redirect 参数，如果存在则跳转到指定页面，否则跳转到首页
-      const redirect = route.query.redirect as string
-      router.push(redirect || '/')
-    } catch (error) {
-      // 处理 HttpError
-      if (error instanceof HttpError) {
-        // console.log(error.code)
-      } else {
-        // 处理非 HttpError
-        // ElMessage.error('登录失败，请稍后重试')
-        console.error('[Login] Unexpected error:', error)
-      }
-    } finally {
-      loading.value = false
-      resetDragVerify()
-    }
-  }
-
-  // 重置拖拽验证
-  const resetDragVerify = () => {
-    dragVerify.value.reset()
-  }
-
-  // 登录成功提示
-  const showLoginSuccessNotice = () => {
-    setTimeout(() => {
-      ElNotification({
-        title: t('login.success.title'),
-        type: 'success',
-        duration: 2500,
-        zIndex: 10000,
-        message: `${t('login.success.message')}, ${systemName}!`
-      })
-    }, 1000)
-  }
-</script>
-
-<style scoped>
-  @import './style.css';
-</style>
-
-<style lang="scss" scoped>
-  :deep(.el-select__wrapper) {
-    height: 40px !important;
-  }
-</style>
diff --git a/frontend/new-web/src/views/auth/login/style.css b/frontend/new-web/src/views/auth/login/style.css
deleted file mode 100644
index bd8c3a9f..00000000
--- a/frontend/new-web/src/views/auth/login/style.css
+++ /dev/null
@@ -1,38 +0,0 @@
-@reference '@styles/core/tailwind.css';
-
-/* 授权页右侧区域 */
-.auth-right-wrap {
-  @apply absolute inset-0 w-[440px] h-[650px] py-[5px] m-auto overflow-hidden
-    max-sm:px-7 max-sm:w-full
-    animate-[slideInRight_0.6s_cubic-bezier(0.25,0.46,0.45,0.94)_forwards]
-    max-md:animate-none;
-
-  .form {
-    @apply h-full py-[40px];
-  }
-
-  .title {
-    @apply text-g-900 text-4xl font-semibold max-md:text-3xl max-sm:pt-10;
-  }
-
-  .sub-title {
-    @apply mt-[10px] text-g-600 text-sm;
-  }
-
-  .custom-height {
-    @apply !h-[40px];
-  }
-}
-
-/* 滑入动画 */
-@keyframes slideInRight {
-  from {
-    opacity: 0;
-    transform: translateX(30px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
diff --git a/frontend/new-web/src/views/auth/register/index.vue b/frontend/new-web/src/views/auth/register/index.vue
deleted file mode 100644
index 9a8570d7..00000000
--- a/frontend/new-web/src/views/auth/register/index.vue
+++ /dev/null
@@ -1,240 +0,0 @@
-<!-- 注册页面 -->
-<template>
-  <div class="flex w-full h-screen">
-    <LoginLeftView />
-
-    <div class="relative flex-1">
-      <AuthTopBar />
-
-      <div class="auth-right-wrap">
-        <div class="form">
-          <h3 class="title">{{ $t('register.title') }}</h3>
-          <p class="sub-title">{{ $t('register.subTitle') }}</p>
-          <ElForm
-            class="mt-7.5"
-            ref="formRef"
-            :model="formData"
-            :rules="rules"
-            label-position="top"
-            :key="formKey"
-          >
-            <ElFormItem prop="username">
-              <ElInput
-                class="custom-height"
-                v-model.trim="formData.username"
-                :placeholder="$t('register.placeholder.username')"
-              />
-            </ElFormItem>
-
-            <ElFormItem prop="password">
-              <ElInput
-                class="custom-height"
-                v-model.trim="formData.password"
-                :placeholder="$t('register.placeholder.password')"
-                type="password"
-                autocomplete="off"
-                show-password
-              />
-            </ElFormItem>
-
-            <ElFormItem prop="confirmPassword">
-              <ElInput
-                class="custom-height"
-                v-model.trim="formData.confirmPassword"
-                :placeholder="$t('register.placeholder.confirmPassword')"
-                type="password"
-                autocomplete="off"
-                @keyup.enter="register"
-                show-password
-              />
-            </ElFormItem>
-
-            <ElFormItem prop="agreement">
-              <ElCheckbox v-model="formData.agreement">
-                {{ $t('register.agreeText') }}
-                <RouterLink
-                  style="color: var(--theme-color); text-decoration: none"
-                  to="/privacy-policy"
-                  >{{ $t('register.privacyPolicy') }}</RouterLink
-                >
-              </ElCheckbox>
-            </ElFormItem>
-
-            <div style="margin-top: 15px">
-              <ElButton
-                class="w-full custom-height"
-                type="primary"
-                @click="register"
-                :loading="loading"
-                v-ripple
-              >
-                {{ $t('register.submitBtnText') }}
-              </ElButton>
-            </div>
-
-            <div class="mt-5 text-sm text-g-600">
-              <span>{{ $t('register.hasAccount') }}</span>
-              <RouterLink class="text-theme" :to="{ name: 'Login' }">{{
-                $t('register.toLogin')
-              }}</RouterLink>
-            </div>
-          </ElForm>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { useI18n } from 'vue-i18n'
-  import type { FormInstance, FormRules } from 'element-plus'
-
-  defineOptions({ name: 'Register' })
-
-  interface RegisterForm {
-    username: string
-    password: string
-    confirmPassword: string
-    agreement: boolean
-  }
-
-  const USERNAME_MIN_LENGTH = 3
-  const USERNAME_MAX_LENGTH = 20
-  const PASSWORD_MIN_LENGTH = 6
-  const REDIRECT_DELAY = 1000
-
-  const { t, locale } = useI18n()
-  const router = useRouter()
-  const formRef = ref<FormInstance>()
-
-  const loading = ref(false)
-  const formKey = ref(0)
-
-  // 监听语言切换，重置表单
-  watch(locale, () => {
-    formKey.value++
-  })
-
-  const formData = reactive<RegisterForm>({
-    username: '',
-    password: '',
-    confirmPassword: '',
-    agreement: false
-  })
-
-  /**
-   * 验证密码
-   * 当密码输入后，如果确认密码已填写，则触发确认密码的验证
-   */
-  const validatePassword = (_rule: any, value: string, callback: (error?: Error) => void) => {
-    if (!value) {
-      callback(new Error(t('register.placeholder.password')))
-      return
-    }
-
-    if (formData.confirmPassword) {
-      formRef.value?.validateField('confirmPassword')
-    }
-
-    callback()
-  }
-
-  /**
-   * 验证确认密码
-   * 检查确认密码是否与密码一致
-   */
-  const validateConfirmPassword = (
-    _rule: any,
-    value: string,
-    callback: (error?: Error) => void
-  ) => {
-    if (!value) {
-      callback(new Error(t('register.rule.confirmPasswordRequired')))
-      return
-    }
-
-    if (value !== formData.password) {
-      callback(new Error(t('register.rule.passwordMismatch')))
-      return
-    }
-
-    callback()
-  }
-
-  /**
-   * 验证用户协议
-   * 确保用户已勾选同意协议
-   */
-  const validateAgreement = (_rule: any, value: boolean, callback: (error?: Error) => void) => {
-    if (!value) {
-      callback(new Error(t('register.rule.agreementRequired')))
-      return
-    }
-    callback()
-  }
-
-  const rules = computed<FormRules<RegisterForm>>(() => ({
-    username: [
-      { required: true, message: t('register.placeholder.username'), trigger: 'blur' },
-      {
-        min: USERNAME_MIN_LENGTH,
-        max: USERNAME_MAX_LENGTH,
-        message: t('register.rule.usernameLength'),
-        trigger: 'blur'
-      }
-    ],
-    password: [
-      { required: true, validator: validatePassword, trigger: 'blur' },
-      { min: PASSWORD_MIN_LENGTH, message: t('register.rule.passwordLength'), trigger: 'blur' }
-    ],
-    confirmPassword: [{ required: true, validator: validateConfirmPassword, trigger: 'blur' }],
-    agreement: [{ validator: validateAgreement, trigger: 'change' }]
-  }))
-
-  /**
-   * 注册用户
-   * 验证表单后提交注册请求
-   */
-  const register = async () => {
-    if (!formRef.value) return
-
-    try {
-      await formRef.value.validate()
-      loading.value = true
-
-      // TODO: 替换为真实 API 调用
-      // const params = {
-      //   username: formData.username,
-      //   password: formData.password
-      // }
-      // const res = await AuthService.register(params)
-      // if (res.code === ApiStatus.success) {
-      //   ElMessage.success('注册成功')
-      //   toLogin()
-      // }
-
-      // 模拟注册请求
-      setTimeout(() => {
-        loading.value = false
-        ElMessage.success('注册成功')
-        toLogin()
-      }, REDIRECT_DELAY)
-    } catch (error) {
-      console.error('表单验证失败:', error)
-      loading.value = false
-    }
-  }
-
-  /**
-   * 跳转到登录页面
-   */
-  const toLogin = () => {
-    setTimeout(() => {
-      router.push({ name: 'Login' })
-    }, REDIRECT_DELAY)
-  }
-</script>
-
-<style scoped>
-  @import '../login/style.css';
-</style>
diff --git a/frontend/new-web/src/views/change/log/index.vue b/frontend/new-web/src/views/change/log/index.vue
index c7dbf43b..5dd87cf6 100644
--- a/frontend/new-web/src/views/change/log/index.vue
+++ b/frontend/new-web/src/views/change/log/index.vue
@@ -47,7 +47,7 @@
 </template>
 
 <script setup lang="ts">
-  import { upgradeLogList } from '@/mock/upgrade/changeLog'
+import { upgradeLogList } from "@/mock/upgrade/changeLog";
 
-  defineOptions({ name: 'ChangeLog' })
+defineOptions({ name: "ChangeLog" });
 </script>
diff --git a/frontend/new-web/src/views/current/profile.vue b/frontend/new-web/src/views/current/profile.vue
new file mode 100644
index 00000000..14bdcd94
--- /dev/null
+++ b/frontend/new-web/src/views/current/profile.vue
@@ -0,0 +1,610 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="12">
+      <!-- 左侧信息卡片 -->
+      <el-col :span="6" class="mb-4">
+        <el-card :loading="loading" shadow="hover">
+          <template #header>
+            <div class="card-header">
+              <span>基本信息</span>
+            </div>
+          </template>
+          <div class="user-info-header">
+            <div class="avatar-alert mb-10px">
+              <!-- 提示：头像上传成功后请点击“保存更改”按钮才会生效 -->
+              <el-alert
+                type="info"
+                show-icon
+                :closable="false"
+                title="头像上传，点击“保存更改”按钮使其生效"
+              />
+            </div>
+
+            <div class="avatar-wrapper">
+              <el-avatar v-if="infoFormState.avatar" :src="infoFormState.avatar" :size="120" />
+              <el-avatar v-else icon="UserFilled" :size="120" />
+
+              <el-upload
+                ref="uploadRef"
+                v-model:file-list="fileList"
+                class="el-upload"
+                name="file"
+                :show-file-list="false"
+                :before-upload="handleBeforeUpload"
+                :http-request="handleUpload"
+                :disabled="loading"
+                :limit="1"
+                :auto-upload="false"
+                @change="handleFileChange"
+              >
+                <template #trigger>
+                  <el-button type="primary" :icon="Camera" class="upload-trigger" />
+                </template>
+              </el-upload>
+            </div>
+            <span class="user-name">
+              {{ infoFormState.name }}
+            </span>
+
+            <el-text>{{ infoFormState.roles?.map((item) => item.name).join("、") }}</el-text>
+          </div>
+
+          <el-divider />
+
+          <el-descriptions :column="1" border>
+            <el-descriptions-item>
+              <template #label>
+                <div class="cell-item">
+                  <el-icon :style="iconStyle">
+                    <User />
+                  </el-icon>
+                  <span>账号</span>
+                </div>
+              </template>
+              <span>{{ infoFormState.username }}</span>
+            </el-descriptions-item>
+            <el-descriptions-item>
+              <template #label>
+                <div class="cell-item">
+                  <el-icon :style="iconStyle">
+                    <Coordinate />
+                  </el-icon>
+                  <span>部门</span>
+                </div>
+              </template>
+              <span>{{ infoFormState.dept?.name }}</span>
+            </el-descriptions-item>
+            <el-descriptions-item>
+              <template #label>
+                <div class="cell-item">
+                  <el-icon :style="iconStyle">
+                    <OfficeBuilding />
+                  </el-icon>
+                  <span>岗位</span>
+                </div>
+              </template>
+              <span>{{ infoFormState.positions?.map((item) => item.name).join("、") }}</span>
+            </el-descriptions-item>
+            <el-descriptions-item>
+              <template #label>
+                <div class="cell-item">
+                  <el-icon :style="iconStyle">
+                    <Phone />
+                  </el-icon>
+                  <span>手机</span>
+                </div>
+              </template>
+              <span>{{ infoFormState.mobile }}</span>
+            </el-descriptions-item>
+            <el-descriptions-item>
+              <template #label>
+                <div class="cell-item">
+                  <el-icon :style="iconStyle">
+                    <Message />
+                  </el-icon>
+                  <span>邮箱</span>
+                </div>
+              </template>
+              <span>{{ infoFormState.email }}</span>
+            </el-descriptions-item>
+            <el-descriptions-item>
+              <template #label>
+                <div class="cell-item">
+                  <el-icon :style="iconStyle">
+                    <Clock />
+                  </el-icon>
+                  <span>加入时间</span>
+                </div>
+              </template>
+              <span>{{ infoFormState.created_time }}</span>
+            </el-descriptions-item>
+          </el-descriptions>
+        </el-card>
+      </el-col>
+
+      <!-- 右侧设置区域 -->
+      <el-col :span="18" class="mb-4">
+        <el-card :loading="loading" shadow="hover">
+          <el-tabs type="border-card">
+            <el-tab-pane>
+              <template #label>
+                <el-icon>
+                  <User />
+                </el-icon>
+                <span>基本设置</span>
+              </template>
+              <div>
+                <el-form
+                  ref="infoFormRef"
+                  :model="infoFormState"
+                  :rules="rules"
+                  label-width="80px"
+                  label-suffix=":"
+                >
+                  <el-form-item label="用户名" prop="name">
+                    <el-input
+                      v-model="infoFormState.name"
+                      placeholder="请输入用户名"
+                      prefix-icon="User"
+                      clearable
+                      style="width: 240px"
+                    />
+                  </el-form-item>
+
+                  <el-form-item label="手机号" prop="mobile">
+                    <el-input
+                      v-model="infoFormState.mobile"
+                      placeholder="请输入手机号码"
+                      prefix-icon="Phone"
+                      clearable
+                      style="width: 240px"
+                    />
+                  </el-form-item>
+
+                  <el-form-item label="邮箱" prop="email">
+                    <el-input
+                      v-model="infoFormState.email"
+                      placeholder="请输入邮箱"
+                      prefix-icon="Message"
+                      clearable
+                      style="width: 240px"
+                    />
+                  </el-form-item>
+
+                  <el-form-item label="性别" prop="gender">
+                    <el-radio-group v-model="infoFormState.gender">
+                      <el-radio
+                        v-for="item in dictDataStore['sys_user_sex']"
+                        :key="item.dict_value"
+                        :value="item.dict_value"
+                      >
+                        {{ item.dict_label }}
+                      </el-radio>
+                    </el-radio-group>
+                  </el-form-item>
+
+                  <el-form-item>
+                    <el-button
+                      type="primary"
+                      :loading="infoSubmitting"
+                      icon="edit"
+                      @click="handleSave"
+                    >
+                      保存更改
+                    </el-button>
+                  </el-form-item>
+                </el-form>
+              </div>
+            </el-tab-pane>
+
+            <el-tab-pane>
+              <template #label>
+                <el-icon>
+                  <Lock />
+                </el-icon>
+                <span>安全设置</span>
+              </template>
+              <div>
+                <el-form
+                  ref="passwordFormRef"
+                  :model="passwordFormState"
+                  :rules="resetPasswordRules"
+                  label-width="120px"
+                  label-suffix=":"
+                >
+                  <el-form-item label="当前密码" prop="old_password">
+                    <el-input
+                      v-model.trim="passwordFormState.old_password"
+                      :placeholder="t('login.password')"
+                      type="password"
+                      prefix-icon="Unlock"
+                      show-password
+                      clearable
+                      style="width: 240px"
+                    >
+                      <template #prefix>
+                        <Lock />
+                      </template>
+                    </el-input>
+                  </el-form-item>
+
+                  <el-form-item label="新密码" prop="new_password">
+                    <el-input
+                      v-model.trim="passwordFormState.new_password"
+                      type="password"
+                      :placeholder="t('login.newPassword')"
+                      prefix-icon="Unlock"
+                      show-password
+                      clearable
+                      style="width: 240px"
+                    >
+                      <template #prefix>
+                        <Key />
+                      </template>
+                    </el-input>
+                  </el-form-item>
+
+                  <el-form-item label="确认新密码" prop="confirm_password">
+                    <el-input
+                      v-model.trim="passwordFormState.confirm_password"
+                      type="password"
+                      :placeholder="t('login.message.password.confirm')"
+                      prefix-icon="Lock"
+                      show-password
+                      clearable
+                      style="width: 240px"
+                    >
+                      <template #prefix>
+                        <Check />
+                      </template>
+                    </el-input>
+                  </el-form-item>
+
+                  <el-form-item>
+                    <el-button
+                      type="primary"
+                      :loading="passwordChanging"
+                      icon="edit"
+                      @click="handlePasswordChange"
+                    >
+                      更新密码
+                    </el-button>
+                  </el-form-item>
+                </el-form>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type {
+  FormInstance,
+  UploadRequestOptions,
+  UploadFile,
+  ElUpload,
+  ComponentSize,
+} from "element-plus";
+import UserAPI, { type InfoFormState, type PasswordFormState } from "@/api/module_system/user";
+import { useUserStore, useDictStore } from "@/store";
+import { Camera } from "@element-plus/icons-vue";
+import { ElMessage } from "element-plus";
+import { useI18n } from "vue-i18n";
+import { nextTick } from "vue";
+import { redirectToLogin } from "@/utils/authRedirect";
+
+const { t } = useI18n();
+const userStore = useUserStore();
+const dictStore = useDictStore();
+const infoFormRef = ref<FormInstance>();
+const passwordFormRef = ref<FormInstance>();
+const loading = ref<boolean>(false);
+
+const dictDataStore = computed(() => dictStore.dictData);
+
+const size = ref<ComponentSize>("default");
+
+const iconStyle = computed(() => {
+  const marginMap = {
+    large: "8px",
+    default: "6px",
+    small: "4px",
+  };
+  return {
+    marginRight: marginMap[size.value || "default"],
+  };
+});
+
+// 字典数据
+const getOptions = async () => {
+  return await dictStore.getDict(["sys_user_sex"]);
+};
+
+// 状态定义
+const passwordChanging = ref(false);
+const infoSubmitting = ref(false);
+
+// 用户基础信息表单
+const infoFormState = reactive<InfoFormState>({
+  name: undefined,
+  gender: 1,
+  mobile: undefined,
+  email: undefined,
+  username: undefined,
+  dept_name: undefined,
+  dept: {},
+  positions: [],
+  roles: [],
+  avatar: undefined,
+  created_time: undefined,
+});
+
+// 修改密码表单
+const passwordFormState = reactive<PasswordFormState>({
+  old_password: "",
+  new_password: "",
+  confirm_password: "",
+});
+
+// 头像上传处理优化
+const fileList = ref<any[]>([]);
+const uploadRef = ref<InstanceType<typeof ElUpload>>();
+
+// 文件上传前校验
+const handleBeforeUpload = (file: File) => {
+  const isImage = file.type.startsWith("image/");
+  const isLt2M = file.size / 1024 / 1024 < 2;
+
+  if (!isImage) {
+    ElMessage.error("只能上传图片文件");
+    return false;
+  }
+  if (!isLt2M) {
+    ElMessage.error("上传图片大小不能超过 2MB!");
+    return false;
+  }
+  return true;
+};
+
+// 自定义上传处理
+const handleUpload = async (options: UploadRequestOptions) => {
+  try {
+    const file = options.file;
+    const formData = new FormData();
+    formData.append("file", file);
+
+    const response = await UserAPI.uploadCurrentUserAvatar(formData);
+
+    if (response.data.code === 0 && response.data.data) {
+      const fileUrl = response.data.data.file_url;
+      updateAvatar(fileUrl);
+      options.onSuccess(response);
+      // 重置上传组件状态，允许再次选择上传
+      if (uploadRef.value) {
+        uploadRef.value.clearFiles();
+      }
+      fileList.value = [];
+    } else {
+      const errorMsg = response.data.msg || "上传失败";
+      ElMessage.error(errorMsg);
+      options.onError({
+        ...new Error(errorMsg),
+        status: response.status || 500,
+        method: "POST",
+        url: "/system/user/current/avatar/upload",
+      });
+    }
+  } catch (error) {
+    ElMessage.error("头像上传失败，请重试");
+    const errorObj = error instanceof Error ? error : new Error(String(error));
+    options.onError({
+      ...errorObj,
+      status: 500,
+      method: "POST",
+      url: "/system/user/current/avatar/upload",
+    });
+    console.error("Upload error:", error);
+  }
+};
+
+// 处理文件选择变化
+const handleFileChange = (file: UploadFile, files: UploadFile[]) => {
+  // 当有新文件被添加且状态为ready时触发上传
+  if (file) {
+    // 更新文件列表
+    fileList.value = [...files];
+    // 提交上传
+    if (uploadRef.value) {
+      uploadRef.value.submit();
+    }
+  }
+};
+
+// 更新头像信息
+const updateAvatar = (fileUrl: string) => {
+  if (fileUrl) {
+    // 更新头像状态
+    infoFormState.avatar = fileUrl;
+    // 确保DOM正确更新
+    nextTick(() => {
+      console.log("头像已更新:", infoFormState.avatar);
+    });
+  } else {
+    ElMessage.error("无效的头像URL");
+    console.error("Invalid fileUrl:", fileUrl);
+  }
+};
+
+// 邮箱校验规则优化
+const rules = {
+  name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
+  mobile: [
+    {
+      pattern: /^1[3-9]\d{9}$/,
+      message: "请输入有效的手机号格式",
+      trigger: "blur",
+    },
+  ],
+  email: [
+    {
+      pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
+      message: "请输入有效的邮箱格式",
+      trigger: "blur",
+    },
+  ],
+};
+
+const resetPasswordRules = {
+  old_password: [
+    {
+      required: true,
+      trigger: "blur",
+      message: t("login.password"),
+    },
+  ],
+  new_password: [
+    {
+      required: true,
+      trigger: "blur",
+      message: t("login.message.password.required"),
+    },
+    {
+      min: 6,
+      message: t("login.message.password.min"),
+      trigger: "blur",
+    },
+  ],
+  confirm_password: [
+    {
+      required: true,
+      trigger: "blur",
+      message: t("login.message.password.required"),
+    },
+    {
+      min: 6,
+      message: t("login.message.password.min"),
+      trigger: "blur",
+    },
+    {
+      validator: (_: any, value: string) => {
+        return value === passwordFormState.new_password;
+      },
+      trigger: "blur",
+      message: t("login.message.password.inconformity"),
+    },
+  ],
+};
+
+// 初始化表单
+const initInfoForm = () => {
+  const basicInfo = userStore.basicInfo;
+  Object.assign(infoFormState, { ...basicInfo });
+};
+
+// 初始化密码表单
+const initPasswordForm = () => {
+  Object.assign(passwordFormState, {
+    old_password: "",
+    new_password: "",
+    confirm_password: "",
+  });
+};
+
+// 基本信息表单提交
+const handleSave = async () => {
+  try {
+    infoSubmitting.value = true;
+    const valid = await infoFormRef.value?.validate().catch(() => false);
+    if (!valid) {
+      return;
+    }
+    // 确保avatar字段被正确处理
+    const response = await UserAPI.updateCurrentUserInfo({ ...infoFormState });
+    await userStore.setUserInfo(response.data.data);
+    ElMessage.success("个人资料已保存");
+  } finally {
+    infoSubmitting.value = false;
+  }
+};
+
+// 修改密码
+const handlePasswordChange = async () => {
+  try {
+    passwordChanging.value = true;
+    const valid = await passwordFormRef.value?.validate().catch(() => false);
+    if (!valid) {
+      return;
+    }
+    const response = await UserAPI.changeCurrentUserPassword(passwordFormState);
+    initPasswordForm();
+    await redirectToLogin(response.data.msg);
+  } catch (error) {
+    console.error(error);
+  } finally {
+    passwordChanging.value = false;
+  }
+};
+
+onMounted(async () => {
+  await getOptions();
+  initInfoForm();
+});
+</script>
+
+<style lang="scss" scoped>
+/* 样式调整 */
+.user-info-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .avatar-wrapper {
+    position: relative;
+    margin-bottom: 16px;
+
+    .el-upload {
+      &:hover {
+        opacity: 0.8; /* 鼠标悬浮时稍微降低透明度 */
+      }
+    }
+
+    .upload-trigger {
+      // top: 50%;
+      // left: 50%;
+      position: absolute;
+      width: 28px;
+      height: 28px;
+      background: var(--el-color-primary);
+      border-radius: 50%;
+      opacity: 0;
+      transform: translate(-50%, -50%);
+    }
+
+    /* 提升 hover 样式优先级 */
+    &:hover .upload-trigger {
+      opacity: 1 !important; /* 强制生效 */
+    }
+  }
+}
+
+/* 修复表单输入框清除按钮导致的宽度变化问题 */
+.el-input {
+  transition: none !important;
+}
+
+.el-input__wrapper {
+  transition: none !important;
+}
+
+.iconStyle {
+  margin-right: 6px;
+}
+
+.cell-item {
+  display: flex;
+  align-items: center;
+}
+</style>
diff --git a/frontend/new-web/src/views/dashboard/analysis/index.vue b/frontend/new-web/src/views/dashboard/analysis/index.vue
index 36f009f3..99d7b96d 100644
--- a/frontend/new-web/src/views/dashboard/analysis/index.vue
+++ b/frontend/new-web/src/views/dashboard/analysis/index.vue
@@ -37,14 +37,14 @@
 </template>
 
 <script setup lang="ts">
-  import TodaySales from './modules/today-sales.vue'
-  import VisitorInsights from './modules/visitor-insights.vue'
-  import TotalRevenue from './modules/total-revenue.vue'
-  import CustomerSatisfaction from './modules/customer-satisfaction.vue'
-  import TargetVsReality from './modules/target-vs-reality.vue'
-  import TopProducts from './modules/top-products.vue'
-  import SalesMappingByCountry from './modules/sales-mapping-by-country.vue'
-  import VolumeServiceLevel from './modules/volume-service-level.vue'
+import TodaySales from "./modules/today-sales.vue";
+import VisitorInsights from "./modules/visitor-insights.vue";
+import TotalRevenue from "./modules/total-revenue.vue";
+import CustomerSatisfaction from "./modules/customer-satisfaction.vue";
+import TargetVsReality from "./modules/target-vs-reality.vue";
+import TopProducts from "./modules/top-products.vue";
+import SalesMappingByCountry from "./modules/sales-mapping-by-country.vue";
+import VolumeServiceLevel from "./modules/volume-service-level.vue";
 
-  defineOptions({ name: 'Analysis' })
+defineOptions({ name: "Analysis" });
 </script>
diff --git a/frontend/new-web/src/views/dashboard/analysis/modules/customer-satisfaction.vue b/frontend/new-web/src/views/dashboard/analysis/modules/customer-satisfaction.vue
index 605ee54c..7cc1d460 100644
--- a/frontend/new-web/src/views/dashboard/analysis/modules/customer-satisfaction.vue
+++ b/frontend/new-web/src/views/dashboard/analysis/modules/customer-satisfaction.vue
@@ -18,33 +18,33 @@
 </template>
 
 <script setup lang="ts">
-  import type { LineDataItem } from '@/types/component/chart'
+import type { LineDataItem } from "@/types/component/chart";
 
-  const AREA_STYLE_CONFIG = {
-    startOpacity: 0.08,
-    endOpacity: 0
-  } as const
+const AREA_STYLE_CONFIG = {
+  startOpacity: 0.08,
+  endOpacity: 0,
+} as const;
 
-  /**
-   * X 轴数据配置
-   * 表示一周的天数（周一到周日）
-   */
-  const xAxisData = ['1', '2', '3', '4', '5', '6', '7']
+/**
+ * X 轴数据配置
+ * 表示一周的天数（周一到周日）
+ */
+const xAxisData = ["1", "2", "3", "4", "5", "6", "7"];
 
-  /**
-   * 客户满意度图表数据
-   * 对比上个月和本月的满意度趋势
-   */
-  const chartData = computed<LineDataItem[]>(() => [
-    {
-      name: '上个月',
-      data: [65, 72, 68, 75, 82, 78, 85],
-      areaStyle: AREA_STYLE_CONFIG
-    },
-    {
-      name: '本月',
-      data: [78, 85, 82, 88, 92, 89, 95],
-      areaStyle: AREA_STYLE_CONFIG
-    }
-  ])
+/**
+ * 客户满意度图表数据
+ * 对比上个月和本月的满意度趋势
+ */
+const chartData = computed<LineDataItem[]>(() => [
+  {
+    name: "上个月",
+    data: [65, 72, 68, 75, 82, 78, 85],
+    areaStyle: AREA_STYLE_CONFIG,
+  },
+  {
+    name: "本月",
+    data: [78, 85, 82, 88, 92, 89, 95],
+    areaStyle: AREA_STYLE_CONFIG,
+  },
+]);
 </script>
diff --git a/frontend/new-web/src/views/dashboard/analysis/modules/sales-mapping-by-country.vue b/frontend/new-web/src/views/dashboard/analysis/modules/sales-mapping-by-country.vue
index 85c6ec39..77c1f3ab 100644
--- a/frontend/new-web/src/views/dashboard/analysis/modules/sales-mapping-by-country.vue
+++ b/frontend/new-web/src/views/dashboard/analysis/modules/sales-mapping-by-country.vue
@@ -10,7 +10,7 @@
       :data="[
         { value: 30, name: '北京' },
         { value: 25, name: '上海' },
-        { value: 45, name: '广州' }
+        { value: 45, name: '广州' },
       ]"
       :color="['#4C87F3', '#93F1B4', '#8BD8FC']"
       :radius="['46%', '60%']"
diff --git a/frontend/new-web/src/views/dashboard/analysis/modules/target-vs-reality.vue b/frontend/new-web/src/views/dashboard/analysis/modules/target-vs-reality.vue
index 47d42539..09479294 100644
--- a/frontend/new-web/src/views/dashboard/analysis/modules/target-vs-reality.vue
+++ b/frontend/new-web/src/views/dashboard/analysis/modules/target-vs-reality.vue
@@ -34,46 +34,46 @@
 </template>
 
 <script setup lang="ts">
-  interface RevenueDataItem {
-    name: string
-    data: number[]
-  }
+interface RevenueDataItem {
+  name: string;
+  data: number[];
+}
 
-  /**
-   * 一周的日期标签
-   */
-  const weekDays = ref(['周一', '周二', '周三', '周四', '周五', '周六', '周日'])
+/**
+ * 一周的日期标签
+ */
+const weekDays = ref(["周一", "周二", "周三", "周四", "周五", "周六", "周日"]);
 
-  /**
-   * 目标与实际销售数据
-   * 展示一周内的线上销售情况
-   */
-  const revenueData = ref<RevenueDataItem[]>([
-    {
-      name: '线上销售',
-      data: [12, 13, 5, 15, 10, 15, 18]
-    }
-  ])
+/**
+ * 目标与实际销售数据
+ * 展示一周内的线上销售情况
+ */
+const revenueData = ref<RevenueDataItem[]>([
+  {
+    name: "线上销售",
+    data: [12, 13, 5, 15, 10, 15, 18],
+  },
+]);
 
-  /**
-   * 统计项数据
-   */
-  const totalItems = [
-    {
-      icon: 'ri:shopping-bag-line',
-      iconClass: 'text-theme bg-theme/12',
-      label: '实际销售额',
-      subLabel: '全球',
-      value: '8,823',
-      valueClass: 'text-theme'
-    },
-    {
-      icon: 'ri:money-dollar-circle-line',
-      iconClass: 'text-theme bg-theme/12',
-      label: '目标销售额',
-      subLabel: '商业',
-      value: '12,122',
-      valueClass: 'text-theme'
-    }
-  ]
+/**
+ * 统计项数据
+ */
+const totalItems = [
+  {
+    icon: "ri:shopping-bag-line",
+    iconClass: "text-theme bg-theme/12",
+    label: "实际销售额",
+    subLabel: "全球",
+    value: "8,823",
+    valueClass: "text-theme",
+  },
+  {
+    icon: "ri:money-dollar-circle-line",
+    iconClass: "text-theme bg-theme/12",
+    label: "目标销售额",
+    subLabel: "商业",
+    value: "12,122",
+    valueClass: "text-theme",
+  },
+];
 </script>
diff --git a/frontend/new-web/src/views/dashboard/analysis/modules/today-sales.vue b/frontend/new-web/src/views/dashboard/analysis/modules/today-sales.vue
index 0611a848..397c4d94 100644
--- a/frontend/new-web/src/views/dashboard/analysis/modules/today-sales.vue
+++ b/frontend/new-web/src/views/dashboard/analysis/modules/today-sales.vue
@@ -29,8 +29,9 @@
                 <span
                   class="font-medium"
                   :class="[item.change.indexOf('+') === -1 ? 'text-danger' : 'text-success']"
-                  >{{ item.change }}</span
                 >
+                  {{ item.change }}
+                </span>
               </small>
             </div>
           </div>
@@ -41,46 +42,46 @@
 </template>
 
 <script setup lang="ts">
-  interface SalesDataItem {
-    label: string
-    value: number
-    change: string
-    icon: string
-    class: string
-  }
+interface SalesDataItem {
+  label: string;
+  value: number;
+  change: string;
+  icon: string;
+  class: string;
+}
 
-  /**
-   * 今日销售数据统计
-   * 包含销售额、订单量、产品销量和新客户数等关键指标
-   */
-  const salesData = ref<SalesDataItem[]>([
-    {
-      label: '总销售额',
-      value: 999,
-      change: '+10%',
-      icon: 'ri:bar-chart-box-ai-line',
-      class: 'bg-theme'
-    },
-    {
-      label: '总订单量',
-      value: 300,
-      change: '+15%',
-      icon: 'ri:bar-chart-grouped-line',
-      class: 'bg-warning'
-    },
-    {
-      label: '产品销售量',
-      value: 56,
-      change: '-5%',
-      icon: 'ri:bar-chart-2-line',
-      class: 'bg-error'
-    },
-    {
-      label: '新客户数',
-      value: 68,
-      change: '+8%',
-      icon: 'ri:user-add-line',
-      class: 'bg-success'
-    }
-  ])
+/**
+ * 今日销售数据统计
+ * 包含销售额、订单量、产品销量和新客户数等关键指标
+ */
+const salesData = ref<SalesDataItem[]>([
+  {
+    label: "总销售额",
+    value: 999,
+    change: "+10%",
+    icon: "ri:bar-chart-box-ai-line",
+    class: "bg-theme",
+  },
+  {
+    label: "总订单量",
+    value: 300,
+    change: "+15%",
+    icon: "ri:bar-chart-grouped-line",
+    class: "bg-warning",
+  },
+  {
+    label: "产品销售量",
+    value: 56,
+    change: "-5%",
+    icon: "ri:bar-chart-2-line",
+    class: "bg-error",
+  },
+  {
+    label: "新客户数",
+    value: 68,
+    change: "+8%",
+    icon: "ri:user-add-line",
+    class: "bg-success",
+  },
+]);
 </script>
diff --git a/frontend/new-web/src/views/dashboard/analysis/modules/top-products.vue b/frontend/new-web/src/views/dashboard/analysis/modules/top-products.vue
index 68c0d082..7b1e4623 100644
--- a/frontend/new-web/src/views/dashboard/analysis/modules/top-products.vue
+++ b/frontend/new-web/src/views/dashboard/analysis/modules/top-products.vue
@@ -34,10 +34,11 @@
                 border: '1px solid',
                 padding: '3px 6px',
                 borderRadius: '4px',
-                fontSize: '12px'
+                fontSize: '12px',
               }"
-              >{{ scope.row.sales }}</span
             >
+              {{ scope.row.sales }}
+            </span>
           </template>
         </ElTableColumn>
       </ArtTable>
@@ -46,49 +47,49 @@
 </template>
 
 <script setup lang="ts">
-  import { hexToRgb } from '@/utils/ui'
+import { hexToRgb } from "@/utils/ui";
 
-  interface Product {
-    name: string
-    popularity: number
-    sales: string
-  }
+interface Product {
+  name: string;
+  popularity: number;
+  sales: string;
+}
 
-  const COLOR_THRESHOLDS = {
-    LOW: 25,
-    MEDIUM: 50,
-    HIGH: 75
-  } as const
+const COLOR_THRESHOLDS = {
+  LOW: 25,
+  MEDIUM: 50,
+  HIGH: 75,
+} as const;
 
-  const POPULARITY_COLORS = {
-    LOW: '#00E096',
-    MEDIUM: '#0095FF',
-    HIGH: '#884CFF',
-    VERY_HIGH: '#FE8F0E'
-  } as const
+const POPULARITY_COLORS = {
+  LOW: "#00E096",
+  MEDIUM: "#0095FF",
+  HIGH: "#884CFF",
+  VERY_HIGH: "#FE8F0E",
+} as const;
 
-  /**
-   * 热门产品列表数据
-   * 包含产品名称、热度和销量信息
-   */
-  const products = computed<Product[]>(() => [
-    { name: '智能手机', popularity: 10, sales: '100' },
-    { name: '笔记本电脑', popularity: 29, sales: '100' },
-    { name: '平板电脑', popularity: 65, sales: '100' },
-    { name: '智能手表', popularity: 32, sales: '100' },
-    { name: '无线耳机', popularity: 78, sales: '100' },
-    { name: '智能音箱', popularity: 41, sales: '100' }
-  ])
+/**
+ * 热门产品列表数据
+ * 包含产品名称、热度和销量信息
+ */
+const products = computed<Product[]>(() => [
+  { name: "智能手机", popularity: 10, sales: "100" },
+  { name: "笔记本电脑", popularity: 29, sales: "100" },
+  { name: "平板电脑", popularity: 65, sales: "100" },
+  { name: "智能手表", popularity: 32, sales: "100" },
+  { name: "无线耳机", popularity: 78, sales: "100" },
+  { name: "智能音箱", popularity: 41, sales: "100" },
+]);
 
-  /**
-   * 根据热度百分比获取对应的颜色
-   * @param percentage 热度百分比 (0-100)
-   * @returns 对应的颜色值
-   */
-  const getColor = (percentage: number): string => {
-    if (percentage < COLOR_THRESHOLDS.LOW) return POPULARITY_COLORS.LOW
-    if (percentage < COLOR_THRESHOLDS.MEDIUM) return POPULARITY_COLORS.MEDIUM
-    if (percentage < COLOR_THRESHOLDS.HIGH) return POPULARITY_COLORS.HIGH
-    return POPULARITY_COLORS.VERY_HIGH
-  }
+/**
+ * 根据热度百分比获取对应的颜色
+ * @param percentage 热度百分比 (0-100)
+ * @returns 对应的颜色值
+ */
+const getColor = (percentage: number): string => {
+  if (percentage < COLOR_THRESHOLDS.LOW) return POPULARITY_COLORS.LOW;
+  if (percentage < COLOR_THRESHOLDS.MEDIUM) return POPULARITY_COLORS.MEDIUM;
+  if (percentage < COLOR_THRESHOLDS.HIGH) return POPULARITY_COLORS.HIGH;
+  return POPULARITY_COLORS.VERY_HIGH;
+};
 </script>
diff --git a/frontend/new-web/src/views/dashboard/analysis/modules/total-revenue.vue b/frontend/new-web/src/views/dashboard/analysis/modules/total-revenue.vue
index 5e387288..ccaa0ef3 100644
--- a/frontend/new-web/src/views/dashboard/analysis/modules/total-revenue.vue
+++ b/frontend/new-web/src/views/dashboard/analysis/modules/total-revenue.vue
@@ -17,28 +17,28 @@
 </template>
 
 <script setup lang="ts">
-  interface RevenueDataItem {
-    name: string
-    data: number[]
-  }
+interface RevenueDataItem {
+  name: string;
+  data: number[];
+}
 
-  /**
-   * 一周的日期标签
-   */
-  const weekDays = ref(['周一', '周二', '周三', '周四', '周五', '周六', '周日'])
+/**
+ * 一周的日期标签
+ */
+const weekDays = ref(["周一", "周二", "周三", "周四", "周五", "周六", "周日"]);
 
-  /**
-   * 总收入数据
-   * 对比线上和线下销售的一周收入情况
-   */
-  const revenueData = ref<RevenueDataItem[]>([
-    {
-      name: '线上销售',
-      data: [12, 13, 5, 15, 10, 15, 18]
-    },
-    {
-      name: '线下销售',
-      data: [10, 11, 20, 5, 11, 13, 10]
-    }
-  ])
+/**
+ * 总收入数据
+ * 对比线上和线下销售的一周收入情况
+ */
+const revenueData = ref<RevenueDataItem[]>([
+  {
+    name: "线上销售",
+    data: [12, 13, 5, 15, 10, 15, 18],
+  },
+  {
+    name: "线下销售",
+    data: [10, 11, 20, 5, 11, 13, 10],
+  },
+]);
 </script>
diff --git a/frontend/new-web/src/views/dashboard/analysis/modules/visitor-insights.vue b/frontend/new-web/src/views/dashboard/analysis/modules/visitor-insights.vue
index bfaee20d..04ed5941 100644
--- a/frontend/new-web/src/views/dashboard/analysis/modules/visitor-insights.vue
+++ b/frontend/new-web/src/views/dashboard/analysis/modules/visitor-insights.vue
@@ -18,26 +18,26 @@
 </template>
 
 <script setup lang="ts">
-  import type { LineDataItem } from '@/types/component/chart'
+import type { LineDataItem } from "@/types/component/chart";
 
-  /**
-   * X 轴数据配置
-   * 表示一年的月份（1-12月）
-   */
-  const xAxisData = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
+/**
+ * X 轴数据配置
+ * 表示一年的月份（1-12月）
+ */
+const xAxisData = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
 
-  /**
-   * 访客洞察图表数据
-   * 对比老客户和新客户的全年访问趋势
-   */
-  const chartData = computed<LineDataItem[]>(() => [
-    {
-      name: '老客户',
-      data: [280, 350, 300, 250, 230, 210, 240, 280, 320, 350, 300, 200]
-    },
-    {
-      name: '新客户',
-      data: [260, 200, 150, 130, 180, 270, 340, 380, 300, 220, 170, 130]
-    }
-  ])
+/**
+ * 访客洞察图表数据
+ * 对比老客户和新客户的全年访问趋势
+ */
+const chartData = computed<LineDataItem[]>(() => [
+  {
+    name: "老客户",
+    data: [280, 350, 300, 250, 230, 210, 240, 280, 320, 350, 300, 200],
+  },
+  {
+    name: "新客户",
+    data: [260, 200, 150, 130, 180, 270, 340, 380, 300, 220, 170, 130],
+  },
+]);
 </script>
diff --git a/frontend/new-web/src/views/dashboard/analysis/modules/volume-service-level.vue b/frontend/new-web/src/views/dashboard/analysis/modules/volume-service-level.vue
index fcb0bc2d..0bced7d2 100644
--- a/frontend/new-web/src/views/dashboard/analysis/modules/volume-service-level.vue
+++ b/frontend/new-web/src/views/dashboard/analysis/modules/volume-service-level.vue
@@ -20,32 +20,32 @@
 </template>
 
 <script setup lang="ts">
-  interface VolumeServiceDataItem {
-    name: string
-    data: number[]
-    stack: string
-  }
+interface VolumeServiceDataItem {
+  name: string;
+  data: number[];
+  stack: string;
+}
 
-  /**
-   * 服务类别数据
-   * 不同产品的分类标签
-   */
-  const serviceCategories = ref(['产品A', '产品B', '产品C', '产品D', '产品E'])
+/**
+ * 服务类别数据
+ * 不同产品的分类标签
+ */
+const serviceCategories = ref(["产品A", "产品B", "产品C", "产品D", "产品E"]);
 
-  /**
-   * 业务量与服务量数据
-   * 展示各产品的业务量和服务量对比，使用堆叠柱状图展示
-   */
-  const volumeServiceData = ref<VolumeServiceDataItem[]>([
-    {
-      name: '业务量',
-      data: [20, 25, 30, 35, 40],
-      stack: 'total'
-    },
-    {
-      name: '服务量',
-      data: [30, 35, 40, 45, 50],
-      stack: 'total'
-    }
-  ])
+/**
+ * 业务量与服务量数据
+ * 展示各产品的业务量和服务量对比，使用堆叠柱状图展示
+ */
+const volumeServiceData = ref<VolumeServiceDataItem[]>([
+  {
+    name: "业务量",
+    data: [20, 25, 30, 35, 40],
+    stack: "total",
+  },
+  {
+    name: "服务量",
+    data: [30, 35, 40, 45, 50],
+    stack: "total",
+  },
+]);
 </script>
diff --git a/frontend/new-web/src/views/dashboard/console/index.vue b/frontend/new-web/src/views/dashboard/console/index.vue
index 154c3301..85472cfa 100755
--- a/frontend/new-web/src/views/dashboard/console/index.vue
+++ b/frontend/new-web/src/views/dashboard/console/index.vue
@@ -29,13 +29,13 @@
 </template>
 
 <script setup lang="ts">
-  import CardList from './modules/card-list.vue'
-  import ActiveUser from './modules/active-user.vue'
-  import SalesOverview from './modules/sales-overview.vue'
-  import NewUser from './modules/new-user.vue'
-  import Dynamic from './modules/dynamic-stats.vue'
-  import TodoList from './modules/todo-list.vue'
-  import AboutProject from './modules/about-project.vue'
+import CardList from "./modules/card-list.vue";
+import ActiveUser from "./modules/active-user.vue";
+import SalesOverview from "./modules/sales-overview.vue";
+import NewUser from "./modules/new-user.vue";
+import Dynamic from "./modules/dynamic-stats.vue";
+import TodoList from "./modules/todo-list.vue";
+import AboutProject from "./modules/about-project.vue";
 
-  defineOptions({ name: 'Console' })
+defineOptions({ name: "Console" });
 </script>
diff --git a/frontend/new-web/src/views/dashboard/console/modules/about-project.vue b/frontend/new-web/src/views/dashboard/console/modules/about-project.vue
index ed946ce3..203775aa 100644
--- a/frontend/new-web/src/views/dashboard/console/modules/about-project.vue
+++ b/frontend/new-web/src/views/dashboard/console/modules/about-project.vue
@@ -22,23 +22,23 @@
 </template>
 
 <script setup lang="ts">
-  import AppConfig from '@/config'
-  import { WEB_LINKS } from '@/utils/constants'
+import AppConfig from "@/config";
+import { WEB_LINKS } from "@/utils/constants";
 
-  const systemName = AppConfig.systemInfo.name
+const systemName = AppConfig.systemInfo.name;
 
-  const linkList = [
-    { label: '项目官网', url: WEB_LINKS.DOCS },
-    { label: '文档', url: WEB_LINKS.INTRODUCE },
-    { label: 'Github', url: WEB_LINKS.GITHUB_HOME },
-    { label: '哔哩哔哩', url: WEB_LINKS.BILIBILI }
-  ]
+const linkList = [
+  { label: "项目官网", url: WEB_LINKS.DOCS },
+  { label: "文档", url: WEB_LINKS.INTRODUCE },
+  { label: "Github", url: WEB_LINKS.GITHUB_HOME },
+  { label: "哔哩哔哩", url: WEB_LINKS.BILIBILI },
+];
 
-  /**
-   * 在新标签页中打开指定 URL
-   * @param url 要打开的网页地址
-   */
-  const goPage = (url: string): void => {
-    window.open(url, '_blank', 'noopener,noreferrer')
-  }
+/**
+ * 在新标签页中打开指定 URL
+ * @param url 要打开的网页地址
+ */
+const goPage = (url: string): void => {
+  window.open(url, "_blank", "noopener,noreferrer");
+};
 </script>
diff --git a/frontend/new-web/src/views/dashboard/console/modules/active-user.vue b/frontend/new-web/src/views/dashboard/console/modules/active-user.vue
index da740f27..feeda30b 100755
--- a/frontend/new-web/src/views/dashboard/console/modules/active-user.vue
+++ b/frontend/new-web/src/views/dashboard/console/modules/active-user.vue
@@ -10,7 +10,10 @@
     />
     <div class="ml-1">
       <h3 class="mt-5 text-lg font-medium">用户概述</h3>
-      <p class="mt-1 text-sm">比上周 <span class="text-success font-medium">+23%</span></p>
+      <p class="mt-1 text-sm">
+        比上周
+        <span class="text-success font-medium">+23%</span>
+      </p>
       <p class="mt-1 text-sm">我们为您创建了多个选项，可将它们组合在一起并定制为像素完美的页面</p>
     </div>
     <div class="flex-b mt-2">
@@ -23,25 +26,25 @@
 </template>
 
 <script setup lang="ts">
-  interface UserStatItem {
-    name: string
-    num: string
-  }
+interface UserStatItem {
+  name: string;
+  num: string;
+}
 
-  // 最近9个月
-  const xAxisLabels = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月']
+// 最近9个月
+const xAxisLabels = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月"];
 
-  // 每月活跃用户数
-  const chartData = [160, 100, 150, 80, 190, 100, 175, 120, 160]
+// 每月活跃用户数
+const chartData = [160, 100, 150, 80, 190, 100, 175, 120, 160];
 
-  /**
-   * 用户统计数据列表
-   * 包含总用户量、总访问量、日访问量和周同比等关键指标
-   */
-  const list: UserStatItem[] = [
-    { name: '总用户量', num: '32k' },
-    { name: '总访问量', num: '128k' },
-    { name: '日访问量', num: '1.2k' },
-    { name: '周同比', num: '+5%' }
-  ]
+/**
+ * 用户统计数据列表
+ * 包含总用户量、总访问量、日访问量和周同比等关键指标
+ */
+const list: UserStatItem[] = [
+  { name: "总用户量", num: "32k" },
+  { name: "总访问量", num: "128k" },
+  { name: "日访问量", num: "1.2k" },
+  { name: "周同比", num: "+5%" },
+];
 </script>
diff --git a/frontend/new-web/src/views/dashboard/console/modules/card-list.vue b/frontend/new-web/src/views/dashboard/console/modules/card-list.vue
index 5fc76a7f..a16921f7 100755
--- a/frontend/new-web/src/views/dashboard/console/modules/card-list.vue
+++ b/frontend/new-web/src/views/dashboard/console/modules/card-list.vue
@@ -24,51 +24,51 @@
 </template>
 
 <script setup lang="ts">
-  interface CardDataItem {
-    des: string
-    icon: string
-    startVal: number
-    duration: number
-    num: number
-    change: string
-  }
+interface CardDataItem {
+  des: string;
+  icon: string;
+  startVal: number;
+  duration: number;
+  num: number;
+  change: string;
+}
 
-  /**
-   * 卡片统计数据列表
-   * 展示总访问次数、在线访客数、点击量和新用户等核心数据指标
-   */
-  const dataList = reactive<CardDataItem[]>([
-    {
-      des: '总访问次数',
-      icon: 'ri:pie-chart-line',
-      startVal: 0,
-      duration: 1000,
-      num: 9120,
-      change: '+20%'
-    },
-    {
-      des: '在线访客数',
-      icon: 'ri:group-line',
-      startVal: 0,
-      duration: 1000,
-      num: 182,
-      change: '+10%'
-    },
-    {
-      des: '点击量',
-      icon: 'ri:fire-line',
-      startVal: 0,
-      duration: 1000,
-      num: 9520,
-      change: '-12%'
-    },
-    {
-      des: '新用户',
-      icon: 'ri:progress-2-line',
-      startVal: 0,
-      duration: 1000,
-      num: 156,
-      change: '+30%'
-    }
-  ])
+/**
+ * 卡片统计数据列表
+ * 展示总访问次数、在线访客数、点击量和新用户等核心数据指标
+ */
+const dataList = reactive<CardDataItem[]>([
+  {
+    des: "总访问次数",
+    icon: "ri:pie-chart-line",
+    startVal: 0,
+    duration: 1000,
+    num: 9120,
+    change: "+20%",
+  },
+  {
+    des: "在线访客数",
+    icon: "ri:group-line",
+    startVal: 0,
+    duration: 1000,
+    num: 182,
+    change: "+10%",
+  },
+  {
+    des: "点击量",
+    icon: "ri:fire-line",
+    startVal: 0,
+    duration: 1000,
+    num: 9520,
+    change: "-12%",
+  },
+  {
+    des: "新用户",
+    icon: "ri:progress-2-line",
+    startVal: 0,
+    duration: 1000,
+    num: 156,
+    change: "+30%",
+  },
+]);
 </script>
diff --git a/frontend/new-web/src/views/dashboard/console/modules/dynamic-stats.vue b/frontend/new-web/src/views/dashboard/console/modules/dynamic-stats.vue
index 18769505..8aa77788 100755
--- a/frontend/new-web/src/views/dashboard/console/modules/dynamic-stats.vue
+++ b/frontend/new-web/src/views/dashboard/console/modules/dynamic-stats.vue
@@ -3,7 +3,10 @@
     <div class="art-card-header">
       <div class="title">
         <h4>动态</h4>
-        <p>新增<span class="text-success">+6</span></p>
+        <p>
+          新增
+          <span class="text-success">+6</span>
+        </p>
       </div>
     </div>
 
@@ -24,56 +27,56 @@
 </template>
 
 <script setup lang="ts">
-  interface DynamicItem {
-    username: string
-    type: string
-    target: string
-  }
+interface DynamicItem {
+  username: string;
+  type: string;
+  target: string;
+}
 
-  /**
-   * 用户动态列表
-   * 记录用户的关注、发文、提问、兑换等各类活动
-   */
-  const list = reactive<DynamicItem[]>([
-    {
-      username: '中小鱼',
-      type: '关注了',
-      target: '誶誶淰'
-    },
-    {
-      username: '何小荷',
-      type: '发表文章',
-      target: 'Vue3 + Typescript + Vite 项目实战笔记'
-    },
-    {
-      username: '中小鱼',
-      type: '关注了',
-      target: '誶誶淰'
-    },
-    {
-      username: '何小荷',
-      type: '发表文章',
-      target: 'Vue3 + Typescript + Vite 项目实战笔记'
-    },
-    {
-      username: '誶誶淰',
-      type: '提出问题',
-      target: '主题可以配置吗'
-    },
-    {
-      username: '发呆草',
-      type: '兑换了物品',
-      target: '《奇特的一生》'
-    },
-    {
-      username: '甜筒',
-      type: '关闭了问题',
-      target: '发呆草'
-    },
-    {
-      username: '冷月呆呆',
-      type: '兑换了物品',
-      target: '《高效人士的七个习惯》'
-    }
-  ])
+/**
+ * 用户动态列表
+ * 记录用户的关注、发文、提问、兑换等各类活动
+ */
+const list = reactive<DynamicItem[]>([
+  {
+    username: "中小鱼",
+    type: "关注了",
+    target: "誶誶淰",
+  },
+  {
+    username: "何小荷",
+    type: "发表文章",
+    target: "Vue3 + Typescript + Vite 项目实战笔记",
+  },
+  {
+    username: "中小鱼",
+    type: "关注了",
+    target: "誶誶淰",
+  },
+  {
+    username: "何小荷",
+    type: "发表文章",
+    target: "Vue3 + Typescript + Vite 项目实战笔记",
+  },
+  {
+    username: "誶誶淰",
+    type: "提出问题",
+    target: "主题可以配置吗",
+  },
+  {
+    username: "发呆草",
+    type: "兑换了物品",
+    target: "《奇特的一生》",
+  },
+  {
+    username: "甜筒",
+    type: "关闭了问题",
+    target: "发呆草",
+  },
+  {
+    username: "冷月呆呆",
+    type: "兑换了物品",
+    target: "《高效人士的七个习惯》",
+  },
+]);
 </script>
diff --git a/frontend/new-web/src/views/dashboard/console/modules/new-user.vue b/frontend/new-web/src/views/dashboard/console/modules/new-user.vue
index 9d395228..6b4a9792 100755
--- a/frontend/new-web/src/views/dashboard/console/modules/new-user.vue
+++ b/frontend/new-web/src/views/dashboard/console/modules/new-user.vue
@@ -3,7 +3,10 @@
     <div class="art-card-header">
       <div class="title">
         <h4>新用户</h4>
-        <p>这个月增长<span class="text-success">+20%</span></p>
+        <p>
+          这个月增长
+          <span class="text-success">+20%</span>
+        </p>
       </div>
       <ElRadioGroup v-model="radio2">
         <ElRadioButton value="本月" label="本月"></ElRadioButton>
@@ -33,7 +36,7 @@
         <ElTableColumn label="性别" prop="avatar">
           <template #default="scope">
             <div style="display: flex; align-items: center">
-              <span style="margin-left: 10px">{{ scope.row.sex === 1 ? '男' : '女' }}</span>
+              <span style="margin-left: 10px">{{ scope.row.sex === 1 ? "男" : "女" }}</span>
             </div>
           </template>
         </ElTableColumn>
@@ -53,117 +56,117 @@
 </template>
 
 <script setup lang="ts">
-  import avatar1 from '@/assets/images/avatar/avatar1.webp'
-  import avatar2 from '@/assets/images/avatar/avatar2.webp'
-  import avatar3 from '@/assets/images/avatar/avatar3.webp'
-  import avatar4 from '@/assets/images/avatar/avatar4.webp'
-  import avatar5 from '@/assets/images/avatar/avatar5.webp'
-  import avatar6 from '@/assets/images/avatar/avatar6.webp'
+import avatar1 from "@/assets/images/avatar/avatar1.webp";
+import avatar2 from "@/assets/images/avatar/avatar2.webp";
+import avatar3 from "@/assets/images/avatar/avatar3.webp";
+import avatar4 from "@/assets/images/avatar/avatar4.webp";
+import avatar5 from "@/assets/images/avatar/avatar5.webp";
+import avatar6 from "@/assets/images/avatar/avatar6.webp";
 
-  interface UserTableItem {
-    username: string
-    province: string
-    sex: 0 | 1
-    age: number
-    percentage: number
-    pro: number
-    color: string
-    avatar: string
-  }
+interface UserTableItem {
+  username: string;
+  province: string;
+  sex: 0 | 1;
+  age: number;
+  percentage: number;
+  pro: number;
+  color: string;
+  avatar: string;
+}
 
-  const ANIMATION_DELAY = 100
+const ANIMATION_DELAY = 100;
 
-  const radio2 = ref('本月')
+const radio2 = ref("本月");
 
-  /**
-   * 新用户表格数据
-   * 包含用户基本信息和完成进度
-   */
-  const tableData = reactive<UserTableItem[]>([
-    {
-      username: '中小鱼',
-      province: '北京',
-      sex: 0,
-      age: 22,
-      percentage: 60,
-      pro: 0,
-      color: 'var(--art-primary)',
-      avatar: avatar1
-    },
-    {
-      username: '何小荷',
-      province: '深圳',
-      sex: 1,
-      age: 21,
-      percentage: 20,
-      pro: 0,
-      color: 'var(--art-secondary)',
-      avatar: avatar2
-    },
-    {
-      username: '誶誶淰',
-      province: '上海',
-      sex: 1,
-      age: 23,
-      percentage: 60,
-      pro: 0,
-      color: 'var(--art-warning)',
-      avatar: avatar3
-    },
-    {
-      username: '发呆草',
-      province: '长沙',
-      sex: 0,
-      age: 28,
-      percentage: 50,
-      pro: 0,
-      color: 'var(--art-info)',
-      avatar: avatar4
-    },
-    {
-      username: '甜筒',
-      province: '浙江',
-      sex: 1,
-      age: 26,
-      percentage: 70,
-      pro: 0,
-      color: 'var(--art-error)',
-      avatar: avatar5
-    },
-    {
-      username: '冷月呆呆',
-      province: '湖北',
-      sex: 1,
-      age: 25,
-      percentage: 90,
-      pro: 0,
-      color: 'var(--art-success)',
-      avatar: avatar6
-    }
-  ])
+/**
+ * 新用户表格数据
+ * 包含用户基本信息和完成进度
+ */
+const tableData = reactive<UserTableItem[]>([
+  {
+    username: "中小鱼",
+    province: "北京",
+    sex: 0,
+    age: 22,
+    percentage: 60,
+    pro: 0,
+    color: "var(--art-primary)",
+    avatar: avatar1,
+  },
+  {
+    username: "何小荷",
+    province: "深圳",
+    sex: 1,
+    age: 21,
+    percentage: 20,
+    pro: 0,
+    color: "var(--art-secondary)",
+    avatar: avatar2,
+  },
+  {
+    username: "誶誶淰",
+    province: "上海",
+    sex: 1,
+    age: 23,
+    percentage: 60,
+    pro: 0,
+    color: "var(--art-warning)",
+    avatar: avatar3,
+  },
+  {
+    username: "发呆草",
+    province: "长沙",
+    sex: 0,
+    age: 28,
+    percentage: 50,
+    pro: 0,
+    color: "var(--art-info)",
+    avatar: avatar4,
+  },
+  {
+    username: "甜筒",
+    province: "浙江",
+    sex: 1,
+    age: 26,
+    percentage: 70,
+    pro: 0,
+    color: "var(--art-error)",
+    avatar: avatar5,
+  },
+  {
+    username: "冷月呆呆",
+    province: "湖北",
+    sex: 1,
+    age: 25,
+    percentage: 90,
+    pro: 0,
+    color: "var(--art-success)",
+    avatar: avatar6,
+  },
+]);
 
-  /**
-   * 添加进度条动画效果
-   * 延迟后将进度值从 0 更新到目标百分比，触发动画
-   */
-  const addAnimation = (): void => {
-    setTimeout(() => {
-      tableData.forEach((item) => {
-        item.pro = item.percentage
-      })
-    }, ANIMATION_DELAY)
-  }
+/**
+ * 添加进度条动画效果
+ * 延迟后将进度值从 0 更新到目标百分比，触发动画
+ */
+const addAnimation = (): void => {
+  setTimeout(() => {
+    tableData.forEach((item) => {
+      item.pro = item.percentage;
+    });
+  }, ANIMATION_DELAY);
+};
 
-  onMounted(() => {
-    addAnimation()
-  })
+onMounted(() => {
+  addAnimation();
+});
 </script>
 
 <style lang="scss" scoped>
-  .art-card {
-    :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
-      color: var(--el-color-primary) !important;
-      background: transparent !important;
-    }
+.art-card {
+  :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
+    color: var(--el-color-primary) !important;
+    background: transparent !important;
   }
+}
 </style>
diff --git a/frontend/new-web/src/views/dashboard/console/modules/sales-overview.vue b/frontend/new-web/src/views/dashboard/console/modules/sales-overview.vue
index 32904b82..99a3bd3c 100755
--- a/frontend/new-web/src/views/dashboard/console/modules/sales-overview.vue
+++ b/frontend/new-web/src/views/dashboard/console/modules/sales-overview.vue
@@ -3,7 +3,10 @@
     <div class="art-card-header">
       <div class="title">
         <h4>访问量</h4>
-        <p>今年增长<span class="text-success">+15%</span></p>
+        <p>
+          今年增长
+          <span class="text-success">+15%</span>
+        </p>
       </div>
     </div>
     <ArtLineChart
@@ -17,27 +20,27 @@
 </template>
 
 <script setup lang="ts">
-  /**
-   * 全年访问量数据
-   * 记录每月的访问量统计
-   */
-  const data = [50, 25, 40, 20, 70, 35, 65, 30, 35, 20, 40, 44]
+/**
+ * 全年访问量数据
+ * 记录每月的访问量统计
+ */
+const data = [50, 25, 40, 20, 70, 35, 65, 30, 35, 20, 40, 44];
 
-  /**
-   * X 轴月份标签
-   */
-  const xAxisData = [
-    '1月',
-    '2月',
-    '3月',
-    '4月',
-    '5月',
-    '6月',
-    '7月',
-    '8月',
-    '9月',
-    '10月',
-    '11月',
-    '12月'
-  ]
+/**
+ * X 轴月份标签
+ */
+const xAxisData = [
+  "1月",
+  "2月",
+  "3月",
+  "4月",
+  "5月",
+  "6月",
+  "7月",
+  "8月",
+  "9月",
+  "10月",
+  "11月",
+  "12月",
+];
 </script>
diff --git a/frontend/new-web/src/views/dashboard/console/modules/todo-list.vue b/frontend/new-web/src/views/dashboard/console/modules/todo-list.vue
index ab9a86c2..fe07396b 100755
--- a/frontend/new-web/src/views/dashboard/console/modules/todo-list.vue
+++ b/frontend/new-web/src/views/dashboard/console/modules/todo-list.vue
@@ -3,7 +3,10 @@
     <div class="art-card-header">
       <div class="title">
         <h4>代办事项</h4>
-        <p>待处理<span class="text-danger">3</span></p>
+        <p>
+          待处理
+          <span class="text-danger">3</span>
+        </p>
       </div>
     </div>
 
@@ -26,46 +29,46 @@
 </template>
 
 <script setup lang="ts">
-  interface TodoItem {
-    username: string
-    date: string
-    complate: boolean
-  }
+interface TodoItem {
+  username: string;
+  date: string;
+  complate: boolean;
+}
 
-  /**
-   * 待办事项列表
-   * 记录每日工作任务及完成状态
-   */
-  const list = reactive<TodoItem[]>([
-    {
-      username: '查看今天工作内容',
-      date: '上午 09:30',
-      complate: true
-    },
-    {
-      username: '回复邮件',
-      date: '上午 10:30',
-      complate: true
-    },
-    {
-      username: '工作汇报整理',
-      date: '上午 11:00',
-      complate: true
-    },
-    {
-      username: '产品需求会议',
-      date: '下午 02:00',
-      complate: false
-    },
-    {
-      username: '整理会议内容',
-      date: '下午 03:30',
-      complate: false
-    },
-    {
-      username: '明天工作计划',
-      date: '下午 06:30',
-      complate: false
-    }
-  ])
+/**
+ * 待办事项列表
+ * 记录每日工作任务及完成状态
+ */
+const list = reactive<TodoItem[]>([
+  {
+    username: "查看今天工作内容",
+    date: "上午 09:30",
+    complate: true,
+  },
+  {
+    username: "回复邮件",
+    date: "上午 10:30",
+    complate: true,
+  },
+  {
+    username: "工作汇报整理",
+    date: "上午 11:00",
+    complate: true,
+  },
+  {
+    username: "产品需求会议",
+    date: "下午 02:00",
+    complate: false,
+  },
+  {
+    username: "整理会议内容",
+    date: "下午 03:30",
+    complate: false,
+  },
+  {
+    username: "明天工作计划",
+    date: "下午 06:30",
+    complate: false,
+  },
+]);
 </script>
diff --git a/frontend/new-web/src/views/dashboard/ecommerce/index.vue b/frontend/new-web/src/views/dashboard/ecommerce/index.vue
index 9ca658d4..bae90c4f 100644
--- a/frontend/new-web/src/views/dashboard/ecommerce/index.vue
+++ b/frontend/new-web/src/views/dashboard/ecommerce/index.vue
@@ -59,19 +59,19 @@
 </template>
 
 <script setup lang="ts">
-  import Banner from './modules/banner.vue'
-  import TotalOrderVolume from './modules/total-order-volume.vue'
-  import TotalProducts from './modules/total-products.vue'
-  import SalesTrend from './modules/sales-trend.vue'
-  import SalesClassification from './modules/sales-classification.vue'
-  import TransactionList from './modules/transaction-list.vue'
-  import HotCommodity from './modules/hot-commodity.vue'
-  import RecentTransaction from './modules/recent-transaction.vue'
-  import AnnualSales from './modules/annual-sales.vue'
-  import ProductSales from './modules/product-sales.vue'
-  import SalesGrowth from './modules/sales-growth.vue'
-  import CartConversionRate from './modules/cart-conversion-rate.vue'
-  import HotProductsList from './modules/hot-products-list.vue'
+import Banner from "./modules/banner.vue";
+import TotalOrderVolume from "./modules/total-order-volume.vue";
+import TotalProducts from "./modules/total-products.vue";
+import SalesTrend from "./modules/sales-trend.vue";
+import SalesClassification from "./modules/sales-classification.vue";
+import TransactionList from "./modules/transaction-list.vue";
+import HotCommodity from "./modules/hot-commodity.vue";
+import RecentTransaction from "./modules/recent-transaction.vue";
+import AnnualSales from "./modules/annual-sales.vue";
+import ProductSales from "./modules/product-sales.vue";
+import SalesGrowth from "./modules/sales-growth.vue";
+import CartConversionRate from "./modules/cart-conversion-rate.vue";
+import HotProductsList from "./modules/hot-products-list.vue";
 
-  defineOptions({ name: 'Ecommerce' })
+defineOptions({ name: "Ecommerce" });
 </script>
diff --git a/frontend/new-web/src/views/dashboard/ecommerce/modules/banner.vue b/frontend/new-web/src/views/dashboard/ecommerce/modules/banner.vue
index 83bd3d8f..9f78c028 100644
--- a/frontend/new-web/src/views/dashboard/ecommerce/modules/banner.vue
+++ b/frontend/new-web/src/views/dashboard/ecommerce/modules/banner.vue
@@ -7,16 +7,16 @@
     :decoration="false"
     :meteorConfig="{
       enabled: true,
-      count: 10
+      count: 10,
     }"
     :buttonConfig="{
       show: false,
-      text: ''
+      text: '',
     }"
     :imageConfig="{
       src: bannerCover,
       width: '18rem',
-      bottom: '-7.5rem'
+      bottom: '-7.5rem',
     }"
     @click="handleBannerClick"
   >
@@ -46,20 +46,20 @@
 </template>
 
 <script setup lang="ts">
-  import bannerCover from '@imgs/login/lf_icon2.webp'
-  import { useUserStore } from '@/store/modules/user'
+import bannerCover from "@imgs/login/lf_icon2.webp";
+import { useUserStore } from "@/store/modules/user.store";
 
-  const userStore = useUserStore()
+const userStore = useUserStore();
 
-  /**
-   * 获取当前用户信息
-   */
-  const userInfo = computed(() => userStore.getUserInfo)
+/**
+ * 获取当前用户信息
+ */
+const userInfo = computed(() => userStore.getUserInfo);
 
-  /**
-   * 处理横幅点击事件
-   */
-  const handleBannerClick = (): void => {
-    // TODO: 添加横幅点击处理逻辑
-  }
+/**
+ * 处理横幅点击事件
+ */
+const handleBannerClick = (): void => {
+  // TODO: 添加横幅点击处理逻辑
+};
 </script>
diff --git a/frontend/new-web/src/views/dashboard/ecommerce/modules/hot-commodity.vue b/frontend/new-web/src/views/dashboard/ecommerce/modules/hot-commodity.vue
index 7258465f..a1fd22f0 100644
--- a/frontend/new-web/src/views/dashboard/ecommerce/modules/hot-commodity.vue
+++ b/frontend/new-web/src/views/dashboard/ecommerce/modules/hot-commodity.vue
@@ -32,43 +32,43 @@
 </template>
 
 <script setup lang="ts">
-  interface WeeklyItem {
-    icon: string
-    title: string
-    subtitle: string
-    value: string
-    iconBgClass: string
-    valueBgClass: string
-  }
+interface WeeklyItem {
+  icon: string;
+  title: string;
+  subtitle: string;
+  value: string;
+  iconBgClass: string;
+  valueBgClass: string;
+}
 
-  /**
-   * 本周热销商品列表
-   * 展示销量排名前三的商品信息
-   */
-  const weeklyList: WeeklyItem[] = [
-    {
-      icon: 'ri:money-cny-circle-line',
-      title: '智能手表Pro',
-      subtitle: '电子产品',
-      value: '1,286件',
-      iconBgClass: 'bg-theme/12 text-theme',
-      valueBgClass: 'bg-theme/12 text-theme'
-    },
-    {
-      icon: 'ri:money-cny-circle-line',
-      title: '时尚连衣裙',
-      subtitle: '女装服饰',
-      value: '892件',
-      iconBgClass: 'bg-success/12 text-success',
-      valueBgClass: 'bg-success/12 text-success'
-    },
-    {
-      icon: 'ri:money-cny-circle-line',
-      title: '厨房小家电',
-      subtitle: '家居用品',
-      value: '756件',
-      iconBgClass: 'bg-error/12 text-error',
-      valueBgClass: 'bg-error/12 text-error'
-    }
-  ]
+/**
+ * 本周热销商品列表
+ * 展示销量排名前三的商品信息
+ */
+const weeklyList: WeeklyItem[] = [
+  {
+    icon: "ri:money-cny-circle-line",
+    title: "智能手表Pro",
+    subtitle: "电子产品",
+    value: "1,286件",
+    iconBgClass: "bg-theme/12 text-theme",
+    valueBgClass: "bg-theme/12 text-theme",
+  },
+  {
+    icon: "ri:money-cny-circle-line",
+    title: "时尚连衣裙",
+    subtitle: "女装服饰",
+    value: "892件",
+    iconBgClass: "bg-success/12 text-success",
+    valueBgClass: "bg-success/12 text-success",
+  },
+  {
+    icon: "ri:money-cny-circle-line",
+    title: "厨房小家电",
+    subtitle: "家居用品",
+    value: "756件",
+    iconBgClass: "bg-error/12 text-error",
+    valueBgClass: "bg-error/12 text-error",
+  },
+];
 </script>
diff --git a/frontend/new-web/src/views/dashboard/ecommerce/modules/hot-products-list.vue b/frontend/new-web/src/views/dashboard/ecommerce/modules/hot-products-list.vue
index aabeb9fe..ff2566e5 100644
--- a/frontend/new-web/src/views/dashboard/ecommerce/modules/hot-products-list.vue
+++ b/frontend/new-web/src/views/dashboard/ecommerce/modules/hot-products-list.vue
@@ -55,141 +55,141 @@
 </template>
 
 <script setup lang="ts">
-  import product1 from '@/assets/images/3d/icon1.webp'
-  import product2 from '@/assets/images/3d/icon2.webp'
-  import product3 from '@/assets/images/3d/icon3.webp'
-  import product4 from '@/assets/images/3d/icon4.webp'
-  import product5 from '@/assets/images/3d/icon5.webp'
-  import product6 from '@/assets/images/3d/icon6.webp'
+import product1 from "@/assets/images/3d/icon1.webp";
+import product2 from "@/assets/images/3d/icon2.webp";
+import product3 from "@/assets/images/3d/icon3.webp";
+import product4 from "@/assets/images/3d/icon4.webp";
+import product5 from "@/assets/images/3d/icon5.webp";
+import product6 from "@/assets/images/3d/icon6.webp";
 
-  interface ProductItem {
-    name: string
-    category: string
-    price: number
-    stock: number
-    sales: number
-    percentage: number
-    pro: number
-    color: string
-    image: string
-  }
+interface ProductItem {
+  name: string;
+  category: string;
+  price: number;
+  stock: number;
+  sales: number;
+  percentage: number;
+  pro: number;
+  color: string;
+  image: string;
+}
 
-  const ANIMATION_DELAY = 100
-  const STOCK_THRESHOLD = {
-    LOW: 20,
-    MEDIUM: 50
-  } as const
+const ANIMATION_DELAY = 100;
+const STOCK_THRESHOLD = {
+  LOW: 20,
+  MEDIUM: 50,
+} as const;
 
-  /**
-   * 热销产品表格数据
-   * 包含产品信息、库存、销量和销售趋势
-   */
-  const tableData = reactive<ProductItem[]>([
-    {
-      name: '智能手表 Pro',
-      category: '电子设备',
-      price: 1299,
-      stock: 156,
-      sales: 423,
-      percentage: 75,
-      pro: 0,
-      color: 'var(--art-primary)',
-      image: product1
-    },
-    {
-      name: '无线蓝牙耳机',
-      category: '音频设备',
-      price: 499,
-      stock: 89,
-      sales: 652,
-      percentage: 85,
-      pro: 0,
-      color: 'var(--art-success)',
-      image: product2
-    },
-    {
-      name: '机械键盘',
-      category: '电脑配件',
-      price: 399,
-      stock: 12,
-      sales: 238,
-      percentage: 45,
-      pro: 0,
-      color: 'var(--art-warning)',
-      image: product3
-    },
-    {
-      name: '超薄笔记本电脑',
-      category: '电子设备',
-      price: 5999,
-      stock: 0,
-      sales: 126,
-      percentage: 30,
-      pro: 0,
-      color: 'var(--art-error)',
-      image: product4
-    },
-    {
-      name: '智能音箱',
-      category: '智能家居',
-      price: 799,
-      stock: 45,
-      sales: 321,
-      percentage: 60,
-      pro: 0,
-      color: 'var(--art-info)',
-      image: product5
-    },
-    {
-      name: '游戏手柄',
-      category: '游戏配件',
-      price: 299,
-      stock: 78,
-      sales: 489,
-      percentage: 70,
-      pro: 0,
-      color: 'var(--art-secondary)',
-      image: product6
-    }
-  ])
+/**
+ * 热销产品表格数据
+ * 包含产品信息、库存、销量和销售趋势
+ */
+const tableData = reactive<ProductItem[]>([
+  {
+    name: "智能手表 Pro",
+    category: "电子设备",
+    price: 1299,
+    stock: 156,
+    sales: 423,
+    percentage: 75,
+    pro: 0,
+    color: "var(--art-primary)",
+    image: product1,
+  },
+  {
+    name: "无线蓝牙耳机",
+    category: "音频设备",
+    price: 499,
+    stock: 89,
+    sales: 652,
+    percentage: 85,
+    pro: 0,
+    color: "var(--art-success)",
+    image: product2,
+  },
+  {
+    name: "机械键盘",
+    category: "电脑配件",
+    price: 399,
+    stock: 12,
+    sales: 238,
+    percentage: 45,
+    pro: 0,
+    color: "var(--art-warning)",
+    image: product3,
+  },
+  {
+    name: "超薄笔记本电脑",
+    category: "电子设备",
+    price: 5999,
+    stock: 0,
+    sales: 126,
+    percentage: 30,
+    pro: 0,
+    color: "var(--art-error)",
+    image: product4,
+  },
+  {
+    name: "智能音箱",
+    category: "智能家居",
+    price: 799,
+    stock: 45,
+    sales: 321,
+    percentage: 60,
+    pro: 0,
+    color: "var(--art-info)",
+    image: product5,
+  },
+  {
+    name: "游戏手柄",
+    category: "游戏配件",
+    price: 299,
+    stock: 78,
+    sales: 489,
+    percentage: 70,
+    pro: 0,
+    color: "var(--art-secondary)",
+    image: product6,
+  },
+]);
 
-  /**
-   * 根据库存数量获取状态文本
-   * @param stock 库存数量
-   * @returns 库存状态文本
-   */
-  const getStockStatus = (stock: number): string => {
-    if (stock === 0) return '缺货'
-    if (stock < STOCK_THRESHOLD.LOW) return '低库存'
-    if (stock < STOCK_THRESHOLD.MEDIUM) return '适中'
-    return '充足'
-  }
+/**
+ * 根据库存数量获取状态文本
+ * @param stock 库存数量
+ * @returns 库存状态文本
+ */
+const getStockStatus = (stock: number): string => {
+  if (stock === 0) return "缺货";
+  if (stock < STOCK_THRESHOLD.LOW) return "低库存";
+  if (stock < STOCK_THRESHOLD.MEDIUM) return "适中";
+  return "充足";
+};
 
-  /**
-   * 根据库存数量获取状态样式类名
-   * @param stock 库存数量
-   * @returns CSS 类名
-   */
-  const getStockClass = (stock: number): string => {
-    if (stock === 0) return 'text-danger bg-danger/12'
-    if (stock < STOCK_THRESHOLD.LOW) return 'text-warning bg-warning/12'
-    if (stock < STOCK_THRESHOLD.MEDIUM) return 'text-info bg-info/12'
-    return 'text-success bg-success/12'
-  }
+/**
+ * 根据库存数量获取状态样式类名
+ * @param stock 库存数量
+ * @returns CSS 类名
+ */
+const getStockClass = (stock: number): string => {
+  if (stock === 0) return "text-danger bg-danger/12";
+  if (stock < STOCK_THRESHOLD.LOW) return "text-warning bg-warning/12";
+  if (stock < STOCK_THRESHOLD.MEDIUM) return "text-info bg-info/12";
+  return "text-success bg-success/12";
+};
 
-  /**
-   * 添加进度条动画效果
-   * 延迟后将进度值从 0 更新到目标百分比，触发动画
-   */
-  const addAnimation = (): void => {
-    setTimeout(() => {
-      tableData.forEach((item) => {
-        item.pro = item.percentage
-      })
-    }, ANIMATION_DELAY)
-  }
+/**
+ * 添加进度条动画效果
+ * 延迟后将进度值从 0 更新到目标百分比，触发动画
+ */
+const addAnimation = (): void => {
+  setTimeout(() => {
+    tableData.forEach((item) => {
+      item.pro = item.percentage;
+    });
+  }, ANIMATION_DELAY);
+};
 
-  onMounted(() => {
-    addAnimation()
-  })
+onMounted(() => {
+  addAnimation();
+});
 </script>
diff --git a/frontend/new-web/src/views/dashboard/ecommerce/modules/recent-transaction.vue b/frontend/new-web/src/views/dashboard/ecommerce/modules/recent-transaction.vue
index 48f30283..030e9435 100644
--- a/frontend/new-web/src/views/dashboard/ecommerce/modules/recent-transaction.vue
+++ b/frontend/new-web/src/views/dashboard/ecommerce/modules/recent-transaction.vue
@@ -8,50 +8,50 @@
 </template>
 
 <script setup lang="ts">
-  interface TimelineItem {
-    time: string
-    status: string
-    content: string
-    code?: string
-  }
+interface TimelineItem {
+  time: string;
+  status: string;
+  content: string;
+  code?: string;
+}
 
-  /**
-   * 最近交易时间线数据
-   * 记录今日订单处理、商品上架、支付等关键活动
-   */
-  const timelineData: TimelineItem[] = [
-    {
-      time: '上午 09:30',
-      status: 'rgb(73, 190, 255)',
-      content: '收到订单 #38291 支付 ¥385.90'
-    },
-    {
-      time: '上午 10:00',
-      status: 'rgb(54, 158, 255)',
-      content: '新商品上架',
-      code: 'SKU-3467'
-    },
-    {
-      time: '上午 12:00',
-      status: 'rgb(103, 232, 207)',
-      content: '向供应商支付了 ¥6495.00'
-    },
-    {
-      time: '下午 14:30',
-      status: 'rgb(255, 193, 7)',
-      content: '促销活动开始',
-      code: 'PROMO-2023'
-    },
-    {
-      time: '下午 15:45',
-      status: 'rgb(255, 105, 105)',
-      content: '订单取消提醒',
-      code: 'ORD-9876'
-    },
-    {
-      time: '下午 17:00',
-      status: 'rgb(103, 232, 207)',
-      content: '完成日销售报表'
-    }
-  ]
+/**
+ * 最近交易时间线数据
+ * 记录今日订单处理、商品上架、支付等关键活动
+ */
+const timelineData: TimelineItem[] = [
+  {
+    time: "上午 09:30",
+    status: "rgb(73, 190, 255)",
+    content: "收到订单 #38291 支付 ¥385.90",
+  },
+  {
+    time: "上午 10:00",
+    status: "rgb(54, 158, 255)",
+    content: "新商品上架",
+    code: "SKU-3467",
+  },
+  {
+    time: "上午 12:00",
+    status: "rgb(103, 232, 207)",
+    content: "向供应商支付了 ¥6495.00",
+  },
+  {
+    time: "下午 14:30",
+    status: "rgb(255, 193, 7)",
+    content: "促销活动开始",
+    code: "PROMO-2023",
+  },
+  {
+    time: "下午 15:45",
+    status: "rgb(255, 105, 105)",
+    content: "订单取消提醒",
+    code: "ORD-9876",
+  },
+  {
+    time: "下午 17:00",
+    status: "rgb(103, 232, 207)",
+    content: "完成日销售报表",
+  },
+];
 </script>
diff --git a/frontend/new-web/src/views/dashboard/ecommerce/modules/sales-classification.vue b/frontend/new-web/src/views/dashboard/ecommerce/modules/sales-classification.vue
index 1263e1d1..223b75a1 100644
--- a/frontend/new-web/src/views/dashboard/ecommerce/modules/sales-classification.vue
+++ b/frontend/new-web/src/views/dashboard/ecommerce/modules/sales-classification.vue
@@ -11,7 +11,7 @@
       :data="[
         { value: 30, name: '电子产品' },
         { value: 55, name: '服装鞋包' },
-        { value: 36, name: '家居用品' }
+        { value: 36, name: '家居用品' },
       ]"
       :color="['#4C87F3', '#EDF2FF', '#8BD8FC']"
       :radius="['70%', '80%']"
diff --git a/frontend/new-web/src/views/dashboard/ecommerce/modules/total-order-volume.vue b/frontend/new-web/src/views/dashboard/ecommerce/modules/total-order-volume.vue
index 724e3670..8c2764d4 100644
--- a/frontend/new-web/src/views/dashboard/ecommerce/modules/total-order-volume.vue
+++ b/frontend/new-web/src/views/dashboard/ecommerce/modules/total-order-volume.vue
@@ -11,7 +11,7 @@
       :data="[
         { value: 30, name: '已完成' },
         { value: 25, name: '处理中' },
-        { value: 45, name: '待发货' }
+        { value: 45, name: '待发货' },
       ]"
       :color="['#4C87F3', '#93F1B4', '#8BD8FC']"
       :radius="['56%', '76%']"
diff --git a/frontend/new-web/src/views/dashboard/ecommerce/modules/transaction-list.vue b/frontend/new-web/src/views/dashboard/ecommerce/modules/transaction-list.vue
index 9a9791c5..fe87febd 100644
--- a/frontend/new-web/src/views/dashboard/ecommerce/modules/transaction-list.vue
+++ b/frontend/new-web/src/views/dashboard/ecommerce/modules/transaction-list.vue
@@ -11,60 +11,60 @@
 </template>
 
 <script setup lang="ts">
-  interface TransactionItem {
-    title: string
-    status: string
-    time: string
-    class: string
-    icon: string
-  }
+interface TransactionItem {
+  title: string;
+  status: string;
+  time: string;
+  class: string;
+  icon: string;
+}
 
-  /**
-   * 最近活动数据列表
-   * 展示订单处理、退款申请、投诉处理等业务活动状态
-   */
-  const dataList: TransactionItem[] = [
-    {
-      title: '新订单 #38291',
-      status: '待处理',
-      time: '5分钟',
-      class: 'bg-theme/12 text-theme',
-      icon: 'ri:shopping-bag-4-line'
-    },
-    {
-      title: '退款申请 #12845',
-      status: '处理中',
-      time: '10分钟',
-      class: 'bg-secondary/12 text-secondary',
-      icon: 'ri:profile-line'
-    },
-    {
-      title: '客户投诉处理',
-      status: '待处理',
-      time: '15分钟',
-      class: 'bg-warning/12 text-warning',
-      icon: 'ri:customer-service-2-line'
-    },
-    {
-      title: '库存不足提醒',
-      status: '紧急',
-      time: '20分钟',
-      class: 'bg-danger/12 text-danger',
-      icon: 'ri:box-1-line'
-    },
-    {
-      title: '订单 #29384 已发货',
-      status: '已完成',
-      time: '20分钟',
-      class: 'bg-success/12 text-success',
-      icon: 'ri:shopping-bag-3-line'
-    }
-  ]
+/**
+ * 最近活动数据列表
+ * 展示订单处理、退款申请、投诉处理等业务活动状态
+ */
+const dataList: TransactionItem[] = [
+  {
+    title: "新订单 #38291",
+    status: "待处理",
+    time: "5分钟",
+    class: "bg-theme/12 text-theme",
+    icon: "ri:shopping-bag-4-line",
+  },
+  {
+    title: "退款申请 #12845",
+    status: "处理中",
+    time: "10分钟",
+    class: "bg-secondary/12 text-secondary",
+    icon: "ri:profile-line",
+  },
+  {
+    title: "客户投诉处理",
+    status: "待处理",
+    time: "15分钟",
+    class: "bg-warning/12 text-warning",
+    icon: "ri:customer-service-2-line",
+  },
+  {
+    title: "库存不足提醒",
+    status: "紧急",
+    time: "20分钟",
+    class: "bg-danger/12 text-danger",
+    icon: "ri:box-1-line",
+  },
+  {
+    title: "订单 #29384 已发货",
+    status: "已完成",
+    time: "20分钟",
+    class: "bg-success/12 text-success",
+    icon: "ri:shopping-bag-3-line",
+  },
+];
 
-  /**
-   * 处理查看更多按钮点击事件
-   */
-  const handleMore = (): void => {
-    // TODO: 添加查看更多逻辑
-  }
+/**
+ * 处理查看更多按钮点击事件
+ */
+const handleMore = (): void => {
+  // TODO: 添加查看更多逻辑
+};
 </script>
diff --git a/frontend/new-web/src/views/dashboard/index.vue b/frontend/new-web/src/views/dashboard/index.vue
new file mode 100644
index 00000000..622effe5
--- /dev/null
+++ b/frontend/new-web/src/views/dashboard/index.vue
@@ -0,0 +1,602 @@
+<template>
+  <div class="dashboard-container">
+    <!-- github 角标 -->
+    <GithubCorner class="github-corner" />
+
+    <el-card shadow="hover">
+      <div class="flex flex-wrap">
+        <!-- 左侧问候语区域 -->
+        <div class="flex-1 flex items-start">
+          <div
+            class="w80px h80px rounded-full flex items-center justify-center bg-gray-100 overflow-hidden"
+          >
+            <img
+              v-if="userStore.basicInfo.avatar"
+              class="w-full h-full object-cover"
+              :src="userStore.basicInfo.avatar + '?imageView2/1/w/80/h/80'"
+            />
+            <el-icon v-else :size="40" class="text-secondary">
+              <UserFilled />
+            </el-icon>
+          </div>
+          <div class="ml-5">
+            <div class="text-20px font-bold mb-5px">
+              {{ timefix }}{{ userStore.basicInfo.name }}，{{ welcome }}
+            </div>
+            <p class="text-sm text-gray">今日天气晴朗，气温在15℃至25℃之间，东南风。</p>
+          </div>
+        </div>
+
+        <!-- 右侧图标区域 - PC端 -->
+        <div class="hidden sm:block">
+          <div class="flex items-end space-x-6">
+            <!-- 文档 -->
+            <div class="flex flex-col items-center">
+              <div class="font-bold color-#4080ff text-sm flex items-center">
+                <el-icon class="mr-2px"><Document /></el-icon>
+                文档
+              </div>
+              <div class="mt-3 whitespace-nowrap">
+                <el-link
+                  href="https://blog.csdn.net/weixin_46768253/article/details/149569141?spm=1001.2014.3001.5502"
+                  target="_blank"
+                >
+                  <div class="i-svg:csdn text-lg" />
+                </el-link>
+              </div>
+            </div>
+            <!-- 仓库 -->
+            <div class="flex flex-col items-center">
+              <div class="font-bold color-#ff9a2e text-sm flex items-center">
+                <el-icon class="mr-2px">
+                  <Folder />
+                </el-icon>
+                仓库
+              </div>
+              <div class="mt-3 whitespace-nowrap">
+                <el-link href="https://gitee.com/fastapiadmin/FastapiAdmin" target="_blank">
+                  <div class="i-svg:gitee text-lg color-#F76560" />
+                </el-link>
+                <el-divider direction="vertical" />
+                <el-link href="https://github.com/fastapiadmin/FastapiAdmin" target="_blank">
+                  <div class="i-svg:github text-lg color-#4080FF" />
+                </el-link>
+                <el-divider direction="vertical" />
+                <el-link href="https://gitcode.com/qq_36002987/FastapiAdmin" target="_blank">
+                  <div class="i-svg:gitcode text-lg color-#FF9A2E" />
+                </el-link>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 移动端图标区域 -->
+        <div class="w-full sm:hidden mt-3">
+          <div class="flex justify-end space-x-4 overflow-x-auto">
+            <!-- 仓库图标 -->
+            <el-link href="https://gitee.com/fastapiadmin/FastapiAdmin" target="_blank">
+              <div class="i-svg:gitee text-lg color-#F76560" />
+            </el-link>
+            <el-divider direction="vertical" />
+            <el-link href="https://github.com/fastapiadmin/FastapiAdmin" target="_blank">
+              <div class="i-svg:github text-lg color-#4080FF" />
+            </el-link>
+            <el-divider direction="vertical" />
+            <el-link href="https://gitcode.com/qq_36002987/FastapiAdmin" target="_blank">
+              <div class="i-svg:gitcode text-lg color-#FF9A2E" />
+            </el-link>
+          </div>
+        </div>
+      </div>
+    </el-card>
+
+    <!-- 数据统计 -->
+    <el-row :gutter="16" class="mt-4">
+      <!-- 在线用户数量 -->
+      <el-col :span="8" :xs="24" class="mb-xs-3">
+        <el-card shadow="hover" class="h-full flex flex-col">
+          <template #header>
+            <div class="flex-x-between">
+              <span class="text-gray">在线用户</span>
+              <el-tag type="danger" size="small">实时</el-tag>
+            </div>
+          </template>
+
+          <div class="flex-x-between mt-2 flex-1">
+            <div class="flex-y-center">
+              <span class="text-lg transition-all duration-300 hover:scale-110">9999</span>
+              <span v-if="true" class="ml-2 text-xs text-success">
+                <el-icon>
+                  <Connection />
+                </el-icon>
+                已连接
+              </span>
+              <span v-else class="ml-2 text-xs text-danger">
+                <el-icon>
+                  <Failed />
+                </el-icon>
+                未连接
+              </span>
+            </div>
+            <div class="i-svg:people w-8 h-8 animate-[pulse_2s_infinite]" />
+          </div>
+
+          <div class="flex-x-between mt-2 text-sm text-gray">
+            <span>更新时间</span>
+            <span>2025-07-12 00:00:00</span>
+          </div>
+        </el-card>
+      </el-col>
+
+      <!-- 访客数(UV) -->
+      <el-col :span="8" :xs="24" class="mb-xs-3">
+        <el-skeleton :loading="visitStatsLoading" :rows="5" animated>
+          <template #template>
+            <el-card>
+              <template #header>
+                <div>
+                  <el-skeleton-item variant="h3" style="width: 40%" />
+                  <el-skeleton-item variant="rect" style="float: right; width: 1em; height: 1em" />
+                </div>
+              </template>
+
+              <div class="flex-x-between">
+                <el-skeleton-item variant="text" style="width: 30%" />
+                <el-skeleton-item variant="circle" style="width: 2em; height: 2em" />
+              </div>
+              <div class="mt-5 flex-x-between">
+                <el-skeleton-item variant="text" style="width: 50%" />
+                <el-skeleton-item variant="text" style="width: 1em" />
+              </div>
+            </el-card>
+          </template>
+          <template v-if="!visitStatsLoading">
+            <el-card shadow="hover" class="h-full flex flex-col">
+              <template #header>
+                <div class="flex-x-between">
+                  <span class="text-gray">访客数(UV)</span>
+                  <el-tag type="success" size="small">日</el-tag>
+                </div>
+              </template>
+
+              <div class="flex-x-between mt-2 flex-1">
+                <div class="flex-y-center">
+                  <span class="text-lg">{{ Math.round(transitionUvCount) }}</span>
+                  <span
+                    :class="[
+                      'text-xs',
+                      'ml-2',
+                      computeGrowthRateClass(visitStatsData.uvGrowthRate),
+                    ]"
+                  >
+                    <el-icon>
+                      <Top v-if="visitStatsData.uvGrowthRate > 0" />
+                      <Bottom v-else-if="visitStatsData.uvGrowthRate < 0" />
+                    </el-icon>
+                    {{ formatGrowthRate(visitStatsData.uvGrowthRate) }}
+                  </span>
+                </div>
+                <div class="i-svg:visitor w-8 h-8" />
+              </div>
+
+              <div class="flex-x-between mt-2 text-sm text-gray">
+                <span>总访客数</span>
+                <span>{{ Math.round(transitionTotalUvCount) }}</span>
+              </div>
+            </el-card>
+          </template>
+        </el-skeleton>
+      </el-col>
+
+      <!-- 浏览量(PV) -->
+      <el-col :span="8" :xs="24">
+        <el-skeleton :loading="visitStatsLoading" :rows="5" animated>
+          <template #template>
+            <el-card>
+              <template #header>
+                <div>
+                  <el-skeleton-item variant="h3" style="width: 40%" />
+                  <el-skeleton-item variant="rect" style="float: right; width: 1em; height: 1em" />
+                </div>
+              </template>
+
+              <div class="flex-x-between">
+                <el-skeleton-item variant="text" style="width: 30%" />
+                <el-skeleton-item variant="circle" style="width: 2em; height: 2em" />
+              </div>
+              <div class="mt-5 flex-x-between">
+                <el-skeleton-item variant="text" style="width: 50%" />
+                <el-skeleton-item variant="text" style="width: 1em" />
+              </div>
+            </el-card>
+          </template>
+          <template v-if="!visitStatsLoading">
+            <el-card shadow="hover" class="h-full flex flex-col">
+              <template #header>
+                <div class="flex-x-between">
+                  <span class="text-gray">浏览量(PV)</span>
+                  <el-tag type="primary" size="small">日</el-tag>
+                </div>
+              </template>
+
+              <div class="flex-x-between mt-2 flex-1">
+                <div class="flex-y-center">
+                  <span class="text-lg">{{ Math.round(transitionPvCount) }}</span>
+                  <span
+                    :class="[
+                      'text-xs',
+                      'ml-2',
+                      computeGrowthRateClass(visitStatsData.pvGrowthRate),
+                    ]"
+                  >
+                    <el-icon>
+                      <Top v-if="visitStatsData.pvGrowthRate > 0" />
+                      <Bottom v-else-if="visitStatsData.pvGrowthRate < 0" />
+                    </el-icon>
+                    {{ formatGrowthRate(visitStatsData.pvGrowthRate) }}
+                  </span>
+                </div>
+                <div class="i-svg:browser w-8 h-8" />
+              </div>
+
+              <div class="flex-x-between mt-2 text-sm text-gray">
+                <span>总浏览量</span>
+                <span>{{ Math.round(transitionTotalPvCount) }}</span>
+              </div>
+            </el-card>
+          </template>
+        </el-skeleton>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="16" class="mt-4">
+      <!-- 访问趋势统计图 -->
+      <el-col :xs="24" :span="16">
+        <el-card>
+          <template #header>
+            <div class="flex-x-between">
+              <span>访问趋势</span>
+              <el-radio-group v-model="visitTrendDateRange" size="small">
+                <el-radio-button :value="7">近7天</el-radio-button>
+                <el-radio-button :value="30">近30天</el-radio-button>
+              </el-radio-group>
+            </div>
+          </template>
+          <ECharts :options="visitTrendChartOptions" height="calc(100vh - 550px)" />
+        </el-card>
+      </el-col>
+      <!-- 最新动态 -->
+      <el-col :xs="24" :span="8">
+        <el-card>
+          <template #header>
+            <div class="flex-x-between">
+              <span class="header-title">最新动态</span>
+              <el-link
+                type="primary"
+                underline="never"
+                href="https://gitee.com/fastapiadmin/FastapiAdmin/releases"
+                target="_blank"
+              >
+                完整记录
+                <el-icon class="link-icon">
+                  <TopRight />
+                </el-icon>
+              </el-link>
+            </div>
+          </template>
+
+          <el-scrollbar height="calc(100vh - 550px)">
+            <el-timeline class="p-3">
+              <el-timeline-item
+                v-for="(item, index) in vesionList"
+                :key="index"
+                :timestamp="item.date"
+                placement="top"
+                :color="index === 0 ? '#67C23A' : '#909399'"
+                :hollow="index !== 0"
+                size="large"
+              >
+                <div class="version-item" :class="{ 'latest-item': index === 0 }">
+                  <div class="flex-x-between">
+                    <el-text tag="strong">{{ item.title }}</el-text>
+                    <el-tag v-if="item.tag" :type="index === 0 ? 'success' : 'info'" size="small">
+                      {{ item.tag }}
+                    </el-tag>
+                  </div>
+
+                  <el-text class="version-content">{{ item.content }}</el-text>
+
+                  <div v-if="item.link">
+                    <el-link
+                      :type="index === 0 ? 'primary' : 'info'"
+                      :href="item.link"
+                      target="_blank"
+                      underline="never"
+                    >
+                      详情
+                      <el-icon class="link-icon">
+                        <TopRight />
+                      </el-icon>
+                    </el-link>
+                  </div>
+                </div>
+              </el-timeline-item>
+            </el-timeline>
+          </el-scrollbar>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  name: "PortalHome",
+  inheritAttrs: false,
+});
+
+import { dayjs } from "element-plus";
+import { useUserStore } from "@/store/modules/user.store";
+import { formatGrowthRate } from "@/utils";
+import { useTransition } from "@vueuse/core";
+import {
+  Bottom,
+  Connection,
+  Document,
+  Failed,
+  Folder,
+  Top,
+  TopRight,
+  UserFilled,
+} from "@element-plus/icons-vue";
+import { greetings } from "@/utils/common";
+
+const timefix = greetings();
+const welcome = "祝你开心每一天！";
+
+interface VersionItem {
+  id: string;
+  title: string; // 版本标题（如：v2.4.0）
+  date: string; // 发布时间
+  content: string; // 版本描述
+  link: string; // 详情链接
+  tag?: string; // 版本标签（可选）
+}
+
+const userStore = useUserStore();
+
+// 当前通知公告列表
+const vesionList = ref<VersionItem[]>([
+  {
+    id: "1",
+    title: "v3.2.1",
+    date: dayjs().format("YYYY-MM-DD HH:mm:ss"),
+    content: "优化性能，修复若干小bug。",
+    link: "https://gitee.com/fastapiadmin/FastapiAdmin/releases",
+    tag: "更新",
+  },
+  {
+    id: "2",
+    title: "v3.2.0",
+    date: dayjs().subtract(1, "day").format("YYYY-MM-DD HH:mm:ss"),
+    content: "新增用户行为分析功能。",
+    link: "https://gitee.com/fastapiadmin/FastapiAdmin/releases",
+    tag: "新功能",
+  },
+  {
+    id: "3",
+    title: "v3.1.0",
+    date: dayjs().subtract(3, "day").format("YYYY-MM-DD HH:mm:ss"),
+    content: "优化权限管理系统。",
+    link: "https://gitee.com/fastapiadmin/FastapiAdmin/releases",
+    tag: "优化",
+  },
+]);
+
+// 访客统计数据加载状态
+const visitStatsLoading = ref(true);
+// 访客统计数据
+const visitStatsData = ref({
+  todayUvCount: 0,
+  uvGrowthRate: 0,
+  totalUvCount: 0,
+  todayPvCount: 0,
+  pvGrowthRate: 0,
+  totalPvCount: 0,
+});
+
+// 数字过渡动画
+const transitionUvCount = useTransition(
+  computed(() => visitStatsData.value.todayUvCount),
+  {
+    duration: 1000,
+    transition: [0.25, 0.1, 0.25, 1.0], // CSS cubic-bezier
+  }
+);
+
+const transitionTotalUvCount = useTransition(
+  computed(() => visitStatsData.value.totalUvCount),
+  {
+    duration: 1200,
+    transition: [0.25, 0.1, 0.25, 1.0],
+  }
+);
+
+const transitionPvCount = useTransition(
+  computed(() => visitStatsData.value.todayPvCount),
+  {
+    duration: 1000,
+    transition: [0.25, 0.1, 0.25, 1.0],
+  }
+);
+
+const transitionTotalPvCount = useTransition(
+  computed(() => visitStatsData.value.totalPvCount),
+  {
+    duration: 1200,
+    transition: [0.25, 0.1, 0.25, 1.0],
+  }
+);
+
+// 访问趋势日期范围（单位：天）
+const visitTrendDateRange = ref(7);
+// 访问趋势图表配置
+const visitTrendChartOptions = ref();
+
+/**
+ * 更新访问趋势图表的配置项
+ *
+ * @param data - 访问趋势数据
+ */
+const updateVisitTrendChartOptions = () => {
+  visitTrendChartOptions.value = {
+    tooltip: {
+      trigger: "axis",
+    },
+    legend: {
+      data: ["浏览量(PV)", "访客数(UV)"],
+      bottom: 0,
+    },
+    grid: {
+      left: "1%",
+      right: "5%",
+      bottom: "10%",
+      containLabel: true,
+    },
+    xAxis: {
+      type: "category",
+      data: Array.from({ length: visitTrendDateRange.value }, (_, index) =>
+        dayjs()
+          .subtract(visitTrendDateRange.value - index - 1, "day")
+          .format("YYYY-MM-DD")
+      ),
+    },
+    yAxis: {
+      type: "value",
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: "dashed",
+        },
+      },
+    },
+    series: [
+      {
+        name: "浏览量(PV)",
+        type: "line",
+        data: Array.from(
+          { length: visitTrendDateRange.value },
+          () => Math.floor(Math.random() * 500) + 100
+        ),
+        areaStyle: {
+          color: "rgba(64, 158, 255, 0.1)",
+        },
+        smooth: true,
+        itemStyle: {
+          color: "#4080FF",
+        },
+        lineStyle: {
+          color: "#4080FF",
+        },
+      },
+      {
+        name: "访客数(UV)",
+        type: "line",
+        data: Array.from(
+          { length: visitTrendDateRange.value },
+          () => Math.floor(Math.random() * 200) + 50
+        ),
+        areaStyle: {
+          color: "rgba(103, 194, 58, 0.1)",
+        },
+        smooth: true,
+        itemStyle: {
+          color: "#67C23A",
+        },
+        lineStyle: {
+          color: "#67C23A",
+        },
+      },
+    ],
+  };
+};
+
+/**
+ * 根据增长率计算对应的 CSS 类名
+ *
+ * @param growthRate - 增长率数值
+ */
+const computeGrowthRateClass = (growthRate?: number): string => {
+  if (!growthRate) {
+    return "text-[--el-color-info]";
+  }
+  if (growthRate > 0) {
+    return "text-[--el-color-danger]";
+  } else if (growthRate < 0) {
+    return "text-[--el-color-success]";
+  } else {
+    return "text-[--el-color-info]";
+  }
+};
+
+// 监听访问趋势日期范围的变化，重新获取趋势数据
+watch(
+  () => visitTrendDateRange.value,
+  () => {
+    updateVisitTrendChartOptions();
+  },
+  { immediate: true }
+);
+
+// 组件挂载后加载访客统计数据和通知公告数据
+onMounted(() => {
+  visitStatsLoading.value = false;
+  visitStatsData.value = {
+    todayUvCount: Math.floor(Math.random() * 200) + 50,
+    uvGrowthRate: parseFloat((Math.random() * 20 - 10).toFixed(2)),
+    totalUvCount: Math.floor(Math.random() * 5000) + 1000,
+    todayPvCount: Math.floor(Math.random() * 500) + 100,
+    pvGrowthRate: parseFloat((Math.random() * 20 - 10).toFixed(2)),
+    totalPvCount: Math.floor(Math.random() * 20000) + 5000,
+  };
+  updateVisitTrendChartOptions();
+});
+</script>
+
+<style lang="scss" scoped>
+.dashboard-container {
+  position: relative;
+  padding: 16px;
+
+  .github-corner {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 1;
+    border: 0;
+  }
+
+  .version-item {
+    padding: 16px;
+    background: var(--el-fill-color-lighter);
+    border-radius: 8px;
+    transition: all 0.2s;
+
+    &.latest-item {
+      background: var(--el-color-primary-light-9);
+      border: 1px solid var(--el-color-primary-light-5);
+    }
+
+    &:hover {
+      transform: translateX(5px);
+    }
+
+    .version-content {
+      margin-bottom: 12px;
+      font-size: 13px;
+      line-height: 1.5;
+      color: var(--el-text-color-secondary);
+    }
+  }
+}
+</style>
diff --git a/frontend/new-web/src/views/dashboard/workplace-catalog.ts b/frontend/new-web/src/views/dashboard/workplace-catalog.ts
new file mode 100644
index 00000000..cf8e4e44
--- /dev/null
+++ b/frontend/new-web/src/views/dashboard/workplace-catalog.ts
@@ -0,0 +1,120 @@
+import type { MenuTable } from "@/api/module_system/menu";
+
+/**
+ * 工作台「模块总览」与 src/views 下目录对应：
+ * module_system / module_monitor / module_task / module_ai / module_application / module_generator / module_example / module_common
+ */
+export interface MenuLeaf {
+  title: string;
+  path: string;
+  icon?: string;
+  component_path?: string;
+  order?: number;
+}
+
+export interface WorkplaceModuleGroup {
+  key: string;
+  title: string;
+  subtitle: string;
+  /** 与菜单 component_path 片段匹配（含 views 相对路径） */
+  matchHints: string[];
+}
+
+/** 按「业务域」划分，与前端 views 目录一致 */
+export const WORKPLACE_MODULE_GROUPS: WorkplaceModuleGroup[] = [
+  {
+    key: "system",
+    title: "系统管理",
+    subtitle: "用户、角色、菜单、部门、字典、岗位、参数、公告、日志等",
+    matchHints: ["module_system/"],
+  },
+  {
+    key: "monitor",
+    title: "监控运维",
+    subtitle: "服务监控、缓存、在线用户、资源占用等",
+    matchHints: ["module_monitor/"],
+  },
+  {
+    key: "task",
+    title: "任务与流程",
+    subtitle: "定时任务、执行节点、工作流等",
+    matchHints: ["module_task/"],
+  },
+  {
+    key: "ai",
+    title: "AI 助手",
+    subtitle: "对话、记忆管理等",
+    matchHints: ["module_ai/"],
+  },
+  {
+    key: "app",
+    title: "应用与生成",
+    subtitle: "应用管理、代码生成、示例演示等",
+    matchHints: ["module_application/", "module_generator/", "module_example/"],
+  },
+  {
+    key: "docs",
+    title: "文档中心",
+    subtitle: "Swagger / Redoc / 本地文档等",
+    matchHints: ["module_common/"],
+  },
+];
+
+function normalizePath(p: string) {
+  return p.replace(/\\/g, "/");
+}
+
+/**
+ * 在已授权的叶子菜单中，按 matchHints 顺序找到第一个可进入的路由
+ */
+export function resolveEntryPath(
+  leaves: Pick<MenuLeaf, "path" | "component_path">[],
+  hints: string[]
+): string | undefined {
+  for (const hint of hints) {
+    const hit = leaves.find(
+      (l) => l.component_path && normalizePath(l.component_path).includes(hint)
+    );
+    if (hit) return hit.path;
+  }
+  return undefined;
+}
+
+export function resolveEntryTitle(leaves: MenuLeaf[], hints: string[]): string | undefined {
+  for (const hint of hints) {
+    const hit = leaves.find(
+      (l) => l.component_path && normalizePath(l.component_path).includes(hint)
+    );
+    if (hit) return hit.title;
+  }
+  return undefined;
+}
+
+/** 叶子菜单扁平化（与侧栏同源），按菜单 order 排序 */
+export function flattenLeafMenusFromTree(menus: MenuTable[]): MenuLeaf[] {
+  const seen = new Set<string>();
+  const out: MenuLeaf[] = [];
+  const walk = (items: MenuTable[]) => {
+    for (const m of items) {
+      if (m.hidden) continue;
+      if (m.children?.length) {
+        walk(m.children);
+      } else if (m.title && m.route_path) {
+        const raw = m.route_path.trim();
+        const path = raw.startsWith("/") ? raw : `/${raw}`;
+        if (seen.has(path)) continue;
+        seen.add(path);
+        out.push({
+          title: m.title,
+          path,
+          icon: m.icon,
+          component_path: m.component_path,
+          order: m.order,
+        });
+      }
+    }
+  };
+  walk(menus);
+  out.sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+  return out;
+}
diff --git a/frontend/new-web/src/views/dashboard/workplace.vue b/frontend/new-web/src/views/dashboard/workplace.vue
new file mode 100644
index 00000000..9ae58aee
--- /dev/null
+++ b/frontend/new-web/src/views/dashboard/workplace.vue
@@ -0,0 +1,1772 @@
+<template>
+  <div class="app-container workplace-page">
+    <div>
+      <ElCard shadow="hover" class="workplace-hero-card workplace-surface">
+        <div class="workplace-hero">
+          <div class="flex flex-wrap items-center gap-4 min-w-0 flex-1">
+            <div class="flex items-center md:mb-0">
+              <div class="workplace-hero__avatar-wrap">
+                <ElAvatar
+                  v-if="currentUser.avatar"
+                  size="large"
+                  :src="currentUser.avatar"
+                  class="workplace-hero__avatar"
+                />
+                <el-icon v-else :size="40" class="text-secondary workplace-hero__avatar-fallback">
+                  <UserFilled />
+                </el-icon>
+              </div>
+              <div>
+                <div class="workplace-hero__greeting">
+                  {{ timefix }}{{ currentUser.name }}，{{ welcome }}
+                </div>
+                <el-text class="workplace-hero__meta">
+                  {{ currentUser.username }} · {{ currentUser.dept_name }} ·
+                  {{ currentUser.description }}
+                </el-text>
+              </div>
+            </div>
+          </div>
+          <div class="workplace-hero__actions">
+            <div class="workplace-hero__login">
+              <div class="workplace-hero__login-label">最近登录</div>
+              <div class="workplace-hero__login-time">{{ currentUser.last_login }}</div>
+            </div>
+          </div>
+        </div>
+      </ElCard>
+
+      <ElRow :gutter="16" class="mt-4 workplace-module-row">
+        <ElCol :xs="24" :lg="16">
+          <ElCard class="workplace-modules-card workplace-surface" shadow="hover">
+            <template #header>
+              <div>
+                <span class="workplace-panel-title">模块入口</span>
+                <p class="workplace-section-sub workplace-section-sub--inline">
+                  按业务域进入；灰色表示暂无该域权限（完整列表见左侧导航）
+                </p>
+              </div>
+            </template>
+            <div class="workplace-module-grid">
+              <div
+                v-for="mod in moduleGroupEntries"
+                :key="mod.key"
+                class="workplace-module-card"
+                :class="{ 'is-disabled': !mod.entryPath }"
+                role="button"
+                :tabindex="mod.entryPath ? 0 : -1"
+                @click="goModuleEntry(mod.entryPath)"
+                @keydown.enter.prevent="goModuleEntry(mod.entryPath)"
+                @keydown.space.prevent="goModuleEntry(mod.entryPath)"
+              >
+                <div class="workplace-module-card__icon">
+                  <el-icon :size="26">
+                    <component :is="moduleGroupIcons[mod.key as keyof typeof moduleGroupIcons]" />
+                  </el-icon>
+                </div>
+                <div class="workplace-module-card__body">
+                  <span class="workplace-module-card__name">{{ mod.title }}</span>
+                  <span class="workplace-module-card__desc">{{ mod.subtitle }}</span>
+                  <span v-if="mod.entryPath" class="workplace-module-card__hint">
+                    将进入：{{ mod.entryLabel || "—" }}
+                  </span>
+                  <span
+                    v-else
+                    class="workplace-module-card__hint workplace-module-card__hint--muted"
+                  >
+                    暂无该域权限
+                  </span>
+                </div>
+                <el-icon class="workplace-module-card__arrow" :size="16">
+                  <Right />
+                </el-icon>
+              </div>
+            </div>
+          </ElCard>
+        </ElCol>
+        <ElCol :xs="24" :lg="8" class="workplace-bookmarks-col">
+          <ElCard class="workplace-bookmarks-card workplace-surface" shadow="hover">
+            <template #header>
+              <div class="workplace-bookmarks-card__header">
+                <div>
+                  <span class="workplace-panel-title workplace-bookmarks-card__title-line">
+                    <el-icon class="workplace-bookmarks-card__star" :size="18"><Star /></el-icon>
+                    我的收藏
+                    <el-tag
+                      v-if="quickLinks.length > 0"
+                      type="info"
+                      size="small"
+                      effect="plain"
+                      round
+                      class="workplace-bookmarks-card__count"
+                    >
+                      {{ quickLinks.length }}/{{ QUICK_LINK_MAX }}
+                    </el-tag>
+                  </span>
+                  <p class="workplace-section-sub workplace-section-sub--inline">
+                    最多 {{ QUICK_LINK_MAX }} 个 · 标签栏星标添加 · 仅本机
+                  </p>
+                </div>
+                <div class="workplace-bookmarks-card__header-actions">
+                  <el-tooltip
+                    content="在顶部标签栏左侧星标上点击，可加入或取消收藏"
+                    placement="top"
+                  >
+                    <el-icon class="workplace-module-bookmarks__help" :size="15">
+                      <QuestionFilled />
+                    </el-icon>
+                  </el-tooltip>
+                  <ElButton size="small" type="danger" plain @click="clearBookmarks()">
+                    <el-icon><Delete /></el-icon>
+                    {{ t("common.clear") }}
+                  </ElButton>
+                </div>
+              </div>
+            </template>
+            <div class="workplace-module-bookmarks">
+              <template v-if="quickLinks.length > 0">
+                <div class="workplace-quick-list workplace-quick-list--hub">
+                  <el-tooltip
+                    v-for="(item, index) in quickLinks"
+                    :key="item.id || `${item.href}-${index}`"
+                    placement="top"
+                    :show-after="400"
+                    :content="item.title"
+                  >
+                    <div
+                      class="workplace-quick-row workplace-quick-row--compact workplace-quick-row--chip"
+                      role="button"
+                      tabindex="0"
+                      @click="handleQuickLinkClick(item)"
+                      @keydown.enter.prevent="handleQuickLinkClick(item)"
+                      @keydown.space.prevent="handleQuickLinkClick(item)"
+                    >
+                      <span
+                        class="workplace-quick-row__accent"
+                        :style="{
+                          backgroundColor: getQuickLinkColor(getQuickLinkStableIndex(item)),
+                        }"
+                      />
+                      <div
+                        class="workplace-quick-row__icon"
+                        :style="{ color: getQuickLinkColor(getQuickLinkStableIndex(item)) }"
+                      >
+                        <el-icon v-if="item.icon && item.icon.startsWith('el-icon')">
+                          <component :is="item.icon.replace('el-icon-', '')" />
+                        </el-icon>
+                        <div v-else-if="item.icon" :class="`i-svg:${item.icon}`" />
+                        <div v-else class="i-svg:menu" />
+                      </div>
+                      <div class="workplace-quick-row__text">
+                        <span class="workplace-quick-row__title">{{ item.title }}</span>
+                      </div>
+                      <div class="workplace-quick-row__actions">
+                        <button
+                          type="button"
+                          class="workplace-quick-row__remove"
+                          :disabled="!item.id && !item.href"
+                          :title="item.id || item.href ? '移除收藏' : '无法移除（缺少路径）'"
+                          :aria-label="`移除收藏 ${item.title}`"
+                          @click.stop="handleDeleteLink(item)"
+                        >
+                          <el-icon><Close /></el-icon>
+                        </button>
+                      </div>
+                    </div>
+                  </el-tooltip>
+                </div>
+              </template>
+              <el-empty v-else :image-size="48" class="workplace-module-bookmarks__empty">
+                <template #description>
+                  <p class="workplace-quick-empty__title">暂无收藏</p>
+                  <p class="workplace-quick-empty__hint">
+                    在顶部
+                    <strong>标签栏</strong>
+                    左侧星标点击添加
+                  </p>
+                </template>
+              </el-empty>
+            </div>
+          </ElCard>
+        </ElCol>
+      </ElRow>
+    </div>
+
+    <!-- 运行快照/任务 与 日志/消息：独立纵向堆叠，避免 el-row 负边距与 flex 链导致块级重叠 -->
+    <div class="mt-4 workplace-ops-stack">
+      <ElRow :gutter="16" class="workplace-ops-row workplace-ops-row--pair">
+        <ElCol :xs="24" :md="12" class="workplace-ops-col">
+          <ElCard
+            v-loading="statsLoading"
+            shadow="hover"
+            class="workplace-snapshot-card workplace-surface workplace-ops-card"
+          >
+            <template #header>
+              <div class="workplace-snapshot-card__head">
+                <div>
+                  <span class="workplace-panel-title">运行快照</span>
+                  <p class="workplace-section-sub workplace-section-sub--inline">
+                    关键指标一览；可进菜单看全量
+                  </p>
+                </div>
+              </div>
+            </template>
+            <div class="workplace-snapshot-grid">
+              <div class="workplace-stat-tile">
+                <div class="workplace-stat-tile__label">系统用户</div>
+                <div class="workplace-stat-tile__value">
+                  {{ fmtMetric(overviewSnapshot.userTotal) }}
+                </div>
+                <div class="workplace-stat-tile__hint">账号总数</div>
+              </div>
+              <div class="workplace-stat-tile">
+                <div class="workplace-stat-tile__label">当前在线</div>
+                <div class="workplace-stat-tile__value">
+                  {{ fmtMetric(overviewSnapshot.onlineTotal) }}
+                </div>
+                <div class="workplace-stat-tile__hint">会话在线</div>
+              </div>
+              <div class="workplace-stat-tile">
+                <div class="workplace-stat-tile__label">本机负载</div>
+                <div class="workplace-stat-tile__value workplace-stat-tile__value--sm">
+                  CPU {{ fmtPercent(overviewSnapshot.cpuUsed) }} · 内存
+                  {{ fmtPercent(overviewSnapshot.memUsage) }}
+                </div>
+                <div class="workplace-stat-tile__hint">监控服务所在机器</div>
+              </div>
+              <div class="workplace-stat-tile">
+                <div class="workplace-stat-tile__label">调度任务</div>
+                <div class="workplace-stat-tile__value">
+                  {{ fmtMetric(overviewSnapshot.jobCount) }}
+                </div>
+                <div class="workplace-stat-tile__hint">
+                  {{ overviewSnapshot.schedulerStatus || "—" }}
+                  <template v-if="overviewSnapshot.schedulerRunning">· 引擎运行中</template>
+                </div>
+              </div>
+              <div class="workplace-stat-tile">
+                <div class="workplace-stat-tile__label">AI 与应用</div>
+                <div class="workplace-stat-tile__value workplace-stat-tile__value--sm">
+                  会话 {{ fmtMetric(overviewSnapshot.chatSessions) }} · 应用
+                  {{ fmtMetric(overviewSnapshot.appCount) }}
+                </div>
+                <div class="workplace-stat-tile__hint">对话列表与应用数量</div>
+              </div>
+            </div>
+            <div v-if="statsUpdatedAt" class="workplace-snapshot-card__foot">
+              <span class="workplace-snapshot-card__foot-dot" aria-hidden="true" />
+              更新于 {{ formatSnapshotTime(statsUpdatedAt) }}
+            </div>
+          </ElCard>
+        </ElCol>
+
+        <ElCol :xs="24" :md="12" class="workplace-ops-col">
+          <ElCard
+            shadow="hover"
+            class="workplace-section-card workplace-surface workplace-ops-card"
+          >
+            <template #header>
+              <div class="workplace-section-card__head">
+                <div>
+                  <span class="workplace-panel-title">运行中的任务</span>
+                  <p class="workplace-section-sub workplace-section-sub--inline">
+                    调度器 · 最多 10 条
+                  </p>
+                </div>
+                <ElButton type="primary" link @click="goToJob()">任务管理</ElButton>
+              </div>
+            </template>
+            <div v-loading="jobsLoading" class="workplace-ops-card__body">
+              <el-empty
+                v-if="!jobsLoading && runningJobs.length === 0"
+                :image-size="64"
+                description="暂无运行中的任务"
+              />
+              <ul v-else class="workplace-running-list workplace-running-list--in-grid">
+                <li v-for="job in runningJobs" :key="job.id" class="workplace-running-list__item">
+                  <div class="workplace-running-list__main">
+                    <span class="workplace-running-list__name">{{ job.name }}</span>
+                    <el-tag type="success" size="small">运行中</el-tag>
+                  </div>
+                  <div class="workplace-running-list__meta">
+                    <span v-if="job.next_run_time">下次：{{ job.next_run_time }}</span>
+                    <span v-if="job.trigger" class="workplace-running-list__trigger">
+                      {{ job.trigger }}
+                    </span>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </ElCard>
+        </ElCol>
+      </ElRow>
+
+      <ElRow :gutter="16" class="workplace-ops-row workplace-ops-row--pair">
+        <ElCol :xs="24" :md="12" class="workplace-ops-col">
+          <ElCard
+            shadow="hover"
+            class="workplace-section-card workplace-surface workplace-ops-card"
+          >
+            <template #header>
+              <div class="workplace-section-card__head">
+                <div>
+                  <span class="workplace-panel-title">系统日志</span>
+                  <p class="workplace-section-sub workplace-section-sub--inline">
+                    已加载 {{ systemLogs.length }} 条 · 默认 10 条
+                  </p>
+                </div>
+                <div class="workplace-section-card__actions">
+                  <ElButton
+                    v-if="systemLogs.length > 10"
+                    type="primary"
+                    link
+                    @click="logsExpanded = !logsExpanded"
+                  >
+                    {{ logsExpanded ? "收起" : "展开全部" }}
+                  </ElButton>
+                  <ElButton type="primary" link @click="goToLog()">日志管理</ElButton>
+                </div>
+              </div>
+            </template>
+            <div
+              v-loading="logsLoading"
+              class="workplace-ops-card__body workplace-ops-card__body--logs"
+            >
+              <el-empty
+                v-if="!logsLoading && systemLogs.length === 0"
+                :image-size="72"
+                description="暂无日志"
+              />
+              <div v-else class="workplace-logs-scroll">
+                <el-table
+                  :data="displayedLogs"
+                  class="workplace-logs-table"
+                  size="small"
+                  stripe
+                  :max-height="logsExpanded ? 360 : 220"
+                >
+                  <el-table-column label="类型" width="72" align="center">
+                    <template #default="{ row }">
+                      <el-tag :type="row.type === 1 ? 'success' : 'primary'" size="small">
+                        {{ row.type === 1 ? "登录" : "操作" }}
+                      </el-tag>
+                    </template>
+                  </el-table-column>
+                  <el-table-column
+                    label="路径"
+                    prop="request_path"
+                    min-width="120"
+                    show-overflow-tooltip
+                  />
+                  <el-table-column label="方法" width="72" align="center">
+                    <template #default="{ row }">
+                      <el-tag :type="getMethodType(row.request_method)" size="small">
+                        {{ row.request_method || "—" }}
+                      </el-tag>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="状态" width="64" align="center">
+                    <template #default="{ row }">
+                      <el-tag :type="getStatusCodeType(row.response_code)" size="small">
+                        {{ row.response_code ?? "—" }}
+                      </el-tag>
+                    </template>
+                  </el-table-column>
+                  <el-table-column
+                    label="IP"
+                    prop="request_ip"
+                    min-width="100"
+                    show-overflow-tooltip
+                  />
+                  <el-table-column
+                    label="时间"
+                    prop="created_time"
+                    min-width="136"
+                    show-overflow-tooltip
+                  />
+                </el-table>
+              </div>
+            </div>
+          </ElCard>
+        </ElCol>
+
+        <ElCol :xs="24" :md="12" class="workplace-ops-col">
+          <ElCard
+            shadow="hover"
+            class="workplace-section-card workplace-surface workplace-ops-card"
+          >
+            <template #header>
+              <div class="workplace-section-card__head">
+                <div>
+                  <span class="workplace-panel-title">最新消息</span>
+                  <p class="workplace-section-sub workplace-section-sub--inline">
+                    公告与通知 · 最近 5 条
+                  </p>
+                </div>
+                <ElButton type="primary" link @click="goToNotice()">公告管理</ElButton>
+              </div>
+            </template>
+            <div class="workplace-ops-card__body workplace-ops-card__body--notices">
+              <el-empty v-if="noticeList.length === 0" :image-size="80" description="暂无数据" />
+              <ElTimeline v-else class="workplace-notice-timeline">
+                <ElTimelineItem
+                  v-for="(item, index) in noticePreviewList"
+                  :key="item.id"
+                  :type="index === 0 ? 'primary' : 'info'"
+                >
+                  <div class="workplace-notice-card">
+                    <div class="workplace-notice-card__head">
+                      <div class="workplace-notice-card__titles">
+                        <span class="workplace-notice-card__title">
+                          {{ item.notice_title }}
+                        </span>
+                        <el-tag size="small" :type="getNoticeTypeColor(item.notice_type)">
+                          {{ getNoticeTypeText(item.notice_type) }}
+                        </el-tag>
+                      </div>
+                      <span class="workplace-notice-card__time">
+                        {{ formatTime(item.created_time) }}
+                      </span>
+                    </div>
+                    <div class="workplace-notice-card__content">
+                      {{ item.notice_content }}
+                    </div>
+                    <div class="workplace-notice-card__foot">
+                      <span class="workplace-notice-card__author">
+                        {{ item.created_by?.name }} 发布
+                      </span>
+                      <el-tooltip
+                        placement="top"
+                        :content="item.description || item.notice_content"
+                      >
+                        <ElButton target="_blank" type="primary" link @click="goToNotice()">
+                          详情↗
+                        </ElButton>
+                      </el-tooltip>
+                    </div>
+                  </div>
+                </ElTimelineItem>
+              </ElTimeline>
+            </div>
+          </ElCard>
+        </ElCol>
+      </ElRow>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  name: "Workbench",
+  inheritAttrs: false,
+});
+
+import { useUserStore } from "@/store/index";
+import { greetings } from "@/utils/common";
+import NoticeAPI, { NoticeTable } from "@/api/module_system/notice";
+import LogAPI, { type LogTable } from "@/api/module_system/log";
+import type { SchedulerJob } from "@/api/module_task/cronjob/job";
+import ServerAPI, { type ServerInfo } from "@/api/module_monitor/server";
+import OnlineAPI from "@/api/module_monitor/online";
+import { UserAPI } from "@/api/module_system/user";
+import JobAPI from "@/api/module_task/cronjob/job";
+import { AiChatAPI } from "@/api/module_ai/chat";
+import { ApplicationAPI } from "@/api/module_application/portal";
+import {
+  WORKPLACE_MODULE_GROUPS,
+  flattenLeafMenusFromTree,
+  resolveEntryPath,
+  resolveEntryTitle,
+} from "./workplace-catalog";
+import { ref, onMounted, onUnmounted, computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { useRouter } from "vue-router";
+import {
+  Delete,
+  UserFilled,
+  Close,
+  Setting,
+  Monitor,
+  Timer,
+  ChatDotRound,
+  Cpu,
+  Reading,
+  Right,
+  Star,
+  QuestionFilled,
+} from "@element-plus/icons-vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import {
+  quickStartManager,
+  QUICK_LINK_MAX,
+  type QuickLink,
+} from "@/utils/common/quickStartManager";
+
+const userStore = useUserStore();
+const timefix = greetings();
+const { t } = useI18n();
+const router = useRouter();
+
+// 通知公告数据（需早于 noticePreviewList）
+const noticeList = ref<NoticeTable[]>([]);
+
+const systemLogs = ref<LogTable[]>([]);
+const logsLoading = ref(false);
+const logsExpanded = ref(false);
+const runningJobs = ref<SchedulerJob[]>([]);
+const jobsLoading = ref(false);
+
+const displayedLogs = computed(() => {
+  if (logsExpanded.value || systemLogs.value.length <= 10) return systemLogs.value;
+  return systemLogs.value.slice(0, 10);
+});
+
+interface OverviewSnapshot {
+  userTotal: number | null;
+  onlineTotal: number | null;
+  cpuUsed: number | null;
+  memUsage: number | null;
+  jobCount: number | null;
+  schedulerStatus: string;
+  schedulerRunning: boolean;
+  chatSessions: number | null;
+  appCount: number | null;
+}
+
+const overviewSnapshot = ref<OverviewSnapshot>({
+  userTotal: null,
+  onlineTotal: null,
+  cpuUsed: null,
+  memUsage: null,
+  jobCount: null,
+  schedulerStatus: "",
+  schedulerRunning: false,
+  chatSessions: null,
+  appCount: null,
+});
+
+function fmtMetric(n: number | null | undefined) {
+  if (n == null || !Number.isFinite(n)) return "—";
+  return String(n);
+}
+
+function fmtPercent(n: number | null | undefined) {
+  if (n == null || !Number.isFinite(n)) return "—";
+  return `${Number(n).toFixed(1)}%`;
+}
+
+function formatSnapshotTime(ts: number) {
+  return new Date(ts).toLocaleString();
+}
+
+const moduleGroupIcons = {
+  system: Setting,
+  monitor: Monitor,
+  task: Timer,
+  ai: ChatDotRound,
+  app: Cpu,
+  docs: Reading,
+};
+
+/** 叶子菜单（与侧栏同源），用于模块域入口解析 */
+const allMenuLeaves = computed(() => flattenLeafMenusFromTree(userStore.routeList));
+
+const moduleGroupEntries = computed(() => {
+  const leaves = allMenuLeaves.value;
+  return WORKPLACE_MODULE_GROUPS.map((g) => ({
+    ...g,
+    entryPath: resolveEntryPath(leaves, g.matchHints),
+    entryLabel: resolveEntryTitle(leaves, g.matchHints),
+  }));
+});
+
+function goModuleEntry(path: string | undefined) {
+  if (!path) {
+    ElMessage.info("当前账号在该模块暂无可用入口，请联系管理员分配权限");
+    return;
+  }
+  goMenuShortcut(path);
+}
+
+const noticePreviewList = computed(() => noticeList.value.slice(0, 5));
+
+function goMenuShortcut(path: string) {
+  if (!path) return;
+  router.push(path).catch(() => {
+    ElMessage.warning("无法打开该页面，请检查路由配置");
+  });
+}
+
+// 快速链接数据
+const quickLinks = ref<QuickLink[]>(quickStartManager.getQuickLinks());
+
+// 格式化时间
+const formatTime = (time: string | undefined) => {
+  if (!time) return "";
+  const date = new Date(time);
+  const now = new Date();
+  const diff = now.getTime() - date.getTime();
+  const minutes = Math.floor(diff / (1000 * 60));
+  const hours = Math.floor(diff / (1000 * 60 * 60));
+  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+
+  if (minutes < 1) return "刚刚";
+  if (minutes < 60) return `${minutes}分钟前`;
+  if (hours < 24) return `${hours}小时前`;
+  if (days < 7) return `${days}天前`;
+  return date.toLocaleDateString();
+};
+
+// 跳转通知公告详情页
+const goToNotice = () => {
+  router.push({ name: "Notice" }).catch(() => {
+    ElMessage.warning(`公告通知跳转失败，请检查路由配置`);
+  });
+};
+
+function goToLog() {
+  router.push({ name: "Log" }).catch(() => {
+    ElMessage.warning("日志管理页跳转失败，请检查路由配置");
+  });
+}
+
+function goToJob() {
+  router.push({ name: "Job" }).catch(() => {
+    ElMessage.warning("任务管理页跳转失败，请检查路由配置");
+  });
+}
+
+function getStatusCodeType(code?: number): "success" | "warning" | "info" | "danger" {
+  if (code === undefined) return "info";
+  if (code >= 200 && code < 300) return "success";
+  if (code >= 300 && code < 400) return "warning";
+  return "danger";
+}
+
+function getMethodType(method?: string): "success" | "warning" | "info" | "danger" {
+  if (method === undefined) return "info";
+  if (method === "GET") return "info";
+  if (method === "POST") return "success";
+  if (method === "PUT" || method === "PATCH") return "warning";
+  if (method === "DELETE") return "danger";
+  return "info";
+}
+
+async function fetchSystemLogs() {
+  logsLoading.value = true;
+  try {
+    const res = await LogAPI.listLog({ page_no: 1, page_size: 50 });
+    if (res.data.code === 0) {
+      systemLogs.value = res.data.data?.items ?? [];
+    }
+  } catch (e) {
+    console.error("工作台加载系统日志失败:", e);
+  } finally {
+    logsLoading.value = false;
+  }
+}
+
+async function fetchRunningJobs() {
+  jobsLoading.value = true;
+  try {
+    const res = await JobAPI.getSchedulerJobs();
+    if (res.data.code === 0) {
+      const jobs = res.data.data ?? [];
+      runningJobs.value = jobs.filter((j) => j.status === "运行中").slice(0, 10);
+    }
+  } catch (e) {
+    console.error("工作台加载调度任务失败:", e);
+  } finally {
+    jobsLoading.value = false;
+  }
+}
+
+// 获取通知类型文本和颜色
+const getNoticeTypeText = (type: string | undefined) => {
+  switch (type) {
+    case "1":
+      return "通知";
+    case "2":
+      return "公告";
+    default:
+      return "通知";
+  }
+};
+
+// 获取通知类型对应的标签颜色
+const getNoticeTypeColor = (type: string | undefined) => {
+  switch (type) {
+    case "1":
+      return "primary";
+    case "2":
+      return "success";
+    default:
+      return "primary";
+  }
+};
+
+// 获取通知公告列表
+const listNotice = async () => {
+  try {
+    const response = await NoticeAPI.listNotice({
+      page_no: 1,
+      page_size: 5,
+      status: "0", // 只获取启用的公告
+    });
+    if (response.data.code === 0) {
+      noticeList.value = response.data.data.items;
+    }
+  } catch (error) {
+    console.error("获取通知公告失败:", error);
+  }
+};
+
+// 处理快速链接点击
+const handleQuickLinkClick = (item: QuickLink) => {
+  if (item.href) {
+    router.push(item.href).catch(() => {
+      ElMessage.warning(`路由 ${item.href} 不存在，请检查配置`);
+    });
+  } else {
+    ElMessage.info(`${item.title} 功能待开发`);
+  }
+};
+
+/** 与主题协调的固定色板，按索引循环，避免随机色闪烁 */
+const QUICK_LINK_PALETTE = ["#4080ff", "#23c343", "#ff9a2e", "#f76560", "#a9aeb8", "#00b42a"];
+
+function getQuickLinkColor(index: number) {
+  return QUICK_LINK_PALETTE[index % QUICK_LINK_PALETTE.length];
+}
+
+/** 列表中颜色与顺序与「全部收藏」一致，筛选后仍稳定 */
+function getQuickLinkStableIndex(item: QuickLink): number {
+  const list = quickLinks.value;
+  const i = list.findIndex((l) =>
+    l.id != null && l.id !== "" ? l.id === item.id : l.href === item.href
+  );
+  return i >= 0 ? i : 0;
+}
+
+// 处理删除链接
+const handleDeleteLink = (item: QuickLink) => {
+  ElMessageBox.confirm(`确定要取消收藏"${item.title}"吗？`, "取消收藏确认", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      if (item.id) {
+        quickStartManager.removeQuickLink(item.id);
+      } else if (item.href) {
+        quickStartManager.removeQuickLinkByHref(item.href);
+      } else {
+        ElMessage.warning("无法移除：缺少标识");
+        return;
+      }
+      ElMessage.success(`已取消收藏：${item.title}`);
+    })
+    .catch(() => {
+      // 用户取消删除
+    });
+};
+
+const clearBookmarks = () => {
+  ElMessageBox.confirm("确定要清空收藏吗？", "清空收藏确认", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      quickStartManager.clearQuickLinks();
+      ElMessage.success("已清空收藏");
+    })
+    .catch(() => {});
+};
+
+// 监听快速链接变化
+const updateQuickLinks = (links: QuickLink[]) => {
+  quickLinks.value = links;
+};
+
+// 组件挂载时获取数据和添加监听器
+onMounted(() => {
+  listNotice();
+  fetchWorkplaceStats();
+  fetchSystemLogs();
+  fetchRunningJobs();
+  quickStartManager.addListener(updateQuickLinks);
+});
+
+// 组件卸载时移除监听器
+onUnmounted(() => {
+  quickStartManager.removeListener(updateQuickLinks);
+});
+
+const welcome = "祝你开心每一天！";
+
+const currentUser = {
+  avatar:
+    userStore.basicInfo.avatar ||
+    "https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png",
+  name: userStore.basicInfo.name || "吴彦祖",
+  username: userStore.basicInfo.username || "账号信息",
+  description: userStore.basicInfo.description || "用户说明",
+  dept_name: userStore.basicInfo.dept_name || "软件专业部",
+  last_login: userStore.basicInfo.last_login || "2023-01-01 00:00:00",
+};
+
+const statsLoading = ref(false);
+const statsUpdatedAt = ref<number | null>(null);
+
+async function fetchWorkplaceStats() {
+  statsLoading.value = true;
+  try {
+    const [userR, onlineR, serverR, jobR, chatR, appR] = await Promise.allSettled([
+      UserAPI.listUser({ page_no: 1, page_size: 1 }),
+      OnlineAPI.listOnline({ page_no: 1, page_size: 1 }),
+      ServerAPI.getServer(),
+      JobAPI.getSchedulerStatus(),
+      AiChatAPI.getSessionList({ page_no: 1, page_size: 1 }),
+      ApplicationAPI.listApp({ page_no: 1, page_size: 1 }),
+    ]);
+
+    const snap = overviewSnapshot.value;
+
+    snap.userTotal =
+      userR.status === "fulfilled" && userR.value.data.code === 0
+        ? (userR.value.data.data?.total ?? null)
+        : null;
+
+    snap.onlineTotal =
+      onlineR.status === "fulfilled" && onlineR.value.data.code === 0
+        ? (onlineR.value.data.data?.total ?? null)
+        : null;
+
+    if (serverR.status === "fulfilled" && serverR.value.data.code === 0) {
+      const info = serverR.value.data.data as ServerInfo;
+      snap.cpuUsed = info.cpu?.used ?? null;
+      snap.memUsage = info.mem?.usage ?? null;
+    } else {
+      snap.cpuUsed = null;
+      snap.memUsage = null;
+    }
+
+    if (jobR.status === "fulfilled" && jobR.value.data.code === 0) {
+      const d = jobR.value.data.data;
+      snap.jobCount = d?.job_count ?? null;
+      snap.schedulerStatus = d?.status ?? "";
+      snap.schedulerRunning = !!d?.is_running;
+    } else {
+      snap.jobCount = null;
+      snap.schedulerStatus = "";
+      snap.schedulerRunning = false;
+    }
+
+    snap.chatSessions =
+      chatR.status === "fulfilled" && chatR.value.data.code === 0
+        ? (chatR.value.data.data?.total ?? null)
+        : null;
+
+    snap.appCount =
+      appR.status === "fulfilled" && appR.value.data.code === 0
+        ? (appR.value.data.data?.total ?? null)
+        : null;
+
+    statsUpdatedAt.value = Date.now();
+  } catch (e) {
+    console.error("工作台运行快照加载失败:", e);
+  } finally {
+    statsLoading.value = false;
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.workplace-section-sub {
+  margin: 4px 0 0;
+  font-size: 12px;
+  font-weight: normal;
+  line-height: 1.45;
+  color: var(--el-text-color-secondary);
+}
+
+.workplace-section-sub--inline {
+  margin: 2px 0 0;
+}
+
+.workplace-page {
+  --workplace-radius: 12px;
+  --workplace-radius-sm: 10px;
+
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+/* 与上方模块区隔离，两行 ops 之间固定间距，避免与下方栅格视觉「叠在一起」 */
+.workplace-ops-stack {
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+}
+
+.workplace-surface {
+  overflow: hidden;
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: var(--workplace-radius);
+
+  :deep(.el-card__header) {
+    border-bottom-color: var(--el-border-color-extra-light);
+  }
+}
+
+.workplace-panel-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+  letter-spacing: 0.02em;
+}
+
+/* —— 顶栏 —— */
+.workplace-hero-card {
+  :deep(.el-card__body) {
+    padding: 20px 22px;
+    background: linear-gradient(
+      135deg,
+      var(--el-fill-color-blank) 0%,
+      var(--el-fill-color-light) 100%
+    );
+  }
+}
+
+.workplace-hero__avatar-wrap {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 64px;
+  height: 64px;
+  margin-right: 18px;
+  background: var(--el-bg-color);
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 50%;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 5%);
+}
+
+.workplace-hero__avatar {
+  border: 2px solid var(--el-bg-color);
+}
+
+.workplace-hero__avatar-fallback {
+  opacity: 0.55;
+}
+
+.workplace-hero__greeting {
+  margin-bottom: 6px;
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 1.3;
+  color: var(--el-text-color-primary);
+}
+
+.workplace-hero__meta {
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--el-text-color-secondary);
+}
+
+.workplace-hero__login {
+  min-width: 168px;
+  padding: 12px 16px;
+  text-align: right;
+  background: var(--el-bg-color);
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: var(--workplace-radius-sm);
+  box-shadow: 0 1px 3px rgb(0 0 0 / 4%);
+}
+
+.workplace-hero__login-label {
+  margin-bottom: 4px;
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+}
+
+.workplace-hero__login-time {
+  font-size: 17px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--el-text-color-primary);
+}
+
+.workplace-empty-hint {
+  margin-top: 8px;
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+}
+
+.workplace-logs-card {
+  :deep(.el-card__body) {
+    padding: 12px 14px 14px;
+  }
+}
+
+.workplace-logs-table {
+  width: 100%;
+}
+
+.workplace-running-card {
+  :deep(.el-card__body) {
+    padding: 10px 12px 12px;
+  }
+}
+
+.workplace-running-list {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.workplace-running-list__item {
+  padding: 12px 14px;
+  margin-bottom: 8px;
+  background: var(--el-fill-color-blank);
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: var(--workplace-radius-sm);
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.workplace-running-list__main {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.workplace-running-list__name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+  white-space: nowrap;
+}
+
+.workplace-running-list__meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 10px;
+  margin-top: 4px;
+  font-size: 11px;
+  line-height: 1.35;
+  color: var(--el-text-color-secondary);
+}
+
+.workplace-running-list__trigger {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+}
+
+/* ========== 模块入口 / 收藏：各为独立卡片（同行等高） ========== */
+.workplace-module-row {
+  align-items: stretch;
+}
+
+.workplace-module-row > .el-col {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.workplace-modules-card,
+.workplace-bookmarks-card {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  width: 100%;
+  min-height: 0;
+}
+
+.workplace-modules-card {
+  :deep(.el-card__body) {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-height: 0;
+    padding: 16px 18px 18px;
+  }
+}
+
+.workplace-bookmarks-col {
+  @media (width <= 991px) {
+    margin-top: 16px;
+  }
+}
+
+.workplace-bookmarks-card {
+  :deep(.el-card__body) {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-height: 0;
+    padding: 12px 16px 16px;
+  }
+}
+
+.workplace-bookmarks-card__header {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.workplace-bookmarks-card__title-line {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.workplace-bookmarks-card__star {
+  flex-shrink: 0;
+  color: var(--el-color-warning);
+}
+
+.workplace-bookmarks-card__count {
+  height: 22px;
+  font-variant-numeric: tabular-nums;
+}
+
+.workplace-bookmarks-card__header-actions {
+  display: flex;
+  flex-shrink: 0;
+  gap: 8px;
+  align-items: center;
+}
+
+.workplace-module-bookmarks {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.workplace-module-bookmarks__help {
+  flex-shrink: 0;
+  color: var(--el-text-color-secondary);
+  cursor: help;
+}
+
+.workplace-module-bookmarks__empty {
+  padding: 12px 0;
+}
+
+.workplace-module-grid {
+  display: grid;
+  flex: 1;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  align-content: start;
+  min-height: 0;
+}
+
+@media (width >= 1400px) {
+  .workplace-modules-card .workplace-module-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (width <= 520px) {
+  .workplace-modules-card .workplace-module-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.workplace-section-card {
+  :deep(.el-card__body) {
+    padding: 12px 18px 18px;
+  }
+}
+
+.workplace-section-card__head {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: flex-start;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.workplace-section-card__actions {
+  display: flex;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  gap: 4px;
+  align-items: center;
+}
+
+/* 运行快照+任务、日志+消息：每行两列并排 */
+.workplace-ops-row {
+  row-gap: 16px;
+  align-items: stretch;
+  width: 100%;
+}
+
+.workplace-ops-col {
+  display: flex;
+  min-width: 0;
+}
+
+.workplace-ops-card {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+
+  :deep(.el-card__body) {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-height: 0;
+  }
+}
+
+.workplace-ops-card__body {
+  flex: 1;
+  min-height: 0;
+}
+
+.workplace-ops-card__body--logs {
+  min-width: 0;
+}
+
+.workplace-ops-card__body--notices {
+  max-height: min(520px, 62vh);
+  padding-right: 2px;
+  overflow: hidden auto;
+}
+
+.workplace-logs-scroll {
+  width: 100%;
+  min-width: 0;
+  overflow-x: auto;
+}
+
+.workplace-notice-timeline {
+  padding-left: 2px;
+}
+
+.workplace-running-list--in-grid {
+  max-height: min(400px, 52vh);
+  padding-right: 2px;
+  overflow: hidden auto;
+}
+
+.workplace-module-card {
+  position: relative;
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  min-height: 108px;
+  padding: 14px 36px 14px 14px;
+  cursor: pointer;
+  background: var(--el-bg-color);
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: var(--workplace-radius-sm);
+  transition:
+    border-color 0.2s,
+    box-shadow 0.2s,
+    background 0.2s,
+    transform 0.15s ease;
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--el-color-primary-light-7);
+  }
+
+  &:not(.is-disabled):hover {
+    background: var(--el-bg-color);
+    border-color: var(--el-color-primary-light-5);
+    box-shadow: 0 6px 20px rgb(0 0 0 / 6%);
+    transform: translateY(-1px);
+  }
+
+  &.is-disabled {
+    cursor: not-allowed;
+    opacity: 0.72;
+  }
+}
+
+.workplace-module-card__icon {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  color: var(--el-color-primary);
+  background: var(--el-color-primary-light-9);
+  border-radius: 12px;
+}
+
+.workplace-module-card.is-disabled .workplace-module-card__icon {
+  color: var(--el-text-color-disabled);
+  background: var(--el-fill-color-light);
+}
+
+.workplace-module-card__body {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+}
+
+.workplace-module-card__name {
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--el-text-color-primary);
+}
+
+.workplace-module-card__desc {
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--el-text-color-secondary);
+}
+
+.workplace-module-card__hint {
+  font-size: 11px;
+  line-height: 1.35;
+  color: var(--el-color-primary);
+}
+
+.workplace-module-card__hint--muted {
+  color: var(--el-text-color-placeholder);
+}
+
+.workplace-module-card__arrow {
+  position: absolute;
+  top: 50%;
+  right: 12px;
+  color: var(--el-text-color-placeholder);
+  transform: translateY(-50%);
+}
+
+.workplace-module-card:not(.is-disabled):hover .workplace-module-card__arrow {
+  color: var(--el-color-primary);
+}
+
+.workplace-snapshot-card {
+  :deep(.el-card__body) {
+    padding: 18px 20px 16px;
+    background: var(--el-fill-color-blank);
+  }
+}
+
+.workplace-snapshot-card__head {
+  width: 100%;
+}
+
+.workplace-snapshot-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
+  gap: 14px;
+}
+
+.workplace-ops-row--pair .workplace-snapshot-grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+@media (width <= 575px) {
+  .workplace-ops-row--pair .workplace-snapshot-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.workplace-stat-tile {
+  position: relative;
+  min-width: 0;
+  padding: 16px 16px 14px;
+  overflow: hidden;
+  background: var(--el-bg-color);
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: var(--workplace-radius-sm);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+
+  &::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    height: 3px;
+    content: "";
+    background: var(--el-color-primary);
+    opacity: 0.9;
+  }
+
+  &:hover {
+    border-color: var(--el-color-primary-light-7);
+    box-shadow: 0 8px 24px rgb(0 0 0 / 7%);
+  }
+
+  &:nth-child(2)::before {
+    background: var(--el-color-success);
+  }
+
+  &:nth-child(3)::before {
+    background: var(--el-color-warning);
+  }
+
+  &:nth-child(4)::before {
+    background: var(--el-color-info);
+  }
+
+  &:nth-child(5)::before {
+    background: #722ed1;
+  }
+}
+
+.workplace-stat-tile__label {
+  margin-bottom: 8px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--el-text-color-secondary);
+}
+
+.workplace-stat-tile__value {
+  font-size: 24px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.15;
+  color: var(--el-color-primary);
+  letter-spacing: -0.02em;
+}
+
+.workplace-stat-tile__value--sm {
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.45;
+  color: var(--el-text-color-primary);
+  letter-spacing: 0;
+  overflow-wrap: anywhere;
+}
+
+.workplace-stat-tile__hint {
+  margin-top: 8px;
+  font-size: 11px;
+  line-height: 1.4;
+  color: var(--el-text-color-placeholder);
+}
+
+.workplace-snapshot-card__foot {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  padding-top: 14px;
+  margin-top: 16px;
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+  border-top: 1px dashed var(--el-border-color-lighter);
+}
+
+.workplace-snapshot-card__foot-dot {
+  flex-shrink: 0;
+  width: 6px;
+  height: 6px;
+  background: var(--el-color-success);
+  border-radius: 50%;
+  opacity: 0.85;
+}
+
+.workplace-notice-card {
+  padding: 14px 16px;
+  background: var(--el-bg-color);
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: var(--workplace-radius-sm);
+  box-shadow: 0 1px 3px rgb(0 0 0 / 4%);
+  transition:
+    border-color 0.2s,
+    box-shadow 0.2s;
+
+  &:hover {
+    border-color: var(--el-color-primary-light-7);
+    box-shadow: 0 4px 14px rgb(0 0 0 / 6%);
+  }
+}
+
+.workplace-notice-card__head {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.workplace-notice-card__titles {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  min-width: 0;
+}
+
+.workplace-notice-card__title {
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.35;
+  color: var(--el-text-color-primary);
+}
+
+.workplace-notice-card__time {
+  flex-shrink: 0;
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+}
+
+.workplace-notice-card__content {
+  display: -webkit-box;
+  margin-bottom: 12px;
+  overflow: hidden;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  font-size: 13px;
+  line-height: 1.55;
+  color: var(--el-text-color-regular);
+  -webkit-box-orient: vertical;
+}
+
+.workplace-notice-card__foot {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 12px;
+}
+
+.workplace-notice-card__author {
+  color: var(--el-text-color-secondary);
+}
+
+/* ========== 顶栏问候 ========== */
+.workplace-hero {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.workplace-hero__actions {
+  display: flex;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  gap: 16px 20px;
+  align-items: flex-start;
+  justify-content: flex-end;
+}
+
+.workplace-quick-empty__title {
+  margin: 0 0 8px;
+  font-size: 14px;
+  color: var(--el-text-color-regular);
+}
+
+.workplace-quick-empty__hint {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.55;
+  color: var(--el-text-color-secondary);
+}
+
+.workplace-quick-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+/* 3 列 × 最多 5 排固定高度（15 格）；窄屏 2 列时 15 个占 8 排 */
+.workplace-quick-list--hub {
+  --hub-row-h: 38px;
+  --hub-gap: 8px;
+
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-auto-rows: var(--hub-row-h);
+  gap: var(--hub-gap);
+  align-content: start;
+
+  /* 正好 5 排所占高度：5 行 + 4 道行间距 */
+  min-height: calc(5 * var(--hub-row-h) + 4 * var(--hub-gap));
+}
+
+@media (width <= 520px) {
+  .workplace-quick-list--hub {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    min-height: calc(8 * var(--hub-row-h) + 7 * var(--hub-gap));
+  }
+}
+
+.workplace-quick-row--compact {
+  min-height: 44px;
+  padding: 6px 8px 6px 4px;
+}
+
+.workplace-quick-row {
+  position: relative;
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  min-height: 56px;
+  padding: 8px 10px 8px 6px;
+  cursor: pointer;
+  outline: none;
+  background: var(--el-fill-color-blank);
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: var(--el-border-radius-base);
+  transition:
+    border-color 0.2s,
+    box-shadow 0.2s,
+    background 0.2s;
+
+  &:hover {
+    background: var(--el-bg-color);
+    border-color: var(--el-color-primary-light-5);
+    box-shadow: var(--el-box-shadow-light);
+  }
+
+  &:focus-visible {
+    border-color: var(--el-color-primary);
+    box-shadow: 0 0 0 2px var(--el-color-primary-light-7);
+  }
+}
+
+.workplace-quick-row__accent {
+  flex-shrink: 0;
+  align-self: stretch;
+  width: 3px;
+  min-height: 36px;
+  border-radius: 2px;
+}
+
+.workplace-quick-row__icon {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  font-size: 22px;
+  line-height: 1;
+  background: var(--el-color-primary-light-9);
+  border-radius: 10px;
+}
+
+.workplace-quick-row__text {
+  flex: 1;
+  min-width: 0;
+}
+
+.workplace-quick-row__title {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.35;
+  color: var(--el-text-color-primary);
+  white-space: nowrap;
+}
+
+.workplace-quick-row__actions {
+  display: flex;
+  flex-shrink: 0;
+  gap: 2px;
+  align-items: center;
+}
+
+.workplace-quick-row__remove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  color: var(--el-text-color-secondary);
+  cursor: pointer;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  transition:
+    color 0.2s,
+    background 0.2s,
+    border-color 0.2s,
+    opacity 0.2s;
+
+  .workplace-quick-row--chip & {
+    width: 26px;
+    height: 26px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.35;
+  }
+
+  &:hover:not(:disabled) {
+    color: var(--el-color-danger);
+    background: var(--el-color-danger-light-9);
+    border-color: var(--el-color-danger-light-7);
+  }
+}
+
+.workplace-quick-row--chip {
+  min-width: 0;
+
+  .workplace-quick-row__icon {
+    width: 34px;
+    height: 34px;
+    font-size: 18px;
+  }
+
+  .workplace-quick-row__accent {
+    min-height: 30px;
+  }
+}
+
+/* 与 --hub-row-h 对齐，保证每排高度一致 */
+.workplace-quick-list--hub .workplace-quick-row--compact {
+  box-sizing: border-box;
+  gap: 4px;
+  height: 100%;
+  min-height: 0;
+  padding: 4px 4px 4px 2px;
+}
+
+.workplace-quick-list--hub .workplace-quick-row--chip .workplace-quick-row__icon {
+  width: 26px;
+  height: 26px;
+  font-size: 14px;
+}
+
+.workplace-quick-list--hub .workplace-quick-row--chip .workplace-quick-row__accent {
+  min-height: 24px;
+}
+
+.workplace-quick-list--hub .workplace-quick-row__title {
+  font-size: 12px;
+}
+</style>
diff --git a/frontend/new-web/src/views/error/401.vue b/frontend/new-web/src/views/error/401.vue
new file mode 100644
index 00000000..07240b42
--- /dev/null
+++ b/frontend/new-web/src/views/error/401.vue
@@ -0,0 +1,61 @@
+<template>
+  <el-result
+    :title="t('error.noPermission')"
+    sub-title="请确认您的权限是否满足操作要求，或者点击下方按钮返回首页。"
+  >
+    <template #icon>
+      <!-- 此处必须img，如果是el-icon则无法识别 @ -->
+      <img class="min-w-[23.4375rem] sm:w-120" src="@/assets/images/401.svg" alt="401" />
+    </template>
+    <template #extra>
+      <el-button round type="primary" @click="back">{{ t("error.returnToHome") }}</el-button>
+    </template>
+  </el-result>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: "Page401" });
+const router = useRouter();
+const back = () => router.push("/");
+const t = useI18n().t;
+</script>
+
+<style lang="scss" scoped>
+@mixin slide-up-animation($delay: 0s) {
+  opacity: 0;
+  animation-name: slideUp;
+  animation-duration: 0.5s;
+  animation-delay: $delay;
+  animation-fill-mode: forwards;
+}
+
+@keyframes slideUp {
+  0% {
+    opacity: 0;
+    transform: translateY(60px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.oops {
+  color: var(--el-color-primary);
+
+  @include slide-up-animation(0s);
+}
+
+.headline {
+  @include slide-up-animation(0.1s);
+}
+
+.info {
+  @include slide-up-animation(0.2s);
+}
+
+.btn {
+  @include slide-up-animation(0.3s);
+}
+</style>
diff --git a/frontend/new-web/src/views/error/404.vue b/frontend/new-web/src/views/error/404.vue
new file mode 100644
index 00000000..dfe837f3
--- /dev/null
+++ b/frontend/new-web/src/views/error/404.vue
@@ -0,0 +1,61 @@
+<template>
+  <el-result
+    :title="t('error.pageError')"
+    sub-title="请确认页面网址是否正确，或者点击下方按钮返回首页。"
+  >
+    <template #icon>
+      <!-- 此处必须img，如果是el-icon则无法识别 @ -->
+      <img class="min-w-[23.4375rem] sm:w-120" src="@/assets/images/404.svg" alt="404" />
+    </template>
+    <template #extra>
+      <el-button round type="primary" @click="back">{{ t("error.returnToHome") }}</el-button>
+    </template>
+  </el-result>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: "Page404" });
+const router = useRouter();
+const back = () => router.push("/");
+const t = useI18n().t;
+</script>
+
+<style lang="scss" scoped>
+@mixin slide-up-animation($delay: 0s) {
+  opacity: 0;
+  animation-name: slideUp;
+  animation-duration: 0.5s;
+  animation-delay: $delay;
+  animation-fill-mode: forwards;
+}
+
+@keyframes slideUp {
+  0% {
+    opacity: 0;
+    transform: translateY(60px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.oops {
+  color: var(--el-color-primary);
+
+  @include slide-up-animation(0s);
+}
+
+.headline {
+  @include slide-up-animation(0.1s);
+}
+
+.info {
+  @include slide-up-animation(0.2s);
+}
+
+.btn {
+  @include slide-up-animation(0.3s);
+}
+</style>
diff --git a/frontend/new-web/src/views/error/500.vue b/frontend/new-web/src/views/error/500.vue
new file mode 100644
index 00000000..a612ad90
--- /dev/null
+++ b/frontend/new-web/src/views/error/500.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-result
+    :title="t('error.networkError')"
+    sub-title="请确认您的网络是否正常，或者点击下方按钮返回首页。"
+  >
+    <template #icon>
+      <!-- 此处必须img，如果是el-icon则无法识别 @ -->
+      <img class="min-w-[23.4375rem] sm:w-120" src="@/assets/images/500.svg" alt="500" />
+    </template>
+    <template #extra>
+      <el-button round type="primary" @click="back">{{ t("error.returnToHome") }}</el-button>
+    </template>
+  </el-result>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: "Page500" });
+const router = useRouter();
+const back = () => router.push("/");
+const t = useI18n().t;
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/frontend/new-web/src/views/examples/forms/index.vue b/frontend/new-web/src/views/examples/forms/index.vue
index b374644a..04d34332 100644
--- a/frontend/new-web/src/views/examples/forms/index.vue
+++ b/frontend/new-web/src/views/examples/forms/index.vue
@@ -30,26 +30,26 @@
     <div class="mt-3.5">
       <h3 class="mb-2 text-base font-medium">动态表单操作</h3>
       <ElSpace wrap class="mb-3">
-        <ElButton @click="getLevelOptions"> 获取用户等级数据 </ElButton>
-        <ElButton @click="addFormItem"> 新增表单项 </ElButton>
-        <ElButton @click="updateFormItem"> 修改表单项 </ElButton>
-        <ElButton @click="deleteFormItem"> 删除表单项 </ElButton>
-        <ElButton @click="batchAddFormItems"> 批量新增 </ElButton>
-        <ElButton @click="resetDynamicItems"> 重置动态项 </ElButton>
+        <ElButton @click="getLevelOptions">获取用户等级数据</ElButton>
+        <ElButton @click="addFormItem">新增表单项</ElButton>
+        <ElButton @click="updateFormItem">修改表单项</ElButton>
+        <ElButton @click="deleteFormItem">删除表单项</ElButton>
+        <ElButton @click="batchAddFormItems">批量新增</ElButton>
+        <ElButton @click="resetDynamicItems">重置动态项</ElButton>
       </ElSpace>
 
       <h3 class="mb-2 text-base font-medium">其他操作</h3>
       <ElSpace wrap>
-        <ElButton @click="validateForm"> 校验表单 </ElButton>
-        <ElButton @click="resetForm"> 重置 </ElButton>
-        <ElButton v-if="showUserName" @click="updateUserName"> 修改用户名 </ElButton>
-        <ElButton v-if="showUserName" @click="deleteUserName"> 删除用户名 </ElButton>
-        <ElButton @click="labelWidth = 120"> 修改 label 宽度 </ElButton>
-        <ElButton @click="span = 8"> 设置一行显示的组件数 </ElButton>
-        <ElButton @click="gutter = 50"> 修改 gutter </ElButton>
-        <ElButton @click="labelPosition = 'left'"> label 左对齐 </ElButton>
-        <ElButton @click="labelPosition = 'right'"> label 右对齐 </ElButton>
-        <ElButton @click="labelPosition = 'top'"> label 顶部对齐 </ElButton>
+        <ElButton @click="validateForm">校验表单</ElButton>
+        <ElButton @click="resetForm">重置</ElButton>
+        <ElButton v-if="showUserName" @click="updateUserName">修改用户名</ElButton>
+        <ElButton v-if="showUserName" @click="deleteUserName">删除用户名</ElButton>
+        <ElButton @click="labelWidth = 120">修改 label 宽度</ElButton>
+        <ElButton @click="span = 8">设置一行显示的组件数</ElButton>
+        <ElButton @click="gutter = 50">修改 gutter</ElButton>
+        <ElButton @click="labelPosition = 'left'">label 左对齐</ElButton>
+        <ElButton @click="labelPosition = 'right'">label 右对齐</ElButton>
+        <ElButton @click="labelPosition = 'top'">label 顶部对齐</ElButton>
       </ElSpace>
     </div>
 
@@ -61,826 +61,826 @@
 </template>
 
 <script setup lang="ts">
-  import ArtWangEditor from '@/components/core/forms/art-wang-editor/index.vue'
-  import { SearchFormItem } from '@/components/core/forms/art-search-bar/index.vue'
-  import { ElMessage, ElUpload, ElButton, ElIcon, ElInput } from 'element-plus'
-  import type { UploadFile, UploadFiles, UploadUserFile } from 'element-plus'
-  import { Plus } from '@element-plus/icons-vue'
+import ArtWangEditor from "@/components/core/forms/art-wang-editor/index.vue";
+import { SearchFormItem } from "@/components/core/forms/art-search-bar/index.vue";
+import { ElMessage, ElUpload, ElButton, ElIcon, ElInput } from "element-plus";
+import type { UploadFile, UploadFiles, UploadUserFile } from "element-plus";
+import { Plus } from "@element-plus/icons-vue";
 
-  interface Emits {
-    (e: 'update:modelValue', value: Record<string, any>): void
-    (e: 'search', params: Record<string, any>): void
-    (e: 'reset'): void
+interface Emits {
+  (e: "update:modelValue", value: Record<string, any>): void;
+  (e: "search", params: Record<string, any>): void;
+  (e: "reset"): void;
+}
+
+interface OptionItem {
+  label: string;
+  value: string;
+  disabled?: boolean;
+}
+
+interface FormData {
+  name?: string;
+  phone?: string;
+  level?: string;
+  address?: string;
+  slots?: string;
+  date?: string;
+  daterange?: string[];
+  cascader?: string[];
+  checkboxgroup?: string[];
+  userGender?: string;
+  iconSelector?: string;
+  status?: boolean;
+  systemName?: string;
+  fileUpload: UploadUserFile[];
+  imageUpload: UploadUserFile[];
+  multipleFiles: UploadUserFile[];
+  richTextContent: string;
+}
+
+const emit = defineEmits<Emits>();
+
+const FETCH_DELAY = 500;
+
+const formRef = ref();
+const dialogVisible = ref(false);
+const dialogImageUrl = ref("");
+
+/**
+ * 表单数据
+ */
+const formData = ref<FormData>({
+  name: undefined,
+  phone: undefined,
+  level: undefined,
+  address: undefined,
+  slots: undefined,
+  date: undefined,
+  daterange: undefined,
+  cascader: undefined,
+  checkboxgroup: undefined,
+  userGender: undefined,
+  iconSelector: undefined,
+  status: undefined,
+  systemName: undefined,
+  fileUpload: [],
+  imageUpload: [],
+  multipleFiles: [],
+  richTextContent: "",
+});
+
+/**
+ * 表单校验规则
+ */
+const formRules = {
+  name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
+};
+
+const labelWidth = ref(100);
+const labelPosition = ref<"right" | "left" | "top">("right");
+const span = ref(6);
+const gutter = ref(12);
+
+const levelOptions = ref<OptionItem[]>([]);
+
+/**
+ * 用户等级选项
+ */
+const LEVEL_OPTIONS: OptionItem[] = [
+  { label: "普通用户", value: "normal" },
+  { label: "VIP用户", value: "vip" },
+  { label: "高级VIP", value: "svip" },
+  { label: "企业用户", value: "enterprise", disabled: true },
+];
+
+/**
+ * 性别选项
+ */
+const GENDER_OPTIONS: OptionItem[] = [
+  { label: "男", value: "1" },
+  { label: "女", value: "2" },
+];
+
+/**
+ * 日期快捷选项
+ */
+const DATE_SHORTCUTS = [
+  { text: "今日", value: new Date() },
+  { text: "昨日", value: () => new Date(Date.now() - 86400000) },
+  { text: "一周前", value: () => new Date(Date.now() - 604800000) },
+];
+
+/**
+ * 模拟接口获取用户等级数据
+ * @returns 用户等级选项列表
+ */
+const fetchLevelOptions = (): Promise<OptionItem[]> => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(LEVEL_OPTIONS);
+    }, FETCH_DELAY);
+  });
+};
+
+/**
+ * 获取用户等级数据
+ */
+const getLevelOptions = async (): Promise<void> => {
+  levelOptions.value = await fetchLevelOptions();
+  if (levelOptions.value.length) {
+    ElMessage.success("成功获取到数据");
   }
+};
 
-  interface OptionItem {
-    label: string
-    value: string
-    disabled?: boolean
-  }
+/**
+ * 表单项配置类型
+ */
+interface FormItemConfig {
+  label: string;
+  key: string;
+  type: string;
+  placeholder?: string;
+  props?: Record<string, any>;
+  [key: string]: any;
+}
 
-  interface FormData {
-    name?: string
-    phone?: string
-    level?: string
-    address?: string
-    slots?: string
-    date?: string
-    daterange?: string[]
-    cascader?: string[]
-    checkboxgroup?: string[]
-    userGender?: string
-    iconSelector?: string
-    status?: boolean
-    systemName?: string
-    fileUpload: UploadUserFile[]
-    imageUpload: UploadUserFile[]
-    multipleFiles: UploadUserFile[]
-    richTextContent: string
-  }
+/**
+ * 创建表单项的工厂函数
+ */
+const createFormItem = (config: FormItemConfig) => config;
 
-  const emit = defineEmits<Emits>()
-
-  const FETCH_DELAY = 500
-
-  const formRef = ref()
-  const dialogVisible = ref(false)
-  const dialogImageUrl = ref('')
-
-  /**
-   * 表单数据
-   */
-  const formData = ref<FormData>({
-    name: undefined,
-    phone: undefined,
-    level: undefined,
-    address: undefined,
-    slots: undefined,
-    date: undefined,
-    daterange: undefined,
-    cascader: undefined,
-    checkboxgroup: undefined,
-    userGender: undefined,
-    iconSelector: undefined,
-    status: undefined,
-    systemName: undefined,
-    fileUpload: [],
-    imageUpload: [],
-    multipleFiles: [],
-    richTextContent: ''
-  })
-
-  /**
-   * 表单校验规则
-   */
-  const formRules = {
-    name: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
-  }
-
-  const labelWidth = ref(100)
-  const labelPosition = ref<'right' | 'left' | 'top'>('right')
-  const span = ref(6)
-  const gutter = ref(12)
-
-  const levelOptions = ref<OptionItem[]>([])
-
-  /**
-   * 用户等级选项
-   */
-  const LEVEL_OPTIONS: OptionItem[] = [
-    { label: '普通用户', value: 'normal' },
-    { label: 'VIP用户', value: 'vip' },
-    { label: '高级VIP', value: 'svip' },
-    { label: '企业用户', value: 'enterprise', disabled: true }
-  ]
-
-  /**
-   * 性别选项
-   */
-  const GENDER_OPTIONS: OptionItem[] = [
-    { label: '男', value: '1' },
-    { label: '女', value: '2' }
-  ]
-
-  /**
-   * 日期快捷选项
-   */
-  const DATE_SHORTCUTS = [
-    { text: '今日', value: new Date() },
-    { text: '昨日', value: () => new Date(Date.now() - 86400000) },
-    { text: '一周前', value: () => new Date(Date.now() - 604800000) }
-  ]
-
-  /**
-   * 模拟接口获取用户等级数据
-   * @returns 用户等级选项列表
-   */
-  const fetchLevelOptions = (): Promise<OptionItem[]> => {
-    return new Promise((resolve) => {
-      setTimeout(() => {
-        resolve(LEVEL_OPTIONS)
-      }, FETCH_DELAY)
-    })
-  }
-
-  /**
-   * 获取用户等级数据
-   */
-  const getLevelOptions = async (): Promise<void> => {
-    levelOptions.value = await fetchLevelOptions()
-    if (levelOptions.value.length) {
-      ElMessage.success('成功获取到数据')
-    }
-  }
-
-  /**
-   * 表单项配置类型
-   */
-  interface FormItemConfig {
-    label: string
-    key: string
-    type: string
-    placeholder?: string
-    props?: Record<string, any>
-    [key: string]: any
-  }
-
-  /**
-   * 创建表单项的工厂函数
-   */
-  const createFormItem = (config: FormItemConfig) => config
-
-  // 基础表单项配置
-  const baseFormItems = {
-    username: createFormItem({
-      label: '用户名',
-      key: 'name',
-      type: 'input',
-      placeholder: '请输入用户名',
-      clearable: true
-    }),
-    phone: createFormItem({
-      label: '手机号',
-      key: 'phone',
-      type: 'input',
-      props: { placeholder: '请输入手机号', maxlength: '11' }
-    }),
-    level: createFormItem({
-      label: '用户等级',
-      key: 'level',
-      type: 'select',
-      props: {
-        placeholder: '请选择等级',
-        options: LEVEL_OPTIONS
-      }
-    }),
-    address: createFormItem({
-      label: '地址',
-      key: 'address',
-      type: 'input',
-      placeholder: '请输入地址'
-    }),
-    date: createFormItem({
-      label: '日期',
-      key: 'date',
-      type: 'datetime',
-      props: {
-        style: { width: '100%' },
-        placeholder: '请选择日期',
-        type: 'date',
-        valueFormat: 'YYYY-MM-DD',
-        shortcuts: DATE_SHORTCUTS
-      }
-    }),
-    gender: createFormItem({
-      label: '性别',
-      key: 'userGender',
-      type: 'radiogroup',
-      props: {
-        options: GENDER_OPTIONS
-      }
-    })
-  }
-
-  const userItem = ref<SearchFormItem>({
-    label: '用户名',
-    key: 'name',
-    type: 'input',
+// 基础表单项配置
+const baseFormItems = {
+  username: createFormItem({
+    label: "用户名",
+    key: "name",
+    type: "input",
+    placeholder: "请输入用户名",
+    clearable: true,
+  }),
+  phone: createFormItem({
+    label: "手机号",
+    key: "phone",
+    type: "input",
+    props: { placeholder: "请输入手机号", maxlength: "11" },
+  }),
+  level: createFormItem({
+    label: "用户等级",
+    key: "level",
+    type: "select",
     props: {
-      placeholder: '请输入用户名',
-      clearable: true
-    }
-  })
-
-  // 控制用户名字段是否显示
-  const showUserName = ref(true)
-
-  // 动态表单项列表
-  const dynamicFormItems = ref<SearchFormItem[]>([])
-
-  // 动态表单项计数器（用于生成唯一 key）
-  let dynamicItemCounter = 0
-
-  // 级联选择器数据
-  const cascaderOptions = [
-    {
-      value: 'guide',
-      label: '指南',
-      children: [
-        {
-          value: 'disciplines',
-          label: '规范',
-          children: [
-            { value: 'consistency', label: '一致性' },
-            { value: 'feedback', label: '反馈' },
-            { value: 'efficiency', label: '效率' },
-            { value: 'controllability', label: '可控性' }
-          ]
-        }
-      ]
+      placeholder: "请选择等级",
+      options: LEVEL_OPTIONS,
     },
-    {
-      value: 'components',
-      label: '组件',
-      children: [
-        {
-          value: 'basic',
-          label: '基础组件',
-          children: [
-            { value: 'button', label: '按钮' },
-            { value: 'form', label: '表单' },
-            { value: 'table', label: '表格' }
-          ]
-        }
-      ]
-    }
-  ]
-
-  // 树选择器数据
-  const treeSelectData = [
-    {
-      value: '1',
-      label: '一级 1',
-      children: [
-        {
-          value: '1-1',
-          label: '二级 1-1',
-          children: [{ value: '1-1-1', label: '三级 1-1-1' }]
-        }
-      ]
+  }),
+  address: createFormItem({
+    label: "地址",
+    key: "address",
+    type: "input",
+    placeholder: "请输入地址",
+  }),
+  date: createFormItem({
+    label: "日期",
+    key: "date",
+    type: "datetime",
+    props: {
+      style: { width: "100%" },
+      placeholder: "请选择日期",
+      type: "date",
+      valueFormat: "YYYY-MM-DD",
+      shortcuts: DATE_SHORTCUTS,
     },
-    {
-      value: '2',
-      label: '一级 2',
-      children: [
+  }),
+  gender: createFormItem({
+    label: "性别",
+    key: "userGender",
+    type: "radiogroup",
+    props: {
+      options: GENDER_OPTIONS,
+    },
+  }),
+};
+
+const userItem = ref<SearchFormItem>({
+  label: "用户名",
+  key: "name",
+  type: "input",
+  props: {
+    placeholder: "请输入用户名",
+    clearable: true,
+  },
+});
+
+// 控制用户名字段是否显示
+const showUserName = ref(true);
+
+// 动态表单项列表
+const dynamicFormItems = ref<SearchFormItem[]>([]);
+
+// 动态表单项计数器（用于生成唯一 key）
+let dynamicItemCounter = 0;
+
+// 级联选择器数据
+const cascaderOptions = [
+  {
+    value: "guide",
+    label: "指南",
+    children: [
+      {
+        value: "disciplines",
+        label: "规范",
+        children: [
+          { value: "consistency", label: "一致性" },
+          { value: "feedback", label: "反馈" },
+          { value: "efficiency", label: "效率" },
+          { value: "controllability", label: "可控性" },
+        ],
+      },
+    ],
+  },
+  {
+    value: "components",
+    label: "组件",
+    children: [
+      {
+        value: "basic",
+        label: "基础组件",
+        children: [
+          { value: "button", label: "按钮" },
+          { value: "form", label: "表单" },
+          { value: "table", label: "表格" },
+        ],
+      },
+    ],
+  },
+];
+
+// 树选择器数据
+const treeSelectData = [
+  {
+    value: "1",
+    label: "一级 1",
+    children: [
+      {
+        value: "1-1",
+        label: "二级 1-1",
+        children: [{ value: "1-1-1", label: "三级 1-1-1" }],
+      },
+    ],
+  },
+  {
+    value: "2",
+    label: "一级 2",
+    children: [
+      {
+        value: "2-1",
+        label: "二级 2-1",
+        children: [{ value: "2-1-1", label: "三级 2-1-1" }],
+      },
+      {
+        value: "2-2",
+        label: "二级 2-2",
+        children: [{ value: "2-2-1", label: "三级 2-2-1" }],
+      },
+    ],
+  },
+];
+
+// 复选框选项
+const checkboxOptions = [
+  { label: "选项1", value: "option1" },
+  { label: "选项2", value: "option2" },
+  { label: "选项3", value: "option3" },
+  { label: "选项4", value: "option4" },
+  { label: "选项5（disabled）", value: "option5", disabled: true },
+];
+
+// 表单配置
+const formItems = computed(() => [
+  ...(showUserName.value ? [userItem.value] : []),
+  // 动态表单项
+  ...dynamicFormItems.value,
+  {
+    ...baseFormItems.phone,
+  },
+  {
+    ...baseFormItems.level,
+    props: { placeholder: "请选择等级", options: levelOptions.value },
+  },
+  baseFormItems.address,
+  baseFormItems.date,
+  // 日期时间
+  {
+    label: "日期时间",
+    key: "datetime",
+    type: "datetime",
+    props: {
+      style: { width: "100%" },
+      placeholder: "请选择日期时间",
+      type: "datetime",
+      valueFormat: "YYYY-MM-DD HH:mm:ss",
+    },
+  },
+  {
+    label: "日期范围",
+    key: "daterange",
+    type: "datetime",
+    props: {
+      type: "daterange",
+      valueFormat: "YYYY-MM-DD",
+      rangeSeparator: "至",
+      startPlaceholder: "开始日期",
+      endPlaceholder: "结束日期",
+    },
+  },
+  // 日期时间范围
+  {
+    label: "日期时间范围",
+    key: "datetimerange",
+    type: "datetime",
+    props: {
+      type: "datetimerange",
+      valueFormat: "YYYY-MM-DD HH:mm:ss",
+      rangeSeparator: "至",
+      startPlaceholder: "开始日期时间",
+      endPlaceholder: "结束日期时间",
+    },
+  },
+  // 时间选择
+  {
+    label: "时间选择",
+    key: "timeselect",
+    type: "timeselect",
+    props: {
+      placeholder: "请选择时间",
+      type: "time",
+      valueFormat: "HH:mm:ss",
+    },
+  },
+  // 时间选择器
+  {
+    label: "时间选择器",
+    key: "timepicker",
+    type: "timepicker",
+    props: {
+      style: { width: "100%" },
+      placeholder: "请选择时间",
+      type: "time",
+      valueFormat: "HH:mm:ss",
+    },
+  },
+  // 级联选择
+  {
+    label: "级联选择",
+    key: "cascader",
+    type: "cascader",
+    props: {
+      placeholder: "请选择级联选择器",
+      clearable: true,
+      style: { width: "100%" },
+      collapseTags: true,
+      maxCollapseTags: 1,
+      props: { multiple: true },
+      options: cascaderOptions,
+    },
+  },
+  // 树型选择器
+  {
+    label: "树型选择器",
+    key: "treeSelect",
+    type: "treeselect",
+    props: {
+      showCheckbox: true,
+      multiple: true,
+      clearable: true,
+      data: treeSelectData,
+    },
+  },
+  { label: "插槽", key: "slots", type: "input", placeholder: "请输入邮箱" },
+  {
+    label: "渲染组件",
+    key: "iconSelector",
+    render: () => h(ElInput, { placeholder: "渲染自定义 input" }),
+  },
+  {
+    label: "自定义组件",
+    key: "customComponent",
+    render: () =>
+      h(
+        "div",
         {
-          value: '2-1',
-          label: '二级 2-1',
-          children: [{ value: '2-1-1', label: '三级 2-1-1' }]
+          style:
+            "color: var(--art-gray-600); border: 1px solid var(--default-border-dashed); padding: 0px 15px; border-radius: 6px",
+        },
+        "我是一个自定义组件"
+      ),
+  },
+  {
+    label: "复选框",
+    key: "checkboxgroup",
+    type: "checkboxgroup",
+    span: 12,
+    props: {
+      options: checkboxOptions,
+    },
+  },
+  {
+    ...baseFormItems.gender,
+  },
+
+  {
+    label: "是否启用",
+    key: "isEnabled",
+    type: "switch",
+    props: {
+      placeholder: "请选择是否启用",
+    },
+  },
+  {
+    label: "年龄",
+    key: "age",
+    type: "number",
+    slots: {
+      suffix: () => h("span", { style: "color: #909399; font-size: 12px" }, "岁"),
+    },
+  },
+  {
+    label: "网站地址",
+    key: "website",
+    type: "input",
+    placeholder: "请输入网站名称",
+    slots: {
+      prepend: () => h("span", "https://"),
+      append: () => h("span", ".com"),
+    },
+  },
+  {
+    label: "事件演示",
+    key: "event",
+    type: "input",
+    props: {
+      placeholder: "输入内容触发事件，控制台查看",
+      clearable: true,
+      prefixIcon: "Search",
+      // prefix: () => h('span', {}, '123'),
+      // 事件必须以 on 开头，然后驼峰式命名拼接 ElementPlus 事件名
+      onInput(val: string) {
+        console.log("输入事件", val);
+      },
+      onClear() {
+        console.log("清空事件");
+      },
+    },
+  },
+
+  {
+    label: "多行输入",
+    key: "remark",
+    type: "input",
+    props: {
+      placeholder: "请输入备注",
+      type: "textarea",
+      rows: 2,
+    },
+  },
+  {
+    label: "评分",
+    key: "rate",
+    type: "rate",
+    props: {
+      size: "large",
+      placeholder: "请选择评分",
+    },
+  },
+  {
+    label: "禁用",
+    key: "diaabled",
+    type: "input",
+    placeholder: "我被禁用了",
+    disabled: true, // 禁用
+  },
+  {
+    label: "滑块",
+    key: "slider",
+    type: "slider",
+    // props: {
+    //   step: 10,
+    //   showStops: true
+    // }
+  },
+
+  {
+    label: "隐藏",
+    key: "email",
+    type: "input",
+    hidden: true,
+  },
+  // 根据条件隐藏
+  {
+    label: "根据条件隐藏",
+    key: "systemName",
+    type: "input",
+    hidden: formData.value.systemName === "mac",
+    placeholder: "输入 mac 组件隐藏",
+  },
+  {
+    label: "栅格布局",
+    key: "sg1",
+    type: "input",
+    span: 12,
+    placeholder: "示例：栅格 span=12 占容器一半宽度，span=24 占满容器",
+  },
+  // 文件上传示例 - 使用 render 函数渲染
+  {
+    label: "文件上传",
+    key: "multipleFiles",
+    span: 12,
+    render: () =>
+      h(
+        ElUpload,
+        {
+          multiple: true,
+          limit: 5,
+          action: "#",
+          autoUpload: false,
+          showFileList: true,
+          // accept: '.pdf,.doc,.docx,.txt',
+          beforeUpload: (file: File) => {
+            console.log("准备上传文件:", file.name);
+            return true;
+          },
+          onChange: (file: UploadFile, fileList: UploadFiles) => {
+            console.log("多文件变化:", file, fileList);
+            formData.value.multipleFiles = fileList as UploadUserFile[];
+          },
+          onRemove: (file: UploadFile, fileList: UploadFiles) => {
+            console.log("删除文件:", file, fileList);
+            formData.value.multipleFiles = fileList as UploadUserFile[];
+          },
+          onExceed: (files: File[], fileList: UploadUserFile[]) => {
+            ElMessage.warning(
+              `最多只能上传 5 个文件，当前选择了 ${files.length + fileList.length} 个文件`
+            );
+          },
         },
         {
-          value: '2-2',
-          label: '二级 2-2',
-          children: [{ value: '2-2-1', label: '三级 2-2-1' }]
+          default: () => [h(ElButton, { type: "primary" }, () => "点击上传")],
         }
-      ]
-    }
-  ]
-
-  // 复选框选项
-  const checkboxOptions = [
-    { label: '选项1', value: 'option1' },
-    { label: '选项2', value: 'option2' },
-    { label: '选项3', value: 'option3' },
-    { label: '选项4', value: 'option4' },
-    { label: '选项5（disabled）', value: 'option5', disabled: true }
-  ]
-
-  // 表单配置
-  const formItems = computed(() => [
-    ...(showUserName.value ? [userItem.value] : []),
-    // 动态表单项
-    ...dynamicFormItems.value,
-    {
-      ...baseFormItems.phone
-    },
-    {
-      ...baseFormItems.level,
-      props: { placeholder: '请选择等级', options: levelOptions.value }
-    },
-    baseFormItems.address,
-    baseFormItems.date,
-    // 日期时间
-    {
-      label: '日期时间',
-      key: 'datetime',
-      type: 'datetime',
-      props: {
-        style: { width: '100%' },
-        placeholder: '请选择日期时间',
-        type: 'datetime',
-        valueFormat: 'YYYY-MM-DD HH:mm:ss'
-      }
-    },
-    {
-      label: '日期范围',
-      key: 'daterange',
-      type: 'datetime',
-      props: {
-        type: 'daterange',
-        valueFormat: 'YYYY-MM-DD',
-        rangeSeparator: '至',
-        startPlaceholder: '开始日期',
-        endPlaceholder: '结束日期'
-      }
-    },
-    // 日期时间范围
-    {
-      label: '日期时间范围',
-      key: 'datetimerange',
-      type: 'datetime',
-      props: {
-        type: 'datetimerange',
-        valueFormat: 'YYYY-MM-DD HH:mm:ss',
-        rangeSeparator: '至',
-        startPlaceholder: '开始日期时间',
-        endPlaceholder: '结束日期时间'
-      }
-    },
-    // 时间选择
-    {
-      label: '时间选择',
-      key: 'timeselect',
-      type: 'timeselect',
-      props: {
-        placeholder: '请选择时间',
-        type: 'time',
-        valueFormat: 'HH:mm:ss'
-      }
-    },
-    // 时间选择器
-    {
-      label: '时间选择器',
-      key: 'timepicker',
-      type: 'timepicker',
-      props: {
-        style: { width: '100%' },
-        placeholder: '请选择时间',
-        type: 'time',
-        valueFormat: 'HH:mm:ss'
-      }
-    },
-    // 级联选择
-    {
-      label: '级联选择',
-      key: 'cascader',
-      type: 'cascader',
-      props: {
-        placeholder: '请选择级联选择器',
-        clearable: true,
-        style: { width: '100%' },
-        collapseTags: true,
-        maxCollapseTags: 1,
-        props: { multiple: true },
-        options: cascaderOptions
-      }
-    },
-    // 树型选择器
-    {
-      label: '树型选择器',
-      key: 'treeSelect',
-      type: 'treeselect',
-      props: {
-        showCheckbox: true,
-        multiple: true,
-        clearable: true,
-        data: treeSelectData
-      }
-    },
-    { label: '插槽', key: 'slots', type: 'input', placeholder: '请输入邮箱' },
-    {
-      label: '渲染组件',
-      key: 'iconSelector',
-      render: () => h(ElInput, { placeholder: '渲染自定义 input' })
-    },
-    {
-      label: '自定义组件',
-      key: 'customComponent',
-      render: () =>
-        h(
-          'div',
-          {
-            style:
-              'color: var(--art-gray-600); border: 1px solid var(--default-border-dashed); padding: 0px 15px; border-radius: 6px'
+      ),
+  },
+  // 图片上传示例 - 使用 render 函数渲染
+  {
+    label: "图片上传",
+    key: "imageUpload",
+    span: 12,
+    render: () =>
+      h(
+        ElUpload,
+        {
+          accept: ".jpg,.jpeg,.png,.gif,.webp",
+          limit: 4,
+          action: "#",
+          autoUpload: false,
+          showFileList: true,
+          listType: "picture-card",
+          beforeUpload: (file: File) => {
+            const isImage = file.type.startsWith("image/");
+            const isLt2M = file.size / 1024 / 1024 < 2;
+            if (!isImage) {
+              ElMessage.error("只能上传图片文件!");
+              return false;
+            }
+            if (!isLt2M) {
+              ElMessage.error("图片大小不能超过 2MB!");
+              return false;
+            }
+            return true;
+          },
+          onChange: (file: UploadFile, fileList: UploadFiles) => {
+            console.log("图片变化:", file, fileList);
+            formData.value.imageUpload = fileList as UploadUserFile[];
+          },
+          onRemove: (file: UploadFile, fileList: UploadFiles) => {
+            console.log("删除图片:", file, fileList);
+            formData.value.imageUpload = fileList as UploadUserFile[];
+          },
+          onPreview: (file: UploadFile) => {
+            dialogImageUrl.value = file.url || "";
+            dialogVisible.value = true;
           },
-          '我是一个自定义组件'
-        )
-    },
-    {
-      label: '复选框',
-      key: 'checkboxgroup',
-      type: 'checkboxgroup',
-      span: 12,
-      props: {
-        options: checkboxOptions
-      }
-    },
-    {
-      ...baseFormItems.gender
-    },
-
-    {
-      label: '是否启用',
-      key: 'isEnabled',
-      type: 'switch',
-      props: {
-        placeholder: '请选择是否启用'
-      }
-    },
-    {
-      label: '年龄',
-      key: 'age',
-      type: 'number',
-      slots: {
-        suffix: () => h('span', { style: 'color: #909399; font-size: 12px' }, '岁')
-      }
-    },
-    {
-      label: '网站地址',
-      key: 'website',
-      type: 'input',
-      placeholder: '请输入网站名称',
-      slots: {
-        prepend: () => h('span', 'https://'),
-        append: () => h('span', '.com')
-      }
-    },
-    {
-      label: '事件演示',
-      key: 'event',
-      type: 'input',
-      props: {
-        placeholder: '输入内容触发事件，控制台查看',
-        clearable: true,
-        prefixIcon: 'Search',
-        // prefix: () => h('span', {}, '123'),
-        // 事件必须以 on 开头，然后驼峰式命名拼接 ElementPlus 事件名
-        onInput(val: string) {
-          console.log('输入事件', val)
         },
-        onClear() {
-          console.log('清空事件')
+        {
+          default: () => [h(ElIcon, { type: "primary" }, () => h(Plus))],
         }
-      }
-    },
+      ),
+  },
+  // 富文本编辑器示例 - 使用 render 函数渲染
+  {
+    label: "富文本编辑器",
+    key: "richTextContent",
+    span: 24,
+    render: () =>
+      h(ArtWangEditor, {
+        modelValue: formData.value.richTextContent,
+        height: "300px",
+        placeholder: "请输入富文本内容...",
+        "onUpdate:modelValue": (value: string) => {
+          formData.value.richTextContent = value;
+          console.log("富文本内容变化:", value);
+        },
+        toolbarKeys: [
+          "headerSelect",
+          "bold",
+          "italic",
+          "underline",
+          "|",
+          "bulletedList",
+          "numberedList",
+          "|",
+          "insertLink",
+          "insertImage",
+          "|",
+          "undo",
+          "redo",
+        ],
+      }),
+  },
+]);
 
-    {
-      label: '多行输入',
-      key: 'remark',
-      type: 'input',
-      props: {
-        placeholder: '请输入备注',
-        type: 'textarea',
-        rows: 2
-      }
-    },
-    {
-      label: '评分',
-      key: 'rate',
-      type: 'rate',
-      props: {
-        size: 'large',
-        placeholder: '请选择评分'
-      }
-    },
-    {
-      label: '禁用',
-      key: 'diaabled',
-      type: 'input',
-      placeholder: '我被禁用了',
-      disabled: true // 禁用
-    },
-    {
-      label: '滑块',
-      key: 'slider',
-      type: 'slider'
-      // props: {
-      //   step: 10,
-      //   showStops: true
-      // }
-    },
+/**
+ * 处理表单重置事件
+ */
+const handleReset = (): void => {
+  console.log("重置表单");
+  emit("reset");
+};
 
-    {
-      label: '隐藏',
-      key: 'email',
-      type: 'input',
-      hidden: true
-    },
-    // 根据条件隐藏
-    {
-      label: '根据条件隐藏',
-      key: 'systemName',
-      type: 'input',
-      hidden: formData.value.systemName === 'mac',
-      placeholder: '输入 mac 组件隐藏'
-    },
-    {
-      label: '栅格布局',
-      key: 'sg1',
-      type: 'input',
-      span: 12,
-      placeholder: '示例：栅格 span=12 占容器一半宽度，span=24 占满容器'
-    },
-    // 文件上传示例 - 使用 render 函数渲染
-    {
-      label: '文件上传',
-      key: 'multipleFiles',
-      span: 12,
-      render: () =>
-        h(
-          ElUpload,
-          {
-            multiple: true,
-            limit: 5,
-            action: '#',
-            autoUpload: false,
-            showFileList: true,
-            // accept: '.pdf,.doc,.docx,.txt',
-            beforeUpload: (file: File) => {
-              console.log('准备上传文件:', file.name)
-              return true
-            },
-            onChange: (file: UploadFile, fileList: UploadFiles) => {
-              console.log('多文件变化:', file, fileList)
-              formData.value.multipleFiles = fileList as UploadUserFile[]
-            },
-            onRemove: (file: UploadFile, fileList: UploadFiles) => {
-              console.log('删除文件:', file, fileList)
-              formData.value.multipleFiles = fileList as UploadUserFile[]
-            },
-            onExceed: (files: File[], fileList: UploadUserFile[]) => {
-              ElMessage.warning(
-                `最多只能上传 5 个文件，当前选择了 ${files.length + fileList.length} 个文件`
-              )
-            }
-          },
-          {
-            default: () => [h(ElButton, { type: 'primary' }, () => '点击上传')]
-          }
-        )
-    },
-    // 图片上传示例 - 使用 render 函数渲染
-    {
-      label: '图片上传',
-      key: 'imageUpload',
-      span: 12,
-      render: () =>
-        h(
-          ElUpload,
-          {
-            accept: '.jpg,.jpeg,.png,.gif,.webp',
-            limit: 4,
-            action: '#',
-            autoUpload: false,
-            showFileList: true,
-            listType: 'picture-card',
-            beforeUpload: (file: File) => {
-              const isImage = file.type.startsWith('image/')
-              const isLt2M = file.size / 1024 / 1024 < 2
-              if (!isImage) {
-                ElMessage.error('只能上传图片文件!')
-                return false
-              }
-              if (!isLt2M) {
-                ElMessage.error('图片大小不能超过 2MB!')
-                return false
-              }
-              return true
-            },
-            onChange: (file: UploadFile, fileList: UploadFiles) => {
-              console.log('图片变化:', file, fileList)
-              formData.value.imageUpload = fileList as UploadUserFile[]
-            },
-            onRemove: (file: UploadFile, fileList: UploadFiles) => {
-              console.log('删除图片:', file, fileList)
-              formData.value.imageUpload = fileList as UploadUserFile[]
-            },
-            onPreview: (file: UploadFile) => {
-              dialogImageUrl.value = file.url || ''
-              dialogVisible.value = true
-            }
-          },
-          {
-            default: () => [h(ElIcon, { type: 'primary' }, () => h(Plus))]
-          }
-        )
-    },
-    // 富文本编辑器示例 - 使用 render 函数渲染
-    {
-      label: '富文本编辑器',
-      key: 'richTextContent',
-      span: 24,
-      render: () =>
-        h(ArtWangEditor, {
-          modelValue: formData.value.richTextContent,
-          height: '300px',
-          placeholder: '请输入富文本内容...',
-          'onUpdate:modelValue': (value: string) => {
-            formData.value.richTextContent = value
-            console.log('富文本内容变化:', value)
-          },
-          toolbarKeys: [
-            'headerSelect',
-            'bold',
-            'italic',
-            'underline',
-            '|',
-            'bulletedList',
-            'numberedList',
-            '|',
-            'insertLink',
-            'insertImage',
-            '|',
-            'undo',
-            'redo'
-          ]
-        })
-    }
-  ])
+/**
+ * 处理表单提交事件
+ */
+const handleSubmit = async (params: Record<string, any>): Promise<void> => {
+  await formRef.value.validate();
+  emit("search", params);
+  console.log("表单数据", params);
+};
 
-  /**
-   * 处理表单重置事件
-   */
-  const handleReset = (): void => {
-    console.log('重置表单')
-    emit('reset')
+/**
+ * 校验表单
+ */
+const validateForm = () => formRef.value.validate();
+
+/**
+ * 重置表单
+ */
+const resetForm = () => formRef.value.reset();
+
+/**
+ * 更新用户名字段配置
+ */
+const updateUserName = (): void => {
+  userItem.value = {
+    ...userItem.value,
+    label: "昵称",
+    props: {
+      placeholder: "请输入昵称",
+    },
+  };
+};
+
+/**
+ * 删除用户名字段
+ */
+const deleteUserName = (): void => {
+  showUserName.value = false;
+  formData.value.name = undefined;
+};
+
+/**
+ * 新增表单项
+ */
+const addFormItem = (): void => {
+  dynamicItemCounter++;
+  const newItem: SearchFormItem = {
+    label: `动态字段${dynamicItemCounter}`,
+    key: `dynamic_${dynamicItemCounter}`,
+    type: "input",
+    props: {
+      placeholder: `请输入动态字段${dynamicItemCounter}`,
+      clearable: true,
+    },
+  };
+  dynamicFormItems.value.push(newItem);
+  ElMessage.success(`已新增表单项：${newItem.label}`);
+};
+
+/**
+ * 修改表单项（修改最后一个动态表单项）
+ */
+const updateFormItem = (): void => {
+  if (dynamicFormItems.value.length === 0) {
+    ElMessage.warning("没有可修改的动态表单项，请先新增");
+    return;
   }
 
-  /**
-   * 处理表单提交事件
-   */
-  const handleSubmit = async (params: Record<string, any>): Promise<void> => {
-    await formRef.value.validate()
-    emit('search', params)
-    console.log('表单数据', params)
+  const lastIndex = dynamicFormItems.value.length - 1;
+  const lastItem = dynamicFormItems.value[lastIndex];
+
+  // 修改最后一个表单项的配置
+  dynamicFormItems.value[lastIndex] = {
+    ...lastItem,
+    label: `已修改`,
+    type: "select",
+    props: {
+      placeholder: "修改为下拉选择",
+      options: [
+        { label: "选项A", value: "a" },
+        { label: "选项B", value: "b" },
+        { label: "选项C", value: "c" },
+      ],
+    },
+  };
+
+  ElMessage.success(`已修改表单项：${lastItem.label}`);
+};
+
+/**
+ * 删除表单项（删除最后一个动态表单项）
+ */
+const deleteFormItem = (): void => {
+  if (dynamicFormItems.value.length === 0) {
+    ElMessage.warning("没有可删除的动态表单项");
+    return;
   }
 
-  /**
-   * 校验表单
-   */
-  const validateForm = () => formRef.value.validate()
+  const deletedItem = dynamicFormItems.value.pop();
+  if (deletedItem) {
+    // 清除对应的表单数据
+    delete formData.value[deletedItem.key as keyof FormData];
+    ElMessage.success(`已删除表单项：${deletedItem.label}`);
+  }
+};
 
-  /**
-   * 重置表单
-   */
-  const resetForm = () => formRef.value.reset()
-
-  /**
-   * 更新用户名字段配置
-   */
-  const updateUserName = (): void => {
-    userItem.value = {
-      ...userItem.value,
-      label: '昵称',
+/**
+ * 批量新增表单项
+ */
+const batchAddFormItems = (): void => {
+  const batchItems: SearchFormItem[] = [
+    {
+      label: "公司名称",
+      key: `company_${++dynamicItemCounter}`,
+      type: "input",
       props: {
-        placeholder: '请输入昵称'
-      }
-    }
-  }
-
-  /**
-   * 删除用户名字段
-   */
-  const deleteUserName = (): void => {
-    showUserName.value = false
-    formData.value.name = undefined
-  }
-
-  /**
-   * 新增表单项
-   */
-  const addFormItem = (): void => {
-    dynamicItemCounter++
-    const newItem: SearchFormItem = {
-      label: `动态字段${dynamicItemCounter}`,
-      key: `dynamic_${dynamicItemCounter}`,
-      type: 'input',
+        placeholder: "请输入公司名称",
+        clearable: true,
+      },
+    },
+    {
+      label: "部门",
+      key: `department_${++dynamicItemCounter}`,
+      type: "select",
       props: {
-        placeholder: `请输入动态字段${dynamicItemCounter}`,
-        clearable: true
-      }
-    }
-    dynamicFormItems.value.push(newItem)
-    ElMessage.success(`已新增表单项：${newItem.label}`)
-  }
-
-  /**
-   * 修改表单项（修改最后一个动态表单项）
-   */
-  const updateFormItem = (): void => {
-    if (dynamicFormItems.value.length === 0) {
-      ElMessage.warning('没有可修改的动态表单项，请先新增')
-      return
-    }
-
-    const lastIndex = dynamicFormItems.value.length - 1
-    const lastItem = dynamicFormItems.value[lastIndex]
-
-    // 修改最后一个表单项的配置
-    dynamicFormItems.value[lastIndex] = {
-      ...lastItem,
-      label: `已修改`,
-      type: 'select',
-      props: {
-        placeholder: '修改为下拉选择',
+        placeholder: "请选择部门",
         options: [
-          { label: '选项A', value: 'a' },
-          { label: '选项B', value: 'b' },
-          { label: '选项C', value: 'c' }
-        ]
-      }
-    }
-
-    ElMessage.success(`已修改表单项：${lastItem.label}`)
-  }
-
-  /**
-   * 删除表单项（删除最后一个动态表单项）
-   */
-  const deleteFormItem = (): void => {
-    if (dynamicFormItems.value.length === 0) {
-      ElMessage.warning('没有可删除的动态表单项')
-      return
-    }
-
-    const deletedItem = dynamicFormItems.value.pop()
-    if (deletedItem) {
-      // 清除对应的表单数据
-      delete formData.value[deletedItem.key as keyof FormData]
-      ElMessage.success(`已删除表单项：${deletedItem.label}`)
-    }
-  }
-
-  /**
-   * 批量新增表单项
-   */
-  const batchAddFormItems = (): void => {
-    const batchItems: SearchFormItem[] = [
-      {
-        label: '公司名称',
-        key: `company_${++dynamicItemCounter}`,
-        type: 'input',
-        props: {
-          placeholder: '请输入公司名称',
-          clearable: true
-        }
+          { label: "技术部", value: "tech" },
+          { label: "产品部", value: "product" },
+          { label: "运营部", value: "operation" },
+        ],
       },
-      {
-        label: '部门',
-        key: `department_${++dynamicItemCounter}`,
-        type: 'select',
-        props: {
-          placeholder: '请选择部门',
-          options: [
-            { label: '技术部', value: 'tech' },
-            { label: '产品部', value: 'product' },
-            { label: '运营部', value: 'operation' }
-          ]
-        }
+    },
+    {
+      label: "入职日期",
+      key: `joinDate_${++dynamicItemCounter}`,
+      type: "datetime",
+      props: {
+        style: { width: "100%" },
+        placeholder: "请选择入职日期",
+        type: "date",
+        valueFormat: "YYYY-MM-DD",
       },
-      {
-        label: '入职日期',
-        key: `joinDate_${++dynamicItemCounter}`,
-        type: 'datetime',
-        props: {
-          style: { width: '100%' },
-          placeholder: '请选择入职日期',
-          type: 'date',
-          valueFormat: 'YYYY-MM-DD'
-        }
-      }
-    ]
+    },
+  ];
 
-    dynamicFormItems.value.push(...batchItems)
-    ElMessage.success(`已批量新增 ${batchItems.length} 个表单项`)
+  dynamicFormItems.value.push(...batchItems);
+  ElMessage.success(`已批量新增 ${batchItems.length} 个表单项`);
+};
+
+/**
+ * 重置动态表单项
+ */
+const resetDynamicItems = (): void => {
+  if (dynamicFormItems.value.length === 0) {
+    ElMessage.info("当前没有动态表单项");
+    return;
   }
 
-  /**
-   * 重置动态表单项
-   */
-  const resetDynamicItems = (): void => {
-    if (dynamicFormItems.value.length === 0) {
-      ElMessage.info('当前没有动态表单项')
-      return
-    }
+  // 清除所有动态表单项的数据
+  dynamicFormItems.value.forEach((item) => {
+    delete formData.value[item.key as keyof FormData];
+  });
 
-    // 清除所有动态表单项的数据
-    dynamicFormItems.value.forEach((item) => {
-      delete formData.value[item.key as keyof FormData]
-    })
-
-    dynamicFormItems.value = []
-    dynamicItemCounter = 0
-    ElMessage.success('已重置所有动态表单项')
-  }
+  dynamicFormItems.value = [];
+  dynamicItemCounter = 0;
+  ElMessage.success("已重置所有动态表单项");
+};
 </script>
diff --git a/frontend/new-web/src/views/examples/forms/search-bar.vue b/frontend/new-web/src/views/examples/forms/search-bar.vue
index 78451bab..17282a8f 100644
--- a/frontend/new-web/src/views/examples/forms/search-bar.vue
+++ b/frontend/new-web/src/views/examples/forms/search-bar.vue
@@ -8,8 +8,7 @@
       :items="formItemsBasic"
       @reset="handleBasicReset"
       @search="handleBasicSearch"
-    >
-    </ArtSearchBar>
+    ></ArtSearchBar>
 
     <h2 class="mb-1 mt-3.5 text-lg font-medium">完整示例（默认展开）</h2>
     <ArtSearchBar
@@ -37,805 +36,805 @@
     <div class="mt-3.5">
       <h3 class="mb-2 text-base font-medium">动态表单操作</h3>
       <ElSpace wrap class="mb-3">
-        <ElButton @click="getLevelOptions"> 获取用户等级数据 </ElButton>
-        <ElButton @click="addFormItem"> 新增表单项 </ElButton>
-        <ElButton @click="updateFormItem"> 修改表单项 </ElButton>
-        <ElButton @click="deleteFormItem"> 删除表单项 </ElButton>
-        <ElButton @click="batchAddFormItems"> 批量新增 </ElButton>
-        <ElButton @click="resetDynamicItems"> 重置动态项 </ElButton>
+        <ElButton @click="getLevelOptions">获取用户等级数据</ElButton>
+        <ElButton @click="addFormItem">新增表单项</ElButton>
+        <ElButton @click="updateFormItem">修改表单项</ElButton>
+        <ElButton @click="deleteFormItem">删除表单项</ElButton>
+        <ElButton @click="batchAddFormItems">批量新增</ElButton>
+        <ElButton @click="resetDynamicItems">重置动态项</ElButton>
       </ElSpace>
 
       <h3 class="mb-2 text-base font-medium">其他操作</h3>
       <ElSpace wrap>
-        <ElButton @click="advancedValidate"> 校验表单 </ElButton>
-        <ElButton @click="advancedReset"> 重置 </ElButton>
-        <ElButton v-if="showUserName" @click="updateUserName"> 修改用户名 </ElButton>
-        <ElButton v-if="showUserName" @click="deleteUserName"> 删除用户名 </ElButton>
-        <ElButton @click="labelWidthAdvanced = 120"> 修改 label 宽度 </ElButton>
-        <ElButton @click="spanAdvanced = 8"> 设置一行显示的组件数 </ElButton>
-        <ElButton @click="gutterAdvanced = 50"> 修改 gutter </ElButton>
-        <ElButton @click="labelPositionAdvanced = 'left'"> label 左对齐 </ElButton>
-        <ElButton @click="labelPositionAdvanced = 'right'"> label 右对齐 </ElButton>
-        <ElButton @click="labelPositionAdvanced = 'top'"> label 顶部对齐 </ElButton>
+        <ElButton @click="advancedValidate">校验表单</ElButton>
+        <ElButton @click="advancedReset">重置</ElButton>
+        <ElButton v-if="showUserName" @click="updateUserName">修改用户名</ElButton>
+        <ElButton v-if="showUserName" @click="deleteUserName">删除用户名</ElButton>
+        <ElButton @click="labelWidthAdvanced = 120">修改 label 宽度</ElButton>
+        <ElButton @click="spanAdvanced = 8">设置一行显示的组件数</ElButton>
+        <ElButton @click="gutterAdvanced = 50">修改 gutter</ElButton>
+        <ElButton @click="labelPositionAdvanced = 'left'">label 左对齐</ElButton>
+        <ElButton @click="labelPositionAdvanced = 'right'">label 右对齐</ElButton>
+        <ElButton @click="labelPositionAdvanced = 'top'">label 顶部对齐</ElButton>
       </ElSpace>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { ElInput } from 'element-plus'
-  import { SearchFormItem } from '@/components/core/forms/art-search-bar/index.vue'
+import { ElInput } from "element-plus";
+import { SearchFormItem } from "@/components/core/forms/art-search-bar/index.vue";
 
-  interface Emits {
-    (e: 'update:modelValue', value: Record<string, any>): void
-    (e: 'search', params: Record<string, any>): void
-    (e: 'reset'): void
+interface Emits {
+  (e: "update:modelValue", value: Record<string, any>): void;
+  (e: "search", params: Record<string, any>): void;
+  (e: "reset"): void;
+}
+
+interface OptionItem {
+  label: string;
+  value: string;
+  disabled?: boolean;
+}
+
+interface BasicFormData {
+  name?: string;
+  phone?: string;
+  level?: string;
+  address?: string;
+  date?: string;
+  daterange?: string[];
+  status?: boolean;
+}
+
+interface AdvancedFormData extends BasicFormData {
+  slots?: string;
+  cascader?: string[];
+  checkboxgroup?: string[];
+  userGender?: string;
+  iconSelector?: string;
+  systemName?: string;
+}
+
+const emit = defineEmits<Emits>();
+
+const FETCH_DELAY = 500;
+
+const searchBarBasicRef = ref();
+const searchBarAdvancedRef = ref();
+
+/**
+ * 基础示例表单数据
+ */
+const formDataBasic = ref<BasicFormData>({
+  name: undefined,
+  phone: undefined,
+  level: undefined,
+  address: undefined,
+  date: undefined,
+  daterange: undefined,
+  status: undefined,
+});
+
+/**
+ * 完整示例表单数据
+ */
+const formDataAdvanced = ref<AdvancedFormData>({
+  name: undefined,
+  phone: undefined,
+  level: undefined,
+  address: undefined,
+  slots: undefined,
+  date: undefined,
+  daterange: undefined,
+  cascader: undefined,
+  checkboxgroup: undefined,
+  userGender: undefined,
+  iconSelector: undefined,
+  status: undefined,
+  systemName: undefined,
+});
+
+/**
+ * 完整示例校验规则
+ */
+const rulesAdvanced = {
+  name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
+  phone: [
+    { required: true, message: "请输入手机号", trigger: "blur" },
+    { min: 11, max: 11, message: "请输入11位手机号", trigger: "blur" },
+    { pattern: /^1[3456789]\d{9}$/, message: "请输入正确的手机号", trigger: "blur" },
+  ],
+  level: [{ required: true, message: "请选择等级", trigger: "change" }],
+  address: [{ required: true, message: "请输入地址", trigger: "blur" }],
+};
+
+const labelWidthAdvanced = ref(100);
+const labelPositionAdvanced = ref<"right" | "left" | "top">("right");
+const spanAdvanced = ref(6);
+const gutterAdvanced = ref(12);
+
+const levelOptions = ref<OptionItem[]>([]);
+
+/**
+ * 用户等级选项
+ */
+const LEVEL_OPTIONS: OptionItem[] = [
+  { label: "普通用户", value: "normal" },
+  { label: "VIP用户", value: "vip" },
+  { label: "高级VIP", value: "svip" },
+  { label: "企业用户", value: "enterprise", disabled: true },
+];
+
+/**
+ * 性别选项
+ */
+const GENDER_OPTIONS: OptionItem[] = [
+  { label: "男", value: "1" },
+  { label: "女", value: "2" },
+];
+
+/**
+ * 日期快捷选项
+ */
+const DATE_SHORTCUTS = [
+  { text: "今日", value: new Date() },
+  { text: "昨日", value: () => new Date(Date.now() - 86400000) },
+  { text: "一周前", value: () => new Date(Date.now() - 604800000) },
+];
+
+/**
+ * 模拟接口获取用户等级数据
+ * @returns 用户等级选项列表
+ */
+const fetchLevelOptions = (): Promise<OptionItem[]> => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(LEVEL_OPTIONS);
+    }, FETCH_DELAY);
+  });
+};
+
+/**
+ * 获取用户等级数据
+ */
+const getLevelOptions = async (): Promise<void> => {
+  levelOptions.value = await fetchLevelOptions();
+  if (levelOptions.value.length) {
+    ElMessage.success("成功获取到数据");
   }
+};
 
-  interface OptionItem {
-    label: string
-    value: string
-    disabled?: boolean
-  }
+/**
+ * 表单项配置类型
+ */
+interface FormItemConfig {
+  label: string;
+  key: string;
+  type: string;
+  placeholder?: string;
+  clearable?: boolean;
+  props?: Record<string, any>;
+  [key: string]: any;
+}
 
-  interface BasicFormData {
-    name?: string
-    phone?: string
-    level?: string
-    address?: string
-    date?: string
-    daterange?: string[]
-    status?: boolean
-  }
+/**
+ * 创建表单项的工厂函数
+ */
+const createFormItem = (config: FormItemConfig) => config;
 
-  interface AdvancedFormData extends BasicFormData {
-    slots?: string
-    cascader?: string[]
-    checkboxgroup?: string[]
-    userGender?: string
-    iconSelector?: string
-    systemName?: string
-  }
-
-  const emit = defineEmits<Emits>()
-
-  const FETCH_DELAY = 500
-
-  const searchBarBasicRef = ref()
-  const searchBarAdvancedRef = ref()
-
-  /**
-   * 基础示例表单数据
-   */
-  const formDataBasic = ref<BasicFormData>({
-    name: undefined,
-    phone: undefined,
-    level: undefined,
-    address: undefined,
-    date: undefined,
-    daterange: undefined,
-    status: undefined
-  })
-
-  /**
-   * 完整示例表单数据
-   */
-  const formDataAdvanced = ref<AdvancedFormData>({
-    name: undefined,
-    phone: undefined,
-    level: undefined,
-    address: undefined,
-    slots: undefined,
-    date: undefined,
-    daterange: undefined,
-    cascader: undefined,
-    checkboxgroup: undefined,
-    userGender: undefined,
-    iconSelector: undefined,
-    status: undefined,
-    systemName: undefined
-  })
-
-  /**
-   * 完整示例校验规则
-   */
-  const rulesAdvanced = {
-    name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
-    phone: [
-      { required: true, message: '请输入手机号', trigger: 'blur' },
-      { min: 11, max: 11, message: '请输入11位手机号', trigger: 'blur' },
-      { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
-    ],
-    level: [{ required: true, message: '请选择等级', trigger: 'change' }],
-    address: [{ required: true, message: '请输入地址', trigger: 'blur' }]
-  }
-
-  const labelWidthAdvanced = ref(100)
-  const labelPositionAdvanced = ref<'right' | 'left' | 'top'>('right')
-  const spanAdvanced = ref(6)
-  const gutterAdvanced = ref(12)
-
-  const levelOptions = ref<OptionItem[]>([])
-
-  /**
-   * 用户等级选项
-   */
-  const LEVEL_OPTIONS: OptionItem[] = [
-    { label: '普通用户', value: 'normal' },
-    { label: 'VIP用户', value: 'vip' },
-    { label: '高级VIP', value: 'svip' },
-    { label: '企业用户', value: 'enterprise', disabled: true }
-  ]
-
-  /**
-   * 性别选项
-   */
-  const GENDER_OPTIONS: OptionItem[] = [
-    { label: '男', value: '1' },
-    { label: '女', value: '2' }
-  ]
-
-  /**
-   * 日期快捷选项
-   */
-  const DATE_SHORTCUTS = [
-    { text: '今日', value: new Date() },
-    { text: '昨日', value: () => new Date(Date.now() - 86400000) },
-    { text: '一周前', value: () => new Date(Date.now() - 604800000) }
-  ]
-
-  /**
-   * 模拟接口获取用户等级数据
-   * @returns 用户等级选项列表
-   */
-  const fetchLevelOptions = (): Promise<OptionItem[]> => {
-    return new Promise((resolve) => {
-      setTimeout(() => {
-        resolve(LEVEL_OPTIONS)
-      }, FETCH_DELAY)
-    })
-  }
-
-  /**
-   * 获取用户等级数据
-   */
-  const getLevelOptions = async (): Promise<void> => {
-    levelOptions.value = await fetchLevelOptions()
-    if (levelOptions.value.length) {
-      ElMessage.success('成功获取到数据')
-    }
-  }
-
-  /**
-   * 表单项配置类型
-   */
-  interface FormItemConfig {
-    label: string
-    key: string
-    type: string
-    placeholder?: string
-    clearable?: boolean
-    props?: Record<string, any>
-    [key: string]: any
-  }
-
-  /**
-   * 创建表单项的工厂函数
-   */
-  const createFormItem = (config: FormItemConfig) => config
-
-  // 基础表单项配置
-  const baseFormItems = {
-    username: createFormItem({
-      label: '用户名',
-      key: 'name',
-      type: 'input',
-      placeholder: '请输入用户名',
-      clearable: true
-    }),
-    phone: createFormItem({
-      label: '手机号',
-      key: 'phone',
-      type: 'input',
-      props: { placeholder: '请输入手机号', maxlength: '11' }
-    }),
-    level: createFormItem({
-      label: '用户等级',
-      key: 'level',
-      type: 'select',
-      props: {
-        placeholder: '请选择等级',
-        options: LEVEL_OPTIONS
-      }
-    }),
-    address: createFormItem({
-      label: '地址',
-      key: 'address',
-      type: 'input',
-      placeholder: '请输入地址'
-    }),
-    date: createFormItem({
-      label: '日期',
-      key: 'date',
-      type: 'datetime',
-      props: {
-        style: { width: '100%' },
-        placeholder: '请选择日期',
-        type: 'date',
-        valueFormat: 'YYYY-MM-DD',
-        shortcuts: DATE_SHORTCUTS
-      }
-    }),
-    gender: createFormItem({
-      label: '性别',
-      key: 'userGender',
-      type: 'radiogroup',
-      props: {
-        options: GENDER_OPTIONS
-      }
-    })
-  }
-
-  // 表单配置
-  const formItemsBasic = computed(() => [
-    baseFormItems.username,
-    {
-      label: '密码',
-      key: 'password',
-      type: 'input',
-      props: {
-        type: 'password',
-        placeholder: '请输入密码',
-        clearable: true
-      }
-    },
-    baseFormItems.phone,
-    baseFormItems.level,
-    baseFormItems.address,
-    baseFormItems.date,
-    baseFormItems.gender
-  ])
-
-  const userItem = ref<SearchFormItem>({
-    label: '用户名',
-    key: 'name',
-    type: 'input',
+// 基础表单项配置
+const baseFormItems = {
+  username: createFormItem({
+    label: "用户名",
+    key: "name",
+    type: "input",
+    placeholder: "请输入用户名",
+    clearable: true,
+  }),
+  phone: createFormItem({
+    label: "手机号",
+    key: "phone",
+    type: "input",
+    props: { placeholder: "请输入手机号", maxlength: "11" },
+  }),
+  level: createFormItem({
+    label: "用户等级",
+    key: "level",
+    type: "select",
     props: {
-      placeholder: '请输入用户名',
-      clearable: true
-    }
-  })
-
-  // 控制用户名字段是否显示
-  const showUserName = ref(true)
-
-  // 动态表单项列表
-  const dynamicFormItems = ref<SearchFormItem[]>([])
-
-  // 动态表单项计数器（用于生成唯一 key）
-  let dynamicItemCounter = 0
-
-  // 级联选择器数据
-  const cascaderOptions = [
-    {
-      value: 'guide',
-      label: '指南',
-      children: [
-        {
-          value: 'disciplines',
-          label: '规范',
-          children: [
-            { value: 'consistency', label: '一致性' },
-            { value: 'feedback', label: '反馈' },
-            { value: 'efficiency', label: '效率' },
-            { value: 'controllability', label: '可控性' }
-          ]
-        }
-      ]
+      placeholder: "请选择等级",
+      options: LEVEL_OPTIONS,
     },
-    {
-      value: 'components',
-      label: '组件',
-      children: [
-        {
-          value: 'basic',
-          label: '基础组件',
-          children: [
-            { value: 'button', label: '按钮' },
-            { value: 'form', label: '表单' },
-            { value: 'table', label: '表格' }
-          ]
-        }
-      ]
-    }
-  ]
-
-  // 树选择器数据
-  const treeSelectData = [
-    {
-      value: '1',
-      label: '一级 1',
-      children: [
-        {
-          value: '1-1',
-          label: '二级 1-1',
-          children: [{ value: '1-1-1', label: '三级 1-1-1' }]
-        }
-      ]
+  }),
+  address: createFormItem({
+    label: "地址",
+    key: "address",
+    type: "input",
+    placeholder: "请输入地址",
+  }),
+  date: createFormItem({
+    label: "日期",
+    key: "date",
+    type: "datetime",
+    props: {
+      style: { width: "100%" },
+      placeholder: "请选择日期",
+      type: "date",
+      valueFormat: "YYYY-MM-DD",
+      shortcuts: DATE_SHORTCUTS,
     },
-    {
-      value: '2',
-      label: '一级 2',
-      children: [
+  }),
+  gender: createFormItem({
+    label: "性别",
+    key: "userGender",
+    type: "radiogroup",
+    props: {
+      options: GENDER_OPTIONS,
+    },
+  }),
+};
+
+// 表单配置
+const formItemsBasic = computed(() => [
+  baseFormItems.username,
+  {
+    label: "密码",
+    key: "password",
+    type: "input",
+    props: {
+      type: "password",
+      placeholder: "请输入密码",
+      clearable: true,
+    },
+  },
+  baseFormItems.phone,
+  baseFormItems.level,
+  baseFormItems.address,
+  baseFormItems.date,
+  baseFormItems.gender,
+]);
+
+const userItem = ref<SearchFormItem>({
+  label: "用户名",
+  key: "name",
+  type: "input",
+  props: {
+    placeholder: "请输入用户名",
+    clearable: true,
+  },
+});
+
+// 控制用户名字段是否显示
+const showUserName = ref(true);
+
+// 动态表单项列表
+const dynamicFormItems = ref<SearchFormItem[]>([]);
+
+// 动态表单项计数器（用于生成唯一 key）
+let dynamicItemCounter = 0;
+
+// 级联选择器数据
+const cascaderOptions = [
+  {
+    value: "guide",
+    label: "指南",
+    children: [
+      {
+        value: "disciplines",
+        label: "规范",
+        children: [
+          { value: "consistency", label: "一致性" },
+          { value: "feedback", label: "反馈" },
+          { value: "efficiency", label: "效率" },
+          { value: "controllability", label: "可控性" },
+        ],
+      },
+    ],
+  },
+  {
+    value: "components",
+    label: "组件",
+    children: [
+      {
+        value: "basic",
+        label: "基础组件",
+        children: [
+          { value: "button", label: "按钮" },
+          { value: "form", label: "表单" },
+          { value: "table", label: "表格" },
+        ],
+      },
+    ],
+  },
+];
+
+// 树选择器数据
+const treeSelectData = [
+  {
+    value: "1",
+    label: "一级 1",
+    children: [
+      {
+        value: "1-1",
+        label: "二级 1-1",
+        children: [{ value: "1-1-1", label: "三级 1-1-1" }],
+      },
+    ],
+  },
+  {
+    value: "2",
+    label: "一级 2",
+    children: [
+      {
+        value: "2-1",
+        label: "二级 2-1",
+        children: [{ value: "2-1-1", label: "三级 2-1-1" }],
+      },
+      {
+        value: "2-2",
+        label: "二级 2-2",
+        children: [{ value: "2-2-1", label: "三级 2-2-1" }],
+      },
+    ],
+  },
+];
+
+// 复选框选项
+const checkboxOptions = [
+  { label: "选项1", value: "option1" },
+  { label: "选项2", value: "option2" },
+  { label: "选项3", value: "option3" },
+  { label: "选项4", value: "option4" },
+  { label: "选项5（disabled）", value: "option5", disabled: true },
+];
+
+// 完整示例表单配置
+const formItemsAdvanced = computed(() => [
+  ...(showUserName.value ? [userItem.value] : []),
+  // 动态表单项
+  ...dynamicFormItems.value,
+  {
+    ...baseFormItems.phone,
+  },
+  {
+    ...baseFormItems.level,
+    props: { placeholder: "请选择等级", options: levelOptions.value },
+  },
+  baseFormItems.address,
+  baseFormItems.date,
+  // 日期时间
+  {
+    label: "日期时间",
+    key: "datetime",
+    type: "datetime",
+    props: {
+      style: { width: "100%" },
+      placeholder: "请选择日期时间",
+      type: "datetime",
+      valueFormat: "YYYY-MM-DD HH:mm:ss",
+    },
+  },
+  {
+    label: "日期范围",
+    key: "daterange",
+    type: "datetime",
+    props: {
+      type: "daterange",
+      valueFormat: "YYYY-MM-DD",
+      rangeSeparator: "至",
+      startPlaceholder: "开始日期",
+      endPlaceholder: "结束日期",
+    },
+  },
+  // 日期时间范围
+  {
+    label: "日期时间范围",
+    key: "datetimerange",
+    type: "datetime",
+    props: {
+      type: "datetimerange",
+      valueFormat: "YYYY-MM-DD HH:mm:ss",
+      rangeSeparator: "至",
+      startPlaceholder: "开始日期时间",
+      endPlaceholder: "结束日期时间",
+    },
+  },
+  // 时间选择
+  {
+    label: "时间选择",
+    key: "timeselect",
+    type: "timeselect",
+    props: {
+      placeholder: "请选择时间",
+      type: "time",
+      valueFormat: "HH:mm:ss",
+    },
+  },
+  // 时间选择器
+  {
+    label: "时间选择器",
+    key: "timepicker",
+    type: "timepicker",
+    props: {
+      style: { width: "100%" },
+      placeholder: "请选择时间",
+      type: "time",
+      valueFormat: "HH:mm:ss",
+    },
+  },
+  // 级联选择
+  {
+    label: "级联选择",
+    key: "cascader",
+    type: "cascader",
+    props: {
+      placeholder: "请选择级联选择器",
+      clearable: true,
+      style: { width: "100%" },
+      collapseTags: true,
+      maxCollapseTags: 1,
+      props: { multiple: true },
+      options: cascaderOptions,
+    },
+  },
+  // 树型选择器
+  {
+    label: "树型选择器",
+    key: "treeSelect",
+    type: "treeselect",
+    props: {
+      showCheckbox: true,
+      multiple: true,
+      clearable: true,
+      data: treeSelectData,
+    },
+  },
+  { label: "插槽", key: "slots", type: "input", placeholder: "请输入邮箱" },
+  {
+    label: "渲染组件",
+    key: "iconSelector",
+    render: () => h(ElInput, { placeholder: "渲染自定义 input" }),
+  },
+  {
+    label: "自定义组件",
+    key: "customComponent",
+    render: () =>
+      h(
+        "div",
         {
-          value: '2-1',
-          label: '二级 2-1',
-          children: [{ value: '2-1-1', label: '三级 2-1-1' }]
+          style:
+            "color: var(--art-gray-600); border: 1px solid var(--default-border-dashed); padding: 0px 15px; border-radius: 6px",
         },
-        {
-          value: '2-2',
-          label: '二级 2-2',
-          children: [{ value: '2-2-1', label: '三级 2-2-1' }]
-        }
-      ]
-    }
-  ]
+        "我是一个自定义组件"
+      ),
+  },
+  {
+    label: "复选框",
+    key: "checkboxgroup",
+    type: "checkboxgroup",
+    span: 12,
+    props: {
+      options: checkboxOptions,
+    },
+  },
+  {
+    ...baseFormItems.gender,
+  },
 
-  // 复选框选项
-  const checkboxOptions = [
-    { label: '选项1', value: 'option1' },
-    { label: '选项2', value: 'option2' },
-    { label: '选项3', value: 'option3' },
-    { label: '选项4', value: 'option4' },
-    { label: '选项5（disabled）', value: 'option5', disabled: true }
-  ]
+  {
+    label: "是否启用",
+    key: "isEnabled",
+    type: "switch",
+    props: {
+      placeholder: "请选择是否启用",
+    },
+  },
+  {
+    label: "年龄",
+    key: "age",
+    type: "number",
+    slots: {
+      suffix: () => h("span", { style: "color: #909399; font-size: 12px" }, "岁"),
+    },
+  },
+  {
+    label: "网站地址",
+    key: "website",
+    type: "input",
+    placeholder: "请输入网站名称",
+    slots: {
+      prepend: () => h("span", "https://"),
+      append: () => h("span", ".com"),
+    },
+  },
+  {
+    label: "事件演示",
+    key: "event",
+    type: "input",
+    props: {
+      placeholder: "输入内容触发事件，控制台查看",
+      clearable: true,
+      prefixIcon: "Search",
+      // prefix: () => h('span', {}, '123'),
+      // 事件必须以 on 开头，然后驼峰式命名拼接 ElementPlus 事件名
+      onInput(val: string) {
+        console.log("输入事件", val);
+      },
+      onClear() {
+        console.log("清空事件");
+      },
+    },
+  },
 
-  // 完整示例表单配置
-  const formItemsAdvanced = computed(() => [
-    ...(showUserName.value ? [userItem.value] : []),
-    // 动态表单项
-    ...dynamicFormItems.value,
-    {
-      ...baseFormItems.phone
+  {
+    label: "多行输入",
+    key: "remark",
+    type: "input",
+    props: {
+      placeholder: "请输入备注",
+      type: "textarea",
+      rows: 2,
     },
-    {
-      ...baseFormItems.level,
-      props: { placeholder: '请选择等级', options: levelOptions.value }
-    },
-    baseFormItems.address,
-    baseFormItems.date,
-    // 日期时间
-    {
-      label: '日期时间',
-      key: 'datetime',
-      type: 'datetime',
-      props: {
-        style: { width: '100%' },
-        placeholder: '请选择日期时间',
-        type: 'datetime',
-        valueFormat: 'YYYY-MM-DD HH:mm:ss'
-      }
-    },
-    {
-      label: '日期范围',
-      key: 'daterange',
-      type: 'datetime',
-      props: {
-        type: 'daterange',
-        valueFormat: 'YYYY-MM-DD',
-        rangeSeparator: '至',
-        startPlaceholder: '开始日期',
-        endPlaceholder: '结束日期'
-      }
-    },
-    // 日期时间范围
-    {
-      label: '日期时间范围',
-      key: 'datetimerange',
-      type: 'datetime',
-      props: {
-        type: 'datetimerange',
-        valueFormat: 'YYYY-MM-DD HH:mm:ss',
-        rangeSeparator: '至',
-        startPlaceholder: '开始日期时间',
-        endPlaceholder: '结束日期时间'
-      }
-    },
-    // 时间选择
-    {
-      label: '时间选择',
-      key: 'timeselect',
-      type: 'timeselect',
-      props: {
-        placeholder: '请选择时间',
-        type: 'time',
-        valueFormat: 'HH:mm:ss'
-      }
-    },
-    // 时间选择器
-    {
-      label: '时间选择器',
-      key: 'timepicker',
-      type: 'timepicker',
-      props: {
-        style: { width: '100%' },
-        placeholder: '请选择时间',
-        type: 'time',
-        valueFormat: 'HH:mm:ss'
-      }
-    },
-    // 级联选择
-    {
-      label: '级联选择',
-      key: 'cascader',
-      type: 'cascader',
-      props: {
-        placeholder: '请选择级联选择器',
-        clearable: true,
-        style: { width: '100%' },
-        collapseTags: true,
-        maxCollapseTags: 1,
-        props: { multiple: true },
-        options: cascaderOptions
-      }
-    },
-    // 树型选择器
-    {
-      label: '树型选择器',
-      key: 'treeSelect',
-      type: 'treeselect',
-      props: {
-        showCheckbox: true,
-        multiple: true,
-        clearable: true,
-        data: treeSelectData
-      }
-    },
-    { label: '插槽', key: 'slots', type: 'input', placeholder: '请输入邮箱' },
-    {
-      label: '渲染组件',
-      key: 'iconSelector',
-      render: () => h(ElInput, { placeholder: '渲染自定义 input' })
-    },
-    {
-      label: '自定义组件',
-      key: 'customComponent',
-      render: () =>
-        h(
-          'div',
-          {
-            style:
-              'color: var(--art-gray-600); border: 1px solid var(--default-border-dashed); padding: 0px 15px; border-radius: 6px'
-          },
-          '我是一个自定义组件'
-        )
-    },
-    {
-      label: '复选框',
-      key: 'checkboxgroup',
-      type: 'checkboxgroup',
-      span: 12,
-      props: {
-        options: checkboxOptions
-      }
-    },
-    {
-      ...baseFormItems.gender
+  },
+  {
+    label: "评分",
+    key: "rate",
+    type: "rate",
+    props: {
+      size: "large",
+      placeholder: "请选择评分",
     },
+  },
+  {
+    label: "禁用",
+    key: "diaabled",
+    type: "input",
+    placeholder: "我被禁用了",
+    disabled: true, // 禁用
+  },
+  {
+    label: "滑块",
+    key: "slider",
+    type: "slider",
+    // props: {
+    //   step: 10,
+    //   showStops: true
+    // }
+  },
 
-    {
-      label: '是否启用',
-      key: 'isEnabled',
-      type: 'switch',
-      props: {
-        placeholder: '请选择是否启用'
-      }
-    },
-    {
-      label: '年龄',
-      key: 'age',
-      type: 'number',
-      slots: {
-        suffix: () => h('span', { style: 'color: #909399; font-size: 12px' }, '岁')
-      }
-    },
-    {
-      label: '网站地址',
-      key: 'website',
-      type: 'input',
-      placeholder: '请输入网站名称',
-      slots: {
-        prepend: () => h('span', 'https://'),
-        append: () => h('span', '.com')
-      }
-    },
-    {
-      label: '事件演示',
-      key: 'event',
-      type: 'input',
-      props: {
-        placeholder: '输入内容触发事件，控制台查看',
-        clearable: true,
-        prefixIcon: 'Search',
-        // prefix: () => h('span', {}, '123'),
-        // 事件必须以 on 开头，然后驼峰式命名拼接 ElementPlus 事件名
-        onInput(val: string) {
-          console.log('输入事件', val)
-        },
-        onClear() {
-          console.log('清空事件')
-        }
-      }
-    },
+  {
+    label: "隐藏",
+    key: "email",
+    type: "input",
+    hidden: true,
+  },
+  // 根据条件隐藏
+  {
+    label: "根据条件隐藏",
+    key: "systemName",
+    type: "input",
+    hidden: formDataAdvanced.value.systemName === "mac",
+    placeholder: "输入 mac 组件隐藏",
+  },
+  {
+    label: "栅格布局",
+    key: "sg1",
+    type: "input",
+    span: 12,
+    placeholder: "示例：栅格 span=12 占容器一半宽度，span=24 占满容器",
+  },
+]);
 
-    {
-      label: '多行输入',
-      key: 'remark',
-      type: 'input',
-      props: {
-        placeholder: '请输入备注',
-        type: 'textarea',
-        rows: 2
-      }
+/**
+ * 创建统一的表单处理函数
+ * @param ref 表单引用
+ * @param formData 表单数据
+ * @param type 表单类型描述
+ */
+const createFormHandler = (ref: Ref<any>, formData: Record<string, any>, type: string) => ({
+  reset: () => {
+    console.log(`重置${type}表单`);
+    emit("reset");
+  },
+  search: async () => {
+    await ref.value.validate();
+    emit("search", formData.value);
+    console.log(`${type}表单数据`, formData.value);
+  },
+  validate: () => ref.value.validate(),
+});
+
+/**
+ * 基础表单处理器
+ */
+const basicFormHandler = computed(() =>
+  createFormHandler(searchBarBasicRef, formDataBasic, "基础")
+);
+
+/**
+ * 完整表单处理器
+ */
+const advancedFormHandler = computed(() =>
+  createFormHandler(searchBarAdvancedRef, formDataAdvanced, "完整")
+);
+
+/**
+ * 处理基础表单重置事件
+ */
+const handleBasicReset = () => basicFormHandler.value.reset();
+
+/**
+ * 处理基础表单搜索事件
+ */
+const handleBasicSearch = () => basicFormHandler.value.search();
+
+/**
+ * 处理完整表单重置事件
+ */
+const handleAdvancedReset = () => advancedFormHandler.value.reset();
+
+/**
+ * 处理完整表单搜索事件
+ */
+const handleAdvancedSearch = () => advancedFormHandler.value.search();
+
+/**
+ * 校验完整表单
+ */
+const advancedValidate = () => advancedFormHandler.value.validate();
+
+/**
+ * 重置完整表单
+ */
+const advancedReset = () => searchBarAdvancedRef.value.reset();
+
+/**
+ * 更新用户名字段配置
+ */
+const updateUserName = (): void => {
+  userItem.value = {
+    ...userItem.value,
+    label: "昵称",
+    props: {
+      placeholder: "请输入昵称",
     },
-    {
-      label: '评分',
-      key: 'rate',
-      type: 'rate',
-      props: {
-        size: 'large',
-        placeholder: '请选择评分'
-      }
-    },
-    {
-      label: '禁用',
-      key: 'diaabled',
-      type: 'input',
-      placeholder: '我被禁用了',
-      disabled: true // 禁用
-    },
-    {
-      label: '滑块',
-      key: 'slider',
-      type: 'slider'
-      // props: {
-      //   step: 10,
-      //   showStops: true
-      // }
+  };
+};
+
+/**
+ * 删除用户名字段
+ */
+const deleteUserName = (): void => {
+  showUserName.value = false;
+  formDataAdvanced.value.name = undefined;
+};
+
+/**
+ * 新增表单项
+ */
+const addFormItem = (): void => {
+  dynamicItemCounter++;
+  const newItem: SearchFormItem = {
+    label: `动态字段${dynamicItemCounter}`,
+    key: `dynamic_${dynamicItemCounter}`,
+    type: "input",
+    props: {
+      placeholder: `请输入动态字段${dynamicItemCounter}`,
+      clearable: true,
     },
+  };
+  dynamicFormItems.value.push(newItem);
+  ElMessage.success(`已新增表单项：${newItem.label}`);
+};
 
-    {
-      label: '隐藏',
-      key: 'email',
-      type: 'input',
-      hidden: true
-    },
-    // 根据条件隐藏
-    {
-      label: '根据条件隐藏',
-      key: 'systemName',
-      type: 'input',
-      hidden: formDataAdvanced.value.systemName === 'mac',
-      placeholder: '输入 mac 组件隐藏'
-    },
-    {
-      label: '栅格布局',
-      key: 'sg1',
-      type: 'input',
-      span: 12,
-      placeholder: '示例：栅格 span=12 占容器一半宽度，span=24 占满容器'
-    }
-  ])
-
-  /**
-   * 创建统一的表单处理函数
-   * @param ref 表单引用
-   * @param formData 表单数据
-   * @param type 表单类型描述
-   */
-  const createFormHandler = (ref: Ref<any>, formData: Record<string, any>, type: string) => ({
-    reset: () => {
-      console.log(`重置${type}表单`)
-      emit('reset')
-    },
-    search: async () => {
-      await ref.value.validate()
-      emit('search', formData.value)
-      console.log(`${type}表单数据`, formData.value)
-    },
-    validate: () => ref.value.validate()
-  })
-
-  /**
-   * 基础表单处理器
-   */
-  const basicFormHandler = computed(() =>
-    createFormHandler(searchBarBasicRef, formDataBasic, '基础')
-  )
-
-  /**
-   * 完整表单处理器
-   */
-  const advancedFormHandler = computed(() =>
-    createFormHandler(searchBarAdvancedRef, formDataAdvanced, '完整')
-  )
-
-  /**
-   * 处理基础表单重置事件
-   */
-  const handleBasicReset = () => basicFormHandler.value.reset()
-
-  /**
-   * 处理基础表单搜索事件
-   */
-  const handleBasicSearch = () => basicFormHandler.value.search()
-
-  /**
-   * 处理完整表单重置事件
-   */
-  const handleAdvancedReset = () => advancedFormHandler.value.reset()
-
-  /**
-   * 处理完整表单搜索事件
-   */
-  const handleAdvancedSearch = () => advancedFormHandler.value.search()
-
-  /**
-   * 校验完整表单
-   */
-  const advancedValidate = () => advancedFormHandler.value.validate()
-
-  /**
-   * 重置完整表单
-   */
-  const advancedReset = () => searchBarAdvancedRef.value.reset()
-
-  /**
-   * 更新用户名字段配置
-   */
-  const updateUserName = (): void => {
-    userItem.value = {
-      ...userItem.value,
-      label: '昵称',
-      props: {
-        placeholder: '请输入昵称'
-      }
-    }
+/**
+ * 修改表单项（修改最后一个动态表单项）
+ */
+const updateFormItem = (): void => {
+  if (dynamicFormItems.value.length === 0) {
+    ElMessage.warning("没有可修改的动态表单项，请先新增");
+    return;
   }
 
-  /**
-   * 删除用户名字段
-   */
-  const deleteUserName = (): void => {
-    showUserName.value = false
-    formDataAdvanced.value.name = undefined
+  const lastIndex = dynamicFormItems.value.length - 1;
+  const lastItem = dynamicFormItems.value[lastIndex];
+
+  // 修改最后一个表单项的配置
+  dynamicFormItems.value[lastIndex] = {
+    ...lastItem,
+    label: `已修改`,
+    type: "select",
+    props: {
+      placeholder: "修改为下拉选择",
+      options: [
+        { label: "选项A", value: "a" },
+        { label: "选项B", value: "b" },
+        { label: "选项C", value: "c" },
+      ],
+    },
+  };
+
+  ElMessage.success(`已修改表单项：${lastItem.label}`);
+};
+
+/**
+ * 删除表单项（删除最后一个动态表单项）
+ */
+const deleteFormItem = (): void => {
+  if (dynamicFormItems.value.length === 0) {
+    ElMessage.warning("没有可删除的动态表单项");
+    return;
   }
 
-  /**
-   * 新增表单项
-   */
-  const addFormItem = (): void => {
-    dynamicItemCounter++
-    const newItem: SearchFormItem = {
-      label: `动态字段${dynamicItemCounter}`,
-      key: `dynamic_${dynamicItemCounter}`,
-      type: 'input',
-      props: {
-        placeholder: `请输入动态字段${dynamicItemCounter}`,
-        clearable: true
-      }
-    }
-    dynamicFormItems.value.push(newItem)
-    ElMessage.success(`已新增表单项：${newItem.label}`)
+  const deletedItem = dynamicFormItems.value.pop();
+  if (deletedItem) {
+    // 清除对应的表单数据
+    delete formDataAdvanced.value[deletedItem.key as keyof AdvancedFormData];
+    ElMessage.success(`已删除表单项：${deletedItem.label}`);
   }
+};
 
-  /**
-   * 修改表单项（修改最后一个动态表单项）
-   */
-  const updateFormItem = (): void => {
-    if (dynamicFormItems.value.length === 0) {
-      ElMessage.warning('没有可修改的动态表单项，请先新增')
-      return
-    }
-
-    const lastIndex = dynamicFormItems.value.length - 1
-    const lastItem = dynamicFormItems.value[lastIndex]
-
-    // 修改最后一个表单项的配置
-    dynamicFormItems.value[lastIndex] = {
-      ...lastItem,
-      label: `已修改`,
-      type: 'select',
+/**
+ * 批量新增表单项
+ */
+const batchAddFormItems = (): void => {
+  const batchItems: SearchFormItem[] = [
+    {
+      label: "公司名称",
+      key: `company_${++dynamicItemCounter}`,
+      type: "input",
       props: {
-        placeholder: '修改为下拉选择',
+        placeholder: "请输入公司名称",
+        clearable: true,
+      },
+    },
+    {
+      label: "部门",
+      key: `department_${++dynamicItemCounter}`,
+      type: "select",
+      props: {
+        placeholder: "请选择部门",
         options: [
-          { label: '选项A', value: 'a' },
-          { label: '选项B', value: 'b' },
-          { label: '选项C', value: 'c' }
-        ]
-      }
-    }
-
-    ElMessage.success(`已修改表单项：${lastItem.label}`)
-  }
-
-  /**
-   * 删除表单项（删除最后一个动态表单项）
-   */
-  const deleteFormItem = (): void => {
-    if (dynamicFormItems.value.length === 0) {
-      ElMessage.warning('没有可删除的动态表单项')
-      return
-    }
-
-    const deletedItem = dynamicFormItems.value.pop()
-    if (deletedItem) {
-      // 清除对应的表单数据
-      delete formDataAdvanced.value[deletedItem.key as keyof AdvancedFormData]
-      ElMessage.success(`已删除表单项：${deletedItem.label}`)
-    }
-  }
-
-  /**
-   * 批量新增表单项
-   */
-  const batchAddFormItems = (): void => {
-    const batchItems: SearchFormItem[] = [
-      {
-        label: '公司名称',
-        key: `company_${++dynamicItemCounter}`,
-        type: 'input',
-        props: {
-          placeholder: '请输入公司名称',
-          clearable: true
-        }
+          { label: "技术部", value: "tech" },
+          { label: "产品部", value: "product" },
+          { label: "运营部", value: "operation" },
+        ],
       },
-      {
-        label: '部门',
-        key: `department_${++dynamicItemCounter}`,
-        type: 'select',
-        props: {
-          placeholder: '请选择部门',
-          options: [
-            { label: '技术部', value: 'tech' },
-            { label: '产品部', value: 'product' },
-            { label: '运营部', value: 'operation' }
-          ]
-        }
+    },
+    {
+      label: "入职日期",
+      key: `joinDate_${++dynamicItemCounter}`,
+      type: "datetime",
+      props: {
+        style: { width: "100%" },
+        placeholder: "请选择入职日期",
+        type: "date",
+        valueFormat: "YYYY-MM-DD",
       },
-      {
-        label: '入职日期',
-        key: `joinDate_${++dynamicItemCounter}`,
-        type: 'datetime',
-        props: {
-          style: { width: '100%' },
-          placeholder: '请选择入职日期',
-          type: 'date',
-          valueFormat: 'YYYY-MM-DD'
-        }
-      }
-    ]
+    },
+  ];
 
-    dynamicFormItems.value.push(...batchItems)
-    ElMessage.success(`已批量新增 ${batchItems.length} 个表单项`)
+  dynamicFormItems.value.push(...batchItems);
+  ElMessage.success(`已批量新增 ${batchItems.length} 个表单项`);
+};
+
+/**
+ * 重置动态表单项
+ */
+const resetDynamicItems = (): void => {
+  if (dynamicFormItems.value.length === 0) {
+    ElMessage.info("当前没有动态表单项");
+    return;
   }
 
-  /**
-   * 重置动态表单项
-   */
-  const resetDynamicItems = (): void => {
-    if (dynamicFormItems.value.length === 0) {
-      ElMessage.info('当前没有动态表单项')
-      return
-    }
+  // 清除所有动态表单项的数据
+  dynamicFormItems.value.forEach((item) => {
+    delete formDataAdvanced.value[item.key as keyof AdvancedFormData];
+  });
 
-    // 清除所有动态表单项的数据
-    dynamicFormItems.value.forEach((item) => {
-      delete formDataAdvanced.value[item.key as keyof AdvancedFormData]
-    })
-
-    dynamicFormItems.value = []
-    dynamicItemCounter = 0
-    ElMessage.success('已重置所有动态表单项')
-  }
+  dynamicFormItems.value = [];
+  dynamicItemCounter = 0;
+  ElMessage.success("已重置所有动态表单项");
+};
 </script>
diff --git a/frontend/new-web/src/views/examples/permission/button-auth/index.vue b/frontend/new-web/src/views/examples/permission/button-auth/index.vue
index fa54a7c0..b2ffd683 100644
--- a/frontend/new-web/src/views/examples/permission/button-auth/index.vue
+++ b/frontend/new-web/src/views/examples/permission/button-auth/index.vue
@@ -3,7 +3,7 @@
   <div class="w-full py-2">
     <!-- 页面头部 -->
     <div class="mb-6">
-      <h2 class="m-0 mb-2 text-xl font-medium">{{ $t('menus.examples.permission.buttonAuth') }}</h2>
+      <h2 class="m-0 mb-2 text-xl font-medium">{{ $t("menus.examples.permission.buttonAuth") }}</h2>
       <p class="m-0 text-sm leading-[1.6] text-g-700">
         此页面演示按钮级别的权限控制，不同用户身份下可见的按钮会有所不同。权限控制基于用户角色和权限码实现。
       </p>
@@ -35,9 +35,9 @@
               >
                 {{ permission }}
               </ElTag>
-              <span v-if="!currentUserPermissions.length" class="italic text-red-500"
-                >无权限码</span
-              >
+              <span v-if="!currentUserPermissions.length" class="italic text-red-500">
+                无权限码
+              </span>
             </div>
           </div>
         </div>
@@ -55,32 +55,30 @@
         <div>
           <p class="p-3 m-0 mb-5 text-sm leading-[1.6] text-g-700 bg-g-200 rounded">
             使用
-            <code class="px- 1.5 py-0.5 font-mono text-xs text-theme bg-theme/10 rounded"
-              >v-roles</code
-            >
+            <code class="px- 1.5 py-0.5 font-mono text-xs text-theme bg-theme/10 rounded">
+              v-roles
+            </code>
             指令控制按钮显示，只有拥有指定角色的用户才能看到对应按钮。
           </p>
 
           <div class="grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-5">
             <div class="flex flex-col gap-2">
-              <ElButton type="primary" plain v-roles="'R_SUPER'"> 超级管理员可见 </ElButton>
+              <ElButton type="primary" plain v-roles="'R_SUPER'">超级管理员可见</ElButton>
               <div class="text-xs">
-                <code class="block p-1 px-2 mb-1 font-mono bg-g-200 border-full-d rounded"
-                  >v-roles="'R_SUPER'"</code
-                >
+                <code class="block p-1 px-2 mb-1 font-mono bg-g-200 border-full-d rounded">
+                  v-roles="'R_SUPER'"
+                </code>
                 <span class="text-g-700">只有超级管理员可见</span>
               </div>
             </div>
 
             <!-- 管理员级别按钮 -->
             <div class="flex flex-col gap-2">
-              <ElButton type="warning" plain v-roles="['R_SUPER', 'R_ADMIN']">
-                管理员可见
-              </ElButton>
+              <ElButton type="warning" plain v-roles="['R_SUPER', 'R_ADMIN']">管理员可见</ElButton>
               <div class="text-xs">
-                <code class="block p-1 px-2 mb-1 font-mono bg-g-200 border-full-d rounded"
-                  >v-roles="['R_SUPER', 'R_ADMIN']"</code
-                >
+                <code class="block p-1 px-2 mb-1 font-mono bg-g-200 border-full-d rounded">
+                  v-roles="['R_SUPER', 'R_ADMIN']"
+                </code>
                 <span class="text-g-700">超级管理员和管理员可见</span>
               </div>
             </div>
@@ -91,9 +89,9 @@
                 所有用户可见
               </ElButton>
               <div class="text-xs">
-                <code class="block p-1 px-2 mb-1 font-mono bg-g-200 border-full-d rounded"
-                  >v-roles="['R_SUPER', 'R_ADMIN', 'R_USER']"</code
-                >
+                <code class="block p-1 px-2 mb-1 font-mono bg-g-200 border-full-d rounded">
+                  v-roles="['R_SUPER', 'R_ADMIN', 'R_USER']"
+                </code>
                 <span class="text-g-700">所有已登录用户可见</span>
               </div>
             </div>
@@ -114,18 +112,18 @@
         </template>
         <div>
           <p class="p-3 m-0 mb-5 text-sm leading-[1.6] text-g-700 bg-g-200 rounded">
-            <code class="px- 1.5 py-0.5 font-mono text-xs text-theme bg-theme/10 rounded"
-              >v-auth</code
-            >
+            <code class="px- 1.5 py-0.5 font-mono text-xs text-theme bg-theme/10 rounded">
+              v-auth
+            </code>
             指令在后端模式下根据当前路由的
-            <code class="px- 1.5 py-0.5 font-mono text-xs text-theme bg-theme/10 rounded"
-              >meta.authList</code
-            >
+            <code class="px- 1.5 py-0.5 font-mono text-xs text-theme bg-theme/10 rounded">
+              meta.authList
+            </code>
             配置检查权限。 权限列表来源于路由元数据，适用于权限配置由后端统一管理的场景。
           </p>
 
           <div class="mb-5">
-            <h4 class="m-0 mb-2 text-sm font-semibold"> 当前路由权限配置： </h4>
+            <h4 class="m-0 mb-2 text-sm font-semibold">当前路由权限配置：</h4>
             <div
               class="max-h-30 p-3 overflow-y-auto font-mono text-xs break-all whitespace-pre-wrap bg-g-200 border-full-d rounded"
             >
@@ -136,44 +134,44 @@
           <div class="grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-5">
             <!-- 新增权限 -->
             <div class="flex flex-col gap-2">
-              <ElButton type="primary" plain v-auth="'add'"> 新增 </ElButton>
+              <ElButton type="primary" plain v-auth="'add'">新增</ElButton>
               <div class="text-xs">
-                <code class="block p-1 px-2 mb-1 font-mono bg-g-200 border-full-d rounded"
-                  >v-auth="'add'"</code
-                >
+                <code class="block p-1 px-2 mb-1 font-mono bg-g-200 border-full-d rounded">
+                  v-auth="'add'"
+                </code>
                 <span class="text-g-700">检查路由 meta.authList 中是否存在 authMark: 'add'</span>
               </div>
             </div>
 
             <!-- 编辑权限 -->
             <div class="flex flex-col gap-2">
-              <ElButton type="warning" plain v-auth="'edit'"> 编辑 </ElButton>
+              <ElButton type="warning" plain v-auth="'edit'">编辑</ElButton>
               <div class="text-xs">
-                <code class="block p-1 px-2 mb-1 font-mono bg-g-200 border-full-d rounded"
-                  >v-auth="'edit'"</code
-                >
+                <code class="block p-1 px-2 mb-1 font-mono bg-g-200 border-full-d rounded">
+                  v-auth="'edit'"
+                </code>
                 <span class="text-g-700">检查路由 meta.authList 中是否存在 authMark: 'edit'</span>
               </div>
             </div>
 
             <!-- 删除权限 -->
             <div class="flex flex-col gap-2">
-              <ElButton type="danger" plain v-auth="'delete'"> 删除 </ElButton>
+              <ElButton type="danger" plain v-auth="'delete'">删除</ElButton>
               <div class="text-xs">
-                <code class="block p-1 px-2 mb-1 font-mono bg-g-200 border-full-d rounded"
-                  >v-auth="'delete'"</code
-                >
+                <code class="block p-1 px-2 mb-1 font-mono bg-g-200 border-full-d rounded">
+                  v-auth="'delete'"
+                </code>
                 <span class="text-g-700">检查路由 meta.authList 中是否存在 authMark: 'delete'</span>
               </div>
             </div>
 
             <!-- 导出权限 -->
             <div class="flex flex-col gap-2">
-              <ElButton type="info" plain v-auth="'export'"> 导出 </ElButton>
+              <ElButton type="info" plain v-auth="'export'">导出</ElButton>
               <div class="text-xs">
-                <code class="block p-1 px-2 mb-1 font-mono bg-g-200 border-full-d rounded"
-                  >v-auth="'export'"</code
-                >
+                <code class="block p-1 px-2 mb-1 font-mono bg-g-200 border-full-d rounded">
+                  v-auth="'export'"
+                </code>
                 <span class="text-g-700">检查路由 meta.authList 中是否存在 authMark: 'export'</span>
               </div>
             </div>
@@ -207,13 +205,13 @@
         </template>
         <div>
           <p class="p-3 m-0 mb-5 text-sm leading-[1.6] text-g-700 bg-g-200 rounded">
-            <code class="px- 1.5 py-0.5 font-mono text-xs text-theme bg-theme/10 rounded"
-              >hasAuth</code
-            >
+            <code class="px- 1.5 py-0.5 font-mono text-xs text-theme bg-theme/10 rounded">
+              hasAuth
+            </code>
             方法在前端模式下根据用户信息中的
-            <code class="px- 1.5 py-0.5 font-mono text-xs text-theme bg-theme/10 rounded"
-              >buttons</code
-            >
+            <code class="px- 1.5 py-0.5 font-mono text-xs text-theme bg-theme/10 rounded">
+              buttons
+            </code>
             字段检查权限。 权限列表存储在用户状态中，适用于权限完全由前端管理的场景。
           </p>
 
@@ -229,12 +227,12 @@
           <div class="grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-5">
             <!-- 条件渲染按钮 -->
             <div class="flex flex-col gap-2">
-              <ElButton v-if="hasAuth('view')" type="primary"> 查看详情 </ElButton>
-              <ElButton v-else type="info" disabled> 无查看权限 </ElButton>
+              <ElButton v-if="hasAuth('view')" type="primary">查看详情</ElButton>
+              <ElButton v-else type="info" disabled>无查看权限</ElButton>
               <div class="text-xs">
-                <code class="block p-1 px-2 mb-1 font-mono bg-g-200 border-full-d rounded"
-                  >v-if="hasAuth('view')"</code
-                >
+                <code class="block p-1 px-2 mb-1 font-mono bg-g-200 border-full-d rounded">
+                  v-if="hasAuth('view')"
+                </code>
                 <span class="text-g-700">检查用户 buttons 数组是否包含 'view'</span>
               </div>
             </div>
@@ -246,12 +244,12 @@
                 :type="hasAuth('publish') ? 'success' : 'info'"
                 @click="handlePublish"
               >
-                {{ hasAuth('publish') ? '发布' : '无发布权限' }}
+                {{ hasAuth("publish") ? "发布" : "无发布权限" }}
               </ElButton>
               <div class="text-xs">
-                <code class="block p-1 px-2 mb-1 font-mono bg-g-200 border-full-d rounded"
-                  >:disabled="!hasAuth('publish')"</code
-                >
+                <code class="block p-1 px-2 mb-1 font-mono bg-g-200 border-full-d rounded">
+                  :disabled="!hasAuth('publish')"
+                </code>
                 <span class="text-g-700">检查用户 buttons 数组是否包含 'publish'</span>
               </div>
             </div>
@@ -280,9 +278,9 @@
                 </template>
               </ElDropdown>
               <div class="text-xs">
-                <code class="block p-1 px-2 mb-1 font-mono bg-g-200 border-full-d rounded"
-                  >computed(() => hasAuth('edit') || hasAuth('delete'))</code
-                >
+                <code class="block p-1 px-2 mb-1 font-mono bg-g-200 border-full-d rounded">
+                  computed(() => hasAuth('edit') || hasAuth('delete'))
+                </code>
                 <span class="text-g-700">复合权限检查，检查多个权限的并集</span>
               </div>
             </div>
@@ -303,13 +301,13 @@
         </template>
         <div>
           <p class="p-3 m-0 mb-5 text-sm leading-[1.6] text-g-700 bg-g-200 rounded">
-            <code class="px- 1.5 py-0.5 font-mono text-xs text-theme bg-theme/10 rounded"
-              >hasAuth</code
-            >
+            <code class="px- 1.5 py-0.5 font-mono text-xs text-theme bg-theme/10 rounded">
+              hasAuth
+            </code>
             方法在后端模式下根据当前路由的
-            <code class="px- 1.5 py-0.5 font-mono text-xs text-theme bg-theme/10 rounded"
-              >meta.authList</code
-            >
+            <code class="px- 1.5 py-0.5 font-mono text-xs text-theme bg-theme/10 rounded">
+              meta.authList
+            </code>
             配置检查权限。与 v-auth 指令使用相同的权限来源，但提供编程式的权限检查能力。
           </p>
 
@@ -323,9 +321,9 @@
                 inactive-text="功能关闭"
               />
               <div class="text-xs">
-                <code class="block p-1 px-2 mb-1 font-mono bg-g-200 border-full-d rounded"
-                  >:disabled="!hasAuth('config')"</code
-                >
+                <code class="block p-1 px-2 mb-1 font-mono bg-g-200 border-full-d rounded">
+                  :disabled="!hasAuth('config')"
+                </code>
                 <span class="text-g-700">检查路由权限控制功能开关</span>
               </div>
             </div>
@@ -344,9 +342,9 @@
                 <span class="text-sm">需要管理权限才能查看此区域</span>
               </div>
               <div class="text-xs">
-                <code class="block p-1 px-2 mb-1 font-mono bg-g-200 border-full-d rounded"
-                  >v-if="hasAuth('manage')"</code
-                >
+                <code class="block p-1 px-2 mb-1 font-mono bg-g-200 border-full-d rounded">
+                  v-if="hasAuth('manage')"
+                </code>
                 <span class="text-g-700">基于后端路由权限的条件渲染</span>
               </div>
             </div>
@@ -374,9 +372,9 @@
                 </ElBadge>
               </div>
               <div class="text-xs">
-                <code class="block p-1 px-2 mb-1 font-mono bg-g-200 border-full-d rounded"
-                  >hasAuth('permission')</code
-                >
+                <code class="block p-1 px-2 mb-1 font-mono bg-g-200 border-full-d rounded">
+                  hasAuth('permission')
+                </code>
                 <span class="text-g-700">实时权限状态指示器</span>
               </div>
             </div>
@@ -408,122 +406,122 @@
 </template>
 
 <script setup lang="ts">
-  import { computed, ref } from 'vue'
-  import { ArrowDown, Lock } from '@element-plus/icons-vue'
-  import { useAuth } from '@/hooks/core/useAuth'
-  import { useUserStore } from '@/store/modules/user'
-  import { useAppMode } from '@/hooks/core/useAppMode'
-  import { useRoute } from 'vue-router'
-  import type { AppRouteRecord } from '@/types/router'
+import { computed, ref } from "vue";
+import { ArrowDown, Lock } from "@element-plus/icons-vue";
+import { useAuth } from "@/hooks/core/useAuth";
+import { useUserStore } from "@/store/modules/user.store";
+import { useAppMode } from "@/hooks/core/useAppMode";
+import { useRoute } from "vue-router";
+import type { AppRouteRecord } from "@/types/router";
 
-  defineOptions({ name: 'PermissionButtonAuth' })
+defineOptions({ name: "PermissionButtonAuth" });
 
-  const { hasAuth } = useAuth()
-  const { isFrontendMode } = useAppMode()
-  const userStore = useUserStore()
-  const route = useRoute()
+const { hasAuth } = useAuth();
+const { isFrontendMode } = useAppMode();
+const userStore = useUserStore();
+const route = useRoute();
 
-  // 动态功能状态
-  const dynamicFeatureEnabled = ref(false)
+// 动态功能状态
+const dynamicFeatureEnabled = ref(false);
 
-  // 当前用户角色
-  const currentUserRole = computed(() => {
-    return userStore.info?.roles?.[0] || ''
-  })
+// 当前用户角色
+const currentUserRole = computed(() => {
+  return userStore.info?.roles?.[0] || "";
+});
 
-  // 当前用户权限码
-  const currentUserPermissions = computed(() => {
-    return userStore.info?.buttons || []
-  })
+// 当前用户权限码
+const currentUserPermissions = computed(() => {
+  return userStore.info?.buttons || [];
+});
 
-  // 前端模式权限列表（用户的 buttons 字段）
-  const frontendAuthList = computed(() => {
-    return userStore.info?.buttons || []
-  })
+// 前端模式权限列表（用户的 buttons 字段）
+const frontendAuthList = computed(() => {
+  return userStore.info?.buttons || [];
+});
 
-  // 后端模式权限列表（路由 meta.authList 配置）
-  const backendAuthList = computed(() => {
-    type AuthItem = NonNullable<AppRouteRecord['meta']['authList']>[number]
-    return Array.isArray(route.meta.authList) ? (route.meta.authList as AuthItem[]) : []
-  })
+// 后端模式权限列表（路由 meta.authList 配置）
+const backendAuthList = computed(() => {
+  type AuthItem = NonNullable<AppRouteRecord["meta"]["authList"]>[number];
+  return Array.isArray(route.meta.authList) ? (route.meta.authList as AuthItem[]) : [];
+});
 
-  // 是否拥有批量操作权限
-  const hasBatchPermissions = computed(() => {
-    return hasAuth('edit') || hasAuth('delete') || hasAuth('export')
-  })
+// 是否拥有批量操作权限
+const hasBatchPermissions = computed(() => {
+  return hasAuth("edit") || hasAuth("delete") || hasAuth("export");
+});
 
-  // 权限对比数据
-  const comparisonData = computed(() => [
-    {
-      feature: '权限来源',
-      frontend: '用户状态中的 buttons 字段',
-      backend: '路由配置中的 meta.authList'
-    },
-    {
-      feature: 'v-auth 指令',
-      frontend: '不可用（前端模式下指令无效）',
-      backend: '可用（根据路由权限配置检查）'
-    },
-    {
-      feature: 'hasAuth 方法',
-      frontend: '可用（检查 buttons 数组）',
-      backend: '可用（检查 meta.authList）'
-    },
-    {
-      feature: '权限管理',
-      frontend: '完全由前端控制，灵活度高',
-      backend: '后端统一管理，安全性更高'
-    },
-    {
-      feature: '适用场景',
-      frontend: '快速原型、简单应用',
-      backend: '企业级应用、复杂权限体系'
-    }
-  ])
+// 权限对比数据
+const comparisonData = computed(() => [
+  {
+    feature: "权限来源",
+    frontend: "用户状态中的 buttons 字段",
+    backend: "路由配置中的 meta.authList",
+  },
+  {
+    feature: "v-auth 指令",
+    frontend: "不可用（前端模式下指令无效）",
+    backend: "可用（根据路由权限配置检查）",
+  },
+  {
+    feature: "hasAuth 方法",
+    frontend: "可用（检查 buttons 数组）",
+    backend: "可用（检查 meta.authList）",
+  },
+  {
+    feature: "权限管理",
+    frontend: "完全由前端控制，灵活度高",
+    backend: "后端统一管理，安全性更高",
+  },
+  {
+    feature: "适用场景",
+    frontend: "快速原型、简单应用",
+    backend: "企业级应用、复杂权限体系",
+  },
+]);
 
-  // 获取角色标签类型
-  const getRoleTagType = (role: string): 'primary' | 'success' | 'info' | 'warning' | 'danger' => {
-    const roleMap: Record<string, 'primary' | 'success' | 'info' | 'warning' | 'danger'> = {
-      R_SUPER: 'warning',
-      R_ADMIN: 'primary',
-      R_USER: 'success'
-    }
-    return roleMap[role] || 'info'
+// 获取角色标签类型
+const getRoleTagType = (role: string): "primary" | "success" | "info" | "warning" | "danger" => {
+  const roleMap: Record<string, "primary" | "success" | "info" | "warning" | "danger"> = {
+    R_SUPER: "warning",
+    R_ADMIN: "primary",
+    R_USER: "success",
+  };
+  return roleMap[role] || "info";
+};
+
+// 获取角色显示名称
+const getRoleDisplayName = (role: string) => {
+  const roleMap: Record<string, string> = {
+    R_SUPER: "超级管理员",
+    R_ADMIN: "管理员",
+    R_USER: "普通用户",
+  };
+  return roleMap[role] || "未知角色";
+};
+
+// 处理发布操作
+const handlePublish = () => {
+  if (hasAuth("publish")) {
+    ElMessage.success("发布成功！");
+  } else {
+    ElMessage.warning("您没有发布权限");
   }
+};
 
-  // 获取角色显示名称
-  const getRoleDisplayName = (role: string) => {
-    const roleMap: Record<string, string> = {
-      R_SUPER: '超级管理员',
-      R_ADMIN: '管理员',
-      R_USER: '普通用户'
-    }
-    return roleMap[role] || '未知角色'
-  }
-
-  // 处理发布操作
-  const handlePublish = () => {
-    if (hasAuth('publish')) {
-      ElMessage.success('发布成功！')
-    } else {
-      ElMessage.warning('您没有发布权限')
-    }
-  }
-
-  // 处理批量操作
-  const handleBatchAction = (command: string) => {
-    const actions: Record<string, string> = {
-      batchEdit: '批量编辑',
-      batchDelete: '批量删除',
-      batchExport: '批量导出'
-    }
-
-    const permission = command.replace('batch', '').toLowerCase()
-
-    if (hasAuth(permission)) {
-      ElMessage.success(`${actions[command]}操作执行成功！`)
-    } else {
-      ElMessage.warning(`您没有${actions[command]}权限`)
-    }
+// 处理批量操作
+const handleBatchAction = (command: string) => {
+  const actions: Record<string, string> = {
+    batchEdit: "批量编辑",
+    batchDelete: "批量删除",
+    batchExport: "批量导出",
+  };
+
+  const permission = command.replace("batch", "").toLowerCase();
+
+  if (hasAuth(permission)) {
+    ElMessage.success(`${actions[command]}操作执行成功！`);
+  } else {
+    ElMessage.warning(`您没有${actions[command]}权限`);
   }
+};
 </script>
diff --git a/frontend/new-web/src/views/examples/permission/page-visibility/index.vue b/frontend/new-web/src/views/examples/permission/page-visibility/index.vue
index 83514da0..ad31ec80 100644
--- a/frontend/new-web/src/views/examples/permission/page-visibility/index.vue
+++ b/frontend/new-web/src/views/examples/permission/page-visibility/index.vue
@@ -3,12 +3,13 @@
   <div class="w-full py-2">
     <!-- 页面头部 -->
     <div class="mb-6">
-      <h2 class="m-0 mb-2 text-xl font-medium">{{
-        $t('menus.examples.permission.pageVisibility')
-      }}</h2>
+      <h2 class="m-0 mb-2 text-xl font-medium">
+        {{ $t("menus.examples.permission.pageVisibility") }}
+      </h2>
       <p class="m-0 text-sm leading-[1.6] text-g-700">
-        此页面仅对<strong class="font-semibold text-warning">超级管理员</strong
-        >用户可见，演示页面级别的权限控制。 如果您能看到此页面，说明您拥有相应的访问权限。
+        此页面仅对
+        <strong class="font-semibold text-warning">超级管理员</strong>
+        用户可见，演示页面级别的权限控制。 如果您能看到此页面，说明您拥有相应的访问权限。
       </p>
     </div>
 
@@ -24,11 +25,12 @@
             <div>
               <h3 class="m-0 mb-2 text-lg font-semibold">您拥有访问此页面的权限</h3>
               <p class="my-1 text-sm text-g-700">
-                当前用户：<strong class="font-semibold">{{ currentUser.userName }}</strong>
+                当前用户：
+                <strong class="font-semibold">{{ currentUser.userName }}</strong>
               </p>
               <p class="my-1 text-sm text-g-700">
                 用户角色：
-                <ElTag type="warning">{{ getRoleDisplayName(currentUser.roles?.[0] || '') }}</ElTag>
+                <ElTag type="warning">{{ getRoleDisplayName(currentUser.roles?.[0] || "") }}</ElTag>
               </p>
             </div>
           </div>
@@ -51,9 +53,9 @@
                 <h4 class="m-0 mb-2 text-base font-semibold">基于角色的权限控制</h4>
                 <p class="m-0 mb-2 leading-[1.6] text-g-700">
                   在前端控制模式下，页面访问权限由路由配置文件中的
-                  <code class="px-1.5 py-0.5 font-mono text-xs text-theme bg-theme/12 rounded"
-                    >meta.roles</code
-                  >
+                  <code class="px-1.5 py-0.5 font-mono text-xs text-theme bg-theme/12 rounded">
+                    meta.roles
+                  </code>
                   字段定义，前端会根据用户接口所拥有的角色对路由和菜单进行过滤与控制
                 </p>
                 <pre
@@ -70,23 +72,23 @@
 }</code></pre>
                 <p class="m-0 mb-2 leading-[1.6] text-g-700"><strong>权限验证流程：</strong></p>
                 <ul class="pl-5 my-2">
-                  <li class="my-1 leading-[1.5] text-g-700"
-                    >用户登录后，接口返回用户角色信息（如 R_SUPER、R_ADMIN、R_USER）</li
-                  >
+                  <li class="my-1 leading-[1.5] text-g-700">
+                    用户登录后，接口返回用户角色信息（如 R_SUPER、R_ADMIN、R_USER）
+                  </li>
                   <li class="my-1 leading-[1.5] text-g-700">
                     在
-                    <code class="px-1.5 py-0.5 font-mono text-xs text-theme bg-theme/12 rounded"
-                      >beforeEach</code
-                    >
+                    <code class="px-1.5 py-0.5 font-mono text-xs text-theme bg-theme/12 rounded">
+                      beforeEach
+                    </code>
                     路由守卫中检查目标路由的
-                    <code class="px-1.5 py-0.5 font-mono text-xs text-theme bg-theme/12 rounded"
-                      >roles</code
-                    >
+                    <code class="px-1.5 py-0.5 font-mono text-xs text-theme bg-theme/12 rounded">
+                      roles
+                    </code>
                     配置
                   </li>
-                  <li class="my-1 leading-[1.5] text-g-700"
-                    >比较用户角色是否包含在允许访问的角色列表中</li
-                  >
+                  <li class="my-1 leading-[1.5] text-g-700">
+                    比较用户角色是否包含在允许访问的角色列表中
+                  </li>
                   <li class="my-1 leading-[1.5] text-g-700">权限不足时跳转到 403 页面</li>
                 </ul>
               </ElCard>
@@ -95,12 +97,12 @@
             <ElTimelineItem timestamp="后端控制模式" type="warning" size="large">
               <ElCard>
                 <h4 class="m-0 mb-2 text-base font-semibold">基于菜单接口的权限控制</h4>
-                <p class="m-0 mb-2 leading-[1.6] text-g-700"
-                  >在后端控制模式下，页面访问权限由后端统一管理，前端通过解析后端接口返回的菜单列表来生成可访问的路由，从而实现权限控制</p
-                >
-                <p class="m-0 mb-2 leading-[1.6] text-g-700"
-                  >接口地址：src/api/menuApi.ts getMenuList</p
-                >
+                <p class="m-0 mb-2 leading-[1.6] text-g-700">
+                  在后端控制模式下，页面访问权限由后端统一管理，前端通过解析后端接口返回的菜单列表来生成可访问的路由，从而实现权限控制
+                </p>
+                <p class="m-0 mb-2 leading-[1.6] text-g-700">
+                  接口地址：src/api/menuApi.ts getMenuList
+                </p>
                 <pre
                   class="p-4 mt-3 mb-0 overflow-x-auto font-mono text-xs leading-[1.5] bg-g-200 border-full-d rounded-md"
                 ><code class="">
@@ -180,9 +182,9 @@
                 </div>
                 <div>
                   <h4>多层权限验证</h4>
-                  <p class="text-g-700 text-sm"
-                    >在前端路由、后端接口、UI组件等多个层面实施权限控制，确保安全性。</p
-                  >
+                  <p class="text-g-700 text-sm">
+                    在前端路由、后端接口、UI组件等多个层面实施权限控制，确保安全性。
+                  </p>
                 </div>
               </div>
             </ElCol>
@@ -193,9 +195,9 @@
                 </div>
                 <div>
                   <h4>基于角色的访问控制</h4>
-                  <p class="text-g-700 text-sm"
-                    >采用RBAC模型，通过角色分配权限，简化权限管理复杂度。</p
-                  >
+                  <p class="text-g-700 text-sm">
+                    采用RBAC模型，通过角色分配权限，简化权限管理复杂度。
+                  </p>
                 </div>
               </div>
             </ElCol>
@@ -217,9 +219,9 @@
                 </div>
                 <div>
                   <h4>安全性优先原则</h4>
-                  <p class="text-g-700 text-sm"
-                    >始终遵循最小权限原则，确保用户只能访问必要的功能和数据。</p
-                  >
+                  <p class="text-g-700 text-sm">
+                    始终遵循最小权限原则，确保用户只能访问必要的功能和数据。
+                  </p>
                 </div>
               </div>
             </ElCol>
@@ -231,25 +233,25 @@
 </template>
 
 <script setup lang="ts">
-  import { computed } from 'vue'
+import { computed } from "vue";
 
-  import { Lock, User, Key, View } from '@element-plus/icons-vue'
-  import { useUserStore } from '@/store/modules/user'
+import { Lock, User, Key, View } from "@element-plus/icons-vue";
+import { useUserStore } from "@/store/modules/user.store";
 
-  defineOptions({ name: 'PermissionPageVisibility' })
+defineOptions({ name: "PermissionPageVisibility" });
 
-  const userStore = useUserStore()
+const userStore = useUserStore();
 
-  // 当前用户信息
-  const currentUser = computed(() => userStore.info)
+// 当前用户信息
+const currentUser = computed(() => userStore.info);
 
-  // 获取角色显示名称
-  const getRoleDisplayName = (role: string) => {
-    const roleMap: Record<string, string> = {
-      R_SUPER: '超级管理员',
-      R_ADMIN: '管理员',
-      R_USER: '普通用户'
-    }
-    return roleMap[role] || '未知角色'
-  }
+// 获取角色显示名称
+const getRoleDisplayName = (role: string) => {
+  const roleMap: Record<string, string> = {
+    R_SUPER: "超级管理员",
+    R_ADMIN: "管理员",
+    R_USER: "普通用户",
+  };
+  return roleMap[role] || "未知角色";
+};
 </script>
diff --git a/frontend/new-web/src/views/examples/permission/switch-role/index.vue b/frontend/new-web/src/views/examples/permission/switch-role/index.vue
index 5177514f..da45914e 100644
--- a/frontend/new-web/src/views/examples/permission/switch-role/index.vue
+++ b/frontend/new-web/src/views/examples/permission/switch-role/index.vue
@@ -21,7 +21,7 @@
           <div>
             <div class="flex items-start mb-3 last:mb-0">
               <span class="min-w-30 font-semibold">用户名：</span>
-              <span>{{ currentUser.userName || '未登录' }}</span>
+              <span>{{ currentUser.userName || "未登录" }}</span>
             </div>
             <div class="flex items-start mb-3 last:mb-0">
               <span class="min-w-30 font-semibold">角色：</span>
@@ -57,7 +57,7 @@
             :key="account.key"
             class="p-5 border border-g-400 rounded-lg tad-300"
             :class="{
-              'bg-theme/12 !border-theme': currentUser.userName === account.userName
+              'bg-theme/12 !border-theme': currentUser.userName === account.userName,
             }"
           >
             <div class="mb-4">
@@ -66,7 +66,7 @@
                 <p class="m-0 mb-2 leading-[1.5] text-g-700">{{ account.description }}</p>
                 <div class="flex flex-col gap-1">
                   <span class="text-xs text-g-600">用户名: {{ account.userName }}</span>
-                  <span class="text-xs text-g-600">角色: {{ account.roles.join(', ') }}</span>
+                  <span class="text-xs text-g-600">角色: {{ account.roles.join(", ") }}</span>
                 </div>
               </div>
             </div>
@@ -89,121 +89,121 @@
 </template>
 
 <script setup lang="ts">
-  import { computed, ref } from 'vue'
-  import { useUserStore } from '@/store/modules/user'
-  import { useI18n } from 'vue-i18n'
-  import { fetchLogin, fetchGetUserInfo } from '@/api/auth'
+import { computed, ref } from "vue";
+import { useUserStore } from "@/store/modules/user.store";
+import { useI18n } from "vue-i18n";
+import { fetchLogin, fetchGetUserInfo } from "@/api/auth";
 
-  defineOptions({ name: 'PermissionSwitchRole' })
+defineOptions({ name: "PermissionSwitchRole" });
 
-  const { t } = useI18n()
-  const userStore = useUserStore()
+const { t } = useI18n();
+const userStore = useUserStore();
 
-  // 响应式数据
-  const switching = ref(false)
+// 响应式数据
+const switching = ref(false);
 
-  // 当前用户信息
-  const currentUser = computed(() => userStore.info)
+// 当前用户信息
+const currentUser = computed(() => userStore.info);
 
-  // 账号列表 - 与登录页面保持一致
-  const accounts = computed(() => [
-    {
-      key: 'super',
-      label: t('login.roles.super'),
-      userName: 'Super',
-      password: '123456',
-      roles: ['R_SUPER'],
-      color: '#E6A23C',
-      description: '拥有系统最高权限，可以访问所有功能模块'
-    },
-    {
-      key: 'admin',
-      label: t('login.roles.admin'),
-      userName: 'Admin',
-      password: '123456',
-      roles: ['R_ADMIN'],
-      color: '#409EFF',
-      description: '拥有管理权限，可以管理用户和部分系统设置'
-    },
-    {
-      key: 'user',
-      label: t('login.roles.user'),
-      userName: 'User',
-      password: '123456',
-      roles: ['R_USER'],
-      color: '#67C23A',
-      description: '普通用户权限，只能访问基础功能模块'
+// 账号列表 - 与登录页面保持一致
+const accounts = computed(() => [
+  {
+    key: "super",
+    label: t("login.roles.super"),
+    userName: "Super",
+    password: "123456",
+    roles: ["R_SUPER"],
+    color: "#E6A23C",
+    description: "拥有系统最高权限，可以访问所有功能模块",
+  },
+  {
+    key: "admin",
+    label: t("login.roles.admin"),
+    userName: "Admin",
+    password: "123456",
+    roles: ["R_ADMIN"],
+    color: "#409EFF",
+    description: "拥有管理权限，可以管理用户和部分系统设置",
+  },
+  {
+    key: "user",
+    label: t("login.roles.user"),
+    userName: "User",
+    password: "123456",
+    roles: ["R_USER"],
+    color: "#67C23A",
+    description: "普通用户权限，只能访问基础功能模块",
+  },
+]);
+
+// 获取角色标签类型
+const getRoleTagType = (role?: string): "info" | "warning" | "primary" | "success" | "danger" => {
+  if (!role) return "info";
+  const roleMap: Record<string, "info" | "warning" | "primary" | "success" | "danger"> = {
+    R_SUPER: "warning",
+    R_ADMIN: "primary",
+    R_USER: "success",
+  };
+  return roleMap[role] || "info";
+};
+
+// 获取角色显示名称
+const getRoleDisplayName = (role?: string): string => {
+  if (!role) return "未知角色";
+  const roleMap: Record<string, string> = {
+    R_SUPER: "超级管理员",
+    R_ADMIN: "管理员",
+    R_USER: "普通用户",
+  };
+  return roleMap[role] || "未知角色";
+};
+
+/**
+ * 账号信息类型
+ */
+interface AccountInfo {
+  userName: string;
+  password: string;
+  role?: string;
+  roles?: string[];
+  [key: string]: any;
+}
+
+/**
+ * 切换角色
+ * @param account 账号信息
+ */
+const switchRole = async (account: AccountInfo) => {
+  try {
+    switching.value = true;
+
+    // 模拟登录请求
+    const { token, refreshToken } = await fetchLogin({
+      userName: account.userName,
+      password: account.password,
+    });
+
+    // 验证token
+    if (!token) {
+      throw new Error("Login failed - no token received");
     }
-  ])
 
-  // 获取角色标签类型
-  const getRoleTagType = (role?: string): 'info' | 'warning' | 'primary' | 'success' | 'danger' => {
-    if (!role) return 'info'
-    const roleMap: Record<string, 'info' | 'warning' | 'primary' | 'success' | 'danger'> = {
-      R_SUPER: 'warning',
-      R_ADMIN: 'primary',
-      R_USER: 'success'
-    }
-    return roleMap[role] || 'info'
-  }
-
-  // 获取角色显示名称
-  const getRoleDisplayName = (role?: string): string => {
-    if (!role) return '未知角色'
-    const roleMap: Record<string, string> = {
-      R_SUPER: '超级管理员',
-      R_ADMIN: '管理员',
-      R_USER: '普通用户'
-    }
-    return roleMap[role] || '未知角色'
-  }
-
-  /**
-   * 账号信息类型
-   */
-  interface AccountInfo {
-    userName: string
-    password: string
-    role?: string
-    roles?: string[]
-    [key: string]: any
-  }
-
-  /**
-   * 切换角色
-   * @param account 账号信息
-   */
-  const switchRole = async (account: AccountInfo) => {
-    try {
-      switching.value = true
-
-      // 模拟登录请求
-      const { token, refreshToken } = await fetchLogin({
-        userName: account.userName,
-        password: account.password
-      })
-
-      // 验证token
-      if (!token) {
-        throw new Error('Login failed - no token received')
-      }
-
-      // 存储token和用户信息
-      userStore.setToken(token, refreshToken)
-      const userInfo = await fetchGetUserInfo()
-      userStore.setUserInfo(userInfo)
-
-      // 延迟刷新页面以应用新权限
-      setTimeout(() => {
-        window.location.reload()
-      }, 100)
-    } catch (error) {
-      if (error !== 'cancel') {
-        ElMessage.error('切换用户身份失败，请稍后重试')
-        console.error('[SwitchRole] Error:', error)
-      }
-    } finally {
-      switching.value = false
+    // 存储token和用户信息
+    userStore.setToken(token, refreshToken);
+    const userInfo = await fetchGetUserInfo();
+    userStore.setUserInfo(userInfo);
+
+    // 延迟刷新页面以应用新权限
+    setTimeout(() => {
+      window.location.reload();
+    }, 100);
+  } catch (error) {
+    if (error !== "cancel") {
+      ElMessage.error("切换用户身份失败，请稍后重试");
+      console.error("[SwitchRole] Error:", error);
     }
+  } finally {
+    switching.value = false;
   }
+};
 </script>
diff --git a/frontend/new-web/src/views/examples/socket-chat/index.vue b/frontend/new-web/src/views/examples/socket-chat/index.vue
index 3451298a..46ad1192 100644
--- a/frontend/new-web/src/views/examples/socket-chat/index.vue
+++ b/frontend/new-web/src/views/examples/socket-chat/index.vue
@@ -22,7 +22,7 @@
         <ElCard class="h-full border-0" :body-style="{ padding: '20px' }">
           <div class="text-center">
             <ElTag :type="connectionTagType" size="large" class="mb-2">
-              {{ wsClient?.connectionStatusText || '未连接' }}
+              {{ wsClient?.connectionStatusText || "未连接" }}
             </ElTag>
             <div class="text-sm font-medium text-gray-900">连接状态</div>
             <div class="text-xs text-gray-500">当前WebSocket连接状态</div>
@@ -48,7 +48,7 @@
             <div class="flex items-center justify-between">
               <span class="text-base font-bold">连接配置</span>
               <ElTag :type="connectionTagType" size="large">
-                {{ wsClient?.connectionStatusText || '未连接' }}
+                {{ wsClient?.connectionStatusText || "未连接" }}
               </ElTag>
             </div>
           </template>
@@ -71,7 +71,7 @@
                   :loading="isConnecting"
                   :disabled="isConnected"
                 >
-                  {{ isConnecting ? '连接中...' : '连接' }}
+                  {{ isConnecting ? "连接中..." : "连接" }}
                 </ElButton>
                 <ElButton type="danger" @click="handleDisconnect" :disabled="!isConnected">
                   断开连接
@@ -137,7 +137,7 @@
             <div v-for="(message, index) in messageList" :key="index" class="message-item">
               <div class="message-header">
                 <ElTag size="small" :type="message.type === 'received' ? 'success' : 'info'">
-                  {{ message.type === 'received' ? '接收' : '发送' }}
+                  {{ message.type === "received" ? "接收" : "发送" }}
                 </ElTag>
                 <span class="message-time">{{ message.time }}</span>
               </div>
@@ -182,318 +182,318 @@
 </template>
 
 <script setup lang="ts">
-  import WebSocketClient from '@/utils/socket'
-  import { ElMessage } from 'element-plus'
+import WebSocketClient from "@/utils/socket";
+import { ElMessage } from "element-plus";
 
-  defineOptions({ name: 'WidgetsSocketChat' })
+defineOptions({ name: "WidgetsSocketChat" });
 
-  // WebSocket客户端实例
-  const wsClient = ref<WebSocketClient | null>(null)
+// WebSocket客户端实例
+const wsClient = ref<WebSocketClient | null>(null);
 
-  // 连接状态
-  const isConnecting = ref(false)
-  const isConnected = ref(false)
-  const reconnectCount = ref(0)
-  const messageCount = ref(0)
+// 连接状态
+const isConnecting = ref(false);
+const isConnected = ref(false);
+const reconnectCount = ref(0);
+const messageCount = ref(0);
 
-  // 用于清理 watch 的函数
-  let stopWatchConnection: (() => void) | null = null
-  let stopWatchStatus: (() => void) | null = null
+// 用于清理 watch 的函数
+let stopWatchConnection: (() => void) | null = null;
+let stopWatchStatus: (() => void) | null = null;
 
-  // 表单数据
-  const connectForm = ref({
-    url: 'ws://localhost:8080/ws',
-    autoReconnect: true,
-    heartbeat: true
-  })
+// 表单数据
+const connectForm = ref({
+  url: "ws://localhost:8080/ws",
+  autoReconnect: true,
+  heartbeat: true,
+});
 
-  const messageForm = ref({
-    type: 'text',
-    content: ''
-  })
+const messageForm = ref({
+  type: "text",
+  content: "",
+});
 
-  // 消息和日志列表
-  const messageList = ref<
-    Array<{
-      type: 'sent' | 'received'
-      content: string
-      time: string
-    }>
-  >([])
+// 消息和日志列表
+const messageList = ref<
+  Array<{
+    type: "sent" | "received";
+    content: string;
+    time: string;
+  }>
+>([]);
 
-  const logList = ref<
-    Array<{
-      type: 'info' | 'success' | 'warning' | 'error'
-      message: string
-      time: string
-    }>
-  >([])
+const logList = ref<
+  Array<{
+    type: "info" | "success" | "warning" | "error";
+    message: string;
+    time: string;
+  }>
+>([]);
 
-  // 计算属性
-  const connectionTagType = computed(() => {
-    if (isConnecting.value) return 'warning'
-    if (isConnected.value) return 'success'
-    return 'danger'
-  })
+// 计算属性
+const connectionTagType = computed(() => {
+  if (isConnecting.value) return "warning";
+  if (isConnected.value) return "success";
+  return "danger";
+});
 
-  /**
-   * 添加日志
-   */
-  const addLog = (type: 'info' | 'success' | 'warning' | 'error', message: string) => {
-    logList.value.unshift({
-      type,
-      message,
-      time: new Date().toLocaleTimeString()
-    })
+/**
+ * 添加日志
+ */
+const addLog = (type: "info" | "success" | "warning" | "error", message: string) => {
+  logList.value.unshift({
+    type,
+    message,
+    time: new Date().toLocaleTimeString(),
+  });
 
-    // 限制日志数量
-    if (logList.value.length > 100) {
-      logList.value = logList.value.slice(0, 100)
-    }
+  // 限制日志数量
+  if (logList.value.length > 100) {
+    logList.value = logList.value.slice(0, 100);
+  }
+};
+
+/**
+ * 添加消息记录
+ */
+const addMessage = (type: "sent" | "received", content: string) => {
+  messageList.value.unshift({
+    type,
+    content,
+    time: new Date().toLocaleTimeString(),
+  });
+
+  // 限制消息数量
+  if (messageList.value.length > 50) {
+    messageList.value = messageList.value.slice(0, 50);
+  }
+};
+
+/**
+ * 处理WebSocket消息
+ */
+const handleSocketMessage = (event: MessageEvent) => {
+  messageCount.value++;
+  addMessage("received", event.data);
+  addLog("success", `收到消息: ${event.data}`);
+};
+
+/**
+ * 连接WebSocket
+ */
+const handleConnect = () => {
+  if (isConnecting.value || isConnected.value) {
+    return;
   }
 
-  /**
-   * 添加消息记录
-   */
-  const addMessage = (type: 'sent' | 'received', content: string) => {
-    messageList.value.unshift({
-      type,
-      content,
-      time: new Date().toLocaleTimeString()
-    })
-
-    // 限制消息数量
-    if (messageList.value.length > 50) {
-      messageList.value = messageList.value.slice(0, 50)
-    }
+  // 清理之前的 watch
+  if (stopWatchConnection) {
+    stopWatchConnection();
+    stopWatchConnection = null;
+  }
+  if (stopWatchStatus) {
+    stopWatchStatus();
+    stopWatchStatus = null;
   }
 
-  /**
-   * 处理WebSocket消息
-   */
-  const handleSocketMessage = (event: MessageEvent) => {
-    messageCount.value++
-    addMessage('received', event.data)
-    addLog('success', `收到消息: ${event.data}`)
-  }
+  isConnecting.value = true;
+  addLog("info", `开始连接到 ${connectForm.value.url}`);
 
-  /**
-   * 连接WebSocket
-   */
-  const handleConnect = () => {
-    if (isConnecting.value || isConnected.value) {
-      return
-    }
+  try {
+    wsClient.value = WebSocketClient.getInstance({
+      url: connectForm.value.url,
+      messageHandler: handleSocketMessage,
+      reconnectInterval: connectForm.value.autoReconnect ? 5000 : 0,
+      heartbeatInterval: connectForm.value.heartbeat ? 10000 : 0,
+      maxReconnectAttempts: 5,
+    });
 
-    // 清理之前的 watch
-    if (stopWatchConnection) {
-      stopWatchConnection()
-      stopWatchConnection = null
-    }
-    if (stopWatchStatus) {
-      stopWatchStatus()
-      stopWatchStatus = null
-    }
+    wsClient.value.init();
 
-    isConnecting.value = true
-    addLog('info', `开始连接到 ${connectForm.value.url}`)
+    // 监听连接状态变化
+    stopWatchConnection = watch(
+      () => wsClient.value?.isWebSocketConnected,
+      (connected) => {
+        isConnected.value = connected || false;
+        isConnecting.value = false;
 
-    try {
-      wsClient.value = WebSocketClient.getInstance({
-        url: connectForm.value.url,
-        messageHandler: handleSocketMessage,
-        reconnectInterval: connectForm.value.autoReconnect ? 5000 : 0,
-        heartbeatInterval: connectForm.value.heartbeat ? 10000 : 0,
-        maxReconnectAttempts: 5
-      })
-
-      wsClient.value.init()
-
-      // 监听连接状态变化
-      stopWatchConnection = watch(
-        () => wsClient.value?.isWebSocketConnected,
-        (connected) => {
-          isConnected.value = connected || false
-          isConnecting.value = false
-
-          if (connected) {
-            addLog('success', 'WebSocket连接成功')
-            reconnectCount.value = 0
-          }
-        },
-        { immediate: true }
-      )
-
-      // 监听连接状态文本变化
-      stopWatchStatus = watch(
-        () => wsClient.value?.connectionStatusText,
-        (status) => {
-          if (status && status.includes('重连中')) {
-            reconnectCount.value++
-            addLog('warning', `自动重连中 (第${reconnectCount.value}次)`)
-          }
+        if (connected) {
+          addLog("success", "WebSocket连接成功");
+          reconnectCount.value = 0;
         }
-      )
-    } catch (error) {
-      isConnecting.value = false
-      const errorMessage = error instanceof Error ? error.message : String(error)
-      addLog('error', `连接失败: ${errorMessage}`)
-      ElMessage.error('连接失败，请检查服务器地址')
-    }
-  }
+      },
+      { immediate: true }
+    );
 
-  /**
-   * 断开连接
-   */
-  const handleDisconnect = () => {
-    if (wsClient.value) {
-      wsClient.value.close()
-      addLog('info', '手动断开WebSocket连接')
-    }
-
-    // 清理 watch
-    if (stopWatchConnection) {
-      stopWatchConnection()
-      stopWatchConnection = null
-    }
-    if (stopWatchStatus) {
-      stopWatchStatus()
-      stopWatchStatus = null
-    }
-
-    isConnected.value = false
-    isConnecting.value = false
-  }
-
-  /**
-   * 重新连接
-   */
-  const handleReconnect = () => {
-    handleDisconnect()
-    setTimeout(() => {
-      handleConnect()
-    }, 1000)
-  }
-
-  /**
-   * 发送消息
-   */
-  const handleSendMessage = () => {
-    if (!isConnected.value || !wsClient.value) {
-      ElMessage.warning('请先建立WebSocket连接')
-      return
-    }
-
-    let message = messageForm.value.content
-
-    // 根据消息类型处理内容
-    switch (messageForm.value.type) {
-      case 'json':
-        try {
-          // 验证是否为有效JSON
-          JSON.parse(message)
-        } catch {
-          ElMessage.error('请输入有效的JSON格式数据')
-          return
+    // 监听连接状态文本变化
+    stopWatchStatus = watch(
+      () => wsClient.value?.connectionStatusText,
+      (status) => {
+        if (status && status.includes("重连中")) {
+          reconnectCount.value++;
+          addLog("warning", `自动重连中 (第${reconnectCount.value}次)`);
         }
-        break
-      case 'ping':
-        message = 'ping'
-        break
-    }
-
-    try {
-      wsClient.value.send(message)
-      addMessage('sent', message)
-      addLog('info', `发送消息: ${message}`)
-      ElMessage.success('消息发送成功')
-    } catch (error) {
-      const errorMessage = error instanceof Error ? error.message : String(error)
-      addLog('error', `发送失败: ${errorMessage}`)
-      ElMessage.error('发送消息失败')
-    }
-  }
-
-  /**
-   * 清空消息表单
-   */
-  const clearMessageForm = () => {
-    messageForm.value.content = ''
-  }
-
-  /**
-   * 清空消息记录
-   */
-  const clearMessages = () => {
-    messageList.value = []
-  }
-
-  /**
-   * 清空日志
-   */
-  const clearLogs = () => {
-    logList.value = []
-  }
-
-  /**
-   * 页面卸载时清理连接
-   */
-  onUnmounted(() => {
-    handleDisconnect()
-  })
-
-  /**
-   * 监听页面可见性变化，页面隐藏时断开连接
-   */
-  onMounted(() => {
-    document.addEventListener('visibilitychange', () => {
-      if (document.hidden && isConnected.value) {
-        addLog('info', '页面隐藏，保持连接')
       }
-    })
-  })
+    );
+  } catch (error) {
+    isConnecting.value = false;
+    const errorMessage = error instanceof Error ? error.message : String(error);
+    addLog("error", `连接失败: ${errorMessage}`);
+    ElMessage.error("连接失败，请检查服务器地址");
+  }
+};
+
+/**
+ * 断开连接
+ */
+const handleDisconnect = () => {
+  if (wsClient.value) {
+    wsClient.value.close();
+    addLog("info", "手动断开WebSocket连接");
+  }
+
+  // 清理 watch
+  if (stopWatchConnection) {
+    stopWatchConnection();
+    stopWatchConnection = null;
+  }
+  if (stopWatchStatus) {
+    stopWatchStatus();
+    stopWatchStatus = null;
+  }
+
+  isConnected.value = false;
+  isConnecting.value = false;
+};
+
+/**
+ * 重新连接
+ */
+const handleReconnect = () => {
+  handleDisconnect();
+  setTimeout(() => {
+    handleConnect();
+  }, 1000);
+};
+
+/**
+ * 发送消息
+ */
+const handleSendMessage = () => {
+  if (!isConnected.value || !wsClient.value) {
+    ElMessage.warning("请先建立WebSocket连接");
+    return;
+  }
+
+  let message = messageForm.value.content;
+
+  // 根据消息类型处理内容
+  switch (messageForm.value.type) {
+    case "json":
+      try {
+        // 验证是否为有效JSON
+        JSON.parse(message);
+      } catch {
+        ElMessage.error("请输入有效的JSON格式数据");
+        return;
+      }
+      break;
+    case "ping":
+      message = "ping";
+      break;
+  }
+
+  try {
+    wsClient.value.send(message);
+    addMessage("sent", message);
+    addLog("info", `发送消息: ${message}`);
+    ElMessage.success("消息发送成功");
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : String(error);
+    addLog("error", `发送失败: ${errorMessage}`);
+    ElMessage.error("发送消息失败");
+  }
+};
+
+/**
+ * 清空消息表单
+ */
+const clearMessageForm = () => {
+  messageForm.value.content = "";
+};
+
+/**
+ * 清空消息记录
+ */
+const clearMessages = () => {
+  messageList.value = [];
+};
+
+/**
+ * 清空日志
+ */
+const clearLogs = () => {
+  logList.value = [];
+};
+
+/**
+ * 页面卸载时清理连接
+ */
+onUnmounted(() => {
+  handleDisconnect();
+});
+
+/**
+ * 监听页面可见性变化，页面隐藏时断开连接
+ */
+onMounted(() => {
+  document.addEventListener("visibilitychange", () => {
+    if (document.hidden && isConnected.value) {
+      addLog("info", "页面隐藏，保持连接");
+    }
+  });
+});
 </script>
 
 <style scoped>
-  @reference '@styles/core/tailwind.css';
+@reference '@styles/core/tailwind.css';
 
-  .message-container {
-    @apply max-h-96 overflow-y-auto space-y-3;
-  }
+.message-container {
+  @apply max-h-96 overflow-y-auto space-y-3;
+}
 
-  .message-item {
-    @apply p-3 rounded-lg border border-gray-200 bg-white dark:bg-gray-800 dark:border-gray-700;
-  }
+.message-item {
+  @apply p-3 rounded-lg border border-gray-200 bg-white dark:bg-gray-800 dark:border-gray-700;
+}
 
-  .message-header {
-    @apply flex items-center justify-between mb-2;
-  }
+.message-header {
+  @apply flex items-center justify-between mb-2;
+}
 
-  .message-time {
-    @apply text-xs text-gray-500;
-  }
+.message-time {
+  @apply text-xs text-gray-500;
+}
 
-  .message-content {
-    @apply text-sm text-gray-800 dark:text-gray-200 break-words font-mono bg-gray-50 dark:bg-gray-900 p-2 rounded;
-  }
+.message-content {
+  @apply text-sm text-gray-800 dark:text-gray-200 break-words font-mono bg-gray-50 dark:bg-gray-900 p-2 rounded;
+}
 
-  .log-container {
-    @apply max-h-64 overflow-y-auto;
-  }
+.log-container {
+  @apply max-h-64 overflow-y-auto;
+}
 
-  /* 滚动条样式 */
-  .message-container::-webkit-scrollbar,
-  .log-container::-webkit-scrollbar {
-    @apply w-4;
-  }
+/* 滚动条样式 */
+.message-container::-webkit-scrollbar,
+.log-container::-webkit-scrollbar {
+  @apply w-4;
+}
 
-  .message-container::-webkit-scrollbar-track,
-  .log-container::-webkit-scrollbar-track {
-    @apply bg-gray-100 rounded;
-  }
+.message-container::-webkit-scrollbar-track,
+.log-container::-webkit-scrollbar-track {
+  @apply bg-gray-100 rounded;
+}
 
-  .message-container::-webkit-scrollbar-thumb,
-  .log-container::-webkit-scrollbar-thumb {
-    @apply bg-gray-300 rounded hover:bg-gray-400;
-  }
+.message-container::-webkit-scrollbar-thumb,
+.log-container::-webkit-scrollbar-thumb {
+  @apply bg-gray-300 rounded hover:bg-gray-400;
+}
 </style>
diff --git a/frontend/new-web/src/views/examples/tables/basic.vue b/frontend/new-web/src/views/examples/tables/basic.vue
index 72d00f65..506e3ee9 100644
--- a/frontend/new-web/src/views/examples/tables/basic.vue
+++ b/frontend/new-web/src/views/examples/tables/basic.vue
@@ -12,52 +12,51 @@
         :pagination="pagination"
         @pagination:size-change="handleSizeChange"
         @pagination:current-change="handleCurrentChange"
-      >
-      </ArtTable>
+      ></ArtTable>
     </ElCard>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { useTable } from '@/hooks/core/useTable'
-  import { fetchGetUserList } from '@/api/system-manage'
+import { useTable } from "@/hooks/core/useTable";
+import { fetchGetUserList } from "@/api/system-manage";
 
-  defineOptions({ name: 'UserMixedUsageExample' })
+defineOptions({ name: "UserMixedUsageExample" });
 
-  const { data, columns, loading, pagination, handleSizeChange, handleCurrentChange } = useTable({
-    core: {
-      apiFn: fetchGetUserList,
-      apiParams: {
-        current: 1,
-        size: 20,
-        userName: '',
-        userPhone: '',
-        userEmail: ''
+const { data, columns, loading, pagination, handleSizeChange, handleCurrentChange } = useTable({
+  core: {
+    apiFn: fetchGetUserList,
+    apiParams: {
+      current: 1,
+      size: 20,
+      userName: "",
+      userPhone: "",
+      userEmail: "",
+    },
+    columnsFactory: () => [
+      {
+        prop: "id",
+        label: "ID",
       },
-      columnsFactory: () => [
-        {
-          prop: 'id',
-          label: 'ID'
-        },
-        {
-          prop: 'nickName',
-          label: '昵称'
-        },
-        {
-          prop: 'userGender',
-          label: '性别',
-          sortable: true,
-          formatter: (row) => row.userGender || '未知'
-        },
-        {
-          prop: 'userPhone',
-          label: '手机号'
-        },
-        {
-          prop: 'userEmail',
-          label: '邮箱'
-        }
-      ]
-    }
-  })
+      {
+        prop: "nickName",
+        label: "昵称",
+      },
+      {
+        prop: "userGender",
+        label: "性别",
+        sortable: true,
+        formatter: (row) => row.userGender || "未知",
+      },
+      {
+        prop: "userPhone",
+        label: "手机号",
+      },
+      {
+        prop: "userEmail",
+        label: "邮箱",
+      },
+    ],
+  },
+});
 </script>
diff --git a/frontend/new-web/src/views/examples/tables/index.vue b/frontend/new-web/src/views/examples/tables/index.vue
index 9f75af6c..f353198a 100644
--- a/frontend/new-web/src/views/examples/tables/index.vue
+++ b/frontend/new-web/src/views/examples/tables/index.vue
@@ -66,7 +66,7 @@
                       :class="{
                         'bg-[rgba(103,194,58,0.1)] !border-l-success': log.includes('✅'),
                         'bg-[rgba(64,158,255,0.1)] !border-l-theme': log.includes('🎯'),
-                        'bg-[rgba(245,108,108,0.1)] !border-l-danger': log.includes('❌')
+                        'bg-[rgba(245,108,108,0.1)] !border-l-danger': log.includes('❌'),
                       }"
                     >
                       {{ log }}
@@ -83,19 +83,19 @@
                 <div class="flex-cb">
                   <span class="font-medium text-g-700">加载状态：</span>
                   <ElTag :type="loading ? 'warning' : 'success'">
-                    {{ loading ? '加载中' : '空闲' }}
+                    {{ loading ? "加载中" : "空闲" }}
                   </ElTag>
                 </div>
                 <div class="flex-cb">
                   <span class="font-medium text-g-700">数据状态：</span>
                   <ElTag :type="hasData ? 'success' : 'info'">
-                    {{ hasData ? `${data.length} 条数据` : '无数据' }}
+                    {{ hasData ? `${data.length} 条数据` : "无数据" }}
                   </ElTag>
                 </div>
                 <div class="flex-cb">
                   <span class="font-medium text-g-700">错误状态：</span>
                   <ElTag :type="error ? 'danger' : 'success'">
-                    {{ error ? '有错误' : '正常' }}
+                    {{ error ? "有错误" : "正常" }}
                   </ElTag>
                 </div>
                 <div class="flex flex-col gap-2">
@@ -103,8 +103,9 @@
                   <ElText
                     tag="pre"
                     class="max-h-50 p-2 overflow-y-auto text-xs bg-g-200 border border-g-400 rounded-md"
-                    >{{ JSON.stringify(requestParams, null, 2) }}</ElText
                   >
+                    {{ JSON.stringify(requestParams, null, 2) }}
+                  </ElText>
                 </div>
                 <div class="flex gap-2 mt-2">
                   <ElButton size="small" @click="handleCancelRequest">取消请求</ElButton>
@@ -118,7 +119,7 @@
         <!-- 功能开关 -->
         <div class="flex flex-wrap gap-4 mt-4">
           <ElSwitch v-model="showDebugPanel" active-text="调试面板" />
-          <ElText type="info" size="small"> 💡 缓存功能已启用，可通过调试面板查看详细信息 </ElText>
+          <ElText type="info" size="small">💡 缓存功能已启用，可通过调试面板查看详细信息</ElText>
         </div>
       </div>
     </ElCard>
@@ -184,7 +185,7 @@
               style="margin: 0 12px"
             />
 
-            <ElButton @click="handleClearData" plain v-ripple> 清空数据 </ElButton>
+            <ElButton @click="handleClearData" plain v-ripple>清空数据</ElButton>
 
             <ElButton @click="handleBatchDelete" :disabled="selectedRows.length === 0" v-ripple>
               <ElIcon>
@@ -205,20 +206,20 @@
                   <ElDropdownItem command="addColumn">新增列（备注列）</ElDropdownItem>
                   <ElDropdownItem command="batchAddColumns">批量新增（备注、标签）</ElDropdownItem>
                   <ElDropdownItem command="toggleColumn">切换列（手机号）</ElDropdownItem>
-                  <ElDropdownItem command="batchToggleColumns"
-                    >批量切换（性别、手机号）</ElDropdownItem
-                  >
+                  <ElDropdownItem command="batchToggleColumns">
+                    批量切换（性别、手机号）
+                  </ElDropdownItem>
                   <ElDropdownItem command="removeColumn">删除列（状态列）</ElDropdownItem>
-                  <ElDropdownItem command="batchRemoveColumns"
-                    >批量删除（状态、评分）</ElDropdownItem
-                  >
+                  <ElDropdownItem command="batchRemoveColumns">
+                    批量删除（状态、评分）
+                  </ElDropdownItem>
                   <ElDropdownItem command="updateColumn">更新列（手机号）</ElDropdownItem>
-                  <ElDropdownItem command="batchUpdateColumns"
-                    >批量更新（性别、手机号）</ElDropdownItem
-                  >
-                  <ElDropdownItem command="reorderColumns"
-                    >交换列位置（性别、手机号）</ElDropdownItem
-                  >
+                  <ElDropdownItem command="batchUpdateColumns">
+                    批量更新（性别、手机号）
+                  </ElDropdownItem>
+                  <ElDropdownItem command="reorderColumns">
+                    交换列位置（性别、手机号）
+                  </ElDropdownItem>
                   <ElDropdownItem command="resetColumns" divided>重置所有列配置</ElDropdownItem>
                 </ElDropdownMenu>
               </template>
@@ -247,13 +248,14 @@
           <div class="flex gap-3 user-info">
             <ElAvatar :src="row.avatar" :size="40" />
             <div class="flex-1 min-w-0">
-              <p class="m-0 overflow-hidden font-medium text-ellipsis whitespace-nowrap">{{
-                row.userName
-              }}</p>
+              <p class="m-0 overflow-hidden font-medium text-ellipsis whitespace-nowrap">
+                {{ row.userName }}
+              </p>
               <p
                 class="m-0 mt-1 overflow-hidden text-xs text-g-700 text-ellipsis whitespace-nowrap"
-                >{{ row.userEmail }}</p
               >
+                {{ row.userEmail }}
+              </p>
             </div>
           </div>
         </template>
@@ -331,7 +333,7 @@
           <h5 class="m-0 mb-4 text-sm font-semibold">事件监听演示</h5>
           <div class="flex flex-wrap gap-2 mb-3 last:mb-0">
             <ElButton @click="toggleEventDemo" :type="eventDemoEnabled ? 'success' : 'primary'">
-              {{ eventDemoEnabled ? '关闭' : '开启' }}事件监听
+              {{ eventDemoEnabled ? "关闭" : "开启" }}事件监听
             </ElButton>
             <ElButton @click="clearEventLogs" v-if="eventDemoEnabled">清空日志</ElButton>
           </div>
@@ -425,918 +427,914 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, computed, watch, nextTick } from 'vue'
-  import {
-    Plus,
-    Delete,
-    Edit,
-    Search,
-    Refresh,
-    QuestionFilled,
-    ArrowDown
-  } from '@element-plus/icons-vue'
-  import { ElMessageBox } from 'element-plus'
-  import { useTable, CacheInvalidationStrategy } from '@/hooks/core/useTable'
-  import { fetchGetUserList } from '@/api/system-manage'
-  import { ACCOUNT_TABLE_DATA } from '@/mock/temp/formData'
-  import { getColumnKey } from '@/hooks/core/useTableColumns'
+import { ref, computed, watch, nextTick } from "vue";
+import {
+  Plus,
+  Delete,
+  Edit,
+  Search,
+  Refresh,
+  QuestionFilled,
+  ArrowDown,
+} from "@element-plus/icons-vue";
+import { ElMessageBox } from "element-plus";
+import { useTable, CacheInvalidationStrategy } from "@/hooks/core/useTable";
+import { fetchGetUserList } from "@/api/system-manage";
+import { ACCOUNT_TABLE_DATA } from "@/mock/temp/formData";
+import { getColumnKey } from "@/hooks/core/useTableColumns";
 
-  defineOptions({ name: 'AdvancedTableDemo' })
+defineOptions({ name: "AdvancedTableDemo" });
 
-  type UserListItem = Api.SystemManage.UserListItem
+type UserListItem = UserListItem;
 
-  // 选中的行
-  const selectedRows = ref<UserListItem[]>([])
+// 选中的行
+const selectedRows = ref<UserListItem[]>([]);
 
-  // 表格实例引用
-  const tableRef = ref()
+// 表格实例引用
+const tableRef = ref();
 
-  // 调试面板状态
-  const showDebugPanel = ref(false)
-  const debugActiveNames = ref(['cache', 'request', 'logs'])
+// 调试面板状态
+const showDebugPanel = ref(false);
+const debugActiveNames = ref(["cache", "request", "logs"]);
 
-  // 缓存调试状态
-  const cacheDebugLogs = ref<string[]>([])
-  const requestParams = ref<any>({
-    current: 1,
-    size: 20,
-    name: '',
-    phone: '',
-    status: '',
-    department: '',
-    daterange: undefined
-  })
+// 缓存调试状态
+const cacheDebugLogs = ref<string[]>([]);
+const requestParams = ref<any>({
+  current: 1,
+  size: 20,
+  name: "",
+  phone: "",
+  status: "",
+  department: "",
+  daterange: undefined,
+});
 
-  // 缓存键信息
-  const cacheKeys = ref<string[]>([])
+// 缓存键信息
+const cacheKeys = ref<string[]>([]);
 
-  // 手机号搜索
-  const phoneSearch = ref('')
+// 手机号搜索
+const phoneSearch = ref("");
 
-  // 事件演示相关
-  const eventDemoEnabled = ref(false)
-  const eventLogs = ref<Array<{ type: string; message: string; time: string }>>([])
+// 事件演示相关
+const eventDemoEnabled = ref(false);
+const eventLogs = ref<Array<{ type: string; message: string; time: string }>>([]);
 
-  // 表格配置演示
-  const tableConfig = ref({
-    height: '100%',
-    fixedHeight: false // 新增：是否固定高度的开关
-  })
+// 表格配置演示
+const tableConfig = ref({
+  height: "100%",
+  fixedHeight: false, // 新增：是否固定高度的开关
+});
 
-  // 计算实际的表格高度
-  const computedTableHeight = computed(() => {
-    return tableConfig.value.fixedHeight ? '500px' : ''
-  })
+// 计算实际的表格高度
+const computedTableHeight = computed(() => {
+  return tableConfig.value.fixedHeight ? "500px" : "";
+});
 
-  // 搜索表单 ref
-  const searchBarRef = ref()
+// 搜索表单 ref
+const searchBarRef = ref();
 
-  // 校验规则
-  const rules = {
-    name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
-    phone: [
-      { required: true, message: '请输入手机号', trigger: 'blur' },
-      { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
-    ]
-  }
+// 校验规则
+const rules = {
+  name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
+  phone: [
+    { required: true, message: "请输入手机号", trigger: "blur" },
+    { pattern: /^1[3456789]\d{9}$/, message: "请输入正确的手机号", trigger: "blur" },
+  ],
+};
 
-  // 表单搜索初始值
-  const searchFormState = ref({
-    name: '',
-    phone: '',
-    status: '1',
-    department: '',
-    daterange: ['2025-01-01', '2025-02-10']
-  })
+// 表单搜索初始值
+const searchFormState = ref({
+  name: "",
+  phone: "",
+  status: "1",
+  department: "",
+  daterange: ["2025-01-01", "2025-02-10"],
+});
 
-  // 搜索表单状态
-  // const searchFormState = ref({ ...defaultFilter.value })
+// 搜索表单状态
+// const searchFormState = ref({ ...defaultFilter.value })
 
-  // 用户状态配置
-  const USER_STATUS_CONFIG = {
-    '1': { type: 'success' as const, text: '在线' },
-    '2': { type: 'info' as const, text: '离线' },
-    '3': { type: 'warning' as const, text: '异常' },
-    '4': { type: 'danger' as const, text: '注销' }
-  } as const
+// 用户状态配置
+const USER_STATUS_CONFIG = {
+  "1": { type: "success" as const, text: "在线" },
+  "2": { type: "info" as const, text: "离线" },
+  "3": { type: "warning" as const, text: "异常" },
+  "4": { type: "danger" as const, text: "注销" },
+} as const;
 
-  // 搜索表单配置
-  // 日期选择器有多种类型，具体可以查看 src/components/core/forms/art-search-bar/widget/art-search-date/README.md 文档
-  const searchItems = computed(() => [
-    {
-      key: 'name',
-      label: '用户名',
-      type: 'input',
-      props: {
-        placeholder: '请输入用户名'
-      }
+// 搜索表单配置
+// 日期选择器有多种类型，具体可以查看 src/components/core/forms/art-search-bar/widget/art-search-date/README.md 文档
+const searchItems = computed(() => [
+  {
+    key: "name",
+    label: "用户名",
+    type: "input",
+    props: {
+      placeholder: "请输入用户名",
     },
-    {
-      key: 'phone',
-      label: '手机号',
-      type: 'input',
-      props: {
-        placeholder: '请输入手机号',
-        maxlength: '11'
-      }
+  },
+  {
+    key: "phone",
+    label: "手机号",
+    type: "input",
+    props: {
+      placeholder: "请输入手机号",
+      maxlength: "11",
     },
-    {
-      key: 'status',
-      label: '状态',
-      type: 'select',
-      options: [
-        { label: '全部', value: '' },
-        { label: '在线', value: '1' },
-        { label: '离线', value: '2' },
-        { label: '异常', value: '3' },
-        { label: '注销', value: '4' }
-      ]
+  },
+  {
+    key: "status",
+    label: "状态",
+    type: "select",
+    options: [
+      { label: "全部", value: "" },
+      { label: "在线", value: "1" },
+      { label: "离线", value: "2" },
+      { label: "异常", value: "3" },
+      { label: "注销", value: "4" },
+    ],
+  },
+  {
+    key: "department",
+    label: "部门",
+    type: "select",
+    options: [
+      { label: "全部", value: "" },
+      { label: "技术部", value: "技术部" },
+      { label: "产品部", value: "产品部" },
+      { label: "运营部", value: "运营部" },
+      { label: "市场部", value: "市场部" },
+      { label: "设计部", value: "设计部" },
+    ],
+  },
+  {
+    key: "daterange",
+    label: "日期范围",
+    type: "daterange",
+    props: {
+      type: "daterange",
+      startPlaceholder: "开始日期",
+      endPlaceholder: "结束日期",
+      valueFormat: "YYYY-MM-DD",
     },
-    {
-      key: 'department',
-      label: '部门',
-      type: 'select',
-      options: [
-        { label: '全部', value: '' },
-        { label: '技术部', value: '技术部' },
-        { label: '产品部', value: '产品部' },
-        { label: '运营部', value: '运营部' },
-        { label: '市场部', value: '市场部' },
-        { label: '设计部', value: '设计部' }
-      ]
-    },
-    {
-      key: 'daterange',
-      label: '日期范围',
-      type: 'daterange',
-      props: {
-        type: 'daterange',
-        startPlaceholder: '开始日期',
-        endPlaceholder: '结束日期',
-        valueFormat: 'YYYY-MM-DD'
-      }
+  },
+]);
+
+// 导出列配置
+const exportColumns = computed(() => ({
+  userName: { title: "用户名", width: 15 },
+  userEmail: { title: "邮箱", width: 20 },
+  userPhone: { title: "手机号", width: 15 },
+  userGender: { title: "性别", width: 10 },
+  department: { title: "部门", width: 15 },
+  status: {
+    title: "状态",
+    width: 10,
+    formatter: (value: string) => getUserStatusConfig(value).text,
+  },
+}));
+
+// 获取用户状态配置
+const getUserStatusConfig = (status: string) => {
+  return (
+    USER_STATUS_CONFIG[status as keyof typeof USER_STATUS_CONFIG] || {
+      type: "info" as const,
+      text: "未知",
     }
-  ])
+  );
+};
 
-  // 导出列配置
-  const exportColumns = computed(() => ({
-    userName: { title: '用户名', width: 15 },
-    userEmail: { title: '邮箱', width: 20 },
-    userPhone: { title: '手机号', width: 15 },
-    userGender: { title: '性别', width: 10 },
-    department: { title: '部门', width: 15 },
-    status: {
-      title: '状态',
-      width: 10,
-      formatter: (value: string) => getUserStatusConfig(value).text
-    }
-  }))
+const buildSearchParams = (params: typeof searchFormState.value) => {
+  const { daterange, ...filtersParams } = params;
+  const [startTime, endTime] = Array.isArray(daterange) ? daterange : [null, null];
 
-  // 获取用户状态配置
-  const getUserStatusConfig = (status: string) => {
-    return (
-      USER_STATUS_CONFIG[status as keyof typeof USER_STATUS_CONFIG] || {
-        type: 'info' as const,
-        text: '未知'
-      }
-    )
-  }
+  return {
+    ...filtersParams,
+    startTime,
+    endTime,
+  };
+};
 
-  const buildSearchParams = (params: typeof searchFormState.value) => {
-    const { daterange, ...filtersParams } = params
-    const [startTime, endTime] = Array.isArray(daterange) ? daterange : [null, null]
+// 模拟网络请求
+// const simulateNetworkRequest = (): Promise<void> => {
+//   return new Promise((resolve) => {
+//     setTimeout(() => {
+//       resolve()
+//     }, 500)
+//   })
+// }
 
-    return {
-      ...filtersParams,
-      startTime,
-      endTime
-    }
-  }
+// 模拟网络请求完成后加载数据
+// onMounted(async () => {
+//   // 等待模拟的网络请求完成
+//   await simulateNetworkRequest()
+//   await fetchData({ name: 'ricky', phone: 19388828388 })
+// })
 
-  // 模拟网络请求
-  // const simulateNetworkRequest = (): Promise<void> => {
-  //   return new Promise((resolve) => {
-  //     setTimeout(() => {
-  //       resolve()
-  //     }, 500)
-  //   })
-  // }
+/**
+ * 使用 useTable Hook 管理表格数据
+ * 提供完整的表格解决方案，包括数据获取、缓存、分页、搜索等功能
+ */
+const {
+  // 数据相关
+  data, // 表格数据
+  loading, // 加载中状态
+  error, // 数据加载错误状态
+  hasData, // 是否有数据
+  // isEmpty, // 数据是否为空
 
-  // 模拟网络请求完成后加载数据
-  // onMounted(async () => {
-  //   // 等待模拟的网络请求完成
-  //   await simulateNetworkRequest()
-  //   await fetchData({ name: 'ricky', phone: 19388828388 })
-  // })
+  // 分页相关
+  pagination, // 分页信息
+  // paginationMobile, // 移动端分页配置
+  handleSizeChange, // 分页大小变化处理
+  handleCurrentChange, // 当前页变化处理
 
-  /**
-   * 使用 useTable Hook 管理表格数据
-   * 提供完整的表格解决方案，包括数据获取、缓存、分页、搜索等功能
-   */
-  const {
-    // 数据相关
-    data, // 表格数据
-    loading, // 加载中状态
-    error, // 数据加载错误状态
-    hasData, // 是否有数据
-    // isEmpty, // 数据是否为空
+  // 搜索相关
+  searchParams, // 搜索参数
+  replaceSearchParams, // 替换搜索参数
+  resetSearchParams, // 重置搜索参数
 
-    // 分页相关
-    pagination, // 分页信息
-    // paginationMobile, // 移动端分页配置
-    handleSizeChange, // 分页大小变化处理
-    handleCurrentChange, // 当前页变化处理
+  // 数据操作
+  // fetchData, // 手动加载数据的方法，可用于等待其他请求完成后调用，immediate 为 false 时使用
+  getData, // 获取数据
+  getDataDebounced, // 获取数据（防抖）
+  clearData, // 清空数据
 
-    // 搜索相关
-    searchParams, // 搜索参数
-    replaceSearchParams, // 替换搜索参数
-    resetSearchParams, // 重置搜索参数
+  // 刷新策略
+  refreshData, // 全量刷新：清空所有缓存，重新获取数据（适用于手动刷新按钮）
+  refreshSoft, // 轻量刷新：仅清空当前搜索条件的缓存，保持分页状态（适用于定时刷新）
+  refreshCreate, // 新增后刷新：回到第一页并清空分页缓存（适用于新增数据后）
+  refreshUpdate, // 更新后刷新：保持当前页，仅清空当前搜索缓存（适用于更新数据后）
+  refreshRemove, // 删除后刷新：智能处理页码，避免空页面（适用于删除数据后）
 
-    // 数据操作
-    // fetchData, // 手动加载数据的方法，可用于等待其他请求完成后调用，immediate 为 false 时使用
-    getData, // 获取数据
-    getDataDebounced, // 获取数据（防抖）
-    clearData, // 清空数据
+  // 缓存控制
+  cacheInfo, // 缓存统计信息
+  clearCache, // 清除缓存，根据不同的业务场景选择性地清理缓存
+  // 支持4种清理策略
+  // clearCache(CacheInvalidationStrategy.CLEAR_ALL, '手动刷新')     // 清空所有缓存
+  // clearCache(CacheInvalidationStrategy.CLEAR_CURRENT, '搜索数据') // 只清空当前搜索条件的缓存
+  // clearCache(CacheInvalidationStrategy.CLEAR_PAGINATION, '新增数据') // 清空分页相关缓存
+  // clearCache(CacheInvalidationStrategy.KEEP_ALL, '保持缓存')      // 不清理任何缓存
+  clearExpiredCache, // 清理已过期的缓存，释放内存空间
 
-    // 刷新策略
-    refreshData, // 全量刷新：清空所有缓存，重新获取数据（适用于手动刷新按钮）
-    refreshSoft, // 轻量刷新：仅清空当前搜索条件的缓存，保持分页状态（适用于定时刷新）
-    refreshCreate, // 新增后刷新：回到第一页并清空分页缓存（适用于新增数据后）
-    refreshUpdate, // 更新后刷新：保持当前页，仅清空当前搜索缓存（适用于更新数据后）
-    refreshRemove, // 删除后刷新：智能处理页码，避免空页面（适用于删除数据后）
+  // 请求控制
+  cancelRequest, // 取消当前请求
 
-    // 缓存控制
-    cacheInfo, // 缓存统计信息
-    clearCache, // 清除缓存，根据不同的业务场景选择性地清理缓存
-    // 支持4种清理策略
-    // clearCache(CacheInvalidationStrategy.CLEAR_ALL, '手动刷新')     // 清空所有缓存
-    // clearCache(CacheInvalidationStrategy.CLEAR_CURRENT, '搜索数据') // 只清空当前搜索条件的缓存
-    // clearCache(CacheInvalidationStrategy.CLEAR_PAGINATION, '新增数据') // 清空分页相关缓存
-    // clearCache(CacheInvalidationStrategy.KEEP_ALL, '保持缓存')      // 不清理任何缓存
-    clearExpiredCache, // 清理已过期的缓存，释放内存空间
+  // 动态列配置方法
+  columns, // 表格列配置
+  columnChecks, // 列显示、拖拽配置
+  addColumn, // 新增列（支持单个或批量）
+  removeColumn, // 删除列（支持单个或批量）
+  updateColumn, // 更新列（支持单个或批量）
+  toggleColumn, // 切换列显示状态（支持单个或批量）
+  resetColumns, // 重置列配置
+  reorderColumns, // 重新排序列
+  getColumnConfig, // 获取列配置
+  getAllColumns, // 获取所有列配置
+} = useTable({
+  // 核心配置
+  core: {
+    apiFn: (params) => {
+      // 在API调用前添加调试信息
+      const requestKey = JSON.stringify(params);
+      console.log("🚀 API 请求参数:", params);
+      addCacheLog(`🚀 API 请求: current=${params.current}, size=${params.size}`);
+      addCacheLog(`🔑 请求键: ${requestKey.substring(0, 100)}...`);
 
-    // 请求控制
-    cancelRequest, // 取消当前请求
+      // 记录缓存键（这里假设会被缓存）
+      updateCacheKeys(requestKey);
 
-    // 动态列配置方法
-    columns, // 表格列配置
-    columnChecks, // 列显示、拖拽配置
-    addColumn, // 新增列（支持单个或批量）
-    removeColumn, // 删除列（支持单个或批量）
-    updateColumn, // 更新列（支持单个或批量）
-    toggleColumn, // 切换列显示状态（支持单个或批量）
-    resetColumns, // 重置列配置
-    reorderColumns, // 重新排序列
-    getColumnConfig, // 获取列配置
-    getAllColumns // 获取所有列配置
-  } = useTable({
-    // 核心配置
-    core: {
-      apiFn: (params) => {
-        // 在API调用前添加调试信息
-        const requestKey = JSON.stringify(params)
-        console.log('🚀 API 请求参数:', params)
-        addCacheLog(`🚀 API 请求: current=${params.current}, size=${params.size}`)
-        addCacheLog(`🔑 请求键: ${requestKey.substring(0, 100)}...`)
-
-        // 记录缓存键（这里假设会被缓存）
-        updateCacheKeys(requestKey)
-
-        return fetchGetUserList(params)
-      },
-      apiParams: {
-        current: 1,
-        size: 20,
-        ...searchFormState.value
-      },
-      // 排除 apiParams 中的属性
-      excludeParams: ['daterange'],
-      // 自定义分页字段映射，未设置时将使用全局配置 tableConfig.ts 中的 paginationKey
-      // paginationKey: {
-      //   current: 'pageNum',
-      //   size: 'pageSize'
+      return fetchGetUserList(params);
+    },
+    apiParams: {
+      current: 1,
+      size: 20,
+      ...searchFormState.value,
+    },
+    // 排除 apiParams 中的属性
+    excludeParams: ["daterange"],
+    // 自定义分页字段映射，未设置时将使用全局配置 tableConfig.ts 中的 paginationKey
+    // paginationKey: {
+    //   current: 'pageNum',
+    //   size: 'pageSize'
+    // },
+    immediate: true, // 是否立即加载数据
+    columnsFactory: () => [
+      // {
+      //   type: 'expand',
+      //   label: '展开行',
+      //   width: 80,
+      //   formatter: (row) =>
+      //     h('div', { style: 'padding: 10px 30px' }, [
+      //       h('p', {}, '用户ID: ' + row.id),
+      //       h('p', {}, '用户名: ' + row.userName),
+      //       h('p', {}, '手机号: ' + row.userPhone),
+      //       h('p', {}, '邮箱: ' + row.userEmail),
+      //       h('p', {}, '性别: ' + row.userGender),
+      //       h('p', {}, '状态: ' + row.status),
+      //       h('p', {}, '创建日期: ' + row.createTime)
+      //     ])
       // },
-      immediate: true, // 是否立即加载数据
-      columnsFactory: () => [
-        // {
-        //   type: 'expand',
-        //   label: '展开行',
-        //   width: 80,
-        //   formatter: (row) =>
-        //     h('div', { style: 'padding: 10px 30px' }, [
-        //       h('p', {}, '用户ID: ' + row.id),
-        //       h('p', {}, '用户名: ' + row.userName),
-        //       h('p', {}, '手机号: ' + row.userPhone),
-        //       h('p', {}, '邮箱: ' + row.userEmail),
-        //       h('p', {}, '性别: ' + row.userGender),
-        //       h('p', {}, '状态: ' + row.status),
-        //       h('p', {}, '创建日期: ' + row.createTime)
-        //     ])
-        // },
-        { type: 'selection', width: 50 },
-        // { type: 'index', width: 60, label: '序号' }, // 本地序号列
-        { type: 'globalIndex', width: 60, label: '序号' }, // 全局序号列
-        {
-          prop: 'avatar',
-          label: '用户信息',
-          minWidth: 200,
-          useSlot: true,
-          useHeaderSlot: true,
-          sortable: false
-          // visible: false, // 隐藏列
-        },
-        {
-          prop: 'userGender',
-          label: '性别',
-          sortable: true,
-          formatter: (row) => row.userGender || '未知'
-        },
-        {
-          prop: 'userPhone',
-          label: '手机号',
-          useHeaderSlot: true,
-          sortable: true
-        },
-        {
-          prop: 'department',
-          label: '部门',
-          sortable: true
-        },
-        {
-          prop: 'score',
-          label: '评分',
-          useSlot: true,
-          sortable: true
-        },
-        {
-          prop: 'status',
-          label: '状态',
-          useSlot: true,
-          sortable: true
-        },
-        {
-          prop: 'operation',
-          label: '操作',
-          width: 190,
-          useSlot: true,
-          fixed: 'right'
-        }
-      ]
-    },
-
-    // 数据处理
-    transform: {
-      dataTransformer: (records) => {
-        if (!Array.isArray(records)) return []
-
-        return records.map((item, index: number) => ({
-          ...item,
-          avatar: ACCOUNT_TABLE_DATA[index % ACCOUNT_TABLE_DATA.length].avatar,
-          department: ['技术部', '产品部', '运营部', '市场部', '设计部'][
-            Math.floor(Math.random() * 5)
-          ],
-          score: Math.floor(Math.random() * 5) + 1,
-          status: ['1', '2', '3', '4'][Math.floor(Math.random() * 4)]
-        }))
-      }
-      // 自定义响应适配器，处理后端特殊的返回格式
-      // responseAdapter: (data) => {
-      //   const { list, total, pageNum, pageSize } = data
-      //   return {
-      //     records: list,
-      //     total: total,
-      //     current: pageNum,
-      //     size: pageSize
-      //   }
-      // }
-    },
-
-    // 性能优化
-    performance: {
-      enableCache: true, // 开启缓存
-      cacheTime: 5 * 60 * 1000, // 5分钟
-      debounceTime: 300,
-      maxCacheSize: 100
-    },
-
-    // 生命周期钩子
-    hooks: {
-      onSuccess: (data, response) => {
-        console.log('📊 响应详情:', response)
-        addCacheLog(`✅ 网络请求成功: ${data.length} 条数据`)
-        addCacheLog(
-          `📝 响应信息: total=${response.total}, current=${response.current}, size=${response.size}`
-        )
+      { type: "selection", width: 50 },
+      // { type: 'index', width: 60, label: '序号' }, // 本地序号列
+      { type: "globalIndex", width: 60, label: "序号" }, // 全局序号列
+      {
+        prop: "avatar",
+        label: "用户信息",
+        minWidth: 200,
+        useSlot: true,
+        useHeaderSlot: true,
+        sortable: false,
+        // visible: false, // 隐藏列
       },
-      onError: (error) => {
-        console.error('❌ 数据加载失败:', error)
-        addCacheLog(`❌ 请求失败: ${error.message}`)
-        ElMessage.error(error.message)
+      {
+        prop: "userGender",
+        label: "性别",
+        sortable: true,
+        formatter: (row) => row.userGender || "未知",
       },
-      onCacheHit: (data, response) => {
-        console.log('🎯 缓存命中:', data.length, '条')
-        console.log('🔑 缓存来源:', response)
-        addCacheLog(
-          `🎯 缓存命中: ${data.length} 条数据 (current=${response.current}, size=${response.size})`
-        )
-        ElMessage.info('数据来自缓存')
+      {
+        prop: "userPhone",
+        label: "手机号",
+        useHeaderSlot: true,
+        sortable: true,
       },
-      resetFormCallback: () => {
-        console.log('🔄 表单已重置')
-        addCacheLog('🔄 表单已重置')
-      }
+      {
+        prop: "department",
+        label: "部门",
+        sortable: true,
+      },
+      {
+        prop: "score",
+        label: "评分",
+        useSlot: true,
+        sortable: true,
+      },
+      {
+        prop: "status",
+        label: "状态",
+        useSlot: true,
+        sortable: true,
+      },
+      {
+        prop: "operation",
+        label: "操作",
+        width: 190,
+        useSlot: true,
+        fixed: "right",
+      },
+    ],
+  },
+
+  // 数据处理
+  transform: {
+    dataTransformer: (records) => {
+      if (!Array.isArray(records)) return [];
+
+      return records.map((item, index: number) => ({
+        ...item,
+        avatar: ACCOUNT_TABLE_DATA[index % ACCOUNT_TABLE_DATA.length].avatar,
+        department: ["技术部", "产品部", "运营部", "市场部", "设计部"][
+          Math.floor(Math.random() * 5)
+        ],
+        score: Math.floor(Math.random() * 5) + 1,
+        status: ["1", "2", "3", "4"][Math.floor(Math.random() * 4)],
+      }));
     },
+    // 自定义响应适配器，处理后端特殊的返回格式
+    // responseAdapter: (data) => {
+    //   const { list, total, pageNum, pageSize } = data
+    //   return {
+    //     records: list,
+    //     total: total,
+    //     current: pageNum,
+    //     size: pageSize
+    //   }
+    // }
+  },
 
-    // 调试配置
-    debug: {
-      enableLog: true,
-      logLevel: 'info'
-    }
-  })
+  // 性能优化
+  performance: {
+    enableCache: true, // 开启缓存
+    cacheTime: 5 * 60 * 1000, // 5分钟
+    debounceTime: 300,
+    maxCacheSize: 100,
+  },
 
-  // 事件处理函数
-  const handleSelectionChange = (selection: UserListItem[]) => {
-    selectedRows.value = selection
-    console.log('选择变更:', selection)
+  // 生命周期钩子
+  hooks: {
+    onSuccess: (data, response) => {
+      console.log("📊 响应详情:", response);
+      addCacheLog(`✅ 网络请求成功: ${data.length} 条数据`);
+      addCacheLog(
+        `📝 响应信息: total=${response.total}, current=${response.current}, size=${response.size}`
+      );
+    },
+    onError: (error) => {
+      console.error("❌ 数据加载失败:", error);
+      addCacheLog(`❌ 请求失败: ${error.message}`);
+      ElMessage.error(error.message);
+    },
+    onCacheHit: (data, response) => {
+      console.log("🎯 缓存命中:", data.length, "条");
+      console.log("🔑 缓存来源:", response);
+      addCacheLog(
+        `🎯 缓存命中: ${data.length} 条数据 (current=${response.current}, size=${response.size})`
+      );
+      ElMessage.info("数据来自缓存");
+    },
+    resetFormCallback: () => {
+      console.log("🔄 表单已重置");
+      addCacheLog("🔄 表单已重置");
+    },
+  },
+
+  // 调试配置
+  debug: {
+    enableLog: true,
+    logLevel: "info",
+  },
+});
+
+// 事件处理函数
+const handleSelectionChange = (selection: UserListItem[]) => {
+  selectedRows.value = selection;
+  console.log("选择变更:", selection);
+};
+
+const handleRowClick = (row: UserListItem) => {
+  console.log("行点击:", row);
+  logEvent("行点击", `点击了用户: ${row.userName}`);
+};
+
+/**
+ * 表头点击事件处理
+ * @param column 列信息
+ */
+const handleHeaderClick = (column: { label: string; property: string }) => {
+  console.log("表头点击:", column);
+  logEvent("表头点击", `点击了 ${column.label} 列表头`);
+};
+
+/**
+ * 排序信息类型
+ */
+interface SortInfo {
+  prop: string;
+  order: "ascending" | "descending" | null;
+}
+
+/**
+ * 排序变更事件处理
+ * @param sortInfo 排序信息
+ */
+const handleSortChange = (sortInfo: SortInfo) => {
+  console.log("排序事件:", sortInfo);
+  console.log("排序字段:", sortInfo.prop);
+  console.log("排序方向:", sortInfo.order);
+  logEvent("排序变更", `字段: ${sortInfo.prop}, 方向: ${sortInfo.order}`);
+};
+
+// 事件日志记录
+const logEvent = (type: string, message: string) => {
+  if (!eventDemoEnabled.value) return;
+
+  const time = new Date().toLocaleTimeString();
+  eventLogs.value.unshift({ type, message, time });
+
+  // 限制日志数量
+  if (eventLogs.value.length > 20) {
+    eventLogs.value = eventLogs.value.slice(0, 20);
   }
+};
 
-  const handleRowClick = (row: UserListItem) => {
-    console.log('行点击:', row)
-    logEvent('行点击', `点击了用户: ${row.userName}`)
+// 获取事件类型样式
+const getEventType = (type: string): "primary" | "success" | "warning" | "info" | "danger" => {
+  const typeMap: Record<string, "primary" | "success" | "warning" | "info" | "danger"> = {
+    行点击: "primary",
+    行双击: "success",
+    行右键: "warning",
+    单元格点击: "info",
+    单元格双击: "success",
+    表头点击: "primary",
+    选择变更: "warning",
+    排序变更: "success",
+  };
+  return typeMap[type] || "info";
+};
+
+// 演示功能方法
+const toggleEventDemo = () => {
+  eventDemoEnabled.value = !eventDemoEnabled.value;
+  if (eventDemoEnabled.value) {
+    ElMessage.success("事件监听已开启，请与表格交互查看效果");
+  } else {
+    ElMessage.info("事件监听已关闭");
   }
+};
 
-  /**
-   * 表头点击事件处理
-   * @param column 列信息
-   */
-  const handleHeaderClick = (column: { label: string; property: string }) => {
-    console.log('表头点击:', column)
-    logEvent('表头点击', `点击了 ${column.label} 列表头`)
+const clearEventLogs = () => {
+  eventLogs.value = [];
+  ElMessage.info("事件日志已清空");
+};
+
+const handleScrollToTop = () => {
+  tableRef.value?.scrollToTop();
+};
+
+const handleScrollToPosition = () => {
+  tableRef.value?.elTableRef.setScrollTop(200);
+};
+
+const handleToggleSelection = () => {
+  if (selectedRows.value.length === 0) {
+    tableRef.value?.elTableRef.toggleAllSelection();
+    ElMessage.info("已全选");
+  } else {
+    tableRef.value?.elTableRef.clearSelection();
+    ElMessage.info("已取消全选");
   }
+};
 
-  /**
-   * 排序信息类型
-   */
-  interface SortInfo {
-    prop: string
-    order: 'ascending' | 'descending' | null
-  }
+const handleGetTableInfo = () => {
+  const info = {
+    数据条数: data.value.length,
+    选中条数: selectedRows.value.length,
+    列数: columns?.value?.length ?? 0,
+    当前页: pagination.current,
+    每页大小: pagination.size,
+    总条数: pagination.total,
+  };
 
-  /**
-   * 排序变更事件处理
-   * @param sortInfo 排序信息
-   */
-  const handleSortChange = (sortInfo: SortInfo) => {
-    console.log('排序事件:', sortInfo)
-    console.log('排序字段:', sortInfo.prop)
-    console.log('排序方向:', sortInfo.order)
-    logEvent('排序变更', `字段: ${sortInfo.prop}, 方向: ${sortInfo.order}`)
-  }
+  console.log("表格信息:", info);
+  ElMessage.info(`表格信息已输出到控制台，当前 ${info.数据条数} 条数据`);
+};
 
-  // 事件日志记录
-  const logEvent = (type: string, message: string) => {
-    if (!eventDemoEnabled.value) return
+const handleSearch = async () => {
+  await searchBarRef.value.validate();
 
-    const time = new Date().toLocaleTimeString()
-    eventLogs.value.unshift({ type, message, time })
+  console.log("搜索参数:", searchFormState.value);
+  replaceSearchParams(buildSearchParams(searchFormState.value));
+  getData();
+};
 
-    // 限制日志数量
-    if (eventLogs.value.length > 20) {
-      eventLogs.value = eventLogs.value.slice(0, 20)
-    }
-  }
+const handleReset = () => {
+  addCacheLog("🔄 重置搜索");
+  // 重置搜索表单状态
+  // searchFormState.value = { ...defaultFilter.value }
+  resetSearchParams();
+};
 
-  // 获取事件类型样式
-  const getEventType = (type: string): 'primary' | 'success' | 'warning' | 'info' | 'danger' => {
-    const typeMap: Record<string, 'primary' | 'success' | 'warning' | 'info' | 'danger'> = {
-      行点击: 'primary',
-      行双击: 'success',
-      行右键: 'warning',
-      单元格点击: 'info',
-      单元格双击: 'success',
-      表头点击: 'primary',
-      选择变更: 'warning',
-      排序变更: 'success'
-    }
-    return typeMap[type] || 'info'
-  }
+const handlePhoneSearch = (value: string) => {
+  searchFormState.value.phone = value;
+  replaceSearchParams(buildSearchParams(searchFormState.value));
+  requestParams.value = { ...searchParams };
+  addCacheLog(`📱 手机号搜索: ${value}`);
+  getDataDebounced();
+};
 
-  // 演示功能方法
-  const toggleEventDemo = () => {
-    eventDemoEnabled.value = !eventDemoEnabled.value
-    if (eventDemoEnabled.value) {
-      ElMessage.success('事件监听已开启，请与表格交互查看效果')
-    } else {
-      ElMessage.info('事件监听已关闭')
-    }
-  }
+const handleRefresh = () => {
+  addCacheLog("🔄 手动刷新");
+  refreshData();
+};
 
-  const clearEventLogs = () => {
-    eventLogs.value = []
-    ElMessage.info('事件日志已清空')
-  }
+// CRUD 操作
+const handleAdd = () => {
+  ElMessage.success("新增用户成功");
+  refreshCreate();
+};
 
-  const handleScrollToTop = () => {
-    tableRef.value?.scrollToTop()
-  }
+const handleEdit = (row: UserListItem) => {
+  ElMessage.success(`编辑用户 ${row.userName} 成功`);
+  setTimeout(() => {
+    refreshUpdate();
+  }, 1000);
+};
 
-  const handleScrollToPosition = () => {
-    tableRef.value?.elTableRef.setScrollTop(200)
-  }
+const handleDelete = async (row: UserListItem) => {
+  try {
+    await ElMessageBox.confirm(`确定要删除用户 ${row.userName} 吗？`, "警告", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    });
 
-  const handleToggleSelection = () => {
-    if (selectedRows.value.length === 0) {
-      tableRef.value?.elTableRef.toggleAllSelection()
-      ElMessage.info('已全选')
-    } else {
-      tableRef.value?.elTableRef.clearSelection()
-      ElMessage.info('已取消全选')
-    }
-  }
-
-  const handleGetTableInfo = () => {
-    const info = {
-      数据条数: data.value.length,
-      选中条数: selectedRows.value.length,
-      列数: columns?.value?.length ?? 0,
-      当前页: pagination.current,
-      每页大小: pagination.size,
-      总条数: pagination.total
-    }
-
-    console.log('表格信息:', info)
-    ElMessage.info(`表格信息已输出到控制台，当前 ${info.数据条数} 条数据`)
-  }
-
-  const handleSearch = async () => {
-    await searchBarRef.value.validate()
-
-    console.log('搜索参数:', searchFormState.value)
-    replaceSearchParams(buildSearchParams(searchFormState.value))
-    getData()
-  }
-
-  const handleReset = () => {
-    addCacheLog('🔄 重置搜索')
-    // 重置搜索表单状态
-    // searchFormState.value = { ...defaultFilter.value }
-    resetSearchParams()
-  }
-
-  const handlePhoneSearch = (value: string) => {
-    searchFormState.value.phone = value
-    replaceSearchParams(buildSearchParams(searchFormState.value))
-    requestParams.value = { ...searchParams }
-    addCacheLog(`📱 手机号搜索: ${value}`)
-    getDataDebounced()
-  }
-
-  const handleRefresh = () => {
-    addCacheLog('🔄 手动刷新')
-    refreshData()
-  }
-
-  // CRUD 操作
-  const handleAdd = () => {
-    ElMessage.success('新增用户成功')
-    refreshCreate()
-  }
-
-  const handleEdit = (row: UserListItem) => {
-    ElMessage.success(`编辑用户 ${row.userName} 成功`)
+    ElMessage.success("删除成功");
     setTimeout(() => {
-      refreshUpdate()
-    }, 1000)
+      refreshRemove();
+    }, 1000);
+  } catch {
+    ElMessage.info("已取消删除");
   }
+};
 
-  const handleDelete = async (row: UserListItem) => {
-    try {
-      await ElMessageBox.confirm(`确定要删除用户 ${row.userName} 吗？`, '警告', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      })
+const handleView = (row: UserListItem) => {
+  ElMessage.info(`查看用户 ${row.userName}`);
+};
 
-      ElMessage.success('删除成功')
-      setTimeout(() => {
-        refreshRemove()
-      }, 1000)
-    } catch {
-      ElMessage.info('已取消删除')
+const handleBatchDelete = async () => {
+  try {
+    await ElMessageBox.confirm(`确定要删除选中的 ${selectedRows.value.length} 个用户吗？`, "警告", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    });
+
+    ElMessage.success(`批量删除 ${selectedRows.value.length} 个用户成功`);
+    selectedRows.value = [];
+    setTimeout(() => {
+      refreshRemove();
+    }, 1000);
+  } catch {
+    ElMessage.info("已取消删除");
+  }
+};
+
+// 导入导出
+const handleExportSuccess = (filename: string, count: number) => {
+  ElMessage.success(`导出 ${count} 条数据成功`);
+};
+
+/**
+ * Excel 导入成功处理
+ * @param data 导入的数据数组
+ */
+const handleImportSuccess = (data: Record<string, any>[]) => {
+  ElMessage.success(`导入 ${data.length} 条数据成功`);
+  refreshCreate();
+};
+
+const handleImportError = (error: Error) => {
+  ElMessage.error(`导入失败：${error.message}`);
+};
+
+// 调试功能
+const handleClearCache = () => {
+  clearCache(CacheInvalidationStrategy.CLEAR_ALL, "手动清空");
+  cacheKeys.value = []; // 清空缓存键列表
+  addCacheLog("🗑️ 手动清空所有缓存");
+  ElMessage.success("缓存已清空");
+};
+
+const handleCleanExpiredCache = () => {
+  const count = clearExpiredCache();
+  addCacheLog(`🧹 清理了 ${count} 条过期缓存`);
+  ElMessage.info(`清理了 ${count} 条过期缓存`);
+};
+
+const handleCancelRequest = () => {
+  cancelRequest();
+  addCacheLog("❌ 取消当前请求");
+  ElMessage.info("请求已取消");
+};
+
+const handleClearData = () => {
+  clearData();
+  addCacheLog("🗑️ 清空所有数据");
+  ElMessage.info("数据已清空");
+};
+
+const handleTestCache = () => {
+  // 模拟快速切换页面来测试缓存
+  const testPages = [1, 2, 3, 2, 1]; // 测试页面序列
+
+  ElMessage.info("开始缓存测试...");
+  addCacheLog("🧪 开始缓存测试");
+
+  let index = 0;
+  const testInterval = setInterval(() => {
+    if (index >= testPages.length) {
+      clearInterval(testInterval);
+      addCacheLog("✅ 缓存测试完成");
+      ElMessage.success("缓存测试完成！观察缓存统计的变化");
+      return;
+    }
+
+    const page = testPages[index];
+    addCacheLog(`📄 测试切换到第 ${page} 页`);
+    // 更新请求参数
+    requestParams.value = { ...requestParams.value, current: page };
+
+    // 切换到测试页面
+    handleCurrentChange(page);
+    index++;
+  }, 1000);
+};
+
+/**
+ * 添加缓存调试日志
+ * @param message 日志消息
+ */
+const addCacheLog = (message: string): void => {
+  const timestamp = new Date().toLocaleTimeString();
+  cacheDebugLogs.value.unshift(`[${timestamp}] ${message}`);
+  if (cacheDebugLogs.value.length > 20) {
+    cacheDebugLogs.value = cacheDebugLogs.value.slice(0, 20);
+  }
+};
+
+/**
+ * 更新缓存键列表
+ * @param key 缓存键
+ * @param operation 操作类型
+ */
+const updateCacheKeys = (key: string, operation: "add" | "remove" = "add"): void => {
+  if (operation === "add" && !cacheKeys.value.includes(key)) {
+    cacheKeys.value.push(key);
+    addCacheLog(`新增缓存键: ${getCacheKeySummary(key)}`);
+  } else if (operation === "remove") {
+    const index = cacheKeys.value.indexOf(key);
+    if (index > -1) {
+      cacheKeys.value.splice(index, 1);
+      addCacheLog(`移除缓存键: ${getCacheKeySummary(key)}`);
     }
   }
+};
 
-  const handleView = (row: UserListItem) => {
-    ElMessage.info(`查看用户 ${row.userName}`)
+/**
+ * 获取缓存键摘要信息
+ * @param key 缓存键
+ * @returns 缓存键摘要
+ */
+const getCacheKeySummary = (key: string): string => {
+  try {
+    const params = JSON.parse(key);
+    return `页码: ${params.current || 1}, 大小: ${params.size || 20}${params.name ? ", 名称: " + params.name : ""}${params.status ? ", 状态: " + params.status : ""}`;
+  } catch {
+    return "无效的缓存键";
+  }
+};
+
+/**
+ * 强制刷新缓存信息
+ */
+const forceRefreshCacheInfo = (): void => {
+  const currentStats = cacheInfo.value;
+  addCacheLog(`缓存信息刷新: ${currentStats.total} 条缓存`);
+
+  if (currentStats.total === 0) {
+    cacheKeys.value = [];
   }
 
-  const handleBatchDelete = async () => {
-    try {
-      await ElMessageBox.confirm(
-        `确定要删除选中的 ${selectedRows.value.length} 个用户吗？`,
-        '警告',
-        {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
+  nextTick(() => {
+    console.log("当前缓存统计:", cacheInfo.value);
+  });
+};
+
+// 监听分页和搜索状态变化
+watch(
+  () => [pagination.current, pagination.size, searchFormState.value],
+  ([current, size, search]) => {
+    requestParams.value = {
+      ...(search as any),
+      current,
+      size,
+    };
+  },
+  { deep: true, immediate: true }
+);
+
+/**
+ * 处理动态列配置命令
+ */
+const handleColumnCommand = (command: string): void => {
+  switch (command) {
+    case "addColumn": {
+      // 新增单个列
+      addColumn?.({
+        prop: "remark",
+        label: "备注",
+        width: 150,
+        formatter: () => h("span", { style: "color: #999" }, "暂无备注"),
+      });
+      ElMessage.success('已新增"备注"列');
+      break;
+    }
+
+    case "batchAddColumns": {
+      // 批量新增多个列
+      addColumn?.(
+        [
+          {
+            prop: "remark",
+            label: "备注",
+            width: 150,
+            formatter: () => h("span", { style: "color: #999" }, "暂无备注"),
+          },
+          {
+            prop: "tags",
+            label: "标签",
+            width: 120,
+            formatter: () => h("span", { style: "color: #67c23a" }, "新用户"),
+          },
+        ],
+        5
+      ); // 在第5个位置插入
+      ElMessage.success('已批量新增"备注"和"标签"列');
+      break;
+    }
+
+    case "toggleColumn": {
+      // 切换单个列显示/隐藏
+      if (getColumnConfig?.("userPhone")) {
+        toggleColumn?.("userPhone");
+        ElMessage.success("已切换手机号列显示状态");
+      }
+      break;
+    }
+
+    case "batchToggleColumns": {
+      // 批量切换多个列显示/隐藏
+      toggleColumn?.(["userGender", "userPhone"]);
+      ElMessage.success("已批量切换性别和手机号列显示状态");
+      break;
+    }
+
+    case "removeColumn": {
+      // 删除单个列
+      removeColumn?.("status");
+      ElMessage.success("已删除状态列");
+      break;
+    }
+
+    case "batchRemoveColumns": {
+      // 批量删除多个列
+      removeColumn?.(["status", "score"]);
+      ElMessage.success("已批量删除状态和评分列");
+      break;
+    }
+
+    case "updateColumn": {
+      // 更新单个列
+      updateColumn?.("userPhone", {
+        label: "联系电话",
+        width: 140,
+      });
+      ElMessage.success('手机号列已更新为"联系电话"');
+      break;
+    }
+
+    case "batchUpdateColumns": {
+      // 批量更新多个列（新语法）
+      updateColumn?.([
+        { prop: "userGender", updates: { width: 200, label: "性别-已更新", sortable: false } },
+        { prop: "userPhone", updates: { width: 200, label: "手机号-已更新", sortable: false } },
+      ]);
+      ElMessage.success("已批量更新性别和手机号列");
+      break;
+    }
+
+    case "reorderColumns": {
+      // 交换列位置
+      const allCols = getAllColumns?.();
+      if (allCols) {
+        const genderIndex = allCols.findIndex((col) => getColumnKey(col) === "userGender");
+        const phoneIndex = allCols.findIndex((col) => getColumnKey(col) === "userPhone");
+
+        if (genderIndex !== -1 && phoneIndex !== -1) {
+          reorderColumns?.(genderIndex, phoneIndex);
+          ElMessage.success("已交换性别和手机号列位置");
         }
-      )
-
-      ElMessage.success(`批量删除 ${selectedRows.value.length} 个用户成功`)
-      selectedRows.value = []
-      setTimeout(() => {
-        refreshRemove()
-      }, 1000)
-    } catch {
-      ElMessage.info('已取消删除')
-    }
-  }
-
-  // 导入导出
-  const handleExportSuccess = (filename: string, count: number) => {
-    ElMessage.success(`导出 ${count} 条数据成功`)
-  }
-
-  /**
-   * Excel 导入成功处理
-   * @param data 导入的数据数组
-   */
-  const handleImportSuccess = (data: Record<string, any>[]) => {
-    ElMessage.success(`导入 ${data.length} 条数据成功`)
-    refreshCreate()
-  }
-
-  const handleImportError = (error: Error) => {
-    ElMessage.error(`导入失败：${error.message}`)
-  }
-
-  // 调试功能
-  const handleClearCache = () => {
-    clearCache(CacheInvalidationStrategy.CLEAR_ALL, '手动清空')
-    cacheKeys.value = [] // 清空缓存键列表
-    addCacheLog('🗑️ 手动清空所有缓存')
-    ElMessage.success('缓存已清空')
-  }
-
-  const handleCleanExpiredCache = () => {
-    const count = clearExpiredCache()
-    addCacheLog(`🧹 清理了 ${count} 条过期缓存`)
-    ElMessage.info(`清理了 ${count} 条过期缓存`)
-  }
-
-  const handleCancelRequest = () => {
-    cancelRequest()
-    addCacheLog('❌ 取消当前请求')
-    ElMessage.info('请求已取消')
-  }
-
-  const handleClearData = () => {
-    clearData()
-    addCacheLog('🗑️ 清空所有数据')
-    ElMessage.info('数据已清空')
-  }
-
-  const handleTestCache = () => {
-    // 模拟快速切换页面来测试缓存
-    const testPages = [1, 2, 3, 2, 1] // 测试页面序列
-
-    ElMessage.info('开始缓存测试...')
-    addCacheLog('🧪 开始缓存测试')
-
-    let index = 0
-    const testInterval = setInterval(() => {
-      if (index >= testPages.length) {
-        clearInterval(testInterval)
-        addCacheLog('✅ 缓存测试完成')
-        ElMessage.success('缓存测试完成！观察缓存统计的变化')
-        return
       }
-
-      const page = testPages[index]
-      addCacheLog(`📄 测试切换到第 ${page} 页`)
-      // 更新请求参数
-      requestParams.value = { ...requestParams.value, current: page }
-
-      // 切换到测试页面
-      handleCurrentChange(page)
-      index++
-    }, 1000)
-  }
-
-  /**
-   * 添加缓存调试日志
-   * @param message 日志消息
-   */
-  const addCacheLog = (message: string): void => {
-    const timestamp = new Date().toLocaleTimeString()
-    cacheDebugLogs.value.unshift(`[${timestamp}] ${message}`)
-    if (cacheDebugLogs.value.length > 20) {
-      cacheDebugLogs.value = cacheDebugLogs.value.slice(0, 20)
-    }
-  }
-
-  /**
-   * 更新缓存键列表
-   * @param key 缓存键
-   * @param operation 操作类型
-   */
-  const updateCacheKeys = (key: string, operation: 'add' | 'remove' = 'add'): void => {
-    if (operation === 'add' && !cacheKeys.value.includes(key)) {
-      cacheKeys.value.push(key)
-      addCacheLog(`新增缓存键: ${getCacheKeySummary(key)}`)
-    } else if (operation === 'remove') {
-      const index = cacheKeys.value.indexOf(key)
-      if (index > -1) {
-        cacheKeys.value.splice(index, 1)
-        addCacheLog(`移除缓存键: ${getCacheKeySummary(key)}`)
-      }
-    }
-  }
-
-  /**
-   * 获取缓存键摘要信息
-   * @param key 缓存键
-   * @returns 缓存键摘要
-   */
-  const getCacheKeySummary = (key: string): string => {
-    try {
-      const params = JSON.parse(key)
-      return `页码: ${params.current || 1}, 大小: ${params.size || 20}${params.name ? ', 名称: ' + params.name : ''}${params.status ? ', 状态: ' + params.status : ''}`
-    } catch {
-      return '无效的缓存键'
-    }
-  }
-
-  /**
-   * 强制刷新缓存信息
-   */
-  const forceRefreshCacheInfo = (): void => {
-    const currentStats = cacheInfo.value
-    addCacheLog(`缓存信息刷新: ${currentStats.total} 条缓存`)
-
-    if (currentStats.total === 0) {
-      cacheKeys.value = []
+      break;
     }
 
-    nextTick(() => {
-      console.log('当前缓存统计:', cacheInfo.value)
-    })
-  }
-
-  // 监听分页和搜索状态变化
-  watch(
-    () => [pagination.current, pagination.size, searchFormState.value],
-    ([current, size, search]) => {
-      requestParams.value = {
-        ...(search as any),
-        current,
-        size
-      }
-    },
-    { deep: true, immediate: true }
-  )
-
-  /**
-   * 处理动态列配置命令
-   */
-  const handleColumnCommand = (command: string): void => {
-    switch (command) {
-      case 'addColumn': {
-        // 新增单个列
-        addColumn?.({
-          prop: 'remark',
-          label: '备注',
-          width: 150,
-          formatter: () => h('span', { style: 'color: #999' }, '暂无备注')
-        })
-        ElMessage.success('已新增"备注"列')
-        break
-      }
-
-      case 'batchAddColumns': {
-        // 批量新增多个列
-        addColumn?.(
-          [
-            {
-              prop: 'remark',
-              label: '备注',
-              width: 150,
-              formatter: () => h('span', { style: 'color: #999' }, '暂无备注')
-            },
-            {
-              prop: 'tags',
-              label: '标签',
-              width: 120,
-              formatter: () => h('span', { style: 'color: #67c23a' }, '新用户')
-            }
-          ],
-          5
-        ) // 在第5个位置插入
-        ElMessage.success('已批量新增"备注"和"标签"列')
-        break
-      }
-
-      case 'toggleColumn': {
-        // 切换单个列显示/隐藏
-        if (getColumnConfig?.('userPhone')) {
-          toggleColumn?.('userPhone')
-          ElMessage.success('已切换手机号列显示状态')
-        }
-        break
-      }
-
-      case 'batchToggleColumns': {
-        // 批量切换多个列显示/隐藏
-        toggleColumn?.(['userGender', 'userPhone'])
-        ElMessage.success('已批量切换性别和手机号列显示状态')
-        break
-      }
-
-      case 'removeColumn': {
-        // 删除单个列
-        removeColumn?.('status')
-        ElMessage.success('已删除状态列')
-        break
-      }
-
-      case 'batchRemoveColumns': {
-        // 批量删除多个列
-        removeColumn?.(['status', 'score'])
-        ElMessage.success('已批量删除状态和评分列')
-        break
-      }
-
-      case 'updateColumn': {
-        // 更新单个列
-        updateColumn?.('userPhone', {
-          label: '联系电话',
-          width: 140
-        })
-        ElMessage.success('手机号列已更新为"联系电话"')
-        break
-      }
-
-      case 'batchUpdateColumns': {
-        // 批量更新多个列（新语法）
-        updateColumn?.([
-          { prop: 'userGender', updates: { width: 200, label: '性别-已更新', sortable: false } },
-          { prop: 'userPhone', updates: { width: 200, label: '手机号-已更新', sortable: false } }
-        ])
-        ElMessage.success('已批量更新性别和手机号列')
-        break
-      }
-
-      case 'reorderColumns': {
-        // 交换列位置
-        const allCols = getAllColumns?.()
-        if (allCols) {
-          const genderIndex = allCols.findIndex((col) => getColumnKey(col) === 'userGender')
-          const phoneIndex = allCols.findIndex((col) => getColumnKey(col) === 'userPhone')
-
-          if (genderIndex !== -1 && phoneIndex !== -1) {
-            reorderColumns?.(genderIndex, phoneIndex)
-            ElMessage.success('已交换性别和手机号列位置')
-          }
-        }
-        break
-      }
-
-      case 'resetColumns': {
-        // 重置所有列配置
-        resetColumns?.()
-        ElMessage.success('已重置所有列配置')
-        break
-      }
-
-      default:
-        console.warn('未知的列配置命令:', command)
+    case "resetColumns": {
+      // 重置所有列配置
+      resetColumns?.();
+      ElMessage.success("已重置所有列配置");
+      break;
     }
+
+    default:
+      console.warn("未知的列配置命令:", command);
   }
+};
 </script>
 
 <style scoped>
-  .user-info .el-avatar {
-    flex-shrink: 0;
-    width: 40px !important;
-    height: 40px !important;
-  }
+.user-info .el-avatar {
+  flex-shrink: 0;
+  width: 40px !important;
+  height: 40px !important;
+}
 
-  .user-info .el-avatar img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    object-position: center;
-  }
+.user-info .el-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+}
 
-  .custom-header:hover {
-    color: var(--el-color-primary-light-3);
-  }
+.custom-header:hover {
+  color: var(--el-color-primary-light-3);
+}
 
-  .demo-group .config-toggles .el-switch {
-    --el-switch-on-color: var(--el-color-primary);
-  }
+.demo-group .config-toggles .el-switch {
+  --el-switch-on-color: var(--el-color-primary);
+}
 
-  .demo-group .performance-info .el-alert {
-    --el-alert-padding: 12px;
-  }
+.demo-group .performance-info .el-alert {
+  --el-alert-padding: 12px;
+}
 </style>
diff --git a/frontend/new-web/src/views/examples/tables/tree.vue b/frontend/new-web/src/views/examples/tables/tree.vue
index 19455723..d34a30ea 100644
--- a/frontend/new-web/src/views/examples/tables/tree.vue
+++ b/frontend/new-web/src/views/examples/tables/tree.vue
@@ -27,12 +27,12 @@
           <ArtTableHeader v-model:columns="columnChecks" :loading="loading" @refresh="refreshData">
             <template #left>
               <ElSpace wrap>
-                <ElButton @click="showButtons = !showButtons" v-ripple type="primary" plain
-                  >{{ showButtons ? '收起' : '展开' }}按钮组</ElButton
-                >
-                <ElButton v-show="showButtons" v-ripple v-for="value in 12" :key="value"
-                  >表格自适应</ElButton
-                >
+                <ElButton @click="showButtons = !showButtons" v-ripple type="primary" plain>
+                  {{ showButtons ? "收起" : "展开" }}按钮组
+                </ElButton>
+                <ElButton v-show="showButtons" v-ripple v-for="value in 12" :key="value">
+                  表格自适应
+                </ElButton>
               </ElSpace>
             </template>
           </ArtTableHeader>
@@ -45,8 +45,7 @@
             :pagination="pagination"
             @pagination:size-change="handleSizeChange"
             @pagination:current-change="handleCurrentChange"
-          >
-          </ArtTable>
+          ></ArtTable>
         </ElCard>
       </div>
     </div>
@@ -54,188 +53,188 @@
 </template>
 
 <script setup lang="ts">
-  import { useTable } from '@/hooks/core/useTable'
-  import { fetchGetUserList } from '@/api/system-manage'
-  import UserSearch from '@/views/system/user/modules/user-search.vue'
+import { useTable } from "@/hooks/core/useTable";
+import { fetchGetUserList } from "@/api/system-manage";
+import UserSearch from "@/views/system/user/modules/user-search.vue";
 
-  defineOptions({ name: 'TreeTable' })
+defineOptions({ name: "TreeTable" });
 
-  const showButtons = ref(false)
+const showButtons = ref(false);
 
-  // 树形数据 - 组织架构示例
-  const treeData = ref([
-    {
-      id: 1,
-      label: '技术部',
-      children: [
-        {
-          id: 11,
-          label: '前端开发组',
-          children: [
-            { id: 111, label: 'React 团队' },
-            { id: 112, label: 'Vue 团队' },
-            { id: 113, label: '移动端团队' }
-          ]
-        },
-        {
-          id: 12,
-          label: '后端开发组',
-          children: [
-            { id: 121, label: 'Java 团队' },
-            { id: 122, label: 'Node.js 团队' },
-            { id: 123, label: 'Python 团队' }
-          ]
-        },
-        {
-          id: 13,
-          label: '测试组',
-          children: [
-            { id: 131, label: '功能测试' },
-            { id: 132, label: '自动化测试' },
-            { id: 133, label: '性能测试' }
-          ]
-        },
-        {
-          id: 14,
-          label: '运维组',
-          children: [
-            { id: 141, label: '系统运维' },
-            { id: 142, label: 'DevOps' }
-          ]
-        }
-      ]
-    },
-    {
-      id: 2,
-      label: '产品部',
-      children: [
-        {
-          id: 21,
-          label: '产品设计组',
-          children: [
-            { id: 211, label: 'UI 设计' },
-            { id: 212, label: 'UX 设计' },
-            { id: 213, label: '交互设计' }
-          ]
-        },
-        {
-          id: 22,
-          label: '产品运营组',
-          children: [
-            { id: 221, label: '用户运营' },
-            { id: 222, label: '内容运营' },
-            { id: 223, label: '活动运营' }
-          ]
-        },
-        { id: 23, label: '数据分析组' }
-      ]
-    },
-    {
-      id: 3,
-      label: '市场部',
-      children: [
-        { id: 31, label: '品牌推广组' },
-        { id: 32, label: '渠道拓展组' },
-        {
-          id: 33,
-          label: '销售组',
-          children: [
-            { id: 331, label: '企业客户' },
-            { id: 332, label: '个人客户' }
-          ]
-        }
-      ]
-    },
-    {
-      id: 4,
-      label: '行政部',
-      children: [
-        { id: 41, label: '人力资源组' },
-        { id: 42, label: '财务组' },
-        { id: 43, label: '行政后勤组' }
-      ]
-    },
-    {
-      id: 5,
-      label: '客服部',
-      children: [
-        { id: 51, label: '售前咨询' },
-        { id: 52, label: '售后支持' },
-        { id: 53, label: '客户成功' }
-      ]
-    }
-  ])
-
-  const treeProps = {
-    children: 'children',
-    label: 'label'
-  }
-
-  const handleNodeClick = (data: any) => {
-    console.log('选中节点:', data)
-    // 可以根据选中的节点更新右侧表格数据
-  }
-
-  // 表单搜索初始值
-  const defaultFilter = ref<Api.SystemManage.UserSearchParams>({
-    userName: undefined,
-    userGender: undefined,
-    userPhone: undefined,
-    userEmail: undefined,
-    status: undefined
-  })
-
-  const {
-    data,
-    columns,
-    columnChecks,
-    loading,
-    pagination,
-    refreshData,
-    handleSizeChange,
-    handleCurrentChange
-  } = useTable({
-    core: {
-      apiFn: fetchGetUserList,
-      apiParams: {
-        current: 1,
-        size: 20,
-        userName: '',
-        userPhone: '',
-        userEmail: ''
+// 树形数据 - 组织架构示例
+const treeData = ref([
+  {
+    id: 1,
+    label: "技术部",
+    children: [
+      {
+        id: 11,
+        label: "前端开发组",
+        children: [
+          { id: 111, label: "React 团队" },
+          { id: 112, label: "Vue 团队" },
+          { id: 113, label: "移动端团队" },
+        ],
       },
-      columnsFactory: () => [
-        {
-          prop: 'id',
-          label: 'ID'
-        },
-        {
-          prop: 'nickName',
-          label: '昵称'
-        },
-        {
-          prop: 'userGender',
-          label: '性别',
-          sortable: true,
-          formatter: (row) => row.userGender || '未知'
-        },
-        {
-          prop: 'userPhone',
-          label: '手机号'
-        },
-        {
-          prop: 'userEmail',
-          label: '邮箱'
-        }
-      ]
-    }
-  })
+      {
+        id: 12,
+        label: "后端开发组",
+        children: [
+          { id: 121, label: "Java 团队" },
+          { id: 122, label: "Node.js 团队" },
+          { id: 123, label: "Python 团队" },
+        ],
+      },
+      {
+        id: 13,
+        label: "测试组",
+        children: [
+          { id: 131, label: "功能测试" },
+          { id: 132, label: "自动化测试" },
+          { id: 133, label: "性能测试" },
+        ],
+      },
+      {
+        id: 14,
+        label: "运维组",
+        children: [
+          { id: 141, label: "系统运维" },
+          { id: 142, label: "DevOps" },
+        ],
+      },
+    ],
+  },
+  {
+    id: 2,
+    label: "产品部",
+    children: [
+      {
+        id: 21,
+        label: "产品设计组",
+        children: [
+          { id: 211, label: "UI 设计" },
+          { id: 212, label: "UX 设计" },
+          { id: 213, label: "交互设计" },
+        ],
+      },
+      {
+        id: 22,
+        label: "产品运营组",
+        children: [
+          { id: 221, label: "用户运营" },
+          { id: 222, label: "内容运营" },
+          { id: 223, label: "活动运营" },
+        ],
+      },
+      { id: 23, label: "数据分析组" },
+    ],
+  },
+  {
+    id: 3,
+    label: "市场部",
+    children: [
+      { id: 31, label: "品牌推广组" },
+      { id: 32, label: "渠道拓展组" },
+      {
+        id: 33,
+        label: "销售组",
+        children: [
+          { id: 331, label: "企业客户" },
+          { id: 332, label: "个人客户" },
+        ],
+      },
+    ],
+  },
+  {
+    id: 4,
+    label: "行政部",
+    children: [
+      { id: 41, label: "人力资源组" },
+      { id: 42, label: "财务组" },
+      { id: 43, label: "行政后勤组" },
+    ],
+  },
+  {
+    id: 5,
+    label: "客服部",
+    children: [
+      { id: 51, label: "售前咨询" },
+      { id: 52, label: "售后支持" },
+      { id: 53, label: "客户成功" },
+    ],
+  },
+]);
+
+const treeProps = {
+  children: "children",
+  label: "label",
+};
+
+const handleNodeClick = (data: any) => {
+  console.log("选中节点:", data);
+  // 可以根据选中的节点更新右侧表格数据
+};
+
+// 表单搜索初始值
+const defaultFilter = ref<UserSearchParams>({
+  userName: undefined,
+  userGender: undefined,
+  userPhone: undefined,
+  userEmail: undefined,
+  status: undefined,
+});
+
+const {
+  data,
+  columns,
+  columnChecks,
+  loading,
+  pagination,
+  refreshData,
+  handleSizeChange,
+  handleCurrentChange,
+} = useTable({
+  core: {
+    apiFn: fetchGetUserList,
+    apiParams: {
+      current: 1,
+      size: 20,
+      userName: "",
+      userPhone: "",
+      userEmail: "",
+    },
+    columnsFactory: () => [
+      {
+        prop: "id",
+        label: "ID",
+      },
+      {
+        prop: "nickName",
+        label: "昵称",
+      },
+      {
+        prop: "userGender",
+        label: "性别",
+        sortable: true,
+        formatter: (row) => row.userGender || "未知",
+      },
+      {
+        prop: "userPhone",
+        label: "手机号",
+      },
+      {
+        prop: "userEmail",
+        label: "邮箱",
+      },
+    ],
+  },
+});
 </script>
 
 <style scoped>
-  .tree-card :deep(.el-card__body) {
-    flex: 1;
-    min-height: 0;
-    padding: 10px 2px 10px 10px;
-  }
+.tree-card :deep(.el-card__body) {
+  flex: 1;
+  min-height: 0;
+  padding: 10px 2px 10px 10px;
+}
 </style>
diff --git a/frontend/new-web/src/views/examples/tabs/index.vue b/frontend/new-web/src/views/examples/tabs/index.vue
index 6bf62097..0c1dbf47 100644
--- a/frontend/new-web/src/views/examples/tabs/index.vue
+++ b/frontend/new-web/src/views/examples/tabs/index.vue
@@ -16,14 +16,14 @@
         <ElButton type="primary" @click="handleUpdateTabTitle" :disabled="!newTabTitle.trim()">
           修改
         </ElButton>
-        <ElButton @click="handleResetTabTitle"> 重置 </ElButton>
+        <ElButton @click="handleResetTabTitle">重置</ElButton>
       </div>
     </ElCard>
 
     <!-- 获取标签页模块 -->
     <ElCard class="mb-7.5" header="获取标签页信息">
       <div class="mb-4">
-        <p class="m-0 mb-2 text-sm text-g-600"> 当前标签页信息：{{ currentTab }} </p>
+        <p class="m-0 mb-2 text-sm text-g-600">当前标签页信息：{{ currentTab }}</p>
       </div>
       <ElRow :gutter="20">
         <ElCol :span="24">
@@ -38,11 +38,11 @@
     <ElCard class="mb-7.5" header="关闭标签页">
       <ElRow :gutter="20">
         <ElCol :span="24">
-          <ElButton type="danger" plain @click="handleCloseTab(routePath)"> 关闭当前标签 </ElButton>
+          <ElButton type="danger" plain @click="handleCloseTab(routePath)">关闭当前标签</ElButton>
           <ElButton type="warning" plain @click="handleCloseOthersTab(routePath)">
             关闭其他标签
           </ElButton>
-          <ElButton type="danger" plain @click="handleCloseAllTab"> 关闭所有标签 </ElButton>
+          <ElButton type="danger" plain @click="handleCloseAllTab">关闭所有标签</ElButton>
         </ElCol>
       </ElRow>
     </ElCard>
@@ -50,72 +50,72 @@
 </template>
 
 <script setup lang="ts">
-  import { useWorktabStore } from '@/store/modules/worktab'
-  import { WorkTab } from '@/types'
+import { useWorktabStore } from "@/store/modules/worktab.store";
+import { WorkTab } from "@/types";
 
-  defineOptions({ name: 'TabsExample' })
+defineOptions({ name: "TabsExample" });
 
-  const worktabStore = useWorktabStore()
-  const currentTab = ref<WorkTab | null>(null)
-  const newTabTitle = ref('')
-  const routePath = '/examples/tabs'
+const worktabStore = useWorktabStore();
+const currentTab = ref<WorkTab | null>(null);
+const newTabTitle = ref("");
+const routePath = "/examples/tabs";
 
-  /**
-   * 更新当前标签页标题
-   * 验证输入内容后调用 store 方法更新标题
-   */
-  const handleUpdateTabTitle = (): void => {
-    const trimmedTitle = newTabTitle.value.trim()
-    if (trimmedTitle) {
-      worktabStore.updateTabTitle(routePath, trimmedTitle)
-      ElMessage.success('标签页标题已更新')
-    }
+/**
+ * 更新当前标签页标题
+ * 验证输入内容后调用 store 方法更新标题
+ */
+const handleUpdateTabTitle = (): void => {
+  const trimmedTitle = newTabTitle.value.trim();
+  if (trimmedTitle) {
+    worktabStore.updateTabTitle(routePath, trimmedTitle);
+    ElMessage.success("标签页标题已更新");
   }
+};
 
-  /**
-   * 重置标签页标题
-   * 将标题重置为默认值并清空输入框
-   */
-  const handleResetTabTitle = (): void => {
-    worktabStore.resetTabTitle(routePath)
-    newTabTitle.value = ''
-    ElMessage.success('标签页标题已重置')
-  }
+/**
+ * 重置标签页标题
+ * 将标题重置为默认值并清空输入框
+ */
+const handleResetTabTitle = (): void => {
+  worktabStore.resetTabTitle(routePath);
+  newTabTitle.value = "";
+  ElMessage.success("标签页标题已重置");
+};
 
-  /**
-   * 获取指定路径的标签页信息
-   * @param path 标签页路径
-   */
-  const handleGetCurrentTabTitle = (path: string): void => {
-    const tab = worktabStore.getTabTitle(path)
-    if (tab) {
-      currentTab.value = tab
-      ElMessage.success('已获取标签页信息')
-    } else {
-      ElMessage.warning('未找到标签信息')
-    }
+/**
+ * 获取指定路径的标签页信息
+ * @param path 标签页路径
+ */
+const handleGetCurrentTabTitle = (path: string): void => {
+  const tab = worktabStore.getTabTitle(path);
+  if (tab) {
+    currentTab.value = tab;
+    ElMessage.success("已获取标签页信息");
+  } else {
+    ElMessage.warning("未找到标签信息");
   }
+};
 
-  /**
-   * 关闭指定路径的标签页
-   * @param path 要关闭的标签页路径
-   */
-  const handleCloseTab = (path: string): void => {
-    worktabStore.removeTab(path)
-  }
+/**
+ * 关闭指定路径的标签页
+ * @param path 要关闭的标签页路径
+ */
+const handleCloseTab = (path: string): void => {
+  worktabStore.removeTab(path);
+};
 
-  /**
-   * 关闭除指定路径外的其他所有标签页
-   * @param path 要保留的标签页路径
-   */
-  const handleCloseOthersTab = (path: string): void => {
-    worktabStore.removeOthers(path)
-  }
+/**
+ * 关闭除指定路径外的其他所有标签页
+ * @param path 要保留的标签页路径
+ */
+const handleCloseOthersTab = (path: string): void => {
+  worktabStore.removeOthers(path);
+};
 
-  /**
-   * 关闭所有标签页
-   */
-  const handleCloseAllTab = (): void => {
-    worktabStore.removeAll()
-  }
+/**
+ * 关闭所有标签页
+ */
+const handleCloseAllTab = (): void => {
+  worktabStore.removeAll();
+};
 </script>
diff --git a/frontend/new-web/src/views/exception/403/index.vue b/frontend/new-web/src/views/exception/403/index.vue
index 2756c426..439d17a9 100755
--- a/frontend/new-web/src/views/exception/403/index.vue
+++ b/frontend/new-web/src/views/exception/403/index.vue
@@ -5,12 +5,12 @@
       title: '403',
       desc: $t('exceptionPage.403'),
       btnText: $t('exceptionPage.gohome'),
-      imgUrl
+      imgUrl,
     }"
   />
 </template>
 
 <script setup lang="ts">
-  import imgUrl from '@imgs/svg/403.svg'
-  defineOptions({ name: 'Exception403' })
+import imgUrl from "@imgs/svg/403.svg";
+defineOptions({ name: "Exception403" });
 </script>
diff --git a/frontend/new-web/src/views/exception/404/index.vue b/frontend/new-web/src/views/exception/404/index.vue
index 6b64f455..b194909c 100755
--- a/frontend/new-web/src/views/exception/404/index.vue
+++ b/frontend/new-web/src/views/exception/404/index.vue
@@ -5,12 +5,12 @@
       title: '404',
       desc: $t('exceptionPage.404'),
       btnText: $t('exceptionPage.gohome'),
-      imgUrl
+      imgUrl,
     }"
   />
 </template>
 
 <script setup lang="ts">
-  import imgUrl from '@imgs/svg/404.svg'
-  defineOptions({ name: 'Exception404' })
+import imgUrl from "@imgs/svg/404.svg";
+defineOptions({ name: "Exception404" });
 </script>
diff --git a/frontend/new-web/src/views/exception/500/index.vue b/frontend/new-web/src/views/exception/500/index.vue
index 1b263775..f91f81d4 100755
--- a/frontend/new-web/src/views/exception/500/index.vue
+++ b/frontend/new-web/src/views/exception/500/index.vue
@@ -5,12 +5,12 @@
       title: '500',
       desc: $t('exceptionPage.500'),
       btnText: $t('exceptionPage.gohome'),
-      imgUrl
+      imgUrl,
     }"
   />
 </template>
 
 <script setup lang="ts">
-  import imgUrl from '@imgs/svg/500.svg'
-  defineOptions({ name: 'Exception500' })
+import imgUrl from "@imgs/svg/500.svg";
+defineOptions({ name: "Exception500" });
 </script>
diff --git a/frontend/new-web/src/views/module_agno_schema_versions/agno_schema_versions/index.vue b/frontend/new-web/src/views/module_agno_schema_versions/agno_schema_versions/index.vue
new file mode 100644
index 00000000..68794ef8
--- /dev/null
+++ b/frontend/new-web/src/views/module_agno_schema_versions/agno_schema_versions/index.vue
@@ -0,0 +1,51 @@
+<!-- Agno 知识库表结构版本（对应 DB：ai.agno_schema_versions） -->
+<template>
+  <div class="app-container">
+    <el-card shadow="never">
+      <template #header>
+        <span>Schema 版本</span>
+      </template>
+      <el-alert
+        type="info"
+        :closable="false"
+        show-icon
+        class="mb-4"
+        title="当前仓库未接入该菜单的后端列表接口；下列为占位表格列，接口就绪后可在本页接入请求逻辑。"
+      />
+      <el-table :data="tableData" border stripe style="width: 100%" v-loading="loading">
+        <template #empty>
+          <el-empty description="暂无数据（待后端提供分页列表接口）" />
+        </template>
+        <el-table-column prop="table_name" label="表名" min-width="220" show-overflow-tooltip />
+        <el-table-column prop="version" label="版本" min-width="140" show-overflow-tooltip />
+        <el-table-column prop="created_at" label="创建时间" min-width="180" show-overflow-tooltip />
+        <el-table-column prop="updated_at" label="更新时间" min-width="180" show-overflow-tooltip />
+      </el-table>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+
+defineOptions({
+  name: "AgnoSchemaVersions",
+  inheritAttrs: false,
+});
+
+/** 与 ai.agno_schema_versions 字段对齐的占位类型 */
+interface SchemaVersionRow {
+  table_name?: string;
+  version?: string;
+  created_at?: string;
+  updated_at?: string;
+}
+
+const loading = ref(false);
+const tableData = ref<SchemaVersionRow[]>([]);
+
+onMounted(() => {
+  // 后端增加 CRUD 后：在此调用分页列表 API，失败时用 ElMessage 提示即可
+  tableData.value = [];
+});
+</script>
diff --git a/frontend/new-web/src/views/module_ai/chat/components/ChatInput.vue b/frontend/new-web/src/views/module_ai/chat/components/ChatInput.vue
new file mode 100644
index 00000000..7babb10a
--- /dev/null
+++ b/frontend/new-web/src/views/module_ai/chat/components/ChatInput.vue
@@ -0,0 +1,310 @@
+<template>
+  <div class="chat-input" :class="{ 'chat-input--disabled': disabled }">
+    <div class="input-wrapper">
+      <div v-if="uploadedFiles.length > 0" class="uploaded-files">
+        <div v-for="file in uploadedFiles" :key="file.id" class="file-item">
+          <el-icon class="file-icon"><Document /></el-icon>
+          <span class="file-name">{{ file.name }}</span>
+          <el-icon class="file-remove" @click="removeFile(file.id)"><Close /></el-icon>
+        </div>
+      </div>
+      <div class="input-container">
+        <el-form>
+          <el-input
+            v-model="inputMessage"
+            type="textarea"
+            :placeholder="placeholder"
+            :disabled="disabled || sending"
+            :autosize="{ minRows: 1, maxRows: 6 }"
+            resize="none"
+            class="message-input"
+            @keydown.enter.exact.prevent="handleSend"
+            @keydown.shift.enter.exact="handleShiftEnter"
+          />
+        </el-form>
+        <div class="input-footer">
+          <div class="input-actions">
+            <el-upload
+              ref="uploadRef"
+              :auto-upload="false"
+              :show-file-list="false"
+              :on-change="handleFileChange"
+              :accept="acceptTypes"
+              :multiple="true"
+            >
+              <el-button :icon="Paperclip" class="upload-btn" circle />
+            </el-upload>
+            <el-button
+              :disabled="
+                (!inputMessage.trim() && uploadedFiles.length === 0) || disabled || sending
+              "
+              :loading="sending"
+              class="send-button"
+              type="primary"
+              circle
+              @click="handleSend"
+            >
+              <el-icon><Promotion /></el-icon>
+            </el-button>
+          </div>
+        </div>
+      </div>
+      <div class="input-hint">
+        <span>按 Enter 发送消息，Shift + Enter 换行</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { Promotion, Paperclip, Document, Close } from "@element-plus/icons-vue";
+import type { UploadFile } from "element-plus";
+import type { UploadedFile } from "@/views/module_ai/chat/types";
+
+interface Props {
+  disabled?: boolean;
+  sending?: boolean;
+  isConnected?: boolean;
+}
+
+interface Emits {
+  (e: "send", message: string, files?: UploadedFile[]): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  sending: false,
+  isConnected: true,
+});
+
+const emit = defineEmits<Emits>();
+
+const inputMessage = ref("");
+const uploadedFiles = ref<UploadedFile[]>([]);
+
+const acceptTypes = computed(() => {
+  return ".pdf,.doc,.docx,.txt,.jpg,.jpeg,.png,.gif,.mp3,.wav,.mp4,.avi,.mov";
+});
+
+const placeholder = computed(() => {
+  return props.isConnected ? "向FA助手发送消息..." : "请先连接到服务器";
+});
+
+const handleFileChange = (uploadFile: UploadFile) => {
+  const file = uploadFile.raw;
+  if (!file) return;
+
+  const maxSize = 10 * 1024 * 1024;
+  if (file.size > maxSize) {
+    alert("文件大小不能超过10MB");
+    return;
+  }
+
+  const uploadedFile: UploadedFile = {
+    id: Date.now().toString() + Math.random().toString(36).substr(2),
+    name: file.name,
+    size: file.size,
+    type: file.type,
+    file,
+  };
+
+  uploadedFiles.value.push(uploadedFile);
+};
+
+const removeFile = (id: string) => {
+  const index = uploadedFiles.value.findIndex((f) => f.id === id);
+  if (index > -1) {
+    uploadedFiles.value.splice(index, 1);
+  }
+};
+
+const handleSend = () => {
+  const message = inputMessage.value.trim();
+  if ((!message && uploadedFiles.value.length === 0) || props.disabled || props.sending) {
+    return;
+  }
+  emit("send", message, uploadedFiles.value.length > 0 ? [...uploadedFiles.value] : undefined);
+  inputMessage.value = "";
+  uploadedFiles.value = [];
+};
+
+const handleShiftEnter = () => {
+  inputMessage.value += "\n";
+};
+
+defineExpose({
+  focus: () => {
+    const input = document.querySelector(".message-input textarea") as HTMLTextAreaElement;
+    input?.focus();
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.chat-input {
+  .input-wrapper {
+    max-width: 800px;
+    padding: 20px;
+    margin: 0 auto;
+
+    .uploaded-files {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-bottom: 12px;
+
+      .file-item {
+        display: flex;
+        gap: 6px;
+        align-items: center;
+        padding: 8px 14px;
+        font-size: 13px;
+        background: var(--el-fill-color-light);
+        border: 1px solid var(--el-border-color-light);
+        border-radius: 8px;
+        transition: all 0.2s ease;
+
+        &:hover {
+          background: var(--el-color-primary-light-9);
+          border-color: var(--el-color-primary-light-7);
+        }
+
+        .file-icon {
+          font-size: 16px;
+          color: var(--el-color-primary);
+        }
+
+        .file-name {
+          max-width: 180px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          font-size: 13px;
+          white-space: nowrap;
+        }
+
+        .file-remove {
+          font-size: 14px;
+          color: var(--el-text-color-secondary);
+          cursor: pointer;
+          transition: color 0.2s ease;
+
+          &:hover {
+            color: var(--el-color-danger);
+          }
+        }
+      }
+    }
+
+    .input-container {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      padding: 20px;
+      background: var(--el-bg-color-overlay);
+      border: 1px solid var(--el-border-color-light);
+      border-radius: 16px;
+      box-shadow: var(--el-box-shadow-light);
+      transition:
+        border-color 0.2s ease,
+        box-shadow 0.2s ease,
+        transform 0.2s ease;
+
+      &:hover {
+        border-color: var(--el-color-primary);
+        box-shadow: var(--el-box-shadow);
+        transform: translateY(-2px);
+      }
+
+      &:focus-within {
+        border-color: var(--el-color-primary);
+        box-shadow: 0 0 0 1px var(--el-color-primary);
+      }
+
+      .message-input {
+        flex: 1;
+        min-width: 0;
+
+        :deep(.el-textarea__inner) {
+          padding: 0;
+          line-height: 1.6;
+          color: var(--el-text-color-primary);
+          resize: none;
+          background: transparent;
+          border: none;
+          box-shadow: none;
+        }
+
+        :deep(.el-textarea) {
+          padding: 0;
+        }
+      }
+
+      .input-footer {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        padding-top: 8px;
+
+        .input-actions {
+          display: flex;
+          gap: 10px;
+          align-items: center;
+
+          .upload-btn {
+            font-size: 18px;
+            color: var(--el-text-color-secondary);
+            transition: all 0.2s ease;
+
+            &:hover {
+              color: var(--el-color-primary);
+              transform: scale(1.05);
+            }
+          }
+
+          .send-button {
+            flex-shrink: 0;
+            border-radius: 50%;
+            box-shadow: var(--el-box-shadow-light);
+            transition: all 0.2s ease;
+
+            &:hover {
+              box-shadow: var(--el-box-shadow);
+              transform: translateY(-1px);
+            }
+
+            &:active {
+              transform: translateY(0);
+            }
+          }
+        }
+      }
+    }
+
+    .input-hint {
+      margin-top: 12px;
+      font-size: 12px;
+      font-weight: 400;
+      color: var(--el-text-color-secondary);
+      text-align: center;
+      letter-spacing: 0.5px;
+    }
+  }
+
+  &.chat-input--disabled .input-wrapper .input-container {
+    opacity: 0.72;
+    filter: grayscale(0.06);
+
+    &:hover {
+      border-color: var(--el-border-color-light);
+      box-shadow: var(--el-box-shadow-light);
+      transform: none;
+    }
+
+    &:focus-within {
+      border-color: var(--el-border-color-light);
+      box-shadow: var(--el-box-shadow-light);
+    }
+  }
+}
+</style>
diff --git a/frontend/new-web/src/views/module_ai/chat/components/ChatMessages.vue b/frontend/new-web/src/views/module_ai/chat/components/ChatMessages.vue
new file mode 100644
index 00000000..8a20ccce
--- /dev/null
+++ b/frontend/new-web/src/views/module_ai/chat/components/ChatMessages.vue
@@ -0,0 +1,95 @@
+<template>
+  <div ref="messagesContainer" class="chat-messages">
+    <WelcomeScreen v-if="messages.length === 0" @prompt-click="handlePromptClick" />
+    <div v-else class="messages-list">
+      <MessageItem
+        v-for="message in messages"
+        :key="message.id"
+        :message="message"
+        @toggle-fold="handleToggleFold(message)"
+      />
+    </div>
+    <div v-if="error" class="error-banner">
+      <el-alert :title="error" type="error" :closable="true" show-icon @close="handleErrorClose" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick, watch } from "vue";
+import WelcomeScreen from "./WelcomeScreen.vue";
+import MessageItem from "./MessageItem.vue";
+import type { ChatMessage } from "@/views/module_ai/chat/types";
+
+interface Props {
+  messages: ChatMessage[];
+  error: string;
+}
+
+interface Emits {
+  (e: "prompt-click", prompt: string): void;
+  (e: "error-close"): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+const messagesContainer = ref<HTMLElement>();
+
+const scrollToBottom = () => {
+  nextTick(() => {
+    if (messagesContainer.value) {
+      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
+    }
+  });
+};
+
+watch(
+  () => props.messages,
+  () => {
+    scrollToBottom();
+  },
+  { deep: true }
+);
+
+const handlePromptClick = (prompt: string) => {
+  emit("prompt-click", prompt);
+};
+
+const handleToggleFold = (message: ChatMessage) => {
+  message.collapsed = !message.collapsed;
+};
+
+const handleErrorClose = () => {
+  emit("error-close");
+};
+
+defineExpose({
+  scrollToBottom,
+});
+</script>
+
+<style lang="scss" scoped>
+.chat-messages {
+  height: 100%;
+  overflow-y: auto;
+
+  /* 与 index chat-main 同底，避免 disabled 灰 + page 色打架 */
+  background: transparent;
+
+  .messages-list {
+    max-width: 800px;
+    padding: 24px;
+    margin: 0 auto;
+  }
+
+  .error-banner {
+    position: fixed;
+    bottom: 140px;
+    left: 50%;
+    z-index: 1000;
+    padding: 0 24px;
+    transform: translateX(-50%);
+  }
+}
+</style>
diff --git a/frontend/new-web/src/views/module_ai/chat/components/ChatNavbar.vue b/frontend/new-web/src/views/module_ai/chat/components/ChatNavbar.vue
new file mode 100644
index 00000000..3ad7ea92
--- /dev/null
+++ b/frontend/new-web/src/views/module_ai/chat/components/ChatNavbar.vue
@@ -0,0 +1,180 @@
+<template>
+  <div class="chat-navbar">
+    <div class="navbar-left">
+      <button class="collapse-btn" @click="toggleSidebar">
+        <div v-if="!props.isSidebarCollapsed" class="i-svg:layout_leftbar_close_line w-6 h-6" />
+        <div v-else class="i-svg:layout_leftbar_open_line w-6 h-6" />
+      </button>
+    </div>
+    <div class="navbar-right">
+      <el-button text :icon="Setting" @click="handleToggleConnection">
+        {{ isConnected ? "断开连接" : "重新连接" }}
+      </el-button>
+      <el-tag
+        class="connection-status"
+        effect="plain"
+        :type="connectionStatus === 'connected' ? 'success' : 'danger'"
+      >
+        <el-icon :class="['status-icon', connectionStatus]">
+          <Connection v-if="connectionStatus === 'connected'" />
+          <Loading v-else-if="connectionStatus === 'connecting'" />
+          <Warning v-else />
+        </el-icon>
+        <span class="status-text">{{ connectionStatusText }}</span>
+      </el-tag>
+      <el-button v-if="hasMessages" text :icon="Delete" @click="handleClearChat">
+        清空对话
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { Connection, Loading, Warning, Delete, Setting } from "@element-plus/icons-vue";
+
+interface Props {
+  connectionStatus: "connected" | "connecting" | "disconnected";
+  isConnected: boolean;
+  messageCount: number;
+  isSidebarCollapsed?: boolean;
+}
+
+interface Emits {
+  (e: "clear-chat"): void;
+  (e: "toggle-connection"): void;
+  (e: "toggle-sidebar"): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isSidebarCollapsed: false,
+});
+const emit = defineEmits<Emits>();
+
+const connectionStatusText = computed(() => {
+  switch (props.connectionStatus) {
+    case "connected":
+      return "已连接";
+    case "connecting":
+      return "连接中...";
+    case "disconnected":
+      return "未连接";
+    default:
+      return "未知状态";
+  }
+});
+
+const hasMessages = computed(() => props.messageCount > 0);
+
+const handleClearChat = () => {
+  emit("clear-chat");
+};
+
+const handleToggleConnection = () => {
+  emit("toggle-connection");
+};
+
+const toggleSidebar = () => {
+  emit("toggle-sidebar");
+};
+</script>
+
+<style lang="scss" scoped>
+.chat-navbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px;
+
+  .navbar-left {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+
+    .collapse-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
+      padding: 0;
+      color: var(--el-text-color-regular);
+      cursor: pointer;
+      background: transparent;
+      border: none;
+      border-radius: 4px;
+      transition:
+        background-color 0.2s,
+        color 0.2s;
+
+      &:hover {
+        color: var(--el-color-primary);
+        background: var(--el-color-primary-light-9);
+      }
+
+      &:focus-visible {
+        outline: 2px solid var(--el-color-primary);
+        outline-offset: 2px;
+      }
+
+      /* UnoCSS 图标 SVG 多随 currentColor */
+      & > div {
+        color: inherit;
+      }
+
+      .collapse-icon {
+        width: 20px;
+        height: 20px;
+        color: inherit;
+      }
+    }
+  }
+
+  .navbar-right {
+    display: flex;
+    flex-wrap: nowrap;
+    gap: 12px;
+    align-items: center;
+
+    /* EP 相邻按钮自带 margin-left，叠在 flex gap 上会导致间距忽大忽小 */
+    :deep(.el-button) {
+      margin: 0;
+    }
+
+    .connection-status {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 32px;
+      padding: 0 12px;
+      margin: 0;
+      font-size: 14px;
+      line-height: 1;
+
+      :deep(.el-tag__content) {
+        display: inline-flex;
+        gap: 6px;
+        align-items: center;
+      }
+
+      .status-icon {
+        &.connected {
+          color: var(--el-color-success);
+        }
+
+        &.connecting {
+          color: var(--el-color-warning);
+        }
+
+        &.disconnected {
+          color: var(--el-color-danger);
+        }
+      }
+
+      .status-text {
+        color: var(--el-text-color-secondary);
+      }
+    }
+  }
+}
+</style>
diff --git a/frontend/new-web/src/views/module_ai/chat/components/MessageItem.vue b/frontend/new-web/src/views/module_ai/chat/components/MessageItem.vue
new file mode 100644
index 00000000..f3a6bca6
--- /dev/null
+++ b/frontend/new-web/src/views/module_ai/chat/components/MessageItem.vue
@@ -0,0 +1,568 @@
+<template>
+  <div :class="['message-group', message.type]">
+    <div class="message-avatar">
+      <div v-if="message.type === 'user'" class="user-avatar">
+        <el-icon><User /></el-icon>
+      </div>
+      <div v-else class="ai-avatar">
+        <el-icon><ChatDotRound /></el-icon>
+      </div>
+    </div>
+    <div class="message-content">
+      <div class="message-header">
+        <strong class="sender-name">
+          {{ message.type === "user" ? userName : "FA助手" }}
+        </strong>
+        <el-button
+          v-if="message.content"
+          text
+          size="small"
+          :icon="CopyDocument"
+          class="copy-button"
+          @click="handleCopy"
+        ></el-button>
+      </div>
+      <div class="message-body">
+        <div v-if="message.files && message.files.length > 0" class="message-files">
+          <div v-for="file in message.files" :key="file.id" class="attached-file">
+            <el-icon class="file-icon"><Document /></el-icon>
+            <span class="file-name">{{ file.name }}</span>
+            <span class="file-size">{{ formatFileSize(file.size) }}</span>
+          </div>
+        </div>
+        <el-button
+          v-if="message.content.length > 200"
+          text
+          size="small"
+          :icon="message.collapsed ? ArrowDown : ArrowUp"
+          class="fold-button"
+          @click="handleToggleFold"
+        >
+          {{ message.collapsed ? "展开" : "收起" }}
+        </el-button>
+        <div
+          class="message-text"
+          :class="{ collapsed: message.collapsed }"
+          v-html="formattedContent"
+        ></div>
+        <div
+          v-if="message.type === 'assistant' && message.loading && !message.content"
+          class="typing-indicator"
+        >
+          <div class="typing-dots">
+            <span></span>
+            <span></span>
+            <span></span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { ElMessage } from "element-plus";
+import {
+  User,
+  ChatDotRound,
+  CopyDocument,
+  ArrowDown,
+  ArrowUp,
+  Document,
+} from "@element-plus/icons-vue";
+import MarkdownIt from "markdown-it";
+import markdownItHighlightjs from "markdown-it-highlightjs";
+import hljs from "highlight.js";
+import DOMPurify from "dompurify";
+/* 亮色用 atom-one；暗色由文末全局块覆盖 .hljs 底与字色，避免整段代码发亮底 */
+import "highlight.js/styles/atom-one-light.css";
+import { useUserStoreHook } from "@/store";
+import type { ChatMessage } from "@/views/module_ai/chat/types";
+
+interface Props {
+  message: ChatMessage;
+}
+
+interface Emits {
+  (e: "toggle-fold"): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+const userStore = useUserStoreHook();
+
+const userName = computed(() => userStore.basicInfo.name || "用户");
+
+const md: MarkdownIt = new MarkdownIt({
+  html: true,
+  linkify: true,
+  typographer: true,
+  breaks: true,
+  highlight(str: string, lang: string): string {
+    if (lang && hljs.getLanguage(lang)) {
+      try {
+        return `<pre class="hljs"><code>${hljs.highlight(str, { language: lang, ignoreIllegals: true }).value}</code></pre>`;
+      } catch {
+        return `<pre class="hljs"><code>${md.utils.escapeHtml(str)}</code></pre>`;
+      }
+    }
+    return `<pre class="hljs"><code>${md.utils.escapeHtml(str)}</code></pre>`;
+  },
+}).use(markdownItHighlightjs);
+
+const defaultRender =
+  md.renderer.rules.link_open ||
+  function (tokens: any[], idx: number, options: any, env: any, self: any) {
+    return self.renderToken(tokens, idx, options, env, self);
+  };
+
+md.renderer.rules.link_open = function (
+  tokens: any[],
+  idx: number,
+  options: any,
+  env: any,
+  self: any
+) {
+  tokens[idx].attrPush(["target", "_blank"]);
+  tokens[idx].attrPush(["rel", "noopener noreferrer"]);
+  return defaultRender(tokens, idx, options, env, self);
+};
+
+const formattedContent = computed(() => {
+  if (!props.message.content) return "";
+  const rawHtml = md.render(props.message.content);
+  return DOMPurify.sanitize(rawHtml, {
+    ALLOWED_TAGS: [
+      "a",
+      "abbr",
+      "acronym",
+      "b",
+      "blockquote",
+      "br",
+      "code",
+      "col",
+      "colgroup",
+      "dd",
+      "del",
+      "dl",
+      "dt",
+      "em",
+      "h1",
+      "h2",
+      "h3",
+      "h4",
+      "h5",
+      "h6",
+      "hr",
+      "i",
+      "img",
+      "li",
+      "ol",
+      "p",
+      "pre",
+      "s",
+      "span",
+      "strike",
+      "strong",
+      "sub",
+      "sup",
+      "table",
+      "tbody",
+      "td",
+      "tfoot",
+      "th",
+      "thead",
+      "tr",
+      "tt",
+      "u",
+      "ul",
+      "video",
+      "source",
+      "div",
+    ],
+    ALLOWED_ATTR: [
+      "href",
+      "title",
+      "target",
+      "rel",
+      "src",
+      "alt",
+      "width",
+      "height",
+      "class",
+      "id",
+      "controls",
+      "poster",
+      "type",
+      "colspan",
+      "rowspan",
+      "span",
+    ],
+  });
+});
+
+const handleToggleFold = () => {
+  emit("toggle-fold");
+};
+
+const handleCopy = async () => {
+  try {
+    await navigator.clipboard.writeText(props.message.content);
+    ElMessage.success("已复制到剪贴板");
+  } catch {
+    const textArea = document.createElement("textarea");
+    textArea.value = props.message.content;
+    document.body.appendChild(textArea);
+    textArea.select();
+    document.execCommand("copy");
+    document.body.removeChild(textArea);
+    ElMessage.success("已复制到剪贴板");
+  }
+};
+
+const formatFileSize = (bytes: number): string => {
+  if (bytes === 0) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + " " + sizes[i];
+};
+</script>
+
+<style lang="scss" scoped>
+.message-group {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 16px;
+
+  .message-avatar {
+    flex-shrink: 0;
+
+    .user-avatar {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
+      font-size: 14px;
+      color: white;
+      background: var(--el-color-primary);
+      border-radius: 6px;
+    }
+
+    .ai-avatar {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
+      font-size: 14px;
+      color: white;
+      background: var(--el-color-success);
+      border-radius: 6px;
+    }
+  }
+
+  .message-content {
+    flex: 1;
+    min-width: 0;
+
+    .message-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 8px;
+
+      .sender-name {
+        font-size: 14px;
+        font-weight: 600;
+        color: var(--el-text-color-primary);
+      }
+
+      .copy-button {
+        padding: 4px;
+        font-size: 12px;
+        color: var(--el-text-color-secondary);
+
+        &:hover {
+          color: var(--el-color-primary);
+        }
+      }
+    }
+
+    .message-actions {
+      display: flex;
+      gap: 8px;
+      margin-top: 8px;
+    }
+
+    .message-body {
+      .message-files {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        margin-bottom: 12px;
+
+        .attached-file {
+          display: flex;
+          gap: 6px;
+          align-items: center;
+          padding: 8px 12px;
+          font-size: 12px;
+          background: var(--el-fill-color-light);
+          border-radius: 6px;
+
+          .file-icon {
+            font-size: 16px;
+            color: var(--el-color-primary);
+          }
+
+          .file-name {
+            max-width: 120px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          .file-size {
+            color: var(--el-text-color-secondary);
+          }
+        }
+      }
+
+      .fold-button {
+        padding: 0;
+        margin-bottom: 8px;
+        font-size: 12px;
+        color: var(--el-text-color-secondary);
+
+        &:hover {
+          color: var(--el-color-primary);
+        }
+      }
+
+      .message-text {
+        font-size: 15px;
+        line-height: 1.6;
+        color: var(--el-text-color-primary);
+        word-wrap: break-word;
+        transition:
+          max-height 0.25s ease,
+          opacity 0.2s ease;
+
+        &.collapsed {
+          position: relative;
+          max-height: 120px;
+          overflow: hidden;
+
+          &::after {
+            position: absolute;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            height: 60px;
+            content: "";
+            background: linear-gradient(
+              transparent,
+              var(--chat-area-bg, var(--el-bg-color-overlay))
+            );
+          }
+        }
+
+        :deep(pre) {
+          padding: 12px;
+          margin: 12px 0;
+          overflow-x: auto;
+          background: var(--el-fill-color-light);
+          border-radius: 6px;
+
+          code {
+            font-family: "Courier New", Courier, monospace;
+            font-size: 13px;
+          }
+        }
+
+        :deep(code) {
+          padding: 2px 6px;
+          font-family: "Courier New", Courier, monospace;
+          font-size: 13px;
+          background: var(--el-fill-color-light);
+          border-radius: 3px;
+        }
+
+        :deep(p) {
+          margin: 8px 0;
+        }
+
+        :deep(ul),
+        :deep(ol) {
+          padding-left: 24px;
+          margin: 8px 0;
+        }
+
+        :deep(li) {
+          margin: 4px 0;
+        }
+
+        :deep(a) {
+          color: var(--el-color-primary);
+          text-decoration: none;
+
+          &:hover {
+            text-decoration: underline;
+          }
+        }
+
+        :deep(blockquote) {
+          padding: 8px 16px;
+          margin: 12px 0;
+          background: var(--el-fill-color-light);
+          border-left: 4px solid var(--el-color-primary);
+        }
+
+        :deep(table) {
+          width: 100%;
+          margin: 12px 0;
+          border-collapse: collapse;
+
+          th,
+          td {
+            padding: 8px 12px;
+            border: 1px solid var(--el-border-color-light);
+          }
+
+          th {
+            font-weight: 600;
+            background: var(--el-fill-color-light);
+          }
+        }
+      }
+
+      .typing-indicator {
+        display: flex;
+        align-items: center;
+        padding: 8px 0;
+
+        .typing-dots {
+          display: flex;
+          gap: 4px;
+
+          span {
+            width: 8px;
+            height: 8px;
+            background: var(--el-text-color-secondary);
+            border-radius: 50%;
+            animation: typing 1.4s infinite ease-in-out;
+
+            &:nth-child(1) {
+              animation-delay: 0s;
+            }
+
+            &:nth-child(2) {
+              animation-delay: 0.2s;
+            }
+
+            &:nth-child(3) {
+              animation-delay: 0.4s;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &.user {
+    flex-direction: row-reverse;
+
+    .message-content {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+
+      .message-header {
+        .sender-name {
+          text-align: right;
+        }
+      }
+
+      .message-actions {
+        justify-content: flex-end;
+      }
+
+      .message-body .message-text {
+        padding: 10px 14px;
+        background: var(--el-color-primary-light-9);
+        border: 1px solid var(--el-border-color-light);
+        border-radius: 12px;
+
+        &.collapsed::after {
+          background: linear-gradient(transparent, var(--el-color-primary-light-9));
+        }
+
+        :deep(pre) {
+          border: 1px solid var(--el-border-color-lighter);
+        }
+
+        :deep(code:not(pre code)) {
+          border: 1px solid var(--el-border-color-lighter);
+        }
+      }
+    }
+  }
+
+  &.assistant {
+    .message-content {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  }
+}
+
+@keyframes typing {
+  0%,
+  60%,
+  100% {
+    transform: translateY(0);
+  }
+
+  30% {
+    transform: translateY(-4px);
+  }
+}
+</style>
+
+<!-- 暗色下覆盖 highlight.js 亮色主题，避免代码块发白底 -->
+<style lang="scss">
+html.dark .chat-messages .message-text {
+  pre.hljs,
+  code.hljs {
+    color: var(--el-text-color-regular) !important;
+    background: var(--el-fill-color) !important;
+  }
+
+  .hljs-comment,
+  .hljs-quote {
+    color: var(--el-text-color-secondary) !important;
+  }
+
+  .hljs-keyword,
+  .hljs-selector-tag,
+  .hljs-built_in {
+    color: var(--el-color-primary) !important;
+  }
+
+  .hljs-string,
+  .hljs-title,
+  .hljs-attr {
+    color: var(--el-color-success) !important;
+  }
+
+  .hljs-number,
+  .hljs-literal {
+    color: var(--el-color-warning) !important;
+  }
+}
+</style>
diff --git a/frontend/new-web/src/views/module_ai/chat/components/Sidebar.vue b/frontend/new-web/src/views/module_ai/chat/components/Sidebar.vue
new file mode 100644
index 00000000..a1616548
--- /dev/null
+++ b/frontend/new-web/src/views/module_ai/chat/components/Sidebar.vue
@@ -0,0 +1,597 @@
+<template>
+  <div class="sidebar" :class="{ collapsed: isCollapsed }">
+    <div class="sidebar-header">
+      <div class="logo-section">
+        <el-icon class="logo-icon" :size="28"><ChatDotRound /></el-icon>
+        <span v-if="!isCollapsed" class="project-name">FA智能助手</span>
+      </div>
+    </div>
+
+    <div class="sidebar-content">
+      <template v-if="!isCollapsed">
+        <div class="new-session-section">
+          <el-button type="primary" class="new-session-btn" @click="handleNewSession">
+            <el-icon class="btn-icon"><Plus /></el-icon>
+            <span>开启新对话</span>
+          </el-button>
+        </div>
+
+        <div class="history-section">
+          <div class="search-section">
+            <el-input
+              v-model="searchQuery"
+              placeholder="搜索会话历史"
+              :prefix-icon="Search"
+              clearable
+              @input="handleSearch"
+            />
+          </div>
+          <div class="history-groups">
+            <div v-for="group in groupedSessions" :key="group.title" class="history-group">
+              <div class="group-title" @click="toggleGroup(group.title)">
+                <span>{{ group.title }}</span>
+                <el-icon
+                  class="collapse-icon"
+                  :class="{ collapsed: collapsedGroups.has(group.title) }"
+                >
+                  <ArrowDown />
+                </el-icon>
+              </div>
+              <div v-show="!collapsedGroups.has(group.title)" class="session-list">
+                <div
+                  v-for="session in group.sessions"
+                  :key="session.id"
+                  class="session-item"
+                  :class="{ active: currentSessionId === session.id }"
+                  @click="handleSelectSession(session)"
+                >
+                  <el-icon class="session-icon"><ChatLineRound /></el-icon>
+                  <span class="session-title">
+                    {{ session.title || session.session_data?.session_name || "未命名会话" }}
+                  </span>
+                  <el-dropdown
+                    trigger="click"
+                    @command="(cmd) => handleSessionCommand(cmd, session)"
+                  >
+                    <el-icon class="more-icon" @click.stop><MoreFilled /></el-icon>
+                    <template #dropdown>
+                      <el-dropdown-menu>
+                        <el-dropdown-item command="rename">重命名</el-dropdown-item>
+                        <el-dropdown-item command="delete" divided>删除</el-dropdown-item>
+                      </el-dropdown-menu>
+                    </template>
+                  </el-dropdown>
+                </div>
+              </div>
+            </div>
+            <div v-if="filteredSessions.length === 0" class="empty-state">
+              <el-empty description="暂无会话历史" :image-size="60" />
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+
+    <div class="sidebar-footer">
+      <div v-if="!isCollapsed" class="user-info">
+        <el-avatar :size="32" :src="userInfo.avatar">
+          <el-icon><User /></el-icon>
+        </el-avatar>
+        <div class="user-details">
+          <div class="user-name">{{ userInfo.name }}</div>
+          <div class="user-status">在线</div>
+        </div>
+        <el-dropdown trigger="click" @command="handleUserCommand">
+          <el-icon class="user-menu-icon"><Setting /></el-icon>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item command="profile">个人中心</el-dropdown-item>
+              <el-dropdown-item command="settings">设置</el-dropdown-item>
+              <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
+      <div v-else class="collapsed-user">
+        <el-dropdown trigger="click" @command="handleUserCommand">
+          <el-avatar :size="32" :src="userInfo.avatar">
+            <el-icon><User /></el-icon>
+          </el-avatar>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item command="profile">个人中心</el-dropdown-item>
+              <el-dropdown-item command="settings">设置</el-dropdown-item>
+              <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from "vue";
+import { useRouter } from "vue-router";
+import { ElMessage, ElMessageBox } from "element-plus";
+import {
+  ChatLineRound,
+  User,
+  Setting,
+  MoreFilled,
+  Plus,
+  Search,
+  ArrowDown,
+} from "@element-plus/icons-vue";
+import { useUserStoreHook } from "@/store";
+import { ChatSession, SessionGroup, UserInfo } from "@/api/module_ai/chat";
+import AiChatAPI from "@/api/module_ai/chat";
+
+interface Props {
+  currentSessionId?: string | null;
+  isCollapsed?: boolean;
+}
+
+interface Emits {
+  (e: "select-session", session: ChatSession): void;
+  (e: "new-session"): void;
+}
+
+const { currentSessionId, isCollapsed = false } = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+const router = useRouter();
+const userStore = useUserStoreHook();
+
+const sessions = ref<ChatSession[]>([]);
+const searchQuery = ref("");
+const collapsedGroups = ref<Set<string>>(new Set());
+
+const userInfo = computed<UserInfo>(() => ({
+  id: userStore.basicInfo.id || 0,
+  name: userStore.basicInfo.name || "用户",
+  username: userStore.basicInfo.username || "",
+  avatar: userStore.basicInfo.avatar || "",
+  email: userStore.basicInfo.email || "",
+}));
+
+const filteredSessions = computed<ChatSession[]>(() => {
+  if (!searchQuery.value.trim()) {
+    return sessions.value;
+  }
+  const query = searchQuery.value.toLowerCase();
+  return sessions.value.filter((session: ChatSession) =>
+    (session.title || "").toLowerCase().includes(query)
+  );
+});
+
+const groupedSessions = computed<SessionGroup[]>(() => {
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  const todayStart = today.getTime();
+  const yesterdayStart = todayStart - 24 * 60 * 60 * 1000;
+  const weekAgo = todayStart - 7 * 24 * 60 * 60 * 1000;
+
+  const todaySessions: ChatSession[] = [];
+  const yesterdaySessions: ChatSession[] = [];
+  const weekSessions: ChatSession[] = [];
+  const earlierSessions: ChatSession[] = [];
+
+  filteredSessions.value.forEach((session) => {
+    if (!session.updated_at) return;
+    // Unix 时间戳（秒）转换为毫秒
+    const updatedTime = session.updated_at * 1000;
+
+    if (updatedTime >= todayStart) {
+      todaySessions.push(session);
+    } else if (updatedTime >= yesterdayStart) {
+      yesterdaySessions.push(session);
+    } else if (updatedTime >= weekAgo) {
+      weekSessions.push(session);
+    } else {
+      earlierSessions.push(session);
+    }
+  });
+
+  const groups: SessionGroup[] = [];
+
+  if (todaySessions.length > 0) {
+    groups.push({ id: "today", title: "今天", sessions: todaySessions });
+  }
+
+  if (yesterdaySessions.length > 0) {
+    groups.push({ id: "yesterday", title: "昨天", sessions: yesterdaySessions });
+  }
+
+  if (weekSessions.length > 0) {
+    groups.push({ id: "week", title: "本周", sessions: weekSessions });
+  }
+
+  if (earlierSessions.length > 0) {
+    groups.push({ id: "earlier", title: "更早", sessions: earlierSessions });
+  }
+
+  return groups;
+});
+
+const handleSearch = () => {};
+
+const toggleGroup = (groupTitle: string) => {
+  const newCollapsed = new Set(collapsedGroups.value);
+  if (newCollapsed.has(groupTitle)) {
+    newCollapsed.delete(groupTitle);
+  } else {
+    newCollapsed.add(groupTitle);
+  }
+  collapsedGroups.value = newCollapsed;
+};
+
+const handleSelectSession = (session: ChatSession) => {
+  emit("select-session", session);
+};
+
+const handleNewSession = () => {
+  emit("new-session");
+};
+
+const handleSessionCommand = async (command: string, session: ChatSession) => {
+  if (command === "rename") {
+    try {
+      const { value } = await ElMessageBox.prompt("请输入新的会话名称", "重命名", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        inputPattern: /.+/,
+        inputErrorMessage: "会话名称不能为空",
+      });
+      await AiChatAPI.updateSession(session.id, { title: value });
+      session.title = value;
+      ElMessage.success("重命名成功");
+    } catch (error) {
+      if (error !== "cancel") {
+        ElMessage.error("重命名失败");
+      } else {
+        ElMessage.info("已取消重命名");
+      }
+    }
+  } else if (command === "delete") {
+    try {
+      await ElMessageBox.confirm("确定要删除此会话吗？", "确认删除", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      });
+      await AiChatAPI.deleteSession([session.id]);
+      const index = sessions.value.findIndex((s: ChatSession) => s.id === session.id);
+      if (index > -1) {
+        sessions.value.splice(index, 1);
+      }
+    } catch (error) {
+      if (error !== "cancel") {
+        ElMessage.error("删除失败");
+      } else {
+        ElMessage.info("已取消删除");
+      }
+    }
+  }
+};
+
+const handleUserCommand = (command: string) => {
+  if (command === "profile") {
+    router.push("/profile");
+  } else if (command === "settings") {
+    ElMessage.info("设置功能开发中");
+  } else if (command === "logout") {
+    userStore.logout();
+  }
+};
+
+const loadSessions = async () => {
+  try {
+    const res = await AiChatAPI.getSessionList({ page_no: 1, page_size: 100 });
+    const responseData = res.data;
+    const data = responseData?.data;
+
+    if (data?.items && Array.isArray(data.items)) {
+      sessions.value = data.items
+        .filter((item: any) => item.session_id !== undefined)
+        .map((item: any) => ({
+          id: item.session_id,
+          title: item.session_data?.session_name || item.session_id?.slice(0, 8) || "新会话",
+          created_at: item.created_at,
+          updated_at: item.updated_at,
+          message_count: item.runs?.length || 0,
+          session_id: item.session_id,
+          session_type: item.session_type,
+          agent_id: item.agent_id,
+          user_id: item.user_id,
+          team_id: item.team_id,
+          team_name: item.team_name,
+          workflow_id: item.workflow_id,
+          summary: item.summary,
+          metadata: item.metadata,
+          runs: item.runs,
+          session_data: item.session_data,
+          agent_data: item.agent_data,
+          team_data: item.team_data,
+          workflow_data: item.workflow_data,
+          created_time: item.created_at ? new Date(item.created_at * 1000).toISOString() : null,
+          updated_time: item.updated_at ? new Date(item.updated_at * 1000).toISOString() : null,
+          messages: item.runs?.flatMap((run: any) => run.messages || []) || [],
+        }));
+    }
+  } catch (error) {
+    console.error("加载会话列表失败:", error);
+  }
+};
+
+onMounted(() => {
+  loadSessions();
+});
+
+defineExpose({
+  loadSessions,
+});
+</script>
+
+<style lang="scss" scoped>
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  border-right: 1px solid var(--el-border-color-light);
+  transition: width 0.3s ease;
+
+  .sidebar-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px;
+
+    .logo-section {
+      display: flex;
+      gap: 12px;
+      align-items: center;
+
+      .logo-icon {
+        color: var(--el-color-primary);
+      }
+
+      .project-name {
+        font-size: 16px;
+        font-weight: 600;
+        color: var(--el-text-color-primary);
+      }
+    }
+  }
+
+  .sidebar-content {
+    flex: 1;
+    padding: 16px;
+    overflow-y: auto;
+
+    .new-session-section {
+      margin-bottom: 16px;
+
+      .new-session-btn {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        border-radius: 20px;
+        transition: all 0.2s ease;
+
+        .btn-icon {
+          font-size: 16px;
+        }
+
+        &:hover {
+          box-shadow: var(--el-box-shadow);
+          transform: translateY(-1px);
+        }
+
+        &:active {
+          transform: translateY(0);
+        }
+      }
+    }
+
+    .history-section {
+      .search-section {
+        margin-bottom: 16px;
+
+        :deep(.el-input__wrapper) {
+          border-radius: 20px;
+          box-shadow: 0 0 0 1px var(--el-border-color) inset;
+          transition: all 0.2s ease;
+
+          &:hover {
+            box-shadow: 0 0 0 1px var(--el-color-primary) inset;
+          }
+
+          &.is-focus {
+            box-shadow: 0 0 0 1px var(--el-color-primary) inset;
+          }
+        }
+
+        :deep(.el-input__inner) {
+          font-size: 13px;
+        }
+      }
+
+      .history-groups {
+        .history-group {
+          margin-bottom: 24px;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+
+          .group-title {
+            display: flex;
+            gap: 6px;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 4px;
+            margin-bottom: 10px;
+            font-size: 12px;
+            font-weight: 500;
+            color: var(--el-text-color-secondary);
+            cursor: pointer;
+            user-select: none;
+            transition: color 0.2s;
+
+            &::before {
+              width: 3px;
+              height: 12px;
+              content: "";
+              background: var(--el-color-primary);
+              border-radius: 2px;
+            }
+
+            &:hover {
+              color: var(--el-text-color-primary);
+            }
+
+            .collapse-icon {
+              font-size: 14px;
+              transition: transform 0.2s ease;
+
+              &.collapsed {
+                transform: rotate(-90deg);
+              }
+            }
+          }
+
+          .session-list {
+            .session-item {
+              position: relative;
+              display: flex;
+              gap: 10px;
+              align-items: center;
+              padding: 4px;
+              margin-bottom: 6px;
+              cursor: pointer;
+              border: 1px solid transparent;
+              border-radius: 14px;
+              transition: all 0.2s ease;
+
+              &:hover {
+                background: var(--el-fill-color-light);
+                border-color: var(--el-border-color-light);
+                transform: translateX(2px);
+              }
+
+              &.active {
+                color: var(--el-color-primary);
+                background: var(--el-color-primary-light-9);
+                border-color: var(--el-border-color-light);
+                box-shadow: none;
+              }
+
+              .session-icon {
+                flex-shrink: 0;
+                font-size: 18px;
+                color: var(--el-text-color-secondary);
+                transition: color 0.2s;
+              }
+
+              &.active .session-icon {
+                color: var(--el-color-primary);
+              }
+
+              .session-title {
+                flex: 1;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                font-size: 14px;
+                font-weight: 400;
+                white-space: nowrap;
+                transition: font-weight 0.2s;
+              }
+
+              &.active .session-title {
+                font-weight: 500;
+              }
+
+              .more-icon {
+                flex-shrink: 0;
+                padding: 4px;
+                font-size: 16px;
+                border-radius: 4px;
+                opacity: 0;
+                transition: all 0.2s;
+
+                &:hover {
+                  color: var(--el-color-primary);
+                  background: var(--el-fill-color);
+                }
+              }
+
+              &:hover .more-icon {
+                opacity: 1;
+              }
+            }
+          }
+        }
+
+        .empty-state {
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+          align-items: center;
+          justify-content: center;
+          padding: 40px 20px;
+          color: var(--el-text-color-secondary);
+        }
+      }
+    }
+  }
+
+  .sidebar-footer {
+    padding: 12px;
+    border-top: 1px solid var(--el-border-color-light);
+
+    .user-info {
+      display: flex;
+      gap: 12px;
+      align-items: center;
+
+      .user-details {
+        flex: 1;
+        overflow: hidden;
+
+        .user-name {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          font-size: 14px;
+          font-weight: 500;
+          color: var(--el-text-color-primary);
+          white-space: nowrap;
+        }
+
+        .user-status {
+          font-size: 12px;
+          color: var(--el-color-success);
+        }
+      }
+
+      .user-menu-icon {
+        font-size: 18px;
+        color: var(--el-text-color-secondary);
+        cursor: pointer;
+
+        &:hover {
+          color: var(--el-color-primary);
+        }
+      }
+    }
+
+    .collapsed-user {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+</style>
diff --git a/frontend/new-web/src/views/module_ai/chat/components/WelcomeScreen.vue b/frontend/new-web/src/views/module_ai/chat/components/WelcomeScreen.vue
new file mode 100644
index 00000000..deaa7b16
--- /dev/null
+++ b/frontend/new-web/src/views/module_ai/chat/components/WelcomeScreen.vue
@@ -0,0 +1,133 @@
+<template>
+  <div class="welcome-screen">
+    <div class="welcome-content">
+      <div class="ai-logo">
+        <el-icon size="64"><ChatDotRound /></el-icon>
+      </div>
+      <h1>FA智能助手</h1>
+      <p class="welcome-subtitle">我是您的专属AI助手，可以帮您回答问题、处理任务和进行智能对话</p>
+
+      <div class="example-prompts">
+        <div
+          v-for="card in promptCards"
+          :key="card.prompt"
+          class="prompt-card"
+          role="button"
+          tabindex="0"
+          @click="handlePromptClick(card.prompt)"
+          @keydown.enter.prevent="handlePromptClick(card.prompt)"
+          @keydown.space.prevent="handlePromptClick(card.prompt)"
+        >
+          <h4>{{ card.title }}</h4>
+          <p>{{ card.body }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ChatDotRound } from "@element-plus/icons-vue";
+
+interface Emits {
+  (e: "prompt-click", prompt: string): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const promptCards = [
+  { title: "系统介绍", body: "请介绍一下FastApiAdmin系统", prompt: "请介绍一下FastApiAdmin系统" },
+  { title: "开发指导", body: "如何在系统中创建新的模块？", prompt: "如何在系统中创建新的模块？" },
+  {
+    title: "权限管理",
+    body: "FA系统的权限管理是如何工作的？",
+    prompt: "系统的权限管理是如何工作的？",
+  },
+  { title: "性能优化", body: "如何优化系统的性能？", prompt: "如何优化FA系统的性能？" },
+];
+
+const handlePromptClick = (prompt: string) => {
+  emit("prompt-click", prompt);
+};
+</script>
+
+<style lang="scss" scoped>
+.welcome-screen {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 32px;
+  text-align: center;
+
+  .welcome-content {
+    max-width: 800px;
+
+    .ai-logo {
+      margin-bottom: 24px;
+      color: var(--el-color-primary);
+    }
+
+    h1 {
+      margin: 0 0 16px;
+      font-size: 32px;
+      font-weight: 600;
+      color: var(--el-text-color-primary);
+    }
+
+    .welcome-subtitle {
+      margin-bottom: 32px;
+      font-size: 16px;
+      line-height: 1.5;
+      color: var(--el-text-color-secondary);
+    }
+
+    .example-prompts {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+      gap: 16px;
+      max-width: 600px;
+
+      .prompt-card {
+        padding: 20px;
+        text-align: left;
+        cursor: pointer;
+        background: var(--el-bg-color-overlay);
+        border: 1px solid var(--el-border-color-light);
+        border-radius: 12px;
+        transition:
+          border-color 0.2s ease,
+          box-shadow 0.2s ease,
+          transform 0.2s ease;
+
+        &:hover {
+          border-color: var(--el-color-primary);
+          box-shadow: var(--el-box-shadow-light);
+          transform: translateY(-2px);
+        }
+
+        &:focus-visible {
+          outline: 2px solid var(--el-color-primary);
+          outline-offset: 2px;
+          border-color: var(--el-color-primary);
+        }
+
+        h4 {
+          margin: 0 0 8px;
+          font-size: 14px;
+          font-weight: 600;
+          color: var(--el-text-color-primary);
+        }
+
+        p {
+          margin: 0;
+          font-size: 13px;
+          line-height: 1.4;
+          color: var(--el-text-color-secondary);
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/frontend/new-web/src/views/module_ai/chat/index.vue b/frontend/new-web/src/views/module_ai/chat/index.vue
new file mode 100644
index 00000000..9cbc11a6
--- /dev/null
+++ b/frontend/new-web/src/views/module_ai/chat/index.vue
@@ -0,0 +1,351 @@
+<template>
+  <div class="app-container">
+    <el-container class="main-chat">
+      <el-aside class="sidebar-container" :class="{ collapsed: isSidebarCollapsed }">
+        <Sidebar
+          ref="sidebarRef"
+          :current-session-id="currentSessionId"
+          :is-collapsed="isSidebarCollapsed"
+          @select-session="handleSelectSession"
+          @new-session="handleNewSession"
+        />
+      </el-aside>
+      <el-container class="chat-container">
+        <el-header class="chat-header">
+          <ChatNavbar
+            :connection-status="connectionStatus"
+            :is-connected="isConnected"
+            :message-count="messages.length"
+            :is-sidebar-collapsed="isSidebarCollapsed"
+            @clear-chat="handleClearChat"
+            @toggle-connection="toggleConnection"
+            @toggle-sidebar="toggleSidebar"
+          />
+        </el-header>
+        <el-main class="chat-main">
+          <ChatMessages
+            ref="chatMessagesRef"
+            :messages="messages"
+            :error="error"
+            @prompt-click="handleSendMessage"
+            @error-close="error = ''"
+          />
+        </el-main>
+        <el-footer class="chat-footer">
+          <ChatInput
+            :disabled="!isConnected"
+            :sending="sending"
+            :is-connected="isConnected"
+            @send="handleSendMessage"
+          />
+        </el-footer>
+      </el-container>
+    </el-container>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  name: "Chat",
+  inheritAttrs: false,
+});
+
+import { ref, onMounted, onUnmounted } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import ChatNavbar from "./components/ChatNavbar.vue";
+import ChatMessages from "./components/ChatMessages.vue";
+import ChatInput from "./components/ChatInput.vue";
+import Sidebar from "./components/Sidebar.vue";
+import AiChatAPI, { ChatSession } from "@/api/module_ai/chat";
+import { Auth } from "@/utils/auth";
+import type { ChatMessage, UploadedFile } from "./types";
+
+// 状态
+const messages = ref<ChatMessage[]>([]);
+const sending = ref(false);
+const isConnected = ref(false);
+const connectionStatus = ref<"connected" | "connecting" | "disconnected">("disconnected");
+const error = ref("");
+const currentSessionId = ref<string | null>(null);
+const isSidebarCollapsed = ref(false);
+
+// Refs
+const chatMessagesRef = ref<{ scrollToBottom: () => void }>();
+const sidebarRef = ref<{ loadSessions: () => void }>();
+
+// WebSocket
+let ws: WebSocket | null = null;
+const WS_URL = import.meta.env.VITE_APP_WS_ENDPOINT;
+
+// ============ WebSocket 操作 ============
+const connectWebSocket = () => {
+  if (ws?.readyState === WebSocket.OPEN) return;
+
+  connectionStatus.value = "connecting";
+  error.value = "";
+
+  try {
+    const url = new URL("/api/v1/ai/chat/ws", WS_URL);
+    const token = Auth.getAccessToken();
+    if (token) url.searchParams.append("token", token);
+
+    ws = new WebSocket(url.toString());
+
+    ws.onopen = () => {
+      isConnected.value = true;
+      connectionStatus.value = "connected";
+      ElMessage.success("连接成功");
+    };
+
+    ws.onmessage = (event) => handleWebSocketMessage(event.data);
+
+    ws.onclose = () => {
+      isConnected.value = false;
+      connectionStatus.value = "disconnected";
+      finishLoadingMessages();
+    };
+
+    ws.onerror = () => {
+      isConnected.value = false;
+      connectionStatus.value = "disconnected";
+      ElMessage.error("连接失败，请检查服务器状态");
+      finishLoadingMessages();
+    };
+  } catch {
+    connectionStatus.value = "disconnected";
+    error.value = "无法创建连接";
+  }
+};
+
+const disconnectWebSocket = () => {
+  if (ws) {
+    ws.close(1000, "用户主动断开");
+    ws = null;
+  }
+  isConnected.value = false;
+  connectionStatus.value = "disconnected";
+  finishLoadingMessages();
+};
+
+const toggleConnection = () => {
+  if (isConnected.value) {
+    disconnectWebSocket();
+    ElMessage.info("已断开连接");
+  } else {
+    connectWebSocket();
+  }
+};
+
+// ============ 消息处理 ============
+const handleWebSocketMessage = (data: string) => {
+  const lastMessage = messages.value[messages.value.length - 1];
+  const content = data || "";
+
+  if (lastMessage?.type === "assistant" && lastMessage.loading) {
+    lastMessage.content += content;
+  } else {
+    addMessage("assistant", content);
+  }
+
+  chatMessagesRef.value?.scrollToBottom();
+};
+
+const addMessage = (type: "user" | "assistant", content: string, files?: UploadedFile[]) => {
+  messages.value.push({
+    id: generateId(),
+    type,
+    content,
+    timestamp: Date.now(),
+    collapsed: content.length > 200,
+    files,
+  });
+};
+
+const finishLoadingMessages = () => {
+  messages.value.forEach((msg) => {
+    if (msg.type === "assistant" && msg.loading) {
+      msg.loading = false;
+      msg.collapsed = msg.content.length > 200;
+    }
+  });
+};
+
+const generateId = () => {
+  return Date.now().toString(36) + Math.random().toString(36).slice(2);
+};
+
+// ============ 发送消息 ============
+const handleSendMessage = async (message: string, files?: UploadedFile[]) => {
+  if ((!message && !files) || !isConnected.value || sending.value) return;
+
+  // 结束上一个加载中的消息
+  finishLoadingMessages();
+
+  // 创建新会话（如果没有）
+  if (!currentSessionId.value) {
+    const success = await createNewSession(message);
+    if (!success) return;
+  }
+
+  // 添加用户消息
+  addMessage("user", message, files);
+
+  // 添加加载中的助手消息
+  messages.value.push({
+    id: generateId(),
+    type: "assistant",
+    content: "",
+    timestamp: Date.now(),
+    loading: true,
+  });
+
+  sending.value = true;
+  chatMessagesRef.value?.scrollToBottom();
+
+  try {
+    if (ws?.readyState === WebSocket.OPEN) {
+      ws.send(
+        JSON.stringify({
+          message,
+          session_id: currentSessionId.value,
+          files: files?.map((f) => ({ name: f.name, type: f.type, size: f.size })),
+        })
+      );
+    } else {
+      throw new Error("WebSocket 连接未建立");
+    }
+  } catch {
+    messages.value.pop();
+    error.value = "发送消息失败，请检查连接状态";
+  } finally {
+    sending.value = false;
+  }
+};
+
+const createNewSession = async (firstMessage: string): Promise<boolean> => {
+  try {
+    const title = firstMessage.slice(0, 20) + (firstMessage.length > 20 ? "..." : "");
+    const res = await AiChatAPI.createSession({ title });
+
+    if (res.data?.code === 0 || res.data?.success) {
+      currentSessionId.value = res.data.data?.id ?? null;
+      sidebarRef.value?.loadSessions();
+      return true;
+    }
+    throw new Error("创建会话失败");
+  } catch {
+    return false;
+  }
+};
+
+// ============ 会话操作 ============
+const handleSelectSession = async (session: ChatSession) => {
+  currentSessionId.value = session.id;
+  messages.value = [];
+
+  try {
+    const response = await AiChatAPI.getSessionDetail(session.id);
+    if (response.data?.code !== 0) {
+      return;
+    }
+
+    const sessionData = response.data.data || {};
+    const runs = sessionData.runs || [];
+
+    runs.forEach((run: any) => {
+      const runMessages = run.messages || [];
+      runMessages.forEach((msg: any) => {
+        if (msg.role === "user" || msg.role === "assistant") {
+          addMessage(msg.role, msg.content);
+        }
+      });
+    });
+
+    ElMessage.success(`已切换到会话：${session.title}`);
+  } catch {
+    ElMessage.error("获取会话详情失败");
+  }
+};
+
+const handleNewSession = () => {
+  currentSessionId.value = null;
+  messages.value = [];
+  ElMessage.success("已开启新对话");
+};
+
+const handleClearChat = async () => {
+  try {
+    await ElMessageBox.confirm("确定要清空当前对话吗？此操作不可恢复。", "确认清空", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    });
+    messages.value = [];
+    ElMessage.success("对话已清空");
+  } catch {
+    ElMessage.info("已取消清空对话");
+  }
+};
+
+const toggleSidebar = () => {
+  isSidebarCollapsed.value = !isSidebarCollapsed.value;
+};
+
+// ============ 生命周期 ============
+onMounted(connectWebSocket);
+onUnmounted(disconnectWebSocket);
+</script>
+
+<style lang="scss" scoped>
+.main-chat {
+  /* L2 内容面：与 AppMain 的 L0 画布（留白/间隙）区分开，避免与 gap 同色 */
+  --chat-area-bg: var(--el-bg-color-overlay);
+
+  height: 100%;
+  overflow: hidden;
+  background: var(--chat-area-bg);
+  border: 1px solid var(--el-border-color-light);
+  border-radius: 8px;
+  box-shadow: var(--el-box-shadow-light);
+
+  /* 与右侧同一表面色；与内容区的分界交给 Sidebar 的竖线即可 */
+  .sidebar-container {
+    width: 200px;
+    background: transparent;
+    transition: width 0.3s ease;
+
+    &.collapsed {
+      width: 64px;
+    }
+  }
+
+  .chat-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+    background: var(--chat-area-bg);
+  }
+
+  .chat-header {
+    height: auto;
+    padding: 0;
+    background: var(--chat-area-bg);
+    border-bottom: 1px solid var(--el-border-color-lighter);
+  }
+
+  .chat-main {
+    flex: 1;
+    overflow: hidden;
+    background: var(--chat-area-bg);
+  }
+
+  .chat-footer {
+    height: auto;
+    min-height: 80px;
+    padding: 0;
+    background: var(--chat-area-bg);
+    border-top: 1px solid var(--el-border-color-lighter);
+  }
+}
+</style>
diff --git a/frontend/new-web/src/views/module_ai/chat/types.ts b/frontend/new-web/src/views/module_ai/chat/types.ts
new file mode 100644
index 00000000..7c470ab2
--- /dev/null
+++ b/frontend/new-web/src/views/module_ai/chat/types.ts
@@ -0,0 +1,38 @@
+// 聊天消息类型
+export interface ChatMessage {
+  id: string;
+  type: "user" | "assistant";
+  content: string;
+  timestamp: number;
+  loading?: boolean;
+  collapsed?: boolean;
+  files?: UploadedFile[];
+}
+
+// 上传文件类型
+export interface UploadedFile {
+  id: string;
+  name: string;
+  size: number;
+  type: string;
+  url?: string;
+  file?: File;
+}
+
+// 会话消息类型（来自后端）
+export interface SessionMessage {
+  id: string;
+  role: "user" | "assistant";
+  content: string;
+  created_time?: string;
+}
+
+// 会话详情类型
+export interface SessionDetail {
+  id: string;
+  title: string;
+  created_time?: string;
+  updated_time?: string;
+  message_count: number;
+  messages: SessionMessage[];
+}
diff --git a/frontend/new-web/src/views/module_ai/memory/index.vue b/frontend/new-web/src/views/module_ai/memory/index.vue
new file mode 100644
index 00000000..b2847654
--- /dev/null
+++ b/frontend/new-web/src/views/module_ai/memory/index.vue
@@ -0,0 +1,599 @@
+<!-- AI智能助手会话列表 -->
+<template>
+  <div class="app-container">
+    <PageSearch
+      ref="searchRef"
+      :search-config="searchConfig"
+      @query-click="handleQueryClick"
+      @reset-click="handleResetClick"
+    />
+
+    <PageContent
+      ref="contentRef"
+      :content-config="contentConfig"
+      @add-click="handleOpenDialog('create')"
+    >
+      <template #table="{ data, loading, tableRef, onSelectionChange, pagination }">
+        <div class="data-table__content">
+          <el-table
+            :ref="tableRef as any"
+            v-loading="loading"
+            :data="data"
+            height="100%"
+            border
+            stripe
+            @selection-change="onSelectionChange"
+          >
+            <template #empty>
+              <el-empty :image-size="80" description="暂无数据" />
+            </template>
+            <el-table-column
+              v-if="tableColumns.find((col) => col.prop === 'selection')?.show"
+              type="selection"
+              min-width="55"
+              align="center"
+            />
+            <el-table-column
+              v-if="tableColumns.find((col) => col.prop === 'index')?.show"
+              fixed
+              label="序号"
+              min-width="60"
+            >
+              <template #default="scope">
+                {{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }}
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="tableColumns.find((col) => col.prop === 'session_id')?.show"
+              label="会话ID"
+              prop="session_id"
+              min-width="180"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="tableColumns.find((col) => col.prop === 'title')?.show"
+              label="标题"
+              prop="title"
+              min-width="200"
+            >
+              <template #default="scope">
+                <el-input
+                  v-if="editingRowId === scope.row.id"
+                  ref="titleInputRef"
+                  v-model="editingTitle"
+                  size="small"
+                  @blur="handleSaveTitle(scope.row)"
+                  @keyup.enter="handleSaveTitle(scope.row)"
+                />
+                <span
+                  v-else
+                  class="editable-cell"
+                  title="点击编辑"
+                  @click="handleEditTitle(scope.row)"
+                >
+                  {{ scope.row.title || "未命名会话" }}
+                  <el-icon class="edit-icon"><Edit /></el-icon>
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="tableColumns.find((col) => col.prop === 'user_id')?.show"
+              label="用户ID"
+              prop="user_id"
+              min-width="120"
+            />
+            <el-table-column
+              v-if="tableColumns.find((col) => col.prop === 'team_id')?.show"
+              label="团队ID"
+              prop="team_id"
+              min-width="120"
+            />
+            <el-table-column
+              v-if="tableColumns.find((col) => col.prop === 'team_name')?.show"
+              label="部门名称"
+              prop="team_name"
+              min-width="120"
+            />
+            <el-table-column
+              v-if="tableColumns.find((col) => col.prop === 'agent_id')?.show"
+              label="Agent ID"
+              prop="agent_id"
+              min-width="120"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="tableColumns.find((col) => col.prop === 'summary')?.show"
+              label="会话摘要"
+              prop="summary"
+              min-width="200"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="tableColumns.find((col) => col.prop === 'message_count')?.show"
+              label="消息数量"
+              prop="message_count"
+              min-width="100"
+              align="center"
+            />
+            <el-table-column
+              v-if="tableColumns.find((col) => col.prop === 'created_time')?.show"
+              label="创建时间"
+              prop="created_time"
+              min-width="180"
+            />
+            <el-table-column
+              v-if="tableColumns.find((col) => col.prop === 'updated_time')?.show"
+              label="更新时间"
+              prop="updated_time"
+              min-width="180"
+            />
+            <el-table-column
+              v-if="tableColumns.find((col) => col.prop === 'operation')?.show"
+              fixed="right"
+              label="操作"
+              align="center"
+              min-width="120"
+            >
+              <template #default="scope">
+                <el-button
+                  v-hasPerm="['module_ai:chat:detail']"
+                  type="info"
+                  size="small"
+                  link
+                  icon="View"
+                  @click="handleOpenDialog('detail', scope.row.id)"
+                >
+                  详情
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_ai:chat:delete']"
+                  type="danger"
+                  size="small"
+                  link
+                  icon="delete"
+                  @click="handleRowDelete(scope.row.id)"
+                >
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </template>
+    </PageContent>
+
+    <!-- 弹窗区域 -->
+    <EnhancedDialog
+      v-model="dialogVisible.visible"
+      :title="dialogVisible.title"
+      dialog-class="session-detail-dialog"
+      @close="handleCloseDialog"
+    >
+      <!-- 详情 -->
+      <template v-if="dialogVisible.type === 'detail'">
+        <el-descriptions :column="2" border>
+          <el-descriptions-item label="会话ID" :span="2">
+            {{ detailFormData.session_id }}
+          </el-descriptions-item>
+          <el-descriptions-item label="标题" :span="2">
+            {{ detailFormData.title }}
+          </el-descriptions-item>
+          <el-descriptions-item label="用户ID" :span="1">
+            {{ detailFormData.user_id }}
+          </el-descriptions-item>
+          <el-descriptions-item label="团队ID" :span="1">
+            {{ detailFormData.team_id }}
+          </el-descriptions-item>
+          <el-descriptions-item label="部门名称" :span="1">
+            {{ detailFormData.team_name || "未知部门" }}
+          </el-descriptions-item>
+          <el-descriptions-item label="Agent ID" :span="1">
+            {{ detailFormData.agent_id }}
+          </el-descriptions-item>
+          <el-descriptions-item label="创建时间" :span="1">
+            {{ detailFormData.created_time }}
+          </el-descriptions-item>
+          <el-descriptions-item label="更新时间" :span="1">
+            {{ detailFormData.updated_time }}
+          </el-descriptions-item>
+          <el-descriptions-item label="消息数量" :span="1">
+            {{ detailFormData.message_count }}
+          </el-descriptions-item>
+          <el-descriptions-item label="会话摘要" :span="2">
+            {{ detailFormData.summary || "无" }}
+          </el-descriptions-item>
+          <el-descriptions-item label="元数据" :span="2">
+            <pre v-if="detailFormData.metadata">{{
+              JSON.stringify(detailFormData.metadata, null, 2)
+            }}</pre>
+            <span v-else>无</span>
+          </el-descriptions-item>
+        </el-descriptions>
+
+        <!-- 消息列表 -->
+        <el-divider content-position="left">消息记录</el-divider>
+        <el-timeline v-if="detailFormData.messages && detailFormData.messages.length > 0">
+          <el-timeline-item
+            v-for="(msg, index) in detailFormData.messages"
+            :key="index"
+            :type="msg.role === 'user' ? 'primary' : 'success'"
+            :icon="msg.role === 'user' ? 'User' : 'ChatDotRound'"
+          >
+            <div class="message-item">
+              <div class="message-header">
+                <el-tag size="small" :type="msg.role === 'user' ? 'primary' : 'success'">
+                  {{ msg.role === "user" ? "用户" : "助手" }}
+                </el-tag>
+                <span v-if="msg.created_at" class="message-time">
+                  {{ formatTime(msg.created_at) }}
+                </span>
+              </div>
+              <div class="message-content">{{ msg.content }}</div>
+            </div>
+          </el-timeline-item>
+        </el-timeline>
+        <el-empty v-else description="暂无消息记录" :image-size="60" />
+      </template>
+      <!-- 新增表单 -->
+      <template v-else>
+        <el-form
+          ref="dataFormRef"
+          :model="formData"
+          :rules="rules"
+          label-suffix=":"
+          label-width="auto"
+          label-position="right"
+          inline
+        >
+          <el-form-item label="标题" prop="title">
+            <el-input v-model="formData.title" placeholder="请输入标题" :maxlength="100" />
+          </el-form-item>
+        </el-form>
+      </template>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <!-- 详情弹窗不需要确定按钮的提交逻辑 -->
+          <el-button @click="handleCloseDialog">取消</el-button>
+          <el-button v-if="dialogVisible.type !== 'detail'" type="primary" @click="handleSubmit">
+            确定
+          </el-button>
+          <el-button v-else type="primary" @click="handleCloseDialog">确定</el-button>
+        </div>
+      </template>
+    </EnhancedDialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  name: "ChatSession",
+  inheritAttrs: false,
+});
+
+import { ref, reactive, nextTick } from "vue";
+import { ElMessage } from "element-plus";
+import AiChatAPI, { ChatSession } from "@/api/module_ai/chat";
+import EnhancedDialog from "@/components/CURD/EnhancedDialog.vue";
+import PageSearch from "@/components/CURD/PageSearch.vue";
+import PageContent from "@/components/CURD/PageContent.vue";
+import { useCrudList } from "@/components/CURD/useCrudList";
+import type { ISearchConfig, IContentConfig } from "@/components/CURD/types";
+import { Edit } from "@element-plus/icons-vue";
+import { formatToDateTime } from "@/utils/dateUtil";
+
+const { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList } = useCrudList();
+const dataFormRef = ref();
+const titleInputRef = ref();
+
+// 编辑标题相关
+const editingRowId = ref<string | null>(null);
+const editingTitle = ref("");
+
+// 表格列配置
+const tableColumns = ref([
+  { prop: "selection", label: "选择框", show: true },
+  { prop: "index", label: "序号", show: true },
+  { prop: "session_id", label: "会话ID", show: true },
+  { prop: "title", label: "标题", show: true },
+  { prop: "user_id", label: "用户ID", show: false },
+  { prop: "team_id", label: "团队ID", show: false },
+  { prop: "team_name", label: "部门名称", show: true },
+  { prop: "agent_id", label: "Agent ID", show: false },
+  { prop: "summary", label: "会话摘要", show: false },
+  { prop: "message_count", label: "消息数量", show: true },
+  { prop: "created_time", label: "创建时间", show: true },
+  { prop: "updated_time", label: "更新时间", show: true },
+  { prop: "operation", label: "操作", show: true },
+]);
+
+// 详情表单
+const detailFormData = ref<ChatSession>({
+  session_id: "",
+  agent_id: null,
+  team_id: null,
+  team_name: null,
+  workflow_id: null,
+  user_id: null,
+  session_data: null,
+  agent_data: null,
+  team_data: null,
+  workflow_data: null,
+  metadata: null,
+  runs: null,
+  summary: null,
+  created_at: null,
+  updated_at: null,
+  id: "",
+  title: null,
+  created_time: null,
+  updated_time: null,
+  message_count: 0,
+  messages: [],
+});
+const searchConfig = reactive<ISearchConfig>({
+  permPrefix: "module_ai:chat",
+  colon: true,
+  isExpandable: true,
+  showNumber: 1,
+  form: { labelWidth: "auto" },
+  formItems: [
+    {
+      prop: "title",
+      label: "标题",
+      type: "input",
+      attrs: { placeholder: "请输入标题", clearable: true },
+    },
+    {
+      prop: "created_at",
+      label: "创建时间",
+      type: "date-picker",
+      attrs: {
+        type: "datetimerange",
+        rangeSeparator: "至",
+        startPlaceholder: "开始日期",
+        endPlaceholder: "结束日期",
+        format: "YYYY-MM-DD HH:mm:ss",
+        valueFormat: "YYYY-MM-DD HH:mm:ss",
+        style: { width: "340px" },
+      },
+    },
+    {
+      prop: "updated_at",
+      label: "更新时间",
+      type: "date-picker",
+      attrs: {
+        type: "datetimerange",
+        rangeSeparator: "至",
+        startPlaceholder: "开始日期",
+        endPlaceholder: "结束日期",
+        format: "YYYY-MM-DD HH:mm:ss",
+        valueFormat: "YYYY-MM-DD HH:mm:ss",
+        style: { width: "340px" },
+      },
+    },
+  ],
+});
+
+const contentConfig = reactive<IContentConfig>({
+  permPrefix: "module_ai:chat",
+  cols: [],
+  hideColumnFilter: true,
+  toolbar: ["add", "delete", "patch"],
+  defaultToolbar: ["import", "export", "refresh", "filter"],
+  pagination: {
+    pageSize: 10,
+    pageSizes: [10, 20, 30, 50],
+  },
+  request: { page_no: "page_no", page_size: "page_size" },
+  indexAction: async (params) => {
+    const res = await AiChatAPI.getSessionList(
+      params as {
+        page_no: number;
+        page_size: number;
+        title?: string;
+        created_at?: string[];
+        updated_at?: string[];
+      }
+    );
+    return {
+      total: res.data.data?.total ?? 0,
+      list: res.data.data?.items ?? [],
+    };
+  },
+  deleteAction: (ids) =>
+    AiChatAPI.deleteSession(
+      ids
+        .split(",")
+        .map((s) => s.trim())
+        .filter(Boolean)
+    ),
+  deleteConfirm: {
+    title: "警告",
+    message: "确认删除该项数据?",
+    type: "warning",
+  },
+});
+
+// 编辑表单
+const formData = reactive({
+  id: undefined as string | undefined,
+  title: "",
+});
+
+// 弹窗状态
+const dialogVisible = reactive({
+  title: "",
+  visible: false,
+  type: "create" as "create" | "detail",
+});
+
+// 表单验证规则
+const rules = reactive({
+  title: [{ required: true, message: "请输入标题", trigger: "blur" }],
+});
+
+// 格式化时间
+function formatTime(timestamp: number | null): string {
+  if (!timestamp) return "";
+  return formatToDateTime(new Date(timestamp * 1000));
+}
+
+function handleRowDelete(id: string) {
+  contentRef.value?.handleDelete(id);
+}
+
+// 定义初始表单数据常量
+const initialFormData = {
+  id: undefined as string | undefined,
+  title: "",
+};
+
+// 重置表单
+async function resetForm() {
+  if (dataFormRef.value) {
+    dataFormRef.value.resetFields();
+    dataFormRef.value.clearValidate();
+  }
+  // 完全重置 formData 为初始状态
+  Object.assign(formData, initialFormData);
+}
+
+// 关闭弹窗
+async function handleCloseDialog() {
+  dialogVisible.visible = false;
+  resetForm();
+}
+
+// 打开弹窗
+async function handleOpenDialog(type: "create" | "detail", id?: string) {
+  resetForm();
+  dialogVisible.type = type;
+  if (id) {
+    const response = await AiChatAPI.getSessionDetail(id);
+    if (type === "detail") {
+      dialogVisible.title = "详情";
+      const sessionData = response.data.data || {};
+      Object.assign(detailFormData.value, sessionData);
+    }
+  } else {
+    dialogVisible.title = "新增会话";
+    formData.id = undefined;
+  }
+  dialogVisible.visible = true;
+}
+
+// 处理编辑标题
+function handleEditTitle(row: ChatSession) {
+  editingRowId.value = row.id;
+  editingTitle.value = row.title || "";
+  nextTick(() => {
+    titleInputRef.value?.focus();
+  });
+}
+
+// 处理保存标题
+async function handleSaveTitle(row: ChatSession) {
+  if (editingRowId.value !== row.id) return;
+
+  const newTitle = editingTitle.value.trim();
+  if (!newTitle) {
+    ElMessage.warning("标题不能为空");
+    return;
+  }
+
+  if (newTitle === row.title) {
+    editingRowId.value = null;
+    return;
+  }
+
+  try {
+    await AiChatAPI.updateSession(row.id, { title: newTitle });
+    ElMessage.success("更新成功");
+    row.title = newTitle;
+    editingRowId.value = null;
+  } catch (error: any) {
+    console.error(error);
+    ElMessage.error("更新失败");
+  }
+}
+
+// 提交表单（防抖）
+async function handleSubmit() {
+  dataFormRef.value.validate(async (valid: any) => {
+    if (valid) {
+      const submitData = { ...formData };
+      try {
+        await AiChatAPI.createSession({ title: submitData.title });
+        dialogVisible.visible = false;
+        resetForm();
+        refreshList();
+      } catch (error: any) {
+        console.error(error);
+      }
+    }
+  });
+}
+</script>
+
+<style lang="scss" scoped>
+.edit-icon {
+  font-size: 12px;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.editable-cell {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  cursor: pointer;
+
+  &:hover {
+    color: var(--el-color-primary);
+
+    .edit-icon {
+      opacity: 1;
+    }
+  }
+}
+
+.message-item {
+  .message-header {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    margin-bottom: 8px;
+  }
+
+  .message-time {
+    font-size: 12px;
+    color: var(--el-text-color-secondary);
+  }
+
+  .message-content {
+    padding: 8px 12px;
+    word-break: break-all;
+    white-space: pre-wrap;
+    background: var(--el-fill-color-light);
+    border-radius: 4px;
+  }
+}
+
+pre {
+  max-height: 200px;
+  padding: 8px;
+  margin: 0;
+  overflow: auto;
+  font-size: 12px;
+  background: var(--el-fill-color-light);
+  border-radius: 4px;
+}
+
+// 弹窗样式 - 滚动条在弹窗内
+:deep(.session-detail-dialog .el-dialog__body) {
+  max-height: 60vh;
+  padding: 20px;
+  overflow-y: auto;
+}
+</style>
diff --git a/frontend/new-web/src/views/module_application/portal/index.vue b/frontend/new-web/src/views/module_application/portal/index.vue
new file mode 100644
index 00000000..86587c3f
--- /dev/null
+++ b/frontend/new-web/src/views/module_application/portal/index.vue
@@ -0,0 +1,533 @@
+<!-- 我的应用管理 -->
+<template>
+  <div class="app-container">
+    <PageSearch
+      ref="searchRef"
+      :search-config="searchConfig"
+      @query-click="handleQueryClick"
+      @reset-click="handleResetClick"
+    />
+
+    <PageContent ref="contentRef" class="flex-1 min-h-0" :content-config="contentConfig">
+      <template #header>
+        <div class="card-header">
+          <span class="market-title">应用市场</span>
+          <el-button
+            v-hasPerm="['module_application:portal:create']"
+            type="primary"
+            icon="plus"
+            @click="handleCreateApp"
+          >
+            创建应用
+          </el-button>
+        </div>
+      </template>
+
+      <template #table="{ data, loading }">
+        <div v-loading="loading" class="app-grid-container">
+          <div v-if="!loading && data.length === 0" class="app-grid-empty">
+            <el-empty :image-size="88" description="暂无应用" />
+          </div>
+          <div v-else class="grid-wrapper">
+            <div
+              v-for="app in data"
+              :key="app.id"
+              class="app-grid-item"
+              @click="app.status && app.id && openAppInternal()"
+            >
+              <el-card shadow="never" class="app-card" :class="{ 'card-disabled': !app.status }">
+                <template #header>
+                  <div class="app-info-header">
+                    <el-avatar :size="40" :src="app.icon_url">
+                      <el-icon size="20"><Monitor /></el-icon>
+                    </el-avatar>
+                    <h3 class="app-name" :title="app.name">{{ app.name }}</h3>
+                    <el-tag
+                      :type="app.status ? 'success' : 'info'"
+                      size="small"
+                      effect="plain"
+                      class="app-status"
+                    >
+                      {{ app.status ? "启用" : "停用" }}
+                    </el-tag>
+                  </div>
+                </template>
+
+                <template #default>
+                  <p v-if="app.description" class="app-description">{{ app.description }}</p>
+                </template>
+
+                <template #footer>
+                  <div class="card-footer-row">
+                    <div class="card-meta">
+                      {{ app.created_by?.name || "—" }} · {{ formatTime(app.created_time) }}
+                    </div>
+                    <div class="card-actions" @click.stop>
+                      <el-button
+                        v-hasPerm="['module_application:portal:update']"
+                        type="primary"
+                        link
+                        icon="Edit"
+                        @click="handleAppAction('edit', app)"
+                      />
+                      <el-button
+                        v-hasPerm="['module_application:portal:delete']"
+                        type="danger"
+                        link
+                        icon="Delete"
+                        @click="handleAppAction('delete', app)"
+                      />
+                    </div>
+                  </div>
+                </template>
+              </el-card>
+            </div>
+          </div>
+        </div>
+      </template>
+    </PageContent>
+
+    <!-- 应用创建/编辑抽屉 -->
+    <EnhancedDrawer
+      v-model="dialogVisible"
+      :title="dialogTitle"
+      :size="drawerSize"
+      direction="rtl"
+      @close="handleCloseDialog"
+    >
+      <el-form
+        ref="formRef"
+        :model="formData"
+        :rules="formRules"
+        label-width="100px"
+        label-position="right"
+      >
+        <el-form-item label="应用名称" prop="name">
+          <el-input v-model="formData.name" placeholder="请输入应用名称" />
+        </el-form-item>
+
+        <el-form-item label="访问地址" prop="access_url">
+          <el-input v-model="formData.access_url" placeholder="请输入访问地址" />
+        </el-form-item>
+
+        <el-form-item label="图标地址" prop="icon_url">
+          <el-input v-model="formData.icon_url" placeholder="请输入图标地址" />
+        </el-form-item>
+
+        <el-form-item label="应用状态" prop="status">
+          <el-radio-group v-model="formData.status">
+            <el-radio value="0">启用</el-radio>
+            <el-radio value="1">停用</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item label="应用描述" prop="description">
+          <el-input
+            v-model="formData.description"
+            type="textarea"
+            :rows="4"
+            placeholder="请输入应用描述"
+            maxlength="200"
+            show-word-limit
+          />
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="handleCloseDialog">取消</el-button>
+          <el-button type="primary" @click="handleSubmit">确定</el-button>
+        </div>
+      </template>
+    </EnhancedDrawer>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  name: "PortalApplication",
+  inheritAttrs: false,
+});
+
+import { useAppStore } from "@/store/modules/app.store";
+import { DeviceEnum } from "@/enums/settings/device.enum";
+import { Monitor } from "@element-plus/icons-vue";
+import ApplicationAPI, {
+  type ApplicationForm,
+  type ApplicationInfo,
+  type ApplicationPageQuery,
+} from "@/api/module_application/portal";
+import { formatToDateTime } from "@/utils/dateUtil";
+import PageSearch from "@/components/CURD/PageSearch.vue";
+import PageContent from "@/components/CURD/PageContent.vue";
+import EnhancedDrawer from "@/components/CURD/EnhancedDrawer.vue";
+import UserTableSelect from "@/views/module_system/user/components/UserTableSelect.vue";
+import type { IContentConfig, ISearchConfig } from "@/components/CURD/types";
+import { useCrudList } from "@/components/CURD/useCrudList";
+import { computed, markRaw, nextTick, reactive, ref } from "vue";
+
+const appStore = useAppStore();
+
+const { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList } = useCrudList();
+const formRef = ref();
+const dialogVisible = ref(false);
+const dialogType = ref<"create" | "edit">("create");
+const currentApp = ref<ApplicationInfo | null>(null);
+
+function triggerUserSearch() {
+  nextTick(() => refreshList());
+}
+
+const searchConfig = reactive<ISearchConfig>({
+  permPrefix: "module_application:portal",
+  colon: true,
+  isExpandable: true,
+  showNumber: 2,
+  form: { labelWidth: "auto" },
+  formItems: [
+    {
+      prop: "name",
+      label: "应用名称",
+      type: "input",
+      attrs: { placeholder: "请输入应用名称", clearable: true },
+    },
+    {
+      prop: "status",
+      label: "状态",
+      type: "select",
+      options: [
+        { label: "启用", value: true },
+        { label: "停用", value: false },
+      ],
+      attrs: { placeholder: "请选择状态", clearable: true, style: { width: "170px" } },
+    },
+    {
+      prop: "created_id",
+      label: "创建人",
+      type: "user-table-select",
+      initialValue: null,
+      events: {
+        "confirm-click": triggerUserSearch,
+        "clear-click": triggerUserSearch,
+      },
+    },
+    {
+      prop: "updated_id",
+      label: "更新人",
+      type: "user-table-select",
+      initialValue: null,
+      events: {
+        "confirm-click": triggerUserSearch,
+        "clear-click": triggerUserSearch,
+      },
+    },
+  ],
+  customComponents: {
+    "user-table-select": markRaw(UserTableSelect),
+  },
+});
+
+const contentConfig = reactive<IContentConfig<ApplicationPageQuery>>({
+  permPrefix: "module_application:portal",
+  cols: [],
+  hideColumnFilter: true,
+  showToolbar: false,
+  cardShadow: "hover",
+  toolbar: [],
+  defaultToolbar: [],
+  pagination: {
+    pageSize: 12,
+    pageSizes: [12, 24, 48],
+  },
+  request: { page_no: "page_no", page_size: "page_size" },
+  indexAction: async (params) => {
+    const res = await ApplicationAPI.listApp(params as ApplicationPageQuery);
+    return {
+      total: res.data.data.total,
+      list: res.data.data.items,
+    };
+  },
+});
+
+// 表单数据
+const formData = reactive<ApplicationForm>({
+  name: "",
+  access_url: "",
+  icon_url: "",
+  status: "0",
+  description: "",
+});
+
+// 表单验证规则
+const formRules = reactive({
+  name: [
+    { required: true, message: "请输入应用名称", trigger: "blur" },
+    { min: 2, max: 30, message: "长度在 2 到 30 个字符", trigger: "blur" },
+  ],
+  access_url: [
+    { required: true, message: "请输入访问地址", trigger: "blur" },
+    { type: "url" as const, message: "请输入正确的URL格式", trigger: "blur" },
+  ],
+  icon_url: [
+    { required: true, message: "请输入图标地址", trigger: "blur" },
+    { type: "url" as const, message: "请输入正确的URL格式", trigger: "blur" },
+  ],
+  status: [{ required: true, message: "请选择应用状态", trigger: "change" }],
+});
+
+// 计算属性
+const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? "500px" : "90%"));
+const dialogTitle = computed(() => (dialogType.value === "create" ? "创建应用" : "编辑应用"));
+
+// 格式化时间
+const formatTime = (time: string | undefined) => {
+  if (!time) return "—";
+  return formatToDateTime(time, "YYYY-MM-DD HH:mm:ss");
+};
+
+// 创建应用
+function handleCreateApp() {
+  dialogType.value = "create";
+  resetForm();
+  dialogVisible.value = true;
+}
+
+// 编辑应用
+function handleEditApp(app: ApplicationInfo) {
+  dialogType.value = "edit";
+  currentApp.value = app;
+  Object.assign(formData, app);
+  dialogVisible.value = true;
+}
+
+// 删除应用
+async function handleDeleteApp(app: ApplicationInfo) {
+  try {
+    await ElMessageBox.confirm("确认删除该应用？", "警告", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    });
+
+    await ApplicationAPI.deleteApp([app.id!]);
+    await refreshList();
+  } catch (error) {
+    if (error !== "cancel") {
+      console.error("删除应用失败:", error);
+    }
+  }
+}
+
+// 应用操作
+async function handleAppAction(command: string, app: ApplicationInfo) {
+  switch (command) {
+    case "edit":
+      handleEditApp(app);
+      break;
+    case "delete":
+      await handleDeleteApp(app);
+      break;
+  }
+}
+
+// 内部打开应用
+function openAppInternal() {
+  ElMessage.warning("插件应用点击，业务场景暂时开放中。。。");
+  return;
+}
+
+// 重置表单
+function resetForm() {
+  Object.assign(formData, {
+    name: "",
+    access_url: "",
+    icon_url: "",
+    status: "0",
+    description: "",
+  });
+  formRef.value?.resetFields();
+}
+
+// 关闭弹窗
+function handleCloseDialog() {
+  dialogVisible.value = false;
+  resetForm();
+}
+
+// 提交表单
+async function handleSubmit() {
+  try {
+    await formRef.value?.validate();
+
+    if (dialogType.value === "create") {
+      await ApplicationAPI.createApp(formData);
+    } else {
+      await ApplicationAPI.updateApp(currentApp.value!.id!, formData);
+    }
+
+    dialogVisible.value = false;
+    resetForm();
+    await refreshList();
+  } catch (error) {
+    console.error("提交失败:", error);
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+/* 高度交给外层 flex：app-container + PageContent(flex-1 min-h-0)，勿再用 100vh 计算，否则会超出 app-main、底部 padding 不显 */
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.market-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+}
+
+.app-grid-container {
+  flex: 1;
+  min-height: 200px;
+}
+
+.app-grid-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 220px;
+}
+
+.grid-wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 16px;
+}
+
+.app-grid-item {
+  min-width: 0;
+}
+
+.app-card {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  height: 100%;
+  min-height: 120px;
+  cursor: pointer;
+  transition: box-shadow 0.2s ease;
+
+  &:hover:not(.card-disabled) {
+    box-shadow: var(--el-box-shadow-light);
+  }
+
+  &.card-disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+
+  /* 仅保留底栏一条横线，避免与表头下边框重复成「双线」 */
+  :deep(.el-card__header) {
+    padding: 14px 14px 12px;
+    border-bottom: none;
+  }
+
+  :deep(.el-card__body) {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    justify-content: center;
+    min-height: 0;
+    padding: 12px 14px;
+  }
+
+  :deep(.el-card__footer) {
+    padding: 10px 14px 14px;
+    margin-top: auto;
+  }
+}
+
+.app-info-header {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  min-width: 0;
+}
+
+.app-name {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 15px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.app-status {
+  flex-shrink: 0;
+}
+
+.card-footer-row {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 28px;
+}
+
+.card-actions {
+  display: inline-flex;
+  flex-shrink: 0;
+  gap: 0;
+  align-items: center;
+}
+
+.app-description {
+  display: -webkit-box;
+  margin: 0;
+  overflow: hidden;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  font-size: 13px;
+  line-height: 1.55;
+  color: var(--el-text-color-secondary);
+  -webkit-box-orient: vertical;
+}
+
+.card-meta {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--el-text-color-placeholder);
+  white-space: nowrap;
+}
+
+@media (width <= 480px) {
+  .grid-wrapper {
+    grid-template-columns: 1fr;
+  }
+
+  .card-footer-row {
+    flex-wrap: wrap;
+    gap: 8px;
+    min-height: 0;
+  }
+
+  .card-meta {
+    flex: 1 1 100%;
+    word-break: break-all;
+    white-space: normal;
+  }
+
+  .card-actions {
+    margin-left: auto;
+  }
+}
+</style>
diff --git a/frontend/new-web/src/views/module_common/docs/index.vue b/frontend/new-web/src/views/module_common/docs/index.vue
new file mode 100644
index 00000000..9995ce2b
--- /dev/null
+++ b/frontend/new-web/src/views/module_common/docs/index.vue
@@ -0,0 +1,21 @@
+<!-- 接口文档 -->
+<template>
+  <div class="app-container">
+    <Frame :src="url" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+  name: "Docs",
+  inheritAttrs: false,
+});
+
+const url = ref(import.meta.env.VITE_APP_BASE_API + "/docs");
+
+onBeforeUnmount(() => {
+  window.onresize = null;
+});
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/frontend/new-web/src/views/module_common/ljdoc/index.vue b/frontend/new-web/src/views/module_common/ljdoc/index.vue
new file mode 100644
index 00000000..a6ddab50
--- /dev/null
+++ b/frontend/new-web/src/views/module_common/ljdoc/index.vue
@@ -0,0 +1,21 @@
+<!-- 接口文档 -->
+<template>
+  <div class="app-container">
+    <Frame :src="url" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+  name: "Docs",
+  inheritAttrs: false,
+});
+
+const url = ref(import.meta.env.VITE_APP_BASE_API + "/ljdoc");
+
+onBeforeUnmount(() => {
+  window.onresize = null;
+});
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/frontend/new-web/src/views/module_common/redoc/index.vue b/frontend/new-web/src/views/module_common/redoc/index.vue
new file mode 100644
index 00000000..659242cd
--- /dev/null
+++ b/frontend/new-web/src/views/module_common/redoc/index.vue
@@ -0,0 +1,21 @@
+<!-- 接口文档 -->
+<template>
+  <div class="app-container">
+    <Frame :src="url" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+  name: "Redoc",
+  inheritAttrs: false,
+});
+
+const url = ref(import.meta.env.VITE_APP_BASE_API + "/redoc");
+
+onBeforeUnmount(() => {
+  window.onresize = null;
+});
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/frontend/new-web/src/views/module_example/demo/index.vue b/frontend/new-web/src/views/module_example/demo/index.vue
new file mode 100644
index 00000000..d7155716
--- /dev/null
+++ b/frontend/new-web/src/views/module_example/demo/index.vue
@@ -0,0 +1,777 @@
+<!-- 演示示例：PageSearch + PageContent CRUD 封装 -->
+<template>
+  <div class="app-container">
+    <PageSearch
+      ref="searchRef"
+      :search-config="searchConfig"
+      @query-click="handleQueryClick"
+      @reset-click="handleResetClick"
+    />
+
+    <PageContent
+      ref="contentRef"
+      :content-config="contentConfig"
+      @add-click="handleOpenDialog('create')"
+    >
+      <!-- 与 PageContent 默认结构一致：不再套一层 data-table__toolbar（外层已由组件提供） -->
+      <template #toolbar="{ toolbarRight, onToolbar, removeIds, cols }">
+        <CrudToolbarLeft
+          :remove-ids="removeIds"
+          :perm-create="['module_example:demo:create']"
+          :perm-delete="['module_example:demo:delete']"
+          :perm-patch="['module_example:demo:patch']"
+          @add="handleOpenDialog('create')"
+          @delete="onToolbar('delete')"
+          @more="handleMoreClick"
+        />
+        <div class="data-table__toolbar--right">
+          <CrudToolbarRight :buttons="toolbarRight" :cols="cols" :on-toolbar="onToolbar" />
+        </div>
+      </template>
+
+      <template #table="{ data, loading, tableRef, onSelectionChange, pagination }">
+        <div class="data-table__content">
+          <el-table
+            :ref="tableRef as any"
+            v-loading="loading"
+            :data="data"
+            height="100%"
+            border
+            stripe
+            @selection-change="onSelectionChange"
+          >
+            <template #empty>
+              <el-empty :image-size="80" description="暂无数据" />
+            </template>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'selection')?.show"
+              type="selection"
+              min-width="55"
+              align="center"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'index')?.show"
+              fixed
+              label="序号"
+              min-width="60"
+            >
+              <template #default="scope">
+                {{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }}
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'name')?.show"
+              label="名称"
+              prop="name"
+              min-width="140"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'uuid')?.show"
+              label="UUID"
+              prop="uuid"
+              min-width="180"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'status')?.show"
+              label="状态"
+              prop="status"
+              min-width="120"
+              show-overflow-tooltip
+            >
+              <template #default="scope">
+                <el-tag :type="scope.row.status ? 'success' : 'info'">
+                  {{ scope.row.status ? "启用" : "停用" }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'a')?.show"
+              label="整数"
+              prop="a"
+              min-width="100"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'b')?.show"
+              label="大整数"
+              prop="b"
+              min-width="120"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'c')?.show"
+              label="浮点数"
+              prop="c"
+              min-width="100"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'd')?.show"
+              label="布尔值"
+              prop="d"
+              min-width="100"
+              show-overflow-tooltip
+            >
+              <template #default="scope">
+                <el-tag :type="scope.row.d ? 'success' : 'danger'">
+                  {{ scope.row.d ? "是" : "否" }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'e')?.show"
+              label="日期"
+              prop="e"
+              min-width="120"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'f')?.show"
+              label="时间"
+              prop="f"
+              min-width="120"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'g')?.show"
+              label="日期时间"
+              prop="g"
+              min-width="180"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'h')?.show"
+              label="长文本"
+              prop="h"
+              min-width="140"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'description')?.show"
+              label="描述"
+              prop="description"
+              min-width="140"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'created_time')?.show"
+              label="创建时间"
+              prop="created_time"
+              min-width="180"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'updated_time')?.show"
+              label="更新时间"
+              prop="updated_time"
+              min-width="180"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'created_id')?.show"
+              label="创建人"
+              prop="created_id"
+              min-width="120"
+              show-overflow-tooltip
+            >
+              <template #default="scope">
+                <el-tag>{{ scope.row.created_by?.name }}</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'updated_id')?.show"
+              label="更新人"
+              prop="updated_id"
+              min-width="120"
+              show-overflow-tooltip
+            >
+              <template #default="scope">
+                <el-tag>{{ scope.row.updated_by?.name }}</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'operation')?.show"
+              fixed="right"
+              label="操作"
+              align="center"
+              min-width="200"
+            >
+              <template #default="scope">
+                <el-button
+                  v-hasPerm="['module_example:demo:detail']"
+                  type="info"
+                  size="small"
+                  link
+                  icon="View"
+                  @click="handleOpenDialog('detail', scope.row.id)"
+                >
+                  详情
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_example:demo:update']"
+                  type="primary"
+                  size="small"
+                  link
+                  icon="edit"
+                  @click="handleOpenDialog('update', scope.row.id)"
+                >
+                  编辑
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_example:demo:delete']"
+                  type="danger"
+                  size="small"
+                  link
+                  icon="delete"
+                  @click="handleRowDelete(scope.row.id)"
+                >
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </template>
+    </PageContent>
+
+    <EnhancedDialog
+      v-model="dialogVisible.visible"
+      :title="dialogVisible.title"
+      width="920px"
+      @close="handleCloseDialog"
+    >
+      <template v-if="dialogVisible.type === 'detail'">
+        <el-descriptions :column="4" border>
+          <el-descriptions-item label="名称" :span="2">
+            {{ detailFormData.name }}
+          </el-descriptions-item>
+          <el-descriptions-item label="UUID" :span="2">
+            {{ detailFormData.uuid }}
+          </el-descriptions-item>
+          <el-descriptions-item label="状态" :span="2">
+            <el-tag :type="detailFormData.status == '0' ? 'success' : 'danger'">
+              {{ detailFormData.status == "0" ? "启用" : "停用" }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="整数" :span="2">
+            {{ detailFormData.a }}
+          </el-descriptions-item>
+          <el-descriptions-item label="大整数" :span="2">
+            {{ detailFormData.b }}
+          </el-descriptions-item>
+          <el-descriptions-item label="浮点数" :span="2">
+            {{ detailFormData.c }}
+          </el-descriptions-item>
+          <el-descriptions-item label="布尔值" :span="2">
+            <el-tag :type="detailFormData.d ? 'success' : 'danger'">
+              {{ detailFormData.d ? "是" : "否" }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="日期" :span="2">
+            {{ detailFormData.e }}
+          </el-descriptions-item>
+          <el-descriptions-item label="时间" :span="2">
+            {{ detailFormData.f }}
+          </el-descriptions-item>
+          <el-descriptions-item label="日期时间" :span="2">
+            {{ detailFormData.g }}
+          </el-descriptions-item>
+          <el-descriptions-item label="长文本" :span="2">
+            {{ detailFormData.h }}
+          </el-descriptions-item>
+          <el-descriptions-item label="元数据" :span="2">
+            <JsonPretty :value="detailFormData.i" height="140px" />
+          </el-descriptions-item>
+          <el-descriptions-item label="描述" :span="2">
+            {{ detailFormData.description }}
+          </el-descriptions-item>
+          <el-descriptions-item label="创建人" :span="2">
+            {{ detailFormData.created_by?.name }}
+          </el-descriptions-item>
+          <el-descriptions-item label="更新人" :span="2">
+            {{ detailFormData.updated_by?.name }}
+          </el-descriptions-item>
+          <el-descriptions-item label="创建时间" :span="2">
+            {{ detailFormData.created_time }}
+          </el-descriptions-item>
+          <el-descriptions-item label="更新时间" :span="2">
+            {{ detailFormData.updated_time }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </template>
+      <template v-else>
+        <el-form
+          ref="dataFormRef"
+          :model="formData"
+          :rules="rules"
+          label-suffix=":"
+          label-width="auto"
+          label-position="right"
+          inline
+        >
+          <el-form-item label="名称" prop="name">
+            <el-input v-model="formData.name" placeholder="请输入名称" :maxlength="50" />
+          </el-form-item>
+          <el-form-item label="状态" prop="status">
+            <el-radio-group v-model="formData.status">
+              <el-radio value="0">启用</el-radio>
+              <el-radio value="1">停用</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="整数" prop="a">
+            <el-input-number v-model="formData.a" placeholder="请输入整数" />
+          </el-form-item>
+          <el-form-item label="大整数" prop="b">
+            <el-input-number v-model="formData.b" placeholder="请输入大整数" />
+          </el-form-item>
+          <el-form-item label="浮点数" prop="c">
+            <el-input-number
+              v-model="formData.c"
+              placeholder="请输入浮点数"
+              :step="0.01"
+              :precision="2"
+            />
+          </el-form-item>
+          <el-form-item label="布尔值" prop="d">
+            <el-switch v-model="formData.d" />
+          </el-form-item>
+          <el-form-item label="日期" prop="e">
+            <el-date-picker
+              v-model="formData.e"
+              type="date"
+              placeholder="请选择日期"
+              style="width: 100%"
+              value-format="YYYY-MM-DD"
+            />
+          </el-form-item>
+          <el-form-item label="时间" prop="f">
+            <el-time-picker
+              v-model="formData.f"
+              placeholder="请选择时间"
+              style="width: 100%"
+              value-format="HH:mm:ss"
+            />
+          </el-form-item>
+          <el-form-item label="日期时间" prop="g">
+            <el-date-picker
+              v-model="formData.g"
+              type="datetime"
+              placeholder="请选择日期时间"
+              style="width: 100%"
+              value-format="YYYY-MM-DD HH:mm:ss"
+            />
+          </el-form-item>
+          <el-form-item label="长文本" prop="h">
+            <el-input v-model="formData.h" :rows="4" type="textarea" placeholder="请输入长文本" />
+          </el-form-item>
+          <el-form-item label="描述" prop="description">
+            <el-input
+              v-model="formData.description"
+              :rows="4"
+              :maxlength="100"
+              show-word-limit
+              type="textarea"
+              placeholder="请输入描述"
+            />
+          </el-form-item>
+          <el-form-item label="元数据" prop="i">
+            <div class="flex flex-col gap-2">
+              <div
+                v-for="(item, index) in metadataList"
+                :key="index"
+                class="flex items-center gap-2"
+              >
+                <el-input v-model="item.key" placeholder="键" />
+                <el-input v-model="item.value" placeholder="值" />
+                <el-button
+                  type="primary"
+                  icon="Plus"
+                  circle
+                  @click="metadataList.push({ key: '', value: '' })"
+                />
+                <el-button
+                  type="danger"
+                  icon="Delete"
+                  circle
+                  @click="metadataList.splice(index, 1)"
+                />
+              </div>
+              <el-button
+                v-if="metadataList.length === 0"
+                type="primary"
+                icon="Plus"
+                @click="metadataList.push({ key: '', value: '' })"
+              >
+                添加元数据
+              </el-button>
+            </div>
+          </el-form-item>
+        </el-form>
+      </template>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="handleCloseDialog">取消</el-button>
+          <el-button v-if="dialogVisible.type !== 'detail'" type="primary" @click="handleSubmit">
+            确定
+          </el-button>
+          <el-button v-else type="primary" @click="handleCloseDialog">确定</el-button>
+        </div>
+      </template>
+    </EnhancedDialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  name: "Demo",
+  inheritAttrs: false,
+});
+
+import { ref, reactive, onMounted, markRaw, nextTick } from "vue";
+import { fetchAllPages } from "@/utils/fetchAllPages";
+import { ElMessageBox } from "element-plus";
+import { ResultEnum } from "@/enums/api/result.enum";
+import DemoAPI, { DemoTable, DemoForm, DemoPageQuery } from "@/api/module_example/demo";
+import CrudToolbarLeft from "@/components/CURD/CrudToolbarLeft.vue";
+import CrudToolbarRight from "@/components/CURD/CrudToolbarRight.vue";
+import PageSearch from "@/components/CURD/PageSearch.vue";
+import PageContent from "@/components/CURD/PageContent.vue";
+import EnhancedDialog from "@/components/CURD/EnhancedDialog.vue";
+import { useCrudList } from "@/components/CURD/useCrudList";
+import UserTableSelect from "@/views/module_system/user/components/UserTableSelect.vue";
+import type { IContentConfig, ISearchConfig } from "@/components/CURD/types";
+import JsonPretty from "@/components/JsonPretty/index.vue";
+
+const { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList } = useCrudList();
+
+function triggerUserSearch() {
+  nextTick(() => refreshList());
+}
+
+const searchConfig = reactive<ISearchConfig>({
+  permPrefix: "module_example:demo",
+  colon: true,
+  isExpandable: true,
+  showNumber: 2,
+  form: { labelWidth: "auto" },
+  formItems: [
+    {
+      prop: "name",
+      label: "名称",
+      type: "input",
+      attrs: { placeholder: "请输入名称", clearable: true },
+    },
+    {
+      prop: "status",
+      label: "状态",
+      type: "select",
+      options: [
+        { label: "启用", value: "0" },
+        { label: "停用", value: "1" },
+      ],
+      attrs: { placeholder: "请选择状态", clearable: true, style: { width: "170px" } },
+    },
+    {
+      prop: "created_id",
+      label: "创建人",
+      type: "user-table-select",
+      initialValue: null,
+      events: {
+        "confirm-click": triggerUserSearch,
+        "clear-click": triggerUserSearch,
+      },
+    },
+    {
+      prop: "updated_id",
+      label: "更新人",
+      type: "user-table-select",
+      initialValue: null,
+      events: {
+        "confirm-click": triggerUserSearch,
+        "clear-click": triggerUserSearch,
+      },
+    },
+    {
+      prop: "created_time",
+      label: "创建时间",
+      type: "date-picker",
+      initialValue: [],
+      attrs: {
+        type: "datetimerange",
+        valueFormat: "YYYY-MM-DD HH:mm:ss",
+        rangeSeparator: "至",
+        startPlaceholder: "开始",
+        endPlaceholder: "结束",
+      },
+    },
+    {
+      prop: "updated_time",
+      label: "更新时间",
+      type: "date-picker",
+      initialValue: [],
+      attrs: {
+        type: "datetimerange",
+        valueFormat: "YYYY-MM-DD HH:mm:ss",
+        rangeSeparator: "至",
+        startPlaceholder: "开始",
+        endPlaceholder: "结束",
+      },
+    },
+  ],
+  customComponents: {
+    "user-table-select": markRaw(UserTableSelect),
+  },
+});
+
+const contentCols = reactive<
+  Array<{
+    prop?: string;
+    label?: string;
+    show?: boolean;
+  }>
+>([
+  { prop: "selection", label: "选择框", show: true },
+  { prop: "index", label: "序号", show: true },
+  { prop: "name", label: "名称", show: true },
+  { prop: "uuid", label: "UUID", show: true },
+  { prop: "status", label: "状态", show: true },
+  { prop: "a", label: "整数", show: true },
+  { prop: "b", label: "大整数", show: true },
+  { prop: "c", label: "浮点数", show: true },
+  { prop: "d", label: "布尔值", show: true },
+  { prop: "e", label: "日期", show: true },
+  { prop: "f", label: "时间", show: true },
+  { prop: "g", label: "日期时间", show: true },
+  { prop: "h", label: "长文本", show: true },
+  { prop: "i", label: "元数据", show: true },
+  { prop: "description", label: "描述", show: true },
+  { prop: "created_time", label: "创建时间", show: true },
+  { prop: "updated_time", label: "更新时间", show: true },
+  { prop: "created_id", label: "创建人", show: true },
+  { prop: "updated_id", label: "更新人", show: true },
+  { prop: "operation", label: "操作", show: true },
+]);
+
+function normalizeDemoQuery(params: Record<string, unknown>) {
+  const p = { ...params } as Record<string, unknown>;
+  if (Array.isArray(p.created_time) && p.created_time.length === 0) p.created_time = undefined;
+  if (Array.isArray(p.updated_time) && p.updated_time.length === 0) p.updated_time = undefined;
+  return p as unknown as DemoPageQuery;
+}
+
+const contentConfig = reactive<IContentConfig<DemoPageQuery>>({
+  permPrefix: "module_example:demo",
+  hideColumnFilter: false,
+  initialFetch: false,
+  cols: contentCols as IContentConfig["cols"],
+  toolbar: [],
+  defaultToolbar: ["import", "export", "refresh", "filter"],
+  pagination: {
+    pageSize: 10,
+    pageSizes: [10, 20, 30, 50],
+  },
+  request: { page_no: "page_no", page_size: "page_size" },
+  indexAction: async (params) => {
+    const res = await DemoAPI.getDemoList(
+      normalizeDemoQuery(params as unknown as Record<string, unknown>)
+    );
+    return {
+      total: res.data.data.total,
+      list: res.data.data.items,
+    };
+  },
+  deleteAction: (ids) =>
+    DemoAPI.deleteDemo(
+      ids
+        .split(",")
+        .map((s) => Number(s.trim()))
+        .filter((n) => !Number.isNaN(n) && n > 0)
+    ),
+  importTemplate: () => DemoAPI.downloadTemplateDemo(),
+  importAction: (file: File) => {
+    const fd = new FormData();
+    fd.append("file", file);
+    return DemoAPI.importDemo(fd).then((res) => {
+      if (res.data.code !== ResultEnum.SUCCESS) {
+        return Promise.reject(new Error(res.data.msg));
+      }
+    });
+  },
+  exportsAction: async (params: DemoPageQuery) => {
+    const query: Record<string, unknown> = { ...params };
+    if (typeof query.status === "string") {
+      query.status = query.status === "true";
+    }
+    return fetchAllPages<DemoTable>({
+      pageSize: 9999,
+      initialQuery: query,
+      fetchPage: async (q) => {
+        const res = await DemoAPI.getDemoList(
+          normalizeDemoQuery(q as unknown as Record<string, unknown>)
+        );
+        return {
+          total: res.data?.data?.total ?? 0,
+          list: res.data?.data?.items ?? [],
+        };
+      },
+    });
+  },
+});
+
+const detailFormData = ref<DemoTable>({});
+
+const formData = reactive<DemoForm>({
+  id: undefined,
+  name: "",
+  status: "0",
+  description: undefined,
+  a: undefined,
+  b: undefined,
+  c: undefined,
+  d: true,
+  e: undefined,
+  f: undefined,
+  g: undefined,
+  h: undefined,
+  i: undefined,
+});
+
+const dialogVisible = reactive({
+  title: "",
+  visible: false,
+  type: "create" as "create" | "update" | "detail",
+});
+
+const rules = reactive({
+  name: [{ required: true, message: "请输入名称", trigger: "blur" }],
+  status: [{ required: true, message: "请选择状态", trigger: "blur" }],
+});
+
+const dataFormRef = ref();
+
+const metadataList = ref<{ key: string; value: string }[]>([]);
+
+function handleRowDelete(id: number) {
+  contentRef.value?.handleDelete(id);
+}
+
+const initialFormData: DemoForm = {
+  id: undefined,
+  name: "",
+  status: "0",
+  description: undefined,
+  a: undefined,
+  b: undefined,
+  c: undefined,
+  d: true,
+  e: undefined,
+  f: undefined,
+  g: undefined,
+  h: undefined,
+  i: undefined,
+};
+
+async function resetForm() {
+  if (dataFormRef.value) {
+    dataFormRef.value.resetFields();
+    dataFormRef.value.clearValidate();
+  }
+  Object.assign(formData, initialFormData);
+  metadataList.value = [];
+}
+
+async function handleCloseDialog() {
+  dialogVisible.visible = false;
+  resetForm();
+}
+
+async function handleOpenDialog(type: "create" | "update" | "detail", id?: number) {
+  dialogVisible.type = type;
+  if (id) {
+    const response = await DemoAPI.getDemoDetail(id);
+    if (type === "detail") {
+      dialogVisible.title = "详情";
+      Object.assign(detailFormData.value, response.data.data);
+    } else if (type === "update") {
+      dialogVisible.title = "修改";
+      Object.assign(formData, response.data.data);
+      if (formData.i && typeof formData.i === "object") {
+        metadataList.value = Object.entries(formData.i).map(([key, value]) => ({
+          key,
+          value: String(value),
+        }));
+      } else {
+        metadataList.value = [];
+      }
+    }
+  } else {
+    dialogVisible.title = "新增示例";
+    formData.id = undefined;
+    metadataList.value = [];
+  }
+  dialogVisible.visible = true;
+}
+
+async function handleSubmit() {
+  dataFormRef.value.validate(async (valid: boolean) => {
+    if (valid) {
+      const submitData = { ...formData };
+      if (metadataList.value.length > 0) {
+        const metadataObj: Record<string, string> = {};
+        metadataList.value.forEach((item) => {
+          if (item.key.trim()) {
+            metadataObj[item.key.trim()] = item.value;
+          }
+        });
+        submitData.i = Object.keys(metadataObj).length > 0 ? metadataObj : undefined;
+      } else {
+        submitData.i = undefined;
+      }
+      const id = formData.id;
+      try {
+        if (id) {
+          await DemoAPI.updateDemo(id, { id, ...submitData });
+        } else {
+          await DemoAPI.createDemo(submitData);
+        }
+        dialogVisible.visible = false;
+        await resetForm();
+        refreshList();
+      } catch (error: unknown) {
+        console.error(error);
+      }
+    }
+  });
+}
+
+async function handleMoreClick(status: string) {
+  const rows = contentRef.value?.getSelectionData() ?? [];
+  const ids = rows.map((r: { id?: number }) => r.id).filter(Boolean) as number[];
+  if (!ids.length) return;
+  ElMessageBox.confirm(`确认${status === "0" ? "启用" : "停用"}该项数据?`, "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(async () => {
+      try {
+        await DemoAPI.batchDemo({ ids, status });
+        refreshList();
+      } catch (error: unknown) {
+        console.error(error);
+      }
+    })
+    .catch(() => {
+      ElMessageBox.close();
+    });
+}
+
+onMounted(() => {
+  refreshList();
+});
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/frontend/new-web/src/views/module_example/demo01/index.vue b/frontend/new-web/src/views/module_example/demo01/index.vue
new file mode 100644
index 00000000..17e4b036
--- /dev/null
+++ b/frontend/new-web/src/views/module_example/demo01/index.vue
@@ -0,0 +1,589 @@
+<!-- 演示示例：PageSearch + PageContent CRUD 封装 -->
+<template>
+  <div class="app-container">
+    <PageSearch
+      ref="searchRef"
+      :search-config="searchConfig"
+      @query-click="handleQueryClick"
+      @reset-click="handleResetClick"
+    />
+
+    <PageContent
+      ref="contentRef"
+      :content-config="contentConfig"
+      @add-click="handleOpenDialog('create')"
+    >
+      <!-- 与 PageContent 默认结构一致：不再套一层 data-table__toolbar（外层已由组件提供） -->
+      <template #toolbar="{ toolbarRight, onToolbar, removeIds, cols }">
+        <CrudToolbarLeft
+          :remove-ids="removeIds"
+          :perm-create="['module_example:demo01:create']"
+          :perm-delete="['module_example:demo01:delete']"
+          :perm-patch="['module_example:demo01:patch']"
+          @add="handleOpenDialog('create')"
+          @delete="onToolbar('delete')"
+          @more="handleMoreClick"
+        />
+        <div class="data-table__toolbar--right">
+          <CrudToolbarRight :buttons="toolbarRight" :cols="cols" :on-toolbar="onToolbar" />
+        </div>
+      </template>
+
+      <template #table="{ data, loading, tableRef, onSelectionChange, pagination }">
+        <div class="data-table__content">
+          <el-table
+            :ref="tableRef as any"
+            v-loading="loading"
+            :data="data"
+            height="100%"
+            border
+            stripe
+            @selection-change="onSelectionChange"
+          >
+            <template #empty>
+              <el-empty :image-size="80" description="暂无数据" />
+            </template>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'selection')?.show"
+              type="selection"
+              min-width="55"
+              align="center"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'index')?.show"
+              fixed
+              label="序号"
+              min-width="60"
+            >
+              <template #default="scope">
+                {{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }}
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'name')?.show"
+              label="名称"
+              prop="name"
+              min-width="140"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'uuid')?.show"
+              label="UUID"
+              prop="uuid"
+              min-width="180"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'status')?.show"
+              label="状态"
+              prop="status"
+              min-width="120"
+              show-overflow-tooltip
+            >
+              <template #default="scope">
+                <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">
+                  {{ scope.row.status === "0" ? "启用" : "停用" }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'description')?.show"
+              label="描述"
+              prop="description"
+              min-width="140"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'created_time')?.show"
+              label="创建时间"
+              prop="created_time"
+              min-width="180"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'updated_time')?.show"
+              label="更新时间"
+              prop="updated_time"
+              min-width="180"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'created_id')?.show"
+              label="创建人"
+              prop="created_id"
+              min-width="120"
+              show-overflow-tooltip
+            >
+              <template #default="scope">
+                <el-tag>{{ scope.row.created_by?.name }}</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'updated_id')?.show"
+              label="更新人"
+              prop="updated_id"
+              min-width="120"
+              show-overflow-tooltip
+            >
+              <template #default="scope">
+                <el-tag>{{ scope.row.updated_by?.name }}</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'operation')?.show"
+              fixed="right"
+              label="操作"
+              align="center"
+              min-width="200"
+            >
+              <template #default="scope">
+                <el-button
+                  v-hasPerm="['module_example:demo01:detail']"
+                  type="info"
+                  size="small"
+                  link
+                  icon="View"
+                  @click="handleOpenDialog('detail', scope.row.id)"
+                >
+                  详情
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_example:demo01:update']"
+                  type="primary"
+                  size="small"
+                  link
+                  icon="edit"
+                  @click="handleOpenDialog('update', scope.row.id)"
+                >
+                  编辑
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_example:demo01:delete']"
+                  type="danger"
+                  size="small"
+                  link
+                  icon="delete"
+                  @click="handleRowDelete(scope.row.id)"
+                >
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </template>
+    </PageContent>
+
+    <EnhancedDialog
+      v-model="dialogVisible.visible"
+      :title="dialogVisible.title"
+      width="560px"
+      @close="handleCloseDialog"
+    >
+      <template v-if="dialogVisible.type === 'detail'">
+        <el-descriptions :column="2" border>
+          <el-descriptions-item label="名称" :span="2">
+            {{ detailFormData.name }}
+          </el-descriptions-item>
+          <el-descriptions-item label="UUID" :span="2">
+            {{ detailFormData.uuid }}
+          </el-descriptions-item>
+          <el-descriptions-item label="状态" :span="2">
+            <el-tag :type="detailFormData.status == '0' ? 'success' : 'danger'">
+              {{ detailFormData.status == "0" ? "启用" : "停用" }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="描述" :span="2">
+            {{ detailFormData.description }}
+          </el-descriptions-item>
+          <el-descriptions-item label="创建人" :span="2">
+            {{ detailFormData.created_by?.name }}
+          </el-descriptions-item>
+          <el-descriptions-item label="更新人" :span="2">
+            {{ detailFormData.updated_by?.name }}
+          </el-descriptions-item>
+          <el-descriptions-item label="创建时间" :span="2">
+            {{ detailFormData.created_time }}
+          </el-descriptions-item>
+          <el-descriptions-item label="更新时间" :span="2">
+            {{ detailFormData.updated_time }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </template>
+      <template v-else>
+        <el-form
+          ref="dataFormRef"
+          :model="formData"
+          :rules="rules"
+          label-suffix=":"
+          label-width="auto"
+          label-position="right"
+        >
+          <el-form-item label="名称" prop="name">
+            <el-input
+              v-model="formData.name"
+              placeholder="请输入名称（2-50 字符，仅字母数字下划线中划线）"
+              :maxlength="50"
+            />
+          </el-form-item>
+          <el-form-item label="状态" prop="status">
+            <el-radio-group v-model="formData.status">
+              <el-radio value="0">启用</el-radio>
+              <el-radio value="1">停用</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="描述" prop="description">
+            <el-input
+              v-model="formData.description"
+              :rows="4"
+              :maxlength="255"
+              show-word-limit
+              type="textarea"
+              placeholder="请输入描述（可选，最多 255 字）"
+            />
+          </el-form-item>
+        </el-form>
+      </template>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="handleCloseDialog">取消</el-button>
+          <el-button v-if="dialogVisible.type !== 'detail'" type="primary" @click="handleSubmit">
+            确定
+          </el-button>
+          <el-button v-else type="primary" @click="handleCloseDialog">确定</el-button>
+        </div>
+      </template>
+    </EnhancedDialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  name: "Demo01",
+  inheritAttrs: false,
+});
+
+import { ref, reactive, onMounted, markRaw, nextTick } from "vue";
+import { fetchAllPages } from "@/utils/fetchAllPages";
+import { ElMessageBox } from "element-plus";
+import { ResultEnum } from "@/enums/api/result.enum";
+import Demo01API, { Demo01Table, Demo01Form, Demo01PageQuery } from "@/api/module_example/demo01";
+import CrudToolbarLeft from "@/components/CURD/CrudToolbarLeft.vue";
+import CrudToolbarRight from "@/components/CURD/CrudToolbarRight.vue";
+import PageSearch from "@/components/CURD/PageSearch.vue";
+import PageContent from "@/components/CURD/PageContent.vue";
+import EnhancedDialog from "@/components/CURD/EnhancedDialog.vue";
+import { useCrudList } from "@/components/CURD/useCrudList";
+import UserTableSelect from "@/views/module_system/user/components/UserTableSelect.vue";
+import type { IContentConfig, ISearchConfig } from "@/components/CURD/types";
+
+const { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList } = useCrudList();
+
+function triggerUserSearch() {
+  nextTick(() => refreshList());
+}
+
+const searchConfig = reactive<ISearchConfig>({
+  permPrefix: "module_example:demo01",
+  colon: true,
+  isExpandable: true,
+  showNumber: 2,
+  form: { labelWidth: "auto" },
+  formItems: [
+    {
+      prop: "name",
+      label: "名称",
+      type: "input",
+      attrs: { placeholder: "请输入名称", clearable: true },
+    },
+    {
+      prop: "description",
+      label: "描述",
+      type: "input",
+      attrs: { placeholder: "描述模糊查询", clearable: true },
+    },
+    {
+      prop: "status",
+      label: "状态",
+      type: "select",
+      options: [
+        { label: "启用", value: "0" },
+        { label: "停用", value: "1" },
+      ],
+      attrs: { placeholder: "请选择状态", clearable: true, style: { width: "170px" } },
+    },
+    {
+      prop: "created_id",
+      label: "创建人",
+      type: "user-table-select",
+      initialValue: null,
+      events: {
+        "confirm-click": triggerUserSearch,
+        "clear-click": triggerUserSearch,
+      },
+    },
+    {
+      prop: "updated_id",
+      label: "更新人",
+      type: "user-table-select",
+      initialValue: null,
+      events: {
+        "confirm-click": triggerUserSearch,
+        "clear-click": triggerUserSearch,
+      },
+    },
+    {
+      prop: "created_time",
+      label: "创建时间",
+      type: "date-picker",
+      initialValue: [],
+      attrs: {
+        type: "datetimerange",
+        valueFormat: "YYYY-MM-DD HH:mm:ss",
+        rangeSeparator: "至",
+        startPlaceholder: "开始",
+        endPlaceholder: "结束",
+      },
+    },
+    {
+      prop: "updated_time",
+      label: "更新时间",
+      type: "date-picker",
+      initialValue: [],
+      attrs: {
+        type: "datetimerange",
+        valueFormat: "YYYY-MM-DD HH:mm:ss",
+        rangeSeparator: "至",
+        startPlaceholder: "开始",
+        endPlaceholder: "结束",
+      },
+    },
+  ],
+  customComponents: {
+    "user-table-select": markRaw(UserTableSelect),
+  },
+});
+
+const contentCols = reactive<
+  Array<{
+    prop?: string;
+    label?: string;
+    show?: boolean;
+  }>
+>([
+  { prop: "selection", label: "选择框", show: true },
+  { prop: "index", label: "序号", show: true },
+  { prop: "name", label: "名称", show: true },
+  { prop: "uuid", label: "UUID", show: true },
+  { prop: "status", label: "状态", show: true },
+  { prop: "description", label: "描述", show: true },
+  { prop: "created_time", label: "创建时间", show: true },
+  { prop: "updated_time", label: "更新时间", show: true },
+  { prop: "created_id", label: "创建人", show: true },
+  { prop: "updated_id", label: "更新人", show: true },
+  { prop: "operation", label: "操作", show: true },
+]);
+
+function normalizeDemo01Query(params: Record<string, unknown>) {
+  const p = { ...params } as Record<string, unknown>;
+  if (Array.isArray(p.created_time) && p.created_time.length === 0) p.created_time = undefined;
+  if (Array.isArray(p.updated_time) && p.updated_time.length === 0) p.updated_time = undefined;
+  if (p.description === "" || p.description === null) p.description = undefined;
+  if (p.name === "" || p.name === null) p.name = undefined;
+  return p as unknown as Demo01PageQuery;
+}
+
+const contentConfig = reactive<IContentConfig<Demo01PageQuery>>({
+  permPrefix: "module_example:demo01",
+  hideColumnFilter: false,
+  initialFetch: false,
+  cols: contentCols as IContentConfig["cols"],
+  toolbar: [],
+  defaultToolbar: ["import", "export", "refresh", "filter"],
+  pagination: {
+    pageSize: 10,
+    pageSizes: [10, 20, 30, 50],
+  },
+  request: { page_no: "page_no", page_size: "page_size" },
+  indexAction: async (params) => {
+    const res = await Demo01API.getDemo01List(
+      normalizeDemo01Query(params as unknown as Record<string, unknown>)
+    );
+    return {
+      total: res.data.data.total,
+      list: res.data.data.items,
+    };
+  },
+  deleteAction: (ids) =>
+    Demo01API.deleteDemo01(
+      ids
+        .split(",")
+        .map((s) => Number(s.trim()))
+        .filter((n) => !Number.isNaN(n) && n > 0)
+    ),
+  importTemplate: () => Demo01API.downloadDemo01Template(),
+  importAction: (file: File) => {
+    const fd = new FormData();
+    fd.append("file", file);
+    return Demo01API.importDemo01(fd).then((res) => {
+      if (res.data.code !== ResultEnum.SUCCESS) {
+        return Promise.reject(new Error(res.data.msg));
+      }
+    });
+  },
+  exportsAction: async (params: Demo01PageQuery) => {
+    const query: Record<string, unknown> = { ...params };
+    return fetchAllPages<Demo01Table>({
+      pageSize: 9999,
+      initialQuery: query,
+      fetchPage: async (q) => {
+        const res = await Demo01API.getDemo01List(
+          normalizeDemo01Query(q as unknown as Record<string, unknown>)
+        );
+        return {
+          total: res.data?.data?.total ?? 0,
+          list: res.data?.data?.items ?? [],
+        };
+      },
+    });
+  },
+});
+
+const detailFormData = ref<Demo01Table>({});
+
+const formData = reactive<Demo01Form>({
+  id: undefined,
+  name: "",
+  status: "0",
+  description: undefined,
+});
+
+const dialogVisible = reactive({
+  title: "",
+  visible: false,
+  type: "create" as "create" | "update" | "detail",
+});
+
+const rules = reactive({
+  name: [
+    { required: true, message: "请输入名称", trigger: "blur" },
+    {
+      min: 2,
+      max: 50,
+      message: "名称长度必须在 2-50 个字符之间",
+      trigger: "blur",
+    },
+    {
+      pattern: /^[A-Za-z0-9_-]+$/,
+      message: "名称只能包含字母、数字、下划线和中划线",
+      trigger: "blur",
+    },
+  ],
+  status: [{ required: true, message: "请选择状态", trigger: "change" }],
+  description: [
+    {
+      max: 255,
+      message: "描述长度不能超过 255 个字符",
+      trigger: "blur",
+    },
+  ],
+});
+
+const dataFormRef = ref();
+
+function handleRowDelete(id: number) {
+  contentRef.value?.handleDelete(id);
+}
+
+const initialFormData: Demo01Form = {
+  id: undefined,
+  name: "",
+  status: "0",
+  description: undefined,
+};
+
+async function resetForm() {
+  if (dataFormRef.value) {
+    dataFormRef.value.resetFields();
+    dataFormRef.value.clearValidate();
+  }
+  Object.assign(formData, initialFormData);
+}
+
+async function handleCloseDialog() {
+  dialogVisible.visible = false;
+  resetForm();
+}
+
+async function handleOpenDialog(type: "create" | "update" | "detail", id?: number) {
+  dialogVisible.type = type;
+  if (id) {
+    const response = await Demo01API.getDemo01Detail(id);
+    if (type === "detail") {
+      dialogVisible.title = "详情";
+      Object.assign(detailFormData.value, response.data.data);
+    } else if (type === "update") {
+      dialogVisible.title = "修改";
+      Object.assign(formData, response.data.data);
+    }
+  } else {
+    dialogVisible.title = "新增示例01";
+    formData.id = undefined;
+  }
+  dialogVisible.visible = true;
+}
+
+async function handleSubmit() {
+  dataFormRef.value.validate(async (valid: boolean) => {
+    if (valid) {
+      const submitData: Demo01Form = {
+        name: formData.name?.trim(),
+        status: formData.status,
+        description: formData.description?.trim() || undefined,
+      };
+      const id = formData.id;
+      try {
+        if (id) {
+          await Demo01API.updateDemo01(id, submitData);
+        } else {
+          await Demo01API.createDemo01(submitData);
+        }
+        dialogVisible.visible = false;
+        await resetForm();
+        refreshList();
+      } catch (error: unknown) {
+        console.error(error);
+      }
+    }
+  });
+}
+
+async function handleMoreClick(status: string) {
+  const rows = contentRef.value?.getSelectionData() ?? [];
+  const ids = rows.map((r: { id?: number }) => r.id).filter(Boolean) as number[];
+  if (!ids.length) return;
+  ElMessageBox.confirm(`确认${status === "0" ? "启用" : "停用"}该项数据?`, "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(async () => {
+      try {
+        await Demo01API.batchDemo01({ ids, status });
+        refreshList();
+      } catch (error: unknown) {
+        console.error(error);
+      }
+    })
+    .catch(() => {
+      ElMessageBox.close();
+    });
+}
+
+onMounted(() => {
+  refreshList();
+});
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/frontend/new-web/src/views/module_generator/gencode/components/CreateTableDialog.vue b/frontend/new-web/src/views/module_generator/gencode/components/CreateTableDialog.vue
new file mode 100644
index 00000000..4c475643
--- /dev/null
+++ b/frontend/new-web/src/views/module_generator/gencode/components/CreateTableDialog.vue
@@ -0,0 +1,458 @@
+<template>
+  <EnhancedDialog
+    v-model="visible"
+    title="创建数据表"
+    width="min(800px, 94vw)"
+    append-to-body
+    dialog-class="create-table-dialog"
+    @opened="onDialogOpened"
+  >
+    <el-alert type="info" :closable="false" show-icon class="mb-3 !items-start">
+      <template #title>
+        <span class="text-sm leading-relaxed">
+          <template v-if="editMode === 'visual'">
+            选好数据库与单表/主子表，填好表名后点右下角「创建表」即可。
+          </template>
+          <template v-else>自带示例一键插入；会写 DDL 的可直接粘贴，支持多条语句。</template>
+        </span>
+      </template>
+    </el-alert>
+
+    <div class="create-table-toolbar mb-3 flex flex-wrap items-center gap-2">
+      <span class="text-sm text-[var(--el-text-color-regular)] shrink-0">方式</span>
+      <el-radio-group v-model="editMode" size="small">
+        <el-radio-button value="visual">表结构（推荐）</el-radio-button>
+        <el-radio-button value="sql">写 SQL</el-radio-button>
+      </el-radio-group>
+    </div>
+
+    <div v-show="editMode === 'sql'" class="sql-pane">
+      <div class="mb-2 flex flex-wrap items-center gap-2">
+        <el-dropdown trigger="click" @command="onSqlPresetCommand">
+          <el-button type="primary" size="small">
+            插入示例模板
+            <el-icon class="el-icon--right"><ArrowDown /></el-icon>
+          </el-button>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item command="single-mysql">单表 · MySQL</el-dropdown-item>
+              <el-dropdown-item command="single-postgres">单表 · PostgreSQL</el-dropdown-item>
+              <el-dropdown-item command="master-mysql" divided>主子表 · MySQL</el-dropdown-item>
+              <el-dropdown-item command="master-postgres">主子表 · PostgreSQL</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+        <span class="text-xs text-[var(--el-text-color-secondary)]">从模板开始比自己写更省事</span>
+      </div>
+      <el-scrollbar max-height="min(52vh, 420px)" class="sql-editor-scroll">
+        <div class="absolute z-36 right-5 top-2">
+          <el-link type="primary" @click="copySql">
+            <el-icon><CopyDocument /></el-icon>
+            复制
+          </el-link>
+        </div>
+        <Codemirror
+          ref="sqlRef"
+          v-model:value="sqlText"
+          :options="sqlOptions"
+          border
+          height="360px"
+          width="100%"
+        />
+      </el-scrollbar>
+    </div>
+
+    <div v-show="editMode === 'visual'" class="visual-pane">
+      <el-scrollbar max-height="min(58vh, 520px)" class="visual-pane-scroll">
+        <div class="visual-structure max-w-3xl">
+          <el-descriptions :column="1" border size="small" class="visual-desc">
+            <template #title>
+              <span class="text-sm font-medium text-[var(--el-text-color-primary)]">选项</span>
+            </template>
+            <el-descriptions-item label="数据库" label-class-name="visual-desc-label">
+              <el-radio-group v-model="visual.dialect" size="small">
+                <el-radio-button value="mysql">MySQL</el-radio-button>
+                <el-radio-button value="postgres">PostgreSQL</el-radio-button>
+              </el-radio-group>
+            </el-descriptions-item>
+            <el-descriptions-item label="表类型" label-class-name="visual-desc-label">
+              <el-radio-group v-model="templateKind" size="small">
+                <el-radio-button value="single">只要一张表</el-radio-button>
+                <el-radio-button value="masterSub">主表 + 子表明细</el-radio-button>
+              </el-radio-group>
+            </el-descriptions-item>
+          </el-descriptions>
+
+          <el-descriptions :column="1" border size="small" class="visual-desc mt-3">
+            <template #title>
+              <span class="text-sm font-medium text-[var(--el-text-color-primary)]">主表</span>
+            </template>
+            <el-descriptions-item label-class-name="visual-desc-label">
+              <template #label>
+                <span class="text-[var(--el-color-danger)]">*</span>
+                表名
+              </template>
+              <el-input
+                v-model="visual.mainTableName"
+                placeholder="英文表名，如 gen_demo_order"
+                clearable
+              />
+            </el-descriptions-item>
+            <el-descriptions-item label="说明" label-class-name="visual-desc-label">
+              <el-input v-model="visual.mainComment" placeholder="中文说明，可选" clearable />
+            </el-descriptions-item>
+          </el-descriptions>
+
+          <el-descriptions
+            v-if="visual.subEnabled"
+            :column="1"
+            border
+            size="small"
+            class="visual-desc mt-3"
+          >
+            <template #title>
+              <span class="text-sm font-medium text-[var(--el-text-color-primary)]">子表</span>
+            </template>
+            <el-descriptions-item label-class-name="visual-desc-label">
+              <template #label>
+                <span class="text-[var(--el-color-danger)]">*</span>
+                表名
+              </template>
+              <el-input
+                v-model="visual.subTableName"
+                placeholder="如 gen_demo_order_item"
+                clearable
+              />
+            </el-descriptions-item>
+            <el-descriptions-item label="说明" label-class-name="visual-desc-label">
+              <el-input v-model="visual.subComment" placeholder="中文说明，可选" clearable />
+            </el-descriptions-item>
+            <el-descriptions-item label="外键列" label-class-name="visual-desc-label">
+              <el-input
+                v-model="visual.fkColumn"
+                placeholder="子表里指向主表的那列，如 order_id"
+                clearable
+              />
+            </el-descriptions-item>
+            <el-descriptions-item label="对应主表列" label-class-name="visual-desc-label">
+              <el-input v-model="visual.fkRefColumn" placeholder="一般是 id" clearable />
+            </el-descriptions-item>
+          </el-descriptions>
+
+          <div class="mt-3">
+            <el-link type="primary" :underline="false" @click="syncVisualToSql">
+              需要手写调整？生成 SQL 并切到「写 SQL」
+            </el-link>
+          </div>
+        </div>
+        <p class="mb-1 mt-2 text-xs text-[var(--el-text-color-secondary)]">
+          将要执行的 SQL（随上面表格自动更新）
+        </p>
+        <el-input
+          v-model="visualPreviewSql"
+          type="textarea"
+          :rows="6"
+          readonly
+          class="font-mono text-xs visual-sql-preview"
+          placeholder="填写表名后会自动生成"
+        />
+      </el-scrollbar>
+    </div>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" :loading="loading" @click="handleConfirm">创建表</el-button>
+        <el-button @click="handleCancel">取消</el-button>
+      </div>
+    </template>
+  </EnhancedDialog>
+</template>
+
+<script setup lang="ts">
+import "codemirror/mode/sql/sql.js";
+import "codemirror/theme/dracula.css";
+import { ref, watch, nextTick, computed } from "vue";
+import Codemirror from "codemirror-editor-vue3";
+import type { EditorConfiguration } from "codemirror";
+import type { CmComponentRef } from "codemirror-editor-vue3";
+import { ElMessage } from "element-plus";
+import { ArrowDown, CopyDocument } from "@element-plus/icons-vue";
+import { useClipboard } from "@vueuse/core";
+import EnhancedDialog from "@/components/CURD/EnhancedDialog.vue";
+import { useSettingsStore } from "@/store";
+import { ThemeMode } from "@/enums/settings/theme.enum";
+import { buildSqlFromVisual } from "../utils/buildCreateTableSql";
+import type { SqlDialect, VisualBuildState } from "../utils/buildCreateTableSql";
+import {
+  applySubColumns,
+  mergeGenTableLinkIntoVisual,
+  visualPresetMasterSub,
+  visualPresetSingle,
+  type GenTableCreateLink,
+} from "../utils/createTableVisualPresets";
+import {
+  getExampleFromPresetMasterSub,
+  getExampleFromPresetSingle,
+} from "../utils/createTableSqlExamples";
+
+defineOptions({ name: "CreateTableDialog" });
+
+const visible = defineModel<boolean>({ default: false });
+
+export interface CreateTableSubmitMeta {
+  fromVisual: boolean;
+  visualSnapshot?: VisualBuildState;
+}
+
+const props = withDefaults(
+  defineProps<{
+    loading?: boolean;
+    /** 代码生成抽屉第三步打开时传入，用于预填「表结构」主/子表名 */
+    linkFromGen?: GenTableCreateLink | null;
+  }>(),
+  { loading: false, linkFromGen: null }
+);
+
+const emit = defineEmits<{
+  submit: [sql: string, meta?: CreateTableSubmitMeta];
+}>();
+
+const { copy } = useClipboard();
+const settingsStore = useSettingsStore();
+
+const editMode = ref<"sql" | "visual">("visual");
+const sqlText = ref("");
+const sqlRef = ref<CmComponentRef>();
+const visual = ref<VisualBuildState>(visualPresetSingle("mysql"));
+const visualPreviewSql = ref("");
+
+/** 单表 / 主子表：与「模板按钮」等价，用语义化文案降低理解成本 */
+const templateKind = computed({
+  get: (): "single" | "masterSub" => (visual.value.subEnabled ? "masterSub" : "single"),
+  set: (v: string) => {
+    if (v === "single" || v === "masterSub") applyVisualPreset(v);
+  },
+});
+
+const codeTheme = ref(settingsStore.theme === ThemeMode.DARK ? "dracula" : "default");
+
+const sqlOptions: EditorConfiguration = {
+  mode: "text/x-sql",
+  lineNumbers: true,
+  smartIndent: true,
+  indentUnit: 2,
+  tabSize: 2,
+  readOnly: false,
+  theme: codeTheme.value,
+  lineWrapping: true,
+  autofocus: false,
+};
+
+watch(
+  () => settingsStore.theme,
+  (t) => {
+    const newTheme = t === ThemeMode.DARK ? "dracula" : "default";
+    codeTheme.value = newTheme;
+    sqlOptions.theme = newTheme;
+    if (sqlRef.value?.cminstance) {
+      sqlRef.value.cminstance.setOption("theme", newTheme);
+    }
+  }
+);
+
+function onDialogOpened() {
+  dialectWatchSkip = true;
+  editMode.value = "visual";
+  sqlText.value = "";
+  visual.value = visualPresetSingle("mysql");
+  visualPreviewSql.value = "";
+  void nextTick(() => {
+    dialectWatchSkip = false;
+    applyLinkFromGenIfAny();
+  });
+}
+
+/** 第三步已填主表/子表时：切到表结构模式并带入名称，减少重复输入 */
+function applyLinkFromGenIfAny() {
+  const link = props.linkFromGen;
+  if (!link) return;
+  const touched =
+    (link.table_name || "").trim() ||
+    (link.table_comment || "").trim() ||
+    ((link.sub_table_name || "").trim() && (link.sub_table_fk_name || "").trim());
+  if (!touched) return;
+  visual.value = mergeGenTableLinkIntoVisual(link, visual.value.dialect);
+  editMode.value = "visual";
+  visualPreviewSql.value = buildSqlFromVisual(applySubColumns(visual.value));
+  ElMessage.info({
+    message: "已带入代码生成里的表名，检查无误后点「创建表」即可",
+    duration: 2800,
+  });
+}
+
+watch(
+  visual,
+  () => {
+    if (editMode.value !== "visual" || !visible.value) return;
+    visualPreviewSql.value = buildSqlFromVisual(applySubColumns(visual.value));
+  },
+  { deep: true }
+);
+
+watch(editMode, (m) => {
+  if (m === "sql") {
+    sqlText.value = buildSqlFromVisual(applySubColumns(visual.value));
+    void nextTick(() => sqlRef.value?.cminstance?.refresh());
+  } else {
+    visualPreviewSql.value = buildSqlFromVisual(applySubColumns(visual.value));
+  }
+});
+
+let dialectWatchSkip = false;
+watch(
+  () => visual.value.dialect,
+  (_d, prev) => {
+    if (dialectWatchSkip) return;
+    if (prev === undefined) return;
+    const d = visual.value.dialect;
+    visual.value = visual.value.subEnabled
+      ? applySubColumns(visualPresetMasterSub(d))
+      : visualPresetSingle(d);
+  }
+);
+
+function applyVisualPreset(kind: "single" | "masterSub") {
+  const d = visual.value.dialect;
+  visual.value =
+    kind === "single" ? visualPresetSingle(d) : applySubColumns(visualPresetMasterSub(d));
+}
+
+function syncVisualToSql() {
+  if (!validateVisual()) return;
+  sqlText.value = buildSqlFromVisual(applySubColumns(visual.value));
+  editMode.value = "sql";
+  void nextTick(() => {
+    sqlRef.value?.cminstance?.refresh();
+  });
+  ElMessage.success("已切换到「写 SQL」，可继续改");
+}
+
+function onSqlPresetCommand(cmd: string) {
+  switch (cmd) {
+    case "single-mysql":
+      loadPresetSql("single", "mysql");
+      break;
+    case "single-postgres":
+      loadPresetSql("single", "postgres");
+      break;
+    case "master-mysql":
+      loadPresetSql("masterSub", "mysql");
+      break;
+    case "master-postgres":
+      loadPresetSql("masterSub", "postgres");
+      break;
+    default:
+      break;
+  }
+}
+
+/** 表结构模式提交前校验，避免无效请求 */
+function validateVisual(): boolean {
+  const v = applySubColumns(visual.value);
+  if (!(v.mainTableName || "").trim()) {
+    ElMessage.warning("请填写主表表名");
+    return false;
+  }
+  if (v.subEnabled) {
+    if (!(v.subTableName || "").trim()) {
+      ElMessage.warning("请填写子表表名");
+      return false;
+    }
+    if (!(v.fkColumn || "").trim()) {
+      ElMessage.warning("请填写子表上的外键列名");
+      return false;
+    }
+    if (!(v.fkRefColumn || "").trim()) {
+      ElMessage.warning("请填写主表上被引用的列名（一般为 id）");
+      return false;
+    }
+  }
+  return true;
+}
+
+function loadPresetSql(kind: "single" | "masterSub", dialect: SqlDialect) {
+  sqlText.value =
+    kind === "single"
+      ? getExampleFromPresetSingle(dialect)
+      : getExampleFromPresetMasterSub(dialect);
+}
+
+function copySql() {
+  if (!sqlText.value) {
+    ElMessage.warning("没有可复制的内容");
+    return;
+  }
+  copy(sqlText.value);
+  ElMessage.success("已复制");
+}
+
+function handleConfirm() {
+  if (editMode.value === "visual" && !validateVisual()) return;
+  const sql =
+    editMode.value === "sql"
+      ? sqlText.value.trim()
+      : buildSqlFromVisual(applySubColumns(visual.value)).trim();
+  if (!sql) {
+    ElMessage.error("请填写表名或 SQL");
+    return;
+  }
+  if (editMode.value === "visual") {
+    emit("submit", sql, {
+      fromVisual: true,
+      visualSnapshot: applySubColumns(visual.value),
+    });
+  } else {
+    emit("submit", sql);
+  }
+}
+
+function handleCancel() {
+  visible.value = false;
+}
+</script>
+
+<style scoped lang="scss">
+.sql-pane {
+  position: relative;
+}
+
+.visual-pane :deep(.el-textarea__inner) {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+
+.visual-sql-preview {
+  margin-top: 10px;
+}
+
+/* 表结构：描述列表表格化，标签列对齐、内容区可伸缩 */
+.visual-structure {
+  .visual-desc {
+    :deep(.el-descriptions__label) {
+      width: 108px;
+      vertical-align: middle;
+    }
+
+    :deep(.el-descriptions__cell) {
+      vertical-align: middle;
+    }
+
+    :deep(.el-descriptions__content) {
+      min-width: 0;
+    }
+
+    :deep(.el-descriptions__title) {
+      margin-bottom: 8px;
+    }
+  }
+}
+</style>
diff --git a/frontend/new-web/src/views/module_generator/gencode/components/GenBasicStep.vue b/frontend/new-web/src/views/module_generator/gencode/components/GenBasicStep.vue
new file mode 100644
index 00000000..47eb3a53
--- /dev/null
+++ b/frontend/new-web/src/views/module_generator/gencode/components/GenBasicStep.vue
@@ -0,0 +1,484 @@
+<template>
+  <el-form ref="formRef" class="gen-basic-step" :model="info" :rules="rules" label-width="120px">
+    <!-- 顶部：生成回显 -->
+    <el-row :gutter="12" class="mb-3">
+      <el-col :span="24">
+        <el-card shadow="never" class="gen-echo-card">
+          <div class="gen-echo-card__title">生成回显 / 生成文件路径</div>
+          <div class="gen-echo-grid">
+            <div class="gen-echo-item">
+              <div class="gen-echo-item__k">后端路径</div>
+              <code class="gen-echo-item__v">{{ backendModuleDirPreview }}</code>
+            </div>
+            <div class="gen-echo-item">
+              <div class="gen-echo-item__k">前端视图路径</div>
+              <code class="gen-echo-item__v">{{ frontendViewDirPreview }}</code>
+            </div>
+            <div class="gen-echo-item">
+              <div class="gen-echo-item__k">前端 API 文件</div>
+              <code class="gen-echo-item__v">{{ frontendApiFilePreview }}</code>
+            </div>
+            <div class="gen-echo-item">
+              <div class="gen-echo-item__k gen-echo-item__k--with-tip">
+                权限
+                <el-tooltip
+                  content="前两段为包名、模块名；第三段为操作类型（与接口/按钮一致）：query、detail、create、update、delete、patch、export、import、download。"
+                  placement="top"
+                >
+                  <el-icon class="gen-echo-item__tip"><QuestionFilled /></el-icon>
+                </el-tooltip>
+              </div>
+              <code class="gen-echo-item__v">{{ permissionPreview }}</code>
+            </div>
+          </div>
+          <div
+            v-if="info.sub_table_name && info.sub_table_fk_name && !info.master_sub_hint"
+            class="gen-echo-warn"
+          >
+            将额外生成子表代码（不创建子表菜单）
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="16" class="gen-layout-row">
+      <el-col :span="24" class="gen-layout-left">
+        <el-card shadow="never" class="gen-form-card">
+          <template #header>
+            <div class="gen-form-card__header">
+              <span class="font-medium">基础信息</span>
+              <span class="gen-form-card__hint">切换步骤会先保存当前页</span>
+            </div>
+          </template>
+          <el-row :gutter="16">
+            <el-col :span="12">
+              <el-form-item label="表名称" prop="table_name">
+                <el-input v-model="info.table_name" placeholder="请输入表名称" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="表描述" prop="table_comment">
+                <el-input v-model="info.table_comment" placeholder="请输入表描述" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="实体类名称" prop="class_name">
+                <el-input v-model="info.class_name" placeholder="请输入" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item prop="package_name">
+                <template #label>
+                  包名
+                  <el-tooltip
+                    content="插件包名（plugin 顶层目录）。三段式示例：module_example"
+                    placement="top"
+                  >
+                    <el-icon><QuestionFilled /></el-icon>
+                  </el-tooltip>
+                </template>
+                <div class="gen-package-row">
+                  <el-input
+                    v-model="info.package_name"
+                    class="gen-package-row__input"
+                    placeholder="例如 module_example"
+                    clearable
+                  />
+                </div>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item prop="module_name">
+                <template #label>
+                  模块名
+                  <el-tooltip content="包名下第二层目录。示例：demo / gen_demo02" placement="top">
+                    <el-icon><QuestionFilled /></el-icon>
+                  </el-tooltip>
+                </template>
+                <el-input v-model="info.module_name" placeholder="例如 demo" clearable />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item prop="business_name">
+                <template #label>
+                  业务名
+                  <el-tooltip
+                    content="模块下第三层目录（可为空）。示例：demo01；留空表示仅到模块目录"
+                    placement="top"
+                  >
+                    <el-icon><QuestionFilled /></el-icon>
+                  </el-tooltip>
+                </template>
+                <el-input
+                  v-model="info.business_name"
+                  placeholder="例如 demo01（可留空）"
+                  clearable
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item prop="function_name">
+                <template #label>
+                  功能名
+                  <el-tooltip content="写入本地时作为菜单名称，例如 用户管理" placement="top">
+                    <el-icon><QuestionFilled /></el-icon>
+                  </el-tooltip>
+                </template>
+                <el-input v-model="info.function_name" placeholder="例如 用户管理" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item>
+                <template #label>
+                  上级菜单
+                  <el-tooltip content="仅可选目录；留空则在侧栏根下创建模块目录" placement="top">
+                    <el-icon><QuestionFilled /></el-icon>
+                  </el-tooltip>
+                </template>
+                <el-tree-select
+                  v-model="info.parent_menu_id"
+                  :data="menuOptions"
+                  placeholder="不选=根目录下挂模块目录；选=挂到该目录下"
+                  check-strictly
+                  filterable
+                  default-expand-all
+                  :render-after-expand="false"
+                  clearable
+                  style="width: 100%"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="备注" prop="description">
+                <el-input v-model="info.description" type="textarea" :rows="3"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-card shadow="never" class="master-sub-card mb-4">
+                <el-row :gutter="16">
+                  <el-col :span="12">
+                    <el-form-item prop="sub_table_name">
+                      <template #label>
+                        子表表名
+                        <el-tooltip
+                          content="数据库中已存在的物理表名，例如 gen_order_item"
+                          placement="top"
+                        >
+                          <el-icon><QuestionFilled /></el-icon>
+                        </el-tooltip>
+                      </template>
+                      <el-input
+                        v-model="info.sub_table_name"
+                        placeholder="与下栏同时填写，如 gen_order_item"
+                        clearable
+                        @blur="emit('master-sub-blur')"
+                      />
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="12">
+                    <el-form-item prop="sub_table_fk_name">
+                      <template #label>
+                        子表外键列
+                        <el-tooltip
+                          content="子表中指向主表主键的列名，例如 order_id（类型需与主键匹配）"
+                          placement="top"
+                        >
+                          <el-icon><QuestionFilled /></el-icon>
+                        </el-tooltip>
+                      </template>
+                      <el-input
+                        v-model="info.sub_table_fk_name"
+                        placeholder="与上栏同时填写，如 order_id"
+                        clearable
+                        @blur="emit('master-sub-blur')"
+                      />
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+                <el-alert
+                  v-if="info.master_sub_hint"
+                  class="mt-1"
+                  type="warning"
+                  :closable="false"
+                  show-icon
+                  :title="info.master_sub_hint"
+                />
+                <el-alert
+                  v-else-if="info.sub && info.sub_table_name && info.sub_table_fk_name"
+                  class="mt-1"
+                  type="success"
+                  :closable="false"
+                  show-icon
+                  title="主子表结构已从数据库加载，预览与生成将包含子表代码。"
+                />
+              </el-card>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, onUnmounted, ref, watch } from "vue";
+import type { FormInstance, FormRules } from "element-plus";
+import { QuestionFilled } from "@element-plus/icons-vue";
+import type { GenTableSchema } from "@/api/module_generator/gencode";
+import { GENCODE_BASIC_FORM_KEY } from "../gencodeInjectionKeys";
+
+defineOptions({ name: "GenBasicStep" });
+
+const props = defineProps<{
+  info: GenTableSchema;
+  rules: FormRules;
+  menuOptions: OptionType[];
+}>();
+
+function findOptionByValue(options: OptionType[], value: number | string): any | null {
+  for (const opt of options) {
+    if (String(opt.value) === String(value)) return opt as any;
+    if (opt.children?.length) {
+      const hit = findOptionByValue(opt.children, value);
+      if (hit) return hit;
+    }
+  }
+  return null;
+}
+
+function inferPackageNameFromParentMenu(): string | null {
+  const pid = props.info.parent_menu_id;
+  if (pid == null) return null;
+  const node = findOptionByValue(props.menuOptions || [], pid);
+  const routePath = (node?.route_path ?? "").toString().trim();
+  if (!routePath) return null;
+  const seg = routePath.replace(/^\/+/, "").split("/", 1)[0]?.trim();
+  if (!seg) return null;
+  return seg.startsWith("module_") ? seg : `module_${seg}`;
+}
+
+const effectivePackageName = computed(() => {
+  return inferPackageNameFromParentMenu() || (props.info.package_name || "").trim();
+});
+
+const permissionPreview = computed(() => {
+  const pkg = effectivePackageName.value;
+  const mod = (props.info.module_name || "").trim();
+  if (!pkg || !mod) return "<module_xxx>:<module>:<操作>";
+  // 与后端 permission_prefix + 模板一致；第三段为操作类型，示例用 query
+  return `${pkg}:${mod}:query`;
+});
+
+const backendModuleDirPreview = computed(() => {
+  const pkg = effectivePackageName.value;
+  const mod = (props.info.module_name || "").trim();
+  if (!pkg || !mod) return "backend/app/plugin/<module_xxx>/<module>/";
+  return `backend/app/plugin/${pkg}/${mod}/`;
+});
+
+const frontendViewDirPreview = computed(() => {
+  const pkg = effectivePackageName.value;
+  const mod = (props.info.module_name || "").trim();
+  if (!pkg || !mod) return "frontend/src/views/<module_xxx>/<module>/";
+  return `frontend/src/views/${pkg}/${mod}/`;
+});
+
+const frontendApiFilePreview = computed(() => {
+  const pkg = effectivePackageName.value;
+  const mod = (props.info.module_name || "").trim();
+  if (!pkg || !mod) return "frontend/src/api/<module_xxx>/<module>.ts";
+  return `frontend/src/api/${pkg}/${mod}.ts`;
+});
+
+const emit = defineEmits<{
+  "clear-master-sub": [];
+  "master-sub-blur": [];
+}>();
+
+const formRef = ref<FormInstance>();
+const injected = inject(GENCODE_BASIC_FORM_KEY, undefined);
+
+/** 表名 → 合法目录片段（小写、下划线），用于无模块名时推导包名 */
+function slugFromTableName(table: string): string {
+  let s = table.trim().toLowerCase();
+  if (!s) return "";
+  if (s.startsWith("gen_")) s = s.slice(4);
+  else if (s.startsWith("tb_")) s = s.slice(3);
+  s = s
+    .replace(/[^a-z0-9_]/g, "_")
+    .replace(/_+/g, "_")
+    .replace(/^_|_$/g, "");
+  return s || "table";
+}
+
+watch(
+  () => [props.info.parent_menu_id, props.info.module_name, props.info.table_name] as const,
+  () => {
+    if (props.info.parent_menu_id != null) return;
+    const current = (props.info.package_name || "").trim();
+    if (current && current !== "gencode" && current !== "module_gencode") return;
+    const mod = (props.info.module_name || "").trim();
+    const tn = (props.info.table_name || "").trim();
+    const slug = tn ? slugFromTableName(tn) : "";
+    const next = mod
+      ? mod.startsWith("module_")
+        ? mod
+        : `module_${mod}`
+      : slug
+        ? `module_${slug}`
+        : "";
+    if (next) props.info.package_name = next;
+  },
+  { immediate: true }
+);
+
+watch(
+  formRef,
+  (v) => {
+    if (injected) injected.value = v;
+  },
+  { immediate: true }
+);
+
+onUnmounted(() => {
+  if (injected) injected.value = undefined;
+});
+</script>
+
+<style scoped lang="scss">
+.gen-basic-step {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+}
+
+.gen-basic-step :deep(.el-col) {
+  min-width: 0;
+}
+
+.gen-basic-step :deep(.el-form-item__content) {
+  min-width: 0;
+}
+
+.gen-basic-step :deep(.el-input-group) {
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.gen-package-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+}
+
+.gen-package-row__input {
+  flex: 1;
+  min-width: 0;
+}
+
+.master-sub-card {
+  border: 1px solid var(--el-border-color-lighter);
+}
+
+.master-sub-card :deep(.el-card__header) {
+  padding: 8px 10px;
+}
+
+.master-sub-card :deep(.el-card__body) {
+  padding: 10px;
+}
+
+.gen-form-card {
+  overflow-x: hidden;
+  border: 1px solid var(--el-border-color-lighter);
+}
+
+.gen-form-card :deep(.el-card__body) {
+  overflow-x: hidden;
+}
+
+.gen-form-card__header {
+  display: flex;
+  gap: 12px;
+  align-items: baseline;
+  justify-content: space-between;
+}
+
+.gen-form-card__hint {
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+  white-space: nowrap;
+}
+
+.gen-echo-card {
+  border: 1px solid var(--el-border-color-lighter);
+}
+
+.gen-echo-card__title {
+  padding: 6px 8px;
+  font-size: 11px;
+  font-weight: 600;
+  background: var(--el-fill-color-light);
+  border-bottom: 1px solid var(--el-border-color-lighter);
+}
+
+.gen-echo-card :deep(.el-card__body) {
+  padding: 6px 8px;
+}
+
+.gen-echo-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px 12px;
+  padding: 6px 8px;
+}
+
+.gen-echo-item {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  min-width: 0;
+}
+
+.gen-echo-item__k {
+  flex: 0 0 auto;
+  margin-bottom: 0;
+  font-size: 11px;
+  color: var(--el-text-color-secondary);
+  white-space: nowrap;
+}
+
+.gen-echo-item__k--with-tip {
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+}
+
+.gen-echo-item__tip {
+  font-size: 12px;
+  color: var(--el-text-color-placeholder);
+  cursor: help;
+}
+
+.gen-echo-item__v {
+  display: block;
+  flex: 1;
+  min-width: 0;
+  padding: 1px 6px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 11px;
+  white-space: nowrap;
+  background: var(--el-fill-color);
+  border-radius: 3px;
+}
+
+.gen-echo-warn {
+  padding: 0 8px 6px;
+  font-size: 11px;
+  color: var(--el-color-warning);
+}
+</style>
diff --git a/frontend/new-web/src/views/module_generator/gencode/components/GenCodeDrawer.vue b/frontend/new-web/src/views/module_generator/gencode/components/GenCodeDrawer.vue
new file mode 100644
index 00000000..2c54281d
--- /dev/null
+++ b/frontend/new-web/src/views/module_generator/gencode/components/GenCodeDrawer.vue
@@ -0,0 +1,163 @@
+<template>
+  <EnhancedDrawer
+    v-model="drawerVisible"
+    :title="'【代码生成】' + (info.table_name || '')"
+    size="90%"
+    drawer-class="gencode-drawer"
+    append-to-body
+    @close="emit('close')"
+  >
+    <el-steps :active="activeStep" finish-status="success" simple>
+      <el-step title="基础配置" />
+      <el-step title="字段配置" />
+      <el-step title="预览代码" />
+    </el-steps>
+
+    <div class="gencode-drawer-step-wrap mt-4">
+      <div v-show="activeStep === 0">
+        <GenBasicStep
+          :info="info"
+          :rules="rules"
+          :menu-options="menuOptions"
+          @clear-master-sub="emit('clear-master-sub')"
+          @master-sub-blur="emit('master-sub-blur')"
+        />
+      </div>
+
+      <div v-show="activeStep === 1">
+        <GenColumnsStep
+          :info="info"
+          :dict-options="dictOptions"
+          :loading="loading"
+          :bulk-set="bulkSet"
+        />
+      </div>
+
+      <GenPreviewStep
+        v-show="activeStep === 2"
+        v-model:preview-scope="previewScope"
+        v-model:preview-types="previewTypes"
+        v-model:code="code"
+        :preview-loading="previewLoading"
+        :preview-type-options="previewTypeOptions"
+        :filtered-tree-data="filteredTreeData"
+        :cm-options="cmOptions"
+        @file-click="emit('file-click', $event)"
+        @copy-code="emit('copy-code')"
+      />
+    </div>
+
+    <template #footer>
+      <el-button :icon="Close" @click="emit('close')">关闭</el-button>
+      <el-button
+        v-if="activeStep < 2"
+        type="info"
+        :icon="Finished"
+        :loading="loading"
+        @click="emit('save')"
+      >
+        保存
+      </el-button>
+      <el-button v-if="activeStep !== 0" type="success" :icon="Back" @click="emit('prev-step')">
+        上一步
+      </el-button>
+      <el-button
+        v-if="activeStep !== 2"
+        type="primary"
+        :loading="nextStepLoading"
+        @click="emit('next-step')"
+      >
+        {{ nextStepButtonLabel }}
+        <el-icon class="el-icon--right"><Right /></el-icon>
+      </el-button>
+      <el-tooltip
+        v-if="activeStep === 2"
+        content="打包为 ZIP 下载到本机，不会在服务器创建菜单或文件"
+        placement="top"
+      >
+        <el-button type="warning" :icon="Download" :loading="loading" @click="emit('gen-download')">
+          下载代码
+        </el-button>
+      </el-tooltip>
+      <el-tooltip
+        v-if="activeStep === 2"
+        content="在服务端项目目录生成源码，并自动创建目录/菜单/按钮（若名称未冲突）"
+        placement="top"
+      >
+        <el-button
+          type="primary"
+          :icon="FolderOpened"
+          :loading="loading"
+          @click="emit('gen-write')"
+        >
+          写入本地
+        </el-button>
+      </el-tooltip>
+    </template>
+  </EnhancedDrawer>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import type { FormRules } from "element-plus";
+import { Close, Right, FolderOpened, Back, Download, Finished } from "@element-plus/icons-vue";
+import type { EditorConfiguration } from "codemirror";
+import type { GenTableSchema } from "@/api/module_generator/gencode";
+import type { DictTable } from "@/api/module_system/dict";
+import EnhancedDrawer from "@/components/CURD/EnhancedDrawer.vue";
+import type { TreeNode } from "../types";
+import GenBasicStep from "./GenBasicStep.vue";
+import GenColumnsStep from "./GenColumnsStep.vue";
+import GenPreviewStep from "./GenPreviewStep.vue";
+
+defineOptions({ name: "GenCodeDrawer" });
+
+const props = defineProps<{
+  info: GenTableSchema;
+  rules: FormRules;
+  activeStep: number;
+  menuOptions: OptionType[];
+  dictOptions: DictTable[];
+  loading: boolean;
+  nextStepLoading: boolean;
+  previewLoading: boolean;
+  previewTypeOptions: string[];
+  filteredTreeData: TreeNode[];
+  cmOptions: EditorConfiguration;
+  bulkSet: (field: string | string[], value: unknown) => void;
+}>();
+
+const nextStepButtonLabel = computed(() =>
+  props.activeStep === 0 ? "下一步：字段配置" : "下一步：预览代码"
+);
+
+const drawerVisible = defineModel<boolean>({ required: true });
+
+const previewScope = defineModel<"all" | "frontend" | "backend">("previewScope", {
+  required: true,
+});
+const previewTypes = defineModel<string[]>("previewTypes", { required: true });
+const code = defineModel<string>("code", { required: true });
+
+const emit = defineEmits<{
+  close: [];
+  "prev-step": [];
+  "next-step": [];
+  save: [];
+  "gen-download": [];
+  "gen-write": [];
+  "clear-master-sub": [];
+  "master-sub-blur": [];
+  "file-click": [data: TreeNode];
+  "copy-code": [];
+}>();
+</script>
+
+<style scoped lang="scss">
+/* 新版 ElDrawer 内部用 Splitter，size 需为百分比或纯数字(px)，勿用 min()，否则面板宽度可能异常 */
+.gencode-drawer-step-wrap {
+  max-height: calc(100vh - 220px);
+  padding-right: 6px;
+  overflow: hidden auto;
+}
+</style>
diff --git a/frontend/new-web/src/views/module_generator/gencode/components/GenColumnsStep.vue b/frontend/new-web/src/views/module_generator/gencode/components/GenColumnsStep.vue
new file mode 100644
index 00000000..bcc28fa1
--- /dev/null
+++ b/frontend/new-web/src/views/module_generator/gencode/components/GenColumnsStep.vue
@@ -0,0 +1,381 @@
+<template>
+  <div class="elTableCustom">
+    <el-alert
+      v-if="info.sub && !info.master_sub_hint && info.sub_table_name"
+      class="mb-3"
+      type="success"
+      :closable="false"
+      show-icon
+      title="当前已启用主子表：以下为「主表」字段配置；子表字段来自数据库结构，保存后可在预览中查看子表生成代码。"
+    />
+    <el-alert
+      v-else-if="info.master_sub_hint"
+      class="mb-3"
+      type="warning"
+      :closable="false"
+      show-icon
+      :title="info.master_sub_hint"
+    />
+    <p class="gencode-columns-tip">
+      菜单与路由、接口路径的对应见「基础配置」第一步中的折叠「对照」表。
+    </p>
+    <el-alert
+      v-if="columnKeyword.trim() && displayColumns.length === 0 && (info.columns?.length ?? 0) > 0"
+      class="mb-2"
+      type="warning"
+      :closable="false"
+      show-icon
+      title="无匹配列，请调整筛选词或清空筛选框"
+    />
+    <div class="mb-2 flex flex-wrap items-center gap-2">
+      <el-input
+        v-model="columnKeyword"
+        clearable
+        placeholder="筛选列名或注释"
+        class="gencode-column-filter"
+        :prefix-icon="Search"
+      />
+      <span class="gencode-bulk-hint">批量设置：</span>
+      <el-space size="small">
+        <el-dropdown>
+          <el-button size="small" type="primary" plain>查询</el-button>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item @click="bulkSet('is_query', true)">全选</el-dropdown-item>
+              <el-dropdown-item @click="bulkSet('is_query', false)">全不选</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+        <el-dropdown>
+          <el-button size="small" type="success" plain>列表</el-button>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item @click="bulkSet('is_list', true)">全选</el-dropdown-item>
+              <el-dropdown-item @click="bulkSet('is_list', false)">全不选</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+        <el-dropdown>
+          <el-button size="small" type="warning" plain>新增</el-button>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item @click="bulkSet('is_insert', true)">全选</el-dropdown-item>
+              <el-dropdown-item @click="bulkSet('is_insert', false)">全不选</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+        <el-dropdown>
+          <el-button size="small" type="danger" plain>编辑</el-button>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item @click="bulkSet('is_edit', true)">全选</el-dropdown-item>
+              <el-dropdown-item @click="bulkSet('is_edit', false)">全不选</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </el-space>
+    </div>
+    <div class="data-table__content">
+      <el-table
+        ref="dragTable"
+        v-loading="loading"
+        :data="displayColumns"
+        row-key="id"
+        :height="tableHeight"
+        highlight-current-row
+        border
+        stripe
+      >
+        <template #empty>
+          <el-empty :image-size="80" description="暂无数据" />
+        </template>
+        <el-table-column label="拖拽" width="56" fixed align="center">
+          <template #default>
+            <span
+              class="gencode-drag-handle"
+              :class="{ disabled: !!columnKeyword.trim() }"
+              title="拖拽排序（筛选时禁用）"
+            >
+              <el-icon><Rank /></el-icon>
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column label="序号" type="index" width="60" fixed />
+        <el-table-column
+          label="列名"
+          prop="column_name"
+          min-width="60"
+          :show-overflow-tooltip="true"
+        />
+        <el-table-column
+          label="类型"
+          prop="column_type"
+          min-width="60"
+          :show-overflow-tooltip="true"
+        />
+        <el-table-column label="长度" prop="column_length" width="80" :show-overflow-tooltip="true">
+          <template #default="scope">
+            <el-input v-model="scope.row.column_length" :disabled="!!scope.row.is_pk" />
+          </template>
+        </el-table-column>
+        <el-table-column label="注释" min-width="60">
+          <template #default="scope">
+            <el-input v-model="scope.row.column_comment"></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column label="后端类型" min-width="60">
+          <template #default="scope">
+            <el-select v-model="scope.row.python_type">
+              <el-option label="str" value="str" />
+              <el-option label="int" value="int" />
+              <el-option label="float" value="float" />
+              <el-option label="Decimal" value="Decimal" />
+              <el-option label="date" value="date" />
+              <el-option label="time" value="time" />
+              <el-option label="datetime" value="datetime" />
+              <el-option label="bytes" value="bytes" />
+              <el-option label="dict" value="dict" />
+              <el-option label="list" value="list" />
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column label="后端属性" min-width="60">
+          <template #default="scope">
+            <el-input v-model="scope.row.python_field"></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column label="新增" width="60">
+          <template #default="scope">
+            <el-checkbox v-model="scope.row.is_insert" />
+          </template>
+        </el-table-column>
+        <el-table-column label="编辑" width="60">
+          <template #default="scope">
+            <el-checkbox v-model="scope.row.is_edit" />
+          </template>
+        </el-table-column>
+        <el-table-column label="列表" width="60">
+          <template #default="scope">
+            <el-checkbox v-model="scope.row.is_list" />
+          </template>
+        </el-table-column>
+        <el-table-column label="查询" width="60">
+          <template #default="scope">
+            <el-checkbox v-model="scope.row.is_query" />
+          </template>
+        </el-table-column>
+        <el-table-column label="查询方式" min-width="60">
+          <template #default="scope">
+            <el-select v-model="scope.row.query_type">
+              <el-option label="=" value="EQ" />
+              <el-option label="!=" value="NE" />
+              <el-option label=">" value="GT" />
+              <el-option label=">=" value="GTE" />
+              <el-option label="<" value="LT" />
+              <el-option label="<=" value="LTE" />
+              <el-option label="LIKE" value="LIKE" />
+              <el-option label="BETWEEN" value="BETWEEN" />
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="默认值"
+          prop="column_default"
+          min-width="60"
+          :show-overflow-tooltip="true"
+        >
+          <template #default="scope">
+            <el-input v-model="scope.row.column_default" :disabled="!!scope.row.is_pk" />
+          </template>
+        </el-table-column>
+        <el-table-column label="自增" width="60">
+          <template #default="scope">
+            <el-checkbox v-model="scope.row.is_increment" />
+          </template>
+        </el-table-column>
+        <el-table-column label="可空" width="60">
+          <template #default="scope">
+            <el-checkbox v-model="scope.row.is_nullable" />
+          </template>
+        </el-table-column>
+        <el-table-column label="唯一" width="60">
+          <template #default="scope">
+            <el-checkbox v-model="scope.row.is_unique" />
+          </template>
+        </el-table-column>
+        <el-table-column label="主键" width="60">
+          <template #default="scope">
+            <el-checkbox v-model="scope.row.is_pk" />
+          </template>
+        </el-table-column>
+        <el-table-column label="表单类型">
+          <template #default="scope">
+            <el-select v-model="scope.row.html_type">
+              <el-option label="文本框" value="input" />
+              <el-option label="文本域" value="textarea" />
+              <el-option label="下拉框" value="select" />
+              <el-option label="单选框" value="radio" />
+              <el-option label="复选框" value="checkbox" />
+              <el-option label="日期控件" value="datetime" />
+              <el-option label="图片上传" value="imageUpload" />
+              <el-option label="文件上传" value="fileUpload" />
+              <el-option label="富文本控件" value="editor" />
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column label="字典类型" fixed="right">
+          <template #default="scope">
+            <el-select v-model="scope.row.dict_type" clearable filterable placeholder="请选择">
+              <el-option
+                v-for="dict in dictOptions"
+                :key="dict.dict_type"
+                :label="dict.dict_name"
+                :value="dict.dict_type || ''"
+              >
+                <span style="float: left">{{ dict.dict_name }}</span>
+                <span style="float: right; font-size: 13px; color: #8492a6">
+                  {{ dict.dict_type }}
+                </span>
+              </el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, watch, nextTick } from "vue";
+import { Search } from "@element-plus/icons-vue";
+import { useDraggable } from "vue-draggable-plus";
+import type { GenTableSchema } from "@/api/module_generator/gencode";
+import type { DictTable } from "@/api/module_system/dict";
+
+defineOptions({ name: "GenColumnsStep" });
+
+const props = defineProps<{
+  info: GenTableSchema;
+  dictOptions: DictTable[];
+  loading: boolean;
+  bulkSet: (field: string | string[], value: unknown) => void;
+}>();
+
+const columnKeyword = ref("");
+const dragTable = ref<any>(null);
+const dragContainer = ref<HTMLElement | null>(null);
+let draggableApi: { destroy?: () => void; pause?: () => void; start?: () => void } | null = null;
+
+// 计算表格高度：视口高度 - 顶部导航栏 - 步骤条 - 提示文字 - 筛选栏 - 底部按钮 - 边距
+// 大约：60(顶部) + 60(步骤) + 30(提示) + 50(筛选) + 80(底部按钮) + 100(边距) = 380px
+const tableHeight = computed(() => {
+  return "calc(100vh - 300px)"; // -80 底部按钮
+});
+
+const columnsModel = computed({
+  get: () => props.info.columns || [],
+  set: (v) => {
+    // props.info 是父组件传入的 reactive 对象，可以直接回写
+    props.info.columns = v as any;
+  },
+});
+
+const displayColumns = computed(() => {
+  const cols = props.info.columns || [];
+  const q = columnKeyword.value.trim().toLowerCase();
+  if (!q) return cols;
+  return cols.filter((c) => {
+    const name = String(c.column_name ?? "").toLowerCase();
+    const comment = String(c.column_comment ?? "").toLowerCase();
+    return name.includes(q) || comment.includes(q);
+  });
+});
+
+function syncSortNumbers() {
+  const cols = columnsModel.value || [];
+  cols.forEach((c: any, idx: number) => {
+    c.sort = idx + 1;
+  });
+}
+
+async function setupRowDraggable() {
+  // 筛选状态下禁用拖拽：displayColumns 是子集，直接拖拽会导致索引映射混乱
+  if (columnKeyword.value.trim()) {
+    draggableApi?.destroy?.();
+    draggableApi = null;
+    dragContainer.value = null;
+    return;
+  }
+
+  await nextTick();
+  const el = dragTable.value?.$el as HTMLElement | undefined;
+  const tbody = el?.querySelector?.(".el-table__body-wrapper tbody") as HTMLElement | null;
+  if (!tbody) return;
+  dragContainer.value = tbody;
+
+  // 重新绑定
+  draggableApi?.destroy?.();
+  draggableApi = useDraggable(dragContainer, columnsModel, {
+    animation: 150,
+    draggable: "tr",
+    handle: ".gencode-drag-handle:not(.disabled)",
+    onEnd() {
+      syncSortNumbers();
+    },
+  });
+}
+
+onMounted(() => {
+  void setupRowDraggable();
+});
+
+watch(
+  () => [columnKeyword.value, (props.info.columns || []).length],
+  async () => {
+    await setupRowDraggable();
+  }
+);
+
+onBeforeUnmount(() => {
+  draggableApi?.destroy?.();
+  draggableApi = null;
+});
+</script>
+
+<style scoped lang="scss">
+.gencode-columns-tip {
+  margin: 0 0 10px;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--el-text-color-secondary);
+}
+
+.gencode-column-filter {
+  width: 200px;
+  max-width: 100%;
+}
+
+.gencode-bulk-hint {
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+  user-select: none;
+}
+
+.gencode-drag-handle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 22px;
+  font-size: 14px;
+  line-height: 1;
+  color: var(--el-text-color-secondary);
+  cursor: grab;
+  user-select: none;
+}
+
+.gencode-drag-handle.disabled {
+  cursor: not-allowed;
+  opacity: 0.35;
+}
+</style>
diff --git a/frontend/new-web/src/views/module_generator/gencode/components/GenPreviewStep.vue b/frontend/new-web/src/views/module_generator/gencode/components/GenPreviewStep.vue
new file mode 100644
index 00000000..fa8d1445
--- /dev/null
+++ b/frontend/new-web/src/views/module_generator/gencode/components/GenPreviewStep.vue
@@ -0,0 +1,151 @@
+<template>
+  <el-row v-loading="previewLoading" element-loading-text="正在加载预览…">
+    <el-col v-if="!previewLoading && isTreeEmpty" :span="24">
+      <el-empty>
+        <template #description>
+          <p class="mb-1 font-medium">暂无预览文件</p>
+          <p class="gencode-preview-empty-tip">
+            若刚保存过仍为空，可将「预览范围」改为「全部」；或返回上一步检查字段与主子表后重新进入。
+          </p>
+        </template>
+      </el-empty>
+    </el-col>
+    <template v-else>
+      <el-col :span="24" class="mb-2">
+        <div class="flex-y-center gap-3">
+          <span class="text-sm color-#909399">预览范围</span>
+          <el-radio-group v-model="previewScope" size="small">
+            <el-radio-button value="all">全部</el-radio-button>
+            <el-radio-button value="frontend">前端</el-radio-button>
+            <el-radio-button value="backend">后端</el-radio-button>
+          </el-radio-group>
+          <span class="ml-3 text-sm color-#909399">类型</span>
+          <el-checkbox-group v-model="previewTypes" size="small">
+            <el-checkbox-button v-for="t in previewTypeOptions" :key="t" :value="t">
+              {{ t }}
+            </el-checkbox-button>
+          </el-checkbox-group>
+        </div>
+      </el-col>
+      <el-col :span="6">
+        <el-scrollbar max-height="72vh">
+          <el-tree
+            :data="filteredTreeData"
+            default-expand-all
+            highlight-current
+            @node-click="onTreeNodeClick"
+          >
+            <template #default="{ data }">
+              <div :class="`i-svg:${getFileTreeNodeIcon(data.label)}`" />
+              <span class="ml-1" :title="data.full_path || data.label">
+                {{ data.label }}
+              </span>
+            </template>
+          </el-tree>
+        </el-scrollbar>
+      </el-col>
+      <el-col :span="18">
+        <el-scrollbar max-height="72vh">
+          <div class="absolute z-36 right-5 top-2">
+            <el-link type="primary" @click="emit('copy-code')">
+              <el-icon>
+                <CopyDocument />
+              </el-icon>
+              复制代码
+            </el-link>
+          </div>
+
+          <Codemirror
+            ref="cmRef"
+            v-model:value="code"
+            :options="cmOptions"
+            border
+            :readonly="true"
+            height="100%"
+            width="100%"
+          />
+        </el-scrollbar>
+      </el-col>
+    </template>
+  </el-row>
+</template>
+
+<script setup lang="ts">
+import "codemirror/mode/javascript/javascript.js";
+import "codemirror/mode/python/python.js";
+import "codemirror/mode/htmlmixed/htmlmixed.js";
+import "codemirror/theme/dracula.css";
+import { computed, inject, onUnmounted, ref, watch } from "vue";
+import Codemirror from "codemirror-editor-vue3";
+import type { EditorConfiguration } from "codemirror";
+import type { CmComponentRef } from "codemirror-editor-vue3";
+import { CopyDocument } from "@element-plus/icons-vue";
+import { GENCODE_CM_KEY } from "../gencodeInjectionKeys";
+import type { TreeNode } from "../types";
+
+defineOptions({ name: "GenPreviewStep" });
+
+const previewScope = defineModel<"all" | "frontend" | "backend">("previewScope", {
+  required: true,
+});
+const previewTypes = defineModel<string[]>("previewTypes", { required: true });
+
+const props = defineProps<{
+  previewLoading: boolean;
+  previewTypeOptions: string[];
+  filteredTreeData: TreeNode[];
+  cmOptions: EditorConfiguration;
+}>();
+
+const isTreeEmpty = computed(() => !props.filteredTreeData || props.filteredTreeData.length === 0);
+
+const code = defineModel<string>("code", { required: true });
+
+const emit = defineEmits<{
+  "file-click": [data: TreeNode];
+  "copy-code": [];
+}>();
+
+const cmRef = ref<CmComponentRef>();
+const injected = inject(GENCODE_CM_KEY, undefined);
+
+watch(
+  cmRef,
+  (v) => {
+    if (injected) injected.value = v;
+  },
+  { immediate: true }
+);
+
+onUnmounted(() => {
+  if (injected) injected.value = undefined;
+});
+
+function onTreeNodeClick(data: TreeNode) {
+  emit("file-click", data);
+}
+
+function getFileTreeNodeIcon(label: string): string {
+  if (label.endsWith(".py")) return "python";
+  if (label.endsWith(".vue")) return "vue";
+  if (label.endsWith(".ts")) return "typescript";
+  return "file";
+}
+</script>
+
+<style scoped lang="scss">
+.gencode-preview-meta-tip {
+  margin: 0 0 8px;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--el-text-color-secondary);
+}
+
+.gencode-preview-empty-tip {
+  max-width: 420px;
+  margin: 0 auto;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--el-text-color-secondary);
+}
+</style>
diff --git a/frontend/new-web/src/views/module_generator/gencode/components/GencodeHelpPanel.vue b/frontend/new-web/src/views/module_generator/gencode/components/GencodeHelpPanel.vue
new file mode 100644
index 00000000..c0843625
--- /dev/null
+++ b/frontend/new-web/src/views/module_generator/gencode/components/GencodeHelpPanel.vue
@@ -0,0 +1,111 @@
+<template>
+  <el-collapse class="gencode-help-collapse mb-4" accordion>
+    <el-collapse-item name="rules">
+      <template #title>
+        <span class="gencode-help-collapse__title">
+          <el-icon class="gencode-help-collapse__icon"><InfoFilled /></el-icon>
+          菜单、页面路由与接口路径对照（写入本地时）
+        </span>
+      </template>
+      <el-table :data="rows" border size="small" class="gencode-rules-table">
+        <el-table-column prop="parent" label="上级目录" min-width="88" />
+        <el-table-column prop="sidebar" label="侧栏结构（目录→菜单→按钮）" min-width="200" />
+        <el-table-column prop="page" label="浏览器地址（页面路由）" min-width="160" />
+        <el-table-column prop="api" label="前端请求的 HTTP 路径" min-width="160" />
+      </el-table>
+      <p class="gencode-help-footnote">
+        包名、模块名、业务名见下方表单（业务名对应 plugin 下功能目录，可与
+        <code>module_example</code>
+        中
+        <code>demo</code>
+        、
+        <code>demo/demo01</code>
+        、
+        <code>gen_demo02</code>
+        对照）。权限为
+        <code>包名:模块名:操作</code>
+        ，第三段是操作类型（如
+        <code>query</code>
+        、
+        <code>create</code>
+        ），与业务目录名无关。动态路由将
+        <code>module_xxx</code>
+        映射为接口前缀
+        <code>/xxx</code>
+        ，故页面 URL 与 API 前缀可以不同。仅「下载 ZIP」不会创建菜单。
+      </p>
+    </el-collapse-item>
+  </el-collapse>
+</template>
+
+<script setup lang="ts">
+import { InfoFilled } from "@element-plus/icons-vue";
+
+defineOptions({ name: "GencodeHelpPanel" });
+
+const rows = [
+  {
+    parent: "已选",
+    sidebar: "上级目录 → 短包名目录 → 功能菜单 → 按钮",
+    page: "/包名/业务名",
+    api: "/短包名/业务名",
+  },
+  {
+    parent: "未选",
+    sidebar: "module_包名 → 功能菜单 → 按钮（与 plugin 目录一致）",
+    page: "/module_包名/业务名",
+    api: "/短包名/业务名",
+  },
+];
+</script>
+
+<style scoped lang="scss">
+.gencode-help-collapse {
+  overflow: hidden;
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: var(--el-border-radius-base);
+}
+
+.gencode-help-collapse :deep(.el-collapse-item__header) {
+  padding: 8px 12px;
+  font-size: 13px;
+  font-weight: 500;
+  background: var(--el-fill-color-light);
+}
+
+.gencode-help-collapse :deep(.el-collapse-item__wrap) {
+  border-top: 1px solid var(--el-border-color-lighter);
+}
+
+.gencode-help-collapse :deep(.el-collapse-item__content) {
+  padding: 10px 12px 12px;
+}
+
+.gencode-help-collapse__title {
+  display: inline-flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.gencode-help-collapse__icon {
+  flex-shrink: 0;
+}
+
+.gencode-rules-table :deep(.el-table__cell) {
+  font-size: 12px;
+}
+
+.gencode-help-footnote {
+  margin: 10px 0 0;
+  font-size: 12px;
+  line-height: 1.55;
+  color: var(--el-text-color-secondary);
+}
+
+.gencode-help-footnote code {
+  padding: 0 4px;
+  font-size: 11px;
+  background: var(--el-fill-color);
+  border-radius: 3px;
+}
+</style>
diff --git a/frontend/new-web/src/views/module_generator/gencode/components/ImportDbTableDialog.vue b/frontend/new-web/src/views/module_generator/gencode/components/ImportDbTableDialog.vue
new file mode 100644
index 00000000..f70248d5
--- /dev/null
+++ b/frontend/new-web/src/views/module_generator/gencode/components/ImportDbTableDialog.vue
@@ -0,0 +1,157 @@
+<template>
+  <EnhancedDialog
+    ref="dialogRef"
+    v-model="open"
+    title="导入表"
+    width="min(960px, 96vw)"
+    append-to-body
+    @fullscreen-change="onFullscreenChange"
+  >
+    <el-form ref="importQueryRef" :model="query" :inline="true">
+      <el-form-item label="表名称" prop="table_name">
+        <el-input
+          v-model="query.table_name"
+          placeholder="请输入表名称"
+          clearable
+          style="width: 180px"
+          @keyup.enter="emit('query')"
+        />
+      </el-form-item>
+      <el-form-item label="表描述" prop="table_comment">
+        <el-input
+          v-model="query.table_comment"
+          placeholder="请输入表描述"
+          clearable
+          style="width: 180px"
+          @keyup.enter="emit('query')"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          v-hasPerm="['module_generator:dblist:query']"
+          type="primary"
+          icon="Search"
+          @click="emit('query')"
+        >
+          搜索
+        </el-button>
+        <el-button
+          v-hasPerm="['module_generator:dblist:query']"
+          icon="Refresh"
+          @click="emit('reset')"
+        >
+          重置
+        </el-button>
+      </el-form-item>
+    </el-form>
+    <el-row>
+      <el-table
+        ref="tableRef"
+        :data="data"
+        :height="tableHeight"
+        border
+        @row-click="onRowClick"
+        @selection-change="onSelectionChange"
+      >
+        <template #empty>
+          <el-empty :image-size="80" description="暂无数据" />
+        </template>
+        <el-table-column type="selection" width="55"></el-table-column>
+        <el-table-column label="序号" type="index" min-width="30" align="center" fixed>
+          <template #default="scope">
+            <span>
+              {{ ((query.page_no ?? 1) - 1) * (query.page_size ?? 10) + scope.$index + 1 }}
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="database_name"
+          label="数据库名称"
+          :show-overflow-tooltip="true"
+        ></el-table-column>
+        <el-table-column
+          prop="table_name"
+          label="表名称"
+          :show-overflow-tooltip="true"
+        ></el-table-column>
+        <el-table-column
+          prop="table_comment"
+          label="表描述"
+          :show-overflow-tooltip="true"
+        ></el-table-column>
+        <el-table-column prop="table_type" label="表类型"></el-table-column>
+      </el-table>
+      <pagination
+        v-model:page="query.page_no"
+        v-model:limit="query.page_size"
+        :total="total"
+        @pagination="emit('fetch')"
+      />
+    </el-row>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" :loading="confirmLoading" @click="emit('confirm')">
+          确 定
+        </el-button>
+        <el-button @click="open = false">取 消</el-button>
+      </div>
+    </template>
+  </EnhancedDialog>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import type { FormInstance, TableInstance } from "element-plus";
+import type { DBTableSchema, GenTablePageQuery } from "@/api/module_generator/gencode";
+import EnhancedDialog from "@/components/CURD/EnhancedDialog.vue";
+
+defineOptions({ name: "ImportDbTableDialog" });
+
+defineProps<{
+  data: DBTableSchema[];
+  total: number;
+  confirmLoading: boolean;
+}>();
+
+const open = defineModel<boolean>({ required: true });
+const query = defineModel<GenTablePageQuery>("query", { required: true });
+
+const emit = defineEmits<{
+  query: [];
+  reset: [];
+  confirm: [];
+  fetch: [];
+  "selection-change": [rows: { table_name: string; table_comment: string }[]];
+}>();
+
+const importQueryRef = ref<FormInstance>();
+const tableRef = ref<TableInstance>();
+const isFullscreen = ref(false);
+
+// 根据全屏状态计算表格高度
+const tableHeight = computed(() => {
+  return isFullscreen.value ? "calc(100vh - 320px)" : "300px";
+});
+
+function onFullscreenChange(fullscreen: boolean) {
+  isFullscreen.value = fullscreen;
+}
+
+function onRowClick(row: DBTableSchema) {
+  tableRef.value?.toggleRowSelection(row);
+}
+
+function onSelectionChange(selection: DBTableSchema[]) {
+  emit(
+    "selection-change",
+    selection.map((item) => ({
+      table_name: item.table_name || "",
+      table_comment: item.table_comment || "",
+    }))
+  );
+}
+
+defineExpose({
+  resetQueryForm: () => importQueryRef.value?.resetFields(),
+});
+</script>
diff --git a/frontend/new-web/src/views/module_generator/gencode/gencodeInjectionKeys.ts b/frontend/new-web/src/views/module_generator/gencode/gencodeInjectionKeys.ts
new file mode 100644
index 00000000..30549d7d
--- /dev/null
+++ b/frontend/new-web/src/views/module_generator/gencode/gencodeInjectionKeys.ts
@@ -0,0 +1,10 @@
+import type { InjectionKey, Ref } from "vue";
+import type { FormInstance } from "element-plus";
+import type { CmComponentRef } from "codemirror-editor-vue3";
+
+/** 代码生成抽屉内 el-form 与父页 ref 同步（校验/重置） */
+export const GENCODE_BASIC_FORM_KEY: InjectionKey<Ref<FormInstance | undefined>> =
+  Symbol("gencodeBasicForm");
+
+/** 预览区 CodeMirror 与父页 ref 同步（主题） */
+export const GENCODE_CM_KEY: InjectionKey<Ref<CmComponentRef | undefined>> = Symbol("gencodeCm");
diff --git a/frontend/new-web/src/views/module_generator/gencode/index.vue b/frontend/new-web/src/views/module_generator/gencode/index.vue
new file mode 100644
index 00000000..8169c336
--- /dev/null
+++ b/frontend/new-web/src/views/module_generator/gencode/index.vue
@@ -0,0 +1,1290 @@
+<template>
+  <div class="app-container">
+    <PageSearch
+      ref="searchRef"
+      :search-config="searchConfig"
+      @query-click="handleQueryClick"
+      @reset-click="handleResetClick"
+    />
+
+    <PageContent ref="contentRef" :content-config="contentConfig">
+      <template #toolbar="{ toolbarRight, onToolbar, removeIds, cols }">
+        <CrudToolbarLeft :remove-ids="removeIds">
+          <el-row :gutter="10">
+            <el-col :span="1.5">
+              <el-button
+                v-hasPerm="['module_generator:gencode:create']"
+                type="primary"
+                icon="Plus"
+                @click="createTableVisible = true"
+              >
+                创建
+              </el-button>
+            </el-col>
+            <el-col :span="1.5">
+              <el-button
+                v-hasPerm="['module_generator:gencode:import']"
+                type="success"
+                icon="Upload"
+                @click="handleImportClick"
+              >
+                导入
+              </el-button>
+            </el-col>
+            <el-col :span="1.5">
+              <el-button
+                v-hasPerm="['module_generator:gencode:delete']"
+                type="danger"
+                icon="Delete"
+                :disabled="removeIds.length === 0"
+                @click="handleDelete()"
+              >
+                批量删除
+              </el-button>
+            </el-col>
+            <el-col :span="1.5">
+              <el-button
+                v-hasPerm="['module_generator:gencode:operate']"
+                type="warning"
+                icon="Download"
+                :disabled="removeIds.length === 0"
+                @click="handleGenTable('0')"
+              >
+                批量生成
+              </el-button>
+            </el-col>
+          </el-row>
+        </CrudToolbarLeft>
+        <div class="data-table__toolbar--right">
+          <CrudToolbarRight :buttons="toolbarRight" :cols="cols" :on-toolbar="onToolbar" />
+        </div>
+      </template>
+
+      <template #table="{ data, loading: tableLoading, tableRef, onSelectionChange, pagination }">
+        <div class="data-table__content">
+          <el-table
+            :ref="tableRef as any"
+            v-loading="tableLoading"
+            row-key="id"
+            :data="data"
+            height="100%"
+            border
+            stripe
+            @selection-change="
+              (s) => {
+                handleTableSelectionChange(s as GenTableSchema[]);
+                onSelectionChange(s);
+              }
+            "
+          >
+            <template #empty>
+              <el-empty :image-size="80" description="暂无数据" />
+            </template>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'selection')?.show"
+              type="selection"
+              align="center"
+              width="55"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'index')?.show"
+              label="序号"
+              type="index"
+              min-width="30"
+              align="center"
+              fixed
+            >
+              <template #default="scope">
+                <span>
+                  {{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }}
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'table_name')?.show"
+              label="表名称"
+              prop="table_name"
+              :show-overflow-tooltip="true"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'table_comment')?.show"
+              label="表描述"
+              prop="table_comment"
+              :show-overflow-tooltip="true"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'class_name')?.show"
+              label="实体"
+              prop="class_name"
+              :show-overflow-tooltip="true"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'created_time')?.show"
+              label="创建时间"
+              prop="created_time"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'updated_time')?.show"
+              label="更新时间"
+              prop="updated_time"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'operation')?.show"
+              label="操作"
+              align="center"
+              min-width="120"
+              class-name="small-padding fixed-width"
+            >
+              <template #default="scope">
+                <el-button
+                  v-hasPerm="['module_generator:gencode:update']"
+                  link
+                  type="primary"
+                  :icon="MagicStick"
+                  @click="handlePreviewTable(scope.row)"
+                >
+                  代码生成
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_generator:gencode:delete']"
+                  link
+                  type="danger"
+                  icon="Delete"
+                  @click="handleDelete(scope.row)"
+                >
+                  删除
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_generator:db:sync']"
+                  link
+                  type="success"
+                  icon="Refresh"
+                  @click="handleSynchDb(scope.row)"
+                >
+                  同步
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </template>
+    </PageContent>
+
+    <CreateTableDialog
+      v-model="createTableVisible"
+      :loading="loading"
+      :link-from-gen="createTableLinkFromGen"
+      @submit="handleCreateTableSubmit"
+    />
+
+    <ImportDbTableDialog
+      ref="importDbDialogRef"
+      v-model="importVisible"
+      v-model:query="importQueryFormData"
+      :data="dbTableList"
+      :total="importTotal"
+      :confirm-loading="importLoading"
+      @query="handleImportQuery"
+      @reset="handleImportReset"
+      @confirm="handleImportTable"
+      @fetch="getDbList"
+      @selection-change="handleImportTableSelectionChange"
+    />
+
+    <GenCodeDrawer
+      v-model="editVisible"
+      v-model:preview-scope="previewScope"
+      v-model:preview-types="previewTypes"
+      v-model:code="code"
+      :info="info"
+      :rules="rules"
+      :active-step="activeStep"
+      :menu-options="menuOptions"
+      :dict-options="dictOptions"
+      :loading="loading"
+      :next-step-loading="nextStepLoading"
+      :preview-loading="previewLoading"
+      :preview-type-options="previewTypeOptions"
+      :filtered-tree-data="filteredTreeData"
+      :cm-options="cmOptions"
+      :bulk-set="bulkSet"
+      @close="handleClose"
+      @prev-step="prevStep"
+      @next-step="nextStep"
+      @save="handleSave"
+      @gen-download="handleGenTable('0', info)"
+      @gen-write="handleGenTable('1', info)"
+      @clear-master-sub="clearMasterSub"
+      @master-sub-blur="onMasterSubFieldBlur"
+      @file-click="handleFileTreeNodeClick"
+      @copy-code="handleCopyCode"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  name: "GenCode",
+  inheritAttrs: false,
+});
+
+import { ref, reactive, computed, onActivated, watch, nextTick, unref, provide } from "vue";
+import { useClipboard } from "@vueuse/core";
+import { useRoute } from "vue-router";
+import type { EditorConfiguration } from "codemirror";
+import type { CmComponentRef } from "codemirror-editor-vue3";
+import { ElMessage, ElMessageBox, type FormInstance } from "element-plus";
+import { MagicStick } from "@element-plus/icons-vue";
+import GencodeAPI, {
+  type GenTableSchema,
+  type DBTableSchema,
+  type GenTablePageQuery,
+} from "@/api/module_generator/gencode";
+import MenuAPI, { MenuTable } from "@/api/module_system/menu";
+import DictAPI, { DictTable } from "@/api/module_system/dict";
+import { MenuTypeEnum } from "@/enums";
+import { useSettingsStore } from "@/store";
+import { ThemeMode } from "@/enums/settings/theme.enum";
+import CrudToolbarLeft from "@/components/CURD/CrudToolbarLeft.vue";
+import CrudToolbarRight from "@/components/CURD/CrudToolbarRight.vue";
+import PageSearch from "@/components/CURD/PageSearch.vue";
+import PageContent from "@/components/CURD/PageContent.vue";
+import CreateTableDialog, { type CreateTableSubmitMeta } from "./components/CreateTableDialog.vue";
+import GenCodeDrawer from "./components/GenCodeDrawer.vue";
+import ImportDbTableDialog from "./components/ImportDbTableDialog.vue";
+import { GENCODE_BASIC_FORM_KEY, GENCODE_CM_KEY } from "./gencodeInjectionKeys";
+import type { TreeNode } from "./types";
+import { useCrudList } from "@/components/CURD/useCrudList";
+import type { IContentConfig, ISearchConfig } from "@/components/CURD/types";
+
+// 表格列配置接口
+interface TableColumn {
+  prop: string;
+  label: string;
+  show: boolean;
+  minWidth?: string;
+  formatter?: (row: any, column: any) => any;
+}
+
+// 文件数据接口
+interface FileData {
+  path: string;
+  file_name: string;
+  content: string;
+  full_path: string;
+}
+
+const { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList } = useCrudList();
+
+// 组件引用（与子组件 inject 同步，供校验 / CodeMirror 主题）
+const cmRef = ref<CmComponentRef>();
+const basicInfo = ref<FormInstance>();
+const importDbDialogRef = ref<InstanceType<typeof ImportDbTableDialog>>();
+
+provide(GENCODE_BASIC_FORM_KEY, basicInfo);
+provide(GENCODE_CM_KEY, cmRef);
+
+// 状态管理
+const loading = ref(false);
+const nextStepLoading = ref(false);
+const uniqueId = ref("");
+const editVisible = ref(false);
+const activeStep = ref(0);
+
+// UI状态
+const createTableVisible = ref(false);
+const importVisible = ref(false);
+
+// 表单和列表数据
+const dbTableList = ref<DBTableSchema[]>([]);
+const ids = ref<number[]>([]);
+const tableNames = ref<string[]>([]);
+
+// 导入弹窗专用状态
+const importLoading = ref(false);
+const importTotal = ref<number>(0);
+const importQueryFormData = ref<GenTablePageQuery>({
+  page_no: 1,
+  page_size: 10,
+  table_name: undefined,
+  table_comment: undefined,
+});
+
+// 下拉选项数据
+const dictOptions = ref<DictTable[]>([]);
+const menuOptions = ref<OptionType[]>([]);
+
+// 表格数据
+type TableItem = {
+  table_name: string;
+  table_comment: string;
+};
+const tables = ref<TableItem[]>([]);
+
+// 导入按钮点击事件
+async function handleImportClick() {
+  importVisible.value = true;
+  await getDbList();
+}
+
+// 预览相关数据
+const preview = reactive({
+  open: false,
+  title: "代码预览",
+  data: {},
+  active_name: "controller.py",
+});
+
+/** 预览接口加载中（第三步） */
+const previewLoading = ref(false);
+
+const previewScope = ref<"all" | "frontend" | "backend">("all");
+const previewTypeOptions = ["ts", "vue", "python"];
+const previewTypes = ref<string[]>([...previewTypeOptions]);
+const code = ref<string>("");
+const treeData = ref<TreeNode[]>([]);
+
+const searchConfig = reactive<ISearchConfig>({
+  permPrefix: "module_generator:gencode",
+  colon: true,
+  isExpandable: false,
+  showNumber: 3,
+  form: { labelWidth: "auto" },
+  searchButtonPerm: "module_generator:gencode:query",
+  resetButtonPerm: "module_generator:gencode:query",
+  formItems: [
+    {
+      prop: "table_name",
+      label: "表名称",
+      type: "input",
+      attrs: { placeholder: "请输入表名称", clearable: true, style: { width: "200px" } },
+    },
+    {
+      prop: "table_comment",
+      label: "表描述",
+      type: "input",
+      attrs: { placeholder: "请输入表描述", clearable: true, style: { width: "200px" } },
+    },
+  ],
+});
+
+const contentCols = reactive<TableColumn[]>([
+  { prop: "selection", label: "选择框", show: true },
+  { prop: "index", label: "序号", show: true },
+  { prop: "table_name", label: "表名称", show: true },
+  { prop: "table_comment", label: "表描述", show: true },
+  { prop: "class_name", label: "实体", show: true },
+  { prop: "created_time", label: "创建时间", show: true },
+  { prop: "updated_time", label: "更新时间", show: true },
+  { prop: "operation", label: "操作", show: true },
+]);
+
+const contentConfig = reactive<IContentConfig<GenTablePageQuery>>({
+  permPrefix: "module_generator:gencode",
+  cols: contentCols as IContentConfig["cols"],
+  hideColumnFilter: false,
+  toolbar: [],
+  defaultToolbar: ["refresh", "filter"],
+  pagination: {
+    pageSize: 10,
+    pageSizes: [10, 20, 30, 50],
+  },
+  request: { page_no: "page_no", page_size: "page_size" },
+  indexAction: async (params) => {
+    const res = await GencodeAPI.listTable(params as GenTablePageQuery);
+    return {
+      total: res.data.data.total,
+      list: res.data.data.items,
+    };
+  },
+});
+
+const settingsStore = useSettingsStore();
+
+// 主题计算属性
+const codeTheme = computed(() => (settingsStore.theme === ThemeMode.DARK ? "dracula" : "default"));
+
+// 监听主题变化并更新CodeMirror实例
+watch(codeTheme, (newTheme) => {
+  if (cmRef.value && cmRef.value.cminstance) {
+    cmRef.value.cminstance.setOption("theme", newTheme);
+  }
+});
+
+// CodeMirror配置
+const cmOptions: EditorConfiguration = {
+  mode: "text/javascript",
+  lineNumbers: true,
+  smartIndent: true,
+  indentUnit: 2,
+  tabSize: 2,
+  readOnly: false,
+  theme: codeTheme.value,
+  lineWrapping: true,
+  autofocus: false,
+};
+
+// 工具函数
+const { copy } = useClipboard();
+
+// ===== 计算属性 =====
+
+// 过滤后的文件树数据
+const filteredTreeData = computed<TreeNode[]>(() => {
+  if (!treeData.value.length) return [];
+
+  // 基于原树按 scope/types 过滤叶子节点
+  const match = (label: string, parentPath: string[]): boolean => {
+    // scope 过滤：根据路径初步判断
+    if (previewScope.value !== "all") {
+      // 根据后端返回的格式，检查路径或文件名特征
+      const isPythonBackend =
+        parentPath.some((part) => part === "backend" || part === "python") || label.includes(".py");
+      const isVueFrontend =
+        parentPath.some((part) => part === "frontend" || part === "vue") ||
+        label.includes(".vue") ||
+        label.includes(".ts");
+
+      if (previewScope.value === "backend" && !isPythonBackend) return false;
+      if (previewScope.value === "frontend" && !isVueFrontend) return false;
+    }
+
+    // 类型过滤：根据文件内容特征判断类型
+    if (label.endsWith(".py")) return previewTypes.value.includes("python");
+    if (label.endsWith(".vue")) return previewTypes.value.includes("vue");
+    if (label.endsWith(".ts")) return previewTypes.value.includes("ts");
+
+    return true;
+  };
+
+  const cloneFilter = (node: TreeNode, parents: string[] = []): TreeNode | null => {
+    if (!node.children || node.children.length === 0) {
+      return match(node.label, parents) ? { ...node } : null;
+    }
+    const nextParents = [...parents, node.label];
+    const children = (node.children || [])
+      .map((c) => cloneFilter(c, nextParents))
+      .filter(Boolean) as TreeNode[];
+    if (!children.length) return null;
+    return { label: node.label, children };
+  };
+
+  const filtered = treeData.value.map((n) => cloneFilter(n)).filter(Boolean) as TreeNode[];
+  return filtered;
+});
+
+// ===== 功能函数 =====
+
+/** 一键复制代码 */
+const handleCopyCode = () => {
+  const content = code.value;
+
+  if (content) {
+    copy(content);
+    ElMessage.success("代码复制成功");
+  } else {
+    ElMessage.warning("没有可复制的代码");
+  }
+};
+
+/** 文件树节点点击事件 */
+function handleFileTreeNodeClick(data: TreeNode): void {
+  if (data && (!data.children || data.children.length === 0)) {
+    code.value = data.content || "";
+    void nextTick(() => applyPreviewEditorMode(data.label));
+  }
+}
+
+/** 递归构建树形结构 */
+function buildTree(data: FileData[]): TreeNode {
+  // 创建根节点
+  const root: TreeNode = { label: "前后端代码", children: [] };
+
+  data.forEach((item) => {
+    // 将路径分成数组（确保使用正斜杠）
+    const parts = item.path.split("/").filter((part) => part !== "");
+
+    let currentNode = root;
+
+    // 遍历路径部分，创建对应的文件夹节点
+    parts.forEach((part) => {
+      // 查找或创建当前部分的子节点
+      let node = currentNode.children?.find((child) => child.label === part);
+      if (!node) {
+        node = { label: part, children: [] };
+        currentNode.children?.push(node);
+      }
+      currentNode = node;
+    });
+
+    // 添加文件节点（保持原有目录树展示：文件节点仅显示文件名）
+    currentNode.children?.push({
+      label: item.file_name,
+      full_path: item.full_path,
+      content: item?.content,
+    });
+  });
+
+  return root;
+}
+
+/** 深度优先取第一个文件节点 */
+function findFirstLeafInTree(nodes: TreeNode[]): TreeNode | null {
+  for (const node of nodes) {
+    if (!node.children || node.children.length === 0) {
+      return node;
+    }
+    const leaf = findFirstLeafInTree(node.children);
+    if (leaf) return leaf;
+  }
+  return null;
+}
+
+/** 按文件名切换预览区语法高亮 */
+function applyPreviewEditorMode(fileLabel: string) {
+  const inst = cmRef.value?.cminstance;
+  if (!inst) return;
+  let mode = "text/javascript";
+  if (fileLabel.endsWith(".py")) mode = "text/x-python";
+  else if (fileLabel.endsWith(".vue")) mode = "text/html";
+  else if (fileLabel.endsWith(".ts")) mode = "text/typescript";
+  inst.setOption("mode", mode);
+}
+
+/** 获取生成预览 */
+async function handlePreview(row: GenTableSchema): Promise<void> {
+  if (!row.id) {
+    ElMessage.warning("无效的表ID");
+    return;
+  }
+
+  previewLoading.value = true;
+  try {
+    const response = await GencodeAPI.previewTable(row.id!);
+    const raw = response.data?.data;
+    if (!raw || typeof raw !== "object" || Object.keys(raw).length === 0) {
+      ElMessage.warning("预览内容为空，请先保存配置并检查字段与主子表设置");
+      treeData.value = [];
+      code.value = "";
+      preview.data = {};
+      return;
+    }
+
+    preview.data = raw;
+
+    const filesData = Object.entries(raw).map(([key, content]) => {
+      const pathParts = key.split("/");
+      let fileName = pathParts.pop() || "";
+      const path = pathParts.join("/");
+
+      if (fileName.endsWith(".j2")) {
+        fileName = fileName.substring(0, fileName.lastIndexOf(".j2"));
+      }
+
+      const contentStr = typeof content === "string" ? content : JSON.stringify(content);
+
+      return {
+        path,
+        file_name: fileName,
+        content: contentStr,
+        full_path: key,
+      } as FileData;
+    });
+
+    const treeRoot = buildTree(filesData);
+    // 预览树仅展示生成文件树（不额外展示“上级目录：xxx”）
+    treeData.value = [treeRoot];
+
+    await nextTick();
+    let firstLeaf: TreeNode | null = null;
+    for (const r of filteredTreeData.value) {
+      firstLeaf = findFirstLeafInTree([r]);
+      if (firstLeaf) break;
+    }
+    if (!firstLeaf) {
+      firstLeaf = findFirstLeafInTree(treeData.value);
+    }
+
+    code.value = firstLeaf?.content || "";
+    await nextTick();
+    if (firstLeaf?.label) {
+      applyPreviewEditorMode(firstLeaf.label);
+    }
+
+    preview.open = true;
+    preview.active_name = "model.py";
+  } catch (error) {
+    console.error("预览代码失败:", error);
+  } finally {
+    previewLoading.value = false;
+  }
+}
+
+/** 表格行内生成代码操作 */
+async function handleGenTable(targetGenType: string, row?: GenTableSchema): Promise<void> {
+  let tbNames: string | string[] = [];
+
+  // 判断是单条还是批量操作
+  if (row) {
+    tbNames = [row.table_name || ""];
+  } else if (tableNames.value.length > 0) {
+    tbNames = tableNames.value;
+  } else {
+    ElMessage.error("请选择要生成的数据");
+    return;
+  }
+
+  loading.value = true;
+  try {
+    if (targetGenType === "1") {
+      if (!Array.isArray(tbNames) || tbNames.length !== 1 || !tbNames[0]) {
+        ElMessage.error("自定义路径只能生成单表代码");
+        loading.value = false;
+        return;
+      }
+      if (row?.id) await confirmWritePaths(row.id);
+      await GencodeAPI.genCodeToPath(tbNames[0]);
+      ElMessage.success("已写入项目目录并创建菜单（若尚未存在）");
+    } else {
+      // ZIP压缩包下载
+      const tableNamesArray = Array.isArray(tbNames) ? tbNames : [tbNames];
+      const response = await GencodeAPI.batchGenCode(tableNamesArray);
+      const raw = response.data as Blob;
+      if (raw.size < 100 && raw.type.includes("json")) {
+        const text = await raw.text();
+        try {
+          const json = JSON.parse(text) as { msg?: string };
+          ElMessage.error(json.msg || "批量生成失败");
+          return;
+        } catch {
+          /* 非 JSON 小文件仍尝试下载 */
+        }
+      }
+      const blob = new Blob([raw], { type: "application/zip" });
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = "code.zip";
+      link.click();
+      URL.revokeObjectURL(url);
+      ElMessage.success("已开始下载 code.zip");
+    }
+  } catch (error) {
+    console.error("生成代码失败:", error);
+  } finally {
+    loading.value = false;
+  }
+}
+
+function escapeHtml(s: string) {
+  return s
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+}
+
+async function confirmWritePaths(tableId: number) {
+  // 先保存当前抽屉配置，否则 preview 仍基于旧配置，回显会不准确
+  await GencodeAPI.updateTable(info as GenTableSchema, tableId);
+  const previewRes = await GencodeAPI.previewTable(tableId);
+  const raw = previewRes.data?.data as Record<string, unknown> | undefined;
+  const keys = raw && typeof raw === "object" ? Object.keys(raw) : [];
+  const shown = keys.slice(0, 80);
+  const more =
+    keys.length > shown.length
+      ? `<div style="margin-top:10px;padding:8px 12px;border-radius:6px;background:var(--el-fill-color-light);font-size:12px;color:var(--el-text-color-secondary);text-align:center">还有 <b style="color:var(--el-text-color-primary)">${keys.length - shown.length}</b> 个文件未列出</div>`
+      : "";
+  const listRows = shown
+    .map((p, i) => {
+      const bg = i % 2 === 0 ? "var(--el-fill-color-blank)" : "var(--el-fill-color-light)";
+      return `<div class="gencode-write-path-row" style="padding:9px 14px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px;line-height:1.45;white-space:nowrap;color:var(--el-text-color-primary);background:${bg};border-bottom:1px solid var(--el-border-color-lighter)">${escapeHtml(p)}</div>`;
+    })
+    .join("");
+  const listHtml = shown.length
+    ? `<div class="gencode-write-path-list-wrap">${listRows}</div>${more}`
+    : `<div style="padding:16px;border-radius:8px;background:var(--el-fill-color-light);color:var(--el-text-color-secondary);font-size:13px;text-align:center">未获取到预览路径，仍将继续写入。</div>`;
+  const tipHtml = `<div style="margin-top:12px;padding-top:10px;border-top:1px solid var(--el-border-color-lighter);font-size:12px;line-height:1.5;color:var(--el-text-color-secondary)">与「代码预览」同源；路径为相对项目根的落盘位置。</div>`;
+  await ElMessageBox.confirm(
+    `<div class="gencode-write-confirm-body" style="font-family:var(--el-font-family);line-height:1.5;color:var(--el-text-color-primary)">
+      <div style="margin-bottom:12px">
+        <div style="font-size:15px;font-weight:600;letter-spacing:0.02em">将写入以下文件</div>
+        <div style="margin-top:4px;font-size:12px;color:var(--el-text-color-secondary)">共 ${keys.length} 项 · 相对项目根目录</div>
+      </div>
+      ${listHtml}
+      ${shown.length ? tipHtml : ""}
+    </div>`,
+    "写入本地确认",
+    {
+      confirmButtonText: "确认写入",
+      cancelButtonText: "取消",
+      type: "warning",
+      dangerouslyUseHTMLString: true,
+      customClass: "gencode-write-confirm-box",
+    }
+  );
+}
+
+/** 同步数据库操作 */
+async function handleSynchDb(row: GenTableSchema): Promise<void> {
+  const tableName = row.table_name || "";
+
+  if (!tableName) {
+    ElMessage.error("表名不能为空");
+    return;
+  }
+
+  const renderSummary = (p: any) => {
+    const added = p.added?.length ?? 0;
+    const removed = p.removed?.length ?? 0;
+    const changed = p.changed?.length ?? 0;
+    const unchanged = p.unchanged ?? 0;
+    return { added, removed, changed, unchanged };
+  };
+
+  const renderHtml = (title: string, p: any) => {
+    const s = renderSummary(p);
+    const list = (xs: string[]) => (xs?.length ? xs.slice(0, 20).join(", ") : "无");
+    return `
+      <div style="line-height:1.6">
+        <div style="font-weight:600;margin-bottom:6px">${title}</div>
+        <div>新增：<b>${s.added}</b>；删除：<b>${s.removed}</b>；变更：<b>${s.changed}</b>；未变：${s.unchanged}</div>
+        <div style="margin-top:6px">新增列：${list(p.added || [])}</div>
+        <div>删除列：${list(p.removed || [])}</div>
+        <div>变更列：${list((p.changed || []).map((c: any) => c.column_name))}</div>
+        <div style="margin-top:8px;color:var(--el-text-color-secondary)">提示：同步会尽量保留你已配置的 dict/html/query 等生成项，仅以数据库结构为准更新元信息。</div>
+      </div>
+    `;
+  };
+
+  try {
+    loading.value = true;
+    const previewRes = await GencodeAPI.syncDbPreview(tableName);
+    const preview = previewRes.data?.data as any;
+    const mainHtml = renderHtml(`主表：${tableName}`, preview);
+    const subHtml =
+      preview?.sub_table_name && preview?.sub
+        ? renderHtml(`子表：${preview.sub_table_name}`, preview.sub)
+        : "";
+
+    await ElMessageBox.confirm(`${mainHtml}${subHtml}`, "同步差异预览", {
+      confirmButtonText: "确认同步",
+      cancelButtonText: "取消",
+      type: "warning",
+      dangerouslyUseHTMLString: true,
+    });
+
+    await GencodeAPI.syncDb(tableName);
+    ElMessage.success("表结构已同步到代码生成配置");
+    refreshList();
+  } catch (error) {
+    if (error !== "cancel") console.error("同步表结构失败:", error);
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 多选框选中数据 - 主表格 */
+function handleTableSelectionChange(selection: GenTableSchema[]): void {
+  ids.value = selection.map((item) => item.id!);
+  tableNames.value = selection.map((item) => item.table_name || "").filter(Boolean);
+}
+
+type ImportTableSelectionRow = { table_name: string; table_comment: string };
+
+/** 多选框选中数据 - 导入表格 */
+function handleImportTableSelectionChange(rows: ImportTableSelectionRow[]): void {
+  tables.value = rows;
+}
+
+/** 代码生成「上级菜单」仅展示目录节点，便于挂到目录下生成新菜单（不选菜单/按钮作为父级） */
+const filterMenuTypes = (nodes: MenuTable[]) => {
+  return nodes
+    .filter((node) => node.type === MenuTypeEnum.CATALOG)
+    .map((node: any): any => ({
+      ...node,
+      children: node.children ? filterMenuTypes(node.children) : [],
+    }));
+};
+
+/** 代码生成专用：保留 route_path，便于实时推断分系统 module_xxx */
+function formatMenuTreeWithMeta(nodes: any[]): any[] {
+  return nodes.map((node) => {
+    const formattedNode: any = {
+      value: node.id,
+      label: node.name,
+      disabled: node.status === false || String(node.status) === "false",
+      route_path: node.route_path,
+    };
+    if (node.children && node.children.length > 0) {
+      formattedNode.children = formatMenuTreeWithMeta(node.children);
+    }
+    return formattedNode;
+  });
+}
+
+/** 表格行内「代码生成」：先打开抽屉再拉数据，避免接口慢时误以为点不动 */
+async function handlePreviewTable(row?: GenTableSchema): Promise<void> {
+  const selectedTableId = row?.id ?? ids.value[0];
+  if (selectedTableId === undefined || selectedTableId === null) {
+    ElMessage.error("请选择要修改的数据");
+    return;
+  }
+
+  // 先用“列表行数据”把基础信息回显出来（接口慢时不至于看到空表单/旧数据闪烁）
+  Object.assign(info, {
+    id: row?.id ?? selectedTableId,
+    table_name: row?.table_name || info.table_name || "",
+    table_comment: row?.table_comment ?? info.table_comment ?? "",
+    class_name: row?.class_name ?? info.class_name ?? "",
+    package_name: row?.package_name ?? info.package_name ?? "",
+    module_name: row?.module_name ?? info.module_name ?? "",
+    business_name: row?.business_name ?? info.business_name ?? "",
+    function_name: row?.function_name ?? info.function_name ?? "",
+    description: row?.description ?? info.description ?? "",
+    parent_menu_id: row?.parent_menu_id ?? info.parent_menu_id ?? undefined,
+    sub_table_name: row?.sub_table_name ?? info.sub_table_name ?? "",
+    sub_table_fk_name: row?.sub_table_fk_name ?? info.sub_table_fk_name ?? "",
+  } as Partial<GenTableSchema>);
+  // 字段列表以 detail 接口为准，避免上一张表的 columns 残留
+  info.columns = [];
+  activeStep.value = 0;
+  editVisible.value = true;
+
+  try {
+    await loadTableDetail(selectedTableId);
+  } catch (e) {
+    console.error("获取表详情失败:", e);
+    ElMessage.error("获取表详情失败，请稍后重试");
+    // 保持抽屉打开，便于重试或关闭；勿因接口失败整抽屉被关掉像「点不动」
+    return;
+  }
+
+  try {
+    const [menu_response, dict_response] = await Promise.all([
+      MenuAPI.listMenu(),
+      DictAPI.listDictType({ page_no: 1, page_size: 100 }),
+    ]);
+    // 使用代码生成专用格式化：保留 route_path 供「分系统」实时回显
+    menuOptions.value = formatMenuTreeWithMeta(filterMenuTypes(menu_response.data.data));
+    dictOptions.value = dict_response.data.data.items;
+  } catch (e) {
+    console.error("菜单或字典加载失败:", e);
+    ElMessage.warning("菜单或字典选项加载失败，部分下拉可能为空");
+  }
+}
+
+/** 删除按钮操作 */
+async function handleDelete(row?: GenTableSchema): Promise<void> {
+  const tableIds = row?.id ? [row.id] : ids.value;
+
+  if (tableIds.length === 0) {
+    ElMessage.error("请选择要删除的数据");
+    return;
+  }
+
+  try {
+    await ElMessageBox.confirm(`是否确认删除选中的${tableIds.length}条数据？`, "删除确认", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    });
+
+    await GencodeAPI.deleteTable(tableIds);
+    refreshList();
+  } catch (error) {
+    if (error !== "cancel") {
+      console.error("删除表数据失败:", error);
+    }
+  }
+}
+
+/** 创建表（由 CreateTableDialog 提交 SQL；表结构模式成功后可回写第三步主子表配置） */
+async function handleCreateTableSubmit(sql: string, meta?: CreateTableSubmitMeta): Promise<void> {
+  if (!sql || sql.trim() === "") {
+    ElMessage.error("请输入创建表SQL语句");
+    return;
+  }
+
+  loading.value = true;
+  try {
+    await GencodeAPI.createTable(sql);
+    createTableVisible.value = false;
+    if (editVisible.value && activeStep.value === 2 && meta?.fromVisual && meta.visualSnapshot) {
+      const v = meta.visualSnapshot;
+      info.table_name = (v.mainTableName || "").trim();
+      const mc = (v.mainComment || "").trim();
+      if (mc) info.table_comment = mc;
+      if (v.subEnabled) {
+        info.sub_table_name = (v.subTableName || "").trim();
+        info.sub_table_fk_name = (v.fkColumn || "").trim();
+      } else {
+        info.sub_table_name = "";
+        info.sub_table_fk_name = "";
+      }
+      info.master_sub_hint = undefined;
+      void nextTick(() => {
+        basicInfo.value?.clearValidate?.(["table_name", "sub_table_name", "sub_table_fk_name"]);
+      });
+    }
+    refreshList();
+    importVisible.value = true;
+    await getDbList();
+  } catch (error) {
+    console.error("创建表数据失败:", error);
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 导入表操作 */
+async function handleImportTable(): Promise<void> {
+  if (tables.value.length === 0) {
+    ElMessage.error("请选择要导入的表");
+    return;
+  }
+
+  importLoading.value = true;
+  try {
+    // 提取表名数组
+    const tableNames = tables.value.map((table) => table.table_name || "");
+    await GencodeAPI.importTable(tableNames);
+    importVisible.value = false;
+    refreshList();
+    // 导入成功后自动打开代码生成抽屉
+    if (tables.value.length === 1) {
+      await nextTick();
+      const list = (unref(contentRef.value?.pageData) ?? []) as GenTableSchema[];
+      const importedTable = list.find((t) => t.table_name === tables.value[0].table_name);
+      if (importedTable) {
+        await handlePreviewTable(importedTable);
+      }
+    } else {
+      // 导入了多个表，刷新列表
+      ElMessage.success(`成功导入 ${tables.value.length} 个表`);
+    }
+  } catch (error) {
+    console.error("导入表失败:", error);
+  } finally {
+    importLoading.value = false;
+  }
+}
+
+/** 查询数据库表数据 */
+async function getDbList(): Promise<void> {
+  importLoading.value = true;
+  try {
+    const res = await GencodeAPI.listDbTable(importQueryFormData.value);
+    if (res.data && res.data.data) {
+      dbTableList.value = res.data.data.items;
+      importTotal.value = res.data.data.total;
+    }
+  } catch (error) {
+    console.error("获取数据库表列表失败:", error);
+  } finally {
+    importLoading.value = false;
+  }
+}
+
+/** 导入弹窗搜索按钮操作 */
+async function handleImportQuery(): Promise<void> {
+  importQueryFormData.value.page_no = 1;
+  await getDbList();
+}
+
+/** 导入弹窗重置按钮操作 */
+async function handleImportReset(): Promise<void> {
+  importDbDialogRef.value?.resetQueryForm();
+  await handleImportQuery();
+}
+
+// 路由和导航
+const route = useRoute();
+
+// ===== 生命周期和初始化 =====
+
+/** 页面激活时执行 */
+onActivated(async () => {
+  const time = route.query.t;
+  if (time != null && String(time) !== uniqueId.value) {
+    uniqueId.value = String(time);
+    const pageNo = Number(route.query.page_no || 1);
+    await nextTick();
+    if (contentRef.value) {
+      contentRef.value.pagination.currentPage = pageNo;
+      const q = searchRef.value?.getQueryParams() ?? {};
+      const f = contentRef.value.getFilterParams?.() ?? {};
+      contentRef.value.fetchPageData({ ...q, ...f }, false);
+    }
+  }
+});
+
+// 表单数据（后端返回字段可能含 null，这里做更宽松的承载，避免 TS 因类型收窄报错）
+const info = reactive<
+  GenTableSchema & {
+    sub_table_name?: string | null;
+    sub_table_fk_name?: string | null;
+  }
+>({
+  id: undefined,
+  table_name: "",
+  table_comment: "",
+  sub_table_name: "",
+  sub_table_fk_name: "",
+  class_name: "",
+  package_name: "",
+  module_name: "",
+  business_name: "",
+  function_name: "",
+  description: "",
+  parent_menu_id: undefined,
+  pk_column: undefined,
+  sub_table: undefined,
+  columns: [],
+  sub: false,
+  master_sub_hint: undefined,
+});
+
+/** 代码生成抽屉第三步打开时，创建表弹窗从当前表单预填主/子表名（表结构模式） */
+const createTableLinkFromGen = computed(() => {
+  if (!editVisible.value || activeStep.value !== 2) return null;
+  return {
+    table_name: info.table_name,
+    table_comment: info.table_comment,
+    sub_table_name: info.sub_table_name ?? undefined,
+    sub_table_fk_name: info.sub_table_fk_name ?? undefined,
+  };
+});
+
+/** 主子表两项同填或同空，且子表名不得与主表相同 */
+function validateMasterSubPair(_rule: unknown, _value: unknown, callback: (e?: Error) => void) {
+  const sn = (info.sub_table_name || "").trim();
+  const fk = (info.sub_table_fk_name || "").trim();
+  if (Boolean(sn) !== Boolean(fk)) {
+    callback(new Error("子表表名与外键列须同时填写或同时留空"));
+    return;
+  }
+  if (sn && fk && sn === (info.table_name || "").trim()) {
+    callback(new Error("子表表名不能与主表表名相同"));
+    return;
+  }
+  callback();
+}
+
+function onMasterSubFieldBlur() {
+  void nextTick(() => {
+    basicInfo.value?.validateField("sub_table_name").catch(() => {});
+    basicInfo.value?.validateField("sub_table_fk_name").catch(() => {});
+  });
+}
+
+function clearMasterSub() {
+  info.sub_table_name = "";
+  info.sub_table_fk_name = "";
+  info.master_sub_hint = undefined;
+  info.sub = false;
+  info.sub_table = undefined;
+  void nextTick(() => {
+    basicInfo.value?.clearValidate(["sub_table_name", "sub_table_fk_name"]);
+  });
+}
+
+/** module_example 风格下业务名可空；模块名示例见 demo、gen_demo02 */
+function validateBusinessName(_rule: unknown, value: unknown, callback: (e?: Error) => void) {
+  const pkg = (info.package_name || "").trim();
+  const mod = (info.module_name || "").trim();
+  const isExampleStyle = pkg.startsWith("module_") && Boolean(mod) && !mod.startsWith("module_");
+  if (isExampleStyle) {
+    callback();
+    return;
+  }
+  if (value == null || !String(value).trim()) {
+    callback(new Error("业务名不能为空"));
+    return;
+  }
+  callback();
+}
+
+// 校验规则
+const rules = {
+  table_name: [{ required: true, message: "表名称不能为空", trigger: "blur" }],
+  class_name: [{ required: true, message: "实体名称不能为空", trigger: "blur" }],
+  package_name: [{ required: true, message: "生成包路径不能为空", trigger: "blur" }],
+  module_name: [{ required: true, message: "生成模块名不能为空", trigger: "blur" }],
+  business_name: [{ validator: validateBusinessName, trigger: "blur" }],
+  function_name: [{ required: true, message: "生成功能名不能为空", trigger: "blur" }],
+  /** 与后端一致：可选；不选时写入本地会按包名自动建目录菜单 */
+  sub_table_name: [{ validator: validateMasterSubPair, trigger: "blur" }],
+  sub_table_fk_name: [{ validator: validateMasterSubPair, trigger: "blur" }],
+};
+
+// ===== 工具函数
+/** 提交表单 - 保存配置（从基础配置进入字段配置时允许尚无列，便于先保存主表信息） */
+async function submitForm(options?: { requireColumns?: boolean }) {
+  const requireColumns = options?.requireColumns !== false;
+
+  // 检查是否有表ID
+  if (!info.id) {
+    ElMessage.error("无效的表ID");
+    return;
+  }
+
+  try {
+    loading.value = true;
+
+    if (requireColumns && (!info.columns || info.columns.length === 0)) {
+      ElMessage.error("请配置字段信息");
+      return;
+    }
+
+    // 提交表单数据，确保columns是必需的，并且parent_menu_id总是被包含
+    const tableData = {
+      ...info,
+      parent_menu_id: info.parent_menu_id ?? null, // 将undefined转换为null，确保属性被传输
+      columns: info.columns || [], // 确保columns存在
+    };
+    delete (tableData as Record<string, unknown>).sub_table;
+    delete (tableData as Record<string, unknown>).sub;
+    delete (tableData as Record<string, unknown>).pk_column;
+    delete (tableData as Record<string, unknown>).master_sub_hint;
+
+    const savedColumns = info.columns;
+    const res = await GencodeAPI.updateTable(tableData as GenTableSchema, info.id || 0);
+    if (res.data?.data) {
+      Object.assign(info, res.data.data as GenTableSchema);
+      if (savedColumns && savedColumns.length > 0) {
+        info.columns = savedColumns;
+      }
+    }
+    return true;
+  } catch (error) {
+    console.error("保存表单失败:", error);
+  } finally {
+    loading.value = false;
+  }
+}
+
+// 下一步
+async function nextStep(): Promise<void> {
+  if (activeStep.value < 3) {
+    nextStepLoading.value = true;
+    try {
+      // 验证当前步骤数据
+      if (activeStep.value === 0) {
+        // 第一步：基础配置
+        const basicInfoValid = await basicInfo.value?.validate().catch(() => false);
+        if (!basicInfoValid) return;
+      } else if (activeStep.value === 1) {
+        // 第二步：字段配置
+        if (!info.columns || info.columns.length === 0) {
+          ElMessage.error("请配置字段信息");
+          return;
+        }
+      }
+
+      activeStep.value++;
+
+      // 当从字段配置进入预览步骤时，自动加载预览数据
+      if (activeStep.value === 2 && info.id) {
+        await handlePreview({ id: info.id, table_name: info.table_name } as GenTableSchema);
+      }
+    } finally {
+      nextStepLoading.value = false;
+    }
+  }
+}
+
+// 上一步
+function prevStep(): void {
+  if (activeStep.value > 0) {
+    activeStep.value--;
+  }
+}
+
+// 保存配置
+async function handleSave(): Promise<void> {
+  try {
+    // 验证当前步骤数据
+    if (activeStep.value === 0) {
+      // 第一步：基础配置
+      const basicInfoValid = await basicInfo.value?.validate().catch(() => false);
+      if (!basicInfoValid) return;
+    } else if (activeStep.value === 1) {
+      // 第二步：字段配置
+      if (!info.columns || info.columns.length === 0) {
+        ElMessage.error("请配置字段信息");
+        return;
+      }
+    }
+
+    // 保存配置
+    await submitForm({ requireColumns: activeStep.value !== 0 });
+  } catch (error) {
+    console.error("保存失败:", error);
+  }
+}
+
+// 批量设置字段属性
+function bulkSet(field: string | string[], value: any): void {
+  if (!info.columns || !Array.isArray(info.columns)) return;
+
+  const fieldsToUpdate = Array.isArray(field) ? field : [field];
+
+  info.columns.forEach((column) => {
+    if (column && typeof column === "object") {
+      fieldsToUpdate.forEach((f) => {
+        (column as any)[f] = value;
+      });
+    }
+  });
+}
+
+function close(): void {
+  editVisible.value = false;
+  activeStep.value = 0; // 重置步骤
+
+  // 清除表单验证状态
+  setTimeout(() => {
+    basicInfo.value?.resetFields();
+  }, 300);
+}
+
+/** 处理抽屉关闭事件 */
+function handleClose(): void {
+  close();
+}
+
+/** 加载表详情 */
+async function loadTableDetail(id: number | string) {
+  try {
+    loading.value = true;
+    const response = await GencodeAPI.detailTable(Number(id));
+
+    if (response?.data?.data) {
+      const data = response.data.data;
+
+      // 填充表单数据
+      Object.assign(info, { ...data });
+
+      // 处理列数据
+      if (data && data.columns && Array.isArray(data.columns)) {
+        // 深拷贝确保数据独立性
+        info.columns = JSON.parse(JSON.stringify(data.columns));
+        // 设置列的选中状态
+        (info.columns ?? []).forEach((item: any) => {
+          item.select = true;
+        });
+      }
+
+      // 重置当前步骤为第一步
+      activeStep.value = 0;
+    }
+  } catch (error) {
+    console.error("获取表详情失败:", error);
+    throw error;
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
diff --git a/frontend/new-web/src/views/module_generator/gencode/types.ts b/frontend/new-web/src/views/module_generator/gencode/types.ts
new file mode 100644
index 00000000..f72945d7
--- /dev/null
+++ b/frontend/new-web/src/views/module_generator/gencode/types.ts
@@ -0,0 +1,8 @@
+/** 预览文件树节点 */
+export interface TreeNode {
+  label: string;
+  /** 仅文件节点：完整生成路径（相对项目根），用于展示 */
+  full_path?: string;
+  content?: string;
+  children?: TreeNode[];
+}
diff --git a/frontend/new-web/src/views/module_generator/gencode/utils/buildCreateTableSql.ts b/frontend/new-web/src/views/module_generator/gencode/utils/buildCreateTableSql.ts
new file mode 100644
index 00000000..a9a16325
--- /dev/null
+++ b/frontend/new-web/src/views/module_generator/gencode/utils/buildCreateTableSql.ts
@@ -0,0 +1,135 @@
+/**
+ * 将「表结构」表单状态编译为可执行的 CREATE TABLE SQL（MySQL / PostgreSQL）。
+ */
+
+export type SqlDialect = "mysql" | "postgres";
+
+export interface ColDef {
+  name: string;
+  type: string;
+  nullable: boolean;
+  isPk: boolean;
+  comment: string;
+  /** 仅 MySQL：数字主键自增 */
+  autoIncrement?: boolean;
+}
+
+export interface VisualBuildState {
+  dialect: SqlDialect;
+  mainTableName: string;
+  mainComment: string;
+  mainColumns: ColDef[];
+  subEnabled: boolean;
+  subTableName: string;
+  subComment: string;
+  /** 子表上指向主表的外键列名 */
+  fkColumn: string;
+  /** 主表被引用列，一般为 id */
+  fkRefColumn: string;
+  subColumns: ColDef[];
+}
+
+function qMysql(name: string): string {
+  return `\`${name.replace(/`/g, "")}\``;
+}
+
+function buildMysqlTable(name: string, comment: string, columns: ColDef[]): string {
+  const lines: string[] = [];
+  const pkCols = columns.filter((c) => c.isPk).map((c) => qMysql(c.name));
+  for (const c of columns) {
+    let line = `  ${qMysql(c.name)} ${c.type}`;
+    if (c.isPk && c.autoIncrement) {
+      line += " NOT NULL AUTO_INCREMENT";
+    } else if (c.isPk) {
+      line += " NOT NULL";
+    } else if (!c.nullable) {
+      line += " NOT NULL";
+    } else {
+      line += " DEFAULT NULL";
+    }
+    if (c.comment) line += ` COMMENT '${c.comment.replace(/'/g, "''")}'`;
+    lines.push(line);
+  }
+  const tail: string[] = [];
+  if (pkCols.length) {
+    tail.push(`  PRIMARY KEY (${pkCols.join(", ")})`);
+  }
+  const uuidCol = columns.find((c) => c.name === "uuid");
+  if (uuidCol) {
+    tail.push(`  UNIQUE KEY ${qMysql(`uk_${name.replace(/`/g, "")}_uuid`)} (${qMysql("uuid")})`);
+  }
+  const allLines = [...lines, ...tail];
+  return (
+    `CREATE TABLE ${qMysql(name)} (\n${allLines.join(",\n")}\n)` +
+    ` ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='${comment.replace(/'/g, "''")}';`
+  );
+}
+
+function buildMysqlFk(subName: string, fkCol: string, mainName: string, refCol: string): string {
+  return (
+    `ALTER TABLE ${qMysql(subName)} ADD CONSTRAINT ${qMysql(`fk_${subName}_${fkCol}`)} ` +
+    `FOREIGN KEY (${qMysql(fkCol)}) REFERENCES ${qMysql(mainName)} (${qMysql(refCol)}) ON DELETE CASCADE;`
+  );
+}
+
+function buildPostgresTable(name: string, comment: string, columns: ColDef[]): string {
+  const lines: string[] = [];
+  const pkCols = columns.filter((c) => c.isPk).map((c) => c.name);
+  for (const c of columns) {
+    let line = `  ${c.name} ${c.type}`;
+    const isSerial = c.type.toUpperCase().includes("SERIAL");
+    if (!isSerial && !c.nullable) line += " NOT NULL";
+    lines.push(line);
+  }
+  const tail: string[] = [];
+  if (pkCols.length) {
+    tail.push(`  PRIMARY KEY (${pkCols.join(", ")})`);
+  }
+  const body = [...lines, ...tail].join(",\n");
+  return (
+    `CREATE TABLE ${name} (\n${body}\n);\n` +
+    `COMMENT ON TABLE ${name} IS '${comment.replace(/'/g, "''")}';`
+  );
+}
+
+function buildPostgresColumnComments(table: string, columns: ColDef[]): string {
+  return columns
+    .filter((c) => c.comment)
+    .map((c) => `COMMENT ON COLUMN ${table}.${c.name} IS '${c.comment.replace(/'/g, "''")}';`)
+    .join("\n");
+}
+
+function buildPostgresFk(subName: string, fkCol: string, mainName: string, refCol: string): string {
+  return (
+    `ALTER TABLE ${subName} ADD CONSTRAINT fk_${subName}_${fkCol} ` +
+    `FOREIGN KEY (${fkCol}) REFERENCES ${mainName}(${refCol}) ON DELETE CASCADE;`
+  );
+}
+
+/** 由表结构状态生成完整 SQL（单表或主子表） */
+export function buildSqlFromVisual(state: VisualBuildState): string {
+  const m = state.mainTableName.trim();
+  if (!m) return "";
+
+  const parts: string[] = [];
+
+  if (state.dialect === "mysql") {
+    parts.push(buildMysqlTable(m, state.mainComment || m, state.mainColumns));
+    if (state.subEnabled && state.subTableName.trim()) {
+      const s = state.subTableName.trim();
+      parts.push(buildMysqlTable(s, state.subComment || s, state.subColumns));
+      parts.push(buildMysqlFk(s, state.fkColumn, m, state.fkRefColumn));
+    }
+  } else {
+    parts.push(buildPostgresTable(m, state.mainComment || m, state.mainColumns));
+    parts.push(buildPostgresColumnComments(m, state.mainColumns));
+    if (state.subEnabled && state.subTableName.trim()) {
+      const s = state.subTableName.trim();
+      parts.push(buildPostgresTable(s, state.subComment || s, state.subColumns));
+      parts.push(buildPostgresColumnComments(s, state.subColumns));
+      parts.push(buildPostgresFk(s, state.fkColumn, m, state.fkRefColumn));
+    }
+  }
+
+  return parts.filter(Boolean).join("\n\n");
+}
diff --git a/frontend/new-web/src/views/module_generator/gencode/utils/createTableSqlExamples.ts b/frontend/new-web/src/views/module_generator/gencode/utils/createTableSqlExamples.ts
new file mode 100644
index 00000000..8f17f409
--- /dev/null
+++ b/frontend/new-web/src/views/module_generator/gencode/utils/createTableSqlExamples.ts
@@ -0,0 +1,16 @@
+import { buildSqlFromVisual } from "./buildCreateTableSql";
+import {
+  applySubColumns,
+  visualPresetMasterSub,
+  visualPresetSingle,
+} from "./createTableVisualPresets";
+
+/** 与「表结构」单表模板一致的 SQL（便于两种模式对齐） */
+export function getExampleFromPresetSingle(dialect: "mysql" | "postgres"): string {
+  return buildSqlFromVisual(visualPresetSingle(dialect));
+}
+
+/** 与「表结构」主子表模板一致的 SQL */
+export function getExampleFromPresetMasterSub(dialect: "mysql" | "postgres"): string {
+  return buildSqlFromVisual(applySubColumns(visualPresetMasterSub(dialect)));
+}
diff --git a/frontend/new-web/src/views/module_generator/gencode/utils/createTableVisualPresets.ts b/frontend/new-web/src/views/module_generator/gencode/utils/createTableVisualPresets.ts
new file mode 100644
index 00000000..7e1391a7
--- /dev/null
+++ b/frontend/new-web/src/views/module_generator/gencode/utils/createTableVisualPresets.ts
@@ -0,0 +1,243 @@
+import type { ColDef, SqlDialect, VisualBuildState } from "./buildCreateTableSql";
+
+/** 与代码生成第三步「基本信息」联动时的输入（主表名、子表名、外键列名） */
+export interface GenTableCreateLink {
+  table_name?: string;
+  table_comment?: string;
+  sub_table_name?: string;
+  sub_table_fk_name?: string;
+}
+
+function mixinMysql(): ColDef[] {
+  return [
+    {
+      name: "status",
+      type: "varchar(10)",
+      nullable: false,
+      isPk: false,
+      comment: "是否启用(0:启用 1:禁用)",
+    },
+    { name: "description", type: "text", nullable: true, isPk: false, comment: "备注/描述" },
+    {
+      name: "created_time",
+      type: "datetime",
+      nullable: false,
+      isPk: false,
+      comment: "创建时间",
+    },
+    {
+      name: "updated_time",
+      type: "datetime",
+      nullable: false,
+      isPk: false,
+      comment: "更新时间",
+    },
+    { name: "created_id", type: "int", nullable: true, isPk: false, comment: "创建人ID" },
+    { name: "updated_id", type: "int", nullable: true, isPk: false, comment: "更新人ID" },
+    {
+      name: "is_deleted",
+      type: "tinyint(1)",
+      nullable: false,
+      isPk: false,
+      comment: "是否已删除(0:未删除 1:已删除)",
+    },
+    { name: "deleted_time", type: "datetime", nullable: true, isPk: false, comment: "删除时间" },
+    { name: "deleted_id", type: "int", nullable: true, isPk: false, comment: "删除人ID" },
+  ];
+}
+
+function mixinPostgres(): ColDef[] {
+  return [
+    {
+      name: "status",
+      type: "varchar(10)",
+      nullable: false,
+      isPk: false,
+      comment: "是否启用(0:启用 1:禁用)",
+    },
+    { name: "description", type: "text", nullable: true, isPk: false, comment: "备注/描述" },
+    {
+      name: "created_time",
+      type: "timestamp without time zone",
+      nullable: false,
+      isPk: false,
+      comment: "创建时间",
+    },
+    {
+      name: "updated_time",
+      type: "timestamp without time zone",
+      nullable: false,
+      isPk: false,
+      comment: "更新时间",
+    },
+    { name: "created_id", type: "integer", nullable: true, isPk: false, comment: "创建人ID" },
+    { name: "updated_id", type: "integer", nullable: true, isPk: false, comment: "更新人ID" },
+    {
+      name: "is_deleted",
+      type: "boolean",
+      nullable: false,
+      isPk: false,
+      comment: "是否已删除(0:未删除 1:已删除)",
+    },
+    {
+      name: "deleted_time",
+      type: "timestamp without time zone",
+      nullable: true,
+      isPk: false,
+      comment: "删除时间",
+    },
+    { name: "deleted_id", type: "integer", nullable: true, isPk: false, comment: "删除人ID" },
+  ];
+}
+
+function pkMysql(): ColDef[] {
+  return [
+    {
+      name: "id",
+      type: "bigint",
+      nullable: false,
+      isPk: true,
+      comment: "主键ID",
+      autoIncrement: true,
+    },
+    {
+      name: "uuid",
+      type: "varchar(64)",
+      nullable: false,
+      isPk: false,
+      comment: "UUID全局唯一标识",
+    },
+  ];
+}
+
+function pkPostgres(): ColDef[] {
+  return [
+    { name: "id", type: "SERIAL", nullable: false, isPk: true, comment: "主键ID" },
+    {
+      name: "uuid",
+      type: "varchar(64)",
+      nullable: false,
+      isPk: false,
+      comment: "UUID全局唯一标识",
+    },
+  ];
+}
+
+function buildSubColumns(dialect: SqlDialect, mainTableName: string, fkColumn: string): ColDef[] {
+  const isMysql = dialect === "mysql";
+  const mixin = isMysql ? mixinMysql() : mixinPostgres();
+  const subPk = isMysql ? pkMysql() : pkPostgres();
+  const fkColDef: ColDef = {
+    name: fkColumn,
+    type: "bigint",
+    nullable: false,
+    isPk: false,
+    comment: `关联 ${mainTableName}.${"id"}`,
+  };
+  const subBusiness: ColDef[] = [
+    {
+      name: "line_name",
+      type: "varchar(128)",
+      nullable: true,
+      isPk: false,
+      comment: "明细名称",
+    },
+    {
+      name: "qty",
+      type: isMysql ? "int" : "integer",
+      nullable: false,
+      isPk: false,
+      comment: "数量",
+    },
+  ];
+  return [...subPk, fkColDef, ...subBusiness, ...mixin];
+}
+
+export function applySubColumns(state: VisualBuildState): VisualBuildState {
+  if (!state.subEnabled) {
+    return { ...state, subColumns: [] };
+  }
+  return {
+    ...state,
+    subColumns: buildSubColumns(state.dialect, state.mainTableName, state.fkColumn),
+  };
+}
+
+/** 单表：带业务字段 name */
+export function visualPresetSingle(dialect: SqlDialect): VisualBuildState {
+  const isMysql = dialect === "mysql";
+  const mixin = isMysql ? mixinMysql() : mixinPostgres();
+  const pk = isMysql ? pkMysql() : pkPostgres();
+  const business: ColDef[] = [
+    { name: "name", type: "varchar(64)", nullable: true, isPk: false, comment: "名称" },
+  ];
+  return {
+    dialect,
+    mainTableName: "gen_demo_single",
+    mainComment: "代码生成-单表示例",
+    mainColumns: [...pk, ...business, ...mixin],
+    subEnabled: false,
+    subTableName: "gen_demo_order_item",
+    subComment: "子表示例",
+    fkColumn: "order_id",
+    fkRefColumn: "id",
+    subColumns: [],
+  };
+}
+
+/** 主子表：主表订单头 + 子表明细，子表含外键列 */
+export function visualPresetMasterSub(dialect: SqlDialect): VisualBuildState {
+  const isMysql = dialect === "mysql";
+  const mixin = isMysql ? mixinMysql() : mixinPostgres();
+  const pk = isMysql ? pkMysql() : pkPostgres();
+  const mainBusiness: ColDef[] = [
+    {
+      name: "order_title",
+      type: "varchar(128)",
+      nullable: true,
+      isPk: false,
+      comment: "订单标题",
+    },
+  ];
+  return applySubColumns({
+    dialect,
+    mainTableName: "gen_demo_order_master",
+    mainComment: "代码生成-主表示例（订单头）",
+    mainColumns: [...pk, ...mainBusiness, ...mixin],
+    subEnabled: true,
+    subTableName: "gen_demo_order_item",
+    subComment: "代码生成-子表示例（订单明细）",
+    fkColumn: "order_id",
+    fkRefColumn: "id",
+    subColumns: [],
+  });
+}
+
+/**
+ * 将第三步已填的主子表信息合并到表结构预设。
+ * 规则：子表名与外键列名同时非空时使用主子表模板；否则为单表模板（仅主表名/注释覆盖）。
+ */
+export function mergeGenTableLinkIntoVisual(
+  link: GenTableCreateLink,
+  dialect: SqlDialect
+): VisualBuildState {
+  const main = (link.table_name || "").trim();
+  const subSn = (link.sub_table_name || "").trim();
+  const subFk = (link.sub_table_fk_name || "").trim();
+  const hasSubPair = Boolean(subSn && subFk);
+  const base: VisualBuildState = hasSubPair
+    ? visualPresetMasterSub(dialect)
+    : visualPresetSingle(dialect);
+  if (main) base.mainTableName = main;
+  const mc = (link.table_comment || "").trim();
+  if (mc) base.mainComment = mc;
+  if (hasSubPair) {
+    base.subEnabled = true;
+    base.subTableName = subSn;
+    base.fkColumn = subFk;
+    base.fkRefColumn = "id";
+  } else {
+    base.subEnabled = false;
+  }
+  return applySubColumns(base);
+}
diff --git a/frontend/new-web/src/views/module_monitor/cache/index.vue b/frontend/new-web/src/views/module_monitor/cache/index.vue
new file mode 100644
index 00000000..15ceb49b
--- /dev/null
+++ b/frontend/new-web/src/views/module_monitor/cache/index.vue
@@ -0,0 +1,658 @@
+<template>
+  <div class="app-container">
+    <el-tabs type="border-card" class="cache-page-tabs">
+      <!-- 监控信息 Tab -->
+      <el-tab-pane class="monitor" label="监控信息">
+        <div class="monitor-tab">
+          <el-row :gutter="16">
+            <!-- 基本信息 -->
+            <el-col :span="24">
+              <el-card shadow="hover">
+                <template #header>
+                  <div class="flex items-center gap-2">
+                    <el-icon>
+                      <Monitor />
+                    </el-icon>
+                    <span>Redis监控信息</span>
+                    <el-tooltip content="展示Redis监控信息详情">
+                      <el-icon>
+                        <QuestionFilled />
+                      </el-icon>
+                    </el-tooltip>
+                  </div>
+                </template>
+                <el-descriptions :column="12" border :direction="'vertical'">
+                  <el-descriptions-item label="Redis版本">
+                    {{ cache.info?.redis_version || "-" }}
+                  </el-descriptions-item>
+                  <el-descriptions-item label="运行模式">
+                    {{ cache.info?.redis_mode === "standalone" ? "单机" : "集群" }}
+                  </el-descriptions-item>
+                  <el-descriptions-item label="端口">
+                    {{ cache.info?.tcp_port || "-" }}
+                  </el-descriptions-item>
+                  <el-descriptions-item label="客户端数">
+                    {{ cache.info?.connected_clients || 0 }}
+                  </el-descriptions-item>
+                  <el-descriptions-item label="运行时间(天)">
+                    {{ cache.info?.uptime_in_days || 0 }}
+                  </el-descriptions-item>
+                  <el-descriptions-item label="使用内存">
+                    {{ cache.info?.used_memory_human || "-" }}
+                  </el-descriptions-item>
+                  <el-descriptions-item label="使用CPU">
+                    {{
+                      cache.info?.used_cpu_user_children
+                        ? parseFloat(cache.info.used_cpu_user_children).toFixed(2)
+                        : "-"
+                    }}
+                  </el-descriptions-item>
+                  <el-descriptions-item label="内存配置">
+                    {{ cache.info?.maxmemory_human || "-" }}
+                  </el-descriptions-item>
+                  <el-descriptions-item label="AOF是否开启">
+                    {{ cache.info?.aof_enabled === "0" ? "否" : "是" }}
+                  </el-descriptions-item>
+                  <el-descriptions-item label="RDB是否成功">
+                    {{ cache.info?.rdb_last_bgsave_status || "-" }}
+                  </el-descriptions-item>
+                  <el-descriptions-item label="Key数量">
+                    {{ cache.db_size || 0 }}
+                  </el-descriptions-item>
+                  <el-descriptions-item label="网络入口/出口">
+                    {{
+                      `${cache.info?.instantaneous_input_kbps || 0}kps/${cache.info?.instantaneous_output_kbps || 0}kps`
+                    }}
+                  </el-descriptions-item>
+                </el-descriptions>
+              </el-card>
+            </el-col>
+          </el-row>
+
+          <!-- 监控图表：单独一行并占满剩余高度 -->
+          <el-row :gutter="16" class="monitor-charts-row">
+            <el-col :span="12" class="cache-chart-col">
+              <el-card shadow="hover" class="cache-chart-card">
+                <template #header>
+                  <div class="flex items-center gap-2">
+                    <el-icon>
+                      <Stopwatch />
+                    </el-icon>
+                    <span class="title">命令统计</span>
+                    <el-tooltip content="展示命令统计详情">
+                      <el-icon>
+                        <QuestionFilled />
+                      </el-icon>
+                    </el-tooltip>
+                  </div>
+                </template>
+                <div ref="commandstats" class="chart-container" />
+              </el-card>
+            </el-col>
+
+            <el-col :span="12" class="cache-chart-col">
+              <el-card shadow="hover" class="cache-chart-card">
+                <template #header>
+                  <div class="flex items-center gap-2">
+                    <el-icon>
+                      <Stopwatch />
+                    </el-icon>
+                    <span>内存信息</span>
+                    <el-tooltip content="展示内存信息详情">
+                      <el-icon>
+                        <QuestionFilled />
+                      </el-icon>
+                    </el-tooltip>
+                  </div>
+                </template>
+                <div ref="usedmemory" class="chart-container" />
+              </el-card>
+            </el-col>
+          </el-row>
+        </div>
+      </el-tab-pane>
+
+      <!-- 缓存管理 Tab -->
+      <el-tab-pane class="cache" label="缓存管理">
+        <div class="cache-mgmt-tab">
+          <el-row :gutter="16" class="cache-mgmt-row">
+            <!-- 缓存列表 -->
+            <el-col :span="8" class="cache-mgmt-col">
+              <el-card :loading="loading" shadow="hover" class="cache-mgmt-card">
+                <template #header>
+                  <div class="flex justify-between items-center">
+                    <div class="flex items-center gap-2">
+                      <el-icon>
+                        <Tickets />
+                      </el-icon>
+                      <span class="flex items-center gap-2">缓存列表</span>
+                      <el-tooltip content="展示缓存列表详情">
+                        <el-icon>
+                          <QuestionFilled />
+                        </el-icon>
+                      </el-tooltip>
+                    </div>
+                    <div>
+                      <el-button
+                        v-hasPerm="['module_monitor:cache:query']"
+                        type="primary"
+                        link
+                        icon="RefreshRight"
+                        @click="refreshCacheNames"
+                      />
+                    </div>
+                  </div>
+                </template>
+                <el-table
+                  :loading="loading"
+                  :data="cacheNames"
+                  row-key="cache_name"
+                  height="100%"
+                  border
+                  stripe
+                >
+                  <template #empty>
+                    <el-empty :image-size="80" description="暂无数据" />
+                  </template>
+                  <el-table-column prop="cache_name" label="缓存名称" show-overflow-tooltip>
+                    <template #default="{ row }">
+                      <el-button
+                        v-hasPerm="['module_monitor:cache:query']"
+                        type="primary"
+                        link
+                        @click="getCacheKeyList(row)"
+                      >
+                        {{ row.cache_name }}
+                      </el-button>
+                    </template>
+                  </el-table-column>
+                  <el-table-column prop="remark" label="备注" show-overflow-tooltip />
+                  <el-table-column label="操作" width="60" align="center">
+                    <template #default="{ row }">
+                      <el-popconfirm
+                        class="box-item"
+                        :title="`确认删除缓存 ${row.cache_name} 吗？`"
+                        placement="top"
+                        @confirm="handleClearCacheName(row)"
+                      >
+                        <template #reference>
+                          <el-button
+                            v-hasPerm="['module_monitor:cache:delete']"
+                            type="danger"
+                            size="small"
+                            link
+                            icon="delete"
+                          />
+                        </template>
+                      </el-popconfirm>
+                    </template>
+                  </el-table-column>
+                </el-table>
+              </el-card>
+            </el-col>
+
+            <!-- 键名列表 -->
+            <el-col :span="8" class="cache-mgmt-col">
+              <el-card :loading="loading" shadow="hover" class="cache-mgmt-card">
+                <template #header>
+                  <div class="flex justify-between items-center">
+                    <div class="flex items-center gap-2">
+                      <el-icon>
+                        <Key />
+                      </el-icon>
+                      <span class="flex items-center gap-2">键名列表</span>
+                      <el-tooltip content="展示键名列表详情">
+                        <el-icon>
+                          <QuestionFilled />
+                        </el-icon>
+                      </el-tooltip>
+                    </div>
+                    <div>
+                      <el-button
+                        v-hasPerm="['module_monitor:cache:query']"
+                        type="primary"
+                        link
+                        icon="RefreshRight"
+                        @click="refreshCacheKeys"
+                      />
+                    </div>
+                  </div>
+                </template>
+                <el-table
+                  :loading="subLoading"
+                  :data="cacheKeys.map((key) => ({ cacheKey: key }))"
+                  height="100%"
+                  row-key="cacheKey"
+                  border
+                >
+                  <template #empty>
+                    <el-empty :image-size="80" description="暂无数据" />
+                  </template>
+                  <el-table-column prop="cacheKey" label="缓存键名" show-overflow-tooltip>
+                    <template #default="{ row }">
+                      <el-button
+                        v-hasPerm="['module_monitor:cache:detail']"
+                        type="primary"
+                        link
+                        @click="handleCacheValue(row.cacheKey)"
+                      >
+                        {{ row.cacheKey }}
+                      </el-button>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="操作" width="60" align="center">
+                    <template #default="{ row }">
+                      <el-popconfirm
+                        class="box-item"
+                        :title="`确认删除键 ${row.cacheKey} 吗？`"
+                        placement="top"
+                        @confirm="handleClearCacheKey(row.cacheKey)"
+                      >
+                        <template #reference>
+                          <el-button
+                            v-hasPerm="['module_monitor:cache:delete']"
+                            type="danger"
+                            size="small"
+                            link
+                            icon="delete"
+                          />
+                        </template>
+                      </el-popconfirm>
+                    </template>
+                  </el-table-column>
+                </el-table>
+              </el-card>
+            </el-col>
+
+            <!-- 缓存内容 -->
+            <el-col :span="8">
+              <el-card :loading="loading" shadow="hover">
+                <template #header>
+                  <div class="flex justify-between items-center">
+                    <div class="flex items-center gap-2">
+                      <el-icon>
+                        <Key />
+                      </el-icon>
+                      <span class="flex items-center gap-2">缓存内容</span>
+                      <el-tooltip content="展示缓存内容详情">
+                        <el-icon>
+                          <QuestionFilled />
+                        </el-icon>
+                      </el-tooltip>
+                    </div>
+                    <div>
+                      <el-button
+                        v-hasPerm="['module_monitor:cache:delete']"
+                        type="danger"
+                        link
+                        icon="delete"
+                        @click="handleClearCacheAll"
+                      >
+                        清理全部
+                      </el-button>
+                    </div>
+                  </div>
+                </template>
+                <el-form
+                  :model="cacheForm"
+                  label-suffix=":"
+                  label-width="auto"
+                  label-position="top"
+                >
+                  <el-form-item label="缓存名称">
+                    <el-input v-model="cacheForm.cache_name" readonly placeholder="缓存名称" />
+                  </el-form-item>
+                  <el-form-item label="缓存键名">
+                    <el-input v-model="cacheForm.cache_key" readonly placeholder="缓存键名" />
+                  </el-form-item>
+                  <el-form-item label="缓存内容">
+                    <el-input
+                      v-model="cacheForm.cache_value"
+                      type="textarea"
+                      :rows="20"
+                      readonly
+                      placeholder="缓存内容"
+                    />
+                  </el-form-item>
+                </el-form>
+              </el-card>
+            </el-col>
+          </el-row>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import CacheAPI, {
+  type CacheInfo,
+  type CacheForm,
+  type CacheMonitor,
+  type RedisInfo,
+} from "@/api/module_monitor/cache";
+import * as echarts from "echarts";
+
+// 响应式状态定义
+const cacheNames = ref<CacheInfo[]>([]);
+const cacheKeys = ref<string[]>([]);
+const loading = ref(true);
+const subLoading = ref(false);
+const nowCacheName = ref("");
+const commandstats = ref<HTMLElement | null>(null);
+const usedmemory = ref<HTMLElement | null>(null);
+const cache = ref<CacheMonitor>({
+  info: {} as RedisInfo,
+  command_stats: [],
+  db_size: 0,
+});
+const cacheForm = ref<CacheForm>({
+  cache_name: "",
+  cache_key: "",
+  cache_value: "",
+});
+
+let commandstatsInstance: echarts.ECharts | null = null;
+let usedmemoryInstance: echarts.ECharts | null = null;
+
+const resetCacheForm = () => {
+  cacheKeys.value = [];
+  cacheForm.value = {
+    cache_name: "",
+    cache_key: "",
+    cache_value: "",
+  };
+};
+
+// 缓存名称相关方法
+const getCacheNameList = async () => {
+  try {
+    loading.value = true;
+    const response = await CacheAPI.getCacheNames();
+    cacheNames.value = response.data.data;
+    resetCacheForm();
+  } catch (error) {
+    console.error("获取缓存列表出错:", error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 刷新缓存列表
+const refreshCacheNames = () => {
+  getCacheNameList();
+};
+
+// 清理缓存名称
+const handleClearCacheName = async (row: CacheInfo) => {
+  try {
+    await CacheAPI.deleteCacheName(row.cache_name);
+    refreshCacheNames();
+  } catch (error) {
+    console.error("清理缓存名称出错:", error);
+  }
+};
+
+// 缓存键名相关方法
+const getCacheKeyList = async (row?: CacheInfo) => {
+  try {
+    const cacheName = row?.cache_name || nowCacheName.value;
+    if (!cacheName) return;
+
+    subLoading.value = true;
+    const response = await CacheAPI.getCacheKeys(cacheName);
+    cacheKeys.value = response.data.data;
+    nowCacheName.value = cacheName;
+    cacheForm.value = {
+      cache_name: cacheName,
+      cache_key: "",
+      cache_value: "",
+    };
+  } catch (error) {
+    console.error("获取缓存键名列表出错:", error);
+  } finally {
+    subLoading.value = false;
+  }
+};
+
+// 刷新键名列表
+const refreshCacheKeys = () => {
+  getCacheKeyList();
+};
+
+// 清理缓存键名
+async function handleClearCacheKey(cacheKey: string) {
+  try {
+    await CacheAPI.deleteCacheKey(cacheKey);
+    getCacheKeyList();
+  } catch (error) {
+    console.error("清理缓存键名出错:", error);
+  }
+}
+
+// 缓存内容相关方法
+async function handleCacheValue(cacheKey: string) {
+  try {
+    loading.value = true;
+    const response = await CacheAPI.getCacheValue(nowCacheName.value, cacheKey);
+    cacheForm.value = response.data.data;
+  } catch (error) {
+    console.error("获取缓存内容失败:", error);
+  } finally {
+    loading.value = false;
+  }
+}
+
+// 清理全部缓存
+const handleClearCacheAll = async () => {
+  ElMessageBox.confirm("确定要清理全部缓存吗？", "危险！", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(async () => {
+      return await CacheAPI.deleteCacheAll();
+    })
+    .then(() => {
+      getCacheNameList();
+    })
+    .catch((error) => {
+      if (error !== "cancel") {
+        console.error("清理全部缓存失败:", error);
+      }
+    });
+};
+
+// 监控数据获取
+const getInfo = async () => {
+  try {
+    loading.value = true;
+    const response = await CacheAPI.getCacheInfo();
+    cache.value = response.data.data || {
+      info: {},
+      command_stats: [],
+      dbSize: 0,
+    };
+    initCharts();
+  } catch (error) {
+    console.error("获取缓存监控数据失败:", error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 图表初始化
+const initCharts = () => {
+  if (!commandstats.value || !usedmemory.value) return;
+
+  commandstatsInstance = echarts.init(commandstats.value, "macarons");
+  usedmemoryInstance = echarts.init(usedmemory.value, "macarons");
+
+  const commandStatsOption = {
+    tooltip: {
+      trigger: "item",
+      formatter: "{a} <br/>{b} : {c} ({d}%)",
+    },
+    series: [
+      {
+        name: "命令",
+        type: "pie",
+        roseType: "radius",
+        radius: [15, 95],
+        center: ["50%", "38%"],
+        data: cache.value.command_stats || [],
+        animationEasing: "cubicInOut",
+        animationDuration: 1000,
+      },
+    ],
+  };
+
+  const usedMemory = cache.value.info?.used_memory_human || "0";
+  const usedMemoryOption = {
+    tooltip: {
+      formatter: `{b} <br/>{a} : ${usedMemory}`,
+    },
+    series: [
+      {
+        name: "峰值",
+        type: "gauge",
+        min: 0,
+        max: 1000,
+        detail: {
+          formatter: usedMemory,
+        },
+        data: [
+          {
+            value: parseFloat(usedMemory) || 0,
+            name: "内存消耗",
+          },
+        ],
+      },
+    ],
+  };
+
+  commandstatsInstance.setOption(commandStatsOption);
+  usedmemoryInstance.setOption(usedMemoryOption);
+
+  void nextTick(() => {
+    commandstatsInstance?.resize();
+    usedmemoryInstance?.resize();
+  });
+};
+
+// 生命周期钩子
+onMounted(() => {
+  getCacheNameList();
+  getInfo();
+});
+
+onUnmounted(() => {
+  commandstatsInstance?.dispose();
+  usedmemoryInstance?.dispose();
+});
+</script>
+
+<style scoped lang="scss">
+/* 与 .app-container 纵向 flex 衔接：tabs 占满剩余高度 */
+.cache-page-tabs {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  width: 100%;
+  min-height: 0;
+
+  :deep(.el-tabs__header) {
+    flex-shrink: 0;
+  }
+
+  :deep(.el-tabs__content) {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  :deep(.el-tab-pane) {
+    box-sizing: border-box;
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+  }
+}
+
+.monitor-tab {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  height: 100%;
+  min-height: 0;
+}
+
+.monitor-charts-row {
+  flex: 1;
+  align-items: stretch;
+  min-height: 0;
+}
+
+.cache-chart-col {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.cache-chart-card {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+
+  :deep(.el-card__body) {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-height: 0;
+  }
+}
+
+.chart-container {
+  flex: 1;
+  height: 100%;
+  min-height: 200px;
+}
+
+.cache-mgmt-tab {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.cache-mgmt-row {
+  flex: 1;
+  align-items: stretch;
+  min-height: 0;
+}
+
+.cache-mgmt-col {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.cache-mgmt-card {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+
+  :deep(.el-card__body) {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-height: 0;
+  }
+}
+</style>
diff --git a/frontend/new-web/src/views/module_monitor/online/index.vue b/frontend/new-web/src/views/module_monitor/online/index.vue
new file mode 100644
index 00000000..43136001
--- /dev/null
+++ b/frontend/new-web/src/views/module_monitor/online/index.vue
@@ -0,0 +1,282 @@
+<!-- 在线用户 -->
+<template>
+  <div class="app-container">
+    <PageSearch
+      ref="searchRef"
+      :search-config="searchConfig"
+      @query-click="handleQueryClick"
+      @reset-click="handleResetClick"
+    />
+
+    <PageContent ref="contentRef" :content-config="contentConfig">
+      <!-- eslint-disable-next-line vue/no-unused-vars -- 与 demo 同源解构，本页无批删逻辑 -->
+      <template #toolbar="{ toolbarRight, onToolbar, removeIds, cols }">
+        <CrudToolbarLeft>
+          <el-button
+            v-hasPerm="['module_monitor:online:delete']"
+            type="danger"
+            icon="delete"
+            @click="handleClear"
+          >
+            强退所有
+          </el-button>
+        </CrudToolbarLeft>
+        <div class="data-table__toolbar--right">
+          <CrudToolbarRight :buttons="toolbarRight" :cols="cols" :on-toolbar="onToolbar" />
+        </div>
+      </template>
+
+      <template #table="{ data, loading, tableRef, onSelectionChange, pagination }">
+        <div class="data-table__content">
+          <el-table
+            :ref="tableRef as any"
+            v-loading="loading"
+            :data="data"
+            height="100%"
+            border
+            stripe
+            @selection-change="onSelectionChange"
+          >
+            <template #empty>
+              <el-empty :image-size="80" description="暂无数据" />
+            </template>
+
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'selection')?.show"
+              type="selection"
+              min-width="55"
+              align="center"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'index')?.show"
+              type="index"
+              fixed
+              label="序号"
+              min-width="60"
+            >
+              <template #default="scope">
+                {{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }}
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'session_id')?.show"
+              key="session_id"
+              label="会话编号"
+              prop="session_id"
+              min-width="250"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'login_type')?.show"
+              key="login_type"
+              label="登录类型"
+              prop="login_type"
+              min-width="100"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'ipaddr')?.show"
+              key="ipaddr"
+              label="IP地址"
+              prop="ipaddr"
+              min-width="150"
+              show-overflow-tooltip
+            >
+              <template #default="scope">
+                <el-text>{{ scope.row.ipaddr }}</el-text>
+                <CopyButton
+                  v-if="scope.row.ipaddr"
+                  :text="scope.row.ipaddr"
+                  :style="{ marginLeft: '2px' }"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'name')?.show"
+              key="name"
+              label="用户名"
+              prop="name"
+              min-width="80"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'user_name')?.show"
+              key="user_name"
+              label="账号"
+              prop="user_name"
+              min-width="80"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'login_location')?.show"
+              key="login_location"
+              label="登录位置"
+              prop="login_location"
+              min-width="280"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'os')?.show"
+              key="os"
+              label="操作系统"
+              prop="os"
+              min-width="120"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'login_time')?.show"
+              key="login_time"
+              label="登录时间"
+              prop="login_time"
+              min-width="180"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'operation')?.show"
+              key="operation"
+              fixed="right"
+              label="操作"
+              min-width="100"
+            >
+              <template #default="scope">
+                <el-button
+                  v-hasPerm="['module_monitor:online:delete']"
+                  type="danger"
+                  size="small"
+                  link
+                  icon="delete"
+                  @click="handleSubmit(scope.row.session_id)"
+                >
+                  强退
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </template>
+    </PageContent>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+  name: "OnlineUser",
+  inheritAttrs: false,
+});
+
+import OnlineAPI, { type OnlineUserPageQuery } from "@/api/module_monitor/online";
+import { reactive } from "vue";
+import CrudToolbarLeft from "@/components/CURD/CrudToolbarLeft.vue";
+import CrudToolbarRight from "@/components/CURD/CrudToolbarRight.vue";
+import PageSearch from "@/components/CURD/PageSearch.vue";
+import PageContent from "@/components/CURD/PageContent.vue";
+import { useCrudList } from "@/components/CURD/useCrudList";
+import type { ISearchConfig, IContentConfig } from "@/components/CURD/types";
+
+const { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList } = useCrudList();
+
+const searchConfig = reactive<ISearchConfig>({
+  permPrefix: "module_monitor:online",
+  colon: true,
+  isExpandable: false,
+  showNumber: 3,
+  form: { labelWidth: "auto" },
+  formItems: [
+    {
+      prop: "ipaddr",
+      label: "IP地址",
+      type: "input",
+      attrs: { placeholder: "请输入IP地址", clearable: true },
+    },
+    {
+      prop: "name",
+      label: "用户名",
+      type: "input",
+      attrs: { placeholder: "请输入用户名", clearable: true },
+    },
+    {
+      prop: "login_location",
+      label: "登录位置",
+      type: "input",
+      attrs: { placeholder: "请输入登录位置", clearable: true },
+    },
+  ],
+});
+
+const contentCols = reactive<
+  Array<{
+    prop?: string;
+    label?: string;
+    show?: boolean;
+  }>
+>([
+  { prop: "selection", label: "选择框", show: true },
+  { prop: "index", label: "序号", show: true },
+  { prop: "session_id", label: "会话编号", show: true },
+  { prop: "login_type", label: "登录类型", show: true },
+  { prop: "name", label: "登录名称", show: true },
+  { prop: "user_name", label: "用户账号", show: true },
+  { prop: "ipaddr", label: "主机", show: true },
+  { prop: "login_location", label: "登录地点", show: true },
+  { prop: "os", label: "操作系统", show: true },
+  { prop: "login_time", label: "登录时间", show: true },
+  { prop: "operation", label: "操作", show: true },
+]);
+
+const contentConfig = reactive<IContentConfig<OnlineUserPageQuery>>({
+  permPrefix: "module_monitor:online",
+  cols: contentCols as IContentConfig["cols"],
+  hideColumnFilter: false,
+  toolbar: [],
+  defaultToolbar: ["refresh", "filter"],
+  pagination: {
+    pageSize: 10,
+    pageSizes: [10, 20, 30, 50],
+  },
+  request: { page_no: "page_no", page_size: "page_size" },
+  indexAction: async (params) => {
+    const res = await OnlineAPI.listOnline(params as OnlineUserPageQuery);
+    return {
+      total: res.data.data.total,
+      list: res.data.data.items,
+    };
+  },
+});
+
+async function handleSubmit(session_id: string) {
+  ElMessageBox.confirm(`确认强制退出会话 ${session_id}?`, "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(async () => {
+      try {
+        await OnlineAPI.deleteOnline(session_id);
+        refreshList();
+      } catch (error: unknown) {
+        console.error(error);
+      }
+    })
+    .catch(() => {
+      ElMessageBox.close();
+    });
+}
+
+async function handleClear() {
+  ElMessageBox.confirm("确认强制退出所有用户?", "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(async () => {
+      try {
+        await OnlineAPI.clearOnline();
+        refreshList();
+      } catch (error: unknown) {
+        console.error(error);
+      }
+    })
+    .catch(() => {
+      ElMessageBox.close();
+    });
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/frontend/new-web/src/views/module_monitor/resource/index.vue b/frontend/new-web/src/views/module_monitor/resource/index.vue
new file mode 100644
index 00000000..3f23e840
--- /dev/null
+++ b/frontend/new-web/src/views/module_monitor/resource/index.vue
@@ -0,0 +1,609 @@
+<template>
+  <div class="app-container">
+    <PageSearch
+      ref="searchRef"
+      :search-config="searchConfig"
+      @query-click="handleQueryClick"
+      @reset-click="handleResetClick"
+    />
+
+    <PageContent ref="contentRef" :content-config="contentConfig">
+      <template #header>
+        <div class="card-header">
+          <span>
+            <el-tooltip content="资源文件管理系统: 点击路径可以快速返回上级目录">
+              <QuestionFilled class="w-4 h-4 mx-1" />
+            </el-tooltip>
+            文件列表(当前路径)：
+          </span>
+          <div class="breadcrumb-container">
+            <span class="breadcrumb-label"></span>
+            <el-breadcrumb separator="/">
+              <el-breadcrumb-item
+                v-for="(item, index) in breadcrumbList"
+                :key="index"
+                :class="{ 'is-link': index < breadcrumbList.length - 1 }"
+                @click="handleBreadcrumbClick(item)"
+              >
+                {{ item.name }}
+              </el-breadcrumb-item>
+            </el-breadcrumb>
+          </div>
+        </div>
+      </template>
+
+      <template #toolbar="{ toolbarRight, onToolbar, removeIds, cols }">
+        <CrudToolbarLeft :remove-ids="removeIds">
+          <el-row :gutter="10">
+            <el-col :span="1.5">
+              <el-button
+                v-hasPerm="['module_monitor:resource:upload']"
+                type="success"
+                icon="plus"
+                @click="handleUpload"
+              >
+                上传文件
+              </el-button>
+            </el-col>
+            <el-col :span="1.5">
+              <el-button
+                v-hasPerm="['module_monitor:resource:create_dir']"
+                type="primary"
+                icon="folder-add"
+                @click="handleCreateDir"
+              >
+                新建文件夹
+              </el-button>
+            </el-col>
+            <el-col :span="1.5">
+              <el-button
+                v-hasPerm="['module_monitor:resource:delete']"
+                type="danger"
+                icon="delete"
+                :disabled="removeIds.length === 0"
+                @click="handleBatchDelete"
+              >
+                批量删除
+              </el-button>
+            </el-col>
+          </el-row>
+        </CrudToolbarLeft>
+        <div class="data-table__toolbar--right flex flex-wrap items-center gap-3">
+          <el-checkbox
+            v-model="showHiddenFiles"
+            v-hasPerm="['module_monitor:resource:query']"
+            @change="onShowHiddenChange"
+          >
+            显示隐藏文件
+          </el-checkbox>
+          <CrudToolbarRight :buttons="toolbarRight" :cols="cols" :on-toolbar="onToolbar" />
+        </div>
+      </template>
+
+      <template #table="{ data, loading: tableLoading, tableRef, onSelectionChange, pagination }">
+        <div class="data-table__content">
+          <el-table
+            :ref="tableRef as any"
+            v-loading="tableLoading"
+            row-key="file_url"
+            :data="data"
+            height="100%"
+            border
+            stripe
+            @selection-change="
+              (s) => {
+                handleSelectionChange(s as ResourceItem[]);
+                onSelectionChange(s);
+              }
+            "
+          >
+            <template #empty>
+              <el-empty :image-size="80" description="暂无数据" />
+            </template>
+            <el-table-column type="selection" min-width="40" align="center" />
+            <el-table-column type="index" fixed label="序号" min-width="50">
+              <template #default="scope">
+                {{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }}
+              </template>
+            </el-table-column>
+            <el-table-column label="名称" prop="name" min-width="200">
+              <template #default="{ row }">
+                <div class="file-name">
+                  <el-icon class="file-icon">
+                    <Folder v-if="row.is_dir" />
+                    <Document v-else />
+                  </el-icon>
+                  <span class="file-name-clickable" @click="handleFileNameClick(row)">
+                    {{ row.name }}
+                  </span>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="大小" prop="size" min-width="120" align="center">
+              <template #default="{ row }">
+                <span v-if="!row.is_dir">{{ formatFileSize(row.size) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="修改时间" prop="modified_time" min-width="180" sortable />
+            <el-table-column
+              fixed="right"
+              label="操作"
+              align="center"
+              min-width="200"
+              class-name="search-buttons"
+            >
+              <template #default="{ row }">
+                <el-button
+                  v-if="!row.is_dir"
+                  v-hasPerm="['module_monitor:resource:download']"
+                  type="success"
+                  size="small"
+                  link
+                  icon="download"
+                  @click="handleDownload(row)"
+                >
+                  下载
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_monitor:resource:rename']"
+                  type="primary"
+                  size="small"
+                  link
+                  icon="edit"
+                  @click="handleRename(row)"
+                >
+                  重命名
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_monitor:resource:delete']"
+                  type="danger"
+                  size="small"
+                  link
+                  icon="delete"
+                  @click="handleDelete(row)"
+                >
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </template>
+    </PageContent>
+
+    <!-- 上传对话框 -->
+    <EnhancedDialog
+      v-model="uploadDialogVisible"
+      title="上传文件"
+      width="500px"
+      @close="handleUploadClose"
+    >
+      <el-upload
+        ref="uploadRef"
+        :auto-upload="false"
+        :multiple="true"
+        :file-list="uploadFileList"
+        drag
+        @change="handleUploadChange"
+      >
+        <el-icon class="el-icon--upload"><UploadFilled /></el-icon>
+        <div class="el-upload__text">
+          将文件拖到此处，或
+          <em>点击上传</em>
+        </div>
+        <template #tip>
+          <div class="el-upload__tip" style="color: red">
+            不支持多文件上传，单个文件不超过100MB，多文件上传，取最后一个文件上传
+          </div>
+        </template>
+      </el-upload>
+      <template #footer>
+        <el-button @click="uploadDialogVisible = false">取消</el-button>
+        <el-button
+          v-hasPerm="['module_monitor:resource:upload']"
+          type="primary"
+          :loading="uploading"
+          @click="handleUploadConfirm"
+        >
+          确定上传
+        </el-button>
+      </template>
+    </EnhancedDialog>
+
+    <!-- 新建文件夹对话框 -->
+    <EnhancedDialog v-model="createDirDialogVisible" title="新建文件夹" width="400px">
+      <el-form :model="createDirForm" label-width="80px">
+        <el-form-item label="文件夹名" required>
+          <el-input
+            v-model="createDirForm.dir_name"
+            placeholder="请输入文件夹名称"
+            @keyup.enter="handleCreateDirConfirm"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="createDirDialogVisible = false">取消</el-button>
+        <el-button
+          v-hasPerm="['module_monitor:resource:create_dir']"
+          type="primary"
+          @click="handleCreateDirConfirm"
+        >
+          确定
+        </el-button>
+      </template>
+    </EnhancedDialog>
+
+    <!-- 重命名对话框 -->
+    <EnhancedDialog v-model="renameDialogVisible" title="重命名" width="400px">
+      <el-form :model="renameForm" label-width="80px">
+        <el-form-item label="新名称" required>
+          <el-input
+            v-model="renameForm.new_name"
+            placeholder="请输入新名称"
+            @keyup.enter="handleRenameConfirm"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="renameDialogVisible = false">取消</el-button>
+        <el-button
+          v-hasPerm="['module_monitor:resource:rename']"
+          type="primary"
+          @click="handleRenameConfirm"
+        >
+          确定
+        </el-button>
+      </template>
+    </EnhancedDialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  name: "ResourceMonitor",
+  inheritAttrs: false,
+});
+
+import { ref, reactive } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { Folder, Document, UploadFilled, QuestionFilled } from "@element-plus/icons-vue";
+import {
+  ResourceAPI,
+  type ResourceItem,
+  type ResourcePageQuery,
+} from "@/api/module_monitor/resource";
+import CrudToolbarLeft from "@/components/CURD/CrudToolbarLeft.vue";
+import CrudToolbarRight from "@/components/CURD/CrudToolbarRight.vue";
+import PageSearch from "@/components/CURD/PageSearch.vue";
+import PageContent from "@/components/CURD/PageContent.vue";
+import EnhancedDialog from "@/components/CURD/EnhancedDialog.vue";
+import { useCrudList } from "@/components/CURD/useCrudList";
+import type { IContentConfig, ISearchConfig } from "@/components/CURD/types";
+
+const { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList } = useCrudList();
+
+const selectedItems = ref<ResourceItem[]>([]);
+const breadcrumbList = ref([{ name: "资源根目录", path: "/" }]);
+const showHiddenFiles = ref(false);
+
+const currentPath = ref("/");
+
+const searchConfig = reactive<ISearchConfig>({
+  permPrefix: "module_monitor:resource",
+  colon: true,
+  isExpandable: false,
+  showNumber: 3,
+  form: { labelWidth: "auto" },
+  searchButtonPerm: "module_monitor:resource:query",
+  resetButtonPerm: "module_monitor:resource:query",
+  formItems: [
+    {
+      prop: "name",
+      label: "关键词",
+      type: "input",
+      attrs: { placeholder: "请输入文件名或目录名", clearable: true, style: { width: "200px" } },
+    },
+  ],
+});
+
+const contentConfig = reactive<IContentConfig<ResourcePageQuery>>({
+  permPrefix: "module_monitor:resource",
+  cols: [],
+  hideColumnFilter: true,
+  toolbar: [],
+  defaultToolbar: ["refresh"],
+  pk: "file_url",
+  pagination: {
+    pageSize: 10,
+    pageSizes: [10, 20, 30, 50],
+  },
+  request: { page_no: "page_no", page_size: "page_size" },
+  indexAction: async (params) => {
+    const merged: ResourcePageQuery = {
+      ...(params as ResourcePageQuery),
+      include_hidden: showHiddenFiles.value,
+    };
+    if (currentPath.value && currentPath.value !== "/") {
+      merged.path = currentPath.value;
+    }
+    const res = await ResourceAPI.listResource(merged);
+    return {
+      total: res.data.data.total,
+      list: res.data.data.items,
+    };
+  },
+});
+
+const uploadDialogVisible = ref(false);
+const createDirDialogVisible = ref(false);
+const renameDialogVisible = ref(false);
+const uploading = ref(false);
+
+const uploadRef = ref();
+const uploadFileList = ref<any[]>([]);
+
+const createDirForm = reactive({
+  dir_name: "",
+});
+
+const renameForm = reactive({
+  new_name: "",
+  old_path: "",
+});
+
+function handleBreadcrumbClick(item: { path: string }) {
+  currentPath.value = item.path;
+  updateBreadcrumb();
+  refreshList();
+}
+
+function updateBreadcrumb() {
+  if (currentPath.value === "/") {
+    breadcrumbList.value = [{ name: "资源根目录", path: "/" }];
+    return;
+  }
+
+  const parts = currentPath.value.split("/").filter((part) => part !== "");
+
+  breadcrumbList.value = [
+    { name: "资源根目录", path: "/" },
+    ...parts.map((part, index) => ({
+      name: part,
+      path: parts.slice(0, index + 1).join("/"),
+    })),
+  ];
+}
+
+function handleFileNameClick(row: ResourceItem) {
+  if (row.is_dir) {
+    if (currentPath.value === "/") {
+      currentPath.value = row.name;
+    } else {
+      currentPath.value = currentPath.value + "/" + row.name;
+    }
+    updateBreadcrumb();
+    refreshList();
+  } else {
+    handleFilePreview(row);
+  }
+}
+
+function handleFilePreview(file: ResourceItem) {
+  let previewUrl = file.file_url;
+
+  if (previewUrl && !previewUrl.startsWith("http")) {
+    previewUrl = `${window.location.origin}${previewUrl}`;
+  }
+
+  window.open(previewUrl, "_blank");
+}
+
+function handleSelectionChange(selection: ResourceItem[]) {
+  selectedItems.value = selection;
+}
+
+function handleUpload() {
+  uploadDialogVisible.value = true;
+  uploadFileList.value = [];
+}
+
+function handleUploadChange(_file: unknown, fileList: unknown[]) {
+  uploadFileList.value = fileList as any[];
+}
+
+async function handleUploadConfirm() {
+  if (uploadFileList.value.length === 0) {
+    ElMessage.warning("请选择要上传的文件");
+    return;
+  }
+
+  try {
+    uploading.value = true;
+    const formData = new FormData();
+    uploadFileList.value.forEach((file: { raw?: Blob }) => {
+      const raw = file.raw;
+      if (raw) formData.append("file", raw);
+    });
+
+    const targetPath = currentPath.value === "/" ? "" : currentPath.value;
+    formData.append("target_path", targetPath);
+
+    await ResourceAPI.uploadFile(formData);
+    uploadDialogVisible.value = false;
+    refreshList();
+  } catch (error) {
+    console.error("Upload error:", error);
+  } finally {
+    uploading.value = false;
+  }
+}
+
+function handleUploadClose() {
+  uploadDialogVisible.value = false;
+  uploadFileList.value = [];
+}
+
+function handleCreateDir() {
+  createDirForm.dir_name = "";
+  createDirDialogVisible.value = true;
+}
+
+async function handleCreateDirConfirm() {
+  if (!createDirForm.dir_name.trim()) {
+    ElMessage.warning("请输入文件夹名称");
+    return;
+  }
+
+  try {
+    const parentPath = currentPath.value === "/" ? "" : currentPath.value;
+    await ResourceAPI.createDirectory({
+      parent_path: parentPath,
+      dir_name: createDirForm.dir_name.trim(),
+    });
+    createDirDialogVisible.value = false;
+    refreshList();
+  } catch (error) {
+    console.error("Create directory error:", error);
+  }
+}
+
+function onShowHiddenChange() {
+  refreshList();
+}
+
+async function handleDownload(item: ResourceItem) {
+  try {
+    const response = await ResourceAPI.downloadFile(item.file_url);
+    const blob = response.data;
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = item.name;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    window.URL.revokeObjectURL(url);
+  } catch (error) {
+    console.error("Download error:", error);
+  }
+}
+
+function handleRename(item: ResourceItem) {
+  renameForm.old_path = item.file_url;
+  renameForm.new_name = item.name;
+  renameDialogVisible.value = true;
+}
+
+async function handleRenameConfirm() {
+  if (!renameForm.new_name.trim()) {
+    ElMessage.warning("请输入新名称");
+    return;
+  }
+
+  try {
+    await ResourceAPI.renameResource({
+      old_path: renameForm.old_path,
+      new_name: renameForm.new_name.trim(),
+    });
+    renameDialogVisible.value = false;
+    refreshList();
+  } catch (error) {
+    console.error("Rename error:", error);
+  }
+}
+
+async function handleDelete(item: ResourceItem) {
+  try {
+    await ElMessageBox.confirm(`确定要删除 ${item.name} 吗？`, "确认删除", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    });
+
+    await ResourceAPI.deleteResource([item.file_url]);
+    refreshList();
+  } catch (error) {
+    if (error !== "cancel") {
+      console.error("Delete error:", error);
+    }
+  }
+}
+
+async function handleBatchDelete() {
+  if (selectedItems.value.length === 0) {
+    ElMessage.warning("请选择要删除的文件");
+    return;
+  }
+
+  try {
+    await ElMessageBox.confirm(
+      `确定要删除选中的 ${selectedItems.value.length} 个文件吗？`,
+      "确认删除",
+      {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }
+    );
+
+    const paths = selectedItems.value.map((item) => item.file_url);
+
+    await ResourceAPI.deleteResource(paths);
+    refreshList();
+  } catch (error) {
+    if (error !== "cancel") {
+      console.error("Batch delete error:", error);
+    }
+  }
+}
+
+function formatFileSize(size?: number | null) {
+  if (!size || size === null) return "-";
+  const units = ["B", "KB", "MB", "GB", "TB"];
+  let unitIndex = 0;
+  let fileSize = size;
+
+  while (fileSize >= 1024 && unitIndex < units.length - 1) {
+    fileSize /= 1024;
+    unitIndex++;
+  }
+
+  return `${fileSize.toFixed(1)} ${units[unitIndex]}`;
+}
+</script>
+
+<style lang="scss" scoped>
+.card-header {
+  display: flex;
+  align-items: center;
+}
+
+.data-table__content {
+  .file-name {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+
+    .file-name-clickable {
+      color: var(--el-color-primary);
+      cursor: pointer;
+
+      &:hover {
+        color: var(--el-color-primary-light-3);
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+:deep(.el-breadcrumb__item) {
+  &.is-link {
+    color: var(--el-color-primary);
+    cursor: pointer;
+
+    &:hover {
+      color: var(--el-color-primary-light-3);
+    }
+  }
+}
+</style>
diff --git a/frontend/new-web/src/views/module_monitor/server/index.vue b/frontend/new-web/src/views/module_monitor/server/index.vue
new file mode 100644
index 00000000..b03d7ba4
--- /dev/null
+++ b/frontend/new-web/src/views/module_monitor/server/index.vue
@@ -0,0 +1,318 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="16">
+      <el-col :span="12" class="mb-4">
+        <el-card :loading="loading" shadow="hover">
+          <template #header>
+            <div class="flex items-center gap-2">
+              <el-icon><Cpu /></el-icon>
+              <span class="flex items-center gap-2">CPU使用情况</span>
+              <el-tooltip content="展示CPU核心数及使用率">
+                <el-icon><QuestionFilled /></el-icon>
+              </el-tooltip>
+            </div>
+          </template>
+          <el-row :gutter="16">
+            <!-- CPU核心数卡片 -->
+            <el-col :span="12">
+              <el-card shadow="hover">
+                <span>核心数</span>
+                <el-tooltip :content="(server.cpu?.cpu_num || 0).toFixed(1)">
+                  <div class="text-center mb-4">
+                    <el-progress
+                      type="circle"
+                      :percentage="100"
+                      :format="() => `${server.cpu?.cpu_num || 0}`"
+                    />
+                  </div>
+                </el-tooltip>
+                <el-descriptions :column="1" border>
+                  <el-descriptions-item label="总核心数">
+                    {{ server.cpu?.cpu_num || 0 }}
+                  </el-descriptions-item>
+                  <el-descriptions-item label="已用核心">
+                    {{ Math.floor(((server.cpu?.used || 0) * server.cpu?.cpu_num) / 100) }}
+                  </el-descriptions-item>
+                  <el-descriptions-item label="空闲核心">
+                    {{ Math.floor(((server.cpu?.free || 0) * server.cpu?.cpu_num) / 100) }}
+                  </el-descriptions-item>
+                </el-descriptions>
+              </el-card>
+            </el-col>
+            <!-- CPU使用率卡片 -->
+            <el-col :span="12">
+              <el-card shadow="hover" class="h-full">
+                <span>使用率</span>
+                <el-tooltip :content="(server.cpu?.used || 0).toFixed(1) + '%'">
+                  <div class="text-center mb-4">
+                    <el-progress
+                      type="circle"
+                      :percentage="server.cpu?.used || 0"
+                      :status="
+                        server.cpu?.used > 80
+                          ? 'exception'
+                          : server.cpu?.used > 60
+                            ? 'warning'
+                            : 'success'
+                      "
+                    />
+                  </div>
+                </el-tooltip>
+                <el-descriptions :column="1" border>
+                  <el-descriptions-item label="用户使用率">
+                    {{ (server.cpu?.used || 0).toFixed(1) + "%" }}
+                  </el-descriptions-item>
+                  <el-descriptions-item label="系统使用率">
+                    {{ (server.cpu?.sys || 0).toFixed(1) + "%" }}
+                  </el-descriptions-item>
+                  <el-descriptions-item label="当前空闲率">
+                    {{ (server.cpu?.free || 0).toFixed(1) + "%" }}
+                  </el-descriptions-item>
+                </el-descriptions>
+              </el-card>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+
+      <el-col :span="12" class="mb-4">
+        <el-card :loading="loading" shadow="hover">
+          <template #header>
+            <div class="flex items-center gap-2">
+              <el-icon><Memo /></el-icon>
+              <span>内存使用情况</span>
+              <el-tooltip content="展示系统内存和Python程序内存使用情况">
+                <el-icon><QuestionFilled /></el-icon>
+              </el-tooltip>
+            </div>
+          </template>
+          <el-row :gutter="16">
+            <!-- 系统内存卡片 -->
+            <el-col :span="12">
+              <el-card shadow="hover" class="h-full">
+                <span>系统内存</span>
+                <el-tooltip :content="(server.mem?.usage || 0).toFixed(1) + '%'">
+                  <div class="text-center mb-4">
+                    <el-progress
+                      type="circle"
+                      :percentage="server.mem?.usage || 0"
+                      :status="
+                        server.mem?.usage > 80
+                          ? 'exception'
+                          : server.mem?.usage > 60
+                            ? 'warning'
+                            : 'success'
+                      "
+                    />
+                  </div>
+                </el-tooltip>
+                <el-descriptions :column="1" border>
+                  <el-descriptions-item label="总内存">
+                    {{ server.mem?.total }}
+                  </el-descriptions-item>
+                  <el-descriptions-item label="已用内存">
+                    {{ server.mem?.used }}
+                  </el-descriptions-item>
+                  <el-descriptions-item label="空闲内存">
+                    {{ server.mem?.free }}
+                  </el-descriptions-item>
+                </el-descriptions>
+              </el-card>
+            </el-col>
+            <!-- Python内存卡片 -->
+            <el-col :span="12">
+              <el-card shadow="hover" class="h-full">
+                <span>Python内存</span>
+                <el-tooltip :content="(server.py?.memory_usage || 0).toFixed(1) + '%'">
+                  <div class="text-center mb-4">
+                    <el-progress
+                      type="circle"
+                      :percentage="server.py?.memory_usage || 0"
+                      :status="
+                        server.py?.memory_usage > 80
+                          ? 'exception'
+                          : server.py?.memory_usage > 60
+                            ? 'warning'
+                            : 'success'
+                      "
+                    />
+                  </div>
+                </el-tooltip>
+                <el-descriptions :column="1" border>
+                  <el-descriptions-item label="总内存">
+                    {{ server.py?.memory_total }}
+                  </el-descriptions-item>
+                  <el-descriptions-item label="已用内存">
+                    {{ server.py?.memory_used }}
+                  </el-descriptions-item>
+                  <el-descriptions-item label="空闲内存">
+                    {{ server.py?.memory_free }}
+                  </el-descriptions-item>
+                </el-descriptions>
+              </el-card>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+
+      <el-col :span="24" class="mb-4">
+        <el-card :loading="loading">
+          <template #header>
+            <div class="flex items-center gap-2">
+              <el-icon><Monitor /></el-icon>
+              <span class="font-medium">服务器基本信息</span>
+              <el-tooltip content="展示服务器基本配置信息">
+                <el-icon><QuestionFilled /></el-icon>
+              </el-tooltip>
+            </div>
+          </template>
+          <el-descriptions :column="2" border>
+            <el-descriptions-item label="服务器名称">
+              {{ server.sys?.computer_name || "-" }}
+            </el-descriptions-item>
+            <el-descriptions-item label="操作系统">
+              {{ server.sys?.os_name || "-" }}
+            </el-descriptions-item>
+            <el-descriptions-item label="服务器IP">
+              {{ server.sys?.computer_ip || "-" }}
+            </el-descriptions-item>
+            <el-descriptions-item label="系统架构">
+              {{ server.sys?.os_arch || "-" }}
+            </el-descriptions-item>
+          </el-descriptions>
+        </el-card>
+      </el-col>
+
+      <el-col :span="24" class="mb-4">
+        <el-card :loading="loading" class="shadow-sm">
+          <template #header>
+            <div class="flex items-center gap-2">
+              <el-icon><Dish /></el-icon>
+              <span class="font-medium">Python运行环境</span>
+              <el-tooltip content="展示Python环境配置及运行状态">
+                <el-icon><QuestionFilled /></el-icon>
+              </el-tooltip>
+            </div>
+          </template>
+          <el-descriptions :column="3" border>
+            <el-descriptions-item label="Python名称">
+              {{ server.py?.name || "-" }}
+            </el-descriptions-item>
+            <el-descriptions-item label="Python版本">
+              {{ server.py?.version || "-" }}
+            </el-descriptions-item>
+            <el-descriptions-item label="启动时间">
+              {{ server.py?.start_time || "-" }}
+            </el-descriptions-item>
+            <el-descriptions-item label="运行时长">
+              {{ server.py?.run_time || "-" }}
+            </el-descriptions-item>
+            <el-descriptions-item label="安装路径">
+              {{ server.py?.home || "-" }}
+            </el-descriptions-item>
+            <el-descriptions-item label="项目路径">
+              {{ server.sys?.user_dir || "-" }}
+            </el-descriptions-item>
+          </el-descriptions>
+        </el-card>
+      </el-col>
+
+      <el-col :span="24">
+        <el-card :loading="loading">
+          <template #header>
+            <div class="flex items-center gap-2">
+              <el-icon>
+                <Files />
+              </el-icon>
+              <span class="font-medium">磁盘使用情况</span>
+              <el-tooltip content="展示磁盘空间使用详情">
+                <el-icon><QuestionFilled /></el-icon>
+              </el-tooltip>
+            </div>
+          </template>
+          <el-table :data="server.disks" border stripe>
+            <template #empty>
+              <el-empty :image-size="80" description="暂无数据" />
+            </template>
+            <el-table-column label="盘符路径" prop="dir_name" :show-overflow-tooltip="true" />
+            <el-table-column label="文件系统" prop="sys_type_name" align="center" width="100" />
+            <el-table-column label="盘符名称" prop="type_name" />
+            <el-table-column prop="usage" label="使用率" align="center">
+              <template #default="{ row }">
+                <!-- 使用 element-plus 的 Progress 组件 -->
+                <div>
+                  <el-progress
+                    :percentage="Number(row.usage)"
+                    :status="row.usage > 80 ? 'exception' : row.usage > 60 ? 'warning' : 'success'"
+                    :text-inside="true"
+                    :stroke-width="16"
+                  />
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="总大小" prop="total" align="center" width="100" />
+            <el-table-column label="可用大小" prop="free" align="center" width="100" />
+            <el-table-column label="已用大小" prop="used" align="center" width="100" />
+          </el-table>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import ServerAPI, { type ServerInfo } from "@/api/module_monitor/server";
+
+const loading = ref(false);
+const server = ref<ServerInfo>({
+  cpu: {
+    cpu_num: 0,
+    used: 0,
+    sys: 0,
+    free: 0,
+  },
+  mem: {
+    total: "",
+    used: "",
+    free: "",
+    usage: 0,
+  },
+  sys: {
+    computer_name: "",
+    os_name: "",
+    computer_ip: "",
+    os_arch: "",
+    user_dir: "",
+  },
+  py: {
+    name: "",
+    version: "",
+    start_time: "",
+    run_time: "",
+    home: "",
+    memory_total: "",
+    memory_used: "",
+    memory_free: "",
+    memory_usage: 0,
+  },
+  disks: [],
+});
+
+async function getList() {
+  loading.value = true;
+  try {
+    const response = await ServerAPI.getServer();
+    server.value = response.data.data;
+  } catch (error) {
+    console.error("获取服务器信息失败:", error);
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(() => {
+  getList();
+});
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/frontend/new-web/src/views/module_system/auth/composables/useLoginPanelAlign.ts b/frontend/new-web/src/views/module_system/auth/composables/useLoginPanelAlign.ts
new file mode 100644
index 00000000..2b552fd0
--- /dev/null
+++ b/frontend/new-web/src/views/module_system/auth/composables/useLoginPanelAlign.ts
@@ -0,0 +1,36 @@
+import { ref, watch } from "vue";
+
+/** 左侧插画背景与右侧登录区的分栏比例 */
+export type LoginPanelAlign = "left" | "center" | "right";
+
+const STORAGE_KEY = "login-panel-align";
+
+function readInitial(): LoginPanelAlign {
+  try {
+    const v = localStorage.getItem(STORAGE_KEY);
+    if (v === "left" || v === "center" || v === "right") return v;
+  } catch {
+    /* ignore */
+  }
+  /** 默认：插画在左、表单在右 */
+  return "right";
+}
+
+/**
+ * 登录页布局（本地持久化）
+ * - left/right：交换插画与表单列左右位置（列宽约 65%/35%）
+ * - center：隐藏插画，全宽背景 + 440px 卡片在顶栏与页脚之间居中悬浮
+ */
+export function useLoginPanelAlign() {
+  const panelAlign = ref<LoginPanelAlign>(readInitial());
+
+  watch(panelAlign, (v) => {
+    try {
+      localStorage.setItem(STORAGE_KEY, v);
+    } catch {
+      /* ignore */
+    }
+  });
+
+  return { panelAlign };
+}
diff --git a/frontend/new-web/src/views/module_system/auth/login/components/LoginAccountForm.vue b/frontend/new-web/src/views/module_system/auth/login/components/LoginAccountForm.vue
new file mode 100644
index 00000000..b31213d3
--- /dev/null
+++ b/frontend/new-web/src/views/module_system/auth/login/components/LoginAccountForm.vue
@@ -0,0 +1,227 @@
+<!-- 账号密码登录表单（含快捷账号、验证码、滑块） -->
+<template>
+  <div>
+    <ElForm
+      ref="formRef"
+      :model="loginForm"
+      :rules="rules"
+      :key="formKey"
+      class="login-page-form"
+      :validate-on-rule-change="false"
+      @keyup.enter="$emit('submit')"
+    >
+      <ElFormItem>
+        <ElSelect
+          :model-value="demoAccountKey"
+          class="w-full"
+          :placeholder="$t('login.quickSelectAccount')"
+          @update:model-value="$emit('setupAccount', $event as AccountKey)"
+        >
+          <ElOption
+            v-for="account in accounts"
+            :key="account.key"
+            :label="account.label"
+            :value="account.key"
+          >
+            <span>{{ account.label }}</span>
+          </ElOption>
+        </ElSelect>
+      </ElFormItem>
+
+      <ElFormItem prop="username">
+        <ElInput
+          class="custom-height"
+          v-model.trim="loginForm.username"
+          clearable
+          :placeholder="$t('login.placeholder.username')"
+        >
+          <template #prefix>
+            <ElIcon><User /></ElIcon>
+          </template>
+        </ElInput>
+      </ElFormItem>
+
+      <ElTooltip :visible="isCapsLock" :content="$t('login.capsLock')" placement="right">
+        <ElFormItem prop="password">
+          <ElInput
+            class="custom-height"
+            v-model.trim="loginForm.password"
+            type="password"
+            autocomplete="off"
+            show-password
+            clearable
+            @keyup="checkCapsLock"
+            @keyup.enter="$emit('submit')"
+          >
+            <template #prefix>
+              <ElIcon><Lock /></ElIcon>
+            </template>
+          </ElInput>
+        </ElFormItem>
+      </ElTooltip>
+
+      <ElFormItem v-if="captchaState.enable" prop="captcha" class="login-captcha-row">
+        <div class="flex w-full items-center gap-2.5">
+          <ElInput
+            v-model.trim="loginForm.captcha"
+            class="custom-height flex-1"
+            clearable
+            :placeholder="$t('login.captchaCode')"
+            @keyup.enter="$emit('submit')"
+          >
+            <template #prefix>
+              <ArtSvgIcon
+                icon="mdi:shield-lock-outline"
+                class="size-[18px] text-[var(--el-text-color-secondary)]"
+              />
+            </template>
+          </ElInput>
+          <div
+            class="login-captcha-img flex h-10 w-[100px] shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded"
+            role="button"
+            :title="$t('login.captchaClickHint')"
+            @click="$emit('getCaptcha')"
+          >
+            <ElIcon v-if="codeLoading" class="is-loading" :size="20">
+              <Loading />
+            </ElIcon>
+            <ElImage
+              v-else-if="captchaState.img_base"
+              class="h-full w-full object-cover"
+              fit="cover"
+              :src="captchaState.img_base"
+            />
+            <ElText v-else type="info" size="small">
+              {{ $t("login.captchaClickHint") }}
+            </ElText>
+          </div>
+        </div>
+      </ElFormItem>
+
+      <div class="login-form-tail flex flex-col gap-[1.1rem]">
+        <div class="relative pb-3">
+          <div
+            class="relative z-[2] overflow-hidden select-none rounded-lg border border-transparent tad-300"
+            :class="{ '!border-[#FF4E4F]': !isPassing && isClickPass }"
+          >
+            <ArtDragVerify
+              ref="dragVerifyRef"
+              v-model:value="isPassing"
+              :text="$t('login.sliderText')"
+              :text-color="dragVerifyTextColor"
+              :success-text="$t('login.sliderSuccessText')"
+              progress-bar-bg="var(--el-color-primary)"
+              :background="isDark ? '#26272F' : '#F1F1F4'"
+              handler-bg="var(--default-box-color)"
+            />
+          </div>
+          <p
+            class="absolute top-0 z-[1] mt-2 px-px text-xs text-[#f56c6c] tad-300"
+            :class="{ 'translate-y-10': !isPassing && isClickPass }"
+          >
+            {{ $t("login.placeholder.slider") }}
+          </p>
+        </div>
+
+        <div class="login-options-row flex-cb text-sm">
+          <ElCheckbox v-model="loginForm.remember" class="login-remember">
+            {{ $t("login.rememberPwd") }}
+          </ElCheckbox>
+          <ElLink
+            type="primary"
+            :underline="false"
+            class="inline-flex items-center text-sm !leading-[inherit]"
+            @click="$emit('forget')"
+          >
+            {{ $t("login.forgetPwd") }}
+          </ElLink>
+        </div>
+
+        <div>
+          <ElButton
+            class="h-11 w-full !rounded-lg text-base font-medium"
+            type="primary"
+            :loading="loading"
+            v-ripple
+            @click="$emit('submit')"
+          >
+            {{ $t("login.btnText") }}
+          </ElButton>
+        </div>
+
+        <div class="login-secondary-actions grid grid-cols-2 gap-2">
+          <ElButton class="login-secondary-btn" plain @click="$emit('openMobile')">
+            {{ $t("login.mobileLogin") }}
+          </ElButton>
+          <ElButton class="login-secondary-btn" plain @click="$emit('openQr')">
+            {{ $t("login.qrLogin") }}
+          </ElButton>
+        </div>
+      </div>
+    </ElForm>
+
+    <LoginThirdPartySection @oauth="$emit('oauth', $event)" />
+
+    <LoginAuthLinkRow
+      :hint="$t('login.noAccount')"
+      :link-text="$t('login.register')"
+      @link="$emit('register')"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Loading, Lock, User } from "@element-plus/icons-vue";
+import type { CaptchaInfo, LoginFormData } from "@/api/module_system/auth";
+import type { FormRules } from "element-plus";
+import type { Account, AccountKey } from "../types";
+import LoginAuthLinkRow from "./LoginAuthLinkRow.vue";
+import LoginThirdPartySection from "./LoginThirdPartySection.vue";
+
+defineProps<{
+  loginForm: LoginFormData;
+  rules: FormRules;
+  captchaState: CaptchaInfo;
+  codeLoading: boolean;
+  demoAccountKey: AccountKey;
+  accounts: Account[];
+  formKey: number | string;
+  isDark: boolean;
+  dragVerifyTextColor: string;
+  loading: boolean;
+}>();
+
+const isPassing = defineModel<boolean>("isPassing", { required: true });
+const isClickPass = defineModel<boolean>("isClickPass", { required: true });
+
+defineEmits<{
+  submit: [];
+  setupAccount: [key: AccountKey];
+  getCaptcha: [];
+  openMobile: [];
+  openQr: [];
+  forget: [];
+  register: [];
+  oauth: [provider: "wechat" | "qq" | "github" | "gitee"];
+}>();
+
+const formRef = ref();
+const dragVerifyRef = ref<{ reset?: () => void } | null>(null);
+const isCapsLock = ref(false);
+
+function checkCapsLock(event: KeyboardEvent) {
+  if (event instanceof KeyboardEvent) {
+    isCapsLock.value = event.getModifierState("CapsLock");
+  }
+}
+
+defineExpose({
+  validate: () => formRef.value?.validate?.(),
+  clearValidate: () => formRef.value?.clearValidate?.(),
+  resetDragVerify: () => dragVerifyRef.value?.reset?.(),
+});
+</script>
+
+<style scoped>
+@import "../style.css";
+</style>
diff --git a/frontend/new-web/src/views/module_system/auth/login/components/LoginAuthLinkRow.vue b/frontend/new-web/src/views/module_system/auth/login/components/LoginAuthLinkRow.vue
new file mode 100644
index 00000000..7f62db82
--- /dev/null
+++ b/frontend/new-web/src/views/module_system/auth/login/components/LoginAuthLinkRow.vue
@@ -0,0 +1,30 @@
+<!-- 登录区底部：灰色提示 + 主题链（注册 / 返回登录等） -->
+<template>
+  <div
+    class="login-auth-link-row mt-6 flex flex-wrap items-center justify-center gap-1 text-sm leading-normal"
+  >
+    <span class="inline-flex items-center text-[var(--el-text-color-secondary)]">{{ hint }}</span>
+    <ElLink
+      type="primary"
+      :underline="false"
+      class="inline-flex items-center font-medium !leading-[inherit]"
+      @click="$emit('link')"
+    >
+      {{ linkText }}
+    </ElLink>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{ hint: string; linkText: string }>();
+defineEmits<{ link: [] }>();
+</script>
+
+<style scoped lang="scss">
+.login-auth-link-row {
+  :deep(.el-link),
+  :deep(.el-link__inner) {
+    line-height: inherit;
+  }
+}
+</style>
diff --git a/frontend/new-web/src/views/module_system/auth/login/components/LoginForgetPanel.vue b/frontend/new-web/src/views/module_system/auth/login/components/LoginForgetPanel.vue
new file mode 100644
index 00000000..e36cf992
--- /dev/null
+++ b/frontend/new-web/src/views/module_system/auth/login/components/LoginForgetPanel.vue
@@ -0,0 +1,116 @@
+<!-- 重置密码 / 忘记密码 -->
+<template>
+  <div>
+    <ElForm
+      ref="formRef"
+      :model="forgetForm"
+      :rules="forgetRules"
+      :key="formKey"
+      class="login-page-form mt-4"
+      @keyup.enter="$emit('submit')"
+    >
+      <ElFormItem prop="username">
+        <ElInput
+          v-model.trim="forgetForm.username"
+          class="custom-height"
+          clearable
+          :placeholder="$t('login.placeholder.username')"
+          @keyup.enter="$emit('submit')"
+        >
+          <template #prefix>
+            <ElIcon><User /></ElIcon>
+          </template>
+        </ElInput>
+      </ElFormItem>
+      <ElTooltip :visible="isCapsLock" :content="$t('login.capsLock')" placement="right">
+        <ElFormItem prop="new_password">
+          <ElInput
+            v-model.trim="forgetForm.new_password"
+            class="custom-height"
+            type="password"
+            autocomplete="off"
+            show-password
+            clearable
+            :placeholder="$t('login.placeholder.password')"
+            @keyup="checkCapsLock"
+            @keyup.enter="$emit('submit')"
+          >
+            <template #prefix>
+              <ElIcon><Lock /></ElIcon>
+            </template>
+          </ElInput>
+        </ElFormItem>
+      </ElTooltip>
+      <ElTooltip :visible="isCapsLock" :content="$t('login.capsLock')" placement="right">
+        <ElFormItem prop="confirmPassword">
+          <ElInput
+            v-model.trim="forgetForm.confirmPassword"
+            class="custom-height"
+            type="password"
+            autocomplete="off"
+            show-password
+            clearable
+            :placeholder="$t('login.message.password.confirm')"
+            @keyup="checkCapsLock"
+            @keyup.enter="$emit('submit')"
+          >
+            <template #prefix>
+              <ElIcon><Lock /></ElIcon>
+            </template>
+          </ElInput>
+        </ElFormItem>
+      </ElTooltip>
+      <div class="mt-6">
+        <ElButton
+          class="h-11 w-full min-w-0 !rounded-lg text-base font-medium"
+          type="primary"
+          :loading="forgetLoading"
+          v-ripple
+          @click="$emit('submit')"
+        >
+          {{ $t("common.confirm") }}
+        </ElButton>
+      </div>
+    </ElForm>
+
+    <LoginAuthLinkRow
+      :hint="$t('login.thinkOfPasswd')"
+      :link-text="$t('login.backLoginBtnText')"
+      @link="$emit('toLogin')"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Lock, User } from "@element-plus/icons-vue";
+import type { ForgetPasswordForm } from "@/api/module_system/user";
+import type { FormRules } from "element-plus";
+import LoginAuthLinkRow from "./LoginAuthLinkRow.vue";
+
+defineProps<{
+  forgetForm: ForgetPasswordForm;
+  forgetRules: FormRules<ForgetPasswordForm>;
+  formKey: number | string;
+  forgetLoading: boolean;
+}>();
+
+defineEmits<{ submit: []; toLogin: [] }>();
+
+const formRef = ref();
+const isCapsLock = ref(false);
+
+function checkCapsLock(event: KeyboardEvent) {
+  if (event instanceof KeyboardEvent) {
+    isCapsLock.value = event.getModifierState("CapsLock");
+  }
+}
+
+defineExpose({
+  validate: () => formRef.value?.validate?.(),
+  clearValidate: () => formRef.value?.clearValidate?.(),
+});
+</script>
+
+<style scoped>
+@import "../style.css";
+</style>
diff --git a/frontend/new-web/src/views/module_system/auth/login/components/LoginMobilePanel.vue b/frontend/new-web/src/views/module_system/auth/login/components/LoginMobilePanel.vue
new file mode 100644
index 00000000..67c47ce4
--- /dev/null
+++ b/frontend/new-web/src/views/module_system/auth/login/components/LoginMobilePanel.vue
@@ -0,0 +1,260 @@
+<!-- 手机号登录（无后端接口，演示交互） -->
+<template>
+  <div>
+    <div class="login-page-form login-mobile-flow">
+      <div class="mb-[1.1rem]">
+        <ElInput
+          v-model.trim="mobileForm.phone"
+          class="custom-height"
+          maxlength="11"
+          inputmode="numeric"
+          clearable
+          :placeholder="$t('login.mobilePhonePlaceholder')"
+          @keyup.enter="submitMobileLogin"
+        >
+          <template #prefix>
+            <ElIcon><Iphone /></ElIcon>
+          </template>
+        </ElInput>
+      </div>
+
+      <div class="login-mobile-code-row mb-[1.1rem] flex items-stretch gap-2 sm:gap-3">
+        <div
+          ref="otpWrapRef"
+          class="flex min-w-0 flex-1 gap-1.5 sm:gap-2"
+          @paste.prevent="onOtpPaste"
+        >
+          <input
+            v-for="idx in otpIndices"
+            :key="idx"
+            :value="otpDigits[idx]"
+            type="text"
+            inputmode="numeric"
+            autocomplete="one-time-code"
+            maxlength="1"
+            class="login-mobile-otp-cell"
+            @input="onOtpCellInput(idx, $event)"
+            @keydown="onOtpCellKeydown(idx, $event)"
+          />
+        </div>
+        <ElButton
+          class="login-mobile-sms-btn h-10 shrink-0 self-center px-3 sm:px-4"
+          plain
+          :disabled="smsCountdown > 0"
+          @click="sendSmsCodeMock"
+        >
+          {{ smsCountdown > 0 ? `${smsCountdown}s` : $t("login.getSmsCode") }}
+        </ElButton>
+      </div>
+
+      <div class="login-mobile-actions flex w-full min-w-0 flex-col items-stretch gap-3">
+        <ElButton
+          type="primary"
+          class="h-11 w-full min-w-0 !rounded-lg text-base font-medium"
+          v-ripple
+          @click="submitMobileLogin"
+        >
+          {{ $t("login.btnText") }}
+        </ElButton>
+        <ElButton
+          class="login-secondary-btn h-11 w-full min-w-0 !rounded-lg text-base font-medium"
+          plain
+          @click="$emit('back')"
+        >
+          {{ $t("login.backToAccountLogin") }}
+        </ElButton>
+      </div>
+    </div>
+
+    <LoginAuthLinkRow
+      :hint="$t('login.noAccount')"
+      :link-text="$t('login.register')"
+      @link="$emit('register')"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Iphone } from "@element-plus/icons-vue";
+import { ElMessage } from "element-plus";
+import LoginAuthLinkRow from "./LoginAuthLinkRow.vue";
+
+defineEmits<{ back: []; register: [] }>();
+
+const { t } = useI18n();
+
+const mobileForm = reactive({
+  phone: "",
+});
+
+const otpDigits = ref<string[]>(Array.from({ length: 6 }, () => ""));
+const otpIndices = [0, 1, 2, 3, 4, 5];
+const otpWrapRef = ref<HTMLElement | null>(null);
+const smsCountdown = ref(0);
+let smsTimerId: number | null = null;
+
+function clearSmsTimer() {
+  if (smsTimerId != null) {
+    clearInterval(smsTimerId);
+    smsTimerId = null;
+  }
+}
+
+function resetMobileLoginUi() {
+  mobileForm.phone = "";
+  otpDigits.value = Array.from({ length: 6 }, () => "");
+  smsCountdown.value = 0;
+  clearSmsTimer();
+}
+
+defineExpose({ resetMobileLoginUi });
+
+function focusOtpCell(index: number) {
+  nextTick(() => {
+    const root = otpWrapRef.value;
+    if (!root) return;
+    const inputs = root.querySelectorAll<HTMLInputElement>(".login-mobile-otp-cell");
+    inputs[index]?.focus();
+  });
+}
+
+function onOtpCellInput(index: number, event: Event) {
+  const target = event.target as HTMLInputElement;
+  const digit = target.value.replace(/\D/g, "").slice(-1);
+  otpDigits.value[index] = digit;
+  target.value = digit;
+  if (digit && index < 5) {
+    focusOtpCell(index + 1);
+  }
+}
+
+function onOtpCellKeydown(index: number, event: KeyboardEvent) {
+  if (event.key === "Backspace" && !otpDigits.value[index] && index > 0) {
+    event.preventDefault();
+    otpDigits.value[index - 1] = "";
+    focusOtpCell(index - 1);
+    const root = otpWrapRef.value;
+    const inputs = root?.querySelectorAll<HTMLInputElement>(".login-mobile-otp-cell");
+    const prev = inputs?.[index - 1];
+    if (prev) prev.value = "";
+  }
+}
+
+function onOtpPaste(event: ClipboardEvent) {
+  const text = event.clipboardData?.getData("text")?.replace(/\D/g, "").slice(0, 6) ?? "";
+  if (!text) return;
+  event.preventDefault();
+  for (let i = 0; i < 6; i++) {
+    otpDigits.value[i] = text[i] ?? "";
+  }
+  nextTick(() => {
+    const root = otpWrapRef.value;
+    if (!root) return;
+    const inputs = root.querySelectorAll<HTMLInputElement>(".login-mobile-otp-cell");
+    inputs.forEach((el, i) => {
+      el.value = otpDigits.value[i] ?? "";
+    });
+    const nextIdx = Math.min(text.length, 5);
+    focusOtpCell(nextIdx);
+  });
+}
+
+function sendSmsCodeMock() {
+  const phone = mobileForm.phone.trim();
+  if (!/^1\d{10}$/.test(phone)) {
+    ElMessage.warning(t("login.message.mobile.invalid"));
+    return;
+  }
+  if (smsCountdown.value > 0) return;
+  ElMessage.success(t("login.smsCodeSentMock"));
+  smsCountdown.value = 60;
+  clearSmsTimer();
+  smsTimerId = window.setInterval(() => {
+    smsCountdown.value--;
+    if (smsCountdown.value <= 0) {
+      clearSmsTimer();
+    }
+  }, 1000);
+}
+
+function submitMobileLogin() {
+  const phone = mobileForm.phone.trim();
+  if (!/^1\d{10}$/.test(phone)) {
+    ElMessage.warning(t("login.message.mobile.invalid"));
+    return;
+  }
+  const code = otpDigits.value.join("");
+  if (code.length !== 6) {
+    ElMessage.warning(t("login.smsCodeRequired"));
+    return;
+  }
+  ElMessage.info(t("login.mobileLoginPending"));
+}
+
+onBeforeUnmount(() => {
+  clearSmsTimer();
+});
+</script>
+
+<style scoped lang="scss">
+@import "../style.css";
+
+.login-mobile-flow {
+  margin-top: 1rem;
+}
+
+.login-mobile-otp-cell {
+  box-sizing: border-box;
+  flex: 1;
+  min-width: 0;
+  max-width: 48px;
+  height: 40px;
+  padding: 0;
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--el-text-color-primary);
+  text-align: center;
+  appearance: none;
+  outline: none;
+  background: var(--el-fill-color-blank);
+  border: 1px solid var(--el-border-color);
+  border-radius: 8px;
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+
+  &:focus {
+    border-color: var(--el-color-primary);
+    box-shadow: 0 0 0 1px var(--el-color-primary) inset;
+  }
+}
+
+.login-mobile-sms-btn {
+  border-radius: 8px;
+}
+
+html.dark {
+  .login-mobile-otp-cell {
+    background: rgb(255 255 255 / 6%);
+    border-color: rgb(255 255 255 / 14%);
+
+    &:focus {
+      border-color: var(--el-color-primary);
+    }
+  }
+}
+
+/* EP 全局规则：相邻 .el-button { margin-left: 12px }，纵向叠放时仍会命中，导致第二颗按钮横向错位 */
+.login-mobile-actions {
+  :deep(.el-button + .el-button) {
+    margin-left: 0 !important;
+  }
+
+  :deep(.el-button) {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+  }
+}
+</style>
diff --git a/frontend/new-web/src/views/module_system/auth/login/components/LoginQrPanel.vue b/frontend/new-web/src/views/module_system/auth/login/components/LoginQrPanel.vue
new file mode 100644
index 00000000..3398da65
--- /dev/null
+++ b/frontend/new-web/src/views/module_system/auth/login/components/LoginQrPanel.vue
@@ -0,0 +1,81 @@
+<!-- 扫码登录（无后端会话，演示二维码与交互） -->
+<template>
+  <div>
+    <div class="login-page-form login-qr-flow flex w-full min-w-0 flex-col items-center">
+      <div
+        class="login-qr-card flex w-full max-w-[280px] flex-col items-center rounded-2xl bg-white p-6 shadow-[0_8px_24px_rgb(0_0_0_/12%)] dark:shadow-[0_8px_28px_rgb(0_0_0_/45%)]"
+      >
+        <QrcodeVue
+          class="block"
+          :value="qrPayload"
+          :size="qrSize"
+          level="M"
+          render-as="svg"
+          :margin="0"
+          background="#ffffff"
+          foreground="#000000"
+        />
+      </div>
+
+      <p
+        class="login-qr-hint mt-4 max-w-[280px] text-center text-sm leading-relaxed text-[var(--el-text-color-secondary)]"
+      >
+        {{ $t("login.qrLoginHint") }}
+      </p>
+
+      <div class="login-mobile-actions mt-8 w-full min-w-0">
+        <ElButton
+          class="login-secondary-btn h-11 w-full min-w-0 !rounded-lg text-base font-medium"
+          plain
+          @click="$emit('back')"
+        >
+          {{ $t("login.backToAccountLogin") }}
+        </ElButton>
+      </div>
+    </div>
+
+    <LoginAuthLinkRow
+      :hint="$t('login.noAccount')"
+      :link-text="$t('login.register')"
+      @link="$emit('register')"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import QrcodeVue from "qrcode.vue";
+import LoginAuthLinkRow from "./LoginAuthLinkRow.vue";
+
+defineEmits<{ back: []; register: [] }>();
+
+/** 演示用载荷；接入后端后替换为会话 URL / ticket */
+const qrPayload = computed(() => {
+  if (typeof window === "undefined") return "https://example.com/login";
+  const { origin, pathname } = window.location;
+  return `${origin}${pathname}?qrLogin=demo`;
+});
+
+const qrSize = 220;
+</script>
+
+<style scoped lang="scss">
+@import "../style.css";
+
+.login-qr-flow {
+  margin-top: 1rem;
+}
+
+.login-qr-card {
+  box-sizing: border-box;
+}
+
+/* EP：相邻按钮横向间距；单列返回按钮无需处理 */
+.login-mobile-actions {
+  :deep(.el-button) {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+  }
+}
+</style>
diff --git a/frontend/new-web/src/views/module_system/auth/login/components/LoginRegisterPanel.vue b/frontend/new-web/src/views/module_system/auth/login/components/LoginRegisterPanel.vue
new file mode 100644
index 00000000..bf332fc8
--- /dev/null
+++ b/frontend/new-web/src/views/module_system/auth/login/components/LoginRegisterPanel.vue
@@ -0,0 +1,138 @@
+<!-- 注册表单 -->
+<template>
+  <div>
+    <ElForm
+      ref="formRef"
+      :model="registerForm"
+      :rules="registerRules"
+      :key="formKey"
+      class="login-page-form"
+      @keyup.enter="$emit('submit')"
+    >
+      <ElFormItem prop="username">
+        <ElInput
+          class="custom-height"
+          v-model.trim="registerForm.username"
+          clearable
+          :placeholder="$t('login.placeholder.username')"
+        >
+          <template #prefix>
+            <ElIcon><User /></ElIcon>
+          </template>
+        </ElInput>
+      </ElFormItem>
+      <ElTooltip :visible="isCapsLock" :content="$t('login.capsLock')" placement="right">
+        <ElFormItem prop="password">
+          <ElInput
+            class="custom-height"
+            v-model.trim="registerForm.password"
+            type="password"
+            autocomplete="off"
+            show-password
+            clearable
+            :placeholder="$t('login.placeholder.password')"
+            @keyup="checkCapsLock"
+            @keyup.enter="$emit('submit')"
+          >
+            <template #prefix>
+              <ElIcon><Lock /></ElIcon>
+            </template>
+          </ElInput>
+        </ElFormItem>
+      </ElTooltip>
+      <ElTooltip :visible="isCapsLock" :content="$t('login.capsLock')" placement="right">
+        <ElFormItem prop="confirmPassword">
+          <ElInput
+            class="custom-height"
+            v-model.trim="registerForm.confirmPassword"
+            type="password"
+            autocomplete="off"
+            show-password
+            clearable
+            :placeholder="$t('login.message.password.confirm')"
+            @keyup="checkCapsLock"
+            @keyup.enter="$emit('submit')"
+          >
+            <template #prefix>
+              <ElIcon><Lock /></ElIcon>
+            </template>
+          </ElInput>
+        </ElFormItem>
+      </ElTooltip>
+      <ElFormItem>
+        <div class="flex flex-wrap items-center gap-2">
+          <ElCheckbox v-model="registerAgreementReadModel">
+            {{ $t("login.agree") }}
+          </ElCheckbox>
+          <ElLink
+            type="primary"
+            :underline="false"
+            class="text-sm font-medium"
+            :href="userAgreementHref"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {{ $t("login.userAgreement") }}
+          </ElLink>
+        </div>
+      </ElFormItem>
+      <div class="mt-6">
+        <ElButton
+          class="h-11 w-full !rounded-lg text-base font-medium"
+          type="primary"
+          :loading="registerLoading"
+          v-ripple
+          @click="$emit('submit')"
+        >
+          {{ $t("login.register") }}
+        </ElButton>
+      </div>
+    </ElForm>
+
+    <LoginAuthLinkRow
+      :hint="$t('login.haveAccount')"
+      :link-text="$t('login.backLoginBtnText')"
+      @link="$emit('toLogin')"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Lock, User } from "@element-plus/icons-vue";
+import type { RegisterForm } from "@/api/module_system/user";
+import type { FormRules } from "element-plus";
+import LoginAuthLinkRow from "./LoginAuthLinkRow.vue";
+
+defineProps<{
+  registerForm: RegisterForm;
+  registerRules: FormRules<RegisterForm>;
+  formKey: number | string;
+  registerLoading: boolean;
+  userAgreementHref: string;
+}>();
+
+const registerAgreementReadModel = defineModel<boolean>("registerAgreementRead", {
+  required: true,
+});
+
+defineEmits<{ submit: []; toLogin: [] }>();
+
+const formRef = ref();
+const isCapsLock = ref(false);
+
+function checkCapsLock(event: KeyboardEvent) {
+  if (event instanceof KeyboardEvent) {
+    isCapsLock.value = event.getModifierState("CapsLock");
+  }
+}
+
+defineExpose({
+  validate: () => formRef.value?.validate?.(),
+  clearValidate: () => formRef.value?.clearValidate?.(),
+  validateField: (prop: string | string[]) => formRef.value?.validateField?.(prop),
+});
+</script>
+
+<style scoped>
+@import "../style.css";
+</style>
diff --git a/frontend/new-web/src/views/module_system/auth/login/components/LoginThirdPartySection.vue b/frontend/new-web/src/views/module_system/auth/login/components/LoginThirdPartySection.vue
new file mode 100644
index 00000000..b1ebc9e8
--- /dev/null
+++ b/frontend/new-web/src/views/module_system/auth/login/components/LoginThirdPartySection.vue
@@ -0,0 +1,109 @@
+<!-- 第三方 OAuth 登录（后端需配置各渠道 ClientId/Secret） -->
+<template>
+  <div class="third-party-login login-third-on-dark">
+    <div class="divider-container">
+      <div class="divider-line" />
+      <span class="divider-text">{{ $t("login.otherLoginMethods") }}</span>
+      <div class="divider-line" />
+    </div>
+    <div class="login-third-party-icons flex w-full items-center justify-center gap-x-3 sm:gap-x-4">
+      <ElTooltip
+        v-for="item in oauthItems"
+        :key="item.provider"
+        :content="item.tip"
+        placement="top"
+      >
+        <button
+          type="button"
+          class="oauth-social-btn flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-full border-0 bg-transparent transition-colors duration-200 outline-none"
+          :aria-label="item.tip"
+          @click="$emit('oauth', item.provider)"
+        >
+          <ArtSvgIcon :icon="item.icon" :class="item.iconClass" />
+        </button>
+      </ElTooltip>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { OAuthProvider } from "@/api/module_system/auth";
+
+defineEmits<{ oauth: [provider: OAuthProvider] }>();
+
+const { t } = useI18n();
+
+const oauthItems = computed(() => [
+  {
+    provider: "wechat" as const,
+    tip: t("login.oauthTooltip.wechat"),
+    icon: "simple-icons:wechat",
+    iconClass: "size-[22px] text-[#07c160]",
+  },
+  {
+    provider: "qq" as const,
+    tip: t("login.oauthTooltip.qq"),
+    icon: "simple-icons:tencentqq",
+    iconClass: "size-[22px] text-[#12b7f5]",
+  },
+  {
+    provider: "github" as const,
+    tip: t("login.oauthTooltip.github"),
+    icon: "mdi:github",
+    iconClass: "size-[22px] text-g-800 dark:text-white/85",
+  },
+  {
+    provider: "gitee" as const,
+    tip: t("login.oauthTooltip.gitee"),
+    icon: "simple-icons:gitee",
+    iconClass: "size-[22px] text-[#c71d23]",
+  },
+]);
+</script>
+
+<style scoped lang="scss">
+.login-third-on-dark {
+  margin-top: 1rem;
+
+  .divider-container {
+    display: flex;
+    align-items: center;
+    margin-bottom: 0.75rem;
+  }
+
+  .divider-line {
+    flex: 1;
+    height: 1px;
+    background: linear-gradient(to right, transparent, var(--el-border-color-lighter), transparent);
+  }
+
+  .divider-text {
+    padding: 0 12px;
+    font-size: 12px;
+    color: var(--el-text-color-secondary);
+    white-space: nowrap;
+  }
+}
+
+html.dark .login-third-on-dark {
+  .divider-line {
+    background: linear-gradient(to right, transparent, rgb(255 255 255 / 15%), transparent);
+  }
+
+  .divider-text {
+    color: rgb(255 255 255 / 38%);
+  }
+}
+
+.oauth-social-btn:hover {
+  background-color: var(--el-fill-color-light);
+}
+
+.oauth-social-btn:focus-visible {
+  box-shadow: 0 0 0 2px var(--el-color-primary-light-7);
+}
+
+html.dark .oauth-social-btn:hover {
+  background-color: rgb(255 255 255 / 10%);
+}
+</style>
diff --git a/frontend/new-web/src/views/module_system/auth/login/index.vue b/frontend/new-web/src/views/module_system/auth/login/index.vue
new file mode 100755
index 00000000..bdb43d2a
--- /dev/null
+++ b/frontend/new-web/src/views/module_system/auth/login/index.vue
@@ -0,0 +1,799 @@
+<!-- 登录页：顶栏固定；仅插画列与表单区随布局切换 -->
+<template>
+  <div class="login-page-root flex h-screen w-full flex-col overflow-hidden">
+    <LoginCenterBackdrop v-if="panelAlign === 'center'" viewport-fixed />
+    <AuthTopBar v-model:panel-align="panelAlign" />
+
+    <div
+      class="login-auth-split relative z-[1] flex min-h-0 flex-1 overflow-hidden"
+      :class="`login-auth-split--${panelAlign}`"
+    >
+      <div
+        v-if="panelAlign !== 'center'"
+        class="login-auth-split__col login-auth-split__col--illustration"
+      >
+        <LoginLeftView hide-top-branding />
+      </div>
+
+      <div
+        class="login-auth-split__col login-auth-split__col--form login-page-panel relative flex min-h-0 min-w-0 flex-col"
+        :class="panelAlign === 'center' ? 'bg-transparent' : 'bg-[var(--el-bg-color-page)]'"
+      >
+        <div
+          class="login-page-panel__main relative z-[1] flex min-h-0 flex-1 flex-col overflow-hidden px-5 pb-2 pt-14 md:px-10 md:pt-[4.5rem]"
+        >
+          <div
+            class="login-page-panel__scroll min-h-0 flex-1 overflow-y-auto overflow-x-hidden pb-6 [-webkit-overflow-scrolling:touch]"
+            :class="panelAlign === 'center' && 'login-page-panel__scroll--centered'"
+          >
+            <div
+              class="login-panel-align-row flex w-full items-center justify-center max-sm:min-h-0"
+              :class="
+                panelAlign === 'center'
+                  ? 'min-h-0 flex-1 py-4'
+                  : 'min-h-[min(720px,calc(100vh-13rem))]'
+              "
+            >
+              <div class="auth-right-wrap">
+                <div class="form">
+                  <div class="form-intro">
+                    <h3 class="title">{{ panelTitle }}</h3>
+                    <p class="sub-title">{{ panelSubTitle }}</p>
+                  </div>
+
+                  <template v-if="authPanel === 'login'">
+                    <template v-if="loginFlowMode === 'account'">
+                      <LoginAccountForm
+                        ref="accountFormRef"
+                        v-model:is-passing="isPassing"
+                        v-model:is-click-pass="isClickPass"
+                        :login-form="loginForm"
+                        :rules="rules"
+                        :captcha-state="captchaState"
+                        :code-loading="codeLoading"
+                        :demo-account-key="demoAccountKey"
+                        :accounts="accounts"
+                        :form-key="formKey"
+                        :is-dark="isDark"
+                        :drag-verify-text-color="dragVerifyTextColor"
+                        :loading="loading"
+                        @submit="handleSubmit"
+                        @setup-account="setupAccount"
+                        @get-captcha="getCaptcha"
+                        @open-mobile="openMobileLogin"
+                        @open-qr="openQrLogin"
+                        @forget="setAuthPanel('forget')"
+                        @register="setAuthPanel('register')"
+                        @oauth="handleOAuthLogin"
+                      />
+                    </template>
+
+                    <LoginMobilePanel
+                      v-else-if="loginFlowMode === 'mobile'"
+                      @back="backToAccountLogin"
+                      @register="setAuthPanel('register')"
+                    />
+
+                    <LoginQrPanel
+                      v-else-if="loginFlowMode === 'qr'"
+                      @back="backToAccountLogin"
+                      @register="setAuthPanel('register')"
+                    />
+                  </template>
+
+                  <LoginRegisterPanel
+                    v-else-if="authPanel === 'register'"
+                    ref="registerPanelRef"
+                    v-model:register-agreement-read="registerAgreementRead"
+                    :register-form="registerForm"
+                    :register-rules="registerRules"
+                    :form-key="formKey"
+                    :register-loading="registerLoading"
+                    :user-agreement-href="userAgreementHref"
+                    @submit="submitRegister"
+                    @to-login="setAuthPanel('login')"
+                  />
+
+                  <LoginForgetPanel
+                    v-else
+                    ref="forgetPanelRef"
+                    :forget-form="forgetForm"
+                    :forget-rules="forgetRules"
+                    :form-key="formKey"
+                    :forget-loading="forgetLoading"
+                    @submit="submitForget"
+                    @to-login="setAuthPanel('login')"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <footer
+            class="login-page-footer login-page-footer--pinned flex-shrink-0 pb-[max(0.75rem,env(safe-area-inset-bottom))] pt-3"
+            :class="panelAlign === 'center' && 'login-page-footer--floating-layout'"
+          >
+            <div class="login-footer-text text-sm">
+              <a
+                :href="configStore.configData?.sys_git_code?.config_value || '#'"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="login-page-footer__link"
+              >
+                {{ configStore.configData?.sys_web_copyright?.config_value || "" }}
+              </a>
+              <span class="login-page-footer__sep">|</span>
+              <a
+                :href="configStore.configData?.sys_help_doc?.config_value || '#'"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="login-page-footer__link"
+              >
+                帮助
+              </a>
+              <span class="login-page-footer__sep">|</span>
+              <a
+                :href="configStore.configData?.sys_web_privacy?.config_value || '#'"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="login-page-footer__link"
+              >
+                隐私
+              </a>
+              <span class="login-page-footer__sep">|</span>
+              <a
+                :href="configStore.configData?.sys_web_clause?.config_value || '#'"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="login-page-footer__link"
+              >
+                条款
+              </a>
+              <span
+                v-if="configStore.configData?.sys_keep_record?.config_value"
+                class="login-page-footer__record"
+              >
+                {{ configStore.configData.sys_keep_record.config_value }}
+              </span>
+            </div>
+          </footer>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { LocationQuery, RouteLocationRaw } from "vue-router";
+import AuthAPI, {
+  type CaptchaInfo,
+  type LoginFormData,
+  type OAuthProvider,
+} from "@/api/module_system/auth";
+import UserAPI, { type ForgetPasswordForm, type RegisterForm } from "@/api/module_system/user";
+import { useConfigStore } from "@/store/modules/config.store";
+import { useAppStore } from "@/store/modules/app.store";
+import { useSettingsStore } from "@/store/modules/setting.store";
+import { useUserStore } from "@/store/modules/user.store";
+import { Auth } from "@/utils/auth";
+import { HttpError } from "@/utils/http/error";
+import { startOAuthLogin } from "@/utils/oauth/startOAuthLogin";
+import { ElMessage, ElNotification, type FormRules } from "element-plus";
+import LoginAccountForm from "./components/LoginAccountForm.vue";
+import LoginForgetPanel from "./components/LoginForgetPanel.vue";
+import LoginMobilePanel from "./components/LoginMobilePanel.vue";
+import LoginQrPanel from "./components/LoginQrPanel.vue";
+import LoginRegisterPanel from "./components/LoginRegisterPanel.vue";
+import type { Account, AccountKey } from "./types";
+import { useLoginPanelAlign } from "../composables/useLoginPanelAlign";
+
+defineOptions({ name: "Login" });
+
+type AuthPanel = "login" | "register" | "forget";
+
+/** 登录区内：账号密码 ↔ 手机号 ↔ 扫码（扫码 / 手机号为演示交互） */
+type LoginFlowMode = "account" | "mobile" | "qr";
+
+const configStore = useConfigStore();
+const settingStore = useSettingsStore();
+const appStore = useAppStore();
+const { isDark } = storeToRefs(settingStore);
+const { t, locale } = useI18n();
+
+const { panelAlign } = useLoginPanelAlign();
+
+const authPanel = ref<AuthPanel>("login");
+const loginFlowMode = ref<LoginFlowMode>("account");
+
+const panelTitle = computed(() => {
+  if (authPanel.value === "register") return t("login.reg");
+  if (authPanel.value === "forget") return t("login.resetPassword");
+  if (
+    authPanel.value === "login" &&
+    (loginFlowMode.value === "mobile" || loginFlowMode.value === "qr")
+  ) {
+    return t("login.qrLoginTitle");
+  }
+  return t("login.title");
+});
+
+const panelSubTitle = computed(() => {
+  if (authPanel.value === "register") return t("register.subTitle");
+  if (authPanel.value === "forget") return t("forgetPassword.subTitle");
+  if (authPanel.value === "login" && loginFlowMode.value === "mobile") {
+    return t("login.mobileLoginSubTitle");
+  }
+  if (authPanel.value === "login" && loginFlowMode.value === "qr") {
+    return t("login.qrLoginSubTitle");
+  }
+  return t("login.subTitle");
+});
+
+const userAgreementHref = computed(
+  () => configStore.configData?.sys_web_clause?.config_value || "#"
+);
+
+function setAuthPanel(panel: AuthPanel) {
+  authPanel.value = panel;
+  if (panel !== "login") {
+    loginFlowMode.value = "account";
+  }
+  nextTick(() => {
+    accountFormRef.value?.clearValidate?.();
+    registerPanelRef.value?.clearValidate?.();
+    forgetPanelRef.value?.clearValidate?.();
+  });
+}
+
+function openMobileLogin() {
+  loginFlowMode.value = "mobile";
+}
+
+function openQrLogin() {
+  loginFlowMode.value = "qr";
+}
+
+function backToAccountLogin() {
+  loginFlowMode.value = "account";
+  nextTick(() => {
+    getCaptcha();
+    loginForm.captcha = "";
+    accountFormRef.value?.resetDragVerify?.();
+    isPassing.value = false;
+    isClickPass.value = false;
+  });
+}
+
+function handleOAuthLogin(provider: OAuthProvider) {
+  startOAuthLogin(provider);
+}
+
+async function tryConsumeOAuthCallback() {
+  const q = route.query;
+  const oauthError = q.oauth_error as string | undefined;
+  const access = q.access_token as string | undefined;
+  const refresh = q.refresh_token as string | undefined;
+
+  if (!oauthError && !(access && refresh)) return;
+
+  const rest: Record<string, unknown> = { ...q };
+  delete rest.oauth_error;
+  delete rest.access_token;
+  delete rest.refresh_token;
+  delete rest.token_type;
+
+  if (oauthError) {
+    ElMessage.error(decodeURIComponent(oauthError));
+    await router.replace({ path: route.path, query: rest as LocationQuery });
+    return;
+  }
+
+  if (access && refresh) {
+    try {
+      Auth.setTokens(access, refresh, true);
+      userStore.setToken(access, refresh);
+      userStore.setLoginStatus(true);
+      await userStore.getUserInfo();
+      ElNotification({
+        title: t("login.oauthNoticeTitle"),
+        message: t("login.oauthLoginSuccess"),
+        type: "success",
+      });
+      await router.replace(resolveRedirectTarget(rest as LocationQuery));
+      if (settingStore.showGuide) {
+        appStore.showGuide(true);
+      }
+    } catch (error) {
+      console.error("[Login] OAuth callback:", error);
+      ElMessage.error(t("login.oauthLoginFailed"));
+      await router.replace({ path: route.path, query: rest as LocationQuery });
+    }
+  }
+}
+
+const dragVerifyTextColor = computed(() =>
+  isDark.value ? "rgba(255, 255, 255, 0.45)" : "var(--art-gray-700)"
+);
+const formKey = ref(0);
+
+watch(locale, () => {
+  formKey.value++;
+});
+
+watch(authPanel, (panel) => {
+  if (panel !== "login") return;
+  if (loginFlowMode.value !== "account") return;
+  getCaptcha();
+  loginForm.captcha = "";
+  accountFormRef.value?.resetDragVerify?.();
+  isPassing.value = false;
+  isClickPass.value = false;
+});
+
+const accounts = computed<Account[]>(() => [
+  {
+    key: "super",
+    label: t("login.roles.super"),
+    username: "super",
+    password: "123456",
+    roles: ["R_SUPER"],
+  },
+  {
+    key: "admin",
+    label: t("login.roles.admin"),
+    username: "admin",
+    password: "123456",
+    roles: ["R_ADMIN"],
+  },
+  {
+    key: "user",
+    label: t("login.roles.user"),
+    username: "user",
+    password: "123456",
+    roles: ["R_USER"],
+  },
+]);
+
+const demoAccountKey = ref<AccountKey>("super");
+const userStore = useUserStore();
+const router = useRouter();
+const route = useRoute();
+const isPassing = ref(false);
+const isClickPass = ref(false);
+
+const accountFormRef = ref<InstanceType<typeof LoginAccountForm> | null>(null);
+const registerPanelRef = ref<InstanceType<typeof LoginRegisterPanel> | null>(null);
+const forgetPanelRef = ref<InstanceType<typeof LoginForgetPanel> | null>(null);
+
+const loading = ref(false);
+const registerLoading = ref(false);
+const forgetLoading = ref(false);
+const codeLoading = ref(false);
+
+const registerAgreementRead = ref(false);
+
+const registerForm = reactive<RegisterForm>({
+  username: "",
+  password: "",
+  confirmPassword: "",
+});
+
+const forgetForm = reactive<ForgetPasswordForm>({
+  username: "",
+  new_password: "",
+  confirmPassword: "",
+});
+
+const validateRegisterPassword = (_rule: unknown, value: string, callback: (e?: Error) => void) => {
+  if (!value) {
+    callback(new Error(t("login.message.password.required")));
+    return;
+  }
+  if (registerForm.confirmPassword) {
+    registerPanelRef.value?.validateField?.("confirmPassword");
+  }
+  callback();
+};
+
+const validateRegisterConfirm = (_rule: unknown, value: string, callback: (e?: Error) => void) => {
+  if (!value) {
+    callback(new Error(t("login.message.password.required")));
+    return;
+  }
+  if (value !== registerForm.password) {
+    callback(new Error(t("login.message.password.inconformity")));
+    return;
+  }
+  callback();
+};
+
+const registerRules = computed<FormRules<RegisterForm>>(() => ({
+  username: [{ required: true, message: t("login.message.username.required"), trigger: "blur" }],
+  password: [
+    { required: true, validator: validateRegisterPassword, trigger: "blur" },
+    { min: 6, message: t("login.message.password.min"), trigger: "blur" },
+  ],
+  confirmPassword: [
+    { required: true, message: t("login.message.password.required"), trigger: "blur" },
+    { min: 6, message: t("login.message.password.min"), trigger: "blur" },
+    { validator: validateRegisterConfirm, trigger: "blur" },
+  ],
+}));
+
+const validateForgetConfirm = (_rule: unknown, value: string, callback: (e?: Error) => void) => {
+  if (!value) {
+    callback(new Error(t("login.message.password.required")));
+    return;
+  }
+  if (value !== forgetForm.new_password) {
+    callback(new Error(t("login.message.password.inconformity")));
+    return;
+  }
+  callback();
+};
+
+const forgetRules = computed<FormRules<ForgetPasswordForm>>(() => ({
+  username: [{ required: true, message: t("login.message.username.required"), trigger: "blur" }],
+  new_password: [
+    { required: true, message: t("login.message.password.required"), trigger: "blur" },
+    { min: 6, message: t("login.message.password.min"), trigger: "blur" },
+  ],
+  confirmPassword: [
+    { required: true, message: t("login.message.password.required"), trigger: "blur" },
+    { min: 6, message: t("login.message.password.min"), trigger: "blur" },
+    { validator: validateForgetConfirm, trigger: "blur" },
+  ],
+}));
+
+const loginForm = reactive<LoginFormData>({
+  username: "",
+  password: "",
+  captcha: "",
+  captcha_key: "",
+  remember: true,
+  login_type: "PC端",
+});
+
+const captchaState = reactive<CaptchaInfo>({
+  enable: false,
+  key: "",
+  img_base: "",
+});
+
+const rules = computed<FormRules>(() => {
+  const base: FormRules = {
+    username: [
+      {
+        required: true,
+        trigger: "blur",
+        message: t("login.message.username.required"),
+      },
+    ],
+    password: [
+      {
+        required: true,
+        trigger: "blur",
+        message: t("login.message.password.required"),
+      },
+      {
+        min: 6,
+        message: t("login.message.password.min"),
+        trigger: "blur",
+      },
+    ],
+  };
+  if (captchaState.enable) {
+    base.captcha = [
+      {
+        required: true,
+        trigger: "blur",
+        message: t("login.message.captchaCode.required"),
+      },
+    ];
+  }
+  return base;
+});
+
+function setupAccount(key: AccountKey) {
+  const selected = accounts.value.find((a: Account) => a.key === key);
+  demoAccountKey.value = key;
+  loginForm.username = selected?.username ?? "";
+  loginForm.password = selected?.password ?? "";
+}
+
+async function getCaptcha() {
+  try {
+    codeLoading.value = true;
+    const response = await AuthAPI.getCaptcha();
+    const data = response.data.data;
+    loginForm.captcha_key = data.key;
+    captchaState.img_base = data.img_base;
+    captchaState.enable = data.enable;
+  } catch {
+    captchaState.enable = false;
+    loginForm.captcha = "";
+    loginForm.captcha_key = "";
+  } finally {
+    codeLoading.value = false;
+  }
+}
+
+function resolveRedirectTarget(query: LocationQuery): RouteLocationRaw {
+  const defaultPath = "/";
+  const rawRedirect = (query.redirect as string) || defaultPath;
+  try {
+    const resolved = router.resolve(rawRedirect);
+    return {
+      path: resolved.path,
+      query: resolved.query,
+    };
+  } catch {
+    return { path: defaultPath };
+  }
+}
+
+let notificationInstance: ReturnType<typeof ElNotification> | null = null;
+
+const showVoteNotification = () => {
+  notificationInstance = ElNotification({
+    title: "⭐ FastapiAdmin 完全开源 · 期待您的 Star 支持 🙏",
+    message: `项目持续迭代中，若对您有所帮助，欢迎点亮 Star 支持！
+    <br/><a href="https://github.com/fastapiadmin/FastapiAdmin" target="_blank" style="color: var(--el-color-primary); text-decoration: none; font-weight: 500;">Github仓库 →</a>
+    <br/><a href="https://gitee.com/fastapiadmin/FastapiAdmin" target="_blank" style="color: var(--el-color-warning); text-decoration: none; font-weight: 500;">Gitee仓库 →</a>`,
+    type: "success",
+    position: "bottom-left",
+    duration: 0,
+    dangerouslyUseHTMLString: true,
+  });
+};
+
+onMounted(async () => {
+  setupAccount("super");
+  await configStore.getConfig(true);
+  await tryConsumeOAuthCallback();
+  getCaptcha();
+  setTimeout(showVoteNotification, 500);
+});
+
+onActivated(() => {
+  if (authPanel.value !== "login" || loginFlowMode.value !== "account") return;
+  getCaptcha();
+  loginForm.captcha = "";
+});
+
+onBeforeUnmount(() => {
+  notificationInstance?.close();
+  notificationInstance = null;
+});
+
+watch(
+  () => route.fullPath,
+  () => {
+    if (authPanel.value !== "login" || loginFlowMode.value !== "account") return;
+    getCaptcha();
+    loginForm.captcha = "";
+  }
+);
+
+const handleSubmit = async () => {
+  if (!accountFormRef.value) return;
+
+  try {
+    const valid = await accountFormRef.value.validate?.();
+    if (!valid) return;
+
+    if (!isPassing.value) {
+      isClickPass.value = true;
+      return;
+    }
+
+    loading.value = true;
+
+    await userStore.login(loginForm);
+
+    await router.replace(resolveRedirectTarget(route.query));
+
+    if (settingStore.showGuide) {
+      appStore.showGuide(true);
+    }
+  } catch (error) {
+    await getCaptcha();
+    if (!(error instanceof HttpError)) {
+      console.error("[Login] Unexpected error:", error);
+      ElNotification({
+        title: "提示",
+        message: error instanceof Error ? error.message : String(error),
+        type: "error",
+      });
+    }
+  } finally {
+    loading.value = false;
+    accountFormRef.value?.resetDragVerify?.();
+  }
+};
+
+async function submitRegister() {
+  if (!registerAgreementRead.value) {
+    ElMessage.warning(t("login.message.agree.required"));
+    return;
+  }
+  if (!registerPanelRef.value) return;
+  try {
+    await registerPanelRef.value.validate?.();
+    registerLoading.value = true;
+    await UserAPI.registerUser(registerForm);
+    loginForm.username = registerForm.username;
+    loginForm.password = registerForm.password;
+    registerForm.username = "";
+    registerForm.password = "";
+    registerForm.confirmPassword = "";
+    registerAgreementRead.value = false;
+    setAuthPanel("login");
+  } catch (error) {
+    console.error("[Login] register:", error);
+  } finally {
+    registerLoading.value = false;
+  }
+}
+
+async function submitForget() {
+  if (!forgetPanelRef.value) return;
+  try {
+    await forgetPanelRef.value.validate?.();
+    forgetLoading.value = true;
+    await UserAPI.forgetPassword(forgetForm);
+    loginForm.username = forgetForm.username;
+    loginForm.password = forgetForm.new_password;
+    forgetForm.username = "";
+    forgetForm.new_password = "";
+    forgetForm.confirmPassword = "";
+    setAuthPanel("login");
+  } catch (error) {
+    console.error("[Login] forget password:", error);
+  } finally {
+    forgetLoading.value = false;
+  }
+}
+</script>
+
+<style scoped>
+@import "./style.css";
+</style>
+
+<style lang="scss" scoped>
+.login-page-panel {
+  :deep(.btn) {
+    border-radius: 8px;
+  }
+}
+
+html.dark .login-page-panel {
+  :deep(.text-g-800) {
+    color: rgb(255 255 255 / 78%) !important;
+  }
+}
+
+/* 副标题与表单块间距（login-page-form 在子组件内，须 :deep） */
+:deep(.login-page-form) {
+  margin-top: 1rem;
+}
+
+:deep(.login-page-form .el-form-item) {
+  margin-bottom: 1.1rem;
+}
+
+:deep(.el-select__wrapper) {
+  min-height: 42px !important;
+}
+
+/* 仅账号登录底部「手机号 / 扫码」双列按钮需要 42px；手机号登录页的返回钮与主按钮同为 h-11，勿全局压高度 */
+:deep(.login-secondary-actions .login-secondary-btn) {
+  height: 42px;
+  border-radius: 8px;
+}
+
+html.dark {
+  :deep(.login-page-form .el-input__wrapper) {
+    background-color: rgb(255 255 255 / 6%) !important;
+    box-shadow: 0 0 0 1px rgb(255 255 255 / 10%) inset !important;
+  }
+
+  :deep(.login-page-form .el-input__inner) {
+    color: rgb(255 255 255 / 92%);
+  }
+
+  :deep(.login-page-form .el-input__inner::placeholder) {
+    color: rgb(255 255 255 / 35%);
+  }
+
+  :deep(.login-page-form .el-select .el-select__wrapper) {
+    background-color: rgb(255 255 255 / 6%) !important;
+    box-shadow: 0 0 0 1px rgb(255 255 255 / 10%) inset !important;
+  }
+
+  :deep(.login-page-form .el-select__placeholder) {
+    color: rgb(255 255 255 / 40%);
+  }
+
+  :deep(.login-page-form .el-select__selected-item) {
+    color: rgb(255 255 255 / 92%);
+  }
+
+  :deep(.login-remember .el-checkbox__label) {
+    color: rgb(255 255 255 / 65%);
+  }
+
+  :deep(.login-secondary-btn) {
+    color: rgb(255 255 255 / 85%) !important;
+    background: transparent !important;
+    border-color: rgb(255 255 255 / 22%) !important;
+    border-radius: 8px;
+
+    &:hover {
+      color: var(--el-color-primary) !important;
+      background: var(--el-color-primary-light-9) !important;
+      border-color: var(--el-color-primary) !important;
+    }
+  }
+
+  :deep(.login-secondary-actions .login-secondary-btn) {
+    height: 42px;
+  }
+}
+
+.login-page-footer {
+  margin-top: 0;
+  text-align: center;
+  border-top: 1px solid var(--el-border-color-lighter);
+
+  .login-footer-text {
+    line-height: 1.65;
+    color: var(--el-text-color-secondary) !important;
+  }
+
+  .login-page-footer__link {
+    color: var(--el-text-color-regular);
+    text-decoration: none;
+    transition: color 0.2s ease;
+
+    &:hover {
+      color: var(--el-color-primary);
+    }
+  }
+
+  .login-page-footer__sep {
+    margin: 0 0.35rem;
+    color: var(--el-border-color);
+  }
+
+  .login-page-footer__record {
+    display: inline-block;
+    margin-left: 0.35rem;
+    color: var(--el-text-color-placeholder);
+  }
+}
+
+html.dark .login-page-footer {
+  border-top-color: rgb(255 255 255 / 8%);
+
+  .login-footer-text {
+    color: rgb(255 255 255 / 42%) !important;
+  }
+
+  .login-page-footer__link {
+    color: rgb(255 255 255 / 48%);
+
+    &:hover {
+      color: var(--el-color-primary);
+    }
+  }
+
+  .login-page-footer__sep {
+    color: rgb(255 255 255 / 25%);
+  }
+
+  .login-page-footer__record {
+    color: rgb(255 255 255 / 35%);
+  }
+}
+</style>
diff --git a/frontend/new-web/src/views/module_system/auth/login/style.css b/frontend/new-web/src/views/module_system/auth/login/style.css
new file mode 100644
index 00000000..49ecd1e0
--- /dev/null
+++ b/frontend/new-web/src/views/module_system/auth/login/style.css
@@ -0,0 +1,189 @@
+@reference '@styles/core/tailwind.css';
+
+/**
+ * 登录根布局
+ * - 顶栏 fixed 透明叠在页面上（不占一条实体顶区）；仅插画列 / 表单区随布局切换
+ * - left / right：插画列与表单列横向排列（约 65% / 35%）
+ * - center：全宽 + 视口级背景；登录卡居中、阴影高亮
+ */
+.login-auth-split {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+}
+
+.login-auth-split__col--illustration {
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: 0;
+}
+
+.login-auth-split__col--form {
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: 0;
+}
+
+/* 横向：插画 ~65%，表单列占剩余 */
+.login-auth-split--left,
+.login-auth-split--right {
+  flex-direction: row;
+}
+
+.login-auth-split--left .login-auth-split__col--illustration,
+.login-auth-split--right .login-auth-split__col--illustration {
+  flex: 0 0 65%;
+}
+
+.login-auth-split--left .login-auth-split__col--form,
+.login-auth-split--right .login-auth-split__col--form {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.login-auth-split--left {
+  flex-direction: row-reverse;
+}
+
+@media only screen and (width <= 1600px) {
+  .login-auth-split--left .login-auth-split__col--illustration,
+  .login-auth-split--right .login-auth-split__col--illustration {
+    flex: 0 0 60%;
+  }
+}
+
+/* 居中模式：仅一列表单壳占满屏宽 */
+.login-auth-split--center {
+  flex-direction: column;
+}
+
+.login-auth-split--center .login-auth-split__col--form {
+  flex: 1 1 auto;
+  width: 100%;
+  min-height: 0;
+  background-color: transparent;
+}
+
+/* 顶栏与页脚之间的区域：纵向居中承载登录卡 */
+.login-auth-split--center .login-page-panel__scroll.login-page-panel__scroll--centered {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 0;
+  padding-bottom: 0;
+
+  /* 盖过 Tailwind overflow-y-auto：仅卡片内滚动，外层不出滚动条 */
+  overflow: hidden;
+}
+
+.login-page-panel__scroll--centered .login-panel-align-row {
+  flex: 0 1 auto;
+  justify-content: center;
+  width: 100%;
+  min-height: 0;
+  max-height: 100%;
+}
+
+/* 悬浮卡片：居中模式尺寸与原先一致（520 宽、720/视口上限），无边框 + 主色高亮阴影 */
+.login-auth-split--center .auth-right-wrap {
+  width: min(520px, calc(100vw - 2rem)) !important;
+  max-width: min(520px, calc(100vw - 2rem));
+  height: auto;
+  max-height: calc(100dvh - 6.5rem);
+  padding: 1.75rem 2rem 2rem;
+  overflow: hidden auto;
+  background-color: var(--el-bg-color);
+  border: none;
+  border-radius: 16px;
+  box-shadow:
+    0 6px 20px rgb(15 23 42 / 9%),
+    0 14px 36px rgb(15 23 42 / 10%),
+    0 0 18px color-mix(in srgb, var(--el-color-primary) 16%, transparent),
+    0 0 32px color-mix(in srgb, var(--el-color-primary) 7%, transparent);
+}
+
+.login-auth-split--center .auth-right-wrap .form {
+  height: auto;
+  min-height: 0;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+html.dark .login-auth-split--center .auth-right-wrap {
+  border: none;
+  box-shadow:
+    0 8px 28px rgb(0 0 0 / 42%),
+    0 16px 44px rgb(0 0 0 / 46%),
+    0 0 22px color-mix(in srgb, var(--el-color-primary) 20%, transparent),
+    0 0 36px color-mix(in srgb, var(--el-color-primary) 9%, transparent);
+}
+
+/* 居中模式下页脚弱化，减少「分区后台」感 */
+.login-page-footer--floating-layout {
+  border-top-color: color-mix(in srgb, var(--el-border-color-lighter) 55%, transparent);
+}
+
+html.dark .login-page-footer--floating-layout {
+  border-top-color: rgb(255 255 255 / 8%);
+}
+
+@media only screen and (width <= 1180px) {
+  .login-auth-split {
+    flex-direction: column !important;
+  }
+
+  .login-auth-split__col--illustration {
+    flex: 0 0 auto !important;
+    width: 100%;
+  }
+
+  .login-auth-split__col--form {
+    flex: 1 1 auto !important;
+    width: 100%;
+    min-height: 0;
+  }
+
+  /* 窄屏横排切竖排：恢复插画；居中模式本身无插画，不受影响 */
+  .login-auth-split--center .auth-right-wrap {
+    width: min(520px, calc(100vw - 1.5rem)) !important;
+    max-width: min(520px, calc(100vw - 1.5rem));
+    max-height: calc(100dvh - 6rem);
+  }
+}
+
+/* 授权页表单区域（左右分栏时） */
+.auth-right-wrap {
+  @apply relative w-[440px] shrink-0 h-[720px] py-[5px] overflow-hidden
+    max-sm:px-7 max-sm:w-full max-sm:h-auto max-sm:max-h-[calc(100vh-10rem)]
+    animate-[slideInRight_0.6s_cubic-bezier(0.25,0.46,0.45,0.94)_forwards]
+    max-md:animate-none;
+
+  .form {
+    @apply h-full py-[40px];
+  }
+
+  .title {
+    @apply text-g-900 text-4xl font-semibold max-md:text-3xl max-sm:pt-10;
+  }
+
+  .sub-title {
+    @apply mt-[10px] text-g-600 text-sm;
+  }
+
+  .custom-height {
+    @apply !h-[40px];
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(30px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
diff --git a/frontend/new-web/src/views/module_system/auth/login/types.ts b/frontend/new-web/src/views/module_system/auth/login/types.ts
new file mode 100644
index 00000000..0708c840
--- /dev/null
+++ b/frontend/new-web/src/views/module_system/auth/login/types.ts
@@ -0,0 +1,9 @@
+export type AccountKey = "super" | "admin" | "user";
+
+export interface Account {
+  key: AccountKey;
+  label: string;
+  username: string;
+  password: string;
+  roles: string[];
+}
diff --git a/frontend/new-web/src/views/module_system/dept/index.vue b/frontend/new-web/src/views/module_system/dept/index.vue
new file mode 100644
index 00000000..7805cf27
--- /dev/null
+++ b/frontend/new-web/src/views/module_system/dept/index.vue
@@ -0,0 +1,521 @@
+<!-- 部门配置 -->
+<template>
+  <div class="app-container">
+    <PageSearch
+      ref="searchRef"
+      :search-config="searchConfig"
+      @query-click="handleQueryClick"
+      @reset-click="handleResetClick"
+    />
+
+    <PageContent ref="contentRef" :content-config="contentConfig">
+      <template #toolbar="{ toolbarRight, onToolbar, removeIds, cols }">
+        <CrudToolbarLeft
+          :remove-ids="removeIds"
+          :perm-create="['module_system:dept:create']"
+          :perm-delete="['module_system:dept:delete']"
+          :perm-patch="['module_system:dept:patch']"
+          @add="handleOpenDialog('create')"
+          @delete="onToolbar('delete')"
+          @more="handleMoreClick"
+        />
+        <div class="data-table__toolbar--right">
+          <CrudToolbarRight :buttons="toolbarRight" :cols="cols" :on-toolbar="onToolbar" />
+        </div>
+      </template>
+
+      <template #table="{ data, loading, tableRef, onSelectionChange }">
+        <div class="data-table__content">
+          <el-table
+            :ref="tableRef as any"
+            v-loading="loading"
+            row-key="id"
+            :data="data"
+            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+            height="100%"
+            border
+            @selection-change="onSelectionChange"
+          >
+            <template #empty>
+              <el-empty :image-size="80" description="暂无数据" />
+            </template>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'selection')?.show"
+              type="selection"
+              min-width="55"
+              align="center"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'index')?.show"
+              type="index"
+              fixed
+              label="序号"
+              min-width="60"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'name')?.show"
+              key="name"
+              label="部门名称"
+              prop="name"
+              min-width="120"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'code')?.show"
+              key="code"
+              label="部门编码"
+              prop="code"
+              min-width="120"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'status')?.show"
+              key="status"
+              label="状态"
+              prop="status"
+              min-width="60"
+            >
+              <template #default="scope">
+                <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">
+                  {{ scope.row.status ? "启用" : "停用" }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'order')?.show"
+              key="order"
+              label="排序"
+              prop="order"
+              min-width="60"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'description')?.show"
+              key="description"
+              label="描述"
+              prop="description"
+              min-width="100"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'created_time')?.show"
+              key="created_time"
+              label="创建时间"
+              prop="created_time"
+              min-width="120"
+              sortable
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'updated_time')?.show"
+              key="updated_time"
+              label="更新时间"
+              prop="updated_time"
+              min-width="120"
+              sortable
+            />
+
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'operation')?.show"
+              fixed="right"
+              label="操作"
+              align="center"
+              min-width="200"
+            >
+              <template #default="scope">
+                <el-button
+                  v-hasPerm="['module_system:dept:create']"
+                  type="success"
+                  size="small"
+                  link
+                  icon="plus"
+                  @click="handleOpenDialog('create', undefined, scope.row.id)"
+                >
+                  新增
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_system:dept:detail']"
+                  type="info"
+                  size="small"
+                  link
+                  icon="View"
+                  @click="handleOpenDialog('detail', scope.row.id)"
+                >
+                  详情
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_system:dept:update']"
+                  type="primary"
+                  size="small"
+                  link
+                  icon="edit"
+                  @click="handleOpenDialog('update', scope.row.id)"
+                >
+                  编辑
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_system:dept:delete']"
+                  type="danger"
+                  size="small"
+                  link
+                  icon="delete"
+                  @click="handleRowDelete(scope.row.id)"
+                >
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </template>
+    </PageContent>
+
+    <EnhancedDialog
+      v-model="dialogVisible.visible"
+      :title="dialogVisible.title"
+      @close="handleCloseDialog"
+    >
+      <template v-if="dialogVisible.type === 'detail'">
+        <el-descriptions :column="4" border>
+          <el-descriptions-item label="部门名称" :span="2">
+            {{ detailFormData.name }}
+          </el-descriptions-item>
+          <el-descriptions-item label="部门编码" :span="2">
+            {{ detailFormData.code }}
+          </el-descriptions-item>
+          <el-descriptions-item label="上级部门" :span="2">
+            {{ detailFormData.parent_name }}
+          </el-descriptions-item>
+          <el-descriptions-item label="状态" :span="2">
+            <el-tag :type="detailFormData.status ? 'success' : 'danger'">
+              {{ detailFormData.status ? "启用" : "停用" }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="排序" :span="2">
+            {{ detailFormData.order }}
+          </el-descriptions-item>
+          <el-descriptions-item label="创建时间" :span="2">
+            {{ detailFormData.created_time }}
+          </el-descriptions-item>
+          <el-descriptions-item label="更新时间" :span="2">
+            {{ detailFormData.updated_time }}
+          </el-descriptions-item>
+          <el-descriptions-item label="描述" :span="4">
+            {{ detailFormData.description }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </template>
+      <template v-else>
+        <el-form
+          ref="dataFormRef"
+          :model="formData"
+          :rules="rules"
+          label-suffix=":"
+          label-width="auto"
+          label-position="right"
+        >
+          <el-form-item label="部门名称" prop="name">
+            <el-input v-model="formData.name" placeholder="请输入部门名称" :maxlength="50" />
+          </el-form-item>
+          <el-form-item label="部门编码" prop="code">
+            <el-input
+              v-model="formData.code"
+              placeholder="字母开头，2-16位字母/数字/下划线"
+              :maxlength="16"
+              show-word-limit
+            />
+          </el-form-item>
+          <el-form-item label="上级部门" prop="parent_id">
+            <el-tree-select
+              v-model="formData.parent_id"
+              placeholder="请选择上级部门"
+              :data="deptOptions"
+              filterable
+              check-strictly
+              :render-after-expand="false"
+            />
+          </el-form-item>
+          <el-form-item label="排序" prop="order">
+            <el-input-number
+              v-model="formData.order"
+              controls-position="right"
+              :min="1"
+              :max="999"
+            />
+          </el-form-item>
+          <el-form-item label="状态" prop="status">
+            <el-radio-group v-model="formData.status">
+              <el-radio value="0">启用</el-radio>
+              <el-radio value="1">停用</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="描述" prop="description">
+            <el-input
+              v-model="formData.description"
+              :rows="4"
+              :maxlength="100"
+              show-word-limit
+              type="textarea"
+              placeholder="请输入描述"
+            />
+          </el-form-item>
+        </el-form>
+      </template>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button v-if="dialogVisible.type !== 'detail'" type="primary" @click="handleSubmit">
+            确定
+          </el-button>
+          <el-button v-else type="primary" @click="handleCloseDialog">确定</el-button>
+          <el-button @click="handleCloseDialog">取消</el-button>
+        </div>
+      </template>
+    </EnhancedDialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  name: "Dept",
+  inheritAttrs: false,
+});
+
+import DeptAPI, { DeptTable, DeptForm, DeptPageQuery } from "@/api/module_system/dept";
+import CrudToolbarLeft from "@/components/CURD/CrudToolbarLeft.vue";
+import CrudToolbarRight from "@/components/CURD/CrudToolbarRight.vue";
+import PageSearch from "@/components/CURD/PageSearch.vue";
+import PageContent from "@/components/CURD/PageContent.vue";
+import EnhancedDialog from "@/components/CURD/EnhancedDialog.vue";
+import type { ISearchConfig, IContentConfig } from "@/components/CURD/types";
+import { useCrudList } from "@/components/CURD/useCrudList";
+import { useUserStore } from "@/store";
+import { formatTree } from "@/utils/common";
+import { ref, reactive } from "vue";
+
+const { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList } = useCrudList();
+const dataFormRef = ref();
+
+const searchConfig = reactive<ISearchConfig>({
+  permPrefix: "module_system:dept",
+  colon: true,
+  isExpandable: true,
+  showNumber: 2,
+  form: { labelWidth: "auto" },
+  formItems: [
+    {
+      prop: "name",
+      label: "部门名称",
+      type: "input",
+      attrs: { placeholder: "请输入部门名称", clearable: true },
+    },
+    {
+      prop: "status",
+      label: "状态",
+      type: "select",
+      options: [
+        { label: "启用", value: "0" },
+        { label: "停用", value: "1" },
+      ],
+      attrs: { placeholder: "请选择状态", clearable: true, style: { width: "167.5px" } },
+    },
+    {
+      prop: "created_time",
+      label: "创建时间",
+      type: "date-picker",
+      attrs: {
+        type: "datetimerange",
+        rangeSeparator: "至",
+        startPlaceholder: "开始日期",
+        endPlaceholder: "结束日期",
+        format: "YYYY-MM-DD HH:mm:ss",
+        valueFormat: "YYYY-MM-DD HH:mm:ss",
+        style: { width: "340px" },
+      },
+    },
+  ],
+});
+
+const contentCols = reactive<
+  Array<{
+    prop?: string;
+    label?: string;
+    show?: boolean;
+  }>
+>([
+  { prop: "selection", label: "选择框", show: true },
+  { prop: "index", label: "序号", show: true },
+  { prop: "name", label: "部门名称", show: true },
+  { prop: "code", label: "部门编码", show: true },
+  { prop: "order", label: "排序", show: true },
+  { prop: "status", label: "状态", show: true },
+  { prop: "description", label: "描述", show: true },
+  { prop: "created_time", label: "创建时间", show: true },
+  { prop: "updated_time", label: "更新时间", show: true },
+  { prop: "operation", label: "操作", show: true },
+]);
+
+const contentConfig = reactive<IContentConfig<DeptPageQuery>>({
+  permPrefix: "module_system:dept",
+  pk: "id",
+  cols: contentCols as IContentConfig["cols"],
+  hideColumnFilter: false,
+  toolbar: [],
+  defaultToolbar: ["refresh", "filter"],
+  pagination: false,
+  indexAction: async (params) => {
+    const res = await DeptAPI.listDept(params as DeptPageQuery);
+    const tree = res.data.data || [];
+    deptOptions.value = formatTree(tree);
+    return tree;
+  },
+  deleteAction: async (ids) => {
+    await DeptAPI.deleteDept(
+      ids
+        .split(",")
+        .map((s) => Number(s.trim()))
+        .filter((n) => !Number.isNaN(n))
+    );
+    const userStore = useUserStore();
+    await userStore.getUserInfo();
+  },
+  deleteConfirm: {
+    title: "警告",
+    message: "确认删除该项数据?",
+    type: "warning",
+  },
+});
+
+const deptOptions = ref<OptionType[]>([]);
+
+const detailFormData = ref<DeptTable>({ code: "" });
+
+const formData = reactive<DeptForm>({
+  id: undefined,
+  name: undefined,
+  code: "",
+  order: 1,
+  parent_id: undefined,
+  status: "0",
+  description: undefined,
+});
+
+const dialogVisible = reactive({
+  title: "",
+  visible: false,
+  type: "create" as "create" | "update" | "detail",
+});
+
+const CODE_PATTERN = /^[A-Za-z][A-Za-z0-9_]{1,15}$/;
+
+const rules = reactive({
+  name: [{ required: true, message: "请输入部门名称", trigger: "blur" }],
+  code: [
+    { required: true, message: "请输入部门编码", trigger: "blur" },
+    {
+      pattern: CODE_PATTERN,
+      message: "字母开头，2-16位字母/数字/下划线",
+      trigger: "blur",
+    },
+  ],
+  order: [{ required: true, message: "请输入排序", trigger: "blur" }],
+  status: [{ required: true, message: "请选择状态", trigger: "blur" }],
+});
+
+const initialFormData: DeptForm = {
+  id: undefined,
+  name: undefined,
+  code: "",
+  order: 1,
+  parent_id: undefined,
+  status: "0",
+  description: undefined,
+};
+
+function handleRowDelete(id: number) {
+  contentRef.value?.handleDelete(id);
+}
+
+async function resetForm() {
+  if (dataFormRef.value) {
+    dataFormRef.value.resetFields();
+    dataFormRef.value.clearValidate();
+  }
+  Object.assign(formData, initialFormData);
+}
+
+async function handleCloseDialog() {
+  dialogVisible.visible = false;
+  await resetForm();
+}
+
+async function handleOpenDialog(
+  type: "create" | "update" | "detail",
+  id?: number,
+  parentId?: number
+) {
+  dialogVisible.type = type;
+  if (id) {
+    const response = await DeptAPI.detailDept(id);
+    if (type === "detail") {
+      dialogVisible.title = "部门详情";
+      Object.assign(detailFormData.value, response.data.data);
+    } else if (type === "update") {
+      dialogVisible.title = "修改部门";
+      Object.assign(formData, response.data.data);
+    }
+  } else {
+    dialogVisible.title = "新增部门";
+    formData.id = undefined;
+    if (parentId) {
+      formData.parent_id = parentId;
+    }
+  }
+  dialogVisible.visible = true;
+}
+
+async function handleSubmit() {
+  dataFormRef.value.validate(async (valid: boolean) => {
+    if (valid) {
+      const id = formData.id;
+      try {
+        if (id) {
+          await DeptAPI.updateDept(id, { id, ...formData });
+        } else {
+          await DeptAPI.createDept(formData);
+        }
+        dialogVisible.visible = false;
+        await resetForm();
+        refreshList();
+        const userStore = useUserStore();
+        await userStore.getUserInfo();
+      } catch (error: unknown) {
+        console.error(error);
+      }
+    }
+  });
+}
+
+async function handleMoreClick(status: string) {
+  const rows = contentRef.value?.getSelectionData() as DeptTable[] | undefined;
+  const ids = (rows ?? []).map((r) => r.id).filter((id): id is number => id != null);
+  if (!ids.length) {
+    ElMessage.warning("请先选择要操作的数据");
+    return;
+  }
+  ElMessageBox.confirm(`确认${status === "0" ? "启用" : "停用"}该项数据?`, "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(async () => {
+      try {
+        await DeptAPI.batchDept({ ids, status });
+        refreshList();
+        const userStore = useUserStore();
+        await userStore.getUserInfo();
+      } catch (error: unknown) {
+        console.error(error);
+      }
+    })
+    .catch(() => {
+      ElMessageBox.close();
+    });
+}
+</script>
diff --git a/frontend/new-web/src/views/module_system/dict/components/DataDrawer.vue b/frontend/new-web/src/views/module_system/dict/components/DataDrawer.vue
new file mode 100644
index 00000000..afcc787a
--- /dev/null
+++ b/frontend/new-web/src/views/module_system/dict/components/DataDrawer.vue
@@ -0,0 +1,817 @@
+<!-- 字典数据 -->
+<template>
+  <EnhancedDrawer
+    v-model="drawerVisible"
+    :title="'【' + dictLabel + '】字典数据'"
+    direction="rtl"
+    :size="drawerSize"
+  >
+    <div class="drawer-content">
+      <PageSearch
+        ref="searchRef"
+        :search-config="searchConfig"
+        @query-click="handleQueryClick"
+        @reset-click="handleResetClick"
+      />
+
+      <PageContent ref="contentRef" :content-config="contentConfig">
+        <template #toolbar="{ toolbarRight, onToolbar, removeIds, cols }">
+          <CrudToolbarLeft
+            :remove-ids="removeIds"
+            :perm-create="['module_system:dict_data:create']"
+            :perm-delete="['module_system:dict_data:delete']"
+            :perm-patch="['module_system:dict_data:patch']"
+            @add="handleOpenDialog('create')"
+            @delete="onToolbar('delete')"
+            @more="handleMoreClick"
+          />
+          <div class="data-table__toolbar--right">
+            <CrudToolbarRight :buttons="toolbarRight" :cols="cols" :on-toolbar="onToolbar">
+              <template #prepend>
+                <el-tooltip content="导出">
+                  <el-button
+                    v-hasPerm="['module_system:dict_data:export']"
+                    type="warning"
+                    icon="download"
+                    circle
+                    @click="handleOpenExportsModal"
+                  />
+                </el-tooltip>
+              </template>
+            </CrudToolbarRight>
+          </div>
+        </template>
+
+        <template #table="{ data, loading, tableRef, onSelectionChange, pagination }">
+          <div class="data-table__content">
+            <el-table
+              :ref="tableRef as any"
+              v-loading="loading"
+              row-key="id"
+              :data="data"
+              height="100%"
+              border
+              stripe
+              @selection-change="onSelectionChange"
+            >
+              <template #empty>
+                <el-empty :image-size="80" description="暂无数据" />
+              </template>
+              <el-table-column
+                v-if="contentCols.find((col) => col.prop === 'selection')?.show"
+                type="selection"
+                min-width="55"
+                align="center"
+              />
+              <el-table-column
+                v-if="contentCols.find((col) => col.prop === 'index')?.show"
+                fixed
+                label="序号"
+                min-width="60"
+              >
+                <template #default="scope">
+                  {{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                v-if="contentCols.find((col) => col.prop === 'dict_label')?.show"
+                label="标签"
+                prop="dict_label"
+                min-width="150"
+                show-overflow-tooltip
+              />
+              <el-table-column
+                v-if="contentCols.find((col) => col.prop === 'status')?.show"
+                label="状态"
+                prop="status"
+                min-width="100"
+                show-overflow-tooltip
+              >
+                <template #default="scope">
+                  <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">
+                    {{ scope.row.status === "0" ? "启用" : "停用" }}
+                  </el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column
+                v-if="contentCols.find((col) => col.prop === 'dict_type')?.show"
+                label="类型"
+                prop="dict_type"
+                min-width="180"
+                show-overflow-tooltip
+              >
+                <template #default="scope">
+                  <el-tag type="primary">{{ scope.row.dict_type }}</el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column
+                v-if="contentCols.find((col) => col.prop === 'dict_value')?.show"
+                label="值"
+                prop="dict_value"
+                min-width="100"
+                show-overflow-tooltip
+              />
+              <el-table-column
+                v-if="contentCols.find((col) => col.prop === 'css_class')?.show"
+                label="样式属性"
+                prop="css_class"
+                min-width="100"
+                show-overflow-tooltip
+              />
+              <el-table-column
+                v-if="contentCols.find((col) => col.prop === 'list_class')?.show"
+                label="列表类样式"
+                prop="list_class"
+                min-width="100"
+                show-overflow-tooltip
+              />
+              <el-table-column
+                v-if="contentCols.find((col) => col.prop === 'dict_sort')?.show"
+                label="排序"
+                prop="dict_sort"
+                min-width="60"
+              />
+              <el-table-column
+                v-if="contentCols.find((col) => col.prop === 'is_default')?.show"
+                label="是否默认"
+                prop="is_default"
+                min-width="100"
+              >
+                <template #default="scope">
+                  <el-tag v-if="scope.row.is_default" type="success">是</el-tag>
+                  <el-tag v-else type="danger">否</el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column
+                v-if="contentCols.find((col) => col.prop === 'description')?.show"
+                label="描述"
+                prop="description"
+                min-width="100"
+                show-overflow-tooltip
+              />
+              <el-table-column
+                v-if="contentCols.find((col) => col.prop === 'created_time')?.show"
+                label="创建时间"
+                prop="created_time"
+                min-width="200"
+                sortable
+              />
+              <el-table-column
+                v-if="contentCols.find((col) => col.prop === 'updated_time')?.show"
+                label="更新时间"
+                prop="updated_time"
+                min-width="200"
+                sortable
+              />
+              <el-table-column
+                v-if="contentCols.find((col) => col.prop === 'operation')?.show"
+                fixed="right"
+                label="操作"
+                align="center"
+                min-width="200"
+              >
+                <template #default="scope">
+                  <el-button
+                    v-hasPerm="['module_system:dict_data:detail']"
+                    type="info"
+                    size="small"
+                    link
+                    icon="View"
+                    @click="handleOpenDialog('detail', scope.row.id)"
+                  >
+                    详情
+                  </el-button>
+                  <el-button
+                    v-hasPerm="['module_system:dict_data:update']"
+                    type="primary"
+                    size="small"
+                    link
+                    icon="edit"
+                    @click="handleOpenDialog('update', scope.row.id)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    v-hasPerm="['module_system:dict_data:delete']"
+                    type="danger"
+                    size="small"
+                    link
+                    icon="delete"
+                    @click="handleRowDelete(scope.row.id)"
+                  >
+                    删除
+                  </el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </template>
+      </PageContent>
+
+      <EnhancedDialog
+        v-model="dialogVisible.visible"
+        :title="dialogVisible.title"
+        @close="handleCloseDialog"
+      >
+        <template v-if="dialogVisible.type === 'detail'">
+          <el-descriptions :column="4" border>
+            <el-descriptions-item label="数据标签" :span="2">
+              {{ detailFormData.dict_label }}
+            </el-descriptions-item>
+            <el-descriptions-item label="数据类型" :span="2">
+              {{ detailFormData.dict_type }}
+            </el-descriptions-item>
+            <el-descriptions-item label="数据值" :span="2">
+              {{ detailFormData.dict_value }}
+            </el-descriptions-item>
+            <el-descriptions-item label="样式属性" :span="2">
+              {{ detailFormData.css_class }}
+            </el-descriptions-item>
+            <el-descriptions-item label="列表样式属性" :span="2">
+              {{ detailFormData.list_class }}
+            </el-descriptions-item>
+            <el-descriptions-item label="是否默认" :span="2">
+              <el-tag v-if="detailFormData.is_default" type="success">是</el-tag>
+              <el-tag v-else type="danger">否</el-tag>
+            </el-descriptions-item>
+            <el-descriptions-item label="状态" :span="2">
+              <el-tag v-if="detailFormData.status === '0'" type="success">启用</el-tag>
+              <el-tag v-else type="danger">停用</el-tag>
+            </el-descriptions-item>
+            <el-descriptions-item label="排序" :span="2">
+              {{ detailFormData.dict_sort }}
+            </el-descriptions-item>
+            <el-descriptions-item label="描述" :span="2">
+              {{ detailFormData.description }}
+            </el-descriptions-item>
+            <el-descriptions-item label="创建时间" :span="2">
+              {{ detailFormData.created_time }}
+            </el-descriptions-item>
+            <el-descriptions-item label="更新时间" :span="2">
+              {{ detailFormData.updated_time }}
+            </el-descriptions-item>
+          </el-descriptions>
+        </template>
+        <template v-else>
+          <el-form
+            ref="dataFormRef"
+            :model="formData"
+            :rules="rules"
+            label-suffix=":"
+            label-width="auto"
+            label-position="right"
+          >
+            <el-form-item label="数据类型" prop="dict_type">
+              <el-input
+                v-model="formData.dict_type"
+                placeholder="请输入数据类型"
+                :maxlength="50"
+                :disabled="true"
+              />
+            </el-form-item>
+            <el-form-item label="数据标签" prop="dict_label">
+              <el-input
+                v-model="formData.dict_label"
+                placeholder="请输入数据标签"
+                :maxlength="255"
+              />
+            </el-form-item>
+            <el-form-item label="数据值" prop="dict_value">
+              <el-input v-model="formData.dict_value" placeholder="请输入数据值" :maxlength="255" />
+            </el-form-item>
+            <el-form-item label="样式属性" prop="css_class">
+              <el-select
+                v-model="formData.css_class"
+                placeholder="请选择常用颜色或输入自定义"
+                clearable
+                filterable
+                allow-create
+                default-first-option
+              >
+                <el-option value="primary" label="主要(primary)">
+                  <span class="tag-option-preview" :style="getTagPreviewStyle('primary')">
+                    主要(primary)
+                  </span>
+                </el-option>
+                <el-option value="success" label="成功(success)">
+                  <span class="tag-option-preview" :style="getTagPreviewStyle('success')">
+                    成功(success)
+                  </span>
+                </el-option>
+                <el-option value="warning" label="警告(warning)">
+                  <span class="tag-option-preview" :style="getTagPreviewStyle('warning')">
+                    警告(warning)
+                  </span>
+                </el-option>
+                <el-option value="danger" label="危险(danger)">
+                  <span class="tag-option-preview" :style="getTagPreviewStyle('danger')">
+                    危险(danger)
+                  </span>
+                </el-option>
+                <el-option value="info" label="信息(info)">
+                  <span class="tag-option-preview" :style="getTagPreviewStyle('info')">
+                    信息(info)
+                  </span>
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="列表类样式" prop="list_class">
+              <el-select v-model="formData.list_class" placeholder="请选择列表类样式" clearable>
+                <el-option value="default" label="默认(default)">
+                  <span class="tag-option-preview tag-option-preview--default">默认(default)</span>
+                </el-option>
+                <el-option value="primary" label="主要(primary)">
+                  <span class="tag-option-preview" :style="getTagPreviewStyle('primary')">
+                    主要(primary)
+                  </span>
+                </el-option>
+                <el-option value="success" label="成功(success)">
+                  <span class="tag-option-preview" :style="getTagPreviewStyle('success')">
+                    成功(success)
+                  </span>
+                </el-option>
+                <el-option value="warning" label="警告(warning)">
+                  <span class="tag-option-preview" :style="getTagPreviewStyle('warning')">
+                    警告(warning)
+                  </span>
+                </el-option>
+                <el-option value="danger" label="危险(danger)">
+                  <span class="tag-option-preview" :style="getTagPreviewStyle('danger')">
+                    危险(danger)
+                  </span>
+                </el-option>
+                <el-option value="info" label="信息(info)">
+                  <span class="tag-option-preview" :style="getTagPreviewStyle('info')">
+                    信息(info)
+                  </span>
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="是否默认" prop="is_default">
+              <el-radio-group v-model="formData.is_default">
+                <el-radio :value="true">是</el-radio>
+                <el-radio :value="false">否</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="排序" prop="dict_sort">
+              <el-input-number v-model="formData.dict_sort" controls-position="right" :min="1" />
+            </el-form-item>
+            <el-form-item label="状态" prop="status">
+              <el-switch
+                v-model="formData.status"
+                inline-prompt
+                :active-value="'0'"
+                :inactive-value="'1'"
+              />
+            </el-form-item>
+
+            <el-form-item label="描述" prop="description">
+              <el-input
+                v-model="formData.description"
+                :rows="4"
+                :maxlength="100"
+                show-word-limit
+                type="textarea"
+                placeholder="请输入描述"
+              />
+            </el-form-item>
+          </el-form>
+        </template>
+
+        <template #footer>
+          <div class="dialog-footer">
+            <el-button @click="handleCloseDialog">取消</el-button>
+            <el-button v-if="dialogVisible.type !== 'detail'" type="primary" @click="handleSubmit">
+              确定
+            </el-button>
+            <el-button v-else type="primary" @click="handleCloseDialog">确定</el-button>
+          </div>
+        </template>
+      </EnhancedDialog>
+
+      <ExportModal
+        v-model="exportsDialogVisible"
+        :content-config="curdContentConfig"
+        :query-params="exportQueryParams"
+        :page-data="exportPageData"
+        :selection-data="exportSelectionData"
+      />
+    </div>
+  </EnhancedDrawer>
+</template>
+
+<script setup lang="ts">
+import DictAPI, { DictDataTable, DictDataForm, DictDataPageQuery } from "@/api/module_system/dict";
+import { useDictStore } from "@/store";
+import { useAppStore } from "@/store/modules/app.store";
+import { DeviceEnum } from "@/enums/settings/device.enum";
+import ExportModal from "@/components/CURD/ExportModal.vue";
+import CrudToolbarLeft from "@/components/CURD/CrudToolbarLeft.vue";
+import CrudToolbarRight from "@/components/CURD/CrudToolbarRight.vue";
+import PageSearch from "@/components/CURD/PageSearch.vue";
+import PageContent from "@/components/CURD/PageContent.vue";
+import EnhancedDialog from "@/components/CURD/EnhancedDialog.vue";
+import EnhancedDrawer from "@/components/CURD/EnhancedDrawer.vue";
+import type { ISearchConfig, IContentConfig, IObject } from "@/components/CURD/types";
+import { useCrudList } from "@/components/CURD/useCrudList";
+import { computed, ref, reactive, unref } from "vue";
+import { fetchAllPages } from "@/utils/fetchAllPages";
+
+const props = defineProps({
+  dictType: {
+    type: String,
+    required: true,
+  },
+  dictLabel: {
+    type: String,
+    required: true,
+  },
+  dictTypeId: {
+    type: Number,
+    required: true,
+  },
+});
+
+const TAG_TYPE_STYLE_MAP: Record<string, { background: string; color: string; border: string }> = {
+  primary: {
+    background: "var(--el-color-primary-light-9)",
+    color: "var(--el-color-primary)",
+    border: "var(--el-color-primary-light-7)",
+  },
+  success: {
+    background: "var(--el-color-success-light-9)",
+    color: "var(--el-color-success)",
+    border: "var(--el-color-success-light-7)",
+  },
+  warning: {
+    background: "var(--el-color-warning-light-9)",
+    color: "var(--el-color-warning)",
+    border: "var(--el-color-warning-light-7)",
+  },
+  danger: {
+    background: "var(--el-color-danger-light-9)",
+    color: "var(--el-color-danger)",
+    border: "var(--el-color-danger-light-7)",
+  },
+  info: {
+    background: "var(--el-color-info-light-9)",
+    color: "var(--el-color-info)",
+    border: "var(--el-color-info-light-7)",
+  },
+};
+
+const drawerVisible = defineModel<boolean>({ required: true });
+
+const appStore = useAppStore();
+const dictStore = useDictStore();
+const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? "80%" : "60%"));
+
+const { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList } = useCrudList();
+const dataFormRef = ref();
+
+const searchConfig = reactive<ISearchConfig>({
+  permPrefix: "module_system:dict_data",
+  colon: true,
+  isExpandable: true,
+  showNumber: 2,
+  form: { labelWidth: "auto" },
+  formItems: [
+    {
+      prop: "dict_label",
+      label: "字典数据标签",
+      type: "input",
+      attrs: { placeholder: "请输入字典标签", clearable: true },
+    },
+    {
+      prop: "status",
+      label: "状态",
+      type: "select",
+      options: [
+        { label: "启用", value: "0" },
+        { label: "停用", value: "1" },
+      ],
+      attrs: { placeholder: "请选择状态", clearable: true, style: { width: "167.5px" } },
+    },
+    {
+      prop: "created_time",
+      label: "创建时间",
+      type: "date-picker",
+      attrs: {
+        type: "datetimerange",
+        rangeSeparator: "至",
+        startPlaceholder: "开始日期",
+        endPlaceholder: "结束日期",
+        format: "YYYY-MM-DD HH:mm:ss",
+        valueFormat: "YYYY-MM-DD HH:mm:ss",
+        style: { width: "340px" },
+      },
+    },
+  ],
+});
+
+const contentCols = reactive<
+  Array<{
+    prop?: string;
+    label?: string;
+    show?: boolean;
+  }>
+>([
+  { prop: "selection", label: "选择框", show: true },
+  { prop: "index", label: "序号", show: true },
+  { prop: "dict_label", label: "标签", show: true },
+  { prop: "status", label: "状态", show: true },
+  { prop: "dict_type", label: "类型", show: true },
+  { prop: "dict_value", label: "值", show: true },
+  { prop: "css_class", label: "样式属性", show: true },
+  { prop: "list_class", label: "列表类样式", show: true },
+  { prop: "dict_sort", label: "排序", show: true },
+  { prop: "is_default", label: "是否默认", show: true },
+  { prop: "description", label: "描述", show: true },
+  { prop: "created_time", label: "创建时间", show: true },
+  { prop: "updated_time", label: "更新时间", show: true },
+  { prop: "operation", label: "操作", show: true },
+]);
+
+function getTagPreviewStyle(value?: string) {
+  const preset = value ? TAG_TYPE_STYLE_MAP[value] : undefined;
+  if (preset) {
+    return {
+      backgroundColor: preset.background,
+      color: preset.color,
+      borderColor: preset.border,
+    };
+  }
+  if (!value) return {};
+  return {
+    backgroundColor: value,
+    color: "#fff",
+    borderColor: value,
+  };
+}
+
+function mergeDictQuery(params: IObject): DictDataPageQuery {
+  return {
+    ...params,
+    dict_type: props.dictType,
+    dict_type_id: props.dictTypeId,
+  } as DictDataPageQuery;
+}
+
+const contentConfig = reactive<IContentConfig<DictDataPageQuery>>({
+  permPrefix: "module_system:dict_data",
+  pk: "id",
+  cols: contentCols as IContentConfig["cols"],
+  hideColumnFilter: false,
+  toolbar: [],
+  defaultToolbar: ["refresh", "filter"],
+  pagination: {
+    pageSize: 10,
+    pageSizes: [10, 20, 30, 50],
+  },
+  request: { page_no: "page_no", page_size: "page_size" },
+  indexAction: async (params) => {
+    const res = await DictAPI.listDictData(mergeDictQuery(params as IObject));
+    return {
+      total: res.data.data.total,
+      list: res.data.data.items,
+    };
+  },
+  deleteAction: async (ids) => {
+    await DictAPI.deleteDictData(
+      ids
+        .split(",")
+        .map((s) => Number(s.trim()))
+        .filter((n) => !Number.isNaN(n))
+    );
+    dictStore.clearDictData();
+    if (props.dictType) {
+      await dictStore.getDict([props.dictType]);
+    }
+  },
+  deleteConfirm: {
+    title: "警告",
+    message: "确认删除该项数据?",
+    type: "warning",
+  },
+});
+
+const detailFormData = ref<DictDataTable>({});
+
+const formData = reactive<DictDataForm>({
+  id: undefined,
+  dict_sort: 1,
+  dict_label: "",
+  dict_value: "",
+  dict_type: "",
+  css_class: "",
+  list_class: undefined,
+  is_default: false,
+  status: "0",
+  description: "",
+  dict_type_id: undefined,
+});
+
+const dialogVisible = reactive({
+  title: "",
+  visible: false,
+  type: "create" as "create" | "update" | "detail",
+});
+
+const rules = reactive({
+  dict_label: [{ required: true, message: "请输入字典标签", trigger: "blur" }],
+  dict_type: [{ required: true, message: "请输入字典类型", trigger: "blur" }],
+  dict_value: [{ required: true, message: "请输入字典键值", trigger: "blur" }],
+  status: [{ required: true, message: "请选择状态", trigger: "blur" }],
+  dict_sort: [{ required: true, message: "请输入排序", trigger: "blur" }],
+  is_default: [{ required: true, message: "请选择是否默认", trigger: "blur" }],
+});
+
+const initialFormData: DictDataForm = {
+  id: undefined,
+  dict_sort: 1,
+  dict_label: "",
+  dict_value: "",
+  dict_type: "",
+  css_class: "",
+  list_class: undefined,
+  is_default: false,
+  status: "0",
+  description: "",
+  dict_type_id: props.dictTypeId,
+};
+
+const exportsDialogVisible = ref(false);
+
+const exportQueryParams = computed(() => mergeDictQuery(searchRef.value?.getQueryParams() ?? {}));
+
+const exportPageData = computed(() => {
+  const pd = contentRef.value?.pageData;
+  return (unref(pd) ?? []) as DictDataTable[];
+});
+
+const exportSelectionData = computed(
+  () => (contentRef.value?.getSelectionData() ?? []) as DictDataTable[]
+);
+
+const exportColumns = [
+  { prop: "dict_label", label: "数据标签" },
+  { prop: "dict_type", label: "数据类型" },
+  { prop: "dict_value", label: "数据值" },
+  { prop: "css_class", label: "样式属性" },
+  { prop: "list_class", label: "列表类样式" },
+  { prop: "dict_sort", label: "排序" },
+  { prop: "is_default", label: "是否默认" },
+  { prop: "status", label: "状态" },
+  { prop: "description", label: "描述" },
+  { prop: "created_time", label: "创建时间" },
+  { prop: "updated_time", label: "更新时间" },
+];
+
+const curdContentConfig = {
+  permPrefix: "module_system:dict_data",
+  cols: exportColumns as any,
+  exportsAction: async (params: any) => {
+    const query: Record<string, unknown> = { ...mergeDictQuery(params) };
+    return fetchAllPages({
+      initialQuery: query,
+      fetchPage: async (q) => {
+        const res = await DictAPI.listDictData(q as unknown as DictDataPageQuery);
+        return {
+          total: res.data?.data?.total ?? 0,
+          list: res.data?.data?.items ?? [],
+        };
+      },
+    });
+  },
+} as unknown as IContentConfig;
+
+function handleOpenExportsModal() {
+  exportsDialogVisible.value = true;
+}
+
+function handleRowDelete(id: number) {
+  contentRef.value?.handleDelete(id);
+}
+
+async function resetForm() {
+  if (dataFormRef.value) {
+    dataFormRef.value.resetFields();
+    dataFormRef.value.clearValidate();
+  }
+  Object.assign(formData, { ...initialFormData, dict_type_id: props.dictTypeId });
+}
+
+async function handleCloseDialog() {
+  dialogVisible.visible = false;
+  await resetForm();
+}
+
+async function handleOpenDialog(type: "create" | "update" | "detail", id?: number) {
+  dialogVisible.type = type;
+  if (id) {
+    const response = await DictAPI.detailDictData(id);
+    if (type === "detail") {
+      dialogVisible.title = "字典数据详情";
+      Object.assign(detailFormData.value, response.data.data);
+    } else if (type === "update") {
+      dialogVisible.title = "修改字典数据";
+      Object.assign(formData, response.data.data);
+    }
+  } else {
+    dialogVisible.title = "新增字典数据";
+    Object.assign(formData, initialFormData);
+    formData.dict_type = props.dictType;
+    formData.status = "0";
+    formData.id = undefined;
+    formData.dict_type_id = props.dictTypeId;
+  }
+  dialogVisible.visible = true;
+}
+
+async function handleSubmit() {
+  dataFormRef.value.validate(async (valid: any) => {
+    if (valid) {
+      const id = formData.id;
+      try {
+        if (id) {
+          await DictAPI.updateDictData(id, { id, ...formData });
+        } else {
+          await DictAPI.createDictData(formData);
+        }
+        dialogVisible.visible = false;
+        await resetForm();
+        refreshList();
+        dictStore.clearDictData();
+        if (formData.dict_type) {
+          await dictStore.getDict([formData.dict_type]);
+        }
+      } catch (error: any) {
+        console.error(error);
+      }
+    }
+  });
+}
+
+async function handleMoreClick(status: string) {
+  const rows = contentRef.value?.getSelectionData() as DictDataTable[] | undefined;
+  const ids = (rows ?? []).map((r) => r.id).filter((id): id is number => id != null);
+  if (!ids.length) {
+    ElMessage.warning("请先选择要操作的数据");
+    return;
+  }
+  ElMessageBox.confirm(`确认${status === "0" ? "启用" : "停用"}该项数据?`, "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(async () => {
+      try {
+        await DictAPI.batchDictData({ ids, status });
+        refreshList();
+        dictStore.clearDictData();
+        if (props.dictType) {
+          await dictStore.getDict([props.dictType]);
+        }
+      } catch (error: any) {
+        console.error(error);
+      }
+    })
+    .catch(() => {
+      ElMessageBox.close();
+    });
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.drawer-content :deep(.el-card.data-table) {
+  flex: 1;
+  min-height: 0;
+  margin-top: 16px;
+}
+
+.tag-option-preview {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 120px;
+  padding: 4px 10px;
+  font-size: 12px;
+  line-height: 18px;
+  text-align: center;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+
+.tag-option-preview--default {
+  color: var(--el-text-color-regular);
+  background: var(--el-fill-color-light);
+  border-color: var(--el-border-color-lighter);
+}
+</style>
diff --git a/frontend/new-web/src/views/module_system/dict/index.vue b/frontend/new-web/src/views/module_system/dict/index.vue
new file mode 100644
index 00000000..bc2647cd
--- /dev/null
+++ b/frontend/new-web/src/views/module_system/dict/index.vue
@@ -0,0 +1,581 @@
+<!-- 字典 -->
+<template>
+  <div class="app-container">
+    <PageSearch
+      ref="searchRef"
+      :search-config="searchConfig"
+      @query-click="handleQueryClick"
+      @reset-click="handleResetClick"
+    />
+
+    <PageContent
+      ref="contentRef"
+      :content-config="contentConfig"
+      @add-click="handleOpenDialog('create')"
+    >
+      <!-- 与 PageContent 默认结构一致：不再套一层 data-table__toolbar（外层已由组件提供） -->
+      <template #toolbar="{ toolbarRight, onToolbar, removeIds, cols }">
+        <CrudToolbarLeft
+          :remove-ids="removeIds"
+          :perm-create="['module_system:dict_type:create']"
+          :perm-delete="['module_system:dict_type:delete']"
+          :perm-patch="['module_system:dict_type:patch']"
+          @add="handleOpenDialog('create')"
+          @delete="onToolbar('delete')"
+          @more="handleMoreClick"
+        />
+        <div class="data-table__toolbar--right">
+          <CrudToolbarRight :buttons="toolbarRight" :cols="cols" :on-toolbar="onToolbar">
+            <template #prepend>
+              <el-tooltip content="导出">
+                <el-button
+                  v-hasPerm="['module_system:dict_type:export']"
+                  type="warning"
+                  icon="download"
+                  circle
+                  @click="handleOpenExportsModal"
+                />
+              </el-tooltip>
+            </template>
+          </CrudToolbarRight>
+        </div>
+      </template>
+
+      <template #table="{ data, loading, tableRef, onSelectionChange, pagination }">
+        <div class="data-table__content">
+          <el-table
+            :ref="tableRef as any"
+            v-loading="loading"
+            row-key="id"
+            :data="data"
+            height="100%"
+            border
+            stripe
+            @selection-change="onSelectionChange"
+          >
+            <template #empty>
+              <el-empty :image-size="80" description="暂无数据" />
+            </template>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'selection')?.show"
+              type="selection"
+              min-width="55"
+              align="center"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'index')?.show"
+              fixed
+              label="序号"
+              min-width="60"
+            >
+              <template #default="scope">
+                {{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }}
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'dict_name')?.show"
+              key="dict_name"
+              label="字典名称"
+              prop="dict_name"
+              min-width="140"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'dict_type')?.show"
+              key="dict_type"
+              label="字典类型"
+              prop="dict_type"
+              min-width="180"
+            >
+              <template #default="scope">
+                <el-tag type="primary">{{ scope.row.dict_type }}</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'status')?.show"
+              key="status"
+              label="状态"
+              prop="status"
+              min-width="80"
+            >
+              <template #default="scope">
+                <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">
+                  {{ scope.row.status === "0" ? "启用" : "停用" }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'description')?.show"
+              key="description"
+              label="描述"
+              prop="description"
+              min-width="140"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'created_time')?.show"
+              key="created_time"
+              label="创建时间"
+              prop="created_time"
+              min-width="200"
+              sortable
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'updated_time')?.show"
+              key="updated_time"
+              label="更新时间"
+              prop="updated_time"
+              min-width="200"
+              sortable
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'operation')?.show"
+              fixed="right"
+              label="操作"
+              align="center"
+              min-width="260"
+            >
+              <template #default="scope">
+                <el-button
+                  v-hasPerm="['module_system:dict_data:query']"
+                  type="warning"
+                  size="small"
+                  link
+                  icon="Document"
+                  @click="handleDictDataDrawer(scope.row)"
+                >
+                  字典
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_system:dict_type:detail']"
+                  type="info"
+                  size="small"
+                  link
+                  icon="View"
+                  @click="handleOpenDialog('detail', scope.row.id)"
+                >
+                  详情
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_system:dict_type:update']"
+                  type="primary"
+                  size="small"
+                  link
+                  icon="edit"
+                  @click="handleOpenDialog('update', scope.row.id)"
+                >
+                  编辑
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_system:dict_type:delete']"
+                  type="danger"
+                  size="small"
+                  link
+                  icon="delete"
+                  @click="handleRowDelete(scope.row.id)"
+                >
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </template>
+    </PageContent>
+
+    <EnhancedDialog
+      v-model="dialogVisible.visible"
+      :title="dialogVisible.title"
+      @close="handleCloseDialog"
+    >
+      <template v-if="dialogVisible.type === 'detail'">
+        <el-descriptions :column="4" border>
+          <el-descriptions-item label="字典名称" :span="2">
+            {{ detailFormData.dict_name }}
+          </el-descriptions-item>
+          <el-descriptions-item label="字典类型" :span="2">
+            <el-tag type="primary">{{ detailFormData.dict_type }}</el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="状态" :span="2">
+            <el-tag v-if="detailFormData.status === '0'" type="success">启用</el-tag>
+            <el-tag v-else type="danger">停用</el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="描述" :span="2">
+            {{ detailFormData.description }}
+          </el-descriptions-item>
+          <el-descriptions-item label="创建时间" :span="2">
+            {{ detailFormData.created_time }}
+          </el-descriptions-item>
+          <el-descriptions-item label="更新时间" :span="2">
+            {{ detailFormData.updated_time }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </template>
+      <template v-else>
+        <el-form
+          ref="dataFormRef"
+          :model="formData"
+          :rules="rules"
+          label-suffix=":"
+          label-width="auto"
+          label-position="right"
+        >
+          <el-form-item label="字典名称" prop="dict_name">
+            <el-input v-model="formData.dict_name" placeholder="请输入字典名称" :maxlength="50" />
+          </el-form-item>
+          <el-form-item label="字典类型" prop="dict_type">
+            <el-input v-model="formData.dict_type" placeholder="请输入字典类型" :maxlength="50" />
+          </el-form-item>
+          <el-form-item label="状态" prop="status">
+            <el-radio-group v-model="formData.status">
+              <el-radio value="0">启用</el-radio>
+              <el-radio value="1">停用</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="描述" prop="description">
+            <el-input
+              v-model="formData.description"
+              :rows="4"
+              :maxlength="100"
+              show-word-limit
+              type="textarea"
+              placeholder="请输入描述"
+            />
+          </el-form-item>
+        </el-form>
+      </template>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="handleCloseDialog">取消</el-button>
+          <el-button v-if="dialogVisible.type !== 'detail'" type="primary" @click="handleSubmit">
+            确定
+          </el-button>
+          <el-button v-else type="primary" @click="handleCloseDialog">确定</el-button>
+        </div>
+      </template>
+    </EnhancedDialog>
+
+    <ExportModal
+      v-model="exportsDialogVisible"
+      :content-config="curdContentConfig"
+      :query-params="exportQueryParams"
+      :page-data="exportPageData"
+      :selection-data="exportSelectionData"
+    />
+    <DataDrawer
+      v-if="drawerVisible"
+      v-model="drawerVisible"
+      :dict-type="currentDictType"
+      :dict-label="currentDictLabel"
+      :dict-type-id="currentDictTypeId"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  name: "Dict",
+  inheritAttrs: false,
+});
+
+import DictAPI, { DictTable, DictForm, DictPageQuery } from "@/api/module_system/dict";
+import { useDictStore } from "@/store";
+import DataDrawer from "@/views/module_system/dict/components/DataDrawer.vue";
+import ExportModal from "@/components/CURD/ExportModal.vue";
+import CrudToolbarLeft from "@/components/CURD/CrudToolbarLeft.vue";
+import CrudToolbarRight from "@/components/CURD/CrudToolbarRight.vue";
+import PageSearch from "@/components/CURD/PageSearch.vue";
+import PageContent from "@/components/CURD/PageContent.vue";
+import EnhancedDialog from "@/components/CURD/EnhancedDialog.vue";
+import type { ISearchConfig, IContentConfig } from "@/components/CURD/types";
+import { useCrudList } from "@/components/CURD/useCrudList";
+import { computed, ref, reactive, unref } from "vue";
+import { fetchAllPages } from "@/utils/fetchAllPages";
+
+const { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList } = useCrudList();
+const dataFormRef = ref();
+
+const searchConfig = reactive<ISearchConfig>({
+  permPrefix: "module_system:dict_type",
+  colon: true,
+  isExpandable: true,
+  showNumber: 2,
+  form: { labelWidth: "auto" },
+  formItems: [
+    {
+      prop: "dict_name",
+      label: "字典名称",
+      type: "input",
+      attrs: { placeholder: "请输入字典名称", clearable: true },
+    },
+    {
+      prop: "dict_type",
+      label: "字典类型",
+      type: "input",
+      attrs: { placeholder: "请输入字典类型", clearable: true },
+    },
+    {
+      prop: "status",
+      label: "状态",
+      type: "select",
+      options: [
+        { label: "启用", value: "0" },
+        { label: "停用", value: "1" },
+      ],
+      attrs: { placeholder: "请选择状态", clearable: true, style: { width: "167.5px" } },
+    },
+    {
+      prop: "created_time",
+      label: "创建时间",
+      type: "date-picker",
+      attrs: {
+        type: "datetimerange",
+        rangeSeparator: "至",
+        startPlaceholder: "开始日期",
+        endPlaceholder: "结束日期",
+        format: "YYYY-MM-DD HH:mm:ss",
+        valueFormat: "YYYY-MM-DD HH:mm:ss",
+        style: { width: "340px" },
+      },
+    },
+  ],
+});
+
+const contentCols = reactive<
+  Array<{
+    prop?: string;
+    label?: string;
+    show?: boolean;
+  }>
+>([
+  { prop: "selection", label: "选择框", show: true },
+  { prop: "index", label: "序号", show: true },
+  { prop: "dict_name", label: "字典名称", show: true },
+  { prop: "dict_type", label: "字典类型", show: true },
+  { prop: "status", label: "状态", show: true },
+  { prop: "description", label: "描述", show: true },
+  { prop: "created_time", label: "创建时间", show: true },
+  { prop: "updated_time", label: "更新时间", show: true },
+  { prop: "operation", label: "操作", show: true },
+]);
+
+const dictStore = useDictStore();
+
+const contentConfig = reactive<IContentConfig<DictPageQuery>>({
+  permPrefix: "module_system:dict_type",
+  pk: "id",
+  cols: contentCols as IContentConfig["cols"],
+  hideColumnFilter: false,
+  toolbar: [],
+  defaultToolbar: ["refresh", "filter"],
+  pagination: {
+    pageSize: 10,
+    pageSizes: [10, 20, 30, 50],
+  },
+  request: { page_no: "page_no", page_size: "page_size" },
+  indexAction: async (params) => {
+    const res = await DictAPI.listDictType(params as DictPageQuery);
+    return {
+      total: res.data.data.total,
+      list: res.data.data.items,
+    };
+  },
+  deleteAction: async (ids) => {
+    await DictAPI.deleteDictType(
+      ids
+        .split(",")
+        .map((s) => Number(s.trim()))
+        .filter((n) => !Number.isNaN(n))
+    );
+    dictStore.clearDictData();
+    const dictTypes = Object.keys(dictStore.dictData);
+    if (dictTypes.length > 0) {
+      await dictStore.getDict(dictTypes);
+    }
+  },
+  deleteConfirm: {
+    title: "警告",
+    message: "确认删除该项数据?",
+    type: "warning",
+  },
+});
+
+const detailFormData = ref<DictTable>({});
+
+const formData = reactive<DictForm>({
+  id: undefined,
+  dict_name: "",
+  dict_type: "",
+  status: "0",
+  description: undefined,
+});
+
+const dialogVisible = reactive({
+  title: "",
+  visible: false,
+  type: "create" as "create" | "update" | "detail",
+});
+
+const rules = reactive({
+  dict_name: [{ required: true, message: "请输入字典名称", trigger: "blur" }],
+  dict_type: [{ required: true, message: "请选择字典类型", trigger: "blur" }],
+  status: [{ required: true, message: "请选择字典状态", trigger: "blur" }],
+});
+
+const initialFormData: DictForm = {
+  id: undefined,
+  dict_name: "",
+  dict_type: "",
+  status: "0",
+  description: undefined,
+};
+
+const exportsDialogVisible = ref(false);
+
+const exportQueryParams = computed(() => searchRef.value?.getQueryParams() ?? {});
+
+const exportPageData = computed(() => {
+  const pd = contentRef.value?.pageData;
+  return (unref(pd) ?? []) as DictTable[];
+});
+
+const exportSelectionData = computed(
+  () => (contentRef.value?.getSelectionData() ?? []) as DictTable[]
+);
+
+const exportColumns = [
+  { prop: "dict_name", label: "字典名称" },
+  { prop: "dict_type", label: "字典类型" },
+  { prop: "status", label: "状态" },
+  { prop: "description", label: "描述" },
+  { prop: "created_time", label: "创建时间" },
+  { prop: "updated_time", label: "更新时间" },
+];
+
+const curdContentConfig = {
+  permPrefix: "module_system:dict_type",
+  cols: exportColumns as any,
+  exportsAction: async (params: any) => {
+    const query: Record<string, unknown> = { ...params };
+    if (typeof query.status === "string") query.status = query.status === "true";
+    return fetchAllPages({
+      initialQuery: query,
+      fetchPage: async (q) => {
+        const res = await DictAPI.listDictType(q as unknown as DictPageQuery);
+        return {
+          total: res.data?.data?.total ?? 0,
+          list: res.data?.data?.items ?? [],
+        };
+      },
+    });
+  },
+} as unknown as IContentConfig;
+
+function handleOpenExportsModal() {
+  exportsDialogVisible.value = true;
+}
+
+function handleRowDelete(id: number) {
+  contentRef.value?.handleDelete(id);
+}
+
+async function resetForm() {
+  if (dataFormRef.value) {
+    dataFormRef.value.resetFields();
+    dataFormRef.value.clearValidate();
+  }
+  Object.assign(formData, initialFormData);
+}
+
+async function handleCloseDialog() {
+  dialogVisible.visible = false;
+  await resetForm();
+}
+
+async function handleOpenDialog(type: "create" | "update" | "detail", id?: number) {
+  dialogVisible.type = type;
+  if (id) {
+    const response = await DictAPI.detailDictType(id);
+    if (type === "detail") {
+      dialogVisible.title = "字典详情";
+      Object.assign(detailFormData.value, response.data.data);
+    } else if (type === "update") {
+      dialogVisible.title = "修改字典";
+      Object.assign(formData, response.data.data);
+    }
+  } else {
+    dialogVisible.title = "新增字典";
+    formData.id = undefined;
+  }
+  dialogVisible.visible = true;
+}
+
+async function handleSubmit() {
+  dataFormRef.value.validate(async (valid: any) => {
+    if (valid) {
+      const id = formData.id;
+      try {
+        if (id) {
+          await DictAPI.updateDictType(id, { id, ...formData });
+        } else {
+          await DictAPI.createDictType(formData);
+        }
+        dialogVisible.visible = false;
+        await resetForm();
+        refreshList();
+        dictStore.clearDictData();
+        if (formData.dict_type) {
+          await dictStore.getDict([formData.dict_type]);
+        }
+      } catch (error: any) {
+        console.error(error);
+      }
+    }
+  });
+}
+
+async function handleMoreClick(status: string) {
+  const rows = contentRef.value?.getSelectionData() as DictTable[] | undefined;
+  const ids = (rows ?? []).map((r) => r.id).filter((id): id is number => id != null);
+  if (!ids.length) {
+    ElMessage.warning("请先选择要操作的数据");
+    return;
+  }
+  ElMessageBox.confirm(`确认${status === "0" ? "启用" : "停用"}该项数据?`, "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(async () => {
+      try {
+        await DictAPI.batchDictType({ ids, status });
+        refreshList();
+        dictStore.clearDictData();
+        const dictTypes = Object.keys(dictStore.dictData);
+        if (dictTypes.length > 0) {
+          await dictStore.getDict(dictTypes);
+        }
+      } catch (error: any) {
+        console.error(error);
+      }
+    })
+    .catch(() => {
+      ElMessageBox.close();
+    });
+}
+
+const drawerVisible = ref(false);
+const currentDictType = ref("");
+const currentDictLabel = ref("");
+const currentDictTypeId = ref(1);
+
+function handleDictDataDrawer(dictType: DictTable) {
+  currentDictType.value = dictType.dict_type || "";
+  currentDictLabel.value = dictType.dict_name || "";
+  currentDictTypeId.value = dictType.id || 0;
+  drawerVisible.value = true;
+}
+</script>
diff --git a/frontend/new-web/src/views/module_system/log/index.vue b/frontend/new-web/src/views/module_system/log/index.vue
new file mode 100644
index 00000000..a73df199
--- /dev/null
+++ b/frontend/new-web/src/views/module_system/log/index.vue
@@ -0,0 +1,555 @@
+<!-- 日志管理 -->
+<template>
+  <div class="app-container">
+    <PageSearch
+      ref="searchRef"
+      :search-config="searchConfig"
+      @query-click="handleQueryClick"
+      @reset-click="handleResetClick"
+    />
+
+    <PageContent ref="contentRef" :content-config="contentConfig">
+      <template #toolbar="{ toolbarRight, onToolbar, removeIds, cols }">
+        <CrudToolbarLeft
+          :remove-ids="removeIds"
+          :perm-delete="['module_system:log:delete']"
+          @delete="onToolbar('delete')"
+        />
+        <div class="data-table__toolbar--right">
+          <CrudToolbarRight :buttons="toolbarRight" :cols="cols" :on-toolbar="onToolbar">
+            <template #prepend>
+              <el-tooltip content="导出">
+                <el-button
+                  v-hasPerm="['module_system:log:export']"
+                  type="warning"
+                  icon="download"
+                  circle
+                  @click="handleOpenExportsModal"
+                />
+              </el-tooltip>
+            </template>
+          </CrudToolbarRight>
+        </div>
+      </template>
+
+      <template #table="{ data, loading, tableRef, onSelectionChange, pagination }">
+        <div class="data-table__content">
+          <el-table
+            :ref="tableRef as any"
+            v-loading="loading"
+            row-key="id"
+            :data="data"
+            height="100%"
+            border
+            stripe
+            @selection-change="onSelectionChange"
+          >
+            <template #empty>
+              <el-empty :image-size="80" description="暂无数据" />
+            </template>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'selection')?.show"
+              type="selection"
+              min-width="55"
+              align="center"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'index')?.show"
+              fixed
+              label="序号"
+              min-width="60"
+            >
+              <template #default="scope">
+                {{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }}
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'type')?.show"
+              label="日志类型"
+              prop="type"
+              min-width="100"
+            >
+              <template #default="scope">
+                <el-tag :type="scope.row.type === 1 ? 'success' : 'primary'">
+                  {{ scope.row.type === 1 ? "登录日志" : "操作日志" }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'request_path')?.show"
+              label="请求路径"
+              prop="request_path"
+              min-width="200"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'request_method')?.show"
+              label="请求方法"
+              prop="request_method"
+              min-width="100"
+            >
+              <template #default="scope">
+                <el-tag :type="getMethodType(scope.row.request_method)">
+                  {{ scope.row.request_method }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'response_code')?.show"
+              label="状态码"
+              prop="response_code"
+              min-width="100"
+            >
+              <template #default="scope">
+                <el-tag :type="getStatusCodeType(scope.row.response_code)">
+                  {{ scope.row.response_code }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'request_ip')?.show"
+              label="请求IP"
+              prop="request_ip"
+              min-width="180"
+              show-overflow-tooltip
+            >
+              <template #default="scope">
+                <el-text>{{ scope.row.request_ip }}</el-text>
+                <CopyButton
+                  v-if="scope.row.request_ip"
+                  :text="scope.row.request_ip"
+                  :style="{ marginLeft: '2px' }"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'process_time')?.show"
+              label="处理时间"
+              prop="process_time"
+              min-width="120"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'request_browser')?.show"
+              label="浏览器"
+              prop="request_browser"
+              min-width="220"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'request_os')?.show"
+              label="系统"
+              prop="request_os"
+              min-width="100"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'description')?.show"
+              label="描述"
+              prop="description"
+              min-width="120"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'created_time')?.show"
+              label="创建时间"
+              prop="created_time"
+              min-width="200"
+              sortable
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'created_id')?.show"
+              label="创建人"
+              prop="created_id"
+              min-width="120"
+            >
+              <template #default="scope">
+                {{ scope.row.created_by?.name }}
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'updated_id')?.show"
+              label="更新人"
+              prop="updated_id"
+              min-width="120"
+            >
+              <template #default="scope">
+                {{ scope.row.updated_by?.name }}
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'operation')?.show"
+              fixed="right"
+              label="操作"
+              align="center"
+              min-width="150"
+            >
+              <template #default="scope">
+                <el-button
+                  v-hasPerm="['module_system:log:detail']"
+                  type="info"
+                  size="small"
+                  link
+                  icon="View"
+                  @click="handleOpenDialog('detail', scope.row.id)"
+                >
+                  详情
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_system:log:delete']"
+                  type="danger"
+                  size="small"
+                  link
+                  icon="delete"
+                  @click="handleRowDelete(scope.row.id)"
+                >
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </template>
+    </PageContent>
+
+    <EnhancedDialog
+      v-model="dialogVisible.visible"
+      :title="dialogVisible.title"
+      @close="handleCloseDialog"
+    >
+      <template v-if="dialogVisible.type === 'detail'">
+        <el-descriptions :column="8" border label-width="200px">
+          <el-descriptions-item label="日志类型" :span="2">
+            <el-tag :type="formData.type === 1 ? 'success' : 'primary'">
+              {{ formData.type === 1 ? "登录日志" : "操作日志" }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="请求路径" :span="2">
+            {{ formData.request_path }}
+          </el-descriptions-item>
+          <el-descriptions-item label="请求方法" :span="2">
+            <el-tag :type="getMethodType(formData.request_method)">
+              {{ formData.request_method }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="响应状态码" :span="2">
+            <el-tag :type="getStatusCodeType(formData.response_code)">
+              {{ formData.response_code }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="请求IP" :span="2">
+            {{ formData.request_ip }}
+          </el-descriptions-item>
+          <el-descriptions-item label="处理时间" :span="2">
+            {{ formData.process_time }}
+          </el-descriptions-item>
+          <el-descriptions-item label="浏览器" :span="2">
+            {{ formData.request_browser }}
+          </el-descriptions-item>
+          <el-descriptions-item label="操作系统" :span="2">
+            {{ formData.request_os }}
+          </el-descriptions-item>
+          <el-descriptions-item label="请求参数" :span="8">
+            <JsonPretty :value="formData.request_payload" height="80px" />
+          </el-descriptions-item>
+          <el-descriptions-item label="响应数据" :span="8">
+            <JsonPretty :value="formData.response_json" height="140px" />
+          </el-descriptions-item>
+          <el-descriptions-item label="登录地点" :span="4">
+            {{ formData.login_location }}
+          </el-descriptions-item>
+          <el-descriptions-item label="描述" :span="8">
+            {{ formData.description }}
+          </el-descriptions-item>
+          <el-descriptions-item label="创建人" :span="4">
+            {{ formData.created_by?.name }}
+          </el-descriptions-item>
+          <el-descriptions-item label="更新人" :span="4">
+            {{ formData.updated_by?.name }}
+          </el-descriptions-item>
+          <el-descriptions-item label="创建时间" :span="4">
+            {{ formData.created_time }}
+          </el-descriptions-item>
+          <el-descriptions-item label="更新时间" :span="4">
+            {{ formData.updated_time }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </template>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="handleCloseDialog">取消</el-button>
+          <el-button
+            v-hasPerm="['module_system:log:detail']"
+            type="primary"
+            @click="handleCloseDialog"
+          >
+            确定
+          </el-button>
+        </div>
+      </template>
+    </EnhancedDialog>
+
+    <ExportModal
+      v-model="exportsDialogVisible"
+      :content-config="curdContentConfig"
+      :query-params="exportQueryParams"
+      :page-data="exportPageData"
+      :selection-data="exportSelectionData"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  name: "Log",
+  inheritAttrs: false,
+});
+
+import { ref, reactive, computed, unref, markRaw, nextTick } from "vue";
+import { fetchAllPages } from "@/utils/fetchAllPages";
+import LogAPI, { LogTable, LogPageQuery } from "@/api/module_system/log";
+import UserTableSelect from "@/views/module_system/user/components/UserTableSelect.vue";
+import ExportModal from "@/components/CURD/ExportModal.vue";
+import CrudToolbarLeft from "@/components/CURD/CrudToolbarLeft.vue";
+import CrudToolbarRight from "@/components/CURD/CrudToolbarRight.vue";
+import PageSearch from "@/components/CURD/PageSearch.vue";
+import PageContent from "@/components/CURD/PageContent.vue";
+import EnhancedDialog from "@/components/CURD/EnhancedDialog.vue";
+import JsonPretty from "@/components/JsonPretty/index.vue";
+import { useCrudList } from "@/components/CURD/useCrudList";
+import type { IContentConfig, ISearchConfig } from "@/components/CURD/types";
+
+const { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList } = useCrudList();
+
+function triggerUserSearch() {
+  nextTick(() => refreshList());
+}
+
+const searchConfig = reactive<ISearchConfig>({
+  permPrefix: "module_system:log",
+  colon: true,
+  isExpandable: true,
+  showNumber: 2,
+  form: { labelWidth: "auto" },
+  formItems: [
+    {
+      prop: "request_path",
+      label: "请求路径",
+      type: "input",
+      attrs: { placeholder: "请输入请求路径", clearable: true },
+    },
+    {
+      prop: "type",
+      label: "日志类型",
+      type: "select",
+      options: [
+        { label: "登录日志", value: 1 },
+        { label: "操作日志", value: 2 },
+      ],
+      attrs: { placeholder: "请选择日志类型", clearable: true, style: { width: "167.5px" } },
+    },
+    {
+      prop: "created_id",
+      label: "创建人",
+      type: "user-table-select",
+      initialValue: null,
+      events: {
+        "confirm-click": triggerUserSearch,
+        "clear-click": triggerUserSearch,
+      },
+    },
+    {
+      prop: "created_time",
+      label: "创建时间",
+      type: "date-picker",
+      initialValue: [],
+      attrs: {
+        type: "datetimerange",
+        valueFormat: "YYYY-MM-DD HH:mm:ss",
+        rangeSeparator: "至",
+        startPlaceholder: "开始日期",
+        endPlaceholder: "结束日期",
+        style: { width: "340px" },
+      },
+    },
+  ],
+  customComponents: {
+    "user-table-select": markRaw(UserTableSelect),
+  },
+});
+
+const contentCols = reactive<
+  Array<{
+    prop?: string;
+    label?: string;
+    show?: boolean;
+  }>
+>([
+  { prop: "selection", label: "选择框", show: true },
+  { prop: "index", label: "序号", show: true },
+  { prop: "type", label: "日志类型", show: true },
+  { prop: "request_path", label: "请求路径", show: true },
+  { prop: "request_method", label: "请求方法", show: true },
+  { prop: "response_code", label: "状态码", show: true },
+  { prop: "request_ip", label: "请求IP", show: true },
+  { prop: "process_time", label: "处理时间", show: true },
+  { prop: "request_browser", label: "浏览器", show: true },
+  { prop: "request_os", label: "系统", show: true },
+  { prop: "description", label: "描述", show: true },
+  { prop: "created_time", label: "创建时间", show: true },
+  { prop: "created_id", label: "创建人", show: true },
+  { prop: "updated_id", label: "更新人", show: true },
+  { prop: "operation", label: "操作", show: true },
+]);
+
+const contentConfig = reactive<IContentConfig<LogPageQuery>>({
+  permPrefix: "module_system:log",
+  pk: "id",
+  cols: contentCols as IContentConfig["cols"],
+  hideColumnFilter: false,
+  toolbar: [],
+  defaultToolbar: ["refresh", "filter"],
+  pagination: {
+    pageSize: 10,
+    pageSizes: [10, 20, 30, 50],
+  },
+  request: { page_no: "page_no", page_size: "page_size" },
+  indexAction: async (params) => {
+    const res = await LogAPI.listLog(params as LogPageQuery);
+    return {
+      total: res.data.data.total,
+      list: res.data.data.items,
+    };
+  },
+  deleteAction: async (ids) => {
+    await LogAPI.deleteLog(
+      ids
+        .split(",")
+        .map((s) => Number(s.trim()))
+        .filter((n) => !Number.isNaN(n))
+    );
+  },
+  deleteConfirm: {
+    title: "警告",
+    message: "确认删除该项数据?",
+    type: "warning",
+  },
+});
+
+const formData = ref<LogTable>({});
+
+const dialogVisible = reactive({
+  title: "",
+  visible: false,
+  type: "create" as "create" | "update" | "detail",
+});
+
+const getStatusCodeType = (code?: number) => {
+  if (code === undefined) {
+    return "info";
+  }
+  if (code >= 200 && code < 300) {
+    return "success";
+  } else if (code >= 300 && code < 400) {
+    return "warning";
+  } else if (code >= 400 && code < 500) {
+    return "danger";
+  } else {
+    return "danger";
+  }
+};
+
+const getMethodType = (method?: string) => {
+  if (method === undefined) {
+    return "info";
+  }
+  if (method === "GET") {
+    return "info";
+  } else if (method === "POST") {
+    return "success";
+  } else if (method === "PUT" || method === "PATCH") {
+    return "warning";
+  } else if (method === "DELETE") {
+    return "danger";
+  } else {
+    return "info";
+  }
+};
+
+async function resetForm() {
+  formData.value.id = undefined;
+}
+
+async function handleCloseDialog() {
+  dialogVisible.visible = false;
+  await resetForm();
+}
+
+async function handleOpenDialog(type: "create" | "update" | "detail", id: number) {
+  dialogVisible.type = type;
+  if (id) {
+    const response = await LogAPI.detailLog(id);
+    if (type === "detail") {
+      dialogVisible.title = "日志详情";
+      Object.assign(formData.value, response.data.data);
+    }
+  }
+  dialogVisible.visible = true;
+}
+
+function handleRowDelete(id: number) {
+  contentRef.value?.handleDelete(id);
+}
+
+const exportsDialogVisible = ref(false);
+
+const exportQueryParams = computed(() => searchRef.value?.getQueryParams() ?? {});
+
+const exportPageData = computed(() => {
+  const pd = contentRef.value?.pageData;
+  return (unref(pd) ?? []) as LogTable[];
+});
+
+const exportSelectionData = computed(
+  () => (contentRef.value?.getSelectionData() ?? []) as LogTable[]
+);
+
+const exportColumns = [
+  { prop: "type", label: "日志类型" },
+  { prop: "request_path", label: "请求路径" },
+  { prop: "request_method", label: "请求方法" },
+  { prop: "response_code", label: "状态码" },
+  { prop: "request_ip", label: "请求IP" },
+  { prop: "login_location", label: "登录地点" },
+  { prop: "process_time", label: "处理时间" },
+  { prop: "request_browser", label: "浏览器" },
+  { prop: "request_os", label: "系统" },
+  { prop: "description", label: "描述" },
+  { prop: "created_time", label: "创建时间" },
+  { prop: "updated_time", label: "更新时间" },
+];
+
+const curdContentConfig = {
+  permPrefix: "module_system:log",
+  cols: exportColumns as any,
+  exportsAction: async (params: any) => {
+    const query: Record<string, unknown> = { ...params };
+    return fetchAllPages({
+      initialQuery: query,
+      fetchPage: async (q) => {
+        const res = await LogAPI.listLog(q as unknown as LogPageQuery);
+        return {
+          total: res.data?.data?.total ?? 0,
+          list: res.data?.data?.items ?? [],
+        };
+      },
+    });
+  },
+} as unknown as IContentConfig;
+
+function handleOpenExportsModal() {
+  exportsDialogVisible.value = true;
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/frontend/new-web/src/views/module_system/menu/index.vue b/frontend/new-web/src/views/module_system/menu/index.vue
new file mode 100644
index 00000000..62be70c9
--- /dev/null
+++ b/frontend/new-web/src/views/module_system/menu/index.vue
@@ -0,0 +1,1048 @@
+<!-- 菜单管理 -->
+<template>
+  <div class="app-container">
+    <PageSearch
+      ref="searchRef"
+      :search-config="searchConfig"
+      @query-click="handleQueryClick"
+      @reset-click="handleResetClick"
+    />
+
+    <el-tabs
+      v-model="menuClientTab"
+      class="menu-client-tabs px-1 mb-2"
+      @tab-change="handleMenuClientTabChange"
+    >
+      <el-tab-pane label="PC 桌面菜单管理" name="pc" />
+      <el-tab-pane label="APP 移动端菜单管理" name="app" />
+    </el-tabs>
+
+    <PageContent ref="contentRef" :content-config="contentConfig">
+      <template #toolbar="{ toolbarRight, onToolbar, removeIds, cols }">
+        <CrudToolbarLeft
+          :remove-ids="removeIds"
+          :perm-create="['module_system:menu:create']"
+          :perm-delete="['module_system:menu:delete']"
+          :perm-patch="['module_system:menu:patch']"
+          @add="handleOpenDialog('create')"
+          @delete="onToolbar('delete')"
+          @more="handleMoreClick"
+        />
+        <div class="data-table__toolbar--right">
+          <CrudToolbarRight :buttons="toolbarRight" :cols="cols" :on-toolbar="onToolbar" />
+        </div>
+      </template>
+
+      <template #table="{ data, loading, tableRef, onSelectionChange }">
+        <div class="data-table__content">
+          <el-table
+            :ref="tableRef as any"
+            v-loading="loading"
+            row-key="id"
+            :data="data"
+            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+            height="100%"
+            border
+            @selection-change="onSelectionChange"
+            @row-click="handleRowClick"
+          >
+            <template #empty>
+              <el-empty :image-size="80" description="暂无数据" />
+            </template>
+            <el-table-column type="selection" min-width="55" align="center" />
+            <el-table-column type="index" fixed label="序号" min-width="60" />
+            <el-table-column label="菜单名称" prop="name" min-width="240" />
+            <el-table-column label="图标" prop="icon" min-width="80" align="center">
+              <template #default="scope">
+                <template v-if="scope.row.icon && scope.row.icon.startsWith('el-icon')">
+                  <el-icon style="vertical-align: -0.15em">
+                    <component :is="scope.row.icon.replace('el-icon-', '')" />
+                  </el-icon>
+                </template>
+                <template v-else-if="scope.row.icon">
+                  <div :class="`i-svg:${scope.row.icon}`" />
+                </template>
+              </template>
+            </el-table-column>
+            <el-table-column label="状态" prop="status" min-width="80" align="center">
+              <template #default="scope">
+                <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">
+                  {{ scope.row.status === "0" ? "启用" : "停用" }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="类型" prop="type" min-width="80" align="center">
+              <template #default="scope">
+                <el-tag v-if="scope.row.type === MenuTypeEnum.CATALOG" type="warning">目录</el-tag>
+                <el-tag v-if="scope.row.type === MenuTypeEnum.MENU" type="success">菜单</el-tag>
+                <el-tag v-if="scope.row.type === MenuTypeEnum.BUTTON" type="danger">按钮</el-tag>
+                <el-tag v-if="scope.row.type === MenuTypeEnum.EXTLINK" type="info">外链</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="终端" prop="client" min-width="88" align="center">
+              <template #default="scope">
+                <el-tag v-if="scope.row.client === MenuClientEnum.PC" type="primary">PC</el-tag>
+                <el-tag v-else-if="scope.row.client === MenuClientEnum.APP" type="success">
+                  APP
+                </el-tag>
+                <el-tag v-else type="info">{{ scope.row.client || "—" }}</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="排序" prop="order" min-width="80" />
+            <el-table-column
+              label="路由名称"
+              prop="route_name"
+              show-overflow-toolti
+              min-width="100"
+            />
+            <el-table-column
+              label="路由路径"
+              prop="route_path"
+              show-overflow-tooltip
+              min-width="200"
+            />
+            <el-table-column
+              label="权限标识"
+              prop="permission"
+              show-overflow-tooltip
+              min-width="220"
+            />
+            <el-table-column
+              label="组件路径"
+              prop="component_path"
+              show-overflow-tooltip
+              min-width="200"
+            />
+            <el-table-column label="重定向" prop="redirect" min-width="120" show-overflow-tooltip />
+            <el-table-column label="是否缓存" prop="keep_alive" min-width="100">
+              <template #default="scope">
+                <el-tag :type="scope.row.keep_alive ? 'success' : 'danger'">
+                  {{ scope.row.keep_alive ? "是" : "否" }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="是否隐藏" prop="hidden" min-width="100">
+              <template #default="scope">
+                <el-tag :type="scope.row.hidden ? 'success' : 'danger'">
+                  {{ scope.row.hidden ? "是" : "否" }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="显示根路由" prop="always_show" min-width="120">
+              <template #default="scope">
+                <el-tag :type="scope.row.always_show ? 'success' : 'danger'">
+                  {{ scope.row.always_show ? "是" : "否" }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="固定路由" prop="affix" min-width="100">
+              <template #default="scope">
+                <el-tag :type="scope.row.affix ? 'success' : 'danger'">
+                  {{ scope.row.affix ? "是" : "否" }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="菜单标题" prop="title" min-width="100" show-overflow-tooltip />
+            <el-table-column label="路由参数" prop="params" min-width="100" />
+            <el-table-column
+              label="描述"
+              prop="description"
+              show-overflow-tooltip
+              min-width="200"
+            />
+            <el-table-column
+              label="创建时间"
+              prop="created_time"
+              min-width="200"
+              sortable
+              show-overflow-tooltip
+            />
+            <el-table-column
+              label="更新时间"
+              prop="updated_time"
+              min-width="200"
+              sortable
+              show-overflow-tooltip
+            />
+            <el-table-column fixed="right" label="操作" align="center" min-width="260">
+              <template #default="scope">
+                <el-button
+                  v-if="
+                    scope.row.type == MenuTypeEnum.CATALOG || scope.row.type == MenuTypeEnum.MENU
+                  "
+                  v-hasPerm="['module_system:menu:create']"
+                  type="success"
+                  link
+                  size="small"
+                  icon="plus"
+                  @click.stop="handleOpenDialog('create', undefined, scope.row)"
+                >
+                  新增
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_system:menu:detail']"
+                  type="info"
+                  size="small"
+                  link
+                  icon="View"
+                  @click="handleOpenDialog('detail', scope.row.id)"
+                >
+                  详情
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_system:menu:update']"
+                  type="primary"
+                  size="small"
+                  link
+                  icon="edit"
+                  @click="handleOpenDialog('update', scope.row.id)"
+                >
+                  编辑
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_system:menu:delete']"
+                  type="danger"
+                  size="small"
+                  link
+                  icon="delete"
+                  @click="handleRowDelete(scope.row.id)"
+                >
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </template>
+    </PageContent>
+
+    <EnhancedDrawer
+      v-model="dialogVisible.visible"
+      :title="dialogVisible.title"
+      :size="drawerSize"
+      @close="handleCloseDialog"
+    >
+      <!-- 详情 -->
+      <template v-if="dialogVisible.type === 'detail'">
+        <el-descriptions :column="4" border>
+          <el-descriptions-item label="编号" :span="2">
+            {{ detailFormData.id }}
+          </el-descriptions-item>
+          <el-descriptions-item label="菜单名称" :span="2">
+            {{ detailFormData.name }}
+          </el-descriptions-item>
+          <el-descriptions-item label="菜单类型" :span="2">
+            <el-tag v-if="detailFormData.type === MenuTypeEnum.CATALOG" type="warning">目录</el-tag>
+            <el-tag v-if="detailFormData.type === MenuTypeEnum.MENU" type="success">菜单</el-tag>
+            <el-tag v-if="detailFormData.type === MenuTypeEnum.BUTTON" type="danger">按钮</el-tag>
+            <el-tag v-if="detailFormData.type === MenuTypeEnum.EXTLINK" type="info">外链</el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="终端" :span="2">
+            <el-tag v-if="detailFormData.client === MenuClientEnum.PC" type="primary">PC</el-tag>
+            <el-tag v-else-if="detailFormData.client === MenuClientEnum.APP" type="success">
+              APP
+            </el-tag>
+            <el-tag v-else type="info">{{ detailFormData.client || "—" }}</el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="图标" :span="2">
+            <template #default>
+              <template v-if="detailFormData.icon && detailFormData.icon.startsWith('el-icon')">
+                <el-icon style="vertical-align: -0.15em">
+                  <component :is="detailFormData.icon.replace('el-icon-', '')" />
+                </el-icon>
+              </template>
+              <template v-else-if="detailFormData.icon">
+                <div :class="`i-svg:${detailFormData.icon}`" />
+              </template>
+            </template>
+          </el-descriptions-item>
+          <el-descriptions-item label="排序" :span="2">
+            {{ detailFormData.order }}
+          </el-descriptions-item>
+          <el-descriptions-item label="权限标识" :span="2">
+            {{ detailFormData.permission }}
+          </el-descriptions-item>
+          <el-descriptions-item label="路由名称" :span="2">
+            {{ detailFormData.route_name }}
+          </el-descriptions-item>
+          <el-descriptions-item label="路由路径" :span="2">
+            {{ detailFormData.route_path }}
+          </el-descriptions-item>
+          <el-descriptions-item label="组件路径" :span="2">
+            {{ detailFormData.component_path }}
+          </el-descriptions-item>
+          <el-descriptions-item label="重定向" :span="2">
+            {{ detailFormData.redirect }}
+          </el-descriptions-item>
+          <el-descriptions-item label="父级编号" :span="2">
+            {{ detailFormData.parent_id }}
+          </el-descriptions-item>
+          <el-descriptions-item label="父级菜单" :span="2">
+            {{ detailFormData.parent_name }}
+          </el-descriptions-item>
+          <el-descriptions-item label="是否缓存" :span="2">
+            <el-tag :type="detailFormData.keep_alive ? 'success' : 'danger'">
+              {{ detailFormData.keep_alive ? "是" : "否" }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="是否显示" :span="2">
+            <el-tag :type="detailFormData.hidden ? 'success' : 'danger'">
+              {{ detailFormData.hidden ? "是" : "否" }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="是否显示根路由" :span="2">
+            <el-tag :type="detailFormData.always_show ? 'success' : 'danger'">
+              {{ detailFormData.always_show ? "是" : "否" }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="菜单标题" :span="2">
+            {{ detailFormData.title }}
+          </el-descriptions-item>
+          <el-descriptions-item label="路由参数" :span="2">
+            {{ detailFormData.params }}
+          </el-descriptions-item>
+          <el-descriptions-item label="是否固定路由" :span="2">
+            <el-tag :type="detailFormData.affix ? 'success' : 'danger'">
+              {{ detailFormData.affix ? "是" : "否" }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="状态" :span="2">
+            <el-tag :type="detailFormData.status === '0' ? 'success' : 'danger'">
+              {{ detailFormData.status === "0" ? "启用" : "停用" }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="排序" :span="2">
+            {{ detailFormData.order }}
+          </el-descriptions-item>
+          <el-descriptions-item label="创建时间" :span="2">
+            {{ detailFormData.created_time }}
+          </el-descriptions-item>
+          <el-descriptions-item label="更新时间" :span="2">
+            {{ detailFormData.updated_time }}
+          </el-descriptions-item>
+          <el-descriptions-item label="描述" :span="4">
+            {{ detailFormData.description }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </template>
+
+      <!-- 新增、编辑表单 -->
+      <template v-else>
+        <el-form
+          ref="dataFormRef"
+          :model="formData"
+          :rules="rules"
+          label-suffix=":"
+          label-width="auto"
+          label-position="right"
+        >
+          <el-form-item
+            v-if="formData.type !== MenuTypeEnum.CATALOG"
+            label="父级菜单"
+            prop="parent_id"
+          >
+            <el-tree-select
+              v-model="formData.parent_id"
+              placeholder="选择上级菜单"
+              :data="menuOptions"
+              filterable
+              check-strictly
+              :render-after-expand="false"
+              :disabled="createParentLocked"
+            />
+            <el-text v-if="createParentLocked" type="info" size="small" class="block mt-1">
+              在菜单下仅可新增按钮，父级已固定
+            </el-text>
+          </el-form-item>
+
+          <el-form-item label="菜单名称" prop="name">
+            <el-input v-model="formData.name" placeholder="请输入菜单名称" />
+          </el-form-item>
+
+          <el-form-item label="菜单标题" prop="title">
+            <el-input v-model="formData.title" placeholder="请输入菜单标题" />
+          </el-form-item>
+
+          <el-form-item label="菜单类型" prop="type">
+            <el-radio-group v-model="formData.type" @change="handleMenuTypeChange">
+              <el-radio
+                v-if="allowedMenuTypeValues.includes(MenuTypeEnum.CATALOG)"
+                :value="MenuTypeEnum.CATALOG"
+              >
+                目录
+              </el-radio>
+              <el-radio
+                v-if="allowedMenuTypeValues.includes(MenuTypeEnum.MENU)"
+                :value="MenuTypeEnum.MENU"
+              >
+                菜单
+              </el-radio>
+              <el-radio
+                v-if="allowedMenuTypeValues.includes(MenuTypeEnum.BUTTON)"
+                :value="MenuTypeEnum.BUTTON"
+              >
+                按钮
+              </el-radio>
+              <el-radio
+                v-if="allowedMenuTypeValues.includes(MenuTypeEnum.EXTLINK)"
+                :value="MenuTypeEnum.EXTLINK"
+              >
+                外链
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+
+          <el-form-item label="终端" prop="client">
+            <el-radio-group v-model="formData.client" :disabled="createParentLocked">
+              <el-radio :value="MenuClientEnum.PC">PC 桌面</el-radio>
+              <el-radio :value="MenuClientEnum.APP">APP 移动</el-radio>
+            </el-radio-group>
+            <el-text v-if="createParentLocked" type="info" size="small" class="block mt-1">
+              子级终端与父菜单一致
+            </el-text>
+          </el-form-item>
+
+          <el-form-item v-if="formData.type == MenuTypeEnum.EXTLINK" label="外链地址" prop="path">
+            <el-input v-model="formData.route_path" placeholder="请输入外链完整路径" />
+          </el-form-item>
+
+          <el-form-item v-if="formData.type !== MenuTypeEnum.BUTTON" prop="route_name">
+            <template #label>
+              <div class="flex-y-center">
+                路由名称
+                <el-tooltip placement="bottom" effect="light">
+                  <template #content>
+                    如果需要开启缓存，需保证页面 defineOptions 中的 name 与此处一致，建议使用驼峰。
+                  </template>
+                  <el-icon class="ml-1 cursor-pointer">
+                    <QuestionFilled />
+                  </el-icon>
+                </el-tooltip>
+              </div>
+            </template>
+            <el-input v-model="formData.route_name" placeholder="请输入路由名称" />
+          </el-form-item>
+
+          <el-form-item
+            v-if="formData.type == MenuTypeEnum.CATALOG || formData.type == MenuTypeEnum.MENU"
+            prop="route_path"
+          >
+            <template #label>
+              <div class="flex-y-center">
+                路由路径
+                <el-tooltip placement="bottom" effect="light">
+                  <template #content>
+                    定义应用中不同页面对应的 URL 路径，目录需以 /
+                    开头，菜单项不用。例如：系统管理目录 /system，系统管理下的用户管理菜单 user。
+                  </template>
+                  <el-icon class="ml-1 cursor-pointer">
+                    <QuestionFilled />
+                  </el-icon>
+                </el-tooltip>
+              </div>
+            </template>
+            <el-input v-model="formData.route_path" placeholder="请输入路由路径,如：/system" />
+          </el-form-item>
+
+          <el-form-item v-if="formData.type == MenuTypeEnum.MENU" prop="component">
+            <template #label>
+              <div class="flex-y-center">
+                组件路径
+                <el-tooltip placement="bottom" effect="light">
+                  <template #content>
+                    组件页面完整路径，相对于 src/views/，如 system/user/index，缺省后缀 .vue
+                  </template>
+                  <el-icon class="ml-1 cursor-pointer">
+                    <QuestionFilled />
+                  </el-icon>
+                </el-tooltip>
+              </div>
+            </template>
+
+            <el-input
+              v-model="formData.component_path"
+              placeholder="请输入组件路径，如system/user/index"
+              style="width: 95%"
+            >
+              <template v-if="formData.type == MenuTypeEnum.MENU" #prepend>src/views/</template>
+              <template v-if="formData.type == MenuTypeEnum.MENU" #append>.vue</template>
+            </el-input>
+          </el-form-item>
+
+          <el-form-item v-if="formData.type == MenuTypeEnum.MENU">
+            <template #label>
+              <div class="flex-y-center">
+                路由参数
+                <el-tooltip placement="bottom" effect="light">
+                  <template #content>
+                    组件页面使用 `useRoute().query.参数名` 获取路由参数值。
+                  </template>
+                  <el-icon class="ml-1 cursor-pointer">
+                    <QuestionFilled />
+                  </el-icon>
+                </el-tooltip>
+              </div>
+            </template>
+
+            <div
+              v-if="
+                !formData.params || (Array.isArray(formData.params) && formData.params.length === 0)
+              "
+            >
+              <el-button type="success" plain @click="formData.params = [{ key: '', value: '' }]">
+                添加路由参数
+              </el-button>
+            </div>
+
+            <div v-else>
+              <div v-for="(item, index) in formData.params" :key="index">
+                <el-input v-model="item.key" placeholder="参数名" style="width: 100px" />
+
+                <span class="mx-1">=</span>
+
+                <el-input v-model="item.value" placeholder="参数值" style="width: 100px" />
+
+                <el-icon
+                  v-if="formData.params.indexOf(item) === formData.params.length - 1"
+                  class="ml-2 cursor-pointer color-[var(--el-color-success)]"
+                  style="vertical-align: -0.15em"
+                  @click="formData.params.push({ key: '', value: '' })"
+                >
+                  <CirclePlusFilled />
+                </el-icon>
+                <el-icon
+                  class="ml-2 cursor-pointer color-[var(--el-color-danger)]"
+                  style="vertical-align: -0.15em"
+                  @click="formData.params.splice(formData.params.indexOf(item), 1)"
+                >
+                  <DeleteFilled />
+                </el-icon>
+              </div>
+            </div>
+          </el-form-item>
+
+          <el-form-item v-if="formData.type !== MenuTypeEnum.BUTTON">
+            <template #label>
+              <div class="flex-y-center">
+                是否隐藏
+                <el-tooltip placement="bottom" effect="light">
+                  <template #content>
+                    选择"是", 菜单中隐藏
+                    <br />
+                    选择"否"，菜单中显示。
+                    <br />
+                  </template>
+                  <el-icon class="ml-1 cursor-pointer">
+                    <QuestionFilled />
+                  </el-icon>
+                </el-tooltip>
+              </div>
+            </template>
+
+            <el-radio-group v-model="formData.hidden">
+              <el-radio :value="true">是</el-radio>
+              <el-radio :value="false">否</el-radio>
+            </el-radio-group>
+          </el-form-item>
+
+          <el-form-item
+            v-if="formData.type === MenuTypeEnum.CATALOG || formData.type === MenuTypeEnum.MENU"
+          >
+            <template #label>
+              <div class="flex-y-center">
+                始终显示
+                <el-tooltip placement="bottom" effect="light">
+                  <template #content>
+                    选择"是"，即使目录或菜单下只有一个子节点，也会显示父节点。
+                    <br />
+                    选择"否"，如果目录或菜单下只有一个子节点，则只显示该子节点，隐藏父节点。
+                    <br />
+                    如果是叶子节点，请选择"否"。
+                  </template>
+                  <el-icon class="ml-1 cursor-pointer">
+                    <QuestionFilled />
+                  </el-icon>
+                </el-tooltip>
+              </div>
+            </template>
+
+            <el-radio-group v-model="formData.always_show">
+              <el-radio :value="true">是</el-radio>
+              <el-radio :value="false">否</el-radio>
+            </el-radio-group>
+          </el-form-item>
+
+          <el-form-item v-if="formData.type === MenuTypeEnum.MENU" label="缓存页面">
+            <el-radio-group v-model="formData.keep_alive">
+              <el-radio :value="true">开启</el-radio>
+              <el-radio :value="false">关闭</el-radio>
+            </el-radio-group>
+          </el-form-item>
+
+          <el-form-item label="排序" prop="order">
+            <el-input-number v-model="formData.order" controls-position="right" :min="1" />
+          </el-form-item>
+
+          <!-- 权限标识 -->
+          <el-form-item
+            v-if="formData.type == MenuTypeEnum.BUTTON || formData.type === MenuTypeEnum.MENU"
+            label="权限标识"
+            prop="perm"
+          >
+            <el-input v-model="formData.permission" placeholder="请输入权限标识，如sys:user:add" />
+          </el-form-item>
+
+          <el-form-item v-if="formData.type !== MenuTypeEnum.BUTTON" label="图标" prop="icon">
+            <!-- 图标选择器 -->
+            <icon-select v-model="formData.icon" />
+          </el-form-item>
+
+          <el-form-item
+            v-if="formData.type == MenuTypeEnum.CATALOG || formData.type === MenuTypeEnum.MENU"
+            label="重定向"
+            prop="redirect"
+            :required="formData.type === MenuTypeEnum.CATALOG"
+          >
+            <el-input
+              v-model="formData.redirect"
+              :placeholder="
+                formData.type === MenuTypeEnum.CATALOG
+                  ? '目录必填，一般为默认子路由 path，如 /system/user'
+                  : '可选，请输入重定向路由'
+              "
+            />
+          </el-form-item>
+
+          <el-form-item v-if="formData.type != MenuTypeEnum.BUTTON" label="常驻标签栏" prop="affix">
+            <el-radio-group v-model="formData.affix">
+              <el-radio :value="true">是</el-radio>
+              <el-radio :value="false">否</el-radio>
+            </el-radio-group>
+          </el-form-item>
+
+          <el-form-item label="状态" prop="status">
+            <el-radio-group v-model="formData.status">
+              <el-radio value="0">启用</el-radio>
+              <el-radio value="1">禁用</el-radio>
+            </el-radio-group>
+          </el-form-item>
+
+          <el-form-item label="描述" prop="description">
+            <el-input
+              v-model="formData.description"
+              :rows="4"
+              :maxlength="100"
+              show-word-limit
+              type="textarea"
+              placeholder="请输入描述"
+            />
+          </el-form-item>
+        </el-form>
+      </template>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <!-- 详情弹窗不需要确定按钮的提交逻辑 -->
+          <el-button v-if="dialogVisible.type !== 'detail'" type="primary" @click="handleSubmit">
+            确定
+          </el-button>
+          <el-button v-else type="primary" @click="handleCloseDialog">确定</el-button>
+          <el-button @click="handleCloseDialog">取消</el-button>
+        </div>
+      </template>
+    </EnhancedDrawer>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  name: "SysMenu",
+  inheritAttrs: false,
+});
+
+import { ref, reactive, computed, nextTick } from "vue";
+import { useAppStore } from "@/store/modules/app.store";
+import { useUserStore } from "@/store/modules/user.store";
+import { DeviceEnum } from "@/enums/settings/device.enum";
+
+import MenuAPI, { MenuPageQuery, MenuForm, MenuTable } from "@/api/module_system/menu";
+import { MenuClientEnum, MenuTypeEnum } from "@/enums/system/menu.enum";
+import { formatTree } from "@/utils/common";
+import CrudToolbarLeft from "@/components/CURD/CrudToolbarLeft.vue";
+import CrudToolbarRight from "@/components/CURD/CrudToolbarRight.vue";
+import PageSearch from "@/components/CURD/PageSearch.vue";
+import PageContent from "@/components/CURD/PageContent.vue";
+import EnhancedDrawer from "@/components/CURD/EnhancedDrawer.vue";
+import { useCrudList } from "@/components/CURD/useCrudList";
+import type { ISearchConfig, IContentConfig } from "@/components/CURD/types";
+
+const appStore = useAppStore();
+const userStore = useUserStore();
+
+const { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList } = useCrudList();
+
+/** 菜单管理：PC / APP 分栏（与接口 menu_client 一致） */
+const menuClientTab = ref<"pc" | "app">("pc");
+
+function handleMenuClientTabChange(name: string | number) {
+  menuClientTab.value = name === "app" ? "app" : "pc";
+  refreshList();
+}
+
+const dataFormRef = ref();
+
+const searchConfig = reactive<ISearchConfig>({
+  permPrefix: "module_system:menu",
+  colon: true,
+  isExpandable: true,
+  showNumber: 2,
+  form: { labelWidth: "auto" },
+  formItems: [
+    {
+      prop: "name",
+      label: "菜单名称",
+      type: "input",
+      attrs: { placeholder: "请输入菜单名称", clearable: true },
+    },
+    {
+      prop: "status",
+      label: "状态",
+      type: "select",
+      options: [
+        { label: "启用", value: "0" },
+        { label: "停用", value: "1" },
+      ],
+      attrs: { placeholder: "请选择状态", clearable: true, style: { width: "167.5px" } },
+    },
+    {
+      prop: "created_time",
+      label: "创建时间",
+      type: "date-picker",
+      initialValue: [],
+      attrs: {
+        type: "datetimerange",
+        valueFormat: "YYYY-MM-DD HH:mm:ss",
+        rangeSeparator: "至",
+        startPlaceholder: "开始日期",
+        endPlaceholder: "结束日期",
+        style: { width: "340px" },
+      },
+    },
+  ],
+});
+
+const contentCols = reactive([{ prop: "name", label: "菜单名称", show: true }]);
+
+// 详情表单
+const detailFormData = ref<MenuTable>({});
+
+// 编辑表单
+const formData = reactive<MenuForm>({
+  id: undefined,
+  name: undefined,
+  type: MenuTypeEnum.CATALOG,
+  icon: undefined,
+  order: 999,
+  permission: "",
+  route_name: "",
+  route_path: "",
+  component_path: undefined,
+  redirect: undefined,
+  parent_id: undefined,
+  keep_alive: false,
+  hidden: false,
+  always_show: false,
+  title: "",
+  params: undefined,
+  affix: false,
+  status: "0",
+  description: undefined,
+  client: MenuClientEnum.PC,
+});
+
+// 弹窗状态
+const dialogVisible = reactive({
+  title: "",
+  visible: false,
+  type: "create" as "create" | "update" | "detail",
+});
+
+const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? "600px" : "90%"));
+
+// 顶级菜单下拉选项（仅目录、菜单可作为父级）
+const menuOptions = ref<OptionType[]>([]);
+/** 完整树，用于根据 parent_id 解析父级类型 */
+const fullMenuTree = ref<MenuTable[]>([]);
+/** 从表格「在菜单下新增」进入时锁定父级（仅允许按钮） */
+const createParentLocked = ref(false);
+
+/** 目录下：目录、菜单、外链；菜单下：仅按钮 */
+function typesAllowedUnderParent(parentType: MenuTypeEnum): MenuTypeEnum[] {
+  switch (parentType) {
+    case MenuTypeEnum.CATALOG:
+      return [MenuTypeEnum.CATALOG, MenuTypeEnum.MENU, MenuTypeEnum.EXTLINK];
+    case MenuTypeEnum.MENU:
+      return [MenuTypeEnum.BUTTON];
+    case MenuTypeEnum.BUTTON:
+    case MenuTypeEnum.EXTLINK:
+      return [];
+    default:
+      return [MenuTypeEnum.CATALOG, MenuTypeEnum.MENU, MenuTypeEnum.EXTLINK];
+  }
+}
+
+function findMenuNodeById(
+  id: number | undefined,
+  nodes: MenuTable[] = fullMenuTree.value
+): MenuTable | null {
+  if (id == null) return null;
+  for (const n of nodes) {
+    if (n.id === id) return n;
+    if (n.children?.length) {
+      const f = findMenuNodeById(id, n.children);
+      if (f) return f;
+    }
+  }
+  return null;
+}
+
+const contentConfig = reactive<IContentConfig<MenuPageQuery>>({
+  permPrefix: "module_system:menu",
+  pk: "id",
+  cols: contentCols as IContentConfig["cols"],
+  hideColumnFilter: true,
+  toolbar: [],
+  defaultToolbar: ["refresh", "filter"],
+  pagination: false,
+  indexAction: async (params) => {
+    const res = await MenuAPI.listMenu({
+      ...(params as MenuPageQuery),
+      menu_client: menuClientTab.value,
+    });
+    const tree = res.data.data || [];
+    fullMenuTree.value = tree;
+    menuOptions.value = formatTree(filterMenuTypes(tree));
+    return tree;
+  },
+  deleteAction: async (ids) => {
+    await MenuAPI.deleteMenu(
+      ids
+        .split(",")
+        .map((s) => Number(s.trim()))
+        .filter((n) => !Number.isNaN(n))
+    );
+    await userStore.getUserInfo();
+  },
+  deleteConfirm: {
+    title: "警告",
+    message: "确认删除该项数据?",
+    type: "warning",
+  },
+});
+
+function handleRowDelete(id: number) {
+  contentRef.value?.handleDelete(id);
+}
+
+// 表单验证规则
+const rules = reactive({
+  name: [
+    { required: true, message: "请输入菜单名称", trigger: "blur" },
+    { min: 2, max: 50, message: "长度 2 到 50 个字符", trigger: "blur" },
+  ],
+  parent_id: [{ required: true, message: "请选择父级菜单", trigger: "blur" }],
+  type: [{ required: true, message: "请选择菜单类型", trigger: "blur" }],
+  order: [{ required: true, message: "请输入排序", trigger: "blur" }],
+  permission: [{ required: true, message: "请输入权限标识", trigger: "blur" }],
+  route_name: [{ required: true, message: "请输入路由名称", trigger: "blur" }],
+  route_path: [
+    { required: true, message: "请输入路由路径", trigger: "blur" },
+    {
+      validator: (rule: any, value: string, callback: any) => {
+        if (value && !value.startsWith("/")) {
+          callback(new Error("目录和菜单路由必须以/开头"));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur",
+    },
+  ],
+  component_path: [{ required: true, message: "请输入组件路径", trigger: "blur" }],
+  title: [
+    { required: true, message: "请输入菜单标题", trigger: "blur" },
+    { min: 2, max: 50, message: "长度 2 到 50 个字符", trigger: "blur" },
+  ],
+  keep_alive: [{ required: true, message: "请选择是否缓存", trigger: "change" }],
+  hidden: [{ required: true, message: "请选择是否隐藏", trigger: "change" }],
+  always_show: [{ required: true, message: "请选择始终显示", trigger: "change" }],
+  status: [{ required: true, message: "请选择状态", trigger: "change" }],
+  client: [{ required: true, message: "请选择终端", trigger: "change" }],
+  redirect: [
+    {
+      validator: (_rule: unknown, value: string | undefined, callback: (e?: Error) => void) => {
+        if (formData.type === MenuTypeEnum.CATALOG) {
+          if (value === undefined || value === null || String(value).trim() === "") {
+            callback(new Error("目录类型必须填写重定向地址"));
+            return;
+          }
+        }
+        callback();
+      },
+      trigger: "blur",
+    },
+  ],
+});
+
+// 选择表格的行菜单ID
+const selectedMenuId = ref<number | undefined>();
+
+// 定义初始表单数据常量
+const initialFormData: MenuForm = {
+  id: undefined,
+  name: undefined,
+  type: MenuTypeEnum.MENU,
+  icon: undefined,
+  order: 1,
+  permission: "",
+  route_name: "",
+  route_path: "",
+  component_path: "",
+  redirect: "",
+  parent_id: undefined,
+  keep_alive: false,
+  hidden: false,
+  always_show: false,
+  title: "",
+  params: [] as { key: string; value: string }[],
+  affix: false,
+  status: "0",
+  description: undefined,
+  client: MenuClientEnum.PC,
+};
+
+// 重置表单
+async function resetForm() {
+  if (dataFormRef.value) {
+    dataFormRef.value.resetFields();
+    dataFormRef.value.clearValidate();
+  }
+  // 完全重置 formData 为初始状态
+  Object.assign(formData, initialFormData);
+}
+
+// 行点击事件
+async function handleRowClick(row: MenuTable) {
+  selectedMenuId.value = row.id;
+}
+
+// 根据父级ID获取允许的菜单类型
+const allowedMenuTypeValues = computed(() => {
+  const pid = formData.parent_id;
+  const parentNode = findMenuNodeById(pid);
+  if (!parentNode?.type) {
+    return [MenuTypeEnum.CATALOG, MenuTypeEnum.MENU, MenuTypeEnum.EXTLINK];
+  }
+  return typesAllowedUnderParent(parentNode.type as MenuTypeEnum);
+});
+
+// 关闭弹窗
+async function handleCloseDialog() {
+  dialogVisible.visible = false;
+  createParentLocked.value = false;
+  resetForm();
+}
+
+//打开弹窗
+async function handleOpenDialog(
+  type: "create" | "update" | "detail",
+  id?: number,
+  parentRow?: MenuTable
+) {
+  dialogVisible.type = type;
+  createParentLocked.value = false;
+  if (id) {
+    const response = await MenuAPI.detailMenu(id);
+    if (type === "detail") {
+      dialogVisible.title = "菜单详情";
+      Object.assign(detailFormData.value, response.data.data);
+    } else if (type === "update") {
+      dialogVisible.title = "修改菜单";
+      Object.assign(formData, response.data.data);
+    }
+  } else {
+    dialogVisible.title = "新增菜单";
+    Object.assign(formData, initialFormData);
+    if (parentRow?.id != null) {
+      formData.parent_id = parentRow.id;
+      formData.client = (parentRow.client as MenuClientEnum) || menuClientTab.value;
+      if (parentRow.type === MenuTypeEnum.MENU) {
+        createParentLocked.value = true;
+        formData.type = MenuTypeEnum.BUTTON;
+      } else if (parentRow.type === MenuTypeEnum.CATALOG) {
+        formData.type = MenuTypeEnum.MENU;
+      }
+    } else {
+      formData.client = menuClientTab.value;
+    }
+  }
+  dialogVisible.visible = true;
+}
+
+// 菜单类型切换
+function handleMenuTypeChange() {
+  if (formData.type === MenuTypeEnum.MENU) {
+    formData.component_path = "";
+  }
+  nextTick(() => {
+    dataFormRef.value?.clearValidate("redirect");
+    if (formData.type === MenuTypeEnum.CATALOG) {
+      dataFormRef.value?.validateField("redirect").catch(() => {});
+    }
+  });
+}
+
+// 提交表单
+async function handleSubmit() {
+  const allowed = allowedMenuTypeValues.value;
+  if (!allowed.length) return;
+  const t = formData.type as MenuTypeEnum;
+  if (!allowed.includes(t)) {
+    formData.type = allowed[0] as MenuForm["type"];
+  }
+}
+
+function filterMenuTypes(nodes: MenuTable[]) {
+  return nodes
+    .filter((node) => node.type === MenuTypeEnum.CATALOG || node.type === MenuTypeEnum.MENU)
+    .map((node: any): any => ({
+      ...node,
+      children: node.children ? filterMenuTypes(node.children) : [],
+    }));
+}
+
+async function handleMoreClick(status: string) {
+  const rows = contentRef.value?.getSelectionData() as MenuTable[] | undefined;
+  const ids = (rows ?? []).map((r) => r.id).filter((id): id is number => id != null);
+  if (!ids.length) {
+    ElMessage.warning("请先选择要操作的数据");
+    return;
+  }
+  ElMessageBox.confirm(`确认${status === "0" ? "启用" : "停用"}该项数据?`, "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(async () => {
+      try {
+        await MenuAPI.batchMenu({ ids, status });
+        refreshList();
+      } catch (error: any) {
+        console.error(error);
+      }
+    })
+    .catch(() => {
+      ElMessageBox.close();
+    });
+}
+</script>
diff --git a/frontend/new-web/src/views/module_system/notice/index.vue b/frontend/new-web/src/views/module_system/notice/index.vue
new file mode 100644
index 00000000..16f4de56
--- /dev/null
+++ b/frontend/new-web/src/views/module_system/notice/index.vue
@@ -0,0 +1,637 @@
+<!-- 公告通知配置 -->
+<template>
+  <div class="app-container">
+    <PageSearch
+      ref="searchRef"
+      :search-config="searchConfig"
+      @query-click="handleQueryClick"
+      @reset-click="handleResetClick"
+    />
+
+    <PageContent ref="contentRef" :content-config="contentConfig">
+      <template #toolbar="{ toolbarRight, onToolbar, removeIds, cols }">
+        <CrudToolbarLeft
+          :remove-ids="removeIds"
+          :perm-create="['module_system:notice:create']"
+          :perm-delete="['module_system:notice:delete']"
+          :perm-patch="['module_system:notice:patch']"
+          @add="handleOpenDialog('create')"
+          @delete="onToolbar('delete')"
+          @more="handleMoreClick"
+        />
+        <div class="data-table__toolbar--right">
+          <CrudToolbarRight :buttons="toolbarRight" :cols="cols" :on-toolbar="onToolbar">
+            <template #prepend>
+              <el-tooltip content="导出">
+                <el-button
+                  v-hasPerm="['module_system:notice:export']"
+                  type="warning"
+                  icon="download"
+                  circle
+                  @click="handleOpenExportsModal"
+                />
+              </el-tooltip>
+            </template>
+          </CrudToolbarRight>
+        </div>
+      </template>
+
+      <template #table="{ data, loading, tableRef, onSelectionChange, pagination }">
+        <div class="data-table__content">
+          <el-table
+            :ref="tableRef as any"
+            v-loading="loading"
+            row-key="id"
+            :data="data"
+            height="100%"
+            border
+            stripe
+            @selection-change="onSelectionChange"
+          >
+            <template #empty>
+              <el-empty :image-size="70" description="暂无数据" />
+            </template>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'selection')?.show"
+              type="selection"
+              min-width="55"
+              align="center"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'index')?.show"
+              fixed
+              label="序号"
+              min-width="60"
+            >
+              <template #default="scope">
+                {{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }}
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'notice_title')?.show"
+              label="通知标题"
+              prop="notice_title"
+              min-width="140"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'status')?.show"
+              label="状态"
+              prop="status"
+              min-width="80"
+            >
+              <template #default="scope">
+                <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">
+                  {{ scope.row.status === "0" ? "启用" : "停用" }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'notice_type')?.show"
+              label="类型"
+              prop="notice_type"
+              min-width="80"
+            >
+              <template #default="scope">
+                <el-tag :type="scope.row.notice_type === '1' ? 'primary' : 'warning'">
+                  {{
+                    (scope.row.notice_type
+                      ? (dictStore.getDictLabel("sys_notice_type", scope.row.notice_type) as any)
+                      : undefined
+                    )?.dict_label || scope.row.notice_type
+                  }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'notice_content')?.show"
+              label="内容"
+              prop="notice_content"
+              min-width="200"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'description')?.show"
+              label="描述"
+              prop="description"
+              min-width="140"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'created_time')?.show"
+              label="创建时间"
+              prop="created_time"
+              min-width="180"
+              sortable
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'updated_time')?.show"
+              label="更新时间"
+              prop="updated_time"
+              min-width="180"
+              sortable
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'created_id')?.show"
+              key="created_id"
+              label="创建人"
+              min-width="100"
+            >
+              <template #default="scope">
+                {{ scope.row.created_by?.name }}
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'updated_id')?.show"
+              key="updated_id"
+              label="更新人"
+              min-width="100"
+            >
+              <template #default="scope">
+                {{ scope.row.updated_by?.name }}
+              </template>
+            </el-table-column>
+
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'operation')?.show"
+              fixed="right"
+              label="操作"
+              align="center"
+              min-width="200"
+            >
+              <template #default="scope">
+                <el-button
+                  v-hasPerm="['module_system:notice:detail']"
+                  type="info"
+                  size="small"
+                  link
+                  icon="View"
+                  @click="handleOpenDialog('detail', scope.row.id)"
+                >
+                  详情
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_system:notice:update']"
+                  type="primary"
+                  size="small"
+                  link
+                  icon="edit"
+                  @click="handleOpenDialog('update', scope.row.id)"
+                >
+                  编辑
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_system:notice:delete']"
+                  type="danger"
+                  size="small"
+                  link
+                  icon="delete"
+                  @click="handleRowDelete(scope.row.id)"
+                >
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </template>
+    </PageContent>
+
+    <EnhancedDialog
+      v-model="dialogVisible.visible"
+      :title="dialogVisible.title"
+      @close="handleCloseDialog"
+    >
+      <template v-if="dialogVisible.type === 'detail'">
+        <el-descriptions :column="4" border label-width="120px">
+          <el-descriptions-item label="标题" :span="2">
+            {{ detailFormData.notice_title }}
+          </el-descriptions-item>
+          <el-descriptions-item label="类型" :span="2">
+            <el-tag :type="detailFormData.notice_type === '1' ? 'primary' : 'warning'">
+              {{
+                (detailFormData.notice_type
+                  ? (dictStore.getDictLabel("sys_notice_type", detailFormData.notice_type) as any)
+                  : undefined
+                )?.dict_label || detailFormData.notice_type
+              }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="状态" :span="2">
+            <el-tag :type="detailFormData.status === '0' ? 'success' : 'danger'">
+              {{ detailFormData.status === "0" ? "启用" : "停用" }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="描述" :span="2">
+            {{ detailFormData.description }}
+          </el-descriptions-item>
+          <el-descriptions-item label="内容" :span="4">
+            <WangEditor v-model="detailFormData.notice_content" :readonly="true" />
+          </el-descriptions-item>
+          <el-descriptions-item label="创建人" :span="2">
+            {{ detailFormData.created_by?.name }}
+          </el-descriptions-item>
+          <el-descriptions-item label="更新人" :span="2">
+            {{ detailFormData.updated_by?.name }}
+          </el-descriptions-item>
+          <el-descriptions-item label="创建时间" :span="2">
+            {{ detailFormData.created_time }}
+          </el-descriptions-item>
+          <el-descriptions-item label="更新时间" :span="2">
+            {{ detailFormData.updated_time }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </template>
+      <template v-else>
+        <el-form
+          ref="dataFormRef"
+          :model="formData"
+          :rules="rules"
+          label-suffix=":"
+          label-width="auto"
+          label-position="right"
+          :inline="true"
+        >
+          <el-form-item label="标题" prop="notice_title">
+            <el-input v-model="formData.notice_title" placeholder="请输入标题" :maxlength="50" />
+          </el-form-item>
+          <el-form-item label="描述" prop="description">
+            <el-input
+              v-model="formData.description"
+              :rows="1"
+              :maxlength="100"
+              show-word-limit
+              type="textarea"
+              placeholder="请输入描述"
+            />
+          </el-form-item>
+          <el-form-item label="类型" prop="notice_type" class="w-50">
+            <el-select v-model="formData.notice_type" placeholder="请选择类型" clearable>
+              <el-option
+                v-for="item in dictStore.getDictArray('sys_notice_type')"
+                :key="item.dict_value"
+                :value="item.dict_value"
+                :label="item.dict_label"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="状态" prop="status">
+            <el-radio-group v-model="formData.status">
+              <el-radio value="0">启用</el-radio>
+              <el-radio value="1">停用</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="内容" prop="notice_content">
+            <WangEditor v-model="formData.notice_content" />
+          </el-form-item>
+        </el-form>
+      </template>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="handleCloseDialog">取消</el-button>
+          <el-button
+            v-if="dialogVisible.type !== 'detail'"
+            type="primary"
+            :loading="submitLoading"
+            @click="handleSubmit"
+          >
+            确定
+          </el-button>
+          <el-button v-else type="primary" @click="handleCloseDialog">确定</el-button>
+        </div>
+      </template>
+    </EnhancedDialog>
+
+    <ExportModal
+      v-model="exportsDialogVisible"
+      :content-config="curdContentConfig"
+      :query-params="exportQueryParams"
+      :page-data="exportPageData"
+      :selection-data="exportSelectionData"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, markRaw, nextTick, onMounted, unref } from "vue";
+import { fetchAllPages } from "@/utils/fetchAllPages";
+import { useDictStore, useNoticeStore } from "@/store/index";
+import UserTableSelect from "@/views/module_system/user/components/UserTableSelect.vue";
+import ExportModal from "@/components/CURD/ExportModal.vue";
+import CrudToolbarLeft from "@/components/CURD/CrudToolbarLeft.vue";
+import CrudToolbarRight from "@/components/CURD/CrudToolbarRight.vue";
+import PageSearch from "@/components/CURD/PageSearch.vue";
+import PageContent from "@/components/CURD/PageContent.vue";
+import EnhancedDialog from "@/components/CURD/EnhancedDialog.vue";
+import type { IContentConfig, ISearchConfig } from "@/components/CURD/types";
+import { useCrudList } from "@/components/CURD/useCrudList";
+import NoticeAPI, { NoticeTable, NoticeForm, NoticePageQuery } from "@/api/module_system/notice";
+
+const dictStore = useDictStore();
+defineOptions({
+  name: "Notice",
+  inheritAttrs: false,
+});
+
+const { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList } = useCrudList();
+const dataFormRef = ref();
+const submitLoading = ref(false);
+
+function triggerUserSearch() {
+  nextTick(() => refreshList());
+}
+
+const searchConfig = reactive<ISearchConfig>({
+  permPrefix: "module_system:notice",
+  colon: true,
+  isExpandable: true,
+  showNumber: 3,
+  form: { labelWidth: "auto" },
+  formItems: [
+    {
+      prop: "notice_title",
+      label: "标题",
+      type: "input",
+      attrs: { placeholder: "请输入标题", clearable: true },
+    },
+    {
+      prop: "notice_type",
+      label: "类型",
+      type: "select",
+      options: [] as { label: string; value: string }[],
+      attrs: { placeholder: "请选择类型", clearable: true, style: { width: "167.5px" } },
+    },
+    {
+      prop: "status",
+      label: "状态",
+      type: "select",
+      options: [
+        { label: "启用", value: "0" },
+        { label: "停用", value: "1" },
+      ],
+      attrs: { placeholder: "请选择状态", clearable: true, style: { width: "167.5px" } },
+    },
+    {
+      prop: "created_time",
+      label: "创建时间",
+      type: "date-picker",
+      initialValue: [],
+      attrs: {
+        type: "datetimerange",
+        valueFormat: "YYYY-MM-DD HH:mm:ss",
+        rangeSeparator: "至",
+        startPlaceholder: "开始日期",
+        endPlaceholder: "结束日期",
+        style: { width: "340px" },
+      },
+    },
+    {
+      prop: "created_id",
+      label: "创建人",
+      type: "user-table-select",
+      initialValue: null,
+      events: {
+        "confirm-click": triggerUserSearch,
+        "clear-click": triggerUserSearch,
+      },
+    },
+  ],
+  customComponents: {
+    "user-table-select": markRaw(UserTableSelect),
+  },
+});
+
+const contentCols = reactive<
+  Array<{
+    prop?: string;
+    label?: string;
+    show?: boolean;
+  }>
+>([
+  { prop: "selection", label: "选择框", show: true },
+  { prop: "index", label: "序号", show: true },
+  { prop: "notice_title", label: "标题", show: true },
+  { prop: "notice_type", label: "类型", show: true },
+  { prop: "notice_content", label: "内容", show: true },
+  { prop: "status", label: "状态", show: true },
+  { prop: "description", label: "描述", show: true },
+  { prop: "created_time", label: "创建时间", show: true },
+  { prop: "updated_id", label: "更新人", show: true },
+  { prop: "updated_time", label: "更新时间", show: true },
+  { prop: "created_id", label: "创建人", show: true },
+  { prop: "operation", label: "操作", show: true },
+]);
+
+const noticeStore = useNoticeStore();
+
+const contentConfig = reactive<IContentConfig<NoticePageQuery>>({
+  permPrefix: "module_system:notice",
+  pk: "id",
+  cols: contentCols as IContentConfig["cols"],
+  hideColumnFilter: false,
+  toolbar: [],
+  defaultToolbar: ["refresh", "filter"],
+  pagination: {
+    pageSize: 10,
+    pageSizes: [10, 20, 30, 50],
+  },
+  request: { page_no: "page_no", page_size: "page_size" },
+  indexAction: async (params) => {
+    const res = await NoticeAPI.listNotice(params as NoticePageQuery);
+    return {
+      total: res.data.data.total,
+      list: res.data.data.items,
+    };
+  },
+  deleteAction: async (ids) => {
+    await NoticeAPI.deleteNotice(
+      ids
+        .split(",")
+        .map((s) => Number(s.trim()))
+        .filter((n) => !Number.isNaN(n))
+    );
+    await noticeStore.getNotice();
+  },
+  deleteConfirm: {
+    title: "警告",
+    message: "确认删除该项数据?",
+    type: "warning",
+  },
+});
+
+function handleRowDelete(id: number) {
+  contentRef.value?.handleDelete(id);
+}
+
+const exportsDialogVisible = ref(false);
+
+const exportQueryParams = computed(() => searchRef.value?.getQueryParams() ?? {});
+
+const exportPageData = computed(() => (unref(contentRef.value?.pageData) ?? []) as NoticeTable[]);
+
+const exportSelectionData = computed(
+  () => (contentRef.value?.getSelectionData() ?? []) as NoticeTable[]
+);
+
+const exportColumns = [
+  { prop: "notice_title", label: "标题" },
+  { prop: "status", label: "状态" },
+  { prop: "notice_type", label: "类型" },
+  { prop: "notice_content", label: "内容" },
+  { prop: "description", label: "描述" },
+  { prop: "created_time", label: "创建时间" },
+  { prop: "updated_time", label: "更新时间" },
+];
+
+const curdContentConfig = {
+  permPrefix: "module_system:notice",
+  cols: exportColumns as any,
+  exportsAction: async (params: any) => {
+    const query: Record<string, unknown> = { ...params };
+    if (typeof query.status === "string") query.status = query.status === "true";
+    return fetchAllPages({
+      initialQuery: query,
+      fetchPage: async (q) => {
+        const res = await NoticeAPI.listNotice(q as unknown as NoticePageQuery);
+        return {
+          total: res.data?.data?.total ?? 0,
+          list: res.data?.data?.items ?? [],
+        };
+      },
+    });
+  },
+} as unknown as IContentConfig;
+
+function handleOpenExportsModal() {
+  exportsDialogVisible.value = true;
+}
+
+const detailFormData = ref<NoticeTable>({});
+
+const formData = reactive<NoticeForm>({
+  id: undefined,
+  notice_title: "",
+  notice_type: "",
+  notice_content: "",
+  status: "0",
+  description: undefined,
+});
+
+const dialogVisible = reactive({
+  title: "",
+  visible: false,
+  type: "create" as "create" | "update" | "detail",
+});
+
+const rules = reactive({
+  notice_title: [{ required: true, message: "请输入公告通知标题", trigger: "blur" }],
+  notice_type: [{ required: true, message: "请选择公告通知类型", trigger: "blur" }],
+  notice_content: [{ required: true, message: "请输入公告通知内容", trigger: "blur" }],
+  status: [{ required: true, message: "请选择公告通知状态", trigger: "blur" }],
+});
+
+const initialFormData: NoticeForm = {
+  id: undefined,
+  notice_title: "",
+  notice_type: "",
+  notice_content: "",
+  status: "0",
+  description: undefined,
+};
+
+async function resetForm() {
+  if (dataFormRef.value) {
+    dataFormRef.value.resetFields();
+    dataFormRef.value.clearValidate();
+  }
+  Object.assign(formData, initialFormData);
+}
+
+async function handleCloseDialog() {
+  dialogVisible.visible = false;
+  await resetForm();
+}
+
+async function handleOpenDialog(type: "create" | "update" | "detail", id?: number) {
+  dialogVisible.type = type;
+  if (id) {
+    const response = await NoticeAPI.detailNotice(id);
+    if (type === "detail") {
+      dialogVisible.title = "公告通知详情";
+      Object.assign(detailFormData.value, response.data.data);
+    } else if (type === "update") {
+      dialogVisible.title = "修改公告通知";
+      Object.assign(formData, response.data.data);
+    }
+  } else {
+    dialogVisible.title = "新增公告通知";
+    formData.id = undefined;
+  }
+  dialogVisible.visible = true;
+}
+
+async function handleSubmit() {
+  dataFormRef.value.validate(async (valid: any) => {
+    if (valid) {
+      submitLoading.value = true;
+      const id = formData.id;
+      try {
+        if (id) {
+          await NoticeAPI.updateNotice(id, { id, ...formData });
+        } else {
+          await NoticeAPI.createNotice(formData);
+        }
+        dialogVisible.visible = false;
+        await resetForm();
+        refreshList();
+        await noticeStore.getNotice();
+      } catch (error: any) {
+        console.error(error);
+      } finally {
+        submitLoading.value = false;
+      }
+    }
+  });
+}
+
+async function handleMoreClick(status: string) {
+  const rows = contentRef.value?.getSelectionData() as NoticeTable[] | undefined;
+  const ids = (rows ?? []).map((r) => r.id).filter((id): id is number => id != null);
+  if (!ids.length) {
+    ElMessage.warning("请先选择要操作的数据");
+    return;
+  }
+  ElMessageBox.confirm(`确认${status === "0" ? "启用" : "停用"}该项数据?`, "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(async () => {
+      try {
+        await NoticeAPI.batchNotice({ ids, status });
+        refreshList();
+      } catch (error: any) {
+        console.error(error);
+      }
+    })
+    .catch(() => {
+      ElMessageBox.close();
+    });
+}
+
+onMounted(async () => {
+  await dictStore.getDict(["sys_notice_type"]);
+  const typeItem = searchConfig.formItems?.find((i) => i.prop === "notice_type");
+  if (typeItem && typeItem.type === "select") {
+    typeItem.options = dictStore.getDictArray("sys_notice_type").map((item) => ({
+      label: item.dict_label,
+      value: item.dict_value,
+    }));
+  }
+});
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/frontend/new-web/src/views/module_system/param/components/ConfigInfoDrawer.vue b/frontend/new-web/src/views/module_system/param/components/ConfigInfoDrawer.vue
new file mode 100644
index 00000000..19ffdb2e
--- /dev/null
+++ b/frontend/new-web/src/views/module_system/param/components/ConfigInfoDrawer.vue
@@ -0,0 +1,720 @@
+<template>
+  <EnhancedDrawer
+    v-model="drawerVisible"
+    title="配置中心"
+    :size="drawerSize"
+    destroy-on-close
+    @close="onDrawerClosed"
+  >
+    <el-tabs v-model="activeTabRef" type="border-card">
+      <!-- 网站配置 -->
+      <el-tab-pane label="网站配置" name="website">
+        <el-form :model="configState" label-suffix=":" label-width="auto" label-position="right">
+          <!-- 系统配置 -->
+          <el-divider>网站配置</el-divider>
+          <div v-for="(item, key) in systemConfigs" :key="key">
+            <el-form-item :label="item.config_name">
+              <span class="flex items-center gap-2 w-full">
+                <el-input
+                  v-model="item.config_value"
+                  :placeholder="t('common.inputText')"
+                  clearable
+                  style="width: 100%"
+                  @input="markModified(key)"
+                />
+              </span>
+            </el-form-item>
+          </div>
+
+          <!-- logo配置 -->
+          <el-divider>网站图标</el-divider>
+          <div v-for="(item, key) in logoConfigs" :key="key">
+            <el-form-item :label="item.config_name">
+              <div class="flex items-center gap-2 w-full">
+                <SingleImageUpload
+                  v-model="item.config_value"
+                  :data="{ type: key }"
+                  :name="'file'"
+                  :max-file-size="item.maxFileSize"
+                  :show-tip="true"
+                  :enable-preview="true"
+                  @success="(fileInfo: UploadFilePath) => handleUploadSuccess(fileInfo, key)"
+                  @error="handleUploadError"
+                />
+              </div>
+            </el-form-item>
+          </div>
+        </el-form>
+      </el-tab-pane>
+      <el-tab-pane label="安全隐私" name="securityPrivacy">
+        <el-form :model="configState" label-suffix=":" label-width="auto" label-position="right">
+          <!-- 系统配置 -->
+          <el-divider>安全隐私</el-divider>
+          <div v-for="(item, key) in securityPrivacyConfigs" :key="key">
+            <el-form-item :label="item.config_name">
+              <span class="flex items-center gap-2 w-full">
+                <el-input
+                  v-model="item.config_value"
+                  :placeholder="t('common.inputText')"
+                  clearable
+                  style="width: 100%"
+                  @input="markModified(key)"
+                />
+              </span>
+            </el-form-item>
+          </div>
+        </el-form>
+      </el-tab-pane>
+      <el-tab-pane label="用户协议" name="userAgreement">
+        <!-- 系统配置 -->
+        <el-form :model="configState" label-suffix=":" label-width="auto" label-position="right">
+          <el-divider>用户协议</el-divider>
+          <div v-for="(item, key) in userAgreementConfigs" :key="key">
+            <el-form-item :label="item.config_name">
+              <span class="flex items-center gap-2 w-full">
+                <el-input
+                  v-model="item.config_value"
+                  :placeholder="t('common.inputText')"
+                  clearable
+                  style="width: 100%"
+                  @input="markModified(key)"
+                />
+              </span>
+            </el-form-item>
+          </div>
+        </el-form>
+      </el-tab-pane>
+      <el-tab-pane label="接口白名单" name="apiWhitelist">
+        <el-form :model="configState" label-suffix=":" label-width="auto" label-position="right">
+          <!-- 系统配置 -->
+          <el-divider>接口白名单</el-divider>
+          <div v-for="(item, key) in apiWhitelistConfigs" :key="key">
+            <el-form-item :label="item.config_name">
+              <div class="space-y-2">
+                <div
+                  v-for="listItem in apiWhitelistItems"
+                  :key="listItem.id"
+                  class="flex items-center gap-2"
+                >
+                  <el-input
+                    v-model="listItem.value"
+                    :placeholder="'/api/v1/users/get'"
+                    clearable
+                    @input="markModified(key)"
+                    @blur="
+                      {
+                        if (!isValidApiPath(listItem.value) && listItem.value.trim()) {
+                          ElMessage.warning('请输入有效的接口路径格式（以/开头）');
+                        }
+                      }
+                    "
+                  />
+                  <el-button
+                    type="danger"
+                    icon="minus"
+                    circle
+                    size="small"
+                    @click="removeApiWhitelistItem(listItem.id)"
+                  />
+                </div>
+                <el-button
+                  type="primary"
+                  icon="plus"
+                  size="small"
+                  style="margin-top: 10px"
+                  @click="addApiWhitelistItem"
+                >
+                  添加接口路径
+                </el-button>
+                <div class="text-xs text-gray-500 mt-2">
+                  配置说明：添加到白名单的接口路径无需登录即可访问，支持完整路径配置。
+                </div>
+              </div>
+            </el-form-item>
+          </div>
+        </el-form>
+      </el-tab-pane>
+      <el-tab-pane label="IP黑名单" name="ipBlacklist">
+        <el-form :model="configState" label-suffix=":" label-width="auto" label-position="right">
+          <!-- 系统配置 -->
+          <el-divider>IP黑名单</el-divider>
+          <div v-for="(item, key) in ipBlacklistConfigs" :key="key">
+            <el-form-item :label="item.config_name">
+              <div class="space-y-2">
+                <div
+                  v-for="listItem in ipBlacklistItems"
+                  :key="listItem.id"
+                  class="flex items-center gap-2"
+                >
+                  <el-input
+                    v-model="listItem.value"
+                    :placeholder="'192.168.1.1'"
+                    clearable
+                    style="flex: 1"
+                    @input="markModified(key)"
+                    @blur="
+                      {
+                        if (!isValidIp(listItem.value) && listItem.value.trim()) {
+                          ElMessage.warning('请输入有效的IP地址格式');
+                        }
+                      }
+                    "
+                  />
+                  <el-button
+                    type="danger"
+                    icon="minus"
+                    circle
+                    size="small"
+                    @click="removeIpBlacklistItem(listItem.id)"
+                  />
+                </div>
+                <el-button
+                  type="primary"
+                  icon="plus"
+                  size="small"
+                  style="margin-top: 10px"
+                  @click="addIpBlacklistItem"
+                >
+                  添加IP地址
+                </el-button>
+                <div class="text-xs text-gray-500 mt-2">
+                  配置说明：添加到黑名单的IP地址将无法访问系统，支持单个IP配置。
+                </div>
+              </div>
+            </el-form-item>
+          </div>
+        </el-form>
+      </el-tab-pane>
+      <el-tab-pane label="演示环境配置" name="demo">
+        <el-form :model="configState" label-suffix=":" label-width="auto" label-position="right">
+          <!-- 系统配置 -->
+          <el-divider>演示环境配置</el-divider>
+          <div v-for="(item, key) in demoConfigs" :key="key">
+            <el-form-item :label="item.config_name">
+              <!-- 演示模式开关 -->
+              <template v-if="key === 'demo_enable'">
+                <el-switch
+                  inline-prompt
+                  active-text="启用"
+                  inactive-text="禁用"
+                  :model-value="item.config_value === 'true'"
+                  @update:model-value="
+                    (value) => {
+                      item.config_value = value ? 'true' : 'false';
+                      markModified(key);
+                    }
+                  "
+                />
+                <div class="text-xs text-gray-500 mt-1">
+                  配置说明：启用后系统将进入演示模式，部分功能可能受限。
+                </div>
+              </template>
+              <!-- IP白名单 -->
+              <template v-else-if="key === 'ip_white_list'">
+                <div class="space-y-2">
+                  <div
+                    v-for="listItem in demoIpWhitelistItems"
+                    :key="listItem.id"
+                    class="flex items-center gap-2"
+                  >
+                    <el-input
+                      v-model="listItem.value"
+                      :placeholder="'192.168.1.1'"
+                      clearable
+                      style="flex: 1"
+                      @input="markModified(key)"
+                      @blur="
+                        {
+                          if (!isValidIp(listItem.value) && listItem.value.trim()) {
+                            ElMessage.warning('请输入有效的IP地址格式');
+                          }
+                        }
+                      "
+                    />
+                    <el-button
+                      type="danger"
+                      icon="minus"
+                      circle
+                      size="small"
+                      @click="removeDemoIpWhitelistItem(listItem.id)"
+                    />
+                  </div>
+                  <el-button
+                    type="primary"
+                    icon="plus"
+                    size="small"
+                    style="margin-top: 10px"
+                    @click="addDemoIpWhitelistItem"
+                  >
+                    添加IP地址
+                  </el-button>
+                  <div class="text-xs text-gray-500 mt-2">
+                    配置说明：演示模式下，只有白名单中的IP地址可以访问系统，支持单个IP配置。
+                  </div>
+                </div>
+              </template>
+              <!-- 其他配置项 -->
+              <template v-else>
+                <el-input
+                  v-model="item.config_value"
+                  :placeholder="t('common.inputText')"
+                  clearable
+                  style="width: 100%"
+                  @input="markModified(key)"
+                />
+              </template>
+            </el-form-item>
+          </div>
+        </el-form>
+      </el-tab-pane>
+    </el-tabs>
+    <template #footer>
+      <el-button @click="handleCloseDialog">取消</el-button>
+      <el-button
+        v-hasPerm="['module_system:config:update']"
+        type="primary"
+        :disabled="!hasChanges"
+        @click="submitChanges"
+      >
+        保存
+      </el-button>
+    </template>
+  </EnhancedDrawer>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, onMounted, computed } from "vue";
+import ParamsAPI, { type ConfigTable } from "@/api/module_system/params";
+import { useConfigStore } from "@/store";
+import { useI18n } from "vue-i18n";
+import { ElMessage, ElMessageBox } from "element-plus";
+import EnhancedDrawer from "@/components/CURD/EnhancedDrawer.vue";
+import SingleImageUpload from "@/components/Upload/SingleImageUpload.vue";
+import { useAppStore } from "@/store/modules/app.store";
+import { DeviceEnum } from "@/enums/settings/device.enum";
+
+// 定义列表项类型
+interface ListItem {
+  id: string;
+  value: string;
+}
+
+// 生成唯一ID
+const generateId = () => {
+  return Math.random().toString(36).substr(2, 9);
+};
+
+// IP地址验证函数
+const isValidIp = (ip: string): boolean => {
+  const ipRegex =
+    /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
+  return ipRegex.test(ip);
+};
+
+// 接口路径验证函数
+const isValidApiPath = (path: string): boolean => {
+  const pathRegex = /^\/[\w\-/]+$/;
+  return pathRegex.test(path);
+};
+
+const appStore = useAppStore();
+const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? "60%" : "60%"));
+
+const t = useI18n().t;
+const configStore = useConfigStore();
+const activeTabRef = ref("website");
+
+// 与父组件的 v-model 同步
+const props = defineProps<{ modelValue: boolean }>();
+const emit = defineEmits(["update:modelValue"]);
+const drawerVisible = computed({
+  get: () => props.modelValue,
+  set: (val: boolean) => emit("update:modelValue", val),
+});
+
+// 配置状态管理
+const configState = reactive<ConfigTable>({
+  id: undefined,
+  config_name: "",
+  config_key: "",
+  config_value: "",
+  config_type: undefined,
+  description: "",
+});
+
+// 记录修改过的字段
+const modifiedFields = reactive<Record<string, boolean>>({});
+
+// 标记字段为已修改
+const markModified = (key: string) => {
+  modifiedFields[key] = true;
+};
+
+// 判断是否有修改
+const hasChanges = computed(() => Object.keys(modifiedFields).length > 0);
+
+// 提交修改
+const submitChanges = async () => {
+  const keysToSubmit = Object.keys(modifiedFields);
+  if (keysToSubmit.length === 0) return;
+
+  try {
+    // 准备提交数据
+    // 1. 处理接口白名单
+    if (
+      "white_api_list_path" in modifiedFields &&
+      apiWhitelistConfigs.value.white_api_list_path?.id
+    ) {
+      const apiWhitelistArray = apiWhitelistItems.value
+        .map((item) => item.value.trim())
+        .filter(Boolean);
+      // 转换为JSON字符串格式保存
+      const apiWhitelistJson = JSON.stringify(apiWhitelistArray);
+      await ParamsAPI.updateParams(apiWhitelistConfigs.value.white_api_list_path.id, {
+        ...apiWhitelistConfigs.value.white_api_list_path,
+        config_value: apiWhitelistJson,
+      });
+    }
+
+    // 2. 处理IP黑名单
+    if ("ip_black_list" in modifiedFields && ipBlacklistConfigs.value.ip_black_list?.id) {
+      const ipBlacklistArray = ipBlacklistItems.value
+        .map((item) => item.value.trim())
+        .filter(Boolean);
+      // 转换为JSON字符串格式保存
+      const ipBlacklistJson = JSON.stringify(ipBlacklistArray);
+      await ParamsAPI.updateParams(ipBlacklistConfigs.value.ip_black_list.id, {
+        ...ipBlacklistConfigs.value.ip_black_list,
+        config_value: ipBlacklistJson,
+      });
+    }
+
+    // 3. 处理演示环境IP白名单
+    if ("ip_white_list" in modifiedFields && demoConfigs.value.ip_white_list?.id) {
+      const demoIpWhitelistArray = demoIpWhitelistItems.value
+        .map((item) => item.value.trim())
+        .filter(Boolean);
+      // 转换为JSON字符串格式保存
+      const demoIpWhitelistJson = JSON.stringify(demoIpWhitelistArray);
+      await ParamsAPI.updateParams(demoConfigs.value.ip_white_list.id, {
+        ...demoConfigs.value.ip_white_list,
+        config_value: demoIpWhitelistJson,
+      });
+    }
+
+    // 4. 处理其他配置项
+    const otherKeys = keysToSubmit.filter(
+      (key) => !["white_api_list_path", "ip_black_list", "ip_white_list"].includes(key)
+    );
+    const otherUpdatePromises = otherKeys.map((key) => {
+      const item =
+        systemConfigs.value[key as keyof typeof systemConfigs.value] ||
+        logoConfigs.value[key as keyof typeof logoConfigs.value] ||
+        securityPrivacyConfigs.value[key as keyof typeof securityPrivacyConfigs.value] ||
+        userAgreementConfigs.value[key as keyof typeof userAgreementConfigs.value] ||
+        demoConfigs.value[key as keyof typeof demoConfigs.value];
+      return item && item.id ? ParamsAPI.updateParams(item.id, { ...item }) : Promise.resolve();
+    });
+    await Promise.all(otherUpdatePromises);
+
+    // 清除已提交的修改标记
+    keysToSubmit.forEach((key) => {
+      delete modifiedFields[key];
+    });
+
+    // 重新加载配置数据（强制重新加载以同步到浏览器内存）
+    configStore.isConfigLoaded = false;
+    await configStore.getConfig();
+    initializeLists();
+  } catch (error) {
+    console.error("保存失败:", error);
+  }
+};
+
+// 取消修改：重置所有修改字段的状态并恢复初始值
+const resetForm = async () => {
+  // 强制重新加载配置数据（从服务器获取最新数据）
+  await configStore.getConfig(true);
+
+  // 重置动态列表
+  initializeLists();
+
+  // 重置其他配置项
+  const keysToReset = Object.keys(modifiedFields);
+  for (const key of keysToReset) {
+    if (systemConfigs.value[key as keyof typeof systemConfigs.value]) {
+      systemConfigs.value[key as keyof typeof systemConfigs.value].config_value =
+        configStore.configData[key as keyof typeof configStore.configData]?.config_value || "";
+    } else if (logoConfigs.value[key as keyof typeof logoConfigs.value]) {
+      logoConfigs.value[key as keyof typeof logoConfigs.value].config_value =
+        configStore.configData[key as keyof typeof configStore.configData]?.config_value || "";
+    } else if (securityPrivacyConfigs.value[key as keyof typeof securityPrivacyConfigs.value]) {
+      securityPrivacyConfigs.value[key as keyof typeof securityPrivacyConfigs.value].config_value =
+        configStore.configData[key as keyof typeof configStore.configData]?.config_value || "";
+    } else if (userAgreementConfigs.value[key as keyof typeof userAgreementConfigs.value]) {
+      userAgreementConfigs.value[key as keyof typeof userAgreementConfigs.value].config_value =
+        configStore.configData[key as keyof typeof configStore.configData]?.config_value || "";
+    } else if (demoConfigs.value[key as keyof typeof demoConfigs.value]) {
+      // 除了IP白名单外的演示配置项
+      if (key !== "ip_white_list") {
+        demoConfigs.value[key as keyof typeof demoConfigs.value].config_value =
+          configStore.configData[key as keyof typeof configStore.configData]?.config_value || "";
+      }
+    }
+    delete modifiedFields[key];
+  }
+  ElMessageBox.close();
+};
+
+async function handleCloseDialog() {
+  // 仅关闭抽屉，等待关闭动画结束后再重置
+  drawerVisible.value = false;
+}
+
+async function onDrawerClosed() {
+  // 抽屉关闭动画结束后再执行重置，避免打断动画
+  await resetForm();
+}
+
+// 系统配置项
+const systemConfigs = computed(() => ({
+  sys_web_title: configStore.configData.sys_web_title,
+  sys_web_version: configStore.configData.sys_web_version,
+  sys_web_description: configStore.configData.sys_web_description,
+}));
+
+// 安全隐私配置项
+const securityPrivacyConfigs = computed(() => ({
+  sys_help_doc: configStore.configData.sys_help_doc,
+  sys_git_code: configStore.configData.sys_git_code,
+  sys_keep_record: configStore.configData.sys_keep_record,
+  sys_web_copyright: configStore.configData.sys_web_copyright,
+  sys_web_privacy: configStore.configData.sys_web_privacy,
+}));
+
+// 用户协议配置项
+const userAgreementConfigs = computed(() => ({
+  sys_web_clause: configStore.configData.sys_web_clause,
+}));
+
+// 接口白名单配置 - 动态管理
+const apiWhitelistItems = ref<ListItem[]>([]);
+// IP黑名单配置 - 动态管理
+const ipBlacklistItems = ref<ListItem[]>([]);
+// IP白名单配置 - 动态管理
+const demoIpWhitelistItems = ref<ListItem[]>([]);
+
+// 从配置数据初始化列表
+const initializeLists = () => {
+  // 初始化接口白名单
+  const apiWhitelistStr = configStore.configData.white_api_list_path?.config_value || "";
+  try {
+    // 尝试解析为JSON数组
+    const apiWhitelistArray = JSON.parse(apiWhitelistStr);
+    if (Array.isArray(apiWhitelistArray)) {
+      apiWhitelistItems.value = apiWhitelistArray
+        .filter((item) => typeof item === "string" && item.trim())
+        .map((item) => ({ id: generateId(), value: item.trim() }));
+    } else {
+      // 如果不是数组，回退到按换行符分割
+      apiWhitelistItems.value = apiWhitelistStr
+        ? apiWhitelistStr
+            .split("\n")
+            .filter((item) => item.trim())
+            .map((item) => ({ id: generateId(), value: item.trim() }))
+        : [{ id: generateId(), value: "" }];
+    }
+  } catch {
+    // 解析失败，回退到按换行符分割
+    apiWhitelistItems.value = apiWhitelistStr
+      ? apiWhitelistStr
+          .split("\n")
+          .filter((item) => item.trim())
+          .map((item) => ({ id: generateId(), value: item.trim() }))
+      : [{ id: generateId(), value: "" }];
+  }
+
+  // 初始化IP黑名单
+  const ipBlacklistStr = configStore.configData.ip_black_list?.config_value || "";
+  try {
+    // 尝试解析为JSON数组
+    const ipBlacklistArray = JSON.parse(ipBlacklistStr);
+    if (Array.isArray(ipBlacklistArray)) {
+      ipBlacklistItems.value = ipBlacklistArray
+        .filter((item) => typeof item === "string" && item.trim())
+        .map((item) => ({ id: generateId(), value: item.trim() }));
+    } else {
+      // 如果不是数组，回退到按换行符分割
+      ipBlacklistItems.value = ipBlacklistStr
+        ? ipBlacklistStr
+            .split("\n")
+            .filter((item) => item.trim())
+            .map((item) => ({ id: generateId(), value: item.trim() }))
+        : [{ id: generateId(), value: "" }];
+    }
+  } catch {
+    // 解析失败，回退到按换行符分割
+    ipBlacklistItems.value = ipBlacklistStr
+      ? ipBlacklistStr
+          .split("\n")
+          .filter((item) => item.trim())
+          .map((item) => ({ id: generateId(), value: item.trim() }))
+      : [{ id: generateId(), value: "" }];
+  }
+
+  // 初始化演示环境IP白名单
+  const demoIpWhitelistStr = configStore.configData.ip_white_list?.config_value || "";
+  try {
+    // 尝试解析为JSON数组
+    const demoIpWhitelistArray = JSON.parse(demoIpWhitelistStr);
+    if (Array.isArray(demoIpWhitelistArray)) {
+      demoIpWhitelistItems.value = demoIpWhitelistArray
+        .filter((item) => typeof item === "string" && item.trim())
+        .map((item) => ({ id: generateId(), value: item.trim() }));
+    } else {
+      // 如果不是数组，回退到按换行符分割
+      demoIpWhitelistItems.value = demoIpWhitelistStr
+        ? demoIpWhitelistStr
+            .split("\n")
+            .filter((item) => item.trim())
+            .map((item) => ({ id: generateId(), value: item.trim() }))
+        : [{ id: generateId(), value: "" }];
+    }
+  } catch {
+    // 解析失败，回退到按换行符分割
+    demoIpWhitelistItems.value = demoIpWhitelistStr
+      ? demoIpWhitelistStr
+          .split("\n")
+          .filter((item) => item.trim())
+          .map((item) => ({ id: generateId(), value: item.trim() }))
+      : [{ id: generateId(), value: "" }];
+  }
+};
+
+// 添加接口白名单项
+const addApiWhitelistItem = () => {
+  apiWhitelistItems.value.push({ id: generateId(), value: "" });
+  markModified("white_api_list_path");
+};
+
+// 移除接口白名单项
+const removeApiWhitelistItem = (id: string) => {
+  if (apiWhitelistItems.value.length <= 1) {
+    ElMessage.warning("至少需要保留一个接口白名单配置");
+    return;
+  }
+  apiWhitelistItems.value = apiWhitelistItems.value.filter((item) => item.id !== id);
+  markModified("white_api_list_path");
+};
+
+// 添加IP黑名单项
+const addIpBlacklistItem = () => {
+  ipBlacklistItems.value.push({ id: generateId(), value: "" });
+  markModified("ip_black_list");
+};
+
+// 移除IP黑名单项
+const removeIpBlacklistItem = (id: string) => {
+  if (ipBlacklistItems.value.length <= 1) {
+    ElMessage.warning("至少需要保留一个IP黑名单配置");
+    return;
+  }
+  ipBlacklistItems.value = ipBlacklistItems.value.filter((item) => item.id !== id);
+  markModified("ip_black_list");
+};
+
+// 添加演示环境IP白名单项
+const addDemoIpWhitelistItem = () => {
+  demoIpWhitelistItems.value.push({ id: generateId(), value: "" });
+  markModified("ip_white_list");
+};
+
+// 移除演示环境IP白名单项
+const removeDemoIpWhitelistItem = (id: string) => {
+  if (demoIpWhitelistItems.value.length <= 1) {
+    ElMessage.warning("至少需要保留一个IP白名单配置");
+    return;
+  }
+  demoIpWhitelistItems.value = demoIpWhitelistItems.value.filter((item) => item.id !== id);
+  markModified("ip_white_list");
+};
+
+// 接口白名单配置项
+const apiWhitelistConfigs = computed(() => ({
+  white_api_list_path: configStore.configData.white_api_list_path,
+}));
+
+// IP黑名单配置项
+const ipBlacklistConfigs = computed(() => ({
+  ip_black_list: configStore.configData.ip_black_list,
+}));
+
+// 演示环境配置项
+const demoConfigs = computed(() => ({
+  demo_enable: configStore.configData.demo_enable,
+  ip_white_list: configStore.configData.ip_white_list,
+}));
+
+// logo配置项
+const logoConfigs = computed(() => ({
+  sys_web_logo: {
+    ...configStore.configData.sys_web_logo,
+    maxFileSize: 5,
+  },
+  sys_web_favicon: {
+    ...configStore.configData.sys_web_favicon,
+    maxFileSize: 5,
+  },
+  sys_login_background: {
+    ...configStore.configData.sys_login_background,
+    maxFileSize: 10,
+  },
+}));
+
+// 图片上传成功的回调处理
+const handleUploadSuccess = (fileInfo: UploadFilePath, type: string) => {
+  const fileUrl = fileInfo.file_url;
+  if (type in configStore.configData) {
+    (configStore.configData as any)[type].config_value = fileUrl;
+  }
+  if (type in systemConfigs.value) {
+    (systemConfigs.value as any)[type].config_value = fileUrl;
+  } else if (type in logoConfigs.value) {
+    (logoConfigs.value as any)[type].config_value = fileUrl;
+  }
+  markModified(type);
+};
+
+// 图片上传失败的回调处理
+const handleUploadError = (error: any) => {
+  console.error("上传失败:", error.message || "未知错误");
+  ElMessage.error(`上传失败：${error.message || "请稍后重试"}`);
+};
+
+onMounted(() => {
+  initializeLists();
+  configStore.getConfig(true);
+});
+</script>
+
+<style lang="scss" scoped>
+.flex {
+  display: flex;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-end {
+  justify-content: flex-end;
+}
+
+.gap-4 {
+  gap: 1rem;
+}
+
+.mt-6 {
+  margin-top: 1.5rem;
+}
+</style>
diff --git a/frontend/new-web/src/views/module_system/param/index.vue b/frontend/new-web/src/views/module_system/param/index.vue
new file mode 100644
index 00000000..63362017
--- /dev/null
+++ b/frontend/new-web/src/views/module_system/param/index.vue
@@ -0,0 +1,544 @@
+<!-- 系统配置 -->
+<template>
+  <div class="app-container">
+    <PageSearch
+      ref="searchRef"
+      :search-config="searchConfig"
+      @query-click="handleQueryClick"
+      @reset-click="handleResetClick"
+    />
+
+    <PageContent ref="contentRef" :content-config="contentConfig">
+      <template #toolbar="{ toolbarRight, onToolbar, removeIds, cols }">
+        <!-- 与 PageContent 默认工具栏一致：flex 换行，避免 el-row/el-col 与外层 flex 挤压右侧按钮 -->
+        <CrudToolbarLeft
+          :remove-ids="removeIds"
+          :perm-create="['module_system:param:create']"
+          :perm-delete="['module_system:param:delete']"
+          @add="handleOpenDialog('create')"
+          @delete="onToolbar('delete')"
+        />
+        <div class="data-table__toolbar--right">
+          <CrudToolbarRight :buttons="toolbarRight" :cols="cols" :on-toolbar="onToolbar">
+            <template #prepend>
+              <el-tooltip content="导出">
+                <el-button
+                  v-hasPerm="['module_system:param:export']"
+                  type="warning"
+                  icon="download"
+                  circle
+                  @click="handleOpenExportsModal"
+                />
+              </el-tooltip>
+            </template>
+          </CrudToolbarRight>
+        </div>
+      </template>
+
+      <template #table="{ data, loading, tableRef, onSelectionChange, pagination }">
+        <div class="data-table__content">
+          <el-table
+            :ref="tableRef as any"
+            v-loading="loading"
+            row-key="id"
+            :data="data"
+            height="100%"
+            border
+            stripe
+            @selection-change="onSelectionChange"
+          >
+            <template #empty>
+              <el-empty :image-size="80" description="暂无数据" />
+            </template>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'selection')?.show"
+              type="selection"
+              min-width="55"
+              align="center"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'index')?.show"
+              fixed
+              label="序号"
+              min-width="60"
+            >
+              <template #default="scope">
+                {{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }}
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'config_name')?.show"
+              key="config_name"
+              label="配置名称"
+              prop="config_name"
+              min-width="120"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'config_key')?.show"
+              key="config_key"
+              label="配置键"
+              prop="config_key"
+              min-width="200"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'config_value')?.show"
+              key="config_value"
+              label="配置值"
+              prop="config_value"
+              min-width="200"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'config_type')?.show"
+              key="config_type"
+              label="系统内置"
+              prop="config_type"
+              min-width="100"
+            >
+              <template #default="scope">
+                <el-tag v-if="scope.row.config_type" type="success">是</el-tag>
+                <el-tag v-else type="danger">否</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'description')?.show"
+              key="description"
+              label="描述"
+              prop="description"
+              min-width="120"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'created_time')?.show"
+              key="created_time"
+              label="创建时间"
+              prop="created_time"
+              min-width="200"
+              sortable
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'updated_time')?.show"
+              key="updated_time"
+              label="更新时间"
+              prop="updated_time"
+              min-width="200"
+              sortable
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'operation')?.show"
+              fixed="right"
+              label="操作"
+              align="center"
+              min-width="200"
+            >
+              <template #default="scope">
+                <el-button
+                  v-hasPerm="['module_system:param:detail']"
+                  type="info"
+                  size="small"
+                  link
+                  icon="View"
+                  @click="handleOpenDialog('detail', scope.row.id)"
+                >
+                  详情
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_system:param:update']"
+                  type="primary"
+                  size="small"
+                  link
+                  icon="edit"
+                  @click="handleOpenDialog('update', scope.row.id)"
+                >
+                  编辑
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_system:param:delete']"
+                  type="danger"
+                  size="small"
+                  link
+                  icon="delete"
+                  @click="handleRowDelete(scope.row.id)"
+                >
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </template>
+    </PageContent>
+
+    <EnhancedDialog
+      v-model="dialogVisible.visible"
+      :title="dialogVisible.title"
+      @close="handleCloseDialog"
+    >
+      <template v-if="dialogVisible.type === 'detail'">
+        <el-descriptions :column="4" border>
+          <el-descriptions-item label="配置名称" :span="2">
+            {{ detailFormData.config_name }}
+          </el-descriptions-item>
+          <el-descriptions-item label="系统内置" :span="2">
+            <el-tag v-if="detailFormData.config_type" type="success">是</el-tag>
+            <el-tag v-else type="danger">否</el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="配置键" :span="2">
+            {{ detailFormData.config_key }}
+          </el-descriptions-item>
+          <el-descriptions-item label="配置值" :span="2">
+            {{ detailFormData.config_value }}
+          </el-descriptions-item>
+          <el-descriptions-item label="描述" :span="2">
+            {{ detailFormData.description }}
+          </el-descriptions-item>
+          <el-descriptions-item label="创建时间" :span="2">
+            {{ detailFormData.created_time }}
+          </el-descriptions-item>
+          <el-descriptions-item label="更新时间" :span="2">
+            {{ detailFormData.updated_time }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </template>
+      <template v-else>
+        <el-form
+          ref="dataFormRef"
+          :model="formData"
+          :rules="rules"
+          label-suffix=":"
+          label-width="auto"
+          label-position="right"
+        >
+          <el-form-item label="配置名称" prop="config_name">
+            <el-input v-model="formData.config_name" placeholder="请输入配置名称" :maxlength="50" />
+          </el-form-item>
+          <el-form-item label="配置键" prop="config_key">
+            <el-input v-model="formData.config_key" placeholder="请输入配置键" :maxlength="50" />
+          </el-form-item>
+          <el-form-item label="配置值" prop="config_value">
+            <el-input v-model="formData.config_value" placeholder="请输入配置值" :maxlength="100" />
+          </el-form-item>
+          <el-form-item label="系统内置" prop="config_type">
+            <el-radio-group v-model="formData.config_type">
+              <el-radio :value="true">是</el-radio>
+              <el-radio :value="false">否</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="描述" prop="description">
+            <el-input
+              v-model="formData.description"
+              :rows="4"
+              :maxlength="100"
+              show-word-limit
+              type="textarea"
+              placeholder="请输入描述"
+            />
+          </el-form-item>
+        </el-form>
+      </template>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="handleCloseDialog">取消</el-button>
+          <el-button
+            v-if="dialogVisible.type !== 'detail'"
+            v-hasPerm="['module_system:param:create']"
+            type="primary"
+            :loading="submitLoading"
+            @click="handleSubmit"
+          >
+            确定
+          </el-button>
+          <el-button
+            v-else
+            v-hasPerm="['module_system:param:detail']"
+            type="primary"
+            @click="handleCloseDialog"
+          >
+            确定
+          </el-button>
+        </div>
+      </template>
+    </EnhancedDialog>
+
+    <ExportModal
+      v-model="exportsDialogVisible"
+      :content-config="curdContentConfig"
+      :query-params="exportQueryParams"
+      :page-data="exportPageData"
+      :selection-data="exportSelectionData"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, unref } from "vue";
+import { fetchAllPages } from "@/utils/fetchAllPages";
+import ParamsAPI, { ConfigTable, ConfigForm, ConfigPageQuery } from "@/api/module_system/params";
+import { useConfigStore } from "@/store";
+import ExportModal from "@/components/CURD/ExportModal.vue";
+import CrudToolbarLeft from "@/components/CURD/CrudToolbarLeft.vue";
+import CrudToolbarRight from "@/components/CURD/CrudToolbarRight.vue";
+import PageSearch from "@/components/CURD/PageSearch.vue";
+import PageContent from "@/components/CURD/PageContent.vue";
+import EnhancedDialog from "@/components/CURD/EnhancedDialog.vue";
+import { useCrudList } from "@/components/CURD/useCrudList";
+import type { IContentConfig, ISearchConfig, IObject } from "@/components/CURD/types";
+
+defineOptions({
+  name: "Params",
+  inheritAttrs: false,
+});
+
+const { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList } = useCrudList();
+const dataFormRef = ref();
+const submitLoading = ref(false);
+
+const searchConfig = reactive<ISearchConfig>({
+  permPrefix: "module_system:param",
+  colon: true,
+  isExpandable: true,
+  showNumber: 2,
+  form: { labelWidth: "auto" },
+  formItems: [
+    {
+      prop: "config_name",
+      label: "配置名称",
+      type: "input",
+      attrs: { placeholder: "请输入配置名称", clearable: true },
+    },
+    {
+      prop: "config_key",
+      label: "配置键名",
+      type: "input",
+      attrs: { placeholder: "请输入配置键名", clearable: true },
+    },
+    {
+      prop: "config_type",
+      label: "系统内置",
+      type: "select",
+      options: [
+        { label: "是", value: "true" },
+        { label: "否", value: "false" },
+      ],
+      attrs: { placeholder: "请选择系统内置", clearable: true, style: { width: "167.5px" } },
+    },
+    {
+      prop: "created_time",
+      label: "创建时间",
+      type: "date-picker",
+      initialValue: [],
+      attrs: {
+        type: "datetimerange",
+        valueFormat: "YYYY-MM-DD HH:mm:ss",
+        rangeSeparator: "至",
+        startPlaceholder: "开始日期",
+        endPlaceholder: "结束日期",
+        style: { width: "340px" },
+      },
+    },
+  ],
+});
+
+const contentCols = reactive<
+  Array<{
+    prop?: string;
+    label?: string;
+    show?: boolean;
+  }>
+>([
+  { prop: "selection", label: "选择框", show: true },
+  { prop: "index", label: "序号", show: true },
+  { prop: "config_name", label: "配置名称", show: true },
+  { prop: "config_key", label: "配置键", show: true },
+  { prop: "config_value", label: "配置值", show: true },
+  { prop: "config_type", label: "系统内置", show: true },
+  { prop: "description", label: "描述", show: true },
+  { prop: "created_time", label: "创建时间", show: true },
+  { prop: "updated_time", label: "更新时间", show: true },
+  { prop: "operation", label: "操作", show: true },
+]);
+
+const configStore = useConfigStore();
+
+function normalizeListQuery(params: IObject): ConfigPageQuery {
+  const q = { ...params } as IObject;
+  if (typeof q.config_type === "string") {
+    q.config_type = q.config_type === "true";
+  }
+  return q as unknown as ConfigPageQuery;
+}
+
+const contentConfig = reactive<IContentConfig<ConfigPageQuery>>({
+  permPrefix: "module_system:param",
+  pk: "id",
+  cols: contentCols as IContentConfig["cols"],
+  hideColumnFilter: false,
+  toolbar: [],
+  defaultToolbar: ["refresh", "filter"],
+  pagination: {
+    pageSize: 10,
+    pageSizes: [10, 20, 30, 50],
+  },
+  request: { page_no: "page_no", page_size: "page_size" },
+  indexAction: async (params) => {
+    const res = await ParamsAPI.listParams(normalizeListQuery(params as IObject));
+    return {
+      total: res.data.data.total,
+      list: res.data.data.items,
+    };
+  },
+  deleteAction: async (ids) => {
+    await ParamsAPI.deleteParams(
+      ids
+        .split(",")
+        .map((s) => Number(s.trim()))
+        .filter((n) => !Number.isNaN(n))
+    );
+    configStore.isConfigLoaded = false;
+    await configStore.getConfig();
+  },
+  deleteConfirm: {
+    title: "警告",
+    message: "确认删除该项数据?",
+    type: "warning",
+  },
+});
+
+function handleRowDelete(id: number) {
+  contentRef.value?.handleDelete(id);
+}
+
+const detailFormData = ref<ConfigTable>({} as ConfigTable);
+
+const formData = reactive<ConfigForm>({
+  id: undefined,
+  config_name: "",
+  config_key: "",
+  config_value: "",
+  config_type: false,
+  description: "",
+});
+
+const dialogVisible = reactive({
+  title: "",
+  visible: false,
+  type: "create" as "create" | "update" | "detail",
+});
+
+const rules = reactive({
+  config_name: [{ required: true, message: "请输入系统配置名称", trigger: "blur" }],
+  config_key: [{ required: true, message: "请输入系统配置键", trigger: "blur" }],
+  config_value: [{ required: true, message: "请输入系统配置值", trigger: "blur" }],
+  config_type: [{ required: true, message: "请选择系统配置类型", trigger: "blur" }],
+});
+
+const initialFormData: ConfigForm = {
+  id: undefined,
+  config_name: "",
+  config_key: "",
+  config_value: "",
+  config_type: false,
+  description: "",
+};
+
+const exportsDialogVisible = ref(false);
+
+const exportQueryParams = computed(() => searchRef.value?.getQueryParams() ?? {});
+
+const exportPageData = computed(() => (unref(contentRef.value?.pageData) ?? []) as ConfigTable[]);
+
+const exportSelectionData = computed(
+  () => (contentRef.value?.getSelectionData() ?? []) as ConfigTable[]
+);
+
+const exportColumns = [
+  { prop: "config_name", label: "配置名称" },
+  { prop: "config_key", label: "配置键" },
+  { prop: "config_value", label: "配置值" },
+  { prop: "config_type", label: "系统内置" },
+  { prop: "description", label: "描述" },
+  { prop: "created_time", label: "创建时间" },
+  { prop: "updated_time", label: "更新时间" },
+];
+
+const curdContentConfig = {
+  permPrefix: "module_system:param",
+  cols: exportColumns as any,
+  exportsAction: async (params: any) => {
+    const query = { ...normalizeListQuery(params) } as Record<string, unknown>;
+    return fetchAllPages({
+      initialQuery: query,
+      fetchPage: async (q) => {
+        const res = await ParamsAPI.listParams(q as unknown as ConfigPageQuery);
+        return {
+          total: res.data?.data?.total ?? 0,
+          list: res.data?.data?.items ?? [],
+        };
+      },
+    });
+  },
+} as unknown as IContentConfig;
+
+function handleOpenExportsModal() {
+  exportsDialogVisible.value = true;
+}
+
+async function resetForm() {
+  if (dataFormRef.value) {
+    dataFormRef.value.resetFields();
+    dataFormRef.value.clearValidate();
+  }
+  Object.assign(formData, initialFormData);
+}
+
+async function handleCloseDialog() {
+  dialogVisible.visible = false;
+  await resetForm();
+}
+
+async function handleOpenDialog(type: "create" | "update" | "detail", id?: number) {
+  dialogVisible.type = type;
+  if (id) {
+    const response = await ParamsAPI.detailParams(id);
+    if (type === "detail") {
+      dialogVisible.title = "系统配置详情";
+      Object.assign(detailFormData.value, response.data.data);
+    } else if (type === "update") {
+      dialogVisible.title = "修改系统配置";
+      Object.assign(formData, response.data.data);
+    }
+  } else {
+    dialogVisible.title = "新增系统配置";
+    formData.id = undefined;
+  }
+  dialogVisible.visible = true;
+}
+
+async function handleSubmit() {
+  dataFormRef.value.validate(async (valid: any) => {
+    if (valid) {
+      submitLoading.value = true;
+      const id = formData.id;
+      try {
+        if (id) {
+          await ParamsAPI.updateParams(id, { id, ...formData });
+        } else {
+          await ParamsAPI.createParams(formData);
+        }
+        dialogVisible.visible = false;
+        await resetForm();
+        refreshList();
+        configStore.isConfigLoaded = false;
+        await configStore.getConfig();
+      } catch (error: any) {
+        console.error(error);
+      } finally {
+        submitLoading.value = false;
+      }
+    }
+  });
+}
+</script>
diff --git a/frontend/new-web/src/views/module_system/position/index.vue b/frontend/new-web/src/views/module_system/position/index.vue
new file mode 100644
index 00000000..0c76a79e
--- /dev/null
+++ b/frontend/new-web/src/views/module_system/position/index.vue
@@ -0,0 +1,578 @@
+<!-- 岗位管理 -->
+<template>
+  <div class="app-container">
+    <PageSearch
+      ref="searchRef"
+      :search-config="searchConfig"
+      @query-click="handleQueryClick"
+      @reset-click="handleResetClick"
+    />
+
+    <PageContent ref="contentRef" :content-config="contentConfig">
+      <template #toolbar="{ toolbarRight, onToolbar, removeIds, cols }">
+        <CrudToolbarLeft
+          :remove-ids="removeIds"
+          :perm-create="['module_system:position:create']"
+          :perm-delete="['module_system:position:delete']"
+          :perm-patch="['module_system:position:patch']"
+          @add="handleOpenDialog('create')"
+          @delete="onToolbar('delete')"
+          @more="handleMoreClick"
+        />
+        <div class="data-table__toolbar--right">
+          <CrudToolbarRight :buttons="toolbarRight" :cols="cols" :on-toolbar="onToolbar">
+            <template #prepend>
+              <el-tooltip content="导出">
+                <el-button
+                  v-hasPerm="['module_system:position:export']"
+                  type="warning"
+                  icon="download"
+                  circle
+                  @click="handleOpenExportsModal"
+                />
+              </el-tooltip>
+            </template>
+          </CrudToolbarRight>
+        </div>
+      </template>
+
+      <template #table="{ data, loading, tableRef, onSelectionChange, pagination }">
+        <div class="data-table__content">
+          <el-table
+            :ref="tableRef as any"
+            v-loading="loading"
+            row-key="id"
+            :data="data"
+            height="100%"
+            border
+            stripe
+            @selection-change="onSelectionChange"
+          >
+            <template #empty>
+              <el-empty :image-size="80" description="暂无数据" />
+            </template>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'selection')?.show"
+              type="selection"
+              min-width="55"
+              align="center"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'index')?.show"
+              fixed
+              label="序号"
+              min-width="60"
+            >
+              <template #default="scope">
+                {{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }}
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'name')?.show"
+              key="name"
+              label="岗位名称"
+              prop="name"
+              min-width="100"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'status')?.show"
+              key="status"
+              label="状态"
+              prop="status"
+              min-width="80"
+            >
+              <template #default="scope">
+                <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">
+                  {{ scope.row.status === "0" ? "启用" : "停用" }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'order')?.show"
+              key="order"
+              label="岗位排序"
+              prop="order"
+              min-width="80"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'description')?.show"
+              key="description"
+              label="描述"
+              prop="description"
+              min-width="120"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'created_time')?.show"
+              key="created_time"
+              label="创建时间"
+              prop="created_time"
+              min-width="200"
+              sortable
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'updated_time')?.show"
+              key="updated_time"
+              label="更新时间"
+              prop="updated_time"
+              min-width="200"
+              sortable
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'created_id')?.show"
+              key="created_id"
+              label="创建人"
+              min-width="100"
+            >
+              <template #default="scope">
+                {{ scope.row.created_by?.name }}
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'updated_id')?.show"
+              key="updated_id"
+              label="更新人"
+              min-width="100"
+            >
+              <template #default="scope">
+                {{ scope.row.updated_by?.name }}
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'operation')?.show"
+              fixed="right"
+              label="操作"
+              align="center"
+              min-width="200"
+            >
+              <template #default="scope">
+                <el-button
+                  v-hasPerm="['module_system:position:detail']"
+                  type="info"
+                  size="small"
+                  link
+                  icon="View"
+                  @click="handleOpenDialog('detail', scope.row.id)"
+                >
+                  详情
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_system:position:update']"
+                  type="primary"
+                  size="small"
+                  link
+                  icon="edit"
+                  @click="handleOpenDialog('update', scope.row.id)"
+                >
+                  编辑
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_system:position:delete']"
+                  type="danger"
+                  size="small"
+                  link
+                  icon="delete"
+                  @click="handleRowDelete(scope.row.id)"
+                >
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </template>
+    </PageContent>
+
+    <EnhancedDialog
+      v-model="dialogVisible.visible"
+      :title="dialogVisible.title"
+      @close="handleCloseDialog"
+    >
+      <template v-if="dialogVisible.type === 'detail'">
+        <el-descriptions :column="4" border>
+          <el-descriptions-item label="岗位名称" :span="2">
+            {{ detailFormData.name }}
+          </el-descriptions-item>
+          <el-descriptions-item label="排序" :span="2">
+            {{ detailFormData.order }}
+          </el-descriptions-item>
+          <el-descriptions-item label="状态" :span="2">
+            <el-tag v-if="detailFormData.status === '0'" type="success">启用</el-tag>
+            <el-tag v-else type="danger">停用</el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="创建人" :span="2">
+            {{ detailFormData.created_by?.name }}
+          </el-descriptions-item>
+          <el-descriptions-item label="更新人" :span="2">
+            {{ detailFormData.updated_by?.name }}
+          </el-descriptions-item>
+          <el-descriptions-item label="创建时间" :span="2">
+            {{ detailFormData.created_time }}
+          </el-descriptions-item>
+          <el-descriptions-item label="更新时间" :span="2">
+            {{ detailFormData.updated_time }}
+          </el-descriptions-item>
+          <el-descriptions-item label="描述" :span="4">
+            {{ detailFormData.description }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </template>
+      <template v-else>
+        <el-form
+          ref="dataFormRef"
+          :model="formData"
+          :rules="rules"
+          label-suffix=":"
+          label-width="auto"
+          label-position="right"
+        >
+          <el-form-item label="岗位名称" prop="name">
+            <el-input v-model="formData.name" placeholder="请输入岗位名称" :maxlength="50" />
+          </el-form-item>
+          <el-form-item label="排序" prop="order">
+            <el-input-number v-model="formData.order" controls-position="right" :min="1" />
+          </el-form-item>
+          <el-form-item label="状态" prop="status">
+            <el-radio-group v-model="formData.status">
+              <el-radio value="0">启用</el-radio>
+              <el-radio value="1">停用</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="描述" prop="description">
+            <el-input
+              v-model="formData.description"
+              :rows="4"
+              :maxlength="100"
+              show-word-limit
+              type="textarea"
+              placeholder="请输入描述"
+            />
+          </el-form-item>
+        </el-form>
+      </template>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="handleCloseDialog">取消</el-button>
+          <el-button
+            v-if="dialogVisible.type !== 'detail'"
+            type="primary"
+            :loading="submitLoading"
+            @click="handleSubmit"
+          >
+            确定
+          </el-button>
+          <el-button v-else type="primary" @click="handleCloseDialog">确定</el-button>
+        </div>
+      </template>
+    </EnhancedDialog>
+
+    <ExportModal
+      v-model="exportsDialogVisible"
+      :content-config="curdContentConfig"
+      :query-params="exportQueryParams"
+      :page-data="exportPageData"
+      :selection-data="exportSelectionData"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  name: "Position",
+  inheritAttrs: false,
+});
+
+import { ref, reactive, computed, markRaw, nextTick, unref } from "vue";
+import { fetchAllPages } from "@/utils/fetchAllPages";
+import PositionAPI, {
+  PositionTable,
+  PositionForm,
+  PositionPageQuery,
+} from "@/api/module_system/position";
+import { useUserStore } from "@/store";
+import UserTableSelect from "@/views/module_system/user/components/UserTableSelect.vue";
+import ExportModal from "@/components/CURD/ExportModal.vue";
+import CrudToolbarLeft from "@/components/CURD/CrudToolbarLeft.vue";
+import CrudToolbarRight from "@/components/CURD/CrudToolbarRight.vue";
+import PageSearch from "@/components/CURD/PageSearch.vue";
+import PageContent from "@/components/CURD/PageContent.vue";
+import EnhancedDialog from "@/components/CURD/EnhancedDialog.vue";
+import { useCrudList } from "@/components/CURD/useCrudList";
+import type { IContentConfig, ISearchConfig } from "@/components/CURD/types";
+
+const { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList } = useCrudList();
+const dataFormRef = ref();
+const submitLoading = ref(false);
+
+function triggerUserSearch() {
+  nextTick(() => refreshList());
+}
+
+const searchConfig = reactive<ISearchConfig>({
+  permPrefix: "module_system:position",
+  colon: true,
+  isExpandable: true,
+  showNumber: 2,
+  form: { labelWidth: "auto" },
+  formItems: [
+    {
+      prop: "name",
+      label: "岗位名称",
+      type: "input",
+      attrs: { placeholder: "请输入岗位名称", clearable: true },
+    },
+    {
+      prop: "status",
+      label: "状态",
+      type: "select",
+      options: [
+        { label: "启用", value: "0" },
+        { label: "停用", value: "1" },
+      ],
+      attrs: { placeholder: "请选择状态", clearable: true, style: { width: "167.5px" } },
+    },
+    {
+      prop: "created_time",
+      label: "创建时间",
+      type: "date-picker",
+      initialValue: [],
+      attrs: {
+        type: "datetimerange",
+        valueFormat: "YYYY-MM-DD HH:mm:ss",
+        rangeSeparator: "至",
+        startPlaceholder: "开始日期",
+        endPlaceholder: "结束日期",
+        style: { width: "340px" },
+      },
+    },
+    {
+      prop: "created_id",
+      label: "创建人",
+      type: "user-table-select",
+      initialValue: null,
+      events: {
+        "confirm-click": triggerUserSearch,
+        "clear-click": triggerUserSearch,
+      },
+    },
+  ],
+  customComponents: {
+    "user-table-select": markRaw(UserTableSelect),
+  },
+});
+
+const contentCols = reactive<
+  Array<{
+    prop?: string;
+    label?: string;
+    show?: boolean;
+  }>
+>([
+  { prop: "selection", label: "选择框", show: true },
+  { prop: "index", label: "序号", show: true },
+  { prop: "name", label: "岗位名称", show: true },
+  { prop: "order", label: "岗位排序", show: true },
+  { prop: "status", label: "状态", show: true },
+  { prop: "description", label: "描述", show: true },
+  { prop: "created_time", label: "创建时间", show: true },
+  { prop: "updated_time", label: "更新时间", show: true },
+  { prop: "created_id", label: "创建人", show: true },
+  { prop: "updated_id", label: "更新人", show: true },
+  { prop: "operation", label: "操作", show: true },
+]);
+
+const contentConfig = reactive<IContentConfig<PositionPageQuery>>({
+  permPrefix: "module_system:position",
+  pk: "id",
+  cols: contentCols as IContentConfig["cols"],
+  hideColumnFilter: false,
+  toolbar: [],
+  defaultToolbar: ["refresh", "filter"],
+  pagination: {
+    pageSize: 10,
+    pageSizes: [10, 20, 30, 50],
+  },
+  request: { page_no: "page_no", page_size: "page_size" },
+  indexAction: async (params) => {
+    const res = await PositionAPI.listPosition(params as PositionPageQuery);
+    return {
+      total: res.data.data.total,
+      list: res.data.data.items,
+    };
+  },
+  deleteAction: async (ids) => {
+    await PositionAPI.deletePosition(
+      ids
+        .split(",")
+        .map((s) => Number(s.trim()))
+        .filter((n) => !Number.isNaN(n))
+    );
+    const userStore = useUserStore();
+    await userStore.getUserInfo();
+  },
+  deleteConfirm: {
+    title: "警告",
+    message: "确认删除该项数据?",
+    type: "warning",
+  },
+});
+
+function handleRowDelete(id: number) {
+  contentRef.value?.handleDelete(id);
+}
+
+const exportsDialogVisible = ref(false);
+
+const exportQueryParams = computed(() => searchRef.value?.getQueryParams() ?? {});
+
+const exportPageData = computed(() => (unref(contentRef.value?.pageData) ?? []) as PositionTable[]);
+
+const exportSelectionData = computed(
+  () => (contentRef.value?.getSelectionData() ?? []) as PositionTable[]
+);
+
+const exportColumns = [
+  { prop: "name", label: "岗位名称" },
+  { prop: "order", label: "岗位排序" },
+  { prop: "status", label: "状态" },
+  { prop: "description", label: "描述" },
+  { prop: "created_time", label: "创建时间" },
+  { prop: "updated_time", label: "更新时间" },
+];
+
+const curdContentConfig = {
+  permPrefix: "module_system:position",
+  cols: exportColumns as unknown as IContentConfig["cols"],
+  exportsAction: async (params: Record<string, unknown>) => {
+    const query = { ...params } as Record<string, unknown>;
+    return fetchAllPages<PositionTable>({
+      initialQuery: query,
+      fetchPage: async (q) => {
+        const res = await PositionAPI.listPosition(q as unknown as PositionPageQuery);
+        return {
+          total: res.data?.data?.total ?? 0,
+          list: res.data?.data?.items ?? [],
+        };
+      },
+    });
+  },
+} as unknown as IContentConfig;
+
+function handleOpenExportsModal() {
+  exportsDialogVisible.value = true;
+}
+
+const detailFormData = ref<PositionTable>({});
+
+const formData = reactive<PositionForm>({
+  id: undefined,
+  name: undefined,
+  order: 1,
+  status: "0",
+  description: undefined,
+});
+
+const dialogVisible = reactive({
+  title: "",
+  visible: false,
+  type: "create" as "create" | "update" | "detail",
+});
+
+const rules = reactive({
+  name: [{ required: true, message: "请输入岗位名称", trigger: "blur" }],
+  order: [{ required: true, message: "请输入岗位排序", trigger: "blur" }],
+  status: [{ required: true, message: "请选择岗位状态", trigger: "blur" }],
+});
+
+const initialFormData: PositionForm = {
+  id: undefined,
+  name: undefined,
+  order: 1,
+  status: "0",
+  description: undefined,
+};
+
+async function resetForm() {
+  if (dataFormRef.value) {
+    dataFormRef.value.resetFields();
+    dataFormRef.value.clearValidate();
+  }
+  Object.assign(formData, initialFormData);
+}
+
+async function handleCloseDialog() {
+  dialogVisible.visible = false;
+  await resetForm();
+}
+
+async function handleOpenDialog(type: "create" | "update" | "detail", id?: number) {
+  dialogVisible.type = type;
+  if (id) {
+    const response = await PositionAPI.detailPosition(id);
+    if (type === "detail") {
+      dialogVisible.title = "岗位详情";
+      Object.assign(detailFormData.value, response.data.data);
+    } else if (type === "update") {
+      dialogVisible.title = "修改岗位";
+      Object.assign(formData, response.data.data);
+    }
+  } else {
+    dialogVisible.title = "新增岗位";
+    formData.id = undefined;
+  }
+  dialogVisible.visible = true;
+}
+
+async function handleSubmit() {
+  dataFormRef.value.validate(async (valid: boolean) => {
+    if (valid) {
+      submitLoading.value = true;
+      const id = formData.id;
+      try {
+        if (id) {
+          await PositionAPI.updatePosition(id, { id, ...formData });
+        } else {
+          await PositionAPI.createPosition(formData);
+        }
+        dialogVisible.visible = false;
+        await resetForm();
+        refreshList();
+        const userStore = useUserStore();
+        await userStore.getUserInfo();
+      } catch (error: unknown) {
+        console.error(error);
+      } finally {
+        submitLoading.value = false;
+      }
+    }
+  });
+}
+
+async function handleMoreClick(status: string) {
+  const rows = contentRef.value?.getSelectionData() as PositionTable[] | undefined;
+  const ids = (rows ?? []).map((r) => r.id).filter((id): id is number => id != null);
+  if (!ids.length) {
+    ElMessage.warning("请先选择要操作的数据");
+    return;
+  }
+  ElMessageBox.confirm(`确认${status === "0" ? "启用" : "停用"}该项数据?`, "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(async () => {
+      try {
+        await PositionAPI.batchPosition({ ids, status });
+        refreshList();
+        const userStore = useUserStore();
+        await userStore.getUserInfo();
+      } catch (error: unknown) {
+        console.error(error);
+      }
+    })
+    .catch(() => {
+      ElMessageBox.close();
+    });
+}
+</script>
diff --git a/frontend/new-web/src/views/module_system/role/components/PermissonDrawer.vue b/frontend/new-web/src/views/module_system/role/components/PermissonDrawer.vue
new file mode 100644
index 00000000..13cc686f
--- /dev/null
+++ b/frontend/new-web/src/views/module_system/role/components/PermissonDrawer.vue
@@ -0,0 +1,411 @@
+<!-- 角色授权 -->
+<template>
+  <EnhancedDrawer
+    v-model="drawerVisible"
+    :title="'【' + props.roleName + '】权限分配'"
+    :size="drawerSize"
+    destroy-on-close
+    @close="handleCancel"
+  >
+    <div class="drawer-perm-content flex flex-col min-h-0 flex-1 overflow-hidden">
+      <el-container class="h-full min-h-0 flex-1">
+        <!-- 数据权限 -->
+        <el-aside>
+          <div
+            class="border-r-1 border-r-[var(--el-border-color-lighter)] b-r-solid h-[100%] p-[20px] box-border"
+          >
+            <div class="flex items-center">
+              <div style="display: flex; gap: 10px">
+                <div style="width: 10px; background-color: var(--el-color-primary)"></div>
+                <div>
+                  <span style="font-size: 16px">数据授权</span>
+                  <el-tooltip placement="right">
+                    <template #content>
+                      <span>授权用户可操作的数据范围</span>
+                    </template>
+                    <el-icon class="ml-1 inline-block cursor-pointer">
+                      <QuestionFilled />
+                    </el-icon>
+                  </el-tooltip>
+                </div>
+              </div>
+            </div>
+            <div class="mt-3">
+              <el-form ref="dataFormRef" :model="permissionState">
+                <el-form-item prop="data_scope">
+                  <el-select v-model="permissionState.data_scope">
+                    <el-option :key="1" label="仅本人数据权限" :value="1" />
+                    <el-option :key="2" label="本部门数据权限" :value="2" />
+                    <el-option :key="3" label="本部门及以下数据权限" :value="3" />
+                    <el-option :key="4" label="全部数据权限" :value="4" />
+                    <el-option :key="5" label="自定义数据权限" :value="5" />
+                  </el-select>
+                </el-form-item>
+              </el-form>
+
+              <div
+                v-if="permissionState.data_scope === 5 && deptTreeData.length"
+                class="mt-5 max-h-[60vh] b-1 b-solid b-[var(--el-border-color-lighter)] p-10px overflow-auto box-border"
+              >
+                <el-input v-model="deptFilterText" placeholder="部门名称" />
+                <el-tree
+                  ref="deptTreeRef"
+                  node-key="value"
+                  show-checkbox
+                  :data="deptTreeData"
+                  :filter-node-method="handleFilter"
+                  default-expand-all
+                  :highlight-current="true"
+                  :check-strictly="!parentChildLinked"
+                  style="height: calc(100% - 60px); margin-top: 10px; overflow-y: auto"
+                  @check="deptTreeCheck"
+                >
+                  <template #empty>
+                    <el-empty :image-size="80" description="暂无数据" />
+                  </template>
+                </el-tree>
+              </div>
+            </div>
+          </div>
+        </el-aside>
+
+        <!-- 菜单权限 -->
+        <el-main>
+          <div style="display: flex; gap: 10px">
+            <div style="width: 10px; background-color: var(--el-color-primary)"></div>
+            <div>
+              <span style="font-size: 16px">菜单授权</span>
+              <el-tooltip placement="right">
+                <template #content>
+                  <span>授权用户可操作的菜单权限</span>
+                </template>
+                <el-icon class="ml-1 inline-block cursor-pointer">
+                  <QuestionFilled />
+                </el-icon>
+              </el-tooltip>
+            </div>
+          </div>
+          <div class="mt-3 flex-x-between">
+            <el-input v-model="permFilterText" placeholder="菜单名称" />
+            <div class="flex-center ml-5">
+              <el-button type="primary" size="small" plain @click="togglePermTree">
+                <template #icon>
+                  <SwitchIcon />
+                </template>
+                {{ isExpanded ? "收缩" : "展开" }}
+              </el-button>
+              <el-checkbox
+                v-model="parentChildLinked"
+                class="ml-5"
+                @change="handleParentChildLinkedChange"
+              >
+                父子联动
+              </el-checkbox>
+
+              <el-tooltip placement="bottom">
+                <template #content>
+                  如果只需勾选菜单权限，不需要勾选子菜单或者按钮权限，请关闭父子联动
+                </template>
+                <el-icon class="ml-1 color-[--el-color-primary] inline-block cursor-pointer">
+                  <QuestionFilled />
+                </el-icon>
+              </el-tooltip>
+            </div>
+          </div>
+
+          <div
+            class="mt-5 max-h-[69vh] b-1 b-solid b-[var(--el-border-color-lighter)] p-10px overflow-auto box-border"
+          >
+            <el-tree
+              ref="permTreeRef"
+              node-key="value"
+              show-checkbox
+              :data="menuTreeData"
+              :filter-node-method="handleFilter"
+              default-expand-all
+              :highlight-current="true"
+              :check-strictly="!parentChildLinked"
+              style="height: calc(100% - 60px); margin-top: 10px; overflow: auto"
+              @check="menuTreeCheck"
+            >
+              <template #empty>
+                <el-empty :image-size="80" description="暂无数据" />
+              </template>
+            </el-tree>
+          </div>
+        </el-main>
+      </el-container>
+    </div>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="handleCancel">取 消</el-button>
+        <el-button type="primary" :loading="loading" @click.stop="handleDrawerSave">
+          确 定
+        </el-button>
+      </div>
+    </template>
+  </EnhancedDrawer>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch, onMounted } from "vue";
+import { QuestionFilled, Switch as SwitchIcon } from "@element-plus/icons-vue";
+import type { TreeInstance } from "element-plus";
+import EnhancedDrawer from "@/components/CURD/EnhancedDrawer.vue";
+import { listToTree, formatTree } from "@/utils/common";
+import RoleAPI, {
+  permissionDataType,
+  permissionDeptType,
+  permissionMenuType,
+} from "@/api/module_system/role";
+import DeptAPI from "@/api/module_system/dept";
+import MenuAPI from "@/api/module_system/menu";
+import { useAppStore } from "@/store/modules/app.store";
+import { DeviceEnum } from "@/enums/settings/device.enum";
+import { useUserStore } from "@/store";
+
+/** formatTree 后的菜单节点带 value（同原 id），与接口里的 id 二选一存在 */
+type MenuTreeNode = permissionMenuType & { value?: number };
+
+const props = defineProps<{
+  roleName: string;
+  roleId: number;
+  modelValue: boolean;
+}>();
+
+const emit = defineEmits<{
+  "update:modelValue": [v: boolean];
+  saved: [];
+}>();
+
+const appStore = useAppStore();
+const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? "800px" : "90%"));
+
+const drawerVisible = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(value: boolean) {
+    emit("update:modelValue", value);
+  },
+});
+
+const permTreeRef = ref<TreeInstance>();
+const deptTreeRef = ref<TreeInstance>();
+const deptFilterText = ref("");
+const permFilterText = ref("");
+const dataFormRef = ref();
+const isExpanded = ref(true);
+const parentChildLinked = ref(false);
+const loading = ref(false);
+const deptTreeData = ref<permissionDeptType[]>([]);
+const menuTreeData = ref<MenuTreeNode[]>([]);
+const permissionState = ref<permissionDataType>({
+  role_ids: [],
+  menu_ids: [],
+  data_scope: 1,
+  dept_ids: [],
+});
+
+const init = async () => {
+  loading.value = true;
+
+  try {
+    const deptResponse = await DeptAPI.listDept();
+    deptTreeData.value = formatTree(listToTree(deptResponse.data.data));
+
+    const menuResponse = await MenuAPI.listMenu();
+    menuTreeData.value = formatTree(listToTree(menuResponse.data.data));
+
+    const roleResponse = await RoleAPI.detailRole(props.roleId);
+
+    permissionState.value = {
+      role_ids: [props.roleId],
+      menu_ids: roleResponse.data.data.menus?.map((menu) => menu.id) || [],
+      data_scope: roleResponse.data.data.data_scope || 1,
+      dept_ids: roleResponse.data.data.depts?.map((dept) => dept.id) || [],
+    };
+
+    parentChildLinked.value = checkParentChildLinked(
+      permissionState.value.menu_ids,
+      menuTreeData.value
+    );
+
+    if (permTreeRef.value) {
+      await permTreeRef.value.setCheckedKeys(permissionState.value.menu_ids);
+    }
+
+    if (permissionState.value.data_scope === 5 && deptTreeRef.value) {
+      await deptTreeRef.value.setCheckedKeys(permissionState.value.dept_ids);
+    }
+  } catch (error: unknown) {
+    const msg = error instanceof Error ? error.message : String(error);
+    ElMessage.error("获取权限数据失败: " + msg);
+  } finally {
+    loading.value = false;
+  }
+};
+
+function handleCancel() {
+  drawerVisible.value = false;
+}
+
+async function handleDrawerSave() {
+  try {
+    if (props.roleId === 1) {
+      ElMessage.warning("系统默认角色，不可操作");
+      return;
+    }
+    loading.value = true;
+
+    const rawChecked = (permTreeRef.value?.getCheckedKeys() || []).map((key) => Number(key));
+    const menu_ids = expandMenuIdsWithAncestors(rawChecked, menuTreeData.value);
+
+    const submitData: permissionDataType = {
+      role_ids: [props.roleId],
+      menu_ids,
+      data_scope: permissionState.value.data_scope,
+      dept_ids: (deptTreeRef.value?.getCheckedKeys() || []).map((key) => Number(key)),
+    };
+
+    await RoleAPI.setPermission(submitData);
+
+    const userStore = useUserStore();
+    await userStore.getUserInfo();
+
+    drawerVisible.value = false;
+    emit("saved");
+  } catch (error: unknown) {
+    console.error(error);
+  } finally {
+    loading.value = false;
+  }
+}
+
+const deptTreeCheck = (checkedIds: number[]) => {
+  permissionState.value.dept_ids = checkedIds;
+};
+
+const menuTreeCheck = (checkedIds: number[]) => {
+  permissionState.value.menu_ids = checkedIds;
+};
+
+function togglePermTree() {
+  isExpanded.value = !isExpanded.value;
+  if (permTreeRef.value) {
+    Object.values(permTreeRef.value.store.nodesMap).forEach((node: any) => {
+      if (isExpanded.value) {
+        node.expand();
+      } else {
+        node.collapse();
+      }
+    });
+  }
+}
+
+watch(deptFilterText, (val) => {
+  deptTreeRef.value!.filter(val);
+});
+
+watch(permFilterText, (val) => {
+  permTreeRef.value!.filter(val);
+});
+
+function handleFilter(value: string, data: { [key: string]: any }) {
+  if (!value) return true;
+  return data.label.includes(value);
+}
+
+function menuTreeNodeId(node: MenuTreeNode): number {
+  const v = node.value ?? node.id;
+  return Number(v);
+}
+
+function checkParentChildLinked(menuIds: number[], menuTreeData: MenuTreeNode[]): boolean {
+  if (!menuIds.length || !menuTreeData.length) return false;
+
+  const menuMap = new Map<number, MenuTreeNode>();
+  const buildMenuMap = (menus: MenuTreeNode[]) => {
+    menus.forEach((menu) => {
+      menuMap.set(menuTreeNodeId(menu), menu);
+      if (menu.children) {
+        buildMenuMap(menu.children as MenuTreeNode[]);
+      }
+    });
+  };
+  buildMenuMap(menuTreeData);
+
+  let hasParentChildConflict = false;
+
+  for (const menuId of menuIds) {
+    const menu = menuMap.get(menuId);
+    if (!menu) continue;
+
+    if (menu.children && menu.children.length > 0) {
+      const hasUnselectedChildren = menu.children.some(
+        (child) => !menuIds.includes(menuTreeNodeId(child as MenuTreeNode))
+      );
+      if (hasUnselectedChildren) {
+        hasParentChildConflict = true;
+        break;
+      }
+    }
+
+    const parentMenu = findParentMenu(menuId, menuTreeData);
+    if (parentMenu && !menuIds.includes(menuTreeNodeId(parentMenu))) {
+      hasParentChildConflict = true;
+      break;
+    }
+  }
+
+  return !hasParentChildConflict;
+}
+
+function findParentMenu(menuId: number, menuTreeData: MenuTreeNode[]): MenuTreeNode | null {
+  for (const menu of menuTreeData) {
+    if (menu.children) {
+      for (const child of menu.children) {
+        if (menuTreeNodeId(child as MenuTreeNode) === menuId) {
+          return menu;
+        }
+        const found = findParentMenu(menuId, [child as MenuTreeNode]);
+        if (found) return found;
+      }
+    }
+  }
+  return null;
+}
+
+/** 为已选菜单补齐所有祖先 id，避免仅选子节点时父级未入库导致侧栏/路由缺入口（BUG #1/#14） */
+function expandMenuIdsWithAncestors(checkedIds: number[], roots: MenuTreeNode[]): number[] {
+  const parentById = new Map<number, number | undefined>();
+  const walk = (nodes: MenuTreeNode[], parent: number | undefined) => {
+    for (const n of nodes) {
+      const id = menuTreeNodeId(n);
+      parentById.set(id, parent);
+      if (n.children?.length) walk(n.children as MenuTreeNode[], id);
+    }
+  };
+  walk(roots, undefined);
+  const out = new Set<number>();
+  for (const id of checkedIds) {
+    let cur: number | undefined = id;
+    while (cur !== undefined) {
+      out.add(cur);
+      cur = parentById.get(cur);
+    }
+  }
+  return [...out];
+}
+
+function handleParentChildLinkedChange(val: any) {
+  parentChildLinked.value = val;
+}
+
+onMounted(async () => {
+  await init();
+});
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/frontend/new-web/src/views/module_system/role/index.vue b/frontend/new-web/src/views/module_system/role/index.vue
new file mode 100644
index 00000000..af104bec
--- /dev/null
+++ b/frontend/new-web/src/views/module_system/role/index.vue
@@ -0,0 +1,683 @@
+<!-- 角色管理 -->
+<template>
+  <div class="app-container">
+    <PageSearch
+      ref="searchRef"
+      :search-config="searchConfig"
+      @query-click="handleQueryClick"
+      @reset-click="handleResetClick"
+    />
+
+    <PageContent ref="contentRef" :content-config="contentConfig">
+      <template #toolbar="{ toolbarRight, onToolbar, removeIds, cols }">
+        <CrudToolbarLeft
+          :remove-ids="removeIds"
+          :perm-create="['module_system:role:create']"
+          :perm-delete="['module_system:role:delete']"
+          :perm-patch="['module_system:role:patch']"
+          @add="handleOpenDialog('create')"
+          @delete="onToolbar('delete')"
+          @more="handleMoreClick"
+        />
+        <div class="data-table__toolbar--right">
+          <CrudToolbarRight :buttons="toolbarRight" :cols="cols" :on-toolbar="onToolbar">
+            <template #prepend>
+              <el-tooltip content="导出">
+                <el-button
+                  v-hasPerm="['module_system:role:export']"
+                  type="warning"
+                  icon="download"
+                  circle
+                  @click="handleOpenExportsModal"
+                />
+              </el-tooltip>
+            </template>
+          </CrudToolbarRight>
+        </div>
+      </template>
+
+      <template #table="{ data, loading, tableRef, onSelectionChange, pagination }">
+        <div class="data-table__content">
+          <el-table
+            :ref="tableRef as any"
+            v-loading="loading"
+            row-key="id"
+            :data="data"
+            height="100%"
+            border
+            stripe
+            @selection-change="onSelectionChange"
+          >
+            <template #empty>
+              <el-empty :image-size="80" description="暂无数据" />
+            </template>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'selection')?.show"
+              type="selection"
+              width="55"
+              align="center"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'index')?.show"
+              fixed
+              label="序号"
+              width="60"
+            >
+              <template #default="scope">
+                {{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }}
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'name')?.show"
+              key="name"
+              label="角色名称"
+              prop="name"
+              min-width="100"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'code')?.show"
+              key="code"
+              label="角色编码"
+              prop="code"
+              min-width="100"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'data_scope')?.show"
+              key="data_scope"
+              label="数据权限"
+              prop="data_scope"
+              min-width="200"
+            >
+              <template #default="scope">
+                <el-tag v-if="scope.row.data_scope === 1" type="primary">仅本人数据权限</el-tag>
+                <el-tag v-else-if="scope.row.data_scope === 2" type="info">本部门数据权限</el-tag>
+                <el-tag v-else-if="scope.row.data_scope === 3" type="warning">
+                  本部门及以下数据权限
+                </el-tag>
+                <el-tag v-else-if="scope.row.data_scope === 4" type="success">全部数据权限</el-tag>
+                <el-tag v-else type="danger">自定义数据权限</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'depts')?.show"
+              key="depts"
+              label="所属部门"
+              prop="depts"
+              min-width="200"
+            >
+              <template #default="scope">
+                <template v-if="scope.row.depts && scope.row.depts.length > 0">
+                  <el-tag
+                    v-for="dept in scope.row.depts.slice(0, 3)"
+                    :key="dept.id"
+                    type="info"
+                    style="margin-right: 4px; margin-bottom: 4px"
+                  >
+                    {{ dept.name }}
+                  </el-tag>
+                  <el-tag v-if="scope.row.depts.length > 3" type="info" style="margin-bottom: 4px">
+                    +{{ scope.row.depts.length - 3 }}
+                  </el-tag>
+                </template>
+                <span v-else style="color: var(--el-text-color-placeholder)">-</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'order')?.show"
+              key="order"
+              label="排序"
+              prop="order"
+              min-width="80"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'status')?.show"
+              key="status"
+              label="状态"
+              prop="status"
+              min-width="80"
+            >
+              <template #default="scope">
+                <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">
+                  {{ scope.row.status === "0" ? "启用" : "停用" }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'description')?.show"
+              key="description"
+              label="描述"
+              prop="description"
+              min-width="100"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'created_time')?.show"
+              key="created_time"
+              label="创建时间"
+              prop="created_time"
+              min-width="200"
+              sortable
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'updated_time')?.show"
+              key="updated_time"
+              label="更新时间"
+              prop="updated_time"
+              min-width="200"
+              sortable
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'operation')?.show"
+              fixed="right"
+              label="操作"
+              align="center"
+              min-width="280"
+            >
+              <template #default="scope">
+                <el-button
+                  v-hasPerm="['module_system:role:permission']"
+                  type="warning"
+                  size="small"
+                  link
+                  icon="position"
+                  :disabled="scope.row.id === 1"
+                  @click="
+                    scope.row.id === 1
+                      ? ElMessage.warning('系统默认角色，不可操作')
+                      : handleOpenAssignPermDialog(scope.row.id, scope.row.name)
+                  "
+                >
+                  分配权限
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_system:role:detail']"
+                  type="info"
+                  size="small"
+                  link
+                  icon="View"
+                  @click="handleOpenDialog('detail', scope.row.id)"
+                >
+                  详情
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_system:role:update']"
+                  type="primary"
+                  size="small"
+                  link
+                  icon="edit"
+                  :disabled="scope.row.id === 1"
+                  @click="
+                    scope.row.id === 1
+                      ? ElMessage.warning('系统默认角色，不可操作')
+                      : handleOpenDialog('update', scope.row.id)
+                  "
+                >
+                  编辑
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_system:role:delete']"
+                  type="danger"
+                  size="small"
+                  link
+                  icon="delete"
+                  :disabled="scope.row.id === 1"
+                  @click="
+                    scope.row.id === 1
+                      ? ElMessage.warning('系统默认角色，不可操作')
+                      : handleRowDelete(scope.row.id)
+                  "
+                >
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </template>
+    </PageContent>
+
+    <EnhancedDialog
+      v-model="dialogVisible.visible"
+      :title="dialogVisible.title"
+      @close="handleCloseDialog"
+    >
+      <template v-if="dialogVisible.type === 'detail'">
+        <el-descriptions :column="4" border>
+          <el-descriptions-item label="角色名称" :span="2">
+            {{ detailFormData.name }}
+          </el-descriptions-item>
+          <el-descriptions-item label="排序" :span="2">
+            {{ detailFormData.order }}
+          </el-descriptions-item>
+          <el-descriptions-item label="角色编码" :span="2">
+            {{ detailFormData.code }}
+          </el-descriptions-item>
+          <el-descriptions-item label="数据权限" :span="2">
+            <el-tag v-if="detailFormData.data_scope === 1" type="primary">仅本人数据权限</el-tag>
+            <el-tag v-else-if="detailFormData.data_scope === 2" type="info">本部门数据权限</el-tag>
+            <el-tag v-else-if="detailFormData.data_scope === 3" type="warning">
+              本部门及以下数据权限
+            </el-tag>
+            <el-tag v-else-if="detailFormData.data_scope === 4" type="success">全部数据权限</el-tag>
+            <el-tag v-else type="danger">自定义数据权限</el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="所属部门" :span="2">
+            <template v-if="detailFormData.depts && detailFormData.depts.length > 0">
+              <el-tag
+                v-for="dept in detailFormData.depts"
+                :key="dept.id"
+                type="info"
+                style="margin-right: 4px; margin-bottom: 4px"
+              >
+                {{ dept.name }}
+              </el-tag>
+            </template>
+            <span v-else style="color: var(--el-text-color-placeholder)">-</span>
+          </el-descriptions-item>
+          <el-descriptions-item label="状态" :span="2">
+            <el-tag :type="detailFormData.status === '0' ? 'success' : 'danger'">
+              {{ detailFormData.status === "0" ? "启用" : "停用" }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="创建时间" :span="2">
+            {{ detailFormData.created_time }}
+          </el-descriptions-item>
+          <el-descriptions-item label="更新时间" :span="2">
+            {{ detailFormData.updated_time }}
+          </el-descriptions-item>
+          <el-descriptions-item label="描述" :span="4">
+            {{ detailFormData.description }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </template>
+      <template v-else>
+        <el-form
+          ref="dataFormRef"
+          :model="formData"
+          :rules="rules"
+          label-suffix=":"
+          label-width="auto"
+          label-position="right"
+        >
+          <el-form-item label="角色名称" prop="name">
+            <el-input v-model="formData.name" placeholder="请输入角色名称" />
+          </el-form-item>
+
+          <el-form-item label="排序" prop="order">
+            <el-input-number
+              v-model="formData.order"
+              controls-position="right"
+              :min="0"
+              style="width: 100px"
+            />
+          </el-form-item>
+
+          <el-form-item label="角色编码" prop="code">
+            <el-input
+              v-model="formData.code"
+              placeholder="字母开头，2-16位字母/数字/下划线"
+              maxlength="16"
+              show-word-limit
+            />
+          </el-form-item>
+
+          <el-form-item label="状态" prop="status">
+            <el-radio-group v-model="formData.status">
+              <el-radio value="0">启用</el-radio>
+              <el-radio value="1">停用</el-radio>
+            </el-radio-group>
+          </el-form-item>
+
+          <el-form-item label="描述" prop="description">
+            <el-input
+              v-model="formData.description"
+              :rows="4"
+              :maxlength="100"
+              show-word-limit
+              type="textarea"
+              placeholder="请输入描述"
+            />
+          </el-form-item>
+        </el-form>
+      </template>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="handleCloseDialog">取消</el-button>
+          <el-button
+            v-if="dialogVisible.type !== 'detail'"
+            type="primary"
+            :loading="submitLoading"
+            @click="handleSubmit"
+          >
+            确定
+          </el-button>
+          <el-button v-else type="primary" @click="handleCloseDialog">确定</el-button>
+        </div>
+      </template>
+    </EnhancedDialog>
+
+    <PermissonDrawer
+      v-if="drawerVisible"
+      v-model="drawerVisible"
+      :role-name="checkedRole.name"
+      :role-id="checkedRole.id"
+      @saved="refreshList"
+    />
+
+    <ExportModal
+      v-model="exportsDialogVisible"
+      :content-config="curdContentConfig"
+      :query-params="exportQueryParams"
+      :page-data="exportPageData"
+      :selection-data="exportSelectionData"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  name: "Role",
+  inheritAttrs: false,
+});
+
+import { ElMessage, ElMessageBox } from "element-plus";
+import { ref, reactive, computed, unref } from "vue";
+import { fetchAllPages } from "@/utils/fetchAllPages";
+import RoleAPI, { RoleTable, RoleForm, TablePageQuery } from "@/api/module_system/role";
+import { useUserStore } from "@/store";
+import ExportModal from "@/components/CURD/ExportModal.vue";
+import CrudToolbarLeft from "@/components/CURD/CrudToolbarLeft.vue";
+import CrudToolbarRight from "@/components/CURD/CrudToolbarRight.vue";
+import PageSearch from "@/components/CURD/PageSearch.vue";
+import PageContent from "@/components/CURD/PageContent.vue";
+import EnhancedDialog from "@/components/CURD/EnhancedDialog.vue";
+import PermissonDrawer from "./components/PermissonDrawer.vue";
+import { useCrudList } from "@/components/CURD/useCrudList";
+import type { IContentConfig, ISearchConfig } from "@/components/CURD/types";
+
+const { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList } = useCrudList();
+const dataFormRef = ref();
+const submitLoading = ref(false);
+
+const searchConfig = reactive<ISearchConfig>({
+  permPrefix: "module_system:role",
+  colon: true,
+  isExpandable: true,
+  showNumber: 2,
+  form: { labelWidth: "auto" },
+  formItems: [
+    {
+      prop: "name",
+      label: "角色名称",
+      type: "input",
+      attrs: { placeholder: "请输入角色名称", clearable: true },
+    },
+    {
+      prop: "status",
+      label: "状态",
+      type: "select",
+      options: [
+        { label: "启用", value: "true" },
+        { label: "停用", value: "false" },
+      ],
+      attrs: { placeholder: "请选择状态", clearable: true, style: { width: "167.5px" } },
+    },
+    {
+      prop: "created_time",
+      label: "创建时间",
+      type: "date-picker",
+      initialValue: [],
+      attrs: {
+        type: "datetimerange",
+        valueFormat: "YYYY-MM-DD HH:mm:ss",
+        rangeSeparator: "至",
+        startPlaceholder: "开始日期",
+        endPlaceholder: "结束日期",
+        style: { width: "340px" },
+      },
+    },
+  ],
+});
+
+const contentCols = reactive<
+  Array<{
+    prop?: string;
+    label?: string;
+    show?: boolean;
+  }>
+>([
+  { prop: "selection", label: "选择框", show: true },
+  { prop: "index", label: "序号", show: true },
+  { prop: "name", label: "角色名称", show: true },
+  { prop: "data_scope", label: "数据权限", show: true },
+  { prop: "depts", label: "所属部门", show: true },
+  { prop: "order", label: "排序", show: true },
+  { prop: "code", label: "角色编码", show: true },
+  { prop: "status", label: "状态", show: true },
+  { prop: "description", label: "描述", show: true },
+  { prop: "created_time", label: "创建时间", show: true },
+  { prop: "updated_time", label: "更新时间", show: true },
+  { prop: "operation", label: "操作", show: true },
+]);
+
+const contentConfig = reactive<IContentConfig<TablePageQuery>>({
+  permPrefix: "module_system:role",
+  pk: "id",
+  cols: contentCols as IContentConfig["cols"],
+  hideColumnFilter: false,
+  toolbar: [],
+  defaultToolbar: ["refresh", "filter"],
+  pagination: {
+    pageSize: 10,
+    pageSizes: [10, 20, 30, 50],
+  },
+  request: { page_no: "page_no", page_size: "page_size" },
+  indexAction: async (params) => {
+    const res = await RoleAPI.listRole(params as TablePageQuery);
+    return {
+      total: res.data.data.total,
+      list: res.data.data.items,
+    };
+  },
+  deleteAction: async (ids) => {
+    await RoleAPI.deleteRole(
+      ids
+        .split(",")
+        .map((s) => Number(s.trim()))
+        .filter((n) => !Number.isNaN(n))
+    );
+    const userStore = useUserStore();
+    await userStore.getUserInfo();
+  },
+  deleteConfirm: {
+    title: "警告",
+    message: "确认删除该项数据?",
+    type: "warning",
+  },
+});
+
+function handleRowDelete(id: number) {
+  contentRef.value?.handleDelete(id);
+}
+
+const drawerVisible = ref(false);
+const checkedRole = ref({ id: 0, name: "" });
+
+const exportsDialogVisible = ref(false);
+
+const exportQueryParams = computed(() => searchRef.value?.getQueryParams() ?? {});
+
+const exportPageData = computed(() => (unref(contentRef.value?.pageData) ?? []) as RoleTable[]);
+
+const exportSelectionData = computed(
+  () => (contentRef.value?.getSelectionData() ?? []) as RoleTable[]
+);
+
+const exportColumns = [
+  { prop: "name", label: "角色名称" },
+  { prop: "code", label: "角色编码" },
+  { prop: "data_scope", label: "数据权限" },
+  { prop: "depts", label: "所属部门" },
+  { prop: "order", label: "排序" },
+  { prop: "status", label: "状态" },
+  { prop: "description", label: "描述" },
+  { prop: "created_time", label: "创建时间" },
+  { prop: "updated_time", label: "更新时间" },
+];
+
+const curdContentConfig = {
+  permPrefix: "module_system:role",
+  cols: exportColumns as unknown as IContentConfig["cols"],
+  exportsAction: async (params: Record<string, unknown>) => {
+    const query: Record<string, unknown> = { ...params };
+    if (typeof query.status === "string") {
+      query.status = query.status === "true";
+    }
+    return fetchAllPages<RoleTable>({
+      initialQuery: query,
+      fetchPage: async (q) => {
+        const res = await RoleAPI.listRole(q as unknown as TablePageQuery);
+        return {
+          total: res.data?.data?.total ?? 0,
+          list: res.data?.data?.items ?? [],
+        };
+      },
+    });
+  },
+} as unknown as IContentConfig;
+
+function handleOpenExportsModal() {
+  exportsDialogVisible.value = true;
+}
+
+const detailFormData = ref<RoleTable>({} as RoleTable);
+
+const formData = reactive<RoleForm>({
+  id: undefined,
+  name: undefined,
+  order: 1,
+  code: "",
+  status: "0",
+  description: undefined,
+});
+
+const dialogVisible = reactive({
+  title: "",
+  visible: false,
+  type: "create" as "create" | "update" | "detail",
+});
+
+const CODE_PATTERN = /^[A-Za-z][A-Za-z0-9_]{1,15}$/;
+
+const rules = reactive({
+  name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
+  code: [
+    { required: true, message: "请输入角色编码", trigger: "blur" },
+    {
+      pattern: CODE_PATTERN,
+      message: "字母开头，2-16位字母/数字/下划线",
+      trigger: "blur",
+    },
+  ],
+  order: [{ required: true, message: "请输入角色排序", trigger: "blur" }],
+  status: [{ required: true, message: "请选择状态", trigger: "blur" }],
+});
+
+const initialFormData: RoleForm = {
+  id: undefined,
+  name: undefined,
+  order: 1,
+  code: "",
+  status: "0",
+  description: undefined,
+};
+
+async function resetForm() {
+  if (dataFormRef.value) {
+    dataFormRef.value.resetFields();
+    dataFormRef.value.clearValidate();
+  }
+  Object.assign(formData, initialFormData);
+}
+
+async function handleCloseDialog() {
+  dialogVisible.visible = false;
+  await resetForm();
+}
+
+async function handleOpenDialog(type: "create" | "update" | "detail", id?: number) {
+  dialogVisible.type = type;
+  if (id) {
+    const response = await RoleAPI.detailRole(id);
+    if (type === "detail") {
+      dialogVisible.title = "角色详情";
+      Object.assign(detailFormData.value, response.data.data);
+    } else if (type === "update") {
+      dialogVisible.title = "修改角色";
+      Object.assign(formData, response.data.data);
+    }
+  } else {
+    dialogVisible.title = "新增角色";
+    formData.id = undefined;
+  }
+  dialogVisible.visible = true;
+}
+
+async function handleSubmit() {
+  dataFormRef.value.validate(async (valid: boolean) => {
+    if (valid) {
+      submitLoading.value = true;
+      const id = formData.id;
+      try {
+        if (id) {
+          await RoleAPI.updateRole(id, { id, ...formData });
+        } else {
+          await RoleAPI.createRole(formData);
+        }
+        dialogVisible.visible = false;
+        await resetForm();
+        refreshList();
+        const userStore = useUserStore();
+        await userStore.getUserInfo();
+      } catch (error: unknown) {
+        console.error(error);
+      } finally {
+        submitLoading.value = false;
+      }
+    }
+  });
+}
+
+async function handleMoreClick(status: string) {
+  const rows = contentRef.value?.getSelectionData() as RoleTable[] | undefined;
+  const ids = (rows ?? []).map((r) => r.id).filter((id): id is number => id != null);
+  if (!ids.length) {
+    ElMessage.warning("请先选择要操作的数据");
+    return;
+  }
+  ElMessageBox.confirm(`确认${status === "0" ? "启用" : "停用"}该项数据?`, "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(async () => {
+      try {
+        await RoleAPI.batchRole({ ids, status });
+        refreshList();
+        const userStore = useUserStore();
+        await userStore.getUserInfo();
+      } catch (error: unknown) {
+        console.error(error);
+      }
+    })
+    .catch(() => {
+      ElMessageBox.close();
+    });
+}
+
+function handleOpenAssignPermDialog(roleId: number, roleName: string) {
+  checkedRole.value = { id: roleId, name: roleName };
+  drawerVisible.value = true;
+}
+</script>
diff --git a/frontend/new-web/src/views/module_system/tenant/index.vue b/frontend/new-web/src/views/module_system/tenant/index.vue
new file mode 100644
index 00000000..c068bf95
--- /dev/null
+++ b/frontend/new-web/src/views/module_system/tenant/index.vue
@@ -0,0 +1,525 @@
+<!-- 租户管理 -->
+<template>
+  <div class="app-container">
+    <PageSearch
+      ref="searchRef"
+      :search-config="searchConfig"
+      @query-click="handleQueryClick"
+      @reset-click="handleResetClick"
+    />
+
+    <PageContent ref="contentRef" :content-config="contentConfig">
+      <template #toolbar="{ toolbarRight, onToolbar, removeIds, cols }">
+        <CrudToolbarLeft
+          :remove-ids="removeIds"
+          :perm-create="['module_system:tenant:create']"
+          :perm-delete="['module_system:tenant:delete']"
+          @add="handleOpenDialog('create')"
+          @delete="onToolbar('delete')"
+        />
+        <div class="data-table__toolbar--right">
+          <CrudToolbarRight :buttons="toolbarRight" :cols="cols" :on-toolbar="onToolbar" />
+        </div>
+      </template>
+
+      <template #table="{ data, loading, tableRef, onSelectionChange, pagination }">
+        <div class="data-table__content">
+          <el-table
+            :ref="tableRef as any"
+            v-loading="loading"
+            row-key="id"
+            :data="data"
+            height="100%"
+            border
+            stripe
+            @selection-change="onSelectionChange"
+          >
+            <template #empty>
+              <el-empty :image-size="80" description="暂无数据" />
+            </template>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'selection')?.show"
+              type="selection"
+              min-width="55"
+              align="center"
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'index')?.show"
+              fixed
+              label="序号"
+              min-width="60"
+            >
+              <template #default="scope">
+                {{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }}
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'name')?.show"
+              key="name"
+              label="租户名称"
+              prop="name"
+              min-width="140"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'code')?.show"
+              key="code"
+              label="租户编码"
+              prop="code"
+              min-width="120"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'status')?.show"
+              key="status"
+              label="状态"
+              prop="status"
+              min-width="80"
+              align="center"
+            >
+              <template #default="scope">
+                <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">
+                  {{ scope.row.status === "0" ? "正常" : "禁用" }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'start_time')?.show"
+              key="start_time"
+              label="开始时间"
+              prop="start_time"
+              min-width="180"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'end_time')?.show"
+              key="end_time"
+              label="结束时间"
+              prop="end_time"
+              min-width="180"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'description')?.show"
+              key="description"
+              label="描述"
+              prop="description"
+              min-width="150"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'created_time')?.show"
+              key="created_time"
+              label="创建时间"
+              prop="created_time"
+              min-width="180"
+              show-overflow-tooltip
+            />
+            <el-table-column
+              v-if="contentCols.find((col) => col.prop === 'operation')?.show"
+              fixed="right"
+              label="操作"
+              align="center"
+              min-width="200"
+            >
+              <template #default="scope">
+                <el-button
+                  v-hasPerm="['module_system:tenant:query']"
+                  type="info"
+                  size="small"
+                  link
+                  icon="View"
+                  @click="handleOpenDialog('detail', scope.row.id)"
+                >
+                  详情
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_system:tenant:update']"
+                  type="primary"
+                  size="small"
+                  link
+                  icon="edit"
+                  @click="handleOpenDialog('update', scope.row.id)"
+                >
+                  编辑
+                </el-button>
+                <el-button
+                  v-hasPerm="['module_system:tenant:delete']"
+                  type="danger"
+                  size="small"
+                  link
+                  icon="delete"
+                  @click="handleRowDelete(scope.row.id)"
+                >
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </template>
+    </PageContent>
+
+    <EnhancedDialog
+      v-model="dialogVisible.visible"
+      :title="dialogVisible.title"
+      @close="handleCloseDialog"
+    >
+      <template v-if="dialogVisible.type === 'detail'">
+        <el-descriptions :column="2" border>
+          <el-descriptions-item label="租户名称" :span="2">
+            {{ detailFormData.name }}
+          </el-descriptions-item>
+          <el-descriptions-item label="租户编码" :span="2">
+            {{ detailFormData.code }}
+          </el-descriptions-item>
+          <el-descriptions-item label="状态">
+            <el-tag :type="detailFormData.status === '0' ? 'success' : 'danger'">
+              {{ detailFormData.status === "0" ? "正常" : "禁用" }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="开始时间">
+            {{ detailFormData.start_time }}
+          </el-descriptions-item>
+          <el-descriptions-item label="结束时间">
+            {{ detailFormData.end_time }}
+          </el-descriptions-item>
+          <el-descriptions-item label="描述" :span="2">
+            {{ detailFormData.description }}
+          </el-descriptions-item>
+          <el-descriptions-item label="创建时间" :span="2">
+            {{ detailFormData.created_time }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </template>
+      <template v-else>
+        <el-form
+          ref="dataFormRef"
+          :model="formData"
+          :rules="rules"
+          label-suffix=":"
+          label-width="auto"
+          label-position="right"
+        >
+          <el-form-item label="租户名称" prop="name">
+            <el-input v-model="formData.name" placeholder="请输入租户名称" :maxlength="100" />
+          </el-form-item>
+          <el-form-item label="租户编码" prop="code">
+            <el-input
+              v-model="formData.code"
+              placeholder="字母与数字，创建后不可改"
+              :maxlength="100"
+              :disabled="dialogVisible.type === 'update'"
+            />
+          </el-form-item>
+          <el-form-item label="状态" prop="status">
+            <el-select v-model="formData.status" placeholder="请选择状态" style="width: 100%">
+              <el-option label="正常" value="0" />
+              <el-option label="禁用" value="1" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="描述" prop="description">
+            <el-input
+              v-model="formData.description"
+              type="textarea"
+              :rows="3"
+              placeholder="请输入描述"
+              :maxlength="255"
+            />
+          </el-form-item>
+          <el-form-item label="开始时间" prop="start_time">
+            <el-date-picker
+              v-model="formData.start_time"
+              type="datetime"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="可选"
+              style="width: 100%"
+            />
+          </el-form-item>
+          <el-form-item label="结束时间" prop="end_time">
+            <el-date-picker
+              v-model="formData.end_time"
+              type="datetime"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="可选"
+              style="width: 100%"
+            />
+          </el-form-item>
+        </el-form>
+      </template>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="handleCloseDialog">取消</el-button>
+          <el-button
+            v-if="dialogVisible.type === 'create'"
+            v-hasPerm="['module_system:tenant:create']"
+            type="primary"
+            :loading="submitLoading"
+            @click="handleSubmit"
+          >
+            确定
+          </el-button>
+          <el-button
+            v-else-if="dialogVisible.type === 'update'"
+            v-hasPerm="['module_system:tenant:update']"
+            type="primary"
+            :loading="submitLoading"
+            @click="handleSubmit"
+          >
+            确定
+          </el-button>
+          <el-button v-else type="primary" @click="handleCloseDialog">确定</el-button>
+        </div>
+      </template>
+    </EnhancedDialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import TenantAPI, {
+  TenantForm,
+  TenantCreateForm,
+  TenantUpdateForm,
+  TenantPageQuery,
+  TenantTable,
+} from "@/api/module_system/tenant";
+import CrudToolbarLeft from "@/components/CURD/CrudToolbarLeft.vue";
+import CrudToolbarRight from "@/components/CURD/CrudToolbarRight.vue";
+import PageSearch from "@/components/CURD/PageSearch.vue";
+import PageContent from "@/components/CURD/PageContent.vue";
+import EnhancedDialog from "@/components/CURD/EnhancedDialog.vue";
+import { useCrudList } from "@/components/CURD/useCrudList";
+import type { IContentConfig, ISearchConfig } from "@/components/CURD/types";
+
+defineOptions({
+  name: "Tenant",
+  inheritAttrs: false,
+});
+
+const { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList } = useCrudList();
+const dataFormRef = ref();
+const submitLoading = ref(false);
+
+const searchConfig = reactive<ISearchConfig>({
+  permPrefix: "module_system:tenant",
+  colon: true,
+  isExpandable: true,
+  showNumber: 2,
+  form: { labelWidth: "auto" },
+  formItems: [
+    {
+      prop: "name",
+      label: "租户名称",
+      type: "input",
+      attrs: { placeholder: "请输入租户名称", clearable: true },
+    },
+    {
+      prop: "code",
+      label: "租户编码",
+      type: "input",
+      attrs: { placeholder: "请输入租户编码", clearable: true },
+    },
+    {
+      prop: "status",
+      label: "状态",
+      type: "select",
+      attrs: {
+        placeholder: "请选择状态",
+        clearable: true,
+        options: [
+          { label: "正常", value: "0" },
+          { label: "禁用", value: "1" },
+        ],
+        style: { width: "167.5px" },
+      },
+    },
+    {
+      prop: "created_time",
+      label: "创建时间",
+      type: "date-picker",
+      initialValue: [],
+      attrs: {
+        type: "datetimerange",
+        valueFormat: "YYYY-MM-DD HH:mm:ss",
+        rangeSeparator: "至",
+        startPlaceholder: "开始日期",
+        endPlaceholder: "结束日期",
+        style: { width: "340px" },
+      },
+    },
+  ],
+});
+
+const contentCols = reactive<
+  Array<{
+    prop?: string;
+    label?: string;
+    show?: boolean;
+  }>
+>([
+  { prop: "selection", label: "选择框", show: true },
+  { prop: "index", label: "序号", show: true },
+  { prop: "name", label: "租户名称", show: true },
+  { prop: "code", label: "租户编码", show: true },
+  { prop: "status", label: "状态", show: true },
+  { prop: "description", label: "描述", show: true },
+  { prop: "created_time", label: "创建时间", show: true },
+  { prop: "operation", label: "操作", show: true },
+]);
+
+const contentConfig = reactive<IContentConfig<TenantPageQuery>>({
+  permPrefix: "module_system:tenant",
+  pk: "id",
+  cols: contentCols as IContentConfig["cols"],
+  hideColumnFilter: false,
+  toolbar: [],
+  defaultToolbar: ["import", "export", "refresh", "filter"],
+  pagination: {
+    pageSize: 10,
+    pageSizes: [10, 20, 30, 50],
+  },
+  request: { page_no: "page_no", page_size: "page_size" },
+  indexAction: async (params) => {
+    const res = await TenantAPI.listTenant(params as TenantPageQuery);
+    return {
+      total: res.data.data.total,
+      list: res.data.data.items,
+    };
+  },
+  deleteAction: async (ids) => {
+    const idList = ids
+      .split(",")
+      .map((s) => Number(s.trim()))
+      .filter((n) => !Number.isNaN(n));
+    await TenantAPI.deleteTenant(idList);
+  },
+  deleteConfirm: {
+    title: "警告",
+    message: "确认删除该项数据?",
+    type: "warning",
+  },
+});
+
+const detailFormData = ref<TenantTable>({ code: "", name: "", status: "0" });
+
+const currentEditId = ref<number | null>(null);
+
+const formData = reactive<TenantForm>({
+  name: "",
+  code: "",
+  status: "0",
+  description: "",
+  start_time: undefined,
+  end_time: undefined,
+});
+
+const dialogVisible = reactive({
+  title: "",
+  visible: false,
+  type: "create" as "create" | "update" | "detail",
+});
+
+const CODE_PATTERN = /^[A-Za-z0-9]+$/;
+
+const validateTimeRange = (rule: any, value: any, callback: any) => {
+  if (formData.start_time && formData.end_time && formData.start_time > formData.end_time) {
+    callback(new Error("结束时间不能早于开始时间"));
+  } else {
+    callback();
+  }
+};
+
+const rules = reactive({
+  name: [{ required: true, message: "请输入租户名称", trigger: "blur" }],
+  code: [
+    { required: true, message: "请输入租户编码", trigger: "blur" },
+    {
+      pattern: CODE_PATTERN,
+      message: "编码仅允许字母与数字",
+      trigger: "blur",
+    },
+  ],
+  end_time: [{ validator: validateTimeRange, trigger: "change" }],
+});
+
+const initialFormData: TenantForm = {
+  name: "",
+  code: "",
+  status: "0",
+  description: "",
+  start_time: undefined,
+  end_time: undefined,
+};
+
+function handleRowDelete(id: number) {
+  contentRef.value?.handleDelete(id);
+}
+
+async function resetForm() {
+  if (dataFormRef.value) {
+    dataFormRef.value.resetFields();
+    dataFormRef.value.clearValidate();
+  }
+  Object.assign(formData, initialFormData);
+  currentEditId.value = null;
+}
+
+async function handleCloseDialog() {
+  dialogVisible.visible = false;
+  await resetForm();
+}
+
+async function handleOpenDialog(type: "create" | "update" | "detail", id?: number) {
+  dialogVisible.type = type;
+  if (id) {
+    const response = await TenantAPI.detailTenant(id);
+    if (type === "detail") {
+      dialogVisible.title = "租户详情";
+      Object.assign(detailFormData.value, response.data.data);
+    } else if (type === "update") {
+      dialogVisible.title = "修改租户";
+      Object.assign(formData, response.data.data);
+      currentEditId.value = id;
+    }
+  } else {
+    dialogVisible.title = "新增租户";
+  }
+  dialogVisible.visible = true;
+}
+
+async function handleSubmit() {
+  dataFormRef.value.validate(async (valid: boolean) => {
+    if (valid) {
+      submitLoading.value = true;
+      const id = currentEditId.value;
+      try {
+        if (id) {
+          const payload: TenantUpdateForm = {
+            name: formData.name,
+            start_time: formData.start_time,
+            end_time: formData.end_time,
+          };
+          await TenantAPI.updateTenant(id, payload);
+        } else {
+          const payload: TenantCreateForm = {
+            name: formData.name as string,
+            code: formData.code as string,
+            start_time: formData.start_time,
+            end_time: formData.end_time,
+          };
+          await TenantAPI.createTenant(payload);
+        }
+        dialogVisible.visible = false;
+        await resetForm();
+        refreshList();
+      } catch (error: unknown) {
+        console.error(error);
+      } finally {
+        submitLoading.value = false;
+      }
+    }
+  });
+}
+</script>
diff --git a/frontend/new-web/src/views/module_system/user/components/DeptTree.vue b/frontend/new-web/src/views/module_system/user/components/DeptTree.vue
new file mode 100644
index 00000000..8230be1e
--- /dev/null
+++ b/frontend/new-web/src/views/module_system/user/components/DeptTree.vue
@@ -0,0 +1,177 @@
+<!-- 部门树 -->
+<template>
+  <el-card shadow="hover">
+    <div class="dept-tree-toolbar">
+      <el-input v-model="deptName" placeholder="部门名称" class="dept-tree-search">
+        <template #prefix>
+          <el-icon>
+            <Search />
+          </el-icon>
+        </template>
+      </el-input>
+      <el-button
+        type="primary"
+        link
+        size="small"
+        class="dept-tree-expand-btn"
+        @click="toggleTreeExpandAll"
+      >
+        <el-icon :size="14">
+          <Switch />
+        </el-icon>
+        <span>{{ treeExpanded ? "收起" : "展开" }}</span>
+      </el-button>
+    </div>
+
+    <el-tree
+      ref="deptTreeRef"
+      class="mt-2"
+      node-key="value"
+      :data="deptOptions"
+      :props="{ children: 'children', label: 'label', disabled: 'disabled' }"
+      :expand-on-click-node="false"
+      :filter-node-method="handleFilter"
+      default-expand-all
+      @node-click="handleNodeClick"
+    >
+      <template #empty>
+        <el-empty :image-size="80" description="暂无数据" />
+      </template>
+    </el-tree>
+  </el-card>
+</template>
+
+<script setup lang="ts">
+import { Switch } from "@element-plus/icons-vue";
+import DeptAPI, { DeptPageQuery } from "@/api/module_system/dept";
+import { formatTree } from "@/utils/common";
+import type { FilterNodeMethodFunction, TreeInstance } from "element-plus";
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: undefined,
+  },
+});
+
+const deptOptions = ref<OptionType[]>([]); // 部门列表
+const deptTreeRef = ref<TreeInstance>(); // 部门树
+const deptName = ref(); // 部门名称
+/** 与「全部展开」状态同步，用于按钮提示（手动展开单节点后可能不完全一致） */
+const treeExpanded = ref(true);
+
+const emits = defineEmits(["node-click", "update:modelValue"]);
+
+const deptId = useVModel(props, "modelValue", emits);
+
+watch(deptName, (val) => {
+  deptTreeRef.value?.filter(val);
+});
+
+type TreeStoreNode = {
+  childNodes?: TreeStoreNode[];
+  expand: () => void;
+  collapse: () => void;
+};
+
+function getTreeRoot() {
+  const tree = deptTreeRef.value as TreeInstance & { store?: { root: TreeStoreNode } };
+  return tree?.store?.root;
+}
+
+/** 展开整棵树 */
+function expandAllTreeNodes() {
+  const root = getTreeRoot();
+  if (!root) return;
+  const walk = (node: TreeStoreNode) => {
+    node.childNodes?.forEach((child) => {
+      if (child.childNodes?.length) {
+        child.expand();
+        walk(child);
+      }
+    });
+  };
+  walk(root);
+}
+
+/** 收起整棵树 */
+function collapseAllTreeNodes() {
+  const root = getTreeRoot();
+  if (!root) return;
+  const walk = (node: TreeStoreNode) => {
+    node.childNodes?.forEach((child) => {
+      walk(child);
+      child.collapse();
+    });
+  };
+  walk(root);
+}
+
+function toggleTreeExpandAll() {
+  if (treeExpanded.value) {
+    collapseAllTreeNodes();
+    treeExpanded.value = false;
+  } else {
+    expandAllTreeNodes();
+    treeExpanded.value = true;
+  }
+}
+
+interface Tree {
+  [key: string]: any;
+}
+
+/**
+ * 部门筛选
+ */
+const handleFilter: FilterNodeMethodFunction = (value: string, data: Tree) => {
+  if (!value) return true;
+  return data.label.includes(value);
+};
+
+/** 部门树节点 Click */
+function handleNodeClick(data: { [key: string]: any }) {
+  deptId.value = data.value;
+  emits("node-click");
+}
+
+const queryFormData = reactive<DeptPageQuery>({
+  name: undefined,
+  status: undefined,
+  created_time: undefined,
+});
+
+const loading = ref(true);
+
+onBeforeMount(() => {
+  loading.value = true;
+  DeptAPI.listDept(queryFormData)
+    .then((response) => {
+      deptOptions.value = formatTree(response.data.data);
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+});
+</script>
+
+<style scoped lang="scss">
+.dept-tree-toolbar {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+
+  .dept-tree-search {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .dept-tree-expand-btn {
+    flex-shrink: 0;
+    height: auto;
+    min-height: unset;
+    padding: 0 4px;
+    font-size: 12px;
+  }
+}
+</style>
diff --git a/frontend/new-web/src/views/module_system/user/components/UserTableSelect.vue b/frontend/new-web/src/views/module_system/user/components/UserTableSelect.vue
new file mode 100644
index 00000000..37063191
--- /dev/null
+++ b/frontend/new-web/src/views/module_system/user/components/UserTableSelect.vue
@@ -0,0 +1,132 @@
+<!-- 列表选择器 -->
+<template>
+  <table-select
+    :text="text"
+    :select-config="selectConfig"
+    @confirm-click="handleConfirm"
+    @clear-click="handleClearSelection"
+  >
+    <template #status="scope">
+      <el-tag :type="scope.row[scope.prop] === '0' ? 'success' : 'danger'">
+        {{ scope.row[scope.prop] === "0" ? "启用" : "停用" }}
+      </el-tag>
+    </template>
+  </table-select>
+</template>
+
+<script setup lang="ts">
+import type { ISelectConfig } from "@/components/TableSelect/index.vue";
+import UserAPI from "@/api/module_system/user";
+
+// 父组件双向绑定的值（选中用户ID）
+const props = defineProps<{ modelValue?: number }>();
+
+// 事件向上派发，支持父组件监听和 v-model（仅回传选中用户ID）
+const emit = defineEmits<{
+  confirmClick: [data: IUser[]];
+  "update:modelValue": [val: number | undefined];
+}>();
+
+const selectConfig: ISelectConfig = {
+  pk: "id",
+  width: "167.5px", // 与搜索表单其他输入宽度一致
+  placeholder: "请选择用户",
+  popover: {
+    width: 720, // 弹出层宽度，提升可用性（约 720px）
+  },
+  formItems: [
+    {
+      type: "select",
+      label: "状态",
+      prop: "status",
+      initialValue: "0",
+      attrs: {
+        placeholder: "全部",
+        clearable: true,
+        style: {
+          width: "140px",
+        },
+      },
+      options: [
+        { label: "启用", value: "0" },
+        { label: "停用", value: "1" },
+      ],
+    },
+  ],
+  indexAction(params) {
+    // 映射查询参数到后端接口
+    const query: any = { ...params };
+    // 清理空字符串/空值，避免后端 422
+    Object.keys(query).forEach((k) => {
+      const v = query[k];
+      if (v === "" || v === null || v === undefined) {
+        delete query[k];
+      }
+    });
+    // 规范化状态为布尔值
+    if (typeof query.status === "string") {
+      if (query.status === "true") query.status = true;
+      else if (query.status === "false") query.status = false;
+    }
+    // 请求用户分页列表并适配 TableSelect 需要的结构
+    return UserAPI.listUser(query).then((res: any) => {
+      return {
+        total: res.data.data.total,
+        list: res.data.data.items,
+      };
+    });
+  },
+  tableColumns: [
+    { type: "selection", width: 50, align: "center" },
+    { label: "编号", align: "center", prop: "id", width: 100 },
+    { label: "账号", align: "center", prop: "username" },
+    { label: "用户名", align: "center", prop: "name", width: 120 },
+    {
+      label: "状态",
+      align: "center",
+      prop: "status",
+      templet: "custom",
+      slotName: "status",
+    },
+  ],
+};
+
+interface IUser {
+  id: number;
+  username: string;
+  name: string;
+  mobile?: string;
+  gender?: string;
+  avatar?: string;
+  email?: string | null;
+  status?: string;
+  dept_name?: string;
+  role_names?: string[];
+  created_time?: string;
+}
+const selectedUser = ref<IUser>();
+function handleConfirm(data: IUser[]) {
+  selectedUser.value = data[0];
+  const id = selectedUser.value?.id;
+  emit("update:modelValue", id);
+  emit("confirmClick", data);
+}
+function handleClearSelection() {
+  selectedUser.value = undefined;
+  emit("update:modelValue", undefined);
+}
+
+// 当父组件重置 v-model（modelValue）为 undefined 时，清空本地显示
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (val === undefined || val === null) {
+      selectedUser.value = undefined;
+    }
+  }
+);
+
+const text = computed(() => {
+  return selectedUser.value ? `${selectedUser.value.username} - ${selectedUser.value.name}` : "";
+});
+</script>
diff --git a/frontend/new-web/src/views/module_system/user/index.vue b/frontend/new-web/src/views/module_system/user/index.vue
new file mode 100644
index 00000000..fff19522
--- /dev/null
+++ b/frontend/new-web/src/views/module_system/user/index.vue
@@ -0,0 +1,896 @@
+<!-- 用户管理 -->
+<template>
+  <div class="app-container">
+    <el-row class="page-row" :gutter="12" justify="start">
+      <el-col :span="4" class="dept-col">
+        <DeptTree v-model="deptFilterId" class="w-full h-full" @node-click="handleDeptNodeClick" />
+      </el-col>
+
+      <el-col :span="20" class="right-col">
+        <PageSearch
+          ref="searchRef"
+          :search-config="searchConfig"
+          @query-click="handleQueryClick"
+          @reset-click="handleResetClick"
+        />
+
+        <PageContent ref="contentRef" class="flex-1 min-h-0" :content-config="contentConfig">
+          <template #toolbar="{ toolbarRight, onToolbar, removeIds, cols }">
+            <CrudToolbarLeft
+              :remove-ids="removeIds"
+              :perm-create="['module_system:user:create']"
+              :perm-delete="['module_system:user:delete']"
+              :perm-patch="['module_system:user:patch']"
+              :delete-loading="submitLoading"
+              @add="handleOpenDialog('create')"
+              @delete="onToolbar('delete')"
+              @more="handleMoreClick"
+            />
+            <div class="data-table__toolbar--right">
+              <CrudToolbarRight :buttons="toolbarRight" :cols="cols" :on-toolbar="onToolbar">
+                <template #prepend>
+                  <el-tooltip content="导入">
+                    <el-button
+                      v-hasPerm="['module_system:user:import']"
+                      type="info"
+                      icon="upload"
+                      circle
+                      @click="handleOpenImportDialog"
+                    />
+                  </el-tooltip>
+                  <el-tooltip content="导出">
+                    <el-button
+                      v-hasPerm="['module_system:user:export']"
+                      type="warning"
+                      icon="download"
+                      circle
+                      @click="handleOpenExportsModal"
+                    />
+                  </el-tooltip>
+                </template>
+              </CrudToolbarRight>
+            </div>
+          </template>
+
+          <template #table="{ data, loading, tableRef, onSelectionChange, pagination }">
+            <div class="data-table__content">
+              <el-table
+                :ref="tableRef as any"
+                v-loading="loading"
+                row-key="id"
+                :data="data"
+                height="100%"
+                border
+                stripe
+                @selection-change="onSelectionChange"
+              >
+                <template #empty>
+                  <el-empty :image-size="80" description="暂无数据" />
+                </template>
+                <el-table-column type="selection" min-width="55" align="center" />
+                <el-table-column fixed label="序号" min-width="60">
+                  <template #default="scope">
+                    {{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }}
+                  </template>
+                </el-table-column>
+                <el-table-column label="头像" prop="avatar" min-width="80" align="center">
+                  <template #default="scope">
+                    <template v-if="scope.row.avatar">
+                      <el-avatar size="small" :src="scope.row.avatar" />
+                    </template>
+                    <template v-else>
+                      <el-avatar size="small" icon="UserFilled" />
+                    </template>
+                  </template>
+                </el-table-column>
+                <el-table-column label="账号" prop="username" min-width="100" />
+                <el-table-column label="用户名" prop="name" min-width="100" />
+                <el-table-column label="状态" prop="status" min-width="100">
+                  <template #default="scope">
+                    <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">
+                      {{ scope.row.status === "0" ? "启用" : "停用" }}
+                    </el-tag>
+                  </template>
+                </el-table-column>
+                <el-table-column label="部门" prop="dept" min-width="100">
+                  <template #default="scope">
+                    {{ scope.row.dept ? scope.row.dept.name : "" }}
+                  </template>
+                </el-table-column>
+                <el-table-column label="性别" prop="gender" min-width="100">
+                  <template #default="scope">
+                    <el-tag v-if="scope.row.gender === '0'" type="success">男</el-tag>
+                    <el-tag v-else-if="scope.row.gender === '1'" type="warning">女</el-tag>
+                    <el-tag v-else type="info">未知</el-tag>
+                  </template>
+                </el-table-column>
+                <el-table-column label="创建时间" prop="created_time" min-width="160" />
+                <el-table-column label="更新时间" prop="updated_time" min-width="160" />
+                <el-table-column label="操作" fixed="right" align="center" min-width="280">
+                  <template #default="scope">
+                    <el-button
+                      v-hasPerm="['module_system:user:update']"
+                      type="warning"
+                      icon="RefreshLeft"
+                      size="small"
+                      link
+                      :disabled="scope.row.is_superuser === true"
+                      @click="hancleResetPassword(scope.row)"
+                    >
+                      重置密码
+                    </el-button>
+                    <el-button
+                      v-hasPerm="['module_system:user:detail']"
+                      type="info"
+                      size="small"
+                      link
+                      icon="View"
+                      @click="handleOpenDialog('detail', scope.row.id)"
+                    >
+                      详情
+                    </el-button>
+                    <el-button
+                      v-hasPerm="['module_system:user:update']"
+                      type="primary"
+                      size="small"
+                      link
+                      icon="edit"
+                      :disabled="scope.row.is_superuser === true"
+                      @click="handleOpenDialog('update', scope.row.id)"
+                    >
+                      编辑
+                    </el-button>
+                    <el-button
+                      v-hasPerm="['module_system:user:delete']"
+                      type="danger"
+                      size="small"
+                      link
+                      icon="delete"
+                      :disabled="scope.row.is_superuser === true"
+                      @click="handleRowDelete(scope.row.id)"
+                    >
+                      删除
+                    </el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+          </template>
+        </PageContent>
+      </el-col>
+    </el-row>
+
+    <EnhancedDrawer
+      v-model="dialogVisible.visible"
+      :title="dialogVisible.title"
+      append-to-body
+      :size="drawerSize"
+      @close="handleCloseDialog"
+    >
+      <template v-if="dialogVisible.type === 'detail'">
+        <el-descriptions :column="2" border>
+          <el-descriptions-item label="编号" :span="2">
+            {{ detailFormData.id }}
+          </el-descriptions-item>
+          <el-descriptions-item label="头像" :span="2">
+            <template v-if="detailFormData.avatar">
+              <el-avatar :src="detailFormData.avatar" size="small"></el-avatar>
+            </template>
+            <template v-else>
+              <el-avatar icon="UserFilled" size="small"></el-avatar>
+            </template>
+          </el-descriptions-item>
+          <el-descriptions-item label="账号" :span="2">
+            {{ detailFormData.username }}
+          </el-descriptions-item>
+          <el-descriptions-item label="用户名" :span="2">
+            {{ detailFormData.name }}
+          </el-descriptions-item>
+          <el-descriptions-item label="性别" :span="2">
+            <el-tag v-if="detailFormData.gender === '0'" type="success">男</el-tag>
+            <el-tag v-else-if="detailFormData.gender === '1'" type="warning">女</el-tag>
+            <el-tag v-else type="info">未知</el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="部门" :span="2">
+            {{ detailFormData.dept ? detailFormData.dept.name : "" }}
+          </el-descriptions-item>
+          <el-descriptions-item label="角色" :span="2">
+            {{
+              detailFormData.roles ? detailFormData.roles.map((item) => item.name).join("、") : ""
+            }}
+          </el-descriptions-item>
+          <el-descriptions-item label="岗位" :span="2">
+            {{
+              detailFormData.positions
+                ? detailFormData.positions.map((item) => item.name).join("、")
+                : ""
+            }}
+          </el-descriptions-item>
+          <el-descriptions-item label="邮箱" :span="2">
+            {{ detailFormData.email }}
+          </el-descriptions-item>
+          <el-descriptions-item label="手机号" :span="2">
+            {{ detailFormData.mobile }}
+          </el-descriptions-item>
+          <el-descriptions-item label="是否超管" :span="2">
+            <el-tag :type="detailFormData.is_superuser ? 'success' : 'info'">
+              {{ detailFormData.is_superuser ? "是" : "否" }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="状态" :span="2">
+            <el-tag :type="detailFormData.status === '0' ? 'success' : 'danger'">
+              {{ detailFormData.status === "0" ? "启用" : "停用" }}
+            </el-tag>
+          </el-descriptions-item>
+          <el-descriptions-item label="上次登录时间" :span="2">
+            {{ detailFormData.last_login }}
+          </el-descriptions-item>
+          <el-descriptions-item label="创建人" :span="2">
+            {{ detailFormData.created_by?.name }}
+          </el-descriptions-item>
+          <el-descriptions-item label="更新人" :span="2">
+            {{ detailFormData.updated_by?.name }}
+          </el-descriptions-item>
+          <el-descriptions-item label="创建时间" :span="2">
+            {{ detailFormData.created_time }}
+          </el-descriptions-item>
+          <el-descriptions-item label="更新时间" :span="2">
+            {{ detailFormData.updated_time }}
+          </el-descriptions-item>
+          <el-descriptions-item label="描述" :span="4">
+            {{ detailFormData.description }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </template>
+      <template v-else>
+        <el-form
+          ref="dataFormRef"
+          :model="formData"
+          :rules="rules"
+          label-suffix=":"
+          label-width="auto"
+          label-position="right"
+        >
+          <el-form-item label="账号" prop="username">
+            <el-input
+              v-model="formData.username"
+              :disabled="!!formData.id"
+              placeholder="请输入账号"
+            />
+          </el-form-item>
+
+          <el-form-item label="用户名" prop="name">
+            <el-input v-model="formData.name" placeholder="请输入用户名" />
+          </el-form-item>
+
+          <el-form-item label="性别" prop="gender">
+            <el-select v-model="formData.gender" placeholder="请选择性别">
+              <el-option label="男" value="0" />
+              <el-option label="女" value="1" />
+              <el-option label="未知" value="2" />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="手机号" prop="mobile">
+            <el-input v-model="formData.mobile" placeholder="请输入手机号码" maxlength="11" />
+          </el-form-item>
+
+          <el-form-item label="邮箱" prop="email">
+            <el-input v-model="formData.email" placeholder="请输入邮箱" maxlength="50" />
+          </el-form-item>
+
+          <el-form-item label="部门" prop="dept_id">
+            <el-tree-select
+              v-model="formData.dept_id"
+              placeholder="请选择上级部门"
+              :data="deptOptions"
+              :props="{ children: 'children', label: 'label', disabled: 'disabled' }"
+              filterable
+              check-strictly
+              :render-after-expand="false"
+            />
+          </el-form-item>
+
+          <el-form-item label="角色" prop="role_ids">
+            <el-select v-model="formData.role_ids" multiple placeholder="请选择角色">
+              <el-option
+                v-for="item in roleOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+                :disabled="item.disabled"
+              />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="岗位" prop="position_ids">
+            <el-select v-model="formData.position_ids" multiple placeholder="请选择岗位">
+              <el-option
+                v-for="item in positionOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+                :disabled="item.disabled"
+              />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item v-if="!formData.id" label="密码" prop="password">
+            <el-input
+              v-model="formData.password"
+              placeholder="请输入密码"
+              type="password"
+              show-password
+              clearable
+            />
+          </el-form-item>
+
+          <el-form-item label="是否超管" prop="is_superuser">
+            <el-switch v-model="formData.is_superuser" />
+          </el-form-item>
+
+          <el-form-item label="状态" prop="status">
+            <el-radio-group v-model="formData.status">
+              <el-radio value="0">启用</el-radio>
+              <el-radio value="1">停用</el-radio>
+            </el-radio-group>
+          </el-form-item>
+
+          <el-form-item label="描述" prop="description">
+            <el-input
+              v-model="formData.description"
+              :rows="4"
+              :maxlength="100"
+              show-word-limit
+              type="textarea"
+              placeholder="请输入描述"
+            />
+          </el-form-item>
+        </el-form>
+      </template>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="handleCloseDialog">取消</el-button>
+          <el-button
+            v-if="dialogVisible.type === 'create' || dialogVisible.type === 'update'"
+            type="primary"
+            :loading="submitLoading"
+            @click="handleSubmit"
+          >
+            确定
+          </el-button>
+          <el-button v-else type="primary" @click="handleCloseDialog">确定</el-button>
+        </div>
+      </template>
+    </EnhancedDrawer>
+
+    <ImportModal
+      v-model="importDialogVisible"
+      :content-config="curdContentConfig"
+      :loading="uploadLoading"
+      @upload="handleUpload"
+    />
+
+    <ExportModal
+      v-model="exportsDialogVisible"
+      :content-config="curdContentConfig"
+      :query-params="exportQueryParams"
+      :page-data="exportPageData"
+      :selection-data="exportSelectionData"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  name: "User",
+  inheritAttrs: false,
+});
+
+import { useAppStore } from "@/store/modules/app.store";
+import { DeviceEnum } from "@/enums/settings/device.enum";
+import { ResultEnum } from "@/enums/api/result.enum";
+
+import UserAPI, {
+  type UserForm,
+  type UserInfo,
+  type UserPageQuery,
+} from "@/api/module_system/user";
+import { formatTree } from "@/utils/common";
+import PositionAPI from "@/api/module_system/position";
+import DeptAPI from "@/api/module_system/dept";
+import RoleAPI from "@/api/module_system/role";
+
+import DeptTree from "./components/DeptTree.vue";
+import UserTableSelect from "./components/UserTableSelect.vue";
+import { useUserStore } from "@/store";
+import ImportModal from "@/components/CURD/ImportModal.vue";
+import ExportModal from "@/components/CURD/ExportModal.vue";
+import CrudToolbarLeft from "@/components/CURD/CrudToolbarLeft.vue";
+import CrudToolbarRight from "@/components/CURD/CrudToolbarRight.vue";
+import PageSearch from "@/components/CURD/PageSearch.vue";
+import PageContent from "@/components/CURD/PageContent.vue";
+import EnhancedDrawer from "@/components/CURD/EnhancedDrawer.vue";
+import type { IContentConfig, ISearchConfig } from "@/components/CURD/types";
+import { ref, reactive, computed, markRaw, nextTick, unref } from "vue";
+import { fetchAllPages } from "@/utils/fetchAllPages";
+
+const appStore = useAppStore();
+
+const searchRef = ref<InstanceType<typeof PageSearch>>();
+const contentRef = ref<InstanceType<typeof PageContent>>();
+const dataFormRef = ref();
+const submitLoading = ref(false);
+const uploadLoading = ref(false);
+const deptFilterId = ref<number | undefined>(undefined);
+
+const drawerSize = computed(() => (appStore.device === DeviceEnum.DESKTOP ? "450px" : "90%"));
+const deptOptions = ref<OptionType[]>();
+const roleOptions = ref<Array<{ value: number; label: string; disabled?: boolean }>>();
+const positionOptions = ref<Array<{ value: number; label: string; disabled?: boolean }>>();
+const importDialogVisible = ref(false);
+const exportsDialogVisible = ref(false);
+const detailFormData = ref<UserInfo>({});
+
+function triggerUserSearch() {
+  nextTick(() => {
+    contentRef.value?.fetchPageData(getMergedListParams(), true);
+  });
+}
+
+const searchConfig = reactive<ISearchConfig>({
+  permPrefix: "module_system:user",
+  colon: true,
+  isExpandable: true,
+  showNumber: 3,
+  form: { labelWidth: "auto" },
+  formItems: [
+    {
+      prop: "username",
+      label: "账号",
+      type: "input",
+      attrs: { placeholder: "请输入账号", clearable: true },
+    },
+    {
+      prop: "name",
+      label: "用户名",
+      type: "input",
+      attrs: { placeholder: "请输入用户名", clearable: true },
+    },
+    {
+      prop: "status",
+      label: "状态",
+      type: "select",
+      options: [
+        { label: "启用", value: "0" },
+        { label: "停用", value: "1" },
+      ],
+      attrs: { placeholder: "请选择状态", clearable: true, style: { width: "167.5px" } },
+    },
+    {
+      prop: "created_id",
+      label: "创建人",
+      type: "user-table-select",
+      initialValue: null,
+      events: {
+        "confirm-click": triggerUserSearch,
+        "clear-click": triggerUserSearch,
+      },
+    },
+  ],
+  customComponents: {
+    "user-table-select": markRaw(UserTableSelect),
+  },
+});
+
+const contentCols = reactive<
+  Array<{
+    prop?: string;
+    label?: string;
+    show?: boolean;
+  }>
+>([
+  { prop: "selection", label: "选择框", show: true },
+  { prop: "index", label: "序号", show: true },
+  { prop: "avatar", label: "头像", show: true },
+  { prop: "username", label: "账号", show: true },
+  { prop: "name", label: "用户名", show: true },
+  { prop: "status", label: "状态", show: true },
+  { prop: "dept", label: "部门", show: true },
+  { prop: "gender", label: "性别", show: true },
+  { prop: "created_time", label: "创建时间", show: true },
+  { prop: "updated_time", label: "更新时间", show: true },
+  { prop: "operation", label: "操作", show: true },
+]);
+
+const contentConfig = reactive<IContentConfig<UserPageQuery>>({
+  permPrefix: "module_system:user",
+  pk: "id",
+  cols: contentCols as IContentConfig["cols"],
+  hideColumnFilter: false,
+  initialFetch: false,
+  toolbar: [],
+  defaultToolbar: ["refresh", "filter"],
+  pagination: {
+    pageSize: 10,
+    pageSizes: [10, 20, 30, 50],
+  },
+  request: { page_no: "page_no", page_size: "page_size" },
+  indexAction: async (params) => {
+    const res = await UserAPI.listUser(params as UserPageQuery);
+    return {
+      total: res.data.data.total,
+      list: res.data.data.items,
+    };
+  },
+  deleteAction: async (ids) => {
+    await UserAPI.deleteUser(
+      ids
+        .split(",")
+        .map((s) => Number(s.trim()))
+        .filter((n) => !Number.isNaN(n))
+    );
+    const userStore = useUserStore();
+    const idSet = ids.split(",").map((s) => Number(s.trim()));
+    if (userStore.basicInfo.id && idSet.includes(userStore.basicInfo.id)) {
+      userStore.clearUserInfo();
+    }
+  },
+  deleteConfirm: {
+    title: "警告",
+    message: "确认删除该项数据?",
+    type: "warning",
+  },
+});
+
+function getMergedListParams(): UserPageQuery {
+  const base = searchRef.value?.getQueryParams() ?? {};
+  return {
+    ...base,
+    dept_id: deptFilterId.value,
+  } as UserPageQuery;
+}
+
+function handleQueryClick() {
+  contentRef.value?.fetchPageData(getMergedListParams(), true);
+}
+
+function handleResetClick() {
+  deptFilterId.value = undefined;
+  contentRef.value?.fetchPageData(getMergedListParams(), true);
+}
+
+function handleDeptNodeClick() {
+  contentRef.value?.fetchPageData(getMergedListParams(), true);
+}
+
+function refreshList() {
+  contentRef.value?.fetchPageData(getMergedListParams(), true);
+}
+
+function handleRowDelete(id: number) {
+  contentRef.value?.handleDelete(id);
+}
+
+const exportQueryParams = computed(() => getMergedListParams());
+
+const exportPageData = computed(() => (unref(contentRef.value?.pageData) ?? []) as UserInfo[]);
+
+const exportSelectionData = computed(
+  () => (contentRef.value?.getSelectionData() ?? []) as UserInfo[]
+);
+
+const formData = reactive<UserForm>({
+  id: undefined,
+  username: undefined,
+  name: undefined,
+  dept_id: undefined,
+  dept_name: undefined,
+  role_ids: undefined,
+  role_names: undefined,
+  position_ids: undefined,
+  position_names: undefined,
+  password: undefined,
+  gender: undefined,
+  email: undefined,
+  mobile: undefined,
+  is_superuser: false,
+  status: "0",
+  description: undefined,
+});
+
+const dialogVisible = reactive({
+  title: "",
+  visible: false,
+  type: "create" as "create" | "update" | "detail",
+});
+
+const rules = reactive({
+  username: [{ required: true, message: "请输入账号", trigger: "blur" }],
+  name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
+  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
+  gender: [{ required: false, message: "请选择性别", trigger: "blur" }],
+  email: [
+    {
+      pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
+      message: "请输入正确的邮箱地址",
+      trigger: "blur",
+    },
+  ],
+  mobile: [
+    {
+      pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+      message: "请输入正确的手机号码",
+      trigger: "blur",
+    },
+  ],
+  is_superuser: [{ required: true, message: "请选择是否超管", trigger: "blur" }],
+  status: [{ required: true, message: "请选择状态", trigger: "blur" }],
+});
+
+const exportColumns = [
+  { prop: "username", label: "账号" },
+  { prop: "name", label: "名称" },
+  { prop: "status", label: "状态" },
+  { prop: "gender", label: "性别" },
+  { prop: "email", label: "邮箱" },
+  { prop: "mobile", label: "手机号" },
+  { prop: "is_superuser", label: "是否超管" },
+  { prop: "description", label: "描述" },
+  { prop: "created_time", label: "创建时间" },
+  { prop: "updated_time", label: "更新时间" },
+];
+
+const curdContentConfig = {
+  permPrefix: "module_system:user",
+  cols: exportColumns as unknown as IContentConfig["cols"],
+  importTemplate: () => UserAPI.downloadTemplateUser(),
+  exportsAction: async (params: Record<string, unknown>) => {
+    const query: Record<string, unknown> = { ...params };
+    if (typeof query.status === "string") {
+      query.status = query.status === "true";
+    }
+    return fetchAllPages<UserInfo>({
+      pageSize: 9999,
+      initialQuery: query,
+      fetchPage: async (q) => {
+        const res = await UserAPI.listUser(q as unknown as UserPageQuery);
+        return {
+          total: res.data?.data?.total ?? 0,
+          list: res.data?.data?.items ?? [],
+        };
+      },
+    });
+  },
+} as unknown as IContentConfig;
+
+function hancleResetPassword(row: UserInfo) {
+  ElMessageBox.prompt("请输入用户【" + row.username + "】的新密码", "重置密码", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+  }).then(
+    async ({ value }) => {
+      if (!value || value.length < 6) {
+        ElMessage.warning("密码至少需要6位字符，请重新输入");
+        return false;
+      }
+      await UserAPI.resetUserPassword({ id: row.id!, password: value });
+    },
+    () => {
+      ElMessageBox.close();
+    }
+  );
+}
+
+async function resetForm() {
+  if (dataFormRef.value) {
+    dataFormRef.value.resetFields();
+    dataFormRef.value.clearValidate();
+  }
+  Object.assign(formData, initialFormData);
+}
+
+async function handleCloseDialog() {
+  dialogVisible.visible = false;
+  await resetForm();
+}
+
+const initialFormData: UserForm = {
+  id: undefined,
+  username: undefined,
+  name: undefined,
+  dept_id: undefined,
+  dept_name: undefined,
+  role_ids: undefined,
+  role_names: undefined,
+  position_ids: undefined,
+  position_names: undefined,
+  password: undefined,
+  gender: undefined,
+  email: undefined,
+  mobile: undefined,
+  is_superuser: false,
+  status: "0",
+  description: undefined,
+};
+
+async function handleOpenDialog(type: "create" | "update" | "detail", id?: number) {
+  dialogVisible.type = type;
+  if (id) {
+    const response = await UserAPI.detailUser(id);
+    if (type === "detail") {
+      dialogVisible.title = "用户详情";
+      Object.assign(detailFormData.value, response.data.data);
+    } else if (type === "update") {
+      dialogVisible.title = "修改用户";
+      Object.assign(formData, response.data.data);
+      formData.role_ids = (response.data.data.roles || []).map((item) => item.id as number);
+      formData.position_ids = (response.data.data.positions || []).map((item) => item.id as number);
+    }
+  } else {
+    dialogVisible.title = "新增用户";
+    formData.id = undefined;
+  }
+  dialogVisible.visible = true;
+  await nextTick();
+  if (dataFormRef.value) {
+    dataFormRef.value.clearValidate();
+  }
+
+  const deptResponse = await DeptAPI.listDept({});
+  deptOptions.value = formatTree(deptResponse.data.data);
+
+  const roleResponse = await RoleAPI.listRole();
+  roleOptions.value = roleResponse.data.data.items
+    .filter((item) => item.id !== undefined && item.name !== undefined)
+    .map((item) => ({
+      value: item.id as number,
+      label: item.name as string,
+      disabled: item.status === "1",
+    }))
+    .filter((opt) => !opt.disabled);
+
+  const positionResponse = await PositionAPI.listPosition();
+  positionOptions.value = positionResponse.data.data.items
+    .filter((item) => item.id !== undefined && item.name !== undefined)
+    .map((item) => ({
+      value: item.id as number,
+      label: item.name as string,
+      disabled: item.status === "1",
+    }))
+    .filter((opt) => !opt.disabled);
+}
+
+async function handleSubmit() {
+  dataFormRef.value.validate(async (valid: boolean) => {
+    if (valid) {
+      submitLoading.value = true;
+      const id = formData.id;
+      try {
+        if (id) {
+          await UserAPI.updateUser(id, { id, ...formData });
+        } else {
+          await UserAPI.createUser(formData);
+        }
+        dialogVisible.visible = false;
+        await resetForm();
+        refreshList();
+        const userStore = useUserStore();
+        if (id === userStore.basicInfo.id) {
+          await userStore.getUserInfo();
+        }
+      } catch (error: unknown) {
+        console.error(error);
+      } finally {
+        submitLoading.value = false;
+      }
+    }
+  });
+}
+
+async function handleMoreClick(status: string) {
+  const rows = contentRef.value?.getSelectionData() as UserInfo[] | undefined;
+  const ids = (rows ?? []).map((r) => r.id).filter((id): id is number => id != null);
+  if (!ids.length) {
+    ElMessage.warning("请先选择要操作的数据");
+    return;
+  }
+  ElMessageBox.confirm("确认启用或停用该项数据?", "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(async () => {
+      try {
+        submitLoading.value = true;
+        await UserAPI.batchUser({ ids, status });
+        refreshList();
+      } catch (error: unknown) {
+        console.error(error);
+      } finally {
+        submitLoading.value = false;
+      }
+    })
+    .catch(() => {
+      ElMessageBox.close();
+    });
+}
+
+function handleOpenImportDialog() {
+  importDialogVisible.value = true;
+}
+
+function handleOpenExportsModal() {
+  exportsDialogVisible.value = true;
+}
+
+const emit = defineEmits(["import-success"]);
+
+const handleUpload = async (formDataUpload: FormData) => {
+  try {
+    uploadLoading.value = true;
+    const response = await UserAPI.importUser(formDataUpload);
+    if (response.data.code === ResultEnum.SUCCESS) {
+      ElMessage.success(`${response.data.msg}，${response.data.data}`);
+      importDialogVisible.value = false;
+      await refreshList();
+      emit("import-success");
+    }
+  } catch (error: unknown) {
+    console.error(error);
+    ElMessage.error("上传失败：" + error);
+  } finally {
+    uploadLoading.value = false;
+  }
+};
+
+onMounted(() => {
+  nextTick(() => {
+    contentRef.value?.fetchPageData(getMergedListParams(), true);
+  });
+});
+</script>
+
+<style lang="scss" scoped>
+.page-row {
+  flex: 1;
+  align-items: stretch;
+  min-height: 0;
+}
+
+.dept-col {
+  display: flex;
+}
+
+.right-col {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.right-col :deep(.data-table) {
+  flex: 1;
+  min-height: 0;
+}
+
+.right-col :deep(.data-table__content) {
+  min-height: 0;
+}
+
+.el-row {
+  height: 100%;
+}
+
+.el-col {
+  height: 100%;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.w-full {
+  width: 100%;
+}
+</style>
diff --git a/frontend/new-web/src/views/module_task/cronjob/job/index.vue b/frontend/new-web/src/views/module_task/cronjob/job/index.vue
new file mode 100644
index 00000000..f526707e
--- /dev/null
+++ b/frontend/new-web/src/views/module_task/cronjob/job/index.vue
@@ -0,0 +1,953 @@
+<template>
+  <div class="app-container job-page">
+    <PageSearch
+      ref="searchRef"
+      :search-config="searchConfig"
+      @query-click="handleQueryClick"
+      @reset-click="handleResetClick"
+    />
+
+    <PageContent ref="contentRef" :content-config="contentConfig">
+      <template #header>
+        <div class="card-header">
+          <div class="status-content">
+            <span>调度器监控</span>
+            <div class="status-item">
+              <span class="label">状态：</span>
+              <el-tag :type="getSchedulerStatusType(schedulerStatus.status)" size="large">
+                {{ schedulerStatus.status }}
+              </el-tag>
+            </div>
+            <div class="status-item">
+              <span class="label">运行中：</span>
+              <el-tag :type="schedulerStatus.is_running ? 'success' : 'danger'" size="large">
+                {{ schedulerStatus.is_running ? "是" : "否" }}
+              </el-tag>
+            </div>
+            <div class="status-item">
+              <span class="label">任务数量：</span>
+              <el-tag type="warning" size="large">{{ schedulerStatus.job_count }}</el-tag>
+            </div>
+            <div class="status-actions">
+              <el-button
+                v-hasPerm="['module_task:cronjob:job:scheduler']"
+                type="success"
+                icon="VideoPlay"
+                :disabled="schedulerStatus.status !== '停止'"
+                @click="handleStartScheduler"
+              >
+                启动
+              </el-button>
+              <el-button
+                v-hasPerm="['module_task:cronjob:job:scheduler']"
+                type="warning"
+                icon="VideoPause"
+                :disabled="schedulerStatus.status !== '运行中'"
+                @click="handlePauseScheduler"
+              >
+                暂停
+              </el-button>
+              <el-button
+                v-hasPerm="['module_task:cronjob:job:scheduler']"
+                type="primary"
+                icon="RefreshRight"
+                :disabled="schedulerStatus.status !== '暂停'"
+                @click="handleResumeScheduler"
+              >
+                恢复
+              </el-button>
+              <el-button
+                v-hasPerm="['module_task:cronjob:job:scheduler']"
+                type="danger"
+                icon="SwitchButton"
+                :disabled="schedulerStatus.status === '停止'"
+                @click="handleShutdownScheduler"
+              >
+                关闭
+              </el-button>
+              <el-button
+                v-hasPerm="['module_task:cronjob:job:task']"
+                type="danger"
+                icon="Delete"
+                :disabled="schedulerStatus.job_count === 0"
+                @click="handleClearAllJobs"
+              >
+                清空任务
+              </el-button>
+              <el-button
+                v-hasPerm="['module_task:cronjob:job:query']"
+                type="info"
+                icon="Monitor"
+                @click="handleOpenConsole"
+              >
+                控制台
+              </el-button>
+              <el-button
+                v-hasPerm="['module_task:cronjob:job:scheduler']"
+                type="primary"
+                icon="Refresh"
+                @click="handleSyncJobs"
+              >
+                同步
+              </el-button>
+              <el-button
+                v-hasPerm="['module_task:cronjob:job:update']"
+                type="warning"
+                icon="Refresh"
+                @click="refreshMain"
+              >
+                刷新
+              </el-button>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template #table="{ data, loading }">
+        <div v-loading="loading" class="job-cards-container">
+          <el-empty v-if="!data || data.length === 0" :image-size="80" description="暂无数据" />
+          <el-row v-else :gutter="16">
+            <el-col
+              v-for="(job, index) in data"
+              :key="job.id"
+              :xs="24"
+              :sm="12"
+              :md="8"
+              :lg="6"
+              class="job-card-col"
+            >
+              <el-card class="job-card" shadow="hover">
+                <template #header>
+                  <div class="job-card-header">
+                    <div class="job-card-title">
+                      <span class="job-index">{{ index + 1 }}</span>
+                      <span class="job-name" :title="job.name">{{ job.name }}</span>
+                    </div>
+                    <el-tag :type="getJobStatusType(job.status)" size="small">
+                      {{ getJobStatusLabel(job.status) }}
+                    </el-tag>
+                  </div>
+                </template>
+
+                <div class="job-card-body">
+                  <div class="job-info-item">
+                    <span class="job-info-label">任务ID:</span>
+                    <span class="job-info-value">{{ job.id }}</span>
+                  </div>
+                  <div class="job-info-item">
+                    <span class="job-info-label">触发器:</span>
+                    <el-tag
+                      v-if="String(job.trigger ?? '').includes('cron')"
+                      type="primary"
+                      size="small"
+                      class="job-trigger-tag"
+                    >
+                      <el-icon><Clock /></el-icon>
+                      {{ formatTrigger(job.trigger) }}
+                    </el-tag>
+                    <el-tag
+                      v-else-if="String(job.trigger ?? '').includes('interval')"
+                      type="success"
+                      size="small"
+                      class="job-trigger-tag"
+                    >
+                      <el-icon><Timer /></el-icon>
+                      {{ formatTrigger(job.trigger) }}
+                    </el-tag>
+                    <el-tag
+                      v-else-if="String(job.trigger ?? '').includes('date')"
+                      type="warning"
+                      size="small"
+                      class="job-trigger-tag"
+                    >
+                      <el-icon><Calendar /></el-icon>
+                      {{ formatTrigger(job.trigger) }}
+                    </el-tag>
+                    <el-tag v-else type="info" size="small" class="job-trigger-tag">
+                      {{ formatTrigger(job.trigger) }}
+                    </el-tag>
+                  </div>
+                  <div class="job-info-item">
+                    <span class="job-info-label">下次执行:</span>
+                    <span class="job-info-value">{{ job.next_run_time || "无" }}</span>
+                  </div>
+                </div>
+
+                <template #footer>
+                  <div class="job-card-footer">
+                    <el-button
+                      v-if="job.status === '暂停中'"
+                      v-hasPerm="['module_task:cronjob:job:task']"
+                      type="primary"
+                      size="small"
+                      icon="VideoPlay"
+                      @click="handleResumeJob(job.id)"
+                    >
+                      恢复
+                    </el-button>
+                    <el-button
+                      v-if="job.status === '运行中'"
+                      v-hasPerm="['module_task:cronjob:job:task']"
+                      type="warning"
+                      size="small"
+                      icon="VideoPause"
+                      @click="handlePauseJob(job.id)"
+                    >
+                      暂停
+                    </el-button>
+                    <el-button
+                      v-if="job.status !== '已停止' && job.status !== '未知'"
+                      v-hasPerm="['module_task:cronjob:job:task']"
+                      type="success"
+                      size="small"
+                      icon="CaretRight"
+                      @click="handleRunJobNow(job.id)"
+                    >
+                      调试
+                    </el-button>
+                    <el-button
+                      v-if="job.status !== '未知'"
+                      v-hasPerm="['module_task:cronjob:job:task']"
+                      type="danger"
+                      size="small"
+                      icon="Close"
+                      @click="handleRemoveJob(job.id)"
+                    >
+                      移除
+                    </el-button>
+                    <el-button
+                      v-hasPerm="['module_task:cronjob:job:query']"
+                      type="info"
+                      size="small"
+                      icon="List"
+                      @click="handleOpenExecutionLogDrawer(job)"
+                    >
+                      记录
+                    </el-button>
+                  </div>
+                </template>
+              </el-card>
+            </el-col>
+          </el-row>
+        </div>
+      </template>
+    </PageContent>
+
+    <EnhancedDialog v-model="consoleVisible" title="调度器控制台" width="900px">
+      <div class="terminal-wrapper">
+        <Terminal name="scheduler-console" :show-header="false" theme="dark" />
+      </div>
+      <template #footer>
+        <el-button @click="handleRefreshConsole">刷新</el-button>
+        <el-button @click="handleClearConsole">清空</el-button>
+        <el-button type="primary" @click="consoleVisible = false">关闭</el-button>
+      </template>
+    </EnhancedDialog>
+
+    <EnhancedDrawer v-model="executionLogDrawerVisible" title="执行记录" direction="rtl" size="80%">
+      <div class="execution-log-drawer">
+        <PageSearch
+          ref="logSearchRef"
+          :search-config="logSearchConfig"
+          @query-click="handleLogQueryClick"
+          @reset-click="handleLogResetClick"
+        />
+        <PageContent ref="logContentRef" :content-config="logContentConfig">
+          <template #table="{ data, loading, tableRef, onSelectionChange, pagination }">
+            <div class="data-table__content">
+              <el-table
+                :ref="tableRef as any"
+                v-loading="loading"
+                :data="data"
+                border
+                stripe
+                height="100%"
+                @selection-change="onSelectionChange"
+              >
+                <template #empty>
+                  <el-empty :image-size="80" description="暂无数据" />
+                </template>
+                <el-table-column type="selection" align="center" min-width="55" />
+                <el-table-column type="index" fixed label="序号" min-width="60">
+                  <template #default="scope">
+                    {{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }}
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  label="任务ID"
+                  prop="job_id"
+                  min-width="80"
+                  show-overflow-tooltip
+                />
+                <el-table-column label="任务名称" prop="job_name" min-width="140" />
+                <el-table-column label="触发方式" prop="trigger_type" min-width="120">
+                  <template #default="scope">
+                    <el-tag size="small">{{ getTriggerTypeLabel(scope.row.trigger_type) }}</el-tag>
+                  </template>
+                </el-table-column>
+                <el-table-column label="状态" prop="status" min-width="80">
+                  <template #default="scope">
+                    <el-tag :type="getLogStatusType(scope.row.status)" size="small">
+                      {{ getLogStatusLabel(scope.row.status) }}
+                    </el-tag>
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  label="下次执行时间"
+                  prop="next_run_time"
+                  min-width="200"
+                  show-overflow-tooltip
+                />
+                <el-table-column
+                  label="执行结果"
+                  prop="result"
+                  min-width="100"
+                  show-overflow-tooltip
+                />
+                <el-table-column
+                  label="错误信息"
+                  prop="error"
+                  min-width="100"
+                  show-overflow-tooltip
+                />
+                <el-table-column label="执行元数据" min-width="100">
+                  <template #default="scope">
+                    <el-button
+                      v-if="scope.row.job_state"
+                      type="primary"
+                      size="small"
+                      link
+                      icon="View"
+                      @click="handleViewJobState(scope.row)"
+                    >
+                      查看
+                    </el-button>
+                    <span v-else>-</span>
+                  </template>
+                </el-table-column>
+                <el-table-column label="创建时间" prop="created_time" min-width="160" />
+                <el-table-column label="更新时间" prop="updated_time" min-width="160" />
+                <el-table-column label="操作" min-width="80" fixed="right">
+                  <template #default="scope">
+                    <el-button
+                      v-hasPerm="['module_task:cronjob:job:delete']"
+                      type="danger"
+                      size="small"
+                      link
+                      icon="delete"
+                      @click="handleLogRowDelete(scope.row.id)"
+                    >
+                      删除
+                    </el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+          </template>
+        </PageContent>
+      </div>
+    </EnhancedDrawer>
+
+    <EnhancedDialog v-model="jobStateVisible" title="执行元数据" width="800px">
+      <JsonPretty :value="jobStateData" height="400px" />
+      <template #footer>
+        <el-button type="primary" @click="jobStateVisible = false">关闭</el-button>
+      </template>
+    </EnhancedDialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+  name: "Job",
+  inheritAttrs: false,
+});
+
+import JobAPI, {
+  SchedulerStatus,
+  SchedulerJob,
+  JobLogPageQuery,
+  JobLogTable,
+} from "@/api/module_task/cronjob/job";
+import PageSearch from "@/components/CURD/PageSearch.vue";
+import PageContent from "@/components/CURD/PageContent.vue";
+import EnhancedDialog from "@/components/CURD/EnhancedDialog.vue";
+import EnhancedDrawer from "@/components/CURD/EnhancedDrawer.vue";
+import type { ISearchConfig, IContentConfig, IObject } from "@/components/CURD/types";
+import { ref, reactive, nextTick } from "vue";
+import { Terminal, TerminalApi } from "vue-web-terminal";
+import JsonPretty from "@/components/JsonPretty/index.vue";
+import { useCrudList } from "@/components/CURD/useCrudList";
+
+const { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList } = useCrudList();
+const refreshMain = refreshList;
+
+const schedulerStatus = ref<SchedulerStatus>({
+  status: "未知",
+  is_running: false,
+  job_count: 0,
+});
+
+const searchConfig = reactive<ISearchConfig>({
+  permPrefix: "module_task:cronjob:job",
+  colon: true,
+  isExpandable: false,
+  showNumber: 2,
+  form: { labelWidth: "auto" },
+  formItems: [
+    {
+      prop: "name",
+      label: "任务名称",
+      type: "input",
+      attrs: { placeholder: "请输入任务名称", clearable: true, style: { width: "150px" } },
+    },
+    {
+      prop: "status",
+      label: "任务状态",
+      type: "select",
+      options: [
+        { label: "运行中", value: "运行中" },
+        { label: "暂停", value: "暂停" },
+        { label: "停止", value: "停止" },
+      ],
+      attrs: { placeholder: "请选择状态", clearable: true, style: { width: "150px" } },
+    },
+  ],
+});
+
+const contentConfig = reactive<IContentConfig>({
+  permPrefix: "module_task:cronjob:job",
+  cols: [],
+  hideColumnFilter: true,
+  showToolbar: false,
+  pagination: false,
+  indexAction: async (params) => {
+    try {
+      const statusRes = await JobAPI.getSchedulerStatus();
+      schedulerStatus.value = statusRes.data.data;
+    } catch (error: unknown) {
+      console.error(error);
+    }
+    const response = await JobAPI.getSchedulerJobs();
+    const raw = response.data?.data;
+    let jobs = Array.isArray(raw) ? raw : [];
+    const p = params as { name?: string; status?: string };
+    const name = typeof p.name === "string" ? p.name.trim() : "";
+    if (name) jobs = jobs.filter((job) => job.name.includes(name));
+    if (p.status) jobs = jobs.filter((job) => job.status === p.status);
+    // pagination 为 false 时 PageContent 将整段返回值赋给 pageData，必须为列表数组
+    return jobs;
+  },
+});
+
+const consoleVisible = ref(false);
+
+const executionLogDrawerVisible = ref(false);
+const currentLogJobId = ref<string | undefined>(undefined);
+const logSearchRef = ref<InstanceType<typeof PageSearch>>();
+const logContentRef = ref<InstanceType<typeof PageContent>>();
+const jobStateVisible = ref(false);
+const jobStateData = ref<any>(null);
+
+const logSearchConfig = reactive<ISearchConfig>({
+  permPrefix: "module_task:cronjob:job",
+  colon: true,
+  isExpandable: false,
+  showNumber: 2,
+  form: { labelWidth: "auto" },
+  formItems: [
+    {
+      prop: "status",
+      label: "执行状态",
+      type: "select",
+      options: [
+        { label: "待执行", value: "pending" },
+        { label: "执行中", value: "running" },
+        { label: "成功", value: "success" },
+        { label: "失败", value: "failed" },
+        { label: "超时", value: "timeout" },
+        { label: "已取消", value: "cancelled" },
+      ],
+      attrs: { placeholder: "请选择状态", clearable: true, style: { width: "120px" } },
+    },
+    {
+      prop: "trigger_type",
+      label: "触发方式",
+      type: "select",
+      options: [
+        { label: "Cron表达式", value: "cron" },
+        { label: "时间间隔", value: "interval" },
+        { label: "固定日期", value: "date" },
+        { label: "一次性任务", value: "manual" },
+      ],
+      attrs: { placeholder: "请选择", clearable: true, style: { width: "120px" } },
+    },
+  ],
+});
+
+const logContentConfig = reactive<IContentConfig>({
+  permPrefix: "module_task:cronjob:job",
+  cols: [],
+  hideColumnFilter: true,
+  toolbar: ["delete"],
+  defaultToolbar: ["refresh"],
+  pagination: {
+    pageSize: 10,
+    pageSizes: [10, 20, 30, 50],
+  },
+  request: { page_no: "page_no", page_size: "page_size" },
+  indexAction: async (params) => {
+    const jobId = currentLogJobId.value;
+    if (!jobId) {
+      return { total: 0, list: [] };
+    }
+    const p = params as JobLogPageQuery;
+    const res = await JobAPI.getJobLogList({
+      page_no: p.page_no ?? 1,
+      page_size: p.page_size ?? 10,
+      job_id: jobId,
+      job_name: undefined,
+      status: p.status,
+      trigger_type: p.trigger_type,
+    });
+    const page = res.data.data;
+    return {
+      total: page?.total ?? 0,
+      list: page?.items ?? [],
+    };
+  },
+  deleteAction: (ids) =>
+    JobAPI.deleteJobLog(
+      ids
+        .split(",")
+        .map((s) => Number(s.trim()))
+        .filter((n) => !Number.isNaN(n))
+    ),
+  deleteConfirm: {
+    title: "警告",
+    message: "确认删除选中的执行记录？",
+    type: "warning",
+  },
+});
+
+function getSchedulerStatusType(status: string) {
+  switch (status) {
+    case "运行中":
+      return "success";
+    case "暂停":
+      return "warning";
+    case "停止":
+      return "danger";
+    default:
+      return "info";
+  }
+}
+
+function getJobStatusType(status: string) {
+  switch (status) {
+    case "运行中":
+      return "success";
+    case "暂停中":
+      return "warning";
+    case "已停止":
+      return "danger";
+    case "未知":
+      return "info";
+    default:
+      return "info";
+  }
+}
+
+function getJobStatusLabel(status: string) {
+  switch (status) {
+    case "运行中":
+      return "运行中";
+    case "暂停中":
+      return "暂停中";
+    case "已停止":
+      return "已停止";
+    case "未知":
+      return "未知";
+    default:
+      return status;
+  }
+}
+
+function formatTrigger(trigger: string) {
+  if (!trigger) {
+    return "-";
+  }
+
+  if (trigger.includes("cron")) {
+    const match = trigger.match(/cron\[([^\]]+)\]/);
+    if (match) {
+      const params = match[1];
+      // 提取关键参数
+      const month = params.match(/month='([^']+)'/);
+      const day = params.match(/day='([^']+)'/);
+      const hour = params.match(/hour='([^']+)'/);
+      const minute = params.match(/minute='([^']+)'/);
+      const second = params.match(/second='([^']+)'/);
+      const dayOfWeek = params.match(/day_of_week='([^']+)'/);
+
+      // 构建简化的 cron 表达式
+      const parts = [];
+      if (second && second[1] !== "'*'") parts.push(`秒:${second[1]}`);
+      if (minute && minute[1] !== "'*'") parts.push(`分:${minute[1]}`);
+      if (hour && hour[1] !== "'*'") parts.push(`时:${hour[1]}`);
+      if (day && day[1] !== "'*'") parts.push(`日:${day[1]}`);
+      if (month && month[1] !== "'*'") parts.push(`月:${month[1]}`);
+      if (dayOfWeek && dayOfWeek[1] !== "'*'") parts.push(`周:${dayOfWeek[1]}`);
+
+      if (parts.length === 0) {
+        return "Cron: 每分钟";
+      }
+      return `Cron: ${parts.join(" ")}`;
+    }
+    return trigger;
+  }
+
+  if (trigger.includes("interval")) {
+    const match = trigger.match(/interval\[([^\]]+)\]/);
+    return match ? `间隔时长: ${match[1]}` : trigger;
+  }
+
+  if (trigger.includes("date")) {
+    const match = trigger.match(/date\[([^\]]+)\]/);
+    return match ? `执行日期: ${match[1]}` : trigger;
+  }
+
+  return trigger;
+}
+
+async function handleSyncJobs() {
+  try {
+    await JobAPI.syncJobsToDb();
+    await refreshMain();
+  } catch (error: any) {
+    console.error(error);
+  }
+}
+
+async function handleStartScheduler() {
+  try {
+    await JobAPI.startScheduler();
+    await refreshMain();
+  } catch (error: any) {
+    console.error(error);
+  }
+}
+
+async function handlePauseScheduler() {
+  try {
+    await JobAPI.pauseScheduler();
+    await refreshMain();
+  } catch (error: any) {
+    console.error(error);
+  }
+}
+
+async function handleResumeScheduler() {
+  try {
+    await JobAPI.resumeScheduler();
+    await refreshMain();
+  } catch (error: any) {
+    console.error(error);
+  }
+}
+
+async function handleShutdownScheduler() {
+  try {
+    await ElMessageBox.confirm("确定要关闭调度器吗？", "警告", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    });
+    await JobAPI.shutdownScheduler();
+    await refreshMain();
+  } catch (error: any) {
+    if (error !== "cancel") {
+      console.error(error);
+    }
+  }
+}
+
+async function handleClearAllJobs() {
+  try {
+    await ElMessageBox.confirm(
+      "确定要清空所有任务吗？\n" +
+        "此操作会将所有待执行任务的日志标记为已取消，不会删除历史执行记录。\n" +
+        "如需删除所有执行记录，请使用执行记录的批量删除功能。",
+      "警告",
+      {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+        dangerouslyUseHTMLString: false,
+      }
+    );
+    await JobAPI.clearAllJobs();
+    await refreshMain();
+  } catch (error: any) {
+    if (error !== "cancel") {
+      console.error(error);
+    }
+  }
+}
+
+async function handleOpenConsole() {
+  consoleVisible.value = true;
+  await handleRefreshConsole();
+}
+
+async function handleRefreshConsole() {
+  try {
+    const response = await JobAPI.getSchedulerConsole();
+    const data = response.data.data || "暂无任务信息";
+    TerminalApi.pushMessage("scheduler-console", {
+      type: "normal",
+      content: data,
+    });
+  } catch (error: any) {
+    console.error(error);
+    TerminalApi.pushMessage("scheduler-console", {
+      type: "normal",
+      class: "error",
+      content: "获取控制台信息失败",
+    });
+  }
+}
+
+function handleClearConsole() {
+  TerminalApi.clear("scheduler-console");
+}
+
+async function handlePauseJob(jobId: string) {
+  try {
+    await JobAPI.pauseJob(jobId);
+    await refreshMain();
+  } catch (error: any) {
+    console.error(error);
+  }
+}
+
+async function handleResumeJob(jobId: string) {
+  try {
+    await JobAPI.resumeJob(jobId);
+    await refreshMain();
+  } catch (error: any) {
+    console.error(error);
+  }
+}
+
+async function handleRunJobNow(jobId: string) {
+  try {
+    await JobAPI.runJobNow(jobId);
+    await refreshMain();
+  } catch (error: any) {
+    console.error(error);
+  }
+}
+
+async function handleRemoveJob(jobId: string) {
+  ElMessageBox.confirm("确认移除该任务?", "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(async () => {
+      try {
+        await JobAPI.removeJob(jobId);
+        await refreshMain();
+      } catch (error: any) {
+        console.error(error);
+      }
+    })
+    .catch(() => {
+      ElMessageBox.close();
+    });
+}
+
+async function handleOpenExecutionLogDrawer(job: IObject) {
+  currentLogJobId.value = (job as SchedulerJob).id;
+  executionLogDrawerVisible.value = true;
+  await nextTick();
+  logContentRef.value?.fetchPageData(logSearchRef.value?.getQueryParams() ?? {}, true);
+}
+
+function handleLogQueryClick() {
+  logContentRef.value?.fetchPageData(logSearchRef.value!.getQueryParams(), true);
+}
+
+function handleLogResetClick() {
+  logContentRef.value?.fetchPageData(logSearchRef.value!.getQueryParams(), true);
+}
+
+function handleLogRowDelete(id: number) {
+  logContentRef.value?.handleDelete(id);
+}
+
+function getTriggerTypeLabel(type: string | undefined) {
+  const map: Record<string, string> = {
+    cron: "Cron表达式",
+    interval: "时间间隔",
+    date: "固定日期",
+    manual: "一次性任务",
+  };
+  return map[type || ""] || type || "-";
+}
+
+function getLogStatusType(status: string): "primary" | "success" | "warning" | "info" | "danger" {
+  const map: Record<string, "primary" | "success" | "warning" | "info" | "danger"> = {
+    pending: "info",
+    running: "primary",
+    success: "success",
+    failed: "danger",
+    timeout: "warning",
+    cancelled: "info",
+  };
+  return map[status] || "info";
+}
+
+function getLogStatusLabel(status: string) {
+  const map: Record<string, string> = {
+    pending: "待执行",
+    running: "执行中",
+    success: "成功",
+    failed: "失败",
+    timeout: "超时",
+    cancelled: "已取消",
+  };
+  return map[status] || status;
+}
+
+function handleViewJobState(row: JobLogTable | IObject) {
+  const jobState = (row as JobLogTable).job_state;
+  if (jobState) {
+    try {
+      jobStateData.value = JSON.parse(jobState);
+    } catch {
+      jobStateData.value = jobState;
+    }
+    jobStateVisible.value = true;
+  }
+}
+</script>
+
+<style scoped>
+.job-page :deep(.data-table) {
+  height: 100%;
+}
+
+.status-content {
+  display: flex;
+  gap: 24px;
+  align-items: center;
+}
+
+.status-item {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.status-item .label {
+  font-weight: 500;
+}
+
+.status-actions {
+  display: flex;
+  gap: 8px;
+  margin-left: auto;
+}
+
+.terminal-wrapper {
+  height: 500px;
+}
+
+.job-card-header {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.job-card-title {
+  display: flex;
+  flex: 1;
+  gap: 8px;
+  align-items: center;
+  min-width: 0;
+}
+
+.job-index {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #fff;
+  background: linear-gradient(
+    135deg,
+    var(--el-color-primary) 0%,
+    var(--el-color-primary-dark-2) 100%
+  );
+  border-radius: 50%;
+}
+
+.job-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 14px;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.job-info-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+  font-size: 13px;
+}
+
+.job-info-item:last-child {
+  margin-bottom: 0;
+}
+
+.job-info-label {
+  flex-shrink: 0;
+  width: 70px;
+}
+
+.job-info-value {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.job-card-footer {
+  display: flex;
+  justify-content: space-between;
+}
+
+.job-card-footer .el-button {
+  flex: 1;
+}
+
+.execution-log-drawer {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.execution-log-drawer :deep(.el-card.data-table) {
+  flex: 1;
+  min-height: 0;
+  margin-top: 16px;
+}
+</style>
diff --git a/frontend/new-web/src/views/module_task/cronjob/node/index.vue b/frontend/new-web/src/views/module_task/cronjob/node/index.vue
new file mode 100644
index 00000000..d6879d59
--- /dev/null
+++ b/frontend/new-web/src/views/module_task/cronjob/node/index.vue
@@ -0,0 +1,799 @@
+<template>
+  <div class="app-container">
+    <PageSearch
+      ref="searchRef"
+      :search-config="searchConfig"
+      @query-click="handleQueryClick"
+      @reset-click="handleResetClick"
+    />
+
+    <PageContent
+      ref="contentRef"
+      :content-config="contentConfig"
+      @add-click="handleOpenDialog('create')"
+    >
+      <template #table="{ data, loading, tableRef, onSelectionChange, pagination }">
+        <div class="data-table__content">
+          <el-table
+            :ref="tableRef as any"
+            v-loading="loading"
+            :data="data"
+            height="100%"
+            border
+            stripe
+            @selection-change="onSelectionChange"
+          >
+            <template #empty>
+              <el-empty :image-size="80" description="暂无数据" />
+            </template>
+            <el-table-column type="selection" align="center" min-width="55" />
+            <el-table-column type="index" fixed label="序号" min-width="60">
+              <template #default="scope">
+                {{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }}
+              </template>
+            </el-table-column>
+            <el-table-column label="节点名称" prop="name" min-width="140" />
+            <el-table-column label="节点编码" prop="code" min-width="120" />
+            <el-table-column label="存储器" prop="jobstore" min-width="80" />
+            <el-table-column label="执行器" prop="executor" min-width="80" />
+            <el-table-column label="创建时间" prop="created_time" min-width="180" sortable />
+
+            <OperationColumn :list-data-length="data.length">
+              <template #default="scope">
+                <el-space class="flex">
+                  <el-button
+                    v-hasPerm="['module_task:cronjob:node:execute']"
+                    type="warning"
+                    size="small"
+                    link
+                    icon="VideoPlay"
+                    @click="handleOpenExecuteDialog(scope.row)"
+                  >
+                    调试
+                  </el-button>
+                  <el-button
+                    v-hasPerm="['module_task:cronjob:node:update']"
+                    type="primary"
+                    size="small"
+                    link
+                    icon="edit"
+                    @click="handleOpenDialog('update', scope.row.id)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    v-hasPerm="['module_task:cronjob:node:delete']"
+                    type="danger"
+                    size="small"
+                    link
+                    icon="delete"
+                    @click="handleRowDelete(scope.row.id)"
+                  >
+                    删除
+                  </el-button>
+                </el-space>
+              </template>
+            </OperationColumn>
+          </el-table>
+        </div>
+      </template>
+    </PageContent>
+
+    <EnhancedDialog
+      v-model="dialogVisible.visible"
+      :title="dialogVisible.title"
+      width="1000px"
+      @close="handleCloseDialog"
+      @opened="handleDialogOpened"
+    >
+      <el-splitter direction="horizontal" style="height: 500px">
+        <el-splitter-panel size="300px" :min="200" :max="400">
+          <el-scrollbar style="height: 100%">
+            <el-form
+              ref="dataFormRef"
+              :model="formData"
+              :rules="rules"
+              label-suffix=":"
+              label-width="auto"
+              style="padding: 0 10px"
+            >
+              <el-form-item label="节点名称" prop="name">
+                <el-input v-model="formData.name" placeholder="请输入节点名称" :maxlength="50" />
+              </el-form-item>
+              <el-form-item label="节点编码" prop="code">
+                <el-input v-model="formData.code" placeholder="请输入节点编码" :maxlength="32" />
+              </el-form-item>
+              <el-form-item label="存储器" prop="jobstore">
+                <el-select v-model="formData.jobstore" placeholder="请选择存储器">
+                  <el-option
+                    v-for="item in dictStore.getDictArray('sys_job_store')"
+                    :key="item.dict_value"
+                    :label="item.dict_label"
+                    :value="item.dict_value"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="执行器" prop="executor">
+                <el-select v-model="formData.executor" placeholder="请选择执行器">
+                  <el-option
+                    v-for="item in dictStore.getDictArray('sys_job_executor')"
+                    :key="item.dict_value"
+                    :label="item.dict_label"
+                    :value="item.dict_value"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="位置参数" prop="args">
+                <div class="dynamic-params">
+                  <div v-for="(_item, index) in argsList" :key="index" class="param-item">
+                    <el-input v-model="argsList[index]" placeholder="参数值" />
+                    <el-button
+                      type="danger"
+                      icon="Delete"
+                      circle
+                      @click="argsList.splice(index, 1)"
+                    />
+                  </div>
+                  <el-button type="primary" icon="Plus" @click="argsList.push('')">
+                    添加位置参数
+                  </el-button>
+                </div>
+              </el-form-item>
+              <el-form-item label="关键字参数" prop="kwargs">
+                <div class="dynamic-params">
+                  <div v-for="(item, index) in kwargsList" :key="index" class="param-item">
+                    <el-input v-model="item.key" placeholder="键" />
+                    <el-input v-model="item.value" placeholder="值" />
+                    <el-button
+                      type="danger"
+                      icon="Delete"
+                      circle
+                      @click="kwargsList.splice(index, 1)"
+                    />
+                  </div>
+                  <el-button
+                    type="primary"
+                    icon="Plus"
+                    @click="kwargsList.push({ key: '', value: '' })"
+                  >
+                    添加关键词参数
+                  </el-button>
+                </div>
+              </el-form-item>
+              <el-form-item label="合并运行" prop="coalesce">
+                <el-radio-group v-model="formData.coalesce">
+                  <el-radio :value="true">是</el-radio>
+                  <el-radio :value="false">否</el-radio>
+                </el-radio-group>
+              </el-form-item>
+              <el-form-item label="最大实例数" prop="max_instances">
+                <el-input-number
+                  v-model="formData.max_instances"
+                  controls-position="right"
+                  :min="1"
+                  :max="10"
+                />
+              </el-form-item>
+            </el-form>
+          </el-scrollbar>
+        </el-splitter-panel>
+
+        <el-splitter-panel>
+          <div class="code-editor-container">
+            <div class="code-editor-header">
+              <span class="code-editor-title">处理器</span>
+              <span class="code-editor-tip">定义 handler(*args, **kwargs) 函数</span>
+            </div>
+            <Codemirror
+              ref="codeEditorRef"
+              v-model:value="formData.func"
+              :options="codeEditorOptions"
+              border
+              height="calc(100% - 40px)"
+              width="100%"
+            />
+          </div>
+        </el-splitter-panel>
+      </el-splitter>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="handleCloseDialog">取消</el-button>
+          <el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button>
+        </div>
+      </template>
+    </EnhancedDialog>
+
+    <EnhancedDialog
+      v-model="executeDialogVisible"
+      title="调试节点"
+      width="700px"
+      @close="handleCloseExecuteDialog"
+    >
+      <el-form
+        ref="executeFormRef"
+        :model="executeFormData"
+        :rules="executeRules"
+        label-suffix=":"
+        label-width="auto"
+      >
+        <el-form-item label="节点名称">
+          <el-input :value="currentExecuteNode?.name" disabled />
+        </el-form-item>
+        <el-form-item label="执行方式" prop="trigger">
+          <el-radio-group v-model="executeFormData.trigger">
+            <el-radio value="now">立即执行</el-radio>
+            <el-radio value="cron">Cron表达式</el-radio>
+            <el-radio value="interval">时间间隔</el-radio>
+            <el-radio value="date">固定日期</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item
+          v-if="executeFormData.trigger === 'cron'"
+          label="Cron表达式"
+          prop="trigger_args"
+        >
+          <el-popover
+            :visible="openCron"
+            width="700px"
+            trigger="click"
+            :persistent="false"
+            placement="auto-end"
+            popper-class="node-cron-popover-fix"
+          >
+            <template #reference>
+              <el-input
+                v-model="executeFormData.trigger_args"
+                placeholder="请输入 * * * * * ? *"
+                @click="openCron = true"
+              />
+            </template>
+            <vue3CronPlus i18n="cn" @change="handlechangeCron" @close="openCron = false" />
+          </el-popover>
+        </el-form-item>
+
+        <el-form-item
+          v-else-if="executeFormData.trigger === 'interval'"
+          label="间隔时间"
+          prop="trigger_args"
+        >
+          <el-popover
+            :visible="openInterval"
+            width="600px"
+            trigger="click"
+            :persistent="false"
+            placement="auto-end"
+          >
+            <template #reference>
+              <el-input
+                v-model="executeFormData.trigger_args"
+                placeholder="请点击设置间隔时间"
+                @click="openInterval = true"
+              />
+            </template>
+            <IntervalTab
+              :cron-value="executeFormData.trigger_args"
+              @confirm="handleIntervalConfirm"
+              @cancel="openInterval = false"
+            />
+          </el-popover>
+        </el-form-item>
+
+        <el-form-item
+          v-else-if="executeFormData.trigger === 'date'"
+          label="执行时间"
+          prop="trigger_args"
+        >
+          <el-date-picker
+            v-model="executeFormData.trigger_args"
+            type="datetime"
+            format="YYYY-MM-DD HH:mm:ss"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            placeholder="请选择执行时间"
+            style="width: 100%"
+          />
+        </el-form-item>
+
+        <template
+          v-if="
+            executeFormData.trigger &&
+            executeFormData.trigger !== 'now' &&
+            executeFormData.trigger !== 'date'
+          "
+        >
+          <el-form-item label="开始时间" prop="start_date">
+            <el-date-picker
+              v-model="executeFormData.start_date"
+              type="datetime"
+              format="YYYY-MM-DD HH:mm:ss"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择开始时间（可选）"
+              style="width: 100%"
+            />
+          </el-form-item>
+          <el-form-item label="结束时间" prop="end_date">
+            <el-date-picker
+              v-model="executeFormData.end_date"
+              type="datetime"
+              format="YYYY-MM-DD HH:mm:ss"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择结束时间（可选）"
+              style="width: 100%"
+            />
+          </el-form-item>
+        </template>
+      </el-form>
+
+      <template #footer>
+        <el-button @click="handleCloseExecuteDialog">取消</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="handleExecuteNode">
+          确认
+        </el-button>
+      </template>
+    </EnhancedDialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+  name: "Node",
+  inheritAttrs: false,
+});
+
+import NodeAPI, {
+  NodeTable,
+  NodeForm,
+  NodePageQuery,
+  TriggerType,
+} from "@/api/module_task/cronjob/node";
+import { useDictStore } from "@/store/index";
+import PageSearch from "@/components/CURD/PageSearch.vue";
+import PageContent from "@/components/CURD/PageContent.vue";
+import EnhancedDialog from "@/components/CURD/EnhancedDialog.vue";
+import type { IContentConfig, ISearchConfig } from "@/components/CURD/types";
+import { useCrudList } from "@/components/CURD/useCrudList";
+import { nextTick, onMounted, reactive, ref } from "vue";
+import { ElMessage } from "element-plus";
+import { vue3CronPlus } from "vue3-cron-plus";
+import "vue3-cron-plus/dist/index.css";
+import OperationColumn from "@/components/OperationColumn/index.vue";
+import IntervalTab from "@/components/IntervalTab/index.vue";
+import Codemirror, { CmComponentRef } from "codemirror-editor-vue3";
+import type { EditorConfiguration } from "codemirror";
+import "codemirror/mode/python/python.js";
+import "codemirror/theme/dracula.css";
+
+const dictStore = useDictStore();
+
+const codeEditorOptions: EditorConfiguration = {
+  mode: "python",
+  lineNumbers: true,
+  smartIndent: true,
+  indentUnit: 4,
+  tabSize: 4,
+  theme: "dracula",
+  lineWrapping: true,
+  autofocus: false,
+};
+
+const { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList } = useCrudList();
+const dataFormRef = ref();
+const executeFormRef = ref();
+const submitLoading = ref(false);
+const openCron = ref(false);
+const openInterval = ref(false);
+const codeEditorRef = ref<CmComponentRef>();
+
+const searchConfig = reactive<ISearchConfig>({
+  permPrefix: "module_task:cronjob:node",
+  colon: true,
+  isExpandable: false,
+  showNumber: 2,
+  form: { labelWidth: "auto" },
+  formItems: [
+    {
+      prop: "name",
+      label: "节点名称",
+      type: "input",
+      attrs: { placeholder: "请输入节点名称", clearable: true },
+    },
+    {
+      prop: "code",
+      label: "节点编码",
+      type: "input",
+      attrs: { placeholder: "请输入节点编码", clearable: true },
+    },
+  ],
+});
+
+const contentConfig = reactive<IContentConfig<NodePageQuery>>({
+  permPrefix: "module_task:cronjob:node",
+  cols: [],
+  hideColumnFilter: true,
+  toolbar: ["add", "delete"],
+  defaultToolbar: ["refresh", "filter"],
+  pagination: {
+    pageSize: 10,
+    pageSizes: [10, 20, 30, 50],
+  },
+  request: { page_no: "page_no", page_size: "page_size" },
+  indexAction: async (params) => {
+    const res = await NodeAPI.listNode(params as NodePageQuery);
+    return {
+      total: res.data.data.total,
+      list: res.data.data.items,
+    };
+  },
+  deleteAction: (ids) =>
+    NodeAPI.deleteNode(
+      ids
+        .split(",")
+        .map((s) => Number(s.trim()))
+        .filter((n) => !Number.isNaN(n) && n > 0)
+    ),
+  deleteConfirm: {
+    title: "警告",
+    message:
+      "确认删除选中的节点吗？\n" +
+      "此操作将同时删除节点定义并移除调度器中的相关任务。\n" +
+      "正在运行的任务会被立即移除，待执行任务的日志将被标记为已取消。",
+    type: "warning",
+  },
+});
+
+const defaultCodeBlock = `def handler(*args, **kwargs):
+    """
+    Demo: 调用工程中的方法处理数据
+    
+    演示如何:
+    1. 从工程中导入方法
+    2. 调用处理器处理数据
+    3. 返回处理结果
+    """
+    
+    # 从工程中导入方法
+    from app.plugin.module_task.cronjob.node.handlers.demo_handler import (
+        demo_handler,
+        process_data
+    )
+    
+    print("=" * 50)
+    print("Demo 任务开始执行")
+    print("=" * 50)
+    
+    # 1. 调用 demo_handler
+    print("1. 调用 demo_handler:")
+    result1 = demo_handler("参数1", "参数2", key="value")
+    print(f"   返回: {result1}")
+    
+    # 2. 调用 process_data 计算平均值
+    print("2. 数据处理 - 计算平均值:")
+    numbers = [10, 20, 30, 40, 50]
+    result2 = process_data(numbers, operation="avg")
+    print(f"   输入: {numbers}")
+    print(f"   结果: {result2}")
+    
+    # 3. 调用 process_data 计算总和
+    print("3. 数据处理 - 计算总和:")
+    result3 = process_data(numbers, operation="sum")
+    print(f"   输入: {numbers}")
+    print(f"   结果: {result3}")
+    
+    print("=" * 50)
+    print("Demo 任务执行完成")
+    print("=" * 50)
+    
+    return {
+        "status": "success",
+        "demo_result": result1,
+        "avg_result": result2,
+        "sum_result": result3
+    }
+`;
+
+const formData = reactive<NodeForm>({
+  id: undefined,
+  name: "",
+  code: undefined,
+  jobstore: "default",
+  executor: "default",
+  func: defaultCodeBlock,
+  args: undefined,
+  kwargs: undefined,
+  coalesce: false,
+  max_instances: 1,
+  start_date: undefined,
+  end_date: undefined,
+});
+
+const argsList = ref<string[]>([]);
+const kwargsList = ref<{ key: string; value: string }[]>([]);
+
+const executeDialogVisible = ref(false);
+const currentExecuteNode = ref<NodeTable | null>(null);
+const executeFormData = reactive<{
+  trigger: TriggerType;
+  trigger_args?: string;
+  start_date?: string;
+  end_date?: string;
+}>({
+  trigger: "now",
+  trigger_args: undefined,
+  start_date: undefined,
+  end_date: undefined,
+});
+
+const dialogVisible = reactive({
+  title: "",
+  visible: false,
+  type: "create" as "create" | "update" | "detail",
+});
+
+const rules = reactive({
+  name: [{ required: true, message: "请输入节点名称", trigger: "blur" }],
+  code: [{ required: true, message: "请输入节点编码", trigger: "blur" }],
+});
+
+const executeRules = reactive({
+  trigger: [{ required: true, message: "请选择执行方式", trigger: "change" }],
+  trigger_args: [{ required: true, message: "请设置执行参数", trigger: "blur" }],
+});
+
+function handleRowDelete(id: number) {
+  contentRef.value?.handleDelete(id);
+}
+
+const initialFormData: Partial<NodeForm> = {
+  id: undefined,
+  name: "",
+  code: undefined,
+  jobstore: "sqlalchemy",
+  executor: "default",
+  func: defaultCodeBlock,
+  args: undefined,
+  kwargs: undefined,
+  coalesce: false,
+  max_instances: 5,
+  start_date: undefined,
+  end_date: undefined,
+};
+
+async function resetForm() {
+  if (dataFormRef.value) {
+    dataFormRef.value.resetFields();
+    dataFormRef.value.clearValidate();
+  }
+  Object.assign(formData, initialFormData);
+  argsList.value = [];
+  kwargsList.value = [];
+}
+
+async function handleCloseDialog() {
+  dialogVisible.visible = false;
+  resetForm();
+}
+
+async function handleOpenDialog(type: "create" | "update", id?: number) {
+  dialogVisible.type = type;
+  if (id) {
+    const response = await NodeAPI.detailNode(id);
+    dialogVisible.title = "修改节点";
+    Object.assign(formData, response.data.data);
+    const data = response.data.data;
+    argsList.value = data.args ? data.args.split(",").map((v: string) => v.trim()) : [];
+    kwargsList.value = data.kwargs
+      ? Object.entries(JSON.parse(data.kwargs)).map(([key, value]) => ({
+          key,
+          value: String(value),
+        }))
+      : [];
+  } else {
+    dialogVisible.title = "新增节点";
+    formData.id = undefined;
+    argsList.value = [];
+    kwargsList.value = [];
+  }
+  dialogVisible.visible = true;
+}
+
+function handleDialogOpened() {
+  nextTick(() => {
+    setTimeout(() => {
+      codeEditorRef.value?.refresh?.();
+    }, 100);
+  });
+}
+
+async function handleSubmit() {
+  dataFormRef.value.validate(async (valid: any) => {
+    if (valid) {
+      submitLoading.value = true;
+      const id = formData.id;
+      try {
+        const submitData = {
+          ...formData,
+          args: argsList.value.filter((v) => v.trim()).join(",") || undefined,
+          kwargs:
+            kwargsList.value.filter((v) => v.key.trim()).length > 0
+              ? JSON.stringify(
+                  Object.fromEntries(
+                    kwargsList.value.filter((v) => v.key.trim()).map((v) => [v.key, v.value])
+                  )
+                )
+              : undefined,
+        };
+        if (id) {
+          await NodeAPI.updateNode(id, submitData);
+        } else {
+          await NodeAPI.createNode(submitData);
+        }
+        dialogVisible.visible = false;
+        resetForm();
+        refreshList();
+      } catch (error: any) {
+        console.log(error);
+      } finally {
+        submitLoading.value = false;
+      }
+    }
+  });
+}
+
+const handlechangeCron = (cronStr: string) => {
+  if (typeof cronStr == "string") {
+    executeFormData.trigger_args = cronStr;
+  }
+};
+
+const handleIntervalConfirm = (value: string) => {
+  executeFormData.trigger_args = value;
+  openInterval.value = false;
+};
+
+function handleOpenExecuteDialog(row: NodeTable) {
+  currentExecuteNode.value = row;
+  executeFormData.trigger = "now";
+  executeFormData.trigger_args = undefined;
+  executeFormData.start_date = undefined;
+  executeFormData.end_date = undefined;
+  executeDialogVisible.value = true;
+}
+
+function handleCloseExecuteDialog() {
+  executeDialogVisible.value = false;
+  currentExecuteNode.value = null;
+  if (executeFormRef.value) {
+    executeFormRef.value.resetFields();
+  }
+}
+
+async function handleExecuteNode() {
+  if (executeFormData.trigger !== "now") {
+    const valid = await executeFormRef.value?.validate().catch(() => false);
+    if (!valid) return;
+  }
+
+  try {
+    submitLoading.value = true;
+    const params: any = {
+      trigger: executeFormData.trigger,
+    };
+
+    if (executeFormData.trigger !== "now") {
+      params.trigger_args = executeFormData.trigger_args;
+      params.start_date = executeFormData.start_date;
+      params.end_date = executeFormData.end_date;
+    }
+
+    await NodeAPI.executeNode(currentExecuteNode.value?.id as number, params);
+
+    handleCloseExecuteDialog();
+
+    refreshList();
+  } catch (error: any) {
+    ElMessage.error({
+      message: error.response?.data?.msg || "调试失败",
+      type: "error",
+      duration: 3000,
+    });
+    console.error(error);
+  } finally {
+    submitLoading.value = false;
+  }
+}
+
+onMounted(async () => {
+  await dictStore.getDict(["sys_job_store", "sys_job_executor"]);
+  refreshList();
+});
+</script>
+
+<style scoped>
+.code-editor-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding-left: 16px;
+}
+
+.code-editor-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 0;
+}
+
+.code-editor-title {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.code-editor-tip {
+  font-size: 12px;
+}
+
+.dynamic-params {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.param-item {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.code-preview {
+  max-height: 200px;
+  padding: 10px;
+  overflow-y: auto;
+  font-family: monospace;
+  word-break: break-all;
+  white-space: pre-wrap;
+  border-radius: 4px;
+}
+
+.execution-log-drawer {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.pagination-container {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 16px;
+}
+</style>
+
+<!-- popover 挂载到 body，需单独写；修复 vue3-cron-plus 全局 .el-tag--info { margin-left: -60px } 误伤多选下拉里 tag -->
+<style lang="scss">
+.node-cron-popover-fix {
+  .vue3-cron-plus-container .el-select .el-tag {
+    margin-left: 0 !important;
+  }
+
+  /* 具体秒数等多选行：避免文案与选择器挤在同一行错位 */
+  .vue3-cron-plus-container .tabBody .el-radio.long {
+    align-items: flex-start;
+    height: auto;
+    white-space: normal;
+
+    .el-radio__label {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px 8px;
+      align-items: center;
+      line-height: 1.5;
+    }
+
+    .el-select {
+      flex: 1 1 200px;
+      min-width: 180px;
+      max-width: 100%;
+    }
+  }
+}
+</style>
diff --git a/frontend/new-web/src/views/module_task/workflow/components/DynamicNode.vue b/frontend/new-web/src/views/module_task/workflow/components/DynamicNode.vue
new file mode 100644
index 00000000..e71c6f0c
--- /dev/null
+++ b/frontend/new-web/src/views/module_task/workflow/components/DynamicNode.vue
@@ -0,0 +1,174 @@
+<template>
+  <div
+    class="dynamic-node"
+    :class="nodeClass"
+    @mouseenter="showHandles = true"
+    @mouseleave="showHandles = false"
+  >
+    <div class="node-content">
+      <span class="node-label">{{ data.label }}</span>
+      <span v-if="data.config && Object.keys(data.config).length > 0" class="node-badge">
+        {{ Object.keys(data.config).length }}
+      </span>
+    </div>
+    <Handle
+      v-if="nodeType.code !== 'input'"
+      :id="'top-' + id"
+      type="target"
+      position="top"
+      :class="{ 'handle-visible': showHandles }"
+      :style="{ background: nodeType.color || '#3b82f6' }"
+    />
+    <Handle
+      v-if="nodeType.code !== 'input'"
+      :id="'left-' + id"
+      type="target"
+      position="left"
+      :class="{ 'handle-visible': showHandles }"
+      :style="{ background: nodeType.color || '#3b82f6' }"
+    />
+    <Handle
+      v-if="nodeType.code !== 'output'"
+      :id="'right-' + id"
+      type="source"
+      position="right"
+      :class="{ 'handle-visible': showHandles }"
+      :style="{ background: nodeType.color || '#3b82f6' }"
+    />
+    <Handle
+      v-if="nodeType.code !== 'output'"
+      :id="'bottom-' + id"
+      type="source"
+      position="bottom"
+      :class="{ 'handle-visible': showHandles }"
+      :style="{ background: nodeType.color || '#3b82f6' }"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+import { Handle } from "@vue-flow/core";
+
+const props = defineProps({
+  id: String,
+  data: Object,
+  nodeStatus: String,
+});
+
+const showHandles = ref(false);
+
+const nodeType = computed(() => {
+  return {
+    code: props.data?.type || "custom",
+    name: props.data?.label || "自定义节点",
+    color: getCategoryColor(props.data?.category),
+  };
+});
+
+function getCategoryColor(category) {
+  const colorMap = {
+    trigger: "#e6a23c",
+    action: "#409eff",
+    condition: "#67c23a",
+    control: "#909399",
+  };
+  return colorMap[category] || "#409eff";
+}
+
+const nodeClass = computed(() => {
+  if (props.data?.type === "input") {
+    return "start-node";
+  }
+  if (props.data?.type === "output") {
+    return "end-node";
+  }
+  return "custom-node";
+});
+</script>
+
+<style lang="scss">
+.vue-flow__node-input {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  width: 80px !important;
+  height: 80px !important;
+  padding: 0 !important;
+  color: #fff !important;
+  cursor: pointer !important;
+  background: linear-gradient(135deg, #67c23a 0%, #5daf34 100%) !important;
+  border: 3px solid #5daf34 !important;
+  border-radius: 50% !important;
+  box-shadow:
+    0 6px 12px rgb(103 194 58 / 40%),
+    0 2px 4px rgb(0 0 0 / 10%) !important;
+}
+
+.vue-flow__node-output {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  width: 80px !important;
+  height: 80px !important;
+  padding: 0 !important;
+  color: #fff !important;
+  cursor: pointer !important;
+  background: linear-gradient(135deg, #f56c6c 0%, #e04e4e 100%) !important;
+  border: 3px solid #e04e4e !important;
+  border-radius: 50% !important;
+  box-shadow:
+    0 6px 12px rgb(245 108 108 / 40%),
+    0 2px 4px rgb(0 0 0 / 10%) !important;
+}
+
+.dynamic-node {
+  padding: 12px 16px;
+  cursor: pointer;
+  border: 2px solid #409eff;
+  border-radius: 6px;
+  box-shadow: 0 2px 8px rgb(64 158 255 / 20%);
+}
+
+.vue-flow__node-input .dynamic-node,
+.vue-flow__node-output .dynamic-node {
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.node-content {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.node-label {
+  font-size: 12px;
+  font-weight: 600;
+  text-align: center;
+  letter-spacing: 0.5px;
+}
+
+.node-badge {
+  padding: 0 6px;
+  font-size: 10px;
+  font-weight: 500;
+  color: #fff;
+  background: #409eff;
+  border-radius: 10px;
+}
+
+.vue-flow__handle {
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.vue-flow__handle.handle-visible,
+.vue-flow__handle.vue-flow__handle-connecting,
+.vue-flow__handle.vue-flow__handle-valid {
+  opacity: 1;
+}
+</style>
diff --git a/frontend/new-web/src/views/module_task/workflow/components/EdgeConfigPanel.vue b/frontend/new-web/src/views/module_task/workflow/components/EdgeConfigPanel.vue
new file mode 100644
index 00000000..624ba551
--- /dev/null
+++ b/frontend/new-web/src/views/module_task/workflow/components/EdgeConfigPanel.vue
@@ -0,0 +1,167 @@
+<template>
+  <div class="edge-config-panel">
+    <div class="panel-header">
+      <span>连线配置</span>
+      <ElButton type="text" class="close-btn" @click="handleClose">
+        <ElIcon><Close /></ElIcon>
+      </ElButton>
+    </div>
+
+    <div class="panel-content">
+      <ElForm :model="formData" label-width="80px" size="small">
+        <ElFormItem label="连线名称">
+          <ElInput v-model="formData.label" placeholder="请输入连线名称" />
+        </ElFormItem>
+
+        <ElFormItem label="连线类型">
+          <ElSelect v-model="formData.type" placeholder="请选择连线类型">
+            <ElOption label="折线" value="smoothstep" />
+            <ElOption label="曲线" value="default" />
+            <ElOption label="直线" value="straight" />
+          </ElSelect>
+        </ElFormItem>
+
+        <ElFormItem label="连线颜色">
+          <ElColorPicker v-model="formData.color" />
+        </ElFormItem>
+
+        <ElFormItem label="线条宽度">
+          <ElInputNumber v-model="formData.strokeWidth" :min="1" :max="10" />
+        </ElFormItem>
+
+        <ElFormItem label="启用动画">
+          <ElSwitch v-model="formData.animated" />
+        </ElFormItem>
+
+        <ElFormItem label="条件表达式">
+          <ElInput
+            v-model="formData.condition"
+            type="textarea"
+            :rows="3"
+            placeholder="请输入条件表达式"
+          />
+        </ElFormItem>
+
+        <ElFormItem label="描述">
+          <ElInput
+            v-model="formData.description"
+            type="textarea"
+            :rows="2"
+            placeholder="请输入描述信息"
+          />
+        </ElFormItem>
+      </ElForm>
+
+      <div class="panel-actions">
+        <ElButton type="primary" size="small" @click="handleSave">保存</ElButton>
+        <ElButton type="danger" size="small" @click="handleDelete">删除连线</ElButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+import {
+  ElButton,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElSelect,
+  ElOption,
+  ElInputNumber,
+  ElSwitch,
+  ElColorPicker,
+  ElMessage,
+  ElIcon,
+} from "element-plus";
+import { Close } from "@element-plus/icons-vue";
+
+const props = defineProps({
+  edge: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(["close", "save", "delete"]);
+
+const formData = ref({
+  label: props.edge?.label || "",
+  type: props.edge?.type || "smoothstep",
+  color: props.edge?.style?.stroke || "#000000",
+  strokeWidth: props.edge?.style?.strokeWidth || 2,
+  animated: props.edge?.animated || false,
+  condition: props.edge?.data?.condition || "",
+  description: props.edge?.data?.description || "",
+});
+
+watch(
+  () => props.edge,
+  (newEdge) => {
+    if (newEdge) {
+      formData.value = {
+        label: newEdge.label || "",
+        type: newEdge.type || "smoothstep",
+        color: newEdge.style?.stroke || "#000000",
+        strokeWidth: newEdge.style?.strokeWidth || 2,
+        animated: newEdge.animated || false,
+        condition: newEdge.data?.condition || "",
+        description: newEdge.data?.description || "",
+      };
+    }
+  },
+  { deep: true }
+);
+
+function handleClose() {
+  emit("close");
+}
+
+function handleSave() {
+  emit("save", formData.value);
+  ElMessage.success("保存成功");
+}
+
+function handleDelete() {
+  emit("delete");
+}
+</script>
+
+<style scoped>
+.edge-config-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  font-weight: 600;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.close-btn {
+  padding: 4px;
+}
+
+.panel-content {
+  flex: 1;
+  padding: 16px;
+  overflow-y: auto;
+}
+
+.panel-actions {
+  display: flex;
+  gap: 8px;
+  padding-top: 16px;
+  border-top: 1px solid #e5e7eb;
+}
+
+.panel-actions .el-button {
+  flex: 1;
+}
+</style>
diff --git a/frontend/new-web/src/views/module_task/workflow/components/NodeConfigPanel.vue b/frontend/new-web/src/views/module_task/workflow/components/NodeConfigPanel.vue
new file mode 100644
index 00000000..971a0fb9
--- /dev/null
+++ b/frontend/new-web/src/views/module_task/workflow/components/NodeConfigPanel.vue
@@ -0,0 +1,219 @@
+<template>
+  <div class="node-config-panel">
+    <div class="panel-header">
+      <span>节点配置</span>
+      <ElButton type="text" class="close-btn" @click="handleClose">
+        <ElIcon><Close /></ElIcon>
+      </ElButton>
+    </div>
+
+    <div class="panel-content">
+      <ElForm :model="formData" label-width="80px" size="small">
+        <ElFormItem label="节点类型">
+          <ElSelect v-model="formData.type" placeholder="请选择节点类型" @change="handleTypeChange">
+            <ElOption
+              v-for="type in nodeTypes"
+              :key="type.id"
+              :label="type.name"
+              :value="type.code"
+            />
+          </ElSelect>
+        </ElFormItem>
+
+        <ElFormItem label="节点名称">
+          <ElInput v-model="formData.label" placeholder="请输入节点名称" />
+        </ElFormItem>
+
+        <ElFormItem label="位置参数">
+          <ElInput v-model="formData.args" placeholder="多个参数用逗号分隔，如: arg1, arg2, arg3" />
+          <div class="field-hint">多个参数用逗号分隔</div>
+        </ElFormItem>
+
+        <ElFormItem label="关键字参数">
+          <ElInput
+            v-model="formData.kwargsStr"
+            type="textarea"
+            :rows="4"
+            placeholder='JSON格式，如: {"key": "value", "count": 10}'
+          />
+          <div class="field-hint">JSON 格式的关键字参数</div>
+        </ElFormItem>
+
+        <ElFormItem label="描述">
+          <ElInput
+            v-model="formData.description"
+            type="textarea"
+            :rows="2"
+            placeholder="请输入描述信息"
+          />
+        </ElFormItem>
+      </ElForm>
+
+      <div class="panel-actions">
+        <ElButton type="primary" size="small" @click="handleSave">保存</ElButton>
+        <ElButton type="danger" size="small" @click="handleDelete">删除节点</ElButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted } from "vue";
+import {
+  ElButton,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElSelect,
+  ElOption,
+  ElMessage,
+  ElIcon,
+} from "element-plus";
+import { Close } from "@element-plus/icons-vue";
+import WorkflowNodeTypeAPI, {
+  type WorkflowNodeTypeOption,
+} from "@/api/module_task/workflow/node-type";
+
+const props = defineProps({
+  node: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(["close", "save", "delete"]);
+
+const nodeTypes = ref<WorkflowNodeTypeOption[]>([]);
+
+const formData = ref({
+  type: props.node?.type || "",
+  label: props.node?.data?.label || "",
+  args: props.node?.data?.args || "",
+  kwargsStr: props.node?.data?.kwargsStr || "{}",
+  description: props.node?.data?.description || "",
+});
+
+const loadNodeTypes = async () => {
+  try {
+    const res = await WorkflowNodeTypeAPI.getWorkflowNodeTypeOptions();
+    if (res.data) {
+      nodeTypes.value = res.data.data || [];
+    }
+  } catch {
+    ElMessage.error("加载节点类型失败");
+  }
+};
+
+const handleTypeChange = async (typeCode: string) => {
+  const nodeType = nodeTypes.value.find((t) => t.code === typeCode);
+  if (nodeType) {
+    formData.value.args = nodeType.args || "";
+    formData.value.kwargsStr = nodeType.kwargs || "{}";
+  }
+};
+
+watch(
+  () => props.node,
+  (newNode) => {
+    if (newNode) {
+      const kwargsData = newNode.data?.kwargs;
+      let kwargsStr = "{}";
+      if (kwargsData) {
+        if (typeof kwargsData === "string") {
+          kwargsStr = kwargsData;
+        } else if (typeof kwargsData === "object") {
+          kwargsStr = JSON.stringify(kwargsData, null, 2);
+        }
+      }
+
+      formData.value = {
+        type: newNode.type || "",
+        label: newNode.data?.label || "",
+        args: newNode.data?.args || "",
+        kwargsStr,
+        description: newNode.data?.description || "",
+      };
+    }
+  },
+  { deep: true, immediate: true }
+);
+
+function handleClose() {
+  emit("close");
+}
+
+function handleSave() {
+  try {
+    if (formData.value.kwargsStr && formData.value.kwargsStr.trim()) {
+      JSON.parse(formData.value.kwargsStr);
+    }
+  } catch {
+    ElMessage.error("关键字参数 JSON 格式错误");
+    return;
+  }
+
+  emit("save", {
+    type: formData.value.type,
+    label: formData.value.label,
+    args: formData.value.args,
+    kwargs: formData.value.kwargsStr,
+    description: formData.value.description,
+  });
+  ElMessage.success("保存成功");
+}
+
+function handleDelete() {
+  emit("delete");
+}
+
+onMounted(() => {
+  loadNodeTypes();
+  if (props.node?.type) {
+    handleTypeChange(props.node.type);
+  }
+});
+</script>
+
+<style scoped>
+.node-config-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  font-weight: 600;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.close-btn {
+  padding: 4px;
+}
+
+.panel-content {
+  flex: 1;
+  padding: 16px;
+  overflow-y: auto;
+}
+
+.field-hint {
+  margin-top: 4px;
+  font-size: 12px;
+  color: #909399;
+}
+
+.panel-actions {
+  display: flex;
+  gap: 8px;
+  padding-top: 16px;
+  border-top: 1px solid #e5e7eb;
+}
+
+.panel-actions .el-button {
+  flex: 1;
+}
+</style>
diff --git a/frontend/new-web/src/views/module_task/workflow/components/WorkflowDesignDrawer.vue b/frontend/new-web/src/views/module_task/workflow/components/WorkflowDesignDrawer.vue
new file mode 100644
index 00000000..b71bb7e1
--- /dev/null
+++ b/frontend/new-web/src/views/module_task/workflow/components/WorkflowDesignDrawer.vue
@@ -0,0 +1,976 @@
+<template>
+  <el-drawer
+    v-model="dialogVisible"
+    :title="drawerTitle"
+    :close-on-click-modal="true"
+    size="80%"
+    class="workflow-drawer"
+    @close="handleClose"
+  >
+    <el-container class="workflow-create-content">
+      <el-splitter direction="horizontal" style="height: 100%">
+        <el-splitter-panel size="250px" :min="200" :max="400">
+          <el-scrollbar style="height: 100%">
+            <div class="panel-section">
+              <div class="section-title">基础信息</div>
+              <el-form
+                ref="formRef"
+                :model="formData"
+                label-width="50px"
+                :rules="formRules"
+                size="small"
+              >
+                <el-form-item label="编码" prop="code">
+                  <el-input v-model="formData.code" placeholder="请输入流程编码" />
+                </el-form-item>
+                <el-form-item label="名称" prop="name">
+                  <el-input v-model="formData.name" placeholder="请输入流程名称" />
+                </el-form-item>
+                <el-form-item label="描述" prop="description">
+                  <el-input
+                    v-model="formData.description"
+                    type="textarea"
+                    :rows="2"
+                    placeholder="请输入流程描述"
+                  />
+                </el-form-item>
+              </el-form>
+            </div>
+
+            <el-divider style="margin: 4px 0" />
+
+            <div class="panel-section">
+              <div class="section-title">节点</div>
+              <el-input
+                v-model="searchKeyword"
+                placeholder="搜索节点名称"
+                clearable
+                size="small"
+                class="search-box"
+              >
+                <template #prefix>
+                  <el-icon><Search /></el-icon>
+                </template>
+              </el-input>
+              <el-space direction="vertical" :size="8" fill style="width: 100%; margin-top: 8px">
+                <el-tag
+                  v-for="item in filteredNodes"
+                  :key="item.id"
+                  :type="getCategoryType(item.category) as any"
+                  effect="plain"
+                  draggable="true"
+                  style="justify-content: center; cursor: move; user-select: none"
+                  @dragstart="onDragStart($event, item)"
+                  @dragend="onDragEnd"
+                >
+                  {{ item.name }}
+                  <span style="margin-left: 4px; font-size: 10px; opacity: 0.7">
+                    [{{ getCategoryText(item.category) }}]
+                  </span>
+                </el-tag>
+              </el-space>
+            </div>
+          </el-scrollbar>
+        </el-splitter-panel>
+
+        <el-splitter-panel>
+          <div class="canvas-main">
+            <div class="canvas-container" @click="handleCanvasClick">
+              <VueFlow
+                v-model:nodes="nodes"
+                v-model:edges="edges"
+                class="basic-flow"
+                :default-viewport="{ zoom: 1.5 }"
+                :min-zoom="0.2"
+                :max-zoom="4"
+                :node-types="nodeTypesRegistry"
+                :default-edge-options="defaultEdgeOptions"
+                @node-click="onNodeClick"
+                @edge-click="onEdgeClick"
+                @drop="onDrop"
+                @dragover="onDragOver"
+              >
+                <Controls />
+                <Background pattern-color="#aaa" :gap="16" />
+                <Panel position="top-right" class="workflow-toolbar">
+                  <el-button
+                    class="vue-flow__controls-button"
+                    title="格式化画布"
+                    :icon="Grid"
+                    @click="handleFormatCanvas"
+                  />
+                  <el-dropdown trigger="click" @command="handleEdgeStyleChange">
+                    <el-button class="vue-flow__controls-button" title="连线样式" :icon="Share" />
+                    <template #dropdown>
+                      <el-dropdown-menu>
+                        <el-dropdown-item
+                          command="bezier"
+                          :class="{ active: edgeStyle === 'bezier' }"
+                        >
+                          平滑曲线
+                        </el-dropdown-item>
+                        <el-dropdown-item
+                          command="smoothstep"
+                          :class="{ active: edgeStyle === 'smoothstep' }"
+                        >
+                          阶梯折线
+                        </el-dropdown-item>
+                        <el-dropdown-item
+                          command="straight"
+                          :class="{ active: edgeStyle === 'straight' }"
+                        >
+                          直线
+                        </el-dropdown-item>
+                      </el-dropdown-menu>
+                    </template>
+                  </el-dropdown>
+                  <el-button
+                    class="vue-flow__controls-button"
+                    :title="edgeAnimated ? '关闭动画' : '开启动画'"
+                    :icon="VideoPlay"
+                    @click="handleEdgeAnimatedChange(!edgeAnimated)"
+                  />
+                  <el-dropdown trigger="click">
+                    <el-button class="vue-flow__controls-button" title="布局方向">
+                      <el-icon><Rank /></el-icon>
+                    </el-button>
+                    <template #dropdown>
+                      <el-dropdown-menu>
+                        <el-dropdown-item
+                          @click="
+                            layoutDirection = 'LR';
+                            handleLayout();
+                          "
+                        >
+                          横向布局
+                        </el-dropdown-item>
+                        <el-dropdown-item
+                          @click="
+                            layoutDirection = 'TB';
+                            handleLayout();
+                          "
+                        >
+                          纵向布局
+                        </el-dropdown-item>
+                      </el-dropdown-menu>
+                    </template>
+                  </el-dropdown>
+                </Panel>
+                <MiniMap pannable zoomable />
+              </VueFlow>
+            </div>
+          </div>
+        </el-splitter-panel>
+
+        <el-splitter-panel v-if="updateState" size="320px" :min="280" :max="400">
+          <NodeConfigPanel
+            v-if="updateState === 'node'"
+            :node="selectedNode"
+            @close="handleClosePanel"
+            @save="handleSaveNode"
+            @delete="handleDeleteNode"
+          />
+          <EdgeConfigPanel
+            v-if="updateState === 'edge'"
+            :edge="selectedEdge"
+            @close="handleClosePanel"
+            @save="handleSaveEdge"
+            @delete="handleDeleteEdge"
+          />
+        </el-splitter-panel>
+      </el-splitter>
+    </el-container>
+
+    <template #footer>
+      <div class="drawer-footer">
+        <el-button @click="handleClose">取消</el-button>
+        <el-button type="primary" @click="handleFinish">保存</el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch, computed, onMounted, markRaw, type Component } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { Panel, VueFlow, useVueFlow } from "@vue-flow/core";
+import { Background } from "@vue-flow/background";
+import { MiniMap } from "@vue-flow/minimap";
+import { Controls } from "@vue-flow/controls";
+import type { Node, Edge, DefaultEdgeOptions, MarkerType } from "@vue-flow/core";
+import { Search, Share, VideoPlay, Rank, Grid } from "@element-plus/icons-vue";
+import dagre from "dagre";
+import "@vue-flow/core/dist/style.css";
+import "@vue-flow/core/dist/theme-default.css";
+import "@vue-flow/controls/dist/style.css";
+import "@vue-flow/minimap/dist/style.css";
+import "element-plus/dist/index.css";
+
+import DynamicNode from "./DynamicNode.vue";
+import NodeConfigPanel from "./NodeConfigPanel.vue";
+import EdgeConfigPanel from "./EdgeConfigPanel.vue";
+import WorkflowDefinitionAPI, {
+  type WorkflowTable,
+  type WorkflowForm,
+} from "@/api/module_task/workflow/definition";
+import WorkflowNodeTypeAPI from "@/api/module_task/workflow/node-type";
+
+defineOptions({
+  name: "WorkflowCreateDrawer",
+  inheritAttrs: false,
+});
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  workflow: {
+    type: Object as () => WorkflowTable | undefined,
+    default: undefined,
+  },
+});
+
+const emit = defineEmits(["update:visible", "refresh"]);
+
+const formRef = ref();
+const workflowId = ref<number>();
+
+const formData = reactive<Partial<WorkflowForm>>({
+  code: "",
+  name: "",
+  description: "",
+});
+
+const formRules = {
+  code: [{ required: true, message: "请输入流程编码", trigger: "blur" }],
+  name: [{ required: true, message: "请输入流程名称", trigger: "blur" }],
+};
+
+const dialogVisible = computed({
+  get: () => props.visible,
+  set: (val) => emit("update:visible", val),
+});
+
+const drawerTitle = computed(() => {
+  return props.workflow ? "编辑工作流" : "创建工作流";
+});
+
+const {
+  onInit,
+  onConnect,
+  addEdges,
+  getNodes: getNodesRef,
+  getEdges: getEdgesRef,
+  setEdges,
+  setNodes,
+  screenToFlowCoordinate,
+  onNodesInitialized,
+  updateNode,
+  addNodes,
+} = useVueFlow();
+
+const defaultEdgeOptions: DefaultEdgeOptions = {
+  type: "smoothstep",
+  animated: true,
+  markerEnd: "arrowclosed" as MarkerType,
+};
+
+const edgeStyle = ref<string>("smoothstep");
+const edgeAnimated = ref<boolean>(true);
+
+const handleEdgeStyleChange = (value: string) => {
+  edgeStyle.value = value;
+  defaultEdgeOptions.type = value;
+  setEdges(
+    getEdgesRef.value.map((edge) => ({
+      ...edge,
+      type: value,
+    }))
+  );
+};
+
+const handleEdgeAnimatedChange = (value: boolean) => {
+  edgeAnimated.value = value;
+  defaultEdgeOptions.animated = value;
+  setEdges(
+    getEdgesRef.value.map((edge) => ({
+      ...edge,
+      animated: value,
+    }))
+  );
+};
+
+const layoutDirection = ref<"LR" | "TB">("LR");
+
+const handleLayout = () => {
+  const currentNodes = getNodesRef.value;
+  const currentEdges = getEdgesRef.value;
+
+  if (currentNodes.length === 0) {
+    ElMessage.warning("画布中没有节点，无法布局");
+    return;
+  }
+
+  const dagreGraph = new dagre.graphlib.Graph();
+  dagreGraph.setDefaultEdgeLabel(() => ({}));
+
+  const nodeWidth = 180;
+  const nodeHeight = 60;
+
+  dagreGraph.setGraph({
+    rankdir: layoutDirection.value,
+    nodesep: 80,
+    ranksep: 120,
+    marginx: 50,
+    marginy: 50,
+  });
+
+  currentNodes.forEach((node) => {
+    dagreGraph.setNode(node.id, { width: nodeWidth, height: nodeHeight });
+  });
+
+  currentEdges.forEach((edge) => {
+    dagreGraph.setEdge(edge.source, edge.target);
+  });
+
+  dagre.layout(dagreGraph);
+
+  const layoutedNodes = currentNodes.map((node) => {
+    const nodeWithPosition = dagreGraph.node(node.id);
+    return {
+      ...node,
+      position: {
+        x: nodeWithPosition.x - nodeWidth / 2,
+        y: nodeWithPosition.y - nodeHeight / 2,
+      },
+    };
+  });
+
+  setNodes(layoutedNodes);
+  setEdges(
+    currentEdges.map((edge) => ({
+      ...edge,
+      type: edgeStyle.value,
+      animated: edgeAnimated.value,
+    }))
+  );
+  ElMessage.success("画布布局完成");
+};
+
+const handleFormatCanvas = () => {
+  const currentNodes = getNodesRef.value;
+  const currentEdges = getEdgesRef.value;
+
+  if (currentNodes.length === 0) {
+    ElMessage.warning("画布中没有节点，无法格式化");
+    return;
+  }
+
+  const dagreGraph = new dagre.graphlib.Graph();
+  dagreGraph.setDefaultEdgeLabel(() => ({}));
+
+  const nodeWidth = 180;
+  const nodeHeight = 60;
+
+  dagreGraph.setGraph({
+    rankdir: layoutDirection.value,
+    nodesep: 100,
+    ranksep: 150,
+    marginx: 80,
+    marginy: 80,
+  });
+
+  currentNodes.forEach((node) => {
+    dagreGraph.setNode(node.id, { width: nodeWidth, height: nodeHeight });
+  });
+
+  currentEdges.forEach((edge) => {
+    dagreGraph.setEdge(edge.source, edge.target);
+  });
+
+  dagre.layout(dagreGraph);
+
+  const layoutedNodes = currentNodes.map((node) => {
+    const nodeWithPosition = dagreGraph.node(node.id);
+    return {
+      ...node,
+      position: {
+        x: nodeWithPosition.x - nodeWidth / 2,
+        y: nodeWithPosition.y - nodeHeight / 2,
+      },
+    };
+  });
+
+  setNodes(layoutedNodes);
+  setEdges(
+    currentEdges.map((edge) => ({
+      ...edge,
+      type: edgeStyle.value,
+      animated: edgeAnimated.value,
+    }))
+  );
+  ElMessage.success("画布格式化完成");
+};
+
+const nodes = ref<Node[]>([]);
+const edges = ref<Edge[]>([]);
+
+const searchKeyword = ref("");
+
+type LoadedNodeType = {
+  id: number;
+  type: string;
+  name: string;
+  category: string;
+  args?: string;
+  kwargs?: string;
+};
+
+const allNodes = ref<LoadedNodeType[]>([]);
+
+const filteredNodes = computed(() => {
+  if (!searchKeyword.value) {
+    return allNodes.value;
+  }
+  const keyword = searchKeyword.value.toLowerCase();
+  return allNodes.value.filter((node) => node.name.toLowerCase().includes(keyword));
+});
+
+const getCategoryType = (category: string) => {
+  const typeMap: Record<string, string> = {
+    trigger: "warning",
+    action: "primary",
+    condition: "success",
+    control: "info",
+  };
+  return typeMap[category] || "info";
+};
+
+const getCategoryText = (category: string) => {
+  const textMap: Record<string, string> = {
+    trigger: "触发器",
+    action: "动作",
+    condition: "条件",
+    control: "控制",
+  };
+  return textMap[category] || category;
+};
+
+const nodeTypesRegistry = ref<Record<string, Component>>({});
+
+const updateState = ref("");
+const selectedEdge = ref<Edge>();
+const selectedNode = ref<Node>();
+const loading = ref(false);
+
+const getNodes = () => getNodesRef.value;
+const getEdges = () =>
+  getEdgesRef.value.map((edge) => ({
+    id: edge.id,
+    source: edge.source,
+    target: edge.target,
+    label: typeof edge.label === "string" ? edge.label : undefined,
+    type: edge.type,
+    animated: edge.animated,
+    style: edge.style,
+    data: edge.data,
+  }));
+
+const loadNodeTypes = async () => {
+  loading.value = true;
+  try {
+    const res = await WorkflowNodeTypeAPI.getWorkflowNodeTypeOptions();
+    if (res.data && res.data.data) {
+      allNodes.value = res.data.data.map((nodeType: any) => ({
+        id: nodeType.id,
+        type: nodeType.code,
+        name: nodeType.name,
+        category: nodeType.category || "action",
+        args: nodeType.args || "",
+        kwargs: nodeType.kwargs || "{}",
+      }));
+
+      const newTypes: Record<string, Component> = {};
+      res.data.data.forEach((nodeType: any) => {
+        newTypes[nodeType.code] = markRaw(DynamicNode);
+      });
+
+      nodeTypesRegistry.value = newTypes;
+    }
+  } catch {
+    ElMessage.error("加载节点类型失败");
+  } finally {
+    loading.value = false;
+  }
+};
+
+onMounted(() => {
+  loadNodeTypes();
+});
+
+onInit((vueFlowInstance) => {
+  vueFlowInstance.fitView();
+  if (workflowId.value) {
+    WorkflowDefinitionAPI.getWorkflowDetail(workflowId.value)
+      .then((res) => {
+        if (res.data && res.data.data) {
+          nodes.value = res.data.data.nodes || [];
+          edges.value = res.data.data.edges || [];
+          saveToHistory(nodes.value as any, edges.value as any);
+        }
+      })
+      .catch(() => {
+        ElMessage.error("流程加载失败");
+      });
+  } else {
+    saveToHistory(nodes.value as any, edges.value as any);
+  }
+});
+
+onConnect((connection) => {
+  addEdges({
+    ...connection,
+    type: edgeStyle.value,
+    animated: edgeAnimated.value,
+  });
+  saveToHistory(nodes.value as any, edges.value as any);
+});
+
+function handleValidate() {
+  const errors = [];
+  const warnings = [];
+
+  const allNodesList = getNodes();
+  const allEdgesList = getEdges();
+
+  if (allNodesList.length === 0) {
+    errors.push("流程中没有节点");
+  }
+
+  const nodeIds = new Set(allNodesList.map((n: Node) => n.id));
+  allEdgesList.forEach((edge: Edge) => {
+    if (!nodeIds.has(edge.source)) {
+      errors.push(`连线 ${edge.label || edge.id} 的源节点不存在`);
+    }
+    if (!nodeIds.has(edge.target)) {
+      errors.push(`连线 ${edge.label || edge.id} 的目标节点不存在`);
+    }
+  });
+
+  const orphanNodes = allNodesList.filter(
+    (node: Node) => !allEdgesList.some((e: Edge) => e.source === node.id || e.target === node.id)
+  );
+
+  if (orphanNodes.length > 0) {
+    warnings.push(
+      `有 ${orphanNodes.length} 个孤立节点: ${orphanNodes.map((n: Node) => n.data.label).join(", ")}`
+    );
+  }
+
+  if (errors.length > 0) {
+    ElMessageBox.alert(
+      `<div style="max-height: 300px; overflow-y: auto;">
+        <strong>错误 (${errors.length}):</strong>
+        <ul>${errors.map((e) => `<li style="color: #f56c6c;">${e}</li>`).join("")}</ul>
+        ${
+          warnings.length > 0
+            ? `<strong>警告 (${warnings.length}):</strong>
+        <ul>${warnings.map((w) => `<li style="color: #e6a23c;">${w}</li>`).join("")}</ul>`
+            : ""
+        }
+      </div>`,
+      "流程验证结果",
+      {
+        confirmButtonText: "确定",
+        dangerouslyUseHTMLString: true,
+      }
+    );
+    throw new Error("验证失败");
+  } else if (warnings.length > 0) {
+    ElMessageBox.alert(
+      `<div style="max-height: 300px; overflow-y: auto;">
+        <strong>流程验证通过，但有警告 (${warnings.length}):</strong>
+        <ul>${warnings.map((w) => `<li style="color: #e6a23c;">${w}</li>`).join("")}</ul>
+      </div>`,
+      "流程验证结果",
+      {
+        confirmButtonText: "确定",
+        dangerouslyUseHTMLString: true,
+      }
+    );
+  }
+}
+
+const onEdgeClick = (event: any) => {
+  event.event.stopPropagation();
+  selectedEdge.value = event.edge;
+  updateState.value = "edge";
+};
+
+const handleCanvasClick = (event: MouseEvent) => {
+  if (
+    event.target instanceof HTMLElement &&
+    (event.target.classList.contains("vue-flow__node") || event.target.closest(".vue-flow__node"))
+  ) {
+    return;
+  }
+  updateState.value = "";
+  selectedNode.value = undefined;
+  selectedEdge.value = undefined;
+};
+
+const onNodeClick = (event: any) => {
+  event.event.stopPropagation();
+  selectedNode.value = event.node;
+  updateState.value = "node";
+};
+
+function onDrop(event: DragEvent) {
+  handleNodeDrop(event, screenToFlowCoordinate, onNodesInitialized, updateNode, addNodes);
+}
+
+function handleClosePanel() {
+  updateState.value = "";
+  selectedNode.value = undefined;
+  selectedEdge.value = undefined;
+}
+
+function handleSaveNode(data: any) {
+  if (!selectedNode.value) return;
+  const nodeId = selectedNode.value!.id;
+  if (nodeId && updateNodeData(nodeId, data, getNodes, setNodes)) {
+    saveToHistory(nodes.value as any, edges.value as any);
+  }
+}
+
+function handleDeleteNode() {
+  if (!selectedNode.value) return;
+  const nodeId = selectedNode.value!.id;
+  if (!nodeId) return;
+
+  ElMessageBox.confirm("确定要删除该节点吗？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(() => {
+    deleteNode(nodeId, getNodes, setNodes, getEdges, setEdges);
+    ElMessage.success("节点删除成功");
+    handleClosePanel();
+    saveToHistory(nodes.value as any, edges.value as any);
+  });
+}
+
+function handleSaveEdge(data: any) {
+  if (!selectedEdge.value) return;
+  const edgeId = selectedEdge.value!.id;
+  if (edgeId && updateEdgeData(edgeId, data, getEdges, setEdges)) {
+    saveToHistory(nodes.value as any, edges.value as any);
+  }
+}
+
+function handleDeleteEdge() {
+  if (!selectedEdge.value) return;
+  const edgeId = selectedEdge.value!.id;
+  if (!edgeId) return;
+
+  ElMessageBox.confirm("确定要删除该连线吗？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(() => {
+    deleteEdge(edgeId, getEdges, setEdges);
+    ElMessage.success("连线删除成功");
+    handleClosePanel();
+    saveToHistory(nodes.value as any, edges.value as any);
+  });
+}
+
+function handleSave() {
+  const workflowData = {
+    nodes: nodes.value,
+    edges: edges.value,
+  };
+
+  const saveData = {
+    ...formData,
+    nodes: workflowData.nodes,
+    edges: workflowData.edges,
+  };
+
+  if (workflowId.value) {
+    return WorkflowDefinitionAPI.updateWorkflow(workflowId.value, saveData as WorkflowForm);
+  } else {
+    return WorkflowDefinitionAPI.createWorkflow(saveData as WorkflowForm).then((res) => {
+      if (res.data && res.data.data) {
+        workflowId.value = res.data.data.id;
+      }
+    });
+  }
+}
+
+watch(
+  () => props.workflow,
+  (newWorkflow) => {
+    if (newWorkflow) {
+      Object.assign(formData, {
+        code: newWorkflow.code,
+        name: newWorkflow.name,
+        description: newWorkflow.description,
+      });
+      workflowId.value = newWorkflow.id;
+      nodes.value = newWorkflow.nodes || [];
+      edges.value = newWorkflow.edges || [];
+    } else {
+      Object.assign(formData, {
+        code: "",
+        name: "",
+        description: "",
+      });
+      workflowId.value = undefined;
+      nodes.value = [];
+      edges.value = [];
+    }
+  },
+  { immediate: true }
+);
+
+const handleFinish = async () => {
+  if (!formRef.value) return;
+
+  try {
+    await formRef.value.validate();
+    await handleValidate();
+    await handleSave();
+    emit("refresh");
+    handleClose();
+  } catch (error) {
+    console.error("保存流程失败", error);
+  }
+};
+
+const handleClose = () => {
+  emit("update:visible", false);
+};
+
+// 历史记录管理
+const history = ref<{ nodes: Node[]; edges: Edge[] }[]>([]);
+const historyIndex = ref(-1);
+
+function saveToHistory(nodesData: Node[], edgesData: Edge[]) {
+  history.value = history.value.slice(0, historyIndex.value + 1);
+  history.value.push({ nodes: nodesData, edges: edgesData });
+  historyIndex.value = history.value.length - 1;
+}
+
+// 拖拽相关函数
+function onDragStart(event: DragEvent, node: LoadedNodeType) {
+  if (event.dataTransfer) {
+    event.dataTransfer.setData("application/vueflow", JSON.stringify(node));
+    event.dataTransfer.effectAllowed = "move";
+  }
+}
+
+function onDragEnd() {
+  // 拖拽结束
+}
+
+function onDragOver(event: DragEvent) {
+  event.preventDefault();
+  if (event.dataTransfer) {
+    event.dataTransfer.dropEffect = "move";
+  }
+}
+
+function handleNodeDrop(
+  event: DragEvent,
+  screenToFlowCoordinate: (position: { x: number; y: number }) => { x: number; y: number },
+  onNodesInitialized: (callback: () => void) => void,
+  updateNode: (id: string, node: Partial<Node>) => void,
+  addNodes: (nodes: Node[]) => void
+) {
+  const data = event.dataTransfer?.getData("application/vueflow");
+  if (!data) return;
+
+  const nodeType = JSON.parse(data);
+  const position = screenToFlowCoordinate({ x: event.clientX, y: event.clientY });
+
+  const newNode: Node = {
+    id: `node-${Date.now()}`,
+    type: nodeType.type,
+    position,
+    data: {
+      label: nodeType.name,
+      type: nodeType.type,
+      category: nodeType.category,
+      args: nodeType.args,
+      kwargs: nodeType.kwargs,
+    },
+  };
+
+  addNodes([newNode]);
+}
+
+// 节点操作函数
+function updateNodeData(
+  nodeId: string,
+  data: any,
+  getNodes: () => Node[],
+  setNodes: (nodes: Node[]) => void
+) {
+  const currentNodes = getNodes();
+  const nodeIndex = currentNodes.findIndex((n) => n.id === nodeId);
+  if (nodeIndex === -1) return false;
+
+  const updatedNodes = [...currentNodes];
+  updatedNodes[nodeIndex] = {
+    ...updatedNodes[nodeIndex],
+    data: {
+      ...updatedNodes[nodeIndex].data,
+      ...data,
+    },
+  };
+  setNodes(updatedNodes);
+  return true;
+}
+
+function deleteNode(
+  nodeId: string,
+  getNodes: () => Node[],
+  setNodes: (nodes: Node[]) => void,
+  getEdges: () => Edge[],
+  setEdges: (edges: Edge[]) => void
+) {
+  const currentNodes = getNodes();
+  const currentEdges = getEdges();
+  const filteredNodes = currentNodes.filter((n) => n.id !== nodeId);
+  const filteredEdges = currentEdges.filter((e) => e.source !== nodeId && e.target !== nodeId);
+  setNodes(filteredNodes);
+  setEdges(filteredEdges);
+}
+
+// 边操作函数
+function updateEdgeData(
+  edgeId: string,
+  data: any,
+  getEdges: () => Edge[],
+  setEdges: (edges: Edge[]) => void
+) {
+  const currentEdges = getEdges();
+  const edgeIndex = currentEdges.findIndex((e) => e.id === edgeId);
+  if (edgeIndex === -1) return false;
+
+  const updatedEdges = [...currentEdges];
+  updatedEdges[edgeIndex] = {
+    ...updatedEdges[edgeIndex],
+    ...data,
+    data: {
+      ...updatedEdges[edgeIndex].data,
+      ...data,
+    },
+  };
+  setEdges(updatedEdges);
+  return true;
+}
+
+function deleteEdge(edgeId: string, getEdges: () => Edge[], setEdges: (edges: Edge[]) => void) {
+  const currentEdges = getEdges();
+  const filteredEdges = currentEdges.filter((e) => e.id !== edgeId);
+  setEdges(filteredEdges);
+}
+</script>
+
+<style scoped lang="scss">
+.workflow-drawer {
+  :deep(.el-drawer__body) {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.workflow-create-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+:deep(.el-splitter) {
+  flex: 1;
+}
+
+:deep(.el-splitter-panel) {
+  overflow: hidden;
+}
+
+.basic-info-section {
+  padding: 12px;
+
+  .section-title {
+    margin-bottom: 12px;
+    font-size: 14px;
+    font-weight: bold;
+  }
+}
+
+.panel-section {
+  padding: 12px;
+
+  .section-title {
+    margin-bottom: 12px;
+    font-size: 14px;
+    font-weight: bold;
+  }
+}
+
+.search-box {
+  margin-bottom: 12px;
+}
+
+.canvas-main {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 0;
+}
+
+.canvas-container {
+  flex: 1;
+  overflow: hidden;
+}
+
+:deep(.vue-flow__controls) {
+  display: flex;
+  flex-direction: column;
+}
+
+:deep(.vue-flow__controls-button) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  color: #000;
+  cursor: pointer;
+  border: none;
+}
+
+:deep(.el-dropdown) {
+  display: flex;
+}
+
+.workflow-toolbar {
+  display: flex;
+  gap: 4px;
+  padding: 8px;
+  border-radius: 6px;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
+}
+
+.drawer-footer {
+  display: flex;
+  gap: 12px;
+  justify-content: flex-end;
+}
+</style>
diff --git a/frontend/new-web/src/views/module_task/workflow/definition/index.vue b/frontend/new-web/src/views/module_task/workflow/definition/index.vue
new file mode 100644
index 00000000..a67f2be2
--- /dev/null
+++ b/frontend/new-web/src/views/module_task/workflow/definition/index.vue
@@ -0,0 +1,307 @@
+<template>
+  <div class="app-container">
+    <PageSearch
+      ref="searchRef"
+      :search-config="searchConfig"
+      @query-click="handleQueryClick"
+      @reset-click="handleResetClick"
+    />
+
+    <PageContent ref="contentRef" :content-config="contentConfig" @add-click="handleCreate">
+      <template #table="{ data, loading, tableRef, onSelectionChange, pagination }">
+        <div class="data-table__content">
+          <el-table
+            :ref="tableRef as any"
+            v-loading="loading"
+            :data="data"
+            height="100%"
+            border
+            stripe
+            @selection-change="onSelectionChange"
+          >
+            <template #empty>
+              <el-empty :image-size="80" description="暂无数据" />
+            </template>
+            <el-table-column type="selection" align="center" min-width="55" />
+            <el-table-column type="index" fixed label="序号" min-width="60">
+              <template #default="scope">
+                {{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }}
+              </template>
+            </el-table-column>
+            <el-table-column label="ID" prop="id" min-width="80" />
+            <el-table-column label="名称" prop="name" min-width="160" show-overflow-tooltip />
+            <el-table-column label="编码" prop="code" min-width="120" show-overflow-tooltip />
+            <el-table-column label="状态" prop="status" min-width="100">
+              <template #default="scope">
+                <el-tag :type="getStatusType(scope.row.status) as any">
+                  {{ getStatusText(scope.row.status) }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="描述"
+              prop="description"
+              min-width="160"
+              show-overflow-tooltip
+            />
+            <el-table-column label="创建时间" prop="created_time" min-width="180" />
+
+            <OperationColumn :list-data-length="data.length">
+              <template #default="scope">
+                <el-space class="flex">
+                  <el-button
+                    v-if="scope.row.status === 'draft'"
+                    v-hasPerm="['module_task:workflow:definition:update']"
+                    type="success"
+                    size="small"
+                    link
+                    icon="upload"
+                    @click="handlePublish(scope.row)"
+                  >
+                    发布
+                  </el-button>
+                  <el-dropdown
+                    v-if="scope.row.status === 'published'"
+                    v-hasPerm="['module_task:workflow:definition:execute']"
+                    @command="(e: string) => handleExecute(e, scope.row)"
+                  >
+                    <el-button type="warning" size="small" link icon="video-play">
+                      执行
+                      <el-icon><ArrowDown /></el-icon>
+                    </el-button>
+                    <template #dropdown>
+                      <el-dropdown-menu>
+                        <el-dropdown-item command="execute">立即执行</el-dropdown-item>
+                      </el-dropdown-menu>
+                    </template>
+                  </el-dropdown>
+                  <el-button
+                    v-hasPerm="['module_task:workflow:definition:update']"
+                    type="primary"
+                    size="small"
+                    link
+                    icon="edit"
+                    @click="handleEdit(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    v-hasPerm="['module_task:workflow:definition:delete']"
+                    type="danger"
+                    size="small"
+                    link
+                    icon="delete"
+                    @click="handleRowDelete(scope.row.id)"
+                  >
+                    删除
+                  </el-button>
+                </el-space>
+              </template>
+            </OperationColumn>
+          </el-table>
+        </div>
+      </template>
+    </PageContent>
+
+    <WorkflowDesignDrawer
+      v-model:visible="createVisible"
+      :workflow="selectedWorkflow"
+      @refresh="refreshList"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+  name: "WorkflowDefinition",
+  inheritAttrs: false,
+});
+
+import { ElMessage, ElMessageBox } from "element-plus";
+import { ArrowDown } from "@element-plus/icons-vue";
+import PageSearch from "@/components/CURD/PageSearch.vue";
+import PageContent from "@/components/CURD/PageContent.vue";
+import type { IContentConfig, ISearchConfig } from "@/components/CURD/types";
+import { useCrudList } from "@/components/CURD/useCrudList";
+import OperationColumn from "@/components/OperationColumn/index.vue";
+import WorkflowDefinitionAPI, {
+  type WorkflowTable,
+  type WorkflowPageQuery,
+} from "@/api/module_task/workflow/definition";
+import WorkflowDesignDrawer from "../components/WorkflowDesignDrawer.vue";
+import { onMounted, reactive, ref } from "vue";
+
+const { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList } = useCrudList();
+
+const selectedWorkflow = ref<WorkflowTable>();
+const createVisible = ref(false);
+
+const searchConfig = reactive<ISearchConfig>({
+  permPrefix: "module_task:workflow:definition",
+  colon: true,
+  isExpandable: true,
+  showNumber: 2,
+  form: { labelWidth: "auto" },
+  formItems: [
+    {
+      prop: "name",
+      label: "流程名称",
+      type: "input",
+      attrs: { placeholder: "请输入流程名称", clearable: true },
+    },
+    {
+      prop: "code",
+      label: "流程编码",
+      type: "input",
+      attrs: { placeholder: "请输入流程编码", clearable: true },
+    },
+    {
+      prop: "status",
+      label: "状态",
+      type: "select",
+      options: [
+        { label: "草稿", value: "draft" },
+        { label: "已发布", value: "published" },
+        { label: "已归档", value: "archived" },
+      ],
+      attrs: { placeholder: "请选择状态", clearable: true, style: { width: "170px" } },
+    },
+  ],
+});
+
+function normalizeWorkflowQuery(params: Record<string, unknown>): WorkflowPageQuery {
+  const p = { ...params } as Record<string, unknown>;
+  if (p.status === "" || p.status === null) p.status = undefined;
+  return p as unknown as WorkflowPageQuery;
+}
+
+const contentConfig = reactive<IContentConfig<WorkflowPageQuery>>({
+  permPrefix: "module_task:workflow:definition",
+  title: "工作流管理",
+  tooltip: "流程编排列表，支持发布与执行",
+  cols: [],
+  hideColumnFilter: true,
+  toolbar: [
+    { name: "add", text: "新增", attrs: { icon: "plus", type: "success" }, perm: "create" },
+    "delete",
+  ],
+  defaultToolbar: ["refresh"],
+  initialFetch: false,
+  pagination: {
+    pageSize: 10,
+    pageSizes: [10, 20, 30, 50],
+  },
+  request: { page_no: "page_no", page_size: "page_size" },
+  indexAction: async (params) => {
+    const res = await WorkflowDefinitionAPI.getWorkflowList(
+      normalizeWorkflowQuery(params as unknown as Record<string, unknown>)
+    );
+    return {
+      total: res.data.data.total,
+      list: res.data.data.items,
+    };
+  },
+  deleteAction: (ids) =>
+    WorkflowDefinitionAPI.deleteWorkflow(
+      ids
+        .split(",")
+        .map((s) => Number(s.trim()))
+        .filter((n) => !Number.isNaN(n) && n > 0)
+    ),
+  deleteConfirm: {
+    title: "警告",
+    message: "确认删除选中的工作流吗？",
+    type: "warning",
+  },
+});
+
+function handleRowDelete(id?: number) {
+  if (id == null) return;
+  contentRef.value?.handleDelete(id);
+}
+
+function handleCreate() {
+  selectedWorkflow.value = undefined;
+  createVisible.value = true;
+}
+
+function handleEdit(record: WorkflowTable) {
+  selectedWorkflow.value = record;
+  createVisible.value = true;
+}
+
+function getStatusType(status: string) {
+  const typeMap: Record<string, string> = {
+    draft: "info",
+    published: "success",
+    archived: "warning",
+  };
+  return typeMap[status] || "";
+}
+
+function getStatusText(status: string) {
+  const textMap: Record<string, string> = {
+    draft: "草稿",
+    published: "已发布",
+    archived: "已归档",
+  };
+  return textMap[status] || status;
+}
+
+function handlePublish(record: WorkflowTable) {
+  ElMessageBox.confirm("确定要发布此工作流吗？发布后可执行。", "确认发布", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(async () => {
+      try {
+        if (!record.id) {
+          ElMessage.error("工作流ID不存在");
+          return;
+        }
+        await WorkflowDefinitionAPI.publishWorkflow(record.id, {});
+        ElMessage.success("发布成功");
+        refreshList();
+      } catch {
+        ElMessage.error("发布失败");
+      }
+    })
+    .catch(() => {});
+}
+
+function handleExecute(action: string, record: WorkflowTable) {
+  if (action !== "execute") return;
+  ElMessageBox.confirm("确定要立即执行此工作流吗？", "确认执行", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(async () => {
+      try {
+        if (!record.id) {
+          ElMessage.error("工作流ID不存在");
+          return;
+        }
+        const res = await WorkflowDefinitionAPI.executeWorkflow({
+          workflow_id: record.id,
+          variables: {},
+        });
+        if (res.data?.data) {
+          const result = res.data.data;
+          ElMessage.success(`工作流执行${result.status === "completed" ? "成功" : "失败"}`);
+        }
+        refreshList();
+      } catch {
+        ElMessage.error("执行失败");
+      }
+    })
+    .catch(() => {});
+}
+
+onMounted(() => {
+  refreshList();
+});
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/frontend/new-web/src/views/module_task/workflow/node-type/index.vue b/frontend/new-web/src/views/module_task/workflow/node-type/index.vue
new file mode 100644
index 00000000..5f4899ee
--- /dev/null
+++ b/frontend/new-web/src/views/module_task/workflow/node-type/index.vue
@@ -0,0 +1,347 @@
+<template>
+  <div class="app-container">
+    <PageSearch
+      ref="searchRef"
+      :search-config="searchConfig"
+      @query-click="handleQueryClick"
+      @reset-click="handleResetClick"
+    />
+
+    <PageContent ref="contentRef" :content-config="contentConfig" @add-click="openDialog()">
+      <template #table="{ data, loading, tableRef, onSelectionChange, pagination }">
+        <div class="data-table__content">
+          <el-table
+            :ref="tableRef as any"
+            v-loading="loading"
+            :data="data"
+            height="100%"
+            border
+            stripe
+            @selection-change="onSelectionChange"
+          >
+            <template #empty>
+              <el-empty :image-size="80" description="暂无数据" />
+            </template>
+            <el-table-column type="selection" align="center" min-width="55" />
+            <el-table-column type="index" fixed label="序号" min-width="60">
+              <template #default="scope">
+                {{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }}
+              </template>
+            </el-table-column>
+            <el-table-column label="ID" prop="id" min-width="70" />
+            <el-table-column label="名称" prop="name" min-width="140" show-overflow-tooltip />
+            <el-table-column label="编码" prop="code" min-width="120" show-overflow-tooltip />
+            <el-table-column label="分类" prop="category" min-width="100">
+              <template #default="scope">
+                {{ categoryLabel(scope.row.category) }}
+              </template>
+            </el-table-column>
+            <el-table-column label="排序" prop="sort_order" min-width="80" />
+            <el-table-column label="启用" prop="is_active" min-width="80">
+              <template #default="scope">
+                <el-tag :type="scope.row.is_active ? 'success' : 'info'">
+                  {{ scope.row.is_active ? "是" : "否" }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="创建时间" prop="created_time" min-width="170" />
+
+            <OperationColumn :list-data-length="data.length">
+              <template #default="scope">
+                <el-space class="flex">
+                  <el-button
+                    v-hasPerm="['module_task:workflow:node-type:update']"
+                    type="primary"
+                    size="small"
+                    link
+                    icon="edit"
+                    @click="openDialog(scope.row.id)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    v-hasPerm="['module_task:workflow:node-type:delete']"
+                    type="danger"
+                    size="small"
+                    link
+                    icon="delete"
+                    @click="handleRowDelete(scope.row.id)"
+                  >
+                    删除
+                  </el-button>
+                </el-space>
+              </template>
+            </OperationColumn>
+          </el-table>
+        </div>
+      </template>
+    </PageContent>
+
+    <EnhancedDialog
+      v-model="dialogVisible"
+      :title="dialogTitle"
+      width="720px"
+      destroy-on-close
+      @close="handleCloseDialog"
+    >
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="名称" prop="name">
+          <el-input v-model="form.name" maxlength="128" show-word-limit />
+        </el-form-item>
+        <el-form-item label="编码" prop="code">
+          <el-input v-model="form.code" maxlength="64" show-word-limit :disabled="!!editingId" />
+        </el-form-item>
+        <el-form-item label="分类" prop="category">
+          <el-select v-model="form.category" style="width: 100%">
+            <el-option label="触发器" value="trigger" />
+            <el-option label="动作" value="action" />
+            <el-option label="条件" value="condition" />
+            <el-option label="控制" value="control" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="代码块" prop="func">
+          <el-input
+            v-model="form.func"
+            type="textarea"
+            :rows="12"
+            placeholder="须定义 handler(*args, **kwargs)，可接收 upstream、variables"
+          />
+        </el-form-item>
+        <el-form-item label="位置参数" prop="args">
+          <el-input v-model="form.args" placeholder="逗号分隔，如 a, b" />
+        </el-form-item>
+        <el-form-item label="关键字参数" prop="kwargs">
+          <el-input
+            v-model="form.kwargs"
+            type="textarea"
+            :rows="3"
+            placeholder='JSON，如 {"key": "v"}'
+          />
+        </el-form-item>
+        <el-form-item label="排序" prop="sort_order">
+          <el-input-number v-model="form.sort_order" :min="0" />
+        </el-form-item>
+        <el-form-item label="启用" prop="is_active">
+          <el-switch v-model="form.is_active" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitting" @click="submitForm">保存</el-button>
+      </template>
+    </EnhancedDialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+  name: "WorkflowNodeType",
+  inheritAttrs: false,
+});
+
+import { onMounted, reactive, ref } from "vue";
+import { ElMessage, type FormInstance, type FormRules } from "element-plus";
+import PageSearch from "@/components/CURD/PageSearch.vue";
+import PageContent from "@/components/CURD/PageContent.vue";
+import EnhancedDialog from "@/components/CURD/EnhancedDialog.vue";
+import type { IContentConfig, ISearchConfig } from "@/components/CURD/types";
+import { useCrudList } from "@/components/CURD/useCrudList";
+import OperationColumn from "@/components/OperationColumn/index.vue";
+import WorkflowNodeTypeAPI, {
+  type WorkflowNodeTypeForm,
+  type WorkflowNodeTypePageQuery,
+  type WorkflowNodeTypeTable,
+} from "@/api/module_task/workflow/node-type";
+
+const { searchRef, contentRef, handleQueryClick, handleResetClick, refreshList } = useCrudList();
+
+const dialogVisible = ref(false);
+const dialogTitle = ref("新增节点类型");
+const editingId = ref<number | null>(null);
+const submitting = ref(false);
+const formRef = ref<FormInstance>();
+
+const searchConfig = reactive<ISearchConfig>({
+  permPrefix: "module_task:workflow:node-type",
+  colon: true,
+  isExpandable: true,
+  showNumber: 2,
+  form: { labelWidth: "auto" },
+  formItems: [
+    {
+      prop: "name",
+      label: "名称",
+      type: "input",
+      attrs: { placeholder: "名称", clearable: true },
+    },
+    {
+      prop: "code",
+      label: "编码",
+      type: "input",
+      attrs: { placeholder: "编码", clearable: true },
+    },
+    {
+      prop: "category",
+      label: "分类",
+      type: "select",
+      options: [
+        { label: "触发器", value: "trigger" },
+        { label: "动作", value: "action" },
+        { label: "条件", value: "condition" },
+        { label: "控制", value: "control" },
+      ],
+      attrs: { placeholder: "全部", clearable: true, style: { width: "170px" } },
+    },
+  ],
+});
+
+function normalizeNodeTypeQuery(params: Record<string, unknown>): WorkflowNodeTypePageQuery {
+  const p = { ...params } as Record<string, unknown>;
+  if (p.category === "" || p.category === null) p.category = undefined;
+  return p as unknown as WorkflowNodeTypePageQuery;
+}
+
+const contentConfig = reactive<IContentConfig<WorkflowNodeTypePageQuery>>({
+  permPrefix: "module_task:workflow:node-type",
+  cols: [],
+  hideColumnFilter: true,
+  toolbar: [
+    { name: "add", text: "新增", attrs: { icon: "plus", type: "success" }, perm: "create" },
+    "delete",
+  ],
+  defaultToolbar: ["refresh"],
+  initialFetch: false,
+  pagination: {
+    pageSize: 10,
+    pageSizes: [10, 20, 30, 50],
+  },
+  request: { page_no: "page_no", page_size: "page_size" },
+  indexAction: async (params) => {
+    const res = await WorkflowNodeTypeAPI.getWorkflowNodeTypeList(
+      normalizeNodeTypeQuery(params as unknown as Record<string, unknown>)
+    );
+    return {
+      total: res.data.data.total,
+      list: res.data.data.items,
+    };
+  },
+  deleteAction: (ids) =>
+    WorkflowNodeTypeAPI.deleteWorkflowNodeType(
+      ids
+        .split(",")
+        .map((s) => Number(s.trim()))
+        .filter((n) => !Number.isNaN(n) && n > 0)
+    ),
+  deleteConfirm: {
+    title: "警告",
+    message: "确认删除选中的编排节点类型吗？",
+    type: "warning",
+  },
+});
+
+function handleRowDelete(id?: number) {
+  if (id == null) return;
+  contentRef.value?.handleDelete(id);
+}
+
+function categoryLabel(c?: string) {
+  const m: Record<string, string> = {
+    trigger: "触发器",
+    action: "动作",
+    condition: "条件",
+    control: "控制",
+  };
+  return c ? m[c] || c : "-";
+}
+
+const defaultForm = (): WorkflowNodeTypeForm => ({
+  name: "",
+  code: "",
+  category: "action",
+  func: "",
+  args: "",
+  kwargs: "{}",
+  sort_order: 0,
+  is_active: true,
+});
+
+const form = reactive<WorkflowNodeTypeForm>(defaultForm());
+
+const rules: FormRules = {
+  name: [{ required: true, message: "请输入名称", trigger: "blur" }],
+  code: [{ required: true, message: "请输入编码", trigger: "blur" }],
+  category: [{ required: true, message: "请选择分类", trigger: "change" }],
+  func: [{ required: true, message: "请输入代码块", trigger: "blur" }],
+};
+
+function resetForm() {
+  Object.assign(form, defaultForm());
+  editingId.value = null;
+  formRef.value?.resetFields();
+}
+
+function handleCloseDialog() {
+  resetForm();
+}
+
+async function openDialog(id?: number) {
+  resetForm();
+  dialogTitle.value = id ? "编辑节点类型" : "新增节点类型";
+  editingId.value = id ?? null;
+  if (id) {
+    try {
+      const res = await WorkflowNodeTypeAPI.getWorkflowNodeTypeDetail(id);
+      const d = res.data?.data as WorkflowNodeTypeTable | undefined;
+      if (d) {
+        form.name = d.name || "";
+        form.code = d.code || "";
+        form.category = (d.category as WorkflowNodeTypeForm["category"]) || "action";
+        form.func = d.func || "";
+        form.args = d.args || "";
+        form.kwargs = d.kwargs || "{}";
+        form.sort_order = d.sort_order ?? 0;
+        form.is_active = d.is_active ?? true;
+      }
+    } catch {
+      ElMessage.error("加载详情失败");
+      return;
+    }
+  }
+  dialogVisible.value = true;
+}
+
+async function submitForm() {
+  if (!formRef.value) return;
+  await formRef.value.validate();
+  if (form.kwargs?.trim()) {
+    try {
+      JSON.parse(form.kwargs);
+    } catch {
+      ElMessage.error("关键字参数须为合法 JSON");
+      return;
+    }
+  }
+  submitting.value = true;
+  try {
+    if (editingId.value) {
+      await WorkflowNodeTypeAPI.updateWorkflowNodeType(editingId.value, form);
+      ElMessage.success("更新成功");
+    } else {
+      await WorkflowNodeTypeAPI.createWorkflowNodeType(form);
+      ElMessage.success("创建成功");
+    }
+    dialogVisible.value = false;
+    refreshList();
+  } catch {
+    ElMessage.error(editingId.value ? "更新失败" : "创建失败");
+  } finally {
+    submitting.value = false;
+  }
+}
+
+onMounted(() => {
+  refreshList();
+});
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/frontend/new-web/src/views/module_task/workflow/types.ts b/frontend/new-web/src/views/module_task/workflow/types.ts
new file mode 100644
index 00000000..1330c3c0
--- /dev/null
+++ b/frontend/new-web/src/views/module_task/workflow/types.ts
@@ -0,0 +1,162 @@
+import type { CSSProperties } from "vue";
+
+export type NodeType =
+  | "input"
+  | "output"
+  | "trigger"
+  | "action"
+  | "condition"
+  | "control"
+  | "integration"
+  | "custom";
+
+export type EdgeType = "default" | "straight" | "step" | "smoothstep" | "bezier";
+
+export type HandlePosition = "left" | "right" | "top" | "bottom";
+
+export interface NodeConfigSchema {
+  type: string;
+  properties: Record<string, PropertySchema>;
+}
+
+export interface PropertySchema {
+  type: "string" | "number" | "boolean" | "select" | "textarea" | "json" | "code";
+  label: string;
+  description?: string;
+  default?: any;
+  required?: boolean;
+  options?: Array<{ label: string; value: any }>;
+  placeholder?: string;
+  validation?: {
+    min?: number;
+    max?: number;
+    pattern?: string;
+  };
+}
+
+export interface DynamicNodeData {
+  label: string;
+  nodeTypeCode: string;
+  config: Record<string, any>;
+  description?: string;
+}
+
+export interface Node {
+  id: string;
+  position: { x: number; y: number };
+  type?: NodeType;
+  data?: DynamicNodeData;
+  label?: string;
+  style?: CSSProperties;
+  class?: string | string[];
+  sourcePosition?: HandlePosition;
+  targetPosition?: HandlePosition;
+  hidden?: boolean;
+  selected?: boolean;
+  draggable?: boolean;
+  connectable?: boolean;
+  deletable?: boolean;
+  selectable?: boolean;
+  focusable?: boolean;
+  dragHandle?: string;
+  extent?: "parent" | [number, number] | [[number, number], [number, number]];
+  parentNode?: string;
+  expandParent?: boolean;
+  zIndex?: number;
+}
+
+export interface Edge {
+  id?: string;
+  source: string;
+  target: string;
+  sourceHandle?: string;
+  targetHandle?: string;
+  type?: EdgeType;
+  label?: string;
+  labelStyle?: CSSProperties;
+  labelShowBg?: boolean;
+  labelBgStyle?: CSSProperties;
+  labelBgPadding?: [number, number];
+  labelBgBorderRadius?: number;
+  style?: CSSProperties;
+  class?: string | string[];
+  animated?: boolean;
+  hidden?: boolean;
+  selected?: boolean;
+  deletable?: boolean;
+  selectable?: boolean;
+  focusable?: boolean;
+  updatable?: boolean | "source" | "target";
+  markerStart?: Marker | string;
+  markerEnd?: Marker | string;
+  pathOptions?: {
+    offset?: number;
+    borderRadius?: number;
+    curvature?: number;
+  };
+  interactionWidth?: number;
+}
+
+export interface Marker {
+  type: "arrow" | "arrowclosed";
+  color?: string;
+  width?: number;
+  height?: number;
+  orient?: "auto" | "auto-start-reverse";
+}
+
+export interface WorkflowTemplate {
+  id: string;
+  name: string;
+  description?: string;
+  nodes: Node[];
+  edges: Edge[];
+}
+
+export interface WorkflowStats {
+  totalNodes: number;
+  totalEdges: number;
+  nodeTypes: Record<NodeType, number>;
+}
+
+export interface NodeConfig {
+  id: string;
+  type: NodeType;
+  data: DynamicNodeData;
+}
+
+export interface EdgeConfig {
+  id: string;
+  source: string;
+  target: string;
+  label?: string;
+  type?: EdgeType;
+  animated?: boolean;
+}
+
+export interface NodeTypeDefinition {
+  code: string;
+  name: string;
+  category: "trigger" | "action" | "condition" | "control" | "integration" | "custom";
+  description?: string;
+  icon?: string;
+  color?: string;
+  configSchema: NodeConfigSchema;
+  inputSchema?: Record<string, any>;
+  outputSchema?: Record<string, any>;
+  handler: string;
+  isSystem: boolean;
+  isActive: boolean;
+  sortOrder: number;
+}
+
+export interface NodeTemplate {
+  id: string;
+  nodeTypeCode: string;
+  name: string;
+  description?: string;
+  defaultConfig: Record<string, any>;
+  isPublic: boolean;
+  tags?: string[];
+  thumbnail?: string;
+}
diff --git a/frontend/new-web/src/views/nested/router-view-parent/index.vue b/frontend/new-web/src/views/nested/router-view-parent/index.vue
new file mode 100644
index 00000000..0b890725
--- /dev/null
+++ b/frontend/new-web/src/views/nested/router-view-parent/index.vue
@@ -0,0 +1,7 @@
+<template>
+  <RouterView />
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: "NestedRouterParent" });
+</script>
diff --git a/frontend/new-web/src/views/outside/Iframe.vue b/frontend/new-web/src/views/outside/Iframe.vue
index 33ea0dc9..7c4e24f7 100644
--- a/frontend/new-web/src/views/outside/Iframe.vue
+++ b/frontend/new-web/src/views/outside/Iframe.vue
@@ -11,32 +11,32 @@
 </template>
 
 <script setup lang="ts">
-  import { IframeRouteManager } from '@/router/core'
+import { IframeRouteManager } from "@/router/core";
 
-  defineOptions({ name: 'IframeView' })
+defineOptions({ name: "IframeView" });
 
-  const route = useRoute()
-  const isLoading = ref(true)
-  const iframeUrl = ref('')
-  const iframeRef = ref<HTMLIFrameElement | null>(null)
+const route = useRoute();
+const isLoading = ref(true);
+const iframeUrl = ref("");
+const iframeRef = ref<HTMLIFrameElement | null>(null);
 
-  /**
-   * 初始化 iframe URL
-   * 从路由配置中获取对应的外部链接地址
-   */
-  onMounted(() => {
-    const iframeRoute = IframeRouteManager.getInstance().findByPath(route.path)
+/**
+ * 初始化 iframe URL
+ * 从路由配置中获取对应的外部链接地址
+ */
+onMounted(() => {
+  const iframeRoute = IframeRouteManager.getInstance().findByPath(route.path);
 
-    if (iframeRoute?.meta) {
-      iframeUrl.value = iframeRoute.meta.link || ''
-    }
-  })
-
-  /**
-   * 处理 iframe 加载完成事件
-   * 隐藏加载状态
-   */
-  const handleIframeLoad = (): void => {
-    isLoading.value = false
+  if (iframeRoute?.meta) {
+    iframeUrl.value = iframeRoute.meta.link || "";
   }
+});
+
+/**
+ * 处理 iframe 加载完成事件
+ * 隐藏加载状态
+ */
+const handleIframeLoad = (): void => {
+  isLoading.value = false;
+};
 </script>
diff --git a/frontend/new-web/src/views/redirect/index.vue b/frontend/new-web/src/views/redirect/index.vue
new file mode 100644
index 00000000..2b613861
--- /dev/null
+++ b/frontend/new-web/src/views/redirect/index.vue
@@ -0,0 +1,15 @@
+<template>
+  <div />
+</template>
+
+<script setup lang="ts">
+import { useRoute, useRouter } from "vue-router";
+
+const route = useRoute();
+const router = useRouter();
+
+const { params, query } = route;
+const { path } = params;
+
+router.replace({ path: "/" + path, query });
+</script>
diff --git a/frontend/new-web/src/views/result/fail/index.vue b/frontend/new-web/src/views/result/fail/index.vue
index 8fe2583c..5178afcb 100755
--- a/frontend/new-web/src/views/result/fail/index.vue
+++ b/frontend/new-web/src/views/result/fail/index.vue
@@ -24,5 +24,5 @@
 </template>
 
 <script setup lang="ts">
-  defineOptions({ name: 'ResultFail' })
+defineOptions({ name: "ResultFail" });
 </script>
diff --git a/frontend/new-web/src/views/result/success/index.vue b/frontend/new-web/src/views/result/success/index.vue
index ae57aba3..95ad6399 100755
--- a/frontend/new-web/src/views/result/success/index.vue
+++ b/frontend/new-web/src/views/result/success/index.vue
@@ -17,5 +17,5 @@
 </template>
 
 <script setup lang="ts">
-  defineOptions({ name: 'ResultSuccess' })
+defineOptions({ name: "ResultSuccess" });
 </script>
diff --git a/frontend/new-web/src/views/safeguard/server/index.vue b/frontend/new-web/src/views/safeguard/server/index.vue
index 368ac274..2f857795 100755
--- a/frontend/new-web/src/views/safeguard/server/index.vue
+++ b/frontend/new-web/src/views/safeguard/server/index.vue
@@ -70,99 +70,99 @@
 </template>
 
 <script setup lang="ts">
-  defineOptions({ name: 'SafeguardServer' })
+defineOptions({ name: "SafeguardServer" });
 
-  interface ServerInfo {
-    name: string
-    ip: string
-    cup: number
-    memory: number
-    swap: number
-    disk: number
+interface ServerInfo {
+  name: string;
+  ip: string;
+  cup: number;
+  memory: number;
+  swap: number;
+  disk: number;
+}
+
+const UPDATE_INTERVAL = 3000; // 更新间隔时间（毫秒）
+
+/**
+ * 服务器列表数据
+ * 包含各服务器的基本信息和资源使用情况
+ */
+const serverList = reactive<ServerInfo[]>([
+  {
+    name: "开发服务器",
+    ip: "192.168.1.100",
+    cup: 85,
+    memory: 65,
+    swap: 45,
+    disk: 92,
+  },
+  {
+    name: "测试服务器",
+    ip: "192.168.1.101",
+    cup: 32,
+    memory: 78,
+    swap: 90,
+    disk: 45,
+  },
+  {
+    name: "预发布服务器",
+    ip: "192.168.1.102",
+    cup: 95,
+    memory: 42,
+    swap: 67,
+    disk: 88,
+  },
+  {
+    name: "线上服务器",
+    ip: "192.168.1.103",
+    cup: 58,
+    memory: 93,
+    swap: 25,
+    disk: 73,
+  },
+]);
+
+/**
+ * 生成指定范围内的随机整数
+ * @param min 最小值（默认 0）
+ * @param max 最大值（默认 100）
+ * @returns 随机整数
+ */
+const generateRandomValue = (min = 0, max = 100): number => {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+};
+
+/**
+ * 更新所有服务器的资源使用数据
+ * 模拟服务器资源使用情况的实时变化
+ */
+const updateServerData = (): void => {
+  serverList.forEach((server) => {
+    server.cup = generateRandomValue();
+    server.memory = generateRandomValue();
+    server.swap = generateRandomValue();
+    server.disk = generateRandomValue();
+  });
+};
+
+let timer: number | null = null;
+
+/**
+ * 组件挂载时启动定时器
+ * 每隔指定时间自动更新服务器数据
+ */
+onMounted(() => {
+  timer = window.setInterval(updateServerData, UPDATE_INTERVAL);
+});
+
+/**
+ * 组件卸载时清理定时器
+ * 防止内存泄漏
+ */
+onUnmounted(() => {
+  if (timer !== null) {
+    window.clearInterval(timer);
+    timer = null;
   }
-
-  const UPDATE_INTERVAL = 3000 // 更新间隔时间（毫秒）
-
-  /**
-   * 服务器列表数据
-   * 包含各服务器的基本信息和资源使用情况
-   */
-  const serverList = reactive<ServerInfo[]>([
-    {
-      name: '开发服务器',
-      ip: '192.168.1.100',
-      cup: 85,
-      memory: 65,
-      swap: 45,
-      disk: 92
-    },
-    {
-      name: '测试服务器',
-      ip: '192.168.1.101',
-      cup: 32,
-      memory: 78,
-      swap: 90,
-      disk: 45
-    },
-    {
-      name: '预发布服务器',
-      ip: '192.168.1.102',
-      cup: 95,
-      memory: 42,
-      swap: 67,
-      disk: 88
-    },
-    {
-      name: '线上服务器',
-      ip: '192.168.1.103',
-      cup: 58,
-      memory: 93,
-      swap: 25,
-      disk: 73
-    }
-  ])
-
-  /**
-   * 生成指定范围内的随机整数
-   * @param min 最小值（默认 0）
-   * @param max 最大值（默认 100）
-   * @returns 随机整数
-   */
-  const generateRandomValue = (min = 0, max = 100): number => {
-    return Math.floor(Math.random() * (max - min + 1)) + min
-  }
-
-  /**
-   * 更新所有服务器的资源使用数据
-   * 模拟服务器资源使用情况的实时变化
-   */
-  const updateServerData = (): void => {
-    serverList.forEach((server) => {
-      server.cup = generateRandomValue()
-      server.memory = generateRandomValue()
-      server.swap = generateRandomValue()
-      server.disk = generateRandomValue()
-    })
-  }
-
-  let timer: number | null = null
-
-  /**
-   * 组件挂载时启动定时器
-   * 每隔指定时间自动更新服务器数据
-   */
-  onMounted(() => {
-    timer = window.setInterval(updateServerData, UPDATE_INTERVAL)
-  })
-
-  /**
-   * 组件卸载时清理定时器
-   * 防止内存泄漏
-   */
-  onUnmounted(() => {
-    if (timer !== null) {
-      window.clearInterval(timer)
-      timer = null
-    }
-  })
+});
 </script>
diff --git a/frontend/new-web/src/views/system/menu/index.vue b/frontend/new-web/src/views/system/menu/index.vue
index b88ea0cd..707b224f 100644
--- a/frontend/new-web/src/views/system/menu/index.vue
+++ b/frontend/new-web/src/views/system/menu/index.vue
@@ -19,9 +19,9 @@
         @refresh="handleRefresh"
       >
         <template #left>
-          <ElButton v-auth="'add'" @click="handleAddMenu" v-ripple> 添加菜单 </ElButton>
+          <ElButton v-auth="'add'" @click="handleAddMenu" v-ripple>添加菜单</ElButton>
           <ElButton @click="toggleExpand" v-ripple>
-            {{ isExpanded ? '收起' : '展开' }}
+            {{ isExpanded ? "收起" : "展开" }}
           </ElButton>
         </template>
       </ArtTableHeader>
@@ -50,430 +50,430 @@
 </template>
 
 <script setup lang="ts">
-  import { formatMenuTitle } from '@/utils/router'
-  import ArtButtonTable from '@/components/core/forms/art-button-table/index.vue'
-  import { useTableColumns } from '@/hooks/core/useTableColumns'
-  import type { AppRouteRecord } from '@/types/router'
-  import MenuDialog from './modules/menu-dialog.vue'
-  import { fetchGetMenuList } from '@/api/system-manage'
-  import { ElTag, ElMessageBox } from 'element-plus'
+import { formatMenuTitle } from "@/utils/navigation/router";
+import ArtButtonTable from "@/components/core/forms/art-button-table/index.vue";
+import { useTableColumns } from "@/hooks/core/useTableColumns";
+import type { AppRouteRecord } from "@/types/router";
+import MenuDialog from "./modules/menu-dialog.vue";
+import { fetchGetMenuList } from "@/api/system-manage";
+import { ElTag, ElMessageBox } from "element-plus";
 
-  defineOptions({ name: 'Menus' })
+defineOptions({ name: "Menus" });
 
-  // 状态管理
-  const loading = ref(false)
-  const isExpanded = ref(false)
-  const tableRef = ref()
+// 状态管理
+const loading = ref(false);
+const isExpanded = ref(false);
+const tableRef = ref();
 
-  // 弹窗相关
-  const dialogVisible = ref(false)
-  const dialogType = ref<'menu' | 'button'>('menu')
-  const editData = ref<AppRouteRecord | any>(null)
-  const lockMenuType = ref(false)
+// 弹窗相关
+const dialogVisible = ref(false);
+const dialogType = ref<"menu" | "button">("menu");
+const editData = ref<AppRouteRecord | any>(null);
+const lockMenuType = ref(false);
 
-  // 搜索相关
-  const initialSearchState = {
-    name: '',
-    route: ''
+// 搜索相关
+const initialSearchState = {
+  name: "",
+  route: "",
+};
+
+const formFilters = reactive({ ...initialSearchState });
+const appliedFilters = reactive({ ...initialSearchState });
+
+const formItems = computed(() => [
+  {
+    label: "菜单名称",
+    key: "name",
+    type: "input",
+    props: { clearable: true },
+  },
+  {
+    label: "路由地址",
+    key: "route",
+    type: "input",
+    props: { clearable: true },
+  },
+]);
+
+onMounted(() => {
+  getMenuList();
+});
+
+/**
+ * 获取菜单列表数据
+ */
+const getMenuList = async (): Promise<void> => {
+  loading.value = true;
+
+  try {
+    const list = await fetchGetMenuList();
+    tableData.value = list;
+  } catch (error) {
+    throw error instanceof Error ? error : new Error("获取菜单失败");
+  } finally {
+    loading.value = false;
   }
+};
 
-  const formFilters = reactive({ ...initialSearchState })
-  const appliedFilters = reactive({ ...initialSearchState })
+/**
+ * 获取菜单类型标签颜色
+ * @param row 菜单行数据
+ * @returns 标签颜色类型
+ */
+const getMenuTypeTag = (
+  row: AppRouteRecord
+): "primary" | "success" | "warning" | "info" | "danger" => {
+  if (row.meta?.isAuthButton) return "danger";
+  if (row.children?.length) return "info";
+  if (row.meta?.link && row.meta?.isIframe) return "success";
+  if (row.path) return "primary";
+  if (row.meta?.link) return "warning";
+  return "info";
+};
 
-  const formItems = computed(() => [
-    {
-      label: '菜单名称',
-      key: 'name',
-      type: 'input',
-      props: { clearable: true }
+/**
+ * 获取菜单类型文本
+ * @param row 菜单行数据
+ * @returns 菜单类型文本
+ */
+const getMenuTypeText = (row: AppRouteRecord): string => {
+  if (row.meta?.isAuthButton) return "按钮";
+  if (row.children?.length) return "目录";
+  if (row.meta?.link && row.meta?.isIframe) return "内嵌";
+  if (row.path) return "菜单";
+  if (row.meta?.link) return "外链";
+  return "未知";
+};
+
+// 表格列配置
+const { columnChecks, columns } = useTableColumns(() => [
+  {
+    prop: "meta.title",
+    label: "菜单名称",
+    minWidth: 120,
+    formatter: (row: AppRouteRecord) => formatMenuTitle(row.meta?.title),
+  },
+  {
+    prop: "type",
+    label: "菜单类型",
+    formatter: (row: AppRouteRecord) => {
+      return h(ElTag, { type: getMenuTypeTag(row) }, () => getMenuTypeText(row));
     },
-    {
-      label: '路由地址',
-      key: 'route',
-      type: 'input',
-      props: { clearable: true }
-    }
-  ])
-
-  onMounted(() => {
-    getMenuList()
-  })
-
-  /**
-   * 获取菜单列表数据
-   */
-  const getMenuList = async (): Promise<void> => {
-    loading.value = true
-
-    try {
-      const list = await fetchGetMenuList()
-      tableData.value = list
-    } catch (error) {
-      throw error instanceof Error ? error : new Error('获取菜单失败')
-    } finally {
-      loading.value = false
-    }
-  }
-
-  /**
-   * 获取菜单类型标签颜色
-   * @param row 菜单行数据
-   * @returns 标签颜色类型
-   */
-  const getMenuTypeTag = (
-    row: AppRouteRecord
-  ): 'primary' | 'success' | 'warning' | 'info' | 'danger' => {
-    if (row.meta?.isAuthButton) return 'danger'
-    if (row.children?.length) return 'info'
-    if (row.meta?.link && row.meta?.isIframe) return 'success'
-    if (row.path) return 'primary'
-    if (row.meta?.link) return 'warning'
-    return 'info'
-  }
-
-  /**
-   * 获取菜单类型文本
-   * @param row 菜单行数据
-   * @returns 菜单类型文本
-   */
-  const getMenuTypeText = (row: AppRouteRecord): string => {
-    if (row.meta?.isAuthButton) return '按钮'
-    if (row.children?.length) return '目录'
-    if (row.meta?.link && row.meta?.isIframe) return '内嵌'
-    if (row.path) return '菜单'
-    if (row.meta?.link) return '外链'
-    return '未知'
-  }
-
-  // 表格列配置
-  const { columnChecks, columns } = useTableColumns(() => [
-    {
-      prop: 'meta.title',
-      label: '菜单名称',
-      minWidth: 120,
-      formatter: (row: AppRouteRecord) => formatMenuTitle(row.meta?.title)
+  },
+  {
+    prop: "path",
+    label: "路由",
+    formatter: (row: AppRouteRecord) => {
+      if (row.meta?.isAuthButton) return "";
+      return row.meta?.link || row.path || "";
     },
-    {
-      prop: 'type',
-      label: '菜单类型',
-      formatter: (row: AppRouteRecord) => {
-        return h(ElTag, { type: getMenuTypeTag(row) }, () => getMenuTypeText(row))
+  },
+  {
+    prop: "meta.authList",
+    label: "权限标识",
+    formatter: (row: AppRouteRecord) => {
+      if (row.meta?.isAuthButton) {
+        return row.meta?.authMark || "";
       }
+      if (!row.meta?.authList?.length) return "";
+      return `${row.meta.authList.length} 个权限标识`;
     },
-    {
-      prop: 'path',
-      label: '路由',
-      formatter: (row: AppRouteRecord) => {
-        if (row.meta?.isAuthButton) return ''
-        return row.meta?.link || row.path || ''
-      }
-    },
-    {
-      prop: 'meta.authList',
-      label: '权限标识',
-      formatter: (row: AppRouteRecord) => {
-        if (row.meta?.isAuthButton) {
-          return row.meta?.authMark || ''
-        }
-        if (!row.meta?.authList?.length) return ''
-        return `${row.meta.authList.length} 个权限标识`
-      }
-    },
-    {
-      prop: 'date',
-      label: '编辑时间',
-      formatter: () => '2022-3-12 12:00:00'
-    },
-    {
-      prop: 'status',
-      label: '状态',
-      formatter: () => h(ElTag, { type: 'success' }, () => '启用')
-    },
-    {
-      prop: 'operation',
-      label: '操作',
-      width: 180,
-      align: 'right',
-      formatter: (row: AppRouteRecord) => {
-        const buttonStyle = { style: 'text-align: right' }
+  },
+  {
+    prop: "date",
+    label: "编辑时间",
+    formatter: () => "2022-3-12 12:00:00",
+  },
+  {
+    prop: "status",
+    label: "状态",
+    formatter: () => h(ElTag, { type: "success" }, () => "启用"),
+  },
+  {
+    prop: "operation",
+    label: "操作",
+    width: 180,
+    align: "right",
+    formatter: (row: AppRouteRecord) => {
+      const buttonStyle = { style: "text-align: right" };
 
-        if (row.meta?.isAuthButton) {
-          return h('div', buttonStyle, [
-            h(ArtButtonTable, {
-              type: 'edit',
-              onClick: () => handleEditAuth(row)
-            }),
-            h(ArtButtonTable, {
-              type: 'delete',
-              onClick: () => handleDeleteAuth()
-            })
-          ])
-        }
-
-        return h('div', buttonStyle, [
+      if (row.meta?.isAuthButton) {
+        return h("div", buttonStyle, [
           h(ArtButtonTable, {
-            type: 'add',
-            onClick: () => handleAddAuth(),
-            title: '新增权限'
+            type: "edit",
+            onClick: () => handleEditAuth(row),
           }),
           h(ArtButtonTable, {
-            type: 'edit',
-            onClick: () => handleEditMenu(row)
+            type: "delete",
+            onClick: () => handleDeleteAuth(),
           }),
-          h(ArtButtonTable, {
-            type: 'delete',
-            onClick: () => handleDeleteMenu()
-          })
-        ])
+        ]);
       }
+
+      return h("div", buttonStyle, [
+        h(ArtButtonTable, {
+          type: "add",
+          onClick: () => handleAddAuth(),
+          title: "新增权限",
+        }),
+        h(ArtButtonTable, {
+          type: "edit",
+          onClick: () => handleEditMenu(row),
+        }),
+        h(ArtButtonTable, {
+          type: "delete",
+          onClick: () => handleDeleteMenu(),
+        }),
+      ]);
+    },
+  },
+]);
+
+// 数据相关
+const tableData = ref<AppRouteRecord[]>([]);
+
+/**
+ * 重置搜索条件
+ */
+const handleReset = (): void => {
+  Object.assign(formFilters, { ...initialSearchState });
+  Object.assign(appliedFilters, { ...initialSearchState });
+  getMenuList();
+};
+
+/**
+ * 执行搜索
+ */
+const handleSearch = (): void => {
+  Object.assign(appliedFilters, { ...formFilters });
+  getMenuList();
+};
+
+/**
+ * 刷新菜单列表
+ */
+const handleRefresh = (): void => {
+  getMenuList();
+};
+
+/**
+ * 深度克隆对象
+ * @param obj 要克隆的对象
+ * @returns 克隆后的对象
+ */
+const deepClone = <T,>(obj: T): T => {
+  if (obj === null || typeof obj !== "object") return obj;
+  if (obj instanceof Date) return new Date(obj) as T;
+  if (Array.isArray(obj)) return obj.map((item) => deepClone(item)) as T;
+
+  const cloned = {} as T;
+  for (const key in obj) {
+    if (Object.prototype.hasOwnProperty.call(obj, key)) {
+      cloned[key] = deepClone(obj[key]);
     }
-  ])
-
-  // 数据相关
-  const tableData = ref<AppRouteRecord[]>([])
-
-  /**
-   * 重置搜索条件
-   */
-  const handleReset = (): void => {
-    Object.assign(formFilters, { ...initialSearchState })
-    Object.assign(appliedFilters, { ...initialSearchState })
-    getMenuList()
   }
+  return cloned;
+};
 
-  /**
-   * 执行搜索
-   */
-  const handleSearch = (): void => {
-    Object.assign(appliedFilters, { ...formFilters })
-    getMenuList()
-  }
+/**
+ * 将权限列表转换为子节点
+ * @param items 菜单项数组
+ * @returns 转换后的菜单项数组
+ */
+const convertAuthListToChildren = (items: AppRouteRecord[]): AppRouteRecord[] => {
+  return items.map((item) => {
+    const clonedItem = deepClone(item);
 
-  /**
-   * 刷新菜单列表
-   */
-  const handleRefresh = (): void => {
-    getMenuList()
-  }
-
-  /**
-   * 深度克隆对象
-   * @param obj 要克隆的对象
-   * @returns 克隆后的对象
-   */
-  const deepClone = <T,>(obj: T): T => {
-    if (obj === null || typeof obj !== 'object') return obj
-    if (obj instanceof Date) return new Date(obj) as T
-    if (Array.isArray(obj)) return obj.map((item) => deepClone(item)) as T
-
-    const cloned = {} as T
-    for (const key in obj) {
-      if (Object.prototype.hasOwnProperty.call(obj, key)) {
-        cloned[key] = deepClone(obj[key])
-      }
+    if (clonedItem.children?.length) {
+      clonedItem.children = convertAuthListToChildren(clonedItem.children);
     }
-    return cloned
-  }
 
-  /**
-   * 将权限列表转换为子节点
-   * @param items 菜单项数组
-   * @returns 转换后的菜单项数组
-   */
-  const convertAuthListToChildren = (items: AppRouteRecord[]): AppRouteRecord[] => {
-    return items.map((item) => {
-      const clonedItem = deepClone(item)
+    if (item.meta?.authList?.length) {
+      const authChildren: AppRouteRecord[] = item.meta.authList.map(
+        (auth: { title: string; authMark: string }) => ({
+          path: `${item.path}_auth_${auth.authMark}`,
+          name: `${String(item.name)}_auth_${auth.authMark}`,
+          meta: {
+            title: auth.title,
+            authMark: auth.authMark,
+            isAuthButton: true,
+            parentPath: item.path,
+          },
+        })
+      );
 
-      if (clonedItem.children?.length) {
-        clonedItem.children = convertAuthListToChildren(clonedItem.children)
-      }
+      clonedItem.children = clonedItem.children?.length
+        ? [...clonedItem.children, ...authChildren]
+        : authChildren;
+    }
 
-      if (item.meta?.authList?.length) {
-        const authChildren: AppRouteRecord[] = item.meta.authList.map(
-          (auth: { title: string; authMark: string }) => ({
-            path: `${item.path}_auth_${auth.authMark}`,
-            name: `${String(item.name)}_auth_${auth.authMark}`,
-            meta: {
-              title: auth.title,
-              authMark: auth.authMark,
-              isAuthButton: true,
-              parentPath: item.path
-            }
-          })
-        )
+    return clonedItem;
+  });
+};
 
-        clonedItem.children = clonedItem.children?.length
-          ? [...clonedItem.children, ...authChildren]
-          : authChildren
-      }
+/**
+ * 搜索菜单
+ * @param items 菜单项数组
+ * @returns 搜索结果数组
+ */
+const searchMenu = (items: AppRouteRecord[]): AppRouteRecord[] => {
+  const results: AppRouteRecord[] = [];
 
-      return clonedItem
-    })
-  }
+  for (const item of items) {
+    const searchName = appliedFilters.name?.toLowerCase().trim() || "";
+    const searchRoute = appliedFilters.route?.toLowerCase().trim() || "";
+    const menuTitle = formatMenuTitle(item.meta?.title || "").toLowerCase();
+    const menuPath = (item.path || "").toLowerCase();
+    const nameMatch = !searchName || menuTitle.includes(searchName);
+    const routeMatch = !searchRoute || menuPath.includes(searchRoute);
 
-  /**
-   * 搜索菜单
-   * @param items 菜单项数组
-   * @returns 搜索结果数组
-   */
-  const searchMenu = (items: AppRouteRecord[]): AppRouteRecord[] => {
-    const results: AppRouteRecord[] = []
-
-    for (const item of items) {
-      const searchName = appliedFilters.name?.toLowerCase().trim() || ''
-      const searchRoute = appliedFilters.route?.toLowerCase().trim() || ''
-      const menuTitle = formatMenuTitle(item.meta?.title || '').toLowerCase()
-      const menuPath = (item.path || '').toLowerCase()
-      const nameMatch = !searchName || menuTitle.includes(searchName)
-      const routeMatch = !searchRoute || menuPath.includes(searchRoute)
-
-      if (item.children?.length) {
-        const matchedChildren = searchMenu(item.children)
-        if (matchedChildren.length > 0) {
-          const clonedItem = deepClone(item)
-          clonedItem.children = matchedChildren
-          results.push(clonedItem)
-          continue
-        }
-      }
-
-      if (nameMatch && routeMatch) {
-        results.push(deepClone(item))
+    if (item.children?.length) {
+      const matchedChildren = searchMenu(item.children);
+      if (matchedChildren.length > 0) {
+        const clonedItem = deepClone(item);
+        clonedItem.children = matchedChildren;
+        results.push(clonedItem);
+        continue;
       }
     }
 
-    return results
-  }
-
-  // 过滤后的表格数据
-  const filteredTableData = computed(() => {
-    const searchedData = searchMenu(tableData.value)
-    return convertAuthListToChildren(searchedData)
-  })
-
-  /**
-   * 添加菜单
-   */
-  const handleAddMenu = (): void => {
-    dialogType.value = 'menu'
-    editData.value = null
-    lockMenuType.value = true
-    dialogVisible.value = true
-  }
-
-  /**
-   * 添加权限按钮
-   */
-  const handleAddAuth = (): void => {
-    dialogType.value = 'menu'
-    editData.value = null
-    lockMenuType.value = false
-    dialogVisible.value = true
-  }
-
-  /**
-   * 编辑菜单
-   * @param row 菜单行数据
-   */
-  const handleEditMenu = (row: AppRouteRecord): void => {
-    dialogType.value = 'menu'
-    editData.value = row
-    lockMenuType.value = true
-    dialogVisible.value = true
-  }
-
-  /**
-   * 编辑权限按钮
-   * @param row 权限行数据
-   */
-  const handleEditAuth = (row: AppRouteRecord): void => {
-    dialogType.value = 'button'
-    editData.value = {
-      title: row.meta?.title,
-      authMark: row.meta?.authMark
-    }
-    lockMenuType.value = false
-    dialogVisible.value = true
-  }
-
-  /**
-   * 菜单表单数据类型
-   */
-  interface MenuFormData {
-    name: string
-    path: string
-    component?: string
-    icon?: string
-    roles?: string[]
-    sort?: number
-    [key: string]: any
-  }
-
-  /**
-   * 提交表单数据
-   * @param formData 表单数据
-   */
-  const handleSubmit = (formData: MenuFormData): void => {
-    console.log('提交数据:', formData)
-    // TODO: 调用API保存数据
-    getMenuList()
-  }
-
-  /**
-   * 删除菜单
-   */
-  const handleDeleteMenu = async (): Promise<void> => {
-    try {
-      await ElMessageBox.confirm('确定要删除该菜单吗？删除后无法恢复', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      })
-      ElMessage.success('删除成功')
-      getMenuList()
-    } catch (error) {
-      if (error !== 'cancel') {
-        ElMessage.error('删除失败')
-      }
+    if (nameMatch && routeMatch) {
+      results.push(deepClone(item));
     }
   }
 
-  /**
-   * 删除权限按钮
-   */
-  const handleDeleteAuth = async (): Promise<void> => {
-    try {
-      await ElMessageBox.confirm('确定要删除该权限吗？删除后无法恢复', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      })
-      ElMessage.success('删除成功')
-      getMenuList()
-    } catch (error) {
-      if (error !== 'cancel') {
-        ElMessage.error('删除失败')
-      }
+  return results;
+};
+
+// 过滤后的表格数据
+const filteredTableData = computed(() => {
+  const searchedData = searchMenu(tableData.value);
+  return convertAuthListToChildren(searchedData);
+});
+
+/**
+ * 添加菜单
+ */
+const handleAddMenu = (): void => {
+  dialogType.value = "menu";
+  editData.value = null;
+  lockMenuType.value = true;
+  dialogVisible.value = true;
+};
+
+/**
+ * 添加权限按钮
+ */
+const handleAddAuth = (): void => {
+  dialogType.value = "menu";
+  editData.value = null;
+  lockMenuType.value = false;
+  dialogVisible.value = true;
+};
+
+/**
+ * 编辑菜单
+ * @param row 菜单行数据
+ */
+const handleEditMenu = (row: AppRouteRecord): void => {
+  dialogType.value = "menu";
+  editData.value = row;
+  lockMenuType.value = true;
+  dialogVisible.value = true;
+};
+
+/**
+ * 编辑权限按钮
+ * @param row 权限行数据
+ */
+const handleEditAuth = (row: AppRouteRecord): void => {
+  dialogType.value = "button";
+  editData.value = {
+    title: row.meta?.title,
+    authMark: row.meta?.authMark,
+  };
+  lockMenuType.value = false;
+  dialogVisible.value = true;
+};
+
+/**
+ * 菜单表单数据类型
+ */
+interface MenuFormData {
+  name: string;
+  path: string;
+  component?: string;
+  icon?: string;
+  roles?: string[];
+  sort?: number;
+  [key: string]: any;
+}
+
+/**
+ * 提交表单数据
+ * @param formData 表单数据
+ */
+const handleSubmit = (formData: MenuFormData): void => {
+  console.log("提交数据:", formData);
+  // TODO: 调用API保存数据
+  getMenuList();
+};
+
+/**
+ * 删除菜单
+ */
+const handleDeleteMenu = async (): Promise<void> => {
+  try {
+    await ElMessageBox.confirm("确定要删除该菜单吗？删除后无法恢复", "提示", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    });
+    ElMessage.success("删除成功");
+    getMenuList();
+  } catch (error) {
+    if (error !== "cancel") {
+      ElMessage.error("删除失败");
     }
   }
+};
 
-  /**
-   * 切换展开/收起所有菜单
-   */
-  const toggleExpand = (): void => {
-    isExpanded.value = !isExpanded.value
-    nextTick(() => {
-      if (tableRef.value?.elTableRef && filteredTableData.value) {
-        const processRows = (rows: AppRouteRecord[]) => {
-          rows.forEach((row) => {
-            if (row.children?.length) {
-              tableRef.value.elTableRef.toggleRowExpansion(row, isExpanded.value)
-              processRows(row.children)
-            }
-          })
-        }
-        processRows(filteredTableData.value)
-      }
-    })
+/**
+ * 删除权限按钮
+ */
+const handleDeleteAuth = async (): Promise<void> => {
+  try {
+    await ElMessageBox.confirm("确定要删除该权限吗？删除后无法恢复", "提示", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    });
+    ElMessage.success("删除成功");
+    getMenuList();
+  } catch (error) {
+    if (error !== "cancel") {
+      ElMessage.error("删除失败");
+    }
   }
+};
+
+/**
+ * 切换展开/收起所有菜单
+ */
+const toggleExpand = (): void => {
+  isExpanded.value = !isExpanded.value;
+  nextTick(() => {
+    if (tableRef.value?.elTableRef && filteredTableData.value) {
+      const processRows = (rows: AppRouteRecord[]) => {
+        rows.forEach((row) => {
+          if (row.children?.length) {
+            tableRef.value.elTableRef.toggleRowExpansion(row, isExpanded.value);
+            processRows(row.children);
+          }
+        });
+      };
+      processRows(filteredTableData.value);
+    }
+  });
+};
 </script>
diff --git a/frontend/new-web/src/views/system/menu/modules/menu-dialog.vue b/frontend/new-web/src/views/system/menu/modules/menu-dialog.vue
index f5123015..aa0d630b 100644
--- a/frontend/new-web/src/views/system/menu/modules/menu-dialog.vue
+++ b/frontend/new-web/src/views/system/menu/modules/menu-dialog.vue
@@ -37,348 +37,348 @@
 </template>
 
 <script setup lang="ts">
-  import type { FormRules } from 'element-plus'
-  import { ElIcon, ElTooltip } from 'element-plus'
-  import { QuestionFilled } from '@element-plus/icons-vue'
-  import { formatMenuTitle } from '@/utils/router'
-  import type { AppRouteRecord } from '@/types/router'
-  import type { FormItem } from '@/components/core/forms/art-form/index.vue'
-  import ArtForm from '@/components/core/forms/art-form/index.vue'
-  import { useWindowSize } from '@vueuse/core'
+import type { FormRules } from "element-plus";
+import { ElIcon, ElTooltip } from "element-plus";
+import { QuestionFilled } from "@element-plus/icons-vue";
+import { formatMenuTitle } from "@/utils/navigation/router";
+import type { AppRouteRecord } from "@/types/router";
+import type { FormItem } from "@/components/core/forms/art-form/index.vue";
+import ArtForm from "@/components/core/forms/art-form/index.vue";
+import { useWindowSize } from "@vueuse/core";
 
-  const { width } = useWindowSize()
+const { width } = useWindowSize();
 
-  /**
-   * 创建带 tooltip 的表单标签
-   * @param label 标签文本
-   * @param tooltip 提示文本
-   * @returns 渲染函数
-   */
-  const createLabelTooltip = (label: string, tooltip: string) => {
-    return () =>
-      h('span', { class: 'flex items-center' }, [
-        h('span', label),
-        h(
-          ElTooltip,
-          {
-            content: tooltip,
-            placement: 'top'
-          },
-          () => h(ElIcon, { class: 'ml-0.5 cursor-help' }, () => h(QuestionFilled))
-        )
-      ])
+/**
+ * 创建带 tooltip 的表单标签
+ * @param label 标签文本
+ * @param tooltip 提示文本
+ * @returns 渲染函数
+ */
+const createLabelTooltip = (label: string, tooltip: string) => {
+  return () =>
+    h("span", { class: "flex items-center" }, [
+      h("span", label),
+      h(
+        ElTooltip,
+        {
+          content: tooltip,
+          placement: "top",
+        },
+        () => h(ElIcon, { class: "ml-0.5 cursor-help" }, () => h(QuestionFilled))
+      ),
+    ]);
+};
+
+interface MenuFormData {
+  id: number;
+  name: string;
+  path: string;
+  label: string;
+  component: string;
+  icon: string;
+  isEnable: boolean;
+  sort: number;
+  isMenu: boolean;
+  keepAlive: boolean;
+  isHide: boolean;
+  isHideTab: boolean;
+  link: string;
+  isIframe: boolean;
+  showBadge: boolean;
+  showTextBadge: string;
+  fixedTab: boolean;
+  activePath: string;
+  roles: string[];
+  isFullPage: boolean;
+  authName: string;
+  authLabel: string;
+  authIcon: string;
+  authSort: number;
+}
+
+interface Props {
+  visible: boolean;
+  editData?: AppRouteRecord | any;
+  type?: "menu" | "button";
+  lockType?: boolean;
+}
+
+interface Emits {
+  (e: "update:visible", value: boolean): void;
+  (e: "submit", data: MenuFormData): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  visible: false,
+  type: "menu",
+  lockType: false,
+});
+
+const emit = defineEmits<Emits>();
+
+const formRef = ref();
+const isEdit = ref(false);
+
+const form = reactive<MenuFormData & { menuType: "menu" | "button" }>({
+  menuType: "menu",
+  id: 0,
+  name: "",
+  path: "",
+  label: "",
+  component: "",
+  icon: "",
+  isEnable: true,
+  sort: 1,
+  isMenu: true,
+  keepAlive: true,
+  isHide: false,
+  isHideTab: false,
+  link: "",
+  isIframe: false,
+  showBadge: false,
+  showTextBadge: "",
+  fixedTab: false,
+  activePath: "",
+  roles: [],
+  isFullPage: false,
+  authName: "",
+  authLabel: "",
+  authIcon: "",
+  authSort: 1,
+});
+
+const rules = reactive<FormRules>({
+  name: [
+    { required: true, message: "请输入菜单名称", trigger: "blur" },
+    { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" },
+  ],
+  path: [{ required: true, message: "请输入路由地址", trigger: "blur" }],
+  label: [{ required: true, message: "输入权限标识", trigger: "blur" }],
+  authName: [{ required: true, message: "请输入权限名称", trigger: "blur" }],
+  authLabel: [{ required: true, message: "请输入权限标识", trigger: "blur" }],
+});
+
+/**
+ * 表单项配置
+ */
+const formItems = computed<FormItem[]>(() => {
+  const baseItems: FormItem[] = [{ label: "菜单类型", key: "menuType", span: 24 }];
+
+  // Switch 组件的 span：小屏幕 12，大屏幕 6
+  const switchSpan = width.value < 640 ? 12 : 6;
+
+  if (form.menuType === "menu") {
+    return [
+      ...baseItems,
+      { label: "菜单名称", key: "name", type: "input", props: { placeholder: "菜单名称" } },
+      {
+        label: createLabelTooltip(
+          "路由地址",
+          "一级菜单：以 / 开头的绝对路径（如 /dashboard）\n二级及以下：相对路径（如 console、user）"
+        ),
+        key: "path",
+        type: "input",
+        props: { placeholder: "如：/dashboard 或 console" },
+      },
+      { label: "权限标识", key: "label", type: "input", props: { placeholder: "如：User" } },
+      {
+        label: createLabelTooltip(
+          "组件路径",
+          "一级父级菜单：填写 /index/index\n具体页面：填写组件路径（如 /system/user）\n目录菜单：留空"
+        ),
+        key: "component",
+        type: "input",
+        props: { placeholder: "如：/system/user 或留空" },
+      },
+      { label: "图标", key: "icon", type: "input", props: { placeholder: "如：ri:user-line" } },
+      {
+        label: createLabelTooltip(
+          "角色权限",
+          "仅用于前端权限模式：配置角色标识（如 R_SUPER、R_ADMIN）\n后端权限模式：无需配置"
+        ),
+        key: "roles",
+        type: "inputtag",
+        props: { placeholder: "输入角色标识后按回车，如：R_SUPER" },
+      },
+      {
+        label: "菜单排序",
+        key: "sort",
+        type: "number",
+        props: { min: 1, controlsPosition: "right", style: { width: "100%" } },
+      },
+      {
+        label: "外部链接",
+        key: "link",
+        type: "input",
+        props: { placeholder: "如：https://www.example.com" },
+      },
+      {
+        label: "文本徽章",
+        key: "showTextBadge",
+        type: "input",
+        props: { placeholder: "如：New、Hot" },
+      },
+      {
+        label: createLabelTooltip(
+          "激活路径",
+          '用于详情页等隐藏菜单，指定高亮显示的父级菜单路径\n例如：用户详情页高亮显示"用户管理"菜单'
+        ),
+        key: "activePath",
+        type: "input",
+        props: { placeholder: "如：/system/user" },
+      },
+      { label: "是否启用", key: "isEnable", type: "switch", span: switchSpan },
+      { label: "页面缓存", key: "keepAlive", type: "switch", span: switchSpan },
+      { label: "隐藏菜单", key: "isHide", type: "switch", span: switchSpan },
+      { label: "是否内嵌", key: "isIframe", type: "switch", span: switchSpan },
+      { label: "显示徽章", key: "showBadge", type: "switch", span: switchSpan },
+      { label: "固定标签", key: "fixedTab", type: "switch", span: switchSpan },
+      { label: "标签隐藏", key: "isHideTab", type: "switch", span: switchSpan },
+      { label: "全屏页面", key: "isFullPage", type: "switch", span: switchSpan },
+    ];
+  } else {
+    return [
+      ...baseItems,
+      {
+        label: "权限名称",
+        key: "authName",
+        type: "input",
+        props: { placeholder: "如：新增、编辑、删除" },
+      },
+      {
+        label: "权限标识",
+        key: "authLabel",
+        type: "input",
+        props: { placeholder: "如：add、edit、delete" },
+      },
+      {
+        label: "权限排序",
+        key: "authSort",
+        type: "number",
+        props: { min: 1, controlsPosition: "right", style: { width: "100%" } },
+      },
+    ];
   }
+});
 
-  interface MenuFormData {
-    id: number
-    name: string
-    path: string
-    label: string
-    component: string
-    icon: string
-    isEnable: boolean
-    sort: number
-    isMenu: boolean
-    keepAlive: boolean
-    isHide: boolean
-    isHideTab: boolean
-    link: string
-    isIframe: boolean
-    showBadge: boolean
-    showTextBadge: string
-    fixedTab: boolean
-    activePath: string
-    roles: string[]
-    isFullPage: boolean
-    authName: string
-    authLabel: string
-    authIcon: string
-    authSort: number
+const dialogTitle = computed(() => {
+  const type = form.menuType === "menu" ? "菜单" : "按钮";
+  return isEdit.value ? `编辑${type}` : `新建${type}`;
+});
+
+/**
+ * 是否禁用菜单类型切换
+ */
+const disableMenuType = computed(() => {
+  if (isEdit.value) return true;
+  if (!isEdit.value && form.menuType === "menu" && props.lockType) return true;
+  return false;
+});
+
+/**
+ * 重置表单数据
+ */
+const resetForm = (): void => {
+  formRef.value?.reset();
+  form.menuType = "menu";
+};
+
+/**
+ * 加载表单数据（编辑模式）
+ */
+const loadFormData = (): void => {
+  if (!props.editData) return;
+
+  isEdit.value = true;
+
+  if (form.menuType === "menu") {
+    const row = props.editData;
+    form.id = row.id || 0;
+    form.name = formatMenuTitle(row.meta?.title || "");
+    form.path = row.path || "";
+    form.label = row.name || "";
+    form.component = row.component || "";
+    form.icon = row.meta?.icon || "";
+    form.sort = row.meta?.sort || 1;
+    form.isMenu = row.meta?.isMenu ?? true;
+    form.keepAlive = row.meta?.keepAlive ?? false;
+    form.isHide = row.meta?.isHide ?? false;
+    form.isHideTab = row.meta?.isHideTab ?? false;
+    form.isEnable = row.meta?.isEnable ?? true;
+    form.link = row.meta?.link || "";
+    form.isIframe = row.meta?.isIframe ?? false;
+    form.showBadge = row.meta?.showBadge ?? false;
+    form.showTextBadge = row.meta?.showTextBadge || "";
+    form.fixedTab = row.meta?.fixedTab ?? false;
+    form.activePath = row.meta?.activePath || "";
+    form.roles = row.meta?.roles || [];
+    form.isFullPage = row.meta?.isFullPage ?? false;
+  } else {
+    const row = props.editData;
+    form.authName = row.title || "";
+    form.authLabel = row.authMark || "";
+    form.authIcon = row.icon || "";
+    form.authSort = row.sort || 1;
   }
+};
 
-  interface Props {
-    visible: boolean
-    editData?: AppRouteRecord | any
-    type?: 'menu' | 'button'
-    lockType?: boolean
+/**
+ * 提交表单
+ */
+const handleSubmit = async (): Promise<void> => {
+  if (!formRef.value) return;
+
+  try {
+    await formRef.value.validate();
+    emit("submit", { ...form });
+    ElMessage.success(`${isEdit.value ? "编辑" : "新增"}成功`);
+    handleCancel();
+  } catch {
+    ElMessage.error("表单校验失败，请检查输入");
   }
+};
 
-  interface Emits {
-    (e: 'update:visible', value: boolean): void
-    (e: 'submit', data: MenuFormData): void
-  }
+/**
+ * 取消操作
+ */
+const handleCancel = (): void => {
+  emit("update:visible", false);
+};
 
-  const props = withDefaults(defineProps<Props>(), {
-    visible: false,
-    type: 'menu',
-    lockType: false
-  })
+/**
+ * 对话框关闭后的回调
+ */
+const handleClosed = (): void => {
+  resetForm();
+  isEdit.value = false;
+};
 
-  const emit = defineEmits<Emits>()
-
-  const formRef = ref()
-  const isEdit = ref(false)
-
-  const form = reactive<MenuFormData & { menuType: 'menu' | 'button' }>({
-    menuType: 'menu',
-    id: 0,
-    name: '',
-    path: '',
-    label: '',
-    component: '',
-    icon: '',
-    isEnable: true,
-    sort: 1,
-    isMenu: true,
-    keepAlive: true,
-    isHide: false,
-    isHideTab: false,
-    link: '',
-    isIframe: false,
-    showBadge: false,
-    showTextBadge: '',
-    fixedTab: false,
-    activePath: '',
-    roles: [],
-    isFullPage: false,
-    authName: '',
-    authLabel: '',
-    authIcon: '',
-    authSort: 1
-  })
-
-  const rules = reactive<FormRules>({
-    name: [
-      { required: true, message: '请输入菜单名称', trigger: 'blur' },
-      { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
-    ],
-    path: [{ required: true, message: '请输入路由地址', trigger: 'blur' }],
-    label: [{ required: true, message: '输入权限标识', trigger: 'blur' }],
-    authName: [{ required: true, message: '请输入权限名称', trigger: 'blur' }],
-    authLabel: [{ required: true, message: '请输入权限标识', trigger: 'blur' }]
-  })
-
-  /**
-   * 表单项配置
-   */
-  const formItems = computed<FormItem[]>(() => {
-    const baseItems: FormItem[] = [{ label: '菜单类型', key: 'menuType', span: 24 }]
-
-    // Switch 组件的 span：小屏幕 12，大屏幕 6
-    const switchSpan = width.value < 640 ? 12 : 6
-
-    if (form.menuType === 'menu') {
-      return [
-        ...baseItems,
-        { label: '菜单名称', key: 'name', type: 'input', props: { placeholder: '菜单名称' } },
-        {
-          label: createLabelTooltip(
-            '路由地址',
-            '一级菜单：以 / 开头的绝对路径（如 /dashboard）\n二级及以下：相对路径（如 console、user）'
-          ),
-          key: 'path',
-          type: 'input',
-          props: { placeholder: '如：/dashboard 或 console' }
-        },
-        { label: '权限标识', key: 'label', type: 'input', props: { placeholder: '如：User' } },
-        {
-          label: createLabelTooltip(
-            '组件路径',
-            '一级父级菜单：填写 /index/index\n具体页面：填写组件路径（如 /system/user）\n目录菜单：留空'
-          ),
-          key: 'component',
-          type: 'input',
-          props: { placeholder: '如：/system/user 或留空' }
-        },
-        { label: '图标', key: 'icon', type: 'input', props: { placeholder: '如：ri:user-line' } },
-        {
-          label: createLabelTooltip(
-            '角色权限',
-            '仅用于前端权限模式：配置角色标识（如 R_SUPER、R_ADMIN）\n后端权限模式：无需配置'
-          ),
-          key: 'roles',
-          type: 'inputtag',
-          props: { placeholder: '输入角色标识后按回车，如：R_SUPER' }
-        },
-        {
-          label: '菜单排序',
-          key: 'sort',
-          type: 'number',
-          props: { min: 1, controlsPosition: 'right', style: { width: '100%' } }
-        },
-        {
-          label: '外部链接',
-          key: 'link',
-          type: 'input',
-          props: { placeholder: '如：https://www.example.com' }
-        },
-        {
-          label: '文本徽章',
-          key: 'showTextBadge',
-          type: 'input',
-          props: { placeholder: '如：New、Hot' }
-        },
-        {
-          label: createLabelTooltip(
-            '激活路径',
-            '用于详情页等隐藏菜单，指定高亮显示的父级菜单路径\n例如：用户详情页高亮显示"用户管理"菜单'
-          ),
-          key: 'activePath',
-          type: 'input',
-          props: { placeholder: '如：/system/user' }
-        },
-        { label: '是否启用', key: 'isEnable', type: 'switch', span: switchSpan },
-        { label: '页面缓存', key: 'keepAlive', type: 'switch', span: switchSpan },
-        { label: '隐藏菜单', key: 'isHide', type: 'switch', span: switchSpan },
-        { label: '是否内嵌', key: 'isIframe', type: 'switch', span: switchSpan },
-        { label: '显示徽章', key: 'showBadge', type: 'switch', span: switchSpan },
-        { label: '固定标签', key: 'fixedTab', type: 'switch', span: switchSpan },
-        { label: '标签隐藏', key: 'isHideTab', type: 'switch', span: switchSpan },
-        { label: '全屏页面', key: 'isFullPage', type: 'switch', span: switchSpan }
-      ]
-    } else {
-      return [
-        ...baseItems,
-        {
-          label: '权限名称',
-          key: 'authName',
-          type: 'input',
-          props: { placeholder: '如：新增、编辑、删除' }
-        },
-        {
-          label: '权限标识',
-          key: 'authLabel',
-          type: 'input',
-          props: { placeholder: '如：add、edit、delete' }
-        },
-        {
-          label: '权限排序',
-          key: 'authSort',
-          type: 'number',
-          props: { min: 1, controlsPosition: 'right', style: { width: '100%' } }
+/**
+ * 监听对话框显示状态
+ */
+watch(
+  () => props.visible,
+  (newVal) => {
+    if (newVal) {
+      form.menuType = props.type;
+      nextTick(() => {
+        if (props.editData) {
+          loadFormData();
         }
-      ]
-    }
-  })
-
-  const dialogTitle = computed(() => {
-    const type = form.menuType === 'menu' ? '菜单' : '按钮'
-    return isEdit.value ? `编辑${type}` : `新建${type}`
-  })
-
-  /**
-   * 是否禁用菜单类型切换
-   */
-  const disableMenuType = computed(() => {
-    if (isEdit.value) return true
-    if (!isEdit.value && form.menuType === 'menu' && props.lockType) return true
-    return false
-  })
-
-  /**
-   * 重置表单数据
-   */
-  const resetForm = (): void => {
-    formRef.value?.reset()
-    form.menuType = 'menu'
-  }
-
-  /**
-   * 加载表单数据（编辑模式）
-   */
-  const loadFormData = (): void => {
-    if (!props.editData) return
-
-    isEdit.value = true
-
-    if (form.menuType === 'menu') {
-      const row = props.editData
-      form.id = row.id || 0
-      form.name = formatMenuTitle(row.meta?.title || '')
-      form.path = row.path || ''
-      form.label = row.name || ''
-      form.component = row.component || ''
-      form.icon = row.meta?.icon || ''
-      form.sort = row.meta?.sort || 1
-      form.isMenu = row.meta?.isMenu ?? true
-      form.keepAlive = row.meta?.keepAlive ?? false
-      form.isHide = row.meta?.isHide ?? false
-      form.isHideTab = row.meta?.isHideTab ?? false
-      form.isEnable = row.meta?.isEnable ?? true
-      form.link = row.meta?.link || ''
-      form.isIframe = row.meta?.isIframe ?? false
-      form.showBadge = row.meta?.showBadge ?? false
-      form.showTextBadge = row.meta?.showTextBadge || ''
-      form.fixedTab = row.meta?.fixedTab ?? false
-      form.activePath = row.meta?.activePath || ''
-      form.roles = row.meta?.roles || []
-      form.isFullPage = row.meta?.isFullPage ?? false
-    } else {
-      const row = props.editData
-      form.authName = row.title || ''
-      form.authLabel = row.authMark || ''
-      form.authIcon = row.icon || ''
-      form.authSort = row.sort || 1
+      });
     }
   }
+);
 
-  /**
-   * 提交表单
-   */
-  const handleSubmit = async (): Promise<void> => {
-    if (!formRef.value) return
-
-    try {
-      await formRef.value.validate()
-      emit('submit', { ...form })
-      ElMessage.success(`${isEdit.value ? '编辑' : '新增'}成功`)
-      handleCancel()
-    } catch {
-      ElMessage.error('表单校验失败，请检查输入')
+/**
+ * 监听菜单类型变化
+ */
+watch(
+  () => props.type,
+  (newType) => {
+    if (props.visible) {
+      form.menuType = newType;
     }
   }
-
-  /**
-   * 取消操作
-   */
-  const handleCancel = (): void => {
-    emit('update:visible', false)
-  }
-
-  /**
-   * 对话框关闭后的回调
-   */
-  const handleClosed = (): void => {
-    resetForm()
-    isEdit.value = false
-  }
-
-  /**
-   * 监听对话框显示状态
-   */
-  watch(
-    () => props.visible,
-    (newVal) => {
-      if (newVal) {
-        form.menuType = props.type
-        nextTick(() => {
-          if (props.editData) {
-            loadFormData()
-          }
-        })
-      }
-    }
-  )
-
-  /**
-   * 监听菜单类型变化
-   */
-  watch(
-    () => props.type,
-    (newType) => {
-      if (props.visible) {
-        form.menuType = newType
-      }
-    }
-  )
+);
 </script>
diff --git a/frontend/new-web/src/views/system/role/index.vue b/frontend/new-web/src/views/system/role/index.vue
index 1378f340..9786c04c 100755
--- a/frontend/new-web/src/views/system/role/index.vue
+++ b/frontend/new-web/src/views/system/role/index.vue
@@ -30,8 +30,7 @@
         :pagination="pagination"
         @pagination:size-change="handleSizeChange"
         @pagination:current-change="handleCurrentChange"
-      >
-      </ArtTable>
+      ></ArtTable>
     </ElCard>
 
     <!-- 角色编辑弹窗 -->
@@ -52,189 +51,189 @@
 </template>
 
 <script setup lang="ts">
-  import { ButtonMoreItem } from '@/components/core/forms/art-button-more/index.vue'
-  import { useTable } from '@/hooks/core/useTable'
-  import { fetchGetRoleList } from '@/api/system-manage'
-  import ArtButtonMore from '@/components/core/forms/art-button-more/index.vue'
-  import RoleSearch from './modules/role-search.vue'
-  import RoleEditDialog from './modules/role-edit-dialog.vue'
-  import RolePermissionDialog from './modules/role-permission-dialog.vue'
-  import { ElTag, ElMessageBox } from 'element-plus'
+import { ButtonMoreItem } from "@/components/core/forms/art-button-more/index.vue";
+import { useTable } from "@/hooks/core/useTable";
+import { fetchGetRoleList } from "@/api/system-manage";
+import ArtButtonMore from "@/components/core/forms/art-button-more/index.vue";
+import RoleSearch from "./modules/role-search.vue";
+import RoleEditDialog from "./modules/role-edit-dialog.vue";
+import RolePermissionDialog from "./modules/role-permission-dialog.vue";
+import { ElTag, ElMessageBox } from "element-plus";
 
-  defineOptions({ name: 'Role' })
+defineOptions({ name: "Role" });
 
-  type RoleListItem = Api.SystemManage.RoleListItem
-  type RoleSearchFormParams = Api.SystemManage.RoleSearchParams & {
-    daterange?: string[]
-  }
+type RoleListItem = RoleListItem;
+type RoleSearchFormParams = RoleSearchParams & {
+  daterange?: string[];
+};
 
-  // 搜索表单
-  const searchForm = ref<RoleSearchFormParams>({
-    roleName: undefined,
-    roleCode: undefined,
-    description: undefined,
-    enabled: undefined,
-    daterange: undefined
-  })
+// 搜索表单
+const searchForm = ref<RoleSearchFormParams>({
+  roleName: undefined,
+  roleCode: undefined,
+  description: undefined,
+  enabled: undefined,
+  daterange: undefined,
+});
 
-  const showSearchBar = ref(false)
+const showSearchBar = ref(false);
 
-  const dialogVisible = ref(false)
-  const permissionDialog = ref(false)
-  const currentRoleData = ref<RoleListItem | undefined>(undefined)
+const dialogVisible = ref(false);
+const permissionDialog = ref(false);
+const currentRoleData = ref<RoleListItem | undefined>(undefined);
 
-  const {
-    columns,
-    columnChecks,
-    data,
-    loading,
-    pagination,
-    getData,
-    replaceSearchParams,
-    resetSearchParams,
-    handleSizeChange,
-    handleCurrentChange,
-    refreshData
-  } = useTable({
-    // 核心配置
-    core: {
-      apiFn: fetchGetRoleList,
-      apiParams: {
-        current: 1,
-        size: 20
+const {
+  columns,
+  columnChecks,
+  data,
+  loading,
+  pagination,
+  getData,
+  replaceSearchParams,
+  resetSearchParams,
+  handleSizeChange,
+  handleCurrentChange,
+  refreshData,
+} = useTable({
+  // 核心配置
+  core: {
+    apiFn: fetchGetRoleList,
+    apiParams: {
+      current: 1,
+      size: 20,
+    },
+    // 排除 apiParams 中的属性
+    excludeParams: ["daterange"],
+    columnsFactory: () => [
+      {
+        prop: "roleId",
+        label: "角色ID",
+        width: 100,
       },
-      // 排除 apiParams 中的属性
-      excludeParams: ['daterange'],
-      columnsFactory: () => [
-        {
-          prop: 'roleId',
-          label: '角色ID',
-          width: 100
+      {
+        prop: "roleName",
+        label: "角色名称",
+        minWidth: 120,
+      },
+      {
+        prop: "roleCode",
+        label: "角色编码",
+        minWidth: 120,
+      },
+      {
+        prop: "description",
+        label: "角色描述",
+        minWidth: 150,
+        showOverflowTooltip: true,
+      },
+      {
+        prop: "enabled",
+        label: "角色状态",
+        width: 100,
+        formatter: (row) => {
+          const statusConfig = row.enabled
+            ? { type: "success", text: "启用" }
+            : { type: "warning", text: "禁用" };
+          return h(
+            ElTag,
+            { type: statusConfig.type as "success" | "warning" },
+            () => statusConfig.text
+          );
         },
-        {
-          prop: 'roleName',
-          label: '角色名称',
-          minWidth: 120
-        },
-        {
-          prop: 'roleCode',
-          label: '角色编码',
-          minWidth: 120
-        },
-        {
-          prop: 'description',
-          label: '角色描述',
-          minWidth: 150,
-          showOverflowTooltip: true
-        },
-        {
-          prop: 'enabled',
-          label: '角色状态',
-          width: 100,
-          formatter: (row) => {
-            const statusConfig = row.enabled
-              ? { type: 'success', text: '启用' }
-              : { type: 'warning', text: '禁用' }
-            return h(
-              ElTag,
-              { type: statusConfig.type as 'success' | 'warning' },
-              () => statusConfig.text
-            )
-          }
-        },
-        {
-          prop: 'createTime',
-          label: '创建日期',
-          width: 180,
-          sortable: true
-        },
-        {
-          prop: 'operation',
-          label: '操作',
-          width: 80,
-          fixed: 'right',
-          formatter: (row) =>
-            h('div', [
-              h(ArtButtonMore, {
-                list: [
-                  {
-                    key: 'permission',
-                    label: '菜单权限',
-                    icon: 'ri:user-3-line'
-                  },
-                  {
-                    key: 'edit',
-                    label: '编辑角色',
-                    icon: 'ri:edit-2-line'
-                  },
-                  {
-                    key: 'delete',
-                    label: '删除角色',
-                    icon: 'ri:delete-bin-4-line',
-                    color: '#f56c6c'
-                  }
-                ],
-                onClick: (item: ButtonMoreItem) => buttonMoreClick(item, row)
-              })
-            ])
-        }
-      ]
-    }
+      },
+      {
+        prop: "createTime",
+        label: "创建日期",
+        width: 180,
+        sortable: true,
+      },
+      {
+        prop: "operation",
+        label: "操作",
+        width: 80,
+        fixed: "right",
+        formatter: (row) =>
+          h("div", [
+            h(ArtButtonMore, {
+              list: [
+                {
+                  key: "permission",
+                  label: "菜单权限",
+                  icon: "ri:user-3-line",
+                },
+                {
+                  key: "edit",
+                  label: "编辑角色",
+                  icon: "ri:edit-2-line",
+                },
+                {
+                  key: "delete",
+                  label: "删除角色",
+                  icon: "ri:delete-bin-4-line",
+                  color: "#f56c6c",
+                },
+              ],
+              onClick: (item: ButtonMoreItem) => buttonMoreClick(item, row),
+            }),
+          ]),
+      },
+    ],
+  },
+});
+
+const dialogType = ref<"add" | "edit">("add");
+
+const showDialog = (type: "add" | "edit", row?: RoleListItem) => {
+  dialogVisible.value = true;
+  dialogType.value = type;
+  currentRoleData.value = row;
+};
+
+/**
+ * 搜索处理
+ * @param params 搜索参数
+ */
+const handleSearch = (params: RoleSearchFormParams) => {
+  // 处理日期区间参数，把 daterange 转换为 startTime 和 endTime
+  const { daterange, ...filtersParams } = params;
+  const [startTime, endTime] = Array.isArray(daterange) ? daterange : [null, null];
+
+  replaceSearchParams({ ...filtersParams, startTime, endTime });
+  getData();
+};
+
+const buttonMoreClick = (item: ButtonMoreItem, row: RoleListItem) => {
+  switch (item.key) {
+    case "permission":
+      showPermissionDialog(row);
+      break;
+    case "edit":
+      showDialog("edit", row);
+      break;
+    case "delete":
+      deleteRole(row);
+      break;
+  }
+};
+
+const showPermissionDialog = (row?: RoleListItem) => {
+  permissionDialog.value = true;
+  currentRoleData.value = row;
+};
+
+const deleteRole = (row: RoleListItem) => {
+  ElMessageBox.confirm(`确定删除角色"${row.roleName}"吗？此操作不可恢复！`, "删除确认", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
   })
-
-  const dialogType = ref<'add' | 'edit'>('add')
-
-  const showDialog = (type: 'add' | 'edit', row?: RoleListItem) => {
-    dialogVisible.value = true
-    dialogType.value = type
-    currentRoleData.value = row
-  }
-
-  /**
-   * 搜索处理
-   * @param params 搜索参数
-   */
-  const handleSearch = (params: RoleSearchFormParams) => {
-    // 处理日期区间参数，把 daterange 转换为 startTime 和 endTime
-    const { daterange, ...filtersParams } = params
-    const [startTime, endTime] = Array.isArray(daterange) ? daterange : [null, null]
-
-    replaceSearchParams({ ...filtersParams, startTime, endTime })
-    getData()
-  }
-
-  const buttonMoreClick = (item: ButtonMoreItem, row: RoleListItem) => {
-    switch (item.key) {
-      case 'permission':
-        showPermissionDialog(row)
-        break
-      case 'edit':
-        showDialog('edit', row)
-        break
-      case 'delete':
-        deleteRole(row)
-        break
-    }
-  }
-
-  const showPermissionDialog = (row?: RoleListItem) => {
-    permissionDialog.value = true
-    currentRoleData.value = row
-  }
-
-  const deleteRole = (row: RoleListItem) => {
-    ElMessageBox.confirm(`确定删除角色"${row.roleName}"吗？此操作不可恢复！`, '删除确认', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning'
+    .then(() => {
+      // TODO: 调用删除接口
+      ElMessage.success("删除成功");
+      refreshData();
     })
-      .then(() => {
-        // TODO: 调用删除接口
-        ElMessage.success('删除成功')
-        refreshData()
-      })
-      .catch(() => {
-        ElMessage.info('已取消删除')
-      })
-  }
+    .catch(() => {
+      ElMessage.info("已取消删除");
+    });
+};
 </script>
diff --git a/frontend/new-web/src/views/system/role/modules/role-edit-dialog.vue b/frontend/new-web/src/views/system/role/modules/role-edit-dialog.vue
index 46ff9b15..fea5e8eb 100644
--- a/frontend/new-web/src/views/system/role/modules/role-edit-dialog.vue
+++ b/frontend/new-web/src/views/system/role/modules/role-edit-dialog.vue
@@ -33,130 +33,130 @@
 </template>
 
 <script setup lang="ts">
-  import type { FormInstance, FormRules } from 'element-plus'
+import type { FormInstance, FormRules } from "element-plus";
 
-  type RoleListItem = Api.SystemManage.RoleListItem
+type RoleListItem = RoleListItem;
 
-  interface Props {
-    modelValue: boolean
-    dialogType: 'add' | 'edit'
-    roleData?: RoleListItem
+interface Props {
+  modelValue: boolean;
+  dialogType: "add" | "edit";
+  roleData?: RoleListItem;
+}
+
+interface Emits {
+  (e: "update:modelValue", value: boolean): void;
+  (e: "success"): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  dialogType: "add",
+  roleData: undefined,
+});
+
+const emit = defineEmits<Emits>();
+
+const formRef = ref<FormInstance>();
+
+/**
+ * 弹窗显示状态双向绑定
+ */
+const visible = computed({
+  get: () => props.modelValue,
+  set: (value) => emit("update:modelValue", value),
+});
+
+/**
+ * 表单验证规则
+ */
+const rules = reactive<FormRules>({
+  roleName: [
+    { required: true, message: "请输入角色名称", trigger: "blur" },
+    { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" },
+  ],
+  roleCode: [
+    { required: true, message: "请输入角色编码", trigger: "blur" },
+    { min: 2, max: 50, message: "长度在 2 到 50 个字符", trigger: "blur" },
+  ],
+  description: [{ required: true, message: "请输入角色描述", trigger: "blur" }],
+});
+
+/**
+ * 表单数据
+ */
+const form = reactive<RoleListItem>({
+  roleId: 0,
+  roleName: "",
+  roleCode: "",
+  description: "",
+  createTime: "",
+  enabled: true,
+});
+
+/**
+ * 监听弹窗打开，初始化表单数据
+ */
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    if (newVal) initForm();
   }
+);
 
-  interface Emits {
-    (e: 'update:modelValue', value: boolean): void
-    (e: 'success'): void
+/**
+ * 监听角色数据变化，更新表单
+ */
+watch(
+  () => props.roleData,
+  (newData) => {
+    if (newData && props.modelValue) initForm();
+  },
+  { deep: true }
+);
+
+/**
+ * 初始化表单数据
+ * 根据弹窗类型填充表单或重置表单
+ */
+const initForm = () => {
+  if (props.dialogType === "edit" && props.roleData) {
+    Object.assign(form, props.roleData);
+  } else {
+    Object.assign(form, {
+      roleId: 0,
+      roleName: "",
+      roleCode: "",
+      description: "",
+      createTime: "",
+      enabled: true,
+    });
   }
+};
 
-  const props = withDefaults(defineProps<Props>(), {
-    modelValue: false,
-    dialogType: 'add',
-    roleData: undefined
-  })
+/**
+ * 关闭弹窗并重置表单
+ */
+const handleClose = () => {
+  visible.value = false;
+  formRef.value?.resetFields();
+};
 
-  const emit = defineEmits<Emits>()
+/**
+ * 提交表单
+ * 验证通过后调用接口保存数据
+ */
+const handleSubmit = async () => {
+  if (!formRef.value) return;
 
-  const formRef = ref<FormInstance>()
-
-  /**
-   * 弹窗显示状态双向绑定
-   */
-  const visible = computed({
-    get: () => props.modelValue,
-    set: (value) => emit('update:modelValue', value)
-  })
-
-  /**
-   * 表单验证规则
-   */
-  const rules = reactive<FormRules>({
-    roleName: [
-      { required: true, message: '请输入角色名称', trigger: 'blur' },
-      { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
-    ],
-    roleCode: [
-      { required: true, message: '请输入角色编码', trigger: 'blur' },
-      { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
-    ],
-    description: [{ required: true, message: '请输入角色描述', trigger: 'blur' }]
-  })
-
-  /**
-   * 表单数据
-   */
-  const form = reactive<RoleListItem>({
-    roleId: 0,
-    roleName: '',
-    roleCode: '',
-    description: '',
-    createTime: '',
-    enabled: true
-  })
-
-  /**
-   * 监听弹窗打开，初始化表单数据
-   */
-  watch(
-    () => props.modelValue,
-    (newVal) => {
-      if (newVal) initForm()
-    }
-  )
-
-  /**
-   * 监听角色数据变化，更新表单
-   */
-  watch(
-    () => props.roleData,
-    (newData) => {
-      if (newData && props.modelValue) initForm()
-    },
-    { deep: true }
-  )
-
-  /**
-   * 初始化表单数据
-   * 根据弹窗类型填充表单或重置表单
-   */
-  const initForm = () => {
-    if (props.dialogType === 'edit' && props.roleData) {
-      Object.assign(form, props.roleData)
-    } else {
-      Object.assign(form, {
-        roleId: 0,
-        roleName: '',
-        roleCode: '',
-        description: '',
-        createTime: '',
-        enabled: true
-      })
-    }
-  }
-
-  /**
-   * 关闭弹窗并重置表单
-   */
-  const handleClose = () => {
-    visible.value = false
-    formRef.value?.resetFields()
-  }
-
-  /**
-   * 提交表单
-   * 验证通过后调用接口保存数据
-   */
-  const handleSubmit = async () => {
-    if (!formRef.value) return
-
-    try {
-      await formRef.value.validate()
-      // TODO: 调用新增/编辑接口
-      const message = props.dialogType === 'add' ? '新增成功' : '修改成功'
-      ElMessage.success(message)
-      emit('success')
-      handleClose()
-    } catch (error) {
-      console.log('表单验证失败:', error)
-    }
+  try {
+    await formRef.value.validate();
+    // TODO: 调用新增/编辑接口
+    const message = props.dialogType === "add" ? "新增成功" : "修改成功";
+    ElMessage.success(message);
+    emit("success");
+    handleClose();
+  } catch (error) {
+    console.log("表单验证失败:", error);
   }
+};
 </script>
diff --git a/frontend/new-web/src/views/system/role/modules/role-permission-dialog.vue b/frontend/new-web/src/views/system/role/modules/role-permission-dialog.vue
index 3691ac86..4021f42b 100644
--- a/frontend/new-web/src/views/system/role/modules/role-permission-dialog.vue
+++ b/frontend/new-web/src/views/system/role/modules/role-permission-dialog.vue
@@ -31,224 +31,224 @@
     <template #footer>
       <ElButton @click="outputSelectedData" style="margin-left: 8px">获取选中数据</ElButton>
 
-      <ElButton @click="toggleExpandAll">{{ isExpandAll ? '全部收起' : '全部展开' }}</ElButton>
-      <ElButton @click="toggleSelectAll" style="margin-left: 8px">{{
-        isSelectAll ? '取消全选' : '全部选择'
-      }}</ElButton>
+      <ElButton @click="toggleExpandAll">{{ isExpandAll ? "全部收起" : "全部展开" }}</ElButton>
+      <ElButton @click="toggleSelectAll" style="margin-left: 8px">
+        {{ isSelectAll ? "取消全选" : "全部选择" }}
+      </ElButton>
       <ElButton type="primary" @click="savePermission">保存</ElButton>
     </template>
   </ElDialog>
 </template>
 
 <script setup lang="ts">
-  import { useMenuStore } from '@/store/modules/menu'
-  import { formatMenuTitle } from '@/utils/router'
+import { useMenuStore } from "@/store/modules/menu.store";
+import { formatMenuTitle } from "@/utils/navigation/router";
 
-  type RoleListItem = Api.SystemManage.RoleListItem
+type RoleListItem = RoleListItem;
 
-  interface Props {
-    modelValue: boolean
-    roleData?: RoleListItem
-  }
+interface Props {
+  modelValue: boolean;
+  roleData?: RoleListItem;
+}
 
-  interface Emits {
-    (e: 'update:modelValue', value: boolean): void
-    (e: 'success'): void
-  }
+interface Emits {
+  (e: "update:modelValue", value: boolean): void;
+  (e: "success"): void;
+}
 
-  const props = withDefaults(defineProps<Props>(), {
-    modelValue: false,
-    roleData: undefined
-  })
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  roleData: undefined,
+});
 
-  const emit = defineEmits<Emits>()
+const emit = defineEmits<Emits>();
 
-  const { menuList } = storeToRefs(useMenuStore())
-  const treeRef = ref()
-  const isExpandAll = ref(true)
-  const isSelectAll = ref(false)
+const { menuList } = storeToRefs(useMenuStore());
+const treeRef = ref();
+const isExpandAll = ref(true);
+const isSelectAll = ref(false);
 
-  /**
-   * 弹窗显示状态双向绑定
-   */
-  const visible = computed({
-    get: () => props.modelValue,
-    set: (value) => emit('update:modelValue', value)
-  })
+/**
+ * 弹窗显示状态双向绑定
+ */
+const visible = computed({
+  get: () => props.modelValue,
+  set: (value) => emit("update:modelValue", value),
+});
 
-  /**
-   * 菜单节点类型
-   */
-  interface MenuNode {
-    id?: string | number
-    name?: string
-    label?: string
-    meta?: {
-      title?: string
-      authList?: Array<{
-        authMark: string
-        title: string
-        checked?: boolean
-      }>
-    }
-    children?: MenuNode[]
-    [key: string]: any
-  }
+/**
+ * 菜单节点类型
+ */
+interface MenuNode {
+  id?: string | number;
+  name?: string;
+  label?: string;
+  meta?: {
+    title?: string;
+    authList?: Array<{
+      authMark: string;
+      title: string;
+      checked?: boolean;
+    }>;
+  };
+  children?: MenuNode[];
+  [key: string]: any;
+}
 
-  /**
-   * 处理菜单数据，将 authList 转换为树形子节点
-   * 递归处理菜单树，将权限列表展开为可选择的子节点
-   */
-  const processedMenuList = computed(() => {
-    const processNode = (node: MenuNode): MenuNode => {
-      const processed = { ...node }
+/**
+ * 处理菜单数据，将 authList 转换为树形子节点
+ * 递归处理菜单树，将权限列表展开为可选择的子节点
+ */
+const processedMenuList = computed(() => {
+  const processNode = (node: MenuNode): MenuNode => {
+    const processed = { ...node };
 
-      // 如果有 authList，将其转换为子节点
-      if (node.meta?.authList?.length) {
-        const authNodes = node.meta.authList.map((auth) => ({
-          id: `${node.id}_${auth.authMark}`,
-          name: `${node.name}_${auth.authMark}`,
-          label: auth.title,
-          authMark: auth.authMark,
-          isAuth: true,
-          checked: auth.checked || false
-        }))
+    // 如果有 authList，将其转换为子节点
+    if (node.meta?.authList?.length) {
+      const authNodes = node.meta.authList.map((auth) => ({
+        id: `${node.id}_${auth.authMark}`,
+        name: `${node.name}_${auth.authMark}`,
+        label: auth.title,
+        authMark: auth.authMark,
+        isAuth: true,
+        checked: auth.checked || false,
+      }));
 
-        processed.children = processed.children ? [...processed.children, ...authNodes] : authNodes
-      }
-
-      // 递归处理子节点
-      if (processed.children) {
-        processed.children = processed.children.map(processNode)
-      }
-
-      return processed
+      processed.children = processed.children ? [...processed.children, ...authNodes] : authNodes;
     }
 
-    return (menuList.value as any[]).map(processNode)
-  })
-
-  /**
-   * 树形组件配置
-   */
-  const defaultProps = {
-    children: 'children',
-    label: (data: any) => formatMenuTitle(data.meta?.title) || data.label || ''
-  }
-
-  /**
-   * 监听弹窗打开，初始化权限数据
-   */
-  watch(
-    () => props.modelValue,
-    (newVal) => {
-      if (newVal && props.roleData) {
-        // TODO: 根据角色加载对应的权限数据
-        console.log('设置权限:', props.roleData)
-      }
-    }
-  )
-
-  /**
-   * 关闭弹窗并清空选中状态
-   */
-  const handleClose = () => {
-    visible.value = false
-    treeRef.value?.setCheckedKeys([])
-  }
-
-  /**
-   * 保存权限配置
-   */
-  const savePermission = () => {
-    // TODO: 调用保存权限接口
-    ElMessage.success('权限保存成功')
-    emit('success')
-    handleClose()
-  }
-
-  /**
-   * 切换全部展开/收起状态
-   */
-  const toggleExpandAll = () => {
-    const tree = treeRef.value
-    if (!tree) return
-
-    const nodes = tree.store.nodesMap
-    // 这里保留 any，因为 Element Plus 的内部节点类型较复杂
-    Object.values(nodes).forEach((node: any) => {
-      node.expanded = !isExpandAll.value
-    })
-
-    isExpandAll.value = !isExpandAll.value
-  }
-
-  /**
-   * 切换全选/取消全选状态
-   */
-  const toggleSelectAll = () => {
-    const tree = treeRef.value
-    if (!tree) return
-
-    if (!isSelectAll.value) {
-      const allKeys = getAllNodeKeys(processedMenuList.value)
-      tree.setCheckedKeys(allKeys)
-    } else {
-      tree.setCheckedKeys([])
+    // 递归处理子节点
+    if (processed.children) {
+      processed.children = processed.children.map(processNode);
     }
 
-    isSelectAll.value = !isSelectAll.value
-  }
+    return processed;
+  };
 
-  /**
-   * 递归获取所有节点的 key
-   * @param nodes 节点列表
-   * @returns 所有节点的 key 数组
-   */
-  const getAllNodeKeys = (nodes: MenuNode[]): string[] => {
-    const keys: string[] = []
-    const traverse = (nodeList: MenuNode[]): void => {
-      nodeList.forEach((node) => {
-        if (node.name) keys.push(node.name)
-        if (node.children?.length) traverse(node.children)
-      })
+  return (menuList.value as any[]).map(processNode);
+});
+
+/**
+ * 树形组件配置
+ */
+const defaultProps = {
+  children: "children",
+  label: (data: any) => formatMenuTitle(data.meta?.title) || data.label || "",
+};
+
+/**
+ * 监听弹窗打开，初始化权限数据
+ */
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    if (newVal && props.roleData) {
+      // TODO: 根据角色加载对应的权限数据
+      console.log("设置权限:", props.roleData);
     }
-    traverse(nodes)
-    return keys
+  }
+);
+
+/**
+ * 关闭弹窗并清空选中状态
+ */
+const handleClose = () => {
+  visible.value = false;
+  treeRef.value?.setCheckedKeys([]);
+};
+
+/**
+ * 保存权限配置
+ */
+const savePermission = () => {
+  // TODO: 调用保存权限接口
+  ElMessage.success("权限保存成功");
+  emit("success");
+  handleClose();
+};
+
+/**
+ * 切换全部展开/收起状态
+ */
+const toggleExpandAll = () => {
+  const tree = treeRef.value;
+  if (!tree) return;
+
+  const nodes = tree.store.nodesMap;
+  // 这里保留 any，因为 Element Plus 的内部节点类型较复杂
+  Object.values(nodes).forEach((node: any) => {
+    node.expanded = !isExpandAll.value;
+  });
+
+  isExpandAll.value = !isExpandAll.value;
+};
+
+/**
+ * 切换全选/取消全选状态
+ */
+const toggleSelectAll = () => {
+  const tree = treeRef.value;
+  if (!tree) return;
+
+  if (!isSelectAll.value) {
+    const allKeys = getAllNodeKeys(processedMenuList.value);
+    tree.setCheckedKeys(allKeys);
+  } else {
+    tree.setCheckedKeys([]);
   }
 
-  /**
-   * 处理树节点选中状态变化
-   * 同步更新全选按钮状态
-   */
-  const handleTreeCheck = () => {
-    const tree = treeRef.value
-    if (!tree) return
+  isSelectAll.value = !isSelectAll.value;
+};
 
-    const checkedKeys = tree.getCheckedKeys()
-    const allKeys = getAllNodeKeys(processedMenuList.value)
+/**
+ * 递归获取所有节点的 key
+ * @param nodes 节点列表
+ * @returns 所有节点的 key 数组
+ */
+const getAllNodeKeys = (nodes: MenuNode[]): string[] => {
+  const keys: string[] = [];
+  const traverse = (nodeList: MenuNode[]): void => {
+    nodeList.forEach((node) => {
+      if (node.name) keys.push(node.name);
+      if (node.children?.length) traverse(node.children);
+    });
+  };
+  traverse(nodes);
+  return keys;
+};
 
-    isSelectAll.value = checkedKeys.length === allKeys.length && allKeys.length > 0
-  }
+/**
+ * 处理树节点选中状态变化
+ * 同步更新全选按钮状态
+ */
+const handleTreeCheck = () => {
+  const tree = treeRef.value;
+  if (!tree) return;
 
-  /**
-   * 输出选中的权限数据到控制台
-   * 用于调试和查看当前选中的权限配置
-   */
-  const outputSelectedData = () => {
-    const tree = treeRef.value
-    if (!tree) return
+  const checkedKeys = tree.getCheckedKeys();
+  const allKeys = getAllNodeKeys(processedMenuList.value);
 
-    const selectedData = {
-      checkedKeys: tree.getCheckedKeys(),
-      halfCheckedKeys: tree.getHalfCheckedKeys(),
-      checkedNodes: tree.getCheckedNodes(),
-      halfCheckedNodes: tree.getHalfCheckedNodes(),
-      totalChecked: tree.getCheckedKeys().length,
-      totalHalfChecked: tree.getHalfCheckedKeys().length
-    }
+  isSelectAll.value = checkedKeys.length === allKeys.length && allKeys.length > 0;
+};
 
-    console.log('=== 选中的权限数据 ===', selectedData)
-    ElMessage.success(`已输出选中数据到控制台，共选中 ${selectedData.totalChecked} 个节点`)
-  }
+/**
+ * 输出选中的权限数据到控制台
+ * 用于调试和查看当前选中的权限配置
+ */
+const outputSelectedData = () => {
+  const tree = treeRef.value;
+  if (!tree) return;
+
+  const selectedData = {
+    checkedKeys: tree.getCheckedKeys(),
+    halfCheckedKeys: tree.getHalfCheckedKeys(),
+    checkedNodes: tree.getCheckedNodes(),
+    halfCheckedNodes: tree.getHalfCheckedNodes(),
+    totalChecked: tree.getCheckedKeys().length,
+    totalHalfChecked: tree.getHalfCheckedKeys().length,
+  };
+
+  console.log("=== 选中的权限数据 ===", selectedData);
+  ElMessage.success(`已输出选中数据到控制台，共选中 ${selectedData.totalChecked} 个节点`);
+};
 </script>
diff --git a/frontend/new-web/src/views/system/role/modules/role-search.vue b/frontend/new-web/src/views/system/role/modules/role-search.vue
index ae929e75..ab646dd4 100644
--- a/frontend/new-web/src/views/system/role/modules/role-search.vue
+++ b/frontend/new-web/src/views/system/role/modules/role-search.vue
@@ -6,120 +6,119 @@
     :rules="rules"
     @reset="handleReset"
     @search="handleSearch"
-  >
-  </ArtSearchBar>
+  ></ArtSearchBar>
 </template>
 
 <script setup lang="ts">
-  type RoleSearchFormParams = Api.SystemManage.RoleSearchParams & {
-    daterange?: string[]
-  }
+type RoleSearchFormParams = RoleSearchParams & {
+  daterange?: string[];
+};
 
-  interface Props {
-    modelValue: RoleSearchFormParams
-  }
+interface Props {
+  modelValue: RoleSearchFormParams;
+}
 
-  interface Emits {
-    (e: 'update:modelValue', value: RoleSearchFormParams): void
-    (e: 'search', params: RoleSearchFormParams): void
-    (e: 'reset'): void
-  }
+interface Emits {
+  (e: "update:modelValue", value: RoleSearchFormParams): void;
+  (e: "search", params: RoleSearchFormParams): void;
+  (e: "reset"): void;
+}
 
-  const props = defineProps<Props>()
-  const emit = defineEmits<Emits>()
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
 
-  const searchBarRef = ref()
+const searchBarRef = ref();
 
-  /**
-   * 表单数据双向绑定
-   */
-  const formData = computed({
-    get: () => props.modelValue,
-    set: (val) => emit('update:modelValue', val)
-  })
+/**
+ * 表单数据双向绑定
+ */
+const formData = computed({
+  get: () => props.modelValue,
+  set: (val) => emit("update:modelValue", val),
+});
 
-  /**
-   * 表单校验规则
-   */
-  const rules = {}
+/**
+ * 表单校验规则
+ */
+const rules = {};
 
-  /**
-   * 角色状态选项
-   */
-  const statusOptions = ref([
-    { label: '启用', value: true },
-    { label: '禁用', value: false }
-  ])
+/**
+ * 角色状态选项
+ */
+const statusOptions = ref([
+  { label: "启用", value: true },
+  { label: "禁用", value: false },
+]);
 
-  /**
-   * 搜索表单配置项
-   */
-  const formItems = computed(() => [
-    {
-      label: '角色名称',
-      key: 'roleName',
-      type: 'input',
-      placeholder: '请输入角色名称',
-      clearable: true
+/**
+ * 搜索表单配置项
+ */
+const formItems = computed(() => [
+  {
+    label: "角色名称",
+    key: "roleName",
+    type: "input",
+    placeholder: "请输入角色名称",
+    clearable: true,
+  },
+  {
+    label: "角色编码",
+    key: "roleCode",
+    type: "input",
+    placeholder: "请输入角色编码",
+    clearable: true,
+  },
+  {
+    label: "角色描述",
+    key: "description",
+    type: "input",
+    placeholder: "请输入角色描述",
+    clearable: true,
+  },
+  {
+    label: "角色状态",
+    key: "enabled",
+    type: "select",
+    props: {
+      placeholder: "请选择状态",
+      options: statusOptions.value,
+      clearable: true,
     },
-    {
-      label: '角色编码',
-      key: 'roleCode',
-      type: 'input',
-      placeholder: '请输入角色编码',
-      clearable: true
+  },
+  {
+    label: "创建日期",
+    key: "daterange",
+    type: "datetime",
+    props: {
+      style: { width: "100%" },
+      placeholder: "请选择日期范围",
+      type: "daterange",
+      rangeSeparator: "至",
+      startPlaceholder: "开始日期",
+      endPlaceholder: "结束日期",
+      valueFormat: "YYYY-MM-DD",
+      shortcuts: [
+        { text: "今日", value: [new Date(), new Date()] },
+        { text: "最近一周", value: [new Date(Date.now() - 604800000), new Date()] },
+        { text: "最近一个月", value: [new Date(Date.now() - 2592000000), new Date()] },
+      ],
     },
-    {
-      label: '角色描述',
-      key: 'description',
-      type: 'input',
-      placeholder: '请输入角色描述',
-      clearable: true
-    },
-    {
-      label: '角色状态',
-      key: 'enabled',
-      type: 'select',
-      props: {
-        placeholder: '请选择状态',
-        options: statusOptions.value,
-        clearable: true
-      }
-    },
-    {
-      label: '创建日期',
-      key: 'daterange',
-      type: 'datetime',
-      props: {
-        style: { width: '100%' },
-        placeholder: '请选择日期范围',
-        type: 'daterange',
-        rangeSeparator: '至',
-        startPlaceholder: '开始日期',
-        endPlaceholder: '结束日期',
-        valueFormat: 'YYYY-MM-DD',
-        shortcuts: [
-          { text: '今日', value: [new Date(), new Date()] },
-          { text: '最近一周', value: [new Date(Date.now() - 604800000), new Date()] },
-          { text: '最近一个月', value: [new Date(Date.now() - 2592000000), new Date()] }
-        ]
-      }
-    }
-  ])
+  },
+]);
 
-  /**
-   * 处理重置事件
-   */
-  const handleReset = () => {
-    emit('reset')
-  }
+/**
+ * 处理重置事件
+ */
+const handleReset = () => {
+  emit("reset");
+};
 
-  /**
-   * 处理搜索事件
-   * 验证表单后触发搜索
-   */
-  const handleSearch = async (params: RoleSearchFormParams) => {
-    await searchBarRef.value.validate()
-    emit('search', params)
-  }
+/**
+ * 处理搜索事件
+ * 验证表单后触发搜索
+ */
+const handleSearch = async (params: RoleSearchFormParams) => {
+  await searchBarRef.value.validate();
+  emit("search", params);
+};
 </script>
diff --git a/frontend/new-web/src/views/system/user-center/index.vue b/frontend/new-web/src/views/system/user-center/index.vue
index ab52f00b..db68d9b5 100755
--- a/frontend/new-web/src/views/system/user-center/index.vue
+++ b/frontend/new-web/src/views/system/user-center/index.vue
@@ -97,7 +97,7 @@
 
             <div class="flex-c justify-end [&_.el-button]:!w-27.5">
               <ElButton type="primary" class="w-22.5" v-ripple @click="edit">
-                {{ isEdit ? '保存' : '编辑' }}
+                {{ isEdit ? "保存" : "编辑" }}
               </ElButton>
             </div>
           </ElForm>
@@ -136,7 +136,7 @@
 
             <div class="flex-c justify-end [&_.el-button]:!w-27.5">
               <ElButton type="primary" class="w-22.5" v-ripple @click="editPwd">
-                {{ isEditPwd ? '保存' : '编辑' }}
+                {{ isEditPwd ? "保存" : "编辑" }}
               </ElButton>
             </div>
           </ElForm>
@@ -147,101 +147,101 @@
 </template>
 
 <script setup lang="ts">
-  import { useUserStore } from '@/store/modules/user'
-  import type { FormInstance, FormRules } from 'element-plus'
+import { useUserStore } from "@/store/modules/user.store";
+import type { FormInstance, FormRules } from "element-plus";
 
-  defineOptions({ name: 'UserCenter' })
+defineOptions({ name: "UserCenter" });
 
-  const userStore = useUserStore()
-  const userInfo = computed(() => userStore.getUserInfo)
+const userStore = useUserStore();
+const userInfo = computed(() => userStore.getUserInfo);
 
-  const isEdit = ref(false)
-  const isEditPwd = ref(false)
-  const date = ref('')
-  const ruleFormRef = ref<FormInstance>()
+const isEdit = ref(false);
+const isEditPwd = ref(false);
+const date = ref("");
+const ruleFormRef = ref<FormInstance>();
 
-  /**
-   * 用户信息表单
-   */
-  const form = reactive({
-    realName: 'John Snow',
-    nikeName: '皮卡丘',
-    email: '59301283@mall.com',
-    mobile: '18888888888',
-    address: '广东省深圳市宝安区西乡街道101栋201',
-    sex: '2',
-    des: 'Art Design Pro 是一款兼具设计美学与高效开发的后台系统.'
-  })
+/**
+ * 用户信息表单
+ */
+const form = reactive({
+  realName: "John Snow",
+  nikeName: "皮卡丘",
+  email: "59301283@mall.com",
+  mobile: "18888888888",
+  address: "广东省深圳市宝安区西乡街道101栋201",
+  sex: "2",
+  des: "Art Design Pro 是一款兼具设计美学与高效开发的后台系统.",
+});
 
-  /**
-   * 密码修改表单
-   */
-  const pwdForm = reactive({
-    password: '123456',
-    newPassword: '123456',
-    confirmPassword: '123456'
-  })
+/**
+ * 密码修改表单
+ */
+const pwdForm = reactive({
+  password: "123456",
+  newPassword: "123456",
+  confirmPassword: "123456",
+});
 
-  /**
-   * 表单验证规则
-   */
-  const rules = reactive<FormRules>({
-    realName: [
-      { required: true, message: '请输入姓名', trigger: 'blur' },
-      { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
-    ],
-    nikeName: [
-      { required: true, message: '请输入昵称', trigger: 'blur' },
-      { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
-    ],
-    email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
-    mobile: [{ required: true, message: '请输入手机号码', trigger: 'blur' }],
-    address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
-    sex: [{ required: true, message: '请选择性别', trigger: 'blur' }]
-  })
+/**
+ * 表单验证规则
+ */
+const rules = reactive<FormRules>({
+  realName: [
+    { required: true, message: "请输入姓名", trigger: "blur" },
+    { min: 2, max: 50, message: "长度在 2 到 50 个字符", trigger: "blur" },
+  ],
+  nikeName: [
+    { required: true, message: "请输入昵称", trigger: "blur" },
+    { min: 2, max: 50, message: "长度在 2 到 50 个字符", trigger: "blur" },
+  ],
+  email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
+  mobile: [{ required: true, message: "请输入手机号码", trigger: "blur" }],
+  address: [{ required: true, message: "请输入地址", trigger: "blur" }],
+  sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
+});
 
-  /**
-   * 性别选项
-   */
-  const options = [
-    { value: '1', label: '男' },
-    { value: '2', label: '女' }
-  ]
+/**
+ * 性别选项
+ */
+const options = [
+  { value: "1", label: "男" },
+  { value: "2", label: "女" },
+];
 
-  /**
-   * 用户标签列表
-   */
-  const lableList: Array<string> = ['专注设计', '很有想法', '辣~', '大长腿', '川妹子', '海纳百川']
+/**
+ * 用户标签列表
+ */
+const lableList: Array<string> = ["专注设计", "很有想法", "辣~", "大长腿", "川妹子", "海纳百川"];
 
-  onMounted(() => {
-    getDate()
-  })
+onMounted(() => {
+  getDate();
+});
 
-  /**
-   * 根据当前时间获取问候语
-   */
-  const getDate = () => {
-    const h = new Date().getHours()
+/**
+ * 根据当前时间获取问候语
+ */
+const getDate = () => {
+  const h = new Date().getHours();
 
-    if (h >= 6 && h < 9) date.value = '早上好'
-    else if (h >= 9 && h < 11) date.value = '上午好'
-    else if (h >= 11 && h < 13) date.value = '中午好'
-    else if (h >= 13 && h < 18) date.value = '下午好'
-    else if (h >= 18 && h < 24) date.value = '晚上好'
-    else date.value = '很晚了，早点睡'
-  }
+  if (h >= 6 && h < 9) date.value = "早上好";
+  else if (h >= 9 && h < 11) date.value = "上午好";
+  else if (h >= 11 && h < 13) date.value = "中午好";
+  else if (h >= 13 && h < 18) date.value = "下午好";
+  else if (h >= 18 && h < 24) date.value = "晚上好";
+  else date.value = "很晚了，早点睡";
+};
 
-  /**
-   * 切换用户信息编辑状态
-   */
-  const edit = () => {
-    isEdit.value = !isEdit.value
-  }
+/**
+ * 切换用户信息编辑状态
+ */
+const edit = () => {
+  isEdit.value = !isEdit.value;
+};
 
-  /**
-   * 切换密码编辑状态
-   */
-  const editPwd = () => {
-    isEditPwd.value = !isEditPwd.value
-  }
+/**
+ * 切换密码编辑状态
+ */
+const editPwd = () => {
+  isEditPwd.value = !isEditPwd.value;
+};
 </script>
diff --git a/frontend/new-web/src/views/system/user/index.vue b/frontend/new-web/src/views/system/user/index.vue
index 6995d23f..b08f5ed6 100644
--- a/frontend/new-web/src/views/system/user/index.vue
+++ b/frontend/new-web/src/views/system/user/index.vue
@@ -27,8 +27,7 @@
         @selection-change="handleSelectionChange"
         @pagination:size-change="handleSizeChange"
         @pagination:current-change="handleCurrentChange"
-      >
-      </ArtTable>
+      ></ArtTable>
 
       <!-- 用户弹窗 -->
       <UserDialog
@@ -42,218 +41,218 @@
 </template>
 
 <script setup lang="ts">
-  import ArtButtonTable from '@/components/core/forms/art-button-table/index.vue'
-  import { ACCOUNT_TABLE_DATA } from '@/mock/temp/formData'
-  import { useTable } from '@/hooks/core/useTable'
-  import { fetchGetUserList } from '@/api/system-manage'
-  import UserSearch from './modules/user-search.vue'
-  import UserDialog from './modules/user-dialog.vue'
-  import { ElTag, ElMessageBox, ElImage } from 'element-plus'
-  import { DialogType } from '@/types'
+import ArtButtonTable from "@/components/core/forms/art-button-table/index.vue";
+import { ACCOUNT_TABLE_DATA } from "@/mock/temp/formData";
+import { useTable } from "@/hooks/core/useTable";
+import { fetchGetUserList } from "@/api/system-manage";
+import UserSearch from "./modules/user-search.vue";
+import UserDialog from "./modules/user-dialog.vue";
+import { ElTag, ElMessageBox, ElImage } from "element-plus";
+import { DialogType } from "@/types";
 
-  defineOptions({ name: 'User' })
+defineOptions({ name: "User" });
 
-  type UserListItem = Api.SystemManage.UserListItem
+type UserListItem = UserListItem;
 
-  // 弹窗相关
-  const dialogType = ref<DialogType>('add')
-  const dialogVisible = ref(false)
-  const currentUserData = ref<Partial<UserListItem>>({})
+// 弹窗相关
+const dialogType = ref<DialogType>("add");
+const dialogVisible = ref(false);
+const currentUserData = ref<Partial<UserListItem>>({});
 
-  // 选中行
-  const selectedRows = ref<UserListItem[]>([])
+// 选中行
+const selectedRows = ref<UserListItem[]>([]);
 
-  // 搜索表单
-  const searchForm = ref({
-    userName: undefined,
-    userGender: undefined,
-    userPhone: undefined,
-    userEmail: undefined,
-    status: '1'
-  })
+// 搜索表单
+const searchForm = ref({
+  userName: undefined,
+  userGender: undefined,
+  userPhone: undefined,
+  userEmail: undefined,
+  status: "1",
+});
 
-  // 用户状态配置
-  const USER_STATUS_CONFIG = {
-    '1': { type: 'success' as const, text: '在线' },
-    '2': { type: 'info' as const, text: '离线' },
-    '3': { type: 'warning' as const, text: '异常' },
-    '4': { type: 'danger' as const, text: '注销' }
-  } as const
+// 用户状态配置
+const USER_STATUS_CONFIG = {
+  "1": { type: "success" as const, text: "在线" },
+  "2": { type: "info" as const, text: "离线" },
+  "3": { type: "warning" as const, text: "异常" },
+  "4": { type: "danger" as const, text: "注销" },
+} as const;
 
-  /**
-   * 获取用户状态配置
-   */
-  const getUserStatusConfig = (status: string) => {
-    return (
-      USER_STATUS_CONFIG[status as keyof typeof USER_STATUS_CONFIG] || {
-        type: 'info' as const,
-        text: '未知'
-      }
-    )
-  }
+/**
+ * 获取用户状态配置
+ */
+const getUserStatusConfig = (status: string) => {
+  return (
+    USER_STATUS_CONFIG[status as keyof typeof USER_STATUS_CONFIG] || {
+      type: "info" as const,
+      text: "未知",
+    }
+  );
+};
 
-  const {
-    columns,
-    columnChecks,
-    data,
-    loading,
-    pagination,
-    getData,
-    replaceSearchParams,
-    resetSearchParams,
-    handleSizeChange,
-    handleCurrentChange,
-    refreshData
-  } = useTable({
-    // 核心配置
-    core: {
-      apiFn: fetchGetUserList,
-      apiParams: {
-        current: 1,
-        size: 20,
-        ...searchForm.value
-      },
-      // 自定义分页字段映射，未设置时将使用全局配置 tableConfig.ts 中的 paginationKey
-      // paginationKey: {
-      //   current: 'pageNum',
-      //   size: 'pageSize'
-      // },
-      columnsFactory: () => [
-        { type: 'selection' }, // 勾选列
-        { type: 'index', width: 60, label: '序号' }, // 序号
-        {
-          prop: 'userInfo',
-          label: '用户名',
-          width: 280,
-          // visible: false, // 默认是否显示列
-          formatter: (row) => {
-            return h('div', { class: 'user flex-c' }, [
-              h(ElImage, {
-                class: 'size-9.5 rounded-md',
-                src: row.avatar,
-                previewSrcList: [row.avatar],
-                // 图片预览是否插入至 body 元素上，用于解决表格内部图片预览样式异常
-                previewTeleported: true
-              }),
-              h('div', { class: 'ml-2' }, [
-                h('p', { class: 'user-name' }, row.userName),
-                h('p', { class: 'email' }, row.userEmail)
-              ])
-            ])
-          }
-        },
-        {
-          prop: 'userGender',
-          label: '性别',
-          sortable: true,
-          formatter: (row) => row.userGender
-        },
-        { prop: 'userPhone', label: '手机号' },
-        {
-          prop: 'status',
-          label: '状态',
-          formatter: (row) => {
-            const statusConfig = getUserStatusConfig(row.status)
-            return h(ElTag, { type: statusConfig.type }, () => statusConfig.text)
-          }
-        },
-        {
-          prop: 'createTime',
-          label: '创建日期',
-          sortable: true
-        },
-        {
-          prop: 'operation',
-          label: '操作',
-          width: 120,
-          fixed: 'right', // 固定列
-          formatter: (row) =>
-            h('div', [
-              h(ArtButtonTable, {
-                type: 'edit',
-                onClick: () => showDialog('edit', row)
-              }),
-              h(ArtButtonTable, {
-                type: 'delete',
-                onClick: () => deleteUser(row)
-              })
-            ])
-        }
-      ]
+const {
+  columns,
+  columnChecks,
+  data,
+  loading,
+  pagination,
+  getData,
+  replaceSearchParams,
+  resetSearchParams,
+  handleSizeChange,
+  handleCurrentChange,
+  refreshData,
+} = useTable({
+  // 核心配置
+  core: {
+    apiFn: fetchGetUserList,
+    apiParams: {
+      current: 1,
+      size: 20,
+      ...searchForm.value,
     },
-    // 数据处理
-    transform: {
-      // 数据转换器 - 替换头像
-      dataTransformer: (records) => {
-        // 类型守卫检查
-        if (!Array.isArray(records)) {
-          console.warn('数据转换器: 期望数组类型，实际收到:', typeof records)
-          return []
-        }
-
-        // 使用本地头像替换接口返回的头像
-        return records.map((item, index: number) => {
-          return {
-            ...item,
-            avatar: ACCOUNT_TABLE_DATA[index % ACCOUNT_TABLE_DATA.length].avatar
-          }
-        })
+    // 自定义分页字段映射，未设置时将使用全局配置 tableConfig.ts 中的 paginationKey
+    // paginationKey: {
+    //   current: 'pageNum',
+    //   size: 'pageSize'
+    // },
+    columnsFactory: () => [
+      { type: "selection" }, // 勾选列
+      { type: "index", width: 60, label: "序号" }, // 序号
+      {
+        prop: "userInfo",
+        label: "用户名",
+        width: 280,
+        // visible: false, // 默认是否显示列
+        formatter: (row) => {
+          return h("div", { class: "user flex-c" }, [
+            h(ElImage, {
+              class: "size-9.5 rounded-md",
+              src: row.avatar,
+              previewSrcList: [row.avatar],
+              // 图片预览是否插入至 body 元素上，用于解决表格内部图片预览样式异常
+              previewTeleported: true,
+            }),
+            h("div", { class: "ml-2" }, [
+              h("p", { class: "user-name" }, row.userName),
+              h("p", { class: "email" }, row.userEmail),
+            ]),
+          ]);
+        },
+      },
+      {
+        prop: "userGender",
+        label: "性别",
+        sortable: true,
+        formatter: (row) => row.userGender,
+      },
+      { prop: "userPhone", label: "手机号" },
+      {
+        prop: "status",
+        label: "状态",
+        formatter: (row) => {
+          const statusConfig = getUserStatusConfig(row.status);
+          return h(ElTag, { type: statusConfig.type }, () => statusConfig.text);
+        },
+      },
+      {
+        prop: "createTime",
+        label: "创建日期",
+        sortable: true,
+      },
+      {
+        prop: "operation",
+        label: "操作",
+        width: 120,
+        fixed: "right", // 固定列
+        formatter: (row) =>
+          h("div", [
+            h(ArtButtonTable, {
+              type: "edit",
+              onClick: () => showDialog("edit", row),
+            }),
+            h(ArtButtonTable, {
+              type: "delete",
+              onClick: () => deleteUser(row),
+            }),
+          ]),
+      },
+    ],
+  },
+  // 数据处理
+  transform: {
+    // 数据转换器 - 替换头像
+    dataTransformer: (records) => {
+      // 类型守卫检查
+      if (!Array.isArray(records)) {
+        console.warn("数据转换器: 期望数组类型，实际收到:", typeof records);
+        return [];
       }
-    }
-  })
 
-  /**
-   * 搜索处理
-   * @param params 参数
-   */
-  const handleSearch = (params: Api.SystemManage.UserSearchParams) => {
-    replaceSearchParams(params)
-    getData()
-  }
+      // 使用本地头像替换接口返回的头像
+      return records.map((item, index: number) => {
+        return {
+          ...item,
+          avatar: ACCOUNT_TABLE_DATA[index % ACCOUNT_TABLE_DATA.length].avatar,
+        };
+      });
+    },
+  },
+});
 
-  /**
-   * 显示用户弹窗
-   */
-  const showDialog = (type: DialogType, row?: UserListItem): void => {
-    console.log('打开弹窗:', { type, row })
-    dialogType.value = type
-    currentUserData.value = row || {}
-    nextTick(() => {
-      dialogVisible.value = true
-    })
-  }
+/**
+ * 搜索处理
+ * @param params 参数
+ */
+const handleSearch = (params: UserSearchParams) => {
+  replaceSearchParams(params);
+  getData();
+};
 
-  /**
-   * 删除用户
-   */
-  const deleteUser = (row: UserListItem): void => {
-    console.log('删除用户:', row)
-    ElMessageBox.confirm(`确定要注销该用户吗？`, '注销用户', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'error'
-    }).then(() => {
-      ElMessage.success('注销成功')
-    })
-  }
+/**
+ * 显示用户弹窗
+ */
+const showDialog = (type: DialogType, row?: UserListItem): void => {
+  console.log("打开弹窗:", { type, row });
+  dialogType.value = type;
+  currentUserData.value = row || {};
+  nextTick(() => {
+    dialogVisible.value = true;
+  });
+};
 
-  /**
-   * 处理弹窗提交事件
-   */
-  const handleDialogSubmit = async () => {
-    try {
-      dialogVisible.value = false
-      currentUserData.value = {}
-    } catch (error) {
-      console.error('提交失败:', error)
-    }
-  }
+/**
+ * 删除用户
+ */
+const deleteUser = (row: UserListItem): void => {
+  console.log("删除用户:", row);
+  ElMessageBox.confirm(`确定要注销该用户吗？`, "注销用户", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "error",
+  }).then(() => {
+    ElMessage.success("注销成功");
+  });
+};
 
-  /**
-   * 处理表格行选择变化
-   */
-  const handleSelectionChange = (selection: UserListItem[]): void => {
-    selectedRows.value = selection
-    console.log('选中行数据:', selectedRows.value)
+/**
+ * 处理弹窗提交事件
+ */
+const handleDialogSubmit = async () => {
+  try {
+    dialogVisible.value = false;
+    currentUserData.value = {};
+  } catch (error) {
+    console.error("提交失败:", error);
   }
+};
+
+/**
+ * 处理表格行选择变化
+ */
+const handleSelectionChange = (selection: UserListItem[]): void => {
+  selectedRows.value = selection;
+  console.log("选中行数据:", selectedRows.value);
+};
 </script>
diff --git a/frontend/new-web/src/views/system/user/modules/user-dialog.vue b/frontend/new-web/src/views/system/user/modules/user-dialog.vue
index 03cab4ff..8bbe381b 100644
--- a/frontend/new-web/src/views/system/user/modules/user-dialog.vue
+++ b/frontend/new-web/src/views/system/user/modules/user-dialog.vue
@@ -39,105 +39,105 @@
 </template>
 
 <script setup lang="ts">
-  import { ROLE_LIST_DATA } from '@/mock/temp/formData'
-  import type { FormInstance, FormRules } from 'element-plus'
+import { ROLE_LIST_DATA } from "@/mock/temp/formData";
+import type { FormInstance, FormRules } from "element-plus";
 
-  interface Props {
-    visible: boolean
-    type: string
-    userData?: Partial<Api.SystemManage.UserListItem>
-  }
+interface Props {
+  visible: boolean;
+  type: string;
+  userData?: Partial<UserListItem>;
+}
 
-  interface Emits {
-    (e: 'update:visible', value: boolean): void
-    (e: 'submit'): void
-  }
+interface Emits {
+  (e: "update:visible", value: boolean): void;
+  (e: "submit"): void;
+}
 
-  const props = defineProps<Props>()
-  const emit = defineEmits<Emits>()
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
 
-  // 角色列表数据
-  const roleList = ref(ROLE_LIST_DATA)
+// 角色列表数据
+const roleList = ref(ROLE_LIST_DATA);
 
-  // 对话框显示控制
-  const dialogVisible = computed({
-    get: () => props.visible,
-    set: (value) => emit('update:visible', value)
-  })
+// 对话框显示控制
+const dialogVisible = computed({
+  get: () => props.visible,
+  set: (value) => emit("update:visible", value),
+});
 
-  const dialogType = computed(() => props.type)
+const dialogType = computed(() => props.type);
 
-  // 表单实例
-  const formRef = ref<FormInstance>()
+// 表单实例
+const formRef = ref<FormInstance>();
 
-  // 表单数据
-  const formData = reactive({
-    username: '',
-    phone: '',
-    gender: '男',
-    role: [] as string[]
-  })
+// 表单数据
+const formData = reactive({
+  username: "",
+  phone: "",
+  gender: "男",
+  role: [] as string[],
+});
 
-  // 表单验证规则
-  const rules: FormRules = {
-    username: [
-      { required: true, message: '请输入用户名', trigger: 'blur' },
-      { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
-    ],
-    phone: [
-      { required: true, message: '请输入手机号', trigger: 'blur' },
-      { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式', trigger: 'blur' }
-    ],
-    gender: [{ required: true, message: '请选择性别', trigger: 'blur' }],
-    role: [{ required: true, message: '请选择角色', trigger: 'blur' }]
-  }
+// 表单验证规则
+const rules: FormRules = {
+  username: [
+    { required: true, message: "请输入用户名", trigger: "blur" },
+    { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" },
+  ],
+  phone: [
+    { required: true, message: "请输入手机号", trigger: "blur" },
+    { pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号格式", trigger: "blur" },
+  ],
+  gender: [{ required: true, message: "请选择性别", trigger: "blur" }],
+  role: [{ required: true, message: "请选择角色", trigger: "blur" }],
+};
 
-  /**
-   * 初始化表单数据
-   * 根据对话框类型（新增/编辑）填充表单
-   */
-  const initFormData = () => {
-    const isEdit = props.type === 'edit' && props.userData
-    const row = props.userData
+/**
+ * 初始化表单数据
+ * 根据对话框类型（新增/编辑）填充表单
+ */
+const initFormData = () => {
+  const isEdit = props.type === "edit" && props.userData;
+  const row = props.userData;
 
-    Object.assign(formData, {
-      username: isEdit && row ? row.userName || '' : '',
-      phone: isEdit && row ? row.userPhone || '' : '',
-      gender: isEdit && row ? row.userGender || '男' : '男',
-      role: isEdit && row ? (Array.isArray(row.userRoles) ? row.userRoles : []) : []
-    })
-  }
+  Object.assign(formData, {
+    username: isEdit && row ? row.userName || "" : "",
+    phone: isEdit && row ? row.userPhone || "" : "",
+    gender: isEdit && row ? row.userGender || "男" : "男",
+    role: isEdit && row ? (Array.isArray(row.userRoles) ? row.userRoles : []) : [],
+  });
+};
 
-  /**
-   * 监听对话框状态变化
-   * 当对话框打开时初始化表单数据并清除验证状态
-   */
-  watch(
-    () => [props.visible, props.type, props.userData],
-    ([visible]) => {
-      if (visible) {
-        initFormData()
-        nextTick(() => {
-          formRef.value?.clearValidate()
-        })
-      }
-    },
-    { immediate: true }
-  )
+/**
+ * 监听对话框状态变化
+ * 当对话框打开时初始化表单数据并清除验证状态
+ */
+watch(
+  () => [props.visible, props.type, props.userData],
+  ([visible]) => {
+    if (visible) {
+      initFormData();
+      nextTick(() => {
+        formRef.value?.clearValidate();
+      });
+    }
+  },
+  { immediate: true }
+);
 
-  /**
-   * 提交表单
-   * 验证通过后触发提交事件
-   */
-  const handleSubmit = async () => {
-    if (!formRef.value) return
+/**
+ * 提交表单
+ * 验证通过后触发提交事件
+ */
+const handleSubmit = async () => {
+  if (!formRef.value) return;
 
-    await formRef.value.validate((valid) => {
-      if (valid) {
-        ElMessage.success(dialogType.value === 'add' ? '添加成功' : '更新成功')
-        dialogVisible.value = false
-        emit('submit')
-      }
-    })
-  }
+  await formRef.value.validate((valid) => {
+    if (valid) {
+      ElMessage.success(dialogType.value === "add" ? "添加成功" : "更新成功");
+      dialogVisible.value = false;
+      emit("submit");
+    }
+  });
+};
 </script>
diff --git a/frontend/new-web/src/views/system/user/modules/user-search.vue b/frontend/new-web/src/views/system/user/modules/user-search.vue
index 7282a8e6..9b90601b 100644
--- a/frontend/new-web/src/views/system/user/modules/user-search.vue
+++ b/frontend/new-web/src/views/system/user/modules/user-search.vue
@@ -6,107 +6,106 @@
     :rules="rules"
     @reset="handleReset"
     @search="handleSearch"
-  >
-  </ArtSearchBar>
+  ></ArtSearchBar>
 </template>
 
 <script setup lang="ts">
-  interface Props {
-    modelValue: Api.SystemManage.UserSearchParams
-  }
-  interface Emits {
-    (e: 'update:modelValue', value: Api.SystemManage.UserSearchParams): void
-    (e: 'search', params: Api.SystemManage.UserSearchParams): void
-    (e: 'reset'): void
-  }
-  const props = defineProps<Props>()
-  const emit = defineEmits<Emits>()
+interface Props {
+  modelValue: UserSearchParams;
+}
+interface Emits {
+  (e: "update:modelValue", value: UserSearchParams): void;
+  (e: "search", params: UserSearchParams): void;
+  (e: "reset"): void;
+}
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
 
-  // 表单数据双向绑定
-  const searchBarRef = ref()
-  const formData = computed({
-    get: () => props.modelValue,
-    set: (val) => emit('update:modelValue', val)
-  })
+// 表单数据双向绑定
+const searchBarRef = ref();
+const formData = computed({
+  get: () => props.modelValue,
+  set: (val) => emit("update:modelValue", val),
+});
 
-  // 校验规则
-  const rules = {
-    // userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
-  }
+// 校验规则
+const rules = {
+  // userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
+};
 
-  // 动态 options
-  const statusOptions = ref<{ label: string; value: string; disabled?: boolean }[]>([])
+// 动态 options
+const statusOptions = ref<{ label: string; value: string; disabled?: boolean }[]>([]);
 
-  // 模拟接口返回状态数据
-  function fetchStatusOptions(): Promise<typeof statusOptions.value> {
-    return new Promise((resolve) => {
-      setTimeout(() => {
-        resolve([
-          { label: '在线', value: '1' },
-          { label: '离线', value: '2' },
-          { label: '异常', value: '3' },
-          { label: '注销', value: '4' }
-        ])
-      }, 1000)
-    })
-  }
+// 模拟接口返回状态数据
+function fetchStatusOptions(): Promise<typeof statusOptions.value> {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve([
+        { label: "在线", value: "1" },
+        { label: "离线", value: "2" },
+        { label: "异常", value: "3" },
+        { label: "注销", value: "4" },
+      ]);
+    }, 1000);
+  });
+}
 
-  onMounted(async () => {
-    statusOptions.value = await fetchStatusOptions()
-  })
+onMounted(async () => {
+  statusOptions.value = await fetchStatusOptions();
+});
 
-  // 表单配置
-  const formItems = computed(() => [
-    {
-      label: '用户名',
-      key: 'userName',
-      type: 'input',
-      placeholder: '请输入用户名',
-      clearable: true
+// 表单配置
+const formItems = computed(() => [
+  {
+    label: "用户名",
+    key: "userName",
+    type: "input",
+    placeholder: "请输入用户名",
+    clearable: true,
+  },
+  {
+    label: "手机号",
+    key: "userPhone",
+    type: "input",
+    props: { placeholder: "请输入手机号", maxlength: "11" },
+  },
+  {
+    label: "邮箱",
+    key: "userEmail",
+    type: "input",
+    props: { placeholder: "请输入邮箱" },
+  },
+  {
+    label: "状态",
+    key: "status",
+    type: "select",
+    props: {
+      placeholder: "请选择状态",
+      options: statusOptions.value,
     },
-    {
-      label: '手机号',
-      key: 'userPhone',
-      type: 'input',
-      props: { placeholder: '请输入手机号', maxlength: '11' }
+  },
+  {
+    label: "性别",
+    key: "userGender",
+    type: "radiogroup",
+    props: {
+      options: [
+        { label: "男", value: "1" },
+        { label: "女", value: "2" },
+      ],
     },
-    {
-      label: '邮箱',
-      key: 'userEmail',
-      type: 'input',
-      props: { placeholder: '请输入邮箱' }
-    },
-    {
-      label: '状态',
-      key: 'status',
-      type: 'select',
-      props: {
-        placeholder: '请选择状态',
-        options: statusOptions.value
-      }
-    },
-    {
-      label: '性别',
-      key: 'userGender',
-      type: 'radiogroup',
-      props: {
-        options: [
-          { label: '男', value: '1' },
-          { label: '女', value: '2' }
-        ]
-      }
-    }
-  ])
+  },
+]);
 
-  // 事件
-  function handleReset() {
-    console.log('重置表单')
-    emit('reset')
-  }
+// 事件
+function handleReset() {
+  console.log("重置表单");
+  emit("reset");
+}
 
-  async function handleSearch(params: Api.SystemManage.UserSearchParams) {
-    await searchBarRef.value.validate()
-    emit('search', params)
-    console.log('表单数据', params)
-  }
+async function handleSearch(params: UserSearchParams) {
+  await searchBarRef.value.validate();
+  emit("search", params);
+  console.log("表单数据", params);
+}
 </script>
diff --git a/frontend/new-web/src/views/template/banners/index.vue b/frontend/new-web/src/views/template/banners/index.vue
index 27021565..35332353 100644
--- a/frontend/new-web/src/views/template/banners/index.vue
+++ b/frontend/new-web/src/views/template/banners/index.vue
@@ -20,7 +20,7 @@
             text: '开始探索',
             color: 'var(--art-success)',
             textColor: '#fff',
-            radius: '6px'
+            radius: '6px',
           }"
           @buttonClick="handleBannerClick"
         />
@@ -39,10 +39,10 @@
             show: true,
             text: '立即参与',
             color: '#FF5A89',
-            textColor: '#fff'
+            textColor: '#fff',
           }"
           :imageConfig="{
-            src: icon3
+            src: icon3,
           }"
         />
       </ElCol>
@@ -50,7 +50,7 @@
         <ArtBasicBanner
           boxStyle="!bg-[#70B1FF]"
           :imageConfig="{
-            src: icon5
+            src: icon5,
           }"
         >
           <template #title>
@@ -59,15 +59,15 @@
 
           <template #subtitle>
             <div style="margin-top: 12px">
-              <p style="position: relative; z-index: 10; font-style: italic"
-                >灵活配置，强大扩展，支持自定义插槽内容</p
-              >
+              <p style="position: relative; z-index: 10; font-style: italic">
+                灵活配置，强大扩展，支持自定义插槽内容
+              </p>
             </div>
           </template>
 
           <template #button>
             <div style="margin-top: 12px">
-              <ElButton type="primary" color="#04A1FF"> 查看文档 </ElButton>
+              <ElButton type="primary" color="#04A1FF">查看文档</ElButton>
             </div>
           </template>
         </ArtBasicBanner>
@@ -101,7 +101,7 @@
             show: true,
             text: '查看详情',
             color: 'var(--art-warning)',
-            textColor: '#fff'
+            textColor: '#fff',
           }"
         />
       </ElCol>
@@ -114,7 +114,7 @@
             show: true,
             text: '下载报告',
             color: 'var(--art-error)',
-            textColor: '#fff'
+            textColor: '#fff',
           }"
         />
       </ElCol>
@@ -127,13 +127,13 @@
             show: true,
             text: '立即更新',
             color: 'var(--theme-color)',
-            textColor: '#fff'
+            textColor: '#fff',
           }"
           :cancelButton="{
             show: true,
             text: '稍后提醒',
             color: '#eee',
-            textColor: '#333'
+            textColor: '#333',
           }"
           @click="handleConfirm"
           @cancel="handleCancel"
@@ -144,74 +144,74 @@
 </template>
 
 <script setup lang="ts">
-  import icon2 from '@imgs/3d/icon2.webp'
-  import icon3 from '@imgs/3d/icon3.webp'
-  import icon4 from '@imgs/3d/icon4.webp'
-  import icon5 from '@imgs/3d/icon7.webp'
+import icon2 from "@imgs/3d/icon2.webp";
+import icon3 from "@imgs/3d/icon3.webp";
+import icon4 from "@imgs/3d/icon4.webp";
+import icon5 from "@imgs/3d/icon7.webp";
 
-  defineOptions({ name: 'TemplateBanners' })
+defineOptions({ name: "TemplateBanners" });
 
-  /**
-   * 处理横幅点击事件
-   */
-  const handleBannerClick = () => {
-    console.log('banner clicked')
-  }
+/**
+ * 处理横幅点击事件
+ */
+const handleBannerClick = () => {
+  console.log("banner clicked");
+};
 
-  /**
-   * 处理确认按钮点击事件
-   */
-  const handleConfirm = () => {
-    console.log('confirm clicked')
-  }
+/**
+ * 处理确认按钮点击事件
+ */
+const handleConfirm = () => {
+  console.log("confirm clicked");
+};
 
-  /**
-   * 处理取消按钮点击事件
-   */
-  const handleCancel = () => {
-    console.log('cancel clicked')
-  }
+/**
+ * 处理取消按钮点击事件
+ */
+const handleCancel = () => {
+  console.log("cancel clicked");
+};
 
-  /**
-   * 预设横幅配置
-   * 提供常用的横幅样式配置，可直接通过 v-bind 使用
-   */
-  const PresetBanners = {
-    marketing: {
-      title: '限时优惠活动',
-      subtitle: '精选商品 48 小时闪购，最高享受 7 折优惠，数量有限！',
-      titleColor: 'var(--art-gray-900)',
-      subtitleColor: 'var(--art-gray-900)',
-      boxStyle: '!bg-success/15',
-      meteorConfig: { enabled: true, count: 15 },
-      buttonConfig: {
-        show: true,
-        text: '立即抢购',
-        color: 'var(--art-success)',
-        textColor: '#fff'
-      }
+/**
+ * 预设横幅配置
+ * 提供常用的横幅样式配置，可直接通过 v-bind 使用
+ */
+const PresetBanners = {
+  marketing: {
+    title: "限时优惠活动",
+    subtitle: "精选商品 48 小时闪购，最高享受 7 折优惠，数量有限！",
+    titleColor: "var(--art-gray-900)",
+    subtitleColor: "var(--art-gray-900)",
+    boxStyle: "!bg-success/15",
+    meteorConfig: { enabled: true, count: 15 },
+    buttonConfig: {
+      show: true,
+      text: "立即抢购",
+      color: "var(--art-success)",
+      textColor: "#fff",
     },
-    info: {
-      title: '服务到期提醒',
-      subtitle: '您的高级服务将在 7 天后到期，请及时续费以继续享受完整功能。',
-      titleColor: 'var(--art-gray-900)',
-      subtitleColor: 'var(--art-gray-900)',
-      boxStyle: '!bg-theme/15',
-      meteorConfig: { enabled: true, count: 15 },
-      buttonConfig: {
-        show: true,
-        text: '立即续费',
-        color: 'var(--art-secondary)',
-        textColor: '#fff'
-      }
-    }
-  } as const
+  },
+  info: {
+    title: "服务到期提醒",
+    subtitle: "您的高级服务将在 7 天后到期，请及时续费以继续享受完整功能。",
+    titleColor: "var(--art-gray-900)",
+    subtitleColor: "var(--art-gray-900)",
+    boxStyle: "!bg-theme/15",
+    meteorConfig: { enabled: true, count: 15 },
+    buttonConfig: {
+      show: true,
+      text: "立即续费",
+      color: "var(--art-secondary)",
+      textColor: "#fff",
+    },
+  },
+} as const;
 </script>
 
 <style scoped>
-  @reference '@styles/core/tailwind.css';
+@reference '@styles/core/tailwind.css';
 
-  .page-title {
-    @apply my-5 text-xl font-medium first:mt-0;
-  }
+.page-title {
+  @apply my-5 text-xl font-medium first:mt-0;
+}
 </style>
diff --git a/frontend/new-web/src/views/template/calendar/index.vue b/frontend/new-web/src/views/template/calendar/index.vue
index 5a354033..269edc4a 100644
--- a/frontend/new-web/src/views/template/calendar/index.vue
+++ b/frontend/new-web/src/views/template/calendar/index.vue
@@ -67,9 +67,9 @@
       </ElForm>
       <template #footer>
         <span class="dialog-footer">
-          <ElButton v-if="isEditing" type="danger" @click="handleDeleteEvent"> 删除 </ElButton>
+          <ElButton v-if="isEditing" type="danger" @click="handleDeleteEvent">删除</ElButton>
           <ElButton type="primary" @click="handleSaveEvent">
-            {{ isEditing ? '更新' : '添加' }}
+            {{ isEditing ? "更新" : "添加" }}
           </ElButton>
         </span>
       </template>
@@ -78,211 +78,211 @@
 </template>
 
 <script setup lang="ts">
-  defineOptions({ name: 'TemplateCalendar' })
+defineOptions({ name: "TemplateCalendar" });
 
-  /**
-   * 日历事件类型定义
-   */
-  interface CalendarEvent {
-    date: string
-    endDate?: string
-    content: string
-    type?: 'primary' | 'success' | 'warning' | 'danger'
-    bgClass?: string
-    textClass?: string
+/**
+ * 日历事件类型定义
+ */
+interface CalendarEvent {
+  date: string;
+  endDate?: string;
+  content: string;
+  type?: "primary" | "success" | "warning" | "danger";
+  bgClass?: string;
+  textClass?: string;
+}
+
+/**
+ * 事件类型选项
+ */
+const eventTypes = [
+  { label: "基本", value: "primary" },
+  { label: "成功", value: "success" },
+  { label: "警告", value: "warning" },
+  { label: "危险", value: "danger" },
+] as const;
+
+const currentDate = ref(new Date("2025-02-07"));
+const dialogVisible = ref(false);
+const dialogTitle = ref("添加事件");
+const editingEventIndex = ref<number>(-1);
+
+/**
+ * 事件列表数据
+ */
+const events = ref<CalendarEvent[]>([
+  { date: "2025-02-01", content: "产品需求评审", type: "primary" },
+  {
+    date: "2025-02-03",
+    endDate: "2025-02-05",
+    content: "项目周报会议（跨日期）",
+    type: "primary",
+  },
+  { date: "2025-02-10", content: "瑜伽课程", type: "success" },
+  { date: "2025-02-15", content: "团队建设活动", type: "primary" },
+  { date: "2025-02-20", content: "健身训练", type: "success" },
+  { date: "2025-02-20", content: "代码评审", type: "danger" },
+  { date: "2025-02-20", content: "团队午餐", type: "primary" },
+  { date: "2025-02-20", content: "项目进度汇报", type: "warning" },
+  { date: "2025-02-28", content: "月度总结会", type: "warning" },
+]);
+
+/**
+ * 事件表单数据
+ */
+const eventForm = ref<CalendarEvent>({
+  date: "",
+  endDate: "",
+  content: "",
+  type: "primary",
+});
+
+/**
+ * 是否处于编辑模式
+ */
+const isEditing = computed(() => editingEventIndex.value >= 0);
+
+/**
+ * 格式化日期，只显示日
+ * @param date 完整日期字符串
+ * @returns 日期中的日部分
+ */
+const formatDate = (date: string) => date.split("-")[2];
+
+/**
+ * 获取事件类型对应的样式类名
+ * @param type 事件类型
+ * @returns 包含背景和文字颜色的类名对象
+ */
+const getEventClasses = (type: CalendarEvent["type"] = "primary") => {
+  const classMap = {
+    primary: { bgClass: "bg-theme/12", textClass: "text-theme" },
+    success: { bgClass: "bg-success/12", textClass: "text-success" },
+    warning: { bgClass: "bg-warning/12", textClass: "text-warning" },
+    danger: { bgClass: "bg-danger/12", textClass: "text-danger" },
+  };
+  return classMap[type];
+};
+
+/**
+ * 获取指定日期的所有事件
+ * 支持跨日期事件的显示
+ * @param day 日期字符串
+ * @returns 该日期的事件列表
+ */
+const getEvents = (day: string) => {
+  return events.value
+    .filter((event) => {
+      const eventDate = new Date(event.date);
+      const currentDate = new Date(day);
+      const endDate = event.endDate ? new Date(event.endDate) : new Date(event.date);
+
+      return currentDate >= eventDate && currentDate <= endDate;
+    })
+    .map((event) => {
+      const { bgClass, textClass } = getEventClasses(event.type);
+      return { ...event, bgClass, textClass };
+    });
+};
+
+/**
+ * 重置表单数据
+ */
+const resetForm = () => {
+  eventForm.value = {
+    date: "",
+    endDate: "",
+    content: "",
+    type: "primary",
+  };
+  editingEventIndex.value = -1;
+};
+
+/**
+ * 处理日历单元格点击事件
+ * 打开添加事件弹窗
+ * @param day 点击的日期
+ */
+const handleCellClick = (day: string) => {
+  dialogTitle.value = "添加事件";
+  eventForm.value = {
+    date: day,
+    content: "",
+    type: "primary",
+  };
+  editingEventIndex.value = -1;
+  dialogVisible.value = true;
+};
+
+/**
+ * 处理事件点击
+ * 打开编辑事件弹窗
+ * @param event 点击的事件对象
+ */
+const handleEventClick = (event: CalendarEvent) => {
+  dialogTitle.value = "编辑事件";
+  eventForm.value = { ...event };
+  editingEventIndex.value = events.value.findIndex(
+    (e) => e.date === event.date && e.content === event.content
+  );
+  dialogVisible.value = true;
+};
+
+/**
+ * 保存事件
+ * 根据编辑模式决定是新增还是更新
+ */
+const handleSaveEvent = () => {
+  if (!eventForm.value.content || !eventForm.value.date) return;
+
+  if (isEditing.value) {
+    events.value[editingEventIndex.value] = { ...eventForm.value };
+  } else {
+    events.value.push({ ...eventForm.value });
   }
 
-  /**
-   * 事件类型选项
-   */
-  const eventTypes = [
-    { label: '基本', value: 'primary' },
-    { label: '成功', value: 'success' },
-    { label: '警告', value: 'warning' },
-    { label: '危险', value: 'danger' }
-  ] as const
+  dialogVisible.value = false;
+  resetForm();
+};
 
-  const currentDate = ref(new Date('2025-02-07'))
-  const dialogVisible = ref(false)
-  const dialogTitle = ref('添加事件')
-  const editingEventIndex = ref<number>(-1)
-
-  /**
-   * 事件列表数据
-   */
-  const events = ref<CalendarEvent[]>([
-    { date: '2025-02-01', content: '产品需求评审', type: 'primary' },
-    {
-      date: '2025-02-03',
-      endDate: '2025-02-05',
-      content: '项目周报会议（跨日期）',
-      type: 'primary'
-    },
-    { date: '2025-02-10', content: '瑜伽课程', type: 'success' },
-    { date: '2025-02-15', content: '团队建设活动', type: 'primary' },
-    { date: '2025-02-20', content: '健身训练', type: 'success' },
-    { date: '2025-02-20', content: '代码评审', type: 'danger' },
-    { date: '2025-02-20', content: '团队午餐', type: 'primary' },
-    { date: '2025-02-20', content: '项目进度汇报', type: 'warning' },
-    { date: '2025-02-28', content: '月度总结会', type: 'warning' }
-  ])
-
-  /**
-   * 事件表单数据
-   */
-  const eventForm = ref<CalendarEvent>({
-    date: '',
-    endDate: '',
-    content: '',
-    type: 'primary'
-  })
-
-  /**
-   * 是否处于编辑模式
-   */
-  const isEditing = computed(() => editingEventIndex.value >= 0)
-
-  /**
-   * 格式化日期，只显示日
-   * @param date 完整日期字符串
-   * @returns 日期中的日部分
-   */
-  const formatDate = (date: string) => date.split('-')[2]
-
-  /**
-   * 获取事件类型对应的样式类名
-   * @param type 事件类型
-   * @returns 包含背景和文字颜色的类名对象
-   */
-  const getEventClasses = (type: CalendarEvent['type'] = 'primary') => {
-    const classMap = {
-      primary: { bgClass: 'bg-theme/12', textClass: 'text-theme' },
-      success: { bgClass: 'bg-success/12', textClass: 'text-success' },
-      warning: { bgClass: 'bg-warning/12', textClass: 'text-warning' },
-      danger: { bgClass: 'bg-danger/12', textClass: 'text-danger' }
-    }
-    return classMap[type]
-  }
-
-  /**
-   * 获取指定日期的所有事件
-   * 支持跨日期事件的显示
-   * @param day 日期字符串
-   * @returns 该日期的事件列表
-   */
-  const getEvents = (day: string) => {
-    return events.value
-      .filter((event) => {
-        const eventDate = new Date(event.date)
-        const currentDate = new Date(day)
-        const endDate = event.endDate ? new Date(event.endDate) : new Date(event.date)
-
-        return currentDate >= eventDate && currentDate <= endDate
-      })
-      .map((event) => {
-        const { bgClass, textClass } = getEventClasses(event.type)
-        return { ...event, bgClass, textClass }
-      })
-  }
-
-  /**
-   * 重置表单数据
-   */
-  const resetForm = () => {
-    eventForm.value = {
-      date: '',
-      endDate: '',
-      content: '',
-      type: 'primary'
-    }
-    editingEventIndex.value = -1
-  }
-
-  /**
-   * 处理日历单元格点击事件
-   * 打开添加事件弹窗
-   * @param day 点击的日期
-   */
-  const handleCellClick = (day: string) => {
-    dialogTitle.value = '添加事件'
-    eventForm.value = {
-      date: day,
-      content: '',
-      type: 'primary'
-    }
-    editingEventIndex.value = -1
-    dialogVisible.value = true
-  }
-
-  /**
-   * 处理事件点击
-   * 打开编辑事件弹窗
-   * @param event 点击的事件对象
-   */
-  const handleEventClick = (event: CalendarEvent) => {
-    dialogTitle.value = '编辑事件'
-    eventForm.value = { ...event }
-    editingEventIndex.value = events.value.findIndex(
-      (e) => e.date === event.date && e.content === event.content
-    )
-    dialogVisible.value = true
-  }
-
-  /**
-   * 保存事件
-   * 根据编辑模式决定是新增还是更新
-   */
-  const handleSaveEvent = () => {
-    if (!eventForm.value.content || !eventForm.value.date) return
-
-    if (isEditing.value) {
-      events.value[editingEventIndex.value] = { ...eventForm.value }
-    } else {
-      events.value.push({ ...eventForm.value })
-    }
-
-    dialogVisible.value = false
-    resetForm()
-  }
-
-  /**
-   * 删除事件
-   */
-  const handleDeleteEvent = () => {
-    if (isEditing.value) {
-      events.value.splice(editingEventIndex.value, 1)
-      dialogVisible.value = false
-      resetForm()
-    }
+/**
+ * 删除事件
+ */
+const handleDeleteEvent = () => {
+  if (isEditing.value) {
+    events.value.splice(editingEventIndex.value, 1);
+    dialogVisible.value = false;
+    resetForm();
   }
+};
 </script>
 
 <style scoped>
-  :deep(.el-calendar) {
-    height: 100%;
-  }
+:deep(.el-calendar) {
+  height: 100%;
+}
 
-  :deep(.el-calendar__body) {
-    height: calc(100% - 70px);
-  }
+:deep(.el-calendar__body) {
+  height: calc(100% - 70px);
+}
 
-  :deep(.el-calendar-table) {
-    height: 100%;
-  }
+:deep(.el-calendar-table) {
+  height: 100%;
+}
 
-  :deep(.is-selected) {
-    background-color: var(--el-color-warning-light-9) !important;
-  }
+:deep(.is-selected) {
+  background-color: var(--el-color-warning-light-9) !important;
+}
 
-  :deep(.el-calendar-day) {
-    height: 100%;
-  }
+:deep(.el-calendar-day) {
+  height: 100%;
+}
 
-  :deep(.el-calendar-day:hover) {
-    background-color: transparent !important;
-  }
+:deep(.el-calendar-day:hover) {
+  background-color: transparent !important;
+}
 
-  :deep(.el-dialog__body) {
-    padding-top: 20px;
-  }
+:deep(.el-dialog__body) {
+  padding-top: 20px;
+}
 </style>
diff --git a/frontend/new-web/src/views/template/cards/index.vue b/frontend/new-web/src/views/template/cards/index.vue
index 43087546..1e2396c8 100644
--- a/frontend/new-web/src/views/template/cards/index.vue
+++ b/frontend/new-web/src/views/template/cards/index.vue
@@ -198,253 +198,253 @@
 </template>
 
 <script setup lang="ts">
-  import cover1 from '@imgs/cover/img1.webp'
-  import cover2 from '@imgs/cover/img2.webp'
-  import cover3 from '@imgs/cover/img3.webp'
-  import cover4 from '@imgs/cover/img4.webp'
+import cover1 from "@imgs/cover/img1.webp";
+import cover2 from "@imgs/cover/img2.webp";
+import cover3 from "@imgs/cover/img3.webp";
+import cover4 from "@imgs/cover/img4.webp";
 
-  defineOptions({ name: 'TemplateCards' })
+defineOptions({ name: "TemplateCards" });
 
-  /**
-   * 统计卡片数据配置
-   */
-  const statsCards = [
-    {
-      id: 1,
-      title: '销售产品',
-      count: 1235,
-      description: '鞋子、牛仔裤、派对服装、手表',
-      icon: 'ri:bar-chart-box-line',
-      boxStyle: '!bg-theme/10',
-      customIconStyle: '!text-theme !text-3xl',
-      iconStyle: 'bg-info',
-      textColor: 'var(--theme-color)',
-      showArrow: false
-    },
-    {
-      id: 2,
-      title: '活跃用户',
-      count: 5000,
-      description: '日活跃用户超过5,000+',
-      icon: 'ri:account-box-2-line',
-      boxStyle: '!bg-warning/10',
-      customIconStyle: '!text-warning !text-3xl',
-      iconStyle: 'bg-warning',
-      textColor: 'var(--art-warning)',
-      showArrow: false
-    },
-    {
-      id: 3,
-      title: '总收入',
-      count: 35000,
-      description: '月收入超过¥350,000+',
-      icon: 'ri:money-cny-box-line',
-      boxStyle: '!bg-secondary/10',
-      customIconStyle: '!text-secondary !text-3xl',
-      iconStyle: 'bg-secondary',
-      textColor: 'var(--art-secondary)',
-      showArrow: false
-    },
-    {
-      id: 4,
-      title: '客户评价',
-      count: 4800,
-      description: '平均评分4.8/5',
-      icon: 'ri:message-3-line',
-      boxStyle: '!bg-error/10',
-      customIconStyle: '!text-error !text-3xl',
-      iconStyle: 'bg-error',
-      textColor: 'var(--art-error)',
-      showArrow: false
-    }
-  ]
+/**
+ * 统计卡片数据配置
+ */
+const statsCards = [
+  {
+    id: 1,
+    title: "销售产品",
+    count: 1235,
+    description: "鞋子、牛仔裤、派对服装、手表",
+    icon: "ri:bar-chart-box-line",
+    boxStyle: "!bg-theme/10",
+    customIconStyle: "!text-theme !text-3xl",
+    iconStyle: "bg-info",
+    textColor: "var(--theme-color)",
+    showArrow: false,
+  },
+  {
+    id: 2,
+    title: "活跃用户",
+    count: 5000,
+    description: "日活跃用户超过5,000+",
+    icon: "ri:account-box-2-line",
+    boxStyle: "!bg-warning/10",
+    customIconStyle: "!text-warning !text-3xl",
+    iconStyle: "bg-warning",
+    textColor: "var(--art-warning)",
+    showArrow: false,
+  },
+  {
+    id: 3,
+    title: "总收入",
+    count: 35000,
+    description: "月收入超过¥350,000+",
+    icon: "ri:money-cny-box-line",
+    boxStyle: "!bg-secondary/10",
+    customIconStyle: "!text-secondary !text-3xl",
+    iconStyle: "bg-secondary",
+    textColor: "var(--art-secondary)",
+    showArrow: false,
+  },
+  {
+    id: 4,
+    title: "客户评价",
+    count: 4800,
+    description: "平均评分4.8/5",
+    icon: "ri:message-3-line",
+    boxStyle: "!bg-error/10",
+    customIconStyle: "!text-error !text-3xl",
+    iconStyle: "bg-error",
+    textColor: "var(--art-error)",
+    showArrow: false,
+  },
+];
 
-  const progressCards = [
-    {
-      id: 1,
-      title: '完成进度',
-      percentage: 75,
-      color: 'var(--art-success)',
-      icon: 'ri:arrow-up-circle-line',
-      iconStyle: 'bg-success/12 text-success'
-    },
-    {
-      id: 2,
-      title: '项目进度',
-      percentage: 65,
-      color: 'var(--theme-color)',
-      icon: 'ri:twitch-line',
-      iconStyle: 'bg-theme/12 text-theme'
-    },
-    {
-      id: 3,
-      title: '学习进度',
-      percentage: 45,
-      color: 'var(--art-error)',
-      icon: 'ri:game-line',
-      iconStyle: '!bg-error/12 text-error'
-    },
-    {
-      id: 4,
-      title: '任务进度',
-      percentage: 90,
-      color: 'var(--art-secondary)',
-      icon: 'ri:flag-2-line',
-      iconStyle: 'bg-secondary/12 text-secondary'
-    }
-  ]
+const progressCards = [
+  {
+    id: 1,
+    title: "完成进度",
+    percentage: 75,
+    color: "var(--art-success)",
+    icon: "ri:arrow-up-circle-line",
+    iconStyle: "bg-success/12 text-success",
+  },
+  {
+    id: 2,
+    title: "项目进度",
+    percentage: 65,
+    color: "var(--theme-color)",
+    icon: "ri:twitch-line",
+    iconStyle: "bg-theme/12 text-theme",
+  },
+  {
+    id: 3,
+    title: "学习进度",
+    percentage: 45,
+    color: "var(--art-error)",
+    icon: "ri:game-line",
+    iconStyle: "!bg-error/12 text-error",
+  },
+  {
+    id: 4,
+    title: "任务进度",
+    percentage: 90,
+    color: "var(--art-secondary)",
+    icon: "ri:flag-2-line",
+    iconStyle: "bg-secondary/12 text-secondary",
+  },
+];
 
-  const imageCards = [
-    {
-      id: 1,
-      imageUrl: cover1,
-      title: 'AI技术在医疗领域的创新应用与发展前景',
-      category: '社交',
-      readTime: '2分钟',
-      views: 9125,
-      comments: 3,
-      date: '12月19日 周一'
-    },
-    {
-      id: 2,
-      imageUrl: cover2,
-      title: '大数据分析助力企业决策的实践案例',
-      category: '技术',
-      readTime: '3分钟',
-      views: 7234,
-      comments: 5,
-      date: '12月20日 周二'
-    },
-    {
-      id: 3,
-      imageUrl: cover3,
-      title: '区块链技术在供应链管理中的应用',
-      category: '科技',
-      readTime: '4分钟',
-      views: 5678,
-      comments: 8,
-      date: '12月21日 周三'
-    },
-    {
-      id: 4,
-      imageUrl: cover4,
-      title: '云计算技术发展趋势与未来展望',
-      category: '云技术',
-      readTime: '5分钟',
-      views: 4321,
-      comments: 6,
-      date: '12月22日 周四'
-    }
-  ]
+const imageCards = [
+  {
+    id: 1,
+    imageUrl: cover1,
+    title: "AI技术在医疗领域的创新应用与发展前景",
+    category: "社交",
+    readTime: "2分钟",
+    views: 9125,
+    comments: 3,
+    date: "12月19日 周一",
+  },
+  {
+    id: 2,
+    imageUrl: cover2,
+    title: "大数据分析助力企业决策的实践案例",
+    category: "技术",
+    readTime: "3分钟",
+    views: 7234,
+    comments: 5,
+    date: "12月20日 周二",
+  },
+  {
+    id: 3,
+    imageUrl: cover3,
+    title: "区块链技术在供应链管理中的应用",
+    category: "科技",
+    readTime: "4分钟",
+    views: 5678,
+    comments: 8,
+    date: "12月21日 周三",
+  },
+  {
+    id: 4,
+    imageUrl: cover4,
+    title: "云计算技术发展趋势与未来展望",
+    category: "云技术",
+    readTime: "5分钟",
+    views: 4321,
+    comments: 6,
+    date: "12月22日 周四",
+  },
+];
 
-  const dataList = [
-    {
-      title: '新加坡之行',
-      status: '进行中',
-      time: '5分钟',
-      class: 'bg-theme/12 text-theme',
-      icon: 'ri:camera-4-line'
-    },
-    {
-      title: '归档数据',
-      status: '进行中',
-      time: '10分钟',
-      class: 'bg-secondary/12 text-secondary',
-      icon: 'ri:bar-chart-box-line'
-    },
-    {
-      title: '客户会议',
-      status: '待处理',
-      time: '15分钟',
-      class: 'bg-warning/12 text-warning',
-      icon: 'ri:user-3-line'
-    },
-    {
-      title: '筛选任务团队',
-      status: '进行中',
-      time: '20分钟',
-      class: 'bg-error/12 text-error',
-      icon: 'ri:account-circle-line'
-    },
-    {
-      title: '发送信封给小王',
-      status: '已完成',
-      time: '20分钟',
-      class: 'bg-success/12 text-success',
-      icon: 'ri:message-3-line'
-    }
-  ]
+const dataList = [
+  {
+    title: "新加坡之行",
+    status: "进行中",
+    time: "5分钟",
+    class: "bg-theme/12 text-theme",
+    icon: "ri:camera-4-line",
+  },
+  {
+    title: "归档数据",
+    status: "进行中",
+    time: "10分钟",
+    class: "bg-secondary/12 text-secondary",
+    icon: "ri:bar-chart-box-line",
+  },
+  {
+    title: "客户会议",
+    status: "待处理",
+    time: "15分钟",
+    class: "bg-warning/12 text-warning",
+    icon: "ri:user-3-line",
+  },
+  {
+    title: "筛选任务团队",
+    status: "进行中",
+    time: "20分钟",
+    class: "bg-error/12 text-error",
+    icon: "ri:account-circle-line",
+  },
+  {
+    title: "发送信封给小王",
+    status: "已完成",
+    time: "20分钟",
+    class: "bg-success/12 text-success",
+    icon: "ri:message-3-line",
+  },
+];
 
-  const timelineData = [
-    {
-      time: '上午 09:30',
-      status: 'rgb(73, 190, 255)',
-      content: '收到 John Doe 支付的 385.90 美元'
-    },
-    {
-      time: '上午 10:00',
-      status: 'rgb(54, 158, 255)',
-      content: '新销售记录',
-      code: 'ML-3467'
-    },
-    {
-      time: '上午 12:00',
-      status: 'rgb(103, 232, 207)',
-      content: '向 Michael 支付了 64.95 美元'
-    },
-    {
-      time: '下午 14:30',
-      status: 'rgb(255, 193, 7)',
-      content: '系统维护通知',
-      code: 'MT-2023'
-    },
-    {
-      time: '下午 15:45',
-      status: 'rgb(255, 105, 105)',
-      content: '紧急订单取消提醒',
-      code: 'OR-9876'
-    },
-    {
-      time: '下午 17:00',
-      status: 'rgb(103, 232, 207)',
-      content: '完成每日销售报表'
-    }
-  ]
+const timelineData = [
+  {
+    time: "上午 09:30",
+    status: "rgb(73, 190, 255)",
+    content: "收到 John Doe 支付的 385.90 美元",
+  },
+  {
+    time: "上午 10:00",
+    status: "rgb(54, 158, 255)",
+    content: "新销售记录",
+    code: "ML-3467",
+  },
+  {
+    time: "上午 12:00",
+    status: "rgb(103, 232, 207)",
+    content: "向 Michael 支付了 64.95 美元",
+  },
+  {
+    time: "下午 14:30",
+    status: "rgb(255, 193, 7)",
+    content: "系统维护通知",
+    code: "MT-2023",
+  },
+  {
+    time: "下午 15:45",
+    status: "rgb(255, 105, 105)",
+    content: "紧急订单取消提醒",
+    code: "OR-9876",
+  },
+  {
+    time: "下午 17:00",
+    status: "rgb(103, 232, 207)",
+    content: "完成每日销售报表",
+  },
+];
 
-  /**
-   * 处理查看更多按钮点击
-   */
-  const handleMore = () => {
-    ElMessage.info('查看更多')
-  }
+/**
+ * 处理查看更多按钮点击
+ */
+const handleMore = () => {
+  ElMessage.info("查看更多");
+};
 
-  /**
-   * 图片卡片类型定义
-   */
-  interface ImageCard {
-    id: number
-    imageUrl: string
-    title: string
-    category: string
-    readTime: string
-    views: number
-    comments: number
-    date: string
-  }
+/**
+ * 图片卡片类型定义
+ */
+interface ImageCard {
+  id: number;
+  imageUrl: string;
+  title: string;
+  category: string;
+  readTime: string;
+  views: number;
+  comments: number;
+  date: string;
+}
 
-  /**
-   * 处理图片卡片点击事件
-   * @param card 卡片数据
-   */
-  const handleImageCardClick = (card: ImageCard) => {
-    console.log('点击卡片:', card)
-  }
+/**
+ * 处理图片卡片点击事件
+ * @param card 卡片数据
+ */
+const handleImageCardClick = (card: ImageCard) => {
+  console.log("点击卡片:", card);
+};
 </script>
 
 <style scoped>
-  @reference '@styles/core/tailwind.css';
+@reference '@styles/core/tailwind.css';
 
-  .page-title {
-    @apply my-5 text-xl font-medium first:mt-0;
-  }
+.page-title {
+  @apply my-5 text-xl font-medium first:mt-0;
+}
 </style>
diff --git a/frontend/new-web/src/views/template/charts/index.vue b/frontend/new-web/src/views/template/charts/index.vue
index 1f5dd133..87069bc0 100644
--- a/frontend/new-web/src/views/template/charts/index.vue
+++ b/frontend/new-web/src/views/template/charts/index.vue
@@ -114,7 +114,7 @@
           <ArtHBarChart
             :data="[
               { name: '系列1', data: [10, 20, 30] },
-              { name: '系列2', data: [15, 25, 35] }
+              { name: '系列2', data: [15, 25, 35] },
             ]"
             :xAxisData="['类目1', '类目2', '类目3']"
             :showLegend="true"
@@ -130,7 +130,7 @@
           <ArtHBarChart
             :data="[
               { name: '系列1', data: [10, 20, 30] },
-              { name: '系列2', data: [15, 25, 35] }
+              { name: '系列2', data: [15, 25, 35] },
             ]"
             :xAxisData="['类目1', '类目2', '类目3']"
             :showLegend="true"
@@ -149,7 +149,7 @@
             :data="[
               { value: 35, name: '分类A' },
               { value: 28, name: '分类B' },
-              { value: 42, name: '分类C' }
+              { value: 42, name: '分类C' },
             ]"
             :radius="['54%', '70%']"
             legendPosition="bottom"
@@ -169,7 +169,7 @@
               { value: 42, name: '分类C' },
               { value: 32, name: '分类D' },
               { value: 26, name: '分类E' },
-              { value: 37, name: '分类F' }
+              { value: 37, name: '分类F' },
             ]"
             :radius="['54%', '70%']"
             :borderRadius="0"
@@ -188,7 +188,7 @@
             :data="[
               { value: 30, name: '分类A' },
               { value: 25, name: '分类B' },
-              { value: 45, name: '分类C' }
+              { value: 45, name: '分类C' },
             ]"
             :radius="['0%', '70%']"
             :showLegend="true"
@@ -214,7 +214,7 @@
               { value: [9, 8] },
               { value: [10, 6] },
               { value: [11, 7] },
-              { value: [12, 8] }
+              { value: [12, 8] },
             ]"
           />
         </div>
@@ -231,17 +231,17 @@
               { name: '管理', max: 100 },
               { name: '技术', max: 100 },
               { name: '客服', max: 100 },
-              { name: '开发', max: 100 }
+              { name: '开发', max: 100 },
             ]"
             :data="[
               {
                 name: '预算分配',
-                value: [80, 70, 90, 85, 75]
+                value: [80, 70, 90, 85, 75],
               },
               {
                 name: '实际开销',
-                value: [70, 75, 85, 80, 70]
-              }
+                value: [70, 75, 85, 80, 70],
+              },
             ]"
           />
         </div>
@@ -255,7 +255,7 @@
             :data="[
               { time: '2024-01-01', open: 20, close: 23, high: 25, low: 18 },
               { time: '2024-01-02', open: 23, close: 21, high: 24, low: 20 },
-              { time: '2024-01-03', open: 21, close: 25, high: 26, low: 21 }
+              { time: '2024-01-03', open: 21, close: 25, high: 26, low: 21 },
             ]"
             :showDataZoom="false"
             :dataZoomStart="0"
@@ -279,7 +279,7 @@
               '35-44岁',
               '45-54岁',
               '55-64岁',
-              '65岁以上'
+              '65岁以上',
             ]"
             positiveName="男性年龄分布"
             negativeName="女性年龄分布"
@@ -291,65 +291,65 @@
 </template>
 
 <script setup lang="ts">
-  import type { LineDataItem } from '@/types/component/chart'
+import type { LineDataItem } from "@/types/component/chart";
 
-  defineOptions({ name: 'TemplateCharts' })
+defineOptions({ name: "TemplateCharts" });
 
-  /**
-   * 多组数据折线图示例数据
-   */
-  const multiLineData: LineDataItem[] = [
-    {
-      name: '销售额',
-      data: [120, 132, 101, 134, 90, 130],
-      areaStyle: {
-        startOpacity: 0.1,
-        endOpacity: 0
-      }
+/**
+ * 多组数据折线图示例数据
+ */
+const multiLineData: LineDataItem[] = [
+  {
+    name: "销售额",
+    data: [120, 132, 101, 134, 90, 130],
+    areaStyle: {
+      startOpacity: 0.1,
+      endOpacity: 0,
     },
-    {
-      name: '利润',
-      data: [80, 92, 71, 94, 60, 80],
-      areaStyle: {
-        startOpacity: 0.1,
-        endOpacity: 0
-      }
-    }
-  ]
+  },
+  {
+    name: "利润",
+    data: [80, 92, 71, 94, 60, 80],
+    areaStyle: {
+      startOpacity: 0.1,
+      endOpacity: 0,
+    },
+  },
+];
 
-  /**
-   * 单数据柱状图示例数据
-   */
-  const singleBarData = ref([120, 200, 150, 80, 70, 110, 130])
-  const xAxisData = ref(['周一', '周二', '周三', '周四', '周五', '周六', '周日'])
+/**
+ * 单数据柱状图示例数据
+ */
+const singleBarData = ref([120, 200, 150, 80, 70, 110, 130]);
+const xAxisData = ref(["周一", "周二", "周三", "周四", "周五", "周六", "周日"]);
 
-  /**
-   * 多数据柱状图示例数据
-   */
-  const multiBarData = ref([
-    { name: '销售额', data: [120, 200, 150, 80, 70, 110, 130] },
-    { name: '利润', data: [20, 50, 30, 15, 10, 25, 35] }
-  ])
+/**
+ * 多数据柱状图示例数据
+ */
+const multiBarData = ref([
+  { name: "销售额", data: [120, 200, 150, 80, 70, 110, 130] },
+  { name: "利润", data: [20, 50, 30, 15, 10, 25, 35] },
+]);
 
-  /**
-   * 堆叠柱状图示例数据
-   */
-  const stackBarData = ref([
-    { name: 'Q1', data: [20, 25, 30, 35, 40], stack: 'total' },
-    { name: 'Q2', data: [30, 35, 40, 45, 50], stack: 'total' }
-  ])
+/**
+ * 堆叠柱状图示例数据
+ */
+const stackBarData = ref([
+  { name: "Q1", data: [20, 25, 30, 35, 40], stack: "total" },
+  { name: "Q2", data: [30, 35, 40, 45, 50], stack: "total" },
+]);
 
-  const stackXAxisData = ref(['产品A', '产品B', '产品C', '产品D', '产品E'])
+const stackXAxisData = ref(["产品A", "产品B", "产品C", "产品D", "产品E"]);
 </script>
 
 <style scoped>
-  @reference '@styles/core/tailwind.css';
+@reference '@styles/core/tailwind.css';
 
-  .page-title {
-    @apply my-5 text-xl font-medium first:mt-0;
-  }
+.page-title {
+  @apply my-5 text-xl font-medium first:mt-0;
+}
 
-  .art-card {
-    @apply p-5;
-  }
+.art-card {
+  @apply p-5;
+}
 </style>
diff --git a/frontend/new-web/src/views/template/chat/index.vue b/frontend/new-web/src/views/template/chat/index.vue
index d7d5c098..0a053c2f 100644
--- a/frontend/new-web/src/views/template/chat/index.vue
+++ b/frontend/new-web/src/views/template/chat/index.vue
@@ -27,7 +27,7 @@
           <span class="mt-5 c-p">
             排序方式
             <ElIcon class="el-icon--right">
-              <arrow-down />
+              <ArrowDown />
             </ElIcon>
           </span>
           <template #dropdown>
@@ -62,9 +62,9 @@
               <span class="text-xs text-g-600">{{ item.lastTime }}</span>
             </div>
             <div class="flex-cb">
-              <span class="overflow-hidden text-xs text-g-600 text-ellipsis whitespace-nowrap">{{
-                item.email
-              }}</span>
+              <span class="overflow-hidden text-xs text-g-600 text-ellipsis whitespace-nowrap">
+                {{ item.email }}
+              </span>
             </div>
           </div>
         </div>
@@ -79,7 +79,7 @@
               class="w-2 h-2 rounded-full"
               :class="isOnline ? 'bg-success/100' : 'bg-danger/100'"
             ></div>
-            <span class="text-xs text-g-600">{{ isOnline ? '在线' : '离线' }}</span>
+            <span class="text-xs text-g-600">{{ isOnline ? "在线" : "离线" }}</span>
           </div>
         </div>
         <div class="flex-c gap-2">
@@ -98,7 +98,7 @@
             <div
               :class="[
                 'flex gap-2 items-start w-full mb-7.5',
-                message.isMe ? 'flex-row-reverse' : 'flex-row justify-start'
+                message.isMe ? 'flex-row-reverse' : 'flex-row justify-start',
               ]"
             >
               <ElAvatar :size="32" :src="message.avatar" class="flex-shrink-0" />
@@ -116,8 +116,9 @@
                 <div
                   class="py-2.5 px-3.5 text-sm leading-[1.4] rounded-md"
                   :class="message.isMe ? '!bg-theme/15' : '!bg-active-color'"
-                  >{{ message.content }}</div
                 >
+                  {{ message.content }}
+                </div>
               </div>
             </div>
           </template>
@@ -155,298 +156,298 @@
 </template>
 
 <script setup lang="ts">
-  import { Picture, Paperclip, ArrowDown } from '@element-plus/icons-vue'
-  import { mittBus } from '@/utils/sys'
-  import meAvatar from '@/assets/images/avatar/avatar5.webp'
-  import aiAvatar from '@/assets/images/avatar/avatar10.webp'
-  import avatar2 from '@/assets/images/avatar/avatar2.webp'
-  import avatar3 from '@/assets/images/avatar/avatar3.webp'
-  import avatar4 from '@/assets/images/avatar/avatar4.webp'
-  import avatar5 from '@/assets/images/avatar/avatar5.webp'
-  import avatar6 from '@/assets/images/avatar/avatar6.webp'
-  import avatar7 from '@/assets/images/avatar/avatar7.webp'
-  import avatar8 from '@/assets/images/avatar/avatar8.webp'
-  import avatar9 from '@/assets/images/avatar/avatar9.webp'
-  import avatar10 from '@/assets/images/avatar/avatar10.webp'
-  import { useAutoLayoutHeight } from '@/hooks/core/useLayoutHeight'
+import { Picture, Paperclip, ArrowDown } from "@element-plus/icons-vue";
+import { mittBus } from "@/utils/sys";
+import meAvatar from "@/assets/images/avatar/avatar5.webp";
+import aiAvatar from "@/assets/images/avatar/avatar10.webp";
+import avatar2 from "@/assets/images/avatar/avatar2.webp";
+import avatar3 from "@/assets/images/avatar/avatar3.webp";
+import avatar4 from "@/assets/images/avatar/avatar4.webp";
+import avatar5 from "@/assets/images/avatar/avatar5.webp";
+import avatar6 from "@/assets/images/avatar/avatar6.webp";
+import avatar7 from "@/assets/images/avatar/avatar7.webp";
+import avatar8 from "@/assets/images/avatar/avatar8.webp";
+import avatar9 from "@/assets/images/avatar/avatar9.webp";
+import avatar10 from "@/assets/images/avatar/avatar10.webp";
+import { useAutoLayoutHeight } from "@/hooks/core/useLayoutHeight";
 
-  defineOptions({ name: 'TemplateChat' })
+defineOptions({ name: "TemplateChat" });
 
-  const { containerMinHeight } = useAutoLayoutHeight()
+const { containerMinHeight } = useAutoLayoutHeight();
 
-  /**
-   * 联系人类型定义
-   */
-  interface Person {
-    id: number
-    name: string
-    email: string
-    avatar: string
-    online?: boolean
-    lastTime: string
-    unread?: number
-  }
+/**
+ * 联系人类型定义
+ */
+interface Person {
+  id: number;
+  name: string;
+  email: string;
+  avatar: string;
+  online?: boolean;
+  lastTime: string;
+  unread?: number;
+}
 
-  const searchQuery = ref('')
-  const isDrawerVisible = ref(false)
-  const isOnline = ref(true)
-  const selectedPerson = ref<Person | null>(null)
-  const messageText = ref('')
-  const messageId = ref(10)
-  const userAvatar = ref(meAvatar)
-  const messageContainer = ref<HTMLElement | null>(null)
+const searchQuery = ref("");
+const isDrawerVisible = ref(false);
+const isOnline = ref(true);
+const selectedPerson = ref<Person | null>(null);
+const messageText = ref("");
+const messageId = ref(10);
+const userAvatar = ref(meAvatar);
+const messageContainer = ref<HTMLElement | null>(null);
 
-  /**
-   * 联系人列表数据
-   */
-  const personList = ref<Person[]>([
-    {
-      id: 1,
-      name: '梅洛迪·梅西',
-      email: 'melody@altbox.com',
-      avatar: meAvatar,
-      online: true,
-      lastTime: '20小时前',
-      unread: 0
-    },
-    {
-      id: 2,
-      name: '马克·史密斯',
-      email: 'max@kt.com',
-      avatar: avatar2,
-      online: true,
-      lastTime: '2周前',
-      unread: 6
-    },
-    {
-      id: 3,
-      name: '肖恩·宾',
-      email: 'sean@dellito.com',
-      avatar: avatar3,
-      online: false,
-      lastTime: '5小时前',
-      unread: 5
-    },
-    {
-      id: 4,
-      name: '爱丽丝·约翰逊',
-      email: 'alice@domain.com',
-      avatar: avatar4,
-      online: true,
-      lastTime: '1小时前',
-      unread: 2
-    },
-    {
-      id: 5,
-      name: '鲍勃·布朗',
-      email: 'bob@domain.com',
-      avatar: avatar5,
-      online: false,
-      lastTime: '3天前',
-      unread: 1
-    },
-    {
-      id: 6,
-      name: '查理·戴维斯',
-      email: 'charlie@domain.com',
-      avatar: avatar6,
-      online: true,
-      lastTime: '10分钟前',
-      unread: 0
-    },
-    {
-      id: 7,
-      name: '戴安娜·普林斯',
-      email: 'diana@domain.com',
-      avatar: avatar7,
-      online: true,
-      lastTime: '15分钟前',
-      unread: 3
-    },
-    {
-      id: 8,
-      name: '伊桑·亨特',
-      email: 'ethan@domain.com',
-      avatar: avatar8,
-      online: true,
-      lastTime: '5分钟前',
-      unread: 0
-    },
-    {
-      id: 9,
-      name: '杰西卡·琼斯',
-      email: 'jessica@domain.com',
-      avatar: avatar9,
-      online: false,
-      lastTime: '1天前',
-      unread: 4
-    },
-    {
-      id: 10,
-      name: '彼得·帕克',
-      email: 'peter@domain.com',
-      avatar: avatar10,
-      online: true,
-      lastTime: '2小时前',
-      unread: 1
-    },
-    {
-      id: 11,
-      name: '克拉克·肯特',
-      email: 'clark@domain.com',
-      avatar: avatar3,
-      online: true,
-      lastTime: '30分钟前',
-      unread: 2
-    },
-    {
-      id: 12,
-      name: '布鲁斯·韦恩',
-      email: 'bruce@domain.com',
-      avatar: avatar5,
-      online: false,
-      lastTime: '3天前',
-      unread: 0
-    },
-    {
-      id: 13,
-      name: '韦德·威尔逊',
-      email: 'wade@domain.com',
-      avatar: avatar6,
-      online: true,
-      lastTime: '10分钟前',
-      unread: 5
+/**
+ * 联系人列表数据
+ */
+const personList = ref<Person[]>([
+  {
+    id: 1,
+    name: "梅洛迪·梅西",
+    email: "melody@altbox.com",
+    avatar: meAvatar,
+    online: true,
+    lastTime: "20小时前",
+    unread: 0,
+  },
+  {
+    id: 2,
+    name: "马克·史密斯",
+    email: "max@kt.com",
+    avatar: avatar2,
+    online: true,
+    lastTime: "2周前",
+    unread: 6,
+  },
+  {
+    id: 3,
+    name: "肖恩·宾",
+    email: "sean@dellito.com",
+    avatar: avatar3,
+    online: false,
+    lastTime: "5小时前",
+    unread: 5,
+  },
+  {
+    id: 4,
+    name: "爱丽丝·约翰逊",
+    email: "alice@domain.com",
+    avatar: avatar4,
+    online: true,
+    lastTime: "1小时前",
+    unread: 2,
+  },
+  {
+    id: 5,
+    name: "鲍勃·布朗",
+    email: "bob@domain.com",
+    avatar: avatar5,
+    online: false,
+    lastTime: "3天前",
+    unread: 1,
+  },
+  {
+    id: 6,
+    name: "查理·戴维斯",
+    email: "charlie@domain.com",
+    avatar: avatar6,
+    online: true,
+    lastTime: "10分钟前",
+    unread: 0,
+  },
+  {
+    id: 7,
+    name: "戴安娜·普林斯",
+    email: "diana@domain.com",
+    avatar: avatar7,
+    online: true,
+    lastTime: "15分钟前",
+    unread: 3,
+  },
+  {
+    id: 8,
+    name: "伊桑·亨特",
+    email: "ethan@domain.com",
+    avatar: avatar8,
+    online: true,
+    lastTime: "5分钟前",
+    unread: 0,
+  },
+  {
+    id: 9,
+    name: "杰西卡·琼斯",
+    email: "jessica@domain.com",
+    avatar: avatar9,
+    online: false,
+    lastTime: "1天前",
+    unread: 4,
+  },
+  {
+    id: 10,
+    name: "彼得·帕克",
+    email: "peter@domain.com",
+    avatar: avatar10,
+    online: true,
+    lastTime: "2小时前",
+    unread: 1,
+  },
+  {
+    id: 11,
+    name: "克拉克·肯特",
+    email: "clark@domain.com",
+    avatar: avatar3,
+    online: true,
+    lastTime: "30分钟前",
+    unread: 2,
+  },
+  {
+    id: 12,
+    name: "布鲁斯·韦恩",
+    email: "bruce@domain.com",
+    avatar: avatar5,
+    online: false,
+    lastTime: "3天前",
+    unread: 0,
+  },
+  {
+    id: 13,
+    name: "韦德·威尔逊",
+    email: "wade@domain.com",
+    avatar: avatar6,
+    online: true,
+    lastTime: "10分钟前",
+    unread: 5,
+  },
+]);
+
+/**
+ * 选择联系人
+ * @param person 联系人对象
+ */
+const selectPerson = (person: Person) => {
+  selectedPerson.value = person;
+};
+
+/**
+ * 消息列表数据
+ */
+const messages = ref([
+  {
+    id: 1,
+    sender: "Art Bot",
+    content: "你好！我是你的AI助手，有什么我可以帮你的吗？",
+    time: "10:00",
+    isMe: false,
+    avatar: aiAvatar,
+  },
+  {
+    id: 2,
+    sender: "Ricky",
+    content: "我想了解一下系统的使用方法。",
+    time: "10:01",
+    isMe: true,
+    avatar: meAvatar,
+  },
+  {
+    id: 3,
+    sender: "Art Bot",
+    content: "好的，我来为您介绍系统的主要功能。首先，您可以通过左侧菜单访问不同的功能模块...",
+    time: "10:02",
+    isMe: false,
+    avatar: aiAvatar,
+  },
+  {
+    id: 4,
+    sender: "Ricky",
+    content: "听起来很不错，能具体讲讲数据分析部分吗？",
+    time: "10:05",
+    isMe: true,
+    avatar: meAvatar,
+  },
+  {
+    id: 5,
+    sender: "Art Bot",
+    content: "当然可以。数据分析模块可以帮助您实时监控关键指标，并生成详细的报表...",
+    time: "10:06",
+    isMe: false,
+    avatar: aiAvatar,
+  },
+  {
+    id: 6,
+    sender: "Ricky",
+    content: "太好了，那我如何开始使用呢？",
+    time: "10:08",
+    isMe: true,
+    avatar: meAvatar,
+  },
+  {
+    id: 7,
+    sender: "Art Bot",
+    content: "您可以先创建一个项目，然后在项目中添加相关的数据源，系统会自动进行分析。",
+    time: "10:09",
+    isMe: false,
+    avatar: aiAvatar,
+  },
+  {
+    id: 8,
+    sender: "Ricky",
+    content: "明白了，谢谢你的帮助！",
+    time: "10:10",
+    isMe: true,
+    avatar: meAvatar,
+  },
+  {
+    id: 9,
+    sender: "Art Bot",
+    content: "不客气，有任何问题随时联系我。",
+    time: "10:11",
+    isMe: false,
+    avatar: aiAvatar,
+  },
+]);
+
+/**
+ * 发送消息
+ * 添加新消息到消息列表并滚动到底部
+ */
+const sendMessage = () => {
+  const text = messageText.value.trim();
+  if (!text) return;
+
+  messages.value.push({
+    id: messageId.value++,
+    sender: "Ricky",
+    content: text,
+    time: new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
+    isMe: true,
+    avatar: userAvatar.value,
+  });
+
+  messageText.value = "";
+  scrollToBottom();
+};
+
+/**
+ * 滚动到消息列表底部
+ */
+const scrollToBottom = () => {
+  setTimeout(() => {
+    if (messageContainer.value) {
+      messageContainer.value.scrollTop = messageContainer.value.scrollHeight;
     }
-  ])
+  }, 100);
+};
 
-  /**
-   * 选择联系人
-   * @param person 联系人对象
-   */
-  const selectPerson = (person: Person) => {
-    selectedPerson.value = person
-  }
+/**
+ * 打开聊天窗口
+ */
+const openChat = () => {
+  isDrawerVisible.value = true;
+};
 
-  /**
-   * 消息列表数据
-   */
-  const messages = ref([
-    {
-      id: 1,
-      sender: 'Art Bot',
-      content: '你好！我是你的AI助手，有什么我可以帮你的吗？',
-      time: '10:00',
-      isMe: false,
-      avatar: aiAvatar
-    },
-    {
-      id: 2,
-      sender: 'Ricky',
-      content: '我想了解一下系统的使用方法。',
-      time: '10:01',
-      isMe: true,
-      avatar: meAvatar
-    },
-    {
-      id: 3,
-      sender: 'Art Bot',
-      content: '好的，我来为您介绍系统的主要功能。首先，您可以通过左侧菜单访问不同的功能模块...',
-      time: '10:02',
-      isMe: false,
-      avatar: aiAvatar
-    },
-    {
-      id: 4,
-      sender: 'Ricky',
-      content: '听起来很不错，能具体讲讲数据分析部分吗？',
-      time: '10:05',
-      isMe: true,
-      avatar: meAvatar
-    },
-    {
-      id: 5,
-      sender: 'Art Bot',
-      content: '当然可以。数据分析模块可以帮助您实时监控关键指标，并生成详细的报表...',
-      time: '10:06',
-      isMe: false,
-      avatar: aiAvatar
-    },
-    {
-      id: 6,
-      sender: 'Ricky',
-      content: '太好了，那我如何开始使用呢？',
-      time: '10:08',
-      isMe: true,
-      avatar: meAvatar
-    },
-    {
-      id: 7,
-      sender: 'Art Bot',
-      content: '您可以先创建一个项目，然后在项目中添加相关的数据源，系统会自动进行分析。',
-      time: '10:09',
-      isMe: false,
-      avatar: aiAvatar
-    },
-    {
-      id: 8,
-      sender: 'Ricky',
-      content: '明白了，谢谢你的帮助！',
-      time: '10:10',
-      isMe: true,
-      avatar: meAvatar
-    },
-    {
-      id: 9,
-      sender: 'Art Bot',
-      content: '不客气，有任何问题随时联系我。',
-      time: '10:11',
-      isMe: false,
-      avatar: aiAvatar
-    }
-  ])
-
-  /**
-   * 发送消息
-   * 添加新消息到消息列表并滚动到底部
-   */
-  const sendMessage = () => {
-    const text = messageText.value.trim()
-    if (!text) return
-
-    messages.value.push({
-      id: messageId.value++,
-      sender: 'Ricky',
-      content: text,
-      time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
-      isMe: true,
-      avatar: userAvatar.value
-    })
-
-    messageText.value = ''
-    scrollToBottom()
-  }
-
-  /**
-   * 滚动到消息列表底部
-   */
-  const scrollToBottom = () => {
-    setTimeout(() => {
-      if (messageContainer.value) {
-        messageContainer.value.scrollTop = messageContainer.value.scrollHeight
-      }
-    }, 100)
-  }
-
-  /**
-   * 打开聊天窗口
-   */
-  const openChat = () => {
-    isDrawerVisible.value = true
-  }
-
-  onMounted(() => {
-    scrollToBottom()
-    mittBus.on('openChat', openChat)
-    selectedPerson.value = personList.value[0]
-  })
+onMounted(() => {
+  scrollToBottom();
+  mittBus.on("openChat", openChat);
+  selectedPerson.value = personList.value[0];
+});
 </script>
diff --git a/frontend/new-web/src/views/template/map/index.vue b/frontend/new-web/src/views/template/map/index.vue
index 3171d839..40bc956b 100644
--- a/frontend/new-web/src/views/template/map/index.vue
+++ b/frontend/new-web/src/views/template/map/index.vue
@@ -5,13 +5,13 @@
 </template>
 
 <script setup lang="ts">
-  defineOptions({ name: 'TemplateMap' })
+defineOptions({ name: "TemplateMap" });
 
-  /**
-   * 异步加载地图组件
-   * 减少初始加载体积
-   */
-  const ArtMapChart = defineAsyncComponent(
-    () => import('@/components/core/charts/art-map-chart/index.vue')
-  )
+/**
+ * 异步加载地图组件
+ * 减少初始加载体积
+ */
+const ArtMapChart = defineAsyncComponent(
+  () => import("@/components/core/charts/art-map-chart/index.vue")
+);
 </script>
diff --git a/frontend/new-web/src/views/template/pricing/index.vue b/frontend/new-web/src/views/template/pricing/index.vue
index 1a02ce0c..e11e3096 100644
--- a/frontend/new-web/src/views/template/pricing/index.vue
+++ b/frontend/new-web/src/views/template/pricing/index.vue
@@ -2,9 +2,7 @@
   <div class="pt-24 px-20 max-md:!pt-15 max-sm:!px-5 max-md:!px-8 bg-transparent !border-none">
     <div class="mb-10 text-center">
       <h1 class="mb-2 text-4xl font-medium max-sm:text-3xl">超过 53,476 位信赖的开发者</h1>
-      <h2 class="mb-2.5 text-2xl font-normal text-g-600 max-sm:text-2xl">
-        以及众多科技巨头的选择
-      </h2>
+      <h2 class="mb-2.5 text-2xl font-normal text-g-600 max-sm:text-2xl">以及众多科技巨头的选择</h2>
       <div class="gap-2 flex-cc mt-2.5 max-sm:mt-3.5 max-sm:!block">
         <p class="text-sm italic text-g-600 max-sm:text-sm">
           本项目基于 MIT 协议开源免费，当前页面为定价模板，仅作演示用途
@@ -55,80 +53,80 @@
 </template>
 
 <script setup lang="ts">
-  import { ref } from 'vue'
-  import { Check, Close } from '@element-plus/icons-vue'
+import { ref } from "vue";
+import { Check, Close } from "@element-plus/icons-vue";
 
-  defineOptions({ name: 'Pricing' })
+defineOptions({ name: "Pricing" });
 
-  interface Feature {
-    text: string
-    available: boolean
-  }
+interface Feature {
+  text: string;
+  available: boolean;
+}
 
-  interface PricingPlan {
-    type: string
-    title: string
-    description: string
-    price: number
-    features: Feature[]
-  }
+interface PricingPlan {
+  type: string;
+  title: string;
+  description: string;
+  price: number;
+  features: Feature[];
+}
 
-  const pricingPlans = ref<PricingPlan[]>([
-    {
-      type: 'single',
-      title: '单次使用版',
-      description: '适用于单个最终产品，最终用户无需付费。',
-      price: 349,
-      features: [
-        { text: '完整源代码', available: true },
-        { text: '技术文档', available: true },
-        { text: 'SaaS应用授权', available: false },
-        { text: '单个项目使用', available: true },
-        { text: '一年技术支持', available: true },
-        { text: '一年免费更新', available: true }
-      ]
-    },
-    {
-      type: 'multiple',
-      title: '多次使用版',
-      description: '适用于无限个最终产品，最终用户无需付费。',
-      price: 629,
-      features: [
-        { text: '完整源代码', available: true },
-        { text: '技术文档', available: true },
-        { text: 'SaaS应用授权', available: false },
-        { text: '无限项目使用', available: true },
-        { text: '一年技术支持', available: true },
-        { text: '一年免费更新', available: true }
-      ]
-    },
-    {
-      type: 'extended',
-      title: '扩展授权版',
-      description: '适用于单个最终产品，最终用户需要付费。',
-      price: 2099,
-      features: [
-        { text: '完整源代码', available: true },
-        { text: '技术文档', available: true },
-        { text: 'SaaS应用授权', available: true },
-        { text: '单个项目使用', available: true },
-        { text: '一年技术支持', available: true },
-        { text: '一年免费更新', available: true }
-      ]
-    },
-    {
-      type: 'unlimited',
-      title: '无限授权版',
-      description: '适用于无限个最终产品，最终用户需要付费。',
-      price: 3499,
-      features: [
-        { text: '完整源代码', available: true },
-        { text: '技术文档', available: true },
-        { text: 'SaaS应用授权', available: true },
-        { text: '无限项目使用', available: true },
-        { text: '一年技术支持', available: true },
-        { text: '一年免费更新', available: true }
-      ]
-    }
-  ])
+const pricingPlans = ref<PricingPlan[]>([
+  {
+    type: "single",
+    title: "单次使用版",
+    description: "适用于单个最终产品，最终用户无需付费。",
+    price: 349,
+    features: [
+      { text: "完整源代码", available: true },
+      { text: "技术文档", available: true },
+      { text: "SaaS应用授权", available: false },
+      { text: "单个项目使用", available: true },
+      { text: "一年技术支持", available: true },
+      { text: "一年免费更新", available: true },
+    ],
+  },
+  {
+    type: "multiple",
+    title: "多次使用版",
+    description: "适用于无限个最终产品，最终用户无需付费。",
+    price: 629,
+    features: [
+      { text: "完整源代码", available: true },
+      { text: "技术文档", available: true },
+      { text: "SaaS应用授权", available: false },
+      { text: "无限项目使用", available: true },
+      { text: "一年技术支持", available: true },
+      { text: "一年免费更新", available: true },
+    ],
+  },
+  {
+    type: "extended",
+    title: "扩展授权版",
+    description: "适用于单个最终产品，最终用户需要付费。",
+    price: 2099,
+    features: [
+      { text: "完整源代码", available: true },
+      { text: "技术文档", available: true },
+      { text: "SaaS应用授权", available: true },
+      { text: "单个项目使用", available: true },
+      { text: "一年技术支持", available: true },
+      { text: "一年免费更新", available: true },
+    ],
+  },
+  {
+    type: "unlimited",
+    title: "无限授权版",
+    description: "适用于无限个最终产品，最终用户需要付费。",
+    price: 3499,
+    features: [
+      { text: "完整源代码", available: true },
+      { text: "技术文档", available: true },
+      { text: "SaaS应用授权", available: true },
+      { text: "无限项目使用", available: true },
+      { text: "一年技术支持", available: true },
+      { text: "一年免费更新", available: true },
+    ],
+  },
+]);
 </script>
diff --git a/frontend/new-web/src/views/widgets/context-menu/index.vue b/frontend/new-web/src/views/widgets/context-menu/index.vue
index 03a0a1a8..9cd4f52c 100644
--- a/frontend/new-web/src/views/widgets/context-menu/index.vue
+++ b/frontend/new-web/src/views/widgets/context-menu/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="page-content">
-    <ElButton @contextmenu.prevent="showMenu"> 右键触发菜单 </ElButton>
+    <ElButton @contextmenu.prevent="showMenu">右键触发菜单</ElButton>
 
     <!-- 右键菜单组件 -->
     <ArtMenuRight
@@ -17,120 +17,120 @@
 </template>
 
 <script setup lang="ts">
-  import { computed, nextTick } from 'vue'
-  import ArtMenuRight from '@/components/core/others/art-menu-right/index.vue'
-  import type { MenuItemType } from '@/components/core/others/art-menu-right/index.vue'
+import { computed, nextTick } from "vue";
+import ArtMenuRight from "@/components/core/others/art-menu-right/index.vue";
+import type { MenuItemType } from "@/components/core/others/art-menu-right/index.vue";
 
-  defineOptions({ name: 'TemplateContextMenu' })
+defineOptions({ name: "TemplateContextMenu" });
 
-  const menuRef = ref<InstanceType<typeof ArtMenuRight>>()
-  const lastAction = ref('')
+const menuRef = ref<InstanceType<typeof ArtMenuRight>>();
+const lastAction = ref("");
 
-  /**
-   * 右键菜单选项配置
-   */
-  const menuItems = computed((): MenuItemType[] => [
-    {
-      key: 'copy',
-      label: '复制',
-      icon: 'ri:file-copy-line'
-    },
-    {
-      key: 'paste',
-      label: '粘贴',
-      icon: 'ri:capsule-line'
-    },
-    {
-      key: 'cut',
-      label: '剪切',
-      icon: 'ri:clipboard-line',
-      showLine: true
-    },
-    {
-      key: 'export',
-      label: '导出选项',
-      icon: 'ri:export-line',
-      children: [
-        {
-          key: 'exportExcel',
-          label: '导出 Excel',
-          icon: 'ri:file-excel-2-line'
-        },
-        {
-          key: 'exportPdf',
-          label: '导出 PDF',
-          icon: 'ri:file-pdf-2-line'
-        }
-      ]
-    },
-    {
-      key: 'edit',
-      label: '编辑选项',
-      icon: 'ri:edit-2-line',
-      children: [
-        {
-          key: 'rename',
-          label: '重命名'
-        },
-        {
-          key: 'duplicate',
-          label: '复制副本'
-        }
-      ]
-    },
-    {
-      key: 'share',
-      label: '分享',
-      icon: 'ri:share-forward-line',
-      showLine: true
-    },
-    {
-      key: 'delete',
-      label: '删除',
-      icon: 'ri:delete-bin-line'
-    },
-    {
-      key: 'disabled',
-      label: '禁用选项',
-      icon: 'ri:close-circle-line',
-      disabled: true
-    }
-  ])
+/**
+ * 右键菜单选项配置
+ */
+const menuItems = computed((): MenuItemType[] => [
+  {
+    key: "copy",
+    label: "复制",
+    icon: "ri:file-copy-line",
+  },
+  {
+    key: "paste",
+    label: "粘贴",
+    icon: "ri:capsule-line",
+  },
+  {
+    key: "cut",
+    label: "剪切",
+    icon: "ri:clipboard-line",
+    showLine: true,
+  },
+  {
+    key: "export",
+    label: "导出选项",
+    icon: "ri:export-line",
+    children: [
+      {
+        key: "exportExcel",
+        label: "导出 Excel",
+        icon: "ri:file-excel-2-line",
+      },
+      {
+        key: "exportPdf",
+        label: "导出 PDF",
+        icon: "ri:file-pdf-2-line",
+      },
+    ],
+  },
+  {
+    key: "edit",
+    label: "编辑选项",
+    icon: "ri:edit-2-line",
+    children: [
+      {
+        key: "rename",
+        label: "重命名",
+      },
+      {
+        key: "duplicate",
+        label: "复制副本",
+      },
+    ],
+  },
+  {
+    key: "share",
+    label: "分享",
+    icon: "ri:share-forward-line",
+    showLine: true,
+  },
+  {
+    key: "delete",
+    label: "删除",
+    icon: "ri:delete-bin-line",
+  },
+  {
+    key: "disabled",
+    label: "禁用选项",
+    icon: "ri:close-circle-line",
+    disabled: true,
+  },
+]);
 
-  /**
-   * 处理菜单项选择
-   * @param item 选中的菜单项
-   */
-  const handleSelect = (item: MenuItemType) => {
-    lastAction.value = `${item.label} (${item.key})`
-    ElMessage.success(`执行操作: ${item.label}`)
-    console.log('选择了菜单项:', item)
-  }
+/**
+ * 处理菜单项选择
+ * @param item 选中的菜单项
+ */
+const handleSelect = (item: MenuItemType) => {
+  lastAction.value = `${item.label} (${item.key})`;
+  ElMessage.success(`执行操作: ${item.label}`);
+  console.log("选择了菜单项:", item);
+};
 
-  /**
-   * 显示右键菜单
-   * @param e 鼠标事件
-   */
-  const showMenu = (e: MouseEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
+/**
+ * 显示右键菜单
+ * @param e 鼠标事件
+ */
+const showMenu = (e: MouseEvent) => {
+  e.preventDefault();
+  e.stopPropagation();
 
-    nextTick(() => {
-      menuRef.value?.show(e)
-    })
-  }
+  nextTick(() => {
+    menuRef.value?.show(e);
+  });
+};
 
-  /**
-   * 菜单显示回调
-   */
-  const onMenuShow = () => {
-    console.log('菜单显示')
-  }
+/**
+ * 菜单显示回调
+ */
+const onMenuShow = () => {
+  console.log("菜单显示");
+};
 
-  /**
-   * 菜单隐藏回调
-   */
-  const onMenuHide = () => {
-    console.log('菜单隐藏')
-  }
+/**
+ * 菜单隐藏回调
+ */
+const onMenuHide = () => {
+  console.log("菜单隐藏");
+};
 </script>
diff --git a/frontend/new-web/src/views/widgets/count-to/index.vue b/frontend/new-web/src/views/widgets/count-to/index.vue
index 70a06204..d69b2927 100644
--- a/frontend/new-web/src/views/widgets/count-to/index.vue
+++ b/frontend/new-web/src/views/widgets/count-to/index.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="page-content mb-5">
     <div class="mb-15 text-center">
-      <h1 class="my-4 text-2xl font-semibold leading-tight"
-        >基于 VueUse useTransition 的 Count-To 组件</h1
-      >
-      <p class="m-0 text-base leading-relaxed text-g-700"
-        >高性能数字滚动动画组件，支持完整的动画控制和事件监听</p
-      >
+      <h1 class="my-4 text-2xl font-semibold leading-tight">
+        基于 VueUse useTransition 的 Count-To 组件
+      </h1>
+      <p class="m-0 text-base leading-relaxed text-g-700">
+        高性能数字滚动动画组件，支持完整的动画控制和事件监听
+      </p>
     </div>
 
     <!-- 基础用法 -->
@@ -74,95 +74,95 @@
 </template>
 
 <script setup lang="ts">
-  import ArtCountTo from '@/components/core/text-effect/art-count-to/index.vue'
+import ArtCountTo from "@/components/core/text-effect/art-count-to/index.vue";
 
-  defineOptions({ name: 'TemplateCountTo' })
+defineOptions({ name: "TemplateCountTo" });
 
-  const controlTarget = ref(0)
-  const countToRef = ref()
-  const easingTarget = ref(0)
+const controlTarget = ref(0);
+const countToRef = ref();
+const easingTarget = ref(0);
 
-  /**
-   * 缓动动画类型配置
-   */
-  const easingTypes = [
-    { name: 'Linear', type: 'linear' },
-    { name: 'Ease Out Cubic', type: 'easeOutCubic' },
-    { name: 'Ease Out Expo', type: 'easeOutExpo' },
-    { name: 'Ease Out Sine', type: 'easeOutSine' },
-    { name: 'Ease In Out', type: 'easeInOutCubic' },
-    { name: 'Ease In Quad', type: 'easeInQuad' }
-  ] as const
+/**
+ * 缓动动画类型配置
+ */
+const easingTypes = [
+  { name: "Linear", type: "linear" },
+  { name: "Ease Out Cubic", type: "easeOutCubic" },
+  { name: "Ease Out Expo", type: "easeOutExpo" },
+  { name: "Ease Out Sine", type: "easeOutSine" },
+  { name: "Ease In Out", type: "easeInOutCubic" },
+  { name: "Ease In Quad", type: "easeInQuad" },
+] as const;
 
-  /**
-   * 开始计数动画
-   */
-  const startCount = () => {
-    const newTarget = 5000
-    controlTarget.value = newTarget
-    countToRef.value?.start(newTarget)
-  }
+/**
+ * 开始计数动画
+ */
+const startCount = () => {
+  const newTarget = 5000;
+  controlTarget.value = newTarget;
+  countToRef.value?.start(newTarget);
+};
 
-  /**
-   * 暂停计数动画
-   */
-  const pauseCount = () => {
-    countToRef.value?.pause()
-  }
+/**
+ * 暂停计数动画
+ */
+const pauseCount = () => {
+  countToRef.value?.pause();
+};
 
-  /**
-   * 重置计数动画
-   */
-  const resetCount = () => {
-    countToRef.value?.reset()
-    controlTarget.value = 0
-  }
+/**
+ * 重置计数动画
+ */
+const resetCount = () => {
+  countToRef.value?.reset();
+  controlTarget.value = 0;
+};
 
-  /**
-   * 触发缓动效果演示
-   * 在 0 和 1000 之间切换
-   */
-  const triggerEasing = () => {
-    easingTarget.value = easingTarget.value === 0 ? 1000 : 0
-  }
+/**
+ * 触发缓动效果演示
+ * 在 0 和 1000 之间切换
+ */
+const triggerEasing = () => {
+  easingTarget.value = easingTarget.value === 0 ? 1000 : 0;
+};
 
-  /**
-   * 动画开始回调
-   * @param value 目标值
-   */
-  const handleAnimationStarted = (value: number) => {
-    console.log('动画开始，目标值:', value)
-  }
+/**
+ * 动画开始回调
+ * @param value 目标值
+ */
+const handleAnimationStarted = (value: number) => {
+  console.log("动画开始，目标值:", value);
+};
 
-  /**
-   * 动画完成回调
-   * @param value 最终值
-   */
-  const handleAnimationFinished = (value: number) => {
-    console.log('动画完成，最终值:', value)
-  }
+/**
+ * 动画完成回调
+ * @param value 最终值
+ */
+const handleAnimationFinished = (value: number) => {
+  console.log("动画完成，最终值:", value);
+};
 
-  /**
-   * 动画暂停回调
-   * @param value 当前值
-   */
-  const handleAnimationPaused = (value: number) => {
-    console.log('动画暂停，当前值:', value)
-  }
+/**
+ * 动画暂停回调
+ * @param value 当前值
+ */
+const handleAnimationPaused = (value: number) => {
+  console.log("动画暂停，当前值:", value);
+};
 
-  /**
-   * 动画重置回调
-   */
-  const handleAnimationReset = () => {
-    console.log('动画已重置')
-  }
+/**
+ * 动画重置回调
+ */
+const handleAnimationReset = () => {
+  console.log("动画已重置");
+};
 </script>
 
 <style scoped>
-  @reference '@styles/core/tailwind.css';
+@reference '@styles/core/tailwind.css';
 
-  .count {
-    @apply p-5 
+.count {
+  @apply p-5 
     mb-5 
     text-2xl 
     font-semibold 
@@ -171,5 +171,5 @@
     rounded-lg 
     tabular-nums
     border border-g-300/60;
-  }
+}
 </style>
diff --git a/frontend/new-web/src/views/widgets/drag/index.vue b/frontend/new-web/src/views/widgets/drag/index.vue
index 58ded5ac..1f5530d4 100644
--- a/frontend/new-web/src/views/widgets/drag/index.vue
+++ b/frontend/new-web/src/views/widgets/drag/index.vue
@@ -63,7 +63,7 @@
             <ElTableColumn label="姓名" prop="name" />
             <ElTableColumn label="角色" prop="role" />
             <ElTableColumn label="操作" width="100">
-              <ElButton size="default" class="handle"> 移动 </ElButton>
+              <ElButton size="default" class="handle">移动</ElButton>
             </ElTableColumn>
           </ArtTable>
         </VueDraggable>
@@ -73,36 +73,36 @@
 </template>
 
 <script setup lang="ts">
-  import { VueDraggable } from 'vue-draggable-plus'
+import { VueDraggable } from "vue-draggable-plus";
 
-  defineOptions({ name: 'TemplateDrag' })
+defineOptions({ name: "TemplateDrag" });
 
-  /**
-   * 用户列表数据
-   * 用于演示拖拽排序功能
-   */
-  const userList = ref([
-    { name: '孙悟空', role: '斗战胜佛' },
-    { name: '猪八戒', role: '净坛使者' },
-    { name: '沙僧', role: '金身罗汉' },
-    { name: '唐僧', role: '旃檀功德佛' }
-  ])
+/**
+ * 用户列表数据
+ * 用于演示拖拽排序功能
+ */
+const userList = ref([
+  { name: "孙悟空", role: "斗战胜佛" },
+  { name: "猪八戒", role: "净坛使者" },
+  { name: "沙僧", role: "金身罗汉" },
+  { name: "唐僧", role: "旃檀功德佛" },
+]);
 </script>
 
 <style scoped>
-  .fade-move,
-  .fade-enter-active,
-  .fade-leave-active {
-    transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
-  }
+.fade-move,
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
+}
 
-  .fade-enter-from,
-  .fade-leave-to {
-    opacity: 0;
-    transform: scaleY(0.01) translate(30px, 0);
-  }
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  transform: scaleY(0.01) translate(30px, 0);
+}
 
-  .fade-leave-active {
-    position: absolute;
-  }
+.fade-leave-active {
+  position: absolute;
+}
 </style>
diff --git a/frontend/new-web/src/views/widgets/excel/index.vue b/frontend/new-web/src/views/widgets/excel/index.vue
index 47b15b23..77cc4a19 100644
--- a/frontend/new-web/src/views/widgets/excel/index.vue
+++ b/frontend/new-web/src/views/widgets/excel/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="page-content">
     <ArtExcelImport @import-success="handleImportSuccess" @import-error="handleImportError">
-      <template #import-text> 上传 Excel </template>
+      <template #import-text>上传 Excel</template>
     </ArtExcelImport>
 
     <ArtExcelExport
@@ -34,118 +34,118 @@
 </template>
 
 <script setup lang="ts">
-  defineOptions({ name: 'WidgetsExcel' })
+defineOptions({ name: "WidgetsExcel" });
 
-  /**
-   * 表格数据类型定义
-   */
-  interface TableData {
-    name: string
-    age: number
-    city: string
-  }
+/**
+ * 表格数据类型定义
+ */
+interface TableData {
+  name: string;
+  age: number;
+  city: string;
+}
 
-  /**
-   * 表格数据
-   */
-  const tableData = ref<TableData[]>([
-    { name: '李四', age: 20, city: '上海' },
-    { name: '张三', age: 25, city: '北京' },
-    { name: '王五', age: 30, city: '广州' },
-    { name: '赵六', age: 35, city: '深圳' },
-    { name: '孙七', age: 28, city: '杭州' },
-    { name: '周八', age: 32, city: '成都' },
-    { name: '吴九', age: 27, city: '武汉' },
-    { name: '郑十', age: 40, city: '南京' },
-    { name: '刘一', age: 22, city: '重庆' },
-    { name: '陈二', age: 33, city: '西安' }
-  ])
+/**
+ * 表格数据
+ */
+const tableData = ref<TableData[]>([
+  { name: "李四", age: 20, city: "上海" },
+  { name: "张三", age: 25, city: "北京" },
+  { name: "王五", age: 30, city: "广州" },
+  { name: "赵六", age: 35, city: "深圳" },
+  { name: "孙七", age: 28, city: "杭州" },
+  { name: "周八", age: 32, city: "成都" },
+  { name: "吴九", age: 27, city: "武汉" },
+  { name: "郑十", age: 40, city: "南京" },
+  { name: "刘一", age: 22, city: "重庆" },
+  { name: "陈二", age: 33, city: "西安" },
+]);
 
-  /**
-   * 表头映射配置
-   * 用于 Excel 导入导出时的字段映射
-   */
-  const headers = {
-    name: '姓名',
-    age: '年龄',
-    city: '城市'
-  }
+/**
+ * 表头映射配置
+ * 用于 Excel 导入导出时的字段映射
+ */
+const headers = {
+  name: "姓名",
+  age: "年龄",
+  city: "城市",
+};
 
-  /**
-   * 列配置
-   * 用于 Excel 导出时的列宽和格式化
-   */
-  const columnConfig = {
-    name: {
-      title: '姓名',
-      width: 20,
-      formatter: (value: unknown) => (value ? String(value) : '未知')
-    },
-    age: {
-      title: '年龄',
-      width: 10,
-      formatter: (value: unknown) => (value ? `${value}岁` : '0岁')
-    },
-    city: {
-      title: '城市',
-      width: 12,
-      formatter: (value: unknown) => (value ? `${value}市` : '未知')
-    }
-  }
+/**
+ * 列配置
+ * 用于 Excel 导出时的列宽和格式化
+ */
+const columnConfig = {
+  name: {
+    title: "姓名",
+    width: 20,
+    formatter: (value: unknown) => (value ? String(value) : "未知"),
+  },
+  age: {
+    title: "年龄",
+    width: 10,
+    formatter: (value: unknown) => (value ? `${value}岁` : "0岁"),
+  },
+  city: {
+    title: "城市",
+    width: 12,
+    formatter: (value: unknown) => (value ? `${value}市` : "未知"),
+  },
+};
 
-  /**
-   * 处理 Excel 导入成功
-   * 将导入的数据转换为表格数据格式
-   * @param data 导入的原始数据
-   */
-  const handleImportSuccess = (data: Array<Record<string, unknown>>) => {
-    const formattedData: TableData[] = data.map((item) => ({
-      name: String(item['姓名'] || ''),
-      age: Number(item['年龄']) || 0,
-      city: String(item['城市'] || '')
-    }))
-    tableData.value = formattedData
-    ElMessage.success(`成功导入 ${formattedData.length} 条数据`)
-  }
+/**
+ * 处理 Excel 导入成功
+ * 将导入的数据转换为表格数据格式
+ * @param data 导入的原始数据
+ */
+const handleImportSuccess = (data: Array<Record<string, unknown>>) => {
+  const formattedData: TableData[] = data.map((item) => ({
+    name: String(item["姓名"] || ""),
+    age: Number(item["年龄"]) || 0,
+    city: String(item["城市"] || ""),
+  }));
+  tableData.value = formattedData;
+  ElMessage.success(`成功导入 ${formattedData.length} 条数据`);
+};
 
-  /**
-   * 处理 Excel 导入错误
-   * @param error 错误对象
-   */
-  const handleImportError = (error: Error) => {
-    console.error('导入失败:', error)
-    ElMessage.error(`导入失败: ${error.message}`)
-  }
+/**
+ * 处理 Excel 导入错误
+ * @param error 错误对象
+ */
+const handleImportError = (error: Error) => {
+  console.error("导入失败:", error);
+  ElMessage.error(`导入失败: ${error.message}`);
+};
 
-  /**
-   * 处理 Excel 导出成功
-   */
-  const handleExportSuccess = () => {
-    console.log('导出成功')
-    ElMessage.success('Excel 导出成功')
-  }
+/**
+ * 处理 Excel 导出成功
+ */
+const handleExportSuccess = () => {
+  console.log("导出成功");
+  ElMessage.success("Excel 导出成功");
+};
 
-  /**
-   * 处理 Excel 导出错误
-   * @param error 错误对象
-   */
-  const handleExportError = (error: Error) => {
-    ElMessage.error(`导出失败: ${error.message}`)
-  }
+/**
+ * 处理 Excel 导出错误
+ * @param error 错误对象
+ */
+const handleExportError = (error: Error) => {
+  ElMessage.error(`导出失败: ${error.message}`);
+};
 
-  /**
-   * 处理导出进度
-   * @param progress 导出进度百分比
-   */
-  const handleProgress = (progress: number) => {
-    console.log('导出进度:', progress)
-  }
+/**
+ * 处理导出进度
+ * @param progress 导出进度百分比
+ */
+const handleProgress = (progress: number) => {
+  console.log("导出进度:", progress);
+};
 
-  /**
-   * 清空表格数据
-   */
-  const handleClear = () => {
-    tableData.value = []
-    ElMessage.info('已清空数据')
-  }
+/**
+ * 清空表格数据
+ */
+const handleClear = () => {
+  tableData.value = [];
+  ElMessage.info("已清空数据");
+};
 </script>
diff --git a/frontend/new-web/src/views/widgets/fireworks/index.vue b/frontend/new-web/src/views/widgets/fireworks/index.vue
index e2026a21..7394dbb6 100644
--- a/frontend/new-web/src/views/widgets/fireworks/index.vue
+++ b/frontend/new-web/src/views/widgets/fireworks/index.vue
@@ -2,21 +2,21 @@
   <div class="page-content">
     <div class="mb-5">
       <ElSpace wrap>
-        <ElButton :disabled="isLaunching" v-ripple @click="handleSingleLaunch"
-          >✨ 放个小礼花</ElButton
-        >
-        <ElButton :disabled="isLaunching" v-ripple @click="handleImageLaunch(bp)"
-          >🎉 打开幸运红包</ElButton
-        >
-        <ElButton :disabled="isLaunching" v-ripple @click="handleMultipleLaunch('')"
-          >🎆 璀璨烟火秀</ElButton
-        >
-        <ElButton :disabled="isLaunching" v-ripple @click="handleImageLaunch(sd)"
-          >❄️ 飘点小雪花</ElButton
-        >
-        <ElButton :disabled="isLaunching" v-ripple @click="handleMultipleLaunch(sd)"
-          >❄️ 浪漫暴风雪</ElButton
-        >
+        <ElButton :disabled="isLaunching" v-ripple @click="handleSingleLaunch">
+          ✨ 放个小礼花
+        </ElButton>
+        <ElButton :disabled="isLaunching" v-ripple @click="handleImageLaunch(bp)">
+          🎉 打开幸运红包
+        </ElButton>
+        <ElButton :disabled="isLaunching" v-ripple @click="handleMultipleLaunch('')">
+          🎆 璀璨烟火秀
+        </ElButton>
+        <ElButton :disabled="isLaunching" v-ripple @click="handleImageLaunch(sd)">
+          ❄️ 飘点小雪花
+        </ElButton>
+        <ElButton :disabled="isLaunching" v-ripple @click="handleMultipleLaunch(sd)">
+          ❄️ 浪漫暴风雪
+        </ElButton>
       </ElSpace>
     </div>
 
@@ -45,72 +45,72 @@
 </template>
 
 <script setup lang="ts">
-  import { mittBus } from '@/utils/sys'
-  import bp from '@imgs/ceremony/hb.png'
-  import sd from '@imgs/ceremony/sd.png'
+import { mittBus } from "@/utils/sys";
+import bp from "@imgs/ceremony/hb.png";
+import sd from "@imgs/ceremony/sd.png";
 
-  defineOptions({ name: 'WidgetsFireworks' })
+defineOptions({ name: "WidgetsFireworks" });
 
-  const timerRef = ref<ReturnType<typeof setInterval> | null>(null)
-  const isLaunching = ref(false)
+const timerRef = ref<ReturnType<typeof setInterval> | null>(null);
+const isLaunching = ref(false);
 
-  /**
-   * 触发连续礼花效果
-   * @param count 发射次数
-   * @param src 图片资源路径
-   */
-  const triggerFireworks = (count: number, src: string) => {
-    // 清除之前的定时器
-    if (timerRef.value) {
-      clearInterval(timerRef.value)
-      timerRef.value = null
+/**
+ * 触发连续礼花效果
+ * @param count 发射次数
+ * @param src 图片资源路径
+ */
+const triggerFireworks = (count: number, src: string) => {
+  // 清除之前的定时器
+  if (timerRef.value) {
+    clearInterval(timerRef.value);
+    timerRef.value = null;
+  }
+
+  isLaunching.value = true;
+
+  let fired = 0;
+  timerRef.value = setInterval(() => {
+    mittBus.emit("triggerFireworks", src);
+    fired++;
+
+    if (fired >= count) {
+      clearInterval(timerRef.value!);
+      timerRef.value = null;
+      isLaunching.value = false;
     }
+  }, 1000);
+};
 
-    isLaunching.value = true
+/**
+ * 发射单个礼花
+ */
+const handleSingleLaunch = () => {
+  mittBus.emit("triggerFireworks");
+};
 
-    let fired = 0
-    timerRef.value = setInterval(() => {
-      mittBus.emit('triggerFireworks', src)
-      fired++
+/**
+ * 发射多个礼花
+ * @param src 图片资源路径
+ */
+const handleMultipleLaunch = (src: string) => {
+  triggerFireworks(10, src);
+};
 
-      if (fired >= count) {
-        clearInterval(timerRef.value!)
-        timerRef.value = null
-        isLaunching.value = false
-      }
-    }, 1000)
+/**
+ * 发射带图片的礼花
+ * @param src 图片资源路径
+ */
+const handleImageLaunch = (src: string) => {
+  mittBus.emit("triggerFireworks", src);
+};
+
+/**
+ * 组件卸载时清理定时器
+ */
+onUnmounted(() => {
+  if (timerRef.value) {
+    clearInterval(timerRef.value);
+    timerRef.value = null;
   }
-
-  /**
-   * 发射单个礼花
-   */
-  const handleSingleLaunch = () => {
-    mittBus.emit('triggerFireworks')
-  }
-
-  /**
-   * 发射多个礼花
-   * @param src 图片资源路径
-   */
-  const handleMultipleLaunch = (src: string) => {
-    triggerFireworks(10, src)
-  }
-
-  /**
-   * 发射带图片的礼花
-   * @param src 图片资源路径
-   */
-  const handleImageLaunch = (src: string) => {
-    mittBus.emit('triggerFireworks', src)
-  }
-
-  /**
-   * 组件卸载时清理定时器
-   */
-  onUnmounted(() => {
-    if (timerRef.value) {
-      clearInterval(timerRef.value)
-      timerRef.value = null
-    }
-  })
+});
 </script>
diff --git a/frontend/new-web/src/views/widgets/icon/index.vue b/frontend/new-web/src/views/widgets/icon/index.vue
index 333afd4f..52a0c4e3 100644
--- a/frontend/new-web/src/views/widgets/icon/index.vue
+++ b/frontend/new-web/src/views/widgets/icon/index.vue
@@ -3,9 +3,9 @@
     <div class="text-2xl font-medium mt-5 max-sm:text-2xl max-sm:mt-3">图标</div>
     <div class="text-g-800">
       v.3.0 版本图标库升级为 iconify，可在
-      <a href="https://icones.js.org/" target="_blank" class="text-theme hover:underline"
-        >Iconify</a
-      >
+      <a href="https://icones.js.org/" target="_blank" class="text-theme hover:underline">
+        Iconify
+      </a>
       中查找，支持多种图标库，如 Remix Icon, Solar, Tabler Icons 等。
     </div>
     <div class="text-g-800">
@@ -14,11 +14,14 @@
         href="https://icones.js.org/collection/ri"
         target="_blank"
         class="text-theme hover:underline"
-        >Iconify</a
       >
-      或<a href="https://remixicon.com/" target="_blank" class="text-theme hover:underline">
-        Remix Icon 官网 </a
-      >搜索使用。
+        Iconify
+      </a>
+      或
+      <a href="https://remixicon.com/" target="_blank" class="text-theme hover:underline">
+        Remix Icon 官网
+      </a>
+      搜索使用。
     </div>
 
     <!-- Iconify 图标 -->
@@ -104,7 +107,7 @@
 </template>
 
 <script setup lang="ts">
-  import ArtSvgIcon from '@/components/core/base/art-svg-icon/index.vue'
+import ArtSvgIcon from "@/components/core/base/art-svg-icon/index.vue";
 
-  defineOptions({ name: 'IconPage' })
+defineOptions({ name: "IconPage" });
 </script>
diff --git a/frontend/new-web/src/views/widgets/image-crop/index.vue b/frontend/new-web/src/views/widgets/image-crop/index.vue
index 27376bc1..8c70c2b7 100644
--- a/frontend/new-web/src/views/widgets/image-crop/index.vue
+++ b/frontend/new-web/src/views/widgets/image-crop/index.vue
@@ -22,38 +22,38 @@
 </template>
 
 <script setup lang="ts">
-  import lockImg from '@imgs/lock/bg_dark.webp'
+import lockImg from "@imgs/lock/bg_dark.webp";
 
-  defineOptions({ name: 'WidgetsImageCrop' })
+defineOptions({ name: "WidgetsImageCrop" });
 
-  /**
-   * 图片 URL
-   */
-  const imageUrl = ref(lockImg)
+/**
+ * 图片 URL
+ */
+const imageUrl = ref(lockImg);
 
-  /**
-   * 处理裁剪错误
-   * @param error 错误对象
-   */
-  const handleError = (error: Error) => {
-    console.error('裁剪错误:', error)
-    ElMessage.error('图片裁剪失败')
-  }
+/**
+ * 处理裁剪错误
+ * @param error 错误对象
+ */
+const handleError = (error: Error) => {
+  console.error("裁剪错误:", error);
+  ElMessage.error("图片裁剪失败");
+};
 
-  /**
-   * 处理图片加载完成
-   * @param result 加载结果
-   */
-  const handleLoadComplete = (result: { url: string; width: number; height: number }) => {
-    console.log('图片加载完成:', result)
-  }
+/**
+ * 处理图片加载完成
+ * @param result 加载结果
+ */
+const handleLoadComplete = (result: { url: string; width: number; height: number }) => {
+  console.log("图片加载完成:", result);
+};
 
-  /**
-   * 处理图片加载错误
-   * @param error 错误对象
-   */
-  const handleLoadError = (error: Error) => {
-    console.error('图片加载失败:', error)
-    ElMessage.error('图片加载失败')
-  }
+/**
+ * 处理图片加载错误
+ * @param error 错误对象
+ */
+const handleLoadError = (error: Error) => {
+  console.error("图片加载失败:", error);
+  ElMessage.error("图片加载失败");
+};
 </script>
diff --git a/frontend/new-web/src/views/widgets/qrcode/index.vue b/frontend/new-web/src/views/widgets/qrcode/index.vue
index 3b89c496..17849050 100644
--- a/frontend/new-web/src/views/widgets/qrcode/index.vue
+++ b/frontend/new-web/src/views/widgets/qrcode/index.vue
@@ -26,105 +26,105 @@
 </template>
 
 <script setup lang="ts">
-  import QrcodeVue from 'qrcode.vue'
-  import type { Level, RenderAs, ImageSettings } from 'qrcode.vue'
+import QrcodeVue from "qrcode.vue";
+import type { Level, RenderAs, ImageSettings } from "qrcode.vue";
 
-  defineOptions({ name: 'WidgetsQrcode' })
+defineOptions({ name: "WidgetsQrcode" });
 
-  /**
-   * 二维码内容
-   */
-  const qrValue = ref('https://www.artd.pro')
-  const isShowLogo = ref(false)
+/**
+ * 二维码内容
+ */
+const qrValue = ref("https://www.artd.pro");
+const isShowLogo = ref(false);
 
-  /**
-   * 预设二维码样式配置
-   */
-  const qrcodePresets = [
-    {
-      title: '渲染成 svg 标签',
-      config: {
-        size: 160,
-        level: 'H' as Level,
-        renderAs: 'svg' as RenderAs,
-        margin: 0,
-        background: '#ffffff',
-        foreground: '#000000'
-      }
+/**
+ * 预设二维码样式配置
+ */
+const qrcodePresets = [
+  {
+    title: "渲染成 svg 标签",
+    config: {
+      size: 160,
+      level: "H" as Level,
+      renderAs: "svg" as RenderAs,
+      margin: 0,
+      background: "#ffffff",
+      foreground: "#000000",
     },
-    {
-      title: '渲染成 canvas 标签',
-      config: {
-        size: 160,
-        level: 'H' as Level,
-        renderAs: 'canvas' as RenderAs,
-        margin: 0,
-        background: '#ffffff',
-        foreground: '#000000'
-      }
+  },
+  {
+    title: "渲染成 canvas 标签",
+    config: {
+      size: 160,
+      level: "H" as Level,
+      renderAs: "canvas" as RenderAs,
+      margin: 0,
+      background: "#ffffff",
+      foreground: "#000000",
     },
-    {
-      title: '自定义颜色',
-      config: {
-        size: 160,
-        level: 'H' as Level,
-        renderAs: 'canvas' as RenderAs,
-        margin: 0,
-        background: '#f0f0f0',
-        foreground: '#4080ff'
-      }
+  },
+  {
+    title: "自定义颜色",
+    config: {
+      size: 160,
+      level: "H" as Level,
+      renderAs: "canvas" as RenderAs,
+      margin: 0,
+      background: "#f0f0f0",
+      foreground: "#4080ff",
     },
-    {
-      title: '带有Logo',
-      config: {
-        size: 160,
-        level: 'H' as Level,
-        renderAs: 'canvas' as RenderAs,
-        margin: 0,
-        background: '#ffffff',
-        foreground: '#000000',
-        imageSettings: {
-          src: 'https://www.artd.pro/assets/draw1-Ce1WF34i.png',
-          width: 40,
-          height: 40,
-          excavate: true
-        }
-      }
-    }
-  ]
-
-  /**
-   * 二维码配置
-   */
-  const qrcodeConfig = reactive({
-    size: 160,
-    level: 'H' as Level,
-    renderAs: 'canvas' as RenderAs,
-    margin: 0,
-    background: '#ffffff',
-    foreground: '#000000',
-    imageSettings: {
-      src: 'https://www.artd.pro/assets/draw1-Ce1WF34i.png',
-      width: 40,
-      height: 40,
-      excavate: true
-    } as ImageSettings
-  })
-
-  /**
-   * 监听是否显示 logo
-   * 根据状态动态设置二维码中心的 logo 图片
-   */
-  watch(isShowLogo, (val) => {
-    if (!val) {
-      qrcodeConfig.imageSettings = {} as ImageSettings
-    } else {
-      qrcodeConfig.imageSettings = {
-        src: 'https://www.artd.pro/assets/draw1-Ce1WF34i.png',
+  },
+  {
+    title: "带有Logo",
+    config: {
+      size: 160,
+      level: "H" as Level,
+      renderAs: "canvas" as RenderAs,
+      margin: 0,
+      background: "#ffffff",
+      foreground: "#000000",
+      imageSettings: {
+        src: "https://www.artd.pro/assets/draw1-Ce1WF34i.png",
         width: 40,
         height: 40,
-        excavate: true
-      }
-    }
-  })
+        excavate: true,
+      },
+    },
+  },
+];
+
+/**
+ * 二维码配置
+ */
+const qrcodeConfig = reactive({
+  size: 160,
+  level: "H" as Level,
+  renderAs: "canvas" as RenderAs,
+  margin: 0,
+  background: "#ffffff",
+  foreground: "#000000",
+  imageSettings: {
+    src: "https://www.artd.pro/assets/draw1-Ce1WF34i.png",
+    width: 40,
+    height: 40,
+    excavate: true,
+  } as ImageSettings,
+});
+
+/**
+ * 监听是否显示 logo
+ * 根据状态动态设置二维码中心的 logo 图片
+ */
+watch(isShowLogo, (val) => {
+  if (!val) {
+    qrcodeConfig.imageSettings = {} as ImageSettings;
+  } else {
+    qrcodeConfig.imageSettings = {
+      src: "https://www.artd.pro/assets/draw1-Ce1WF34i.png",
+      width: 40,
+      height: 40,
+      excavate: true,
+    };
+  }
+});
 </script>
diff --git a/frontend/new-web/src/views/widgets/text-scroll/index.vue b/frontend/new-web/src/views/widgets/text-scroll/index.vue
index 7cfefe5f..4175ea32 100644
--- a/frontend/new-web/src/views/widgets/text-scroll/index.vue
+++ b/frontend/new-web/src/views/widgets/text-scroll/index.vue
@@ -39,13 +39,13 @@
 </template>
 
 <script setup lang="ts">
-  defineOptions({ name: 'WidgetsTextScroll' })
+defineOptions({ name: "WidgetsTextScroll" });
 
-  /**
-   * 处理关闭事件
-   */
-  const handleClose = () => {
-    console.log('文本滚动组件已关闭')
-    ElMessage.info('已关闭')
-  }
+/**
+ * 处理关闭事件
+ */
+const handleClose = () => {
+  console.log("文本滚动组件已关闭");
+  ElMessage.info("已关闭");
+};
 </script>
diff --git a/frontend/new-web/src/views/widgets/video/index.vue b/frontend/new-web/src/views/widgets/video/index.vue
index 1a838910..9ee04962 100644
--- a/frontend/new-web/src/views/widgets/video/index.vue
+++ b/frontend/new-web/src/views/widgets/video/index.vue
@@ -14,19 +14,19 @@
 </template>
 
 <script setup lang="ts">
-  import lockImg from '@imgs/lock/bg_dark.webp'
+import lockImg from "@imgs/lock/bg_dark.webp";
 
-  defineOptions({ name: 'WidgetsVideo' })
+defineOptions({ name: "WidgetsVideo" });
 
-  /**
-   * 视频源 URL
-   */
-  const videoUrl = ref(
-    '//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/xgplayer-demo.mp4'
-  )
+/**
+ * 视频源 URL
+ */
+const videoUrl = ref(
+  "//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/xgplayer-demo.mp4"
+);
 
-  /**
-   * 视频封面图片 URL
-   */
-  const posterUrl = ref(lockImg)
+/**
+ * 视频封面图片 URL
+ */
+const posterUrl = ref(lockImg);
 </script>
diff --git a/frontend/new-web/src/views/widgets/wang-editor/index.vue b/frontend/new-web/src/views/widgets/wang-editor/index.vue
index bf2d4809..f2de9fd3 100644
--- a/frontend/new-web/src/views/widgets/wang-editor/index.vue
+++ b/frontend/new-web/src/views/widgets/wang-editor/index.vue
@@ -211,35 +211,35 @@
 </template>
 
 <script setup lang="ts">
-  defineOptions({ name: 'WidgetsWangEditor' })
+defineOptions({ name: "WidgetsWangEditor" });
 
-  const fullEditorRef = ref()
-  const simpleEditorRef = ref()
-  const fullActiveTab = ref('preview')
-  const simpleActiveTab = ref('preview')
-  const activeCollapse = ref(['basic'])
+const fullEditorRef = ref();
+const simpleEditorRef = ref();
+const fullActiveTab = ref("preview");
+const simpleActiveTab = ref("preview");
+const activeCollapse = ref(["basic"]);
 
-  /**
-   * 简化工具栏配置
-   * 只包含基础的编辑功能
-   */
-  const simpleToolbarKeys = [
-    'bold',
-    'italic',
-    'underline',
-    '|',
-    'bulletedList',
-    'numberedList',
-    '|',
-    'insertLink',
-    'insertImage',
-    '|',
-    'undo',
-    'redo'
-  ]
+/**
+ * 简化工具栏配置
+ * 只包含基础的编辑功能
+ */
+const simpleToolbarKeys = [
+  "bold",
+  "italic",
+  "underline",
+  "|",
+  "bulletedList",
+  "numberedList",
+  "|",
+  "insertLink",
+  "insertImage",
+  "|",
+  "undo",
+  "redo",
+];
 
-  // 完整编辑器内容
-  const fullEditorHtml = ref(`<h1>🎨 完整工具栏编辑器示例</h1>
+// 完整编辑器内容
+const fullEditorHtml = ref(`<h1>🎨 完整工具栏编辑器示例</h1>
 <p>这个编辑器包含所有功能，您可以体验丰富的格式编辑功能。</p>
 
 <h2>✨ 文本样式</h2>
@@ -288,10 +288,10 @@ function createEditor() {
   });
 }</code></pre>
 
-<p>🔗 <a href="https://www.wangeditor.com/" target="_blank">访问官网了解更多</a></p>`)
+<p>🔗 <a href="https://www.wangeditor.com/" target="_blank">访问官网了解更多</a></p>`);
 
-  // 简化编辑器内容
-  const simpleEditorHtml = ref(`<h1>✨ 简化工具栏编辑器示例</h1>
+// 简化编辑器内容
+const simpleEditorHtml = ref(`<h1>✨ 简化工具栏编辑器示例</h1>
 <p>这个编辑器只包含基础的编辑功能，界面更加简洁。</p>
 
 <h2>基础文本格式</h2>
@@ -313,30 +313,30 @@ function createEditor() {
 <h2>链接和图片</h2>
 <p>支持插入 <a href="https://www.wangeditor.com/" target="_blank">链接</a> 和图片。</p>
 
-<p>简化版编辑器专注于基础功能，适合简单的内容编辑需求。</p>`)
+<p>简化版编辑器专注于基础功能，适合简单的内容编辑需求。</p>`);
 
-  /**
-   * 清空完整编辑器内容
-   */
-  const clearFullEditor = () => {
-    fullEditorRef.value?.clear()
-    ElMessage.success('完整编辑器已清空')
-  }
+/**
+ * 清空完整编辑器内容
+ */
+const clearFullEditor = () => {
+  fullEditorRef.value?.clear();
+  ElMessage.success("完整编辑器已清空");
+};
 
-  /**
-   * 获取完整编辑器内容
-   */
-  const getFullEditorContent = () => {
-    const content = fullEditorRef.value?.getHtml()
-    console.log('完整编辑器内容:', content)
-    ElMessage.success('完整编辑器内容已输出到控制台')
-  }
+/**
+ * 获取完整编辑器内容
+ */
+const getFullEditorContent = () => {
+  const content = fullEditorRef.value?.getHtml();
+  console.log("完整编辑器内容:", content);
+  ElMessage.success("完整编辑器内容已输出到控制台");
+};
 
-  /**
-   * 设置完整编辑器演示内容
-   */
-  const setFullEditorDemo = () => {
-    const demoContent = `<h2>🎉 完整编辑器演示内容</h2>
+/**
+ * 设置完整编辑器演示内容
+ */
+const setFullEditorDemo = () => {
+  const demoContent = `<h2>🎉 完整编辑器演示内容</h2>
 <p>这是通过方法设置的演示内容，展示完整编辑器的强大功能。</p>
 <ul>
   <li>支持丰富的文本格式</li>
@@ -347,34 +347,34 @@ function createEditor() {
   <tr><th>特性</th><th>状态</th></tr>
   <tr><td>完整工具栏</td><td>✅ 已启用</td></tr>
   <tr><td>高级功能</td><td>✅ 已启用</td></tr>
-</table>`
+</table>`;
 
-    fullEditorRef.value?.setHtml(demoContent)
-    ElMessage.success('已设置完整编辑器演示内容')
-  }
+  fullEditorRef.value?.setHtml(demoContent);
+  ElMessage.success("已设置完整编辑器演示内容");
+};
 
-  /**
-   * 清空简化编辑器内容
-   */
-  const clearSimpleEditor = () => {
-    simpleEditorRef.value?.clear()
-    ElMessage.success('简化编辑器已清空')
-  }
+/**
+ * 清空简化编辑器内容
+ */
+const clearSimpleEditor = () => {
+  simpleEditorRef.value?.clear();
+  ElMessage.success("简化编辑器已清空");
+};
 
-  /**
-   * 获取简化编辑器内容
-   */
-  const getSimpleEditorContent = () => {
-    const content = simpleEditorRef.value?.getHtml()
-    console.log('简化编辑器内容:', content)
-    ElMessage.success('简化编辑器内容已输出到控制台')
-  }
+/**
+ * 获取简化编辑器内容
+ */
+const getSimpleEditorContent = () => {
+  const content = simpleEditorRef.value?.getHtml();
+  console.log("简化编辑器内容:", content);
+  ElMessage.success("简化编辑器内容已输出到控制台");
+};
 
-  /**
-   * 设置简化编辑器演示内容
-   */
-  const setSimpleEditorDemo = () => {
-    const demoContent = `<h2>⚡ 简化编辑器演示内容</h2>
+/**
+ * 设置简化编辑器演示内容
+ */
+const setSimpleEditorDemo = () => {
+  const demoContent = `<h2>⚡ 简化编辑器演示内容</h2>
 <p>这是通过方法设置的演示内容，展示简化编辑器的核心功能。</p>
 <ul>
   <li><strong>基础格式</strong>：加粗、斜体、下划线</li>
@@ -386,152 +386,152 @@ function createEditor() {
   <li>功能专注实用</li>
   <li>适合快速编辑</li>
 </ol>
-<p>🔗 <a href="https://example.com" target="_blank">这是一个链接示例</a></p>`
+<p>🔗 <a href="https://example.com" target="_blank">这是一个链接示例</a></p>`;
 
-    simpleEditorRef.value?.setHtml(demoContent)
-    ElMessage.success('已设置简化编辑器演示内容')
-  }
+  simpleEditorRef.value?.setHtml(demoContent);
+  ElMessage.success("已设置简化编辑器演示内容");
+};
 </script>
 
 <style lang="scss" scoped>
-  .page-content {
-    padding: 20px;
-  }
+.page-content {
+  padding: 20px;
+}
 
-  .editor-card {
-    margin-bottom: 24px;
+.editor-card {
+  margin-bottom: 24px;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.header-buttons {
+  display: flex;
+  gap: 8px;
+}
+
+.preview-card {
+  margin-bottom: 24px;
+}
+
+.preview-card h3 {
+  margin: 0 0 16px;
+  font-size: 16px;
+  color: var(--el-text-color-primary);
+}
+
+.content-preview {
+  min-height: 200px;
+  max-height: 300px;
+  padding: 16px;
+  overflow-y: auto;
+  background-color: var(--el-bg-color);
+  border: 1px solid var(--el-border-color);
+  border-radius: 6px;
+}
+
+.content-preview :deep(h1),
+.content-preview :deep(h2),
+.content-preview :deep(h3) {
+  margin: 16px 0 8px;
+}
+
+.content-preview :deep(p) {
+  margin: 8px 0;
+  line-height: 1.6;
+}
+
+.content-preview :deep(table) {
+  margin: 16px 0;
+}
+
+.content-preview :deep(table th),
+.content-preview :deep(table td) {
+  padding: 8px 12px;
+}
+
+.content-preview :deep(pre) {
+  padding: 12px;
+  margin: 16px 0;
+  overflow-x: auto;
+  background-color: var(--el-fill-color-light);
+  border-radius: 4px;
+}
+
+.content-preview :deep(blockquote) {
+  padding-left: 16px;
+  margin: 16px 0;
+  color: var(--el-text-color-regular);
+  border-left: 4px solid var(--el-color-primary);
+}
+
+.usage-card :deep(.el-collapse-item__content) {
+  padding-bottom: 16px;
+}
+
+.usage-card pre {
+  padding: 16px;
+  margin: 0;
+  overflow-x: auto;
+  background-color: var(--el-fill-color-light);
+  border-radius: 6px;
+}
+
+.usage-card pre code {
+  font-family: Consolas, Monaco, "Courier New", monospace;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.toolbar-explanation h4 {
+  margin: 0 0 16px;
+  color: var(--el-text-color-primary);
+}
+
+.toolbar-explanation h5 {
+  margin: 0 0 8px;
+  font-size: 14px;
+  color: var(--el-text-color-regular);
+}
+
+.toolbar-explanation ul {
+  padding-left: 20px;
+  margin: 8px 0 16px;
+}
+
+.toolbar-explanation ul li {
+  margin: 4px 0;
+  font-size: 13px;
+  color: var(--el-text-color-regular);
+}
+
+.toolbar-explanation .note {
+  margin: 8px 0 0;
+  font-size: 12px;
+  font-style: italic;
+  color: var(--el-text-color-placeholder);
+}
+
+@media (width <= 768px) {
+  .page-content {
+    padding: 12px;
   }
 
   .card-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
+    flex-direction: column;
+    gap: 12px;
+    align-items: stretch !important;
   }
 
   .header-buttons {
-    display: flex;
-    gap: 8px;
+    justify-content: center;
   }
 
-  .preview-card {
-    margin-bottom: 24px;
-  }
-
-  .preview-card h3 {
-    margin: 0 0 16px;
-    font-size: 16px;
-    color: var(--el-text-color-primary);
-  }
-
-  .content-preview {
-    min-height: 200px;
-    max-height: 300px;
-    padding: 16px;
-    overflow-y: auto;
-    background-color: var(--el-bg-color);
-    border: 1px solid var(--el-border-color);
-    border-radius: 6px;
-  }
-
-  .content-preview :deep(h1),
-  .content-preview :deep(h2),
-  .content-preview :deep(h3) {
-    margin: 16px 0 8px;
-  }
-
-  .content-preview :deep(p) {
-    margin: 8px 0;
-    line-height: 1.6;
-  }
-
-  .content-preview :deep(table) {
-    margin: 16px 0;
-  }
-
-  .content-preview :deep(table th),
-  .content-preview :deep(table td) {
-    padding: 8px 12px;
-  }
-
-  .content-preview :deep(pre) {
-    padding: 12px;
-    margin: 16px 0;
-    overflow-x: auto;
-    background-color: var(--el-fill-color-light);
-    border-radius: 4px;
-  }
-
-  .content-preview :deep(blockquote) {
-    padding-left: 16px;
-    margin: 16px 0;
-    color: var(--el-text-color-regular);
-    border-left: 4px solid var(--el-color-primary);
-  }
-
-  .usage-card :deep(.el-collapse-item__content) {
-    padding-bottom: 16px;
-  }
-
-  .usage-card pre {
-    padding: 16px;
-    margin: 0;
-    overflow-x: auto;
-    background-color: var(--el-fill-color-light);
-    border-radius: 6px;
-  }
-
-  .usage-card pre code {
-    font-family: Consolas, Monaco, 'Courier New', monospace;
-    font-size: 14px;
-    line-height: 1.5;
-  }
-
-  .toolbar-explanation h4 {
-    margin: 0 0 16px;
-    color: var(--el-text-color-primary);
-  }
-
-  .toolbar-explanation h5 {
-    margin: 0 0 8px;
-    font-size: 14px;
-    color: var(--el-text-color-regular);
-  }
-
-  .toolbar-explanation ul {
-    padding-left: 20px;
-    margin: 8px 0 16px;
-  }
-
-  .toolbar-explanation ul li {
-    margin: 4px 0;
-    font-size: 13px;
-    color: var(--el-text-color-regular);
-  }
-
-  .toolbar-explanation .note {
-    margin: 8px 0 0;
-    font-size: 12px;
-    font-style: italic;
-    color: var(--el-text-color-placeholder);
-  }
-
-  @media (width <= 768px) {
-    .page-content {
-      padding: 12px;
-    }
-
-    .card-header {
-      flex-direction: column;
-      gap: 12px;
-      align-items: stretch !important;
-    }
-
-    .header-buttons {
-      justify-content: center;
-    }
-
-    .preview-card :deep(.el-col) {
-      margin-bottom: 16px;
-    }
+  .preview-card :deep(.el-col) {
+    margin-bottom: 16px;
   }
+}
 </style>
diff --git a/frontend/new-web/src/views/widgets/watermark/index.vue b/frontend/new-web/src/views/widgets/watermark/index.vue
index 0e7a01e8..937653f7 100644
--- a/frontend/new-web/src/views/widgets/watermark/index.vue
+++ b/frontend/new-web/src/views/widgets/watermark/index.vue
@@ -35,7 +35,7 @@
         :font="{
           fontSize: 20,
           fontFamily: 'Arial',
-          color: 'rgba(255, 0, 0, 0.3)'
+          color: 'rgba(255, 0, 0, 0.3)',
         }"
         :rotate="-22"
         :gap="[100, 100]"
@@ -48,28 +48,28 @@
       :type="settingStore.watermarkVisible ? 'danger' : 'primary'"
       @click="handleWatermarkVisible"
     >
-      {{ settingStore.watermarkVisible ? '隐藏全局水印' : '显示全局水印' }}
+      {{ settingStore.watermarkVisible ? "隐藏全局水印" : "显示全局水印" }}
     </ElButton>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { useSettingStore } from '@/store/modules/setting'
+import { useSettingsStore } from "@/store/modules/setting.store";
 
-  defineOptions({ name: 'Watermark' })
+defineOptions({ name: "Watermark" });
 
-  const settingStore = useSettingStore()
+const settingStore = useSettingsStore();
 
-  /**
-   * 水印图片 URL
-   */
-  const watermarkImage = ref('https://element-plus.org/images/element-plus-logo.svg')
+/**
+ * 水印图片 URL
+ */
+const watermarkImage = ref("https://element-plus.org/images/element-plus-logo.svg");
 
-  /**
-   * 切换全局水印显示状态
-   */
-  const handleWatermarkVisible = () => {
-    useSettingStore().setWatermarkVisible(!settingStore.watermarkVisible)
-    ElMessage.success(settingStore.watermarkVisible ? '已显示全局水印' : '已隐藏全局水印')
-  }
+/**
+ * 切换全局水印显示状态
+ */
+const handleWatermarkVisible = () => {
+  useSettingsStore().setWatermarkVisible(!settingStore.watermarkVisible);
+  ElMessage.success(settingStore.watermarkVisible ? "已显示全局水印" : "已隐藏全局水印");
+};
 </script>
diff --git a/frontend/new-web/tsconfig.json b/frontend/new-web/tsconfig.json
index 4331962f..823e6ef1 100755
--- a/frontend/new-web/tsconfig.json
+++ b/frontend/new-web/tsconfig.json
@@ -2,15 +2,8 @@
   "compilerOptions": {
     "target": "esnext",
     "module": "esnext",
-    "moduleResolution": "node",
-    "strict": true,
-    "jsx": "preserve",
-    "sourceMap": true,
-    "resolveJsonModule": true,
-    "esModuleInterop": true,
+    "moduleResolution": "bundler",
     "lib": ["esnext", "dom"],
-    "types": ["vite/client", "node", "element-plus/global"],
-    "skipLibCheck": true,
     "baseUrl": ".",
     "paths": {
       "@/*": ["src/*"],
@@ -21,8 +14,19 @@
       "@stores/*": ["src/store/*"],
       "@plugins/*": ["src/plugins/*"],
       "@styles/*": ["src/assets/styles/*"]
-    }
+    },
+    "strict": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "preserve",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "sourceMap": true,
+    "useDefineForClassFields": true,
+    "allowJs": true,
+    "types": ["node", "vite/client", "element-plus/global"]
   },
-  "include": ["src/**/*", "src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "include": ["src/types/**/*.d.ts", "src/**/*.ts", "src/**/*.vue", "vite.config.ts"],
   "exclude": ["node_modules", "dist", "**/*.js"]
 }
diff --git a/frontend/new-web/vite.config.ts b/frontend/new-web/vite.config.ts
index c2ef0726..dddf7945 100755
--- a/frontend/new-web/vite.config.ts
+++ b/frontend/new-web/vite.config.ts
@@ -1,156 +1,289 @@
-import { defineConfig, loadEnv } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import path from 'path'
-import { fileURLToPath } from 'url'
-import vueDevTools from 'vite-plugin-vue-devtools'
-import viteCompression from 'vite-plugin-compression'
-import Components from 'unplugin-vue-components/vite'
-import AutoImport from 'unplugin-auto-import/vite'
-import ElementPlus from 'unplugin-element-plus/vite'
-import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
-import tailwindcss from '@tailwindcss/vite'
-// import { visualizer } from 'rollup-plugin-visualizer'
+import { defineConfig, loadEnv } from "vite";
+import vue from "@vitejs/plugin-vue";
+import path from "path";
+import { fileURLToPath } from "url";
+import vueDevTools from "vite-plugin-vue-devtools";
+import viteCompression from "vite-plugin-compression";
+import Components from "unplugin-vue-components/vite";
+import AutoImport from "unplugin-auto-import/vite";
+import ElementPlus from "unplugin-element-plus/vite";
+import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
+import tailwindcss from "@tailwindcss/vite";
+import { name, version, engines, dependencies, devDependencies } from "./package.json";
+
+const __APP_INFO__ = {
+  pkg: { name, version, engines, dependencies, devDependencies },
+  buildTimestamp: Date.now(),
+};
 
 export default ({ mode }: { mode: string }) => {
-  const root = process.cwd()
-  const env = loadEnv(mode, root)
-  const { VITE_VERSION, VITE_PORT, VITE_BASE_URL, VITE_API_URL, VITE_API_PROXY_URL } = env
+  const root = process.cwd();
+  const env = loadEnv(mode, root);
+  const isProduction = mode === "production";
 
-  console.log(`🚀 API_URL = ${VITE_API_URL}`)
-  console.log(`🚀 VERSION = ${VITE_VERSION}`)
+  console.log(`🚀 VITE_API_BASE_URL = ${env.VITE_API_BASE_URL}`);
+  console.log(`🚀 VERSION = ${env.VITE_VERSION}`);
 
   return defineConfig({
     define: {
-      __APP_VERSION__: JSON.stringify(VITE_VERSION)
+      __APP_VERSION__: JSON.stringify(env.VITE_VERSION),
+      __APP_INFO__: JSON.stringify(__APP_INFO__),
     },
-    base: VITE_BASE_URL,
+    base: env.VITE_BASE_URL,
     server: {
-      port: Number(VITE_PORT),
+      host: true,
+      port: Number(env.VITE_PORT),
+      open: true,
       proxy: {
-        '/api': {
-          target: VITE_API_PROXY_URL,
-          changeOrigin: true
-        }
+        [env.VITE_APP_BASE_API]: {
+          target: env.VITE_API_BASE_URL, // 代理目标地址：https://后端地址
+          secure: false, // 请求是否https
+          changeOrigin: true, // 是否跨域
+          // rewrite: (path: string) => path.replace(new RegExp("^" + env.VITE_APP_BASE_API), ""),
+        },
       },
-      host: true
     },
-    // 路径别名
     resolve: {
       alias: {
-        '@': fileURLToPath(new URL('./src', import.meta.url)),
-        '@views': resolvePath('src/views'),
-        '@imgs': resolvePath('src/assets/images'),
-        '@icons': resolvePath('src/assets/icons'),
-        '@utils': resolvePath('src/utils'),
-        '@stores': resolvePath('src/store'),
-        '@styles': resolvePath('src/assets/styles')
-      }
+        "@": fileURLToPath(new URL("./src", import.meta.url)),
+        "@views": resolvePath("src/views"),
+        "@imgs": resolvePath("src/assets/images"),
+        "@icons": resolvePath("src/assets/icons"),
+        "@utils": resolvePath("src/utils"),
+        "@stores": resolvePath("src/store"),
+        "@styles": resolvePath("src/assets/styles"),
+      },
     },
     build: {
-      target: 'es2015',
-      outDir: 'dist',
-      chunkSizeWarningLimit: 2000,
-      minify: 'terser',
-      terserOptions: {
-        compress: {
-          // 生产环境去除 console
-          drop_console: true,
-          // 生产环境去除 debugger
-          drop_debugger: true
-        }
-      },
+      target: "es2015",
+      outDir: "dist",
+      chunkSizeWarningLimit: 4000,
+      minify: isProduction ? "terser" : false,
+      terserOptions: isProduction
+        ? {
+            compress: {
+              keep_infinity: true,
+              drop_console: true,
+              drop_debugger: true,
+              pure_funcs: ["console.log", "console.info"],
+            },
+            format: {
+              comments: true,
+            },
+          }
+        : {},
       dynamicImportVarsOptions: {
         warnOnError: true,
         exclude: [],
-        include: ['src/views/**/*.vue']
-      }
+        include: ["src/views/**/*.vue"],
+      },
+      rollupOptions: {
+        output: {
+          manualChunks(id) {
+            if (id.includes("node_modules")) {
+              if (id.includes("echarts")) {
+                return "echarts";
+              }
+              if (id.includes("element-plus")) {
+                return "element-plus";
+              }
+              if (id.includes("@wangeditor-next")) {
+                return "wangeditor";
+              }
+              if (id.includes("codemirror")) {
+                return "codemirror";
+              }
+              if (id.includes("exceljs")) {
+                return "exceljs";
+              }
+              const module = id.toString().split("node_modules/")[1].split("/")[0];
+              if (["birpc", "hookable"].includes(module)) return;
+              return module;
+            }
+          },
+          entryFileNames: "js/[name].[hash].js",
+          chunkFileNames: "js/[name].[hash].js",
+          assetFileNames: (assetInfo: any) => {
+            const info = assetInfo.name.split(".");
+            let extType = info[info.length - 1];
+            if (/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/i.test(assetInfo.name)) {
+              extType = "media";
+            } else if (/\.(png|jpe?g|gif|svg)(\?.*)?$/.test(assetInfo.name)) {
+              extType = "img";
+            } else if (/\.(woff2?|eot|ttf|otf)(\?.*)?$/i.test(assetInfo.name)) {
+              extType = "fonts";
+            }
+            return `${extType}/[name].[hash].[ext]`;
+          },
+        },
+      },
     },
     plugins: [
       vue(),
       tailwindcss(),
-      // 自动按需导入 API
       AutoImport({
-        imports: ['vue', 'vue-router', 'pinia', '@vueuse/core'],
-        dts: 'src/types/import/auto-imports.d.ts',
-        resolvers: [ElementPlusResolver()],
+        imports: ["vue", "vue-router", "pinia", "@vueuse/core", "vue-i18n"],
+        dts: "src/types/import/auto-imports.d.ts",
+        resolvers: [ElementPlusResolver({ importStyle: "sass" })],
         eslintrc: {
           enabled: true,
-          filepath: './.auto-import.json',
-          globalsPropValue: true
-        }
+          filepath: "./.auto-import.json",
+          globalsPropValue: true,
+        },
+        vueTemplate: true,
       }),
-      // 自动按需导入组件
       Components({
-        dts: 'src/types/import/components.d.ts',
-        resolvers: [ElementPlusResolver()]
+        dts: "src/types/import/components.d.ts",
+        resolvers: [ElementPlusResolver({ importStyle: "sass" })],
+        dirs: ["src/components", "src/**/components"],
       }),
-      // 按需定制主题配置
       ElementPlus({
-        useSource: true
+        useSource: true,
       }),
-      // 压缩
       viteCompression({
-        verbose: false, // 是否在控制台输出压缩结果
-        disable: false, // 是否禁用
-        algorithm: 'gzip', // 压缩算法
-        ext: '.gz', // 压缩后的文件名后缀
-        threshold: 10240, // 只有大小大于该值的资源会被处理 10240B = 10KB
-        deleteOriginFile: false // 压缩后是否删除原文件
+        verbose: false,
+        disable: false,
+        algorithm: "gzip",
+        ext: ".gz",
+        threshold: 10240,
+        deleteOriginFile: false,
       }),
-      vueDevTools()
-      // 打包分析
-      // visualizer({
-      //   open: true,
-      //   gzipSize: true,
-      //   brotliSize: true,
-      //   filename: 'dist/stats.html' // 分析图生成的文件名及路径
-      // }),
+      vueDevTools(),
     ],
-    // 依赖预构建：避免运行时重复请求与转换，提升首次加载速度
     optimizeDeps: {
       include: [
-        'echarts/core',
-        'echarts/charts',
-        'echarts/components',
-        'echarts/renderers',
-        'xlsx',
-        'xgplayer',
-        'crypto-js',
-        'file-saver',
-        'vue-img-cutter',
-        'element-plus/es',
-        'element-plus/es/components/*/style/css',
-        'element-plus/es/components/*/style/index'
-      ]
+        "vue",
+        "vue-router",
+        "element-plus",
+        "pinia",
+        "axios",
+        "@vueuse/core",
+        "@wangeditor-next/editor-for-vue",
+        "codemirror-editor-vue3",
+        "exceljs",
+        "path-to-regexp",
+        "echarts/core",
+        "echarts/renderers",
+        "echarts/charts",
+        "echarts/components",
+        "vue-i18n",
+        "nprogress",
+        "qs",
+        "path-browserify",
+        "@element-plus/icons-vue",
+        "element-plus/es",
+        "element-plus/es/locale/lang/en",
+        "element-plus/es/locale/lang/zh-cn",
+        "element-plus/es/components/alert/style/index",
+        "element-plus/es/components/avatar/style/index",
+        "element-plus/es/components/backtop/style/index",
+        "element-plus/es/components/badge/style/index",
+        "element-plus/es/components/base/style/index",
+        "element-plus/es/components/breadcrumb-item/style/index",
+        "element-plus/es/components/breadcrumb/style/index",
+        "element-plus/es/components/button/style/index",
+        "element-plus/es/components/card/style/index",
+        "element-plus/es/components/cascader/style/index",
+        "element-plus/es/components/checkbox-group/style/index",
+        "element-plus/es/components/checkbox/style/index",
+        "element-plus/es/components/col/style/index",
+        "element-plus/es/components/color-picker/style/index",
+        "element-plus/es/components/config-provider/style/index",
+        "element-plus/es/components/date-picker/style/index",
+        "element-plus/es/components/descriptions-item/style/index",
+        "element-plus/es/components/descriptions/style/index",
+        "element-plus/es/components/dialog/style/index",
+        "element-plus/es/components/divider/style/index",
+        "element-plus/es/components/drawer/style/index",
+        "element-plus/es/components/dropdown-item/style/index",
+        "element-plus/es/components/dropdown-menu/style/index",
+        "element-plus/es/components/dropdown/style/index",
+        "element-plus/es/components/empty/style/index",
+        "element-plus/es/components/form-item/style/index",
+        "element-plus/es/components/form/style/index",
+        "element-plus/es/components/icon/style/index",
+        "element-plus/es/components/image-viewer/style/index",
+        "element-plus/es/components/image/style/index",
+        "element-plus/es/components/input-number/style/index",
+        "element-plus/es/components/input-tag/style/index",
+        "element-plus/es/components/input/style/index",
+        "element-plus/es/components/link/style/index",
+        "element-plus/es/components/loading/style/index",
+        "element-plus/es/components/menu-item/style/index",
+        "element-plus/es/components/menu/style/index",
+        "element-plus/es/components/message-box/style/index",
+        "element-plus/es/components/message/style/index",
+        "element-plus/es/components/notification/style/index",
+        "element-plus/es/components/option/style/index",
+        "element-plus/es/components/pagination/style/index",
+        "element-plus/es/components/popover/style/index",
+        "element-plus/es/components/progress/style/index",
+        "element-plus/es/components/radio-button/style/index",
+        "element-plus/es/components/radio-group/style/index",
+        "element-plus/es/components/radio/style/index",
+        "element-plus/es/components/row/style/index",
+        "element-plus/es/components/scrollbar/style/index",
+        "element-plus/es/components/select/style/index",
+        "element-plus/es/components/skeleton-item/style/index",
+        "element-plus/es/components/skeleton/style/index",
+        "element-plus/es/components/step/style/index",
+        "element-plus/es/components/steps/style/index",
+        "element-plus/es/components/sub-menu/style/index",
+        "element-plus/es/components/switch/style/index",
+        "element-plus/es/components/tab-pane/style/index",
+        "element-plus/es/components/table-column/style/index",
+        "element-plus/es/components/table/style/index",
+        "element-plus/es/components/tabs/style/index",
+        "element-plus/es/components/tag/style/index",
+        "element-plus/es/components/text/style/index",
+        "element-plus/es/components/time-picker/style/index",
+        "element-plus/es/components/time-select/style/index",
+        "element-plus/es/components/timeline-item/style/index",
+        "element-plus/es/components/timeline/style/index",
+        "element-plus/es/components/tooltip/style/index",
+        "element-plus/es/components/tree-select/style/index",
+        "element-plus/es/components/tree/style/index",
+        "element-plus/es/components/upload/style/index",
+        "element-plus/es/components/watermark/style/index",
+        "element-plus/es/components/tour/style/index",
+        "element-plus/es/components/tour-step/style/index",
+        "element-plus/es/components/popconfirm/style/index",
+        "element-plus/es/components/container/style/index",
+        "element-plus/es/components/main/style/index",
+        "element-plus/es/components/aside/style/index",
+        "element-plus/es/components/footer/style/index",
+        "element-plus/es/components/header/style/index",
+        "element-plus/es/components/slider/style/index",
+        "element-plus/es/components/button-group/style/index",
+        "element-plus/es/components/result/style/index",
+        "element-plus/es/components/checkbox-button/style/index",
+        "element-plus/es/components/space/style/index",
+      ],
     },
     css: {
       preprocessorOptions: {
-        // sass variable and mixin
         scss: {
-          additionalData: `
-            @use "@styles/core/el-light.scss" as *; 
-            @use "@styles/core/mixin.scss" as *;
-          `
-        }
+          additionalData: `@use "@/styles/variables.scss" as *;`,
+        },
       },
       postcss: {
         plugins: [
           {
-            postcssPlugin: 'internal:charset-removal',
+            postcssPlugin: "internal:charset-removal",
             AtRule: {
-              charset: (atRule) => {
-                if (atRule.name === 'charset') {
-                  atRule.remove()
+              charset: (atRule: any) => {
+                if (atRule.name === "charset") {
+                  atRule.remove();
                 }
-              }
-            }
-          }
-        ]
-      }
-    }
-  })
-}
+              },
+            },
+          },
+        ],
+      },
+    },
+  });
+};
 
 function resolvePath(paths: string) {
-  return path.resolve(__dirname, paths)
+  return path.resolve(__dirname, paths);
 }