diff --git a/frontend/web/.prettierignore b/frontend/web/.prettierignore
index 44421a7a..28b3ac68 100644
--- a/frontend/web/.prettierignore
+++ b/frontend/web/.prettierignore
@@ -1,12 +1,11 @@
-dist
-node_modules
-public
-.husky
-.vscode
-.idea
-*.sh
-*.md
-
-src/assets
-stats.html
+node_modules/
+dist/
+public/
+.vscode/
+src/types/import/
+.auto-import.json
 pnpm-lock.yaml
+package-lock.json
+.stylelintcache
+.eslintcache
+stats.html
\ No newline at end of file
diff --git a/frontend/web/.prettierrc.yaml b/frontend/web/.prettierrc.yaml
index d9cf0c72..67121182 100644
--- a/frontend/web/.prettierrc.yaml
+++ b/frontend/web/.prettierrc.yaml
@@ -1,40 +1,40 @@
-# 在单参数箭头函数中始终添加括号
+# 单参数箭头函数始终添加括号
 arrowParens: "always"
 # JSX 多行元素的闭合标签另起一行
 bracketSameLine: false
-# 对象字面量中的括号之间添加空格
+# 对象字面量括号之间添加空格 { foo: bar }
 bracketSpacing: true
-# 自动格式化嵌入的代码（如 Markdown 和 HTML 内的代码）
+# 自动格式化嵌入的代码（Markdown/HTML 内的代码块）
 embeddedLanguageFormatting: "auto"
-# 忽略 HTML 空白敏感度，将空白视为非重要内容
-htmlWhitespaceSensitivity: "ignore"
+# HTML 空白敏感度，CSS 模式保留 display 相关空白
+htmlWhitespaceSensitivity: "css"
 # 不插入 @prettier 的 pragma 注释
 insertPragma: false
-# 在 JSX 中使用双引号
+# JSX 中使用双引号
 jsxSingleQuote: false
-# 每行代码的最大长度限制为 100 字符
+# 每行最大长度
 printWidth: 100
-# 在 Markdown 中保留原有的换行格式
+# Markdown 换行保留原格式
 proseWrap: "preserve"
-# 仅在必要时添加对象属性的引号
+# 对象属性仅在必要时添加引号
 quoteProps: "as-needed"
-# 不要求文件开头插入 @prettier 的 pragma 注释
+# 不要求文件开头有 @prettier 的 pragma 注释
 requirePragma: false
-# 在语句末尾添加分号
+# 语句末尾添加分号
 semi: true
-# 使用双引号而不是单引号
+# 使用双引号
 singleQuote: false
-# 缩进使用 2 个空格
+# 缩进 2 个空格
 tabWidth: 2
-# 在多行元素的末尾添加逗号（ES5 支持的对象、数组等）
+# 多行尾随逗号（ES5 支持的对象、数组等）
 trailingComma: "es5"
-# 使用空格而不是制表符缩进
+# 使用空格而非制表符缩进
 useTabs: false
-# Vue 文件中的 <script> 和 <style> 不增加额外的缩进
+# Vue 文件 <script> 和 <style> 不额外缩进
 vueIndentScriptAndStyle: false
-# 根据系统自动检测换行符
+# 换行符自动检测（LF / CRLF）
 endOfLine: "auto"
-# 对 HTML 文件应用特定格式化规则
+# HTML 文件使用专用解析器
 overrides:
   - files: "*.html"
     options:
diff --git a/frontend/web/.stylelintrc.cjs b/frontend/web/.stylelintrc.cjs
index c387dad7..4f95a45a 100644
--- a/frontend/web/.stylelintrc.cjs
+++ b/frontend/web/.stylelintrc.cjs
@@ -1,17 +1,9 @@
 module.exports = {
-  // 继承推荐规范配置
   extends: [
     "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}"],
@@ -21,57 +13,55 @@ module.exports = {
       files: ["**/*.{css,scss}"],
       customSyntax: "postcss-scss",
     },
-    // Markdown 预览样式由多段合并，存在有意重复的限定选择器
-    {
-      files: ["**/src/styles/core/md.scss"],
-      rules: {
-        "no-duplicate-selectors": null,
-      },
-    },
   ],
-  // 自定义规则
   rules: {
-    "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,
-      {
-        // Tailwind CSS v4：@custom-variant、@theme、@utility、@layer 等
-        ignoreAtRules: ["reference", "custom-variant", "theme", "utility", "layer"],
-      },
-    ],
-    "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, // 允许属性前缀
-    // SCSS @if/@else 链与 Prettier 易冲突，关闭「at-rule 前空行」检查
+    "import-notation": "string",
+    "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,
     "at-rule-empty-line-before": null,
-    // 允许 global 、export 、deep伪类
+    // 允许 Vue SFC :deep() / ::deep / :global() / :slotted() 伪选择器
     "selector-pseudo-class-no-unknown": [
       true,
       {
-        ignorePseudoClasses: ["global", "export", "deep"],
+        ignorePseudoClasses: ["global", "export", "deep", "slotted"],
       },
     ],
-    // 允许 Vue 3 的 ::deep 伪元素选择器
     "selector-pseudo-element-no-unknown": [
       true,
       {
         ignorePseudoElements: ["deep"],
       },
     ],
-    // 允许未知属性
-    "property-no-unknown": [
+    // 允许 SCSS + Tailwind CSS v4 专属 at-rules
+    "at-rule-no-unknown": null,
+    "scss/at-rule-no-unknown": [
       true,
       {
-        ignoreProperties: [],
+        ignoreAtRules: [
+          "apply",
+          "use",
+          "mixin",
+          "include",
+          "extend",
+          "each",
+          "if",
+          "else",
+          "for",
+          "while",
+          "reference",
+          "tailwind",
+          "theme",
+          "utility",
+          "custom-variant",
+          "layer",
+          "config",
+          "plugin",
+        ],
       },
     ],
-    // 允许未知规则
-    "at-rule-no-unknown": null, // 禁用默认的未知 at-rule 检查,
   },
 };
diff --git a/frontend/web/.trae/rules/git-commit-message.md b/frontend/web/.trae/rules/git-commit-message.md
new file mode 100644
index 00000000..ac9b0231
--- /dev/null
+++ b/frontend/web/.trae/rules/git-commit-message.md
@@ -0,0 +1,6 @@
+---
+alwaysApply: true
+scene: git_message
+---
+
+Write your rules here to customize the style of AI-generated commit messages.
diff --git a/frontend/web/README.md b/frontend/web/README.md
index f0fd204b..29b5ed37 100755
--- a/frontend/web/README.md
+++ b/frontend/web/README.md
@@ -26,10 +26,10 @@ main.ts 启动
 
 ### 1. 环境准备
 
-| 工具 | 版本要求 |
-|------|-----------|
-| Node.js | ≥ 20.19（见 `package.json` → `engines`） |
-| pnpm | ≥ 8.8，推荐 **pnpm 9**（与 `packageManager` 字段一致） |
+| 工具    | 版本要求                                               |
+| ------- | ------------------------------------------------------ |
+| Node.js | ≥ 20.19（见 `package.json` → `engines`）               |
+| pnpm    | ≥ 8.8，推荐 **pnpm 9**（与 `packageManager` 字段一致） |
 
 未安装 pnpm 时可执行：`corepack enable && corepack prepare pnpm@9.15.3 --activate`（版本可按项目 `packageManager` 调整）。
 
@@ -76,45 +76,45 @@ cp .env.example .env
 
 ## 常见问题（排查）
 
-| 现象 | 建议 |
-|------|------|
-| `ECONNREFUSED` / 网络错误 | 后端未启动或 **`VITE_API_BASE_URL`** 端口错误 |
-| 接口 401 / 频繁跳转登录 | Token 失效或未登录；清除站点本地存储后重新登录 |
-| 修改 `.env` 不生效 | 必须 **重启** `pnpm dev` |
-| 依赖异常、热更新怪异 | 尝试 **`pnpm clean:cache`** 后再 **`pnpm dev`**；仍不行可 **`pnpm dev:force`** |
-| 类型报错 | 运行 **`pnpm type-check`**；自动生成类型见 `src/types/import/`（勿手改自动生成的 d.ts） |
+| 现象                      | 建议                                                                                    |
+| ------------------------- | --------------------------------------------------------------------------------------- |
+| `ECONNREFUSED` / 网络错误 | 后端未启动或 **`VITE_API_BASE_URL`** 端口错误                                           |
+| 接口 401 / 频繁跳转登录   | Token 失效或未登录；清除站点本地存储后重新登录                                          |
+| 修改 `.env` 不生效        | 必须 **重启** `pnpm dev`                                                                |
+| 依赖异常、热更新怪异      | 尝试 **`pnpm clean:cache`** 后再 **`pnpm dev`**；仍不行可 **`pnpm dev:force`**          |
+| 类型报错                  | 运行 **`pnpm type-check`**；自动生成类型见 `src/types/import/`（勿手改自动生成的 d.ts） |
 
 ---
 
 ## 技术栈
 
-| 类别 | 选型 |
-|------|------|
-| 框架 | Vue 3（Composition API / `<script setup>`） |
-| 构建 | Vite 7 |
-| 语言 | TypeScript |
-| UI | Element Plus |
-| 路由 | Vue Router 4（Hash；静态路由 + 守卫内动态 `addRoute`） |
-| 状态 | Pinia + pinia-plugin-persistedstate |
-| 样式 | Tailwind CSS、SCSS |
-| HTTP | Axios |
-| 国际化 | vue-i18n |
+| 类别   | 选型                                                   |
+| ------ | ------------------------------------------------------ |
+| 框架   | Vue 3（Composition API / `<script setup>`）            |
+| 构建   | Vite 7                                                 |
+| 语言   | TypeScript                                             |
+| UI     | Element Plus                                           |
+| 路由   | Vue Router 4（Hash；静态路由 + 守卫内动态 `addRoute`） |
+| 状态   | Pinia + pinia-plugin-persistedstate                    |
+| 样式   | Tailwind CSS、SCSS                                     |
+| HTTP   | Axios                                                  |
+| 国际化 | vue-i18n                                               |
 
 ---
 
 ## 常用脚本
 
-| 命令 | 说明 |
-|------|------|
-| `pnpm dev` | 本地开发（读取 `.env` + `.env.development`） |
-| `pnpm dev:force` | 强制预打包依赖后启动（缓存异常时） |
-| `pnpm build` | `vue-tsc` 类型检查 + 生产构建，产物在 **`dist/`** |
-| `pnpm build:dev` / `build:test` / `build:pro` | 按 mode 构建（需对应 env 文件） |
-| `pnpm preview` | 本地预览构建结果 |
-| `pnpm type-check` | 仅 TypeScript 检查 |
-| `pnpm lint` | ESLint + Prettier + Stylelint |
-| `pnpm clean:dev` | 执行 `scripts/clean-dev.ts`（清理演示等，使用前阅读脚本说明） |
-| `pnpm clean:cache` | 清理 Vite 等缓存 |
+| 命令                                          | 说明                                                          |
+| --------------------------------------------- | ------------------------------------------------------------- |
+| `pnpm dev`                                    | 本地开发（读取 `.env` + `.env.development`）                  |
+| `pnpm dev:force`                              | 强制预打包依赖后启动（缓存异常时）                            |
+| `pnpm build`                                  | `vue-tsc` 类型检查 + 生产构建，产物在 **`dist/`**             |
+| `pnpm build:dev` / `build:test` / `build:pro` | 按 mode 构建（需对应 env 文件）                               |
+| `pnpm preview`                                | 本地预览构建结果                                              |
+| `pnpm type-check`                             | 仅 TypeScript 检查                                            |
+| `pnpm lint`                                   | ESLint + Prettier + Stylelint                                 |
+| `pnpm clean:dev`                              | 执行 `scripts/clean-dev.ts`（清理演示等，使用前阅读脚本说明） |
+| `pnpm clean:cache`                            | 清理 Vite 等缓存                                              |
 
 ---
 
@@ -146,14 +146,14 @@ src/
 
 ## 路径别名（编写代码时）
 
-| 别名 | 指向 |
-|------|------|
-| `@` | `src/` |
-| `@views` | `src/views` |
-| `@stores` | `src/store` |
-| `@utils` | `src/utils` |
-| `@styles` | `src/styles` |
-| `@imgs` / `@icons` | 图片与 SVG |
+| 别名               | 指向         |
+| ------------------ | ------------ |
+| `@`                | `src/`       |
+| `@views`           | `src/views`  |
+| `@stores`          | `src/store`  |
+| `@utils`           | `src/utils`  |
+| `@styles`          | `src/styles` |
+| `@imgs` / `@icons` | 图片与 SVG   |
 
 与 **`vite.config.ts`**、`tsconfig.json` 中 `paths` 保持一致。
 
@@ -163,16 +163,16 @@ src/
 
 只有以 **`VITE_`** 开头的变量会注入前端代码。下列与 **`pnpm dev`** 关系最密切：
 
-| 变量 | 作用 |
-|------|------|
-| `VITE_PORT` | 开发服务器端口 |
-| `VITE_BASE_URL` | 部署基础路径（子目录部署时形如 `/admin/`） |
-| `VITE_APP_BASE_API` | 接口路径前缀，与 Vite 代理匹配 |
-| `VITE_API_URL` | 浏览器侧发出的 API 根前缀（开发时常为 `/`） |
-| `VITE_API_BASE_URL` | **代理目标**：后端 HTTP 根地址 |
-| `VITE_ACCESS_MODE` | `frontend` / `backend` / `mixed`，菜单与路由来源 |
-| `VITE_APP_WS_ENDPOINT` | WebSocket（如 AI 对话） |
-| `VITE_APP_TITLE` | 页面标题（可被后端参数配置覆盖） |
+| 变量                   | 作用                                             |
+| ---------------------- | ------------------------------------------------ |
+| `VITE_PORT`            | 开发服务器端口                                   |
+| `VITE_BASE_URL`        | 部署基础路径（子目录部署时形如 `/admin/`）       |
+| `VITE_APP_BASE_API`    | 接口路径前缀，与 Vite 代理匹配                   |
+| `VITE_API_URL`         | 浏览器侧发出的 API 根前缀（开发时常为 `/`）      |
+| `VITE_API_BASE_URL`    | **代理目标**：后端 HTTP 根地址                   |
+| `VITE_ACCESS_MODE`     | `frontend` / `backend` / `mixed`，菜单与路由来源 |
+| `VITE_APP_WS_ENDPOINT` | WebSocket（如 AI 对话）                          |
+| `VITE_APP_TITLE`       | 页面标题（可被后端参数配置覆盖）                 |
 
 完整列表以仓库内 **`.env`**、**`.env.development`** 为准；模板说明见 **`.env.example`**。
 
@@ -180,12 +180,12 @@ src/
 
 ## 路由与菜单（扩展页面时）
 
-| 文件 | 职责 |
-|------|------|
-| `src/router/staticRoutes.ts` | 静态路由、`dashboardLayoutChildren`、壳层菜单合并 |
-| `src/router/dynamicRoutes.ts` | 菜单驱动的动态路由 |
-| `src/router/beforeEach.ts` | 权限与动态挂载 |
-| `src/router/MenuProcessor.ts` | 后端菜单 → 前端路由记录 |
+| 文件                          | 职责                                              |
+| ----------------------------- | ------------------------------------------------- |
+| `src/router/staticRoutes.ts`  | 静态路由、`dashboardLayoutChildren`、壳层菜单合并 |
+| `src/router/dynamicRoutes.ts` | 菜单驱动的动态路由                                |
+| `src/router/beforeEach.ts`    | 权限与动态挂载                                    |
+| `src/router/MenuProcessor.ts` | 后端菜单 → 前端路由记录                           |
 
 新增业务页：一般需要 **视图 +（可选）静态或动态路由 + 后端菜单/i18n**，三者路径与 **name** 保持一致。
 
diff --git a/frontend/web/build/banner.ts b/frontend/web/build/banner.ts
new file mode 100644
index 00000000..a7bf19a0
--- /dev/null
+++ b/frontend/web/build/banner.ts
@@ -0,0 +1,9 @@
+export const BANNER = [
+  "     ___               _                   _                __                _            ",
+  "   .' ..]             / |_                (_)              |  ]              (_)           ",
+  "  _| |_  ,--.   .--. `| |-',--.  _ .--.   __   ,--.    .--.| |  _ .--..--.   __   _ .--.   ",
+  " '-| |-'`'_\\ : ( (`\\] | | `'_\\ :[ '/ '`\\ [  | `'_\\ : / /'`\\' | [ `.-. .-. | [  | [ `.-. |  ",
+  "   | |  // | |, `'.'. | |,// | |,| \\__/ | | | // | |,| \\__/  |  | | | | | |  | |  | | | |  ",
+  "  [___] \\'-;__/[\\__) )\\__/\\'-;__/| ;.__/ [___]\\'-;__/ '.__.;__][___||__||__][___][___||__] ",
+  "                                [__]                                                       ",
+].join("\n");
diff --git a/frontend/web/build/vitePluginStart.ts b/frontend/web/build/vitePluginStart.ts
new file mode 100644
index 00000000..72d17909
--- /dev/null
+++ b/frontend/web/build/vitePluginStart.ts
@@ -0,0 +1,47 @@
+import type { PluginOption, ResolvedConfig } from "vite";
+import pc from "picocolors";
+import { BANNER } from "./banner";
+
+const { green, blue, bold, dim, cyan, yellow, magenta } = pc;
+
+const W = 96;
+const ANSI_RE = new RegExp(String.fromCharCode(27) + "\\[\\d+(;\\d+)*m", "g");
+const strip = (s: string) => s.replace(ANSI_RE, "");
+const BANNER_LINES = BANNER.split("\n");
+const row = (content: string) => {
+  const pad = Math.max(0, W - strip(content).length - 1);
+  return `  ${dim("│")} ${content}${" ".repeat(pad)}${dim("│")}`;
+};
+
+function printBanner(env: Record<string, string>, mode: string) {
+  const line = dim("─".repeat(W));
+  console.log(
+    [
+      "",
+      `  ${dim("┌")}${line}${dim("┐")}`,
+      row(""),
+      row(`${bold(cyan("fastapiadmin"))}  ${bold(magenta(`v${env.VITE_VERSION || "3.0.0"}`))}`),
+      row(""),
+      ...BANNER_LINES.map((l) => row(green(l))),
+      row(""),
+      row(`${dim("mode")}     ${yellow(env.VITE_APP_ENV || mode)}`),
+      row(`${dim("api")}      ${blue(env.VITE_API_BASE_URL || "")}`),
+      row(`${dim("port")}     ${cyan(env.VITE_PORT || "")}`),
+      row(""),
+      `  ${dim("└")}${line}${dim("┘")}`,
+      "",
+    ].join("\n")
+  );
+}
+
+export default function vitePluginStart(): PluginOption {
+  return {
+    name: "vite:start-banner",
+    enforce: "pre",
+
+    configResolved(resolvedConfig: ResolvedConfig) {
+      const env = resolvedConfig.env as Record<string, string>;
+      printBanner(env, resolvedConfig.mode);
+    },
+  };
+}
diff --git a/frontend/web/eslint.config.mjs b/frontend/web/eslint.config.mjs
index 2d71572d..0eb533b2 100644
--- a/frontend/web/eslint.config.mjs
+++ b/frontend/web/eslint.config.mjs
@@ -1,261 +1,87 @@
 // ESLint 配置文件
-import fs from "fs"
-import path, { dirname } from "path"
-import { fileURLToPath } from "url"
+import fs from "fs";
+import path, { dirname } from "path";
+import { fileURLToPath } from "url";
 
-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"
+// 从 ESLint 插件中导入推荐配置
+import pluginJs from "@eslint/js";
+import pluginVue from "eslint-plugin-vue";
+import globals from "globals";
+import tseslint from "typescript-eslint";
 
-const __filename = fileURLToPath(import.meta.url)
-const __dirname = dirname(__filename)
+// 使用 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")
-)
-// Fa- 组件全局配置（unplugin-vue-components 自动注册）
-const faComponents = {
-  FaTable: "readonly",
-  FaTableHeader: "readonly",
-  FaTableHeaderLeft: "readonly",
-  FaSearchBar: "readonly",
-  FaSearchBarWithAudit: "readonly",
-  FaDialog: "readonly",
-  FaDrawer: "readonly",
-  FaForm: "readonly",
-  FaDescriptions: "readonly",
-  FaImportDialog: "readonly",
-  FaExportDialog: "readonly",
-  FaIconSelect: "readonly",
-  FaWangEditor: "readonly",
-  FaSvgIcon: "readonly",
-  FaButtonMore: "readonly",
-  FaButtonTable: "readonly",
-  ArtButtonTable: "readonly",
-  FaExcelImport: "readonly",
-  FaExcelExport: "readonly",
-  FaBreadcrumb: "readonly",
-  FaCardBanner: "readonly",
-  FaJsonPretty: "readonly",
-  JsonPretty: "readonly",
-  FaCopyButton: "readonly",
-  CopyButton: "readonly",
-  FaMenuRouteIcon: "readonly",
-  MenuRouteIcon: "readonly",
-  FaIntervalTab: "readonly",
-  FaPagination: "readonly",
-  FaSizeSelect: "readonly",
-  FaMarkdownRenderer: "readonly",
-  FaScreenLock: "readonly",
-  FaSettingsPanel: "readonly",
-  FaGlobalSearch: "readonly",
-  FaHeaderBar: "readonly",
-  FaFastEnter: "readonly",
-  FaFireworksEffect: "readonly",
-  FaGlobalComponent: "readonly",
-  FaWatermark: "readonly",
-  FaCountTo: "readonly",
-  FaECharts: "readonly",
-  FaIcon: "readonly",
-  FaChatWindow: "readonly",
-  FaBackToTop: "readonly",
-  FaCalender: "readonly",
-  FaDragVerify: "readonly",
-  FaException: "readonly",
-  FaVideoPlayer: "readonly",
-  FaCutterImg: "readonly",
-}
-
-// 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",
-}
+);
 
 export default [
-  // 忽略文件配置
+  // 忽略文件（flat config 中 ignores 需在最前面）
   {
     ignores: [
-      "node_modules",
-      "dist",
-      "public",
+      "**/node_modules/**",
+      "**/dist/**",
+      "public/**",
       ".vscode/**",
       "src/assets/**",
       "src/utils/console.ts",
-      "**/*.min.*",
-      "**/auto-imports.d.ts",
-      "**/components.d.ts",
-      "**/types/**/*.d.ts",
+      ".auto-import.json",
     ],
   },
-
-  // 基础配置
-  {
-    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,
-        ...faComponents,
+        // TypeScript 全局命名空间（global.d.ts 中声明的类型）
         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",
-        AppSettings: "readonly",
-        __APP_INFO__: "readonly",
         UploadFilePath: "readonly",
+        // unplugin-vue-components 自动注册的组件引用
+        FaSearchBar: "readonly",
+        FaSearchBarWithAudit: "readonly",
+        FaForm: "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": "warn",
-      "@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 规则
+      "@typescript-eslint/no-explicit-any": "off",
       "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"],
+      // Prettier 负责格式化，ESLint 只关注代码质量
     },
   },
-
-  // Pin TypeScript project root so @typescript-eslint/parser resolves tsconfig consistently.
-  {
-    files: ["**/*.{ts,tsx,mts,cts}"],
-    languageOptions: {
-      parserOptions: {
-        tsconfigRootDir: __dirname,
-      },
-    },
-  },
-
-  // Vue 文件特定配置
+  // Vue 文件：使用 TypeScript parser
   {
     files: ["**/*.vue"],
     languageOptions: {
-      parserOptions: {
-        parser: tseslint.parser,
-        tsconfigRootDir: __dirname,
-      },
+      parserOptions: { parser: tseslint.parser },
+    },
+  },
+  // .d.ts 声明文件：放宽规则
+  {
+    files: ["**/*.d.ts"],
+    rules: {
+      "@typescript-eslint/no-empty-object-type": "off",
     },
   },
-
-  // prettier 配置
-  eslintPluginPrettierRecommended,
 ];
diff --git a/frontend/web/package.json b/frontend/web/package.json
index 8ce1fd95..79686022 100755
--- a/frontend/web/package.json
+++ b/frontend/web/package.json
@@ -26,13 +26,10 @@
     "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 --cache \"**/*.{css,scss,vue}\" --fix",
-    "fix": "eslint --fix",
+    "lint:stylelint": "stylelint \"**/*.{css,scss,vue}\" --cache --fix",
+    "lint:lint-staged": "lint-staged -c ./.husky/lintstagedrc.cjs",
     "commit": "git-cz",
     "clean:dev": "tsx scripts/clean-dev.ts"
   },
@@ -79,7 +76,7 @@
     "@vue-flow/controls": "^1.1.3",
     "@vue-flow/core": "^1.48.1",
     "@vue-flow/minimap": "^1.5.4",
-    "@vueuse/core": "^14.3.0",
+    "@vueuse/core": "^13.9.0",
     "@wangeditor-next/editor": "^5.7.0",
     "@wangeditor-next/editor-for-vue": "^5.1.14",
     "animate.css": "^4.1.1",
@@ -92,7 +89,7 @@
     "dayjs": "^1.11.20",
     "dompurify": "^3.4.3",
     "echarts": "^6.0.0",
-    "element-plus": "^2.14.0",
+    "element-plus": "~2.13.7",
     "exceljs": "^4.4.0",
     "file-saver": "^2.0.5",
     "highlight.js": "^11.11.1",
@@ -104,6 +101,7 @@
     "ohash": "^2.0.11",
     "path-browserify": "^1.0.1",
     "path-to-regexp": "^8.4.2",
+    "picocolors": "^1.1.1",
     "pinia": "^3.0.4",
     "pinia-plugin-persistedstate": "^4.7.1",
     "qrcode.vue": "^3.9.0",
diff --git a/frontend/web/src/api/module_ai/chat.ts b/frontend/web/src/api/module_ai/chat.ts
index 0040045d..44acb482 100644
--- a/frontend/web/src/api/module_ai/chat.ts
+++ b/frontend/web/src/api/module_ai/chat.ts
@@ -1,4 +1,4 @@
-import request from "@utils/http";
+import { request } from "@utils";
 
 const API_PATH = "/ai/chat";
 
diff --git a/frontend/web/src/api/module_application/portal.ts b/frontend/web/src/api/module_application/portal.ts
index 7ce047b3..3c63c486 100644
--- a/frontend/web/src/api/module_application/portal.ts
+++ b/frontend/web/src/api/module_application/portal.ts
@@ -1,4 +1,4 @@
-import request from "@utils/http";
+import { request } from "@utils";
 
 const API_PATH = "/application/portal";
 
diff --git a/frontend/web/src/api/module_example/demo.ts b/frontend/web/src/api/module_example/demo.ts
index 24dff1dc..21cc65ba 100644
--- a/frontend/web/src/api/module_example/demo.ts
+++ b/frontend/web/src/api/module_example/demo.ts
@@ -1,4 +1,4 @@
-import request from "@utils/http";
+import { request } from "@utils";
 
 const API_PATH = "/example/demo";
 
diff --git a/frontend/web/src/api/module_example/demo01.ts b/frontend/web/src/api/module_example/demo01.ts
index b6c7a41e..1ea238ea 100644
--- a/frontend/web/src/api/module_example/demo01.ts
+++ b/frontend/web/src/api/module_example/demo01.ts
@@ -1,4 +1,4 @@
-import request from "@utils/http";
+import { request } from "@utils";
 
 const API_PATH = "/example/demo01";
 
diff --git a/frontend/web/src/api/module_generator/gencode.ts b/frontend/web/src/api/module_generator/gencode.ts
index 60130e8a..67ceb6b2 100644
--- a/frontend/web/src/api/module_generator/gencode.ts
+++ b/frontend/web/src/api/module_generator/gencode.ts
@@ -1,4 +1,4 @@
-import request from "@utils/http";
+import { request } from "@utils";
 
 const API_PATH = "/generator/gencode";
 
diff --git a/frontend/web/src/api/module_monitor/cache.ts b/frontend/web/src/api/module_monitor/cache.ts
index df739d8e..aabf4c3e 100644
--- a/frontend/web/src/api/module_monitor/cache.ts
+++ b/frontend/web/src/api/module_monitor/cache.ts
@@ -1,4 +1,4 @@
-import request from "@utils/http";
+import { request } from "@utils";
 
 const API_PATH = "/monitor/cache";
 
diff --git a/frontend/web/src/api/module_monitor/online.ts b/frontend/web/src/api/module_monitor/online.ts
index 9681d0e0..bedfdb08 100644
--- a/frontend/web/src/api/module_monitor/online.ts
+++ b/frontend/web/src/api/module_monitor/online.ts
@@ -1,4 +1,4 @@
-import request from "@utils/http";
+import { request } from "@utils";
 
 const API_PATH = "/monitor/online";
 
diff --git a/frontend/web/src/api/module_monitor/resource.ts b/frontend/web/src/api/module_monitor/resource.ts
index 9b722e59..5742e1b3 100644
--- a/frontend/web/src/api/module_monitor/resource.ts
+++ b/frontend/web/src/api/module_monitor/resource.ts
@@ -1,4 +1,4 @@
-import request from "@utils/http";
+import { request } from "@utils";
 
 const API_PATH = "/monitor/resource";
 
diff --git a/frontend/web/src/api/module_monitor/server.ts b/frontend/web/src/api/module_monitor/server.ts
index 0de52fc8..56021bf4 100644
--- a/frontend/web/src/api/module_monitor/server.ts
+++ b/frontend/web/src/api/module_monitor/server.ts
@@ -1,4 +1,4 @@
-import request from "@utils/http";
+import { request } from "@utils";
 
 const API_PATH = "/monitor/server";
 
diff --git a/frontend/web/src/api/module_system/auth.ts b/frontend/web/src/api/module_system/auth.ts
index 0ac29c10..002bd23f 100644
--- a/frontend/web/src/api/module_system/auth.ts
+++ b/frontend/web/src/api/module_system/auth.ts
@@ -1,4 +1,4 @@
-import request from "@utils/http";
+import { request } from "@utils";
 
 const API_PATH = "/system/auth";
 
diff --git a/frontend/web/src/api/module_system/dept.ts b/frontend/web/src/api/module_system/dept.ts
index 799bb63d..e6ad7243 100644
--- a/frontend/web/src/api/module_system/dept.ts
+++ b/frontend/web/src/api/module_system/dept.ts
@@ -1,4 +1,4 @@
-import request from "@utils/http";
+import { request } from "@utils";
 
 const API_PATH = "/system/dept";
 
diff --git a/frontend/web/src/api/module_system/dict.ts b/frontend/web/src/api/module_system/dict.ts
index 1fcf228c..34fb8218 100644
--- a/frontend/web/src/api/module_system/dict.ts
+++ b/frontend/web/src/api/module_system/dict.ts
@@ -1,4 +1,4 @@
-import request from "@utils/http";
+import { request } from "@utils";
 
 const API_PATH = "/system/dict";
 
diff --git a/frontend/web/src/api/module_system/log.ts b/frontend/web/src/api/module_system/log.ts
index 7b3a44b1..86667c0e 100644
--- a/frontend/web/src/api/module_system/log.ts
+++ b/frontend/web/src/api/module_system/log.ts
@@ -1,4 +1,4 @@
-import request from "@utils/http";
+import { request } from "@utils";
 
 const API_PATH = "/system/log";
 
diff --git a/frontend/web/src/api/module_system/menu.ts b/frontend/web/src/api/module_system/menu.ts
index a60dd4f3..dd00eb64 100644
--- a/frontend/web/src/api/module_system/menu.ts
+++ b/frontend/web/src/api/module_system/menu.ts
@@ -1,4 +1,4 @@
-import request from "@utils/http";
+import { request } from "@utils";
 
 const API_PATH = "/system/menu";
 
diff --git a/frontend/web/src/api/module_system/notice.ts b/frontend/web/src/api/module_system/notice.ts
index 2595d009..6dc4e02a 100644
--- a/frontend/web/src/api/module_system/notice.ts
+++ b/frontend/web/src/api/module_system/notice.ts
@@ -1,4 +1,4 @@
-import request from "@utils/http";
+import { request } from "@utils";
 
 const API_PATH = "/system/notice";
 
diff --git a/frontend/web/src/api/module_system/params.ts b/frontend/web/src/api/module_system/params.ts
index 48577c1a..8eb39dd1 100644
--- a/frontend/web/src/api/module_system/params.ts
+++ b/frontend/web/src/api/module_system/params.ts
@@ -1,5 +1,4 @@
-import request from "@utils/http";
-import { NO_AUTH_FLAG } from "@utils/http";
+import { request, NO_AUTH_FLAG } from "@utils";
 
 const API_PATH = "/system/param";
 
diff --git a/frontend/web/src/api/module_system/position.ts b/frontend/web/src/api/module_system/position.ts
index 46da1aab..b6ca276c 100644
--- a/frontend/web/src/api/module_system/position.ts
+++ b/frontend/web/src/api/module_system/position.ts
@@ -1,4 +1,4 @@
-import request from "@utils/http";
+import { request } from "@utils";
 
 const API_PATH = "/system/position";
 
diff --git a/frontend/web/src/api/module_system/role.ts b/frontend/web/src/api/module_system/role.ts
index 22af54ab..ac8ed75f 100644
--- a/frontend/web/src/api/module_system/role.ts
+++ b/frontend/web/src/api/module_system/role.ts
@@ -1,4 +1,4 @@
-import request from "@utils/http";
+import { request } from "@utils";
 
 const API_PATH = "/system/role";
 
diff --git a/frontend/web/src/api/module_system/tenant.ts b/frontend/web/src/api/module_system/tenant.ts
index ac6debb4..e2b2cf84 100644
--- a/frontend/web/src/api/module_system/tenant.ts
+++ b/frontend/web/src/api/module_system/tenant.ts
@@ -1,4 +1,4 @@
-import request from "@utils/http";
+import { request } from "@utils";
 
 const API_PATH = "/system/tenant";
 
diff --git a/frontend/web/src/api/module_system/user.ts b/frontend/web/src/api/module_system/user.ts
index ffe5f4d6..42c82fd5 100644
--- a/frontend/web/src/api/module_system/user.ts
+++ b/frontend/web/src/api/module_system/user.ts
@@ -1,4 +1,4 @@
-import request from "@utils/http";
+import { request } from "@utils";
 import { MenuTable, MenuForm } from "@/api/module_system/menu";
 
 const API_PATH = "/system/user";
diff --git a/frontend/web/src/api/module_task/cronjob/job.ts b/frontend/web/src/api/module_task/cronjob/job.ts
index ccb12a91..24d88ff6 100644
--- a/frontend/web/src/api/module_task/cronjob/job.ts
+++ b/frontend/web/src/api/module_task/cronjob/job.ts
@@ -1,4 +1,4 @@
-import request from "@utils/http";
+import { request } from "@utils";
 
 const API_PATH = "/task/cronjob/job";
 
diff --git a/frontend/web/src/api/module_task/cronjob/node.ts b/frontend/web/src/api/module_task/cronjob/node.ts
index be97a467..b41d0fe9 100644
--- a/frontend/web/src/api/module_task/cronjob/node.ts
+++ b/frontend/web/src/api/module_task/cronjob/node.ts
@@ -1,4 +1,4 @@
-import request from "@utils/http";
+import { request } from "@utils";
 
 const API_PATH = "/task/cronjob/node";
 
diff --git a/frontend/web/src/api/module_task/workflow/definition.ts b/frontend/web/src/api/module_task/workflow/definition.ts
index e9f53d92..001b2745 100644
--- a/frontend/web/src/api/module_task/workflow/definition.ts
+++ b/frontend/web/src/api/module_task/workflow/definition.ts
@@ -1,4 +1,4 @@
-import request from "@utils/http";
+import { request } from "@utils";
 
 /** 对应后端 `plugin.module_task.workflow.definition` */
 const API_PATH = "/task/workflow/definition";
diff --git a/frontend/web/src/api/module_task/workflow/node-type.ts b/frontend/web/src/api/module_task/workflow/node-type.ts
index c37f2d1f..279b90bc 100644
--- a/frontend/web/src/api/module_task/workflow/node-type.ts
+++ b/frontend/web/src/api/module_task/workflow/node-type.ts
@@ -1,4 +1,4 @@
-import request from "@utils/http";
+import { request } from "@utils";
 
 /** 对应后端 `plugin.module_task.workflow.node_type` */
 const API_PATH = "/task/workflow/node-type";
diff --git a/frontend/web/src/components/banners/fa-basic-banner/index.vue b/frontend/web/src/components/banners/fa-basic-banner/index.vue
index d1b6d486..219f54ea 100644
--- a/frontend/web/src/components/banners/fa-basic-banner/index.vue
+++ b/frontend/web/src/components/banners/fa-basic-banner/index.vue
@@ -68,7 +68,7 @@
 
 <script setup lang="ts">
 import { onMounted, ref, computed } from "vue";
-import { useSettingsStore } from "@stores/modules/setting.store";
+import { useSettingsStore } from "@stores";
 const settingStore = useSettingsStore();
 const { isDark } = storeToRefs(settingStore);
 
@@ -147,7 +147,7 @@ const props = withDefaults(defineProps<Props>(), {
   height: "11rem",
   titleColor: "white",
   subtitleColor: "white",
-  boxStyle: "!bg-theme/60",
+  boxStyle: "bg-theme/60!",
   decoration: true,
   buttonConfig: () => ({
     show: true,
diff --git a/frontend/web/src/components/business/fa-comment-widget/index.vue b/frontend/web/src/components/business/fa-comment-widget/index.vue
index ad7c3ced..1660d9eb 100644
--- a/frontend/web/src/components/business/fa-comment-widget/index.vue
+++ b/frontend/web/src/components/business/fa-comment-widget/index.vue
@@ -27,7 +27,7 @@
 
     <ul>
       <div class="pb-5 text-lg font-medium">评论 {{ comments.length }}</div>
-      <CommentItem
+      <FaCommentItem
         v-for="comment in comments.slice().reverse()"
         :key="comment.id"
         :comment="comment"
@@ -42,8 +42,9 @@
 
 <script setup lang="ts">
 import { ref } from "vue";
-import CommentItem from "./widget/CommentItem.vue";
 import { commentList, Comment } from "@/mock/temp/commentDetail";
+import { ElMessage } from "element-plus";
+
 const comments = commentList;
 
 const newComment = ref<Partial<Comment>>({
diff --git a/frontend/web/src/components/business/fa-comment-widget/widget/CommentItem.vue b/frontend/web/src/components/business/fa-comment-widget/widget/FaCommentItem.vue
similarity index 100%
rename from frontend/web/src/components/business/fa-comment-widget/widget/CommentItem.vue
rename to frontend/web/src/components/business/fa-comment-widget/widget/FaCommentItem.vue
diff --git a/frontend/web/src/components/cards/fa-bar-chart-card/index.vue b/frontend/web/src/components/cards/fa-bar-chart-card/index.vue
index 511e8484..bef06633 100644
--- a/frontend/web/src/components/cards/fa-bar-chart-card/index.vue
+++ b/frontend/web/src/components/cards/fa-bar-chart-card/index.vue
@@ -21,7 +21,7 @@
     <div
       ref="chartRef"
       class="absolute bottom-0 left-0 right-0 mx-auto"
-      :class="isMiniChart ? '!absolute !top-5 !right-5 !bottom-auto !left-auto !h-15 !w-4/10' : ''"
+      :class="isMiniChart ? 'absolute! top-5! right-5! bottom-auto! left-auto! h-15! w-4/10!' : ''"
       :style="{ height: isMiniChart ? '60px' : `calc(${height}rem - 5rem)` }"
     ></div>
   </div>
diff --git a/frontend/web/src/components/cards/fa-donut-chart-card/index.vue b/frontend/web/src/components/cards/fa-donut-chart-card/index.vue
index cd80ed44..ecac696d 100644
--- a/frontend/web/src/components/cards/fa-donut-chart-card/index.vue
+++ b/frontend/web/src/components/cards/fa-donut-chart-card/index.vue
@@ -21,7 +21,7 @@
           </div>
           <div class="mt-2 flex gap-4 text-xs text-g-600">
             <div v-if="currentValue" class="flex-cc">
-              <div class="size-2 bg-theme/100 rounded mr-2"></div>
+              <div class="size-2 bg-theme rounded mr-2"></div>
               {{ currentValue }}
             </div>
             <div v-if="previousValue" class="flex-cc">
diff --git a/frontend/web/src/components/cards/fa-line-chart-card/index.vue b/frontend/web/src/components/cards/fa-line-chart-card/index.vue
index 00319f0d..d8c8ba62 100644
--- a/frontend/web/src/components/cards/fa-line-chart-card/index.vue
+++ b/frontend/web/src/components/cards/fa-line-chart-card/index.vue
@@ -24,7 +24,7 @@
     <div
       ref="chartRef"
       class="absolute bottom-0 left-0 right-0 box-border w-full"
-      :class="isMiniChart ? '!absolute !top-5 !right-5 !bottom-auto !left-auto !h-15 !w-4/10' : ''"
+      :class="isMiniChart ? 'absolute! top-5! right-5! bottom-auto! left-auto! h-15! w-4/10!' : ''"
       :style="{ height: isMiniChart ? '60px' : `calc(${height}rem - 5rem)` }"
     ></div>
   </div>
@@ -32,7 +32,7 @@
 
 <script setup lang="ts">
 import { graphic, type EChartsOption } from "@/plugins/echarts";
-import { getCssVar, hexToRgba } from "@utils/ui";
+import { getCssVar, hexToRgba } from "@utils";
 import { useChartOps, useChartComponent } from "@/hooks/core/useChart";
 
 defineOptions({ name: "FaLineChartCard" });
diff --git a/frontend/web/src/components/cards/fa-timeline-list-card/index.vue b/frontend/web/src/components/cards/fa-timeline-list-card/index.vue
index 4db6e22d..a3961091 100644
--- a/frontend/web/src/components/cards/fa-timeline-list-card/index.vue
+++ b/frontend/web/src/components/cards/fa-timeline-list-card/index.vue
@@ -6,7 +6,7 @@
       <p class="text-sm text-g-600">{{ subtitle }}</p>
     </div>
     <ElScrollbar :style="{ height: maxHeight }">
-      <ElTimeline class="!pl-0.5">
+      <ElTimeline class="pl-0.5!">
         <ElTimelineItem
           v-for="item in list"
           :key="item.time"
diff --git a/frontend/web/src/components/charts/fa-bar-chart/index.vue b/frontend/web/src/components/charts/fa-bar-chart/index.vue
index bc79152e..600990a4 100644
--- a/frontend/web/src/components/charts/fa-bar-chart/index.vue
+++ b/frontend/web/src/components/charts/fa-bar-chart/index.vue
@@ -5,7 +5,7 @@
 
 <script setup lang="ts">
 import { useChartOps, useChartComponent } from "@/hooks/core/useChart";
-import { getCssVar } from "@utils/ui";
+import { getCssVar } from "@utils";
 import { graphic, type EChartsOption } from "@/plugins/echarts";
 import type { BarChartProps, BarDataItem } from "@/types/component/chart";
 
diff --git a/frontend/web/src/components/charts/fa-h-bar-chart/index.vue b/frontend/web/src/components/charts/fa-h-bar-chart/index.vue
index 7fafeb0b..0c7f2d84 100644
--- a/frontend/web/src/components/charts/fa-h-bar-chart/index.vue
+++ b/frontend/web/src/components/charts/fa-h-bar-chart/index.vue
@@ -10,7 +10,7 @@
 
 <script setup lang="ts">
 import { useChartOps, useChartComponent } from "@/hooks/core/useChart";
-import { getCssVar } from "@utils/ui";
+import { getCssVar } from "@utils";
 import { graphic, type EChartsOption } from "@/plugins/echarts";
 import type { BarChartProps, BarDataItem } from "@/types/component/chart";
 
diff --git a/frontend/web/src/components/charts/fa-line-chart/index.vue b/frontend/web/src/components/charts/fa-line-chart/index.vue
index fb53d858..bfb4be28 100644
--- a/frontend/web/src/components/charts/fa-line-chart/index.vue
+++ b/frontend/web/src/components/charts/fa-line-chart/index.vue
@@ -10,7 +10,7 @@
 
 <script setup lang="ts">
 import { graphic, type EChartsOption } from "@/plugins/echarts";
-import { getCssVar, hexToRgba } from "@utils/ui";
+import { getCssVar, hexToRgba } from "@utils";
 import { useChartOps, useChartComponent } from "@/hooks/core/useChart";
 import type { LineChartProps, LineDataItem } from "@/types/component/chart";
 
diff --git a/frontend/web/src/components/charts/fa-map-chart/index.vue b/frontend/web/src/components/charts/fa-map-chart/index.vue
index 09f5e3f4..44cf09f3 100644
--- a/frontend/web/src/components/charts/fa-map-chart/index.vue
+++ b/frontend/web/src/components/charts/fa-map-chart/index.vue
@@ -11,7 +11,7 @@
 
 <script setup lang="ts">
 import { echarts } from "@/plugins/echarts";
-import { useSettingsStore } from "@stores/modules/setting.store";
+import { useSettingsStore } from "@stores";
 import chinaMapJson from "@/mock/json/chinaMap.json";
 import type { MapChartProps } from "@/types/component/chart";
 
diff --git a/frontend/web/src/components/charts/fa-scatter-chart/index.vue b/frontend/web/src/components/charts/fa-scatter-chart/index.vue
index de96e590..111f8c8b 100644
--- a/frontend/web/src/components/charts/fa-scatter-chart/index.vue
+++ b/frontend/web/src/components/charts/fa-scatter-chart/index.vue
@@ -10,7 +10,7 @@
 
 <script setup lang="ts">
 import type { EChartsOption } from "@/plugins/echarts";
-import { getCssVar } from "@utils/ui";
+import { getCssVar } from "@utils";
 import { useChartOps, useChartComponent } from "@/hooks/core/useChart";
 import type { ScatterChartProps } from "@/types/component/chart";
 
diff --git a/frontend/web/src/components/forms/fa-button-more/index.vue b/frontend/web/src/components/forms/fa-button-more/index.vue
index 67c49286..bf6d6f80 100644
--- a/frontend/web/src/components/forms/fa-button-more/index.vue
+++ b/frontend/web/src/components/forms/fa-button-more/index.vue
@@ -2,7 +2,7 @@
 <template>
   <div>
     <ElDropdown v-if="hasAnyAuthItem">
-      <FaIconButton icon="ri:more-2-fill" class="!size-8 bg-g-200 dark:bg-g-300/45 text-sm" />
+      <FaIconButton icon="ri:more-2-fill" class="size-8! bg-g-200 dark:bg-g-300/45 text-sm" />
       <template #dropdown>
         <ElDropdownMenu>
           <template v-for="item in list" :key="item.key">
diff --git a/frontend/web/src/components/forms/fa-form/index.vue b/frontend/web/src/components/forms/fa-form/index.vue
index 11b62771..f8134242 100644
--- a/frontend/web/src/components/forms/fa-form/index.vue
+++ b/frontend/web/src/components/forms/fa-form/index.vue
@@ -200,7 +200,7 @@
 import { useWindowSize } from "@vueuse/core";
 import { useI18n } from "vue-i18n";
 import { toRaw, type Component } from "vue";
-import DatePicker from "@/components/DatePicker/index.vue";
+import FaDatePicker from "@/components/forms/fa-search-bar/FaDatePicker.vue";
 import {
   ElCascader,
   ElCheckbox,
@@ -218,7 +218,7 @@ import {
   ElTreeSelect,
   type FormInstance,
 } from "element-plus";
-import { calculateResponsiveSpan, type ResponsiveBreakpoint } from "@utils/form";
+import { calculateResponsiveSpan, type ResponsiveBreakpoint } from "@utils";
 
 defineOptions({ name: "FaForm" });
 
@@ -231,10 +231,10 @@ const componentMap = {
   checkbox: ElCheckbox, // 复选框
   checkboxgroup: ElCheckboxGroup, // 复选框组
   radiogroup: ElRadioGroup, // 单选框组
-  date: DatePicker, // 日期选择器
-  daterange: DatePicker, // 日期范围选择器
-  datetime: DatePicker, // 日期时间选择器
-  datetimerange: DatePicker, // 日期时间范围选择器
+  date: FaDatePicker, // 日期选择器
+  daterange: FaDatePicker, // 日期范围选择器
+  datetime: FaDatePicker, // 日期时间选择器
+  datetimerange: FaDatePicker, // 日期时间范围选择器
   rate: ElRate, // 评分
   slider: ElSlider, // 滑块
   cascader: ElCascader, // 级联选择器
diff --git a/frontend/web/src/components/DatePicker/index.vue b/frontend/web/src/components/forms/fa-search-bar/FaDatePicker.vue
similarity index 100%
rename from frontend/web/src/components/DatePicker/index.vue
rename to frontend/web/src/components/forms/fa-search-bar/FaDatePicker.vue
diff --git a/frontend/web/src/components/forms/fa-search-bar/FaSearchBarWithAudit.vue b/frontend/web/src/components/forms/fa-search-bar/FaSearchBarWithAudit.vue
index 33542d81..6fe3b793 100644
--- a/frontend/web/src/components/forms/fa-search-bar/FaSearchBarWithAudit.vue
+++ b/frontend/web/src/components/forms/fa-search-bar/FaSearchBarWithAudit.vue
@@ -13,9 +13,9 @@
     </template>
     <template v-if="!$slots.created_id" #created_id>
       <div class="w-full min-w-0">
-        <UserTableSelect
+        <FaUserTableSelect
           :model-value="modelValue?.created_id == null ? undefined : modelValue.created_id"
-          @update:model-value="(v) => patchField('created_id', v)"
+          @update:model-value="(v: number | undefined) => patchField('created_id', v)"
           @confirm-click="emitImmediateSearch"
           @clear-click="emitImmediateSearch"
         />
@@ -23,9 +23,9 @@
     </template>
     <template v-if="!$slots.updated_id" #updated_id>
       <div class="w-full min-w-0">
-        <UserTableSelect
+        <FaUserTableSelect
           :model-value="modelValue?.updated_id == null ? undefined : modelValue.updated_id"
-          @update:model-value="(v) => patchField('updated_id', v)"
+          @update:model-value="(v: number | undefined) => patchField('updated_id', v)"
           @confirm-click="emitImmediateSearch"
           @clear-click="emitImmediateSearch"
         />
@@ -35,6 +35,8 @@
 </template>
 
 <script setup lang="ts">
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
 import { computed, ref, useAttrs } from "vue";
 import FaSearchBar from "./index.vue";
 import type { SearchFormItem } from "./index.vue";
@@ -42,7 +44,6 @@ import {
   getAuditSearchFormItems,
   type GetAuditSearchFormItemsOptions,
 } from "./auditSearchFormItems";
-import UserTableSelect from "@views/module_system/user/components/UserTableSelect.vue";
 
 defineOptions({ name: "FaSearchBarWithAudit", inheritAttrs: false });
 
@@ -65,13 +66,10 @@ const emit = defineEmits<{
 
 const modelValue = defineModel<Record<string, any>>({ default: () => ({}) });
 const attrs = useAttrs();
-
+// @ts-expect-error 循环类型引用问题
 const innerRef = ref<InstanceType<typeof FaSearchBar> | null>(null);
-
 const forwardedAttrs = computed(() => attrs as Record<string, unknown>);
-
 const auditItems = computed(() => getAuditSearchFormItems(props.auditItemOptions));
-
 const mergedItems = computed(() => {
   if (!props.includeAudit) return props.items;
   return [...props.items, ...auditItems.value];
@@ -85,10 +83,11 @@ function emitImmediateSearch() {
   emit("search", { ...modelValue.value });
 }
 
+// @ts-expect-error 循环类型引用问题
 defineExpose({
   validate: (...args: any[]) => innerRef.value?.validate?.(...args),
   reset: () => innerRef.value?.reset?.(),
   getOutput: () => innerRef.value?.getOutput?.(),
-  ref: computed(() => innerRef.value?.ref),
+  ref: computed(() => innerRef.value?.ref) as unknown as any,
 });
 </script>
diff --git a/frontend/web/src/views/module_system/user/components/UserTableSelect.vue b/frontend/web/src/components/forms/fa-search-bar/FaUserTableSelect.vue
similarity index 100%
rename from frontend/web/src/views/module_system/user/components/UserTableSelect.vue
rename to frontend/web/src/components/forms/fa-search-bar/FaUserTableSelect.vue
diff --git a/frontend/web/src/components/forms/fa-search-bar/index.vue b/frontend/web/src/components/forms/fa-search-bar/index.vue
index 68fa00c5..e5550e47 100644
--- a/frontend/web/src/components/forms/fa-search-bar/index.vue
+++ b/frontend/web/src/components/forms/fa-search-bar/index.vue
@@ -113,7 +113,7 @@ import { ArrowUpBold, ArrowDownBold, Refresh, Search } from "@element-plus/icons
 import { useWindowSize } from "@vueuse/core";
 import { useI18n } from "vue-i18n";
 import { toRaw, type Component } from "vue";
-import DatePicker from "@/components/DatePicker/index.vue";
+import FaDatePicker from "@/components/forms/fa-search-bar/FaDatePicker.vue";
 import {
   ElCascader,
   ElCheckbox,
@@ -144,10 +144,10 @@ const componentMap = {
   checkbox: ElCheckbox, // 复选框
   checkboxgroup: ElCheckboxGroup, // 复选框组
   radiogroup: ElRadioGroup, // 单选框组
-  date: DatePicker, // 日期选择器
-  daterange: DatePicker, // 日期范围选择器
-  datetime: DatePicker, // 日期时间选择器
-  datetimerange: DatePicker, // 日期时间范围选择器
+  date: FaDatePicker, // 日期选择器
+  daterange: FaDatePicker, // 日期范围选择器
+  datetime: FaDatePicker, // 日期时间选择器
+  datetimerange: FaDatePicker, // 日期时间范围选择器
   rate: ElRate, // 评分
   slider: ElSlider, // 滑块
   cascader: ElCascader, // 级联选择器
diff --git a/frontend/web/src/components/forms/fa-wang-editor/index.vue b/frontend/web/src/components/forms/fa-wang-editor/index.vue
index 48b0450d..b441c91a 100644
--- a/frontend/web/src/components/forms/fa-wang-editor/index.vue
+++ b/frontend/web/src/components/forms/fa-wang-editor/index.vue
@@ -21,11 +21,11 @@
 import "@wangeditor-next/editor/dist/css/style.css";
 import { onBeforeUnmount, onMounted, shallowRef, computed } from "vue";
 import { Editor, Toolbar } from "@wangeditor-next/editor-for-vue";
-import { useUserStore } from "@stores/modules/user.store";
-import { EmojiText } from "@utils/ui";
+import { useUserStore } from "@stores";
+import { request, EmojiText } from "@utils";
 import { IDomEditor, IToolbarConfig, IEditorConfig } from "@wangeditor-next/editor";
-import request from "@utils/http";
 import type { AxiosResponse } from "axios";
+import { ElMessage } from "element-plus";
 
 defineOptions({ name: "FaWangEditor" });
 
@@ -258,5 +258,5 @@ onBeforeUnmount(() => {
 </script>
 
 <style lang="scss">
-@use "./style";
+@use "@styles/fa-wang-editor";
 </style>
diff --git a/frontend/web/src/components/layouts/fa-breadcrumb/index.vue b/frontend/web/src/components/layouts/fa-breadcrumb/index.vue
index ff4d37d7..af61c09a 100755
--- a/frontend/web/src/components/layouts/fa-breadcrumb/index.vue
+++ b/frontend/web/src/components/layouts/fa-breadcrumb/index.vue
@@ -1,6 +1,6 @@
 <!-- 面包屑导航 -->
 <template>
-  <nav class="ml-2.5 max-lg:!hidden" aria-label="breadcrumb">
+  <nav class="ml-2.5 max-lg:hidden!" aria-label="breadcrumb">
     <ul class="flex-c h-full">
       <li
         v-for="(item, index) in breadcrumbItems"
diff --git a/frontend/web/src/components/layouts/fa-chat-window/index.vue b/frontend/web/src/components/layouts/fa-chat-window/index.vue
index 523ec3e4..c73e8973 100644
--- a/frontend/web/src/components/layouts/fa-chat-window/index.vue
+++ b/frontend/web/src/components/layouts/fa-chat-window/index.vue
@@ -6,10 +6,7 @@
         <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>
+            <div class="h-2 w-2 rounded-full" :class="isOnline ? 'bg-success' : 'bg-danger'"></div>
             <span class="text-xs text-g-600">{{ isOnline ? "在线" : "离线" }}</span>
           </div>
         </div>
@@ -22,7 +19,7 @@
       <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"
+          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">
@@ -91,7 +88,7 @@
 
 <script setup lang="ts">
 import { Picture, Paperclip, Close } from "@element-plus/icons-vue";
-import { mittBus } from "@utils/sys";
+import { mittBus } from "@utils";
 import meAvatar from "@imgs/avatar/avatar5.webp";
 import aiAvatar from "@imgs/avatar/avatar10.webp";
 
diff --git a/frontend/web/src/components/layouts/fa-fast-enter/index.vue b/frontend/web/src/components/layouts/fa-fast-enter/index.vue
index dbd8f869..e841dc68 100644
--- a/frontend/web/src/components/layouts/fa-fast-enter/index.vue
+++ b/frontend/web/src/components/layouts/fa-fast-enter/index.vue
@@ -26,7 +26,7 @@
           <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"
+            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">
@@ -69,7 +69,7 @@
   >
     <div class="px-2">
       <div class="mb-5 flex items-start gap-4">
-        <div class="flex-cc size-14 rounded-xl bg-gradient-to-br from-purple-400 to-indigo-500">
+        <div class="flex-cc size-14 rounded-xl bg-linear-to-br from-purple-400 to-indigo-500">
           <FaSvgIcon icon="ri:loader-line" class="text-2xl text-white" />
         </div>
         <div class="flex-1">
@@ -84,29 +84,29 @@
 
       <div class="space-y-3">
         <div class="flex items-center gap-3">
-          <ElTag type="primary" class="!rounded-md !border-0 flex-shrink-0">快捷键</ElTag>
+          <ElTag type="primary" class="rounded-md! border-0! shrink-0">快捷键</ElTag>
           <span class="text-sm text-g-600">
-            <ElTag size="small" class="!mr-1">Ctrl</ElTag>
+            <ElTag size="small" class="mr-1!">Ctrl</ElTag>
             +
-            <ElTag size="small" class="!mx-1">Shift</ElTag>
+            <ElTag size="small" class="mx-1!">Shift</ElTag>
             +
-            <ElTag size="small" class="!ml-1">P</ElTag>
+            <ElTag size="small" class="ml-1!">P</ElTag>
             <span class="mx-2 text-g-400">/</span>
-            <ElTag size="small" class="!mr-1">⌘</ElTag>
+            <ElTag size="small" class="mr-1!">⌘</ElTag>
             +
-            <ElTag size="small" class="!mx-1">Shift</ElTag>
+            <ElTag size="small" class="mx-1!">Shift</ElTag>
             +
-            <ElTag size="small" class="!ml-1">P</ElTag>
+            <ElTag size="small" class="ml-1!">P</ElTag>
           </span>
         </div>
         <div class="flex items-center gap-3">
-          <ElTag type="success" class="!rounded-md !border-0 flex-shrink-0">节日素材</ElTag>
+          <ElTag type="success" class="rounded-md! border-0! shrink-0">节日素材</ElTag>
           <span class="text-sm text-g-600">
             礼花素材与当前节日配置一致，自动匹配春节、元宵、中秋等传统节日主题
           </span>
         </div>
         <div class="flex items-center gap-3">
-          <ElTag type="warning" class="!rounded-md !border-0 flex-shrink-0">触发方式</ElTag>
+          <ElTag type="warning" class="rounded-md! border-0! shrink-0">触发方式</ElTag>
           <span class="text-sm text-g-600">
             页面加载时自动检测节日并连发，也可通过快捷键手动触发一次
           </span>
diff --git a/frontend/web/src/components/layouts/fa-fireworks-effect/index.vue b/frontend/web/src/components/layouts/fa-fireworks-effect/index.vue
index 94bdacb5..3da58270 100644
--- a/frontend/web/src/components/layouts/fa-fireworks-effect/index.vue
+++ b/frontend/web/src/components/layouts/fa-fireworks-effect/index.vue
@@ -2,13 +2,13 @@
 <template>
   <canvas
     ref="canvasRef"
-    class="fixed top-0 left-0 z-[9999] w-full h-full pointer-events-none"
+    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 { mittBus } from "@utils";
 import type { Handler } from "mitt";
 import { festivalConfigList } from "@/config/modules/festival";
 import { buildBuiltinSolarFestivals } from "@/config/modules/festival.builtin";
diff --git a/frontend/web/src/components/layouts/fa-global-search/index.vue b/frontend/web/src/components/layouts/fa-global-search/index.vue
index 9a71e802..67089891 100644
--- a/frontend/web/src/components/layouts/fa-global-search/index.vue
+++ b/frontend/web/src/components/layouts/fa-global-search/index.vue
@@ -20,7 +20,7 @@
       >
         <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"
+            class="h-4.5 flex-cc rounded border border-g-300 dark:bg-g-200/50! bg-box! px-1.5 text-g-500"
           >
             <FaSvgIcon icon="fluent:arrow-enter-left-20-filled" />
           </div>
@@ -29,13 +29,13 @@
       <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"
+            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' : ''"
+              :class="isHighlighted(index) ? 'highlighted bg-theme/70! text-white!' : ''"
               @click="searchGoPage(item)"
               @mouseenter="highlightOnHover(index)"
             >
@@ -54,7 +54,7 @@
               :key="index"
               :class="
                 historyHIndex === index
-                  ? 'highlighted !bg-theme/70 !text-white [&_.selected-icon]:!text-white'
+                  ? 'highlighted bg-theme/70! text-white! [&_.selected-icon]:text-white!'
                   : ''
               "
               @click="searchGoPage(item)"
@@ -84,7 +84,7 @@
             <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>
+            <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>
@@ -94,13 +94,10 @@
 </template>
 
 <script lang="ts" setup>
-import { useUserStore } from "@stores/modules/user.store";
 import { AppRouteRecord } from "@/types/router";
 import { Search } from "@element-plus/icons-vue";
-import { mittBus } from "@utils/sys";
-import { useMenuStore } from "@stores/modules/menu.store";
-import { formatMenuTitle } from "@utils/navigation";
-import { handleMenuJump } from "@utils/navigation";
+import { mittBus, formatMenuTitle, handleMenuJump } from "@utils";
+import { useUserStore, useMenuStore } from "@stores";
 import { type ScrollbarInstance } from "element-plus";
 
 defineOptions({ name: "FaGlobalSearch" });
diff --git a/frontend/web/src/components/layouts/fa-header-bar/index.vue b/frontend/web/src/components/layouts/fa-header-bar/index.vue
old mode 100755
new mode 100644
index 510ca02a..9462db50
--- a/frontend/web/src/components/layouts/fa-header-bar/index.vue
+++ b/frontend/web/src/components/layouts/fa-header-bar/index.vue
@@ -1,10 +1,10 @@
 <!-- 顶部栏 -->
 <template>
   <div
-    class="w-full bg-[var(--default-bg-color)]"
+    class="w-full bg-(--default-bg-color)"
     :class="[
       tabStyle === 'tab-card' || tabStyle === 'tab-google' || tabStyle === 'tab-default'
-        ? 'max-sm:mb-3 !bg-box'
+        ? 'max-sm:mb-3 bg-box!'
         : '',
     ]"
   >
@@ -12,7 +12,7 @@
       class="relative box-border flex-b h-15 leading-15 select-none"
       :class="[
         tabStyle === 'tab-card' || tabStyle === 'tab-google' || tabStyle === 'tab-default'
-          ? 'border-b border-[var(--fa-card-border)]'
+          ? 'border-b border-(--fa-card-border)'
           : '',
       ]"
     >
@@ -25,7 +25,7 @@
 
         <FaLogo
           v-if="showAppLogo"
-          class="!hidden pl-3.5 overflow-hidden align-[-0.15em] fill-current"
+          class="hidden! pl-3.5 overflow-hidden align-[-0.15em] fill-current"
           :src="headerLogoSrc"
           @click="toHome"
         />
@@ -42,7 +42,7 @@
         <FaIconButton
           v-if="shouldShowRefreshButton"
           icon="ri:refresh-line"
-          class="!ml-3 refresh-btn max-sm:!hidden"
+          class="ml-3! refresh-btn max-sm:hidden!"
           :style="{ marginLeft: !isLeftMenu ? '10px' : '0' }"
           @click="reload"
         />
@@ -68,7 +68,7 @@
         <!-- 搜索 -->
         <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 tad-300 hover:-translate-y-0.5 hover:shadow-md"
+          class="flex-cb w-40 h-9 px-2.5 c-p border border-g-400 rounded-custom-sm max-md:hidden! tad-300 hover:-translate-y-0.5 hover:shadow-md"
           @click="openSearchDialog"
         >
           <div class="flex-c">
@@ -87,12 +87,12 @@
           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"
+          class="max-md:hidden!"
           @click="toggleFullScreen"
         />
 
         <!-- 组件尺寸 default/large/small（沿用旧版持久化开关 showSizeSelect） -->
-        <div v-if="shouldShowSizeSelect" class="flex-cc ml-1 max-md:!hidden">
+        <div v-if="shouldShowSizeSelect" class="flex-cc ml-1 max-md:hidden!">
           <FaSizeSelect />
         </div>
 
@@ -125,7 +125,7 @@
           class="notice-button relative"
           @click="visibleNotice"
         >
-          <div class="absolute top-2 right-2 size-1.5 !bg-danger rounded-full"></div>
+          <div class="absolute top-2 right-2 size-1.5 bg-danger! rounded-full"></div>
         </FaIconButton>
 
         <!-- 聊天按钮 -->
@@ -135,7 +135,7 @@
           class="chat-button relative"
           @click="openChat"
         >
-          <div class="breathing-dot absolute top-2 right-2 size-1.5 !bg-success rounded-full"></div>
+          <div class="breathing-dot absolute top-2 right-2 size-1.5 bg-success! rounded-full"></div>
         </FaIconButton>
 
         <!-- 设置按钮 -->
@@ -183,18 +183,13 @@ 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 "@stores/modules/setting.store";
-import { useUserStore } from "@stores/modules/user.store";
-import { useMenuStore } from "@stores/modules/menu.store";
+import { useSettingsStore, useMenuStore, useUserStore, useConfigStore } from "@stores";
 import AppConfig from "@/config";
-import { useConfigStore } from "@stores/modules/config.store";
 import { languageOptions } from "@/locales";
-import { mittBus } from "@utils/sys";
-import { themeAnimation } from "@utils/ui";
+import { mittBus, themeAnimation } from "@utils";
 import { useCommon } from "@/hooks/core/useCommon";
 import { useHeaderBar } from "@/hooks/core/useHeaderBar";
 import FaUserMenu from "./widget/FaUserMenu.vue";
-import FaSizeSelect from "@/components/others/fa-size-select/index.vue";
 
 defineOptions({ name: "FaHeaderBar" });
 
diff --git a/frontend/web/src/views/module_system/param/components/ConfigInfoDrawer.vue b/frontend/web/src/components/layouts/fa-header-bar/widget/FaConfigInfoDrawer.vue
similarity index 99%
rename from frontend/web/src/views/module_system/param/components/ConfigInfoDrawer.vue
rename to frontend/web/src/components/layouts/fa-header-bar/widget/FaConfigInfoDrawer.vue
index 03a87a55..5a8d3422 100644
--- a/frontend/web/src/views/module_system/param/components/ConfigInfoDrawer.vue
+++ b/frontend/web/src/components/layouts/fa-header-bar/widget/FaConfigInfoDrawer.vue
@@ -32,7 +32,7 @@
           <div v-for="(item, key) in logoConfigs" :key="key">
             <ElFormItem :label="item.config_name">
               <div class="flex items-center gap-2 w-full">
-                <SingleImageUpload
+                <FaUpload
                   v-model="item.config_value"
                   :data="{ type: key }"
                   :name="'file'"
@@ -288,14 +288,13 @@
 <script lang="ts" setup>
 import { ref, reactive, onMounted, computed } from "vue";
 import ParamsAPI, { type ConfigTable } from "@/api/module_system/params";
-import { useConfigStore } from "@stores";
+import { useAppStore, useConfigStore } from "@stores";
 import { useI18n } from "vue-i18n";
 import { ElMessage, ElMessageBox } from "element-plus";
-import FaDrawer from "@/components/modal/fa-drawer/index.vue";
-import SingleImageUpload from "@/components/others/fa-upload/index.vue";
-import { useAppStore } from "@stores/modules/app.store";
 import { DeviceEnum } from "@/enums/settings/device.enum";
 
+defineOptions({ name: "FaConfigInfoDrawer" });
+
 // 定义列表项类型
 interface ListItem {
   id: string;
diff --git a/frontend/web/src/components/layouts/fa-header-bar/widget/FaUserMenu.vue b/frontend/web/src/components/layouts/fa-header-bar/widget/FaUserMenu.vue
index 022a3a04..25636145 100644
--- a/frontend/web/src/components/layouts/fa-header-bar/widget/FaUserMenu.vue
+++ b/frontend/web/src/components/layouts/fa-header-bar/widget/FaUserMenu.vue
@@ -56,7 +56,7 @@
             </div>
           </div>
           <ul class="py-4 mt-3 border-t border-g-300/80">
-            <li class="btn-item" @click="goPage('/profile')">
+            <li class="btn-item" @click="goPage('/fastlink/profile')">
               <FaSvgIcon icon="ri:user-3-line" />
               <span>{{ $t("topBar.user.userCenter") }}</span>
             </li>
@@ -85,7 +85,7 @@
       </template>
     </ElPopover>
 
-    <ConfigInfoDrawer v-model="paramDrawerVisible" />
+    <FaConfigInfoDrawer v-model="paramDrawerVisible" />
   </div>
 </template>
 
@@ -93,10 +93,8 @@
 import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
 import { ElMessageBox } from "element-plus";
-import ConfigInfoDrawer from "@views/module_system/param/components/ConfigInfoDrawer.vue";
-import { useUserStore } from "@stores/modules/user.store";
-import { WEB_LINKS } from "@utils/constants";
-import { mittBus } from "@utils/sys";
+import { useUserStore } from "@stores";
+import { WEB_LINKS, mittBus } from "@utils";
 
 defineOptions({ name: "FaUserMenu" });
 
diff --git a/frontend/web/src/components/layouts/fa-menus/fa-horizontal-menu/index.vue b/frontend/web/src/components/layouts/fa-menus/fa-horizontal-menu/index.vue
index 2890c28d..4fc31de4 100644
--- a/frontend/web/src/components/layouts/fa-menus/fa-horizontal-menu/index.vue
+++ b/frontend/web/src/components/layouts/fa-menus/fa-horizontal-menu/index.vue
@@ -13,7 +13,7 @@
       popper-class="horizontal-menu-popper"
       class="w-full border-none"
     >
-      <HorizontalSubmenu
+      <FaHorizontalSubmenu
         v-for="item in filteredMenuItems"
         :key="item.path"
         :item="item"
@@ -26,8 +26,7 @@
 
 <script setup lang="ts">
 import type { AppRouteRecord } from "@/types/router";
-import HorizontalSubmenu from "./widget/HorizontalSubmenu.vue";
-import { useSettingsStore } from "@stores/modules/setting.store";
+import { useSettingsStore } from "@stores";
 
 defineOptions({ name: "FaHorizontalMenu" });
 
diff --git a/frontend/web/src/components/layouts/fa-menus/fa-horizontal-menu/widget/HorizontalSubmenu.vue b/frontend/web/src/components/layouts/fa-menus/fa-horizontal-menu/widget/FaHorizontalSubmenu.vue
similarity index 91%
rename from frontend/web/src/components/layouts/fa-menus/fa-horizontal-menu/widget/HorizontalSubmenu.vue
rename to frontend/web/src/components/layouts/fa-menus/fa-horizontal-menu/widget/FaHorizontalSubmenu.vue
index ba872b44..9df8e633 100644
--- a/frontend/web/src/components/layouts/fa-menus/fa-horizontal-menu/widget/HorizontalSubmenu.vue
+++ b/frontend/web/src/components/layouts/fa-menus/fa-horizontal-menu/widget/FaHorizontalSubmenu.vue
@@ -1,5 +1,5 @@
 <template>
-  <ElSubMenu v-if="hasChildren" :index="item.path || item.meta.title" class="!p-0">
+  <ElSubMenu v-if="hasChildren" :index="item.path || item.meta.title" class="p-0!">
     <template #title>
       <FaMenuRouteIcon :icon="item.meta.icon" :color="theme?.iconColor" class="mr-1 text-lg" />
       <span class="text-md">{{ formatMenuTitle(item.meta.title) }}</span>
@@ -10,7 +10,7 @@
     </template>
 
     <!-- 递归调用自身处理子菜单 -->
-    <HorizontalSubmenu
+    <FaHorizontalSubmenu
       v-for="child in filteredChildren"
       :key="child.path"
       :item="child"
@@ -26,7 +26,7 @@
     :index="item.path || item.meta.title"
     @click="goPage(item)"
   >
-    <MenuRouteIcon
+    <FaMenuRouteIcon
       :icon="item.meta.icon"
       :color="theme?.iconColor"
       class="mr-1 text-lg"
@@ -47,9 +47,9 @@
 <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";
-import FaMenuRouteIcon from "@/components/others/fa-menu-routeIcon/index.vue";
+import { handleMenuJump, formatMenuTitle } from "@utils";
+
+defineOptions({ name: "FaHorizontalSubmenu" });
 
 const props = defineProps({
   item: {
diff --git a/frontend/web/src/components/layouts/fa-menus/fa-mixed-menu/index.vue b/frontend/web/src/components/layouts/fa-menus/fa-mixed-menu/index.vue
index edbc6993..ece7a984 100644
--- a/frontend/web/src/components/layouts/fa-menus/fa-mixed-menu/index.vue
+++ b/frontend/web/src/components/layouts/fa-menus/fa-mixed-menu/index.vue
@@ -16,11 +16,11 @@
       @scroll="handleScroll"
       @wheel="handleWheel"
     >
-      <div class="box-border flex-c flex-shrink-0 flex-nowrap h-15 whitespace-nowrap">
+      <div class="box-border flex-c 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 relative shrink-0 h-10 px-3 text-sm flex-c c-p hover:text-theme"
             :class="{
               'menu-item-active text-theme': item.isActive,
             }"
@@ -29,11 +29,11 @@
             <FaMenuRouteIcon
               :icon="item.meta.icon"
               class="text-lg text-g-700 dark:text-g-800 mr-1"
-              :class="item.isActive && '!text-theme'"
+              :class="item.isActive && 'text-theme!'"
             />
             <span
               class="text-md text-g-700 dark:text-g-800"
-              :class="item.isActive && '!text-theme'"
+              :class="item.isActive && 'text-theme!'"
             >
               {{ item.formattedTitle }}
             </span>
@@ -56,10 +56,8 @@
 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";
-import { handleMenuJump } from "@utils/navigation";
+import { formatMenuTitle, handleMenuJump } from "@utils";
 import type { AppRouteRecord } from "@/types/router";
-import FaMenuRouteIcon from "@/components/others/fa-menu-routeIcon/index.vue";
 
 defineOptions({ name: "FaMixedMenu" });
 
diff --git a/frontend/web/src/components/layouts/fa-menus/fa-sidebar-menu/index.vue b/frontend/web/src/components/layouts/fa-menus/fa-sidebar-menu/index.vue
index 27c050fe..2061494b 100755
--- a/frontend/web/src/components/layouts/fa-menus/fa-sidebar-menu/index.vue
+++ b/frontend/web/src/components/layouts/fa-menus/fa-sidebar-menu/index.vue
@@ -131,14 +131,10 @@
 
 <script setup lang="ts">
 import AppConfig from "@/config";
-import { useConfigStore } from "@stores/modules/config.store";
-import { useSettingsStore } from "@stores/modules/setting.store";
+import { useConfigStore, useSettingsStore, useMenuStore } from "@stores";
 import { MenuTypeEnum, MenuWidth } from "@/enums/appEnum";
-import { useMenuStore } from "@stores/modules/menu.store";
-import { isIframe } from "@utils/navigation";
-import { handleMenuJump } from "@utils/navigation";
-import SidebarSubmenu from "./widget/SidebarSubmenu.vue";
-import FaMenuRouteIcon from "@/components/others/fa-menu-routeIcon/index.vue";
+import { isIframe, handleMenuJump } from "@utils";
+import SidebarSubmenu from "./widget/FaSidebarSubmenu.vue";
 import { useCommon } from "@/hooks/core/useCommon";
 import { useWindowSize, useTimeoutFn } from "@vueuse/core";
 
@@ -366,11 +362,11 @@ watch(menuOpen, (isMenuOpen: boolean) => {
 </script>
 
 <style lang="scss" scoped>
-@use "./style";
+@use "@styles/fa-sidebar-menu";
 </style>
 
 <style lang="scss">
-@use "./theme";
+@use "@styles/fa-sidebar-menu-theme";
 
 .layout-sidebar {
   // 展开的宽度
diff --git a/frontend/web/src/components/layouts/fa-menus/fa-sidebar-menu/widget/SidebarSubmenu.vue b/frontend/web/src/components/layouts/fa-menus/fa-sidebar-menu/widget/FaSidebarSubmenu.vue
similarity index 95%
rename from frontend/web/src/components/layouts/fa-menus/fa-sidebar-menu/widget/SidebarSubmenu.vue
rename to frontend/web/src/components/layouts/fa-menus/fa-sidebar-menu/widget/FaSidebarSubmenu.vue
index 438a0590..5d8929b3 100755
--- a/frontend/web/src/components/layouts/fa-menus/fa-sidebar-menu/widget/SidebarSubmenu.vue
+++ b/frontend/web/src/components/layouts/fa-menus/fa-sidebar-menu/widget/FaSidebarSubmenu.vue
@@ -15,7 +15,7 @@
         <div v-if="item.meta.showBadge" class="fa-badge" :style="'right: 10px'" />
       </template>
 
-      <SidebarSubmenu
+      <FaSidebarSubmenu
         :list="item.children"
         :is-mobile="isMobile"
         :level="level + 1"
@@ -59,10 +59,10 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import type { AppRouteRecord } from "@/types/router";
-import { formatMenuTitle } from "@utils/navigation";
-import { handleMenuJump } from "@utils/navigation";
-import { useSettingsStore } from "@stores/modules/setting.store";
-import FaMenuRouteIcon from "@/components/others/fa-menu-routeIcon/index.vue";
+import { formatMenuTitle, handleMenuJump } from "@utils";
+import { useSettingsStore } from "@stores";
+
+defineOptions({ name: "FaSidebarSubmenu" });
 
 interface MenuTheme {
   iconColor?: string;
diff --git a/frontend/web/src/components/layouts/fa-page-content/index.vue b/frontend/web/src/components/layouts/fa-page-content/index.vue
index 20b74981..cd37c3d7 100644
--- a/frontend/web/src/components/layouts/fa-page-content/index.vue
+++ b/frontend/web/src/components/layouts/fa-page-content/index.vue
@@ -62,9 +62,7 @@
 import type { CSSProperties } from "vue";
 import { useMediaQuery } from "@vueuse/core";
 import { useRoute, type RouteLocationNormalizedLoaded } from "vue-router";
-import FaSvgIcon from "@/components/base/fa-svg-icon/index.vue";
-import { useSettingsStore } from "@stores/modules/setting.store";
-import { useWorktabStore } from "@stores/modules/worktab.store";
+import { useSettingsStore, useWorktabStore } from "@stores";
 
 defineOptions({ name: "FaPageContent" });
 
diff --git a/frontend/web/src/components/layouts/fa-screen-lock/index.vue b/frontend/web/src/components/layouts/fa-screen-lock/index.vue
index e1752a66..5dce5639 100644
--- a/frontend/web/src/components/layouts/fa-screen-lock/index.vue
+++ b/frontend/web/src/components/layouts/fa-screen-lock/index.vue
@@ -149,16 +149,14 @@
 import { Lock } from "@element-plus/icons-vue";
 import type { FormInstance, FormRules } from "element-plus";
 import { ElInput } from "element-plus";
-import FaDialog from "@/components/modal/fa-dialog/index.vue";
 import { useI18n } from "vue-i18n";
 import { useRoute, useRouter } from "vue-router";
 import CryptoJS from "crypto-js";
-import { useUserStore } from "@stores/modules/user.store";
-import { useSettingsStore } from "@stores/modules/setting.store";
-import { mittBus } from "@utils/sys";
-import { useNow } from "@utils/common";
+import { useUserStore, useSettingsStore } from "@stores";
+import { mittBus, useNow } from "@utils";
 import bgDark from "@imgs/lock/bg_dark.webp";
 import bgLight from "@imgs/lock/bg_light.webp";
+import { ElMessage } from "element-plus";
 
 const { t } = useI18n();
 const route = useRoute();
diff --git a/frontend/web/src/components/layouts/fa-settings-panel/composables/useSettingsHandlers.ts b/frontend/web/src/components/layouts/fa-settings-panel/composables/useSettingsHandlers.ts
index d81fe8b0..2faf3501 100644
--- a/frontend/web/src/components/layouts/fa-settings-panel/composables/useSettingsHandlers.ts
+++ b/frontend/web/src/components/layouts/fa-settings-panel/composables/useSettingsHandlers.ts
@@ -1,4 +1,4 @@
-import { useSettingsStore } from "@stores/modules/setting.store";
+import { useSettingsStore } from "@stores";
 import { storeToRefs } from "pinia";
 import type { ContainerWidthEnum } from "@/enums/appEnum";
 
diff --git a/frontend/web/src/components/layouts/fa-settings-panel/composables/useSettingsPanel.ts b/frontend/web/src/components/layouts/fa-settings-panel/composables/useSettingsPanel.ts
index 8794001a..6ed8a799 100644
--- a/frontend/web/src/components/layouts/fa-settings-panel/composables/useSettingsPanel.ts
+++ b/frontend/web/src/components/layouts/fa-settings-panel/composables/useSettingsPanel.ts
@@ -1,11 +1,10 @@
 import { ref, computed, watch } from "vue";
-import { useSettingsStore } from "@stores/modules/setting.store";
+import { useSettingsStore } from "@stores";
 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 { mittBus, StorageConfig } from "@utils";
 import { useTheme } from "@/hooks/core/useTheme";
 import { useCeremony } from "@/hooks/core/useCeremony";
 import { useSettingsState } from "./useSettingsState";
diff --git a/frontend/web/src/components/layouts/fa-settings-panel/composables/useSettingsState.ts b/frontend/web/src/components/layouts/fa-settings-panel/composables/useSettingsState.ts
index 5ffa9e59..afa3e787 100644
--- a/frontend/web/src/components/layouts/fa-settings-panel/composables/useSettingsState.ts
+++ b/frontend/web/src/components/layouts/fa-settings-panel/composables/useSettingsState.ts
@@ -1,4 +1,4 @@
-import { useSettingsStore } from "@stores/modules/setting.store";
+import { useSettingsStore } from "@stores";
 import { MenuThemeEnum, MenuTypeEnum } from "@/enums/appEnum";
 
 /**
diff --git a/frontend/web/src/components/layouts/fa-settings-panel/index.vue b/frontend/web/src/components/layouts/fa-settings-panel/index.vue
index c12e5518..3561fd28 100755
--- a/frontend/web/src/components/layouts/fa-settings-panel/index.vue
+++ b/frontend/web/src/components/layouts/fa-settings-panel/index.vue
@@ -1,43 +1,32 @@
 <!-- 设置面板 -->
 <template>
   <div class="layout-settings">
-    <SettingDrawer v-model="showDrawer" @open="handleOpen" @close="handleClose">
+    <FaSettingDrawer v-model="showDrawer" @open="handleOpen" @close="handleClose">
       <!-- 头部关闭按钮 -->
-      <SettingHeader @close="closeDrawer" />
+      <FaSettingHeader @close="closeDrawer" />
       <!-- 主题风格 -->
-      <ThemeSettings />
+      <FaThemeSettings />
       <!-- 菜单布局 -->
-      <MenuLayoutSettings />
+      <FaMenuLayoutSettings />
       <!-- 菜单风格 -->
-      <MenuStyleSettings />
+      <FaMenuStyleSettings />
       <!-- 系统主题色 -->
-      <ColorSettings />
+      <FaColorSettings />
       <!-- 盒子样式 -->
-      <BoxStyleSettings />
+      <FaBoxStyleSettings />
       <!-- 容器宽度 -->
-      <ContainerSettings />
+      <FaContainerSettings />
       <!-- 基础配置 -->
-      <BasicSettings />
+      <FaBasicSettings />
       <!-- 操作按钮 -->
-      <SettingActions />
-    </SettingDrawer>
+      <FaSettingActions />
+    </FaSettingDrawer>
   </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: "FaSettingsPanel" });
 
 interface Props {
@@ -68,5 +57,5 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss">
-@use "./style";
+@use "@styles/fa-settings-panel";
 </style>
diff --git a/frontend/web/src/components/layouts/fa-settings-panel/widget/BasicSettings.vue b/frontend/web/src/components/layouts/fa-settings-panel/widget/FaBasicSettings.vue
similarity index 88%
rename from frontend/web/src/components/layouts/fa-settings-panel/widget/BasicSettings.vue
rename to frontend/web/src/components/layouts/fa-settings-panel/widget/FaBasicSettings.vue
index 0a27beac..1ef58a36 100644
--- a/frontend/web/src/components/layouts/fa-settings-panel/widget/BasicSettings.vue
+++ b/frontend/web/src/components/layouts/fa-settings-panel/widget/FaBasicSettings.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
-    <SectionTitle :title="$t('setting.basics.title')" class="mt-10" />
-    <SettingItem
+    <FaSectionTitle :title="$t('setting.basics.title')" class="mt-10" />
+    <FaSettingItem
       v-for="config in basicSettingsConfig"
       :key="config.key"
       :config="config"
@@ -12,9 +12,7 @@
 </template>
 
 <script setup lang="ts">
-import SectionTitle from "./SectionTitle.vue";
-import SettingItem from "./SettingItem.vue";
-import { useSettingsStore } from "@stores/modules/setting.store";
+import { useSettingsStore } from "@stores";
 import { useSettingsConfig } from "../composables/useSettingsConfig";
 import { useSettingsHandlers } from "../composables/useSettingsHandlers";
 import { storeToRefs } from "pinia";
diff --git a/frontend/web/src/components/layouts/fa-settings-panel/widget/BoxStyleSettings.vue b/frontend/web/src/components/layouts/fa-settings-panel/widget/FaBoxStyleSettings.vue
similarity index 75%
rename from frontend/web/src/components/layouts/fa-settings-panel/widget/BoxStyleSettings.vue
rename to frontend/web/src/components/layouts/fa-settings-panel/widget/FaBoxStyleSettings.vue
index 5de8a285..2b9accd8 100644
--- a/frontend/web/src/components/layouts/fa-settings-panel/widget/BoxStyleSettings.vue
+++ b/frontend/web/src/components/layouts/fa-settings-panel/widget/FaBoxStyleSettings.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <SectionTitle :title="$t('setting.box.title')" class="mt-10" />
+    <FaSectionTitle :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"
@@ -8,8 +8,8 @@
         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'
+            ? 'text-g-800 bg-(--default-box-color) dark:text-white! dark:bg-g-300'
+            : 'hover:text-g-800 hover:bg-black/4 dark:hover:bg-black/20'
         "
         @click="boxStyleHandlers.setBoxMode(option.type)"
       >
@@ -20,8 +20,7 @@
 </template>
 
 <script setup lang="ts">
-import SectionTitle from "./SectionTitle.vue";
-import { useSettingsStore } from "@stores/modules/setting.store";
+import { useSettingsStore } from "@stores";
 import { useSettingsConfig } from "../composables/useSettingsConfig";
 import { useSettingsHandlers } from "../composables/useSettingsHandlers";
 import { storeToRefs } from "pinia";
diff --git a/frontend/web/src/components/layouts/fa-settings-panel/widget/ColorSettings.vue b/frontend/web/src/components/layouts/fa-settings-panel/widget/FaColorSettings.vue
similarity index 81%
rename from frontend/web/src/components/layouts/fa-settings-panel/widget/ColorSettings.vue
rename to frontend/web/src/components/layouts/fa-settings-panel/widget/FaColorSettings.vue
index 337a880a..074a6eea 100644
--- a/frontend/web/src/components/layouts/fa-settings-panel/widget/ColorSettings.vue
+++ b/frontend/web/src/components/layouts/fa-settings-panel/widget/FaColorSettings.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <SectionTitle :title="$t('setting.color.title')" class="mt-10" />
+    <FaSectionTitle :title="$t('setting.color.title')" class="mt-10" />
     <div class="-mr-4">
       <div class="flex flex-wrap">
         <div
@@ -12,7 +12,7 @@
         >
           <FaSvgIcon
             icon="ri:check-fill"
-            class="text-base !text-white"
+            class="text-base text-white!"
             v-show="color === systemThemeColor"
           />
         </div>
@@ -22,8 +22,7 @@
 </template>
 
 <script setup lang="ts">
-import SectionTitle from "./SectionTitle.vue";
-import { useSettingsStore } from "@stores/modules/setting.store";
+import { useSettingsStore } from "@stores";
 import { useSettingsConfig } from "../composables/useSettingsConfig";
 import { useSettingsHandlers } from "../composables/useSettingsHandlers";
 import { storeToRefs } from "pinia";
diff --git a/frontend/web/src/components/layouts/fa-settings-panel/widget/ContainerSettings.vue b/frontend/web/src/components/layouts/fa-settings-panel/widget/FaContainerSettings.vue
similarity index 75%
rename from frontend/web/src/components/layouts/fa-settings-panel/widget/ContainerSettings.vue
rename to frontend/web/src/components/layouts/fa-settings-panel/widget/FaContainerSettings.vue
index 81318790..189e51b2 100644
--- a/frontend/web/src/components/layouts/fa-settings-panel/widget/ContainerSettings.vue
+++ b/frontend/web/src/components/layouts/fa-settings-panel/widget/FaContainerSettings.vue
@@ -1,13 +1,13 @@
 <template>
   <div>
-    <SectionTitle :title="$t('setting.container.title')" class="mt-12.5" />
+    <FaSectionTitle :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="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-theme [&_i]:text-theme!': containerWidth === option.value,
           'border-full-d': containerWidth !== option.value,
         }"
         @click="containerHandlers.setWidth(option.value)"
@@ -20,8 +20,7 @@
 </template>
 
 <script setup lang="ts">
-import SectionTitle from "./SectionTitle.vue";
-import { useSettingsStore } from "@stores/modules/setting.store";
+import { useSettingsStore } from "@stores";
 import { useSettingsConfig } from "../composables/useSettingsConfig";
 import { useSettingsHandlers } from "../composables/useSettingsHandlers";
 import { storeToRefs } from "pinia";
diff --git a/frontend/web/src/components/layouts/fa-settings-panel/widget/MenuLayoutSettings.vue b/frontend/web/src/components/layouts/fa-settings-panel/widget/FaMenuLayoutSettings.vue
similarity index 84%
rename from frontend/web/src/components/layouts/fa-settings-panel/widget/MenuLayoutSettings.vue
rename to frontend/web/src/components/layouts/fa-settings-panel/widget/FaMenuLayoutSettings.vue
index e3488b86..30fe5f91 100644
--- a/frontend/web/src/components/layouts/fa-settings-panel/widget/MenuLayoutSettings.vue
+++ b/frontend/web/src/components/layouts/fa-settings-panel/widget/FaMenuLayoutSettings.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="width > 1000">
-    <SectionTitle :title="$t('setting.menuType.title')" />
+    <FaSectionTitle :title="$t('setting.menuType.title')" />
     <div class="setting-box-wrap">
       <div
         class="setting-item"
@@ -18,8 +18,7 @@
 </template>
 
 <script setup lang="ts">
-import SectionTitle from "./SectionTitle.vue";
-import { useSettingsStore } from "@stores/modules/setting.store";
+import { useSettingsStore } from "@stores";
 import { useSettingsConfig } from "../composables/useSettingsConfig";
 import { useSettingsState } from "../composables/useSettingsState";
 
diff --git a/frontend/web/src/components/layouts/fa-settings-panel/widget/MenuStyleSettings.vue b/frontend/web/src/components/layouts/fa-settings-panel/widget/FaMenuStyleSettings.vue
similarity index 87%
rename from frontend/web/src/components/layouts/fa-settings-panel/widget/MenuStyleSettings.vue
rename to frontend/web/src/components/layouts/fa-settings-panel/widget/FaMenuStyleSettings.vue
index c44623c3..d5ef449c 100644
--- a/frontend/web/src/components/layouts/fa-settings-panel/widget/MenuStyleSettings.vue
+++ b/frontend/web/src/components/layouts/fa-settings-panel/widget/FaMenuStyleSettings.vue
@@ -1,5 +1,5 @@
 <template>
-  <SectionTitle :title="$t('setting.menu.title')" />
+  <FaSectionTitle :title="$t('setting.menu.title')" />
   <div class="setting-box-wrap">
     <div
       class="setting-item"
@@ -22,9 +22,8 @@
 
 <script setup lang="ts">
 import AppConfig from "@/config";
-import SectionTitle from "./SectionTitle.vue";
 import { MenuTypeEnum, type MenuThemeEnum } from "@/enums/appEnum";
-import { useSettingsStore } from "@stores/modules/setting.store";
+import { useSettingsStore } from "@stores";
 
 const menuThemeList = AppConfig.themeList;
 const settingStore = useSettingsStore();
diff --git a/frontend/web/src/components/layouts/fa-settings-panel/widget/SectionTitle.vue b/frontend/web/src/components/layouts/fa-settings-panel/widget/FaSectionTitle.vue
similarity index 72%
rename from frontend/web/src/components/layouts/fa-settings-panel/widget/SectionTitle.vue
rename to frontend/web/src/components/layouts/fa-settings-panel/widget/FaSectionTitle.vue
index 5a63865d..9f0116c2 100644
--- a/frontend/web/src/components/layouts/fa-settings-panel/widget/SectionTitle.vue
+++ b/frontend/web/src/components/layouts/fa-settings-panel/widget/FaSectionTitle.vue
@@ -1,6 +1,6 @@
 <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(--fa-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"
+    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-(--fa-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 }}
diff --git a/frontend/web/src/components/layouts/fa-settings-panel/widget/SettingActions.vue b/frontend/web/src/components/layouts/fa-settings-panel/widget/FaSettingActions.vue
similarity index 96%
rename from frontend/web/src/components/layouts/fa-settings-panel/widget/SettingActions.vue
rename to frontend/web/src/components/layouts/fa-settings-panel/widget/FaSettingActions.vue
index 8292238d..9c40369a 100644
--- a/frontend/web/src/components/layouts/fa-settings-panel/widget/SettingActions.vue
+++ b/frontend/web/src/components/layouts/fa-settings-panel/widget/FaSettingActions.vue
@@ -1,12 +1,10 @@
 <!-- 设置操作按钮 -->
 <template>
-  <div
-    class="mt-10 flex gap-8 border-t border-[var(--default-border)] bg-[var(--fa-bg-color)] pt-5"
-  >
-    <ElButton type="primary" class="flex-1 !h-8" @click="handleCopyConfig">
+  <div class="mt-10 flex gap-8 border-t border-(--default-border) bg-(--fa-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">
+    <ElButton type="danger" plain class="flex-1 h-8!" @click="handleResetConfig">
       {{ $t("setting.actions.resetConfig") }}
     </ElButton>
   </div>
@@ -14,12 +12,13 @@
 
 <script setup lang="ts">
 import { nextTick } from "vue";
-import { useSettingsStore } from "@stores/modules/setting.store";
+import { useSettingsStore } from "@stores";
 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 { ElMessage } from "element-plus";
 
 defineOptions({ name: "SettingActions" });
 
diff --git a/frontend/web/src/components/layouts/fa-settings-panel/widget/SettingDrawer.vue b/frontend/web/src/components/layouts/fa-settings-panel/widget/FaSettingDrawer.vue
similarity index 100%
rename from frontend/web/src/components/layouts/fa-settings-panel/widget/SettingDrawer.vue
rename to frontend/web/src/components/layouts/fa-settings-panel/widget/FaSettingDrawer.vue
diff --git a/frontend/web/src/components/layouts/fa-settings-panel/widget/SettingHeader.vue b/frontend/web/src/components/layouts/fa-settings-panel/widget/FaSettingHeader.vue
similarity index 83%
rename from frontend/web/src/components/layouts/fa-settings-panel/widget/SettingHeader.vue
rename to frontend/web/src/components/layouts/fa-settings-panel/widget/FaSettingHeader.vue
index 6af10b28..370c474c 100644
--- a/frontend/web/src/components/layouts/fa-settings-panel/widget/SettingHeader.vue
+++ b/frontend/web/src/components/layouts/fa-settings-panel/widget/FaSettingHeader.vue
@@ -3,7 +3,7 @@
     <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"
+        class="flex-cc c-p size-7.5 transition-all! duration-200 rounded hover:bg-g-300/80"
       >
         <FaSvgIcon icon="ri:close-fill" class="block text-xl text-g-600" />
       </div>
diff --git a/frontend/web/src/components/layouts/fa-settings-panel/widget/SettingItem.vue b/frontend/web/src/components/layouts/fa-settings-panel/widget/FaSettingItem.vue
similarity index 100%
rename from frontend/web/src/components/layouts/fa-settings-panel/widget/SettingItem.vue
rename to frontend/web/src/components/layouts/fa-settings-panel/widget/FaSettingItem.vue
diff --git a/frontend/web/src/components/layouts/fa-settings-panel/widget/ThemeSettings.vue b/frontend/web/src/components/layouts/fa-settings-panel/widget/FaThemeSettings.vue
similarity index 82%
rename from frontend/web/src/components/layouts/fa-settings-panel/widget/ThemeSettings.vue
rename to frontend/web/src/components/layouts/fa-settings-panel/widget/FaThemeSettings.vue
index 6410d571..df994537 100644
--- a/frontend/web/src/components/layouts/fa-settings-panel/widget/ThemeSettings.vue
+++ b/frontend/web/src/components/layouts/fa-settings-panel/widget/FaThemeSettings.vue
@@ -1,5 +1,5 @@
 <template>
-  <SectionTitle :title="$t('setting.theme.title')" />
+  <FaSectionTitle :title="$t('setting.theme.title')" />
   <div class="setting-box-wrap">
     <div
       class="setting-item"
@@ -16,8 +16,7 @@
 </template>
 
 <script setup lang="ts">
-import SectionTitle from "./SectionTitle.vue";
-import { useSettingsStore } from "@stores/modules/setting.store";
+import { useSettingsStore } from "@stores";
 import { useSettingsConfig } from "../composables/useSettingsConfig";
 import { useTheme } from "@/hooks/core/useTheme";
 
diff --git a/frontend/web/src/components/layouts/fa-work-tab/index.vue b/frontend/web/src/components/layouts/fa-work-tab/index.vue
old mode 100755
new mode 100644
index 2086ac37..51164964
--- a/frontend/web/src/components/layouts/fa-work-tab/index.vue
+++ b/frontend/web/src/components/layouts/fa-work-tab/index.vue
@@ -5,7 +5,7 @@
     class="worktab-tags-shell box-border w-full select-none"
     :class="[
       /** 三种模式统一底边线；谷歌模式底边与标签贴合，默认/卡片需要与底边留出间距（避免重合） */
-      'border-b border-[var(--fa-card-border)]',
+      'border-b border-(--fa-card-border)',
       tabStyle === 'tab-google' ? 'worktab-tags-shell--google pt-1 pb-0' : 'py-1',
     ]"
   >
@@ -28,7 +28,7 @@
         ref="scrollRef"
       >
         <ul
-          class="float-left whitespace-nowrap !bg-transparent flex"
+          class="float-left whitespace-nowrap bg-transparent! flex"
           :class="[chromeTabStrip ? 'pl-1' : '']"
           ref="tabsRef"
           :style="{
@@ -42,12 +42,12 @@
               item.path === activeTab
                 ? chromeTabStrip
                   ? 'activ-tab'
-                  : 'activ-tab !text-theme'
+                  : 'activ-tab text-theme!'
                 : chromeTabStrip
                   ? ''
                   : 'text-g-600 dark:text-g-800',
               isCardTabs ? 'worktab-tab--card' : '',
-              chromeTabStrip ? 'google-tab relative !h-8 !leading-8 !border-none' : '',
+              chromeTabStrip ? 'google-tab relative h-8! leading-8! border-none!' : '',
             ]"
             :style="
               tabStyle === 'tab-google'
@@ -70,7 +70,7 @@
           >
             <button
               type="button"
-              class="worktab-star focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--el-color-primary)] focus-visible:ring-offset-1 rounded"
+              class="worktab-star focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--el-color-primary) focus-visible:ring-offset-1 rounded"
               :class="{ 'worktab-star--on': isQuickLinkBookmarked(item) }"
               :title="
                 isQuickLinkBookmarked(item) ? t('worktab.bookmarkRemove') : t('worktab.bookmarkAdd')
@@ -171,16 +171,11 @@ 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 { ElMessage } from "element-plus";
-import { refreshAppCaches } from "@stores";
-import { useWorktabStore } from "@stores/modules/worktab.store";
-import { useUserStore } from "@stores/modules/user.store";
-import { formatMenuTitle } from "@utils/navigation";
-import { useSettingsStore } from "@stores/modules/setting.store";
+import { refreshAppCaches, useWorktabStore, useUserStore, useSettingsStore } from "@stores";
 import { MenuItemType } from "@/components/others/fa-menu-right/index.vue";
 import { useCommon } from "@/hooks/core/useCommon";
-import { quickStartManager } from "@utils/common";
+import { formatMenuTitle, quickStartManager } from "@utils";
 import { WorkTab } from "@/types";
 
 defineOptions({ name: "FaWorkTab" });
diff --git a/frontend/web/src/components/layouts/index.vue b/frontend/web/src/components/layouts/index.vue
index ead6d330..257dd45e 100755
--- a/frontend/web/src/components/layouts/index.vue
+++ b/frontend/web/src/components/layouts/index.vue
@@ -26,7 +26,7 @@
     <!-- 全局浮层层（引导、通知等跨页面组件） -->
     <div id="app-global">
       <FaGlobalComponent />
-      <Guide v-if="guideVisible" v-model="guideVisible" @skip="onGuideFinished" />
+      <FaGuide v-if="guideVisible" v-model="guideVisible" @skip="onGuideFinished" />
     </div>
   </div>
 </template>
@@ -44,9 +44,7 @@
  *   → settingStore.showGuide=false → 后续不再显示
  */
 import { computed } from "vue";
-import Guide from "@/components/others/fa-guide/index.vue";
-import { useAppStore } from "@stores/modules/app.store";
-import { useSettingsStore } from "@stores/modules/setting.store";
+import { useAppStore, useSettingsStore } from "@stores";
 
 defineOptions({ name: "AppLayout" });
 
@@ -66,5 +64,5 @@ function onGuideFinished(): void {
 </script>
 
 <style lang="scss" scoped>
-@use "./style";
+@use "@styles/layouts";
 </style>
diff --git a/frontend/web/src/components/modal/fa-export-dialog/index.vue b/frontend/web/src/components/modal/fa-export-dialog/index.vue
index d408c07e..724e4c6a 100644
--- a/frontend/web/src/components/modal/fa-export-dialog/index.vue
+++ b/frontend/web/src/components/modal/fa-export-dialog/index.vue
@@ -64,7 +64,6 @@
 </template>
 
 <script lang="ts" setup>
-import FaDialog from "@/components/modal/fa-dialog/index.vue";
 import ExcelJS from "exceljs";
 import type { IContentConfig, IObject } from "@/components/modal/types";
 import { useThrottleFn } from "@vueuse/core";
diff --git a/frontend/web/src/components/modal/fa-import-dialog/index.vue b/frontend/web/src/components/modal/fa-import-dialog/index.vue
index 74de25d9..7374295f 100644
--- a/frontend/web/src/components/modal/fa-import-dialog/index.vue
+++ b/frontend/web/src/components/modal/fa-import-dialog/index.vue
@@ -76,7 +76,6 @@
 
 <script lang="ts" setup>
 import { Download, UploadFilled } from "@element-plus/icons-vue";
-import FaDialog from "@/components/modal/fa-dialog/index.vue";
 import { ElMessage, type UploadUserFile } from "element-plus";
 import { ref, reactive } from "vue";
 import type { IContentConfig, IObject } from "@/components/modal/types";
diff --git a/frontend/web/src/components/others/fa-ai-assistant/index.vue b/frontend/web/src/components/others/fa-ai-assistant/index.vue
index b7bb882c..88d2ee15 100644
--- a/frontend/web/src/components/others/fa-ai-assistant/index.vue
+++ b/frontend/web/src/components/others/fa-ai-assistant/index.vue
@@ -121,8 +121,7 @@
 <script setup lang="ts">
 defineOptions({ name: "FaAiAssistant" });
 
-import FaSvgIcon from "@/components/base/fa-svg-icon/index.vue";
-import { resolveIconForFaSvgIcon } from "@utils/menuIcon/remix";
+import { resolveIconForFaSvgIcon } from "@utils";
 import { nextTick, onBeforeUnmount, onMounted, watch, ref, computed } from "vue";
 import { useRouter } from "vue-router";
 import { ElMessage } from "element-plus";
diff --git a/frontend/web/src/components/others/fa-copy-button/index.vue b/frontend/web/src/components/others/fa-copy-button/index.vue
index 56731e66..f7bb17a9 100644
--- a/frontend/web/src/components/others/fa-copy-button/index.vue
+++ b/frontend/web/src/components/others/fa-copy-button/index.vue
@@ -36,7 +36,7 @@ async function handleClipboard() {
       ElMessage.success(t("common.copySuccess"));
     } catch (error) {
       ElMessage.warning(t("common.copyFailed"));
-      console.warn("[CopyButton] Copy failed:", error);
+      console.warn("[FaCopyButton] Copy failed:", error);
     }
   } else {
     // 兼容性处理（useClipboard 有兼容性问题）
@@ -55,7 +55,7 @@ async function handleClipboard() {
       }
     } catch (err) {
       ElMessage.warning(t("common.copyFailed"));
-      console.warn("[CopyButton] Copy failed:", err);
+      console.warn("[FaCopyButton] Copy failed:", err);
     } finally {
       document.body.removeChild(input);
     }
diff --git a/frontend/web/src/components/others/fa-icon-select/index.vue b/frontend/web/src/components/others/fa-icon-select/index.vue
index dc870d94..d22bb976 100644
--- a/frontend/web/src/components/others/fa-icon-select/index.vue
+++ b/frontend/web/src/components/others/fa-icon-select/index.vue
@@ -82,10 +82,12 @@
 <script setup lang="ts">
 defineOptions({ name: "FaIconSelect" });
 import * as ElementPlusIconsVue from "@element-plus/icons-vue";
-import FaSvgIcon from "@/components/base/fa-svg-icon/index.vue";
-import { listLocalIconBasenames } from "@utils/icons";
-import { isIconifyStoredIcon, resolveElementPlusIconComponent } from "@utils/menuIcon";
-import { resolveIconForFaSvgIcon } from "@utils/menuIcon/remix";
+import {
+  listLocalIconBasenames,
+  isIconifyStoredIcon,
+  resolveElementPlusIconComponent,
+  resolveIconForFaSvgIcon,
+} from "@utils";
 
 const props = defineProps({
   modelValue: {
diff --git a/frontend/web/src/components/others/fa-menu-right/index.vue b/frontend/web/src/components/others/fa-menu-right/index.vue
index a566a202..6b32adf2 100644
--- a/frontend/web/src/components/others/fa-menu-right/index.vue
+++ b/frontend/web/src/components/others/fa-menu-right/index.vue
@@ -5,7 +5,7 @@
       <div
         v-show="visible"
         :style="menuStyle"
-        class="context-menu fa-card-xs !shadow-xl min-w-[var(--menu-width)] w-[var(--menu-width)]"
+        class="context-menu fa-card-xs shadow-xl! min-w-(--menu-width) w-(--menu-width)"
       >
         <ul class="menu-list m-0 list-none" :style="menuListStyle">
           <template v-for="item in menuItems" :key="item.key">
@@ -52,7 +52,7 @@
                 />
               </div>
               <ul
-                class="submenu-list fa-card-xs absolute left-full top-0 z-[2001] hidden w-max min-w-max list-none !shadow-xl"
+                class="submenu-list fa-card-xs absolute left-full top-0 z-2001 hidden w-max min-w-max list-none shadow-xl!"
                 :style="submenuListStyle"
               >
                 <li
@@ -86,7 +86,6 @@
 <script setup lang="ts">
 import { ref, computed } from "vue";
 import type { CSSProperties } from "vue";
-import FaSvgIcon from "@/components/base/fa-svg-icon/index.vue";
 
 defineOptions({ name: "FaMenuRight" });
 
diff --git a/frontend/web/src/components/others/fa-menu-routeIcon/index.vue b/frontend/web/src/components/others/fa-menu-routeIcon/index.vue
index 1a8b1fc9..df822afd 100644
--- a/frontend/web/src/components/others/fa-menu-routeIcon/index.vue
+++ b/frontend/web/src/components/others/fa-menu-routeIcon/index.vue
@@ -24,13 +24,12 @@
 
 <script setup lang="ts">
 import { computed } from "vue";
-import FaSvgIcon from "@/components/base/fa-svg-icon/index.vue";
 import {
   elementMenuIconToEpIconify,
   isElementPlusStoredIcon,
   resolveElementPlusIconComponent,
-} from "@utils/menuIcon";
-import { resolveIconForFaSvgIcon } from "@utils/menuIcon/remix";
+  resolveIconForFaSvgIcon,
+} from "@utils";
 
 defineOptions({ name: "FaMenuRouteIcon", inheritAttrs: false });
 
diff --git a/frontend/web/src/components/others/fa-size-select/index.vue b/frontend/web/src/components/others/fa-size-select/index.vue
index 8c003fe9..b16893a9 100644
--- a/frontend/web/src/components/others/fa-size-select/index.vue
+++ b/frontend/web/src/components/others/fa-size-select/index.vue
@@ -24,11 +24,11 @@
 <script setup lang="ts">
 defineOptions({ name: "FaSizeSelect" });
 
-import FaIconButton from "@/components/widget/fa-icon-button/index.vue";
 import { ComponentSize } from "@/enums/settings/layout.enum";
-import { useAppStore } from "@stores/modules/app.store";
-import { resolveIconForFaSvgIcon } from "@utils/menuIcon/remix";
+import { useAppStore } from "@stores";
+import { resolveIconForFaSvgIcon } from "@utils";
 import { computed } from "vue";
+import { ElMessage } from "element-plus";
 
 const { t } = useI18n();
 const sizeOptions = computed(() => {
diff --git a/frontend/web/src/components/others/fa-table-select/index.vue b/frontend/web/src/components/others/fa-table-select/index.vue
index b09e2adb..47b542fe 100644
--- a/frontend/web/src/components/others/fa-table-select/index.vue
+++ b/frontend/web/src/components/others/fa-table-select/index.vue
@@ -153,7 +153,7 @@ defineSlots<{
 import { ref, reactive, computed } from "vue";
 import { useResizeObserver } from "@vueuse/core";
 import type { FormInstance, PopoverProps, TableInstance } from "element-plus";
-import FaPagination from "@/components/others/fa-pagination/index.vue";
+import { ElMessage } from "element-plus";
 
 // 对象类型
 export type IObject = Record<string, any>;
diff --git a/frontend/web/src/components/others/fa-upload/index.vue b/frontend/web/src/components/others/fa-upload/index.vue
index 85648b88..6d82ca0d 100644
--- a/frontend/web/src/components/others/fa-upload/index.vue
+++ b/frontend/web/src/components/others/fa-upload/index.vue
@@ -81,8 +81,7 @@ defineOptions({ name: "FaUpload" });
 import { ref, watch } from "vue";
 import { UploadRawFile, UploadRequestOptions, ElMessage, type UploadUserFile } from "element-plus";
 import ParamsAPI from "@/api/module_system/params";
-import FaCutterImg from "@/components/media/fa-cutter-img/index.vue";
-import { dataURLToFile } from "@utils/file/dataUrl";
+import { dataURLToFile } from "@utils";
 
 const props = defineProps({
   /**
diff --git a/frontend/web/src/components/others/fa-watermark/index.vue b/frontend/web/src/components/others/fa-watermark/index.vue
index bf047b97..5d1b837b 100644
--- a/frontend/web/src/components/others/fa-watermark/index.vue
+++ b/frontend/web/src/components/others/fa-watermark/index.vue
@@ -23,8 +23,8 @@ import { storeToRefs } from "pinia";
 import AppConfig from "@/config";
 import { defaultSettings } from "@/config/setting";
 import { ThemeMode } from "@/enums";
-import { hexToRgba } from "@utils/ui";
-import { useSettingsStore } from "@stores/modules/setting.store";
+import { hexToRgba } from "@utils";
+import { useSettingsStore } from "@stores";
 
 defineOptions({ name: "FaWatermark" });
 
diff --git a/frontend/web/src/components/tables/fa-table-header/index.vue b/frontend/web/src/components/tables/fa-table-header/index.vue
index d0e265d9..59a14ec5 100644
--- a/frontend/web/src/components/tables/fa-table-header/index.vue
+++ b/frontend/web/src/components/tables/fa-table-header/index.vue
@@ -1,11 +1,11 @@
 <!-- 表格头部，包含表格大小、刷新、全屏、列设置、其他设置 -->
 <template>
-  <div class="flex-cb max-md:!block" id="fa-table-header">
+  <div class="flex-cb max-md:block!" id="fa-table-header">
     <div class="flex-wrap">
       <slot name="left"></slot>
     </div>
 
-    <div class="flex-c md:justify-end max-md:mt-3 max-sm:!hidden">
+    <div class="flex-c md:justify-end max-md:mt-3 max-sm:hidden!">
       <!-- 搜索区域显示/隐藏：默认展示搜索（未高亮）；点按收起后高亮表示当前为隐藏状态 -->
       <ElTooltip
         v-if="showSearchBar != null"
@@ -15,7 +15,7 @@
         <div
           class="button"
           @click="search"
-          :class="!showSearchBar ? 'active !bg-theme hover:!bg-theme/80' : ''"
+          :class="!showSearchBar ? 'active bg-theme! hover:bg-theme/80!' : ''"
         >
           <FaSvgIcon icon="ri:search-line" :class="!showSearchBar ? 'text-white' : 'text-g-700'" />
         </div>
@@ -44,12 +44,12 @@
             <div
               v-for="item in tableSizeOptions"
               :key="item.value"
-              class="table-size-btn-item [&_.el-dropdown-menu__item]:!mb-[3px] last:[&_.el-dropdown-menu__item]:!mb-0"
+              class="table-size-btn-item [&_.el-dropdown-menu__item]:mb-[3px]! last:[&_.el-dropdown-menu__item]:mb-0!"
             >
               <ElDropdownItem
                 :key="item.value"
                 :command="item.value"
-                :class="tableSize === item.value ? '!bg-g-300/55' : ''"
+                :class="tableSize === item.value ? 'bg-g-300/55!' : ''"
               >
                 {{ item.label }}
               </ElDropdownItem>
@@ -72,7 +72,7 @@
         <div
           class="button"
           @click="toggleRowDrag"
-          :class="isRowDrag ? 'active !bg-theme hover:!bg-theme/80' : ''"
+          :class="isRowDrag ? 'active bg-theme! hover:bg-theme/80!' : ''"
         >
           <FaSvgIcon icon="ri:drag-move-line" :class="isRowDrag ? 'text-white' : 'text-g-700'" />
         </div>
@@ -153,7 +153,7 @@
 import { computed, ref, onMounted, onUnmounted } from "vue";
 import { storeToRefs } from "pinia";
 import { TableSizeEnum } from "@/enums/formEnum";
-import { useTableStore } from "@stores/modules/table.store";
+import { useTableStore } from "@stores";
 import { VueDraggable } from "vue-draggable-plus";
 import { useI18n } from "vue-i18n";
 import type { ColumnOption } from "@/types/component";
diff --git a/frontend/web/src/components/tables/fa-table/index.vue b/frontend/web/src/components/tables/fa-table/index.vue
index 5e07dd77..bcca5ce8 100644
--- a/frontend/web/src/components/tables/fa-table/index.vue
+++ b/frontend/web/src/components/tables/fa-table/index.vue
@@ -27,23 +27,16 @@
               </template>
             </ElTableColumn>
             <ElTableColumn v-else v-bind="cleanBodyColumnProps(col)">
-              <template v-if="col.useHeaderSlot && col.prop" #header="headerScope">
-                <slot
-                  :name="col.headerSlotName || `${col.prop}-header`"
-                  v-bind="{ ...headerScope, prop: col.prop, label: col.label }"
-                >
-                  {{ col.label }}
-                </slot>
+              <template #header="headerScope">
+                <component
+                  v-if="col.useHeaderSlot && col.prop"
+                  :is="() => renderColumnHeader(headerScope, col)"
+                />
               </template>
               <template #default="slotScope">
-                <slot
+                <component
                   v-if="col.useSlot && col.prop && shouldRenderSlotScope(slotScope)"
-                  :name="col.slotName || col.prop"
-                  v-bind="{
-                    ...slotScope,
-                    prop: col.prop,
-                    value: col.prop ? slotScope.row[col.prop] : undefined,
-                  }"
+                  :is="() => renderCellSlot(slotScope, col)"
                 />
                 <TableFormatterOutlet
                   v-else-if="col.formatter && !col.useSlot && shouldRenderSlotScope(slotScope)"
@@ -53,7 +46,9 @@
               </template>
             </ElTableColumn>
           </template>
-          <template v-if="$slots.default" #default><slot /></template>
+          <template v-if="$slots.default" #default>
+            <component :is="() => renderDefaultSlot()" />
+          </template>
           <template #empty>
             <div v-if="loading"></div>
             <ElEmpty v-else :description="emptyText" :image-size="120" />
@@ -94,6 +89,7 @@ import {
   watchEffect,
   getCurrentInstance,
   useAttrs,
+  useSlots,
   isVNode,
   h,
   defineComponent,
@@ -102,11 +98,10 @@ import {
 import type { ElTable, TableProps } from "element-plus";
 import { storeToRefs } from "pinia";
 import { ColumnOption } from "@/types";
-import { useTableStore } from "@stores/modules/table.store";
+import { useTableStore } from "@stores";
 import { useCommon } from "@/hooks/core/useCommon";
 import { useTableHeight } from "@/hooks/core/useTableHeight";
 import { useWindowSize } from "@vueuse/core";
-import FaPagination from "@/components/others/fa-pagination/index.vue";
 import { VueDraggable } from "vue-draggable-plus";
 
 defineOptions({ name: "FaTable" });
@@ -116,6 +111,7 @@ const elTableRef = ref<InstanceType<typeof ElTable> | null>(null);
 const paginationRef = ref<HTMLElement>();
 const tableHeaderRef = ref<HTMLElement>();
 const tableStore = useTableStore();
+const slots = useSlots();
 const {
   isBorder,
   isZebra,
@@ -361,6 +357,28 @@ const shouldRenderSlotScope = (slotScope: { $index?: number }) => {
   return slotScope.$index === undefined || slotScope.$index >= 0;
 };
 
+/** Vue 3.5：useSlots() 直接调用 slot 渲染函数，模板中零 <slot> 元素 */
+function renderColumnHeader(headerScope: Record<string, unknown>, col: Record<string, unknown>) {
+  const slotName = (col.headerSlotName || `${col.prop}-header`) as string;
+  return slots[slotName]?.({ ...headerScope, prop: col.prop, label: col.label }) ?? col.label;
+}
+
+function renderCellSlot(slotScope: Record<string, unknown>, col: Record<string, unknown>) {
+  const slotName = (col.slotName || col.prop) as string;
+  const row = slotScope.row as Record<string, unknown> | undefined;
+  return (
+    slots[slotName]?.({
+      ...slotScope,
+      prop: col.prop,
+      value: col.prop ? row?.[col.prop as string] : undefined,
+    }) ?? null
+  );
+}
+
+function renderDefaultSlot() {
+  return slots.default?.() ?? null;
+}
+
 /**
  * ElTableColumn 若存在 default 插槽且插槽产物含任意非 Comment 的 vnode（含空白文本节点），
  * 将不会执行 formatter（见 element-plus render-helper setColumnRenders）。
@@ -482,5 +500,5 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
-@use "./style";
+@use "@styles/fa-table";
 </style>
diff --git a/frontend/web/src/components/text-effect/fa-festival-text-scroll/index.vue b/frontend/web/src/components/text-effect/fa-festival-text-scroll/index.vue
index 7351c0f5..0865713e 100644
--- a/frontend/web/src/components/text-effect/fa-festival-text-scroll/index.vue
+++ b/frontend/web/src/components/text-effect/fa-festival-text-scroll/index.vue
@@ -6,7 +6,7 @@
   >
     <FaTextScroll
       v-if="showFestivalStrip"
-      class="!mb-3"
+      class="mb-3!"
       type="primary"
       :text="festivalScrollDisplayHtml"
       height="40px"
@@ -21,9 +21,9 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import { storeToRefs } from "pinia";
-import { useSettingsStore } from "@stores/modules/setting.store";
+import { useSettingsStore } from "@stores";
 import { useCeremony } from "@/hooks/core/useCeremony";
-import { WEB_LINKS } from "@utils/constants";
+import { WEB_LINKS } from "@utils";
 
 defineOptions({ name: "FaFestivalTextScroll" });
 
diff --git a/frontend/web/src/components/text-effect/fa-text-scroll/index.vue b/frontend/web/src/components/text-effect/fa-text-scroll/index.vue
index 0586cbd1..c6033e7b 100644
--- a/frontend/web/src/components/text-effect/fa-text-scroll/index.vue
+++ b/frontend/web/src/components/text-effect/fa-text-scroll/index.vue
@@ -52,8 +52,7 @@ import {
   useDebounceFn,
   useTimeoutFn,
 } from "@vueuse/core";
-import { useSettingsStore } from "@stores/modules/setting.store";
-import FaSvgIcon from "@/components/base/fa-svg-icon/index.vue";
+import { useSettingsStore } from "@stores";
 
 type ThemeType =
   | "theme"
@@ -143,14 +142,14 @@ const isPaused = computed(() => {
 // 主题样式映射
 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",
+    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;
 });
@@ -326,7 +325,6 @@ onBeforeUnmount(() => {
 <script setup lang="ts">
 defineOptions({ name: "FaTextScroll" });
 
-
 const handleClose = () => {
   console.log("文本滚动组件已关闭");
   ElMessage.info("已关闭");
diff --git a/frontend/web/src/components/views/fa-exception/index.vue b/frontend/web/src/components/views/fa-exception/index.vue
index 738e4668..ba7e1e82 100644
--- a/frontend/web/src/components/views/fa-exception/index.vue
+++ b/frontend/web/src/components/views/fa-exception/index.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="page-content !border-0 !bg-transparent min-h-screen flex-cc">
-    <div class="flex-cc max-md:!block max-md:text-center">
-      <FaThemeSvg :src="data.imgUrl" size="100%" class="!w-100" />
+  <div class="page-content border-0! bg-transparent! min-h-screen flex-cc">
+    <div class="flex-cc max-md:block! max-md:text-center">
+      <FaThemeSvg :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">
@@ -14,8 +14,7 @@
 
 <script setup lang="ts">
 import { useCommon } from "@/hooks/core/useCommon";
-import { useUserStore } from "@stores/modules/user.store";
-import FaThemeSvg from "@/components/theme/fa-theme-svg/index.vue";
+import { useUserStore } from "@stores";
 
 const router = useRouter();
 const userStore = useUserStore();
diff --git a/frontend/web/src/components/views/fa-login/AuthTopBar.vue b/frontend/web/src/components/views/fa-login/FaAuthTopBar.vue
similarity index 93%
rename from frontend/web/src/components/views/fa-login/AuthTopBar.vue
rename to frontend/web/src/components/views/fa-login/FaAuthTopBar.vue
index 2091af5a..ce801eaf 100644
--- a/frontend/web/src/components/views/fa-login/AuthTopBar.vue
+++ b/frontend/web/src/components/views/fa-login/FaAuthTopBar.vue
@@ -1,7 +1,7 @@
 <!-- 授权页顶栏：左上 Logo / 标题 / 版本（固定），右上操作（固定）；切换布局时仅下方主体变化 -->
 <template>
   <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"
+    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-4.5 md:gap-4 md:px-10"
   >
     <div class="pointer-events-auto flex min-w-0 flex-1 items-center gap-3">
       <FaLogo class="icon shrink-0" size="46" :src="webLogoSrc" />
@@ -18,7 +18,7 @@
     <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-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"
         >
@@ -33,9 +33,7 @@
             <FaSvgIcon v-if="_color === systemThemeColor" icon="ri:check-fill" class="text-white" />
           </div>
         </div>
-        <div
-          class="btn palette-btn auth-top-bar__action 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">
           <FaSvgIcon icon="ri:palette-line" class="text-xl transition-colors duration-300" />
         </div>
       </div>
@@ -111,21 +109,17 @@
 import { computed } from "vue";
 import { storeToRefs } from "pinia";
 import { useI18n } from "vue-i18n";
-import FaLogo from "@/components/base/fa-logo/index.vue";
-import FaSvgIcon from "@/components/base/fa-svg-icon/index.vue";
-import { useSettingsStore } from "@stores/modules/setting.store";
-import { useUserStore } from "@stores/modules/user.store";
+import { useSettingsStore, useUserStore, useConfigStore } from "@stores";
 import { useHeaderBar } from "@/hooks/core/useHeaderBar";
-import { themeAnimation } from "@utils/ui";
+import { themeAnimation } from "@utils";
 import { languageOptions } from "@/locales";
 import { LanguageEnum } from "@/enums/appEnum";
 import AppConfig from "@/config";
-import { useConfigStore } from "@stores/modules/config.store";
-import type { LoginPanelAlign } from "@views/module_system/auth/composables/useLoginPanelAlign";
+import { LoginPanelAlign } from "@/components/views/fa-login/useLoginPanelAlign";
 
 defineOptions({ name: "AuthTopBar" });
 
-const DEFAULT_APP_VERSION = "2.0.0";
+const DEFAULT_APP_VERSION = "3.0.0";
 
 const props = defineProps<{
   /** 登录区表单水平对齐；未传入时不展示布局切换 */
diff --git a/frontend/web/src/views/module_system/auth/login/components/LoginAccountForm.vue b/frontend/web/src/components/views/fa-login/FaLoginAccountForm.vue
similarity index 89%
rename from frontend/web/src/views/module_system/auth/login/components/LoginAccountForm.vue
rename to frontend/web/src/components/views/fa-login/FaLoginAccountForm.vue
index 35affc57..61bd278f 100644
--- a/frontend/web/src/views/module_system/auth/login/components/LoginAccountForm.vue
+++ b/frontend/web/src/components/views/fa-login/FaLoginAccountForm.vue
@@ -73,7 +73,7 @@
             <template #prefix>
               <FaSvgIcon
                 icon="mdi:shield-lock-outline"
-                class="size-[18px] text-[var(--el-text-color-secondary)]"
+                class="size-[18px] text-(--el-text-color-secondary)"
               />
             </template>
           </ElInput>
@@ -102,8 +102,8 @@
       <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 }"
+            class="relative z-2 overflow-hidden select-none rounded-lg border border-transparent tad-300"
+            :class="{ 'border-[#FF4E4F]!': !isPassing && isClickPass }"
           >
             <FaDragVerify
               ref="dragVerifyRef"
@@ -117,7 +117,7 @@
             />
           </div>
           <p
-            class="absolute top-0 z-[1] mt-2 px-px text-xs text-[#f56c6c] tad-300"
+            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") }}
@@ -131,7 +131,7 @@
           <ElLink
             type="primary"
             underline="never"
-            class="inline-flex items-center text-sm !leading-[inherit]"
+            class="inline-flex items-center text-sm leading-[inherit]!"
             @click="$emit('forget')"
           >
             {{ $t("login.forgetPwd") }}
@@ -140,7 +140,7 @@
 
         <div>
           <ElButton
-            class="h-11 w-full !rounded-lg text-base font-medium"
+            class="h-11 w-full rounded-lg! text-base font-medium"
             type="primary"
             :loading="loading"
             v-ripple
@@ -161,9 +161,9 @@
       </div>
     </ElForm>
 
-    <LoginThirdPartySection @oauth="$emit('oauth', $event)" />
+    <FaLoginThirdPartySection @oauth="$emit('oauth', $event)" />
 
-    <LoginAuthLinkRow
+    <FaLoginAuthLinkRow
       :hint="$t('login.noAccount')"
       :link-text="$t('login.register')"
       @link="$emit('register')"
@@ -175,12 +175,11 @@
 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";
+import type { Account, AccountKey } from "@views/module_system/auth/login/types";
+
+const loginForm = defineModel<LoginFormData>("loginForm", { required: true });
 
 defineProps<{
-  loginForm: LoginFormData;
   rules: FormRules;
   captchaState: CaptchaInfo;
   codeLoading: boolean;
@@ -224,5 +223,5 @@ defineExpose({
 </script>
 
 <style scoped>
-@import "../style.css";
+@import "@styles/fa-login.css";
 </style>
diff --git a/frontend/web/src/views/module_system/auth/login/components/LoginAuthLinkRow.vue b/frontend/web/src/components/views/fa-login/FaLoginAuthLinkRow.vue
similarity index 78%
rename from frontend/web/src/views/module_system/auth/login/components/LoginAuthLinkRow.vue
rename to frontend/web/src/components/views/fa-login/FaLoginAuthLinkRow.vue
index 7dd438a6..e86c210b 100644
--- a/frontend/web/src/views/module_system/auth/login/components/LoginAuthLinkRow.vue
+++ b/frontend/web/src/components/views/fa-login/FaLoginAuthLinkRow.vue
@@ -3,11 +3,11 @@
   <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>
+    <span class="inline-flex items-center text-(--el-text-color-secondary)">{{ hint }}</span>
     <ElLink
       type="primary"
       underline="never"
-      class="inline-flex items-center font-medium !leading-[inherit]"
+      class="inline-flex items-center font-medium leading-[inherit]!"
       @click="$emit('link')"
     >
       {{ linkText }}
diff --git a/frontend/web/src/components/views/fa-login/LoginCenterBackdrop.vue b/frontend/web/src/components/views/fa-login/FaLoginCenterBackdrop.vue
similarity index 96%
rename from frontend/web/src/components/views/fa-login/LoginCenterBackdrop.vue
rename to frontend/web/src/components/views/fa-login/FaLoginCenterBackdrop.vue
index 6dafbd8a..c683c45e 100644
--- a/frontend/web/src/components/views/fa-login/LoginCenterBackdrop.vue
+++ b/frontend/web/src/components/views/fa-login/FaLoginCenterBackdrop.vue
@@ -14,7 +14,6 @@
 
 <script setup lang="ts">
 import loginIcon from "@imgs/svg/login_icon.svg";
-import FaThemeSvg from "@/components/theme/fa-theme-svg/index.vue";
 
 defineOptions({ name: "LoginCenterBackdrop" });
 
diff --git a/frontend/web/src/views/module_system/auth/login/components/LoginForgetPanel.vue b/frontend/web/src/components/views/fa-login/FaLoginForgetPanel.vue
similarity index 93%
rename from frontend/web/src/views/module_system/auth/login/components/LoginForgetPanel.vue
rename to frontend/web/src/components/views/fa-login/FaLoginForgetPanel.vue
index e36cf992..8f557bac 100644
--- a/frontend/web/src/views/module_system/auth/login/components/LoginForgetPanel.vue
+++ b/frontend/web/src/components/views/fa-login/FaLoginForgetPanel.vue
@@ -62,7 +62,7 @@
       </ElTooltip>
       <div class="mt-6">
         <ElButton
-          class="h-11 w-full min-w-0 !rounded-lg text-base font-medium"
+          class="h-11 w-full min-w-0 rounded-lg! text-base font-medium"
           type="primary"
           :loading="forgetLoading"
           v-ripple
@@ -73,7 +73,7 @@
       </div>
     </ElForm>
 
-    <LoginAuthLinkRow
+    <FaLoginAuthLinkRow
       :hint="$t('login.thinkOfPasswd')"
       :link-text="$t('login.backLoginBtnText')"
       @link="$emit('toLogin')"
@@ -85,10 +85,10 @@
 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";
+
+const forgetForm = defineModel<ForgetPasswordForm>("forgetForm", { required: true });
 
 defineProps<{
-  forgetForm: ForgetPasswordForm;
   forgetRules: FormRules<ForgetPasswordForm>;
   formKey: number | string;
   forgetLoading: boolean;
@@ -112,5 +112,5 @@ defineExpose({
 </script>
 
 <style scoped>
-@import "../style.css";
+@import "@styles/fa-login.css";
 </style>
diff --git a/frontend/web/src/components/views/fa-login/LoginLeftView.vue b/frontend/web/src/components/views/fa-login/FaLoginLeftView.vue
similarity index 98%
rename from frontend/web/src/components/views/fa-login/LoginLeftView.vue
rename to frontend/web/src/components/views/fa-login/FaLoginLeftView.vue
index 59672f3c..cbff56c8 100644
--- a/frontend/web/src/components/views/fa-login/LoginLeftView.vue
+++ b/frontend/web/src/components/views/fa-login/FaLoginLeftView.vue
@@ -90,10 +90,8 @@
 import { computed } from "vue";
 import AppConfig from "@/config";
 import loginIcon from "@imgs/svg/login_icon.svg";
-import { useConfigStore } from "@stores/modules/config.store";
-import { themeAnimation } from "@utils/ui";
-import FaLogo from "@/components/base/fa-logo/index.vue";
-import FaThemeSvg from "@/components/theme/fa-theme-svg/index.vue";
+import { useConfigStore } from "@stores";
+import { themeAnimation } from "@utils";
 
 defineProps<{
   hideContent?: boolean;
diff --git a/frontend/web/src/views/module_system/auth/login/components/LoginMobilePanel.vue b/frontend/web/src/components/views/fa-login/FaLoginMobilePanel.vue
similarity index 96%
rename from frontend/web/src/views/module_system/auth/login/components/LoginMobilePanel.vue
rename to frontend/web/src/components/views/fa-login/FaLoginMobilePanel.vue
index 67c47ce4..6d186389 100644
--- a/frontend/web/src/views/module_system/auth/login/components/LoginMobilePanel.vue
+++ b/frontend/web/src/components/views/fa-login/FaLoginMobilePanel.vue
@@ -50,14 +50,14 @@
       <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"
+          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"
+          class="login-secondary-btn h-11 w-full min-w-0 rounded-lg! text-base font-medium"
           plain
           @click="$emit('back')"
         >
@@ -66,7 +66,7 @@
       </div>
     </div>
 
-    <LoginAuthLinkRow
+    <FaLoginAuthLinkRow
       :hint="$t('login.noAccount')"
       :link-text="$t('login.register')"
       @link="$emit('register')"
@@ -77,7 +77,6 @@
 <script setup lang="ts">
 import { Iphone } from "@element-plus/icons-vue";
 import { ElMessage } from "element-plus";
-import LoginAuthLinkRow from "./LoginAuthLinkRow.vue";
 
 defineEmits<{ back: []; register: [] }>();
 
@@ -197,7 +196,7 @@ onBeforeUnmount(() => {
 </script>
 
 <style scoped lang="scss">
-@import "../style.css";
+@import "@styles/fa-login.css";
 
 .login-mobile-flow {
   margin-top: 1rem;
diff --git a/frontend/web/src/views/module_system/auth/login/components/LoginQrPanel.vue b/frontend/web/src/components/views/fa-login/FaLoginQrPanel.vue
similarity index 89%
rename from frontend/web/src/views/module_system/auth/login/components/LoginQrPanel.vue
rename to frontend/web/src/components/views/fa-login/FaLoginQrPanel.vue
index 3ce18f06..47d7de30 100644
--- a/frontend/web/src/views/module_system/auth/login/components/LoginQrPanel.vue
+++ b/frontend/web/src/components/views/fa-login/FaLoginQrPanel.vue
@@ -9,14 +9,14 @@
       </div>
 
       <p
-        class="login-qr-hint mt-4 max-w-[280px] text-center text-sm leading-relaxed text-[var(--el-text-color-secondary)]"
+        class="login-qr-hint mt-4 max-w-[280px] text-center text-sm leading-relaxed text-(--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"
+          class="login-secondary-btn h-11 w-full min-w-0 rounded-lg! text-base font-medium"
           plain
           @click="$emit('back')"
         >
@@ -25,7 +25,7 @@
       </div>
     </div>
 
-    <LoginAuthLinkRow
+    <FaLoginAuthLinkRow
       :hint="$t('login.noAccount')"
       :link-text="$t('login.register')"
       @link="$emit('register')"
@@ -36,7 +36,6 @@
 <script setup lang="ts">
 import QrcodeVue from "qrcode.vue";
 import type { Level, RenderAs } from "qrcode.vue";
-import LoginAuthLinkRow from "./LoginAuthLinkRow.vue";
 
 defineEmits<{ back: []; register: [] }>();
 
@@ -66,7 +65,7 @@ const qrPayload = computed(() => {
 </script>
 
 <style scoped lang="scss">
-@import "../style.css";
+@import "@styles/fa-login.css";
 
 .login-qr-flow {
   margin-top: 1rem;
diff --git a/frontend/web/src/views/module_system/auth/login/components/LoginRegisterPanel.vue b/frontend/web/src/components/views/fa-login/FaLoginRegisterPanel.vue
similarity index 94%
rename from frontend/web/src/views/module_system/auth/login/components/LoginRegisterPanel.vue
rename to frontend/web/src/components/views/fa-login/FaLoginRegisterPanel.vue
index 62f0da6b..aaa8cba4 100644
--- a/frontend/web/src/views/module_system/auth/login/components/LoginRegisterPanel.vue
+++ b/frontend/web/src/components/views/fa-login/FaLoginRegisterPanel.vue
@@ -78,7 +78,7 @@
       </ElFormItem>
       <div class="mt-6">
         <ElButton
-          class="h-11 w-full !rounded-lg text-base font-medium"
+          class="h-11 w-full rounded-lg! text-base font-medium"
           type="primary"
           :loading="registerLoading"
           v-ripple
@@ -89,7 +89,7 @@
       </div>
     </ElForm>
 
-    <LoginAuthLinkRow
+    <FaLoginAuthLinkRow
       :hint="$t('login.haveAccount')"
       :link-text="$t('login.backLoginBtnText')"
       @link="$emit('toLogin')"
@@ -101,10 +101,10 @@
 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";
+
+const registerForm = defineModel<RegisterForm>("registerForm", { required: true });
 
 defineProps<{
-  registerForm: RegisterForm;
   registerRules: FormRules<RegisterForm>;
   formKey: number | string;
   registerLoading: boolean;
@@ -134,5 +134,5 @@ defineExpose({
 </script>
 
 <style scoped>
-@import "../style.css";
+@import "@styles/fa-login.css";
 </style>
diff --git a/frontend/web/src/views/module_system/auth/login/components/LoginThirdPartySection.vue b/frontend/web/src/components/views/fa-login/FaLoginThirdPartySection.vue
similarity index 100%
rename from frontend/web/src/views/module_system/auth/login/components/LoginThirdPartySection.vue
rename to frontend/web/src/components/views/fa-login/FaLoginThirdPartySection.vue
diff --git a/frontend/web/src/views/module_system/auth/composables/useLoginPanelAlign.ts b/frontend/web/src/components/views/fa-login/useLoginPanelAlign.ts
similarity index 100%
rename from frontend/web/src/views/module_system/auth/composables/useLoginPanelAlign.ts
rename to frontend/web/src/components/views/fa-login/useLoginPanelAlign.ts
diff --git a/frontend/web/src/components/views/fa-result-page/index.vue b/frontend/web/src/components/views/fa-result-page/index.vue
index 24f3a340..769f4a54 100644
--- a/frontend/web/src/components/views/fa-result-page/index.vue
+++ b/frontend/web/src/components/views/fa-result-page/index.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="page-content box-border !px-20 py-3.5 text-center max-md:!px-5" :class="type">
+  <div class="page-content box-border px-20! py-3.5 text-center max-md:px-5!" :class="type">
     <FaSvgIcon
-      class="icon size-22 p-2 mt-16 block rounded-full !text-white"
+      class="icon size-22 p-2 mt-16 block rounded-full text-white!"
       :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">
+    <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>
@@ -21,8 +21,6 @@
 </template>
 
 <script setup lang="ts">
-import FaSvgIcon from "@/components/base/fa-svg-icon/index.vue";
-
 defineOptions({ name: "FaResultPage" });
 
 // 显式声明插槽类型
diff --git a/frontend/web/src/components/widget/fa-icon-button/index.vue b/frontend/web/src/components/widget/fa-icon-button/index.vue
index 843b4700..34a12495 100644
--- a/frontend/web/src/components/widget/fa-icon-button/index.vue
+++ b/frontend/web/src/components/widget/fa-icon-button/index.vue
@@ -10,8 +10,6 @@
 </template>
 
 <script lang="ts" setup>
-import FaSvgIcon from "@/components/base/fa-svg-icon/index.vue";
-
 defineOptions({ name: "FaIconButton" });
 
 interface Props {
diff --git a/frontend/web/src/config/modules/fastEnter.ts b/frontend/web/src/config/modules/fastEnter.ts
index 05237f86..9fa778b5 100644
--- a/frontend/web/src/config/modules/fastEnter.ts
+++ b/frontend/web/src/config/modules/fastEnter.ts
@@ -2,7 +2,7 @@
  * 快速入口配置
  * 包含：应用列表、快速链接等配置
  */
-import { WEB_LINKS } from "@utils/constants";
+import { WEB_LINKS } from "@utils";
 import type { FastEnterConfig } from "@/types/config";
 
 const fastEnterConfig: FastEnterConfig = {
diff --git a/frontend/web/src/directives/core/roles.ts b/frontend/web/src/directives/core/roles.ts
index b2ed895e..e56aa54d 100644
--- a/frontend/web/src/directives/core/roles.ts
+++ b/frontend/web/src/directives/core/roles.ts
@@ -44,7 +44,7 @@
  * @author FastapiAdmin Team
  */
 
-import { useUserStore } from "@stores/modules/user.store";
+import { useUserStore } from "@stores";
 import { App, Directive, DirectiveBinding } from "vue";
 
 export type RolesDirective = Directive<HTMLElement, string | string[]>;
diff --git a/frontend/web/src/hooks/core/useAppBootstrap.ts b/frontend/web/src/hooks/core/useAppBootstrap.ts
index 8920d40e..102d3ce7 100644
--- a/frontend/web/src/hooks/core/useAppBootstrap.ts
+++ b/frontend/web/src/hooks/core/useAppBootstrap.ts
@@ -5,9 +5,7 @@
  * 保持 App.vue 的 onMounted 为单行调用。
  */
 import { useSiteConfig } from "@/hooks/core/useSiteConfig";
-import { checkStorageCompatibility } from "@utils/storage";
-import { toggleTransition } from "@utils/ui";
-import { systemUpgrade } from "@utils/sys";
+import { checkStorageCompatibility, toggleTransition, systemUpgrade } from "@utils";
 
 export function useAppBootstrap() {
   const { initSiteConfig } = useSiteConfig();
diff --git a/frontend/web/src/hooks/core/useAuth.ts b/frontend/web/src/hooks/core/useAuth.ts
index 4bbc007d..3c1d50a2 100644
--- a/frontend/web/src/hooks/core/useAuth.ts
+++ b/frontend/web/src/hooks/core/useAuth.ts
@@ -32,7 +32,7 @@
 
 import { useRoute } from "vue-router";
 import { storeToRefs } from "pinia";
-import { useUserStore } from "@stores/modules/user.store";
+import { useUserStore } from "@stores";
 import { useAppMode } from "@/hooks/core/useAppMode";
 import type { AppRouteRecord } from "@/types/router";
 import { ROLE_ROOT } from "@/constants";
diff --git a/frontend/web/src/hooks/core/useCeremony.ts b/frontend/web/src/hooks/core/useCeremony.ts
index 67228641..3558f748 100644
--- a/frontend/web/src/hooks/core/useCeremony.ts
+++ b/frontend/web/src/hooks/core/useCeremony.ts
@@ -48,12 +48,11 @@
 import { useTimeoutFn, useIntervalFn, useDateFormat } from "@vueuse/core";
 import { storeToRefs } from "pinia";
 import { computed } from "vue";
-import { useSettingsStore } from "@stores/modules/setting.store";
-import { mittBus } from "@utils/sys";
+import { useSettingsStore } from "@stores";
+import { mittBus, formatToDate } from "@utils";
 import { festivalConfigList } from "@/config/modules/festival";
 import { buildBuiltinSolarFestivals } from "@/config/modules/festival.builtin";
 import type { FestivalConfig } from "@/types/config";
-import { formatToDate } from "@utils/common";
 
 /** 手动配置 + 内置公历节日合并项（内部排序用） */
 type TaggedFestival = FestivalConfig & { _origin: "manual" | "builtin" };
diff --git a/frontend/web/src/hooks/core/useChart.ts b/frontend/web/src/hooks/core/useChart.ts
index 3a91ea2d..f7518379 100644
--- a/frontend/web/src/hooks/core/useChart.ts
+++ b/frontend/web/src/hooks/core/useChart.ts
@@ -51,8 +51,8 @@
 
 import { echarts, type EChartsOption } from "@/plugins/echarts";
 import { storeToRefs } from "pinia";
-import { useSettingsStore } from "@stores/modules/setting.store";
-import { getCssVar } from "@utils/ui";
+import { useSettingsStore } from "@stores";
+import { getCssVar } from "@utils";
 import type { BaseChartProps, ChartThemeConfig, UseChartOptions } from "@/types/component/chart";
 
 // 图表主题配置
diff --git a/frontend/web/src/hooks/core/useCommon.ts b/frontend/web/src/hooks/core/useCommon.ts
index d106d63e..c9e28a1d 100644
--- a/frontend/web/src/hooks/core/useCommon.ts
+++ b/frontend/web/src/hooks/core/useCommon.ts
@@ -3,8 +3,7 @@
  */
 
 import { computed } from "vue";
-import { useMenuStore } from "@stores/modules/menu.store";
-import { useSettingsStore } from "@stores/modules/setting.store";
+import { useMenuStore, useSettingsStore } from "@stores";
 
 export function useCommon() {
   const menuStore = useMenuStore();
diff --git a/frontend/web/src/hooks/core/useConfirm.ts b/frontend/web/src/hooks/core/useConfirm.ts
index 91a3a5d5..f2d7a2b0 100644
--- a/frontend/web/src/hooks/core/useConfirm.ts
+++ b/frontend/web/src/hooks/core/useConfirm.ts
@@ -2,6 +2,8 @@
  * 确认弹窗 —— 封装 ElMessageBox.confirm 常用配置
  */
 
+import { ElMessageBox } from "element-plus";
+
 /** 删除确认 */
 export async function confirmDelete(message = "确认删除该项数据?"): Promise<void> {
   await ElMessageBox.confirm(message, "警告", {
diff --git a/frontend/web/src/hooks/core/useHeaderBar.ts b/frontend/web/src/hooks/core/useHeaderBar.ts
index e58ead41..99f31a7b 100644
--- a/frontend/web/src/hooks/core/useHeaderBar.ts
+++ b/frontend/web/src/hooks/core/useHeaderBar.ts
@@ -17,7 +17,7 @@
 
 import { computed } from "vue";
 import { storeToRefs } from "pinia";
-import { useSettingsStore } from "@stores/modules/setting.store";
+import { useSettingsStore } from "@stores";
 import { headerBarConfig } from "@/config/modules/headerBar";
 import { HeaderBarFeatureConfig } from "@/types";
 
diff --git a/frontend/web/src/hooks/core/useSiteConfig.ts b/frontend/web/src/hooks/core/useSiteConfig.ts
index 0ba99037..c9956dd4 100644
--- a/frontend/web/src/hooks/core/useSiteConfig.ts
+++ b/frontend/web/src/hooks/core/useSiteConfig.ts
@@ -8,7 +8,7 @@
  */
 
 import { watch } from "vue";
-import { useConfigStore } from "@stores/modules/config.store";
+import { useConfigStore } from "@stores";
 
 const updateFavicon = (url: string) => {
   const link = document.querySelector<HTMLLinkElement>('link[rel="icon"]');
diff --git a/frontend/web/src/hooks/core/useTable.ts b/frontend/web/src/hooks/core/useTable.ts
index 8fd7851a..3a201781 100644
--- a/frontend/web/src/hooks/core/useTable.ts
+++ b/frontend/web/src/hooks/core/useTable.ts
@@ -30,20 +30,18 @@ import type { ColumnOption } from "@/types/component";
 import {
   TableCache,
   CacheInvalidationStrategy,
-  type ApiResponse as TableApiResponse,
-} from "@utils/table";
-import {
-  type TableError,
   defaultResponseAdapter,
   extractTableData,
   updatePaginationFromResponse,
   createSmartDebounce,
   createErrorHandler,
-} from "@utils/table";
-import { tableConfig } from "@utils/table";
+  tableConfig,
+  type ApiResponse,
+  type TableError,
+} from "@utils";
 
 /** 跨组件实例：同一 dedupeKey 仅一条进行中的网络请求 */
-const globalListNetworkInflight = new Map<string, Promise<TableApiResponse<unknown>>>();
+const globalListNetworkInflight = new Map<string, Promise<ApiResponse<unknown>>>();
 
 // --- 类型推导（由 apiFn / 响应类型反推记录类型） ---
 type InferApiParams<T> = T extends (params: infer P) => any ? P : never;
@@ -101,7 +99,7 @@ export interface UseTableConfig<
     /** 数据转换函数 */
     dataTransformer?: (data: TRecord[]) => TRecord[];
     /** 响应数据适配器 */
-    responseAdapter?: (response: TResponse) => TableApiResponse<TRecord>;
+    responseAdapter?: (response: TResponse) => ApiResponse<TRecord>;
   };
 
   // 性能优化
@@ -119,11 +117,11 @@ export interface UseTableConfig<
   // 生命周期钩子
   hooks?: {
     /** 数据加载成功回调（仅网络请求成功时触发） */
-    onSuccess?: (data: TRecord[], response: TableApiResponse<TRecord>) => void;
+    onSuccess?: (data: TRecord[], response: ApiResponse<TRecord>) => void;
     /** 错误处理回调 */
     onError?: (error: TableError) => void;
     /** 缓存命中回调（从缓存获取数据时触发） */
-    onCacheHit?: (data: TRecord[], response: TableApiResponse<TRecord>) => void;
+    onCacheHit?: (data: TRecord[], response: ApiResponse<TRecord>) => void;
     /** 加载状态变化回调 */
     onLoading?: (loading: boolean) => void;
     /** 重置表单回调函数 */
@@ -216,7 +214,7 @@ function useTableImpl<TApiFn extends (params: any) => Promise<any>>(
 
   /** 同参且尚未结束的请求共用一个 Promise，避免并发重复打接口 */
   let inFlightDedupeKey: string | null = null;
-  let inFlightDedupePromise: Promise<TableApiResponse<TRecord>> | null = null;
+  let inFlightDedupePromise: Promise<ApiResponse<TRecord>> | null = null;
 
   /** KeepAlive 失活时不再发请求（组件侧 cancelRequest 会 abort） */
   let tableViewActive = true;
@@ -322,7 +320,7 @@ function useTableImpl<TApiFn extends (params: any) => Promise<any>>(
    * 全局去重时每个参与合并的实例都会各自调用一次。
    */
   function commitNetworkSuccess(
-    standardResponse: TableApiResponse<TRecord>,
+    standardResponse: ApiResponse<TRecord>,
     paramsForCache: TParams,
     useCacheFlag: boolean
   ): void {
@@ -361,7 +359,7 @@ function useTableImpl<TApiFn extends (params: any) => Promise<any>>(
   const fetchData = async (
     params?: Partial<TParams>,
     useCache = enableCache
-  ): Promise<TableApiResponse<TRecord>> => {
+  ): Promise<ApiResponse<TRecord>> => {
     let requestParams = Object.assign(
       {},
       searchParams,
@@ -392,7 +390,7 @@ function useTableImpl<TApiFn extends (params: any) => Promise<any>>(
       loadingState.value = "loading";
       error.value = null;
       try {
-        const standardResponse = (await sharedGlobal) as TableApiResponse<TRecord>;
+        const standardResponse = (await sharedGlobal) as ApiResponse<TRecord>;
         commitNetworkSuccess(standardResponse, requestParams, useCache);
         return standardResponse;
       } catch (err) {
@@ -413,7 +411,7 @@ function useTableImpl<TApiFn extends (params: any) => Promise<any>>(
         total: pagination.total,
         current: pagination.current,
         size: pagination.size,
-      } as TableApiResponse<TRecord>;
+      } as ApiResponse<TRecord>;
     }
 
     if (abortController) {
@@ -454,7 +452,7 @@ function useTableImpl<TApiFn extends (params: any) => Promise<any>>(
 
       inFlightDedupeKey = dedupeKey;
 
-      const networkPromise = (async (): Promise<TableApiResponse<TRecord>> => {
+      const networkPromise = (async (): Promise<ApiResponse<TRecord>> => {
         try {
           logger.log("HTTP 请求", dedupeKey);
           const response = await apiFn(requestParams);
@@ -475,10 +473,7 @@ function useTableImpl<TApiFn extends (params: any) => Promise<any>>(
         }
       })();
 
-      globalListNetworkInflight.set(
-        dedupeKey,
-        networkPromise as Promise<TableApiResponse<unknown>>
-      );
+      globalListNetworkInflight.set(dedupeKey, networkPromise as Promise<ApiResponse<unknown>>);
       networkPromise.finally(() => {
         globalListNetworkInflight.delete(dedupeKey);
       });
@@ -512,7 +507,7 @@ function useTableImpl<TApiFn extends (params: any) => Promise<any>>(
   async function fetchDataQuiet(
     params?: Partial<TParams>,
     useCache = enableCache
-  ): Promise<TableApiResponse<TRecord> | void> {
+  ): Promise<ApiResponse<TRecord> | void> {
     try {
       return await fetchData(params, useCache);
     } catch {
@@ -524,9 +519,7 @@ function useTableImpl<TApiFn extends (params: any) => Promise<any>>(
   const getData = (params?: Partial<TParams>) => fetchDataQuiet(params);
 
   /** 搜索场景：回到第一页、清当前条件缓存，再拉取（禁用缓存） */
-  const getDataByPage = async (
-    params?: Partial<TParams>
-  ): Promise<TableApiResponse<TRecord> | void> => {
+  const getDataByPage = async (params?: Partial<TParams>): Promise<ApiResponse<TRecord> | void> => {
     pagination.current = 1;
     (searchParams as Record<string, unknown>)[pageKey] = 1;
 
@@ -841,6 +834,10 @@ function useTableImpl<TApiFn extends (params: any) => Promise<any>>(
   };
 }
 
-export { CacheInvalidationStrategy } from "@utils/table";
-export type { ApiResponse, CacheItem } from "@utils/table";
-export type { BaseRequestParams, TableError } from "@utils/table";
+export type {
+  CacheInvalidationStrategy,
+  ApiResponse,
+  CacheItem,
+  BaseRequestParams,
+  TableError,
+} from "@utils";
diff --git a/frontend/web/src/hooks/core/useTheme.ts b/frontend/web/src/hooks/core/useTheme.ts
index ac5f329e..f64ab438 100644
--- a/frontend/web/src/hooks/core/useTheme.ts
+++ b/frontend/web/src/hooks/core/useTheme.ts
@@ -31,11 +31,11 @@
  * @author FastapiAdmin Team
  */
 
-import { useSettingsStore } from "@stores/modules/setting.store";
+import { useSettingsStore } from "@stores";
 import { SystemThemeEnum } from "@/enums/appEnum";
 import AppConfig from "@/config";
 import { SystemThemeTypes } from "@/types/store";
-import { getDarkColor, getLightColor, setElementThemeColor } from "@utils/ui";
+import { getDarkColor, getLightColor, setElementThemeColor } from "@utils";
 import { usePreferredDark } from "@vueuse/core";
 import { watch } from "vue";
 
diff --git a/frontend/web/src/main.ts b/frontend/web/src/main.ts
index 03f0b9a4..2f4bf604 100755
--- a/frontend/web/src/main.ts
+++ b/frontend/web/src/main.ts
@@ -11,7 +11,7 @@ import "animate.css";
 // ---------------------------------------------------------------------------
 import App from "./App.vue";
 import { createApp } from "vue";
-import { printConsoleBanner } from "@utils/sys";
+import { printConsoleBanner } from "@utils";
 import { initPlugins } from "@/plugins";
 
 /**
diff --git a/frontend/web/src/plugins/index.ts b/frontend/web/src/plugins/index.ts
index 99ffd1c8..56d918c9 100644
--- a/frontend/web/src/plugins/index.ts
+++ b/frontend/web/src/plugins/index.ts
@@ -14,7 +14,7 @@ import { initGlobDirectives } from "@/directives";
 import { initI18n } from "@/locales";
 import { initRouter } from "@/router";
 import { initStore } from "@stores";
-import { initErrorHandle } from "@utils/sys";
+import { initErrorHandle } from "@utils";
 import { initCodeMirror } from "./codemirror";
 import { initElementPlus } from "./element-plus";
 import { initElIcons } from "./icons";
diff --git a/frontend/web/src/router/MenuProcessor.ts b/frontend/web/src/router/MenuProcessor.ts
index d5021ed8..161c9b7b 100644
--- a/frontend/web/src/router/MenuProcessor.ts
+++ b/frontend/web/src/router/MenuProcessor.ts
@@ -1,7 +1,7 @@
 import type { AppRouteRecord, RouteMeta } from "@/types/router";
 import type { UserInfo } from "@/api/module_system/user";
 import type { MenuTable } from "@/api/module_system/menu";
-import { useUserStore } from "@stores/modules/user.store";
+import { useUserStore } from "@stores";
 import { useAppMode } from "@/hooks/core/useAppMode";
 
 import {
@@ -312,11 +312,11 @@ export class MenuProcessor {
   private isNavigableRoute(route: AppRouteRecord): boolean {
     return Boolean(
       route.path &&
-        route.path !== "/" &&
-        !route.meta?.link &&
-        route.meta?.isIframe !== true &&
-        route.component &&
-        route.component !== ""
+      route.path !== "/" &&
+      !route.meta?.link &&
+      route.meta?.isIframe !== true &&
+      route.component &&
+      route.component !== ""
     );
   }
 
diff --git a/frontend/web/src/router/afterEach.ts b/frontend/web/src/router/afterEach.ts
index ce0fe74c..4f6b9a6d 100644
--- a/frontend/web/src/router/afterEach.ts
+++ b/frontend/web/src/router/afterEach.ts
@@ -2,11 +2,10 @@
  * 路由后置守卫：滚动置顶、结束 NProgress、关闭 beforeEach 开启的全局 loading。
  */
 import { nextTick } from "vue";
-import { useSettingsStore } from "@stores/modules/setting.store";
+import { useSettingsStore } from "@stores";
 import { Router } from "vue-router";
-import { NProgress } from "@utils/ui";
 import { useCommon } from "@/hooks/core/useCommon";
-import { loadingService } from "@utils/ui";
+import { NProgress, loadingService } from "@utils";
 
 /** 防止重复注册 afterEach（与 beforeEach 同理） */
 let afterEachGuardRegistered = false;
diff --git a/frontend/web/src/router/beforeEach.ts b/frontend/web/src/router/beforeEach.ts
index 9b6f92e5..54fc0272 100644
--- a/frontend/web/src/router/beforeEach.ts
+++ b/frontend/web/src/router/beforeEach.ts
@@ -22,21 +22,22 @@
 import type { AppRouteRecord } from "@/types/router";
 import type { Router, RouteLocationNormalized } from "vue-router";
 import { nextTick } from "vue";
-import { NProgress } from "@utils/ui";
-import { useSettingsStore } from "@stores/modules/setting.store";
-import { useUserStore } from "@stores/modules/user.store";
-import { useMenuStore } from "@stores/modules/menu.store";
-import { setWorktab } from "@utils/navigation";
-import { setPageTitle } from "@utils/navigation";
+import { useSettingsStore, useUserStore, useMenuStore, useWorktabStore } from "@stores";
 import { IframeRouteManager, ROUTE_PATH_LOGIN_ALT, staticRoutes } from "./staticRoutes";
-import { loadingService } from "@utils/ui";
 import { useCommon } from "@/hooks/core/useCommon";
-import { useWorktabStore } from "@stores/modules/worktab.store";
 import { UserAPI } from "@/api/module_system/user";
-import { ApiStatus, isHttpError } from "@utils/http";
+import {
+  NProgress,
+  setWorktab,
+  setPageTitle,
+  loadingService,
+  ApiStatus,
+  isHttpError,
+  resetStorageInvalidated,
+  checkStorageInvalidated,
+} from "@utils";
 import { RouteRegistry } from "./dynamicRoutes";
 import { MenuProcessor } from "./MenuProcessor";
-import { resetStorageInvalidated, checkStorageInvalidated } from "@utils/storage";
 
 // --- 模块级单例与守卫状态 ---
 
@@ -185,7 +186,14 @@ function handleLoginStatus(
   to: RouteLocationNormalized,
   userStore: ReturnType<typeof useUserStore>
 ): Record<string, unknown> | undefined {
-  if (userStore.isLogin || isLoginRoute(to) || isAnonymousPublicPath(to.path)) {
+  if (userStore.isLogin) {
+    if (isLoginRoute(to)) {
+      return { path: "/", replace: true };
+    }
+    return undefined;
+  }
+
+  if (isLoginRoute(to) || isAnonymousPublicPath(to.path)) {
     return undefined;
   }
 
diff --git a/frontend/web/src/router/staticRoutes.ts b/frontend/web/src/router/staticRoutes.ts
index c75ba85f..8b796a0e 100644
--- a/frontend/web/src/router/staticRoutes.ts
+++ b/frontend/web/src/router/staticRoutes.ts
@@ -6,7 +6,7 @@
  *
  * 动态路由由 `beforeEach.ts` → `RouteRegistry` 在登录后根据不同角色的菜单列表动态 `addRoute`。
  */
-import type { AppRouteRecordRaw } from "@utils/navigation";
+import type { AppRouteRecordRaw } from "@utils";
 import type { AppRouteRecord, RouteMeta } from "@/types/router";
 import { defineComponent, h, onMounted, ref } from "vue";
 import type { RouteRecordRaw } from "vue-router";
diff --git a/frontend/web/src/store/modules/setting.store.ts b/frontend/web/src/store/modules/setting.store.ts
index 968bd194..9990ba31 100644
--- a/frontend/web/src/store/modules/setting.store.ts
+++ b/frontend/web/src/store/modules/setting.store.ts
@@ -7,11 +7,16 @@ 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 { formatToDate } from "@utils/common";
-import { StorageConfig } from "@utils/storage";
 import { SETTING_DEFAULT_CONFIG } from "@/config/setting";
-import { applyTheme, generateThemeColors, toggleDarkMode, toggleSidebarColor } from "@utils/ui";
+import {
+  setElementThemeColor,
+  formatToDate,
+  StorageConfig,
+  applyTheme,
+  generateThemeColors,
+  toggleDarkMode,
+  toggleSidebarColor,
+} from "@utils";
 import { SETTINGS_KEYS } from "@/constants";
 import { useStorage } from "@vueuse/core";
 import { defaultSettings } from "@/config/setting";
diff --git a/frontend/web/src/store/modules/user.store.ts b/frontend/web/src/store/modules/user.store.ts
index 5bd1dda7..c6827f27 100755
--- a/frontend/web/src/store/modules/user.store.ts
+++ b/frontend/web/src/store/modules/user.store.ts
@@ -7,12 +7,10 @@ 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";
-import { StorageConfig } from "@utils/storage";
+import { Auth, setPageTitle, StorageConfig } from "@utils";
 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, useDictStore } from "@stores";
diff --git a/frontend/web/src/styles/core/tailwind.css b/frontend/web/src/styles/core/tailwind.css
index 01dfcccc..7f125c2f 100644
--- a/frontend/web/src/styles/core/tailwind.css
+++ b/frontend/web/src/styles/core/tailwind.css
@@ -2,6 +2,53 @@
 
 @custom-variant dark (&:where(.dark, .dark *));
 
+/* ==================== Tailwind Theme Configuration ==================== */
+@theme {
+  /* Box Color (Light: white / Dark: black) */
+  --color-box: var(--default-box-color);
+
+  /* System Theme Color */
+  --color-theme: var(--theme-color);
+
+  /* Hover Color */
+  --color-hover-color: var(--fa-hover-color);
+
+  /* Active Color */
+  --color-active-color: var(--fa-active-color);
+
+  /* Active Color */
+  --color-el-active-color: var(--fa-active-color);
+
+  /* ElementPlus Theme Colors */
+  --color-primary: var(--fa-primary);
+  --color-secondary: var(--fa-secondary);
+  --color-error: var(--fa-error);
+  --color-info: var(--fa-info);
+  --color-success: var(--fa-success);
+  --color-warning: var(--fa-warning);
+  --color-danger: var(--fa-danger);
+
+  /* Gray Scale Colors (Auto-adapts to dark mode) */
+  --color-g-100: var(--fa-gray-100);
+  --color-g-200: var(--fa-gray-200);
+  --color-g-300: var(--fa-gray-300);
+  --color-g-400: var(--fa-gray-400);
+  --color-g-500: var(--fa-gray-500);
+  --color-g-600: var(--fa-gray-600);
+  --color-g-700: var(--fa-gray-700);
+  --color-g-800: var(--fa-gray-800);
+  --color-g-900: var(--fa-gray-900);
+}
+
+/* ==================== Custom Border Radius Utilities ==================== */
+@utility rounded-custom-xs {
+  border-radius: calc(var(--custom-radius) / 2);
+}
+
+@utility rounded-custom-sm {
+  border-radius: calc(var(--custom-radius) / 2 + 2px);
+}
+
 /* ==================== Light Mode Variables ==================== */
 :root {
   /* Base Colors */
@@ -82,53 +129,6 @@
   --fa-el-active-color: #2e2e38;
 }
 
-/* ==================== Tailwind Theme Configuration ==================== */
-@theme {
-  /* Box Color (Light: white / Dark: black) */
-  --color-box: var(--default-box-color);
-
-  /* System Theme Color */
-  --color-theme: var(--theme-color);
-
-  /* Hover Color */
-  --color-hover-color: var(--fa-hover-color);
-
-  /* Active Color */
-  --color-active-color: var(--fa-active-color);
-
-  /* Active Color */
-  --color-el-active-color: var(--fa-active-color);
-
-  /* ElementPlus Theme Colors */
-  --color-primary: var(--fa-primary);
-  --color-secondary: var(--fa-secondary);
-  --color-error: var(--fa-error);
-  --color-info: var(--fa-info);
-  --color-success: var(--fa-success);
-  --color-warning: var(--fa-warning);
-  --color-danger: var(--fa-danger);
-
-  /* Gray Scale Colors (Auto-adapts to dark mode) */
-  --color-g-100: var(--fa-gray-100);
-  --color-g-200: var(--fa-gray-200);
-  --color-g-300: var(--fa-gray-300);
-  --color-g-400: var(--fa-gray-400);
-  --color-g-500: var(--fa-gray-500);
-  --color-g-600: var(--fa-gray-600);
-  --color-g-700: var(--fa-gray-700);
-  --color-g-800: var(--fa-gray-800);
-  --color-g-900: var(--fa-gray-900);
-}
-
-/* ==================== Custom Border Radius Utilities ==================== */
-@utility rounded-custom-xs {
-  border-radius: calc(var(--custom-radius) / 2);
-}
-
-@utility rounded-custom-sm {
-  border-radius: calc(var(--custom-radius) / 2 + 2px);
-}
-
 /* ==================== Custom Utility Classes ==================== */
 @layer utilities {
   /* Flexbox Layout Utilities */
@@ -159,23 +159,23 @@
 
   /* Border Utilities */
   .border-full-d {
-    @apply border border-[var(--default-border)];
+    @apply border border-(--default-border);
   }
 
   .border-b-d {
-    @apply border-b border-[var(--default-border)];
+    @apply border-b border-(--default-border);
   }
 
   .border-t-d {
-    @apply border-t border-[var(--default-border)];
+    @apply border-t border-(--default-border);
   }
 
   .border-l-d {
-    @apply border-l border-[var(--default-border)];
+    @apply border-l border-(--default-border);
   }
 
   .border-r-d {
-    @apply border-r border-[var(--default-border)];
+    @apply border-r border-(--default-border);
   }
 
   /* Cursor Utilities */
diff --git a/frontend/web/src/views/module_system/auth/login/style.css b/frontend/web/src/styles/fa-login.css
similarity index 100%
rename from frontend/web/src/views/module_system/auth/login/style.css
rename to frontend/web/src/styles/fa-login.css
diff --git a/frontend/web/src/components/layouts/fa-settings-panel/style.scss b/frontend/web/src/styles/fa-settings-panel.scss
old mode 100755
new mode 100644
similarity index 100%
rename from frontend/web/src/components/layouts/fa-settings-panel/style.scss
rename to frontend/web/src/styles/fa-settings-panel.scss
diff --git a/frontend/web/src/components/layouts/fa-menus/fa-sidebar-menu/theme.scss b/frontend/web/src/styles/fa-sidebar-menu-theme.scss
similarity index 100%
rename from frontend/web/src/components/layouts/fa-menus/fa-sidebar-menu/theme.scss
rename to frontend/web/src/styles/fa-sidebar-menu-theme.scss
diff --git a/frontend/web/src/components/layouts/fa-menus/fa-sidebar-menu/style.scss b/frontend/web/src/styles/fa-sidebar-menu.scss
old mode 100755
new mode 100644
similarity index 100%
rename from frontend/web/src/components/layouts/fa-menus/fa-sidebar-menu/style.scss
rename to frontend/web/src/styles/fa-sidebar-menu.scss
diff --git a/frontend/web/src/components/tables/fa-table/style.scss b/frontend/web/src/styles/fa-table.scss
similarity index 100%
rename from frontend/web/src/components/tables/fa-table/style.scss
rename to frontend/web/src/styles/fa-table.scss
diff --git a/frontend/web/src/components/forms/fa-wang-editor/style.scss b/frontend/web/src/styles/fa-wang-editor.scss
similarity index 100%
rename from frontend/web/src/components/forms/fa-wang-editor/style.scss
rename to frontend/web/src/styles/fa-wang-editor.scss
diff --git a/frontend/web/src/styles/index.scss b/frontend/web/src/styles/index.scss
index 251c9db1..a6aceeb2 100644
--- a/frontend/web/src/styles/index.scss
+++ b/frontend/web/src/styles/index.scss
@@ -24,3 +24,21 @@
 
 // CRUD 页面通用样式
 @use "./core/crud";
+
+// 布局组件样式
+@use "./layouts";
+
+// 侧边栏菜单样式
+@use "./fa-sidebar-menu";
+
+// 侧边栏菜单主题样式
+@use "./fa-sidebar-menu-theme";
+
+// 设置面板样式
+@use "./fa-settings-panel";
+
+// 表格组件样式
+@use "./fa-table";
+
+// 富文本编辑器样式
+@use "./fa-wang-editor";
diff --git a/frontend/web/src/components/layouts/style.scss b/frontend/web/src/styles/layouts.scss
similarity index 100%
rename from frontend/web/src/components/layouts/style.scss
rename to frontend/web/src/styles/layouts.scss
diff --git a/frontend/web/src/types/component/chart.ts b/frontend/web/src/types/component/chart.ts
index e6c2e3e3..7b719742 100644
--- a/frontend/web/src/types/component/chart.ts
+++ b/frontend/web/src/types/component/chart.ts
@@ -280,9 +280,7 @@ export interface MapChartProps extends BaseChartProps {
 
 // 双向堆叠柱状图 Props 接口（人口金字塔样式）
 export interface BidirectionalBarChartProps
-  extends BaseChartProps,
-    AxisDisplayProps,
-    InteractionProps {
+  extends BaseChartProps, AxisDisplayProps, InteractionProps {
   /** 正向数据（向上显示） */
   positiveData: number[];
   /** 负向数据（向下显示） */
diff --git a/frontend/web/src/types/global-components.d.ts b/frontend/web/src/types/global-components.d.ts
deleted file mode 100644
index ba5bc416..00000000
--- a/frontend/web/src/types/global-components.d.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * 全局组件 / API 类型声明（手动维护，不会被 unplugin 覆盖）
- * 仅用于 <script> 中通过 typeof / h() 等方式引用的组件和 API
- * 模板中使用的组件由 unplugin-vue-components 自动注册，无需在此声明
- */
-export {};
-
-declare global {
-  // ─── Fa 组件 ───
-  const FaButtonTable: (typeof import("./../components/forms/fa-button-table/index.vue"))["default"];
-  const FaForm: (typeof import("./../components/forms/fa-form/index.vue"))["default"];
-  const FaSearchBar: (typeof import("./../components/forms/fa-search-bar/index.vue"))["default"];
-  const FaSearchBarWithAudit: (typeof import("./../components/forms/fa-search-bar/FaSearchBarWithAudit.vue"))["default"];
-
-  // ─── 自定义组件 ───
-  const JsonPretty: (typeof import("./../components/others/fa-json-pretty/index.vue"))["default"];
-  const CopyButton: (typeof import("./../components/others/fa-copy-button/index.vue"))["default"];
-  const MenuRouteIcon: (typeof import("./../components/others/fa-menu-routeIcon/index.vue"))["default"];
-
-  // ─── Element Plus 组件（在 <script> 中通过 h() 使用） ───
-  const ElTag: (typeof import("element-plus/es"))["ElTag"];
-  const ElTooltip: (typeof import("element-plus/es"))["ElTooltip"];
-  const ElDropdown: (typeof import("element-plus/es"))["ElDropdown"];
-  const ElDropdownMenu: (typeof import("element-plus/es"))["ElDropdownMenu"];
-  const ElDropdownItem: (typeof import("element-plus/es"))["ElDropdownItem"];
-
-  // ─── Element Plus API ───
-  const ElMessageBox: (typeof import("element-plus/es"))["ElMessageBox"];
-}
diff --git a/frontend/web/src/utils/auth/index.ts b/frontend/web/src/utils/auth/index.ts
index 24b2740c..2ac30658 100644
--- a/frontend/web/src/utils/auth/index.ts
+++ b/frontend/web/src/utils/auth/index.ts
@@ -64,7 +64,7 @@ export class Auth {
 export { AUTH_KEYS };
 
 import { router } from "@/router";
-import { useUserStore } from "@stores/modules/user.store";
+import { useUserStore } from "@stores";
 import { ElMessage, ElNotification } from "element-plus";
 
 /** 登录页跳转进行中，合并并发调用，避免重复通知与重复路由 */
diff --git a/frontend/web/src/utils/download.ts b/frontend/web/src/utils/download.ts
index 6953ed17..afed8811 100644
--- a/frontend/web/src/utils/download.ts
+++ b/frontend/web/src/utils/download.ts
@@ -4,9 +4,7 @@
 import axios from "axios";
 import { ElLoading, ElMessage } from "element-plus";
 import { saveAs as fileSaverSaveAs } from "file-saver";
-import { Auth } from "@utils/auth";
-import { errorCode } from "@utils/constants";
-import { blobValidate } from "@utils/common";
+import { Auth, errorCode, blobValidate } from "@utils";
 
 const baseURL = import.meta.env.VITE_APP_BASE_API;
 let downloadLoadingInstance: any;
diff --git a/frontend/web/src/utils/http/index.ts b/frontend/web/src/utils/http/index.ts
index 0997f237..87f6b500 100644
--- a/frontend/web/src/utils/http/index.ts
+++ b/frontend/web/src/utils/http/index.ts
@@ -183,7 +183,7 @@ function onRefreshFailed() {
 
 // --- Axios 实例 ---------------------------------------------------------------
 
-const request: AxiosInstance = axios.create({
+export const request: AxiosInstance = axios.create({
   baseURL: import.meta.env.VITE_APP_BASE_API,
   timeout: Number(import.meta.env.VITE_TIMEOUT) || 15000,
   headers: { "Content-Type": "application/json;charset=utf-8" },
@@ -367,6 +367,4 @@ request.interceptors.response.use(
   }
 );
 
-export default request;
-
 export type { AxiosInstance } from "axios";
diff --git a/frontend/web/src/utils/index.ts b/frontend/web/src/utils/index.ts
index bd711705..41330617 100644
--- a/frontend/web/src/utils/index.ts
+++ b/frontend/web/src/utils/index.ts
@@ -12,10 +12,11 @@ export * from "./oauth";
 
 // 通用
 export * from "./common";
-export { default as download } from "./download";
+export * from "./download";
 export * from "./constants";
 export * from "./form";
 export * from "./i18n";
+export * from "./icons";
 
 // 网络
 export * from "./http";
diff --git a/frontend/web/src/utils/menuIcon/index.ts b/frontend/web/src/utils/menuIcon/index.ts
index a413eb3d..326eeb72 100644
--- a/frontend/web/src/utils/menuIcon/index.ts
+++ b/frontend/web/src/utils/menuIcon/index.ts
@@ -278,4 +278,4 @@ export function resolveIconForFaSvgIcon(stored?: string | null): string {
  * 本地 SVG URL（与 `@utils/icons` 同源）。
  * @deprecated 新代码请使用 {@link resolveLocalIconUrl} from `@utils/icons`
  */
-export { resolveLocalIconUrl as resolveMenuLocalSvgUrl } from "@utils/icons";
+export { resolveLocalIconUrl as resolveMenuLocalSvgUrl } from "@utils";
diff --git a/frontend/web/src/utils/navigation/index.ts b/frontend/web/src/utils/navigation/index.ts
index 7f23df7c..a822146a 100644
--- a/frontend/web/src/utils/navigation/index.ts
+++ b/frontend/web/src/utils/navigation/index.ts
@@ -3,8 +3,7 @@ import { router } from "@/router";
 import type { AppRouteRecord, AppRouteRecord as AppRouteRecordFromTypes } from "@/types";
 import i18n, { $t } from "@/locales";
 import AppConfig from "@/config";
-import { useWorktabStore } from "@stores/modules/worktab.store";
-import { useSettingsStore } from "@stores/modules/setting.store";
+import { useSettingsStore, useWorktabStore } from "@stores";
 import { IframeRouteManager } from "@/router";
 import { useCommon } from "@/hooks/core/useCommon";
 
diff --git a/frontend/web/src/utils/sys/index.ts b/frontend/web/src/utils/sys/index.ts
index 66b875f2..04741d8d 100644
--- a/frontend/web/src/utils/sys/index.ts
+++ b/frontend/web/src/utils/sys/index.ts
@@ -4,8 +4,8 @@ import type { App } from "vue";
 import mitt, { type Emitter } from "mitt";
 import { upgradeLogList } from "@/mock/upgrade/changeLog";
 import { ElNotification } from "element-plus";
-import { useUserStore } from "@stores/modules/user.store";
-import { StorageConfig } from "@utils/storage";
+import { useUserStore } from "@stores";
+import { StorageConfig } from "@utils";
 
 // -----------------------------
 // Console banner
diff --git a/frontend/web/src/utils/table/index.ts b/frontend/web/src/utils/table/index.ts
index f713af23..2024f5e7 100644
--- a/frontend/web/src/utils/table/index.ts
+++ b/frontend/web/src/utils/table/index.ts
@@ -19,9 +19,9 @@ import { h } from "vue";
 import type { VNode } from "vue";
 import { ElTooltip } from "element-plus";
 import { hash } from "ohash";
-import ArtButtonMore from "@/components/forms/fa-button-more/index.vue";
+import FaButtonMore from "@/components/forms/fa-button-more/index.vue";
 import type { ButtonMoreItem } from "@/components/forms/fa-button-more/types";
-import ArtButtonTable from "@/components/forms/fa-button-table/index.vue";
+import FaButtonTable from "@/components/forms/fa-button-table/index.vue";
 
 // --- 全局分页字段名（与 PageQuery 对齐） ---
 
@@ -539,7 +539,7 @@ export function renderTableOperationCell(
         "span",
         { class: a.disabled ? "inline-flex opacity-40 pointer-events-none" : "inline-flex" },
         [
-          h(ArtButtonTable, {
+          h(FaButtonTable, {
             type: a.artType,
             icon: iconForOperation(a),
             iconColor: iconColorForOperation(a),
@@ -552,7 +552,7 @@ export function renderTableOperationCell(
 
   if (overflow.length === 0) return h("div", { class: wrapperClass }, inlineNodes);
 
-  const moreDropdown = h(ArtButtonMore, {
+  const moreDropdown = h(FaButtonMore, {
     list: overflow.map((a) => ({
       key: a.key,
       label: a.label,
diff --git a/frontend/web/src/utils/ui/index.ts b/frontend/web/src/utils/ui/index.ts
index de458a89..f824fad3 100644
--- a/frontend/web/src/utils/ui/index.ts
+++ b/frontend/web/src/utils/ui/index.ts
@@ -3,7 +3,7 @@
 import NProgress from "nprogress";
 import "nprogress/nprogress.css";
 import { ThemeMode } from "@/enums";
-import { useSettingsStore } from "@stores/modules/setting.store";
+import { useSettingsStore } from "@stores";
 import { fourDotsSpinnerSvg } from "@/assets/svg/loading";
 import { useCommon } from "@/hooks/core/useCommon";
 import { useTheme } from "@/hooks/core/useTheme";
diff --git a/frontend/web/src/views/dashboard/analysis/index.vue b/frontend/web/src/views/dashboard/analysis/index.vue
index 140dbf26..8f07016a 100644
--- a/frontend/web/src/views/dashboard/analysis/index.vue
+++ b/frontend/web/src/views/dashboard/analysis/index.vue
@@ -266,7 +266,7 @@
               subtitle="基于 Vue 3 + TypeScript + Element Plus 构建的现代化管理系统。"
               titleColor="#333"
               subtitleColor="#666"
-              boxStyle="!bg-[#D4F1F7]"
+              boxStyle="bg-[#D4F1F7]!"
               :buttonConfig="{
                 show: true,
                 text: '开始探索',
@@ -613,7 +613,11 @@ const multiLineData: LineDataItem[] = [
     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(["周一", "周二", "周三", "周四", "周五", "周六", "周日"]);
@@ -635,8 +639,8 @@ const statsCards = [
     count: 1235,
     description: "鞋子、牛仔裤、派对服装、手表",
     icon: "ri:bar-chart-box-line",
-    boxStyle: "!bg-theme/10",
-    customIconStyle: "!text-theme !text-3xl",
+    boxStyle: "bg-theme/10!",
+    customIconStyle: "text-theme! text-3xl!",
     iconStyle: "bg-info",
     textColor: "var(--theme-color)",
     showArrow: false,
@@ -647,8 +651,8 @@ const statsCards = [
     count: 5000,
     description: "日活跃用户超过5,000+",
     icon: "ri:account-box-2-line",
-    boxStyle: "!bg-warning/10",
-    customIconStyle: "!text-warning !text-3xl",
+    boxStyle: "bg-warning/10!",
+    customIconStyle: "text-warning! text-3xl!",
     iconStyle: "bg-warning",
     textColor: "var(--fa-warning)",
     showArrow: false,
@@ -659,8 +663,8 @@ const statsCards = [
     count: 35000,
     description: "月收入超过¥350,000+",
     icon: "ri:money-cny-box-line",
-    boxStyle: "!bg-secondary/10",
-    customIconStyle: "!text-secondary !text-3xl",
+    boxStyle: "bg-secondary/10!",
+    customIconStyle: "text-secondary! text-3xl!",
     iconStyle: "bg-secondary",
     textColor: "var(--fa-secondary)",
     showArrow: false,
@@ -671,8 +675,8 @@ const statsCards = [
     count: 4800,
     description: "平均评分4.8/5",
     icon: "ri:message-3-line",
-    boxStyle: "!bg-error/10",
-    customIconStyle: "!text-error !text-3xl",
+    boxStyle: "bg-error/10!",
+    customIconStyle: "text-error! text-3xl!",
     iconStyle: "bg-error",
     textColor: "var(--fa-error)",
     showArrow: false,
@@ -701,7 +705,7 @@ const progressCards = [
     percentage: 45,
     color: "var(--fa-error)",
     icon: "ri:game-line",
-    iconStyle: "!bg-error/12 text-error",
+    iconStyle: "bg-error/12! text-error",
   },
   {
     id: 4,
@@ -792,7 +796,11 @@ const dataList = [
   },
 ];
 const timelineData = [
-  { time: "上午 09:30", status: "rgb(73, 190, 255)", content: "收到 John Doe 支付的 385.90 美元" },
+  {
+    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" },
diff --git a/frontend/web/src/views/dashboard/analysis/modules/top-products.vue b/frontend/web/src/views/dashboard/analysis/modules/top-products.vue
index 90c9b40c..8e75e3a4 100644
--- a/frontend/web/src/views/dashboard/analysis/modules/top-products.vue
+++ b/frontend/web/src/views/dashboard/analysis/modules/top-products.vue
@@ -48,7 +48,7 @@
 </template>
 
 <script setup lang="ts">
-import { hexToRgb } from "@utils/ui";
+import { hexToRgb } from "@utils";
 
 interface Product {
   name: string;
diff --git a/frontend/web/src/views/dashboard/home/index.vue b/frontend/web/src/views/dashboard/home/index.vue
index c576804f..53ceacba 100644
--- a/frontend/web/src/views/dashboard/home/index.vue
+++ b/frontend/web/src/views/dashboard/home/index.vue
@@ -112,7 +112,7 @@
             </div>
           </template>
           <div class="workplace-ops-card__body">
-            <Calendar />
+            <FaCalendar />
           </div>
         </ElCard>
       </ElCol>
@@ -176,7 +176,7 @@
                   class="workplace-quick-row__icon"
                   :style="{ color: getQuickLinkColor(getQuickLinkStableIndex(item)) }"
                 >
-                  <MenuRouteIcon :icon="item.icon || 'menu'" />
+                  <FaMenuRouteIcon :icon="item.icon || 'menu'" />
                 </div>
                 <div class="workplace-quick-row__text">
                   <span class="workplace-quick-row__title">{{ item.title }}</span>
@@ -273,12 +273,16 @@
 <script setup lang="ts">
 defineOptions({ name: "Home", inheritAttrs: false });
 
-import { useUserStore } from "@stores/index";
-import MenuRouteIcon from "@/components/others/fa-menu-routeIcon/index.vue";
-import Calendar from "@/components/others/fa-calendar/index.vue";
+import { useUserStore } from "@stores";
 import CardList from "../workplace/modules/card-list.vue";
 import AboutProject from "../workplace/modules/about-project.vue";
-import { greetings } from "@utils/common";
+import {
+  greetings,
+  resolveIconForFaSvgIcon,
+  quickStartManager,
+  QUICK_LINK_MAX,
+  type QuickLink,
+} from "@utils";
 import { ref, onMounted, onUnmounted } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
@@ -293,10 +297,7 @@ import {
   TopRight,
 } from "@element-plus/icons-vue";
 import { ElMessage, ElMessageBox } from "element-plus";
-import { quickStartManager, QUICK_LINK_MAX, type QuickLink } from "@utils/common";
 import { dayjs } from "element-plus";
-import FaSvgIcon from "@/components/base/fa-svg-icon/index.vue";
-import { resolveIconForFaSvgIcon } from "@utils/menuIcon/remix";
 
 const timefix = greetings();
 const userStore = useUserStore();
diff --git a/frontend/web/src/views/dashboard/home/modules/banner.vue b/frontend/web/src/views/dashboard/home/modules/banner.vue
index 0831bc78..9ec098c5 100644
--- a/frontend/web/src/views/dashboard/home/modules/banner.vue
+++ b/frontend/web/src/views/dashboard/home/modules/banner.vue
@@ -1,8 +1,8 @@
 <template>
   <FaBasicBanner
-    class="justify-center !h-53 max-sm:!pt-8 max-sm:!h-48"
+    class="justify-center h-53! max-sm:pt-8! max-sm:h-48!"
     :title="`欢迎回来 ${userInfo?.username}`"
-    boxStyle="!bg-theme/10"
+    boxStyle="bg-theme/10!"
     titleColor="var(--fa-gray-900)"
     :decoration="false"
     :meteorConfig="{
@@ -47,7 +47,7 @@
 
 <script setup lang="ts">
 import bannerCover from "@imgs/login/lf_icon2.webp";
-import { useUserStore } from "@stores/modules/user.store";
+import { useUserStore } from "@stores";
 
 const userStore = useUserStore();
 
diff --git a/frontend/web/src/views/dashboard/workplace/modules/about-project.vue b/frontend/web/src/views/dashboard/workplace/modules/about-project.vue
index 9fe779f0..0e111e17 100644
--- a/frontend/web/src/views/dashboard/workplace/modules/about-project.vue
+++ b/frontend/web/src/views/dashboard/workplace/modules/about-project.vue
@@ -23,7 +23,7 @@
 
 <script setup lang="ts">
 import AppConfig from "@/config";
-import { WEB_LINKS } from "@utils/constants";
+import { WEB_LINKS } from "@utils";
 
 const systemName = AppConfig.systemInfo.name;
 
diff --git a/frontend/web/src/views/fastlink/article/components/ArticlePublishDrawer.vue b/frontend/web/src/views/fastlink/article/components/ArticlePublishDrawer.vue
index 44b66f17..e6fc173d 100644
--- a/frontend/web/src/views/fastlink/article/components/ArticlePublishDrawer.vue
+++ b/frontend/web/src/views/fastlink/article/components/ArticlePublishDrawer.vue
@@ -122,9 +122,8 @@
 
 <script setup lang="ts">
 import { Plus } from "@element-plus/icons-vue";
-import { ApiStatus } from "@utils/http";
-import { useUserStore } from "@stores/modules/user.store";
-import { EmojiText } from "@utils/ui";
+import { ApiStatus, EmojiText } from "@utils";
+import { useUserStore } from "@stores";
 import { PageModeEnum } from "@/enums/formEnum";
 import axios from "axios";
 
diff --git a/frontend/web/src/views/fastlink/article/index.vue b/frontend/web/src/views/fastlink/article/index.vue
index 3cc478ed..16313697 100644
--- a/frontend/web/src/views/fastlink/article/index.vue
+++ b/frontend/web/src/views/fastlink/article/index.vue
@@ -1,6 +1,6 @@
 <!-- 文章列表（挂载于 /dashboard/article，原 widgets/article） -->
 <template>
-  <div class="page-content !mb-5">
+  <div class="page-content mb-5!">
     <ElRow justify="space-between" :gutter="10">
       <ElCol :lg="6" :md="6" :sm="14" :xs="16">
         <ElInput
@@ -41,7 +41,7 @@
           :key="item.id"
           @click="toDetail(item)"
         >
-          <div class="relative aspect-[16/9.5]">
+          <div class="relative aspect-16/9.5">
             <ElImage
               class="flex align-center justify-center w-full h-full object-cover bg-gray-200"
               :src="item.home_img"
@@ -118,7 +118,7 @@ import ArticleCommentWallDrawer from "./components/ArticleCommentWallDrawer.vue"
 import ArticleDetailDrawer from "./components/ArticleDetailDrawer.vue";
 import ArticlePublishDrawer from "./components/ArticlePublishDrawer.vue";
 import { useDateFormat } from "@vueuse/core";
-import { EmojiText } from "@utils/ui";
+import { EmojiText } from "@utils";
 import { ArticleList } from "@/mock/temp/articleList";
 import { useCommon } from "@/hooks/core/useCommon";
 
diff --git a/frontend/web/src/views/fastlink/current/profile.vue b/frontend/web/src/views/fastlink/current/profile.vue
index cfad49bb..09153c90 100644
--- a/frontend/web/src/views/fastlink/current/profile.vue
+++ b/frontend/web/src/views/fastlink/current/profile.vue
@@ -3,7 +3,7 @@
   <div class="w-full h-full p-0 bg-transparent border-none shadow-none">
     <div class="relative flex-b mt-2.5 max-md:block max-md:mt-1">
       <!-- 左侧卡片 -->
-      <div class="w-112 mr-5 max-md:w-full max-md:mr-0">
+      <div class="w-md mr-5 max-md:w-full max-md:mr-0">
         <div class="fa-card-sm relative p-9 pb-6 overflow-hidden text-center">
           <img
             class="absolute top-0 left-0 w-full h-50 object-cover"
@@ -184,7 +184,7 @@
               </ElFormItem>
             </ElRow>
 
-            <div class="flex-c justify-end [&_.el-button]:!w-27.5">
+            <div class="flex-c justify-end [&_.el-button]:w-27.5!">
               <ElButton
                 type="primary"
                 class="w-22.5"
@@ -236,7 +236,7 @@
               />
             </ElFormItem>
 
-            <div class="flex-c justify-end [&_.el-button]:!w-27.5">
+            <div class="flex-c justify-end [&_.el-button]:w-27.5!">
               <ElButton
                 type="primary"
                 class="w-22.5"
@@ -262,10 +262,7 @@ import { useUserStore, useDictStore } from "@stores";
 import { Camera } from "@element-plus/icons-vue";
 import { ElMessage } from "element-plus";
 import { useI18n } from "vue-i18n";
-import { redirectToLogin } from "@utils/auth";
-import FaSvgIcon from "@/components/base/fa-svg-icon/index.vue";
-import FaCutterImg from "@/components/media/fa-cutter-img/index.vue";
-import { dataURLToFile } from "@utils/file/dataUrl";
+import { redirectToLogin, dataURLToFile } from "@utils";
 
 defineOptions({ name: "UserProfile" });
 
diff --git a/frontend/web/src/views/fastlink/fachat/index.vue b/frontend/web/src/views/fastlink/fachat/index.vue
index 6c022712..0c7ba90f 100644
--- a/frontend/web/src/views/fastlink/fachat/index.vue
+++ b/frontend/web/src/views/fastlink/fachat/index.vue
@@ -1,6 +1,6 @@
 <!-- 聊天页 -->
 <template>
-  <div class="page-content flex !p-0 max-md:flex-col" :style="{ height: containerMinHeight }">
+  <div class="page-content flex p-0! max-md:flex-col" :style="{ height: containerMinHeight }">
     <ElRow>
       <ElCol :span="12">
         <div class="grid-content ep-bg-purple" />
@@ -12,7 +12,7 @@
     <div
       class="box-border w-90 h-full p-5 border-r border-g-300 max-md:w-full max-md:h-42 max-md:border-r-0"
     >
-      <div class="pb-5 max-md:!hidden">
+      <div class="pb-5 max-md:hidden!">
         <div class="flex-c gap-3">
           <ElAvatar :size="50" :src="selectedPerson?.avatar" />
           <div>
@@ -53,7 +53,7 @@
             </ElAvatar>
             <div
               class="absolute right-1 bottom-1 size-2 rounded-full"
-              :class="item.online ? 'bg-success/100' : 'bg-error/100'"
+              :class="item.online ? 'bg-success' : 'bg-error'"
             ></div>
           </div>
           <div class="flex-1 min-w-0">
@@ -75,10 +75,7 @@
         <div>
           <span class="text-base font-medium">Art Bot</span>
           <div class="flex-c gap-1 mt-1.5">
-            <div
-              class="w-2 h-2 rounded-full"
-              :class="isOnline ? 'bg-success/100' : 'bg-danger/100'"
-            ></div>
+            <div class="w-2 h-2 rounded-full" :class="isOnline ? 'bg-success' : 'bg-danger'"></div>
             <span class="text-xs text-g-600">{{ isOnline ? "在线" : "离线" }}</span>
           </div>
         </div>
@@ -91,7 +88,7 @@
       <div class="flex flex-col h-[calc(100%-85px)]">
         <!-- 聊天消息区域 -->
         <div
-          class="flex-1 py-7.5 px-4 overflow-y-auto border-t-d [&::-webkit-scrollbar]:!w-1"
+          class="flex-1 py-7.5 px-4 overflow-y-auto border-t-d [&::-webkit-scrollbar]:w-1!"
           ref="messageContainer"
         >
           <template v-for="message in messages" :key="message.id">
@@ -101,7 +98,7 @@
                 message.isMe ? 'flex-row-reverse' : 'flex-row justify-start',
               ]"
             >
-              <ElAvatar :size="32" :src="message.avatar" class="flex-shrink-0" />
+              <ElAvatar :size="32" :src="message.avatar" class="shrink-0" />
               <div
                 class="flex flex-col max-w-[70%]"
                 :class="message.isMe ? 'items-end' : 'items-start'"
@@ -115,7 +112,7 @@
                 </div>
                 <div
                   class="py-2.5 px-3.5 text-sm leading-[1.4] rounded-md"
-                  :class="message.isMe ? '!bg-theme/15' : '!bg-active-color'"
+                  :class="message.isMe ? 'bg-theme/15!' : 'bg-active-color!'"
                 >
                   {{ message.content }}
                 </div>
@@ -125,7 +122,7 @@
         </div>
 
         <!-- 聊天输入区域 -->
-        <div class="p-4 flex-shrink-0">
+        <div class="p-4 shrink-0">
           <ElInput
             v-model="messageText"
             type="textarea"
@@ -157,7 +154,7 @@
 
 <script setup lang="ts">
 import { Picture, Paperclip, ArrowDown } from "@element-plus/icons-vue";
-import { mittBus } from "@utils/sys";
+import { mittBus } from "@utils";
 import meAvatar from "@imgs/avatar/avatar5.webp";
 import aiAvatar from "@imgs/avatar/avatar10.webp";
 import avatar2 from "@imgs/avatar/avatar2.webp";
diff --git a/frontend/web/src/views/fastlink/pricing/index.vue b/frontend/web/src/views/fastlink/pricing/index.vue
index 65e06aa4..d5548fed 100644
--- a/frontend/web/src/views/fastlink/pricing/index.vue
+++ b/frontend/web/src/views/fastlink/pricing/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="pt-24 px-20 max-md:!pt-15 max-sm:!px-5 max-md:!px-8 bg-transparent !border-none">
+  <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 flex flex-wrap justify-center items-baseline gap-x-2 gap-y-1"
@@ -14,7 +14,7 @@
         <span>位信赖的开发者</span>
       </h1>
       <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">
+      <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 协议开源免费，当前页面为定价模板，仅作演示用途
         </p>
@@ -45,13 +45,13 @@
               </div>
             </div>
 
-            <div class="flex-grow mb-5">
+            <div class="grow mb-5">
               <div
                 v-for="(feature, index) in plan.features"
                 :key="index"
                 class="flex-c mb-2.5 text-sm"
               >
-                <ElIcon class="mr-2.5" :class="feature.available ? '!text-theme' : '!text-danger'">
+                <ElIcon class="mr-2.5" :class="feature.available ? 'text-theme!' : 'text-danger!'">
                   <Check v-if="feature.available" />
                   <Close v-else />
                 </ElIcon>
diff --git a/frontend/web/src/views/fastlink/tutorial/index.vue b/frontend/web/src/views/fastlink/tutorial/index.vue
index e8e301a2..06dbe834 100644
--- a/frontend/web/src/views/fastlink/tutorial/index.vue
+++ b/frontend/web/src/views/fastlink/tutorial/index.vue
@@ -58,7 +58,7 @@
                     <ElButton
                       link
                       type="primary"
-                      class="manual-nav__mod-title !h-auto min-h-0 justify-start px-0 py-1"
+                      class="manual-nav__mod-title h-auto! min-h-0 justify-start px-0 py-1"
                       @click="scrollToAnchor(mod.anchor)"
                     >
                       {{ mod.title }}
@@ -69,7 +69,7 @@
                         :key="p.anchor"
                         link
                         size="small"
-                        class="manual-nav__page !h-auto min-h-0 justify-start px-2 py-1"
+                        class="manual-nav__page h-auto! min-h-0 justify-start px-2 py-1"
                         @click="scrollToAnchor(p.anchor)"
                       >
                         {{ p.title }}
@@ -400,7 +400,7 @@
                         </h3>
 
                         <div class="section">
-                          <ElDivider content-position="left" class="!my-3">API 权限标识</ElDivider>
+                          <ElDivider content-position="left" class="my-3!">API 权限标识</ElDivider>
                           <p>
                             <ElTag effect="plain" type="info" size="small" class="mr-1 font-mono">
                               module_system:user
@@ -431,44 +431,68 @@
                         </div>
 
                         <div class="section">
-                          <ElDivider content-position="left" class="!my-3">
+                          <ElDivider content-position="left" class="my-3!">
                             🔍 搜索/筛选表单（5字段）
                           </ElDivider>
                           <ElCard shadow="never" class="mb-3 overflow-x-auto">
                             <table class="manual-doc-table w-full border-collapse text-sm">
                               <thead>
-                                <tr><th>备注</th></tr>
+                                <tr>
+                                  <th>备注</th>
+                                </tr>
                               </thead>
                               <tbody>
-                                <tr><td>文本·账号</td></tr>
-                                <tr><td>文本·用户名</td></tr>
-                                <tr><td>下拉·启用/停用</td></tr>
-                                <tr><td>创建人（UserTableSelect 弹窗选用户）</td></tr>
-                                <tr><td>创建时间·日期时间范围</td></tr>
+                                <tr>
+                                  <td>文本·账号</td>
+                                </tr>
+                                <tr>
+                                  <td>文本·用户名</td>
+                                </tr>
+                                <tr>
+                                  <td>下拉·启用/停用</td>
+                                </tr>
+                                <tr>
+                                  <td>创建人（FaUserTableSelect 弹窗选用户）</td>
+                                </tr>
+                                <tr>
+                                  <td>创建时间·日期时间范围</td>
+                                </tr>
                               </tbody>
                             </table>
                           </ElCard>
                         </div>
 
                         <div class="section">
-                          <ElDivider content-position="left" class="!my-3">📊 表格列</ElDivider>
+                          <ElDivider content-position="left" class="my-3!">📊 表格列</ElDivider>
                           <ElCard shadow="never" class="mb-3 overflow-x-auto">
                             <table class="manual-doc-table w-full border-collapse text-sm">
                               <thead>
-                                <tr><th>渲染</th></tr>
+                                <tr>
+                                  <th>渲染</th>
+                                </tr>
                               </thead>
                               <tbody>
-                                <tr><td>固定左侧</td></tr>
-                                <tr><td>ElAvatar</td></tr>
-                                <tr><td>溢出省略</td></tr>
-                                <tr><td>溢出省略</td></tr>
+                                <tr>
+                                  <td>固定左侧</td>
+                                </tr>
+                                <tr>
+                                  <td>ElAvatar</td>
+                                </tr>
+                                <tr>
+                                  <td>溢出省略</td>
+                                </tr>
+                                <tr>
+                                  <td>溢出省略</td>
+                                </tr>
                                 <tr>
                                   <td>
                                     <span class="tag tag-success">启用</span>
                                     <span class="tag tag-danger">停用</span>
                                   </td>
                                 </tr>
-                                <tr><td>row.dept?.name</td></tr>
+                                <tr>
+                                  <td>row.dept?.name</td>
+                                </tr>
                                 <tr>
                                   <td>
                                     <span class="tag tag-success">男</span>
@@ -476,16 +500,22 @@
                                     <span class="tag tag-info">未知</span>
                                   </td>
                                 </tr>
-                                <tr><td></td></tr>
-                                <tr><td></td></tr>
-                                <tr><td>固定右侧</td></tr>
+                                <tr>
+                                  <td></td>
+                                </tr>
+                                <tr>
+                                  <td></td>
+                                </tr>
+                                <tr>
+                                  <td>固定右侧</td>
+                                </tr>
                               </tbody>
                             </table>
                           </ElCard>
                         </div>
 
                         <div class="section">
-                          <ElDivider content-position="left" class="!my-3">🔘 工具栏按钮</ElDivider>
+                          <ElDivider content-position="left" class="my-3!">🔘 工具栏按钮</ElDivider>
                           <ElSpace wrap size="small" class="mb-2">
                             <ElButton type="primary" size="small" plain class="manual-doc-btn">
                               新增
@@ -508,7 +538,7 @@
                         </div>
 
                         <div class="section">
-                          <ElDivider content-position="left" class="!my-3">🔘 行操作按钮</ElDivider>
+                          <ElDivider content-position="left" class="my-3!">🔘 行操作按钮</ElDivider>
                           <ElSpace wrap size="small" class="mb-2">
                             <ElButton type="warning" size="small" plain class="manual-doc-btn">
                               重置密码
@@ -526,7 +556,7 @@
                         </div>
 
                         <div class="section">
-                          <ElDivider content-position="left" class="!my-3">📋 弹窗/抽屉</ElDivider>
+                          <ElDivider content-position="left" class="my-3!">📋 弹窗/抽屉</ElDivider>
                           <ul class="feature-list">
                             <li>
                               <strong>详情 Drawer</strong>
@@ -554,7 +584,7 @@
                         </div>
 
                         <div class="section">
-                          <ElDivider content-position="left" class="!my-3">✨ 特殊功能</ElDivider>
+                          <ElDivider content-position="left" class="my-3!">✨ 特殊功能</ElDivider>
                           <ul class="feature-list">
                             <li>左侧部门树联动筛选(点击树节点过滤列表)</li>
                             <li>批量删除(确认对话框)</li>
@@ -574,7 +604,7 @@
                         </h3>
 
                         <div class="section">
-                          <ElDivider content-position="left" class="!my-3">API 权限标识</ElDivider>
+                          <ElDivider content-position="left" class="my-3!">API 权限标识</ElDivider>
                           <p>
                             <ElTag effect="plain" type="info" size="small" class="mr-1 font-mono">
                               module_system:role
@@ -605,48 +635,66 @@
                         </div>
 
                         <div class="section">
-                          <ElDivider content-position="left" class="!my-3">
+                          <ElDivider content-position="left" class="my-3!">
                             🔍 搜索表单（3字段）
                           </ElDivider>
                           <ElCard shadow="never" class="mb-3 overflow-x-auto">
                             <table class="manual-doc-table w-full border-collapse text-sm">
                               <thead>
-                                <tr><th>类型</th></tr>
+                                <tr>
+                                  <th>类型</th>
+                                </tr>
                               </thead>
                               <tbody>
-                                <tr><td>文本输入</td></tr>
-                                <tr><td>下拉(启用/停用, value="true"/"false")</td></tr>
-                                <tr><td>日期时间范围</td></tr>
+                                <tr>
+                                  <td>文本输入</td>
+                                </tr>
+                                <tr>
+                                  <td>下拉(启用/停用, value="true"/"false")</td>
+                                </tr>
+                                <tr>
+                                  <td>日期时间范围</td>
+                                </tr>
                               </tbody>
                             </table>
                           </ElCard>
                         </div>
 
                         <div class="section">
-                          <ElDivider content-position="left" class="!my-3">📊 表格列</ElDivider>
+                          <ElDivider content-position="left" class="my-3!">📊 表格列</ElDivider>
                           <ElCard shadow="never" class="mb-3 overflow-x-auto">
                             <table class="manual-doc-table w-full border-collapse text-sm">
                               <thead>
-                                <tr><th>渲染</th></tr>
+                                <tr>
+                                  <th>渲染</th>
+                                </tr>
                               </thead>
                               <tbody>
-                                <tr><td>固定左侧</td></tr>
-                                <tr><td>溢出省略</td></tr>
+                                <tr>
+                                  <td>固定左侧</td>
+                                </tr>
+                                <tr>
+                                  <td>溢出省略</td>
+                                </tr>
                                 <tr>
                                   <td>
                                     <span class="tag tag-success">启用</span>
                                     <span class="tag tag-danger">停用</span>
                                   </td>
                                 </tr>
-                                <tr><td>溢出省略</td></tr>
-                                <tr><td>固定右侧</td></tr>
+                                <tr>
+                                  <td>溢出省略</td>
+                                </tr>
+                                <tr>
+                                  <td>固定右侧</td>
+                                </tr>
                               </tbody>
                             </table>
                           </ElCard>
                         </div>
 
                         <div class="section">
-                          <ElDivider content-position="left" class="!my-3">🔘 工具栏按钮</ElDivider>
+                          <ElDivider content-position="left" class="my-3!">🔘 工具栏按钮</ElDivider>
                           <ElSpace wrap size="small" class="mb-2">
                             <ElButton type="primary" size="small" plain class="manual-doc-btn">
                               新增
@@ -663,7 +711,7 @@
                         </div>
 
                         <div class="section">
-                          <ElDivider content-position="left" class="!my-3">🔘 行操作按钮</ElDivider>
+                          <ElDivider content-position="left" class="my-3!">🔘 行操作按钮</ElDivider>
                           <ElSpace wrap size="small" class="mb-2">
                             <ElButton type="info" size="small" plain class="manual-doc-btn">
                               权限
@@ -678,7 +726,7 @@
                         </div>
 
                         <div class="section">
-                          <ElDivider content-position="left" class="!my-3">📋 弹窗/抽屉</ElDivider>
+                          <ElDivider content-position="left" class="my-3!">📋 弹窗/抽屉</ElDivider>
                           <ul class="feature-list">
                             <li>
                               <strong>新增/编辑 Drawer</strong>
@@ -711,7 +759,7 @@
                           </ElText>
                         </h3>
                         <div class="section">
-                          <ElDivider content-position="left" class="!my-3">
+                          <ElDivider content-position="left" class="my-3!">
                             功能完整性验收
                           </ElDivider>
                           <ul class="feature-list">
@@ -748,7 +796,7 @@
                           </ElText>
                         </h3>
                         <div class="section">
-                          <ElDivider content-position="left" class="!my-3">
+                          <ElDivider content-position="left" class="my-3!">
                             功能完整性验收
                           </ElDivider>
                           <ul class="feature-list">
diff --git a/frontend/web/src/views/fastlink/tutorial/manualSections.ts b/frontend/web/src/views/fastlink/tutorial/manualSections.ts
index 7bc087c7..77dd97a4 100644
--- a/frontend/web/src/views/fastlink/tutorial/manualSections.ts
+++ b/frontend/web/src/views/fastlink/tutorial/manualSections.ts
@@ -51,7 +51,7 @@ export const MANUAL_SYSTEM_TAIL_PAGES: CompactManualPage[] = [
     title: "岗位管理",
     path: "module_system/position/index.vue",
     notes: [
-      "检索：FaSearchBar（含创建人 UserTableSelect 槽）。",
+      "检索：FaSearchBar（含创建人 FaUserTableSelect 槽）。",
       "主区：分页表格。",
       "工具栏：新增、导出、批量删除、批量更多(patch)、刷新、列配置。",
       "弹层：详情；新增/编辑 Dialog；导出 FaExportDialog。",
@@ -86,7 +86,7 @@ export const MANUAL_SYSTEM_TAIL_PAGES: CompactManualPage[] = [
     title: "通知公告",
     path: "module_system/notice/index.vue",
     notes: [
-      "检索：FaSearchBar（含创建人 UserTableSelect）。",
+      "检索：FaSearchBar（含创建人 FaUserTableSelect）。",
       "工具栏：新增、导出、批量删除、批量更多(patch)、刷新、列配置。",
       "弹层：详情；新增/编辑 Dialog；正文为富文本 `FaWangEditor`；HTML 预览。",
       "权限：`module_system:notice:create|export|delete|patch` + 行级操作。",
@@ -108,7 +108,7 @@ export const MANUAL_SYSTEM_TAIL_PAGES: CompactManualPage[] = [
     title: "操作日志",
     path: "module_system/log/index.vue",
     notes: [
-      "检索：FaSearchBar（含创建人 UserTableSelect）；登录/操作日志类型在列或详情中区分。",
+      "检索：FaSearchBar（含创建人 FaUserTableSelect）；登录/操作日志类型在列或详情中区分。",
       "工具栏：导出、批量删除、刷新、列配置（无新增）。",
       "弹层：详情 Dialog（请求路径/方法、IP、状态码、耗时、入参出参等大字段）。",
       "权限：`module_system:log:export|delete` + 行级查看/删除。",
@@ -289,7 +289,7 @@ export const MANUAL_MODULES_AFTER_SYSTEM: ManualModuleSection[] = [
         title: "插件市场",
         path: "module_application/portal/index.vue",
         notes: [
-          "检索：FaSearchBar（含创建人、更新人 UserTableSelect）。",
+          "检索：FaSearchBar（含创建人、更新人 FaUserTableSelect）。",
           "工具栏：标题「应用市场」+「创建应用」（`module_application:portal:create`）；刷新、搜索栏。",
           "主区：卡片网格（图标、名称、状态、描述）；卡片脚编辑/删除（update/delete）；底部分页器。",
           "完整性：空列表 ElEmpty；卡片点击进入内部打开逻辑（见 `openAppInternal`）。",
diff --git a/frontend/web/src/views/module_ai/chat/components/ChatInput.vue b/frontend/web/src/views/module_ai/chat/components/FaChatInput.vue
similarity index 99%
rename from frontend/web/src/views/module_ai/chat/components/ChatInput.vue
rename to frontend/web/src/views/module_ai/chat/components/FaChatInput.vue
index af3d533f..788e074a 100644
--- a/frontend/web/src/views/module_ai/chat/components/ChatInput.vue
+++ b/frontend/web/src/views/module_ai/chat/components/FaChatInput.vue
@@ -60,7 +60,7 @@
 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";
+import type { UploadedFile } from "../types";
 
 interface Props {
   disabled?: boolean;
diff --git a/frontend/web/src/views/module_ai/chat/components/ChatMessages.vue b/frontend/web/src/views/module_ai/chat/components/FaChatMessages.vue
similarity index 91%
rename from frontend/web/src/views/module_ai/chat/components/ChatMessages.vue
rename to frontend/web/src/views/module_ai/chat/components/FaChatMessages.vue
index 82f527c3..a4cda47f 100644
--- a/frontend/web/src/views/module_ai/chat/components/ChatMessages.vue
+++ b/frontend/web/src/views/module_ai/chat/components/FaChatMessages.vue
@@ -2,7 +2,7 @@
   <div ref="messagesContainer" class="chat-messages">
     <WelcomeScreen v-if="messages.length === 0" @prompt-click="handlePromptClick" />
     <div v-else class="messages-list">
-      <MessageItem
+      <FaMessageItem
         v-for="message in messages"
         :key="message.id"
         :message="message"
@@ -17,9 +17,8 @@
 
 <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";
+import WelcomeScreen from "./FaWelcomeScreen.vue";
+import type { ChatMessage } from "../types";
 
 interface Props {
   messages: ChatMessage[];
diff --git a/frontend/web/src/views/module_ai/chat/components/ChatNavbar.vue b/frontend/web/src/views/module_ai/chat/components/FaChatNavbar.vue
similarity index 97%
rename from frontend/web/src/views/module_ai/chat/components/ChatNavbar.vue
rename to frontend/web/src/views/module_ai/chat/components/FaChatNavbar.vue
index abe4c760..6e00de89 100644
--- a/frontend/web/src/views/module_ai/chat/components/ChatNavbar.vue
+++ b/frontend/web/src/views/module_ai/chat/components/FaChatNavbar.vue
@@ -36,8 +36,7 @@
 </template>
 
 <script setup lang="ts">
-import FaSvgIcon from "@/components/base/fa-svg-icon/index.vue";
-import { resolveIconForFaSvgIcon } from "@utils/menuIcon/remix";
+import { resolveIconForFaSvgIcon } from "@utils";
 import { computed } from "vue";
 import { Connection, Loading, Warning, Delete, Setting } from "@element-plus/icons-vue";
 
diff --git a/frontend/web/src/views/module_ai/chat/components/MessageItem.vue b/frontend/web/src/views/module_ai/chat/components/FaMessageItem.vue
similarity index 99%
rename from frontend/web/src/views/module_ai/chat/components/MessageItem.vue
rename to frontend/web/src/views/module_ai/chat/components/FaMessageItem.vue
index eb61b742..5090caf7 100644
--- a/frontend/web/src/views/module_ai/chat/components/MessageItem.vue
+++ b/frontend/web/src/views/module_ai/chat/components/FaMessageItem.vue
@@ -78,7 +78,7 @@ import DOMPurify from "dompurify";
 /* 亮色用 atom-one；暗色由文末全局块覆盖 .hljs 底与字色，避免整段代码发亮底 */
 import "highlight.js/styles/atom-one-light.css";
 import { useUserStoreHook } from "@stores";
-import type { ChatMessage } from "@views/module_ai/chat/types";
+import type { ChatMessage } from "../types";
 
 interface Props {
   message: ChatMessage;
diff --git a/frontend/web/src/views/module_ai/chat/components/Sidebar.vue b/frontend/web/src/views/module_ai/chat/components/FaSidebar.vue
similarity index 100%
rename from frontend/web/src/views/module_ai/chat/components/Sidebar.vue
rename to frontend/web/src/views/module_ai/chat/components/FaSidebar.vue
diff --git a/frontend/web/src/views/module_ai/chat/components/WelcomeScreen.vue b/frontend/web/src/views/module_ai/chat/components/FaWelcomeScreen.vue
similarity index 100%
rename from frontend/web/src/views/module_ai/chat/components/WelcomeScreen.vue
rename to frontend/web/src/views/module_ai/chat/components/FaWelcomeScreen.vue
diff --git a/frontend/web/src/views/module_ai/chat/index.vue b/frontend/web/src/views/module_ai/chat/index.vue
index 3814af93..afcfa520 100644
--- a/frontend/web/src/views/module_ai/chat/index.vue
+++ b/frontend/web/src/views/module_ai/chat/index.vue
@@ -2,7 +2,7 @@
   <div class="fa-full-height">
     <ElContainer class="main-chat">
       <ElAside class="sidebar-container" :class="{ collapsed: isSidebarCollapsed }">
-        <Sidebar
+        <FaSidebar
           ref="sidebarRef"
           :current-session-id="currentSessionId"
           :is-collapsed="isSidebarCollapsed"
@@ -12,7 +12,7 @@
       </ElAside>
       <ElContainer class="chat-container">
         <ElHeader class="chat-header">
-          <ChatNavbar
+          <FaChatNavbar
             :connection-status="connectionStatus"
             :is-connected="isConnected"
             :message-count="messages.length"
@@ -23,7 +23,7 @@
           />
         </ElHeader>
         <ElMain class="chat-main">
-          <ChatMessages
+          <FaChatMessages
             ref="chatMessagesRef"
             :messages="messages"
             :error="error"
@@ -32,7 +32,7 @@
           />
         </ElMain>
         <ElFooter class="chat-footer">
-          <ChatInput
+          <FaChatInput
             :disabled="!isConnected"
             :sending="sending"
             :is-connected="isConnected"
@@ -52,10 +52,6 @@ defineOptions({
 
 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";
diff --git a/frontend/web/src/views/module_ai/memory/index.vue b/frontend/web/src/views/module_ai/memory/index.vue
index 1c405f2e..f56ed519 100644
--- a/frontend/web/src/views/module_ai/memory/index.vue
+++ b/frontend/web/src/views/module_ai/memory/index.vue
@@ -148,16 +148,17 @@ import { ref, reactive, computed, nextTick } from "vue";
 import { Edit } from "@element-plus/icons-vue";
 import { ElMessage } from "element-plus";
 import AiChatAPI, { type ChatSession, type ChatSessionDetail } from "@/api/module_ai/chat";
-import { formatToDateTime } from "@utils/common";
 import { useTable } from "@/hooks/core/useTable";
 import { useCrudDialog } from "@/hooks/core/useCrudDialog";
 import { useTableSelection } from "@/hooks/core/useTableSelection";
 import { confirmDelete, confirmBatchDelete } from "@/hooks/core/useConfirm";
 import type { SearchFormItem } from "@/components/forms/fa-search-bar/index.vue";
+import FaSearchBar from "@/components/forms/fa-search-bar/index.vue";
 import type { FormItem } from "@/components/forms/fa-form/index.vue";
+import FaForm from "@/components/forms/fa-form/index.vue";
 import type { ColumnOption } from "@/types/component";
 import { useAuth } from "@/hooks/core/useAuth";
-import { renderTableOperationCell, type TableOperationAction } from "@utils/table";
+import { formatToDateTime, renderTableOperationCell, type TableOperationAction } from "@utils";
 
 type MemorySearchForm = {
   title?: string;
diff --git a/frontend/web/src/views/module_application/portal/index.vue b/frontend/web/src/views/module_application/portal/index.vue
index 5c35e0cf..1a0db1b0 100644
--- a/frontend/web/src/views/module_application/portal/index.vue
+++ b/frontend/web/src/views/module_application/portal/index.vue
@@ -17,7 +17,7 @@
       @reset="onResetSearch"
     >
       <template #created_id>
-        <UserTableSelect
+        <FaUserTableSelect
           :model-value="searchForm.created_id == null ? undefined : searchForm.created_id"
           @update:model-value="(v: number | undefined) => (searchForm.created_id = v)"
           @confirm-click="afterUserSelectSearch"
@@ -25,7 +25,7 @@
         />
       </template>
       <template #updated_id>
-        <UserTableSelect
+        <FaUserTableSelect
           :model-value="searchForm.updated_id == null ? undefined : searchForm.updated_id"
           @update:model-value="(v: number | undefined) => (searchForm.updated_id = v)"
           @confirm-click="afterUserSelectSearch"
@@ -183,13 +183,13 @@ defineOptions({
 import { computed, nextTick, reactive, ref } from "vue";
 import { Delete, Edit, Monitor, Plus } from "@element-plus/icons-vue";
 import { ElMessage, ElMessageBox } from "element-plus";
-import { useAppStore } from "@stores/modules/app.store";
+import { useAppStore } from "@stores";
 import { DeviceEnum } from "@/enums/settings/device.enum";
 import ApplicationAPI, {
   type ApplicationForm,
   type ApplicationInfo,
 } from "@/api/module_application/portal";
-import { formatToDateTime } from "@utils/common";
+import { formatToDateTime } from "@utils";
 import { useTable } from "@/hooks/core/useTable";
 import FaTableHeader from "@/components/tables/fa-table-header/index.vue";
 import FaSearchBar from "@/components/forms/fa-search-bar/index.vue";
@@ -197,7 +197,7 @@ import type { SearchFormItem } from "@/components/forms/fa-search-bar/index.vue"
 import FaDrawer from "@/components/modal/fa-drawer/index.vue";
 import FaForm from "@/components/forms/fa-form/index.vue";
 import type { FormItem } from "@/components/forms/fa-form/index.vue";
-import UserTableSelect from "@views/module_system/user/components/UserTableSelect.vue";
+import FaUserTableSelect from "@/components/forms/fa-search-bar/FaUserTableSelect.vue";
 import type { ColumnOption } from "@/types/component";
 
 const appStore = useAppStore();
@@ -341,7 +341,20 @@ const {
     },
     columnsFactory: (): ColumnOption<ApplicationInfo>[] => [],
   },
-});
+}) as unknown as {
+  columnChecks: any;
+  data: ApplicationInfo[];
+  loading: any;
+  pagination: any;
+  getData: any;
+  replaceSearchParams: any;
+  resetSearchParams: any;
+  handleSizeChange: any;
+  handleCurrentChange: any;
+  refreshData: any;
+  refreshCreate: any;
+  refreshUpdate: any;
+};
 
 const formData = ref<ApplicationForm>({
   name: "",
diff --git a/frontend/web/src/views/module_example/demo/index.vue b/frontend/web/src/views/module_example/demo/index.vue
index 3275ad31..3b4e077a 100644
--- a/frontend/web/src/views/module_example/demo/index.vue
+++ b/frontend/web/src/views/module_example/demo/index.vue
@@ -77,7 +77,7 @@
           max-height="70vh"
         >
           <template #i="{ row }">
-            <JsonPretty v-if="row?.i != null" :value="row?.i" height="140px" />
+            <FaJsonPretty v-if="row?.i != null" :value="row?.i" height="140px" />
           </template>
         </FaDescriptions>
       </template>
@@ -154,7 +154,7 @@
 
 <script setup lang="ts">
 import { useAuth } from "@/hooks/core/useAuth";
-import { renderTableOperationCell, type TableOperationAction } from "@utils/table";
+import { renderTableOperationCell, type TableOperationAction } from "@/utils/table";
 import { useTable } from "@/hooks/core/useTable";
 import { useImportExport } from "@/hooks/core/useImportExport";
 import { useCrudDialog } from "@/hooks/core/useCrudDialog";
@@ -164,6 +164,7 @@ import { cleanEmptyArrayParams, stripPaginationParams } from "@/utils/query";
 import type { IContentConfig, IObject } from "@/components/modal/types";
 import type { AuditSearchFormParams } from "@/components/forms/fa-search-bar/auditSearchFormItems";
 import type { FormItem } from "@/components/forms/fa-form/index.vue";
+import FaJsonPretty from "@/components/others/fa-json-pretty/index.vue";
 import type { ColumnOption } from "@/types/component";
 import DemoAPI, {
   type DemoForm,
@@ -171,6 +172,7 @@ import DemoAPI, {
   type DemoTable,
 } from "@/api/module_example/demo";
 import { ResultEnum } from "@/enums/api/result.enum";
+import { ElTag, ElMessage } from "element-plus";
 
 defineOptions({
   name: "Demo",
@@ -200,7 +202,7 @@ const searchForm = ref<DemoSearchFormParams>({
 /** 搜索区域默认展开展示 */
 const showSearchBar = ref(true);
 
-const searchBarRef = ref<InstanceType<typeof FaSearchBarWithAudit> | null>(null);
+const searchBarRef = ref<{ validate: () => Promise<boolean> } | null>(null);
 const searchBarRules: Record<string, unknown> = {};
 const statusOptions = ref([
   { label: "启用", value: "0" },
@@ -294,7 +296,7 @@ const {
         minWidth: 160,
         formatter: (row: DemoTable) => {
           if (row.i == null) return h("span", { class: "text-g-500" }, "—");
-          return h(JsonPretty, { value: row.i, height: "120px" });
+          return h(FaJsonPretty, { value: row.i, height: "120px" });
         },
       },
       { prop: "description", label: "描述", minWidth: 120, showOverflowTooltip: true },
@@ -491,7 +493,11 @@ const rules = reactive({
   status: [{ required: true, message: "请选择状态", trigger: "blur" }],
 });
 
-const dataFormRef = ref<InstanceType<typeof FaForm> | null>(null);
+const dataFormRef = ref<{
+  resetFields: () => void;
+  clearValidate: () => void;
+  validate: (cb: (valid: boolean) => void) => void;
+} | null>(null);
 const submitLoading = ref(false);
 const demoFormRenderKey = ref(0);
 const metadataList = ref<{ key: string; value: string }[]>([]);
diff --git a/frontend/web/src/views/module_example/demo01/index.vue b/frontend/web/src/views/module_example/demo01/index.vue
index 19e42c1c..3cb1db0a 100644
--- a/frontend/web/src/views/module_example/demo01/index.vue
+++ b/frontend/web/src/views/module_example/demo01/index.vue
@@ -124,7 +124,7 @@
 
 <script setup lang="ts">
 import { useAuth } from "@/hooks/core/useAuth";
-import { renderTableOperationCell, type TableOperationAction } from "@utils/table";
+import { renderTableOperationCell, type TableOperationAction } from "@utils";
 import { useTable } from "@/hooks/core/useTable";
 import { useImportExport } from "@/hooks/core/useImportExport";
 import { useCrudDialog } from "@/hooks/core/useCrudDialog";
@@ -133,6 +133,8 @@ import { confirmDelete, confirmBatchDelete, confirmAction } from "@/hooks/core/u
 import { cleanEmptyArrayParams, stripPaginationParams } from "@/utils/query";
 import type { IContentConfig, IObject } from "@/components/modal/types";
 import type { AuditSearchFormParams } from "@/components/forms/fa-search-bar/auditSearchFormItems";
+import FaSearchBarWithAudit from "@/components/forms/fa-search-bar/FaSearchBarWithAudit.vue";
+import FaForm from "@/components/forms/fa-form/index.vue";
 import type { FormItem } from "@/components/forms/fa-form/index.vue";
 import type { ColumnOption } from "@/types/component";
 import Demo01API, {
@@ -141,6 +143,7 @@ import Demo01API, {
   type Demo01Table,
 } from "@/api/module_example/demo01";
 import { ResultEnum } from "@/enums/api/result.enum";
+import { ElTag, ElMessage } from "element-plus";
 
 defineOptions({
   name: "ModuleExampleDemo01",
diff --git a/frontend/web/src/views/module_generator/gencode/components/CreateTableDialog.vue b/frontend/web/src/views/module_generator/gencode/components/FaCreateTableDialog.vue
similarity index 95%
rename from frontend/web/src/views/module_generator/gencode/components/CreateTableDialog.vue
rename to frontend/web/src/views/module_generator/gencode/components/FaCreateTableDialog.vue
index 5dbc629c..59eaea73 100644
--- a/frontend/web/src/views/module_generator/gencode/components/CreateTableDialog.vue
+++ b/frontend/web/src/views/module_generator/gencode/components/FaCreateTableDialog.vue
@@ -7,7 +7,7 @@
     dialog-class="create-table-dialog"
     @opened="onDialogOpened"
   >
-    <ElAlert type="info" :closable="false" show-icon class="mb-3 !items-start">
+    <ElAlert type="info" :closable="false" show-icon class="mb-3 items-start!">
       <template #title>
         <span class="text-sm leading-relaxed">
           <template v-if="editMode === 'visual'">
@@ -19,7 +19,7 @@
     </ElAlert>
 
     <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>
+      <span class="text-sm text-(--el-text-color-regular) shrink-0">方式</span>
       <ElRadioGroup v-model="editMode" size="small">
         <ElRadioButton value="visual">表结构（推荐）</ElRadioButton>
         <ElRadioButton value="sql">写 SQL</ElRadioButton>
@@ -42,7 +42,7 @@
             </ElDropdownMenu>
           </template>
         </ElDropdown>
-        <span class="text-xs text-[var(--el-text-color-secondary)]">从模板开始比自己写更省事</span>
+        <span class="text-xs text-(--el-text-color-secondary)">从模板开始比自己写更省事</span>
       </div>
       <ElScrollbar max-height="min(52vh, 420px)" class="sql-editor-scroll">
         <div class="absolute z-36 right-5 top-2">
@@ -67,7 +67,7 @@
         <div class="visual-structure max-w-3xl">
           <FaDescriptions :column="1" size="small" class="visual-desc" :scrollbar="false">
             <template #title>
-              <span class="text-sm font-medium text-[var(--el-text-color-primary)]">选项</span>
+              <span class="text-sm font-medium text-(--el-text-color-primary)">选项</span>
             </template>
             <ElDescriptionsItem label="数据库" label-class-name="visual-desc-label">
               <ElRadioGroup v-model="visual.dialect" size="small">
@@ -85,11 +85,11 @@
 
           <FaDescriptions :column="1" size="small" class="visual-desc mt-3" :scrollbar="false">
             <template #title>
-              <span class="text-sm font-medium text-[var(--el-text-color-primary)]">主表</span>
+              <span class="text-sm font-medium text-(--el-text-color-primary)">主表</span>
             </template>
             <ElDescriptionsItem label-class-name="visual-desc-label">
               <template #label>
-                <span class="text-[var(--el-color-danger)]">*</span>
+                <span class="text-(--el-color-danger)">*</span>
                 表名
               </template>
               <ElInput
@@ -111,11 +111,11 @@
             :scrollbar="false"
           >
             <template #title>
-              <span class="text-sm font-medium text-[var(--el-text-color-primary)]">子表</span>
+              <span class="text-sm font-medium text-(--el-text-color-primary)">子表</span>
             </template>
             <ElDescriptionsItem label-class-name="visual-desc-label">
               <template #label>
-                <span class="text-[var(--el-color-danger)]">*</span>
+                <span class="text-(--el-color-danger)">*</span>
                 表名
               </template>
               <ElInput
@@ -145,7 +145,7 @@
             </ElLink>
           </div>
         </div>
-        <p class="mb-1 mt-2 text-xs text-[var(--el-text-color-secondary)]">
+        <p class="mb-1 mt-2 text-xs text-(--el-text-color-secondary)">
           将要执行的 SQL（随上面表格自动更新）
         </p>
         <ElInput
diff --git a/frontend/web/src/views/module_generator/gencode/components/GenBasicStep.vue b/frontend/web/src/views/module_generator/gencode/components/FaGenBasicStep.vue
similarity index 95%
rename from frontend/web/src/views/module_generator/gencode/components/GenBasicStep.vue
rename to frontend/web/src/views/module_generator/gencode/components/FaGenBasicStep.vue
index 2d3b80fb..7e3e9fad 100644
--- a/frontend/web/src/views/module_generator/gencode/components/GenBasicStep.vue
+++ b/frontend/web/src/views/module_generator/gencode/components/FaGenBasicStep.vue
@@ -229,8 +229,9 @@ import { GENCODE_BASIC_FORM_KEY } from "../gencodeInjectionKeys";
 
 defineOptions({ name: "GenBasicStep" });
 
+const info = defineModel<GenTableSchema>("info", { required: true });
+
 const props = defineProps<{
-  info: GenTableSchema;
   rules: FormRules;
   menuOptions: OptionType[];
 }>();
@@ -247,7 +248,7 @@ function findOptionByValue(options: OptionType[], value: number | string): any |
 }
 
 function inferPackageNameFromParentMenu(): string | null {
-  const pid = props.info.parent_menu_id;
+  const pid = info.value.parent_menu_id;
   if (pid == null) return null;
   const node = findOptionByValue(props.menuOptions || [], pid);
   const routePath = (node?.route_path ?? "").toString().trim();
@@ -258,12 +259,12 @@ function inferPackageNameFromParentMenu(): string | null {
 }
 
 const effectivePackageName = computed(() => {
-  return inferPackageNameFromParentMenu() || (props.info.package_name || "").trim();
+  return inferPackageNameFromParentMenu() || (info.value.package_name || "").trim();
 });
 
 const permissionPreview = computed(() => {
   const pkg = effectivePackageName.value;
-  const mod = (props.info.module_name || "").trim();
+  const mod = (info.value.module_name || "").trim();
   if (!pkg || !mod) return "<module_xxx>:<module>:<操作>";
   // 与后端 permission_prefix + 模板一致；第三段为操作类型，示例用 query
   return `${pkg}:${mod}:query`;
@@ -271,21 +272,21 @@ const permissionPreview = computed(() => {
 
 const backendModuleDirPreview = computed(() => {
   const pkg = effectivePackageName.value;
-  const mod = (props.info.module_name || "").trim();
+  const mod = (info.value.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();
+  const mod = (info.value.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();
+  const mod = (info.value.module_name || "").trim();
   if (!pkg || !mod) return "frontend/src/api/<module_xxx>/<module>.ts";
   return `frontend/src/api/${pkg}/${mod}.ts`;
 });
@@ -312,13 +313,13 @@ function slugFromTableName(table: string): string {
 }
 
 watch(
-  () => [props.info.parent_menu_id, props.info.module_name, props.info.table_name] as const,
+  () => [info.value.parent_menu_id, info.value.module_name, info.value.table_name] as const,
   () => {
-    if (props.info.parent_menu_id != null) return;
-    const current = (props.info.package_name || "").trim();
+    if (info.value.parent_menu_id != null) return;
+    const current = (info.value.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 mod = (info.value.module_name || "").trim();
+    const tn = (info.value.table_name || "").trim();
     const slug = tn ? slugFromTableName(tn) : "";
     const next = mod
       ? mod.startsWith("module_")
@@ -327,7 +328,7 @@ watch(
       : slug
         ? `module_${slug}`
         : "";
-    if (next) props.info.package_name = next;
+    if (next) info.value.package_name = next;
   },
   { immediate: true }
 );
diff --git a/frontend/web/src/views/module_generator/gencode/components/GenCodeDrawer.vue b/frontend/web/src/views/module_generator/gencode/components/FaGenCodeDrawer.vue
similarity index 94%
rename from frontend/web/src/views/module_generator/gencode/components/GenCodeDrawer.vue
rename to frontend/web/src/views/module_generator/gencode/components/FaGenCodeDrawer.vue
index d8177762..72748b7c 100644
--- a/frontend/web/src/views/module_generator/gencode/components/GenCodeDrawer.vue
+++ b/frontend/web/src/views/module_generator/gencode/components/FaGenCodeDrawer.vue
@@ -16,7 +16,7 @@
     <div class="gencode-drawer-step-wrap mt-4">
       <div v-show="activeStep === 0">
         <GenBasicStep
-          :info="info"
+          v-model:info="info"
           :rules="rules"
           :menu-options="menuOptions"
           @clear-master-sub="emit('clear-master-sub')"
@@ -26,7 +26,7 @@
 
       <div v-show="activeStep === 1">
         <GenColumnsStep
-          :info="info"
+          v-model:info="info"
           :dict-options="dictOptions"
           :loading="loading"
           :bulk-set="bulkSet"
@@ -101,14 +101,15 @@ import type { GenTableSchema } from "@/api/module_generator/gencode";
 import type { DictTable } from "@/api/module_system/dict";
 import FaDrawer from "@/components/modal/fa-drawer/index.vue";
 import type { TreeNode } from "../types";
-import GenBasicStep from "./GenBasicStep.vue";
-import GenColumnsStep from "./GenColumnsStep.vue";
-import GenPreviewStep from "./GenPreviewStep.vue";
+import GenBasicStep from "./FaGenBasicStep.vue";
+import GenColumnsStep from "./FaGenColumnsStep.vue";
+import GenPreviewStep from "./FaGenPreviewStep.vue";
 
 defineOptions({ name: "GenCodeDrawer" });
 
+const info = defineModel<GenTableSchema>("info", { required: true });
+
 const props = defineProps<{
-  info: GenTableSchema;
   rules: FormRules;
   activeStep: number;
   menuOptions: OptionType[];
diff --git a/frontend/web/src/views/module_generator/gencode/components/GenColumnsStep.vue b/frontend/web/src/views/module_generator/gencode/components/FaGenColumnsStep.vue
similarity index 97%
rename from frontend/web/src/views/module_generator/gencode/components/GenColumnsStep.vue
rename to frontend/web/src/views/module_generator/gencode/components/FaGenColumnsStep.vue
index 45d90f13..730b940f 100644
--- a/frontend/web/src/views/module_generator/gencode/components/GenColumnsStep.vue
+++ b/frontend/web/src/views/module_generator/gencode/components/FaGenColumnsStep.vue
@@ -254,8 +254,9 @@ import type { DictTable } from "@/api/module_system/dict";
 
 defineOptions({ name: "GenColumnsStep" });
 
-const props = defineProps<{
-  info: GenTableSchema;
+const info = defineModel<GenTableSchema>("info", { required: true });
+
+defineProps<{
   dictOptions: DictTable[];
   loading: boolean;
   bulkSet: (field: string | string[], value: unknown) => void;
@@ -273,15 +274,14 @@ const tableHeight = computed(() => {
 });
 
 const columnsModel = computed({
-  get: () => props.info.columns || [],
+  get: () => info.value.columns || [],
   set: (v) => {
-    // props.info 是父组件传入的 reactive 对象，可以直接回写
-    props.info.columns = v as GenTableColumnSchema[];
+    info.value.columns = v as GenTableColumnSchema[];
   },
 });
 
 const displayColumns = computed(() => {
-  const cols = props.info.columns || [];
+  const cols = info.value.columns || [];
   const q = columnKeyword.value.trim().toLowerCase();
   if (!q) return cols;
   return cols.filter((c) => {
@@ -330,7 +330,7 @@ onMounted(() => {
 });
 
 watch(
-  () => [columnKeyword.value, (props.info.columns || []).length],
+  () => [columnKeyword.value, (info.value.columns || []).length],
   async () => {
     await setupRowDraggable();
   }
diff --git a/frontend/web/src/views/module_generator/gencode/components/GenPreviewStep.vue b/frontend/web/src/views/module_generator/gencode/components/FaGenPreviewStep.vue
similarity index 98%
rename from frontend/web/src/views/module_generator/gencode/components/GenPreviewStep.vue
rename to frontend/web/src/views/module_generator/gencode/components/FaGenPreviewStep.vue
index 5a497cae..cf969f0a 100644
--- a/frontend/web/src/views/module_generator/gencode/components/GenPreviewStep.vue
+++ b/frontend/web/src/views/module_generator/gencode/components/FaGenPreviewStep.vue
@@ -92,8 +92,7 @@ import Codemirror from "codemirror-editor-vue3";
 import type { EditorConfiguration } from "codemirror";
 import type { CmComponentRef } from "codemirror-editor-vue3";
 import FaSvgIcon from "@/components/base/fa-svg-icon/index.vue";
-import { resolveLocalIconUrl } from "@utils/icons";
-import { resolveIconForFaSvgIcon } from "@utils/menuIcon/index";
+import { resolveLocalIconUrl, resolveIconForFaSvgIcon } from "@utils";
 import { CopyDocument } from "@element-plus/icons-vue";
 import { GENCODE_CM_KEY } from "../gencodeInjectionKeys";
 import type { TreeNode } from "../types";
diff --git a/frontend/web/src/views/module_generator/gencode/components/GencodeHelpPanel.vue b/frontend/web/src/views/module_generator/gencode/components/FaGencodeHelpPanel.vue
similarity index 100%
rename from frontend/web/src/views/module_generator/gencode/components/GencodeHelpPanel.vue
rename to frontend/web/src/views/module_generator/gencode/components/FaGencodeHelpPanel.vue
diff --git a/frontend/web/src/views/module_generator/gencode/components/ImportDbTableDialog.vue b/frontend/web/src/views/module_generator/gencode/components/FaImportDbTableDialog.vue
similarity index 100%
rename from frontend/web/src/views/module_generator/gencode/components/ImportDbTableDialog.vue
rename to frontend/web/src/views/module_generator/gencode/components/FaImportDbTableDialog.vue
diff --git a/frontend/web/src/views/module_generator/gencode/index.vue b/frontend/web/src/views/module_generator/gencode/index.vue
index cfd6f575..8de5becd 100644
--- a/frontend/web/src/views/module_generator/gencode/index.vue
+++ b/frontend/web/src/views/module_generator/gencode/index.vue
@@ -84,14 +84,14 @@
       />
     </ElCard>
 
-    <CreateTableDialog
+    <FaCreateTableDialog
       v-model="createTableVisible"
       :loading="loading"
       :link-from-gen="createTableLinkFromGen"
       @submit="handleCreateTableSubmit"
     />
 
-    <ImportDbTableDialog
+    <FaImportDbTableDialog
       ref="importDbDialogRef"
       v-model="importVisible"
       v-model:query="formData"
@@ -105,12 +105,12 @@
       @selection-change="handleImportTableSelectionChange"
     />
 
-    <GenCodeDrawer
+    <FaGenCodeDrawer
       v-model="editVisible"
       v-model:preview-scope="previewScope"
       v-model:preview-types="previewTypes"
       v-model:code="code"
-      :info="info"
+      v-model:info="info"
       :rules="rules"
       :active-step="activeStep"
       :menu-options="menuOptions"
@@ -164,13 +164,14 @@ import FaTable from "@/components/tables/fa-table/index.vue";
 import FaTableHeader from "@/components/tables/fa-table-header/index.vue";
 import FaSearchBar from "@/components/forms/fa-search-bar/index.vue";
 import type { SearchFormItem } from "@/components/forms/fa-search-bar/index.vue";
+import FaGenCodeDrawer from "./components/FaGenCodeDrawer.vue";
+import FaImportDbTableDialog from "./components/FaImportDbTableDialog.vue";
+import { CreateTableSubmitMeta } from "./components/FaCreateTableDialog.vue";
+import FaCreateTableDialog from "./components/FaCreateTableDialog.vue";
+import { GENCODE_BASIC_FORM_KEY, GENCODE_CM_KEY } from "./gencodeInjectionKeys";
 import type { ColumnOption } from "@/types/component";
 import { useAuth } from "@/hooks/core/useAuth";
-import { renderTableOperationCell, type TableOperationAction } from "@utils/table";
-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 { renderTableOperationCell, type TableOperationAction } from "@utils";
 import type { TreeNode } from "./types";
 
 // 文件数据接口
@@ -184,7 +185,7 @@ interface FileData {
 // 组件引用（与子组件 inject 同步，供校验 / CodeMirror 主题）
 const cmRef = ref<CmComponentRef>();
 const basicInfo = ref<FormInstance>();
-const importDbDialogRef = ref<InstanceType<typeof ImportDbTableDialog>>();
+const importDbDialogRef = ref<InstanceType<typeof FaImportDbTableDialog>>();
 /** FaTable：勾选清空（删除后） */
 const faTableRef = ref<{ elTableRef?: { clearSelection: () => void } } | null>(null);
 
@@ -1038,7 +1039,7 @@ async function handleImportReset(): Promise<void> {
 }
 
 // 表单数据（后端返回字段可能含 null，这里做更宽松的承载，避免 TS 因类型收窄报错）
-const info = reactive<
+let info = reactive<
   GenTableSchema & {
     sub_table_name?: string | null;
     sub_table_fk_name?: string | null;
diff --git a/frontend/web/src/views/module_monitor/online/index.vue b/frontend/web/src/views/module_monitor/online/index.vue
index dd2ff0a0..a74a2951 100644
--- a/frontend/web/src/views/module_monitor/online/index.vue
+++ b/frontend/web/src/views/module_monitor/online/index.vue
@@ -62,15 +62,16 @@ defineOptions({
 
 import { h, ref, computed } from "vue";
 import { useTable } from "@/hooks/core/useTable";
-import FaTable from "@/components/tables/fa-table/index.vue";
-import FaTableHeader from "@/components/tables/fa-table-header/index.vue";
-import FaSearchBar from "@/components/forms/fa-search-bar/index.vue";
-import type { SearchFormItem } from "@/components/forms/fa-search-bar/index.vue";
-import CopyButton from "@/components/others/fa-copy-button/index.vue";
 import OnlineAPI, { type OnlineUserTable } from "@/api/module_monitor/online";
 import type { ColumnOption } from "@/types/component";
 import { ElMessage, ElMessageBox, ElTooltip } from "element-plus";
 import { useAuth } from "@/hooks/core/useAuth";
+import FaTable from "@/components/tables/fa-table/index.vue";
+import FaTableHeader from "@/components/tables/fa-table-header/index.vue";
+import FaSearchBar from "@/components/forms/fa-search-bar/index.vue";
+import type { SearchFormItem } from "@/components/forms/fa-search-bar/index.vue";
+import FaCopyButton from "@/components/others/fa-copy-button/index.vue";
+import FaButtonTable from "@/components/forms/fa-button-table/index.vue";
 
 const { hasAuth } = useAuth();
 
@@ -185,7 +186,7 @@ const {
           h("span", { class: "inline-flex items-center flex-wrap gap-0.5" }, [
             row.ipaddr ?? "",
             row.ipaddr
-              ? h(CopyButton, {
+              ? h(FaCopyButton, {
                   text: row.ipaddr,
                   style: { marginLeft: "2px" },
                 })
diff --git a/frontend/web/src/views/module_monitor/resource/index.vue b/frontend/web/src/views/module_monitor/resource/index.vue
index 70b6bced..9bba8e05 100644
--- a/frontend/web/src/views/module_monitor/resource/index.vue
+++ b/frontend/web/src/views/module_monitor/resource/index.vue
@@ -218,14 +218,15 @@ import {
   UploadFilled,
 } from "@element-plus/icons-vue";
 import { useTable } from "@/hooks/core/useTable";
+import { ResourceAPI, type ResourceItem } from "@/api/module_monitor/resource";
+import type { ColumnOption } from "@/types/component";
+import { useAuth } from "@/hooks/core/useAuth";
 import FaTable from "@/components/tables/fa-table/index.vue";
 import FaTableHeader from "@/components/tables/fa-table-header/index.vue";
 import FaSearchBar from "@/components/forms/fa-search-bar/index.vue";
 import type { SearchFormItem } from "@/components/forms/fa-search-bar/index.vue";
 import FaDialog from "@/components/modal/fa-dialog/index.vue";
-import { ResourceAPI, type ResourceItem } from "@/api/module_monitor/resource";
-import type { ColumnOption } from "@/types/component";
-import { useAuth } from "@/hooks/core/useAuth";
+import FaButtonTable from "@/components/forms/fa-button-table/index.vue";
 
 const { hasAuth } = useAuth();
 
diff --git a/frontend/web/src/views/module_system/auth/login/index.vue b/frontend/web/src/views/module_system/auth/login/index.vue
old mode 100755
new mode 100644
index d545ceb9..90674de8
--- a/frontend/web/src/views/module_system/auth/login/index.vue
+++ b/frontend/web/src/views/module_system/auth/login/index.vue
@@ -1,26 +1,26 @@
 <!-- 登录页：顶栏固定；仅插画列与表单区随布局切换 -->
 <template>
   <div class="login-page-root flex h-screen w-full flex-col overflow-hidden">
-    <LoginCenterBackdrop v-if="panelAlign === 'center'" viewport-fixed />
+    <FaLoginCenterBackdrop 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 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 />
+        <FaLoginLeftView 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)]'"
+        :class="panelAlign === 'center' ? 'bg-transparent' : 'bg-(--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]"
+          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-18"
         >
           <div
             class="login-page-panel__scroll min-h-0 flex-1 overflow-y-auto overflow-x-hidden pb-6 [-webkit-overflow-scrolling:touch]"
@@ -43,11 +43,11 @@
 
                   <template v-if="authPanel === 'login'">
                     <template v-if="loginFlowMode === 'account'">
-                      <LoginAccountForm
+                      <FaLoginAccountForm
                         ref="accountFormRef"
                         v-model:is-passing="isPassing"
                         v-model:is-click-pass="isClickPass"
-                        :login-form="loginForm"
+                        v-model:login-form="loginForm"
                         :rules="rules"
                         :captcha-state="captchaState"
                         :code-loading="codeLoading"
@@ -68,24 +68,24 @@
                       />
                     </template>
 
-                    <LoginMobilePanel
+                    <FaLoginMobilePanel
                       v-else-if="loginFlowMode === 'mobile'"
                       @back="backToAccountLogin"
                       @register="setAuthPanel('register')"
                     />
 
-                    <LoginQrPanel
+                    <FaLoginQrPanel
                       v-else-if="loginFlowMode === 'qr'"
                       @back="backToAccountLogin"
                       @register="setAuthPanel('register')"
                     />
                   </template>
 
-                  <LoginRegisterPanel
+                  <FaLoginRegisterPanel
                     v-else-if="authPanel === 'register'"
                     ref="registerPanelRef"
                     v-model:register-agreement-read="registerAgreementRead"
-                    :register-form="registerForm"
+                    v-model:register-form="registerForm"
                     :register-rules="registerRules"
                     :form-key="formKey"
                     :register-loading="registerLoading"
@@ -94,10 +94,10 @@
                     @to-login="setAuthPanel('login')"
                   />
 
-                  <LoginForgetPanel
+                  <FaLoginForgetPanel
                     v-else
                     ref="forgetPanelRef"
-                    :forget-form="forgetForm"
+                    v-model:forget-form="forgetForm"
                     :forget-rules="forgetRules"
                     :form-key="formKey"
                     :forget-loading="forgetLoading"
@@ -110,7 +110,7 @@
           </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="login-page-footer login-page-footer--pinned 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">
@@ -171,21 +171,16 @@ import AuthAPI, {
   type OAuthProvider,
 } from "@/api/module_system/auth";
 import UserAPI, { type ForgetPasswordForm, type RegisterForm } from "@/api/module_system/user";
-import { useConfigStore } from "@stores/modules/config.store";
-import { useAppStore } from "@stores/modules/app.store";
-import { useSettingsStore } from "@stores/modules/setting.store";
-import { useUserStore } from "@stores/modules/user.store";
-import { Auth } from "@utils/auth";
-import { HttpError } from "@utils/http";
-import { startOAuthLogin } from "@utils/oauth";
+import { useConfigStore, useAppStore, useSettingsStore, useUserStore } from "@stores";
+import { Auth, HttpError, startOAuthLogin } from "@utils";
 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";
+import FaLoginAccountForm from "@/components/views/fa-login/FaLoginAccountForm.vue";
+import FaLoginForgetPanel from "@/components/views/fa-login/FaLoginForgetPanel.vue";
+import FaLoginMobilePanel from "@/components/views/fa-login/FaLoginMobilePanel.vue";
+import FaLoginQrPanel from "@/components/views/fa-login/FaLoginQrPanel.vue";
+import FaLoginRegisterPanel from "@/components/views/fa-login/FaLoginRegisterPanel.vue";
+import { useLoginPanelAlign } from "@/components/views/fa-login/useLoginPanelAlign";
 
 defineOptions({ name: "Login" });
 
@@ -360,9 +355,9 @@ 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 accountFormRef = ref<InstanceType<typeof FaLoginAccountForm> | null>(null);
+const registerPanelRef = ref<InstanceType<typeof FaLoginRegisterPanel> | null>(null);
+const forgetPanelRef = ref<InstanceType<typeof FaLoginForgetPanel> | null>(null);
 
 const loading = ref(false);
 const registerLoading = ref(false);
@@ -552,6 +547,10 @@ onMounted(async () => {
   setupAccount("super");
   await configStore.getConfig();
   await tryConsumeOAuthCallback();
+  if (userStore.isLogin) {
+    await router.replace(resolveRedirectTarget(route.query));
+    return;
+  }
   getCaptcha();
   voteTimer = setTimeout(showVoteNotification, 500);
 });
@@ -659,7 +658,7 @@ async function submitForget() {
 </script>
 
 <style scoped>
-@import "./style.css";
+@import "@styles/fa-login.css";
 </style>
 
 <style lang="scss" scoped>
diff --git a/frontend/web/src/views/module_system/dept/index.vue b/frontend/web/src/views/module_system/dept/index.vue
index 6bbd4865..393750b8 100644
--- a/frontend/web/src/views/module_system/dept/index.vue
+++ b/frontend/web/src/views/module_system/dept/index.vue
@@ -117,12 +117,14 @@ import DeptAPI, {
   type DeptPageQuery,
   type DeptTable,
 } from "@/api/module_system/dept";
-import type { SearchFormItem } from "@/components/forms/fa-search-bar/index.vue";
-import type { FormItem } from "@/components/forms/fa-form/index.vue";
 import { useAuth } from "@/hooks/core/useAuth";
 import { useUserStore } from "@stores";
-import { formatTree } from "@utils/common";
-import { renderTableOperationCell, type TableOperationAction } from "@utils/table";
+import { formatTree, renderTableOperationCell, type TableOperationAction } from "@utils";
+import type { SearchFormItem } from "@/components/forms/fa-search-bar/index.vue";
+import type { FormItem } from "@/components/forms/fa-form/index.vue";
+import FaSearchBar from "@/components/forms/fa-search-bar/index.vue";
+import FaForm from "@/components/forms/fa-form/index.vue";
+import { ElTag, ElMessage } from "element-plus";
 
 defineOptions({
   name: "Dept",
diff --git a/frontend/web/src/views/module_system/dict/components/DataDrawer.vue b/frontend/web/src/views/module_system/dict/components/DataDrawer.vue
index 662308f4..b0e9ec6d 100644
--- a/frontend/web/src/views/module_system/dict/components/DataDrawer.vue
+++ b/frontend/web/src/views/module_system/dict/components/DataDrawer.vue
@@ -202,9 +202,6 @@ import { useCrudDialog } from "@/hooks/core/useCrudDialog";
 import { useTableSelection } from "@/hooks/core/useTableSelection";
 import { confirmDelete, confirmBatchDelete, confirmToggleStatus } from "@/hooks/core/useConfirm";
 import { cleanEmptyArrayParams, stripPaginationParams } from "@/utils/query";
-import type { IObject } from "@/components/modal/types";
-import type { SearchFormItem } from "@/components/forms/fa-search-bar/index.vue";
-import type { FormItem } from "@/components/forms/fa-form/index.vue";
 import type { ColumnOption } from "@/types/component";
 import DictAPI, {
   type DictDataForm,
@@ -212,10 +209,15 @@ import DictAPI, {
   type DictDataTable,
 } from "@/api/module_system/dict";
 import { useAuth } from "@/hooks/core/useAuth";
-import { renderTableOperationCell, type TableOperationAction } from "@utils/table";
-import { useDictStore } from "@stores";
-import { useAppStore } from "@stores/modules/app.store";
+import { renderTableOperationCell, type TableOperationAction } from "@utils";
+import { useAppStore, useDictStore } from "@stores";
 import { DeviceEnum } from "@/enums/settings/device.enum";
+import type { IObject } from "@/components/modal/types";
+import type { SearchFormItem } from "@/components/forms/fa-search-bar/index.vue";
+import type { FormItem } from "@/components/forms/fa-form/index.vue";
+import FaSearchBar from "@/components/forms/fa-search-bar/index.vue";
+import FaForm from "@/components/forms/fa-form/index.vue";
+import { ElTag, ElMessage } from "element-plus";
 
 defineOptions({ name: "DictDataDrawer", inheritAttrs: false });
 
diff --git a/frontend/web/src/views/module_system/dict/index.vue b/frontend/web/src/views/module_system/dict/index.vue
index f3fe3421..6393342c 100644
--- a/frontend/web/src/views/module_system/dict/index.vue
+++ b/frontend/web/src/views/module_system/dict/index.vue
@@ -133,9 +133,6 @@ import { useTableSelection } from "@/hooks/core/useTableSelection";
 import { useCrudForm } from "@/hooks/core/useCrudForm";
 import { confirmDelete, confirmBatchDelete, confirmToggleStatus } from "@/hooks/core/useConfirm";
 import { cleanEmptyArrayParams, stripPaginationParams } from "@/utils/query";
-import type { IObject } from "@/components/modal/types";
-import type { SearchFormItem } from "@/components/forms/fa-search-bar/index.vue";
-import type { FormItem } from "@/components/forms/fa-form/index.vue";
 import type { ColumnOption } from "@/types/component";
 import DictAPI, {
   type DictForm,
@@ -143,9 +140,15 @@ import DictAPI, {
   type DictTable,
 } from "@/api/module_system/dict";
 import { useDictStore } from "@stores";
-import DataDrawer from "@views/module_system/dict/components/DataDrawer.vue";
 import { useAuth } from "@/hooks/core/useAuth";
-import { renderTableOperationCell, type TableOperationAction } from "@utils/table";
+import { renderTableOperationCell, type TableOperationAction } from "@utils";
+import type { IObject } from "@/components/modal/types";
+import type { SearchFormItem } from "@/components/forms/fa-search-bar/index.vue";
+import type { FormItem } from "@/components/forms/fa-form/index.vue";
+import FaSearchBar from "@/components/forms/fa-search-bar/index.vue";
+import FaForm from "@/components/forms/fa-form/index.vue";
+import DataDrawer from "./components/DataDrawer.vue";
+import { ElTag, ElMessage } from "element-plus";
 
 defineOptions({
   name: "Dict",
diff --git a/frontend/web/src/views/module_system/log/index.vue b/frontend/web/src/views/module_system/log/index.vue
index bc74d70e..4e382a70 100644
--- a/frontend/web/src/views/module_system/log/index.vue
+++ b/frontend/web/src/views/module_system/log/index.vue
@@ -17,7 +17,7 @@
       @reset="onResetSearch"
     >
       <template #created_id>
-        <UserTableSelect
+        <FaUserTableSelect
           :model-value="searchForm.created_id == null ? undefined : searchForm.created_id"
           @update:model-value="(v: number | undefined) => (searchForm.created_id = v)"
           @confirm-click="afterUserSelectSearch"
@@ -93,10 +93,10 @@
           </ElTag>
         </template>
         <template #request_payload="{ row }">
-          <JsonPretty :value="row?.request_payload as any" height="80px" />
+          <FaJsonPretty :value="row?.request_payload as any" height="80px" />
         </template>
         <template #response_json="{ row }">
-          <JsonPretty :value="row?.response_json as any" height="140px" />
+          <FaJsonPretty :value="row?.response_json as any" height="140px" />
         </template>
       </FaDescriptions>
     </FaDialog>
@@ -118,13 +118,16 @@ import { useCrudDialog } from "@/hooks/core/useCrudDialog";
 import { useTableSelection } from "@/hooks/core/useTableSelection";
 import { confirmDelete, confirmBatchDelete } from "@/hooks/core/useConfirm";
 import { cleanEmptyArrayParams, stripPaginationParams } from "@/utils/query";
-import type { IObject } from "@/components/modal/types";
-import type { SearchFormItem } from "@/components/forms/fa-search-bar/index.vue";
 import type { ColumnOption } from "@/types/component";
 import LogAPI, { type LogPageQuery, type LogTable } from "@/api/module_system/log";
 import { useAuth } from "@/hooks/core/useAuth";
-import { renderTableOperationCell, type TableOperationAction } from "@utils/table";
-import UserTableSelect from "@views/module_system/user/components/UserTableSelect.vue";
+import { renderTableOperationCell, type TableOperationAction } from "@utils";
+import type { IObject } from "@/components/modal/types";
+import type { SearchFormItem } from "@/components/forms/fa-search-bar/index.vue";
+import FaUserTableSelect from "@/components/forms/fa-search-bar/FaUserTableSelect.vue";
+import FaSearchBar from "@/components/forms/fa-search-bar/index.vue";
+import FaCopyButton from "@/components/others/fa-copy-button/index.vue";
+import { ElTag, ElMessage } from "element-plus";
 
 defineOptions({
   name: "Log",
@@ -278,7 +281,7 @@ const {
           h("span", { class: "inline-flex items-center flex-wrap gap-0.5" }, [
             row.request_ip ?? "",
             row.request_ip
-              ? h(CopyButton, {
+              ? h(FaCopyButton, {
                   text: row.request_ip,
                   style: { marginLeft: "2px" },
                 })
diff --git a/frontend/web/src/views/module_system/menu/index.vue b/frontend/web/src/views/module_system/menu/index.vue
index 05d0b3f2..9d516a62 100644
--- a/frontend/web/src/views/module_system/menu/index.vue
+++ b/frontend/web/src/views/module_system/menu/index.vue
@@ -97,7 +97,7 @@
           </template>
           <template #icon="{ row }">
             <template v-if="row?.icon">
-              <MenuRouteIcon :icon="row?.icon as string" :style="'vertical-align: -0.15em'" />
+              <FaMenuRouteIcon :icon="row?.icon as string" :style="'vertical-align: -0.15em'" />
             </template>
           </template>
         </FaDescriptions>
@@ -316,8 +316,7 @@ defineOptions({
 });
 
 import { CirclePlusFilled, DeleteFilled } from "@element-plus/icons-vue";
-import { useAppStore } from "@stores/modules/app.store";
-import { useUserStore } from "@stores/modules/user.store";
+import { useAppStore, useUserStore } from "@stores";
 import { DeviceEnum } from "@/enums/settings/device.enum";
 import { useTableColumns } from "@/hooks/core/useTableColumns";
 import MenuAPI, {
@@ -327,10 +326,14 @@ import MenuAPI, {
 } from "@/api/module_system/menu";
 import { MenuClientEnum, MenuTypeEnum } from "@/enums/system/menu.enum";
 import { formatTree } from "@utils/common";
+import { useAuth } from "@/hooks/core/useAuth";
+import { renderTableOperationCell, type TableOperationAction } from "@utils";
 import type { SearchFormItem } from "@/components/forms/fa-search-bar/index.vue";
 import type { FormItem } from "@/components/forms/fa-form/index.vue";
-import { useAuth } from "@/hooks/core/useAuth";
-import { renderTableOperationCell, type TableOperationAction } from "@utils/table";
+import FaSearchBar from "@/components/forms/fa-search-bar/index.vue";
+import FaForm from "@/components/forms/fa-form/index.vue";
+import FaMenuRouteIcon from "@/components/others/fa-menu-routeIcon/index.vue";
+import { ElTag, ElMessage, ElMessageBox } from "element-plus";
 
 const { hasAuth } = useAuth();
 const appStore = useAppStore();
@@ -759,7 +762,7 @@ const { columnChecks, columns } = useTableColumns<MenuTable>(() => [
     align: "center",
     formatter: (row: MenuTable) =>
       row.icon
-        ? h(MenuRouteIcon, { icon: row.icon, style: { verticalAlign: "-0.15em" } })
+        ? h(FaMenuRouteIcon, { icon: row.icon, style: { verticalAlign: "-0.15em" } })
         : h("span", { class: "text-g-400" }, "—"),
   },
   {
diff --git a/frontend/web/src/views/module_system/notice/index.vue b/frontend/web/src/views/module_system/notice/index.vue
index 92e190d6..5228cf65 100644
--- a/frontend/web/src/views/module_system/notice/index.vue
+++ b/frontend/web/src/views/module_system/notice/index.vue
@@ -17,7 +17,7 @@
       @reset="onResetSearch"
     >
       <template #created_id>
-        <UserTableSelect
+        <FaUserTableSelect
           :model-value="searchForm.created_id == null ? undefined : searchForm.created_id"
           @update:model-value="(v: number | undefined) => (searchForm.created_id = v)"
           @confirm-click="afterUserSelectSearch"
@@ -154,19 +154,22 @@ import { useTableSelection } from "@/hooks/core/useTableSelection";
 import { useCrudForm } from "@/hooks/core/useCrudForm";
 import { confirmDelete, confirmBatchDelete, confirmToggleStatus } from "@/hooks/core/useConfirm";
 import { cleanEmptyArrayParams, stripPaginationParams } from "@/utils/query";
-import type { IObject } from "@/components/modal/types";
-import type { SearchFormItem } from "@/components/forms/fa-search-bar/index.vue";
 import type { ColumnOption } from "@/types/component";
-import type { FormItem } from "@/components/forms/fa-form/index.vue";
 import NoticeAPI, {
   type NoticeForm,
   type NoticePageQuery,
   type NoticeTable,
 } from "@/api/module_system/notice";
 import { useAuth } from "@/hooks/core/useAuth";
-import { renderTableOperationCell, type TableOperationAction } from "@utils/table";
-import { useDictStore, useNoticeStore } from "@stores/index";
-import UserTableSelect from "@views/module_system/user/components/UserTableSelect.vue";
+import { renderTableOperationCell, type TableOperationAction } from "@utils";
+import { useDictStore, useNoticeStore } from "@stores";
+import type { IObject } from "@/components/modal/types";
+import type { SearchFormItem } from "@/components/forms/fa-search-bar/index.vue";
+import type { FormItem } from "@/components/forms/fa-form/index.vue";
+import FaUserTableSelect from "@/components/forms/fa-search-bar/FaUserTableSelect.vue";
+import FaSearchBar from "@/components/forms/fa-search-bar/index.vue";
+import FaForm from "@/components/forms/fa-form/index.vue";
+import { ElTag, ElMessage } from "element-plus";
 
 defineOptions({
   name: "Notice",
@@ -404,7 +407,7 @@ const noticeDialogFormItems = computed<FormItem[]>(() => [
     props: {
       placeholder: "请选择类型",
       clearable: true,
-      class: "!w-full max-w-md",
+      class: "w-full! max-w-md",
       options: dictStore.getDictArray("sys_notice_type").map((item) => ({
         label: item.dict_label,
         value: item.dict_value,
diff --git a/frontend/web/src/views/module_system/param/index.vue b/frontend/web/src/views/module_system/param/index.vue
index 09974392..8b214204 100644
--- a/frontend/web/src/views/module_system/param/index.vue
+++ b/frontend/web/src/views/module_system/param/index.vue
@@ -119,9 +119,6 @@ import { useTableSelection } from "@/hooks/core/useTableSelection";
 import { useCrudForm } from "@/hooks/core/useCrudForm";
 import { confirmDelete, confirmBatchDelete } from "@/hooks/core/useConfirm";
 import { cleanEmptyArrayParams, stripPaginationParams } from "@/utils/query";
-import type { IObject } from "@/components/modal/types";
-import type { SearchFormItem } from "@/components/forms/fa-search-bar/index.vue";
-import type { FormItem } from "@/components/forms/fa-form/index.vue";
 import type { ColumnOption } from "@/types/component";
 import ParamsAPI, {
   type ConfigForm,
@@ -129,8 +126,14 @@ import ParamsAPI, {
   type ConfigTable,
 } from "@/api/module_system/params";
 import { useAuth } from "@/hooks/core/useAuth";
-import { renderTableOperationCell, type TableOperationAction } from "@utils/table";
+import { renderTableOperationCell, type TableOperationAction } from "@utils";
 import { useConfigStore } from "@stores";
+import type { IObject } from "@/components/modal/types";
+import type { SearchFormItem } from "@/components/forms/fa-search-bar/index.vue";
+import type { FormItem } from "@/components/forms/fa-form/index.vue";
+import FaSearchBar from "@/components/forms/fa-search-bar/index.vue";
+import FaForm from "@/components/forms/fa-form/index.vue";
+import { ElTag, ElMessage } from "element-plus";
 
 defineOptions({
   name: "Params",
diff --git a/frontend/web/src/views/module_system/position/index.vue b/frontend/web/src/views/module_system/position/index.vue
index 859b6ad9..1b919eae 100644
--- a/frontend/web/src/views/module_system/position/index.vue
+++ b/frontend/web/src/views/module_system/position/index.vue
@@ -1,4 +1,4 @@
-<!-- 岗位管理：FA + useTable；操作列前 3 个为 ArtButtonTable，其余收入「更多」下拉 -->
+<!-- 岗位管理：FA + useTable；操作列前 3 个为 FaButtonTable，其余收入「更多」下拉 -->
 <template>
   <div class="fa-full-height">
     <FaSearchBar
@@ -17,7 +17,7 @@
       @reset="onResetSearch"
     >
       <template #created_id>
-        <UserTableSelect
+        <FaUserTableSelect
           :model-value="searchForm.created_id == null ? undefined : searchForm.created_id"
           @update:model-value="(v: number | undefined) => (searchForm.created_id = v)"
           @confirm-click="afterUserSelectSearch"
@@ -130,9 +130,6 @@ import { useTableSelection } from "@/hooks/core/useTableSelection";
 import { useCrudForm } from "@/hooks/core/useCrudForm";
 import { confirmDelete, confirmBatchDelete, confirmToggleStatus } from "@/hooks/core/useConfirm";
 import { cleanEmptyArrayParams, stripPaginationParams } from "@/utils/query";
-import type { IObject } from "@/components/modal/types";
-import type { SearchFormItem } from "@/components/forms/fa-search-bar/index.vue";
-import type { FormItem } from "@/components/forms/fa-form/index.vue";
 import type { ColumnOption } from "@/types/component";
 import PositionAPI, {
   type PositionForm,
@@ -141,7 +138,21 @@ import PositionAPI, {
 } from "@/api/module_system/position";
 import { useAuth } from "@/hooks/core/useAuth";
 import { useUserStore } from "@stores";
-import UserTableSelect from "@views/module_system/user/components/UserTableSelect.vue";
+import type { IObject } from "@/components/modal/types";
+import type { SearchFormItem } from "@/components/forms/fa-search-bar/index.vue";
+import type { FormItem } from "@/components/forms/fa-form/index.vue";
+import FaUserTableSelect from "@/components/forms/fa-search-bar/FaUserTableSelect.vue";
+import FaSearchBar from "@/components/forms/fa-search-bar/index.vue";
+import FaForm from "@/components/forms/fa-form/index.vue";
+import FaButtonTable from "@/components/forms/fa-button-table/index.vue";
+import {
+  ElTag,
+  ElMessage,
+  ElTooltip,
+  ElDropdown,
+  ElDropdownMenu,
+  ElDropdownItem,
+} from "element-plus";
 
 defineOptions({
   name: "Position",
diff --git a/frontend/web/src/views/module_system/role/components/PermissonDrawer.vue b/frontend/web/src/views/module_system/role/components/FaPermissonDrawer.vue
similarity index 98%
rename from frontend/web/src/views/module_system/role/components/PermissonDrawer.vue
rename to frontend/web/src/views/module_system/role/components/FaPermissonDrawer.vue
index 575bbc22..33da18cc 100644
--- a/frontend/web/src/views/module_system/role/components/PermissonDrawer.vue
+++ b/frontend/web/src/views/module_system/role/components/FaPermissonDrawer.vue
@@ -12,7 +12,7 @@
         <!-- 数据权限 -->
         <ElAside>
           <div
-            class="border-r-1 border-r-[var(--el-border-color-lighter)] b-r-solid h-[100%] p-[20px] box-border"
+            class="border-r border-r-(--el-border-color-lighter) b-r-solid h-full p-[20px] box-border"
           >
             <div class="flex items-center">
               <div :style="'display: flex; gap: 10px'">
@@ -151,7 +151,7 @@ import { computed, ref, watch, onMounted } from "vue";
 import { QuestionFilled, Switch as SwitchIcon } from "@element-plus/icons-vue";
 import type { TreeInstance } from "element-plus";
 import FaDrawer from "@/components/modal/fa-drawer/index.vue";
-import { listToTree, formatTree } from "@utils/common";
+import { listToTree, formatTree } from "@utils";
 import RoleAPI, {
   permissionDataType,
   permissionDeptType,
@@ -159,9 +159,9 @@ import RoleAPI, {
 } from "@/api/module_system/role";
 import DeptAPI from "@/api/module_system/dept";
 import MenuAPI from "@/api/module_system/menu";
-import { useAppStore } from "@stores/modules/app.store";
 import { DeviceEnum } from "@/enums/settings/device.enum";
-import { useUserStore } from "@stores";
+import { useAppStore, useUserStore } from "@stores";
+import { ElMessage } from "element-plus";
 
 /** formatTree 后的菜单节点带 value（同原 id），与接口里的 id 二选一存在 */
 type MenuTreeNode = permissionMenuType & { value?: number };
diff --git a/frontend/web/src/views/module_system/role/index.vue b/frontend/web/src/views/module_system/role/index.vue
index 46a2bd3c..44fa84c5 100644
--- a/frontend/web/src/views/module_system/role/index.vue
+++ b/frontend/web/src/views/module_system/role/index.vue
@@ -124,7 +124,7 @@
       </template>
     </FaDialog>
 
-    <PermissonDrawer
+    <FaPermissonDrawer
       v-if="drawerVisible"
       v-model="drawerVisible"
       :role-name="checkedRole.name"
@@ -150,10 +150,7 @@ import { useTableSelection } from "@/hooks/core/useTableSelection";
 import { useCrudForm } from "@/hooks/core/useCrudForm";
 import { confirmDelete, confirmBatchDelete, confirmToggleStatus } from "@/hooks/core/useConfirm";
 import { cleanEmptyArrayParams, stripPaginationParams } from "@/utils/query";
-import { renderTableOperationCell, type TableOperationAction } from "@utils/table";
-import type { IObject } from "@/components/modal/types";
-import type { SearchFormItem } from "@/components/forms/fa-search-bar/index.vue";
-import type { FormItem } from "@/components/forms/fa-form/index.vue";
+import { renderTableOperationCell, type TableOperationAction } from "@utils";
 import type { ColumnOption } from "@/types/component";
 import RoleAPI, {
   type RoleForm,
@@ -162,7 +159,12 @@ import RoleAPI, {
 } from "@/api/module_system/role";
 import { useAuth } from "@/hooks/core/useAuth";
 import { useUserStore } from "@stores";
-import PermissonDrawer from "./components/PermissonDrawer.vue";
+import type { IObject } from "@/components/modal/types";
+import type { SearchFormItem } from "@/components/forms/fa-search-bar/index.vue";
+import type { FormItem } from "@/components/forms/fa-form/index.vue";
+import FaSearchBar from "@/components/forms/fa-search-bar/index.vue";
+import FaForm from "@/components/forms/fa-form/index.vue";
+import { ElTag, ElMessage } from "element-plus";
 
 defineOptions({
   name: "Role",
diff --git a/frontend/web/src/views/module_system/tenant/index.vue b/frontend/web/src/views/module_system/tenant/index.vue
index 3e8c277f..314a35c9 100644
--- a/frontend/web/src/views/module_system/tenant/index.vue
+++ b/frontend/web/src/views/module_system/tenant/index.vue
@@ -1,4 +1,4 @@
-<!-- 租户管理：Art + useTable；操作列前 3 个为 ArtButtonTable，其余收入「更多」下拉 -->
+<!-- 租户管理：Art + useTable；操作列前 3 个为 FaButtonTable，其余收入「更多」下拉 -->
 <template>
   <div class="fa-full-height">
     <FaSearchBar
@@ -99,8 +99,6 @@ import { useTable } from "@/hooks/core/useTable";
 import { useCrudDialog } from "@/hooks/core/useCrudDialog";
 import { useTableSelection } from "@/hooks/core/useTableSelection";
 import { confirmDelete, confirmBatchDelete } from "@/hooks/core/useConfirm";
-import type { SearchFormItem } from "@/components/forms/fa-search-bar/index.vue";
-import type { FormItem } from "@/components/forms/fa-form/index.vue";
 import type { ColumnOption } from "@/types/component";
 import TenantAPI, {
   type TenantCreateForm,
@@ -109,6 +107,19 @@ import TenantAPI, {
   type TenantUpdateForm,
 } from "@/api/module_system/tenant";
 import { useAuth } from "@/hooks/core/useAuth";
+import FaSearchBar from "@/components/forms/fa-search-bar/index.vue";
+import FaForm from "@/components/forms/fa-form/index.vue";
+import FaButtonTable from "@/components/forms/fa-button-table/index.vue";
+import type { SearchFormItem } from "@/components/forms/fa-search-bar/index.vue";
+import type { FormItem } from "@/components/forms/fa-form/index.vue";
+import {
+  ElTag,
+  ElMessage,
+  ElTooltip,
+  ElDropdown,
+  ElDropdownMenu,
+  ElDropdownItem,
+} from "element-plus";
 
 defineOptions({
   name: "Tenant",
@@ -572,7 +583,11 @@ function onResetSearch() {
 }
 
 async function handleSubmit() {
-  const valid = await dataFormRef.value!.validate().catch(() => false);
+  const formRef = dataFormRef.value;
+  if (!formRef) return;
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
+  const valid = await formRef.validate().catch(() => false);
   if (!valid) return;
   submitLoading.value = true;
   const id = formData.value.id as number | undefined;
diff --git a/frontend/web/src/views/module_system/user/components/DeptTree.vue b/frontend/web/src/views/module_system/user/components/FaDeptTree.vue
similarity index 99%
rename from frontend/web/src/views/module_system/user/components/DeptTree.vue
rename to frontend/web/src/views/module_system/user/components/FaDeptTree.vue
index 7fd6aed1..ff16dc99 100644
--- a/frontend/web/src/views/module_system/user/components/DeptTree.vue
+++ b/frontend/web/src/views/module_system/user/components/FaDeptTree.vue
@@ -53,7 +53,7 @@
 <script setup lang="ts">
 import { Search, Switch } from "@element-plus/icons-vue";
 import DeptAPI, { DeptPageQuery } from "@/api/module_system/dept";
-import { formatTree } from "@utils/common";
+import { formatTree } from "@utils";
 import type { FilterNodeMethodFunction, TreeInstance } from "element-plus";
 
 const props = defineProps({
diff --git a/frontend/web/src/views/module_system/user/index.vue b/frontend/web/src/views/module_system/user/index.vue
index 72acff2f..23a5e61f 100644
--- a/frontend/web/src/views/module_system/user/index.vue
+++ b/frontend/web/src/views/module_system/user/index.vue
@@ -10,7 +10,7 @@
             <b>部门</b>
           </template>
           <ElScrollbar class="dept-tree-scroll min-h-0 flex-1">
-            <DeptTree
+            <FaDeptTree
               v-model="deptFilterId"
               class="dept-tree-inner"
               @node-click="handleDeptNodeClick"
@@ -36,7 +36,7 @@
           @reset="onResetSearch"
         >
           <template #created_id>
-            <UserTableSelect
+            <FaUserTableSelect
               :model-value="searchForm.created_id == null ? undefined : searchForm.created_id"
               @update:model-value="(v: number | undefined) => (searchForm.created_id = v)"
               @confirm-click="afterUserSelectSearch"
@@ -211,7 +211,6 @@ defineOptions({
 
 import { UserFilled } from "@element-plus/icons-vue";
 import { ElAvatar } from "element-plus";
-import { useAppStore } from "@stores/modules/app.store";
 import { DeviceEnum } from "@/enums/settings/device.enum";
 import { ResultEnum } from "@/enums/api/result.enum";
 import { useTable } from "@/hooks/core/useTable";
@@ -220,25 +219,26 @@ import { useTableSelection } from "@/hooks/core/useTableSelection";
 import { useCrudDialog } from "@/hooks/core/useCrudDialog";
 import { confirmDelete, confirmBatchDelete, confirmToggleStatus } from "@/hooks/core/useConfirm";
 import { cleanEmptyArrayParams, stripPaginationParams } from "@/utils/query";
-import type { SearchFormItem } from "@/components/forms/fa-search-bar/index.vue";
-import type { FormItem } from "@/components/forms/fa-form/index.vue";
-import type { IContentConfig, IObject } from "@/components/modal/types";
 import UserAPI, {
   type UserForm,
   type UserInfo,
   type UserPageQuery,
 } from "@/api/module_system/user";
-import { formatTree } from "@utils/common";
+import { formatTree, renderTableOperationCell, type TableOperationAction } from "@utils";
 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 "@stores";
-import type { DescriptionsItem } from "@/components/others/fa-descriptions/index.vue";
+import { useAppStore, useUserStore } from "@stores";
 import { useAuth } from "@/hooks/core/useAuth";
 import type { ColumnOption } from "@/types/component";
-import { renderTableOperationCell, type TableOperationAction } from "@utils/table";
+import FaUserTableSelect from "@/components/forms/fa-search-bar/FaUserTableSelect.vue";
+import type { DescriptionsItem } from "@/components/others/fa-descriptions/index.vue";
+import type { SearchFormItem } from "@/components/forms/fa-search-bar/index.vue";
+import type { FormItem } from "@/components/forms/fa-form/index.vue";
+import type { IContentConfig, IObject } from "@/components/modal/types";
+import FaSearchBar from "@/components/forms/fa-search-bar/index.vue";
+import FaForm from "@/components/forms/fa-form/index.vue";
+import { ElTag, ElMessage, ElMessageBox } from "element-plus";
 
 const { hasAuth } = useAuth();
 const appStore = useAppStore();
diff --git a/frontend/web/src/views/module_task/cronjob/job/index.vue b/frontend/web/src/views/module_task/cronjob/job/index.vue
index 27a52607..1f950aea 100644
--- a/frontend/web/src/views/module_task/cronjob/job/index.vue
+++ b/frontend/web/src/views/module_task/cronjob/job/index.vue
@@ -337,7 +337,7 @@
     </FaDrawer>
 
     <FaDialog v-model="jobStateVisible" title="执行元数据" width="800px">
-      <JsonPretty :value="jobStateData" height="400px" />
+      <FaJsonPretty :value="jobStateData" height="400px" />
       <template #footer>
         <ElButton type="primary" @click="jobStateVisible = false">关闭</ElButton>
       </template>
@@ -359,7 +359,7 @@ import type { SearchFormItem } from "@/components/forms/fa-search-bar/index.vue"
 import FaTable from "@/components/tables/fa-table/index.vue";
 import FaTableHeader from "@/components/tables/fa-table-header/index.vue";
 import FaTableHeaderLeft from "@/components/tables/fa-table-header-left/index.vue";
-import JsonPretty from "@/components/others/fa-json-pretty/index.vue";
+import FaJsonPretty from "@/components/others/fa-json-pretty/index.vue";
 import { useTable } from "@/hooks/core/useTable";
 import type { ColumnOption } from "@/types/component";
 import { Calendar, Clock, Timer } from "@element-plus/icons-vue";
diff --git a/frontend/web/src/views/module_task/cronjob/node/index.vue b/frontend/web/src/views/module_task/cronjob/node/index.vue
index b53d1209..b9567a0c 100644
--- a/frontend/web/src/views/module_task/cronjob/node/index.vue
+++ b/frontend/web/src/views/module_task/cronjob/node/index.vue
@@ -276,7 +276,7 @@ defineOptions({
 });
 
 import NodeAPI, { NodeTable, NodeForm, TriggerType } from "@/api/module_task/cronjob/node";
-import { useDictStore } from "@stores/index";
+import { useDictStore } from "@stores";
 import FaDialog from "@/components/modal/fa-dialog/index.vue";
 import FaForm from "@/components/forms/fa-form/index.vue";
 import type { FormItem } from "@/components/forms/fa-form/index.vue";
@@ -285,15 +285,15 @@ import FaTableHeader from "@/components/tables/fa-table-header/index.vue";
 import FaTableHeaderLeft from "@/components/tables/fa-table-header-left/index.vue";
 import FaSearchBar from "@/components/forms/fa-search-bar/index.vue";
 import type { SearchFormItem } from "@/components/forms/fa-search-bar/index.vue";
+import IntervalTab from "@/components/others/fa-interval-tab/index.vue";
 import type { ColumnOption } from "@/types/component";
 import { useAuth } from "@/hooks/core/useAuth";
-import { renderTableOperationCell, type TableOperationAction } from "@utils/table";
+import { renderTableOperationCell, type TableOperationAction } from "@utils";
 import { useTable } from "@/hooks/core/useTable";
 import { computed, nextTick, onMounted, reactive, ref } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { vue3CronPlus } from "vue3-cron-plus";
 import "vue3-cron-plus/dist/index.css";
-import IntervalTab from "@/components/others/fa-interval-tab/index.vue";
 import Codemirror, { CmComponentRef } from "codemirror-editor-vue3";
 import type { EditorConfiguration } from "codemirror";
 import "codemirror/mode/python/python.js";
diff --git a/frontend/web/src/views/module_task/workflow/components/DynamicNode.vue b/frontend/web/src/views/module_task/workflow/components/FaDynamicNode.vue
similarity index 100%
rename from frontend/web/src/views/module_task/workflow/components/DynamicNode.vue
rename to frontend/web/src/views/module_task/workflow/components/FaDynamicNode.vue
diff --git a/frontend/web/src/views/module_task/workflow/components/EdgeConfigPanel.vue b/frontend/web/src/views/module_task/workflow/components/FaEdgeConfigPanel.vue
similarity index 100%
rename from frontend/web/src/views/module_task/workflow/components/EdgeConfigPanel.vue
rename to frontend/web/src/views/module_task/workflow/components/FaEdgeConfigPanel.vue
diff --git a/frontend/web/src/views/module_task/workflow/components/NodeConfigPanel.vue b/frontend/web/src/views/module_task/workflow/components/FaNodeConfigPanel.vue
similarity index 100%
rename from frontend/web/src/views/module_task/workflow/components/NodeConfigPanel.vue
rename to frontend/web/src/views/module_task/workflow/components/FaNodeConfigPanel.vue
diff --git a/frontend/web/src/views/module_task/workflow/components/WorkflowDesignDrawer.vue b/frontend/web/src/views/module_task/workflow/components/FaWorkflowDesignDrawer.vue
similarity index 99%
rename from frontend/web/src/views/module_task/workflow/components/WorkflowDesignDrawer.vue
rename to frontend/web/src/views/module_task/workflow/components/FaWorkflowDesignDrawer.vue
index 82f4051d..8847f5ca 100644
--- a/frontend/web/src/views/module_task/workflow/components/WorkflowDesignDrawer.vue
+++ b/frontend/web/src/views/module_task/workflow/components/FaWorkflowDesignDrawer.vue
@@ -155,14 +155,14 @@
         </ElSplitterPanel>
 
         <ElSplitterPanel v-if="updateState" size="320px" :min="280" :max="400">
-          <NodeConfigPanel
+          <FaNodeConfigPanel
             v-if="updateState === 'node'"
             :node="selectedNode"
             @close="handleClosePanel"
             @save="handleSaveNode"
             @delete="handleDeleteNode"
           />
-          <EdgeConfigPanel
+          <FaEdgeConfigPanel
             v-if="updateState === 'edge'"
             :edge="selectedEdge"
             @close="handleClosePanel"
@@ -198,9 +198,7 @@ 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 FaDynamicNode from "./FaDynamicNode.vue";
 import FaForm from "@/components/forms/fa-form/index.vue";
 import type { FormItem } from "@/components/forms/fa-form/index.vue";
 import WorkflowDefinitionAPI, {
@@ -513,7 +511,7 @@ const loadNodeTypes = async () => {
 
       const newTypes: Record<string, Component> = {};
       res.data.data.forEach((nodeType: any) => {
-        newTypes[nodeType.code] = markRaw(DynamicNode);
+        newTypes[nodeType.code] = markRaw(FaDynamicNode);
       });
 
       nodeTypesRegistry.value = newTypes;
@@ -669,7 +667,6 @@ function handleDeleteNode() {
   if (!selectedNode.value) return;
   const nodeId = selectedNode.value!.id;
   if (!nodeId) return;
-
   (async () => {
     try {
       await ElMessageBox.confirm("确定要删除该节点吗？", "提示", {
@@ -699,7 +696,6 @@ function handleDeleteEdge() {
   if (!selectedEdge.value) return;
   const edgeId = selectedEdge.value!.id;
   if (!edgeId) return;
-
   (async () => {
     try {
       await ElMessageBox.confirm("确定要删除该连线吗？", "提示", {
diff --git a/frontend/web/src/views/module_task/workflow/definition/index.vue b/frontend/web/src/views/module_task/workflow/definition/index.vue
index e2c85733..18a95c2a 100644
--- a/frontend/web/src/views/module_task/workflow/definition/index.vue
+++ b/frontend/web/src/views/module_task/workflow/definition/index.vue
@@ -104,7 +104,7 @@
       </FaTable>
     </ElCard>
 
-    <WorkflowDesignDrawer
+    <FaWorkflowDesignDrawer
       v-model:visible="createVisible"
       :workflow="selectedWorkflow"
       @refresh="onDrawerRefresh"
@@ -129,7 +129,6 @@ import type { ColumnOption } from "@/types/component";
 import { ArrowDown } from "@element-plus/icons-vue";
 import { ElMessage, ElMessageBox, ElTag } from "element-plus";
 import { computed, h, ref } from "vue";
-import WorkflowDesignDrawer from "../components/WorkflowDesignDrawer.vue";
 
 const BATCH_DELETE_MSG = "确认删除选中的工作流吗？";
 
diff --git a/frontend/web/tsconfig.json b/frontend/web/tsconfig.json
index d1948a39..88c08f93 100755
--- a/frontend/web/tsconfig.json
+++ b/frontend/web/tsconfig.json
@@ -1,37 +1,38 @@
 {
   "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
+    "target": "ES2020",
+    "module": "ESNext",
     "moduleResolution": "bundler",
-    "lib": ["esnext", "dom"],
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "lib": ["ES2024", "DOM", "DOM.Iterable"],
+    "types": ["vite/client", "node"],
+    "skipLibCheck": true,
     "paths": {
       "@/*": ["./src/*"],
-      "@views": ["./src/views"],
       "@views/*": ["./src/views/*"],
       "@imgs": ["./src/assets/images"],
-      "@imgs/*": ["./src/assets/images/*"],
       "@icons": ["./src/assets/images/svg"],
-      "@icons/*": ["./src/assets/images/svg/*"],
       "@utils": ["./src/utils"],
       "@utils/*": ["./src/utils/*"],
       "@stores": ["./src/store"],
-      "@stores/*": ["./src/store/*"],
-      "@styles": ["./src/styles"],
-      "@plugins/*": ["./src/plugins/*"],
-      "@styles/*": ["./src/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"]
+      "@plugins": ["./src/plugins"],
+      "@styles": ["./src/styles"]
+    }
   },
-  "include": ["src/types/**/*.d.ts", "src/**/*.ts", "src/**/*.vue", "vite.config.ts"],
-  "exclude": ["node_modules", "dist", "**/*.js"]
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/types/import/*.d.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "build/vitePluginStart.ts"
+  ],
+  "exclude": ["node_modules", "dist"]
 }
diff --git a/frontend/web/vite.config.ts b/frontend/web/vite.config.ts
index 71c782e9..29a65361 100755
--- a/frontend/web/vite.config.ts
+++ b/frontend/web/vite.config.ts
@@ -1,7 +1,7 @@
-import fs from "node:fs";
-import { defineConfig, loadEnv, type Plugin } from "vite";
+import { defineConfig, loadEnv } from "vite";
 import vue from "@vitejs/plugin-vue";
-import path from "path";
+import fs from "node:fs";
+import path from "node:path";
 import { fileURLToPath } from "url";
 import vueDevTools from "vite-plugin-vue-devtools";
 import viteCompression from "vite-plugin-compression";
@@ -10,8 +10,11 @@ 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 vitePluginStart from "./build/vitePluginStart";
 import { name, version, engines, dependencies, devDependencies } from "./package.json";
 
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
 const __APP_INFO__ = {
   pkg: { name, version, engines, dependencies, devDependencies },
   buildTimestamp: Date.now(),
@@ -24,94 +27,30 @@ const __APP_INFO__ = {
 function elementPlusComponentStyleIncludes(rootDir: string): string[] {
   const componentsDir = path.join(rootDir, "node_modules", "element-plus", "es", "components");
   try {
-    return fs
+    const dirs = fs
       .readdirSync(componentsDir, { withFileTypes: true })
-      .filter((e) => e.isDirectory())
-      .filter((e) => fs.existsSync(path.join(componentsDir, e.name, "style", "index.mjs")))
-      .map((e) => `element-plus/es/components/${e.name}/style/index`);
+      .filter((e) => e.isDirectory());
+    const result: string[] = [];
+    for (const d of dirs) {
+      const styleDir = path.join(componentsDir, d.name, "style");
+      if (fs.existsSync(path.join(styleDir, "index.mjs"))) {
+        result.push(`element-plus/es/components/${d.name}/style/index`);
+      }
+      if (fs.existsSync(path.join(styleDir, "css.mjs"))) {
+        result.push(`element-plus/es/components/${d.name}/style/css`);
+      }
+    }
+    return result;
   } catch {
     return [];
   }
 }
 
-/**
- * 多在路由/异步组件里才加载的依赖；提前预构建可减少「点一下整页 reload」。
- * 不把 dependencies 全量打入 optimizeDeps，以免拖慢首次 dev 启动。
- */
-const OPTIMIZE_DEPS_LAZY_CHUNKS = [
-  "xgplayer",
-  "@vue-flow/core",
-  "@vue-flow/background",
-  "@vue-flow/controls",
-  "@vue-flow/minimap",
-  "@wangeditor-next/editor",
-  "codemirror",
-  "vue-json-pretty",
-  "vue-web-terminal",
-  "vue3-cron-plus",
-  "@iconify/vue",
-  "vuedraggable",
-  "vue-draggable-plus",
-  "qrcode.vue",
-  "xlsx",
-  "markdown-it",
-  "highlight.js",
-  "dagre",
-  "dompurify",
-  "js-beautify",
-  "markdown-it-highlightjs",
-  "animate.css",
-  "clipboard",
-  "crypto-js",
-  "file-saver",
-  "mitt",
-  "ohash",
-  "pinia-plugin-persistedstate",
-] as const;
-
-function buildOptimizeDepsInclude(rootDir: string): string[] {
-  const core = [
-    "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",
-  ];
-
-  return [
-    ...new Set([
-      ...core,
-      ...OPTIMIZE_DEPS_LAZY_CHUNKS,
-      ...elementPlusComponentStyleIncludes(rootDir),
-    ]),
-  ];
-}
-
 export default ({ mode }: { mode: string }) => {
   const root = process.cwd();
   const env = loadEnv(mode, root);
   const isProduction = mode === "production";
 
-  console.log(`🚀 VITE_API_BASE_URL = ${env.VITE_API_BASE_URL}`);
-  console.log(`🚀 VERSION = ${env.VITE_VERSION}`);
-
   return defineConfig({
     define: {
       __APP_VERSION__: JSON.stringify(env.VITE_VERSION),
@@ -135,15 +74,17 @@ export default ({ mode }: { mode: string }) => {
       alias: {
         "@": fileURLToPath(new URL("./src", import.meta.url)),
         "@views": resolvePath("src/views"),
+        "@views/*": resolvePath("src/views/*"),
         "@imgs": resolvePath("src/assets/images"),
         "@icons": resolvePath("src/assets/images/svg"),
         "@utils": resolvePath("src/utils"),
         "@stores": resolvePath("src/store"),
+        "@plugins": resolvePath("src/plugins"),
         "@styles": resolvePath("src/styles"),
       },
     },
     build: {
-      target: "es2020",
+      target: "es2024",
       outDir: "dist",
       chunkSizeWarningLimit: 4000,
       minify: isProduction ? "terser" : false,
@@ -160,49 +101,53 @@ export default ({ mode }: { mode: string }) => {
             },
           }
         : {},
-      dynamicImportVarsOptions: {
-        warnOnError: true,
-        exclude: [],
-        include: ["src/views/**/*.vue"],
-      },
       rollupOptions: {
         output: {
           manualChunks(id) {
-            if (id.includes("node_modules")) {
-              if (id.includes("echarts") || id.includes("zrender")) 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";
-              if (id.includes("@vue-flow")) return "vue-flow";
-              if (id.includes("highlight.js") || id.includes("highlightjs")) return "highlight";
-              if (id.includes("xgplayer")) return "xgplayer";
-              if (id.includes("markdown-it")) return "markdown";
-              if (id.includes("@iconify-json")) return "iconify-icons";
+            if (!id.includes("node_modules")) return;
+            if (id.includes("echarts") || id.includes("zrender")) return "echarts";
+            if (id.includes("element-plus")) return "element-plus";
+            if (id.includes("@wangeditor")) return "wangeditor";
+            if (id.includes("codemirror")) return "codemirror";
+            if (id.includes("exceljs")) return "exceljs";
+            if (id.includes("@vue-flow") || id.includes("dagre")) return "vue-flow";
+            if (id.includes("highlight.js") || id.includes("highlightjs")) return "highlight";
+            if (id.includes("xgplayer")) return "xgplayer";
+            if (id.includes("markdown-it")) return "markdown";
+            if (id.includes("@iconify-json")) return "iconify-icons";
+            if (id.includes("xlsx")) return "xlsx";
+            if (id.includes("crypto-js")) return "crypto";
+            if (id.includes("js-beautify")) return "beautify";
+            if (id.includes("dayjs")) return "dayjs";
+            if (
+              id.includes("vue/") ||
+              id.includes("vue-router") ||
+              id.includes("pinia") ||
+              id.includes("vue-i18n") ||
+              id.includes("@vueuse")
+            )
+              return "vue-vendor";
 
-              const module = id
-                .toString()
-                // 兼容 pnpm 嵌套路径：node_modules/.pnpm/pkg@ver/node_modules/real-pkg/...
-                .replace(/^.*[/\\]node_modules[/\\]\.pnpm[/\\][^/\\]+[/\\]node_modules[/\\]/, "")
-                .split("node_modules/")
-                .pop()
-                ?.split("/")[0];
-              // 跳过被 tree-shake 清空的模块，避免生成空 chunk
-              if (
-                !module ||
-                [
-                  "birpc",
-                  "hookable",
-                  "tslib",
-                  "copy-anything",
-                  "danmu.js",
-                  "lodash-unified",
-                  "perfect-debounce",
-                ].includes(module)
-              )
-                return;
-              return module;
-            }
+            const module = id
+              .toString()
+              .replace(/^.*[/\\]node_modules[/\\]\.pnpm[/\\][^/\\]+[/\\]node_modules[/\\]/, "")
+              .split("node_modules/")
+              .pop()
+              ?.split("/")[0];
+            if (
+              !module ||
+              [
+                "birpc",
+                "hookable",
+                "tslib",
+                "copy-anything",
+                "danmu.js",
+                "lodash-unified",
+                "perfect-debounce",
+              ].includes(module)
+            )
+              return;
+            return module;
           },
           entryFileNames: "js/[name].[hash].js",
           chunkFileNames: "js/[name].[hash].js",
@@ -220,52 +165,21 @@ export default ({ mode }: { mode: string }) => {
           },
         },
       },
+      dynamicImportVarsOptions: {
+        warnOnError: true,
+        exclude: [],
+        include: ["src/views/**/*.vue"],
+      },
     },
     plugins: [
-      // @vueuse/core 已发布产物中存在位置无效的 /* #__PURE__ */ 注释（单独成行或包裹对象字面量），
-      // 导致 Rollup 无法识别而告警。在构建阶段修复这些注释位置，从根源消除告警。
-      {
-        name: "fix-vueuse-pure-annotations",
-        enforce: "pre",
-        transform(code: string, id: string) {
-          if (id.includes("@vueuse/core") && id.endsWith(".js")) {
-            // 移除单独成行的 /* #__PURE__ */（不在函数调用前，Rollup 无法识别）
-            code = code.replace(/^\s*\/\* #__PURE__ \*\/\s*$/gm, "");
-            // 修复括号内包裹对象字面量的 /* #__PURE__ */，如 const x = (/* #__PURE__ */ { ... })
-            code = code.replace(/\(\/\* #__PURE__ \*\/\s*\{/g, "({");
-            return code;
-          }
-          return null;
-        },
-      } satisfies Plugin,
       vue(),
+      vitePluginStart(),
       tailwindcss(),
+      /** 自动按需导入 API */
       AutoImport({
-        imports: [
-          "vue",
-          "vue-router",
-          "pinia",
-          "@vueuse/core",
-          "vue-i18n",
-          // Element Plus 组件/API：在 <script> 中通过 h() 或直接调用时需要自动导入
-          {
-            "element-plus": [
-              "ElMessageBox",
-              "ElTag",
-              "ElTooltip",
-              "ElDropdown",
-              "ElDropdownMenu",
-              "ElDropdownItem",
-            ],
-          },
-          // 自定义组件：在 <script> 中通过 h() 使用时需要自动导入
-          { "@/components/forms/fa-button-table/index.vue": [["default", "FaButtonTable"]] },
-          { "@/components/others/fa-json-pretty/index.vue": [["default", "JsonPretty"]] },
-          { "@/components/others/fa-copy-button/index.vue": [["default", "CopyButton"]] },
-          { "@/components/others/fa-menu-routeIcon/index.vue": [["default", "MenuRouteIcon"]] },
-        ],
+        imports: ["vue", "vue-router", "pinia", "@vueuse/core", "vue-i18n"],
         dts: "src/types/import/auto-imports.d.ts",
-        resolvers: [ElementPlusResolver({ importStyle: "sass" })],
+        resolvers: [ElementPlusResolver()],
         eslintrc: {
           enabled: true,
           filepath: "./.auto-import.json",
@@ -275,30 +189,83 @@ export default ({ mode }: { mode: string }) => {
       }),
       Components({
         dts: "src/types/import/components.d.ts",
-        resolvers: [ElementPlusResolver({ importStyle: "sass" })],
-        dirs: ["src/components", "src/**/components"],
+        resolvers: [ElementPlusResolver()],
       }),
       ElementPlus({
         useSource: true,
       }),
       viteCompression({
-        verbose: false,
-        disable: false,
-        algorithm: "gzip",
-        ext: ".gz",
-        threshold: 10240,
-        deleteOriginFile: false,
+        verbose: false, // 是否在控制台输出压缩结果
+        disable: false, // 是否禁用
+        algorithm: "gzip", // 压缩算法
+        ext: ".gz", // 压缩后的文件名后缀
+        threshold: 10240, // 只有大小大于该值的资源会被处理 10240B = 10KB
+        deleteOriginFile: false, // 压缩后是否删除原文件
       }),
       /** 仅开发启用：避免生产包体积膨胀与运行期 DevTools 开销 */
       ...(isProduction ? [] : [vueDevTools()]),
     ],
     optimizeDeps: {
-      include: buildOptimizeDepsInclude(root),
+      include: [
+        "@vue-flow/core",
+        "@vue-flow/background",
+        "@vue-flow/controls",
+        "@vue-flow/minimap",
+        "vue",
+        "vue-router",
+        "vue-i18n",
+        "vue-json-pretty",
+        "vue-web-terminal",
+        "vue3-cron-plus",
+        "vuedraggable",
+        "vue-draggable-plus",
+        "element-plus",
+        "@element-plus/icons-vue",
+        "element-plus/es",
+        "element-plus/es/locale/lang/en",
+        "element-plus/es/locale/lang/zh-cn",
+        "pinia",
+        "axios",
+        "@vueuse/core",
+        "codemirror",
+        "codemirror-editor-vue3",
+        "@wangeditor-next/editor",
+        "@wangeditor-next/editor-for-vue",
+        "exceljs",
+        "echarts/core",
+        "echarts/renderers",
+        "echarts/charts",
+        "echarts/components",
+        "nprogress",
+        "qs",
+        "path-to-regexp",
+        "path-browserify",
+        "xgplayer",
+        "@iconify/vue",
+        "qrcode.vue",
+        "xlsx",
+        "highlight.js",
+        "dagre",
+        "dompurify",
+        "js-beautify",
+        "markdown-it",
+        "markdown-it-highlightjs",
+        "clipboard",
+        "crypto-js",
+        "file-saver",
+        "mitt",
+        "ohash",
+        "pinia-plugin-persistedstate",
+        ...elementPlusComponentStyleIncludes(root),
+      ],
     },
     css: {
       preprocessorOptions: {
         scss: {
-          additionalData: `@use "@/styles/variables.scss" as *;`,
+          additionalData: `
+            @use "@styles/core/el-light.scss" as *; 
+            @use "@styles/core/mixin.scss" as *;
+          `,
         },
       },
       postcss: {